saber/src/views/tentative/testclassify.vue

<template>
  <basic-container ref="container" style="height:100%;">
    <el-row :gutter="20" class="h-h">
      <el-col :span="12">
        <div class="title blue">外委检测模板目录</div>
        <div class="tree-box blue">
          <el-scrollbar class="h-100p">
            <el-tree :props="props" :data="leftTreeData" node-key="id" ref="trees2" :default-expand-all="true" :filter-node-method="filterNode">
              <span class="flexStar" slot-scope="{ node, data }" @mouseover="mouseOver(data)" @mouseleave="mouseLeave(data)" style="box-sizing: border-box;width:100%;">
                <span>{{ data.nodeName }}</span>
                <span class="marleft10" v-show="data.moreShow">
                  <i @click.stop='addtree(data)' class="el-icon-circle-plus-outline" style="fontSize:18px;" v-if="data.isStorageNode!=1"></i>
                  <i @click.stop='edittree(data)' class="el-icon-edit-outline marleft5" style="fontSize:18px;" v-if="node.level!=1"></i>
                  <i @click.stop='deletetree(data)' class="el-icon-delete marleft5" style="fontSize:18px;" v-if="node.level!=1"></i>
                </span>
              </span>
            </el-tree>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="title green">第三方检测模板目录</div>
        <div class="tree-box green">
          <el-scrollbar class="h-100p">
            <el-tree :props="props" :data="rightTreeData" node-key="id" ref="trees2" :default-expand-all="true" :filter-node-method="filterNode">
              <span class="flexStar" slot-scope="{ node, data }" @mouseover="mouseOver(data)" @mouseleave="mouseLeave(data)" style="box-sizing: border-box;width:100%;">
                <span>{{ data.nodeName }}</span>
                <span class="marleft10" v-show="data.moreShow">
                  <i @click.stop='addtree(data,node)' class="el-icon-circle-plus-outline" style="fontSize:18px;" v-if="data.isStorageNode!=1"></i>
                  <i @click.stop='edittree(data,node)' class="el-icon-edit-outline marleft5" style="fontSize:18px;" v-if="node.level!=1"></i>
                  <i @click.stop='deletetree(data)' class="el-icon-delete marleft5" style="fontSize:18px;" v-if="node.level!=1"></i>
                </span>
              </span>
            </el-tree>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>

    <!-- 新增编辑 -->
    <el-dialog :title="form.id?'编辑':'新增'" :visible.sync="treeTap" width="650px" :modal-append-to-body="false" @close="treeClose">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="节点名称" prop="nodeName">
          <el-input v-model="form.nodeName" style="width:400px;"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="treeTap = false">取 消</el-button>
        <el-button type="primary" @click="saveTree">保 存</el-button>
      </span>
    </el-dialog>

  </basic-container>
</template>

<script>
import ManualSorting from '@/components/WbsTree/ManualSorting'
import trialApi from "@/api/tentative/testclassify";

export default {
  components: {
    ManualSorting,
  },
  data () {
    return {
      props: {
        label: 'nodeName',
        children: 'children',
        isLeaf: 'hasChildren'
      },
      leftTreeData: [],
      rightTreeData: [],
      treeTap: false,
      form: {
        id: '', //新增还是编辑
        nodeName: "",  //节点名称
      },
      rules: {
        nodeName: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
      },
    }
  },
  methods: {
    async getTreeAll() {
      const { data } = await trialApi.getTreeAll()
      if (data.code === 200) {
        let {leftTree, rightTree} = data.data

        //左边树
        if (leftTree.length > 0) {
          leftTree.forEach(val => {
            val.hasChildren = !val.hasChildren
          });
        }
        this.leftTreeData = leftTree

        //右边树
        if (rightTree.length > 0) {
          rightTree.forEach(val => {
            val.hasChildren = !val.hasChildren
          });
        }
        this.rightTreeData = rightTree
      } else {
        this.leftTreeData = []
        this.rightTreeData = []
      }
    },
    filterNode (value,data,node) {//筛选条件
      // 如果什么都没填就直接返回
      if(!value){
        return true;
      }

      let _array = [];//这里使用数组存储 只是为了存储值。
      this.getReturnNode(node,_array,value);
      let result = false;

      _array.forEach((item)=>{
        result = result || item;
      });
      return result;
    },
    //判断节点是否匹配
    getReturnNode(node,_array,value){
      let isPass = node.data &&  node.data.nodeName && node.data.nodeName.indexOf(value) !== -1;
      isPass?_array.push(isPass):'';

      //判断节点是否是父节点
      if(!isPass && node.level !== 1 && node.parent){
        this.getReturnNode(node.parent,_array,value);
      }
    },
    mouseLeave (data) {
      if (data.moreShow) {
        this.$set(data, 'moreShow', false)
      }
    },
    mouseOver (data) {
      if (!data.moreShow) {
        this.$set(data, 'moreShow', true)
      }
    },
    //添加树
    addtree (data) {
      this.form = {
        id: '',
        nodeName: '',
        parentId: data.id,
        nodeType: data.nodeType
      }
      this.treeTap = true
    },
    //编辑树
    async edittree (data) {
      this.form = {
        id: data.id,
        parentId: data.parentId,
        nodeName: data.nodeName,
        nodeType: data.nodeType
      }
      this.treeTap = true
    },
    //保存按钮
    saveTree () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.setTreeSubmit()
        } else {
          return false
        }
      })
    },
    treeClose () {
      this.treeTap = false
    },
    //提交保存
    async setTreeSubmit() {
      const { data } = await trialApi.setTreeSubmit(this.form)
      if (data.code === 200) {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.getTreeAll()
      }
    },
    //删除树
    deletetree (data) {
      let _that = this
      this.$confirm('是否删除此数据', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(() => {
        _that.setTreeRemove(data.id)
      });
    },
    //删除接口
    async setTreeRemove (id) {
      const { data } = await trialApi.setTreeRemove({ id })
      if (data.code === 200) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getTreeAll()
      }
    },
  },
  created () {
    this.getTreeAll()
  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
.title {
  padding: 12px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  &.blue {
    background: #4095E5;
    color: white;
  }
  &.green {
    background: #17A854;
    color: white;
  }
}
.tree-box {
  position: relative;
  height: calc(100% - 50px);
  overflow: hidden;
  &.blue {
    border: 1px solid #4095e5;
    border-top: 0;
  }
  &.green {
    border: 1px solid #17A854;
    border-top: 0;
  }
}
</style>

<style lang="scss">
.h-h.el-row,
.h-h.el-row .el-col {
  height: 100%;
}
</style>