| | |
| | | <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>--> |
| | | </el-row> |
| | | |
| | | <el-table v-loading="state.loading" :data="state.expertList" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :border="true"> |
| | | <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-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> |
| | |
| | | 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: true, |
| | | loading: false, |
| | | total: 0, |
| | | expertList: [], |
| | | deptList: [], |
| | | title: "", |
| | | open: false, |
| | | form: { |
| | | parentId: null, |
| | | id: null, |
| | | classifyName: '' |
| | | 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()=> { |
| | | const getList = async()=> { |
| | | state.loading = true; |
| | | const res = await getExpertTypes() |
| | | if(res.code == 200){ |
| | |
| | | } |
| | | 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)=> { |
| | | console.log(value); |
| | | state.form.deptId = null |
| | | state.form.deptName = '' |
| | | } |
| | | // 表单重置 |
| | | const reset=()=> { |
| | | state.form = { |
| | | parentId: 0, |
| | | id: null, |
| | | classifyName: '' |
| | | classifyName: '', |
| | | deptId: null, |
| | | deptName: '' |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | const handleUpdate=(row)=> { |
| | | reset(); |
| | | console.log(row,'row') |
| | | state.form.id = row.id; |
| | | state.form.classifyName = row.classifyName; |
| | | state.form.parentId = findParentNodeById(state.expertList,row.id) |
| | | console.log(state.form,'form') |
| | | 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){ |
| | |
| | | const findParentNodeById=(data, value)=> { |
| | | for (const node of data) { |
| | | if (node.id === value) { |
| | | return null; // 已经是根节点,没有父级节点 |
| | | return null; |
| | | } |
| | | if (node.children) { |
| | | for (const child of node.children) { |
| | | if (child.id === value) { |
| | | return node.id; // 返回当前节点的ID作为父级ID |
| | | return node.id; |
| | | } |
| | | } |
| | | const foundNode = findParentNodeById(node.children, value); |
| | | if (foundNode !== null) { |
| | | return foundNode; // 返回找到的父级ID |
| | | 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> |