saber/src/views/manager/wbsinfo/edit.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
                :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>
                    {{ 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">新增子级</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-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>
                    {{ 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">新增子级</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-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>
        </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="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="操作" 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>
      </template>
  </el-col>
</el-row>

  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" append-to-body :close-on-click-modal="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">确 定</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="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" 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="请输入内容" :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="5" label=">" value=">"></el-option>
                    <el-option :key="6" label="<" value="<"></el-option>
                    <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="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" 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="请输入内容" :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="5" label=">" value=">"></el-option>
                  <el-option :key="6" label="<" value="<"></el-option>
                  <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" @click="toFormulaEdit">公式配置</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 :close-on-click-modal="false" :show-close="false">
      <div>
        <el-button
          type="text" icon="el-icon-s-operation" class="right-btn"
          @click="infoNameVisible = true"></el-button>
        <el-table :data="nodeInfoTable" border style="width: 100%" height="400">
          <el-table-column align="center" prop="name" label="参数名称">
            <template slot-scope="scope">
              <template v-if="scope.row.isEdit">
                <el-select v-model="scope.row.name" placeholder="请选择" class="w-100p">
                  <el-option v-for="item in namelist" :key="item.id" :label="item.dictValue"  :value="item.dictKey"></el-option>
                </el-select>
              </template>
              <template v-else>
                {{scope.row.name}}
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="value" label="参数值设置">
            <template slot-scope="scope">
              <template v-if="scope.row.isEdit">
                <el-input v-model="scope.row.value"></el-input>
              </template>
              <template v-else>
                {{scope.row.value}}
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="describe" label="描述">
            <template slot-scope="scope">
              <template v-if="scope.row.isEdit">
                <el-input v-model="scope.row.describe"></el-input>
              </template>
              <template v-else>
                {{scope.row.describe}}
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button
                type="text" size="small" v-show="scope.row.isEdit"
                @click="saveNodeInfoHandle(scope.$index, scope.row)">保存</el-button>
              <el-button
                type="text" size="small" v-show="!scope.row.isEdit"
                @click="editNodeInfo(scope.$index, scope.row)">编辑</el-button>
              <el-button
                type="text" size="small" class="text-icon-danger"
                @click="delNodeInfo(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="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 :close-on-click-modal="false">
      <div>
        <el-table :data="namelist" border style="width: 100%" height="400">
          <el-table-column align="center" prop="name" label="参数名称">
            <template slot-scope="scope">
              <template v-if="scope.row.isEdit">
                <el-input v-model="scope.row.name"></el-input>
              </template>
              <template v-else>
                {{scope.row.name}}
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="key" label="参数值KEY">
            <template slot-scope="scope">
              <template v-if="scope.row.isEdit">
                <el-input v-model="scope.row.key"></el-input>
              </template>
              <template v-else>
                {{scope.row.key}}
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="describe" label="描述">
            <template slot-scope="scope">
              <template v-if="scope.row.isEdit">
                <el-input v-model="scope.row.describe"></el-input>
              </template>
              <template v-else>
                {{scope.row.describe}}
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button
                type="text" size="small" v-show="scope.row.isEdit"
                @click="saveNodeInfoHandle(scope.$index, scope.row)">保存</el-button>
              <el-button
                type="text" size="small" v-show="!scope.row.isEdit"
                @click="editNodeInfo(scope.$index, scope.row)">编辑</el-button>
              <el-button
                type="text" size="small" class="text-icon-danger"
                @click="delNodeInfo(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoNameVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

</basic-container>
</template>

<script>
  import {getLazytree,getDetail,update,selectByNodeTable,getAlltree,
            saveFormAndElement,selectFormElements,removeTableById,
            importWbsTree,exportTemplate,remove as removeTreeNode} 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";
  export default {
    data() {
      return {
        id:'',
        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,
        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:[],

        infoNameVisible:false,
      };
    },
    computed: {
      ...mapGetters(["userInfo"]),

      dialogTitle:function(){
        let text = '节点';
        if(this.leftType == 1){
          text = '新增'+text;
        }else if(this.leftType == 2){
          text = '编辑'+text;
        }
        return text;
      },
    },
    created() {
      this.init();
      //console.log(this.userInfo)
    },
    methods: {
      init(){
        this.id = this.$route.params.id;
        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).then((res)=>{
          let arr = [];
          if(Array.isArray(res.data.data)){
            arr = res.data.data;
          }
          return resolve(arr);
        })
      },

      getNodeDetail(data,node){
        //console.log(data,node,ref)
        let parentName = '';
        if(node.parent.data){
          parentName = node.parent.data.title;
        }
        this.curTreeData = data;
        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();
      },

      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(){
        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){
        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).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
            };
          }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 = [];
            }
          })
        }

      },

      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.deptCategory = -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].eType != 4 && !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(){
        getLazytree(this.id ,this.nodeDetail.parentId).then((res)=>{
          let node = this.$refs.tree.getNode(this.nodeDetail.parentId);
          node.isLeaf = false;
          node.isLeafByUser = false;
          //console.log(node)
          this.$refs.tree.updateKeyChildren(this.nodeDetail.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(()=>{
            this.formData.splice(index,1);
            //this.updateTreeNewNode();
            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){
        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);
            })
          })
        }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].eType != 4 && !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,'',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;
        
      },

      importTemplateHandle(){
        if(!this.upFile){
          this.$message({
            type: "warning",
            message: "请先选择文件再进行导入"
          });
        }
        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;
      },

      nodeInfo(){
        this.nodeInfoVisible = true;
      },
      nodeInfoSave(){

      },

      delNodeInfo(){

      },
      editNodeInfo(index,row){
        this.$set(row,'isEdit',true);
      },
      saveNodeInfoHandle(index,row){
        row.isEdit = false;
      },

      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;
            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(){
        this.$router.push({
          path:'/formula/edit',
          query:{
            wbsid:this.id,
          }
        });
      },

      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;
        //console.log(cellValue)
      },

      filterNode(value, data) {
        //console.log(value)
        if (!value) return true;
        return data.title.indexOf(value) !== -1;
      }
    }
  };
</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;
    }
    
  }
  
</style>