feat: dict vxe

yudao-ui-admin-vue3/src/views/system/dict/dict.data.ts

@@ -2,105 +2,87 @@ import { reactive } from 'vue'
 import { DICT_TYPE } from '@/utils/dict'
 import { required } from '@/utils/formRules'
 import { useI18n } from '@/hooks/web/useI18n'
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
 // 国际化
 const { t } = useI18n()
 // 表单校验
 export const dictDataRules = reactive({
-  label: [required],
+  title: [required],
   value: [required],
   sort: [required]
 })
 // crudSchemas
-export const crudSchemas = reactive<CrudSchema[]>([
+export const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: 'seq',
+  action: true,
+  actionWidth: '140px',
+  columns: [
     {
-    label: t('common.index'),
-    field: 'id',
-    type: 'index',
-    form: {
-      show: false
-    },
-    detail: {
-      show: false
-    }
-  },
-  {
-    label: '字典类型',
+      title: '字典类型',
       field: 'dictType',
-    table: {
-      show: false
-    },
-    form: {
-      show: false
-    }
+      isTable: false,
+      isForm: false
     },
     {
-    label: '数据标签',
+      title: '数据标签',
       field: 'label',
-    search: {
-      show: true
-    }
+      isSearch: true
     },
     {
-    label: '数据键值',
+      title: '数据键值',
       field: 'value'
     },
     {
-    label: '颜色类型',
+      title: '颜色类型',
       field: 'colorType',
       form: {
         component: 'Select',
         componentProps: {
           options: [
             {
-            label: 'default',
+              title: 'default',
               value: ''
             },
             {
-            label: 'success',
+              title: 'success',
               value: 'success'
             },
             {
-            label: 'info',
+              title: 'info',
               value: 'info'
             },
             {
-            label: 'warning',
+              title: 'warning',
               value: 'warning'
             },
             {
-            label: 'danger',
+              title: 'danger',
               value: 'danger'
             }
           ]
         }
       },
-    table: {
-      show: false
-    }
+      isTable: false
     },
     {
-    label: 'CSS Class',
+      title: 'CSS Class',
       field: 'cssClass',
-    table: {
-      show: false
-    }
+      isTable: false
     },
     {
-    label: '显示排序',
+      title: '显示排序',
       field: 'sort',
-    table: {
-      show: false
-    }
+      isTable: false
     },
     {
-    label: t('common.status'),
+      title: t('common.status'),
       field: 'status',
       dictType: DICT_TYPE.COMMON_STATUS,
       dictClass: 'number'
     },
     {
-    label: t('form.remark'),
+      title: t('form.remark'),
       field: 'remark',
       form: {
         component: 'Input',
@@ -112,21 +94,8 @@ export const crudSchemas = reactive<CrudSchema[]>([
           span: 24
         }
       },
-    table: {
-      show: false
+      isTable: false
     }
-  },
-  {
-    label: t('table.action'),
-    field: 'action',
-    width: '180px',
-    form: {
-      show: false
-    },
-    detail: {
-      show: false
-    }
-  }
-])
-
-export const { allSchemas } = useCrudSchemas(crudSchemas)
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

yudao-ui-admin-vue3/src/views/system/dict/dict.type.ts

@@ -2,75 +2,53 @@ import { reactive } from 'vue'
 import { DICT_TYPE } from '@/utils/dict'
 import { required } from '@/utils/formRules'
 import { useI18n } from '@/hooks/web/useI18n'
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
-// 国际化
-const { t } = useI18n()
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
+const { t } = useI18n() // 国际化
+
 // 表单校验
 export const dictTypeRules = reactive({
   name: [required],
   type: [required]
 })
 // 新增 + 修改
-const crudSchemas = reactive<CrudSchema[]>([
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: 'seq',
+  action: true,
+  actionWidth: '140px',
+  columns: [
     {
-    label: t('common.index'),
-    field: 'id',
-    type: 'index',
-    form: {
-      show: false
-    },
-    detail: {
-      show: false
-    }
-  },
-  {
-    label: '字典名称',
+      title: '字典名称',
       field: 'name',
-    search: {
-      show: true
-    }
+      isSearch: true
     },
     {
-    label: '字典类型',
+      title: '字典类型',
       field: 'type',
-    search: {
-      show: true
-    }
+      isSearch: true
     },
     {
-    label: t('common.status'),
+      title: t('common.status'),
       field: 'status',
       dictType: DICT_TYPE.COMMON_STATUS,
-    dictClass: 'number'
+      dictClass: 'number',
+      table: {
+        width: 70
+      }
     },
     {
-    label: t('common.createTime'),
+      title: t('common.createTime'),
       field: 'createTime',
+      formatter: 'formatDate',
+      isForm: false,
       table: {
-      show: false
-    },
-    form: {
-      show: false
-    },
-    detail: {
-      show: false
-    },
-    search: {
-      show: true,
-      component: 'DatePicker',
-      componentProps: {
-        type: 'datetimerange',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
-      }
+        width: 150
       }
     },
     {
-    label: t('form.remark'),
+      title: t('form.remark'),
       field: 'remark',
-    table: {
-      show: false
-    },
+      isTable: false,
       form: {
         componentProps: {
           type: 'textarea',
@@ -80,18 +58,7 @@ const crudSchemas = reactive<CrudSchema[]>([
           span: 24
         }
       }
-  },
-  {
-    field: 'action',
-    width: '180px',
-    label: t('table.action'),
-    form: {
-      show: false
-    },
-    detail: {
-      show: false
     }
-  }
-])
-
-export const { allSchemas } = useCrudSchemas(crudSchemas)
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

yudao-ui-admin-vue3/src/views/system/dict/index.vue

@@ -6,13 +6,13 @@
           <span>字典分类</span>
         </div>
       </template>
-      <Search
-        :schema="DictTypeSchemas.allSchemas.searchSchema"
-        @search="setTypeSearchParams"
-        @reset="setTypeSearchParams"
-      />
-      <!-- 操作工具栏 -->
-      <div class="mb-10px">
+      <vxe-grid
+        ref="xTypeGrid"
+        v-bind="typeGridOptions"
+        @cell-click="cellClickEvent"
+        class="xtable-scrollbar"
+      >
+        <template #toolbar_buttons>
           <XButton
             type="primary"
             preIcon="ep:zoom-in"
@@ -20,40 +20,22 @@
             v-hasPermi="['system:dict:create']"
             @click="handleTypeCreate()"
           />
-      </div>
-      <!-- 列表 -->
-      <Table
-        @row-click="onClickType"
-        :columns="DictTypeSchemas.allSchemas.tableColumns"
-        :selection="false"
-        :data="typeTableObject.tableList"
-        :loading="typeTableObject.loading"
-        :pagination="{
-          total: typeTableObject.total
-        }"
-        :highlight-current-row="true"
-        v-model:pageSize="typeTableObject.pageSize"
-        v-model:currentPage="typeTableObject.currentPage"
-        @register="typeRegister"
-      >
-        <template #status="{ row }">
-          <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
         </template>
-        <template #action="{ row }">
+        <template #actionbtns_default="{ row }">
           <XTextButton
             preIcon="ep:edit"
             :title="t('action.edit')"
             v-hasPermi="['system:dict:update']"
-            @click="handleTypeUpdate(row)"
+            @click="handleTypeUpdate(row.id)"
           />
           <XTextButton
             preIcon="ep:delete"
             :title="t('action.del')"
             v-hasPermi="['system:dict:delete']"
-            @click="delTypeList(row.id, false)"
+            @click="handleTypeDelete(row.id)"
           />
         </template>
-      </Table>
+      </vxe-grid>
     </el-card>
     <el-card class="w-1/2 dict" style="margin-left: 10px" :gutter="12" shadow="hover">
       <template #header>
@@ -66,13 +48,9 @@
         <span>请从左侧选择</span>
       </div>
       <div v-if="tableTypeSelect">
-        <Search
-          :schema="DictDataSchemas.allSchemas.searchSchema"
-          @search="setDataSearchParams"
-          @reset="setDataSearchParams"
-        />
-        <!-- 操作工具栏 -->
-        <div class="mb-10px">
+        <!-- 列表 -->
+        <vxe-grid ref="xDataGrid" v-bind="dataGridOptions" class="xtable-scrollbar">
+          <template #toolbar_buttons>
             <XButton
               type="primary"
               preIcon="ep:zoom-in"
@@ -80,37 +58,22 @@
               v-hasPermi="['system:dict:create']"
               @click="handleDataCreate()"
             />
-        </div>
-        <Table
-          :columns="DictDataSchemas.allSchemas.tableColumns"
-          :selection="false"
-          :data="dataTableObject.tableList"
-          :loading="dataTableObject.loading"
-          :pagination="{
-            total: dataTableObject.total
-          }"
-          v-model:pageSize="dataTableObject.pageSize"
-          v-model:currentPage="dataTableObject.currentPage"
-          @register="dataRegister"
-        >
-          <template #status="{ row }">
-            <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
           </template>
-          <template #action="{ row }">
+          <template #actionbtns_default="{ row }">
             <XTextButton
               v-hasPermi="['system:dict:update']"
               preIcon="ep:edit"
               :title="t('action.edit')"
-              @click="handleDataUpdate(row)"
+              @click="handleDataUpdate(row.id)"
             />
             <XTextButton
               v-hasPermi="['system:dict:delete']"
               preIcon="ep:delete"
               :title="t('action.del')"
-              @click="delDataList(row.id, false)"
+              @click="handleDataDelete(row.id)"
             />
           </template>
-        </Table>
+        </vxe-grid>
       </div>
     </el-card>
     <XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle">
@@ -155,82 +118,81 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, unref, onMounted } from 'vue'
-import { DICT_TYPE } from '@/utils/dict'
+import { ref, unref, reactive } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+import { useVxeGrid } from '@/hooks/web/useVxeGrid'
+import { VxeGridInstance, VxeTableEvents } from 'vxe-table'
 import { FormExpose } from '@/components/Form'
-import { ElInput, ElTag } from 'element-plus'
+import { ElInput, ElTag, ElCard } from 'element-plus'
 import * as DictTypeSchemas from './dict.type'
 import * as DictDataSchemas from './dict.data'
-import { useTable } from '@/hooks/web/useTable'
-import { ElCard, ElMessage } from 'element-plus'
 import * as DictTypeApi from '@/api/system/dict/dict.type'
 import * as DictDataApi from '@/api/system/dict/dict.data'
 import { DictDataVO, DictTypeVO } from '@/api/system/dict/types'
+
 const { t } = useI18n() // 国际化
-// ========== 字典分类列表相关 ==========
+const message = useMessage() // 消息弹窗
+
+const xTypeGrid = ref<VxeGridInstance>() // 列表 Grid Ref
 const {
-  register: typeRegister,
-  tableObject: typeTableObject,
-  methods: typeMethods
-} = useTable<DictTypeVO>({
+  gridOptions: typeGridOptions,
+  getList: typeGetList,
+  deleteData: typeDeleteData
+} = useVxeGrid<DictTypeVO>({
+  allSchemas: DictTypeSchemas.allSchemas,
   getListApi: DictTypeApi.getDictTypePageApi,
-  delListApi: DictTypeApi.deleteDictTypeApi
+  deleteApi: DictTypeApi.deleteDictTypeApi
+})
+
+const xDataGrid = ref<VxeGridInstance>() // 列表 Grid Ref
+const queryParams = reactive({
+  dictType: null
 })
 const {
-  getList: getTypeList,
-  setSearchParams: setTypeSearchParams,
-  delList: delTypeList
-} = typeMethods
+  gridOptions: dataGridOptions,
+  getList: dataGetList,
+  deleteData: dataDeleteData
+} = useVxeGrid<DictDataVO>({
+  allSchemas: DictDataSchemas.allSchemas,
+  queryParams: queryParams,
+  getListApi: DictDataApi.getDictDataPageApi,
+  deleteApi: DictDataApi.deleteDictDataApi
+})
+// ========== 字典分类列表相关 ==========
 const dictTypeValue = ref('')
 // 字典分类修改操作
 const handleTypeCreate = () => {
   dictTypeValue.value = ''
   setDialogTile('typeCreate')
 }
-const handleTypeUpdate = async (row: DictTypeVO) => {
+const handleTypeUpdate = async (rowId: number) => {
   setDialogTile('typeUpdate')
   // 设置数据
-  const res = await DictTypeApi.getDictTypeApi(row.id)
+  const res = await DictTypeApi.getDictTypeApi(rowId)
   dictTypeValue.value = res.type
   unref(typeFormRef)?.setValues(res)
 }
 
-// ========== 字典数据列表相关 ==========
-const tableTypeSelect = ref(false)
-const {
-  register: dataRegister,
-  tableObject: dataTableObject,
-  methods: dataMethods
-} = useTable<DictDataVO>({
-  getListApi: DictDataApi.getDictDataPageApi,
-  delListApi: DictDataApi.deleteDictDataApi
-})
-const {
-  getList: getDataList,
-  setSearchParams: setDataSearchParams,
-  delList: delDataList
-} = dataMethods
-
 // 字典数据修改操作
 const handleDataCreate = () => {
   setDialogTile('dataCreate')
 }
-const handleDataUpdate = async (row: DictDataVO) => {
+const handleDataUpdate = async (rowId: number) => {
   setDialogTile('dataUpdate')
   // 设置数据
-  const res = await DictDataApi.getDictDataApi(row.id)
+  const res = await DictDataApi.getDictDataApi(rowId)
   unref(dataFormRef)?.setValues(res)
 }
 // 字典分类点击行事件
 const parentType = ref('')
-const onClickType = async (data: { [key: string]: any }) => {
+const tableTypeSelect = ref(false)
+const cellClickEvent: VxeTableEvents.CellClick = async ({ row }) => {
+  console.info(row['type'])
   tableTypeSelect.value = true
-  dataTableObject.params = {
-    dictType: data.type
-  }
-  getDataList()
-  parentType.value = data.type
+  queryParams.dictType = row['type']
+  await dataGetList(xDataGrid)
+  parentType.value = row['type']
 }
 // 弹出框
 const dialogVisible = ref(false) // 是否显示弹出层
@@ -246,6 +208,16 @@ const setDialogTile = (type: string) => {
   actionType.value = type
   dialogVisible.value = true
 }
+
+// 删除操作
+const handleTypeDelete = async (rowId: number) => {
+  await typeDeleteData(xTypeGrid, rowId)
+}
+
+const handleDataDelete = async (rowId: number) => {
+  await dataDeleteData(xDataGrid, rowId)
+}
+
 // 提交按钮
 const submitTypeForm = async () => {
   const elForm = unref(typeFormRef)?.getElFormRef()
@@ -259,16 +231,15 @@ const submitTypeForm = async () => {
         if (actionType.value === 'typeCreate') {
           data.type = dictTypeValue.value
           await DictTypeApi.createDictTypeApi(data)
-          ElMessage.success(t('common.createSuccess'))
+          message.success(t('common.createSuccess'))
         } else if (actionType.value === 'typeUpdate') {
           await DictTypeApi.updateDictTypeApi(data)
-          ElMessage.success(t('common.updateSuccess'))
+          message.success(t('common.updateSuccess'))
         }
-        // 操作成功，重新加载列表
-        await getTypeList()
         dialogVisible.value = false
       } finally {
         actionLoading.value = false
+        typeGetList(xTypeGrid)
       }
     }
   })
@@ -285,23 +256,17 @@ const submitDataForm = async () => {
         if (actionType.value === 'dataCreate') {
           data.dictType = parentType.value
           await DictDataApi.createDictDataApi(data)
-          ElMessage.success(t('common.createSuccess'))
+          message.success(t('common.createSuccess'))
         } else if (actionType.value === 'dataUpdate') {
           await DictDataApi.updateDictDataApi(data)
-          ElMessage.success(t('common.updateSuccess'))
+          message.success(t('common.updateSuccess'))
         }
-        await getDataList()
-        // 操作成功，重新加载列表
         dialogVisible.value = false
       } finally {
         actionLoading.value = false
+        dataGetList(xDataGrid)
       }
     }
   })
 }
-// 初始化查询
-onMounted(async () => {
-  await getTypeList()
-  typeTableObject.tableList[0] && onClickType(typeTableObject.tableList[0])
-})
 </script>