refactor: 优化系统管理相关代码

src/views/system/dept/DeptAddModal.vue

@@ -4,8 +4,7 @@
     :title="title"
     :mask-closable="false"
     :esc-to-close="false"
-    :modal-style="{ maxWidth: '520px' }"
-    width="90%"
+    :width="width >= 500 ? 500 : '100%'"
     draggable
     @before-ok="save"
     @close="reset"
@@ -16,22 +15,41 @@
 
 <script setup lang="ts">
 import { Message } from '@arco-design/web-vue'
-import { addDept, getDept, updateDept } from '@/apis/system'
-import { type Columns, GiForm } from '@/components/GiForm'
+import { useWindowSize } from '@vueuse/core'
+import { mapTree } from 'xe-utils'
+import { type DeptResp, addDept, getDept, updateDept } from '@/apis/system/dept'
+import { type Columns, GiForm, type Options } from '@/components/GiForm'
 import { useForm } from '@/hooks'
-import { useDept } from '@/hooks/app'
+
+interface Props {
+  depts: DeptResp[]
+}
+const props = withDefaults(defineProps<Props>(), {
+  depts: () => [],
+})
 
 const emit = defineEmits<{
   (e: 'save-success'): void
 }>()
 
-const { deptList, getDeptList } = useDept()
+const { width } = useWindowSize()
 
 const dataId = ref('')
+const visible = ref(false)
 const isUpdate = computed(() => !!dataId.value)
 const title = computed(() => (isUpdate.value ? '修改部门' : '新增部门'))
 const formRef = ref<InstanceType<typeof GiForm>>()
 
