微调
This commit is contained in:
sjl
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
|
||||
<div class="dictiontary-list-detail child-router">
|
||||
<!-- 主体区域：左侧树 + 右侧表格 -->
|
||||
<el-row :gutter="20" class="main-content">
|
||||
<!-- 左侧树 -->
|
||||
<el-col :span="6">
|
||||
<div class="tree-container">
|
||||
<el-tree
|
||||
@node-click="clickNode"
|
||||
:expand-on-click-node="false"
|
||||
:highlight-current="true"
|
||||
:data="TreeData"
|
||||
node-key="id"
|
||||
:default-expanded-keys="treeExpandData"
|
||||
:props="defaultProps"
|
||||
ref="tree"
|
||||
></el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧表格 -->
|
||||
<el-col :span="18">
|
||||
<TableHeader>
|
||||
<template #select>
|
||||
<el-form-item label="">
|
||||
<el-page-header @back="$emit('close')">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3">报告字典管理</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
</el-form-item>
|
||||
<el-form-item label="过滤筛选">
|
||||
<el-input
|
||||
style="width: 240px"
|
||||
v-model="tableStore.table.params.searchValue"
|
||||
clearable
|
||||
placeholder="请输入筛选数据"
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button :icon="Plus" type="primary" @click="addTemplate">新增配置项</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<!-- 新增 -->
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
v-model="dialogVisible"
|
||||
width="30%"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
|
||||
<el-form-item label="父节点:" prop="pid">
|
||||
<el-select v-model="form.pid" style="width: 100%" placeholder="请选择父节点" clearable>
|
||||
<el-option
|
||||
v-for="item in secondLevelNode"
|
||||
:key="item.id"
|
||||
:label="item.reportDescribe"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称:" prop="name" class="top">
|
||||
<el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述:" prop="reportDescribe" class="top">
|
||||
<el-input type="textarea" placeholder="请输入描述" v-model.trim="form.reportDescribe"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="closeDialog">取 消</el-button>
|
||||
<el-button type="primary" @click="addFn">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
getDictTree,
|
||||
getReportDictList,
|
||||
addDict,
|
||||
updateDict,
|
||||
deleteDict
|
||||
} from '@/api/system-boot/ReportTemplate'
|
||||
|
||||
// 弹出框是否可见
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
const dialogTitle = ref('新增配置项')
|
||||
const formRef = ref()
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
}
|
||||
})
|
||||
|
||||
const formData = reactive({
|
||||
searchValue: '',
|
||||
id: '0',
|
||||
type: props.type
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
reportDescribe: '',
|
||||
pid: '',
|
||||
sort: 0,
|
||||
type: props.type
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
||||
reportDescribe: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
|
||||
pid: [{ required: true, message: '请选择父节点', trigger: 'change' }]
|
||||
}
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/system-boot/reportDict/getReportDictList',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ title: '配置项名称', field: 'name' },
|
||||
{ title: '配置项描述', field: 'reportDescribe' },
|
||||
{ title: '上级节点', field: 'pidName' },
|
||||
{
|
||||
title: '操作',fixed: 'right',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
|
||||
buttons: [
|
||||
{
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupEditRef.value.open('编辑', {
|
||||
...row,
|
||||
openDescribe: props.detail.openDescribe,
|
||||
openLevel: props.detail.openLevel,
|
||||
typeName: props.detail.name + row.name,
|
||||
typeId: props.detail.id
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除该字典类型吗？'
|
||||
},
|
||||
click: row => {
|
||||
deleteDict([row.id]).then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
const addTemplate = () => {
|
||||
dialogTitle.value = '新增配置项'
|
||||
dialogVisible.value = true
|
||||
Object.assign(form, {
|
||||
name: '',
|
||||
reportDescribe: '',
|
||||
pid: '',
|
||||
sort: 0,
|
||||
type: props.type
|
||||
})
|
||||
}
|
||||
|
||||
const addFn = () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
try {
|
||||
await addDict(form)
|
||||
ElMessage.success('新增成功')
|
||||
dialogVisible.value = false
|
||||
|
||||
} catch (error) {
|
||||
ElMessage.error('新增失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogVisible.value = false
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.back {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
font-size: 29px;
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user