saber/src/views/exctab/ElementIdentification/index.vue

<template>
  <div class="boxswai">
    <div class="boxnei">
      <el-row
        :gutter="0"
        style="height:100%;"
      >
        <el-col
          :span="showLeft?5:0"
          style="height:99%;"
        >
          <div
            style="fontSize:18px; font-weight: 900;"
            class="marbottom5"
          >元素识别</div>

          <div style="height:98%;overflow: auto;width:auto;">
            <div class="flex">
              <el-input
                size="small"
                placeholder="输入关键字搜索"
                clearable
                @clear="allTreeShow = false"
                v-model="filterText">
              </el-input>
              <el-button size="small" class="mg-l-10" @click="treeFilter">搜索</el-button>
            </div>

            <el-tree
              :data="treeData"
              :props="treeProps"
              @node-click="handleNodeClick"
              :load="loadNode"
              :expand-on-click-node="false"
              lazy
              v-show="!allTreeShow"
            ></el-tree>

            <el-tree
              style="width:100%;"
              ref="treeall"
              v-loading="treeloading"
              :data="allTreeData"
              :props="treeProps"
              @node-click="handleNodeClick"
              node-key="id"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              v-show="allTreeShow"
            >
            </el-tree>
          </div>
        </el-col>
        <el-col
          :span="showLeft?19:24"
          style="height:98%;display: flex;"
        >
          <div class="flex flex-center" style="width:20px;height:100%;cursor: pointer;" @click="showLeftChange">
            <i v-if="showLeft" class="el-icon-d-arrow-left"></i>
            <i v-else class="el-icon-d-arrow-right"></i>
          </div>
          <div class="flex1" style="padding-left:10px;">
            <div v-if="addElementForm.nodeName==''">表名称</div>
            <div v-else>{{addElementForm.nodeName}}</div>
            <el-row
              class="martop20"
              :gutter="20"
              style="height:96%;"
            >
              <el-col
                :span="showLeft?16:12"
                style="overflow:auto;height:100%;border:1px solid black; border-radius: 4px;box-sizing: border-box;padding: 10px 10px;"
              >
                <div
                  class="parent"
                  id='parent'
                  @dblclick="dblBtnClick($event)"
                  @click="parentClick($event)"
                >
                </div>
              </el-col>
              <el-col
                :span="showLeft?8:12" ref="tablescroll"
                style="height:100%;"
                :style="{'overflow':'auto'}"
              > 
              <div class="region">
                <div class="flexBetween flexItemsC">
                  <div>
                    <!-- <el-button
                      type="info"
                      size="mini"
                      :disabled="from.id==''"
                      @click="automaticRecognition"
                    >自动识别</el-button> -->
                    <el-button
                      type="success"
                      size="mini"
                      @click="establish()"
                      :disabled="from.id==''"
                    >关联WBS并创建元素</el-button>
                  </div>
                  <div
                    class="el-icon-plus"
                    @click="pushTableData"
                    style="width:16px;height:16px;backgroundColor:#1DD81D;color:#fff;cursor: pointer;"
                  ></div>
                </div>
                <el-table
                  class="martop20"
                  :data="tableData"
                  border :row-class-name="tableRowClassName"
                  style="width: 100%"
                >
                  <el-table-column
                    type="index"
                    label="坐标"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="textInfo"
                    label="元素名称"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.textInfo"
                        placeholder="请输入内容"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="textElementType"
                    label="数据类型"
                  >
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.textElementType"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in dataType"
                          :key="item.dictKey"
                          :label="item.dictValue"
                          :value="item.dictKey"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="textDeviation"
                    label="允许偏差值"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.textDeviation"
                        placeholder="请输入内容"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                      <el-link style="margin-right:16px;"
                        type="success"
                        @click="saveELe(scope.row)"
                      >保存</el-link>
                      <el-link
                        type="danger"
                        @click="deleteTableData(scope.$index)"
                      >删除</el-link>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- <el-button
                  type="success"
                  class="martop20 dingwei"
                  @click="establish()"
                  :disabled="from.id==''"
                >关联WBS并创建元素</el-button> -->

                <el-dialog
                  title="编辑元素信息"
                  :visible.sync="editTitleDialog"
                  width="80%"
                  :modal-append-to-body='false'
                  :append-to-body="false"
                >
                  <div>
                    <draggable v-model="titleList">
                      <div
                        v-for="(item,key) in titleList"
                        :key="key"
                        class="flexBetween flexItemsC title-item"
                      >
                        <div>
                          <span>{{item}}</span>
                        </div>
                        <div class="flexItemsC">
                          <i
                            @click="listUp(key)"
                            class="el-icon-top"
                            :style="{'font-size':'20px','color':key==0 ?'#aaa':'#0A8CD5', 'cursor': key!=0?'pointer':'default'}"
                          ></i>
                          <i
                            @click="listDown(key)"
                            class="el-icon-bottom marleft5"
                            :style="{'font-size':'20px','color':key==titleList.length-1?'#aaa':'#0A8CD5', 'cursor':  key!=titleList.length-1?'pointer':'default'}"
                          ></i>
                          <i
                            @click="deleTitle(key)"
                            class="el-icon-circle-close marleft5"
                            :style="{'font-size':'20px',
                            'color':'#ee7049','cursor':'pointer'}"
                          ></i>
                        </div>
                      </div>
                    </draggable>
                  </div>
                  <div style="margin-top:50px;">
                    <div class="flex jc-sb mg-b-10">
                      <div class="flex jc-al-c">
                        <span style="margin-right:10px;">数据类型</span>
                        <el-select
                          v-model="titleForm.textElementType"
                          placeholder="请选择" style="width:130px"
                        >
                          <el-option
                            v-for="item in dataType"
                            :key="item.dictKey"
                            :label="item.dictValue"
                            :value="item.dictKey"
                          >
                          </el-option>
                        </el-select>
                        <span style="margin:0 10px;">允许偏差值</span>
                        <el-input
                          v-model="titleForm.textDeviation"
                          placeholder="请输入内容" style="width:150px"
                        ></el-input>
                      </div>
                      <div>
                        <el-button size="medium" type="primary" @click="setTitleText">合成文本</el-button>
                      </div>
                    </div>
                    <el-input type="textarea" rows="5" v-model="titleForm.textInfo"></el-input>
                  </div>
                  <el-alert
                    title="该输入框没有匹配到对应元素字段，确定修改将会新增一个元素字段" v-if="titleIndex < 0"
                    type="warning" :closable="false"
                    effect="dark" style="margin-top:10px;">
                  </el-alert>
                  <span
                    slot="footer"
                    class="dialog-footer"
                  >
                    <el-button @click="editTitleDialog = false">取 消</el-button>
                    <el-button
                      type="primary"
                      v-throttle='2000'
                      @click="editTitle()"
                    >确定修改</el-button>
                  </span>
                </el-dialog>

                <el-dialog
                  title="添加新元素字段"
                  :visible.sync="addNewElementDialog"
                  :before-close="handleClose"
                  width="80%"
                  :modal-append-to-body='false'
                  :append-to-body="false"
                >
                  <div>
                    <!-- <i
                      @click="addNewElement"
                      class="el-icon-circle-plus marbottom10"
                      style="color:red; font-size:24px; float: right;cursor: pointer;"
                    ></i> -->
                    <div>
                      <draggable v-model="titleList">
                        <div
                          v-for="(item,key) in titleList"
                          :key="key"
                          class="flexBetween flexItemsC title-item"
                        >
                          <div>
                            <span>{{item}}</span>
                          </div>
                          <div class="flexItemsC">
                            <i
                              @click="listUp(key)"
                              class="el-icon-top"
                              :style="{'font-size':'20px','color':key==0 ?'#aaa':'#0A8CD5', 'cursor': key!=0?'pointer':'default'}"
                            ></i>
                            <i
                              @click="listDown(key)"
                              class="el-icon-bottom marleft5"
                              :style="{'font-size':'20px','color':key==titleList.length-1?'#aaa':'#0A8CD5', 'cursor':  key!=titleList.length-1?'pointer':'default'}"
                            ></i>
                            <i
                              @click="deleTitle(key)"
                              class="el-icon-circle-close marleft5"
                              :style="{'font-size':'20px',
                              'color':'#ee7049','cursor':'pointer'}"
                            ></i>
                          </div>
                        </div>
                      </draggable>
                      <div class="flex jc-sb mg-b-10">
                        <div class="flex jc-al-c">
                          
                        </div>
                        <div>
                          <el-button size="medium" type="primary" @click="setTitleText">合成文本</el-button>
                        </div>
                      </div>
                    </div>
                    <el-table
                      :data="newElements"
                      height="250"
                      border
                      style="width: 100%"
                    >
                      <el-table-column
                        label="元素名称"
                      >
                        <template slot-scope="scope">
                          <el-input
                            v-model="scope.row.textInfo"
                            placeholder="请输入内容"
                          ></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="textElementType"
                        label="数据类型"
                      >
                        <template slot-scope="scope">
                          <el-select
                            v-model="scope.row.textElementType"
                            placeholder="请选择"
                          >
                            <el-option
                              v-for="item in dataType"
                              :key="item.dictKey"
                              :label="item.dictValue"
                              :value="item.dictKey"
                            >
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="textDeviation"
                        label="允许偏差值"
                      >
                        <template slot-scope="scope">
                          <el-input
                            v-model="scope.row.textDeviation"
                            placeholder="请输入内容"
                          ></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        align="center"
                        width="120"
                        label="操作"
                      >
                        <template slot-scope="scope">
                          <el-button
                            type="danger"
                            size="mini"
                            @click="deleteNewElement(scope.$index)"
                          >删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <span
                    slot="footer"
                    class="dialog-footer"
                  >
                    <el-button @click="handleClose()">取 消</el-button>
                    <el-button
                      type="primary"
                      v-throttle='2000'
                      :disabled="newElements.length===0"
                      @click="addNewElementHandle()"
                    >确 定</el-button>
                  </span>
                </el-dialog>

              </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <!-- 关联公共WBS模板 -->
      <el-dialog
        title="关联公共WBS模板"
        class="excelBox"
        :visible.sync="AssociatedPublicTap"
        modal-append-to-body
        append-to-body
        :close-on-click-modal="false"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-select
              style="width:100%;"
              v-model="GLExcelFrom.name"
              placeholder="请选择"
              @change="changetherr()"
            >
              <el-option
                v-for="(item,key) in GLExcelData"
                :key="key"
                :label="item.wbsName"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-scrollbar style="height:50vh;">
              <el-tree
                v-if="GLExcelFromtag"
                @node-click="handleNodeClickExcel"
                ref="tree"
                class="filter-tree"
                style="margin-top:10px;"
                :props="GLExcelProps"
                :data="exceldata"
                :load="loadNodeTan"
                lazy
                node-key="id"
                accordion
                :show-checkbox="activeName == 'add'"
                :check-strictly="true"
              >
              </el-tree>
            </el-scrollbar>
          </el-col>
          <el-col
            :span="12"
            v-if="addElementForm.wbsId"
          >
             <el-tabs v-model="activeName" type="card" >
              <el-tab-pane label="关联元素表" name="link">
                <el-table
                  :data="addTableData"
                  border
                  style="width: 100%"
                  class="martop20"
                >
                  <el-table-column
                    prop="tableName"
                    label="已有元素表名称"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="操作"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        style="margin:0px;"
                        @click="relationMD(scope.row,'关联')"
                        v-show="!scope.row.checknd"
                        :loading="scope.row.loading"
                      >选择关联</el-button>
                      <el-button
                        type="danger"
                        size="mini"
                        style="margin:0px;"
                        @click="relationMD(scope.row,'取消关联')"
                        v-show="scope.row.checknd"
                        :loading="scope.row.loading"
                      >取消关联</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="新增元素表" name="add">
                <div>
                  <div class="flexBetween martop20">
                    <el-input
                      v-model="addElementForm.nodeName"
                      placeholder="请输入表名"
                    ></el-input>
                    <el-select
                      class="marleft10"
                      v-model="addElementForm.tableType"
                      placeholder="请选择表类型"
                    >
                      <el-option
                        v-for="(item,index) in  exceltypeData"
                        :key="index"
                        :label="item.dictValue"
                        :value="item.dictKey"
                      ></el-option>
                    </el-select>
                  </div>
                  <el-select
                    style="width:100%;"
                    class="martop20"
                    v-model="addElementForm.tableOwner"
                    placeholder="请选择所属方"
                  >
                    <el-option
                      v-for="(item,index) in ownerTypeList"
                      :key="index"
                      :label="item.dictValue"
                      :value="item.dictKey"
                    ></el-option>
                  </el-select>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
        <span
          slot="footer"
          class="dialog-footer"
          style="display: flex;justify-content: center;align-items: center;"
        >
          <el-button @click="AssociatedPublicClose()">取 消</el-button>
          <el-button
            style="margin-left:30px;"
            type="primary"
            @click="saveElementMD()"
          >确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import { tabLazytree, getExcelHtmlCol, excelType, submitExcelRelationWbsTreeAndElement, getWbsTypeList, getLazytree,cancelRelation,saveRelation,searchNodeTables,tabLazytreeAll,exctabcellSave,exctabcellRemove , exctabcellUpdate} from "@/api/exctab/excelmodel";
