saber/src/views/manager/projectinfo/tree.vue

<template>
  <div style="height: 100%;">
    <basic-container v-show="showType == 1" >
       <el-row class="titlerow"> 
     
          <el-col >
              <div style="position:relative" >
                <span style="float: left; margin-top: 15px;color: white;">{{projectName }}</span>
                  <!-- 同步按钮 -->
                      <el-button
                      size="medium"
                      icon="el-icon-arrow-down"
                      style="margin-right:10px"
                      @click="showSyncbtn"
                      v-show="!isshowSyncbtn"
                      >数据同步</el-button >
                      <el-button
                      size="medium"
                      icon="el-icon-arrow-up"
                      style="margin-right:10px"
                      @click="showSyncbtn"
                      v-show="isshowSyncbtn"
                      >数据同步</el-button >
                      <!-- <el-select v-model="menuvalue" placeholder="数据同步" class="selectBtn" v-if="isshowSyncbtn">
                        <el-option
                          v-for="item in menuoptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          <span style="float: left">{{ item.label }}</span>
                        </el-option>
                      </el-select> -->
                            <ul
                                v-show="isshowSyncbtn"
                                class="contextmenu selectBtn"
                              >
                                <li v-for="item in menuoptions" :key="item"  @click="menuClick($event,item,data)"   v-loading="item.load"> 
                                    {{item.label}}
                                </li>
                            </ul>
                
                    <el-button
                      size="medium"
                      icon="el-icon-s-grid"
                      @click="eleFormulaHandle"
                      v-if="leftType == 5"
                      >表单设置</el-button
                    >
                    <el-button
                      size="medium"
                      icon="el-icon-s-grid"
                      @click="eleHandle"
                      v-else
                      >元素设置</el-button
                    >
                
                    <!-- <el-button
                      class="el-btn-purple"
                      type="primary"
                      size="medium"
                      icon="el-icon-upload"
                      :loading="syncBtnLoad"
                      @click="syncInfoHandle"
                      >同步节点参数</el-button
                    > -->
                
                    <el-button
                      size="medium"
                      icon="el-icon-help"
                      @click="nodeInfoHandle"
                      >节点参数设置</el-button
                    >
                    <el-button
                    style="margin-top:10px"
                    size="medium"
                    icon="el-icon-price-tag"
                    @click="independent"
                    >独立表单库</el-button
                  >
                  <!-- <el-button
                    :loading="syncElectricLoad"
                    style="margin-top:10px"
                    class="el-btn-purple"
                    type="primary"
                    size="medium"
                    icon="el-icon-upload"
                    @click="syncElectric"
                    >同步电签默认信息</el-button
                  > -->
              </div>
          </el-col>
        </el-row>
      <el-row :gutter="20" class="h-100p" style="padding:10px">
       
        <el-col :span="10" class="h-100p">
          <div class="h-100p flex flex-d-c">
            <p style="margin-top:2px">工程节点信息</p>
            <div class="flex">
              <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText"
                @input="filterChange"
                clearable
              ></el-input>
              <!-- <el-button type="info" class="mg-l-20">导入划分</el-button> -->
            </div>
            <div class="flex1 ov-hidden">
              <el-scrollbar class="h-100p">
                <div v-loading="treeLoad">
                  <el-tree
                  v-show="!filterText"
                  class="filter-tree"
                  lazy
                  :data="treeData"
                  :load="loadNode"
                  @node-click="getNodeDetail"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  highlight-current
                  node-key="id"
                  ref="tree"
                  :default-expanded-keys="defaultExpandedKeys"
                  >
                  <span
                  class="custom-tree-node "
                  :class="data.moreShow ? 'show' : ''"
                  slot-scope="{ node, data }"
                  @mouseleave="mouseout(data)"
                >
                  <div class="pd-r-20  " >
                     {{ node.label }}
                    <div class="normal-black ">
                      <div >
                          <el-link :underline="false">
                            <i
                              class="el-icon-menu "
                              @click="showMenu($event,data, node)"
                              v-if="node.level != 1"
                            
                            ></i>
                          </el-link>
                  
                      
                    <!-- 因右键自定义菜单事件需要获取当前点击的位置，所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置 -->
                          <ul
                            v-show="menuvisible"
                            :style="{ left: menuleft + 'px', top: menutop + 'px' }"
                            class="contextmenu"
                          >
                            <li v-for="item in menusData" :key="item"  @click="menuClick($event,item,data)"> 
                                  <i :class="item.icon"></i>
                                 <el-tooltip class="item" effect="light" :content="item.content" placement="right-start">
                                  <span>{{item.label}}</span>
                                </el-tooltip>

                            </li>
                  
                          </ul>
                      </div>

                    </div>
                         
                   </div>
                </span>
              </el-tree>
              <el-tree
                v-show="filterText"
                class="filter-tree"
                :data="treeData"
                @node-click="getNodeDetail"
                :props="defaultProps"
                :expand-on-click-node="false"
                highlight-current
                node-key="id"
                :filter-node-method="filterNode"
                ref="treeall"
              >
                  <span
                    class="custom-tree-node "
                    :class="data.moreShow ? 'show' : ''"
                    slot-scope="{ node, data }"
                    @mouseleave="mouseout(data)"
                  >
                    <div class="pd-r-20  " >
                      {{ node.label }}
                      <div class="normal-black ">
                        <div >
                            <el-link :underline="false">
                              <i
                                class="el-icon-menu "
                                @click="showMenu($event,data, node)"
                                v-if="node.level != 1"
                              
                              ></i>
                            </el-link>
                        
                        <!-- 因右键自定义菜单事件需要获取当前点击的位置，所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置 -->
                              <ul
                                v-show="menuvisible"
                                :style="{ left: menuleft + 'px', top: menutop + 'px' }"
                                class="contextmenu"
                              >
                                <li v-for="item in menusData" :key="item"  @click="menuClick($event,item,data)"> 
                                      <i :class="item.icon"></i>{{item.label}}
                                </li>
                              </ul>
                        </div>
                      </div>
                          
                    </div>
                  </span>
                  </el-tree>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </el-col>
        <el-col :span="14" class="h-100p flex flex-d-c">
        
          <template v-if="leftType == 5">
            <div class="mg-b-10">节点信息</div>
            <div>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column
                  align="center"
                  prop="nodeName"
                  label="当前节点"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="nodeType"
                  :formatter="formatCat"
                  label="节点类型"
                  width="180"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="parentName"
                  label="上级节点"
                ></el-table-column>
              </el-table>
            </div>
            <div class="flex jc-sb">
              <p>
                <span>当前项目信息表</span>
                <!-- <el-button
                  @click="showFormElement"
                  type="text"
                  icon="el-icon-circle-plus-outline"
                  class="text-icon mg-l-10"
                ></el-button>
                <el-button
                  type="text"
                  icon="el-icon-document-copy"
                  class="text-icon"
                ></el-button> -->

                <el-button
                  type="text"
                  style="margin-left: 10px"
                  icon="el-icon-edit-outline"
                  class="text-icon"
                  @click="editEditElementForm()"
                ></el-button>
                <el-button
                  type="text"
                  icon="el-icon-sort"
                  class="text-icon"
                  @click="privateTableSort()"
                ></el-button>
              </p>
              <div class="mg-t-10"></div>
            </div>
            <div style="flex: 1; position: relative">
              <el-table
                :data="formData"
                border
                height="100%"
                style="width: 100%; position: absolute"
              >
                <el-table-column
                  align="center"
                  prop="tableName"
                  label="表单名称"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="elementTotal"
                  width="80"
                  label="字段总量"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="fillRate"
                  width="100"
                  label="填报率"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="tableType"
                  :formatter="formatTableType"
                  width="100"
                  label="表单类型"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="tableOwner"
                  :formatter="formatOwner"
                  label="所属方"
                ></el-table-column>
                <el-table-column label="操作" width="240">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      >预览</el-button
                    >
                    <el-button
                      size="mini"
                      type="primary"
                      v-throttle="3000"
                      v-show="scope.row.status == 0"
                      @click="hideMD(scope.row)"
                      >取消隐藏</el-button
                    >
                    <el-button
                      size="mini"
                      type="primary"
                      v-throttle="3000"
                      v-show="scope.row.status == 1"
                      @click="hideMD(scope.row)"
                      >隐藏表单</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
          <template v-if="leftType == 4">
            <div style="flex: 1; position: relative">
              <el-table
                :data="formData"
                border
                height="100%"
                style="width: 100%; position: absolute"
              >
                <el-table-column
                  align="center"
                  prop="tableName"
                  label="表单名称"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="tableType"
                  :formatter="formatTableType"
                  label="表单类型"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="fillRate"
                  label="填报率"
                ></el-table-column>
                <el-table-column
                  label="是否关联清表"
                  prop="isLinkTable"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.isLinkTable == 2">是</span>
                    <span v-else>否</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="tableOwner"
                  :formatter="formatOwner"
                  label="所属方"
                ></el-table-column>
                <el-table-column label="操作" width="450" align="center">
                  <template slot-scope="scope">
                    <el-link type="primary" @click="Associationlist(scope)"
                      >关联清表</el-link
                    >
                    <el-link
                      class="mg-l-10"
                      type="primary"
                      :disabled="scope.row.excelId == -1"
                      @click="
                        rightClick(
                          scope.row.pkeyId,
                          scope.row.excelId,
                          scope.row.id,
                          scope.row.initTableName,
                          scope.row.initTableId
                        )
                      "
                      >编辑元素</el-link
                    >
                    <el-link
                      class="mg-l-10"
                      type="primary"
                      :disabled="scope.row.excelId == -1"
                      @click="adjustExcel(scope.row.pkeyId, scope.row.excelId)"
                      >调整表单</el-link
                    >
                    <el-link
                      class="mg-l-10"
                      type="primary"
                      @click="handleEditFormula(scope.$index, scope.row)"
                      >编辑元素公式.</el-link
                    >
                    <el-button
                      class="mg-l-10"
                      type="text"
                      :loading="handlesyncLoad"
                      @click="handlesync(scope.$index, scope.row)"
                      >表单同步</el-button>
                    <el-link
                      class="mg-l-10"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除表单</el-link
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-col>
      </el-row>
    </basic-container>
    <el-row class="h-100p" v-show="showType == 2">
      <el-col :span="6" class="h-100p">
        <basic-container>
          <el-scrollbar class="h-100p">
            <el-tree
              class="filter-tree"
              lazy
              :data="typeTreeData"
              :load="typeTreeLoadNode"
              @node-click="getTypeTreeDetail"
              :props="defaultProps"
              :expand-on-click-node="false"
              highlight-current
              node-key="id"
            >
            </el-tree>
          </el-scrollbar>
        </basic-container>
      </el-col>
      <el-col :span="18" class="h-100p">
        <basic-container>
          <div class="flex h-100p flex-d-c">
            <div style="flex: 1; position: relative">
              <el-table
                :data="formData"
                border
                height="100%"
                style="width: 100%; position: absolute"
              >
                <el-table-column
                  align="center"
                  prop="tableName"
                  label="表单名称"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="tableType"
                  :formatter="formatTableType"
                  label="表单类型"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="fillRate"
                  label="填报率"
                ></el-table-column>
                <el-table-column
                  label="是否关联清表"
                  prop="isLinkTable"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.isLinkTable == 2">是</span>
                    <span v-else>否</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="tableOwner"
                  :formatter="formatOwner"
                  label="所属方"
                ></el-table-column>
                <el-table-column label="操作"  align="center">
                  <template slot-scope="scope">
                    <el-link type="primary" @click="Associationlist(scope)"
                      >关联清表</el-link
                    >
                    <el-link
                      class="mg-l-10"
                      type="primary"
                      :disabled="scope.row.excelId == -1"
                      @click="
                        rightClick(
                          scope.row.pkeyId,
                          scope.row.excelId,
                          scope.row.id,
                          scope.row.initTableName,
                          scope.row.initTableId
                        )
                      "
                      >编辑元素</el-link
                    >
                    <el-link
                      class="mg-l-10"
                      type="primary"
                      :disabled="scope.row.excelId == -1"
                      @click="adjustExcel(scope.row.pkeyId, scope.row.excelId)"
                      >调整表单</el-link
                    >
                    <el-link
                      class="mg-l-10"
                      type="primary"
                      @click="handleEditFormula(scope.$index, scope.row)"
                      >编辑元素公式</el-link
                    >
               
                    <el-link
                      class="mg-l-10"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除表单</el-link
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="mg-t-10 flex jc-sb">
              <div></div>
              <el-button size="medium" @click="showType = 1"
                >返回WBS树</el-button
              >
            </div>
          </div>
        </basic-container>
      </el-col>
    </el-row>

    <!-- 编辑元素表单信息 -->
    <el-dialog
      title="编辑元素表单信息"
      :visible.sync="editElementFormTag"
      width="60%"
      :modal-append-to-body="false"
    >
      <div>
        <el-table :data="formDatass" border style="width: 100%">
          <el-table-column prop="tableName" label="表名">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.tableName"
                placeholder="请输入表名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="tableType" label="表类型">
            <template slot-scope="scope">
              <el-select v-model="scope.row.tableType" placeholder="请选择">
                <el-option
                  v-for="(item, key) in tableTypelist"
                  :key="key"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="tableOwner" label="所属方">
            <template slot-scope="scope">
              <el-select v-model="scope.row.tableOwner" placeholder="请选择">
                <el-option
                  v-for="(item, key) in ownerTypeList"
                  :key="key"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="fillRate" label="填报率">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fillRate"
                placeholder="请输入填报率"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editElementFormTag = false">取 消</el-button>
        <el-button type="primary" @click="editeditElementFormMF()"  :loading="editeditElementFormMFLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 调整表单模板 -->
    <div v-if="excelHtml" class="excelHtml">
      <dynamicExcel
        @remove="removeExcel"
        v-if="excelHtml"
        :pkeyId="GLExcelFrom.id"
      />
    </div>

    <!-- 私有wbs树排序弹框 -->
    <!-- <el-dialog
      title="调整排序"
      :visible.sync="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="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()" v-loading="sureSortload">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 元素表排序 -->
    <el-dialog
      title="调整排序"
      :visible="excelSortTag"
      width="50%"
      append-to-body
    >
      <ManualSorting
        v-if="excelSortTag2"
        @bianhua="bianhua2()"
        :sort="tableSortList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="excelSortTag = false">取 消</el-button>
        <el-button type="primary" @click="editPrivateSort()"  v-loading="surePrivateSortload">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 关联清表 -->
    <el-dialog
      title="关联清表"
      class="excelBox"
      :visible.sync="GLExcel"
      width="500px"
      modal-append-to-body
      append-to-body
      @close="GLExcelMD"
    >
      <div>
        <el-select
          style="width: 400px"
          v-model="GLExcelFrom.name"
          placeholder="请选择"
          @change="changetherr()"
        >
          <el-option
            v-for="(item, key) in GLExcelData"
            :key="key"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-scrollbar style="margin-top: 20px; height: 50vh">
          <el-input
            style="width: 400px"
            v-model.trim="GLExcelFrom.search"
            placeholder="请输入需要选择的内容"
          ></el-input>
          <el-tree
            :filter-node-method="filterNode222"
            ref="tree"
            class="filter-tree"
            style="margin-top: 10px"
            :props="GLExcelProps"
            :data="exceldata"
            node-key="id"
            accordion
            show-checkbox
            @check="checkchange"
            v-loading="GLExcelLoading"
          >
          </el-tree>
        </el-scrollbar>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
        style="display: flex; justify-content: center; align-items: center"
      >
        <el-button @click="GLExcelMD()">取 消</el-button>
        <el-button
          style="margin-left: 30px"
          type="primary"
          v-throttle="2000"
          @click="saveLinkTab()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
