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

Author: Charles7c

src/apis/system/dict.ts

@@ -6,7 +6,7 @@ export type * from './type'
 const BASE_URL = '/system/dict'
 
 /** @desc 查询字典列表 */
-export function listDict(query: T.DictQuery) {
+export function listDict(query?: T.DictQuery) {
   return http.get<T.DictResp[]>(`${BASE_URL}/list`, query)
 }
 

src/components/GiCell/GiCellTag.vue

@@ -1,12 +1,12 @@
 <template>
   <span v-if="!dictItem"></span>
-  <span v-else-if="!dictItem.extend">{{ dictItem.label }}</span>
-  <a-tag v-else-if="dictItem.extend === 'primary'" color="arcoblue">{{ dictItem.label }}</a-tag>
-  <a-tag v-else-if="dictItem.extend === 'success'" color="green">{{ dictItem.label }}</a-tag>
-  <a-tag v-else-if="dictItem.extend === 'warning'" color="orangered">{{ dictItem.label }}</a-tag>
-  <a-tag v-else-if="dictItem.extend === 'error'" color="red">{{ dictItem.label }}</a-tag>
-  <a-tag v-else-if="dictItem.extend === 'default'" color="gray">{{ dictItem.label }}</a-tag>
-  <a-tag v-else :color="dictItem.extend">{{ dictItem.label }}</a-tag>
+  <span v-else-if="!dictItem.extra">{{ dictItem.label }}</span>
+  <a-tag v-else-if="dictItem.extra === 'primary'" color="arcoblue">{{ dictItem.label }}</a-tag>
+  <a-tag v-else-if="dictItem.extra === 'success'" color="green">{{ dictItem.label }}</a-tag>
+  <a-tag v-else-if="dictItem.extra === 'warning'" color="orangered">{{ dictItem.label }}</a-tag>
+  <a-tag v-else-if="dictItem.extra === 'error'" color="red">{{ dictItem.label }}</a-tag>
+  <a-tag v-else-if="dictItem.extra === 'default'" color="gray">{{ dictItem.label }}</a-tag>
+  <a-tag v-else :color="dictItem.extra">{{ dictItem.label }}</a-tag>
 </template>
 
 <script setup lang="ts">

src/components/UserSelect/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="container">
     <a-row :gutter="16">
-      <a-col :span="24" :md="18">
+      <a-col :span="24" :md="17">
         <GiTable
           v-model:selectedKeys="selectedKeys"
           row-key="id"
           :data="dataList"
           :columns="listColumns"
           :loading="loading"
-          :scroll="{ x: '100%', y: '100%', minWidth: 900 }"
+          :scroll="{ x: '100%', y: '100%', minWidth: 500 }"
           style="max-height: 600px"
           :pagination="pagination"
           :disabled-tools="['size', 'fullscreen', 'setting', 'refresh']"
@@ -57,7 +57,7 @@
           </template>
         </GiTable>
       </a-col>
-      <a-col :span="24" :md="6" class="section">
+      <a-col :span="24" :md="7" class="section">
         <a-card>
           <template #title>已选择: {{ selectedKeys.length }}</template>
           <a-table :columns="selectedColumns" :data="[...selectedData.values()]" :pagination="paginationOptions">

src/config/setting.json

@@ -2,7 +2,7 @@
   "theme": "light",
   "themeColor": "#165DFF",
   "tab": true,
-  "tabMode": "card",
+  "tabMode": "card-gutter",
   "animate": false,
   "animateMode": "zoom-fade",
   "menuCollapse": true,

src/views/open/app/AppDetailDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-drawer v-model:visible="visible" title="应用详情" :width="width >= 580 ? 580 : '100%'" :footer="false">
+  <a-drawer v-model:visible="visible" title="应用详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
     <a-descriptions :column="1" size="large" class="general-description" bordered>
       <a-descriptions-item label="应用名称">{{ dataDetail?.name }}</a-descriptions-item>
       <a-descriptions-item label="APPKEY">{{ dataDetail?.appKey }}</a-descriptions-item>

src/views/setting/components/VerifyModel.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
     v-model:visible="visible" :title="title" :mask-closable="false" :esc-to-close="false"
-    :width="width >= 500 ? 500 : '100%'" draggable @before-ok="save" @ok="saveAfter" @close="reset"
+    :width="width >= 600 ? 600 : '100%'" draggable @before-ok="save" @ok="saveAfter" @close="reset"
   >
     <GiForm ref="formRef" v-model="form" :options="options" :columns="columns">
       <template #captcha>

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,14 +141,31 @@ const save = async () => {
       await addDept(form)
       Message.success('新增成功')
     }
-    // 更新部门树
-    await getDeptList()
     emit('save-success')
     return true
   } catch (error) {
     return false
   }
 }
 
+// 新增
+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,25 +112,27 @@ const searchData = (name: string) => {
   return loop(tableData.value)
 }
 
+const name = ref('')
 const dataList = computed(() => {
   if (!name.value) return tableData.value
   return searchData(name.value)
 })
 
 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 },
   { title: '修改人', dataIndex: 'updateUserString', ellipsis: true, tooltip: true, show: false },
   { 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,
   })
 }