feat: dept style

src/views/system/dept/DeptModal.vue

@@ -1,10 +1,10 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="isUpdate ? '编辑' : '新增'" @ok="handleSubmit">
     <BasicForm @register="registerForm" />
   </BasicModal>
 </template>
 <script lang="ts" setup name="DeptModal">
-import { ref, computed, unref } from 'vue'
+import { ref, unref } from 'vue'
 import { BasicModal, useModalInner } from '@/components/Modal'
 import { BasicForm, useForm } from '@/components/Form'
 import { formSchema } from './dept.data'
@@ -12,10 +12,9 @@ import { createDept, getDept, updateDept } from '@/api/system/dept'
 
 const emit = defineEmits(['success', 'register'])
 const isUpdate = ref(true)
-const rowId = ref()
 
 const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
-  labelWidth: 100,
+  labelWidth: 120,
   baseColProps: { span: 24 },
   schemas: formSchema,
   showActionButtonGroup: false,
@@ -26,16 +25,12 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
   resetFields()
   setModalProps({ confirmLoading: false })
   isUpdate.value = !!data?.isUpdate
-
   if (unref(isUpdate)) {
     const res = await getDept(data.record.id)
-    rowId.value = res.id
     setFieldsValue({ ...res })
   }
 })
 
-const getTitle = computed(() => (!unref(isUpdate) ? '新增部门' : '编辑部门'))
-
 async function handleSubmit() {
   try {
     const values = await validate()

src/views/system/dept/index.vue

@@ -2,7 +2,9 @@
   <div>
     <BasicTable @register="register" @fetch-success="onFetchSuccess">
       <template #toolbar>
-        <a-button type="primary" :preIcon="IconEnum.ADD" @click="handleCreate"> {{ t('action.create') }} </a-button>
+        <a-button type="primary" :preIcon="IconEnum.ADD" v-auth="['system:dept:create']" @click="handleCreate">
+          {{ t('action.create') }}
+        </a-button>
         <a-button type="info" @click="expandAll">{{ t('component.tree.expandAll') }}</a-button>
         <a-button type="info" @click="collapseAll">{{ t('component.tree.unExpandAll') }}</a-button>
       </template>
@@ -13,11 +15,12 @@
         <template v-if="column.key === 'action'">
           <TableAction
             :actions="[
-              { icon: IconEnum.EDIT, label: t('action.edit'), onClick: handleEdit.bind(null, record) },
+              { icon: IconEnum.EDIT, label: t('action.edit'), auth: 'system:dept:update', onClick: handleEdit.bind(null, record) },
               {
                 icon: IconEnum.DELETE,
                 color: 'error',
                 label: t('action.delete'),
+                auth: 'system:dept:delete',
                 popConfirm: {
                   title: t('common.delMessage'),
                   placement: 'left',
@@ -60,12 +63,9 @@ const [register, { expandAll, collapseAll, getForm, reload }] = useTable({
   },
   isTreeTable: true,
   pagination: false,
-  striped: false,
   useSearchForm: true,
   showTableSetting: true,
-  bordered: true,
   showIndexColumn: false,
-  canResize: false,
   actionColumn: {
     width: 140,
     title: t('common.action'),
@@ -86,29 +86,12 @@ async function getUserList() {
   users.value = res
 }
 
-function userNicknameFormat(row) {
-  if (!row.leaderUserId) {
-    return '未设置'
-  }
-  for (const user of users.value) {
-    if (row.leaderUserId === user.id) {
-      return user.nickname
-    }
-  }
-  return '未知【' + row.leaderUserId + '】'
-}
-
 function handleCreate() {
-  openModal(true, {
+  openModal(true, { isUpdate: false })
-    isUpdate: false
-  })
 }
 
 function handleEdit(record: Recordable) {
-  openModal(true, {
+  openModal(true, { record, isUpdate: true })
-    record,
-    isUpdate: true
-  })
 }
 
 async function handleDelete(record: Recordable) {
@@ -121,6 +104,18 @@ function onFetchSuccess() {
   nextTick(expandAll)
 }
 
+function userNicknameFormat(row) {
+  if (!row.leaderUserId) {
+    return '未设置'
+  }
+  for (const user of users.value) {
+    if (row.leaderUserId === user.id) {
+      return user.nickname
+    }
+  }
+  return '未知【' + row.leaderUserId + '】'
+}
+
 onMounted(async () => {
   await getUserList()
 })