<template>
|
<div class="app-container">
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
type="primary"
|
plain
|
:icon="Plus"
|
@click="handleAdd"
|
>新增</el-button>
|
</el-col>
|
<!-- <el-col :span="1.5">-->
|
<!-- <el-button-->
|
<!-- type="success"-->
|
<!-- plain-->
|
<!-- icon="el-icon-edit"-->
|
<!-- size="mini"-->
|
<!-- :disabled="single"-->
|
<!-- @click="handleUpdate"-->
|
<!-- v-hasPermi="['system:post:edit']"-->
|
<!-- >修改</el-button>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="1.5">-->
|
<!-- <el-button-->
|
<!-- type="danger"-->
|
<!-- plain-->
|
<!-- icon="el-icon-delete"-->
|
<!-- size="mini"-->
|
<!-- :disabled="multiple"-->
|
<!-- @click="handleDelete"-->
|
<!-- v-hasPermi="['system:post:remove']"-->
|
<!-- >删除</el-button>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="1.5">-->
|
<!-- <el-button-->
|
<!-- type="warning"-->
|
<!-- plain-->
|
<!-- icon="el-icon-download"-->
|
<!-- size="mini"-->
|
<!-- @click="handleExport"-->
|
<!-- v-hasPermi="['system:post:export']"-->
|
<!-- >导出</el-button>-->
|
<!-- </el-col>-->
|
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
|
</el-row>
|
|
<el-table v-loading="state.loading" :data="state.expertList" row-key="id" :border="true">
|
<el-table-column label="分类名称" align="center" prop="classifyName" />
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<template #default="scope">
|
<el-button type="primary" link @click="handleUpdate(scope.row)">修改</el-button>
|
<el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-dialog :title="state.title" v-model="state.open" width="500px" append-to-body>
|
<el-form ref="formRef" :model="state.form" :rules="state.rules" label-width="80px">
|
<el-form-item label="父级" v-if="state.title == '添加分类'" prop="parentId">
|
<el-cascader
|
v-model="state.form.parentId"
|
:options="state.expertList"
|
:props="{ expandTrigger: 'hover', value: 'id',label: 'classifyName',emitPath: false,checkStrictly: true }"
|
@change="handleChange"></el-cascader>
|
</el-form-item>
|
<el-form-item label="分类名称" prop="classifyName">
|
<el-input v-model="state.form.classifyName" placeholder="请输入分类名称" />
|
</el-form-item>
|
<el-form-item label="部门处室" prop="deptId" v-if="state.form.parentId">
|
<el-cascader
|
style="width: 100%"
|
clearable
|
:show-all-levels="false"
|
v-model="state.form.deptId"
|
:options="state.deptList"
|
:props="{ expandTrigger: 'hover', value: 'deptId',label: 'deptName',emitPath: false}"></el-cascader>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitForm(formRef)">确 定</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import {getExpertTypes, delExpertType, addType, updateType} from "@/api/form"
|
import {onMounted, reactive, ref, toRefs} from "vue";
|
import {ElMessage, ElMessageBox} from "element-plus"
|
import {listOutDept} from "@/api/system/dept";
|
import { Plus } from '@element-plus/icons-vue'
|
const state = reactive({
|
loading: false,
|
total: 0,
|
expertList: [],
|
deptList: [],
|
title: "",
|
open: false,
|
form: {
|
parentId: null,
|
id: null,
|
classifyName: '',
|
deptId: null,
|
deptName: ''
|
},
|
rules: {
|
classifyName: [
|
{ required: true, message: "分类名称不能为空", trigger: "blur" }
|
],
|
deptId: [
|
{ required: true, message: "部门处室不能为空", trigger: "blur" }
|
]
|
}
|
})
|
const formRef = ref()
|
const {proxy} = getCurrentInstance()
|
onMounted(()=>{
|
getList()
|
getDepList()
|
})
|
/** 查询岗位列表 */
|
const getList = async()=> {
|
state.loading = true;
|
const res = await getExpertTypes()
|
if(res.code == 200){
|
state.expertList = res.data
|
}else{
|
ElMessage.warning(res.message)
|
}
|
state.loading = false;
|
}
|
function getDepList() {
|
listOutDept({}).then(response => {
|
state.deptList = proxy.handleTree(response.data, "deptId", 'parentId', 'children');
|
});
|
}
|
// 取消按钮
|
const cancel=()=> {
|
state.open = false;
|
reset();
|
}
|
const handleChange=(value)=> {
|
state.form.deptId = null
|
state.form.deptName = ''
|
}
|
// 表单重置
|
const reset=()=> {
|
state.form = {
|
parentId: 0,
|
id: null,
|
classifyName: '',
|
deptId: null,
|
deptName: ''
|
}
|
}
|
|
const handleAdd=()=> {
|
reset();
|
state.open = true;
|
state.title = "添加分类";
|
}
|
|
const handleUpdate=(row)=> {
|
reset();
|
state.form.id = row.id;
|
state.form.classifyName = row.classifyName;
|
state.form.parentId = findParentNodeById(state.expertList,row.id)
|
state.form.deptId = row.deptId
|
state.form.deptName = row.deptName
|
state.open = true;
|
state.title = "修改分类";
|
}
|
|
const submitForm = async(formEl)=> {
|
await formEl.validate(async (valid, fields) => {
|
if (valid) {
|
if(state.form.deptId){
|
state.form.deptName = findNameByDeptId(state.deptList,state.form.deptId)
|
}
|
if (state.title == '修改分类') {
|
updateType(state.form).then(res => {
|
if(res.code == 200){
|
ElMessage.success('修改成功')
|
state.open = false;
|
getList();
|
}else{
|
ElMessage.warning(res.message)
|
}
|
});
|
} else {
|
const {classifyId,...data} = state.form
|
addType(data).then(res => {
|
if(res.code == 200){
|
ElMessage.success('添加成功')
|
state.open = false;
|
getList();
|
}else{
|
ElMessage.warning(res.message)
|
}
|
});
|
}
|
}
|
});
|
}
|
|
const handleDelete=(row)=> {
|
const classifyId = row.id;
|
ElMessageBox.confirm(
|
'是否删除类名为【' + row.classifyName + '】及其所包含的所有分类数据？',
|
'提示',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async() => {
|
const res = await delExpertType(classifyId)
|
if(res.code == 200){
|
getList();
|
ElMessage.success('删除成功')
|
}else{
|
ElMessage.warning(res.message)
|
}
|
})
|
}
|
|
const findParentNodeById=(data, value)=> {
|
for (const node of data) {
|
if (node.id === value) {
|
return null;
|
}
|
if (node.children) {
|
for (const child of node.children) {
|
if (child.id === value) {
|
return node.id;
|
}
|
}
|
const foundNode = findParentNodeById(node.children, value);
|
if (foundNode !== null) {
|
return foundNode;
|
}
|
}
|
}
|
return null;
|
}
|
|
const findNameByDeptId = (list,id)=>{
|
for(const node of list){
|
if(node.deptId == id){
|
return node.deptName
|
}
|
if(node.children){
|
const foundName = findNameByDeptId(node.children,id)
|
if(foundName){
|
return foundName
|
}
|
}
|
}
|
return null
|
}
|
</script>
|
