diff --git a/src/api/system/dict/types.ts b/src/api/system/dict/types.ts
index b630dccb..3421cd23 100644
--- a/src/api/system/dict/types.ts
+++ b/src/api/system/dict/types.ts
@@ -1,16 +1,18 @@
export type DictTypeVO = {
- id: number
+ id: number | undefined
name: string
type: string
- status: number
+ status: number | undefined
remark: string
createTime: Date
}
export type DictTypePageReqVO = {
+ pageNo: number
+ pageSize: number
name: string
type: string
- status: number
+ status: number | undefined
createTime: Date[]
}
@@ -22,8 +24,8 @@ export type DictTypeExportReqVO = {
}
export type DictDataVO = {
- id: number
- sort: number
+ id: number | undefined
+ sort: number | undefined
label: string
value: string
dictType: string
@@ -31,12 +33,14 @@ export type DictDataVO = {
colorType: string
cssClass: string
remark: string
- createTime: Date
+ createTime: Date | undefined
}
export type DictDataPageReqVO = {
+ pageNo: number
+ pageSize: number
label: string
dictType: string
- status: number
+ status: number | undefined
}
export type DictDataExportReqVO = {
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 43375961..d5970267 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -104,6 +104,31 @@ const remainingRouter: AppRouteRecordRaw[] = [
}
]
},
+
+ {
+ path: '/dict',
+ component: Layout,
+ name: 'dict',
+ meta: {
+ hidden: true
+ },
+ children: [
+ {
+ path: 'type/data/:dictType',
+ component: () => import('@/views/system/dict/data.vue'),
+ name: 'data',
+ meta: {
+ title: '字典数据',
+ noCache: true,
+ hidden: true,
+ canTo: true,
+ icon: '',
+ activeMenu: 'system/dict/data'
+ }
+ }
+ ]
+ },
+
{
path: '/codegen',
component: Layout,
diff --git a/src/views/system/dict/data.form.vue b/src/views/system/dict/data.form.vue
new file mode 100644
index 00000000..5c85b946
--- /dev/null
+++ b/src/views/system/dict/data.form.vue
@@ -0,0 +1,182 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="字典类型" prop="type">
+ <el-input
+ :disabled="typeof formData.id !== 'undefined'"
+ v-model="formData.dictType"
+ placeholder="请输入参数名称"
+ />
+ </el-form-item>
+ <el-form-item label="数据标签" prop="label">
+ <el-input v-model="formData.label" placeholder="请输入数据标签" />
+ </el-form-item>
+
+ <el-form-item label="数据键值" prop="value">
+ <el-input v-model="formData.value" placeholder="请输入数据键值" />
+ </el-form-item>
+ <el-form-item label="显示排序" prop="sort">
+ <el-input-number v-model="formData.sort" controls-position="right" :min="0" />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-radio-group v-model="formData.status">
+ <el-radio
+ v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="parseInt(dict.value)"
+ :label="parseInt(dict.value)"
+ >{{ dict.label }}</el-radio
+ >
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="颜色类型" prop="colorType">
+ <el-select v-model="formData.colorType">
+ <el-option
+ v-for="item in colorTypeOptions"
+ :key="item.value"
+ :label="item.label + '(' + item.value + ')'"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="CSS Class" prop="cssClass">
+ <el-input v-model="formData.cssClass" placeholder="请输入 CSS Class" />
+ </el-form-item>
+ <el-form-item label="备注" prop="remark">
+ <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+ <el-button @click="modelVisible = false">取 消</el-button>
+ </div>
+ </template>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+
+import * as DictDataApi from '@/api/system/dict/dict.data'
+import { DictDataVO } from '@/api/system/dict/types'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+ id: undefined,
+ sort: 0,
+ label: '',
+ value: '',
+ dictType: '',
+ status: 0,
+ colorType: '',
+ cssClass: '',
+ remark: '',
+ createTime: undefined
+})
+const formRules = reactive({
+ label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+ value: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
+ sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+// 数据标签回显样式
+
+const colorTypeOptions = readonly([
+ {
+ value: 'default',
+ label: '默认'
+ },
+ {
+ value: 'primary',
+ label: '主要'
+ },
+ {
+ value: 'success',
+ label: '成功'
+ },
+ {
+ value: 'info',
+ label: '信息'
+ },
+ {
+ value: 'warning',
+ label: '警告'
+ },
+ {
+ value: 'danger',
+ label: '危险'
+ }
+])
+
+/** 打开弹窗 */
+const openModal = async (type: string, id?: number) => {
+ modelVisible.value = true
+ modelTitle.value = t('action.' + type)
+ formType.value = type
+ resetForm()
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ formData.value = await DictDataApi.getDictDataApi(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = formData.value as DictDataVO
+ if (formType.value === 'create') {
+ await DictDataApi.createDictDataApi(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await DictDataApi.updateDictDataApi(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ sort: undefined,
+ label: '',
+ value: '',
+ dictType: '',
+ status: 0,
+ colorType: '',
+ cssClass: '',
+ remark: '',
+ createTime: undefined
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
new file mode 100644
index 00000000..2c1b373a
--- /dev/null
+++ b/src/views/system/dict/data.vue
@@ -0,0 +1,203 @@
+<template>
+ <content-wrap>
+ <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="68px">
+ <el-form-item label="字典名称" prop="dictType">
+ <el-select v-model="queryParams.dictType">
+ <el-option
+ v-for="item in simpleDictList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.type"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="字典标签" prop="label">
+ <el-input
+ v-model="queryParams.label"
+ placeholder="请输入字典标签"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="数据状态" clearable>
+ <el-option
+ v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+ <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+ <el-button type="primary" @click="openModal('create')" v-hasPermi="['system:dict:create']">
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button
+ type="success"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['system:dict:export']"
+ >
+ <Icon icon="ep:download" class="mr-5px" /> 导出
+ </el-button>
+ </el-form-item>
+ </el-form>
+ <!-- 列表 -->
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="字典编码" align="center" prop="id" />
+ <el-table-column label="字典标签" align="center" prop="label" />
+ <el-table-column label="字典键值" align="center" prop="value" />
+ <el-table-column label="字典排序" align="center" prop="sort" />
+ <el-table-column label="状态" align="center" prop="status">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+ </template>
+ </el-table-column>
+ <el-table-column label="颜色类型" align="center" prop="colorType" />
+ <el-table-column label="CSS Class" align="center" prop="cssClass" />
+ <el-table-column
+ label="备注"
+ align="center"
+ prop="remark"
+ :show-overflow-tooltip="tableTooltipConfig"
+ />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ @click="openModal('update', scope.row.id)"
+ v-hasPermi="['system:dict:update']"
+ ><Icon icon="ic:outline-mode" class="mr-5px" />修改</el-button
+ >
+ <el-button link @click="handleDelete(scope.row.id)" v-hasPermi="['system:dict:delete']"
+ ><Icon icon="material-symbols:delete-forever-sharp" class="mr-5px" />删除</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </content-wrap>
+ <!-- 表单弹窗：添加/修改 -->
+ <data-form ref="modalRef" @success="getList" />
+</template>
+
+<script setup lang="ts" name="Data">
+import * as DictDataApi from '@/api/system/dict/dict.data'
+import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type'
+import { getDictOptions, DICT_TYPE } from '@/utils/dict'
+import download from '@/utils/download'
+import { dateFormatter } from '@/utils/formatTime'
+import DataForm from './data.form.vue'
+import { DictTypeVO } from '@/api/system/dict/types'
+import { useRoute } from 'vue-router'
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const route = useRoute()
+
+const simpleDictList = ref<DictTypeVO[]>()
+
+const tableTooltipConfig = readonly({
+ appendTo: 'body'
+})
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ label: '',
+ status: undefined,
+ dictType: route.params.dictType
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询参数列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await DictDataApi.getDictDataPageApi(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
+}
+// 查询字典（精简)列表
+const getSimpleDictList = async () => {
+ const data = await listSimpleDictTypeApi()
+ simpleDictList.value = data
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+ modalRef.value.openModal(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await DictDataApi.deleteDictDataApi(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await DictDataApi.exportDictDataApi(queryParams)
+ download.excel(data, '字典数据.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
+// 查询字典（精简)列表
+getSimpleDictList()
+</script>
diff --git a/src/views/system/dict/dict.data.ts b/src/views/system/dict/dict.data.ts
deleted file mode 100644
index cdfe4538..00000000
--- a/src/views/system/dict/dict.data.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-// 国际化
-const { t } = useI18n()
-// 表单校验
-export const dictDataRules = reactive({
- label: [required],
- value: [required],
- sort: [required]
-})
-// crudSchemas
-export const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: null,
- action: true,
- actionWidth: '140px',
- searchSpan: 12,
- columns: [
- {
- title: '字典类型',
- field: 'dictType',
- isTable: false,
- isForm: false
- },
- {
- title: '数据标签',
- field: 'label',
- isSearch: true
- },
- {
- title: '数据键值',
- field: 'value'
- },
- // {
- // title: '标签类型',
- // field: 'colorType',
- // form: {
- // component: 'Select',
- // componentProps: {
- // options: [
- // {
- // label: 'default',
- // value: ''
- // },
- // {
- // label: 'success',
- // value: 'success'
- // },
- // {
- // label: 'info',
- // value: 'info'
- // },
- // {
- // label: 'warning',
- // value: 'warning'
- // },
- // {
- // label: 'danger',
- // value: 'danger'
- // }
- // ]
- // }
- // },
- // isTable: false
- // },
- {
- title: '颜色',
- field: 'cssClass',
- isTable: false,
- form: {
- component: 'ColorPicker',
- componentProps: {
- predefine: ['#ffffff', '#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#c71585']
- }
- }
- },
- {
- title: '显示排序',
- field: 'sort',
- isTable: false
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number'
- },
- {
- title: t('form.remark'),
- field: 'remark',
- form: {
- component: 'Input',
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- },
- isTable: false
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/dict/dict.type.ts b/src/views/system/dict/dict.type.ts
deleted file mode 100644
index 73b5a021..00000000
--- a/src/views/system/dict/dict.type.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const dictTypeRules = reactive({
- name: [required],
- type: [required]
-})
-// 新增 + 修改
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: null,
- action: true,
- actionWidth: '140px',
- searchSpan: 12,
- columns: [
- {
- title: '字典名称',
- field: 'name',
- isSearch: true
- },
- {
- title: '字典类型',
- field: 'type',
- isSearch: true
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number',
- table: {
- width: 70
- }
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- isTable: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- },
- {
- title: t('form.remark'),
- field: 'remark',
- isTable: false,
- form: {
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/dict/form.vue b/src/views/system/dict/form.vue
new file mode 100644
index 00000000..28b42c9d
--- /dev/null
+++ b/src/views/system/dict/form.vue
@@ -0,0 +1,122 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="字典名称" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入字典名称" />
+ </el-form-item>
+ <el-form-item label="字典类型" prop="type">
+ <el-input
+ :disabled="typeof formData.id !== 'undefined'"
+ v-model="formData.type"
+ placeholder="请输入参数名称"
+ />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-radio-group v-model="formData.status">
+ <el-radio
+ v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="parseInt(dict.value)"
+ :label="parseInt(dict.value)"
+ >{{ dict.label }}</el-radio
+ >
+ </el-radio-group>
+ </el-form-item>
+
+ <el-form-item label="备注" prop="remark">
+ <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+ <el-button @click="modelVisible = false">取 消</el-button>
+ </div>
+ </template>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import * as DictTypeApi from '@/api/system/dict/dict.type'
+import { DictTypeVO } from '@/api/system/dict/types'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+ id: undefined,
+ name: '',
+ type: '',
+ status: 0,
+ remark: ''
+})
+const formRules = reactive({
+ name: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
+ type: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = async (type: string, id?: number) => {
+ modelVisible.value = true
+ modelTitle.value = t('action.' + type)
+ formType.value = type
+ resetForm()
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ formData.value = await DictTypeApi.getDictTypeApi(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = formData.value as DictTypeVO
+ if (formType.value === 'create') {
+ await DictTypeApi.createDictTypeApi(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await DictTypeApi.updateDictTypeApi(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ type: '',
+ name: '',
+ status: undefined,
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 713fde97..367cc9d4 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,257 +1,207 @@
<template>
- <div class="flex">
- <!-- ====== 字典分类 ====== -->
- <el-card class="w-1/2 dict" :gutter="12" shadow="always">
- <template #header>
- <div class="card-header">
- <span>字典分类</span>
- </div>
- </template>
- <XTable @register="registerType" @cell-click="cellClickEvent">
- <!-- 操作：新增类型 -->
- <template #toolbar_buttons>
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:dict:create']"
- @click="handleTypeCreate()"
+ <content-wrap>
+ <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="68px">
+ <el-form-item label="字典名称" prop="name">
+ <el-input
+ v-model="queryParams.name"
+ placeholder="请输入字典名称"
+ clearable
+ style="width: 240px"
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="字典类型" prop="type">
+ <el-input
+ v-model="queryParams.type"
+ placeholder="请输入字典类型"
+ clearable
+ style="width: 240px"
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select
+ v-model="queryParams.status"
+ placeholder="字典状态"
+ clearable
+ style="width: 240px"
+ >
+ <el-option
+ v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="parseInt(dict.value)"
+ :label="dict.label"
+ :value="dict.value"
/>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ style="width: 240px"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ type="daterange"
+ range-separator="-"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+ <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+ <el-button type="primary" @click="openModal('create')" v-hasPermi="['system:dict:create']">
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button
+ type="success"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['system:dict:export']"
+ >
+ <Icon icon="ep:download" class="mr-5px" /> 导出
+ </el-button>
+ </el-form-item>
+ </el-form>
+
+ <!-- 列表 -->
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="字典编号" align="center" prop="id" />
+ <el-table-column label="字典名称" align="center" prop="name" show-overflow-tooltip />
+ <el-table-column label="字典类型" align="center" show-overflow-tooltip>
+ <template #default="scope">
+ <div>
+ <router-link :to="'/dict/type/data/' + scope.row.type">
+ <span>{{ scope.row.type }}</span>
+ </router-link>
+ </div>
</template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：编辑类型 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:dict:update']"
- @click="handleTypeUpdate(row.id)"
- />
- <!-- 操作：删除类型 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:dict:delete']"
- @click="typeDeleteData(row.id)"
- />
+ </el-table-column>
+ <el-table-column label="状态" align="center" prop="status">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
- </XTable>
- <!-- @星语：分页和列表重叠在一起了 -->
- </el-card>
- <!-- ====== 字典数据 ====== -->
- <el-card class="w-1/2 dict ml-3" :gutter="12" shadow="hover">
- <template #header>
- <div class="card-header">
- <span>字典数据</span>
- </div>
- </template>
- <!-- 列表 -->
- <div v-if="!tableTypeSelect">
- <span>请从左侧选择</span>
- </div>
- <div v-if="tableTypeSelect">
- <!-- 列表 -->
- <XTable @register="registerData">
- <!-- 操作：新增数据 -->
- <template #toolbar_buttons>
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:dict:create']"
- @click="handleDataCreate()"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改数据 -->
- <XTextButton
- v-hasPermi="['system:dict:update']"
- preIcon="ep:edit"
- :title="t('action.edit')"
- @click="handleDataUpdate(row.id)"
- />
- <!-- 操作：删除数据 -->
- <XTextButton
- v-hasPermi="['system:dict:delete']"
- preIcon="ep:delete"
- :title="t('action.del')"
- @click="dataDeleteData(row.id)"
- />
- </template>
- </XTable>
- </div>
- </el-card>
- <XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle">
- <Form
- v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
- :schema="DictTypeSchemas.allSchemas.formSchema"
- :rules="DictTypeSchemas.dictTypeRules"
- ref="typeFormRef"
- >
- <template #type>
- <template v-if="actionType == 'typeUpdate'">
- <el-tag>{{ dictTypeValue }}</el-tag>
- </template>
- <template v-else><el-input v-model="dictTypeValue" /> </template>
- </template>
- </Form>
- <Form
- v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
- :schema="DictDataSchemas.allSchemas.formSchema"
- :rules="DictDataSchemas.dictDataRules"
- ref="dataFormRef"
+ </el-table-column>
+ <el-table-column label="备注" align="center" prop="remark" />
+ <el-table-column
+ label="创建时间"
+ :formatter="dateFormatter"
+ align="center"
+ prop="createTime"
+ width="180"
/>
- <!-- 操作按钮 -->
- <template #footer>
- <XButton
- v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitTypeForm"
- />
- <XButton
- v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitDataForm"
- />
- <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
- </div>
+
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ @click="openModal('update', scope.row.id)"
+ v-hasPermi="['system:dict:update']"
+ ><Icon icon="ic:outline-mode" class="mr-5px" />修改</el-button
+ >
+ <el-button link @click="handleDelete(scope.row.id)" v-hasPermi="['system:dict:delete']"
+ ><Icon icon="material-symbols:delete-forever-sharp" class="mr-5px" />删除</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </content-wrap>
+ <!-- 表单弹窗：添加/修改 -->
+ <dict-type-form ref="modalRef" @success="getList" />
</template>
+
<script setup lang="ts" name="Dict">
-import { VxeTableEvents } from 'vxe-table'
-import type { FormExpose } from '@/components/Form'
-import * as DictTypeSchemas from './dict.type'
-import * as DictDataSchemas from './dict.data'
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() // 国际化
+import { getDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import DictTypeForm from './form.vue'
+import { DictTypePageReqVO } from '@/api/system/dict/types'
+import download from '@/utils/download'
const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
-const [registerType, { reload: typeGetList, deleteData: typeDeleteData }] = useXTable({
- allSchemas: DictTypeSchemas.allSchemas,
- getListApi: DictTypeApi.getDictTypePageApi,
- deleteApi: DictTypeApi.deleteDictTypeApi
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+
+const list = ref([]) // 字典表格数据
+const queryParams = reactive<DictTypePageReqVO>({
+ pageNo: 1,
+ pageSize: 10,
+ name: '',
+ type: '',
+ status: undefined,
+ createTime: []
})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
-const queryParams = reactive({
- dictType: null
+/** 查询字典类型列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await DictTypeApi.getDictTypePageApi(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+ modalRef.value.openModal(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await DictTypeApi.deleteDictTypeApi(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await DictTypeApi.exportDictTypeApi(queryParams)
+ download.excel(data, '字典类型.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
})
-const [registerData, { reload: dataGetList, deleteData: dataDeleteData }] = useXTable({
- allSchemas: DictDataSchemas.allSchemas,
- params: queryParams,
- getListApi: DictDataApi.getDictDataPageApi,
- deleteApi: DictDataApi.deleteDictDataApi
-})
-// ========== 字典分类列表相关 ==========
-const dictTypeValue = ref('')
-// 字典分类修改操作
-const handleTypeCreate = () => {
- dictTypeValue.value = ''
- setDialogTile('typeCreate')
-}
-const handleTypeUpdate = async (rowId: number) => {
- setDialogTile('typeUpdate')
- // 设置数据
- const res = await DictTypeApi.getDictTypeApi(rowId)
- dictTypeValue.value = res.type
- unref(typeFormRef)?.setValues(res)
-}
-
-// 字典数据修改操作
-const handleDataCreate = () => {
- setDialogTile('dataCreate')
-}
-const handleDataUpdate = async (rowId: number) => {
- setDialogTile('dataUpdate')
- // 设置数据
- const res = await DictDataApi.getDictDataApi(rowId)
- unref(dataFormRef)?.setValues(res)
-}
-// 字典分类点击行事件
-const parentType = ref('')
-const tableTypeSelect = ref(false)
-const cellClickEvent: VxeTableEvents.CellClick = async ({ row }) => {
- tableTypeSelect.value = true
- queryParams.dictType = row['type']
- await nextTick()
- await dataGetList()
- parentType.value = row['type']
-}
-// 弹出框
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const actionLoading = ref(false) // 遮罩层
-const typeFormRef = ref<FormExpose>() // 分类表单 Ref
-const dataFormRef = ref<FormExpose>() // 数据表单 Ref
-const actionType = ref('') // 操作按钮的类型
-
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
-}
-
-// 同步dictTypeValue到form 否则导致表单验证不通过
-watch(dictTypeValue, (val) => {
- unref(typeFormRef)?.setValues({ type: val })
-})
-
-// 提交按钮
-const submitTypeForm = async () => {
- const elForm = unref(typeFormRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid && dictTypeValue.value != '') {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(typeFormRef)?.formModel as DictTypeVO
- if (actionType.value === 'typeCreate') {
- data.type = dictTypeValue.value
- await DictTypeApi.createDictTypeApi(data)
- message.success(t('common.createSuccess'))
- } else if (actionType.value === 'typeUpdate') {
- await DictTypeApi.updateDictTypeApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- typeGetList()
- }
- }
- })
-}
-const submitDataForm = async () => {
- const elForm = unref(dataFormRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(dataFormRef)?.formModel as DictDataVO
- if (actionType.value === 'dataCreate') {
- data.dictType = parentType.value
- await DictDataApi.createDictDataApi(data)
- message.success(t('common.createSuccess'))
- } else if (actionType.value === 'dataUpdate') {
- await DictDataApi.updateDictDataApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- dataGetList()
- }
- }
- })
-}
</script>