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'
      >
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="竣工档案目录" name="first">
            <div>
                    <!-- <h2>归档目录树</h2> -->
                    <el-input
                      placeholder="输入关键字进行过滤"
                      clearable
                      v-model="filterText"
                    >
                    </el-input>    
                  <div class="scrollClass" style="height:721px">
                    <el-scrollbar style="height:100%">
                      <el-tree
                        style="box-sizing: border-box;"
                        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)"
                            
                        >
                          <span style="text-overflow: ellipsis;width:101%;">{{ 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>
                            <i
                              @click.stop='paixuMD(data)'
                              class="el-icon-sort marleft5"
                              style="fontSize:18px;"
                              v-if="node.level!=1"
                            ></i>
                          </span>
                        </span>
                      </el-tree>
                      
                      <el-tree
                      v-show="filterText"
                      :default-expanded-keys='defaultExpanded'
                      :props="props"
                      :data="data"
                      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:120%;"
                      >
                        <span  style="text-overflow: ellipsis;">{{ 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>
                          <i
                            @click.stop='paixuMD(data)'
                            class="el-icon-sort marleft5"
                            style="fontSize:18px;"
                            v-if="node.level!=1"
                          ></i>
                        </span>
                      </span>
                      </el-tree>
                    </el-scrollbar>
                  </div>
                
            </div>
          </el-tab-pane>
          <el-tab-pane label="文书档案目录" name="second">
               <div>
                <!-- <h2>归档目录树</h2> -->
                <el-input
                  placeholder="输入关键字进行过滤"
                  clearable
                  v-model="filterText"
                >
                </el-input>    
              <div class="scrollClass" style="height:721px">
                <el-scrollbar style="height:100%">
                  <el-tree
                    style="box-sizing: border-box;"
                    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)"
                        
                    >
                      <span style="text-overflow: ellipsis;">{{ 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>
                        <i
                          @click.stop='paixuMD(data)'
                          class="el-icon-sort marleft5"
                          style="fontSize:18px;"
                          v-if="node.level!=1"
                        ></i>
                      </span>
                    </span>
                  </el-tree>

                  <el-tree
                  v-show="filterText"
                  :default-expanded-keys='defaultExpanded'
                  :props="props"
                  :data="data"
                  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:101%;"
                  >
                    <span  style="text-overflow: ellipsis;">{{ 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>
                      <i
                        @click.stop='paixuMD(data)'
                        class="el-icon-sort marleft5"
                        style="fontSize:18px;"
                        v-if="node.level!=1"
                      ></i>
                    </span>
                  </span>
                  </el-tree>
                </el-scrollbar>
              </div>
             
              </div>
          </el-tab-pane>
         
      </el-tabs>
       
      </el-col>
      <el-col
        :span="9"
        style="padding-top:30px;"
      >
        <!-- <h3>上传文件入口显示配置</h3> -->
<!--        
        <div
          class="peizhi"
          :style="{'height':heights-210+'px','overflow': 'hidden'}"
        >
          <el-button type="primary"  @click="handleentrybtn">立卷规则</el-button>
          <el-button type="info"  @click="handlerulebtn">工程文件入口配置</el-button>
            <el-button type="warning" v-if="!isentryTree"  @click="savebtn">保存设置</el-button>
          <div class="flexEnd"  v-if="isentryTree">
            <i
              @click="rightPushTree"
              class="el-icon-plus"
              style="backgroundColor:#2A97DF;color:#fff;fontSize:20px;cursor: pointer;"
            ></i>
          </div>
              <div class="scrollClass"  v-if="isentryTree" style="height:721px">
                 <el-scrollbar style="height:100%">
                    <el-tree
                    :props="Rightprops"
                    :data="rightData"
                    node-key="id"
                    ref="tree"
                    class="filter-tree"
                   
                  >
                  </el-tree>
                 </el-scrollbar>
              </div>
         
 
          <div v-if="!isentryTree" style="margin-top:20px">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="设置为最高并卷层级"></el-checkbox>
                <el-checkbox label="设置为分类并卷层级"></el-checkbox>
                <el-checkbox label="设置为单独并卷层级"></el-checkbox>
              </el-checkbox-group>
              <div style="margin-top:20px;border:1px solid #e5e5e5;padding:20px">
                    
                      <div style="display: flex;justify-content: space-between;">
                         <el-select v-model="publictreevalue" clearable placeholder="请选择公有质检化分树" style="    width:45%;">
                            <el-option
                              v-for="item in publictreeoptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="testtreevalue" clearable placeholder="请选择公有试验化分树"   style="    width: 45%;">
                            <el-option
                              v-for="item in testtreeoptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                      </div>
                   <el-input
                            placeholder="输入关键字进行过滤"
                            v-model="rulefilterText"
                            style="margin-top:20px"
                            >
                    </el-input>
                  <div  class="scrollClass"  style="height:521px ;">
                      <el-scrollbar style="height:100%">
                          <el-tree
                         
                            class="filter-tree"
                            :data="rightData"
                            :props="Rightprops"
                            default-expand-all
                            :filter-node-method="rulefilterNode"
                             
                            ref="ruletree">
                          </el-tree>

                      </el-scrollbar>
                  </div>
              </div>
          
           
            
          </div>
        </div> -->
         <div class="peizhi" :style="{'height':heights-210+'px','overflow': 'hidden'}">
            <el-tabs v-model="activetabName" @tab-click="handletabClick">
                <el-tab-pane label="立卷规则" name="second">
                   <el-row style="margin-bottom:15px">
                    <el-button type="primary" plain @click="setHigh">设置为最高并卷层级</el-button>
                    <el-button type="primary" plain @click="setType">设置为分类卷并卷</el-button>
                    <el-button type="primary" plain @click="setAlone">设置为独立组卷</el-button>
                  </el-row>
                    <div style="display: flex;justify-content: space-between;">
                         <el-select v-model="publictreevalue" clearable placeholder="请选择公有质检化分树" style="  margin-bottom:15px;  width:45%;">
                            <el-option
                              v-for="item in publictreeoptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="testtreevalue" clearable placeholder="请选择公有试验化分树"   style="    width: 45%;">
                            <el-option
                              v-for="item in testtreeoptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                      </div>
                </el-tab-pane>
                <el-tab-pane label="工程文件入口配置" name="first"></el-tab-pane>
          </el-tabs>
         
          <div class="scrollClass"  v-if="activetabName==='second'" style="height:721px">
                 <el-scrollbar style="height:100%">
                    <el-tree
                    :props="Rightprops"
                    :data="rightData"
                    node-key="id"
                    ref="tree"
                    class="filter-tree"
                    show-checkbox
                    @check-change="handleCheckChange"
                  >
                   <div class="custom-tree-node" slot-scope="{ node, data }"   @mouseover="mouseOver(data)"
                    @mouseleave="mouseLeave(data)">
                       <span>{{ node.label }}</span>
                       <span  class="marleft10"
                              v-show="data.moreShow">
                          <el-button
                            type="text"
                            size="mini"
                            @click.stop="() => viewConfig(data)">
                            查看配置
                          </el-button>
                         
                        </span>
                   </div>
                  </el-tree>
                 </el-scrollbar>
          </div>
          <div class="flexEnd"  v-if="isentryTree">
            <i
              @click="rightPushTree"
              class="el-icon-plus"
              style="backgroundColor:#2A97DF;color:#fff;fontSize:20px;cursor: pointer;"
            ></i>
          </div>
              <div class="scrollClass"  v-if="isentryTree" style="height:721px">
                 <el-scrollbar style="height:100%">
                    <el-tree
                    :props="Rightprops"
                    :data="rightData"
                    node-key="id"
                    ref="tree"
                    class="filter-tree"
                   
                  >
                  </el-tree>
                 </el-scrollbar>
              </div>
         
        </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.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="工程类型"
            prop="projectType"
          >
            <el-select
              v-model="form.projectType"
              placeholder="工程类型"
              style="width:400px;"
            >
              <el-option
                v-for="item in projectTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
              label="储存类型"
              prop="storageType"
              v-if="form.nodeType==1"
            >
              <el-select
                v-model="form.storageType"
                style="width:400px;"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in storageTypeList"
                  :key="item.value"
                  :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.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <template v-if="form.isStorageNode==1">
              <el-form-item
                label="储存类型"
                prop="storageType"
              >
                <el-select
                  v-model="form.storageType"
                  style="width:400px;"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in storageTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="是否竣工图"
                prop="isBuiltDrawing"
              >
                <el-select
                  v-model="form.isBuiltDrawing"
                  style="width:400px;"
                >
                  <el-option
                    v-for="item in builtDrawingList"
                    :key="item.value"
                    :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.value"
                    :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.value"
                      :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.value"
                  :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 v-if="form.associationType==2">
              <el-form-item
                label="文件类型"
                prop="expDataType"
              >
                <el-checkbox-group v-model="form.expDataType">
                  <el-checkbox
                    v-for="item in fileTypeList"
                    :key="item.value"
                    :label="item.label"
                  >{{item.label}}</el-checkbox>
                </el-checkbox-group>
              </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>

    <!-- wbs树排序弹框 -->
    <el-dialog
      title="调整排序"
      :visible="sortTag"
      width="50%"
      append-to-body
    >
      <ManualSorting
        v-if="sortTag2"
        @bianhua='bianhua()'
        :sort='sort'
      />
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="sortTag=false,sortTag2=false">取 消</el-button>
        <el-button
          type="primary"
          @click="editSort()"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 设置最高层级 -->
     <el-dialog
      title="设置最高并卷层级"
      :visible.sync="highVisible"
      width="50%"
      append-to-body
    >
     <el-checkbox-group v-model="checkList">
      <el-checkbox label="复选框 A" style="margin-bottom:10px"></el-checkbox><br/>
      <el-checkbox label="复选框 B" style="margin-bottom:10px"></el-checkbox><br/>
      <el-checkbox label="复选框 C" style="margin-bottom:10px"></el-checkbox><br/>
    </el-checkbox-group>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="highVisible=false,highVisible=false">取 消</el-button>
        <el-button
          type="primary"
          @click="editSort()"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看配置 -->
    <el-dialog
        title="设置最高并卷层级"
        :visible.sync="configVisible"
        width="50%"
        append-to-body
      >
       <el-tabs v-model="configactiveName" @tab-click="confighandleClick">
          <el-tab-pane label="最高层级配置" name="first"></el-tab-pane>
          <el-tab-pane label="分类并卷配置" name="second"></el-tab-pane>
          <el-tab-pane label="独立组卷配置" name="third"></el-tab-pane>
         
        </el-tabs>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="复选框 A" style="margin-bottom:10px"></el-checkbox><br/>
        <el-checkbox label="复选框 B" style="margin-bottom:10px"></el-checkbox><br/>
        <el-checkbox label="复选框 C" style="margin-bottom:10px"></el-checkbox><br/>
      </el-checkbox-group>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="configVisible=false,configVisible=false">取 消</el-button>
          <el-button
            type="primary"
            @click="editSort()"
          >确 定</el-button>
        </span>
      </el-dialog>
  </basic-container>
</template>

<script>
import ManualSorting from '@/components/WbsTree/ManualSorting'
import { archiveTreeInit, lazyTree, dictionary, remove, archiveTreeSave, archiveTreeUpdate, archiveTreeDetail, archiveTreetree, submitDisplayConfigTree, getSameGradeNode, submitArchiveTreeSort } from "@/api/manager/archivetree";
import { getToken } from '@/util/auth';
import { roletree } from "@/api/system/role.js";
import logoVue from '../../page/index/logo.vue';
export default {
  components: {
    ManualSorting,
  },
  data () {
    return {
       publictreeoptions: [{//公有质检话分数
          value: '选项1',
          label: '公有质检划分树1'
          }, {
            value: '选项2',
          label: '公有质检划分树2'
          }, {
            value: '选项3',
          label: '公有质检划分树3'
        }],
      publictreevalue:'',
      testtreeoptions: [{//公有质检话分数
          value: '选项1',
          label: '公有试验划分树1'
          }, {
            value: '选项2',
          label: '公有试验划分树2'
          }, {
            value: '选项3',
          label: '公有试验划分树3'
        }],
      testtreevalue:'',
       activeName: 'second',
       activetabName:'second',
       configactiveName:'second',
       isentryTree:true,
       checkList:[],
      //#region 左侧树
      defaultExpanded: [],//默认选中的节点
      filterText: '',//筛选条件
      rulefilterText:'',
      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: '',  //显示层级

        projectType:'',//工程类型
        storageType:'',//储存类型
        expDataType:[],//文件类型
      },
      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' }],
        projectType: [{ required: true, message: '请选择工程类型', trigger: 'change' }],
        storageType: [{ required: true, message: '请选择储存类型', trigger: 'change' }],
        expDataType: [{ required: true, message: '请选择文件类型', trigger: 'change' }],
      },
      JobTypeList: [],//岗位类型枚举
      nodeTypeList: [
        {
          label: '关联电子原生文件',
          value: 1
        }, {
          label: '数字化上传文件',
          value: 2
        },
      ],//节点类型枚举
      projectTypeList:[
        {
          label: '水利水电工程',
          value: 1
        }, {
          label: '公路工程',
          value: 2
        }, {
          label: '全部',
          value: 3
        },
      ],//工程类型枚举
      storageTypeList:[
        {
          label: '普通',
          value: 1
        },{
          label: '竣工图',
          value: 2
        },{
          label: '计量',
          value: 3
        },{
          label: '质检',
          value: 4
        },{
          label: '声像',
          value: 5
        },{
          label: '隐蔽',
          value: 6
        },{
          label: '原材试验',
          value: 7
        },{
          label: '管理文件',
          value: 8
        },{
          label: '变更令',
          value: 9
        },
      ],//储存类型枚举
      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
      },{
        label: '首件资料',
        value: 5
      },{
        label: '日志文件',
        value: 6
      },
      ],//

      fileTypeList:[
        {
          label: '配合比',
          value: 1
        },
        {
          label: '原材',
          value: 2
        },{
          label: '汇总',
          value: 3
        },{
          label: '设备',
          value: 4
        },{
          label: '外委(第三方)',
          value: 5
        },
      ],

      majorDataTypeList: [],//
      displayHierarchyList: [],//
      //#endregion

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

      //#region 右侧树弹框
      dialogProps: {
        label: 'title'
      },
      dialogData: [],
      checkXuan: [],
      //#endregion
      heights: '',

      sortTag2: false,
      sortTag: false,
      sort: [],
      ruledata: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        ruledefaultProps: {
          children: 'children',
          label: 'label'
        },
        highVisible:false,
        configVisible:false,
    }
  },
  methods: {
    //切换tabs
     handleClick(tab, event) {
        console.log(tab, event);
       
     },
     handletabClick(tab, event) {
        console.log(tab, event);
     },
     confighandleClick(tab, event) {
        console.log(tab, event);
     },
     setHigh(){
        this.highVisible=true
       console.log('设置最高');
     },
     setType(){
          console.log('设置类型');
     },
    setAlone(){
      console.log('设置独立');
     },
     viewConfig(data){
       console.log(data,'查看配置');
       this.configVisible=true
     },
     handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
     handleentrybtn(){
       console.log(this.entrybtn,'entrybtn');
       this.isentryTree=false;

     },
    handlerulebtn(){
        this.isentryTree=true;
        console.log(this.rulebtn,'rulebtn');
     },
     savebtn(){
         this.isentryTree=true;
     },
    paixuMD (data) {
      this.sortTag = true
      this.sortTag2 = true
      this.curTreeData = data;
      this.findWbsTreeSameLevel(data.id)
    },
    async findWbsTreeSameLevel (parentId) {//查询当前节点的同级节点
      const { data: res } = await getSameGradeNode({ id: parentId })
      //console.log(res);
      if (res.code === 200) {
        this.sort = res.data
      }
    },
    bianhua () {
      this.sortTag2 = false
      this.$nextTick(() => {
        this.sortTag2 = true
      })
    },
    editSort () {//修改排序
      let sortArr = this.sort, newArr = []
      for (let i = 0; i < sortArr.length; i++) {
        newArr.push({
          id: sortArr[i].id,
          nodeName: sortArr[i].nodeName
        })
      }
      this.wbsTreeSort(newArr)
    },
    async wbsTreeSort (newArr) {//修改排序
      const { data: res } = await submitArchiveTreeSort(newArr)
      //console.log(res);
      if (res.code == 200) {
        this.sortTag = false
        this.sortTag2 = false
        //刷新页面
        window.location.reload()
      }
    },
    //#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
      if (this.filterText) {
        this.defaultExpanded = [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).then(()=>{
            _that.$refs.trees1.remove(node) //删除界面上的节点
          }).catch(()=>{

          })

        })
        .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.split(',')   //内业资料类型
        this.form.displayHierarchy = res.data.displayHierarchy   //显示层级
        
        this.form.projectType = res.data.projectType   //工程类型
        this.form.storageType = res.data.storageType   //储存类型

        if(res.data.expDataType){
          this.form.expDataType = res.data.expDataType.split(',')   //文件类型
        }else{
          this.form.expDataType = [];
        }
      }
    },
    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,node) {//筛选条件
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    rulefilterNode (value,data,node) {//筛选条件
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    //判断节点是否匹配
    getReturnNode(node,_array,value){
      let isPass = node.data &&  node.data.title && node.data.title.indexOf(value) !== -1;
      isPass?_array.push(isPass):'';

      //判断节点是否是父节点
      if(!isPass && node.level!=1 && node.parent){
          this.getReturnNode(node.parent,_array,value);
      }
    },

    //#endregion

    //#region 新增编辑节点弹框
    treeClose () {//弹框关闭事件
      this.form = {
        parentId: '',  //上级节点id
        nodeName: "",  //节点名称
        nodeType: '',  // 节点类型  2 = 数字化上传文件
        postType: '',  //岗位类型
        isStorageNode: '',  //是否为存储节点
        isBuiltDrawing: '',  //竣工图
        isInterfaceNode: '',  //是否接口节点
        interfaceType: '',  //选择接口类型
        associationType: '',  //关联类型
        majorDataType: [],  //内业资料类型
        displayHierarchy: '',  //显示层级

        projectType:'',//工程类型
        storageType:'',//储存类型
        expDataType:[],//文件类型
      }
      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,  //选择接口类型

                  projectType:this.form.projectType, //工程类型
                  storageType:this.form.storageType, //储存类型
                })
              } 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,  //是否接口节点

                  projectType:this.form.projectType, //工程类型
                  storageType:this.form.storageType, //储存类型
                })
              }
            } 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,  //是否为存储节点

                projectType:this.form.projectType, //工程类型
              })
            }
          } 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,  // 节点类型
                postType: this.form.postType,  //岗位类型
                associationType: this.form.associationType,  //关联类型
                majorDataType: this.form.majorDataType, //内业资料类型
                displayHierarchy: this.form.displayHierarchy,  //显示层级

                projectType:this.form.projectType, //工程类型
                storageType:this.form.storageType, //储存类型
              })
            }else if(this.form.associationType == 2){
              //试验资料
              this.baocun({
                id: this.form.id,
                parentId: this.form.parentId, //上级节点id
                nodeName: this.form.nodeName,  //节点名称
                nodeType: this.form.nodeType,  // 节点类型
                postType: this.form.postType,  //岗位类型
                associationType: this.form.associationType,  //关联类型
                
                expDataType:this.form.expDataType.join(','),//文件类型
                projectType:this.form.projectType, //工程类型
                storageType:this.form.storageType, //储存类型
              })
            }else {
              this.baocun({
                id: this.form.id,
                parentId: this.form.parentId, //上级节点id
                nodeName: this.form.nodeName,  //节点名称
                nodeType: this.form.nodeType,  // 节点类型
                postType: this.form.postType,  //岗位类型
                associationType: this.form.associationType,  //关联类型

                projectType:this.form.projectType, //工程类型
                storageType:this.form.storageType, //储存类型
              })
            }
          }
        }
      })
    },
    async 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) {
        await this.archiveTreeUpdate(da)
      } else {
        await this.archiveTreeSave(da)
      }
      if (this.filterText) {
        this.archiveTreetree4()
      }
    },
    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.trees2.filter(val);
    },
    rulefilterText(val) {
        this.$refs.ruletree.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;
}
.btnground{
  background-color: #e5e5e5;
}

.el-tree .el-tree-node__content{
   display: block !important;
 }

/deep/ .el-tree .el-tree-node__children{
   overflow: visible!important;
 }


</style>