[Feat 0000] 用户管理、部门管理页面开发

src/components/Form/src/jeecg/components/JSelectDept.vue

@@ -1,17 +1,8 @@
 <!--部门选择组件-->
 <template>
-  <div class="JSelectDept">
-    <JSelectBiz
-      @change="handleSelectChange"
-      @handleOpen="handleOpen"
-      :loading="loadingEcho"
-      v-bind="attrs"
-      :isCustomRenderTag="isCustomRenderTag"
-      :rowKey="getBindValue?.rowKey"
-    />
-    <a-form-item>
-      <DeptSelectModal @register="regModal" @getSelectResult="setValue" v-bind="getBindValue" :multiple="multiple" @close="handleClose" />
-    </a-form-item>
+  <div>
+    <JSelectBiz @handleOpen="handleOpen" :loading="loadingEcho" v-bind="attrs" @change="handleChange" />
+    <DeptSelectModal @register="regModal" @getSelectResult="setValue" v-bind="getBindValue" :multiple="multiple" />
   </div>
 </template>
 <script lang="ts">
@@ -23,7 +14,6 @@
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
   import { useAttrs } from '/@/hooks/core/useAttrs';
   import { SelectValue } from 'ant-design-vue/es/select';
-  import { cloneDeep } from 'lodash-es';
 
   export default defineComponent({
     name: 'JSelectDept',
@@ -36,8 +26,6 @@
       value: propTypes.oneOfType([propTypes.string, propTypes.array]),
       // 是否允许多选，默认 true
       multiple: propTypes.bool.def(true),
-      // 自定义渲染tag
-      isCustomRenderTag: propTypes.bool.def(true),
     },
     emits: ['options-change', 'change', 'select', 'update:value'],
     setup(props, { emit, refs }) {
@@ -45,15 +33,13 @@
       //注册model
       const [regModal, { openModal }] = useModal();
       //表单值
-      // const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
       //下拉框选项值
       const selectOptions = ref<SelectValue>([]);
       //下拉框选中值
       let selectValues = reactive<Recordable>({
         value: [],
       });
-      let tempSave: any = [];
-
       // 是否正在加载回显数据
       const loadingEcho = ref<boolean>(false);
       //下发 selectOptions,xxxBiz组件接收
@@ -70,26 +56,25 @@
        * 监听组件值
        */
       watchEffect(() => {
-        // 代码逻辑说明: [TV360X-840]用户授权，没有选择，点取消，也会回显一个选过的用户
-        tempSave = [];
         props.value && initValue();
       });
 
-      // 代码逻辑说明: 为了解决弹窗form初始化赋值问题 ---
+      //update-begin-author:liusq---date:20220609--for: 为了解决弹窗form初始化赋值问题 ---
       watch(
         () => props.value,
         () => {
           initValue();
         }
       );
+      //update-end-author:liusq---date:20220609--for: 为了解决弹窗form初始化赋值问题 ---
       /**
        * 监听selectValues变化
        */
-      // watch(selectValues, () => {
-      //   if (selectValues) {
-      //     state.value = selectValues.value;
-      //   }
-      // });
+      watch(selectValues, () => {
+        if (selectValues) {
+          state.value = selectValues.value;
+        }
+      });
       /**
        * 监听selectOptions变化
        */
@@ -115,13 +100,11 @@
       function initValue() {
         let value = props.value ? props.value : [];
         if (value && typeof value === 'string') {
-          // state.value = value.split(',');
+          state.value = value.split(',');
           selectValues.value = value.split(',');
-          tempSave = value.split(',');
         } else {
           // 【VUEN-857】兼容数组（行编辑的用法问题）
           selectValues.value = value;
-          tempSave = cloneDeep(value);
         }
       }
 
@@ -131,36 +114,24 @@
       function setValue(options, values) {
         selectOptions.value = options;
         //emitData.value = values.join(",");
-        // state.value = values;
+        state.value = values;
         selectValues.value = values;
-        send(values);
+        emit('update:value', values.join(','));
       }
       const getBindValue = Object.assign({}, unref(props), unref(attrs));
 
-      // 代码逻辑说明: 【TV360X-414】部门设置了默认值，查询重置变成空了(同步JSelectUser组件改法)
-      const handleClose = () => {
-        if (tempSave.length) {
-          selectValues.value = cloneDeep(tempSave);
-        } else {
-          send(tempSave);
-        }
-      };
-      const handleSelectChange = (values) => {
-        tempSave = cloneDeep(values);
-        send(tempSave);
-      };
-      const send = (values) => {
-        let result = typeof props.value == 'string' ? values.join(',') : values;
-        emit('update:value', result);
-        emit('change', result);
-        // 代码逻辑说明: 【TV360X-1648】用户编辑界面“所属部门”与“负责部门”联动出错（同步之前丢的代码）
-        if (!values || values.length == 0) {
-          emit('select', null, null);
-        }
-      };
+      //update-begin---author:wangshuai ---date:20230406  for：【issues/397】在表单中使用v-model:value绑定JSelectDept组件时无法清除已选择的数据------------
+      /**
+       * 值改变事件更新value值
+       * @param values
+       */
+      function handleChange(values) {
+        emit('update:value', values);
+      }
+      //update-end---author:wangshuai ---date:20230406  for：【issues/397】在表单中使用v-model:value绑定JSelectDept组件时无法清除已选择的数据------------
 
       return {
-        // state,
+        state,
         attrs,
         selectOptions,
         selectValues,
@@ -170,19 +141,13 @@
         regModal,
         setValue,
         handleOpen,
-        handleClose,
-        handleSelectChange,
+        handleChange,
       };
     },
   });
 </script>
 <style lang="less" scoped>