<!-- 节点详情 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%"
      append-to-body
      :close-on-click-modal="false"
      @closed="saveNodeLoading = false"
    >
      <el-form
        ref="nodeDetail"
        :model="nodeDetail"
        :rules="rules"
        label-width="140px"
      >
        <el-form-item label="节点名称" prop="nodeName">
          <div class="flex">
            <el-input v-model="nodeDetail.nodeName"></el-input>
            <el-button class="mg-l-10" type="primary" @click="aliasShow"
              >添加别名</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="上级节点">
          <el-input v-model="nodeDetail.parentName"  disabled></el-input>
        </el-form-item>
        <el-form-item label="节点类型" prop="nodeType">
          <el-select
            v-model="nodeDetail.nodeType"
          
            placeholder="请选择"
            class="w-100p"
            @change="nodeTypeChange"
          >
            <el-option
              v-for="item in nodeTypelist"
              :key="item.id"
              :label="item.dictValue"
              :value="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="划分编号" v-if="wbsType !== 2">
          <el-input v-model="nodeDetail.partitionCode"></el-input>
        </el-form-item>
        <el-form-item label="唯一编码">
          <el-input v-model="nodeDetail.uniqueCode"></el-input>
        </el-form-item>
        <template v-if="nodeDetail.nodeType == 6">
          <el-form-item label="是否有混凝土">
            <el-radio-group v-model="nodeDetail.isConcrete" size="small">
              <el-radio :label="0" border>无</el-radio>
              <el-radio :label="1" border>有</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否试验节点">
            <el-radio-group v-model="nodeDetail.isExpernode" size="small">
              <el-radio :label="0" border>否</el-radio>
              <el-radio :label="1" border>是</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
        <el-form-item
          label="内业资料类型"
          prop="majorDataType"
          v-if="wbsType !== 2"
        >
          <el-select
            v-model="nodeDetail.majorDataType"
           
            placeholder="请选择"
            class="w-100p"
          >
            <el-option
              v-for="item in majorDataTypeList"
              :key="item.id"
              :label="item.dictValue"
              :value="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="勾选相关联试验"
          prop="mixRatioTestIds"
          v-if="wbsType === 2 && nodeDetail.nodeType === 53"
        >
          <div
            style="position: relative; height: 300px; border: 1px solid #dddfe6"
          >
            <el-scrollbar class="h-100p">
              <div v-loading="testTreeLoad">
                <el-tree
                  class="filter-tree"
                  :data="testTreeData"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  highlight-current
                  node-key="id"
                  ref="treeall"
                  show-checkbox
                  :default-checked-keys="mixRatioTestIds"
                  @check="TestTreeCheckChange"
                />
              </div>
            </el-scrollbar>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveNode" :loading="saveNodeLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
<!-- 创建新的元素表 -->
    <el-dialog
      title="创建新的元素表"
      :visible.sync="eleVisible"
      width="80%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="eleDialog"
        :model="eleForm"
        :rules="eleRules"
        label-width="110px"
      >
        <el-form-item label="表名" prop="nodeName">
          <el-input v-model="eleForm.nodeName"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="表类型" prop="tableType">
              <el-select
                v-model="eleForm.tableType"
                placeholder="请选择"
                class="w-100p"
              >
                <el-option
                  v-for="item in tableTypelist"
                  :key="item.id"
                  :label="item.dictValue"
                  :value="item.dictKey"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属方" prop="tableOwner">
              <el-select
                v-model="eleForm.tableOwner"
                placeholder="请选择"
                class="w-100p"
              >
                <el-option
                  v-for="item in ownerTypeList"
                  :key="item.id"
                  :label="item.dictValue"
                  :value="item.dictKey"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="flex jc-sb">
        <div></div>
        <div>
          <el-link type="primary" @click="importVisible = true"
            >快捷导入</el-link
          >
          <el-link type="primary" class="mg-l-20" @click="downloadTmp"
            >下载导入模版</el-link
          >
        </div>
      </div>
      <div class="border-grey">
        <p class="font-c-warning">编辑元素信息（请谨慎操作）</p>
        <el-table
          :data="eleForm.elementList"
          border
          style="width: 100%"
          height="400px"
        >
          <el-table-column
            align="center"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column align="center" prop="eName" label="字段名称">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.eName"
                size="small"
                placeholder="请输入内容"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="eType"
            label="数据类型"
            width="120"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.eType"
                size="small"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in dataTypeList"
                  :key="item.id"
                  :label="item.dictValue"
                  :value="item.dictKey"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="eLength"
            label="长度"
            width="120"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.eLength"
                size="small"
                placeholder="请输入内容"
                :disabled="scope.row.eType == 4"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="eAllowDeviation"
            label="允许偏差值"
          >
            <template slot-scope="scope">
              <div class="flex">
                <el-select
                  v-model="scope.row.allow"
                  size="small"
                  placeholder="请选择"
                  style="width: 120px"
                >
                  <el-option :key="1" label="≥" value="≥"></el-option>
                  <el-option :key="2" label="≤" value="≤"></el-option>
                  <el-option :key="3" label="±" value="±"></el-option>
                  <el-option :key="4" label="【】" value="【】"></el-option>
                </el-select>
                <el-input
                  v-model="scope.row.deviation"
                  size="small"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="eInspectionMethod"
            label="检查方法和频率"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.eInspectionMethod"
                size="small"
                placeholder="请输入内容"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="80">
            <template slot="header">
              <el-button
                @click="addEleRow(eleForm.elementList)"
                type="text"
                icon="el-icon-circle-plus-outline"
                class="text-icon"
              ></el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                icon="el-icon-remove-outline"
                type="text"
                @click="delEleRow(scope.$index, eleForm.elementList)"
                class="text-icon text-icon-danger"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="eleVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveFormAndElementHandle"
          >保 存</el-button
        >
      </span>
    </el-dialog>
<!-- 模板导入 -->
    <el-dialog
      title="模版导入"
      :visible.sync="importVisible"
      width="50%"
      append-to-body
      :close-on-click-modal="false"
    >
      <p>
        提示：必须按照系统要求的模版格式上传，否则系统识别无效
        <el-link type="primary" @click="downloadTmp">下载导入模版</el-link>
      </p>
      <div>
        <el-button size="small" type="primary" @click="fileClick2"
          >本地上传</el-button
        >
        <input
          @change="tmpImport"
          type="file"
          hidden
          ref="file2"
          accept=".xls, .xlsx"
        />
      </div>
      <el-table :data="tempList" border style="width: 100%">
        <el-table-column align="center" prop="eName" label="字段信息">
        </el-table-column>
        <el-table-column
          align="center"
          prop="eType"
          label="数据类型"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center" prop="eLength" label="长度" width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="eAllowDeviation"
          label="允许偏差值"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="eInspectionMethod"
          label="检查方法和频率"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importVisible = false">取 消</el-button>
        <el-button type="primary" @click="importHandle">确 定</el-button>
      </span>
    </el-dialog>
