新增通用字典页面

This commit is contained in:
caozehui
2024-10-23 16:08:55 +08:00
parent 97d6329d82
commit 32c7436b81
6 changed files with 745 additions and 5 deletions

View File

@@ -0,0 +1,139 @@
import { type Dict } from "@/api/system/dict/interface";
export const dictTypeList: Dict.ResDictType[] = [
{
id: "1",
name: "用户性别",
code: "EXAMPLE_CODE1",
sort: 1,
openLevel: 1,
openDescribe: 1,
remark: "示例描述1221",
state: 1,
createBy: "admin",
createTime: "2023-10-01 12:00:00",
updateBy: "admin",
updateTime: "2023-10-12 14:40:00",
},
{
id: "231",
name: "菜单状态",
code: "EXAMPLE_CODE2",
sort: 1,
openLevel: 1,
openDescribe: 1,
remark: "示例描述11133",
state: 0,
createBy: "admin",
createTime: "2023-10-01 12:00:00",
updateBy: "admin",
updateTime: "2023-10-10 12:00:00",
},
{
id: "33",
name: "系统开关",
code: "EXAMPLE_CODE3",
sort: 1,
openLevel: 1,
openDescribe: 1,
remark: "示例描述111344",
state: 1,
createBy: "admin",
createTime: "2023-10-01 12:00:00",
updateBy: "admin",
updateTime: "2023-10-10 12:00:00",
},
];
export const dictDataList: Dict.ResDictData[] = [
{
id: "210",
typeId: "101",
name: "字典项1",
code: "EXAMPLE_00111",
sort: 1,
level: 1,
algoDescribe: null,
value: "字典值1",
state: 1,
createBy: "admin",
createTime: "2023-10-01 12:00:00",
updateBy: "admin",
updateTime: "2023-10-01 14:43:03",
},
{
id: "2210",
typeId: "101",
name: "字典项2",
code: "EXAMPLE_00121",
sort: 1,
level: 2,
algoDescribe: null,
value: "字典值2",
state: 1,
createBy: "admin",
createTime: "2023-10-03 12:00:00",
updateBy: "admin",
updateTime: "2023-10-05 14:43:03",
},
{
id: "212",
typeId: "101",
name: "字典项3",
code: "EXAMPLE_00141",
sort: 1,
level: 3,
algoDescribe: null,
value: "字典值3",
state: 0,
createBy: "admin",
createTime: "2023-10-01 11:00:00",
updateBy: "admin",
updateTime: "2023-10-05 16:43:03",
},
{
id: "210",
typeId: "101",
name: "字典项4",
code: "EXAMPLE_00311",
sort: 1,
level: null,
algoDescribe: null,
value: "字典值4",
state: 0,
createBy: "admin",
createTime: "2023-10-03 12:40:00",
updateBy: "admin",
updateTime: "2023-10-04 14:43:03",
},
{
id: "217",
typeId: "101",
name: "字典项5",
code: "EXAMPLE_00341",
sort: 1,
level: undefined,
algoDescribe: null,
value: "字典值5",
state: 1,
createBy: "admin",
createTime: "2023-10-06 12:45:03",
updateBy: "admin",
updateTime: "2023-10-07 19:37:03",
},
{
id: "237",
typeId: "101",
name: "字典项6",
code: "EXAMPLE_00318",
sort: 1,
level: 0,
algoDescribe: null,
value: "字典值6",
state: 1,
createBy: "admin",
createTime: "2023-10-16 10:45:03",
updateBy: "admin",
updateTime: "2023-10-17 19:37:03",
},
];

View File

