Commit 42eb550858f0e932aa40f567b1020f4874c589ef
1 parent
22748c5a
feat: dict vxe
Showing
3 changed files
with
216 additions
and
315 deletions
yudao-ui-admin-vue3/src/views/system/dict/dict.data.ts
| @@ -2,131 +2,100 @@ import { reactive } from 'vue' | @@ -2,131 +2,100 @@ import { reactive } from 'vue' | ||
| 2 | import { DICT_TYPE } from '@/utils/dict' | 2 | import { DICT_TYPE } from '@/utils/dict' |
| 3 | import { required } from '@/utils/formRules' | 3 | import { required } from '@/utils/formRules' |
| 4 | import { useI18n } from '@/hooks/web/useI18n' | 4 | import { useI18n } from '@/hooks/web/useI18n' |
| 5 | -import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas' | 5 | +import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas' |
| 6 | // 国际化 | 6 | // 国际化 |
| 7 | const { t } = useI18n() | 7 | const { t } = useI18n() |
| 8 | // 表单校验 | 8 | // 表单校验 |
| 9 | export const dictDataRules = reactive({ | 9 | export const dictDataRules = reactive({ |
| 10 | - label: [required], | 10 | + title: [required], |
| 11 | value: [required], | 11 | value: [required], |
| 12 | sort: [required] | 12 | sort: [required] |
| 13 | }) | 13 | }) |
| 14 | // crudSchemas | 14 | // crudSchemas |
| 15 | -export const crudSchemas = reactive<CrudSchema[]>([ | ||
| 16 | - { | ||
| 17 | - label: t('common.index'), | ||
| 18 | - field: 'id', | ||
| 19 | - type: 'index', | ||
| 20 | - form: { | ||
| 21 | - show: false | 15 | +export const crudSchemas = reactive<VxeCrudSchema>({ |
| 16 | + primaryKey: 'id', | ||
| 17 | + primaryType: 'seq', | ||
| 18 | + action: true, | ||
| 19 | + actionWidth: '140px', | ||
| 20 | + columns: [ | ||
| 21 | + { | ||
| 22 | + title: '字典类型', | ||
| 23 | + field: 'dictType', | ||
| 24 | + isTable: false, | ||
| 25 | + isForm: false | ||
| 22 | }, | 26 | }, |
| 23 | - detail: { | ||
| 24 | - show: false | ||
| 25 | - } | ||
| 26 | - }, | ||
| 27 | - { | ||
| 28 | - label: '字典类型', | ||
| 29 | - field: 'dictType', | ||
| 30 | - table: { | ||
| 31 | - show: false | 27 | + { |
| 28 | + title: '数据标签', | ||
| 29 | + field: 'label', | ||
| 30 | + isSearch: true | ||
| 32 | }, | 31 | }, |
| 33 | - form: { | ||
| 34 | - show: false | ||
| 35 | - } | ||
| 36 | - }, | ||
| 37 | - { | ||
| 38 | - label: '数据标签', | ||
| 39 | - field: 'label', | ||
| 40 | - search: { | ||
| 41 | - show: true | ||
| 42 | - } | ||
| 43 | - }, | ||
| 44 | - { | ||
| 45 | - label: '数据键值', | ||
| 46 | - field: 'value' | ||
| 47 | - }, | ||
| 48 | - { | ||
| 49 | - label: '颜色类型', | ||
| 50 | - field: 'colorType', | ||
| 51 | - form: { | ||
| 52 | - component: 'Select', | ||
| 53 | - componentProps: { | ||
| 54 | - options: [ | ||
| 55 | - { | ||
| 56 | - label: 'default', | ||
| 57 | - value: '' | ||
| 58 | - }, | ||
| 59 | - { | ||
| 60 | - label: 'success', | ||
| 61 | - value: 'success' | ||
| 62 | - }, | ||
| 63 | - { | ||
| 64 | - label: 'info', | ||
| 65 | - value: 'info' | ||
| 66 | - }, | ||
| 67 | - { | ||
| 68 | - label: 'warning', | ||
| 69 | - value: 'warning' | ||
| 70 | - }, | ||
| 71 | - { | ||
| 72 | - label: 'danger', | ||
| 73 | - value: 'danger' | ||
| 74 | - } | ||
| 75 | - ] | ||
| 76 | - } | 32 | + { |
| 33 | + title: '数据键值', | ||
| 34 | + field: 'value' | ||
| 77 | }, | 35 | }, |
| 78 | - table: { | ||
| 79 | - show: false | ||
| 80 | - } | ||
| 81 | - }, | ||
| 82 | - { | ||
| 83 | - label: 'CSS Class', | ||
| 84 | - field: 'cssClass', | ||
| 85 | - table: { | ||
| 86 | - show: false | ||
| 87 | - } | ||
| 88 | - }, | ||
| 89 | - { | ||
| 90 | - label: '显示排序', | ||
| 91 | - field: 'sort', | ||
| 92 | - table: { | ||
| 93 | - show: false | ||
| 94 | - } | ||
| 95 | - }, | ||
| 96 | - { | ||
| 97 | - label: t('common.status'), | ||
| 98 | - field: 'status', | ||
| 99 | - dictType: DICT_TYPE.COMMON_STATUS, | ||
| 100 | - dictClass: 'number' | ||
| 101 | - }, | ||
| 102 | - { | ||
| 103 | - label: t('form.remark'), | ||
| 104 | - field: 'remark', | ||
| 105 | - form: { | ||
| 106 | - component: 'Input', | ||
| 107 | - componentProps: { | ||
| 108 | - type: 'textarea', | ||
| 109 | - rows: 4 | 36 | + { |
| 37 | + title: '颜色类型', | ||
| 38 | + field: 'colorType', | ||
| 39 | + form: { | ||
| 40 | + component: 'Select', | ||
| 41 | + componentProps: { | ||
| 42 | + options: [ | ||
| 43 | + { | ||
| 44 | + title: 'default', | ||
| 45 | + value: '' | ||
| 46 | + }, | ||
| 47 | + { | ||
| 48 | + title: 'success', | ||
| 49 | + value: 'success' | ||
| 50 | + }, | ||
| 51 | + { | ||
| 52 | + title: 'info', | ||
| 53 | + value: 'info' | ||
| 54 | + }, | ||
| 55 | + { | ||
| 56 | + title: 'warning', | ||
| 57 | + value: 'warning' | ||
| 58 | + }, | ||
| 59 | + { | ||
| 60 | + title: 'danger', | ||
| 61 | + value: 'danger' | ||
| 62 | + } | ||
| 63 | + ] | ||
| 64 | + } | ||
| 110 | }, | 65 | }, |
| 111 | - colProps: { | ||
| 112 | - span: 24 | ||
| 113 | - } | 66 | + isTable: false |
| 114 | }, | 67 | }, |
| 115 | - table: { | ||
| 116 | - show: false | ||
| 117 | - } | ||
| 118 | - }, | ||
| 119 | - { | ||
| 120 | - label: t('table.action'), | ||
| 121 | - field: 'action', | ||
| 122 | - width: '180px', | ||
| 123 | - form: { | ||
| 124 | - show: false | 68 | + { |
| 69 | + title: 'CSS Class', | ||
| 70 | + field: 'cssClass', | ||
| 71 | + isTable: false | ||
| 72 | + }, | ||
| 73 | + { | ||
| 74 | + title: '显示排序', | ||
| 75 | + field: 'sort', | ||
| 76 | + isTable: false | ||
| 77 | + }, | ||
| 78 | + { | ||
| 79 | + title: t('common.status'), | ||
| 80 | + field: 'status', | ||
| 81 | + dictType: DICT_TYPE.COMMON_STATUS, | ||
| 82 | + dictClass: 'number' | ||
| 125 | }, | 83 | }, |
| 126 | - detail: { | ||
| 127 | - show: false | 84 | + { |
| 85 | + title: t('form.remark'), | ||
| 86 | + field: 'remark', | ||
| 87 | + form: { | ||
| 88 | + component: 'Input', | ||
| 89 | + componentProps: { | ||
| 90 | + type: 'textarea', | ||
| 91 | + rows: 4 | ||
| 92 | + }, | ||
| 93 | + colProps: { | ||
| 94 | + span: 24 | ||
| 95 | + } | ||
| 96 | + }, | ||
| 97 | + isTable: false | ||
| 128 | } | 98 | } |
| 129 | - } | ||
| 130 | -]) | ||
| 131 | - | ||
| 132 | -export const { allSchemas } = useCrudSchemas(crudSchemas) | 99 | + ] |
| 100 | +}) | ||
| 101 | +export const { allSchemas } = useVxeCrudSchemas(crudSchemas) |
yudao-ui-admin-vue3/src/views/system/dict/dict.type.ts
| @@ -2,96 +2,63 @@ import { reactive } from 'vue' | @@ -2,96 +2,63 @@ import { reactive } from 'vue' | ||
| 2 | import { DICT_TYPE } from '@/utils/dict' | 2 | import { DICT_TYPE } from '@/utils/dict' |
| 3 | import { required } from '@/utils/formRules' | 3 | import { required } from '@/utils/formRules' |
| 4 | import { useI18n } from '@/hooks/web/useI18n' | 4 | import { useI18n } from '@/hooks/web/useI18n' |
| 5 | -import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas' | ||
| 6 | -// 国际化 | ||
| 7 | -const { t } = useI18n() | 5 | +import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas' |
| 6 | +const { t } = useI18n() // 国际化 | ||
| 7 | + | ||
| 8 | // 表单校验 | 8 | // 表单校验 |
| 9 | export const dictTypeRules = reactive({ | 9 | export const dictTypeRules = reactive({ |
| 10 | name: [required], | 10 | name: [required], |
| 11 | type: [required] | 11 | type: [required] |
| 12 | }) | 12 | }) |
| 13 | // 新增 + 修改 | 13 | // 新增 + 修改 |
| 14 | -const crudSchemas = reactive<CrudSchema[]>([ | ||
| 15 | - { | ||
| 16 | - label: t('common.index'), | ||
| 17 | - field: 'id', | ||
| 18 | - type: 'index', | ||
| 19 | - form: { | ||
| 20 | - show: false | ||
| 21 | - }, | ||
| 22 | - detail: { | ||
| 23 | - show: false | ||
| 24 | - } | ||
| 25 | - }, | ||
| 26 | - { | ||
| 27 | - label: '字典名称', | ||
| 28 | - field: 'name', | ||
| 29 | - search: { | ||
| 30 | - show: true | ||
| 31 | - } | ||
| 32 | - }, | ||
| 33 | - { | ||
| 34 | - label: '字典类型', | ||
| 35 | - field: 'type', | ||
| 36 | - search: { | ||
| 37 | - show: true | ||
| 38 | - } | ||
| 39 | - }, | ||
| 40 | - { | ||
| 41 | - label: t('common.status'), | ||
| 42 | - field: 'status', | ||
| 43 | - dictType: DICT_TYPE.COMMON_STATUS, | ||
| 44 | - dictClass: 'number' | ||
| 45 | - }, | ||
| 46 | - { | ||
| 47 | - label: t('common.createTime'), | ||
| 48 | - field: 'createTime', | ||
| 49 | - table: { | ||
| 50 | - show: false | ||
| 51 | - }, | ||
| 52 | - form: { | ||
| 53 | - show: false | 14 | +const crudSchemas = reactive<VxeCrudSchema>({ |
| 15 | + primaryKey: 'id', | ||
| 16 | + primaryType: 'seq', | ||
| 17 | + action: true, | ||
| 18 | + actionWidth: '140px', | ||
| 19 | + columns: [ | ||
| 20 | + { | ||
| 21 | + title: '字典名称', | ||
| 22 | + field: 'name', | ||
| 23 | + isSearch: true | ||
| 54 | }, | 24 | }, |
| 55 | - detail: { | ||
| 56 | - show: false | 25 | + { |
| 26 | + title: '字典类型', | ||
| 27 | + field: 'type', | ||
| 28 | + isSearch: true | ||
| 57 | }, | 29 | }, |
| 58 | - search: { | ||
| 59 | - show: true, | ||
| 60 | - component: 'DatePicker', | ||
| 61 | - componentProps: { | ||
| 62 | - type: 'datetimerange', | ||
| 63 | - valueFormat: 'YYYY-MM-DD HH:mm:ss', | ||
| 64 | - defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)] | 30 | + { |
| 31 | + title: t('common.status'), | ||
| 32 | + field: 'status', | ||
| 33 | + dictType: DICT_TYPE.COMMON_STATUS, | ||
| 34 | + dictClass: 'number', | ||
| 35 | + table: { | ||
| 36 | + width: 70 | ||
| 65 | } | 37 | } |
| 66 | - } | ||
| 67 | - }, | ||
| 68 | - { | ||
| 69 | - label: t('form.remark'), | ||
| 70 | - field: 'remark', | ||
| 71 | - table: { | ||
| 72 | - show: false | ||
| 73 | }, | 38 | }, |
| 74 | - form: { | ||
| 75 | - componentProps: { | ||
| 76 | - type: 'textarea', | ||
| 77 | - rows: 4 | ||
| 78 | - }, | ||
| 79 | - colProps: { | ||
| 80 | - span: 24 | 39 | + { |
| 40 | + title: t('common.createTime'), | ||
| 41 | + field: 'createTime', | ||
| 42 | + formatter: 'formatDate', | ||
| 43 | + isForm: false, | ||
| 44 | + table: { | ||
| 45 | + width: 150 | ||
| 81 | } | 46 | } |
| 82 | - } | ||
| 83 | - }, | ||
| 84 | - { | ||
| 85 | - field: 'action', | ||
| 86 | - width: '180px', | ||
| 87 | - label: t('table.action'), | ||
| 88 | - form: { | ||
| 89 | - show: false | ||
| 90 | }, | 47 | }, |
| 91 | - detail: { | ||
| 92 | - show: false | 48 | + { |
| 49 | + title: t('form.remark'), | ||
| 50 | + field: 'remark', | ||
| 51 | + isTable: false, | ||
| 52 | + form: { | ||
| 53 | + componentProps: { | ||
| 54 | + type: 'textarea', | ||
| 55 | + rows: 4 | ||
| 56 | + }, | ||
| 57 | + colProps: { | ||
| 58 | + span: 24 | ||
| 59 | + } | ||
| 60 | + } | ||
| 93 | } | 61 | } |
| 94 | - } | ||
| 95 | -]) | ||
| 96 | - | ||
| 97 | -export const { allSchemas } = useCrudSchemas(crudSchemas) | 62 | + ] |
| 63 | +}) | ||
| 64 | +export const { allSchemas } = useVxeCrudSchemas(crudSchemas) |
yudao-ui-admin-vue3/src/views/system/dict/index.vue
| @@ -6,54 +6,36 @@ | @@ -6,54 +6,36 @@ | ||
| 6 | <span>字典分类</span> | 6 | <span>字典分类</span> |
| 7 | </div> | 7 | </div> |
| 8 | </template> | 8 | </template> |
| 9 | - <Search | ||
| 10 | - :schema="DictTypeSchemas.allSchemas.searchSchema" | ||
| 11 | - @search="setTypeSearchParams" | ||
| 12 | - @reset="setTypeSearchParams" | ||
| 13 | - /> | ||
| 14 | - <!-- 操作工具栏 --> | ||
| 15 | - <div class="mb-10px"> | ||
| 16 | - <XButton | ||
| 17 | - type="primary" | ||
| 18 | - preIcon="ep:zoom-in" | ||
| 19 | - :title="t('action.add')" | ||
| 20 | - v-hasPermi="['system:dict:create']" | ||
| 21 | - @click="handleTypeCreate()" | ||
| 22 | - /> | ||
| 23 | - </div> | ||
| 24 | - <!-- 列表 --> | ||
| 25 | - <Table | ||
| 26 | - @row-click="onClickType" | ||
| 27 | - :columns="DictTypeSchemas.allSchemas.tableColumns" | ||
| 28 | - :selection="false" | ||
| 29 | - :data="typeTableObject.tableList" | ||
| 30 | - :loading="typeTableObject.loading" | ||
| 31 | - :pagination="{ | ||
| 32 | - total: typeTableObject.total | ||
| 33 | - }" | ||
| 34 | - :highlight-current-row="true" | ||
| 35 | - v-model:pageSize="typeTableObject.pageSize" | ||
| 36 | - v-model:currentPage="typeTableObject.currentPage" | ||
| 37 | - @register="typeRegister" | 9 | + <vxe-grid |
| 10 | + ref="xTypeGrid" | ||
| 11 | + v-bind="typeGridOptions" | ||
| 12 | + @cell-click="cellClickEvent" | ||
| 13 | + class="xtable-scrollbar" | ||
| 38 | > | 14 | > |
| 39 | - <template #status="{ row }"> | ||
| 40 | - <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" /> | 15 | + <template #toolbar_buttons> |
| 16 | + <XButton | ||
| 17 | + type="primary" | ||
| 18 | + preIcon="ep:zoom-in" | ||
| 19 | + :title="t('action.add')" | ||
| 20 | + v-hasPermi="['system:dict:create']" | ||
| 21 | + @click="handleTypeCreate()" | ||
| 22 | + /> | ||
| 41 | </template> | 23 | </template> |
| 42 | - <template #action="{ row }"> | 24 | + <template #actionbtns_default="{ row }"> |
| 43 | <XTextButton | 25 | <XTextButton |
| 44 | preIcon="ep:edit" | 26 | preIcon="ep:edit" |
| 45 | :title="t('action.edit')" | 27 | :title="t('action.edit')" |
| 46 | v-hasPermi="['system:dict:update']" | 28 | v-hasPermi="['system:dict:update']" |
| 47 | - @click="handleTypeUpdate(row)" | 29 | + @click="handleTypeUpdate(row.id)" |
| 48 | /> | 30 | /> |
| 49 | <XTextButton | 31 | <XTextButton |
| 50 | preIcon="ep:delete" | 32 | preIcon="ep:delete" |
| 51 | :title="t('action.del')" | 33 | :title="t('action.del')" |
| 52 | v-hasPermi="['system:dict:delete']" | 34 | v-hasPermi="['system:dict:delete']" |
| 53 | - @click="delTypeList(row.id, false)" | 35 | + @click="handleTypeDelete(row.id)" |
| 54 | /> | 36 | /> |
| 55 | </template> | 37 | </template> |
| 56 | - </Table> | 38 | + </vxe-grid> |
| 57 | </el-card> | 39 | </el-card> |
| 58 | <el-card class="w-1/2 dict" style="margin-left: 10px" :gutter="12" shadow="hover"> | 40 | <el-card class="w-1/2 dict" style="margin-left: 10px" :gutter="12" shadow="hover"> |
| 59 | <template #header> | 41 | <template #header> |
| @@ -66,51 +48,32 @@ | @@ -66,51 +48,32 @@ | ||
| 66 | <span>请从左侧选择</span> | 48 | <span>请从左侧选择</span> |
| 67 | </div> | 49 | </div> |
| 68 | <div v-if="tableTypeSelect"> | 50 | <div v-if="tableTypeSelect"> |
| 69 | - <Search | ||
| 70 | - :schema="DictDataSchemas.allSchemas.searchSchema" | ||
| 71 | - @search="setDataSearchParams" | ||
| 72 | - @reset="setDataSearchParams" | ||
| 73 | - /> | ||
| 74 | - <!-- 操作工具栏 --> | ||
| 75 | - <div class="mb-10px"> | ||
| 76 | - <XButton | ||
| 77 | - type="primary" | ||
| 78 | - preIcon="ep:zoom-in" | ||
| 79 | - :title="t('action.add')" | ||
| 80 | - v-hasPermi="['system:dict:create']" | ||
| 81 | - @click="handleDataCreate()" | ||
| 82 | - /> | ||
| 83 | - </div> | ||
| 84 | - <Table | ||
| 85 | - :columns="DictDataSchemas.allSchemas.tableColumns" | ||
| 86 | - :selection="false" | ||
| 87 | - :data="dataTableObject.tableList" | ||
| 88 | - :loading="dataTableObject.loading" | ||
| 89 | - :pagination="{ | ||
| 90 | - total: dataTableObject.total | ||
| 91 | - }" | ||
| 92 | - v-model:pageSize="dataTableObject.pageSize" | ||
| 93 | - v-model:currentPage="dataTableObject.currentPage" | ||
| 94 | - @register="dataRegister" | ||
| 95 | - > | ||
| 96 | - <template #status="{ row }"> | ||
| 97 | - <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" /> | 51 | + <!-- 列表 --> |
| 52 | + <vxe-grid ref="xDataGrid" v-bind="dataGridOptions" class="xtable-scrollbar"> | ||
| 53 | + <template #toolbar_buttons> | ||
| 54 | + <XButton | ||
| 55 | + type="primary" | ||
| 56 | + preIcon="ep:zoom-in" | ||
| 57 | + :title="t('action.add')" | ||
| 58 | + v-hasPermi="['system:dict:create']" | ||
| 59 | + @click="handleDataCreate()" | ||
| 60 | + /> | ||
| 98 | </template> | 61 | </template> |
| 99 | - <template #action="{ row }"> | 62 | + <template #actionbtns_default="{ row }"> |
| 100 | <XTextButton | 63 | <XTextButton |
| 101 | v-hasPermi="['system:dict:update']" | 64 | v-hasPermi="['system:dict:update']" |
| 102 | preIcon="ep:edit" | 65 | preIcon="ep:edit" |
| 103 | :title="t('action.edit')" | 66 | :title="t('action.edit')" |
| 104 | - @click="handleDataUpdate(row)" | 67 | + @click="handleDataUpdate(row.id)" |
| 105 | /> | 68 | /> |
| 106 | <XTextButton | 69 | <XTextButton |
| 107 | v-hasPermi="['system:dict:delete']" | 70 | v-hasPermi="['system:dict:delete']" |
| 108 | preIcon="ep:delete" | 71 | preIcon="ep:delete" |
| 109 | :title="t('action.del')" | 72 | :title="t('action.del')" |
| 110 | - @click="delDataList(row.id, false)" | 73 | + @click="handleDataDelete(row.id)" |
| 111 | /> | 74 | /> |
| 112 | </template> | 75 | </template> |
| 113 | - </Table> | 76 | + </vxe-grid> |
| 114 | </div> | 77 | </div> |
| 115 | </el-card> | 78 | </el-card> |
| 116 | <XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle"> | 79 | <XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle"> |
| @@ -155,82 +118,81 @@ | @@ -155,82 +118,81 @@ | ||
| 155 | </div> | 118 | </div> |
| 156 | </template> | 119 | </template> |
| 157 | <script setup lang="ts"> | 120 | <script setup lang="ts"> |
| 158 | -import { ref, unref, onMounted } from 'vue' | ||
| 159 | -import { DICT_TYPE } from '@/utils/dict' | 121 | +import { ref, unref, reactive } from 'vue' |
| 160 | import { useI18n } from '@/hooks/web/useI18n' | 122 | import { useI18n } from '@/hooks/web/useI18n' |
| 123 | +import { useMessage } from '@/hooks/web/useMessage' | ||
| 124 | +import { useVxeGrid } from '@/hooks/web/useVxeGrid' | ||
| 125 | +import { VxeGridInstance, VxeTableEvents } from 'vxe-table' | ||
| 161 | import { FormExpose } from '@/components/Form' | 126 | import { FormExpose } from '@/components/Form' |
| 162 | -import { ElInput, ElTag } from 'element-plus' | 127 | +import { ElInput, ElTag, ElCard } from 'element-plus' |
| 163 | import * as DictTypeSchemas from './dict.type' | 128 | import * as DictTypeSchemas from './dict.type' |
| 164 | import * as DictDataSchemas from './dict.data' | 129 | import * as DictDataSchemas from './dict.data' |
| 165 | -import { useTable } from '@/hooks/web/useTable' | ||
| 166 | -import { ElCard, ElMessage } from 'element-plus' | ||
| 167 | import * as DictTypeApi from '@/api/system/dict/dict.type' | 130 | import * as DictTypeApi from '@/api/system/dict/dict.type' |
| 168 | import * as DictDataApi from '@/api/system/dict/dict.data' | 131 | import * as DictDataApi from '@/api/system/dict/dict.data' |
| 169 | import { DictDataVO, DictTypeVO } from '@/api/system/dict/types' | 132 | import { DictDataVO, DictTypeVO } from '@/api/system/dict/types' |
| 133 | + | ||
| 170 | const { t } = useI18n() // 国际化 | 134 | const { t } = useI18n() // 国际化 |
| 171 | -// ========== 字典分类列表相关 ========== | 135 | +const message = useMessage() // 消息弹窗 |
| 136 | + | ||
| 137 | +const xTypeGrid = ref<VxeGridInstance>() // 列表 Grid Ref | ||
| 172 | const { | 138 | const { |
| 173 | - register: typeRegister, | ||
| 174 | - tableObject: typeTableObject, | ||
| 175 | - methods: typeMethods | ||
| 176 | -} = useTable<DictTypeVO>({ | 139 | + gridOptions: typeGridOptions, |
| 140 | + getList: typeGetList, | ||
| 141 | + deleteData: typeDeleteData | ||
| 142 | +} = useVxeGrid<DictTypeVO>({ | ||
| 143 | + allSchemas: DictTypeSchemas.allSchemas, | ||
| 177 | getListApi: DictTypeApi.getDictTypePageApi, | 144 | getListApi: DictTypeApi.getDictTypePageApi, |
| 178 | - delListApi: DictTypeApi.deleteDictTypeApi | 145 | + deleteApi: DictTypeApi.deleteDictTypeApi |
| 146 | +}) | ||
| 147 | + | ||
| 148 | +const xDataGrid = ref<VxeGridInstance>() // 列表 Grid Ref | ||
| 149 | +const queryParams = reactive({ | ||
| 150 | + dictType: null | ||
| 179 | }) | 151 | }) |
| 180 | const { | 152 | const { |
| 181 | - getList: getTypeList, | ||
| 182 | - setSearchParams: setTypeSearchParams, | ||
| 183 | - delList: delTypeList | ||
| 184 | -} = typeMethods | 153 | + gridOptions: dataGridOptions, |
| 154 | + getList: dataGetList, | ||
| 155 | + deleteData: dataDeleteData | ||
| 156 | +} = useVxeGrid<DictDataVO>({ | ||
| 157 | + allSchemas: DictDataSchemas.allSchemas, | ||
| 158 | + queryParams: queryParams, | ||
| 159 | + getListApi: DictDataApi.getDictDataPageApi, | ||
| 160 | + deleteApi: DictDataApi.deleteDictDataApi | ||
| 161 | +}) | ||
| 162 | +// ========== 字典分类列表相关 ========== | ||
| 185 | const dictTypeValue = ref('') | 163 | const dictTypeValue = ref('') |
| 186 | // 字典分类修改操作 | 164 | // 字典分类修改操作 |
| 187 | const handleTypeCreate = () => { | 165 | const handleTypeCreate = () => { |
| 188 | dictTypeValue.value = '' | 166 | dictTypeValue.value = '' |
| 189 | setDialogTile('typeCreate') | 167 | setDialogTile('typeCreate') |
| 190 | } | 168 | } |
| 191 | -const handleTypeUpdate = async (row: DictTypeVO) => { | 169 | +const handleTypeUpdate = async (rowId: number) => { |
| 192 | setDialogTile('typeUpdate') | 170 | setDialogTile('typeUpdate') |
| 193 | // 设置数据 | 171 | // 设置数据 |
| 194 | - const res = await DictTypeApi.getDictTypeApi(row.id) | 172 | + const res = await DictTypeApi.getDictTypeApi(rowId) |
| 195 | dictTypeValue.value = res.type | 173 | dictTypeValue.value = res.type |
| 196 | unref(typeFormRef)?.setValues(res) | 174 | unref(typeFormRef)?.setValues(res) |
| 197 | } | 175 | } |
| 198 | 176 | ||
| 199 | -// ========== 字典数据列表相关 ========== | ||
| 200 | -const tableTypeSelect = ref(false) | ||
| 201 | -const { | ||
| 202 | - register: dataRegister, | ||
| 203 | - tableObject: dataTableObject, | ||
| 204 | - methods: dataMethods | ||
| 205 | -} = useTable<DictDataVO>({ | ||
| 206 | - getListApi: DictDataApi.getDictDataPageApi, | ||
| 207 | - delListApi: DictDataApi.deleteDictDataApi | ||
| 208 | -}) | ||
| 209 | -const { | ||
| 210 | - getList: getDataList, | ||
| 211 | - setSearchParams: setDataSearchParams, | ||
| 212 | - delList: delDataList | ||
| 213 | -} = dataMethods | ||
| 214 | - | ||
| 215 | // 字典数据修改操作 | 177 | // 字典数据修改操作 |
| 216 | const handleDataCreate = () => { | 178 | const handleDataCreate = () => { |
| 217 | setDialogTile('dataCreate') | 179 | setDialogTile('dataCreate') |
| 218 | } | 180 | } |
| 219 | -const handleDataUpdate = async (row: DictDataVO) => { | 181 | +const handleDataUpdate = async (rowId: number) => { |
| 220 | setDialogTile('dataUpdate') | 182 | setDialogTile('dataUpdate') |
| 221 | // 设置数据 | 183 | // 设置数据 |
| 222 | - const res = await DictDataApi.getDictDataApi(row.id) | 184 | + const res = await DictDataApi.getDictDataApi(rowId) |
| 223 | unref(dataFormRef)?.setValues(res) | 185 | unref(dataFormRef)?.setValues(res) |
| 224 | } | 186 | } |
| 225 | // 字典分类点击行事件 | 187 | // 字典分类点击行事件 |
| 226 | const parentType = ref('') | 188 | const parentType = ref('') |
| 227 | -const onClickType = async (data: { [key: string]: any }) => { | 189 | +const tableTypeSelect = ref(false) |
| 190 | +const cellClickEvent: VxeTableEvents.CellClick = async ({ row }) => { | ||
| 191 | + console.info(row['type']) | ||
| 228 | tableTypeSelect.value = true | 192 | tableTypeSelect.value = true |
| 229 | - dataTableObject.params = { | ||
| 230 | - dictType: data.type | ||
| 231 | - } | ||
| 232 | - getDataList() | ||
| 233 | - parentType.value = data.type | 193 | + queryParams.dictType = row['type'] |
| 194 | + await dataGetList(xDataGrid) | ||
| 195 | + parentType.value = row['type'] | ||
| 234 | } | 196 | } |
| 235 | // 弹出框 | 197 | // 弹出框 |
| 236 | const dialogVisible = ref(false) // 是否显示弹出层 | 198 | const dialogVisible = ref(false) // 是否显示弹出层 |
| @@ -246,6 +208,16 @@ const setDialogTile = (type: string) => { | @@ -246,6 +208,16 @@ const setDialogTile = (type: string) => { | ||
| 246 | actionType.value = type | 208 | actionType.value = type |
| 247 | dialogVisible.value = true | 209 | dialogVisible.value = true |
| 248 | } | 210 | } |
| 211 | + | ||
| 212 | +// 删除操作 | ||
| 213 | +const handleTypeDelete = async (rowId: number) => { | ||
| 214 | + await typeDeleteData(xTypeGrid, rowId) | ||
| 215 | +} | ||
| 216 | + | ||
| 217 | +const handleDataDelete = async (rowId: number) => { | ||
| 218 | + await dataDeleteData(xDataGrid, rowId) | ||
| 219 | +} | ||
| 220 | + | ||
| 249 | // 提交按钮 | 221 | // 提交按钮 |
| 250 | const submitTypeForm = async () => { | 222 | const submitTypeForm = async () => { |
| 251 | const elForm = unref(typeFormRef)?.getElFormRef() | 223 | const elForm = unref(typeFormRef)?.getElFormRef() |
| @@ -259,16 +231,15 @@ const submitTypeForm = async () => { | @@ -259,16 +231,15 @@ const submitTypeForm = async () => { | ||
| 259 | if (actionType.value === 'typeCreate') { | 231 | if (actionType.value === 'typeCreate') { |
| 260 | data.type = dictTypeValue.value | 232 | data.type = dictTypeValue.value |
| 261 | await DictTypeApi.createDictTypeApi(data) | 233 | await DictTypeApi.createDictTypeApi(data) |
| 262 | - ElMessage.success(t('common.createSuccess')) | 234 | + message.success(t('common.createSuccess')) |
| 263 | } else if (actionType.value === 'typeUpdate') { | 235 | } else if (actionType.value === 'typeUpdate') { |
| 264 | await DictTypeApi.updateDictTypeApi(data) | 236 | await DictTypeApi.updateDictTypeApi(data) |
| 265 | - ElMessage.success(t('common.updateSuccess')) | 237 | + message.success(t('common.updateSuccess')) |
| 266 | } | 238 | } |
| 267 | - // 操作成功，重新加载列表 | ||
| 268 | - await getTypeList() | ||
| 269 | dialogVisible.value = false | 239 | dialogVisible.value = false |
| 270 | } finally { | 240 | } finally { |
| 271 | actionLoading.value = false | 241 | actionLoading.value = false |
| 242 | + typeGetList(xTypeGrid) | ||
| 272 | } | 243 | } |
| 273 | } | 244 | } |
| 274 | }) | 245 | }) |
| @@ -285,23 +256,17 @@ const submitDataForm = async () => { | @@ -285,23 +256,17 @@ const submitDataForm = async () => { | ||
| 285 | if (actionType.value === 'dataCreate') { | 256 | if (actionType.value === 'dataCreate') { |
| 286 | data.dictType = parentType.value | 257 | data.dictType = parentType.value |
| 287 | await DictDataApi.createDictDataApi(data) | 258 | await DictDataApi.createDictDataApi(data) |
| 288 | - ElMessage.success(t('common.createSuccess')) | 259 | + message.success(t('common.createSuccess')) |
| 289 | } else if (actionType.value === 'dataUpdate') { | 260 | } else if (actionType.value === 'dataUpdate') { |
| 290 | await DictDataApi.updateDictDataApi(data) | 261 | await DictDataApi.updateDictDataApi(data) |
| 291 | - ElMessage.success(t('common.updateSuccess')) | 262 | + message.success(t('common.updateSuccess')) |
| 292 | } | 263 | } |
| 293 | - await getDataList() | ||
| 294 | - // 操作成功，重新加载列表 | ||
| 295 | dialogVisible.value = false | 264 | dialogVisible.value = false |
| 296 | } finally { | 265 | } finally { |
| 297 | actionLoading.value = false | 266 | actionLoading.value = false |
| 267 | + dataGetList(xDataGrid) | ||
| 298 | } | 268 | } |
| 299 | } | 269 | } |
| 300 | }) | 270 | }) |
| 301 | } | 271 | } |
| 302 | -// 初始化查询 | ||
| 303 | -onMounted(async () => { | ||
| 304 | - await getTypeList() | ||
| 305 | - typeTableObject.tableList[0] && onClickType(typeTableObject.tableList[0]) | ||
| 306 | -}) | ||
| 307 | </script> | 272 | </script> |