+// 转换为部门树
+const deptSelectTree = computed(() => {
+  const data = JSON.parse(JSON.stringify(props.depts)) as DeptResp[]
+  return mapTree(data, (i) => ({
+    key: i.id,
+    title: i.name,
+    children: i.children,
+  }))
+})
+
 const options: Options = {
   form: { size: 'large' },
   btns: { hide: true },
@@ -42,7 +60,7 @@ const columns: Columns = reactive([
     label: '上级部门',
     field: 'parentId',
     type: 'tree-select',
-    data: deptList,
+    data: deptSelectTree,
     hide: (form) => {
       return form.parentId === 0
     },
@@ -111,30 +129,6 @@ const reset = () => {
   resetForm()
 }
 
-const visible = ref(false)
-// 新增
-const onAdd = (id?: string) => {
-  if (!deptList.value.length) {
-    getDeptList()
-  }
-  reset()
-  form.parentId = id
-  dataId.value = ''
-  visible.value = true
-}
-
-// 修改
-const onUpdate = async (id: string) => {
-  if (!deptList.value.length) {
-    await getDeptList()
-  }
-  reset()
-  dataId.value = id
-  const res = await getDept(id)
-  Object.assign(form, res.data)
-  visible.value = true
-}
-
 // 保存
 const save = async () => {
   try {
@@ -147,8 +141,6 @@ const save = async () => {
       await addDept(form)
       Message.success('新增成功')
     }
-    // 更新部门树
-    await getDeptList()
     emit('save-success')
     return true
   } catch (error) {
@@ -156,5 +148,24 @@ const save = async () => {
   }
 }
 
+// 新增
+const onAdd = (id?: string) => {
+  reset()
+  form.parentId = id
+  dataId.value = ''
+  visible.value = true
+}
+
+// 修改
+const onUpdate = async (id: string) => {
+  reset()
+  dataId.value = id
+  const { data } = await getDept(id)
+  Object.assign(form, data)
+  visible.value = true
+}
+
 defineExpose({ onAdd, onUpdate })
 </script>
+
+<style lang="scss" scoped></style>

src/views/system/dept/index.vue

@@ -2,14 +2,13 @@
   <div class="table-page">
     <GiTable
       ref="tableRef"
-      row-key="id"
       title="部门管理"
+      row-key="id"
       :data="dataList"
       :columns="columns"
       :loading="loading"
       :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
       :pagination="false"
-      :disabled-tools="['size']"
       :disabled-column-keys="['name']"
       @refresh="search"
     >
@@ -18,7 +17,7 @@
         <IconRight v-else />
       </template>
       <template #toolbar-left>
-        <a-input v-model="name" placeholder="请输入名称" allow-clear @change="search">
+        <a-input v-model="name" placeholder="请输入名称" allow-clear>
           <template #prefix><icon-search /></template>
         </a-input>
         <a-button @click="reset">
@@ -45,38 +44,38 @@
       </template>
       <template #action="{ record }">
         <a-space>
-          <a-link v-permission="['system:dept:update']" @click="onUpdate(record)">修改</a-link>
-          <a-link v-permission="['system:dept:add']" @click="onAdd(record.id)">新增</a-link>
+          <a-link v-permission="['system:dept:update']" title="修改" @click="onUpdate(record)">修改</a-link>
           <a-link
             v-permission="['system:dept:delete']"
             status="danger"
-            :title="record.isSystem ? '系统内置数据不能删除' : undefined"
             :disabled="record.isSystem"
+            :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
             @click="onDelete(record)"
           >
             删除
           </a-link>
+          <a-link v-permission="['system:dept:add']" title="新增" @click="onAdd(record.id)">新增</a-link>
         </a-space>
       </template>
     </GiTable>
 
-    <DeptAddModal ref="DeptAddModalRef" @save-success="search" />
+    <DeptAddModal ref="DeptAddModalRef" :depts="dataList" @save-success="search" />
   </div>
 </template>
 
 <script setup lang="ts">
 import DeptAddModal from './DeptAddModal.vue'
-import { type DeptQuery, type DeptResp, deleteDept, exportDept, listDept } from '@/apis/system'
-import type GiTable from '@/components/GiTable/index.vue'
+import { type DeptQuery, type DeptResp, deleteDept, exportDept, listDept } from '@/apis/system/dept'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
+import type GiTable from '@/components/GiTable/index.vue'
 import { useDownload, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
 
 defineOptions({ name: 'SystemDept' })
 
-const tableRef = ref<InstanceType<typeof GiTable>>()
 const queryForm = reactive<DeptQuery>({})
+const tableRef = ref<InstanceType<typeof GiTable>>()
 const {
   tableData,
   loading,
@@ -92,7 +91,6 @@ const {
 })
 
 // 过滤树
-const name = ref('')
 const searchData = (name: string) => {
   const loop = (data: DeptResp[]) => {
     const result = [] as DeptResp[]
@@ -114,6 +112,7 @@ const searchData = (name: string) => {
   return loop(tableData.value)
 }
 
+const name = ref('')
 const dataList = computed(() => {
   if (!name.value) return tableData.value
   return searchData(name.value)
@@ -121,9 +120,9 @@ const dataList = computed(() => {
 
 const columns: TableInstanceColumns[] = [
   { title: '名称', dataIndex: 'name', minWidth: 170, ellipsis: true, tooltip: true },
-  { title: '状态', slotName: 'status', align: 'center' },
+  { title: '状态', dataIndex: 'status', slotName: 'status', align: 'center' },
   { title: '排序', dataIndex: 'sort', align: 'center', show: false },
-  { title: '系统内置', slotName: 'isSystem', align: 'center', show: false },
+  { title: '系统内置', dataIndex: 'isSystem', slotName: 'isSystem', align: 'center', show: false },
   { title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
   { title: '创建人', dataIndex: 'createUserString', ellipsis: true, tooltip: true, show: false },
   { title: '创建时间', dataIndex: 'createTime', width: 180 },
@@ -131,8 +130,9 @@ const columns: TableInstanceColumns[] = [
   { title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
   {
     title: '操作',
+    dataIndex: 'action',
     slotName: 'action',
-    width: 180,
+    width: 160,
     align: 'center',
     fixed: !isMobile() ? 'right' : undefined,
     show: has.hasPermOr(['system:dept:update', 'system:dept:delete', 'system:dept:add']),
@@ -147,7 +147,7 @@ const reset = () => {
 // 删除
 const onDelete = (record: DeptResp) => {
   return handleDelete(() => deleteDept(record.id), {
-    content: `是否确定删除 [${record.name}]？`,
+    content: `是否确定删除部门「${record.name}」？`,
     showModal: true,
   })
 }

src/views/system/dept/type.ts

@@ -1,7 +0,0 @@
-export interface DeptReq {
-  parentId: string
-  name: string
-  sort: number
-  description: string
-  status: 1 | 2
-}