saber/src/views/manager/archivetree.vue

<template>
  <basic-container
    ref="container"
    style="height:100%;"
  >
    <el-row
      :gutter="20"
      :style="{'height':heights-80+'px','overflow': 'hidden'}"
    >
      <el-col
        span="12"
        class='marleft20'
      >
        <div>
          <h2>归档目录树</h2>
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
          >
          </el-input>
          <el-tree
            v-show="!filterText"
            ref="trees1"
            :props="props"
            :load="loadNode"
            node-key="id"
            lazy
          >
            <span
              class=" flexStar"
              slot-scope="{ node, data }"
              @mouseover="mouseOver(data)"
              @mouseleave="mouseLeave(data)"
              style="box-sizing: border-box;width:100%;"
            >
              <span>{{ data.title }}</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(node)'
                  class="el-icon-delete marleft5"
                  style="fontSize:18px;"
                  v-if="node.level!=1"
                ></i>
              </span>
            </span>
          </el-tree>
          <el-tree
            v-show="filterText"
            ref="trees1"
            :props="props"
            :data="data"
            node-key="id"
            :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.title }}</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(node)'
                  class="el-icon-delete marleft5"
                  style="fontSize:18px;"
                  v-if="node.level!=1"
                ></i>
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col
        span="9"
        style="padding-top:30px;"
      >
        <h3>上传文件入口显示配置</h3>
        <div
          class="peizhi"
          :style="{'height':heights-210+'px','overflow': 'hidden'}"
        >
          <div class="flexEnd">
            <i
              @click="rightPushTree"
              class="el-icon-plus"
              style="backgroundColor:#2A97DF;color:#fff;fontSize:20px;cursor: pointer;"
            ></i>
          </div>
          <el-tree
            :props="Rightprops"
            :data="rightData"
            node-key="id"
            accordion
            ref="tree"
            class="filter-tree"
          >
          </el-tree>
        </div>
      </el-col>
    </el-row>
    <!-- 新增编辑 -->
    <el-dialog
      :title="form.id?'编辑':'新增'"
      :visible.sync="treeTap"
      width="700px"
      :modal-append-to-body="false"
      @close="treeClose"
    >
      <div>
        <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-input>
          </el-form-item>
          <el-form-item
            label="岗位类型"
            prop="postType"
          >
            <el-select
              v-model="form.postType"
              placeholder="请选择岗位"
              style="width:400px;"
            >
              <el-option
                v-for="item in JobTypeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="节点类型"
            prop="nodeType"
          >
            <el-select
              :disabled='form.id!=""'
              v-model="form.nodeType"
              placeholder="请选择节点"
              style="width:400px;"
            >
              <el-option
                v-for="item in nodeTypeList"
                :key="item"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <template v-if="form.nodeType==2">
            <el-form-item
              label="是否存储节点"
              prop="isStorageNode"
            >
              <el-select
                :disabled='form.id!=""'
                v-model="form.isStorageNode"
                style="width:400px;"
              >
                <el-option
                  v-for="item in storageNodeList"
                  :key="item"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <template v-if="form.isStorageNode==1">
              <el-form-item
                label="是否竣工图"
                prop="isBuiltDrawing"
              >
                <el-select
                  v-model="form.isBuiltDrawing"
                  style="width:400px;"
                >
                  <el-option
                    v-for="item in builtDrawingList"
                    :key="item"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="是否接口节点"
                prop="isInterfaceNode"
              >
                <el-select
                  v-model="form.isInterfaceNode"
                  style="width:400px;"
                >
                  <el-option
                    v-for="item in interfaceNodeList"
                    :key="item"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <template v-if="form.isInterfaceNode==1">
                <el-form-item label="选择接口类型">
                  <el-select
                    v-model="form.interfaceType"
                    style="width:400px;"
                  >
                    <el-option
                      v-for="item in interfaceTypeList"
                      :key="item"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </template>
          </template>
          <!-- 数字化文件上传 -->
          <template v-if="form.nodeType==1">
            <el-form-item
              label="关联类型"
              prop="associationType"
            >
              <el-select
                v-model="form.associationType"
                style="width:400px;"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in associationTypeList"
                  :key="item"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <template v-if="form.associationType==1">
              <el-form-item
                label="业内资料类型"
                prop="majorDataType"
              >
                <el-checkbox-group v-model="form.majorDataType">
                  <el-checkbox
                    v-for="item in majorDataTypeList"
                    :key="item.dictKey"
                    :label="item.dictKey"
                    name="type"
                  >{{item.dictValue}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item
                label="显示层级"
                prop="displayHierarchy"
              >
                <el-select
                  v-model="form.displayHierarchy"
                  style="width:400px;"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in displayHierarchyList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  ></el-option>
                </el-select>
              </el-form-item>
            </template>
          </template>
        </el-form>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="treeTap=false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveTree"
        >保 存</el-button>
      </span>
    </el-dialog>

    <!-- 右侧树 -->
    <el-dialog
      title="上传文件入口显示配置"
      :visible.sync="pushfileTap"
      :modal-append-to-body='false'
      width="800px"
      @close="pushFileClose"
    >
      <div>
        <el-tree
          :props="dialogProps"
          show-checkbox
          :data="dialogData"
          node-key="id"
          accordion
          ref="trees"
          class="filter-tree"
        >
        </el-tree>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="pushfileTap = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveFile"
        >确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { archiveTreeInit, lazyTree, dictionary, remove, archiveTreeSave, archiveTreeUpdate, archiveTreeDetail, archiveTreetree, submitDisplayConfigTree } from "@/api/manager/archivetree";
import { getToken } from '@/util/auth';
import { roletree } from "@/api/system/role.js";
export default {
  data () {
    return {
      //#region 左侧树
      filterText: '',//筛选条件
      treeNode: {},
      nodeNames: '',
      token: '',
      props: {
        label: 'title',
        children: 'children',
        isLeaf: 'hasChildren'
      },
      data: [],//树节点枚举值
      //#endregion

      //#region 新增编辑节点弹框
      treeTap: false,
      form: {
        id: '',//新增还是编辑
        parentId: '',  //上级节点id
        nodeName: "",  //节点名称
        nodeType: '',  // 节点类型  2 = 数字化上传文件
        postType: '',  //岗位类型
        isStorageNode: '',  //是否为存储节点
        isBuiltDrawing: '',  //竣工图
        isInterfaceNode: '',  //是否接口节点
        interfaceType: '',  //选择接口类型
        associationType: '',  //关联类型
        majorDataType: [],  //内业资料类型
        displayHierarchy: ''  //显示层级
      },
      rules: {
        nodeName: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
        postType: [{ required: true, message: '请选择岗位类型', trigger: 'change' }],
        nodeType: [{ required: true, message: '请选择节点类型', trigger: 'change' }],
        isStorageNode: [{ required: true, message: '请选择存储节点', trigger: 'change' }],
        isBuiltDrawing: [{ required: true, message: '请选择竣工图', trigger: 'change' }],
        isInterfaceNode: [{ required: true, message: '请选择接口节点', trigger: 'change' }],
        interfaceType: [{ required: true, message: '请选择接口类型', trigger: 'change' }],
        associationType: [{ required: true, message: '请选择关联类型', trigger: 'change' }],
        majorDataType: [{ required: true, message: '请选择业内资料类型', trigger: 'change' }],
        displayHierarchy: [{ required: true, message: '请选择显示层级', trigger: 'change' }],
      },
      JobTypeList: [],//岗位类型枚举
      nodeTypeList: [
        {
          label: '关联电子原生文件',
          value: 1
        }, {
          label: '数字化上传文件',
          value: 2
        },
      ],//节点类型枚举
      storageNodeList: [{
        label: '是',
        value: 1
      }, {
        label: '否',
        value: 2
      },],//存储节点枚举
      builtDrawingList: [{
        label: '是',
        value: 1
      }, {
        label: '否',
        value: 2
      },],//竣工图枚举
      interfaceNodeList: [{
        label: '是',
        value: 1
      }, {
        label: '否',
        value: 2
      },],//接口节点枚举
      interfaceTypeList: [
        {
          label: '试验接口',
          value: 1
        }, {
          label: '计量接口',
          value: 2
        },
      ],//选择接口类型枚举
      associationTypeList: [{
        label: '质检资料',
        value: 1
      },
      {
        label: '试验资料',
        value: 2
      },
      {
        label: '影像资料',
        value: 3
      },
      {
        label: '台账资料',
        value: 4
      }],//
      majorDataTypeList: [],//
      displayHierarchyList: [],//
      //#endregion

      //#region 右侧树节点
      pushfileTap: false,//开关
      Rightprops: {
        label: 'title'
      },
      rightData: [],
      //#endregion

      //#region 右侧树弹框
      dialogProps: {
        label: 'title'
      },
      dialogData: [],
      checkXuan: [],
      //#endregion
      heights: '',
    }
  },
  methods: {
    //#region 左侧树方法
    async loadNode (node, resolve) {
      console.log(node);
      if (node.level === 0) {
        let ks = await this.lazyTree(0)
        if (ks.length) {
          resolve(ks)
        } else {
          this.archiveTreeInit()
        }
      } else {
        resolve(await this.lazyTree(node.data.id))
      }
    },
    async archiveTreeInit () {//添加根节点
      const { data: res } = await archiveTreeInit()
      console.log(res);
      if (res.code == 200 && res.msg == '操作成功') {
        res.data.forEach(val => {
          val.hasChildren = !val.hasChildren
        });
        return res.data
      } else if (res.code == 200 && res.msg == "未查询到信息") {
        return []
      }
    },
    async lazyTree (parentId) {//树节点懒加载
      const { data: res } = await lazyTree({
        parentId,
        token: this.token
      })
      console.log(res);
      if (res.code == 200 && res.msg == '操作成功') {
        res.data.forEach(val => {
          val.hasChildren = !val.hasChildren
        });
        return res.data
      } else if (res.code == 200 && res.msg == "未查询到信息") {
        return []
      }
    },
    mouseLeave (data) {
      if (data.moreShow) {
        this.$set(data, 'moreShow', false)
      }
    },
    mouseOver (data) {
      if (!data.moreShow) {
        this.$set(data, 'moreShow', true)
      }
    },
    addtree (data, node) {//添加树
      console.log(data);
      if (this.JobTypeList.length == 0) {
        this.roletree()
      }
      if (this.majorDataTypeList.length == 0) {
        this.major_data_type()//内业资料类型
      }
      if (this.displayHierarchyList.length == 0) {
        this.display_hierarchy()//显示层级
      }
      this.form.postType = data.postType
      this.form.id = ''
      this.form.parentId = data.id
      this.treeTap = true
    },
    async edittree (data) {//编辑树
      if (this.JobTypeList.length == 0) {
        this.roletree()
      }
      if (this.majorDataTypeList.length == 0) {
        this.major_data_type()//内业资料类型
      }
      if (this.displayHierarchyList.length == 0) {
        this.display_hierarchy()//显示层级
      }
      await this.archiveTreeDetail(data)
      this.form.id = data.id
      this.form.parentId = ''
      this.treeNode = data
      this.treeTap = true
    },
    deletetree (node) {//删除树
      console.log(node);
      let _that = this
      this.$confirm('是否删除此数据', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.remove(node.data.id)
          _that.$refs.trees1.remove(node) //删除界面上的节点
        })
        .catch(() => {

        });
    },
    async remove (id) {//删除接口
      const { data: res } = await remove({ id })
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      }
    },
    async archiveTreeDetail (data) {//详情接口
      console.log(data);
      const { data: res } = await archiveTreeDetail({ id: data.id })
      console.log(res);
      if (res.code == 200) {
        this.form.nodeName = res.data.fullName  //节点名称
        this.form.nodeType = res.data.nodeType   // 节点类型  2 = 数字化上传文件
        this.form.postType = res.data.postType   //岗位类型
        this.form.isStorageNode = res.data.isStorageNode   //是否为存储节点
        this.form.isBuiltDrawing = res.data.isBuiltDrawing   //竣工图
        this.form.isInterfaceNode = res.data.isInterfaceNode   //是否接口节点
        this.form.interfaceType = res.data.interfaceType   //选择接口类型
        this.form.associationType = res.data.associationType   //关联类型
        this.form.majorDataType = res.data.majorDataType   //内业资料类型
        this.form.displayHierarchy = res.data.displayHierarchy   //显示层级
      }
    },
    async archiveTreetree4 () {//全加载左侧树
      const { data: res } = await archiveTreetree({
        token: this.token
      })
      console.log(res);
      if (res.code == 200 && res.msg == "操作成功") {
        this.data = res.data
      }
    },
    filterNode (value, data) {//筛选条件
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    //#endregion

    //#region 新增编辑节点弹框
    treeClose () {//弹框关闭事件
      this.form = {
        parentId: '',  //上级节点id
        nodeName: "",  //节点名称
        nodeType: '',  // 节点类型  2 = 数字化上传文件
        postType: '',  //岗位类型
        isStorageNode: '',  //是否为存储节点
        isBuiltDrawing: '',  //竣工图
        isInterfaceNode: '',  //是否接口节点
        interfaceType: '',  //选择接口类型
        associationType: '',  //关联类型
        majorDataType: [],  //内业资料类型
        displayHierarchy: ''  //显示层级
      }
      this.$refs.form.resetFields();
      this.form.id = ''
      this.treeTap = false
    },
    async roletree () {//岗位类型枚举
      const { data: res } = await roletree()
      console.log(res);
      if (res.code == 200) {
        this.JobTypeList = res.data
      }
    },
    async major_data_type () {//内业资料类型
      const { data: res } = await dictionary({ code: 'major_data_type' })
      console.log(res);
      if (res.code == 200) {
        this.majorDataTypeList = res.data
      }
    },
    async display_hierarchy () {//显示层级
      const { data: res } = await dictionary({ code: 'display_hierarchy' })
      console.log(res);
      if (res.code == 200) {
        this.displayHierarchyList = res.data
      }
    },
    saveTree () {//保存按钮
      this.$refs.form.validate(val => {
        if (val) {
          if (this.form.nodeType == 2) {
            if (this.form.isStorageNode == 1) {
              if (this.form.isInterfaceNode == 1) {
                this.baocun({
                  id: this.form.id,
                  parentId: this.form.parentId, //上级节点id
                  nodeName: this.form.nodeName,  //节点名称
                  nodeType: this.form.nodeType,  // 节点类型  
                  postType: this.form.postType,  //岗位类型
                  isStorageNode: this.form.isStorageNode,  //是否为存储节点
                  isBuiltDrawing: this.form.isBuiltDrawing,  //竣工图
                  isInterfaceNode: this.form.isInterfaceNode,  //是否接口节点
                  interfaceType: this.form.interfaceType,  //选择接口类型
                })
              } else {
                this.baocun({
                  id: this.form.id,
                  parentId: this.form.parentId, //上级节点id
                  nodeName: this.form.nodeName,  //节点名称
                  nodeType: this.form.nodeType,  // 节点类型  
                  postType: this.form.postType,  //岗位类型
                  isStorageNode: this.form.isStorageNode,  //是否为存储节点
                  isBuiltDrawing: this.form.isBuiltDrawing,  //竣工图
                  isInterfaceNode: this.form.isInterfaceNode,  //是否接口节点
                })
              }
            } else {
              this.baocun({
                id: this.form.id,
                parentId: this.form.parentId, //上级节点id
                nodeName: this.form.nodeName,  //节点名称
                nodeType: this.form.nodeType,  // 节点类型  
                postType: this.form.postType,  //岗位类型
                isStorageNode: this.form.isStorageNode,  //是否为存储节点
              })
            }
          } else if (this.form.nodeType == 1) {
            if (this.form.associationType == 1) {
              this.baocun({
                id: this.form.id,
                parentId: this.form.parentId, //上级节点id
                nodeName: this.form.nodeName,  //节点名称
                nodeType: this.form.nodeType,  // 节点类型 
                associationType: this.form.associationType,  //关联类型
                majorDataType: this.form.majorDataType, //内业资料类型
                displayHierarchy: this.form.displayHierarchy,  //显示层级
              })
            } else {
              this.baocun({
                id: this.form.id,
                parentId: this.form.parentId, //上级节点id
                nodeName: this.form.nodeName,  //节点名称
                nodeType: this.form.nodeType,  // 节点类型  
                associationType: this.form.associationType,  //关联类型
              })
            }
          }
        }
      })
    },
    baocun (da) {
      if (da.majorDataType) {
        if (da.majorDataType.length > 0) {
          let das = ''
          da.majorDataType.forEach((val, key) => {
            das += val
            if (da.majorDataType.length - 1 != key) {
              das += ','
            }
          })
          da.majorDataType = das
        }
      }
      if (this.form.id) {
        this.archiveTreeUpdate(da)
      } else {
        this.archiveTreeSave(da)
      }
    },
    async archiveTreeSave (da) {//新增
      console.log(da);
      const { data: res } = await archiveTreeSave(da)
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '新增成功'
        })
        this.treeTap = false
        let das = await this.lazyTree(da.parentId)
        this.$refs.trees1.updateKeyChildren(da.parentId, das)
        let node = this.$refs.trees1.getNode(da.parentId);
        node.isLeaf = false;
        node.isLeafByUser = false;
      }
    },
    async archiveTreeUpdate (da) {//编辑
      const { data: res } = await archiveTreeUpdate(da)
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '编辑成功'
        })
        this.treeTap = false
        this.treeNode.title = da.nodeName
        this.treeNode.postType = da.postType
      }
    },
    //#endregion

    //#region 右侧树节点
    async rightPushTree () {//右侧节点树
      this.checkXuan = []
      await this.archiveTreetree2({
        token: this.token,
        nodeType: 2,
      })
      this.pushfileTap = true
      await this.saixuan(this.dialogData)
      console.log(this.checkXuan);
      this.$refs.trees.setCheckedKeys(this.checkXuan);
    },
    // 赛选
    saixuan (da) {//赛选
      if (da.length > 0) {
        let tag = true
        da.forEach(val => {
          if (val.isDisplayTree == 1 && val.hasChildren) {
            let ks = this.saixuan(val.children)
            if (ks) {
              this.checkXuan.push(val.id)
            }
          } else if (val.isDisplayTree == 1 && !val.hasChildren) {
            this.checkXuan.push(val.id)
          } else {
            tag = false
          }
        })
        return tag
      }
    },
    pushFileClose () {//弹框关闭事件
      this.checkXuan = []
    },
    async archiveTreetree (da) {//右侧树全加载接口
      const { data: res } = await archiveTreetree(da)
      console.log(res);
      if (res.code == 200 && res.msg == "操作成功") {
        this.rightData = res.data
      }
    },
    //#endregion

    //#region 右侧树弹框
    async submitDisplayConfigTree (ids) {//保存接口
      const { data: res } = await submitDisplayConfigTree({ ids })
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '设置成功'
        })
        this.archiveTreetree({
          token: this.token,
          disPlayTree: 1,
          nodeType: 2,
        })
        this.pushfileTap = false
      }
    },
    async archiveTreetree2 (da) {//右侧树全加载接口
      const { data: res } = await archiveTreetree(da)
      console.log(res);
      if (res.code == 200 && res.msg == "操作成功") {
        this.dialogData = res.data
      }
    },
    saveFile () {//保存按钮
      let zi = this.$refs.trees.getCheckedKeys() //返回选中子节点的key
      let fu = this.$refs.trees.getHalfCheckedKeys()//返回选中子节点的父节点的key
      let arr = [...zi, ...fu]
      if (arr.length > 0) {
        let ids = ''
        arr.forEach((val, key) => {
          ids += val
          if (key != arr.length - 1) {
            ids += ','
          }
        })
        this.submitDisplayConfigTree(ids)
      } else {
        this.$message({
          type: 'error',
          message: '请先设置配置文件'
        })
      }
    },
    //#endregion
  },
  watch: {
    filterText (val) {
      this.$refs.trees1.filter(val);
    }
  },
  created () {
    this.token = 'bearer ' + getToken()
    this.archiveTreetree({
      token: this.token,
      disPlayTree: 1,
      nodeType: 2,
    })
    this.archiveTreetree4()
  },
  mounted () {
    this.heights = this.$refs.container.$el.offsetHeight
  }
}
</script>

<style lang="scss" scoped>
.peizhi {
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  padding: 15px 10px;
}
</style>