283 lines
8.3 KiB
Vue
283 lines
8.3 KiB
Vue
<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 :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>
|