saber/src/views/manager/wbsinfo/edit.vue

<template>
  <basic-container>
    <el-row :gutter="20" class="h-100p">
      <el-col :span="10" class="h-100p">
        <div class="h-100p flex flex-d-c">
          <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>
          <div class="flex1 ov-hidden">
          <el-scrollbar class="h-100p">
            <div v-loading="treeLoad">
              <el-tree
                v-show="!filterText"
                class="filter-tree"
                lazy
                :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 }"
                >
                  <!--@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.nodeType != 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
                          @click.native="paixuMD(data)"
                          v-if="node.level != 1"
                          icon="el-icon-sort"
                        >调整排序</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="ImportElement(data)"
                          v-if="node.level != 1&&data.isExistForm==1"
                          icon="el-icon-folder-opened"
                        >导入元素</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.nodeType != 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
                          @click.native="paixuMD(data)"
                          v-if="node.level != 1"
                          icon="el-icon-sort"
                        >调整排序</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="ImportElement(data)"
                          v-if="node.level != 1&&data.isExistForm==1"
                          icon="el-icon-folder-opened"
                        >导入元素</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </span>
                </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">
          <p>节点信息</p>
          <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"
                icon="el-icon-edit-outline"
                class="text-icon"
                @click="editEditElementForm()"
              ></el-button>
              <el-button
                type="text"
                icon="el-icon-sort"
                class="text-icon"
                @click="paixucc()"
              ></el-button>
            </p>
            <div class="mg-t-10">
              <el-button type="primary" size="medium" @click="nodeInfoHandle">节点参数设置</el-button>
              <el-button type="primary" size="medium" @click="eleFormulaHandle">公式设置</el-button>
            </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"
                label="元素总量"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="fillRate"
                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>
          </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="elementTotal"
                label="元素总量"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="fillRate"
                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="操作"
                width="200"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEditFormula(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>
          </div>
        </template>
      </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()"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 导入元素 -->
    <el-dialog
      title="导入元素"
      :visible.sync="ImportElementTag"
      width="30%"
      :modal-append-to-body="false"
      :before-close="ImportElementHandleClose"
    >
      <div>
        <el-link
          type="primary"
          @click="xiazaielement"
        >下载导入模版</el-link>
      </div>
      <el-upload
        class="upload-demo martop10"
        action="#"
        accept=".xlsx,.xls"
        :multiple='false'
        :limit="1"
        :auto-upload="false"
        :on-change="ElementChange"
        :file-list="ImportElementFile"
        :on-remove='ElementRemove'
      >
        <el-button
          v-if="ImportElementFile.length===0"
          size="small"
          type="primary"
        >点击上传</el-button>
        <div
          slot="tip"
          class="el-upload__tip"
        >只能上传xlsx / xls文件</div>
      </el-upload>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="ImportElementHandleClose()">取 消</el-button>
        <el-button
          type="primary"
          :disabled="loding"
          @click="pushImportElement"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- wbs树排序弹框 -->
    <el-dialog
      title="调整排序"
      :visible="sortTag"
      width="50%"
      append-to-body
    >
      <ManualSorting
        v-if="sortTag2"
        @bianhua='bianhua()'
        :sort='sort'
      />
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="sortTag=false,sortTag2=false">取 消</el-button>
        <el-button
          type="primary"
          @click="editSort()"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 元素表排序 -->
    <el-dialog
      title="调整排序"
      :visible="excelSortTag"
      width="50%"
      append-to-body
    >
      <ManualSorting
        v-if="excelSortTag2"
        @bianhua='bianhua2()'
        :sort='sort'
      />
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="excelSortTag=false">取 消</el-button>
        <el-button
          type="primary"
          @click="editExcelSort()"
        >确 定</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="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"
          >
            <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="划分编号">
          <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">
          <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="nodeName"
        >
          <el-input v-model="eleForm.nodeName"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <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="8">
            <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-col :span="8">
            <el-form-item
              label="填报率"
              prop="fillRate"
            > 
              <el-input v-model="eleForm.fillRate"></el-input>
            </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="header">
              <i class="required"></i>
              <span>元素名称</span>
            </template>
            <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="header">
              <i class="required"></i>
              <span>数据类型</span>
            </template>
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.eType"
                @change="setDefaultLength(scope.row)"
                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="header">
              <i class="required"></i>
              <span>长度</span>
            </template>
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.eLength"
                size="small"
                placeholder="请输入内容"
              ></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"
                  :popper-append-to-body="false"
                  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-option
                    :key="5"
                    label="≤"
                    value="≤"
                  ></el-option>
                  <el-option
                    :key="6"
                    label="±"
                    value="±"
                  ></el-option>
                  <el-option
                    :key="7"
                    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="header">
            <i class="required"></i>
            <span>元素名称</span>
          </template>
          <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="header">
            <i class="required"></i>
            <span>数据类型</span>
          </template>
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.eType"
              @change="setDefaultLength(scope.row)"
              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="header">
            <i class="required"></i>
            <span>长度</span>
          </template>
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.eLength"
              size="small"
              placeholder="请输入内容"
            ></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-option
                  :key="5"
                  label="≤"
                  value="≤"
                ></el-option>
                <el-option
                  :key="6"
                  label="±"
                  value="±"
                ></el-option>
                <el-option
                  :key="7"
                  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="scope.row.isSaveFormula == 1?'warning':'primary'"
              @click="toFormulaEdit(scope.row)"
            >公式配置</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="daoruClose"
    >
      <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-primary"
                @click="linkEle(scope.row)"
              >关联元素</el-button>
              <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>

    <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="describe"
            label="关联元素字段"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                class="text-icon-primary"
                @click="tolinkEle(scope.row)"
              >关联元素</el-button>
              <el-button
                type="text"
                size="small"
                class="text-icon-danger"
                @click="delLink(scope.$index)"
              >删除关联</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>

    <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="" :visible.sync="formulaCompVisible" fullscreen append-to-body class="full-dialog">
      <FormulaEdit :wbsid="id" :nodeid="curTreeData.id" :eleid="formulaCurRow.id" @hideDialog="formulaCompVisible = false" v-if="formulaCompVisible"></FormulaEdit>
    </el-dialog>

  </basic-container>
</template>

<script>
import ManualSorting from '@/components/WbsTree/ManualSorting'
import FormulaEdit from '@/views/formula/edit.vue'
import {
  getLazytree, getDetail, update, selectByNodeTable, getAlltree,
  saveFormAndElement, selectFormElements, removeTableById, findWbsTreeSameLevel, wbsTreeSort, findWbsTreeTableSameLevel, wbsTreeTableSort, parameters, saveOrUpdateBatch, keymap, importwbsTreeFormBatch, exportBatchTemplate, updateBatchNodeTableInfo,
  importWbsTree, exportTemplate, remove as removeTreeNode,submitFullName
} from "@/api/manager/wbstree";
import {
  saveElement, remove as removeElement, updateBatchElements, getTemplate,
  importWbsElement
} from "@/api/manager/wbsformelement";
import { getDictionary } from "@/api/system/dict";
import { mapGetters } from "vuex";
import {getStore,setStore} from '@/util/store'
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 {
      loding: false,
      formDatass: [],
      editElementFormTag: false,
      ImportElementdata: {

      },
      ImportElementFile: [],//导入元素file文件
      ImportElementTag: false,
      jiedianId: '',
      excelSortTag: false,
      excelSortTag2: false,
      sortTag2: false,
      sortTag: false,
      sort: [],
      id: '',
      filterText: '',
      treeData: [],
      treeLoad: false,
      menuShow: false,
      defaultProps: {
        children: 'children',
        label: 'title',
        isLeaf: function (data) {
          if (data.hasChildren && data.isExistForm != 1) {
            return false
          } else if (data.hasChildren && data.isExistForm == 1) {
            return true
          } else {
            return true
          }
        }
      },
      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: {},
      editEleVisible: false,
      editEleList: [],
      eleReg: /(-|>|<|≥|≤|±|【】)?([^≥≤±【】]*)/,

      editEleFormulaVisible: false,
      formulaInput: '',

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

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

      //数据类型的默认长度
      dataTypeDefaultMap: {
        1: 250,//字符串
        2: 50,//整数
        3: 50,//小数
        4: 50,//日期
        5: 50,//数值
        6: 50,//签名
        7: 100,//文件
      },

      //节点参数，关联元素
      curParam:{},//当前节点参数
      linkEleVisible:false,
      linkEleTableList:[],//元素表数组
      curLinkEleTable:{},//当前元素表
      linkCheckVisible:false,//关联弹框
      linkEleList:[],//元素数组
      linkEleKey:'',//搜索关键字

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

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

      formulaCompVisible:false,//公式弹框
      formulaCurRow:{},//当前元素
    };
  },
  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 排序
    paixuMD (data) {
      this.sortTag = true
      this.sortTag2 = true
      this.curTreeData = data;
      this.findWbsTreeSameLevel(data.parentId)
    },
    bianhua () {
      this.sortTag2 = false
      this.$nextTick(() => {
        this.sortTag2 = true
      })
    },
    editSort () {//修改排序
      this.wbsTreeSort()
    },
    async wbsTreeSort () {//修改排序
      const { data: res } = await wbsTreeSort(this.sort)
      //console.log(res);
      if (res.code == 200) {
        this.sortTag = false
        this.sortTag2 = false
        this.updateTreeNewNode();
      }
    },
    async findWbsTreeSameLevel (parentId) {//查询当前节点的同级节点
      const { data: res } = await findWbsTreeSameLevel({ parentId })
      //console.log(res);
      if (res.code === 200) {
        this.sort = res.data
      }
    },
    async getLazytree () {//冲洗获取wbs树
      const { data: res } = await getLazytree(this.id, 0, this.userInfo.tenant_id)
      //console.log(res);
      if (res.code == 200) {
        this.treeData = res.data
      }
    },
    bianhua2 () {
      this.excelSortTag2 = false
      this.$nextTick(() => {
        this.excelSortTag2 = true
      })
    },
    editExcelSort () {//确定按钮
      this.wbsTreeTableSort()
    },
    paixucc () {
      if (this.curTreeData.value) {
        this.excelSortTag = true
        this.excelSortTag2 = true
        this.findWbsTreeTableSameLevel(this.curTreeData.value)
      } else {
        this.$message({
          type: "warning",
          message: "请先选择需要排序的节点"
        })
      }
    },
    async findWbsTreeTableSameLevel (id) {//查询表单
      const { data: res } = await findWbsTreeTableSameLevel({ id })
      //console.log(res);
      if (res.code == 200) {
        this.sort = res.data
      }
    },
    async wbsTreeTableSort () {//表单排序
      const { data: res } = await wbsTreeTableSort(this.sort)
      //console.log(res);
      if (res.code == 200) {
        this.excelSortTag = false
        this.excelSortTag2 = false
        this.updateNodeTable();//更新元素表
      }
    },
    //#endregion

    //#region 甘云杰
    init () {
      this.id = this.$route.params.id;
      this.getNodeTypelist();
      this.getTableTypelist();
      this.getDataTypelist();
      this.getOwnerTypelist();

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

    getNodeDetail (data, node) {
      let parentName = '';
      if (node.parent.data) {
        parentName = node.parent.data.title;
      }
      this.curTreeData = data;
      this.curTreeNode = node;
      this.curTreeData.parentName = parentName;
      getDetail(data.id).then((res) => {
        res.data.data.parentName = parentName;
        this.tableData = [res.data.data];
        this.nodeDetail = Object.assign({}, res.data.data);
      })
      this.updateNodeTable();

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

    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.nodeName = this.nodeDetail.nodeName;
        node.nodeType = this.nodeDetail.nodeType;
        this.curTreeData.title = this.nodeDetail.nodeName;
        this.dialogVisible = false;
        this.$message({
          type: "success",
          message: "修改成功!"
        });
      })
    },

    setLeftType (type, data, node) {
      //console.log(type)
      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).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: data.title
          };
        } 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).then((res) => {
          if (res.data.data.length) {
            this.formData = res.data.data;
          } else {
            this.formData = [];
          }
        })
      }

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

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

      });
    },

    showFormElement () {
      if (!this.nodeDetail.id) {
        this.$message({
          type: "warning",
          message: "请先选择在哪个节点下创建表"
        });
        return;
      }
      this.eleForm = {
        elementList: []
      };
      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;
          for (let i = 0; i < this.eleForm.elementList.length; i++) {
            if (!this.eleForm.elementList[i].eName) {
              this.$message({
                type: "warning",
                message: "请填写第" + (i + 1) + "条元素名称"
              });
              return;
            }
            if (!this.eleForm.elementList[i].eType) {
              this.$message({
                type: "warning",
                message: "请选择第" + (i + 1) + "条数据类型"
              });
              return;
            }
            if ( !this.eleForm.elementList[i].eLength) {
              this.$message({
                type: "warning",
                message: "请填写第" + (i + 1) + "条长度"
              });
              return;
            }
          }
          this.eleForm.elementList.forEach((element) => {
            element.eAllowDeviation = (element.allow ? element.allow : '') + (element.deviation ? element.deviation : '');
            // if (element.eType == 4) {
            //   this.$set(element, 'eLength', 0);
            //   //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 () {
      let detail = (this.nodeDetail.parentId ? this.nodeDetail : this.curTreeData);
      getLazytree(this.id, detail.parentId).then((res) => {
        let node = this.$refs.tree.getNode(detail.parentId);
        node.isLeaf = false;
        node.isLeafByUser = false;
        //console.log(node)
        this.$refs.tree.updateKeyChildren(detail.parentId, res.data.data)
      })
    },

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

    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).then((res) => {
          //console.log(res)
          if(res.data.success){
            this.formData.splice(index, 1);
            //this.updateTreeNewNode();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }else{
            this.$message({
              type: "error",
              message: res.data.msg
            });
          }

        })
      })
    },

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

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

    saveNewEle (row) {
      if (!row.eName) {
        this.$message({
          type: "warning",
          message: "请填写元素名称"
        });
        return;
      }
      if (!row.eType) {
        this.$message({
          type: "warning",
          message: "请选择数据类型"
        });
        return;
      }

      row.eAllowDeviation = (row.allow ? row.allow : '') + (row.deviation ? row.deviation : '');
      row.fId = this.curEleTable.id;
      row.initTableName = this.curEleTable.initTableName;
      // if (row.eType == 4) {
      //   this.$set(row, 'eLength', 0);
      //   //row.eLength = 0;
      // } else
      if (!row.eLength) {
        this.$message({
          type: "warning",
          message: "请填写长度"
        });
        return;
      }

      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);
          })
          this.curEleTable.elementTotal --;
        })
      } 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[i].eName) {
          this.$message({
            type: "warning",
            message: "请填写第" + (i + 1) + "条元素名称"
          });
          return;
        }
        if (!this.editEleList[i].eType) {
          this.$message({
            type: "warning",
            message: "请选择第" + (i + 1) + "条数据类型"
          });
          return;
        }
        if ( !this.editEleList[i].eLength) {
          this.$message({
            type: "warning",
            message: "请填写第" + (i + 1) + "条长度"
          });
          return;
        }
      }
      if (this.editEleList.length > 0) {
        this.editEleList.forEach((element) => {
          element.eAllowDeviation = (element.allow ? element.allow : '') + (element.deviation ? element.deviation : '');
          // if (element.eType == 4) {
          //   this.$set(element, 'eLength', 0);
          //   //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.userInfo.tenant_id, 1, 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;
    },
    daoruClose () {
      this.upFile = null
    },
    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 () {//WBS划分模板
      exportTemplate().then((res) => {
        this.downloadExcel(res.data, 'WBS划分模板')
      })
    },

    fileClick () {
      this.$refs.file.click();
    },

    fileChange (e) {
      const file = e.target.files[0]
      if (!file) {
        // 如果用户没有选择图片,只是点了文件上传这个按钮
        return
      }
      //console.log(file)
      this.upFile = file;
    },
    downloadTmp () {
      getTemplate().then((res) => {
        //console.log(res)
        this.downloadExcel(res.data, '元素模板')
      })
    },

    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;
          if (element.eAllowDeviation.indexOf(',') > 0) {
            element.allow = '【】';
            element.deviation = element.eAllowDeviation;
          } else {
            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)
    },

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

    toFormulaEdit (row) {
      // this.$router.push({
      //   path: '/formula/edit',
      //   query: {
      //     wbsid: this.id,
      //     eleid: row.id,
      //     nodeid:this.curTreeData.id
      //   }
      // });
      //this.editEleFormulaVisible = false;

      this.formulaCurRow = row;
      this.formulaCompVisible = true;
    },

    getNodeTypelist () {
      if (this.nodeTypelist.length > 1) {
        return;
      }
      getDictionary({
        code: '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 () {
      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.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;
      //console.log(cellValue)
    },

    filterNode (value, data) {
      //console.log(value)
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },

    //修改数据类型，给个默认值
    setDefaultLength (row) {
      this.$set(row, 'eLength', this.dataTypeDefaultMap[row.eType]);
    },

    //#endregion

    //#region 节点参数
    nodeInfo (data) {//节点参数按钮
      this.keymap()
      this.jiedianId = data.id
      this.parameters(data.id)
      this.nodeInfoVisible = true;
    },
    addNodeInfoTable () {//添加节点参数数据
      this.nodeInfoTable.unshift({ k: '', v: '', remark: '', wbsId: this.jiedianId,type: 1 })
    },
    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(!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) {
          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.length) {
        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: "warning",
          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 导入元素
    ImportElement (data) {//导入元素按钮
      console.log(data);
      this.ImportElementdata.ancestors = data.ancestors
      this.ImportElementdata.id = data.id
      this.ImportElementTag = true

    },
    async pushImportElement () {//确定按钮
      if (this.ImportElementFile.length > 0) {
        let formData = new FormData()
        formData.append('wbsId', this.$route.params.id)
        formData.append('ancestors', this.ImportElementdata.ancestors)
        formData.append('id', this.ImportElementdata.id)
        formData.append('tenantId', this.userInfo.tenant_id)
        formData.append('excelFile', this.ImportElementFile[0].raw)
        await this.importwbsTreeFormBatch(formData)
        this.ImportElementFile = []
        this.ImportElementTag = false
      }
    },
    ImportElementHandleClose () {//关闭弹框事件
      this.ImportElementTag = false
      this.loding = false
      this.ImportElementFile = []
    },
    ElementChange (file, fileList) {//文件上传时的钩子
      //console.log(fileList);
      if (this.ImportElementFile.length == 0) {
        this.ImportElementFile = fileList
      }
    },
    ElementRemove (file, fileList) {
      this.ImportElementFile = fileList
    },
    async importwbsTreeFormBatch (da) {
      this.loding = true
      try {
        const { data: res } = await importwbsTreeFormBatch(da)
        console.log(res);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "导入成功!"
          })
        }
        this.loding = false
      } catch (error) {
        this.loding = false
      }
    },
    async exportBatchTemplate () {
      const res = await exportBatchTemplate()
      //console.log(res);
      if (res.status == 200) {
        this.downloadExcel(res.data, '导入元素模板')
      }
    },
    xiazaielement () {
      this.exportBatchTemplate()
    },
    //#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,
            id: val.id,
            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({
            id: val.id,
            nodeName: val.tableName,
            tableType: val.tableType,
            tableOwner: val.tableOwner,
            fillRate: val.fillRate,
          })
        }

      })
      if (tag) {
        this.updateBatchNodeTableInfo(da)
      } else {
        this.$message({
          type: 'success',
          message: '请填写完整元素表单的所有信息!',
        })
      }
    },
    async updateBatchNodeTableInfo (da) {//共有编辑元素
      const { data: res } = await updateBatchNodeTableInfo(da)
      //console.log(res);
      if (res.code == 200) {
        this.editElementFormTag = false
        this.updateNodeTable()
      }
    },
    //#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)
    },

    //节点参数 关联元素
    linkEle(row){
      this.linkEleVisible = true;
      this.curParam = row;
      selectByNodeTable(this.jiedianId).then((res) => {
        if (res.data.data.length) {
          this.linkEleTableList = res.data.data;
        } else {
          this.linkEleTableList = [];
        }
      })
    },

    //保存关联
    saveLinks(){

    },

    //删除关联
    delLink(){

    },

    //关联元素弹框
    tolinkEle(row){
      this.curLinkEleTable = row;
      this.linkCheckVisible = true;
      selectFormElements(row.id).then((res) => {
        res.data.data.forEach((ele)=>{
          ele.checked = false;
          ele.show = true;
        })
        this.linkEleList = res.data.data;
        this.linkEleListAll = [].concat(this.linkEleList);
      })
    },

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

    //关联元素
    saveLinkEle(){

    },

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

    //触发节点参数
    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);
    },

    //显示别名弹窗
    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) {
        //编辑 公有
        submitFullName(
          this.nodeDetail.id,this.nodeDetail.fullName
        ).then(()=>{
          this.$message({
            type: 'success',
            message: '保存成功',
          })
          this.aliasVisible = false;
        })
      }
    }


  },
  components: {
    ManualSorting,
    FormulaEdit
  }
};
</script>

<style scoped lang="scss">
//树结构超长后产生滚动条
.el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
.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;
  }
}
.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;
  }

  /deep/ .basic-container{
    height: calc(100vh - 60px);
  }
}
</style>