<!-- 编辑元素 -->
    <el-dialog
      :title="(curEleTable.tableName ? curEleTable.tableName : '') + ''"
      :visible.sync="editEleVisible"
      width="80%"
      append-to-body
      :close-on-click-modal="false"
    >
      <!-- <p class="font-c-warning">编辑元素信息（请谨慎操作）</p> -->
      <el-table :data="editEleList" border style="width: 100%" height="400px">
        <el-table-column
          align="center"
          type="index"
          width="50"
        ></el-table-column>
        <el-table-column align="center" prop="eName" label="字段信息">
        </el-table-column>
        <el-table-column
          align="center"
          prop="eType"
          label="数据类型"
          width="120"
          :formatter="eTypeFormatter"
        >
        </el-table-column>
        <el-table-column align="center" prop="eLength" label="长度" width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="eAllowDeviation"
          label="允许偏差值"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="eInspectionMethod"
          label="检查方法和频率"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editEleVisible = false">取 消</el-button>
        <!-- <el-button
          type="primary"
          @click="saveEles"
        >确 定</el-button> -->
      </span>
    </el-dialog>
<!-- 元素公式 -->
    <el-dialog
    :title="(curEleTable.tableName?curEleTable.tableName:'')+'  元素公式..'"
     
      :visible.sync="editEleFormulaVisible"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="flex mg-b-10">
        <el-input
          v-model="formulaInput"
          placeholder="请输入名称"
          size="samll"
          clearable
          @clear="searchFormulaName"
        ></el-input>
        <el-button type="info" class="mg-l-10" @click="searchFormulaName"
          >搜索</el-button
        >
      </div>
      <el-table
        :data="editEleListFilter"
        border
        style="width: 100%"
        height="400px"
      >
        <el-table-column align="center" prop="eName" label="字段信息">
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-link
              :type="scope.row.globalFormula == 1 ? 'warning' : 'primary'"
              @click="toFormulaEdit(scope.row,10)"
              >全局公式</el-link
            >
            <el-link
              class="mg-l-10"
              :type="scope.row.isSaveFormula == 1 ? 'warning' : 'primary'"
              @click="toFormulaEdit(scope.row,20)"
              >节点公式</el-link
            >
            <!-- <el-link
              class="mg-l-10"
              type="danger"
              @click="delEleRowHandle(scope.$index,editEleListFilter)"
            >删除</el-link> -->
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
<!-- 导入划分 -->
    <el-dialog
      title="导入划分"
      :visible.sync="importTemplateVisible"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div v-loading="importLoading">
        <div>
          <el-link type="primary" @click="handleDownload">下载导入模版</el-link>
        </div>
        <div class="mg-t-20">
          <el-button type="primary" @click="fileClick">选择文件</el-button>
          <span v-if="upFile" class="mg-l-20">{{ upFile.name }}</span>
          <input
            @change="fileChange"
            type="file"
            hidden
            ref="file"
            accept=".xls, .xlsx"
          />
        </div>
        <div v-if="!upFile">当前还未选择文件，请选择需要导入的文件</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importTemplateVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="importTemplateHandle"
          :loading="importLoading"
          >导 入</el-button
        >
      </span>
    </el-dialog>
<!-- 节点参数 -->
    <el-dialog
      title="节点参数"
      :visible.sync="nodeInfoVisible"
      width="800px"
      append-to-body
      class="jiedian"
      :close-on-click-modal="false"
      :show-close="false"
      @close="closenodeInfoVisible"
    >
      <div>
        <el-button
          type="text"
          icon="el-icon-s-operation"
          class="right-btn"
          @click="setNodeParameters()"
        ></el-button>
        <div class="flexEnd">
          <i
            class="el-icon-circle-plus marbottom10"
            @click="addNodeInfoTable()"
            style="font-size: 24px; color: rgb(37, 193, 99); cursor: pointer"
          ></i>
             <i
            class="el-icon-refresh-right marbottom10"
            @click="refreshnfoTable()"
            style="font-size: 24px; color: rgb(37, 193, 99); cursor: pointer"
          ></i>
        </div>
        <el-table :data="nodeInfoTable" border style="width: 100%" height="400" v-loading="nodeInfoTableLoad">
          <el-table-column align="center" prop="name" label="参数名称">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.k"
                placeholder="请选择"
                class="w-100p"
              
              >
                <el-option
                  v-for="item in namelist"
                  :key="item.k"
                  :label="item.name"
                  :value="item.k"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="value" label="参数值设置">
            <template slot-scope="scope">
              <el-input v-model="scope.row.v"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="describe" label="描述">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                class="text-icon-primary"
                @click="linkEle(scope.row)"
              >关联元素</el-button>
              <el-button
                type="text"
                size="small"
                class="text-icon-danger"
                @click="delNodeInfoss(scope.$index,scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="nodeInfoVisible = false">取 消</el-button>
        <el-button type="primary" @click="nodeInfoSave()"   :loading="nodeInfoSaveload">保 存</el-button>
      </span>
    </el-dialog>

    <!-- 设置参数名称 -->
    <el-dialog
      title="设置参数名称"
      :visible.sync="infoNameVisible"
      width="800px"
      append-to-body
      class="jiedian"
      :close-on-click-modal="false"
   
    >
      <div>
        <div class="flexEnd">
          <i
            class="el-icon-circle-plus marbottom10"
            @click="setParameterName()"
            style="font-size: 24px; color: rgb(37, 193, 99); cursor: pointer"
          ></i>
        </div>
        <el-table :data="namelists" border style="width: 100%" height="400">
          <el-table-column align="center" prop="name" label="参数名称">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="key" label="参数值KEY">
            <template slot-scope="scope">
              <el-input v-model="scope.row.k"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="describe" label="描述">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                class="text-icon-danger"
                @click="delNodeInfo(scope.$index,scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addParameterName()">保 存</el-button>
        <el-button @click="closeParameter()">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="别名"
      :visible.sync="aliasVisible"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div>
        <div class="flex">
          <el-input
            v-model="aliasInput"
            placeholder="请输入节点别名"
          ></el-input>
          <el-button class="mg-l-20" type="primary" @click="addAlias"
            >添加</el-button
          >
        </div>
        <div class="flex" style="flex-wrap: wrap">
          <div class="mg-t-10" v-for="(tag, index) in aliasArr" :key="index">
            <el-tag closable @close="delAlias(index)">
              {{ tag }}
            </el-tag>
            <span v-if="index != aliasArr.length - 1">、</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="aliasVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAliasHandle">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 节点公式 -->
    <el-dialog
     
      :title="(curEleTable.tableName?curEleTable.tableName:'')+'  元素公式2'"
      :visible.sync="formulaCompVisible"
      fullscreen
      append-to-body
      class="full-dialog"
      @close="closeformulaComp"
    >
      <FormulaEdit
        :fromcurNode="curTreeData"
        :projectid="projectid" 
        :wbsid="id"
        :nodeid="curTreeData.id"
        :eleid="formulaCurRow.id"
        :globaltype="formulaCurRow.globaltype"
        :iswbstype="0"
        @hideDialog="formulaCompVisible = false"
        v-if="formulaCompVisible"
      ></FormulaEdit>
    </el-dialog>
      <!-- 全局公式 -->
    <el-dialog title="" :visible.sync="formulaCompVisible1" fullscreen append-to-body class="full-dialog"  @close="closeformulaComp1">
      <FormulaEditone  :wbsid="id" :nodeid="curTreeData.id" :eleid="formulaCurRow.id"   :elementType="formulaCurRow.elementType"  :projectid="projectid"  :tableType="istableType"
      :globaltype="formulaCurRow.globaltype" @hideDialog="formulaCompVisible1 = false"  :fromcurNode="curEleTable"   :iswbstype="0"
       v-if="formulaCompVisible1">
       </FormulaEditone>
    </el-dialog>

    <!-- 编辑元素 -->
    <el-dialog
      title="　"
      :visible.sync="editElementVisible"
      fullscreen
      append-to-body
      class="full-dialog"
    >
      <EditElement
        :editElementQuery="curTreeData"
        :pkeyId="editElementQuery.pkeyId"
        :excelId="editElementQuery.excelId"
        :id="editElementQuery.id"
        :initTableName="editElementQuery.initTableName"
        :pid="editElementQuery.pid"
        :wbsid="editElementQuery.wbsid"
        :initTableId="editElementQuery.initTableId"
        :nodeid="editElementQuery.nodeid"
        @hideDialog="editElementVisible = false"
        v-if="editElementVisible"
      ></EditElement>
    </el-dialog>


        <el-dialog
      title="节点参数设置-关联元素"
      :visible.sync="linkEleVisible"
      width="800px"
      append-to-body
      class="jiedian"
      :close-on-click-modal="false"
    >
      <div>
        <el-table
          :data="linkEleTableList"
          border
          style="width: 100%"
          height="400"
        >
          <el-table-column
            align="center"
            prop="tableName"
            label="元素表名"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="elementName"
            label="关联元素字段"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              <el-button v-if="!scope.row.mappingId"
                type="text"
                size="small"
                class="text-icon-primary"
                @click="tolinkEle(scope.row)"
              >选择元素</el-button>
              <el-button v-if="!!scope.row.mappingId"
                type="text"
                size="small"
                class="text-icon-danger"
                @click="delLink(scope.row)"
              >删除关联</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <!-- <el-button @click="saveLinks">保 存</el-button> -->
        <el-button @click="linkEleVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

        <el-dialog
      title="选择关联元素"
      :visible.sync="linkCheckVisible"
      width="600px"
      append-to-body
      class="jiedian"
      :close-on-click-modal="false"
    >
      <div>
        <div class="flex mg-b-20">
          <el-input v-model="linkEleKey" placeholder="请输入元素关键字搜索"></el-input>
          <el-link class="mg-l-20" :underline="false">
            <i class="el-icon-search" style="font-size:20px" @click="searchEle"></i>
          </el-link>
        </div>
        <el-table
          :data="linkEleList"
          border
          style="width: 100%"
          height="400"
        >
          <el-table-column
            align="center"
            prop="eName"
            label="元素名"
          >
          </el-table-column>

          <el-table-column
            label="操作"
            width="55">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.checked" @change="value => linkEleCheck(value,scope.$index)"></el-checkbox>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="saveLinkEle">保 存</el-button>
        <el-button @click="linkCheckVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import ManualSorting from "@/components/WbsTree/ManualSorting";
