144 lines
4.3 KiB
Vue
144 lines
4.3 KiB
Vue
<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='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="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 setup lang="tsx" name="dictData">
|
|
import {CirclePlus, Delete, Download, EditPen} from '@element-plus/icons-vue'
|
|
import {Dict} from '@/api/system/dictionary/interface'
|
|
import {ColumnProps, ProTableInstance} from '@/components/ProTable/interface'
|
|
import {useHandleData} from '@/hooks/useHandleData'
|
|
import {deleteDictData, getDictDataListByTypeId, exportDictData} from "@/api/system/dictionary/dictData";
|
|
import {useDownload} from "@/hooks/useDownload";
|
|
import {exportDictType} from "@/api/system/dictionary/dictType";
|
|
|
|
const proTable = ref<ProTableInstance>()
|
|
const dialogVisible = ref(false)
|
|
//字典数据所属的字典类型Id
|
|
const dictTypeId = ref('')
|
|
const dictTypeName = ref('')
|
|
|
|
|
|
const initParam = reactive({typeId: ''})
|
|
|
|
const dataPopup = ref()
|
|
|
|
const props = defineProps({
|
|
width: {
|
|
type: Number,
|
|
default: 800,
|
|
},
|
|
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 (
|
|
<>
|
|
{
|
|
(<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
|
|
dictTypeName.value = row.name
|
|
initParam.typeId = row.id
|
|
}
|
|
|
|
defineExpose({open})
|
|
|
|
// 打开 dialog(新增、查看、编辑)
|
|
const openDialog = (titleType: string, row: Partial<Dict.ResDictData> = {}) => {
|
|
dataPopup.value?.open(titleType, dictTypeId.value, dictTypeName.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()
|
|
}
|
|
|
|
const downloadFile = async () => {
|
|
ElMessageBox.confirm('确认导出字典数据?', '温馨提示', {type: 'warning'}).then(() =>
|
|
useDownload(exportDictData, '字典数据导出数据', {typeId: dictTypeId.value, ...(proTable.value?.searchParam)}, false, '.xls'),
|
|
)
|
|
}
|
|
</script>
|