perf(系统管理-部门管理): 优化部门管理页面显示

src/modules/smart-system/views/dept/SysDeptTreeList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="full-height dept-container" style="padding: 10px">
+  <div class="full-height page-container" :class="prefixCls">
     <div class="full-height left-tree" style="padding: 10px; background: white">
       <div>
         <a-button
@@ -57,8 +57,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
@@ -72,142 +72,114 @@
   import SysDeptEditModal from './components/SysDeptEditModal.vue';
   import { deleteApi, saveUpdateBatchApi } from './SysDept.api';
   import { useVxeDelete } from '@/hooks/web/useCrud';
+  import { useDesign } from '@/hooks/web/useDesign';
 
+  const { t } = useI18n();
+  const { prefixCls } = useDesign('smart-system-dept');
+
+  const treeRef = ref();
+  const formRef = ref();
+
+  const [registerModal, { openModal }] = useModal();
+
+  const { buttonSizeConfig } = useSizeSetting();
   /**
-   * 部门管理树
+   * 当前选中节点的code
    */
-  export default defineComponent({
-    name: 'SysDeptTreeList',
-    components: {
-      SysDeptTree,
-      PlusOutlined,
-      DeleteOutlined,
-      SysDeptEdit,
-      SysDeptEditModal,
-    },
-    setup() {
-      const gridRef = ref();
-      const treeRef = ref();
-      const formRef = ref();
-
-      const { t } = useI18n();
-      const parentFieldVisible = ref(false);
-
-      const [registerModal, { openModal }] = useModal();
-
-      /**
-       * 当前选中节点的code
-       */
-      const currentDeptRef = ref<Recordable | null>(null);
-      const handleTreeSelect = (_: Array<number>, { selectedNodes, selected }) => {
-        if (!selected || selectedNodes.length === 0) {
-          currentDeptRef.value = null;
-        }
-        currentDeptRef.value = selectedNodes[0];
-      };
-
-      const reloadDeptTree = () => {
-        treeRef.value.reload();
-      };
-
-      /**
-       * 添加操作函数
-       */
-      const handleAdd = () => {
-        openModal(true, {
-          parentId: 0,
-          parentName: '根',
-        });
-      };
-      /**
-       * 添加下级
-       */
-      const handleAddChild = () => {
-        const currentDept = unref(currentDeptRef);
-        if (!currentDept) {
-          errorMessage(t('system.views.dept.message.selectDeptError'));
-          return false;
-        }
-        const { deptId, deptName } = unref(currentDeptRef) || {};
-        openModal(true, {
-          parentId: deptId,
-          parentName: deptName,
-        });
-      };
-
-      /**
-       * 删除hook
-       */
-      const { handleDeleteById } = useVxeDelete(null, t, deleteApi, {
-        idField: 'deptId',
-        afterDelete: () => reloadDeptTree(),
-      });
-      const handleDelete = () => {
-        const currentDept = unref(currentDeptRef);
-        if (!currentDept) {
-          errorMessage(t('common.notice.deleteChoose'));
-          return false;
-        }
-        handleDeleteById(currentDept.deptId);
-      };
-
-      /**
-       * 保存操作
-       */
-      const saveLoading = ref(false);
-      const handleSave = async () => {
-        const formModel = await unref(formRef).validate();
-        try {
-          saveLoading.value = true;
-          await saveUpdateBatchApi([formModel]);
-          console.log();
-          successMessage(t('common.message.saveSuccess'));
-          await reloadDeptTree();
-        } finally {
-          saveLoading.value = false;
-        }
-      };
-      return {
-        gridRef,
-        treeRef,
-        handleTreeSelect,
-        parentFieldVisible,
-        handleDelete,
-        ...useSizeSetting(),
-        handleAdd,
-        registerModal,
-        reloadDeptTree,
-        currentDeptRef,
-        handleAddChild,
-        formRef,
-        handleSave,
-        saveLoading,
-      };
-    },
+  const currentDeptRef = ref<Recordable | null>(null);
+  const handleTreeSelect = (_: Array<number>, { selectedNodes, selected }) => {
+    if (!selected || selectedNodes.length === 0) {
+      currentDeptRef.value = null;
+    }
+    currentDeptRef.value = selectedNodes[0];
+  };
+
+  const reloadDeptTree = () => {
+    treeRef.value.reload();
+  };
+
+  /**
+   * 添加操作函数
+   */
+  const handleAdd = () => {
+    openModal(true, {
+      parentId: 0,
+      parentName: '根',
+    });
+  };
+  /**
+   * 添加下级
+   */
+  const handleAddChild = () => {
+    const currentDept = unref(currentDeptRef);
+    if (!currentDept) {
+      errorMessage(t('system.views.dept.message.selectDeptError'));
+      return false;
+    }
+    const { deptId, deptName } = unref(currentDeptRef) || {};
+    openModal(true, {
+      parentId: deptId,
+      parentName: deptName,
+    });
+  };
+
+  /**
+   * 删除hook
+   */
+  const { handleDeleteById } = useVxeDelete(null, t, deleteApi, {
+    idField: 'deptId',
+    afterDelete: () => reloadDeptTree(),
   });
+  const handleDelete = () => {
+    const currentDept = unref(currentDeptRef);
+    if (!currentDept) {
+      errorMessage(t('common.notice.deleteChoose'));
+      return false;
+    }
+    handleDeleteById(currentDept.deptId);
+  };
+
+  /**
+   * 保存操作
+   */
+  const saveLoading = ref(false);
+  const handleSave = async () => {
+    const formModel = await unref(formRef).validate();
+    try {
+      saveLoading.value = true;
+      await saveUpdateBatchApi([formModel]);
+      console.log();
+      successMessage(t('common.message.saveSuccess'));
+      await reloadDeptTree();
+    } finally {
+      saveLoading.value = false;
+    }
+  };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
   @leftWidth: 40%;
+  @prefix-cls: ~'@{namespace}-smart-system-dept';
 
-  .left-tree {
-    display: inline-block;
-    width: @leftWidth;
-  }
-
-  .right-tab {
-    display: inline-block;
-    width: calc(60% - 10px);
-    margin-left: 10px;
-    padding: 10px;
-    float: right;
-    background: white;
+  .@{prefix-cls} {
+    .left-tree {
+      display: inline-block;
+      width: @leftWidth;
+    }
 
-    :deep(.ant-tabs) {
-      height: 100%;
+    .right-tab {
+      display: inline-block;
+      width: calc(60% - 5px);
+      padding: 10px;
+      float: right;
+      background: white;
 
-      .ant-tabs-content {
+      .ant-tabs {
         height: 100%;
+
+        .ant-tabs-content {
+          height: 100%;
+        }
       }
     }
   }

src/modules/smart-system/views/dept/SysDeptTreeListOld.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="full-height page-container">
+    <div class="full-height left-tree" style="padding: 10px; background: white">
+      <div>
+        <a-button
+          v-permission="'sys:dept:save'"
+          type="primary"
+          :size="buttonSizeConfig"
+          @click="handleAdd"
+        >
+          <plus-outlined />
+          {{ $t('common.button.add') }}
+        </a-button>
+        <a-button
+          type="primary"
+          v-permission="'sys:dept:save'"
+          :size="buttonSizeConfig"
+          style="margin-left: 5px"
+          @click="handleAddChild"
+        >
+          <plus-outlined />
+          {{ $t('system.views.dept.button.addChild') }}
+        </a-button>
+        <a-button
+          type="primary"
+          style="margin-left: 5px"
+          v-permission="'sys:dept:delete'"
+          danger
+          :size="buttonSizeConfig"
+          @click="handleDelete"
+        >
+          <delete-outlined />
+          {{ $t('common.button.delete') }}
+        </a-button>
+      </div>
+      <SysDeptTree style="margin-top: 5px" ref="treeRef" show-search @select="handleTreeSelect" />
+    </div>
+    <div class="full-height right-tab">
+      <a-tabs>
+        <a-tab-pane :tab="$t('system.views.dept.title.baseMessage')">
+          <sys-dept-edit ref="formRef" :filter-field="false" :dept-id="currentDeptRef?.deptId" />
+          <div style="text-align: right">
+            <a-button
+              :loading="saveLoading"
+              @click="handleSave"
+              :disabled="currentDeptRef === null || currentDeptRef === undefined"
+              style="margin-right: 10px; text-align: right"
+              type="primary"
+            >
+              {{ $t('common.button.save') }}
+            </a-button>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+    <SysDeptEditModal @after-save="reloadDeptTree" @register="registerModal" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+
+  import { useSizeSetting } from '@/hooks/setting/UseSizeSetting';
+  import { useModal } from '@/components/Modal';
+  import { errorMessage, successMessage } from '@/utils/message/SystemNotice';
+
+  import SysDeptTree from '../../components/SysDept/SysDeptTree.vue';
+  import SysDeptEdit from './components/SysDeptEdit.vue';
+  import SysDeptEditModal from './components/SysDeptEditModal.vue';
+  import { deleteApi, saveUpdateBatchApi } from './SysDept.api';
+  import { useVxeDelete } from '@/hooks/web/useCrud';
+
+  /**
+   * 部门管理树
+   */
+  export default defineComponent({
+    name: 'SysDeptTreeList',
+    components: {
+      SysDeptTree,
+      PlusOutlined,
+      DeleteOutlined,
+      SysDeptEdit,
+      SysDeptEditModal,
+    },
+    setup() {
+      const gridRef = ref();
+      const treeRef = ref();
+      const formRef = ref();
+
+      const { t } = useI18n();
+      const parentFieldVisible = ref(false);
+
+      const [registerModal, { openModal }] = useModal();
+
+      /**
+       * 当前选中节点的code
+       */
+      const currentDeptRef = ref<Recordable | null>(null);
+      const handleTreeSelect = (_: Array<number>, { selectedNodes, selected }) => {
+        if (!selected || selectedNodes.length === 0) {
+          currentDeptRef.value = null;
+        }
+        currentDeptRef.value = selectedNodes[0];
+      };
+
+      const reloadDeptTree = () => {
+        treeRef.value.reload();
+      };
+
+      /**
+       * 添加操作函数
+       */
+      const handleAdd = () => {
+        openModal(true, {
+          parentId: 0,
+          parentName: '根',
+        });
+      };
+      /**
+       * 添加下级
+       */
+      const handleAddChild = () => {
+        const currentDept = unref(currentDeptRef);
+        if (!currentDept) {
+          errorMessage(t('system.views.dept.message.selectDeptError'));
+          return false;
+        }
+        const { deptId, deptName } = unref(currentDeptRef) || {};
+        openModal(true, {
+          parentId: deptId,
+          parentName: deptName,
+        });
+      };
+
+      /**
+       * 删除hook
+       */
+      const { handleDeleteById } = useVxeDelete(null, t, deleteApi, {
+        idField: 'deptId',
+        afterDelete: () => reloadDeptTree(),
+      });
+      const handleDelete = () => {
+        const currentDept = unref(currentDeptRef);
+        if (!currentDept) {
+          errorMessage(t('common.notice.deleteChoose'));
+          return false;
+        }
+        handleDeleteById(currentDept.deptId);
+      };
+
+      /**
+       * 保存操作
+       */
+      const saveLoading = ref(false);
+      const handleSave = async () => {
+        const formModel = await unref(formRef).validate();
+        try {
+          saveLoading.value = true;
+          await saveUpdateBatchApi([formModel]);
+          console.log();
+          successMessage(t('common.message.saveSuccess'));
+          await reloadDeptTree();
+        } finally {
+          saveLoading.value = false;
+        }
+      };
+      return {
+        gridRef,
+        treeRef,
+        handleTreeSelect,
+        parentFieldVisible,
+        handleDelete,
+        ...useSizeSetting(),
+        handleAdd,
+        registerModal,
+        reloadDeptTree,
+        currentDeptRef,
+        handleAddChild,
+        formRef,
+        handleSave,
+        saveLoading,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  @leftWidth: 40%;
+
+  .left-tree {
+    display: inline-block;
+    width: @leftWidth;
+  }
+
+  .right-tab {
+    display: inline-block;
+    width: calc(60% - 5px);
+    padding: 10px;
+    float: right;
+    background: white;
+
+    :deep(.ant-tabs) {
+      height: 100%;
+
+      .ant-tabs-content {
+        height: 100%;
+      }
+    }
+  }
+</style>