feat: dict view done

src/views/system/dict/DictData.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <BasicTable @register="registerTable">
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
       <template #toolbar>
         <a-button type="primary" @click="handleCreate">新增字典数据</a-button>
       </template>
@@ -32,13 +32,22 @@
   </div>
 </template>
 <script lang="ts" setup name="DictData">
-// import { reactive } from 'vue'
+import { watch } from 'vue'
 import { BasicTable, useTable, TableAction } from '@/components/Table'
 import { useModal } from '@/components/Modal'
 import DictDataModel from './DictDataModel.vue'
 import { dataColumns, dataSearchFormSchema } from './dict.data'
-import { getDictDataPageApi } from '@/api/system/dict/data'
+import { deleteDictDataApi, getDictDataPageApi } from '@/api/system/dict/data'
+import { useMessage } from '@/hooks/web/useMessage'
 
+const props = defineProps({
+  searchInfo: {
+    type: Object as PropType<Recordable>,
+    default: () => ({})
+  }
+})
+
+const { createConfirm, createMessage } = useMessage()
 const [registerModal, { openModal }] = useModal()
 // const searchInfo = reactive<Recordable>({})
 
@@ -64,12 +73,12 @@ const [registerTable, { reload }] = useTable({
 
 function handleCreate() {
   openModal(true, {
+    record: props.searchInfo.dictType,
     isUpdate: false
   })
 }
 
 function handleEdit(record: Recordable) {
-  console.log(record)
   openModal(true, {
     record,
     isUpdate: true
@@ -77,22 +86,24 @@ function handleEdit(record: Recordable) {
 }
 
 function handleDelete(record: Recordable) {
-  console.log(record)
+  createConfirm({
+    title: '删除',
+    iconType: 'warning',
+    content: '是否要删除数据？',
+    async onOk() {
+      await deleteDictDataApi(record.id)
+      createMessage.success('删除成功')
+      reload()
+    }
+  })
 }
 
-// function handleSuccess({ isUpdate, values }) {
-//   if (isUpdate) {
-//     // 演示不刷新表格直接更新内部数据。
-//     // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
-//     const result = updateTableDataRecord(values.id, values)
-//     console.log(result)
-//   } else {
-//     reload()
-//   }
-// }
-
-// function handleSelect(deptId = '') {
-//   searchInfo.deptId = deptId
-//   reload()
-// }
+watch(
+  () => props.searchInfo,
+  (val) => {
+    console.info(val)
+    val && reload()
+  },
+  { deep: true }
+)
 </script>

src/views/system/dict/DictDataModel.vue

@@ -35,6 +35,10 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
     setFieldsValue({
       ...res
     })
+  } else {
+    setFieldsValue({
+      dictType: data.record
+    })
   }
 })
 

src/views/system/dict/dict.data.ts

@@ -84,7 +84,8 @@ export const dataFormSchema: FormSchema[] = [
     label: '字典类型',
     field: 'dictType',
     required: true,
-    component: 'Input'
+    component: 'Input',
+    dynamicDisabled: ({ values }) => !!values.dictType
   },
   {
     label: '数据标签',

src/views/system/dict/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <BasicTable @register="registerTable" class="w-1/2 xl:w-1/2">
+    <BasicTable @register="registerTable" class="w-1/2 xl:w-1/2" @row-click="handleRowClick">
       <template #toolbar>
         <a-button type="primary" @click="handleCreate">新增字典类型</a-button>
       </template>
@@ -28,21 +28,23 @@
         </template>
       </template>
     </BasicTable>
-    <DictData class="w-1/2 xl:w-1/2" />
+    <DictData class="w-1/2 xl:w-1/2" :searchInfo="searchInfo" />
     <DictTypeModel @register="registerModal" @success="reload()" />
   </div>
 </template>
 <script lang="ts" setup name="Dict">
-// import { reactive } from 'vue'
+import { reactive } from 'vue'
 import { BasicTable, useTable, TableAction } from '@/components/Table'
 import { useModal } from '@/components/Modal'
 import DictData from './DictData.vue'
 import DictTypeModel from './DictTypeModel.vue'
 import { typeColumns, typeSearchFormSchema } from './dict.type'
-import { getDictTypePageApi } from '@/api/system/dict/type'
+import { deleteDictTypeApi, getDictTypePageApi } from '@/api/system/dict/type'
+import { useMessage } from '@/hooks/web/useMessage'
 
+const { createConfirm, createMessage } = useMessage()
 const [registerModal, { openModal }] = useModal()
-// const searchInfo = reactive<Recordable>({})
+const searchInfo = reactive<Recordable>({})
 
 const [registerTable, { reload }] = useTable({
   title: '字典分类列表',
@@ -63,6 +65,11 @@ const [registerTable, { reload }] = useTable({
   }
 })
 
+function handleRowClick(record) {
+  console.info(record.type)
+  searchInfo.dictType = record.type
+}
+
 function handleCreate() {
   openModal(true, {
     isUpdate: false
@@ -70,30 +77,22 @@ function handleCreate() {
 }
 
 function handleEdit(record: Recordable) {
-  console.log(record)
   openModal(true, {
     record,
     isUpdate: true
   })
 }
 
-function handleDelete(record: Recordable) {
-  console.log(record)
+async function handleDelete(record: Recordable) {
+  createConfirm({
+    title: '删除',
+    iconType: 'warning',
+    content: '是否要删除数据？',
+    async onOk() {
+      await deleteDictTypeApi(record.id)
+      createMessage.success('删除成功')
+      reload()
+    }
+  })
 }
-
-// function handleSuccess({ isUpdate, values }) {
-//   if (isUpdate) {
-//     // 演示不刷新表格直接更新内部数据。
-//     // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
-//     const result = updateTableDataRecord(values.id, values)
-//     console.log(result)
-//   } else {
-//     reload()
-//   }
-// }
-
-// function handleSelect(deptId = '') {
-//   searchInfo.deptId = deptId
-//   reload()
-// }
 </script>