-  // 代码逻辑说明: 【QQYUN-9260】必填模式下会影响到弹窗内antd组件的样式
-  .JSelectDept {
-    > .ant-form-item {
-      display: none;
-    }
-  }
+  @ventSpace: zxm;
   .j-select-row {
     @width: 82px;
 
@@ -198,7 +163,7 @@
       width: 100%;
     }
 
-    :deep(.ant-select-search__field) {
+    :deep(.@{ventSpace}-select-search__field) {
       display: none !important;
     }
   }

src/views/system/depart/components/DepartLeftTree.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card :bordered="false" style="height: 100%">
+  <a-card style="height: 100%">
     <div class="j-table-operator" style="width: 100%">
       <a-button type="primary" preIcon="ant-design:plus-outlined" @click="onAddDepart">新增</a-button>
       <a-button type="primary" preIcon="ant-design:plus-outlined" @click="onAddChildDepart()">添加下级</a-button>

src/views/system/depart/index.vue

@@ -1,26 +1,22 @@
 <template>
-  <a-row :class="['p-4', `${prefixCls}--box`]" type="flex" :gutter="10" style="margin-top: 10px">
-    <a-col :xl="12" :lg="24" :md="24" style="margin-bottom: 10px">
+  <a-row :class="['p-4', `${prefixCls}--box`]" type="flex">
+    <a-col :span="12">
       <DepartLeftTree ref="leftTree" @select="onTreeSelect" @rootTreeData="onRootTreeData" />
     </a-col>
-    <a-col :xl="12" :lg="24" :md="24" style="margin-bottom: 10px">
-      <div style="height: 100%">
-        <a-tabs v-show="departData != null" defaultActiveKey="base-info">
+    <a-col :span="12" :class="`${prefixCls}--box-right`">
+      <a-card :bodyStyle="{ padding: '20px 24px 24px 24px' }">
+        <a-tabs v-show="departData != null" defaultActiveKey="base-info" type="card">
           <a-tab-pane tab="基本信息" key="base-info" forceRender style="position: relative">
-            <div style="padding: 20px">
-              <DepartFormTab :data="departData" :rootTreeData="rootTreeData" @success="onSuccess" />
-            </div>
+            <DepartFormTab :data="departData" :rootTreeData="rootTreeData" @success="onSuccess" />
           </a-tab-pane>
           <a-tab-pane tab="部门权限" key="role-info">
-            <div style="padding: 0 20px 20px">
-              <DepartRuleTab :data="departData" />
-            </div>
+            <DepartRuleTab :data="departData" />
           </a-tab-pane>
         </a-tabs>
         <div v-show="departData == null" style="padding-top: 40px">
           <a-empty description="尚未选择部门" />
         </div>
-      </div>
+      </a-card>
     </a-col>
   </a-row>
 </template>
@@ -44,7 +40,6 @@
 
   // 左侧树选择后触发
   function onTreeSelect(data) {
-    console.log('onTreeSelect: ', data);
     departData.value = data;
   }
 
@@ -62,11 +57,13 @@
   @import './index.less';
 </style>
 <style lang="less" scoped>
-  @ventSpace: zxm;
-  .@{ventSpace}-tabs {
-    border: 1px solid #44d3ff70 !important;
-    border-radius: 2px !important;
-    box-shadow: 0 0 20px #44b4ff33 inset;
-    background-color: #ffffff11 !important;
+  @prefix-cls: ~'@{namespace}-depart-manage';
+
+  .@{prefix-cls}--box {
+    // border: 1px solid #44d3ff70 !important;
+    // border-radius: 2px !important;
+    // box-shadow: 0 0 20px #44b4ff33 inset;
+    // background-color: @white;
+    box-sizing: border-box;
   }
 </style>

src/views/system/user/UserDrawer.vue

@@ -12,7 +12,7 @@
   </BasicDrawer>
 </template>
 <script lang="ts" setup>
-  import { defineComponent, ref, computed, unref, useAttrs } from 'vue';
+  import { ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './user.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
@@ -20,7 +20,7 @@
   import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
   // 声明Emits
   const emit = defineEmits(['success', 'register']);
-  const attrs = useAttrs();
+  // const attrs = useAttrs();
   const isUpdate = ref(true);
   const rowId = ref('');
   const departOptions = ref([]);

src/views/system/user/index.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="device-manager-box">
     <!--引用表格-->
@@ -51,7 +52,7 @@
 
 <script lang="ts" name="system-user" setup>
   //ts语法
-  import { ref, computed, unref } from 'vue';
+  import { unref } from 'vue';
   import { BasicTable, TableAction, ActionItem } from '/@/components/Table';
   import UserDrawer from './UserDrawer.vue';
   import UserRecycleBinModal from './UserRecycleBinModal.vue';
@@ -79,7 +80,7 @@
   const [registerAgentModal, { openModal: openAgentModal }] = useModal();
 
   // 列表页面公共参数、方法
-  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  const { tableContext, onExportXls, onImportXls } = useListPage({
     designScope: 'user-list',
     tableProps: {
       title: '用户列表',
@@ -108,7 +109,7 @@
   });
 
   //注册table数据
-  const [registerTable, { reload, updateTableDataRecord }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;
+  const [registerTable, { reload }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;
 
   /**
    * 新增事件