zkPCproject/src/views/Template/Pinspeakwords.vue

<template>
  <div class="box-center">
        <div id="app">
    <div class="content-left">
        <div v-if="orgType!=3">
            <span style="color: red">*</span> 楼盘选择：
                <el-select v-model="houseId" size="mini" @change="selectChange" clearable :disabled="disabledcet" placeholder="请选择">
                    <el-option v-for="item in houseList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
      <div class="select" style="display: flex;margin-top: 40px;">
          <div style="font-size:18px;font-weight: bold;">添加模板</div>
            <el-row>
              <el-col :offset="18" :span="6">
                <el-button size="mini" type="primary" @click="addBigNode">添加大类</el-button>
              </el-col>
            </el-row>

          </div>
      <input ref="input" style="display:none" value='${tempId}' />

      <el-tree ref="tree"
	      :data="treeList"
	      :default-checked-keys="defaultCheck"  show-checkbox node-key="id"
        default-expand-all :check-on-click-node="true" :expand-on-click-node="false"
        draggable :allow-drop="allowDrop" :allow-drag="allowDrag"
        @node-drop="Peerdrag">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span> <b v-if="data.sign==0 && data.houseId==null" style="color: red">*</b> {{ node.label }}</span>
          <span>
            <el-button style="color:red;" v-if="node.level==1" type="text" size="mini" @click.stop="() => append(node,data)">添加子类</el-button>
            <span v-if="data.houseId!=null">
              <el-button v-if="node.level==2" type="text" size="mini" @click.stop="() => append1(node,data)">  添加子类    </el-button>
              <el-button type="text" size="mini" @click.stop="() => remove(node,data)"> 删除   </el-button>
              <el-button type="text" size="mini" @click.stop="() => ddeditor(node,data)">  编辑  </el-button>
            </span>
            <el-button v-if="data.sign!=1" type="text" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
          </span>
        </span>
      </el-tree>


      <div class="update-btn">
        <el-button type="primary" size="mini" @click="getCheckedNode">获取选中节点</el-button>
      </div>
          <!-- 新增弹框 -->
      <el-dialog title="新增" :visible.sync="dialogFormVisible">
        <el-form :model="addForm">
          <el-row :gutter="20">
            <el-col :span="12">
             <el-form-item label="一级大类名称:" v-if="level==0" :label-width="formLabelWidth">
				<el-input v-model="addForm.name" maxlength="8" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="二级小类名称:" v-if="level==1" :label-width="formLabelWidth">
				<el-input v-model="addForm.name" maxlength="8" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="三级小类名称:" v-if="level==2" :label-width="formLabelWidth">
				<el-input v-model="addForm.name" maxlength="8" autocomplete="off"></el-input>
			</el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSubmit">确 定</el-button>
        </div>
      </el-dialog>




      <!-- 删除确认弹框 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>确定删除该条内容吗</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="checkDelete">确 定</el-button>
        </span>
      </el-dialog>

    </div>

    <!-- 评分 -->
    <div class="content-right">
      <el-row>
        <el-col :span="20">
            	(提示：拖拽大类可以排序)
        </el-col>
      </el-row>

      <draggable
	   class="list-group"
	   tag="ul"
	   v-model="newlist"
	   v-bind="dragOptions"
	   @start="drag = true"
	   @end="drag = false"
	   @change="onDragCallback">
	 <div style="border: 2px dashed #CCCCCC;margin-top: 30px;padding:6px;border-radius: 6px;font-size: 14px;"
	  v-for="(item,index) in newlist" :key="item.id">
	   <div style="display: flex;align-items: center;height: 40px;">
	   <div >{{item.name||''}}：</div>
	     <div>
	   <el-input @input="inputYiji($event,index)" style="width: 100px;" v-model.number="item.fraction" type="number" size="mini"  ></el-input>
	     </div>
	     <div style="margin-left: 10px;">
	      <el-button type="danger" size="mini" @click="Deletecategories(item,index)">删除</el-button>
	     </div>
	    </div>
	    <div class="erji" style="margin-left: 30px;" v-for="(asd,idx) in item.children" :key="idx">
	     <div style="display: flex;align-items: center;height: 40px;">
	       <div>{{asd.name||''}}：</div>
	    <div>

	     <el-input @input="inputBlur($event,index,idx)" style="width: 100px;"  v-model.number="asd.fraction" type="number" size="mini"  ></el-input>

	    </div>
	    <div style="margin-left: 10px;">
	      <el-button type="primary" size="mini" @click="Removethesecondary(index,idx,asd)">删除</el-button>
	    </div>
	      </div>
			   <div class="sanji" style="width:90%;" >
				<div style="display: flex;align-items: center;height: 40px;" v-for="(sanji,indx) in asd.children" :key="indx">
				 <div style="width:85% ;margin-left: 30px;">{{sanji.name||''}}</div>
				 <div style="margin-left: 10px;">
				  <el-button type="info" size="mini" @click="Deletethelevel(index,idx,indx,sanji)">删除</el-button>
				 </div>
				 </div>
			   </div>
	    </div>
	 </div>
 </draggable>

 <div style="display: flex;align-items: center;margin-top:30px;">
  <el-button type="primary" size="mini" @click="cancel">取消</el-button>
  <el-button style="margin-left: 30px;" type="primary" size="mini" @click="submitForm">保存</el-button>
 </div>

    </div>


   <!--?编辑弹框?-->
    <el-dialog title="编辑" :visible.sync="isshowage">
        <div style="display: flex;align-items: center;height: 40px;">
            <div>类名：</div>
            <div>
              <el-input  type="text" maxlength="8" v-model="frosasd.name" autocomplete="off"></el-input>
            </div>
        </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="submicll()">取 消</el-button>
        <el-button type="primary" @click="submiadd()">提交</el-button>
      </div>
    </el-dialog>

  </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  data() {
    return {
      drag: false,
      houseList: [],
      houseId: "", // 楼盘
      treeList: [], //树形数据
      newlist: [],
      nodelist: [],
      orgType:localStorage.getItem('orgType'),
      dialogFormVisible: false, // 弹框
      dialogVisible: false,
      isshowage: false,
      frosasd: {
        name: "",
        id: "",
      },
      addForm: {
        // 新增节点表单
        name: "",
      },
      rightform: {
        formData: [],
      },
      pid: 0,
      level: 1, //操作节点的层级
      treeData: null,
      formLabelWidth: "120px",
      deleteType: "form",
      checklist: [], // 树图，设置初始选中值
      defaultCheck: [], // 选中的id
      addid: null, // 新增的节点id（接口生成）
      deleteId: null, // 要删除的表单节点的ID
      disabledcet: false,
      Templateid:'',
    };
  },
  components: {
      draggable,
  },
  created() {
    this.allTreeListId = []; // 存储的当前树图所有的接单的ID集合,如：[1,3,4,6,7]
    this.noIds = []; // 左侧树没有，但右侧有的数据
    this.rateMap = new Map();
    this.sortMap = new Map();
  },
  mounted() {
    var isnull=this.$route.query.flag;
    this.Templateid=isnull.id;
    this.setInitCheck()
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost",
      };
    },
  },
  methods: {
    // 楼盘选择
    selectChange(e) {
      this.houseId = e;
      this.templategetMarketingTree();
    },
    // 获取楼盘下拉的数据
    getHouse() {
        this.$api.api.findHouseByUser({
           orgType: localStorage.getItem("orgType"),
        }).then((res) => {
            this.houseList = res.data.map((item) => {
              return {
                value: item.id,
                label: item.propertyName,
              };
            });
            if (this.houseId == "") {
              if(localStorage.getItem('orgType')==3){
              this.houseId=localStorage.getItem('houseId')
                }else{
                  this.houseId = this.houseList[0].value;
                }
              // this.houseId = this.houseList[0].value;
            }
            this.templategetMarketingTree()
        })
    },
    //获取模板
    templategetMarketingTree(){
       let parmest={
         houseId:this.houseId,
      }
        this.$api.api.templategetMarketingTree(parmest).then((res) => {
          console.log(res);
            let data = res.data;
            data = JSON.stringify(data).replace(/name/g, "label");
            data = JSON.parse(data);
            this.treeList = data;
            this.getAllTreeListId(this.treeList);
        })
    },
    // 递归获取所有的ID
    getAllTreeListId(arr) {
      const setSelected = (arr) => {
        arr.forEach((item) => {
          this.allTreeListId.push(item.id);
          if (item.children) {
            setSelected(item.children);
          }
        });
      };
      setSelected(arr);
    },
    // ------获取选中的节点
    getCheckedNode() {
      let res = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
      console.log(res)
      let arr = [];
      let arr1 = JSON.parse(JSON.stringify(this.treeList));

      res.forEach((resd, index) => {
        var arrarys = this.familyTree(arr1, resd);
        arr.push(arrarys[0]);
      });

      arr.forEach((item, index) => {
        item.name = item.label;
        this.nodelist.push(item);
      });
      this.listCheckedchaifen();
    },
    // 树图，设置初始选中值及分数回显--编辑跳转过来的
    setInitCheck() {
      if(this.Templateid==''){
        //获取楼盘
        this.getHouse();
      }else{
        this.disabledcet = true;
        let parmest={
              tempId:this.Templateid,
        }
        this.$api.http.templatedelfindByTempId(parmest).then((res) => {
            this.houseId = res.data.houseId;
            this.checklist = res.data.list;
            this.nodelist = res.data.list;
            this.getHouse2();
            this.checklist.forEach((item) => {
              this.rateMap.set(item.id, item.fraction); // map维护分数
              this.sortMap.set(item.id, item.sort); // 排序维护
              if (item.pid !== 0) {
                this.defaultCheck.push(item.id);
              }
            });
            console.log(this.newlist,"99999999999999999999999999")
            this.listCheckedchaifen();

        })
      }

    },
    // 获取楼盘下拉的数据
    getHouse2() {
        this.$api.api.findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        }).then((res) => {
        this.houseList = res.data.map((item) => {
          return {
            value: item.id,
            label: item.propertyName,
          };
        });
        this.templategetMarketingTree()
        })
    },



    inputYiji(e, index) {
      if (e < 0) {
        this.$message({
          message: "评分小于0，请重新评分",
          type: "warning",
        });
        this.newlist[index].fraction = Number(0);
      }
    },
    inputBlur(e, index, idx) {
      if (e < 0) {
        this.$message({
          message: "评分小于0，请重新评分",
          type: "warning",
        });
        this.newlist[index].children[idx].fraction = 0;
        var he = 0;
        this.newlist[index].children.forEach((item) => {
          he += item.fraction;
        });
        this.newlist[index].fraction = he;
      } else {
        var he = 0;
        this.newlist[index].children.forEach((item) => {
          he += Number(item.fraction);
        });
        this.newlist[index].fraction = he;

        var zohe = 0;
        this.newlist.forEach((item) => {
          zohe += item.fraction;
        });
        if (zohe > 100) {
          this.$message({
            message: "评分大于100，请重新评分",
            type: "warning",
          });
          this.newlist[index].children[idx].fraction = 0;
          var fenhe = 0;
          this.newlist[index].children.forEach((item) => {
            fenhe += item.fraction;
          });
          this.newlist[index].fraction = fenhe;
        }
      }
    },

    submicll() {
      this.isshowage = false;
    },

    // 拖拽变化事件
    onDragCallback(evt) {
      this.newlist.forEach((item, index) => {
        item.sort = index + 1;
      });
    },
    //删除评分大类
    Deletecategories(item, index) {
      if (this.newlist[index].children.length == 0) {
        this.newlist.splice(index, 1);
        this.nodelist.forEach((it, i) => {
          if (it.id == item.id) {
            this.nodelist.splice(i, 1);
          }
        });

        item.children.forEach((it, ia) => {
          this.nodelist.forEach((ite, i) => {
            if (ite.id == it.id) {
              this.nodelist.splice(i, 1);
            }
          });
        });

        item.children.forEach((it, ia) => {
          it.children.forEach((asz, ina) => {
            this.nodelist.forEach((ite, i) => {
              if (ite.id == asz.id) {
                this.nodelist.splice(i, 1);
              }
            });
          });
        });
      } else {
        this.$message({
          message: "请先清空子级",
          type: "warning",
        });
      }
    },
    //删除评分二级
    Removethesecondary(index, idx, asd) {
      if (this.newlist[index].children[idx].children.length == 0) {
        this.newlist[index].children.splice(idx, 1);
        asd.children.forEach((it, ia) => {
          this.nodelist.forEach((item, i) => {
            if (item.id == it.id) {
              this.nodelist.splice(i, 1);
            }
          });
        });
        this.nodelist.forEach((item, i) => {
          if (item.id == asd.id) {
            this.nodelist.splice(i, 1);
          }
        });
      } else {
        this.$message({
          message: "请先清空子级",
          type: "warning",
        });
      }
    },
    //删除评分三级
    Deletethelevel(index, idx, indx, sanji) {
      this.newlist[index].children[idx].children.splice(indx, 1);
      this.nodelist.forEach((item, i) => {
        if (item.id == sanji.id) {
          this.nodelist.splice(i, 1);
        }
      });
    },
    //删除评分同时删除this.nodelist里的单数据
    //拆分数据
    listCheckedchaifen() {
      let arr = [];
      let level2 = [];
      this.nodelist.forEach((item, index) => {
        if (item.pid == 0) {
          item.children = [];
          arr.push(item);
        } else {
          level2.push(item);
        }
      });
      let resultArr = []; //去重后的数组
      var flag;
      for (var i in arr) {
        flag = true;
        for (var j in resultArr) {
          if (resultArr[j].id == arr[i].id) {
            flag = false;
            break;
          }
        }
        if (flag) {
          resultArr.push(arr[i]);
        }
      }
      let resultArrlist = []; //去重后的数组
      var flags;
      for (var i in level2) {
        flags = true;
        for (var j in resultArrlist) {
          if (resultArrlist[j].id == level2[i].id) {
            flags = false;
            break;
          }
        }
        if (flags) {
          resultArrlist.push(level2[i]);
        }
      }
      let level3 = [];
      resultArrlist.forEach((res, index) => {
        resultArr.forEach((asd) => {
          if (res.pid == asd.id) {
            res.children = [];
            asd.children.push(res);
          }
        });
      });
      resultArrlist.forEach((xzd) => {
        resultArr.forEach((asd) => {
          asd.children.forEach((qwe) => {
            if (xzd.pid == qwe.id) {
              qwe.children.push(xzd);
            }
          });
        });
      });
      this.newlist = resultArr;
    },
    //递归处理选择的数据
    familyTree(arr1, id) {
      var temp = [];
      var forFn = function (arr, id) {
        for (var i = 0; i < arr.length; i++) {
          var item = arr[i];
          if (item.id === id) {
            temp.push(item);
            forFn(arr1, item.parentId);
            break;
          } else {
            if (item.children) {
              forFn(item.children, id);
            }
          }
        }
      };
      forFn(arr1, id);
      return temp;
    },
    //提交评分
    cancel() {
      window.history.back();
    },
    submitForm() {
      let list = this.newlist;

      if (list.length == 0) {
        this.$message({
          message: "评分不能为空，请选择！",
          type: "warning",
        });
        return;
      }

      //一级
      for (var i = 0; i < list.length; i++) {
        if (list[i].fraction == "") {
          this.$message({
            message: "(" + list[i].name + ")评分不能是空值，请重新评分",
            type: "warning",
          });
          return;
        } else if (list[i].fraction == null) {
          this.$message({
            message: "(" + list[i].name + ")评分不能是空值，请重新评分",
            type: "warning",
          });
          return;
        } else if (list[i].fraction < 0) {
          this.$message({
            message: "评分不能是负数，请重新评分",
            type: "warning",
          });
          return;
        }
      }

      //二级
      for (var i = 0; i < list.length; i++) {
        for (var j = 0; j < list[i].children.length; j++) {
          if (list[i].children[j].fraction == "") {
            this.$message({
              message:
                "(" + list[i].children[j].name + ")评分不能是空值，请重新评分",
              type: "warning",
            });
            return;
          } else if (list[i].children[j].fraction == null) {
            this.$message({
              message:
                "(" + list[i].children[j].name + ")评分不能是空值，请重新评分",
              type: "warning",
            });
            return;
          } else if (list[i].children[j].fraction < 0) {
            this.$message({
              message: "评分不能是负数，请重新评分",
              type: "warning",
            });
            return;
          }
        }
      }
      //三级
      // for(var i=0;i<list.length;i++){
      // 	for(var j=0;j<list[i].children.length;j++){
      // 		for(var g=0; g<list[i].children[j].children.length;g++){
      // 			 if(list[i].children[j].children[g].fraction ==  ""){
      //                 this.$message({
      //                   message: '(' + list[i].children[j].children[g].name + ')评分不能是空值，请重新评分',
      //                   type: 'warning'
      //                 });
      //                 return
      //
      //             }else if(list[i].children[j].children[g].fraction ==  null){
      //             	 this.$message({
      //                      message: '(' + list[i].children[j].children[g].name + ')评分不能是空值，请重新评分',
      //                      type: 'warning'
      //                    });
      //                    return
      //             }else if(list[i].children[j].children[g].fraction<0){
      //           	  this.$message({
      //                     message: '评分不能是负数，请重新评分',
      //                     type: 'warning'
      //                   });
      //           		return
      //             }
      // 		}
      // 	}
      // }
      this.suanzongfen(list);
    },
    suanzongfen(list) {
      //二级下三级总分
      // for(var i=0;i<list.length;i++){
      // 	for(var j=0;j<list[i].children.length;j++){
      // 		let sanjinum=0;
      // 		if(list[i].children[j].children.length==0){
      // 			sanjinum=list[i].children[j].fraction;
      // 		}else{
      // 			for(var g=0; g<list[i].children[j].children.length;g++){
      //    			 sanjinum += list[i].children[j].children[g].fraction;
      //    		}
      // 		}
      // 		if (list[i].children[j].fraction != sanjinum) {
      //           this.$message({
      //             message: '(' +list[i].children[j].name + ')的二级小类评分错误，请重新评分',
      //             type: 'warning'
      //           });
      //           return ;
      //         }
      // 	}
      // }

      //大类下二级总分
      for (var i = 0; i < list.length; i++) {
        let subRate = 0;
        for (var j = 0; j < list[i].children.length; j++) {
          subRate += list[i].children[j].fraction;
        }
        if (list[i].fraction != subRate) {
          this.$message({
            message: "(" + list[i].name + ")的大类评分错误，请重新评分",
            type: "warning",
          });
          return;
        }
      }

      // 总分
      let level1Rate = 0;
      for (let i = 0; i < list.length; i++) {
        level1Rate += list[i].fraction; // 大类总分
      }
      if (level1Rate < 100) {
        this.$message({
          message: "您当前的大类总分小于100，请重新评分",
          type: "warning",
        });
        return;
      } else if (level1Rate > 100) {
        this.$message({
          message: "您当前的大类总分大于100，请重新评分",
          type: "warning",
        });
        return;
      }

      let params = {
        houseId: this.houseId,
        children: [],
      };

      list.forEach((item) => {
        params.children.push({
          id: item.id,
          pid: 0,
          sort: item.sort,
          fraction: item.fraction,
          name: item.name,
          level: 0,
        });
        item.children.forEach((child) => {
          params.children.push({
            pid: item.id,
            id: child.id,
            fraction: child.fraction,
            name: child.name,
            level: 1,
          });

          child.children.forEach((childse) => {
            params.children.push({
              pid: child.id,
              id: childse.id,
              name: childse.name,
              level: 2,
            });
          });
        });
      });
      if (this.houseId == "") {
        this.$message({
          message: "请选择楼盘",
          type: "warning",
        });
        return;
      }

      this.saveRate(params);
    },
    // 评分保存  新增模板
    saveRate(params) {
      if (this.Templateid!='') {
        params.tempId = this.Templateid;
      }
      this.$api.http.templategeaddTemplate(params).then((res) => {
            this.$message({
          message: "保存成功",
          type: "success",
        });
        window.history.back();
      })
    },


        //拖拽排序
    Peerdrag(before) {
      let arr = [];
      this.treeList.forEach((item, index) => {
        if (before.data.pid == item.pid) {
          arr.push(item);
        } else {
          if (item.children.length == 0) {
            return;
          } else {
            item.children.forEach((ite, inde) => {
              if (before.data.pid == ite.pid) {
                arr.push(ite);
              } else {
                if (ite.children.length == 0) {
                  return;
                } else {
                  ite.children.forEach((it, ins) => {
                    if (before.data.pid == it.pid) {
                      arr.push(it);
                    }
                  });
                }
              }
            });
          }
        }
      });
      arr.forEach((item, index) => {
        item.sort = index;
      });

      let params = {
        list: [],
      };
      params.list = arr.map((item) => {
        return {
          id: item.id,
          sort: item.sort,
        };
      });
      this.dragSort(params.list);
    },
    //排序提交
    dragSort(list) {
      this.$api.http.templategeupdateSort({children:list}).then((res) => {

      })
    },
    //控制那个可拖拽节点
    allowDrag(draggingNode, dropNode, type) {
      if (draggingNode.data.sign == 0) {
        return false;
      } else {
        return true;
      }
    },
    //同级节点才可以拖拽
    allowDrop(draggingNode, dropNode, type) {
      if (draggingNode.level === dropNode.level) {
        if (draggingNode.parent.id === dropNode.parent.id) {
          // 向上拖拽 || 向下拖拽
          return type === "prev" || type === "next";
        }
      } else {
        // 不同级进行处理
        return false;
      }
    },
    // 添加二级小类节点入口
    append(node, data) {
      this.addForm.name = "";
      this.pid = data.id;
      this.dialogFormVisible = true;
      this.level = node.level;
      this.treeData = data;
    },
    // 添加三级小类节点入口
    append1(node, data) {
      this.addForm.name = "";
      this.pid = data.id;
      this.dialogFormVisible = true;
      this.level = node.level;
      this.treeData = data;
    },
    // 添加大类入口
    addBigNode() {
      this.level = 0;
      this.pid = 0;
      this.addForm.name = "";
      this.dialogFormVisible = true;
    },
    // 点击添加节点确认按钮
    addSubmit() {
      if (this.addForm.name != "") {
        this.dialogFormVisible = false;
        this.addNode();
      } else {
        this.$message({
          message: "内容不能为空",
          type: "warning",
        });
        return;
      }
    },
    // 新增的节点保存
    addNode() {
       this.$api.http.templategeadd({
          pid: this.pid,
          name: this.addForm.name,
          houseId: this.houseId,
          sign:1
       }).then((res) => {
          if (this.level == 0) {
            // 大类
            let newNode = {
              id: res.data,
              sign: 1,
              pid: 0,
              sort: this.treeList.length + 1,
              label: this.addForm.name,
              fraction: "",
              children: [],
              houseId: this.houseId,
            };
            this.treeList.push(newNode);
            this.allTreeListId.push(res.data.obj);
          } else if (this.level == 1) {
            // 二级
            let newChild = {
              id: res.data,
              pid: this.pid,
              sign: 1,
              fraction: "",
              sort: null,
              label: this.addForm.name,
              children: [],
              houseId: this.houseId,
            };

            this.treeList.forEach((item, index) => {
              if (item.id == this.pid) {
                item.children.push(newChild);
              }
            });
            this.allTreeListId.push(res.data.obj);
          } else {
            let newChilds = {
              id: res.data,
              sign: 1,
              fraction: "",
              pid: this.pid,
              sort: null,
              label: this.addForm.name,
              houseId: this.houseId,
            };
            this.treeList.forEach((item, index) => {
              item.children.forEach((ite, inde) => {
                if (ite.id == this.pid) {
                  ite.children.push(newChilds);
                }
              });
            });
            this.allTreeListId.push(res.data.obj);
          }
       })
    },
    //编辑提交
    submiadd() {
      var that = this;
      let parmest={
          name: that.frosasd.name,
          id: that.frosasd.id,
      }
      this.$api.http.templategeupdate(parmest).then((res) => {
             that.treeList.forEach((item, index) => {
            if (item.id == that.frosasd.id) {
              that.treeList[index].label = that.frosasd.name;
              that.isshowage = false;
              that.$message({
                message: "修改成功",
                type: "success",
              });
              return;
            } else {
              item.children.forEach((asd, indexesd) => {
                if (asd.id == that.frosasd.id) {
                  that.treeList[index].children[indexesd].label =
                    that.frosasd.name;
                  that.isshowage = false;
                  that.$message({
                    message: "修改成功",
                    type: "success",
                  });
                  return;
                } else {
                  asd.children.forEach((zxc, indexzxc) => {
                    if (zxc.id == that.frosasd.id) {
                      that.treeList[index].children[indexesd].children[
                        indexzxc
                      ].label = that.frosasd.name;
                      that.isshowage = false;
                      that.$message({
                        message: "修改成功",
                        type: "success",
                      });
                      return;
                    }
                  });
                }
              });
            }
          });
      })
    },
    //编辑
    ddeditor(node, data) {
      this.frosasd.name = data.label;
      this.frosasd.id = data.id;
      this.isshowage = true;
    },
    // 删除自定义的节点
    checkDelete() {
      let parmest={
         id: this.deleteId,
      }
      this.$api.http.templategedel(parmest).then((res) => {
          this.treeList.forEach((item, index) => {
            if (item.id == this.deleteId) {
              this.treeList.splice(index, 1);
            } else {
              item.children.forEach((ite, inde) => {
                if (ite.id == this.deleteId) {
                  this.treeList[index].children.splice(inde, 1);
                } else {
                  ite.children.forEach((it, ine) => {
                    if (it.id == this.deleteId) {
                      this.treeList[index].children[inde].children.splice(
                        ine,
                        1
                      );
                    }
                  });
                }
              });
            }
          });

          this.dialogVisible = false;
      })
    },
    remove(node, data) {
      if (node.level == 3) {
        this.deleteType = "node";
        this.deleteId = data.id;
        this.dialogVisible = true;
      } else {
        if (data.children.length == 0) {
          this.deleteType = "node";
          this.deleteId = data.id;
          this.dialogVisible = true;findByTempId
        } else {
          this.$message({
            message: "请先清空子级",
            type: "warning",
          });
        }
      }
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  padding-top: 0px;
  min-width: 1000px;
  padding-bottom: 100px;
}
#app {
  width: 100%;
  height: 100%;
  padding: 15px 15px;
  list-style: none;
  display: flex;
  background: #ffffff;
   min-width: 1000px;
  min-height: 80vh;
  border-radius: 4px;
}
.content-left {
  width: 360px;
  padding-right: 30px;
  border-right: 1px solid #ccc;
}
.content-left .select {
  margin: 20px 0;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.update-btn {
  margin-top: 30px;
  text-align: center;
}

.content-right {
  padding: 20px 30px;
  flex: 1;
}
.form-box {
  width: 100%;
  border: 2px dashed #ddd;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 8px;
}

.list-group-item {
  cursor: move;
  list-style: none;
  border: 0;
}
</style>