import dynamicExcel from "./treeTemplate/dynamicExcel.vue";
import FormulaEdit from "@/views/formula/edit.vue";
import FormulaEditone from '@/views/formula/edit1.vue'
import EditElement from "@/views/manager/projectinfo/editElement/editElement.vue";
import {
  saveFormAndElement,
  selectFormElements,
  importWbsTree,
  findWbsTreePrivateSameLevel,
  wbsTreePrivateSort,
  parameters,
  saveOrUpdateBatch,
  keymap,
  updateBatchNodeTableInfo2,
  updateStatus,
  getParamElements,
  specifiedParamElements,
  delParamElements, selectPrivateFormElements,syncCurrentFormInProject
} from "@/api/manager/wbstree";
import {
  saveElement,
  remove as removeElement,
  updateBatchElements,
  getTemplate,
  importWbsElement,
} from "@/api/manager/wbsformelement";
import {
  getLazytree,
  getDetail,
  update,
  findNodeTableByCondition as selectByNodeTable,
  removeTableByCondition as removeTableById,
  removePrivateTreeNode,
  wbsTreePrivateTableSort,
  privateSubmitFullName,
  syncNodeParam,
  syncProjecteVisa,
  syncNodeTable,
  syncNodeinfo,
  tabTypeLazyTree,
} from "@/api/manager/wbsprivate";
import { findProjectTree as getAlltree } from "@/api/manager/projectinfo";
import { findProjectTreeTrial as getAlltreeTrial } from "@/api/manager/projectinfo";
import {refrehPram} from "@/api/manager/wbstree"
import {getTableElments} from "@/api/manager/wbstree";
import { getList as getAttchFromOriginalName } from "@/api/resource/attach";
import { getDictionary } from "@/api/system/dict";
import { mapGetters } from "vuex";
import {
  getList,
  tabLazytreeAll,
  saveLinkTab,
  getExcelHtml,
} from "@/api/exctab/excelmodel";
import { getStore, setStore } from "@/util/store";
import { log } from '@antv/g2plot/lib/utils';
export default {
  data() {
    var checkMajorDataType = (rule, value, callback) => {
      //console.log(this.nodeDetail.nodeType)
      //console.log(this.nodeDetail.majorDataType)
      if (this.nodeDetail.nodeType == 6) {
        if (!this.nodeDetail.majorDataType) {
          callback(new Error("工序节点必须选择内业资料类型"));
        }
      }

      callback();
    };

    return {
      fromcurNode:{},
      formDatass: [],
      editElementFormTag: false,
      editeditElementFormMFLoading:false,
      jiedianId: "",
      //#region
      sortTag: false,
      sortTag2: false,
      sureSortload:false,
      surePrivateSortload:false,
 
      sort:[],
      //#endregion

      //#region 关联清表
      loading: false,
      GLExcel: false,
      GLExcelFrom: {
        id: "",
        name: "",
        search: "", //搜素框舒服的值
        ids: "",
        excelId: "",
        initTableName: "",
        initTableId:""
      },
      GLExcelData: [], //
      GLExcelProps: {
        label: "name",
        children: "children",
        disabled: "hasChildren",
        isLeaf: function (data) {
          let tag = false;
          if (!data.hasChildren) {
            tag = true;
          }
          if (data.isExistForm == 1) {
            tag = true;
          }
          return tag;
        },
      },
      exceldata: [], //清表模板
      GLExcelLoading: false,
      //#endregion

      //#region 调整表单
      adjustmentExcel: "",
      excelHtml: false,
      //#endregion

      //#region
      id: "",
      projectid: "",
      filterText: "",
      treeData: [],
      treeLoad: false,
      menuShow: false,
      defaultProps: {
        children: "children",
        label: "title",
        isLeaf: function (data) {
          //console.log(data, !data.hasChildren, data.isExistForm);
          let tag = false;
          if (!data.hasChildren) {
            tag = true;
          }
          if (data.isExistForm == 1) {
            tag = true;
          }
          if (data.nodeType >= 6 && data.nodeType <= 13) {
            tag = true;
          }
          //中间交工。开工报告、质量评定）
          if (
            data.majorDataType == 1 ||
            data.majorDataType == 2 ||
            data.majorDataType == 3
          ) {
            tag = true;
          }
          return tag;
          // return !data.hasChildren || (data.isExistForm == 1);
        },
      },
      leftType: 5,
      curTreeData: {},
      curTreeNode: {},
      tableData: [],
      nodeDetail: {},
      formData: [],
      editType: 1,

      dialogVisible: false,
      saveNodeLoading: false,
      nodeTypelist: [],
      majorDataTypeList: [],
      rules: {
        nodeName: [
          { required: true, message: "请输入节点名称", trigger: "blur" },
        ],
        nodeType: [
          { required: true, message: "请选择节点类型", trigger: "change" },
        ],
        majorDataType: [{ validator: checkMajorDataType, trigger: "change" }],
      },

      eleVisible: false,
      tableTypelist: [],
      dataTypeList: [],
      ownerTypeList: [],
      eleForm: {
        elementList: [],
      },
      eleRules: {
        nodeName: [
          { required: true, message: "请输入表名称", trigger: "blur" },
        ],
        tableType: [
          { required: true, message: "请选择表类型", trigger: "change" },
        ],
        tableOwner: [
          { required: true, message: "请选择所属方", trigger: "change" },
        ],
      },

      importVisible: false,
      tempList: [],

      curEleTable: {},
      istableType:true,
      editEleVisible: false,
      editEleList: [],
      eleReg: /(≥|≤|±|【】)?([^≥≤±【】]*)/,

      editEleFormulaVisible: false,
      formulaInput: "",
      editEleListFilter: [],
      editEleListAll: [],

      importTemplateVisible: false,
      fileUrl: "",
      upFile: null,
      importLoading: false,

      nodeInfoVisible: false,
      nodeInfoTable: [],
      nodeInfoTableLoad:false,
      namelist: [],
      namelists: [],
      delids:[],

      infoNameVisible: false,

      excelSortTag: false,
      excelSortTag2: false,
      tableSortList: [],
      //#endregion

      defaultExpandedKeys: [],
      expandName: this.$route.fullPath,

      aliasVisible: false, //别名
      aliasInput: "",
      aliasArr: [],

      formulaCompVisible: false, //公式弹框
      formulaCompVisible1:false,
      formulaCurRow: {}, //当前元素

      editElementVisible: false, //编辑元素弹框
      editElementQuery: {
        pkeyId: "",
        excelId: "",
        id: "",
        initTableName: "",
        initTableId:"",
        pid: "",
        wbsid: "",
        nodeid: ""
      }, //传参

      syncBtnLoad: false,
      syncElectricLoad:false,

      showType: 1,
      typeTreeData: [],
      testTreeLoad: false,
      testTreeData: [],
      mixRatioTestIds: [],

      //节点参数，关联元素
      curParam:{},//当前节点参数
      linkEleVisible:false,
      linkEleTableList:[],//元素表数组
      curLinkEleTable:{},//当前元素表
      linkCheckVisible:false,//关联弹框
      linkEleList:[],//元素数组
      linkEleKey:'',//搜索关键字
      menusData:[
        // {icon: 'el-icon-s-promotion', label: '新增节点', key: "add"},
        {icon: 'el-icon-s-promotion', label: '编辑节点', key: "edit",content:'编辑节点'},
        {icon: 'el-icon-upload', label: '同步元素表单', key: "sync1",content:'同步元素表单'},
        {icon: 'el-icon-s-promotion', label: '同步节点基础信息及表单URL', key: "sync2",content:'同步节点的基础信息、类型名称、表单url等信息'},
        {icon: 'el-icon-sort', label: '调整排序', key: "sort",content:'调整排序'},
        {icon: 'el-icon-s-promotion', label: '删除节点', key: "del",content:'删除节点'},
      
      ],//树组件操作菜单
      menuvisible:false,
      menuleft:20,
      menutop:0,
      //同步菜单按钮
      menuoptions:[
        {
          value: 'jdSync',
          label: '节点参数同步',
          load:false,
        },  {
          value: 'dqSync',
          label: '电签同步',
          load:false,
        },
        {
          value: 'gsSync',
          label: '公式同步',
          load:false,
        },
      ],
      menuvalue: '',
      isshowSyncbtn:false,
      projectName:'',
      nodeInfoSaveload:false,
      handlesyncLoad:false//表单同步
      
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),

    // dialogTitle: function () {
    //   let text = "节点";
    //   if (this.leftType == 1) {
    //     text = "新增" + text;
    //   } else if (this.leftType == 2) {
    //     text = "编辑" + text;
    //   }
    //   return text;
    // },
  },
  created() {
    this.init();
    //console.log(this.userInfo)
  },
  methods: {
    //#region
    init() {
      //this.id = this.$route.query.wbsid;
      //this.projectid = this.$route.query.pid;
      const { wbsid, pid, type } = this.$route.query;
      this.id = wbsid;
      this.projectid = pid;
      this.wbsType = type ? Number(type) : 1;

      this.getNodeTypelist();
      this.getTableTypelist();
      this.getDataTypelist();
      this.getOwnerTypelist();

      this.defaultExpandedKeys = getStore({ name: this.expandName });
      this.projectName=this.$route.query.projectName
    
      
    },
    loadNode(node, resolve) {
      let pid = 0;
      if (node.level != 0) {
        pid = node.data.id;
      }
      const type = this.wbsType;
      getLazytree(this.id, pid, this.userInfo.tenant_id, this.projectid, {
        wbsType: type,
      }).then((res) => {
        let arr = [];
        if (Array.isArray(res.data.data)) {
          arr = res.data.data;
        }

        return resolve(arr);
      });
    },
    getNodeDetail(data, node) {
      console.log('getNodeDetail',data);
      let parentName = "";
      if (node.parent.data) {
        parentName = node.parent.data.title;
      }
      this.curTreeData = data;
      this.curTreeNode = node;
      this.curTreeData.parentName = parentName;
      getDetail(data.id, this.id, this.projectid).then((res) => {
        res.data.data.parentName = parentName;
        this.tableData = [res.data.data];
        this.nodeDetail = Object.assign({}, res.data.data);
      });
      this.updateNodeTable();
      this.nodeTypeChange(53)

      //获取节点展开路径
      this.getExpandedKeys(node);
    },
    saveNode() {
      const type = this.wbsType;
      this.$refs["nodeDetail"].validate((valid) => {
        if (valid) {
          const { mixRatioTestIds, nodeType } = this.nodeDetail;
          if (type === 2 && nodeType === 53) {
            if (mixRatioTestIds) {
              if (this.editType == 1) {
                this.addNode();
              } else if (this.editType == 2) {
                this.updateNode();
              }
            } else {
              this.$message({
                type: "error",
                message: "请先选择节点",
              });
              return false;
            }
          } else {
            if (this.editType == 1) {
              this.addNode();
            } else if (this.editType == 2) {
              this.updateNode();
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addNode() {
      this.saveNodeLoading = true;
      update(this.nodeDetail).then(() => {
        this.updateTreeNewNode();
        this.dialogVisible = false;
        this.$message({
          type: "success",
          message: "新增成功!",
        });
      });
    },
    updateNode() {
      update(this.nodeDetail).then(() => {
        let node = this.tableData[0];
        node.nodeName = this.nodeDetail.nodeName;
        node.nodeType = this.nodeDetail.nodeType;
        this.curTreeData.title = this.nodeDetail.nodeName;
        this.dialogVisible = false;
        this.$message({
          type: "success",
          message: "修改成功!",
        });
      });
    },
    toSplit(val) {
      return val ? String(val).split(",") : "";
    },
    setLeftType(type, data, node) {
      this.jiedianId = data.id;
      if (type == 4 || type == 5) {
        this.leftType = type;
      }
      this.curTreeData = data;
      this.curTreeNode = node;
      this.$refs.tree.setCurrentKey(data.id);

      if (type == 1 || type == 2) {
        this.getMajorDataTypeList();
        this.dialogVisible = true;
        this.editType = type;
      }

      getDetail(data.id, this.id, this.projectid).then((res) => {
        let parentName = "";
        if (node.parent.data) {
          parentName = node.parent.data.title;
        }
        res.data.data.parentName = parentName;
        this.tableData = [res.data.data];
        if (type == 1) {
          this.nodeDetail = {
            parentId: res.data.data.id,
            parentName: parentName,
            projectId: res.data.data.projectId,
          };
        } else {
          this.nodeDetail = Object.assign({}, res.data.data);
        
          this.mixRatioTestIds = this.toSplit(res.data.data.mixRatioTestIds);
        }
        this.nodeDetail.type = 1; //	'1'节点 '2'表单
        this.nodeDetail.wbsId = this.id;
        this.nodeDetail.tenantId = this.userInfo.tenant_id;
      });
      if (this.leftType == 4) {
        selectByNodeTable(data.id, this.projectid, this.id).then((res) => {
          if (res.data.data.length) {
            this.formData = res.data.data;
            this.formData.forEach((ele)=>{
              ele.handlesyncLoad=false
            })
          } else {
            this.formData = [];
          }
        });
      }

      //获取节点展开路径
      this.getExpandedKeys(node);
    },

    showFormElement() {
      if (!this.nodeDetail.id) {
        this.$message({
          type: "warning",
          message: "请先选择在哪个节点下创建表",
        });
        return;
      }
      this.eleVisible = true;
    },

    addEleRow(list) {
      list.push({});
    },
    delEleRow(index, list) {
      list.splice(index, 1);
    },
    saveFormAndElementHandle() {
      this.$refs["eleDialog"].validate((valid) => {
        if (valid) {
          this.eleForm.wbsId = this.id;
          this.eleForm.tenantId = this.userInfo.tenant_id;
          this.eleForm.nodeType = -1;
          this.eleForm.type = 2; //	'1'节点 '2'表单
          this.eleForm.parentId = this.nodeDetail.id;
          this.eleForm.elementList.forEach((element) => {
            element.eAllowDeviation =
              (element.allow ? element.allow : "") +
              (element.deviation ? element.deviation : "");
            if (element.eType == 4) {
              element.eLength = 0;
            }
          });
          saveFormAndElement(this.eleForm).then(() => {
            //console.log(res)
            this.updateTreeNewNode();
            this.updateNodeTable();
            this.eleVisible = false;
            this.$message({
              type: "success",
              message: "新增成功!",
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    updateTreeNewNode() {
      getLazytree(
        this.id,
        this.nodeDetail.parentId,
        this.userInfo.tenant_id,
        this.projectid
      ).then((res) => {
        this.$refs.tree.updateKeyChildren(
          this.nodeDetail.parentId,
          res.data.data
        );
      });
    },

    updateNodeTable() {
      selectByNodeTable(this.curTreeData.id, this.projectid, this.id).then(
        (res) => {
          if (res.data.data.length) {
            this.formData = res.data.data;
          } else {
            this.formData = [];
          }
        }
      );
    },

    deleNode(data, node) {
      this.$confirm(
        "此操作将删除节点【" + data.title + "】, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          removePrivateTreeNode(data.primaryKeyId).then(() => {
            this.$refs.tree.remove(node);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {});
    },

    importHandle() {},

    handleEdit(index, row) {
      this.curEleTable = row;
      selectPrivateFormElements(this.curEleTable.initTableId).then((res) => {
        res.data.data.forEach((element) => {
          this.eleReg.exec(element.eAllowDeviation);
          element.allow = RegExp.$1 ? RegExp.$1 : "";
          element.deviation = RegExp.$2 ? RegExp.$2 : "";
        });
        this.editEleList = res.data.data;
      });
      this.editEleVisible = true;
    },
    handleDelete(index, row) {
      this.$confirm("是否删除  " + row.tableName + "  ?", "删除元素表", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "取消",
      }).then(() => {
        removeTableById(row.id, this.projectid, this.id).then(() => {
          this.formData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    async hideMD(row) {
      //隐藏按钮
      const code = await this.updateStatus(row.pkeyId, row.status);
      if (code == 200) {
        if (row.status == 0) {
          row.status = 1;
        } else {
          row.status = 0;
        }
      }
    },
    async updateStatus(pKeyId, status) {
      //隐藏功能激活
      const { data: res } = await updateStatus({ pKeyId });
      if (res.code == 200) {
        this.$message({
          type: "success",
          message: status == 1 ? "隐藏成功" : "激活成功",
        });
      }
      return res.code;
    },
    handleEditFormula(index, row) {
      this.curEleTable = row;
      selectFormElements(this.curEleTable.pkeyId,{type:0}).then((res) => {
        this.editEleListFilter = res.data.data;
        this.editEleListAll = [].concat(this.editEleListFilter);
      });
      this.editEleFormulaVisible = true;
    },
    //表单同步
    handlesync(index, row){
        this.handlesyncLoad=true
      syncCurrentFormInProject({pKeyId:row.pkeyId}).then((res)=>{
         if(res.data.code==200){
            this.$message.success('操作成功');
         }
      }).finally(()=>{
        this.handlesyncLoad=false
      })
    },
    //搜索 筛选
    searchFormulaName() {
      this.editEleListFilter = this.editEleListAll.filter((ele) => {
        return ele.eName.indexOf(this.formulaInput) > -1;
      });
    },

    saveNewEle(row) {
      row.eAllowDeviation =
        (row.allow ? row.allow : "") + (row.deviation ? row.deviation : "");
      row.fId = this.curEleTable.initTableId;
      row.initTableName = this.curEleTable.initTableName;
      if (row.eType == 4) {
        row.eLength = 0;
      }
      saveElement(row).then((res) => {
        if (res.data.data) {
          this.$set(row, "id", res.data.data.id);
          this.$set(row, "ekey", res.data.data.ekey);
          this.$message({
            type: "success",
            message: "保存成功!",
          });
        }
      });
    },
    delEleRowHandle(index, list) {
      let row = list[index];
      if (row.id) {
        //有id需要请求删除
        this.$confirm("是否确认删除?", "删除元素", {
          distinguishCancelAndClose: true,
          confirmButtonText: "删除",
          cancelButtonText: "取消",
        }).then(() => {
          removeElement(row.id, this.curEleTable.initTableName, row.ekey).then(
            () => {
              list.splice(index, 1);
            }
          );
        });
      } else {
        list.splice(index, 1);
      }
    },
    saveEles() {
      for (let i = 0; i < this.editEleList.length; i++) {
        if (!this.editEleList[i].id) {
          this.$message({
            type: "warning",
            message: "请先将新增的元素点击保存",
          });
          return;
        }
      }
      if (this.editEleList.length > 0) {
        this.editEleList.forEach((element) => {
          element.eAllowDeviation =
            (element.allow ? element.allow : "") +
            (element.deviation ? element.deviation : "");
          if (element.eType == 4) {
            element.eLength = 0;
          }
        });
        updateBatchElements(
          this.editEleList,
          this.curEleTable.initTableName
        ).then(() => {
          this.editEleVisible = false;
          this.updateNodeTable();
          this.$message({
            type: "success",
            message: "保存成功!",
          });
        });
      } else {
        this.editEleVisible = false;
        this.updateNodeTable();
        this.$message({
          type: "success",
          message: "保存成功!",
        });
      }
    },
    nodeTypeChange(val) {
      console.log(333333333);
      if (val === 53) {
        // if (this.testTreeData.length > 0) {
        //   return;
        // }
       
        this.testTreeLoad = true;
        // getAlltreeTrial(this.projectid, this.id, this.curTreeData.primaryKeyId).then((res) => {
        //   this.testTreeLoad = false;
        //   console.log(res.data.data,'data');
        //   let trialdata=res.data.data
        //   if(trialdata&&trialdata.allTree){
        //     this.testTreeData = trialdata.allTree[0];
        //     if(trialdata.allStatusIds.length>0){
        //       //设置勾选相关联试验全选
        //       this.mixRatioTestIds =trialdata.allStatusIds[0];
        //     }
               
        //   }
          
        // });
        getAlltree(this.projectid, this.id, this.curTreeData.primaryKeyId).then((res) => {
          this.testTreeLoad = false;
          console.log(res.data.data,'data');
            this.testTreeData=res.data.data
          
        });
      }
    },
    //根据逗号联合
    toJoin(arr) {
      return arr ? arr.join() : "";
    },
    TestTreeCheckChange(_, { checkedKeys, halfCheckedKeys }) {
      // const newarr = [...checkedKeys, ...halfCheckedKeys];
       const newarr = [...checkedKeys]
      this.nodeDetail.mixRatioTestIds = this.toJoin(newarr);
     
    },
    filterChange() {
      if (this.treeData.length > 0) {
        this.$refs.treeall.filter(this.filterText);
        return;
      }
      this.treeLoad = true;
      getAlltree(this.projectid, this.id).then((res) => {
        this.treeLoad = false;
        this.treeData = res.data.data;
        console.log(res.data.data,'res.data.data');
        this.$nextTick(() => {
          this.$refs.treeall.filter(this.filterText);
        });
      });
    },

    importTemplate(data) {
      this.importTemplateVisible = true;
      this.curTreeData = data;

      if (!this.fileUrl) {
        getAttchFromOriginalName(1, 20, {
          originalName: "WBS划分模板.xls",
        }).then((res) => {
          if (res.data.data.records.length) {
            this.fileUrl = res.data.data.records[0].link;
          } else {
            this.fileUrl = "";
          }
        });
      }
    },

    importTemplateHandle() {
      if (!this.upFile) {
        this.$message({
          type: "warning",
          message: "请先选择文件再进行导入",
        });
        return;
      }
      let forms = new FormData();
      forms.append("excelFile", this.upFile);
      let wbsTreeFu = {
        wbsId: this.id,
        parentId: this.curTreeData.id,
        // ancestors:'0,'+this.curTreeData.id,
      };
      let json = JSON.stringify(wbsTreeFu);
      let blob = new Blob([json], { type: "application/json" });
      forms.append("wbsTreeFu", blob);
      this.importLoading = true;
      importWbsTree(forms)
        .then(() => {
          //this.$router.go(0)
          let node = this.$refs.tree.getNode(this.curTreeData.id);
          node.isLeaf = false;
          this.importTemplateVisible = false;
          this.upFile = null;
        })
        .finally(() => {
          this.importLoading = false;
        });
    },

    handleDownload() {
      if (this.fileUrl) {
        window.open(this.fileUrl);
      } else {
        this.$message({
          type: "warning",
          message: "请先在附件管理上传【WBS划分模板.xls】文件",
        });
      }
    },
    fileClick() {
      this.$refs.file.click();
    },

    fileChange(e) {
      const file = e.target.files[0];
      if (!file) {
        // 如果用户没有选择图片,只是点了文件上传这个按钮
        return;
      }
      //console.log(file)
      this.upFile = file;
    },
    editNodeInfo(index, row) {
      this.$set(row, "isEdit", true);
    },
    saveNodeInfoHandle(index, row) {
      row.isEdit = false;
    },

    downloadTmp() {
      getTemplate().then((res) => {
        //console.log(res)
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        //console.log(blob)
        let filename = Date.parse(new Date()) + ".xls";
        if (window.navigator.msSaveOrOpenBlob) {
          // 兼容IE10
          window.navigator.msSaveBlob(blob, filename);
        } else {
          //  兼容chrome/firefox
          let aTag = document.createElement("a");
          aTag.download = Date.parse(new Date()) + ".xls";
          aTag.href = window.URL.createObjectURL(blob);
          aTag.click();
          URL.revokeObjectURL(aTag.href);
        }
      });
    },

    fileClick2() {
      this.$refs.file2.click();
    },
    tmpImport(e) {
      const file = e.target.files[0];
      const formData = new FormData();
      formData.append("file", file);
      //console.log(file.name)
      importWbsElement(formData)
        .then((res) => {
          res.data.data.forEach((element) => {
            element.eName = element.elementName;
            element.eLength = element.elementLength;
            element.eType = Number(element.elementType);
            element.eAllowDeviation = element.elementAllowDeviation;
            element.eInspectionMethod = element.elementInspectionMethod;
            this.eleReg.exec(element.eAllowDeviation);
            // console.log(RegExp.$1)
            // console.log(RegExp.$2)
            element.allow = RegExp.$1 ? RegExp.$1 : "";
            element.deviation = RegExp.$2 ? RegExp.$2 : "";
          });
          this.eleForm.elementList = res.data.data;
          this.importVisible = false;
        })
        .finally(() => {
          e.target.value = "";
        });
    },

    visiblechange(value, data) {
      this.$set(data, "moreShow", value);
    },

    bianhua2() {
      this.excelSortTag2 = false;
      this.$nextTick(() => {
        this.excelSortTag2 = true;
      });
    },
    //私有树的元素表修改排序
    privateTableSort() {
      if (!this.curTreeData.id) {
        this.$message({
          type: "warning",
          message: "请先选择需要排序的节点",
        });
        return;
      }
      this.tableSortList = this.formData.map((form, index) => {
        return {
          sort: index + 1,
          nodeName: form.tableName,
          pkeyId: form.pkeyId,
        };
      });
      this.excelSortTag = true;
      this.excelSortTag2 = true;
    },
    editPrivateSort() {
      this.surePrivateSortload=true
      wbsTreePrivateTableSort(this.tableSortList).then(() => {
          this.$message({
          type: "success",
          message: "排序成功!",
        });

        this.updateNodeTable();
         this.surePrivateSortload=false
        this.excelSortTag = false;
        this.excelSortTag2 = false;
      });
    },

    //解析元素数据类型
    eTypeFormatter(row) {
      let text = "";
      for (let i = 0; i < this.dataTypeList.length; i++) {
        if (this.dataTypeList[i].dictKey == row.eType) {
          text = this.dataTypeList[i].dictValue;
          break;
        }
      }
      return text;
    },

    //跳转到公式配置页面
    toFormulaEdit(row,type) {
      // this.$router.push({
      //   path: '/formula/edit',
      //   query: {
      //     wbsid: this.id,
      //     eleid: row.id,
      //     nodeid:this.curTreeData.id,
      //     projectid:this.projectid
      //   }
      // });
      this.formulaCurRow = row;
      this.formulaCurRow.globaltype = type;
      if(type===10){
          this.formulaCompVisible1 = true;
           this.formulaCurRow.elementType = false;
            this.istableType=true;
      }else{
          this.formulaCompVisible = true;
         
      }
     
    },
  //关闭公式弹窗
    closeformulaComp(){
      console.log('关闭');
        selectFormElements( this.curEleTable.pkeyId,{type:0}).then((res) => {
        this.editEleListFilter = res.data.data;
        this.editEleListAll = [].concat(this.editEleListFilter);
      })

    },
      //关闭公式弹窗
    closeformulaComp1(){
      console.log('关闭');
        selectFormElements( this.curEleTable.pkeyId,{type:0}).then((res) => {
        this.editEleListFilter = res.data.data;
        this.editEleListAll = [].concat(this.editEleListFilter);
      })

    },
    getNodeTypelist() {
      const type = this.wbsType;
      if (this.nodeTypelist.length > 1) {
        return;
      }
      getDictionary({
        code: type === 2 ? "trial_node_type" : "wbs_node_type",
      }).then((res) => {
        res.data.data.forEach((element) => {
          element.dictKey = Number(element.dictKey);
        });
        this.nodeTypelist = res.data.data;
      });
    },
    getMajorDataTypeList() {
      if (this.majorDataTypeList.length > 1) {
        return;
      }
      getDictionary({
        code: "major_data_type",
      }).then((res) => {
        res.data.data.forEach((element) => {
          element.dictKey = Number(element.dictKey);
        });
        this.majorDataTypeList = res.data.data;
      });
    },

    getTableTypelist() {
      const type = this.wbsType
      if (this.tableTypelist.length > 1) {
        return;
      }
      getDictionary({
        // code: "table_type",
        code: type === 2 ? "trial_table_type" : "table_type",
      }).then((res) => {
        res.data.data.forEach((element) => {
          element.dictKey = Number(element.dictKey);
        });
        this.tableTypelist = res.data.data;
      });
    },
    getDataTypelist() {
      if (this.dataTypeList.length > 1) {
        return;
      }
      getDictionary({
        code: "data_type",
      }).then((res) => {
        res.data.data.forEach((element) => {
          element.dictKey = Number(element.dictKey);
        });
        this.dataTypeList = res.data.data;
      });
    },
    getOwnerTypelist() {
      if (this.ownerTypeList.length > 1) {
        return;
      }
      getDictionary({
        code: "owner_type",
      }).then((res) => {
        res.data.data.forEach((element) => {
          element.dictKey = Number(element.dictKey);
        });
        this.ownerTypeList = res.data.data;
      });
    },

    formatCat(row, column, cellValue) {
      for (let i = 0; i < this.nodeTypelist.length; i++) {
        if (this.nodeTypelist[i].dictKey == cellValue) {
          return this.nodeTypelist[i].dictValue;
        }
      }
      return cellValue;
      //console.log(cellValue)
    },
    formatTableType(row, column, cellValue) {
      for (let i = 0; i < this.tableTypelist.length; i++) {
        if (this.tableTypelist[i].dictKey == cellValue) {
          return this.tableTypelist[i].dictValue;
        }
      }
      return cellValue;
      //console.log(cellValue)
    },
    formatOwner(row, column, cellValue) {
      for (let i = 0; i < this.ownerTypeList.length; i++) {
        if (this.ownerTypeList[i].dictKey == cellValue) {
          return this.ownerTypeList[i].dictValue;
        }
      }
      return cellValue;
      //console.log(cellValue)
    },
    formatdataType(row, column, cellValue) {
      for (let i = 0; i < this.dataTypeList.length; i++) {
        if (this.dataTypeList[i].dictKey == cellValue) {
          return this.dataTypeList[i].dictValue;
        }
      }
      return cellValue;
    },

    // filterNode(value, data) {
    //   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);
        }
    },

    filterNode(value,data,node) {
      if(!value){
        return true;
      }
      let level = node.level;
      let _array = [];//这里使用数组存储 只是为了存储值。
      this.getReturnNode(node,_array,value);
      let result = false;
      _array.forEach((item)=>{
        result = result || item;
      });
      return result;
    },
    //#endregion

    //#region  wbs私有树排序
    async sortpai(data) {
      console.log(data);
      await this.findWbsTreePrivateSameLevel({
        parentId: data.parentId,
        projectId: this.projectid,
        wbsId: this.id,
      });
      this.sortTag = true;
      this.sortTag2 = true;
    },
    editSort() {
      this.wbsTreePrivateSort();
    },
    bianhua() {
      this.sortTag2 = false;
      this.$nextTick(() => {
        this.sortTag2 = true;
      });
    },
    async wbsTreePrivateSort() {
      this.sureSortload=true
      //wbs私有树节点手动排序
      const { data: res } = await wbsTreePrivateSort(this.sort);
      console.log(res);
      if (res.code == 200) {
        this.sortTag = false;
        this.sortTag2 = false;
        this.$message({
          type: "success",
          message: "排序成功!",
        });
        this.sureSortload=false
        this.getLazytreessss();
      }
    },
    async findWbsTreePrivateSameLevel(da) {
      //wbs私有树同级节点接口
      const { data: res } = await findWbsTreePrivateSameLevel(da);
      if (res.code == 200) {
        this.sort = res.data;
      }
    },
    async getLazytreessss() {
    const type=this.wbsType
      const { data: res } = await getLazytree(
        this.id,
        0,
        this.userInfo.tenant_id,
        this.projectid,
        { wbsType: type,}
     
        
      );
      console.log(res);
      if (res.code == 200) {
        this.treeData = res.data;
      }
    },
    //#endregion

    //#region 关联清表
    async getList(da) {
      //获取清表模板信息
      const { data: res } = await getList(da);
      console.log(res);
      if (res.code === 200 && res.msg === "操作成功") {
        this.GLExcelData = res.data.records;
      }
    },
    async tabLazytreeAll() {
      //清表树信息
      this.GLExcelLoading = true;
      const { data: res } = await tabLazytreeAll({
        modeId: this.GLExcelFrom.name,
        name: this.GLExcelFrom.search,
      });
      this.GLExcelLoading = false;
      console.log(res);
      if (res.code === 200 && res.msg === "操作成功") {
        this.exceldata = res.data;
      }
    },
    Associationlist(scope) {
      //关联清表点击事件
      console.log(scope.row);
      this.GLExcel = true;
      this.getList({
        current: 1,
        size: 100000,
        parentId: 0,
      });
      this.GLExcelFrom.name = scope.row.modeId;
      setTimeout(() => {
        this.$refs.tree.setCheckedKeys([scope.row.excelId]);
      }, 2000);
       this.GLExcelFrom.initTableId = scope.row.initTableId;
      this.GLExcelFrom.id = scope.row.pkeyId;
      this.GLExcelFrom.excelId = scope.row.excelId;
      this.GLExcelFrom.ids = scope.row.id;
      this.GLExcelFrom.initTableName = scope.row.initTableName;
      console.log(this.GLExcelFrom,'this.GLExcelFrom');
    },
    changetherr() {
      //清表类型选择框change事件
      if (this.GLExcelFrom.name != "") {
        this.GLExcelFrom.search = "";
        this.tabLazytreeAll();
      }
    },
    GLExcelMD() {
      //弹框关闭事件
      this.GLExcelFrom.name = "";
      this.GLExcelFrom.search = "";
      this.GLExcelFrom.id = "";
      this.exceldata = [];
      this.$refs.tree.setCheckedKeys([]);
      this.GLExcel = false;
    },
    checkchange(data) {
      //节点选中回调
      if (this.$refs.tree.getCheckedNodes().length === 0) {
        this.$refs.tree.setCheckedKeys([]);
      } else if (this.$refs.tree.getCheckedNodes().length >= 1) {
        this.$refs.tree.setCheckedKeys([data.id]);
      }
    },
    async saveLinkTab() {
      //保存按钮
      let checkNodes = this.$refs.tree.getCheckedNodes();
      if (checkNodes.length > 0) {
        let node = checkNodes[checkNodes.length - 1];
        if (node.fileType != 3) {
          this.$message({
            type: "warning",
            message: "请先上传Excel表",
          });
          return;
        }
        const { data: res } = await saveLinkTab({
          exceTabId: node.id,
          tabId: this.GLExcelFrom.id,
        });
        console.log(res);
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "关联清表成功",
          });
          // selectByNodeTable刷新表单列表
          this.updateNodeTable();
          this.GLExcel = false;
          console.log(this.GLExcelFrom,'GLExcelFrom');
          this.rightClick(
            this.GLExcelFrom.id,
            this.GLExcelFrom.excelId,
            this.GLExcelFrom.ids,
            this.GLExcelFrom.initTableName,
            this.GLExcelFrom.initTableId
          );
        }
      } else {
        this.$message({
          type: "warning",
          message: "请先设置清表",
        });
      }
    },
    getReturnNode2(node,_array,value){
        let isPass = node.data &&  node.data.name && node.data.name.indexOf(value) !== -1;
        isPass?_array.push(isPass):'';
        if(!isPass && node.level!=1 && node.parent){
          this.getReturnNode2(node.parent,_array,value);
        }
    },

    filterNode222(value,data,node) {
      if(!value){
        return true;
      }
      let level = node.level;
      let _array = [];//这里使用数组存储 只是为了存储值。
      this.getReturnNode2(node,_array,value);
      let result = false;
      _array.forEach((item)=>{
        result = result || item;
      });
      return result;
    },
    //#endregion

    //#region 节点参数
    nodeInfo(data) {
      //节点参数按钮
      this.keymap();
      //console.log(data)
      this.jiedianId = data.primaryKeyId;
      this.parameters(data.primaryKeyId);
      this.nodeInfoVisible = true;
    },
    closenodeInfoVisible(){
      this.nodeInfoTable=[]
      this.nodeInfoVisible = false;
    },
    addNodeInfoTable() {
      //添加节点参数数据
      this.nodeInfoTable.unshift({
        k: "",
        v: "",
        remark: "",
        nodeId: this.jiedianId,
        type: 1,
      });
      console.log(this.nodeInfoTable)
    },
    refreshnfoTable(){
      //刷新表格
      let prams={
         nodeId: this.jiedianId,
          type: 1,
          projectId: this.projectid
      }
      this.nodeInfoTableLoad=true
      refrehPram(prams).then((res)=>{
         this.nodeInfoTableLoad=false;
         if(res.data.code==200){
            this.$message.success('刷新成功');
         }
      })
    },
    delNodeInfo(key,obj) {
      this.delids.push(obj.id)
      //设置参数名称中的删除按钮
      this.namelists.splice(key, 1);
    },
    delNodeInfoss(key,obj) {
      this.delids.push(obj.id)
      //节点参数
      this.nodeInfoTable.splice(key, 1);
    },
    setNodeParameters() {
      //打开设置节点参数弹框按钮
      this.infoNameVisible = true;
      this.namelists = [...this.namelist];
    },

    async setParameterName() {
      //设置参数名称中添加节点参数按钮
      // wbsId: this.jiedianId
      this.namelists.unshift({ name: "", remark: "", k: "", type: 0 ,nodeId:this.jiedianId});
    },
    async nodeInfoSave() {
      //节点参数弹框保存按钮
      if (this.nodeInfoTable) {
        // if (this.nodeInfoTable.length == 0) {
        //   await this.saveOrUpdateBatch({projectId:this.projectid,nodeId:this.jiedianId,type:1,delIds:this.delids,wps:[
        //     {
        //       nodeId: this.jiedianId,
        //       type: -1,
        //     },
        //   ]});
        //   this.nodeInfoVisible = false;
        //   this.delIds=[];
        //   this.$message({
        //     type: "success",
        //     message: "保存参数节点成功!",
        //   });
        //   return;
        // }
        console.log(this.namelist)
        let tag = true;
        this.nodeInfoTable.forEach((val) => {
          if (!val.k | !val.v) {
            return (tag = false);
          }

          if (!val.name) {
            for (let i = 0; i < this.namelist.length; i++) {
              if (this.namelist[i].k == val.k) {
                val.name = this.namelist[i].name;
                return;
              }
            }
          }
        });
        if (tag) {
          this.nodeInfoSaveload=true
          await this.saveOrUpdateBatch({scopeType:10,projectId:this.projectid,nodeId:this.jiedianId,wps:this.nodeInfoTable,type:1,delIds:this.delids});
          this.delIds=[];
          this.$message({
            type: "success",
            message: "设置参数节点成功!",
          });
          this.nodeInfoSaveload=false
          this.nodeInfoVisible = false;
        } else {
          this.$message({
            type: "error",
            message: "请填写所有的参数名称和参数值!",
          });
        }
      } else {
        this.$message({
          type: "error",
          message: "请先设置参数节点!",
        });
      }
    },
    async addParameterName() {
      //设置参数名称中的保存按钮
      if (this.namelists.length) {
        let tag = true;
        this.namelists.forEach((val) => {
          if (!val.name || !val.k) {
            return (tag = false);
          }
        });
        if (tag) {
          await this.saveOrUpdateBatch({scopeType:10,projectId:this.projectid,nodeId:this.jiedianId,wps:this.namelists,type:0,delIds:this.delids}); //保存设置参数
          this.infoNameVisible = false;
          this.delIds=[];
          this.keymap();
        } else {
          this.$message({
            type: "error",
            message: "请填写所有的参数名称和参数值KEY!",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请先添加参数",
        });
      }
    },
    closeParameter() {
      //设置参数名称，关闭按钮
      this.namelists = [];
      this.infoNameVisible = false;
    },
    async parameters(wbsId) {
      //获取接待你参数列表
      const { data: res } = await parameters({ wbsId });
      console.log(res);
      if (res.code == 200) {
        if( Array.isArray(res.data)){
          this.nodeInfoTable = res.data
        }
      }
    },
    async saveOrUpdateBatch(da) {
      //保存
      const { data: res } = await saveOrUpdateBatch(da);
      this.delids=[];
      console.log(res);
    },
    async keymap() {
      //节点参数枚举
      const { data: res } = await keymap();
      console.log(res);
      if (res.code == 200) {
        this.namelist = res.data;
      }
    },
    //#endregion

    //#region 调整表单
    adjustExcel(pkeyId, excelId) {
      //调整表单
      this.GLExcelFrom.id = pkeyId;
      this.getExcelHtml(pkeyId);
    },
    async getExcelHtml(pkeyId) {
      const { data: res } = await getExcelHtml({ pkeyId });
      console.log(res);
      if (res.code === 200) {
        localStorage.setItem("excelHtml", res.data);
        this.adjustmentExcel = res.data;
        this.excelHtml = true;
      }
    },
    removeExcel() {
      this.excelHtml = false;
    },
    //#endregion

    //#region 编辑元素
    async rightClick(pkeyId, excelId, id, initTableName,initTableId) {
      await this.getExcelHtml2(pkeyId);
      this.editElementQuery.pkeyId = pkeyId;
      this.editElementQuery.excelId = excelId;
      this.editElementQuery.id = id;
      this.editElementQuery.initTableName = initTableName;
      this.editElementQuery.initTableId = initTableId;
      this.editElementQuery.pid = this.$route.query.pid;
      this.editElementQuery.wbsid = this.$route.query.wbsid;
      this.editElementQuery.nodeid = this.curTreeData.id;

      this.editElementVisible = true;
    },
    async getExcelHtml2(pkeyId) {
      const { data: res } = await getExcelHtml({ pkeyId });
      console.log(res);
      if (res.code === 200) {
        localStorage.setItem("editElement", res.data);
      }
    },
    //#endregion

    //#region 元素表单信息
    editEditElementForm() {
      //标记元素
      if (this.formData.length) {
        let da = [];
        this.formDatass = [...this.formData];
        this.formDatass.forEach((val) => {
          da.push({
            tableType: val.tableType - 0,
            tableOwner: val.tableOwner - 0,
            pkeyId: val.pkeyId,
            tableName: val.tableName,
            fillRate: val.fillRate,
          });
        });
        this.formDatass = da;
        this.editElementFormTag = true;
      }
    },
    editeditElementFormMF() {
      //保存按钮
      let da = [];
      let tag = true;
      this.formDatass.forEach((val) => {
        if (!val.tableName || !val.tableType || !val.tableOwner) {
          tag = false;
          return;
        } else {
          da.push({
            pkeyId: val.pkeyId,
            nodeName: val.tableName,
            tableType: val.tableType,
            tableOwner: val.tableOwner,
            fillRate: val.fillRate,
          });
        }
      });
      if (tag) {
         
        this.updateBatchNodeTableInfo2(da);
      } else {
        this.$message({
          type: "success",
          message: "请填写完整元素表单的所有信息!",
        });
      }
    },
    async updateBatchNodeTableInfo2(da) {
        this.editeditElementFormMFLoading=true
      //共有编辑元素
      const { data: res } = await updateBatchNodeTableInfo2(da);
      if (res.code == 200) {
        this.editElementFormTag = false;
        this.updateNodeTable();
        this.editeditElementFormMFLoading=false
      }
      this.editeditElementFormMFLoading=false
    },
    //#endregion

    //获取节点展开路径
    getExpandedKeys(node) {
      //console.log(node)
      let expandedKeys = [];
      while (node.parent) {
        expandedKeys.push(node.data.id);
        node = node.parent;
      }
      setStore({
        name: this.expandName,
        content: expandedKeys,
        type: true, //sessionStorage
      });
      //console.log(expandedKeys)
    },

    //触发节点参数
    nodeInfoHandle() {
      if (!this.curTreeData.id) {
        this.$message({
          type: "warning",
          message: "请先选择节点",
        });
        return;
      }

      this.nodeInfo(this.curTreeData);
    },

    eleFormulaHandle() {
      if (!this.curTreeData.id || !this.curTreeNode.id) {
        this.$message({
          type: "warning",
          message: "请先选择节点",
        });
        return;
      }
      this.setLeftType(4, this.curTreeData, this.curTreeNode);
      // this.showType = 2;
    },

    editNodeHandle() {
      if (!this.curTreeData.id || !this.curTreeNode.id) {
        this.$message({
          type: "warning",
          message: "请先选择节点",
        });
        return;
      }
      this.mixRatioTestIds = [];
      this.nodeTypeChange(53);
       this.dialogTitle='编辑节点'
      this.setLeftType(2, this.curTreeData, this.curTreeNode);
     
    },
    addNodeHandle() {
      if (!this.curTreeData.id || !this.curTreeNode.id) {
        this.$message({
          type: "warning",
          message: "请先选择节点",
        });
        return;
      }
      this.mixRatioTestIds = [];
      this.nodeTypeChange(53);
        this.dialogTitle='新增节点'
      this.setLeftType(1, this.curTreeData, this.curTreeNode);
      
    
    },
    copyNodeHandle() {
      if (!this.curTreeData.id || !this.curTreeNode.id) {
        this.$message({
          type: "warning",
          message: "请先选择节点",
        });
        return;
      }
    },
    delNodeHandle() {
      if (!this.curTreeData.id || !this.curTreeNode.id) {
        this.$message({
          type: "warning",
          message: "请先选择节点",
        });
        return;
      }
      if (this.curTreeNode.level == 1) {
        this.$message({
          type: "warning",
          message: "当前节点无法删除",
        });
        return;
      }
      this.deleNode(this.curTreeData, this.curTreeNode);
    },

    eleHandle() {
      if (!this.curTreeData.id || !this.curTreeNode.id) {
        this.$message({
          type: "warning",
          message: "请先选择节点",
        });
        return;
      }

      this.setLeftType(5, this.curTreeData, this.curTreeNode);
    },

    syncInfoHandle(item) {
    if(this.curTreeData.primaryKeyId){
      this.$confirm("是否同步节点参数?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.syncBtnLoad = true;
        this.menuoptions.forEach((ele)=>{
        if(item.value==ele.value){
          ele.load=true
        }
      })
        syncNodeParam(this.projectid,this.curTreeData.primaryKeyId)
          .then(() => {
            this.$message({
              type: "success",
              message: "同步成功!",
            });
          })
          .finally(() => {
            this.syncBtnLoad = false;
              this.menuoptions.forEach((ele)=>{
              if(item.value==ele.value){
                ele.load=false
              }
            })
          });
      });
    }else{
      this.$message.warning('请先选择左侧节点')
    }
      
    },

    //显示别名弹窗
    aliasShow() {
      this.aliasVisible = true;
      if (this.nodeDetail.fullName) {
        this.aliasArr = this.nodeDetail.fullName.split(",");
      } else {
        this.aliasArr = [];
      }
      this.aliasInput = "";
    },

    addAlias() {
      if (this.aliasInput) {
        this.aliasArr.push(this.aliasInput);
        this.aliasInput = "";
      }
    },
    delAlias(index) {
      this.aliasArr.splice(index, 1);
    },

    saveAliasHandle() {
      this.nodeDetail.fullName = this.aliasArr.join(",");
      if (this.editType == 1) {
        //新增
        this.aliasVisible = false;
      } else if (this.editType == 2) {
        //编辑 私有
        privateSubmitFullName(
          this.nodeDetail.pKeyId,
          this.nodeDetail.fullName
        ).then(() => {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.aliasVisible = false;
        });
      }
    },

    syncNodeTableHandle(data) {
      this.$confirm("是否同步节点【" + data.title + "】?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let notify = this.$notify({
          title: "提示",
          message: "节点数据同步中...",
          duration: 0,
        });
        syncNodeTable(data.primaryKeyId)
          .then(() => {
            this.updateNodeTable();
            this.$message({
              type: "success",
              message: "同步成功",
            });
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "同步失败",
            });
          })
          .finally(() => {
            notify.close();
          });
      });
    },
    syncProjectHandle (data) {
      this.$confirm("是否同步节点【" + data.title + "】到合同段?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let notify = this.$notify({
          title: "提示",
          message: "节点数据同步中...",
          duration: 0,
        });
        syncNodeinfo(data.primaryKeyId)
          .then(() => {
            this.updateNodeTable();
            this.$message({
              type: "success",
              message: "同步成功",
            });
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "同步失败",
            });
          })
          .finally(() => {
            notify.close();
          });
      });
    },

    typeTreeLoadNode(node, resolve) {
      let pid = 0;
      if (node.level != 0) {
        pid = node.data.id;
      }
      tabTypeLazyTree(pid, this.projectid).then((res) => {
        let arr = [];
        if (Array.isArray(res.data.data)) {
          arr = res.data.data;
        }

        return resolve(arr);
      });
    },

    getTypeTreeDetail() {},
    independent(){
      this.$router.push({
        path: '/project/independent',
        query: { pid: this.projectid,wbsid:this.$route.query.wbsid }


      });
    },
    syncElectric(item){
      if(this.curTreeData.primaryKeyId){
          console.log('同步电签默认信息');
        this.$confirm("是否同步电签默认信息?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.syncElectricLoad = true;
          this.menuoptions.forEach((ele)=>{
          if(item.value==ele.value){
            ele.load=true
          }
        })

          syncProjecteVisa(this.projectid,this.curTreeData.primaryKeyId)
            .then(() => {
              this.$message({
                type: "success",
                message: "同步成功!",
              });
            })
            .finally(() => {
              this.syncElectricLoad = false;
                this.menuoptions.forEach((ele)=>{
                  if(item.value==ele.value){
                    ele.load=false
                  }
                })
            });
        });
      }else{
        this.$message.warning('请先选择左侧节点')
      }
    
    },


    //节点参数 关联元素
    linkEle(row){
      this.linkEleVisible = true;
      this.curParam = row;
      getParamElements({nodeId:this.curTreeData.id,projectId:this.projectid,paramId:row.id,scopeType:10}).then((res) => {
        if (res.data.data.length) {
          this.linkEleTableList = res.data.data;
        } else {
          this.linkEleTableList = [];
        }
      })
    },

    //关联元素弹框
    tolinkEle(row){
      this.curLinkEleTable = row;
      this.linkCheckVisible = true;

      selectFormElements(row.id,{type:3,nodeId:this.curTreeData.primaryKeyId}).then((res) => {
        res.data.data.forEach((ele)=>{
          ele.checked = false;
          ele.show = true;
        })
        this.linkEleList = res.data.data;
        this.linkEleListAll = [].concat(this.linkEleList);
      })
    },
    //删除关联
    delLink(data){
      this.$confirm('删除关联, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(data)
        delParamElements(data).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });

          getParamElements({nodeId:this.curTreeData.id,projectId:this.projectid,paramId:this.curParam.id,scopeType:10}).then((res) => {
           if (res.data.data.length) {
              this.linkEleTableList = res.data.data;
              } else {
               this.linkEleTableList = [];
          } })
        })

      }).catch(() => {

      });
    },

    //筛选元素
    searchEle(){
      this.linkEleList = this.linkEleListAll.filter((ele)=>{
        return ele.eName.indexOf(this.linkEleKey) > -1;
      })
    },

    linkEleCheck(value,index){
      //console.log(value)
      if(value){
        this.linkEleList.forEach((ele,i)=>{
          if(i != index){
            ele.checked = false;
          }
        })
      }
    },

    //关联元素
    saveLinkEle(){
        let target={}
        this.linkEleList.forEach(e=>{
             if(e.checked==true){
              target={elementId:e.id,paramId:this.curParam.id};
             }
        })
        specifiedParamElements(target).then(data=>{
          this.linkCheckVisible = false;
          getParamElements({nodeId:this.curTreeData.id,projectId:this.projectid,paramId:this.curParam.id,scopeType:10}).then((res) => {
           if (res.data.data.length) {
              this.linkEleTableList = res.data.data;
              } else {
               this.linkEleTableList = [];
           }})
        })
    },
    //树形控件菜单相关方法
    mouseout(){
      this.menuvisible=false
    },
    //展示菜单
  showMenu(e,data,node){
    e.preventDefault();
    console.log(e,'e');
    var x = e.pageX; //这个应该是相对于整个浏览器页面的x坐标，左上角为坐标原点（0,0）
    var y = e.pageY; //这个应该是相对于整个浏览器页面的y坐标，左上角为坐标原点（0,0）
    this.menutop = y;
    this.menuleft = x;
    this.menuvisible=true

    },
    menuClick(e,item,data){
        e.preventDefault();
        if(item.key==='sort'){
        this.sortpai(data)
        }else if(item.key==='sync1'){
        this.syncNodeTableHandle(data)
        }else if(item.key==='sync2'){
        this.syncProjectHandle(data)
        }//
        else if(item.key==='add'){
           this.addNodeHandle()
        }
        else if(item.key==='edit'){
          this.editNodeHandle()
        }
         else if(item.key==='del'){
          this.delNodeHandle()
        }else if(item.value==='jdSync'){
          this.syncInfoHandle(item)
        }else if(item.value==='gsSync'){
         this.$message({
            type: "info",
            message: "暂无相关接口!"
          });
        }else if(item.value==='dqSync'){
          this.syncElectric(item)
        }
    },
    //展示数据同步下拉框
    showSyncbtn(){
      this.isshowSyncbtn=!this.isshowSyncbtn
    }
  },
  watch: {
    "GLExcelFrom.search"(val) {
      console.log(val);
      if (this.exceldata) {
        this.$refs.tree.filter(val);
      }
    },
  },
  components: {
    dynamicExcel,
    ManualSorting,
    FormulaEdit,
    EditElement,
    FormulaEditone
  },
};
</script>

