<template>
<div class="app-wrapper">
<headerTitle :titleList="titleList" :hideButton="true" />
<div class="app-container" id="instructor-detail">
<div class="block" style="display: flex">
<div class="left">
<div style="margin-bottom: 10px; cursor: pointer" @click="addFnode">
<span
class="el-icon-circle-plus-outline left_add"
> </span
>
<span class="add_btn">新建</span>
</div>
<div style="font-size: 14px">
<el-tree
ref="menuTree"
:data="data2"
node-key="id"
:props="defaultProps"
default-expand-all
:expand-on-click-node="false"
@node-click="handleNodeClick"
:highlight-current="true"
:current-node-key="currentNodekey"
>
<span slot-scope="{ data }" class="custom-tree-node">
<span>{{ data.name }}</span>
</span>
</el-tree>
</div>
</div>
<div class="tab-container">
<div style="margin: 0 0 30px 30px">
<el-button
round
size="mini"
class="el-icon-circle-plus-outline add_child_organ"
v-show="organShow==2"
@click="addChildOrgan(infoForm.name)"
> 添加附属机构</el-button
>
<el-button
round
size="mini"
class="del_btn"
@click="delNode"
>删除</el-button
>
</div>
<el-form
style="width: 78%; margin-left: 10px"
ref="ruleForm1"
:model="infoForm"
:rules="formrules"
label-width="80px"
autocomplete="off"
label-position="right"
>
<el-form-item label="所在机构" label-width="100px" v-show="organShow==3">
<div class="elform-item">
<el-input
class="item"
size="small"
placeholder="请选择所在机构"
v-model="infoForm.organ"
:disabled="organShow==3"
></el-input>
</div>
</el-form-item>
<el-form-item label="名称" prop="name" label-width="100px">
<div class="elform-item">
<el-input
class="item"
size="small"
placeholder="请输入名称"
v-model="infoForm.name"
></el-input>
</div>
</el-form-item>
<el-form-item label="编码" label-width="100px">
<div class="elform-item">
<el-input
class="item"
size="small"
placeholder="请输入编码"
v-model="infoForm.code"
></el-input>
</div>
</el-form-item>
<el-form-item label="描述" label-width="100px">
<div class="elform-item">
<el-input
class="item"
size="small"
type="textarea"
placeholder="请输入描述"
:rows="5"
v-model="infoForm.into"
></el-input>
</div>
</el-form-item>
<el-form-item label="状态" label-width="100px">
<!-- <div class="elform-item"> -->
<el-radio-group
v-model="infoForm.status"
style="margin-left: 80px"
>
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
<!-- </div> -->
</el-form-item>
</el-form>
<div
style="
width: 78%;
margin-left: 70px;
display: flex;
justify-content: center;
"
>
<el-button size="mini" type="default" round @click="cancel()"
>取消</el-button
>
<el-button size="mini" type="primary" round @click="saveAdd()"
>保存</el-button
>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import headImg from "../../../../src/icons/default_photo.png";
import MD5 from "js-md5";
import HeaderTitle from "@/components/Headertitle/index";
import {
addInstructor,
updateInstructor,
fetchInstructorList,
} from "@/api/zjrsapi/instructor";
import { fetchBranchOrgan, fetchLabel, uploadFile } from "@/api/zjrsapi/common"; //分支机构
export default {
components: {
HeaderTitle,
},
data() {
return {
titleList: [{ title: "用户角色" }, { title: "设置权限" }],
type: "", //1新增2编辑
teacherLabelList: [], //讲师标签
infoForm: {
organ: "", //所在机构
name: "", //名称
code: "", //编码
into: "", //描述
status: 1, //状态
},
imgUrl: headImg,
formrules: {
// id: [{ required: true, message: "讲师ID不能为空", trigger: "blur" }],
// name: [
// { required: true, message: "讲师姓名不能为空", trigger: "blur" },
// ],
// tag: [{ required: true, message: "讲师标签不能为空", trigger: "blur" }],
},
branchOrgan: [],
editid: "",
fOz: 1,
organShow:2, //2展示添加附属机构按钮 3展示所在机构
data2: [
{
id: 51,
name: "视频库",
childList: [],
},
{
id: 57,
name: "话术库",
childList: [
{
id: 58,
name: "话术1号",
},
{
id: 72,
name: "话术库2号",
},
],
},
{
id: 73,
name: "测试A",
childList: [
{
id: 75,
name: "测试AB",
},
],
},
{
id: 74,
name: "测试AB",
childList: [],
},
{
id: 59,
name: "素材库",
childList: [
{
id: 70,
name: "素材库1号",
},
],
},
],
defaultProps: {
children: "childList",
label: "name",
id: "id",
},
delId:"",
currentNodekey:"",//默认选中的节点树
};
},
mounted() {
this.fetchTeacherLabel();
this.fetchBranchOrgans();
//设置当前选中的节点为第一个
this.currentNodekey=this.data2[0].id
if(this.$refs.menuTree){
this.$refs.menuTree.setCurrentKey(this.data2[0])
this.infoForm.name=this.data2[0].name
}
},
methods: {
//所属机构
fetchBranchOrgans() {
fetchBranchOrgan({ id: 0 }).then((response) => {
if (response.code == 0) {
this.branchOrgan = response.data;
} else {
this.$message({
type: "error",
message: response.msg,
});
}
});
},
//讲师标签
fetchTeacherLabel() {
fetchLabel({ id: 36 }).then((response) => {
if (response.code == 0) {
this.teacherLabelList = response.data;
} else {
this.$message({
type: "error",
message: response.msg,
});
}
});
},
cancel() {
this.$router.back();
},
getEditData(id) {
fetchInstructorList({}).then((res) => {
res.data.forEach((item, index) => {
if (item.id == id) {
this.infoForm = item;
}
});
});
},
saveAdd() {
if(this.fOz==1){
//父
let length = 0;
this.data2.forEach((item, index) => {
length += item.childList.length;
});
length = this.data2.length + length;
console.log(length, "长度");
this.data2.push({
id: length + 1,
name: this.infoForm.name,
childList: [],
});
}else{
//子
let length = 0;
this.data2.forEach((item, index) => {
length += item.childList.length;
});
length = this.data2.length + length;
this.data2.forEach((item,index)=>{
if(item.name==this.infoForm.organ){
item.childList.push({
id:length+1,
name:this.infoForm.name
})
}
})
}
// const p1 = new Promise((resolve, reject) => {
// this.$refs["ruleForm1"].validate((valid) => {
// if (valid) {
// resolve();
// } else {
// console.log("error submit!!");
// return false;
// }
// });
// });
// Promise.all([p1]).then(() => {
// console.log("验证通过,提交表单数据");
// if (this.type == "1") {
// addInstructor({
// ...this.infoForm,
// }).then((response) => {
// if (response.code == 0) {
// this.cancel();
// } else {
// this.$message({
// type: "error",
// message: response.msg,
// });
// }
// });
// } else {
// updateInstructor({
// id: this.editid,
// ...this.infoForm,
// }).then((response) => {
// if (response.code == 0) {
// this.cancel();
// } else {
// this.$message({
// type: "error",
// message: response.msg,
// });
// }
// });
// }
// });
},
//树节点被点击时
handleNodeClick(data) {
console.log(data, "我被点击啦");
this.delId=data.id
this.infoForm.name=data.name
if(data.childList){
//点击的是父
this.organShow=2
}else{
//点击的是子
this.organShow=1
this.infoForm.organ=data.name
}
},
//添加父节点
addFnode() {
this.fOz=1
this.organShow=1
this.infoForm={
organ: "", //所在机构
name: "", //名称
code: "", //编码
into: "", //描述
status: 1, //状态
}
},
//添加附属机构
addChildOrgan(name){
this.infoForm.organ=name;
this.infoForm.name=""
this.fOz=2
this.organShow=3
},
//删除节点
delNode(){
if(!this.delId){
this.$message({
type: 'error',
message: '请选择节点后再删除'
});
}else{
this.$confirm('确定删除该节点吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log(this.delId,"删除的节点")
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
},
};
</script>
<style lang="scss">
#instructor-detail .el-form-item__label {
color: #333;
font-weight: 600;
}
</style>
<style lang="scss" scoped>
.app-wrapper {
display: flex;
flex-direction: column;
height: 100%;
.app-container {
.block {
width: 100%;
height: 100%;
background: #fff;
.left {
width: 232px;
border-right: 1px solid rgb(216, 211, 211);
padding: 15px;
.left_add{
color: grey;
font-weight: 600
}
.add_btn{
color: #333333;
font-weight: 600;
font-size: 13px
}
}
.tab-container {
width: 100%;
margin-top: 15px;
.add_child_organ{
border-color: #0059da;
color: #0059da;
background-color: #eaf3fe;
}
.del_btn{
border-color: #0059da;
color: #0059da
}
.elform-item {
display: flex;
margin-left: 80px;
.item {
width: 40%;
margin-right: 20px;
}
.item-span {
color: #ccc;
font-size: 13px;
}
.upload-img {
position: relative;
}
.img_mask {
display: none;
height: 200px;
width: 90%;
background: rgba(165, 162, 162, 0.4);
position: absolute;
margin-left: 10px;
color: white;
}
.upload-img:hover .img_mask {
display: block;
z-index: 20;
}
}
}
}
}
}
</style>
机构树实现添加子节点、添加父节点
最新推荐文章于 2023-12-21 09:05:23 发布