feat: dict style

src/views/system/dict/DictData.vue

@@ -2,17 +2,20 @@
   <div>
     <BasicTable @register="registerTable" :searchInfo="searchInfo">
       <template #toolbar>
-        <a-button type="primary" :preIcon="IconEnum.ADD" @click="handleCreate"> {{ t('action.create') }} </a-button>
+        <a-button type="primary" v-auth="['system:dict:create']" :preIcon="IconEnum.ADD" @click="handleCreate">
+          {{ t('action.create') }}
+        </a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <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:dict:update', onClick: handleEdit.bind(null, record) },
               {
                 icon: IconEnum.DELETE,
                 color: 'error',
                 label: t('action.delete'),
+                auth: 'system:dict:delete',
                 popConfirm: {
                   title: t('common.delMessage'),
                   placement: 'left',
@@ -77,10 +80,7 @@ function handleCreate() {
 }
 
 function handleEdit(record: Recordable) {
-  openModal(true, {
+  openModal(true, { record, isUpdate: true })
-    record,
-    isUpdate: true
-  })
 }
 
 async function handleDelete(record: Recordable) {

src/views/system/dict/DictDataModal.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="DictDataModal">
-import { ref, computed, unref } from 'vue'
+import { ref, unref } from 'vue'
 import { BasicModal, useModalInner } from '@/components/Modal'
 import { BasicForm, useForm } from '@/components/Form'
 import { dataFormSchema } from './dict.data'
@@ -12,10 +12,9 @@ import { createDictData, getDictData, updateDictData } from '@/api/system/dict/d
 
 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: dataFormSchema,
   showActionButtonGroup: false,
@@ -26,10 +25,8 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
   resetFields()
   setModalProps({ confirmLoading: false })
   isUpdate.value = !!data?.isUpdate
-
   if (unref(isUpdate)) {
     const res = await getDictData(data.record.id)
-    rowId.value = res.id
     setFieldsValue({ ...res })
   } else {
     setFieldsValue({
@@ -38,8 +35,6 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
   }
 })
 
-const getTitle = computed(() => (!unref(isUpdate) ? '新增字典分类' : '编辑字典分类'))
-
 async function handleSubmit() {
   try {
     const values = await validate()

src/views/system/dict/DictTypeModal.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="DictTypeModal">
-import { ref, computed, unref } from 'vue'
+import { ref, unref } from 'vue'
 import { BasicModal, useModalInner } from '@/components/Modal'
 import { BasicForm, useForm } from '@/components/Form'
 import { typeFormSchema } from './dict.type'
@@ -12,10 +12,9 @@ import { createDictType, getDictType, updateDictType } from '@/api/system/dict/t
 
 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: typeFormSchema,
   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 getDictType(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/dict/index.vue

@@ -2,17 +2,20 @@
   <div class="flex">
     <BasicTable @register="registerTable" class="w-1/2 xl:w-1/2" @row-click="handleRowClick">
       <template #toolbar>
-        <a-button type="primary" :preIcon="IconEnum.ADD" @click="handleCreate"> {{ t('action.create') }} </a-button>
+        <a-button type="primary" v-auth="['system:dict:create']" :preIcon="IconEnum.ADD" @click="handleCreate">
+          {{ t('action.create') }}
+        </a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <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:dict:update', onClick: handleEdit.bind(null, record) },
               {
                 icon: IconEnum.DELETE,
                 color: 'error',
                 label: t('action.delete'),
+                auth: 'system:dict:delete',
                 popConfirm: {
                   title: t('common.delMessage'),
                   placement: 'left',
@@ -65,21 +68,15 @@ const [registerTable, { reload }] = useTable({
 })
 
 function handleRowClick(record) {
-  console.info(record.type)
   searchInfo.dictType = record.type
 }
 
 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) {