<style scoped lang="scss">
.font-s-12 /deep/ .iconfont {
  font-size: 12px;
}
.el-popper[x-placement^="bottom"] {
  margin-top: -6px;
}
.right-btn {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 20px;
}
.custom-tree-node {
  .normal-black {
    display: none;
  }
  &:hover {
    .normal-black {
      display: inline-block;
    }
  }
  &.show .normal-black {
    display: inline-block;
  }
}
.excelBox {
  /deep/.el-dialog__body {
    padding: 20px;
  }
}
//调整表单样式
.excelHtml {
  position: absolute;
  z-index: 999999;
  top: 50px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.jiedian {
  /deep/.el-dialog__body {
    padding: 10px 20px !important;
  }
}
.filter-tree {
  min-width: 100%;
  display: inline-block;
}

.full-dialog {
  /deep/ .el-dialog__body {
    padding-bottom: 0;
    padding-top: 0;
  }

  /deep/ .basic-container {
    height: calc(100vh - 60px);
  }
}
.my-basic-con {
  padding: 6px 6px;
}
// 树形控件菜单样式
.contextmenu {
margin: 0;
background: #fff;
z-index: 1000;
position: fixed; //关键样式设置固定定位
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
}
.contextmenu li:hover {
background: #eee;
}
.selectBtn{
  position:absolute;
  top:50px;
  right: 408px;
  z-index:1000;
  width:140px;
  text-align: left;
}
.titlerow{
  // float: right;
  background-color:rgba(31, 34, 41, 0.8);
  // width:104%;
  padding-left:10px;
  padding-right:10px;
  text-align:right;
  margin-top: -20px;
  margin-left: -20px;
  margin-right: -20px;
 

}
</style>