import { dictionarydataType } from "@/api/exctab/editelement";
import { getColByTabId } from "@/api/manager/AdjustForm";
import { selectByNodeTable } from "@/api/manager/wbstree";
import { getDictionary } from "@/api/system/dict";
import Vue from 'vue'
import draggable from 'vuedraggable'
export default {
  data () {
    return {
      //#region 左侧树节点
      treeData: [],
      treeProps: {
        label: 'name',
        children: 'children',
        isLeaf: 'hasChildren'
      },
      //#endregion
      excelSrc: '',
      from: {
        id: '',
      },
      tableData: [],//外层table
      dataType: [],
      filterText:"",//搜索关键字
      allTreeShow:false,//是否显示整棵树
      treeloading:false,
      AssociatedPublicTap: false,
      //#region 弹框属性
      GLExcelFrom: {
        id: "",
        name: '',
        search: '',//搜素框舒服的值
      },
      GLExcelData: [],//
      allTreeData:[],
      GLExcelProps: {
        label: 'title',
        children: 'children',
        isLeaf: function (data) {
          if (data.hasChildren && data.isExistForm != 1) {
            return false
          } else if (data.hasChildren && data.isExistForm == 1) {
            return true
          } else {
            return true
          }
        }
      },
      exceldata: [],//清表模板树数据
      addTableData: [],//新增元素信息表
      exceltypeData: [],//清表类型
      addElement: false,
      GLExcelFromtag: false,
      addElementForm: {
        id: "",
        initTableName: "",
        nodeName: '',
        tableType: '',
        tableOwner: '',
        wbsId: '',
        parentId: '',
      },
      //#endregion

      ownerTypeList: [],

      activeName:'link',

      showLeft:true,//左侧树是否显示

      addNewElementDialog:false,//新增元素弹窗
      newElements:[],

      editTitleDialog:false,//编辑标题弹窗
      titleList:[],//标题拆分的列表
      titleForm:{
        exctabId:'',
        id:'',
        textInfo:'',
        textElementType:'',
        textDeviation:'',
      },
      titleIndex:-1,
    }
  },
  components: {
      draggable,
  },
  methods: {

    //搜索树
    treeFilter(){
      if(this.filterText){
        this.allTreeShow = true;
        if(!this.allTreeData.length){
          this.treeloading = true;
          tabLazytreeAll({
            modeId: this.$route.params.id,
            name:'',
          }).then((res)=>{
            this.treeloading = false;
            this.allTreeData = res.data.data;
            this.$nextTick(()=>{
              this.$refs.treeall.filter(this.filterText);
            })
          })
        }else{
          this.$refs.treeall.filter(this.filterText);
        }
      }else{
        this.allTreeShow = false;
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //#region
    handleNodeClick (data) {//树节点点击事件
      console.log(data);
      if (data.fileType == 3) {
        this.getExcelHtmlCol(data.id)//获取excel模板
        if (this.dataType.length == 0) {
          this.dictionarydataType() //数据类型字典
        }
        this.addElement = false
        this.addElementForm.nodeName = data.name
        if(data.tabType > 0 && data.tabType < 100){
          this.addElementForm.tableType = data.tabType+'';
        }else{
          this.addElementForm.tableType = ''
        }

        this.from.id = data.id

        this.tableData = [];

        //触发自动识别按钮
        this.automaticRecognition();
      }
    },
    async loadNode (node, resolve) {//懒加载获取节点
      if (node.level === 0) {
        return resolve(await this.tabLazytree(this.$route.params.id, 0))
      }
      if (node.level > 0) {
        return resolve(await this.tabLazytree(this.$route.params.id, node.data.id))
      }
    },
    automaticRecognition () {//自动识别按钮
      this.getColByTabId()
    },
    pushTableData () {//
      // if (this.from.id) {
      //   this.tableData.unshift({
      //     eName: '',
      //     eType: 1,
      //     eAllowDeviation: ''
      //   })
      // }

      if (this.from.id) {
        this.showLeft = false;
        this.addNewElementDialog = true;
        this.titleList = [];
      }
    },
    deleteTableData (key) {//删除
      exctabcellRemove(this.tableData[key].id).then(()=>{
        this.tableData.splice(key, 1)
        this.$message({
          type: "success",
          message: "删除成功!"
        });
      })
    },
    async getColByTabId () {//获取字段信息
      const { data: res } = await getColByTabId({ tabId: this.from.id })
      console.log(res);
      if (res.code === 200) {
        res.data.forEach((element)=>{
          //element.eName = element.textInfo;
          if(element.textElementType < 1){
            element.textElementType = 1;
          }
        })
        this.tableData = res.data
      }
    },
    async getExcelHtmlCol (id) {//获取excel模板
      const { data: res } = await getExcelHtmlCol({ id })
      console.log(res);
      if (res.code == 200) {
        // let _that = this
        var MyComponent = await Vue.extend({
          data () {
            return {
              formData: {}
            }
          },
          template: res.data,
        })
        var component = new MyComponent().$mount()
        let na = document.getElementById('parent')
        na.innerHTML = `<div
        class='parent'
        id='parent'"
      ></div>`
        document.getElementById('parent').appendChild(component.$el);
      }
    },
    //#endregion

    //#region 关联公共WBS模板弹框
    establish () {//关联WBS并创建元素
      if(this.tableData.length == 0){
        this.$message({
          type: 'warning',
          message: '至少有一条元素才能创建元素表'
        })
        return;
      }
      let arr = [];
      this.tableData.forEach((element,index)=>{
        if(element.eName == ''){
          arr.push(index+1);
        }
      })
      if(arr.length > 0){
        this.$message({
          type: 'warning',
          message: arr.join(',')+'条的元素名称未填写'
        })
        return;
      }

      this.getWbsTypeList()
      this.AssociatedPublicTap = true
    },
    AssociatedPublicClose () {//关联公共WBS模板关闭事件
      // this.addElementForm = {
      //   id: "",
      //   initTableName: "",
      //   nodeName: this.addElementForm.nodeName,
      //   tableType: '',
      //   tableOwner: '',
      //   wbsId: '',
      //   parentId: '',
      // }
      // this.GLExcelFrom = {
      //   name: '',
      //   search: ''
      // }
      // this.exceldata = []
      // this.addElement = false

      //清理之前填写的数据
      this.addElementForm.wbsId = '';
      // this.addElementForm.tableType = '';
      this.addElementForm.tableOwner = '';

      if(this.$refs.tree){
        this.$refs.tree.setCheckedKeys([]);
        this.$refs.tree.setCurrentKey(null);
      }


      this.addTableData = []
      this.AssociatedPublicTap = false
    },
    async loadNodeTan (node, resolve) {//懒加载
      console.log(node);
      if (node.level === 0) {
        return resolve(await this.getLazytree(0));
      } else {
        return resolve(await this.getLazytree(node.data.id));
      }
    },
    changetherr () {//下拉框change事件
      this.GLExcelFromtag = false
      if (this.GLExcelFrom.name != "") {
        this.GLExcelFrom.search = ''
        this.exceldata = []
        this.addTableData = []
        this.addElementForm.wbsId = ''
        this.$nextTick(() => {
          this.GLExcelFromtag = true
        })
      }
    },
    addElementMD () {//新增元素信息表按钮
      this.excelType()
      this.addElement = true
    },
    async getWbsTypeList () {//获取清表模板信息
      const { data: res } = await getWbsTypeList({ wbstype: 1 })
      console.log(res);
      if (res.code === 200 && res.msg === '操作成功') {
        this.GLExcelData = res.data
      }
    },
    async getLazytree (parentId) {//清表树信息
      const { data: res } = await getLazytree({
        parentId: parentId,
        wbsId: this.GLExcelFrom.name,
        wbsType: '1'
      })
      console.log(res);
      if (res.code === 200 && res.msg === '操作成功') {
        res.data.forEach(val => {
          val.isExistForm = !!val.isExistForm
        })
        return res.data
      } else {
        return []
      }
    },
    handleNodeClickExcel (data) {//点击节点事件
      this.addElementForm.wbsId = this.GLExcelFrom.name
      this.addElementForm.parentId = data.id
      //this.selectByNodeTable(data.id)
      this.searchNodeTables(data.id)
    },
    async selectByNodeTable (id) {//获取清表信息
      const { data: res } = await selectByNodeTable(id)
      console.log(res);
      if (res.code == 200) {
        if (res.data.length > 0) {
          res.data.forEach(val => {
            if (val.isLinkTable == 2) {
              val.checknd = true
            } else {
              val.checknd = false
            }
            val.loading = false;
          })
          this.addTableData = res.data
        }else{
          this.addTableData = []
        }

      }
    },

    //查看节点下已关联的元素表信息
    searchNodeTables(id){
      searchNodeTables(id,this.from.id).then((res)=>{
        if (res.data.data.length > 0) {
          res.data.data.forEach(val => {
            if (val.isLinkTable == 2) {
              val.checknd = true
            } else {
              val.checknd = false
            }
            val.loading = false;
          })
          this.addTableData = res.data.data
        }else{
          this.addTableData = []
        }
      })
    },

    async excelType () {//清表类型
      const { data: res } = await excelType({ code: 'sys_excltab_type' })
      console.log(res);
      if (res.code === 200) {
        this.exceltypeData = res.data
      }
    },
    relationMD (row, type) {//关联取消关联
      row.loading = true;
      if (type == '关联') {
        saveRelation(row.id,this.from.id,this.tableData).then(()=>{
          row.checknd = true;
          row.isLinkTable = 2;
        }).finally(()=>{
          row.loading = false;
        })

      } else {
        cancelRelation({
          id:row.id,
          excelTabId:this.from.id,
        }).then(()=>{
          row.checknd = false;
          row.isLinkTable = 1;
        }).finally(()=>{
          row.loading = false;
        })
      }
    },
    saveElementMD () {//保存按钮
      if (this.addElementForm.wbsId) {
        if (this.activeName == 'link') {

          this.submitExcelRelationWbsTreeAndElement({
            excelTabId:this.from.id,
            elementList: this.tableData,
            submitStatus:1
          })
        } else {
          if (this.addElementForm.nodeName && this.addElementForm.tableType && this.addElementForm.tableOwner) {
            let nodeIds = this.$refs.tree.getCheckedKeys();
            if(nodeIds.length < 1){
              this.$message({
                type: 'warning',
                message: '至少勾选一个节点'
              })
              return;
            }

            this.submitExcelRelationWbsTreeAndElement({
              nodeName: this.addElementForm.nodeName,
              tableType: this.addElementForm.tableType,
              tableOwner: this.addElementForm.tableOwner,
              wbsId: this.addElementForm.wbsId,
              elementList: this.tableData,
              nodeIds:nodeIds,
              excelTabId:this.from.id,
              submitStatus:2
            })
          }else{
            this.$message({
              type: 'warning',
              message: '请填写和选择新增的表名，表类型，表所属方'
            })
          }
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择WBS树节点表单'
        })
      }
    },
    async submitExcelRelationWbsTreeAndElement (da) {//保存接口
      da.elementList.forEach((ele)=>{
        ele.eName = ele.textInfo;
        ele.eType = ele.textElementType;
        ele.eAllowDeviation = ele.textDeviation;
      })
      const { data: res } = await submitExcelRelationWbsTreeAndElement(da)
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '设置成功'
        })
        this.AssociatedPublicTap = false
        this.AssociatedPublicClose()
      }
    },
    //#endregion

    //#region 接口
    async tabLazytree (modeId, parentId) {
      const { data: res } = await tabLazytree({ modeId, parentId })
      console.log(res);
      if (res.code == 200) {
        if (res.data.length > 0) {
          res.data.forEach(val => {
            val.hasChildren = !val.hasChildren
          });
        }
        return res.data
      }
    },
    async dictionarydataType () {//数据类型字典
      const { data: res } = await dictionarydataType()
      console.log(res);
      if (res.code == 200) {
        res.data.forEach(element => {
          element.dictKey = Number(element.dictKey)
        });
        this.dataType = res.data
      }
    },
    //#endregion

    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;
      })
    },

    //修改树显示状态
    showLeftChange(){
      this.showLeft = !this.showLeft;
    },

    handleClose () {
      this.newElements = []
      this.addNewElementDialog = false;
    },

    addNewElement(){
      this.newElements.push({
        exctabId:this.from.id,
        textInfo: ''
      })
    },

    deleteNewElement(index){
      this.newElements.splice(index, 1);
    },

    addNewElementHandle(){
      exctabcellSave(this.newElements).then(()=>{
          this.handleClose();
          //触发自动识别按钮
          this.automaticRecognition();
          this.$message({
            type: "success",
            message: "保存成功!"
          });
      })
    },

    listUp(index){
      if(index != 0){
        this.titleList[index] = this.titleList.splice(index-1,1,this.titleList[index])[0];
      }
    },

    listDown(index){
      if(index != this.titleList.length-1){
        this.titleList[index] = this.titleList.splice(index+1,1,this.titleList[index])[0];
      }
    },

    deleTitle(index){
      this.titleList.splice(index,1);
    },

    setTitleText(){
      if(this.addNewElementDialog){
        this.newElements.push({
          exctabId:this.from.id,
          textInfo: this.titleList.join('_')
        })
        this.titleList = [];
      }else{
        this.titleForm.textInfo = this.titleList.join('_');
      }
    },

    editTitle(){
      if(this.titleIndex < 0){
        //新增
        exctabcellSave([{
            "exctabId": this.from.id,
            "textInfo": this.titleForm.textInfo,
            "textElementType": this.titleForm.textElementType,
            "textDeviation": this.titleForm.textDeviation
        }]).then(()=>{
            this.editTitleDialog = false;
            //触发自动识别按钮
            this.automaticRecognition();
            this.$message({
              type: "success",
              message: "新增成功!"
            });
        })
      }else{
        //修改
        exctabcellUpdate(this.titleForm).then(()=>{
          this.tableData[this.titleIndex].textInfo = this.titleForm.textInfo;
          //this.tableData[this.titleIndex].eName = this.titleForm.textInfo;
          this.tableData[this.titleIndex].textElementType = this.titleForm.textElementType;
          this.tableData[this.titleIndex].textDeviation = this.titleForm.textDeviation;

          //console.log(this.$refs.tablescroll)
          this.$refs.tablescroll.$el.scrollTop = 120+this.titleIndex*65;
          this.editTitleDialog = false;
          this.$message({
            type: "success",
            message: "保存成功!"
          });
        })
      }
    },

    dblBtnClick(e){
      //console.log(e)
      let target = e.target;
      //console.log(target.getAttribute('trindex'))
      if(target.getAttribute('trindex') !== null && target.getAttribute('tdindex')){
        this.titleIndex = -1;
        this.titleList = [];
        this.$refs.tablescroll.$el.scrollTop = 0;
        this.editTitleDialog = true;
        this.showLeft = false;
        let trtd = target.getAttribute('trindex')+"_"+target.getAttribute('tdindex');
        for (let i = 0; i < this.tableData.length; i++) {
          let arr = this.tableData[i].xys.split(',')
          if(arr.indexOf(trtd) > -1){
            this.titleIndex = i;
            break;
          }
        }
        if(this.titleIndex > -1){
          this.titleForm.textInfo = this.tableData[this.titleIndex].textInfo;
          this.titleForm.textElementType = this.tableData[this.titleIndex].textElementType;
          this.titleForm.textDeviation = this.tableData[this.titleIndex].textDeviation;
          this.titleForm.exctabId = this.tableData[this.titleIndex].exctabId;
          this.titleForm.id = this.tableData[this.titleIndex].id;
        }
        

        // let tdEle = this.getParentTD(target);
        // if(tdEle){
        //   this.$refs.tablescroll.$el.scrollTop = 0;
        //   this.editTitleDialog = true;
        //   this.titleForm.textInfo = tdEle.getAttribute('title');
        //   //console.log(title)
        //   this.titleList = this.titleForm.textInfo.split('_');
        //   let trtd = target.getAttribute('trindex')+"_"+target.getAttribute('tdindex');
        //   for (let i = 0; i < this.tableData.length; i++) {
        //     if(this.tableData[i].xys.indexOf(trtd) > -1){
        //       this.titleIndex = i;
        //       break;
        //     }
        //   }
        // }
      }else if(target.innerHTML && target.nodeName === "TD"){
        this.titleList.push(target.innerHTML)
      }
    },
    
    //excel父节点点击检测
    parentClick(e){
      let target = e.target;

      let bgs = document.querySelectorAll("#parent .oldlace-bg")
      //console.log(bgs)
      for (let i = 0; i < bgs.length; i++) {
        bgs[i].classList.remove("oldlace-bg");
      }
      //console.log(target.getAttribute('trindex'))
      if(target.getAttribute('trindex') !== null && target.getAttribute('tdindex')){
        let tdEle = this.getParentTD(target);
        if(tdEle){
          target.classList.add("oldlace-bg");

          let trtd = target.getAttribute('trindex')+"_"+target.getAttribute('tdindex');
            for (let i = 0; i < this.tableData.length; i++) {
            let arr = this.tableData[i].xys.split(',')
            if(arr.indexOf(trtd) > -1){
              this.titleIndex = i;
              break;
            }
          }
          
          //this.$refs.tablescroll.$el.scrollTop = 120+this.titleIndex*65;
          //console.log(this.$refs.tablescroll.$el.scrollTop)
          this.$nextTick(()=>{
            let row = document.querySelectorAll(".warning-row");
            if(row.length){
              this.$refs.tablescroll.$el.scrollTop = row[0].offsetTop;
            }
            //console.dir(row[0])
          })
          
        }
      }
    },

    getParentTD(ele){
      let targetParent = ele.parentNode;
      while (targetParent.nodeName !== "TD") {
          if(targetParent.id == 'parent'){
            return null;
          }
          targetParent = targetParent.parentNode;
      }
      return targetParent;
    },

    tableRowClassName({rowIndex}) {
      if (rowIndex === this.titleIndex) {
        return 'warning-row';
      }
      return '';
    },

    //保存单条元素
    saveELe(row){
      if(row.textInfo){
        exctabcellUpdate(row).then(()=>{
          this.$message({
            type: "success",
            message: "保存成功!"
          });
        })
      }else{
        this.$message({
          type: "warning",
          message: "请填写元素名称"
        });
      }
    }

  },
  created () {
    this.getOwnerTypelist();
    this.excelType();
  }
}
</script>

<style lang="scss" scoped>
.boxswai {
  padding: 0px 14px 10px 14px !important;
}
.dingwei {
  position: fixed;
  bottom: 40px;
  right: 40px;
}
//树结构超长后产生滚动条
.el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}

.boxswai{
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 10px;
}

.title-item{
  box-sizing: border-box;
  width:100%;
  font-size:16px;
  height:30px;
  padding:3px 20px;
  background-color: #f3f3f3;
  color: #ee7049;
  margin-bottom: 6px;
  cursor:pointer;
}

/deep/ .el-table .warning-row {
  background: oldlace;
}

.region{
  position: relative;
  height: 100%;
}

.region /deep/ .el-dialog__wrapper{
  position: absolute !important;
}
.region /deep/ .v-modal{
  position: absolute !important;
}

#parent /deep/ .oldlace-bg{
  background-color: oldlace;
}
</style>