251 lines
7.3 KiB
Vue
251 lines
7.3 KiB
Vue
<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>
|