ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

字典数据前后端接口编写、调试

Browse Source
This commit is contained in:
caozehui
2024-11-01 13:30:09 +08:00
parent 2c22998d4f c875ab72fa
commit 1c818c3fc4
11 changed files with 394 additions and 634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/api/system/dictionary/dictData/index.ts
View File

@@ -1,5 +1,6 @@
import http from '@/api'
import {type Dict} from '@/api/system/dictionary/interface'
import type {ResultData} from "@/api/interface";
//获取字典数据
export const getDictDataListByTypeId = (params: Dict.ReqDictDataParams) => {

139
frontend/src/api/system/dictionary/dictExample.ts
View File

@@ -1,139 +0,0 @@
import { type Dict } from "@/api/system/dictionary/interface";
export const dictTypeList: Dict.ResDictType[] = [
{
id: "1",
name: "用户性别",
code: "EXAMPLE_CODE1",
sort: 100,
openLevel: 1,
openDescribe: 1,
remark: "示例描述示例描述示例描述12231",
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: 100,
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: 100,
openLevel: 1,
openDescribe: 1,
remark: "示例描述示例描述示例描述11144",
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:100,
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:100,
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:100,
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:100,
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:100,
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:100,
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",
},
];

70
frontend/src/api/system/dictionary/index.ts
View File

@@ -1,70 +0,0 @@
import http from "@/api";
import { ADMIN as rePrefix } from "@/api/config/serviceName";
import { type Dict } from "@/api/system/dictionary/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);
};

1
frontend/src/api/system/dictionary/interface/index.ts
View File

@@ -65,6 +65,7 @@ export namespace Dict {
level?: number | null; // 事件等级：0-普通；1-中等；2-严重 (默认为0)
algoDescribe?: number | null; // 与高级算法内部Id描述对应
value?: string | null; // 字典针对电压等级
dictValue?:string|null;
state: number; // 状态：0-删除 1-正常
createBy?: string | null; // 创建用户
createTime?: string | null; // 创建时间

224
frontend/src/api/user/userData.ts
View File

@@ -15,118 +15,118 @@ const data = [
'status': 1,
'rolename': '管理员',
},
{
'id': '652286556713195552',
'username': 'operator_A',
'password': '12345678',
'realname': '潘霞',
'status': 1,
'rolename': '操作员',
},
{
'id': '373930342176416776',
'username': 'operator_B',
'password': '12345678',
'realname': '郝秀英',
'status': 0,
'rolename': '操作员',
},
{
'id': '429621442453555775',
'username': 'operator_C',
'password': '12345678',
'realname': '吕洋',
'status': 1,
'rolename': '操作员',
},
{
'id': '387231964476618937',
'username': 'operator_D',
'password': '12345678',
'realname': '江磊',
'status': 0,
'rolename': '操作员',
},
{
'id': '604013348875476647',
'username': 'operator_E',
'password': '12345678',
'realname': '姚静',
'status': 0,
'rolename': '操作员',
},
{
'id': '028222596330483467',
'username': 'operator_F',
'password': '12345678',
'realname': '龙艳',
'status': 1,
'rolename': '操作员',
},
{
'id': '739427478368274267',
'username': 'operator_G',
'password': '12345678',
'realname': '武涛',
'status': 1,
'rolename': '操作员',
},
{
'id': '448686878612127243',
'username': 'operator_H',
'password': '12345678',
'realname': '孙芳',
'status': 0,
'rolename': '操作员',
},
{
'id': '448686878612127244',
'username': 'operator_I',
'password': '12345678',
'realname': '孙芳1',
'status': 0,
'rolename': '操作员',
},
{
'id': '448686878612127245',
'username': 'operator_J',
'password': '12345678',
'realname': '孙芳2',
'status': 1,
'rolename': '操作员',
},
{
'id': '448686878612127245',
'username': 'operator_J',
'password': '12345678',
'realname': '孙芳2',
'status': 1,
'rolename': '操作员',
},
{
'id': '448686878612127245',
'username': 'operator_J',
'password': '12345678',
'realname': '孙芳2',
'status': 1,
'rolename': '操作员',
},
{
'id': '448686878612127245',
'username': 'operator_J',
'password': '12345678',
'realname': '孙芳2',
'status': 1,
'rolename': '操作员',
},
{
'id': '448686878612127245',
'username': 'operator_J',
'password': '12345678',
'realname': '孙芳2',
'status': 1,
'rolename': '操作员',
}
// {
// 'id': '652286556713195552',
// 'username': 'operator_A',
// 'password': '12345678',
// 'realname': '潘霞',
// 'status': 1,
// 'rolename': '操作员',
// },
// {
// 'id': '373930342176416776',
// 'username': 'operator_B',
// 'password': '12345678',
// 'realname': '郝秀英',
// 'status': 0,
// 'rolename': '操作员',
// },
// {
// 'id': '429621442453555775',
// 'username': 'operator_C',
// 'password': '12345678',
// 'realname': '吕洋',
// 'status': 1,
// 'rolename': '操作员',
// },
// {
// 'id': '387231964476618937',
// 'username': 'operator_D',
// 'password': '12345678',
// 'realname': '江磊',
// 'status': 0,
// 'rolename': '操作员',
// },
// {
// 'id': '604013348875476647',
// 'username': 'operator_E',
// 'password': '12345678',
// 'realname': '姚静',
// 'status': 0,
// 'rolename': '操作员',
// },
// {
// 'id': '028222596330483467',
// 'username': 'operator_F',
// 'password': '12345678',
// 'realname': '龙艳',
// 'status': 1,
// 'rolename': '操作员',
// },
// {
// 'id': '739427478368274267',
// 'username': 'operator_G',
// 'password': '12345678',
// 'realname': '武涛',
// 'status': 1,
// 'rolename': '操作员',
// },
// {
// 'id': '448686878612127243',
// 'username': 'operator_H',
// 'password': '12345678',
// 'realname': '孙芳',
// 'status': 0,
// 'rolename': '操作员',
// },
// {
// 'id': '448686878612127244',
// 'username': 'operator_I',
// 'password': '12345678',
// 'realname': '孙芳1',
// 'status': 0,
// 'rolename': '操作员',
// },
// {
// 'id': '448686878612127245',
// 'username': 'operator_J',
// 'password': '12345678',
// 'realname': '孙芳2',
// 'status': 1,
// 'rolename': '操作员',
// },
// {
// 'id': '448686878612127245',
// 'username': 'operator_J',
// 'password': '12345678',
// 'realname': '孙芳2',
// 'status': 1,
// 'rolename': '操作员',
// },
// {
// 'id': '448686878612127245',
// 'username': 'operator_J',
// 'password': '12345678',
// 'realname': '孙芳2',
// 'status': 1,
// 'rolename': '操作员',
// },
// {
// 'id': '448686878612127245',
// 'username': 'operator_J',
// 'password': '12345678',
// 'realname': '孙芳2',
// 'status': 1,
// 'rolename': '操作员',
// },
// {
// 'id': '448686878612127245',
// 'username': 'operator_J',
// 'password': '12345678',
// 'realname': '孙芳2',
// 'status': 1,
// 'rolename': '操作员',
// }
]

9
frontend/src/hooks/useViewSize.ts
View File

@@ -3,17 +3,16 @@ import { ref } from 'vue'
export const useViewSize = () => {
const popupBaseView = ref(null)
const viewWidth = ref("0")
const viewHeight = ref("0")
const unit = 'px'
const viewWidth = ref(0)
const viewHeight = ref(0)
/**
* 更新宽和高的数据
*/
const updateDimensions = () => {
if (popupBaseView.value) {
viewWidth.value = popupBaseView.value.offsetWidth + unit
viewHeight.value = popupBaseView.value.offsetHeight + unit
viewWidth.value = popupBaseView.value.offsetWidth
viewHeight.value = popupBaseView.value.offsetHeight
}
}

12
frontend/src/views/demo/proTable/open.vue
View File

@@ -3,11 +3,11 @@
<el-dialog class='table-box'
v-model='dialogVisible'
top='114px'
:style="{height:height,maxHeight:height,overflow:'hidden'}"
:style="{height:height+'px',maxHeight:height+'px',overflow:'hidden'}"
:title='title'
:width='width'
:modal='false'>
<div class='table-box'>
<div class='table-box' :style="{height:(height-64)+'px',maxHeight:(height-64)+'px',overflow:'hidden'}">
<ProTable
ref='proTable'
:columns='columns'
@@ -140,12 +140,12 @@ defineExpose({ open })
const props = defineProps({
width: {
type: String,
default: '800px',
type: Number,
default: 800,
},
height: {
type: String,
default: '744px',
type: Number,
default: 744,
},
})

286
frontend/src/views/system/dictionary/data.vue
View File

@@ -1,286 +0,0 @@
<template>
<el-dialog class='table-box' v-model='dialogVisible1' top='114px'
:style="{ height: height, maxHeight: height, overflow: 'hidden' }" :title='title1' :width='width' :modal='false'>
<div class="table-box">
<ProTable
ref='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>
<el-dialog v-model="dialogVisible2" :title="dialogType2 === '新增' ? '新增字典数据' : '编辑字典数据'" v-bind="dialogSmall">
<div>
<el-form :model="dialogForm" ref="dialogFormRef" :rules="rules">
<el-form-item label="字典类型编码" :label-width="100">
<el-input :value="route.params.code" disabled />
</el-form-item>
<el-form-item label="名称" :label-width="100" prop="name">
<el-input v-model="dialogForm.name" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="编码" :label-width="100" prop="code">
<el-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="值" :label-width="100" prop="value">
<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" />
</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/dictionary/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/dictionary/dictExample'
import { FormItemRule } from 'element-plus'
import {
getDictDataList,
updateDictData,
addDictData,
batchAddDictData,
exportDictData,
deleteDictData
} from '@/api/system/dictionary'
const route = useRoute()
const dictStore = useDictStore()
const data = dictDataList
const proTable = ref<ProTableInstance>()
const dictTypeId = ref('')
const dialogVisible1 = ref(false)
const title1 = ref('')
const dialogFormRef = ref()
const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'name',
label: '名称',
width: 180,
search: {
el: 'input'
}
},
{
prop: 'code',
label: '编码',
width: 180,
search: {
el: 'input'
}
},
{
prop: 'value',
label: '值',
width: 180
},
{
prop: 'level',
label: '事件等级',
width: 120,
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: '状态',
minWidth: 100,
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 rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, message: '类型名称必填！', trigger: 'blur' }],
code: [{ required: true, message: '类型编码必填！', trigger: 'blur' }],
value: [{ required: true, message: '类型值必填！', trigger: 'blur' }],
})
const { dialogVisible2, dialogType2, dialogForm } = useCount();
function useCount() {
const dialogVisible2 = ref(false)
const dialogType2 = ref('新增')
const dialogForm = ref({
id: "",
name: "",
code: "",
value: "",
sort: 100,
})
return { dialogVisible2, dialogType2, dialogForm };
}
const props = defineProps({
width: {
type: String,
default: '800px',
},
height: {
type: String,
default: '744px',
},
})
const open = (textTitle: string, id: string) => {
dialogVisible1.value = true
title1.value = textTitle
dictTypeId.value = id
// getDictDataList({ dictTypeId: id }).then(res => {
// data.value = res.data
// }
}
defineExpose({ open })
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<Dict.ResDictType> = {}) => {
dialogVisible2.value = true
dialogType2.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 = () => {
dialogVisible2.value = false
//清空dialogForm中的值
dialogForm.value = {
id: "",
name: "",
code: "",
value: "",
sort: 100
}
dialogFormRef.value?.resetFields()
}
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
let params = JSON.stringify(dialogForm.value)
console.log(params)
if (dialogType2.value === '新增') {
await useHandleData(addDictData, dialogForm.value, '新增字典数据')
} else {
await useHandleData(updateDictData, dialogForm.value, '编辑字典数据')
}
close()
proTable.value?.getTableList()
} else {
ElMessage.error('表单验证失败！')
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
</script>

126
frontend/src/views/system/dictionary/dictData/components/dataPopup.vue
View File

@@ -1,6 +1,130 @@
<template>
<el-dialog v-model="dialogVisible" :title="dialogTitle"
v-bind="dialogSmall">
<div>
<el-form :model="formContent" ref="dialogFormRef" :rules="rules">
<el-form-item label="字典类型编码" :label-width="100">
<el-input :value="dictTypeCode" disabled/>
</el-form-item>
<el-form-item label="名称" :label-width="100" prop="name">
<el-input v-model="formContent.name" placeholder="请输入" autocomplete="off"/>
</el-form-item>
<el-form-item label="编码" :label-width="100" prop="code">
<el-input v-model="formContent.code" placeholder="请输入" autocomplete="off"/>
</el-form-item>
<el-form-item label="值" :label-width="100" prop="dictValue">
<el-input v-model="formContent.dictValue" placeholder="请输入" autocomplete="off"/>
</el-form-item>
<el-form-item label="显示排序" :label-width="100">
<el-input-number v-model="formContent.sort"/>
</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 lang="tsx" setup>
import {dialogSmall} from "@/utils/elementBind";
import {addDictData, updateDictData} from "@/api/system/dictionary/dictData";
import {Dict} from "@/api/system/dictionary/interface";
import {FormItemRule} from "element-plus";
import type {Ref} from "vue";
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{required: true, message: '类型名称必填！', trigger: 'blur'}],
code: [{required: true, message: '类型编码必填！', trigger: 'blur'}],
dictValue: [{required: true, message: '类型值必填！', trigger: 'blur'}],
})
const dialogFormRef = ref()
const {dialogVisible, titleType, formContent, dictTypeCode} = useMetaInfo();
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const dictTypeCode = ref('')
const formContent = ref<Dict.ResDictData>({
id: "",
typeId: "",
name: "",
code: "",
value: "",
dictValue: "",
sort: 100,
state: 1,
})
return {dialogVisible, titleType, formContent, dictTypeCode};
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增字典类型' : '编辑字典类型'
})
const resetFormContent = () => {
formContent.value = {
id: "",
typeId: "",
name: "",
code: "",
value: "",
sort: 100,
state: 1,
}
}
const close = () => {
dialogVisible.value = false
resetFormContent()
dialogFormRef.value?.resetFields()
}
const open = (sign: string, typeId: string, code: string, data: Dict.ResDictData) => {
resetFormContent()
titleType.value = sign
formContent.value.typeId = typeId
dictTypeCode.value = code
dialogVisible.value = true
if (data.id) {
formContent.value = {...data}
formContent.value.dictValue = data.value
}
}
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
formContent.value.value = formContent.value.dictValue
console.log(formContent.value)
if (formContent.value.id) {
await updateDictData(formContent.value)
} else {
await addDictData(formContent.value)
}
ElMessage.success({message: `${dialogTitle.value}成功！`})
close()
await props.refreshTable!()
} else {
ElMessage.error('表单验证失败！')
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
// 对外映射
defineExpose({open})
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
}>()
</script>

134
frontend/src/views/system/dictionary/dictData/index.vue
View File

@@ -1,9 +1,139 @@
<template>
<el-dialog class='table-box' v-model='dialogVisible' top='114px'
:style="{ height: height+'px', maxHeight: height+'px', overflow: 'hidden' }" title='字典数据'
:width='width'
:modal='false'>
<div class='table-box' :style="{height:(height-64)+'px',maxHeight:(height-64)+'px',overflow:'hidden'}">
<ProTable ref='proTable' :columns="columns" :request-api='getDictDataListByTypeId' :initParam="initParam">
<template #tableHeader="scope">
<el-button type="primary" :icon="CirclePlus" @click="openDialog('add')">新增</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="openDialog('edit', scope.row)">编辑</el-button>
<el-button type="primary" link :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
</template>
</ProTable>
</div>
</el-dialog>
<DataPopup :refresh-table='proTable?.getTableList' ref='dataPopup'/>
</template>
<script lang="tsx" setup>
<script setup lang="tsx" name="dictData">
import {CirclePlus, Delete, EditPen} from '@element-plus/icons-vue'
import {Dict} from '@/api/system/dictionary/interface'
import {ProTableInstance, ColumnProps} from '@/components/ProTable/interface'
import {useHandleData} from '@/hooks/useHandleData'
import DataPopup from '@/views/system/dictionary/dictData/components/dataPopup.vue'
import {
getDictDataListByTypeId,
deleteDictData,
} from "@/api/system/dictionary/dictData";
const proTable = ref<ProTableInstance>()
const dialogVisible = ref(false)
//字典数据所属的字典类型Id
const dictTypeId = ref('')
const dictTypeCode = ref('')
const initParam = reactive({typeId: ''})
const dataPopup = ref()
</script>
const props = defineProps({
width: {
type: String,
default: '800px',
},
height: {
type: String,
default: '744px',
},
})
const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
{type: 'selection', fixed: 'left', width: 70},
{type: 'index', fixed: 'left', width: 70, label: '序号'},
{
prop: 'name',
label: '名称',
width: 180,
search: {
el: 'input'
}
},
{
prop: 'code',
label: '编码',
width: 180,
search: {
el: 'input'
}
},
{
prop: 'value',
label: '值',
width: 180
},
{
prop: 'level',
label: '事件等级',
width: 180,
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: 'createTime',
label: '创建时间',
width: 180
},
{
prop: 'operation',
label: '操作',
fixed: 'right',
minWidth: 300
},
])
const open = (row: Dict.ResDictType) => {
dialogVisible.value = true
dictTypeId.value = row.id
dictTypeCode.value = row.code
initParam.typeId = row.id
}
defineExpose({open})
// 打开 dialog(新增、查看、编辑)
const openDialog = (titleType: string, row: Partial<Dict.ResDictData> = {}) => {
dataPopup.value?.open(titleType, dictTypeId.value, dictTypeCode.value, row)
}
// 批量删除字典数据
const batchDelete = async (id: string[]) => {
await useHandleData(deleteDictData, id, '删除所选字典数据')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 删除字典数据
const handleDelete = async (params: Dict.ResDictData) => {
await useHandleData(deleteDictData, [params.id], `删除【${params.name}】字典数据`)
proTable.value?.getTableList()
}
</script>

26
frontend/src/views/system/dictionary/dictType/index.vue
View File

@@ -21,34 +21,34 @@
</template>
</ProTable>
</div>
<Data :width='viewWidth' :height='viewHeight' ref='openView' />
<type-popup :refresh-table='proTable?.getTableList' ref='typePopup' />
<DictData :width='viewWidth' :height='viewHeight' ref='openView'/>
<type-popup :refresh-table='proTable?.getTableList' ref='typePopup'/>
</template>
<script setup lang='tsx' name='dict'>
import { CirclePlus, Delete, EditPen, Download, View } from '@element-plus/icons-vue'
import { Dict } from '@/api/system/dictionary/interface'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import {CirclePlus, Delete, EditPen, Download, View} from '@element-plus/icons-vue'
import {Dict} from '@/api/system/dictionary/interface'
import {ProTableInstance, ColumnProps} from '@/components/ProTable/interface'
import TypePopup from '@/views/system/dictionary/dictType/components/typePopup.vue'
import Data from '@/views/system/dictionary/data.vue'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import { useViewSize } from '@/hooks/useViewSize'
import DictData from '@/views/system/dictionary/dictData/index.vue'
import {useDictStore} from '@/stores/modules/dict'
import {useHandleData} from '@/hooks/useHandleData'
import {useViewSize} from '@/hooks/useViewSize'
import {
getDictTypeList,
deleteDictType,
} from '@/api/system/dictionary/dictType'
const dictStore = useDictStore()
const { popupBaseView, viewWidth, viewHeight } = useViewSize()
const {popupBaseView, viewWidth, viewHeight} = useViewSize()
const proTable = ref<ProTableInstance>()
const typePopup = ref()
const openView = ref()
const columns = reactive<ColumnProps<Dict.ResDictType>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{type: 'selection', fixed: 'left', width: 70},
{type: 'index', fixed: 'left', width: 70, label: '序号'},
{
prop: 'name',
label: '类型名称',
@@ -111,7 +111,7 @@ const handleDelete = async (params: Dict.ResDictType) => {
//查看字典类型包含的字典数据
const toDictData = (row: Dict.ResDictType) => {
openView.value.open('字典数据', row.id)
openView.value.open(row)
}