zkPCproject/src/views/Template/SystemarketingWordMB.vue

<template>
  <div class="box-center">
      <div class="center">

        <div style="display: flex;">
         <div style="font-weight: 400;font-size: 20px">
           系统默认节点  &nbsp;&nbsp;&nbsp;  <span style="font-size: 16px">(提示：拖拽同级类可以排序)</span>
         </div>
          <div style="height: 30px;margin-left: 100px;">
             <el-button style="" size="mini" type="primary" @click.stop="addBigNode">添加大类</el-button>
          </div>
        </div>

        <div style="margin-top: 16px;width: 100%; ">
               <el-tree ref="tree" :data="datalist" node-key="id" default-expand-all
               :allow-drop="allowDrop" @node-drop="Peerdrag" draggable>
              <span slot-scope="{ node, data }">
                  <!-- <span>{{ node.label }}</span> -->

                    <span v-if="node.level == 1" style="font-size: 18px; color: #32363d" >
                      <img class="levelimg1" src="/img/level1.png" alt="" />
                      {{ data.label }}
                    </span>
                    <span v-if="node.level == 2 " style="font-size: 16px; color: #32363d" >
                      <img class="levelimg2" src="/img/level2.png" alt="" />
                      {{ data.label }}
                    </span>
                    <span v-if="node.level == 3" style="font-size: 14px; color: #32363d" >
                      <img class="levelimg3" src="/img/level3.png" alt="" />
                      {{ node.label }}
                    </span>



                  <!-- <span v-if="node.level==1">
                    <el-button style="color:red; margin-left: 20px;" type="text" size="mini"
                              @click.stop="() => append(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> -->

                  <!-- <span v-if="node.level==2">
                    <el-button type="text" size="mini" style=" margin-left: 20px;"
                              @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>
                  <span v-if="node.level==3">
                    <el-button style=" margin-left: 20px;" 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> -->



                <span v-if="node.level == 1" >
                  <span class="editorcd" @click="append(node, data)" >
                    <img class="levelimg3" src="/img/add1.png" alt="" />
                    <span>添加二级</span>
                  </span>
                  <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>

                <span v-if="node.level == 2"  >
                  <span  class="editorcd2"  @click="append1(node, data)" >
                    <img class="levelimg3" src="/img/add2.png" alt="" />
                    <span>添加三级</span>
                  </span>
                  <span style="margin-left: 10px">
                    <el-button class="editorcd" type="text" size="mini" @click="ddeditor(node, data)">编辑</el-button>
                  </span>
                  <span style="margin-left: 10px">
                    <el-button class="remove" type="text" size="mini" @click="remove(node, data)" >删除</el-button>
                  </span>
                </span>

                <span v-if="node.level == 3">
                  <span style="margin-left: 10px">
                    <el-button class="editorcd" type="text" size="mini" @click="ddeditor(node, data)" >编辑</el-button>
                  </span>
                  <span style="margin-left: 10px">
                    <el-button class="remove" type="text" size="mini" @click="remove(node, data)" >删除</el-button>
                  </span>
                </span>


              </span>
            </el-tree>
        </div>


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

    <!-- 新增弹框 -->
    <el-dialog title="新增大类" :visible.sync="dialogShow">
      <el-form :model="addForm" label-position="left" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="10">
              <el-form-item label="一级大类名称:" v-if="level==0" :label-width="formLabelWidth">
                  <el-input v-model="addForm.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="二级小类名称:" v-if="level==1" :label-width="formLabelWidth">
                  <el-input v-model="addForm.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="三级小类名称:" v-if="level==2" :label-width="formLabelWidth">
                  <el-input v-model="addForm.name" autocomplete="off"></el-input>
              </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!--?编辑弹框?-->
    <el-dialog title="编辑" :visible.sync="isshowage">
        <div style="display: flex;align-items: center;height: 40px;">
            <div>类名：</div>
            <div>
              <el-input  type="text" 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>
</template>

