UPDATE: 1、优化

This commit is contained in:
贾同学
2025-10-22 15:07:32 +08:00
parent d5a2db5cd0
commit 1cc2ab79cd
3 changed files with 253 additions and 190 deletions

View File

@@ -577,7 +577,11 @@ const importClick = () => {
// 点击导出按钮 // 点击导出按钮
const exportClick = () => { const exportClick = () => {
ElMessageBox.confirm('确认导出检测计划?', '温馨提示', { type: 'warning' }).then(() => { ElMessageBox.confirm('确认导出检测计划?', '温馨提示', {
type: 'warning',
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() => {
useDownload( useDownload(
exportPlan, exportPlan,
'检测计划导出数据', '检测计划导出数据',

View File

@@ -1,154 +1,194 @@
<template> <template>
<el-dialog class='table-box' v-model='dialogVisible' top='114px' <el-dialog
:style="{ height: height+'px', maxHeight: height+'px', overflow: 'hidden' }" class="table-box"
title='字典数据' v-model="dialogVisible"
:width='width' top="114px"
:modal='false'> :style="{ height: height + 'px', maxHeight: height + 'px', overflow: 'hidden' }"
<div class='table-box' :style="{height:(height-64)+'px',maxHeight:(height-64)+'px',overflow:'hidden'}"> title="字典数据"
<ProTable ref='proTable' :columns="columns" :request-api='getDictDataListByTypeId' :initParam="initParam"> :width="width"
<template #tableHeader="scope"> :modal="false"
<el-button v-auth.dict="'show_add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">新增</el-button> >
<el-button v-auth.dict="'show_export'" type='primary' :icon='Download' plain @click="downloadFile">导出</el-button> <div
<el-button v-auth.dict="'show_delete'" type="danger" :icon="Delete" plain :disabled="!scope.isSelected" class="table-box"
@click="batchDelete(scope.selectedListIds)"> :style="{ height: height - 64 + 'px', maxHeight: height - 64 + 'px', overflow: 'hidden' }"
删除 >
</el-button> <ProTable ref="proTable" :columns="columns" :request-api="getDictDataListByTypeId" :initParam="initParam">
</template> <template #tableHeader="scope">
<el-button v-auth.dict="'show_add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">
新增
</el-button>
<el-button v-auth.dict="'show_export'" type="primary" :icon="Download" plain @click="downloadFile">
导出
</el-button>
<el-button
v-auth.dict="'show_delete'"
type="danger"
:icon="Delete"
plain
:disabled="!scope.isSelected"
@click="batchDelete(scope.selectedListIds)"
>
删除
</el-button>
</template>
<template #operation="scope"> <template #operation="scope">
<el-button v-auth.dict="'show_edit'" type="primary" link :icon="EditPen" @click="openDialog('edit', scope.row)">编辑</el-button> <el-button
<el-button v-auth.dict="'show_delete'" type="primary" link :icon="Delete" @click="handleDelete(scope.row)">删除</el-button> v-auth.dict="'show_edit'"
</template> type="primary"
</ProTable> link
</div> :icon="EditPen"
</el-dialog> @click="openDialog('edit', scope.row)"
<DataPopup :refresh-table='proTable?.getTableList' ref='dataPopup'/> >
编辑
</el-button>
<el-button
v-auth.dict="'show_delete'"
type="primary"
link
:icon="Delete"
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</ProTable>
</div>
</el-dialog>
<DataPopup :refresh-table="proTable?.getTableList" ref="dataPopup" />
</template> </template>
<script setup lang="tsx" name="dictData"> <script setup lang="tsx" name="dictData">
import {CirclePlus, Delete, Download, EditPen} from '@element-plus/icons-vue' import { CirclePlus, Delete, Download, EditPen } from '@element-plus/icons-vue'
import {type Dict} from '@/api/system/dictionary/interface' import { type Dict } from '@/api/system/dictionary/interface'
import {ColumnProps, ProTableInstance} from '@/components/ProTable/interface' import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import {useHandleData} from '@/hooks/useHandleData' import { useHandleData } from '@/hooks/useHandleData'
import {deleteDictData, getDictDataListByTypeId, exportDictData} from "@/api/system/dictionary/dictData/index"; import { deleteDictData, exportDictData, getDictDataListByTypeId } from '@/api/system/dictionary/dictData/index'
import {useDownload} from "@/hooks/useDownload"; import { useDownload } from '@/hooks/useDownload'
import {exportDictType} from "@/api/system/dictionary/dictType";
import { isShallow } from 'vue';
defineOptions({ defineOptions({
name: 'dict' name: 'dict'
}) })
const proTable = ref<ProTableInstance>() const proTable = ref<ProTableInstance>()
const dialogVisible = ref(false) const dialogVisible = ref(false)
//字典数据所属的字典类型Id //字典数据所属的字典类型Id
const dictTypeId = ref('') const dictTypeId = ref('')
const dictTypeName = ref('') const dictTypeName = ref('')
const initParam = reactive({ typeId: '' })
const initParam = reactive({typeId: ''})
const dataPopup = ref() const dataPopup = ref()
const props = defineProps({ const props = defineProps({
width: { width: {
type: Number, type: Number,
default: 800, default: 800
}, },
height: { height: {
type: Number, type: Number,
default: 744, default: 744
}, }
}) })
const columns = reactive<ColumnProps<Dict.ResDictData>[]>([ const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
{type: 'selection', fixed: 'left', width: 70}, { type: 'selection', fixed: 'left', width: 70 },
{type: 'index', fixed: 'left', width: 70, label: '序号'}, { type: 'index', fixed: 'left', width: 70, label: '序号' },
{ {
prop: 'name', prop: 'name',
label: '名称', label: '名称',
minWidth: 180, minWidth: 180,
search: { search: {
el: 'input' el: 'input'
} }
}, },
{ {
prop: 'code', prop: 'code',
label: '编码', label: '编码',
minWidth: 180, minWidth: 180,
search: { search: {
el: 'input' el: 'input'
} }
}, },
{ {
prop: 'value', prop: 'value',
label: '值', label: '值',
minWidth: 180, minWidth: 180,
render: (scope) => { render: scope => {
if (scope.row.openValue === 0 || scope.row.value === null || scope.row.value === '') { if (scope.row.openValue === 0 || scope.row.value === null || scope.row.value === '') {
return <span>/</span>; // 使用 JSX 返回 VNode return <span>/</span> // 使用 JSX 返回 VNode
}
return <span>{scope.row.value}</span>; // 使用 JSX 返回 VNode
}
},
{
prop: 'level',
label: '事件等级',
minWidth: 180,
isShow:false,
render: scope => {
return (
<>
{
(<el-tag type={scope.row.level === 0 ? 'info' : scope.row.level === 1 ? 'warning' : 'danger'}>
{scope.row.level === 0 ? '普通' : scope.row.level === 1 ? '中等' : '严重'}
</el-tag>)
} }
</> return <span>{scope.row.value}</span> // 使用 JSX 返回 VNode
) }
},
{
prop: 'level',
label: '事件等级',
minWidth: 180,
isShow: false,
render: scope => {
return (
<>
{
<el-tag type={scope.row.level === 0 ? 'info' : scope.row.level === 1 ? 'warning' : 'danger'}>
{scope.row.level === 0 ? '普通' : scope.row.level === 1 ? '中等' : '严重'}
</el-tag>
}
</>
)
}
},
{
prop: 'createTime',
label: '创建时间',
minWidth: 180
},
{
prop: 'operation',
label: '操作',
fixed: 'right',
width: 200
} }
},
{
prop: 'createTime',
label: '创建时间',
minWidth: 180
},
{
prop: 'operation',
label: '操作',
fixed: 'right',
width: 200
},
]) ])
const open = (row: Dict.ResDictType) => { const open = (row: Dict.ResDictType) => {
dialogVisible.value = true dialogVisible.value = true
dictTypeId.value = row.id dictTypeId.value = row.id
dictTypeName.value = row.name dictTypeName.value = row.name
initParam.typeId = row.id initParam.typeId = row.id
} }
defineExpose({open}) defineExpose({ open })
// 打开 dialog(新增、查看、编辑) // 打开 dialog(新增、查看、编辑)
const openDialog = (titleType: string, row: Partial<Dict.ResDictData> = {}) => { const openDialog = (titleType: string, row: Partial<Dict.ResDictData> = {}) => {
dataPopup.value?.open(titleType, dictTypeId.value, dictTypeName.value, row) dataPopup.value?.open(titleType, dictTypeId.value, dictTypeName.value, row)
} }
// 批量删除字典数据 // 批量删除字典数据
const batchDelete = async (id: string[]) => { const batchDelete = async (id: string[]) => {
await useHandleData(deleteDictData, id, '删除所选字典数据') await useHandleData(deleteDictData, id, '删除所选字典数据')
proTable.value?.clearSelection() proTable.value?.clearSelection()
proTable.value?.getTableList() proTable.value?.getTableList()
} }
// 删除字典数据 // 删除字典数据
const handleDelete = async (params: Dict.ResDictData) => { const handleDelete = async (params: Dict.ResDictData) => {
await useHandleData(deleteDictData, [params.id], `删除【${params.name}】字典数据`) await useHandleData(deleteDictData, [params.id], `删除【${params.name}】字典数据`)
proTable.value?.getTableList() proTable.value?.getTableList()
} }
const downloadFile = async () => { const downloadFile = async () => {
ElMessageBox.confirm('确认导出字典数据?', '温馨提示', {type: 'warning'}).then(() => ElMessageBox.confirm('确认导出字典数据?', '温馨提示', {
useDownload(exportDictData, '字典数据导出数据', {typeId: dictTypeId.value, ...(proTable.value?.searchParam)}, false), type: 'warning',
) confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() =>
useDownload(
exportDictData,
'字典数据导出数据',
{ typeId: dictTypeId.value, ...proTable.value?.searchParam },
false
)
)
} }
</script> </script>

View File

@@ -1,43 +1,62 @@
<template> <template>
<div class='table-box' ref='popupBaseView'> <div class="table-box" ref="popupBaseView">
<ProTable <ProTable ref="proTable" :columns="columns" :request-api="getDictTypeList">
ref='proTable' <template #tableHeader="scope">
:columns='columns' <el-button v-auth.dict="'add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">
:request-api='getDictTypeList' 新增
> </el-button>
<template #tableHeader='scope'> <el-button v-auth.dict="'export'" type="primary" :icon="Download" plain @click="downloadFile()">
<el-button v-auth.dict="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button> 导出
<el-button v-auth.dict="'export'" type='primary' :icon='Download' plain @click='downloadFile()'>导出</el-button> </el-button>
<el-button v-auth.dict="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected' <el-button
@click='batchDelete(scope.selectedListIds)'> v-auth.dict="'delete'"
删除 type="danger"
</el-button> :icon="Delete"
</template> plain
:disabled="!scope.isSelected"
@click="batchDelete(scope.selectedListIds)"
>
删除
</el-button>
</template>
<template #operation='scope'> <template #operation="scope">
<el-button v-auth.dict="'show'" type='primary' link :icon='View' @click='toDictData(scope.row)'>查看</el-button> <el-button v-auth.dict="'show'" type="primary" link :icon="View" @click="toDictData(scope.row)">
<el-button v-auth.dict="'edit'" type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button> 查看
<el-button v-auth.dict="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button> </el-button>
</template> <el-button
</ProTable> v-auth.dict="'edit'"
</div> type="primary"
<DictData :width='viewWidth' :height='viewHeight' ref='openView' /> link
<TypePopup :refresh-table='proTable?.getTableList' ref='typePopup' /> :icon="EditPen"
@click="openDialog('edit', scope.row)"
>
编辑
</el-button>
<el-button v-auth.dict="'delete'" type="primary" link :icon="Delete" @click="handleDelete(scope.row)">
删除
</el-button>
</template>
</ProTable>
</div>
<DictData :width="viewWidth" :height="viewHeight" ref="openView" />
<TypePopup :refresh-table="proTable?.getTableList" ref="typePopup" />
</template> </template>
<script setup lang='tsx' name='dict'> <script setup lang="tsx" name="dict">
import { CirclePlus, Delete, Download, EditPen, View } from '@element-plus/icons-vue' import { CirclePlus, Delete, Download, EditPen, View } from '@element-plus/icons-vue'
import { type Dict } from '@/api/system/dictionary/interface' import { type Dict } from '@/api/system/dictionary/interface'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface' import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import DictData from '@/views/system/dictionary/dictData/index.vue' import DictData from '@/views/system/dictionary/dictData/index.vue'
import { useHandleData } from '@/hooks/useHandleData' import { useHandleData } from '@/hooks/useHandleData'
import { useViewSize } from '@/hooks/useViewSize' import { useViewSize } from '@/hooks/useViewSize'
import { useDownload } from '@/hooks/useDownload' import { useDownload } from '@/hooks/useDownload'
import { deleteDictType, getDictTypeList, exportDictType } from '@/api/system/dictionary/dictType' import { deleteDictType, exportDictType, getDictTypeList } from '@/api/system/dictionary/dictType'
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
defineOptions({ defineOptions({
name: 'dict' name: 'dict'
}) })
const { popupBaseView, viewWidth, viewHeight } = useViewSize() const { popupBaseView, viewWidth, viewHeight } = useViewSize()
const proTable = ref<ProTableInstance>() const proTable = ref<ProTableInstance>()
@@ -45,76 +64,76 @@ const typePopup = ref()
const openView = ref() const openView = ref()
const columns = reactive<ColumnProps<Dict.ResDictType>[]>([ const columns = reactive<ColumnProps<Dict.ResDictType>[]>([
{ type: 'selection', fixed: 'left', width: 70 }, { type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' }, { type: 'index', fixed: 'left', width: 70, label: '序号' },
{ {
prop: 'name', prop: 'name',
label: '类型名称', label: '类型名称',
minWidth: 180, minWidth: 180,
search: { search: {
el: 'input', el: 'input'
}
}, },
}, {
{ prop: 'code',
prop: 'code', label: '类型编码',
label: '类型编码', minWidth: 220,
minWidth: 220, search: {
search: { el: 'input'
el: 'input', }
}, },
}, {
{ prop: 'remark',
prop: 'remark', label: '描述',
label: '描述', minWidth: 250
minWidth: 250, },
}, {
{ prop: 'sort',
prop: 'sort', label: '排序',
label: '排序', minWidth: 70
minWidth: 70, },
}, {
{ prop: 'createTime',
prop: 'createTime', label: '创建时间',
label: '创建时间', minWidth: 180
minWidth: 180, },
}, {
{ prop: 'operation',
prop: 'operation', label: '操作',
label: '操作', fixed: 'right',
fixed: 'right', width: 250
width: 250, }
},
]) ])
// 打开 drawer(新增、编辑) // 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Dict.ResDictType> = {}) => { const openDialog = (titleType: string, row: Partial<Dict.ResDictType> = {}) => {
typePopup.value?.open(titleType, row) typePopup.value?.open(titleType, row)
} }
// 批量删除字典类型 // 批量删除字典类型
const batchDelete = async (id: string[]) => { const batchDelete = async (id: string[]) => {
await useHandleData(deleteDictType, id, '删除所选字典类型') await useHandleData(deleteDictType, id, '删除所选字典类型')
proTable.value?.clearSelection() proTable.value?.clearSelection()
proTable.value?.getTableList() proTable.value?.getTableList()
} }
// 删除字典类型 // 删除字典类型
const handleDelete = async (params: Dict.ResDictType) => { const handleDelete = async (params: Dict.ResDictType) => {
await useHandleData(deleteDictType, [params.id], `删除【${params.name}】字典类型`) await useHandleData(deleteDictType, [params.id], `删除【${params.name}】字典类型`)
proTable.value?.getTableList() proTable.value?.getTableList()
} }
//查看字典类型包含的字典数据 //查看字典类型包含的字典数据
const toDictData = (row: Dict.ResDictType) => { const toDictData = (row: Dict.ResDictType) => {
openView.value.open(row) openView.value.open(row)
} }
// 导出字典类型列表 // 导出字典类型列表
const downloadFile = async () => { const downloadFile = async () => {
ElMessageBox.confirm('确认导出字典类型数据?', '温馨提示', { type: 'warning' }).then(() => ElMessageBox.confirm('确认导出字典类型数据?', '温馨提示', {
useDownload(exportDictType, '字典类型导出数据', proTable.value?.searchParam, false), type: 'warning',
) confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() => useDownload(exportDictType, '字典类型导出数据', proTable.value?.searchParam, false))
} }
</script> </script>