Skip to content

phsl / admin

Go to a project
Commit 5d062d58 by Theo
Options

完成字典模块

parent aad49fd5
Showing with 727 additions and 410 deletions
src/api/system/dict/types.ts
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 = {
......
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,
......
src/views/system/dict/data.form.vue 0 → 100644
<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>
src/views/system/dict/data.vue 0 → 100644
<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>
src/views/system/dict/dict.data.ts deleted 100644 → 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)
src/views/system/dict/dict.type.ts deleted 100644 → 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)
src/views/system/dict/form.vue 0 → 100644
<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>
src/views/system/dict/index.vue
<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()"
/>
</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)"
<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>
</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>
</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>
</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 queryParams = reactive({
dictType: null
})
const [registerData, { reload: dataGetList, deleteData: dataDeleteData }] = useXTable({
allSchemas: DictDataSchemas.allSchemas,
params: queryParams,
getListApi: DictDataApi.getDictDataPageApi,
deleteApi: DictDataApi.deleteDictDataApi
const list = ref([]) // 字典表格数据
const queryParams = reactive<DictTypePageReqVO>({
pageNo: 1,
pageSize: 10,
name: '',
type: '',
status: undefined,
createTime: []
})
// ========== 字典分类列表相关 ==========
const dictTypeValue = ref('')
// 字典分类修改操作
const handleTypeCreate = () => {
dictTypeValue.value = ''
setDialogTile('typeCreate')
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询字典类型列表 */
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 handleTypeUpdate = async (rowId: number) => {
setDialogTile('typeUpdate')
// 设置数据
const res = await DictTypeApi.getDictTypeApi(rowId)
dictTypeValue.value = res.type
unref(typeFormRef)?.setValues(res)
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
// 字典数据修改操作
const handleDataCreate = () => {
setDialogTile('dataCreate')
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
const handleDataUpdate = async (rowId: number) => {
setDialogTile('dataUpdate')
// 设置数据
const res = await DictDataApi.getDictDataApi(rowId)
unref(dataFormRef)?.setValues(res)
/** 添加/修改操作 */
const modalRef = ref()
const openModal = (type: string, id?: number) => {
modalRef.value.openModal(type, id)
}
// 字典分类点击行事件
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 handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await DictTypeApi.deleteDictTypeApi(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
// 弹出框
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
/** 导出按钮操作 */
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
}
}
// 同步dictTypeValue到form 否则导致表单验证不通过
watch(dictTypeValue, (val) => {
unref(typeFormRef)?.setValues({ type: val })
/** 初始化 **/
onMounted(() => {
getList()
})
// 提交按钮
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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment