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
             :default-expanded-keys="expandedKeys"
             :default-checked-keys="defaultcheckedkeys"
              :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 hc-excel-table-form"
                  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=" flexItemsC " style="top:150px;position: fixed;z-index: 1000;">
                    <div style="margin-right:20px">
                      <!-- <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
                      >
                      <el-button
                      :loading="elloading"
                        type="success"
                        size="mini"
                        @click="addtoElement()"
                        :disabled="from.id == ''"
                        >添加到元素库</el-button
                      >
                    </div>
                    <div
                      class="el-icon-plus"
                      type="success"
                      @click="pushTableData"
                      style="
                        width: 16px;
                        height: 16px;
                        backgroundcolor: #1dd81d;
                        color: green;
                        cursor: pointer;
                      "
                    ></div>
                  </div>
                <div class="region">

                  <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模板22"
        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">
              <div class="flex" style="margin-top: 10px" v-if="isShowInput">
                <el-input
                  size="small"
                  placeholder="输入关键字搜索"
                  clearable
                  @clear="clearInput"
                  v-model="filterText1"
                >
                </el-input>
                <el-button size="small" class="mg-l-10" @click="treeFilter1"
                  >搜索</el-button
                >
              </div>
              <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"
                :default--checked-keys="selectNodeIds"
              >
              </el-tree>

              <el-tree
                style="width: 100%"
                ref="treeall1"
                v-loading="treeloading1"
                :data="allTreeData1"
                :props="treeProps1"
                @node-click="handleNodeClickExcel"
                node-key="id"
                :expand-on-click-node="false"
                :filter-node-method="filterNode1"
                v-show="GLExcelFromtag1"
                :show-checkbox="activeName == 'add'"
                :default--checked-keys="selectNodeIds"
              >
              </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>
                <div class="martop10 text-green">
                  系统检测:当前节点不存在当前元素表，允许新增
                </div>
                <div class="martop10 text-red">
                  系统检测:当前节点已存在当前元素表，不允许新增，请请联系项目负责人处理!!!
                </div>
                <div class="martop20">已有元素表</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>
      <!-- 添加到元素库 -->
      <el-dialog
        title="保存元素表"
        class="excelBox"
        :visible.sync="eleDialog"
        modal-append-to-body
        append-to-body
        :close-on-click-modal="false">
         <div>
            <div class="flexBetween martop20">
              <el-input
                v-model="eleForm.nodeName"
                placeholder="请输入表名"
              ></el-input>
              <el-select
                class="marleft10"
                v-model="eleForm.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="eleForm.tableOwner"
              placeholder="请选择所属方"
            >
              <el-option
                v-for="(item, index) in ownerTypeList"
                :key="index"
                :label="item.dictValue"
                :value="item.dictKey"
              ></el-option>
            </el-select>
          </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="eleDialog = false">取 消</el-button>
          <el-button type="primary" @click="submitEleDialog"
            v-preventClick v-loading="elloading"
            >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  tabLazytree,
  getExcelHtmlCol,
  excelType,
  excelType1,
  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, getAlltree } from "@/api/manager/wbstree";
import { getDictionary } from "@/api/system/dict";
import Vue from "vue";
import draggable from "vuedraggable";
export default {
  data() {
    return {
      //#region 左侧树节点
      treeData: [],
      expandedKeys:[],//默认展开的节点
      defaultcheckedkeys:[],//默认选中
      curNode:{},//当前选中的节点
      elloading:false,//保存元素表按钮
      excelId:'',
      treeProps: {
        label: "name",
        children: "children",
        isLeaf: "hasChildren",
      },
      treeProps1: {
        label: "title",
        children: "children",
        isLeaf: "hasChildren",
      },
      //#endregion
      excelSrc: "",
      from: {
        id: "",
      },
      tableData: [], //外层table
      dataType: [],
      filterText: "", //搜索关键字
      filterText1: "",
      allTreeShow: false, //是否显示整棵树
      treeloading: false,
      treeloading1: false,
      AssociatedPublicTap: false,
      //#region 弹框属性
      GLExcelFrom: {
        id: "",
        name: "",
        search: "", //搜素框舒服的值
      },
      GLExcelData: [], //
      allTreeData: [],
      allTreeData1: [],
      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;
          }
        },
      },
      isShowInput: false,
      exceldata: [], //清表模板树数据
      addTableData: [], //新增元素信息表
      exceltypeData: [], //清表类型
      addElement: false,
      GLExcelFromtag: false,
      GLExcelFromtag1: 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,
      selectedId: "",
      nodeIds:[],
      nodeIds1:[],
      selectNodeIds:[],
      eleDialog:false,//保存到元素库弹窗
      eleForm:{
        nodeName:'',
        tableType:'',
        tableOwner:""
      },
      clickData:{}

    };
  },
  components: {
    draggable,
  },

   watch: {
     //设置保存后默认展开节点
    // treeData: {
    //   handler () {
    //     this.expandedKeys.push(this.curNode.id);
    //     this.defaultcheckedkeys.push(this.curNode.id)
    //     this.getExcelHtmlCol(this.curNode.id);
    //   },
    //   deep: true
    // },

  },
  methods: {
    //数组去重
    uniqueArr(arr1, arr2) {
      //合并两个数组
      arr1.push(...arr2)//或者arr1 = [...arr1,...arr2]
      //去重
      let arr3 = Array.from(new Set(arr1))//let arr3 = [...new Set(arr1)]
      return arr3
    },
    //搜索树
    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(() => {
              console.log("过滤");
              this.$refs.treeall.filter(this.filterText);
            });
          });
        } else {
          this.$refs.treeall.filter(this.filterText);
        }
      } else {
        this.allTreeShow = false;
      }
    },
     treeFilterAgin() {
        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(() => {
              console.log("过滤");
              this.$refs.treeall.filter(this.filterText);
            });
          });
        } else {
          this.$refs.treeall.filter(this.filterText);
        }
    } ,


    clearInput() {

      (this.selectedId = ""),
        (this.GLExcelFromtag1 = false),
        (this.GLExcelFromtag = true);
             if( this.$refs.tree){
              this.nodeIds = this.$refs.tree.getCheckedKeys();
              }
            if(this.$refs.treeall1){
                this.nodeIds1 = this.$refs.treeall1.getCheckedKeys();
            }
            this.selectNodeIds=this.uniqueArr(this.nodeIds,this.nodeIds1 )
           console.log(this.selectNodeIds,'this.selectNodeIds111111');
            // this.$refs.tree.setCheckedKeys(this.selectNodeIds)

             this.$nextTick(()=>{
               this.$refs.tree.setCheckedKeys(this.selectNodeIds)
             })

    },
    //搜索树1
    treeFilter1() {
      if (this.filterText1) {
             if( this.$refs.tree){
              this.nodeIds = this.$refs.tree.getCheckedKeys();
              }
            if(this.$refs.treeall1){
                this.nodeIds1 = this.$refs.treeall1.getCheckedKeys();
            }

          this.selectNodeIds=this.uniqueArr(this.nodeIds,this.nodeIds1 )
          this.$refs.treeall1.setCheckedKeys(this.selectNodeIds)
          console.log(this.selectNodeIds,'this.selectNodeIds');
          this.GLExcelFromtag1 = true;
          this.GLExcelFromtag = false;
          this.treeloading1 = true;
          console.log(this.selectedId, "selectedId");
          console.log(this.GLExcelFrom.name, "this.GLExcelFrom.name");
        // tabLazytreeAll({
        //   modeId: this.GLExcelFrom.name,
        //   name: "",
        // })
        getAlltree("000000", 1, this.GLExcelFrom.name).then((res) => {
          this.treeloading1 = false;
          this.allTreeData1 = res.data.data;
          console.log(this.exceldata, "this.exceldata");
          console.log(this.GLExcelFromtag, "this.GLExcelFromtag");

          this.$nextTick(() => {
            console.log("过滤2", this.filterText1);
            this.$refs.treeall1.filter(this.filterText1);
          });
        });
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // filterNode1(value, data) {
    //   if (!value) return true;
    //   return data.title.indexOf(value) !== -1;
    // },
    getReturnNode(node,_array,value){
        let isPass = node.data &&  node.data.title && node.data.title.indexOf(value) !== -1;
        isPass?_array.push(isPass):'';
        if(!isPass && node.level!=1 && node.parent){
          this.getReturnNode(node.parent,_array,value);
        }
    },

    filterNode1(value,data,node) {
      if(!value){
        return true;
      }
      let level = node.level;
      let _array = [];//这里使用数组存储 只是为了存储值。
      this.getReturnNode(node,_array,value);
      let result = false;
      _array.forEach((item)=>{
        result = result || item;
      });
      return result;
    },
    //#region
    handleNodeClick(data,node) {
      //树节点点击事件
      console.log(data,'树节点点击事件');
      if (data.fileType == 3) {
        this.clickData=data
        this.getExcelHtmlCol(data.id); //获取excel模板
        this.excelId=data.id//表格id
        if (this.dataType.length == 0) {
          this.dictionarydataType(); //数据类型字典
        }
        this.addElement = false;
        this.addElementForm.nodeName = data.name;
        this.eleForm.nodeName=data.name
        if (data.tabType > 0 && data.tabType < 100) {
          this.addElementForm.tableType = data.tabType + "";
          this.eleForm.tableType= data.tabType + ""
        } else {
          this.addElementForm.tableType = "";
          this.eleForm.tableType = "";
        }
        if (data.tableOwner > 0 && data.tableOwner < 100) {
          this.eleForm.tableOwner= data.tableOwner + ""
        } else {
          this.eleForm.tableOwner = "";
        }


        this.from.id = data.id;
        this.curNode=node

        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,
          methods: {
            contextmenuClick() {},
            getInformation () {},
            formUploadSuccess(){},
            formUploadExceed(){},
            formUploadLoading(){},
            delTableFormFile(){},
            formUploadError(){},
            uploadprogress(){},
            formRemoteMethod(){},
            getRegularExpression(){},
            checkboxGroupChange(){},
            formRemoteChange(){},
            dateKeydown(){},
            keyupShiftUp() {},
            keyupShiftDown() {},
            keyupShiftLeft() {},
            keyupShiftRight() {},
            inputLeftClick() {},
          }
        });
        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;
      //清除数据
      this.filterText1 = "";
      this.exceldata = [];
      this.allTreeData1 = [];
      this.selectedId = "";
      this.GLExcelFrom.name = "";
      this.isShowInput = false;

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

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

      this.addTableData = [];
    },
    addtoElement(){
      const {tabId}=this.clickData
      if(!tabId){
         this.eleDialog=true;
        this.eleForm.tableOwner=''
        this.elloading=false
      }else{
    
            if (
            this.clickData.name &&
            this.clickData.tabType &&
            this.clickData.tableOwner
          ) {
       
            this.submitExcelRelationWbsTreeAndElement({
              nodeName: this.clickData.name,
              tableType: this.clickData.tabType,
              tableOwner: this.clickData.tableOwner,
              elementList: this.tableData,
              excelTabId: this.from.id,
              submitStatus: 3,
            })
          } 

        
      }
      

    },
    submitEleDialog(){
      console.log('确定');
          if (
            this.eleForm.nodeName &&
            this.eleForm.tableType &&
            this.eleForm.tableOwner
          ) {
            this.elloading=true
            this.submitExcelRelationWbsTreeAndElement({
              nodeName: this.eleForm.nodeName,
              tableType: this.eleForm.tableType,
              tableOwner: this.eleForm.tableOwner,
              elementList: this.tableData,
              excelTabId: this.from.id,
              submitStatus: 3,
            })
          } else {
            this.$message({
              type: "warning",
              message: "请填写和选择新增的表名，表类型，表所属方",
            });
          }


        // this.allTreeData=[]//清空搜索树数据


        // this.eleForm={}
    },
    AssociatedPublicClose() {
      console.log("AssociatedPublicClose");
      //清理之前填写的数据
      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);
      this.selectedId = node.data.id;
      if (node.level === 0) {
        return resolve(await this.getLazytree(0));
      } else {
        return resolve(await this.getLazytree(node.data.id));
      }
    },

    changetherr(item) {
      console.log(item, "item");
      console.log(this.GLExcelFrom.name, "name");
      //下拉框change事件
      this.GLExcelFromtag = false;
      this.GLExcelFromtag1 = false;
      this.filterText1 = "";
      if (this.GLExcelFrom.name != "") {
        this.GLExcelFrom.search = "";
        this.exceldata = [];
        this.addTableData = [];
        this.isShowInput = false;
        this.addElementForm.wbsId = "";
        this.$nextTick(() => {
          this.GLExcelFromtag = true;
        });
      }
    },
    addElementMD() {
      //新增元素信息表按钮
      this.excelType();
      this.addElement = true;
    },
    async getWbsTypeList() {
      //获取清表模板信息
      const { data: res } = await getWbsTypeList({ wbstype: 1 });

      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 === "操作成功") {
        this.isShowInput = true;
        console.log(this.isShowInput, " this.isShowInput");
        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" });
        const { data: res } = await excelType1({ code: "table_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();
            // let nodeIds1 = this.$refs.treeall1.getCheckedKeys();
            // console.log(nodeIds,'nodeIds');
            // console.log(nodeIds1,'nodeIds1');
            if( this.$refs.tree){
               this.nodeIds = this.$refs.tree.getCheckedKeys();
            }
            if(this.$refs.treeall1){
               this.nodeIds1 = this.$refs.treeall1.getCheckedKeys();
            }

            this.selectNodeIds=this.uniqueArr(this.nodeIds,this.nodeIds1 )
            console.log(this.selectNodeIds,'去重的数组');

            if (this.selectNodeIds.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: this.selectNodeIds,
              excelTabId: this.from.id,
              submitStatus: 2,
            });
          } else {
            this.$message({
              type: "warning",
              message: "请填写和选择新增的表名，表类型，表所属方",
            });
          }
        }
      } else {
        this.$message({
          type: "warning",
          message: "请先选择WBS树节点表单",
        });
      }
      this.activeName="link"
    },
   async submitExcelRelationWbsTreeAndElement(da) {
  try {
    // 预处理数据
    da.elementList.forEach((ele) => {
      ele.eName = ele.textInfo;
      ele.eType = ele.textElementType;
      ele.eAllowDeviation = ele.textDeviation;
    });

    this.elloading = true; // 开始加载
    const { data: res } = await submitExcelRelationWbsTreeAndElement(da);
    console.log(res);

    if (res.code === 200) {
      this.$message({
        type: "success",
        message: "设置成功",
      });
      this.AssociatedPublicTap = false;
      this.AssociatedPublicClose();
      this.eleDialog = false;
    } else {
      this.$message({
        type: "error",
        message: "请求失败：" + (res.message || "未知错误"),
      });
    }
  } catch (error) {
    console.error("请求异常:", error);
  
  } finally {
    this.elloading = false; // 无论成功或失败，最终都关闭加载状态
  }
},
    //#endregion
   // tree局部刷新
    refreshNodeBy(){
      console.log('刷新');
      console.log(this.curNode,'this.curNode.id');
             this.curNode.loaded = false;
            //  this.curNode.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
              if(this.allTreeShow){
                console.log('搜索树');
                this.treeFilterAgin()
            }else{
               if (this.curNode.level === 0) {
               tabLazytree({modeId:this.$route.params.id,parentId:0}).then((res)=>{
                 if(res.code==200){
                   if (res.data.length > 0) {
                    res.data.forEach((val) => {
                      val.hasChildren = !val.hasChildren;
                    });
                  }
                  this.treeData=res.data
                 }
               })
              }
              if (this.curNode.level > 0) {
                tabLazytree({modeId:this.$route.params.id,parentId:this.curNode.data.parentId}).then((res)=>{
                   if(res.code==200){
                    if (res.data.length > 0) {
                    res.data.forEach((val) => {
                      val.hasChildren = !val.hasChildren;
                    });
                  }
                  this.treeData=res.data
                 }
                })
              }
            }


    },
    //#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;
      this.activeName='link'
    },

    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)

      let tdEle = this.getParentTD(target);
      let target1
        if(tdEle){
          let mydiv=tdEle.getElementsByTagName('div')
          target1=mydiv[0]
        }else{
          tdEle=target
          let mydiv=tdEle.getElementsByTagName('div')
          target=mydiv[0]

        }
      for (let i = 0; i < bgs.length; i++) {
        bgs[i].classList.remove("oldlace-bg");
      }
      if (
        target.getAttribute("trindex") !== null &&
        target.getAttribute("tdindex")
      ) {
        target=target
      }else{
        target=target1
      }
      //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>
.text-green{
  color:rgba(82, 178, 0, 1);
}
.text-red{
  color:red;
}
.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;
}

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

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

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

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

<style lang="scss">
.parent .el-input .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: inherit;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
</style>