新增通用字典页面
This commit is contained in:
caozehui
250
frontend/src/views/system/dict/data.vue
Normal file
250
frontend/src/views/system/dict/data.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user