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

<template>
  <basic-container>
    <el-row :gutter="20">
      <el-col :span="10">
        <div class="box">
          <p>工程节点信息</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>
          <el-scrollbar>
            <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"
              >
                <span
                  class="custom-tree-node"
                  :class="data.moreShow?'show':''"
                  slot-scope="{ node, data }"
                >
                  <!--@mouseover="mouseover(data)" @mouseleave="mouseout(data)"-->
                  <span class="pd-r-20">
                    {{ node.label }}
                    <el-dropdown
                      @click="command=>{setLeftType(command,data)}"
                      @visible-change="visiblechange($event,data)"
                    >
                      <el-button
                        type="text"
                        icon="el-icon-more"
                        class="normal-black"
                      >
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          @click.native="setLeftType(1,data,node)"
                          icon="el-icon-circle-plus-outline"
                          v-if="data.deptCategory != 6 && data.isExistForm != 1"
                        >新增子级</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="setLeftType(2,data,node)"
                          icon="el-icon-edit"
                        >编辑节点</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="setLeftType(3,data,node)"
                          icon="el-icon-document-copy"
                        >复制节点</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="deleNode(data,node)"
                          icon="el-icon-close"
                          v-if="node.level !=1"
                        >删除节点</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="setLeftType(4,data,node)"
                          icon="iconfont hcicon-danganziliao-biaogetianxie"
                          class="font-s-12"
                        >元素公式</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="setLeftType(5,data,node)"
                          icon="el-icon-coin"
                        >元素设置</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="nodeInfo(data,node)"
                          icon="el-icon-help"
                        >节点参数</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="importTemplate(data,node)"
                          v-if="node.level == 2"
                          icon="el-icon-upload"
                        >导入划分</el-dropdown-item>
                        <el-dropdown-item
                          v-if="data.parentId!=0"
                          @click.native="sortpai(data,node)"
                          icon="el-icon-sort"
                        >调整排序</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </span>
                </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"
                  slot-scope="{ node, data }"
                  :class="data.moreShow?'show':''"
                >
                  <span class="pd-r-20">
                    {{ node.label }}
                    <el-dropdown
                      @click="command=>{setLeftType(command,data)}"
                      @visible-change="visiblechange($event,data)"
                    >
                      <el-button
                        type="text"
                        icon="el-icon-more"
                        class="normal-black"
                      >
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          @click.native="setLeftType(1,data,node)"
                          icon="el-icon-circle-plus-outline"
                          v-if="data.deptCategory != 6 && data.isExistForm != 1"
                        >新增子级</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="setLeftType(2,data,node)"
                          icon="el-icon-edit"
                        >编辑节点</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="setLeftType(3,data,node)"
                          icon="el-icon-document-copy"
                        >复制节点</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="deleNode(data,node)"
                          icon="el-icon-close"
                          v-if="node.level !=1"
                        >删除节点</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="setLeftType(4,data,node)"
                          icon="iconfont hcicon-danganziliao-biaogetianxie"
                          class="font-s-12"
                        >元素公式</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="setLeftType(5,data,node)"
                          icon="el-icon-coin"
                        >元素设置</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="nodeInfo(data)"
                          icon="el-icon-help"
                        >节点参数</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="importTemplate(data,node)"
                          v-if="node.level == 2"
                          icon="el-icon-upload"
                        >导入划分</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </span>
                </span>
              </el-tree>
            </div>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="14">
        <template v-if="leftType==5">
          <p>节点信息</p>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              align="center"
              prop="deptName"
              label="当前节点"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="deptCategory"
              :formatter="formatCat"
              label="节点类型"
              width="180"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="parentName"
              label="上级节点"
            ></el-table-column>
          </el-table>
          <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> -->
            <i
              class="el-icon-edit-outline marleft10"
              size="26"
              style="color:#409EFF;cursor: pointer;"
              @click="editEditElementForm()"
            ></i>
            <i
              class="el-icon-sort marleft10"
              size="26"
              @click="privateTableSort()"
              style="color:#409EFF;cursor: pointer;"
            ></i>
          </p>
          <el-table
            :data="formData"
            border
            style="width: 100%"
          >
            <el-table-column
              align="center"
              prop="tableName"
              label="表单名称"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="elementTotal"
              label="字段总量"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="tableType"
              :formatter="formatTableType"
              label="表单类型"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="tableOwner"
              :formatter="formatOwner"
              label="所属方"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template v-if="leftType==4">
          <el-table
            :data="formData"
            border
            style="width: 100%"
          >
            <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
              label="是否关联清表"
              width="130"
              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="350"
              align="center"
            >
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  :disabled='scope.row.isLinkTable==-1'
                  @click="rightClick(scope.row.pkeyId,scope.row.excelId,scope.row.id,scope.row.initTableName)"
                >编辑元素</el-link>
                <el-link
                  class="mg-l-10"
                  type="primary"
                  @click="Associationlist(scope)"
                >关联清表</el-link>
                <el-link
                  class="mg-l-10"
                  type="primary"
                  :disabled='scope.row.isLinkTable!=2'
                  @click="adjustExcel(scope.row.pkeyId,scope.row.excelId)"
                >调整表单</el-link>
                <el-link
                  class="mg-l-10"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除表单</el-link>
                <!-- <el-button
                size="mini"
                @click="handleEditFormula(scope.$index, scope.row)">编辑元素公式</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>

    <!-- 编辑元素表单信息 -->
    <el-dialog
      title="编辑元素表单信息"
      :visible="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>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editElementFormTag = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editeditElementFormMF()"
        >确 定</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="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="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()"
        >确 定</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"
          >
          </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"
          @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="110px"
      >
        <el-form-item
          label="节点名称"
          prop="deptName"
        >
          <el-input v-model="nodeDetail.deptName"></el-input>
        </el-form-item>
        <el-form-item label="上级节点">
          <el-input
            v-model="nodeDetail.parentName"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="节点类型"
          prop="deptCategory"
        >
          <el-select
            v-model="nodeDetail.deptCategory"
            placeholder="请选择"
            class="w-100p"
          >
            <el-option
              v-for="item in deptCategorylist"
              :key="item.id"
              :label="item.dictValue"
              :value="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="划分编号">
          <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.deptCategory == 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="内业资料类型">
          <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>
      <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="deptName"
        >
          <el-input v-model="eleForm.deptName"></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="字段信息"
        >
          <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="120"
        >
          <template slot="header">
            <el-button
              @click="addEleRow(editEleList)"
              type="text"
              icon="el-icon-circle-plus-outline"
              class="text-icon"
            ></el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.id"
              icon="el-icon-remove-outline"
              type="text"
              @click="delEleRowHandle(scope.$index,editEleList)"
              class="text-icon text-icon-danger"
            ></el-button>
            <div
              class="flex"
              v-else
            >
              <el-button
                @click="saveNewEle(scope.row)"
                type="mini"
              >保存</el-button>
              <el-button
                icon="el-icon-remove-outline"
                type="text"
                @click="delEleRowHandle(scope.$index,editEleList)"
                class="text-icon text-icon-danger"
              ></el-button>
            </div>
          </template>
        </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="元素公式"
      :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"
        ></el-input>
        <el-button type="info">保存</el-button>
      </div>
      <el-table
        :data="editEleList"
        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="primary">公式配置</el-link>
            <el-link
              class="mg-l-10"
              type="danger"
              @click="delEleRowHandle(scope.$index,editEleList)"
            >删除</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"
    >
      <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>
        </div>
        <el-table
          :data="nodeInfoTable"
          border
          style="width: 100%"
          height="400"
        >
          <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-danger"
                @click="delNodeInfoss(scope.$index)"
              >删除</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()"
        >保 存</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)"
              >删除</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>

  </basic-container>