<script>
export default {
    data() {
      return {
        datalist: [],
        drag: false,
        activeNames: ['1'],
        dialogShow: false, // 大类新增
        addShow: false, // 小类新增
        dialogDelete: false, //删除提示弹框
        formLabelWidth: '120px',
        addItem: null, // 当前添加小类的项
        addForm: {
          name: '',
          house: '',
          company: ''
        },
        childDelete: null,
          level: 1, //操作节点的层级
          pid:0,
          deleteId: null, // 要删除的表单节点的ID
          isshowage:false,
          frosasd:{
              name: '',
              id:''
          },
      }
    },
    mounted() {
      this.templategetMarketingTree()
    },
    methods: {
        templategetMarketingTree(){
               this.$api.http.templategetMarketingTree({}).then((res) => {
                console.log(res);
                  let data = res.data;
                  data = JSON.stringify(data).replace(/name/g, "label");
                  data = JSON.parse(data);
                  this.datalist = data;
              })
        },
         //编辑
        ddeditor(node,data){
            this.frosasd.name=data.label;
            this.frosasd.id=data.id;
            this.isshowage=true;
        },
        submicll(){
            this.isshowage=false;
        },
         //编辑提交
        submiadd(){
            var that=this;
            this.$api.http.templategeupdate({
               name: that.frosasd.name,
               id:that.frosasd.id
            }).then((res) => {
                  that.datalist.forEach((item,index)=>{
                      if(item.id==that.frosasd.id){
                          that.datalist[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.datalist[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.datalist[index].children[indexesd].children[indexzxc].label=that.frosasd.name;
                                          that.isshowage=false;
                                          that.$message({
                                              message: '修改成功',
                                              type: 'success'
                                          });
                                          return
                                      }
                                  })
                              }
                          })
                      }
                  })
            })
        },

         //添加大类
        addBigNode() {
            this.level=0;
            this.addForm.name = '';
            this.dialogShow = true;
        },
        // 添加二级小类节点入口
        append(node, data) {
            this.level=1;
            this.addForm.name = '';
            this.pid = data.id;
            this.dialogShow = true
        },
        // 添加三级小类节点入口
        append1(node, data) {
            this.level=2;
            this.addForm.name = '';
            this.pid = data.id
            this.dialogShow = true
        },
        // 大类保存
         onSubmit() {
            if (this.addForm.name != "") {
                this.dialogShow = false
                this.addNode()
            } else {
                this.$message({
                    message: '内容不能为空',
                    type: 'warning'
                });
                return;
            }
        },
        // 新增的节点保存
        addNode() {
             this.$api.http.templategeadd({
                pid: this.pid,
                name: this.addForm.name,
                sign:0
            }).then((res) => {
                  if (this.level == 0) { // 大类
                        let newNode = {
                            id: res.data,
                            sign: 1,
                            pid:0,
                            sort: this.datalist.length + 1,
                            label: this.addForm.name,
                            fraction: '',
                            children: []
                        }
                        this.datalist.push(newNode);
                    } else if(this.level == 1) {
                        // 二级
                        let newChild = {
                            id: res.data,
                            pid:this.pid,
                            sign: 1,
                            fraction: '',
                            sort: null,
                            label: this.addForm.name,
                            children: []
                        };
                        this.datalist.forEach((item,index)=>{
                            if(item.id==this.pid){
                                item.children.push(newChild)
                            }
                        })
                    }else{
                        let newChilds = {
                            id: res.data,
                            sign: 1,
                            fraction: '',
                            pid:this.pid,
                            sort: null,
                            label: this.addForm.name
                        };
                        this.datalist.forEach((item,index)=>{
                            item.children.forEach((ite,inde)=>{
                                if(ite.id==this.pid){
                                    ite.children.push(newChilds)
                                }
                            })
                        })
                    }
            })

        },
        // 删除标签
        remove(node, data) {
            this.deleteId = data.id
            this.dialogDelete = true;
        },
         // 删除自定义的节点
        checkDelete() {
              this.$api.http.templategedel({
                id: this.deleteId
                }).then((res) => {
                    this.datalist.forEach((item,index)=>{
                        if(item.id==this.deleteId){
                            this.datalist.splice(index,1)
                        }else{
                            item.children.forEach((ite,inde)=>{
                                if(ite.id==this.deleteId){
                                    this.datalist[index].children.splice(inde,1)
                                }else{
                                    ite.children.forEach((it,ine)=>{
                                        if(it.id==this.deleteId){
                                            this.datalist[index].children[inde].children.splice(ine,1)
                                        }
                                    })
                                }
                            })
                        }
                    })
                    this.dialogDelete = false;
              })
        },



         //同级节点才可以拖拽
      allowDrop(draggingNode, dropNode, type) {
        if (draggingNode.level === dropNode.level) {
          if (draggingNode.parent.id === dropNode.parent.id) {
            // 向上拖拽 || 向下拖拽
            return type === "prev" || type === "next";
          }
        } else {
          // 不同级进行处理
          return false;
        }
      },
      //拖拽排序
      Peerdrag(before) {
        let arr = [];

        this.datalist.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) => {

          })
   		},


    },
}
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  padding-top: 0px;
  min-width: 1000px;
  padding-bottom: 100px;
}
.center{
  width: 100%;
  height: 100%;
  padding: 15px 15px;
  list-style: none;
  background: #ffffff;
  min-height: 80vh;
  border-radius: 4px;
}
.biaoti {
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #32363d;
  line-height: 20px;
  padding-top: 25px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 183px;
}
.remove {
  color: red;
}
.editorcd {
  color: #2671e2;
}
.editorcd2 {
  color: #e6a12f;
}
.levelimg1 {
  width: 18px;
  height: 18px;
}
.levelimg2 {
  width: 16px;
  height: 16px;
}
.levelimg3 {
  width: 14px;
  height: 14px;
}


</style>