@@ -0,0 +1,70 @@
import http from "@/api";
import { ADMIN as rePrefix } from "@/api/config/serviceName";
import { type Dict } from "@/api/system/dict/interface";
//获取字典类型
export const getDictTypeList = (params: Dict.ReqDictTypeParams) => {
return http.post(`${rePrefix}/dict/list`, params);
};
//添加字典类型
export const addDictType = (params: Dict.ReqDictTypeParams) => {
return http.post(`${rePrefix}/dict/add`,params);
};
//删除字典类型
export const deleteDictType = (params: { id: string[] }) => {
return http.post(`${rePrefix}/dict/delete`, { data: params });
};
//编辑字典类型
export const updateDictType = (params: Dict.ReqDictTypeParams) => {
return http.post(`${rePrefix}/dict/update`, params);
};
//导出字典类型
export const exportDictType = (params: Dict.ResDictType) => {
return http.download(`${rePrefix}/dict/export`, params);
};
//批量添加字典类型
export const batchAddDictType = (params: FormData) => {
return http.post(`${rePrefix}/dict/import`, params);
};
//获取字典数据
export const getDictDataList = (params: Dict.ReqDictDataParams) => {
return http.post(`${rePrefix}/dict-data/list`, params);
};
//添加字典数据
export const addDictData = (params: Dict.ReqDictDataParams) => {
return http.post(`${rePrefix}/dict-data/add`, params);
};
//删除字典数据
export const deleteDictData = (params: { id: string[] }) => {
return http.post(`${rePrefix}/dict-data/delete`, { data: params });
};
//编辑字典数据
export const updateDictData = (params: Dict.ReqDictDataParams) => {
return http.post(`${rePrefix}/dict-data/update`, params);
};
//导出字典数据
export const exportDictData = (params: Dict.ResDictData) => {
return http.download(`${rePrefix}/dict-data/export`, params);
};
//批量添加字典数据
export const batchAddDictData = (params: FormData) => {
return http.post(`${rePrefix}/dict-data/import`, params);
};

View File

@@ -0,0 +1,43 @@
import type { ReqPage } from "@/api/interface";
export namespace Dict {
export interface ResDictType {
id: string; // 字典类型表Id
name: string; // 名称
code: string; // 编码
sort: number; // 排序
openLevel: number; // 开启等级0-不开启1-开启,默认不开启
openDescribe: number; // 开启描述0-不开启1-开启,默认不开启
remark?: string | null; // 描述
state: number; // 状态0-删除 1-正常
createBy?: string | null; // 创建用户
createTime?: string | null; // 创建时间
updateBy?: string | null; // 更新用户
updateTime?: string | null; // 更新时间
}
export interface ReqDictTypeParams extends ReqPage{
}
export interface ResDictData {
id: string; // 字典数据表Id
typeId: string; // 字典类型表Id
name: string; // 名称
code: string; // 编码
sort: number; // 排序
level?: number | null; // 事件等级0-普通1-中等2-严重 (默认为0)
algoDescribe?: number | null; // 与高级算法内部Id描述对应
value?: string | null; // 字典针对电压等级
state: number; // 状态0-删除 1-正常
createBy?: string | null; // 创建用户
createTime?: string | null; // 创建时间
updateBy?: string | null; // 更新用户
updateTime?: string | null; // 更新时间
}
export interface ReqDictDataParams extends ReqPage{
}
}

View File