</template>

<script>
import ManualSorting from '@/components/WbsTree/ManualSorting'
import dynamicExcel from "./treeTemplate/dynamicExcel.vue";
import {
  saveFormAndElement, selectFormElements,
  importWbsTree, findWbsTreePrivateSameLevel, wbsTreePrivateSort, parameters, saveOrUpdateBatch, keymap, updateBatchNodeTableInfo2
} 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} from "@/api/manager/wbsprivate";
import { findProjectTree as getAlltree } from "@/api/manager/projectinfo";
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'
export default {
  data () {
    return {
      formDatass: [],
      editElementFormTag: false,
      jiedianId: '',
      //#region
      sortTag: false,
      sortTag2: false,
      sortArray: [],
      //#endregion

      //#region 关联清表
      loading: false,
      GLExcel: false,
      GLExcelFrom: {
        id: "",
        name: '',
        search: '',//搜素框舒服的值
        ids: '',
        excelId: '',
        initTableName: '',
      },
      GLExcelData: [],//
      GLExcelProps: {
        label: 'name',
        children: 'children',
        disabled: 'hasChildren',
        // isLeaf: !'hasChildren',
      },
      exceldata: [],//清表模板
      //#endregion

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

      //#region
      id: '',
      projectid: '',
      filterText: '',
      treeData: [],
      treeLoad: false,
      menuShow: false,
      defaultProps: {
        children: 'children',
        label: 'title',
        isLeaf: function (data) {
          return !data.hasChildren;
        }
      },
      leftType: 5,
      curTreeData: {},
      tableData: [],
      nodeDetail: {},
      formData: [],
      editType: 1,

      dialogVisible: false,
      saveNodeLoading: false,
      deptCategorylist: [],
      majorDataTypeList: [],
      rules: {
        deptName: [
          { required: true, message: '请输入节点名称', trigger: 'blur' },
        ],
        deptCategory: [
          { required: true, message: '请选择节点类型', trigger: 'change' }
        ]
      },

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

      importVisible: false,
      tempList: [],

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

      editEleFormulaVisible: false,
      formulaInput: '',

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

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

      infoNameVisible: false,

      excelSortTag:false,
      excelSortTag2:false,
      tableSortList:[],
      //#endregion
    };
  },
  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;
      this.getDeptCategorylist();
      this.getTableTypelist();
      this.getDataTypelist();
      this.getOwnerTypelist();
    },
    loadNode (node, resolve) {
      let pid = 0;
      if (node.level != 0) {
        pid = node.data.id
      }
      getLazytree(this.id, pid, this.userInfo.tenant_id, this.projectid).then((res) => {
        let arr = [];
        if (Array.isArray(res.data.data)) {
          arr = res.data.data;
        }
        return resolve(arr);
      })
    },
    getNodeDetail (data, node) {
      console.log(111);
      let parentName = '';
      if (node.parent.data) {
        parentName = node.parent.data.title;
      }
      this.curTreeData = data;
      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();
    },
    saveNode () {
      this.$refs['nodeDetail'].validate((valid) => {
        if (valid) {
          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.deptName = this.nodeDetail.deptName;
        node.deptCategory = this.nodeDetail.deptCategory;
        this.curTreeData.title = this.nodeDetail.deptName;
        this.dialogVisible = false;
        this.$message({
          type: "success",
          message: "修改成功!"
        });
      })
    },

    setLeftType (type, data, node) {
      this.jiedianId = data.id
      if (type == 4 || type == 5) {
        this.leftType = type;
      }
      this.curTreeData = data;
      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.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;
          } else {
            this.formData = [];
          }
        })
      }

    },

    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.deptCategory = -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;
      selectFormElements(this.curEleTable.id).then((res) => {
        res.data.data.forEach((element) => {
          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.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: "删除成功!"
          });
        })
      })
    },

    handleEditFormula (index, row) {
      this.curEleTable = row;
      selectFormElements(this.curEleTable.id).then((res) => {

        this.editEleList = res.data.data;
      })
      this.editEleFormulaVisible = true;
    },

    saveNewEle (row) {
      row.eAllowDeviation = (row.allow ? row.allow : '') + (row.deviation ? row.deviation : '');
      row.fId = this.curEleTable.id;
      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: "保存成功!"
        });
      }
    },

    filterChange () {
      //console.log(this.$refs)
      //debugger
      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;
        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,
          deptName:form.tableName,
          pkeyId:form.pkeyId,
        }
      })
      this.excelSortTag = true
      this.excelSortTag2 = true
    },
    editPrivateSort(){
      wbsTreePrivateTableSort(this.tableSortList).then(()=>{
        this.updateNodeTable();
        this.$message({
          type: "success",
          message: "排序成功!"
        });
        this.excelSortTag = false;
        this.excelSortTag2 = false;
      })
    },

    getDeptCategorylist () {
      if (this.deptCategorylist.length > 1) {
        return;
      }
      getDictionary({
        code: 'wbs_node_type'
      }).then((res) => {
        res.data.data.forEach(element => {
          element.dictKey = Number(element.dictKey)
        });
        this.deptCategorylist = 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 () {
      if (this.tableTypelist.length > 1) {
        return;
      }
      getDictionary({
        code: '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.deptCategorylist.length; i++) {
        if (this.deptCategorylist[i].dictKey == cellValue) {
          return this.deptCategorylist[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;
    },
    //#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 () {//wbs私有树节点手动排序
      const { data: res } = await wbsTreePrivateSort(this.sort)
      console.log(res);
      if (res.code == 200) {
        this.sortTag = false
        this.sortTag2 = false
        this.getLazytreessss()
      }
    },
    async findWbsTreePrivateSameLevel (da) {//wbs私有树同级节点接口
      const { data: res } = await findWbsTreePrivateSameLevel(da)
      console.log(res);
      if (res.code == 200) {
        this.sort = res.data
      }
    },
    async getLazytreessss () {
      const { data: res } = await getLazytree(this.id, 0, this.userInfo.tenant_id, this.projectid)
      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 () {//清表树信息
      const { data: res } = await tabLazytreeAll({
        modeId: this.GLExcelFrom.name,
        name: this.GLExcelFrom.search,
      })
      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.id = scope.row.pkeyId
      this.GLExcelFrom.excelId = scope.row.excelId
      this.GLExcelFrom.ids = scope.row.id
      this.GLExcelFrom.initTableName = scope.row.initTableName
    },
    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 () {//保存按钮
      if (this.$refs.tree.getCheckedNodes().length > 0) {
        const { data: res } = await saveLinkTab({
          exceTabId: this.$refs.tree.getCheckedNodes()[this.$refs.tree.getCheckedNodes().length - 1].id,
          tabId: this.GLExcelFrom.id,
        })
        console.log(res);
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '关联清表成功',
          })
          this.GLExcel = false
          this.rightClick(this.GLExcelFrom.id, this.GLExcelFrom.excelId, this.GLExcelFrom.ids, this.GLExcelFrom.initTableName,)
        }
      } else {
        this.$message({
          type: 'success',
          message: '请先设置清表',
        })
      }
    },
    filterNode222 (value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //#endregion

    //#region 节点参数
    nodeInfo (data) {//节点参数按钮
      this.keymap()
      this.jiedianId = data.primaryKeyId
      this.parameters(data.primaryKeyId)
      this.nodeInfoVisible = true;
    },
    addNodeInfoTable () {//添加节点参数数据
      this.nodeInfoTable.unshift({ k: '', v: '', remark: '', wbsId: this.jiedianId })
    },
    delNodeInfo (key) {//设置参数名称中的删除按钮
      this.namelists.splice(key, 1)
    },
    delNodeInfoss (key) {//节点参数
      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, })
    },
    async nodeInfoSave () {//节点参数弹框保存按钮
      if (this.nodeInfoTable) {
        let tag = true
        this.nodeInfoTable.forEach(val => {
          if (!val.k | !val.v) {
            return tag = false
          }
        })
        if (tag) {
          await this.saveOrUpdateBatch(this.nodeInfoTable)
          this.nodeInfoVisible = false
          this.$message({
            type: "success",
            message: "设置参数节点成功!"
          })
        } else {
          this.$message({
            type: "error",
            message: "请填写所有的参数名称和参数值!"
          })
        }
      } else {
        this.$message({
          type: "error",
          message: "请先设置参数节点!"
        })
      }
    },
    async addParameterName () {//设置参数名称中的保存按钮
      if (this.namelists) {
        let tag = true
        this.namelists.forEach(val => {
          if (!val.name || !val.k) {
            return tag = false
          }
        })
        if (tag) {
          await this.saveOrUpdateBatch(this.namelists) //保存设置参数
          this.infoNameVisible = false
          this.keymap()
        } else {
          this.$message({
            type: "error",
            message: "请填写所有的参数名称和参数值KEY!"
          })
        }
      } else {
        this.$message({
          type: "error",
          message: "请设置参数"
        })
      }
    },
    closeParameter () {//设置参数名称，关闭按钮
      this.namelists = []
      this.infoNameVisible = false
    },
    async parameters (wbsId) {//获取接待你参数列表
      const { data: res } = await parameters({ wbsId })
      console.log(res);
      if (res.code == 200) {
        this.nodeInfoTable = res.data
      }
    },
    async saveOrUpdateBatch (da) {//保存
      const { data: res } = await saveOrUpdateBatch(da)
      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(excelId)
    },
    async getExcelHtml (excelId) {
      const { data: res } = await getExcelHtml({ excelId })
      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) {
      await this.getExcelHtml2(excelId)
      this.$router.push({
        path: '/project/editElement',
        query: {
          pkeyId: pkeyId,
          excelId: excelId,
          id: id,
          initTableName
        }
      })
    },
    async getExcelHtml2 (excelId) {
      const { data: res } = await getExcelHtml({ excelId })
      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,
          })
        })
        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,
            deptName: val.tableName,
            tableType: val.tableType,
            tableOwner: val.tableOwner,
          })
        }

      })
      if (tag) {
        this.updateBatchNodeTableInfo2(da)
      } else {
        this.$message({
          type: 'success',
          message: '请填写完整元素表单的所有信息!',
        })
      }
    },
    async updateBatchNodeTableInfo2 (da) {//共有编辑元素
      const { data: res } = await updateBatchNodeTableInfo2(da)
      console.log(res);
      if (res.code == 200) {
        this.editElementFormTag = false
        this.updateNodeTable()
      }
    },
    //#endregion
  },
  watch: {
    'GLExcelFrom.search' (val) {
      console.log(val);
      if (this.exceldata) {
        this.$refs.tree.filter(val);
      }
    }
  },
  components: {
    dynamicExcel,
    ManualSorting,
  },
};
</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: block;
    }
  }
  &.show .normal-black {
    display: 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;
}
</style>