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 | 2 | import { DICT_TYPE } from '@/utils/dict' |
| 3 | 3 | import { required } from '@/utils/formRules' |
| 4 | 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 | 7 | const { t } = useI18n() |
| 8 | 8 | // 表单校验 |
| 9 | 9 | export const dictDataRules = reactive({ |
| 10 | - label: [required], | |
| 10 | + title: [required], | |
| 11 | 11 | value: [required], |
| 12 | 12 | sort: [required] |
| 13 | 13 | }) |
| 14 | 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 | 2 | import { DICT_TYPE } from '@/utils/dict' |
| 3 | 3 | import { required } from '@/utils/formRules' |
| 4 | 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 | 9 | export const dictTypeRules = reactive({ |
| 10 | 10 | name: [required], |
| 11 | 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 | 6 | <span>字典分类</span> |
| 7 | 7 | </div> |
| 8 | 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 | 23 | </template> |
| 42 | - <template #action="{ row }"> | |
| 24 | + <template #actionbtns_default="{ row }"> | |
| 43 | 25 | <XTextButton |
| 44 | 26 | preIcon="ep:edit" |
| 45 | 27 | :title="t('action.edit')" |
| 46 | 28 | v-hasPermi="['system:dict:update']" |
| 47 | - @click="handleTypeUpdate(row)" | |
| 29 | + @click="handleTypeUpdate(row.id)" | |
| 48 | 30 | /> |
| 49 | 31 | <XTextButton |
| 50 | 32 | preIcon="ep:delete" |
| 51 | 33 | :title="t('action.del')" |
| 52 | 34 | v-hasPermi="['system:dict:delete']" |
| 53 | - @click="delTypeList(row.id, false)" | |
| 35 | + @click="handleTypeDelete(row.id)" | |
| 54 | 36 | /> |
| 55 | 37 | </template> |
| 56 | - </Table> | |
| 38 | + </vxe-grid> | |
| 57 | 39 | </el-card> |
| 58 | 40 | <el-card class="w-1/2 dict" style="margin-left: 10px" :gutter="12" shadow="hover"> |
| 59 | 41 | <template #header> |
| ... | ... | @@ -66,51 +48,32 @@ |
| 66 | 48 | <span>请从左侧选择</span> |
| 67 | 49 | </div> |
| 68 | 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 | 61 | </template> |
| 99 | - <template #action="{ row }"> | |
| 62 | + <template #actionbtns_default="{ row }"> | |
| 100 | 63 | <XTextButton |
| 101 | 64 | v-hasPermi="['system:dict:update']" |
| 102 | 65 | preIcon="ep:edit" |
| 103 | 66 | :title="t('action.edit')" |
| 104 | - @click="handleDataUpdate(row)" | |
| 67 | + @click="handleDataUpdate(row.id)" | |
| 105 | 68 | /> |
| 106 | 69 | <XTextButton |
| 107 | 70 | v-hasPermi="['system:dict:delete']" |
| 108 | 71 | preIcon="ep:delete" |
| 109 | 72 | :title="t('action.del')" |
| 110 | - @click="delDataList(row.id, false)" | |
| 73 | + @click="handleDataDelete(row.id)" | |
| 111 | 74 | /> |
| 112 | 75 | </template> |
| 113 | - </Table> | |
| 76 | + </vxe-grid> | |
| 114 | 77 | </div> |
| 115 | 78 | </el-card> |
| 116 | 79 | <XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle"> |
| ... | ... | @@ -155,82 +118,81 @@ |
| 155 | 118 | </div> |
| 156 | 119 | </template> |
| 157 | 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 | 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 | 126 | import { FormExpose } from '@/components/Form' |
| 162 | -import { ElInput, ElTag } from 'element-plus' | |
| 127 | +import { ElInput, ElTag, ElCard } from 'element-plus' | |
| 163 | 128 | import * as DictTypeSchemas from './dict.type' |
| 164 | 129 | import * as DictDataSchemas from './dict.data' |
| 165 | -import { useTable } from '@/hooks/web/useTable' | |
| 166 | -import { ElCard, ElMessage } from 'element-plus' | |
| 167 | 130 | import * as DictTypeApi from '@/api/system/dict/dict.type' |
| 168 | 131 | import * as DictDataApi from '@/api/system/dict/dict.data' |
| 169 | 132 | import { DictDataVO, DictTypeVO } from '@/api/system/dict/types' |
| 133 | + | |
| 170 | 134 | const { t } = useI18n() // 国际化 |
| 171 | -// ========== 字典分类列表相关 ========== | |
| 135 | +const message = useMessage() // 消息弹窗 | |
| 136 | + | |
| 137 | +const xTypeGrid = ref<VxeGridInstance>() // 列表 Grid Ref | |
| 172 | 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 | 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 | 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 | 163 | const dictTypeValue = ref('') |
| 186 | 164 | // 字典分类修改操作 |
| 187 | 165 | const handleTypeCreate = () => { |
| 188 | 166 | dictTypeValue.value = '' |
| 189 | 167 | setDialogTile('typeCreate') |
| 190 | 168 | } |
| 191 | -const handleTypeUpdate = async (row: DictTypeVO) => { | |
| 169 | +const handleTypeUpdate = async (rowId: number) => { | |
| 192 | 170 | setDialogTile('typeUpdate') |
| 193 | 171 | // 设置数据 |
| 194 | - const res = await DictTypeApi.getDictTypeApi(row.id) | |
| 172 | + const res = await DictTypeApi.getDictTypeApi(rowId) | |
| 195 | 173 | dictTypeValue.value = res.type |
| 196 | 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 | 178 | const handleDataCreate = () => { |
| 217 | 179 | setDialogTile('dataCreate') |
| 218 | 180 | } |
| 219 | -const handleDataUpdate = async (row: DictDataVO) => { | |
| 181 | +const handleDataUpdate = async (rowId: number) => { | |
| 220 | 182 | setDialogTile('dataUpdate') |
| 221 | 183 | // 设置数据 |
| 222 | - const res = await DictDataApi.getDictDataApi(row.id) | |
| 184 | + const res = await DictDataApi.getDictDataApi(rowId) | |
| 223 | 185 | unref(dataFormRef)?.setValues(res) |
| 224 | 186 | } |
| 225 | 187 | // 字典分类点击行事件 |
| 226 | 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 | 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 | 198 | const dialogVisible = ref(false) // 是否显示弹出层 |
| ... | ... | @@ -246,6 +208,16 @@ const setDialogTile = (type: string) => { |
| 246 | 208 | actionType.value = type |
| 247 | 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 | 222 | const submitTypeForm = async () => { |
| 251 | 223 | const elForm = unref(typeFormRef)?.getElFormRef() |
| ... | ... | @@ -259,16 +231,15 @@ const submitTypeForm = async () => { |
| 259 | 231 | if (actionType.value === 'typeCreate') { |
| 260 | 232 | data.type = dictTypeValue.value |
| 261 | 233 | await DictTypeApi.createDictTypeApi(data) |
| 262 | - ElMessage.success(t('common.createSuccess')) | |
| 234 | + message.success(t('common.createSuccess')) | |
| 263 | 235 | } else if (actionType.value === 'typeUpdate') { |
| 264 | 236 | await DictTypeApi.updateDictTypeApi(data) |
| 265 | - ElMessage.success(t('common.updateSuccess')) | |
| 237 | + message.success(t('common.updateSuccess')) | |
| 266 | 238 | } |
| 267 | - // 操作成功，重新加载列表 | |
| 268 | - await getTypeList() | |
| 269 | 239 | dialogVisible.value = false |
| 270 | 240 | } finally { |
| 271 | 241 | actionLoading.value = false |
| 242 | + typeGetList(xTypeGrid) | |
| 272 | 243 | } |
| 273 | 244 | } |
| 274 | 245 | }) |
| ... | ... | @@ -285,23 +256,17 @@ const submitDataForm = async () => { |
| 285 | 256 | if (actionType.value === 'dataCreate') { |
| 286 | 257 | data.dictType = parentType.value |
| 287 | 258 | await DictDataApi.createDictDataApi(data) |
| 288 | - ElMessage.success(t('common.createSuccess')) | |
| 259 | + message.success(t('common.createSuccess')) | |
| 289 | 260 | } else if (actionType.value === 'dataUpdate') { |
| 290 | 261 | await DictDataApi.updateDictDataApi(data) |
| 291 | - ElMessage.success(t('common.updateSuccess')) | |
| 262 | + message.success(t('common.updateSuccess')) | |
| 292 | 263 | } |
| 293 | - await getDataList() | |
| 294 | - // 操作成功，重新加载列表 | |
| 295 | 264 | dialogVisible.value = false |
| 296 | 265 | } finally { |
| 297 | 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 | 272 | </script> | ... | ... |