@@ -25,12 +25,12 @@ export const staticRouter: RouteRecordRaw[] = [
{
path: "/plan",
name: "plan",
redirect:"/plan/planList",
redirect: "/plan/planList",
children: [
{
path: "/plan/planList",
name: "planList",
component:()=> import("@/views/plan/planList/index.vue"),
component: () => import("@/views/plan/planList/index.vue"),
meta: {
title: "检测计划列表",
icon: "List",
@@ -44,7 +44,7 @@ export const staticRouter: RouteRecordRaw[] = [
{
path: "/plan/singlePlanList",
name: "singlePlanList",
component:()=> import("@/views/plan/singlePlanList/index.vue"),
component: () => import("@/views/plan/singlePlanList/index.vue"),
meta: {
title: "单个计划列表",
icon: "List",
@@ -58,7 +58,7 @@ export const staticRouter: RouteRecordRaw[] = [
{
path: "/plan/preTest",
name: "preTest",
component:()=> import("@/views/plan/preTest/index.vue"),
component: () => import("@/views/plan/preTest/index.vue"),
meta: {
title: "预检测",
icon: "List",
@@ -72,7 +72,7 @@ export const staticRouter: RouteRecordRaw[] = [
{
path: "/plan/autoTest",
name: "autoTest",
component:()=> import("@/views/plan/autoTest/index.vue"),
component: () => import("@/views/plan/autoTest/index.vue"),
meta: {
title: "自动检测",
icon: "List",
@@ -115,6 +115,20 @@ export const staticRouter: RouteRecordRaw[] = [
},
],
},
{
path: "/system/dict-data/:code/:id(\\d+)",
name: "dictData",
component: () => import("@/views/system/dict/data.vue"),
meta: {
title: "字典数据",
icon: "List",
isLink: "",
isHide: false,
isFull: false,
isAffix: false,
isKeepAlive: false,
},
}
],
},
];

View File

@@ -0,0 +1,250 @@
<template>
<div class="table-box">
<ProTable :columns="columns" :data="data">
<template #tableHeader="scope">
<el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增</el-button>
<el-button type="primary" :icon="Upload" plain @click="batchAdd">批量添加</el-button>
<el-button type="primary" :icon="Download" plain @click="downloadFile">导出</el-button>
<el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected"
@click="batchDelete(scope.selectedListIds)">
批量删除
</el-button>
</template>
<template #operation="scope">
<el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
<el-button type="primary" link :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
</template>
</ProTable>
</div>
<el-dialog v-model="dialogVisible" :title="dialogType === '新增' ? '新增字典数据' : '编辑字典数据'" v-bind="dialogSmall">
<div>
<el-form :model="dialogForm">
<el-form-item label="字典类型编码" :label-width="100">
<el-input :value="route.params.code" disabled />
</el-form-item>
<el-form-item label="编码" :label-width="100">
<el-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="名称" :label-width="100">
<el-input v-model="dialogForm.name" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="值" :label-width="100">
<el-input v-model="dialogForm.value" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="显示排序" :label-width="100">
<el-input-number v-model="dialogForm.sort" :min="1" :max="100" />
</el-form-item>
<el-form-item label="状态" :label-width="100">
<el-radio-group v-model.number="dialogForm.state">
<el-radio v-for="item in dictStore.getDictData('status')" :key="item.id" :value="item.code">{{
item.label
}}</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close()">取消</el-button>
<el-button type="primary" @click="save()">
保存
</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="tsx" name="dictData">
import { useRoute } from 'vue-router'
import { CirclePlus, Delete, EditPen, Download, Upload } from '@element-plus/icons-vue'
import { Dict } from '@/api/system/dict/interface'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { dialogSmall } from '@/utils/elementBind'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { dictDataList } from '@/api/system/dict/dictExample'
import {
updateDictData,
addDictData,
batchAddDictData,
exportDictData,
deleteDictData
} from '@/api/system/dict'
const route = useRoute()
const dictStore = useDictStore()
const data = dictDataList
const proTable = ref<ProTableInstance>()
const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'name',
label: '名称',
width: 160,
search: {
el: 'input',
props: {
placeholder: '请输入名称'
}
}
},
{
prop: 'code',
label: '编码',
width: 160,
search: {
el: 'input',
props: {
placeholder: '请输入编码'
}
}
},
{
prop: 'value',
label: '值',
width: 160
},
{
prop: 'level',
label: '事件等级',
width: 100,
render: scope => {
return (
<>
{scope.row.level === 0 || scope.row.level === null || scope.row.level === undefined ?
(<span></span>) :
(<el-tag type={scope.row.level === 1 ? 'info' : scope.row.level === 2 ? 'warning' : 'danger'}>
{scope.row.level === 1 ? '普通' : scope.row.level === 2 ? '警告' : '危险'}
</el-tag>)
}
</>
)
}
},
{
prop: 'state',
label: '状态',
enum: dictStore.getDictData('status'),
search: {
el: 'tree-select',
props: { filterable: true }
},
fieldNames: { label: 'label', value: 'code' },
render: scope => {
return (
<>
{
<el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '禁用'} </el-tag>
}
</>
)
},
},
{
prop: 'createTime',
label: '创建时间',
width: 180,
search: {
el: 'date-picker',
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' }
}
},
{
prop: 'operation',
label: '操作',
fixed: 'right',
width: 330
},
])
const { dialogVisible, dialogType, dialogForm } = useCount();
function useCount() {
const dialogVisible = ref(false)
const dialogType = ref('新增')
const dialogForm = ref({
id: "",
name: "",
code: "",
value: "",
sort: 1,
state: 1, // 状态0-删除 1-正常
})
return { dialogVisible, dialogType, dialogForm };
}
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<Dict.ResDictType> = {}) => {
dialogVisible.value = true
dialogType.value = title
if (title === '编辑') {
row && (dialogForm.value = row as { id: string; name: string; code: string; value: string; sort: number; state: number; });
}
}
// 批量添加字典数据
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
const params = {
title: '字典数据',
tempApi: exportDictData,
importApi: batchAddDictData,
getTableList: proTable.value?.getTableList,
}
dialogRef.value?.acceptParams(params)
}
// 导出字典数据
const downloadFile = async () => {
ElMessageBox.confirm('确认导出字典数据?', '温馨提示', { type: 'warning' }).then(() =>
useDownload(exportDictData, '字典数据列表', proTable.value?.searchParam),
)
}
// 批量删除字典数据
const batchDelete = async (id: string[]) => {
await useHandleData(deleteDictData, { id }, '删除所选字典数据')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 删除字典数据
const handleDelete = async (params: Dict.ResDictType) => {
await useHandleData(deleteDictData, { id: [params.id] }, `删除【${params.name}】字典数据`)
proTable.value?.getTableList()
}
const close = () => {
dialogVisible.value = false
//清空dialogForm中的值
dialogForm.value = {
id: "",
name: "",
code: "",
value: "",
sort: 1,
state: 1,
}
}
const save = async () => {
if (dialogType.value === '新增') {
await useHandleData(addDictData, dialogForm.value, '新增字典数据')
} else {
await useHandleData(updateDictData, dialogForm.value, '编辑字典数据')
}
close()
proTable.value?.getTableList()
}
</script>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,224 @@
<template>
<div class="table-box">
<ProTable :columns="columns" :data="data" :request-api="getDictTypeList">
<template #tableHeader="scope">
<el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增</el-button>
<el-button type="primary" :icon="Download" plain @click="downloadFile">导出</el-button>
<el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected"
@click="batchDelete(scope.selectedListIds)">
批量删除
</el-button>
</template>
<template #operation="scope">
<el-button type="primary" link :icon="View" @click="toDictData(scope.row)">查看</el-button>
<el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
<el-button type="primary" link :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
</template>
</ProTable>
</div>
<el-dialog v-model="dialogVisible" :title="dialogType === '新增' ? '新增字典类型' : '编辑字典类型'" v-bind="dialogSmall">
<div>
<el-form :model="dialogForm">
<el-form-item label="类型名称" :label-width="100">
<el-input v-model="dialogForm.name" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="类型编码" :label-width="100">
<el-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="显示排序" :label-width="100">
<el-input-number v-model="dialogForm.sort" :min="1" :max="100" />
</el-form-item>
<el-form-item label="状态" :label-width="100">
<el-radio-group v-model.number="dialogForm.state">
<el-radio v-for="item in dictStore.getDictData('status')" :key="item.id" :value="item.code">{{ item.label
}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" :label-width="100">
<el-input v-model="dialogForm.remark" placeholder="请输入备注" autocomplete="off" />
</el-form-item>
</el-form>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close()">取消</el-button>
<el-button type="primary" @click="save()">
保存
</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="tsx" name="dict">
import { CirclePlus, Delete, EditPen, Download, View } from '@element-plus/icons-vue'
import { Dict } from '@/api/system/dict/interface'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
// import ImportExcel from '@/components/ImportExcel/index.vue'
import { dialogSmall } from '@/utils/elementBind'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
// import { useAuthButtons } from '@/hooks/useAuthButtons'
import { useDownload } from '@/hooks/useDownload'
import { useRouter } from 'vue-router'
import { dictTypeList } from '@/api/system/dict/dictExample'
import {
getDictTypeList,
addDictType,
updateDictType,
exportDictType,
deleteDictType
} from '@/api/system/dict'
const dictStore = useDictStore()
// const BUTTONS = useAuthButtons()
const router = useRouter()
const data = dictTypeList
const proTable = ref<ProTableInstance>()
const columns = reactive<ColumnProps<Dict.ResDictType>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'name',
label: '类型名称',
width: 160,
search: {
el: 'input',
props: {
placeholder: '请输入字典名称'
}
}
},
{
prop: 'code',
label: '类型编码',
width: 160,
search: {
el: 'input',
props: {
placeholder: '请输入字典编码'
}
}
},
{
prop: 'state',
label: '状态',
enum: dictStore.getDictData('status'),
search: {
el: 'tree-select',
props: { filterable: true }
},
fieldNames: { label: 'label', value: 'code' },
render: scope => {
return (
<>
{
<el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '禁用'} </el-tag>
}
</>
)
},
},
{
prop: 'remark',
label: '描述',
width: 200,
},
{
prop: 'createTime',
label: '创建时间',
width: 180,
search: {
el: 'date-picker',
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' }
}
},
{
prop: 'operation',
label: '操作',
fixed: 'right',
width: 330
},
])
const { dialogVisible, dialogType, dialogForm } = useCount();
function useCount() {
const dialogVisible = ref(false)
const dialogType = ref('新增')
const dialogForm = ref({
id: "",
name: "",
code: "",
sort: 1,
state: 1, // 状态0-删除 1-正常
remark: ""
})
return { dialogVisible, dialogType, dialogForm };
}
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<Dict.ResDictType> = {}) => {
dialogVisible.value = true
dialogType.value = title
if (title === '编辑') {
row && (dialogForm.value = row as { id: string; name: string; code: string; sort: number; state: number; remark: string; });
}
}
// 导出字典类型
const downloadFile = async () => {
ElMessageBox.confirm('确认导出字典类型数据?', '温馨提示', { type: 'warning' }).then(() =>
useDownload(exportDictType, '字典类型列表', proTable.value?.searchParam),
)
}
// 批量删除字典类型
const batchDelete = async (id: string[]) => {
await useHandleData(deleteDictType, { id }, '删除所选字典类型')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 删除字典类型
const handleDelete = async (params: Dict.ResDictType) => {
await useHandleData(deleteDictType, { id: [params.id] }, `删除【${params.name}】字典类型`)
proTable.value?.getTableList()
}
//查看字典类型包含的字典数据
const toDictData = (row: Dict.ResDictType) => {
router.push({ name: 'dictData', params: { id: row.id, code: row.code } })
}
const close = () => {
dialogVisible.value = false
//清空dialogForm中的值
dialogForm.value = {
id: "",
name: "",
code: "",
state: 1,
sort: 1,
remark: ""
}
}
const save =async () => {
if (dialogType.value === '新增') {
await useHandleData(addDictType, dialogForm.value, '新增字典类型')
} else {
await useHandleData(updateDictType, dialogForm.value, '编辑字典类型')
}
close()
proTable.value?.getTableList()
}
</script>
<style lang="scss" scoped></style>