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

<template>
  <div class="boxswai">
    <div class="boxnei">
      <el-row
        :gutter="20"
        style="height:100%;"
      >
        <el-col
          :span="5"
          style="height:99%;"
        >
          <div
            style="fontSize:18px; font-weight: 900;"
            class="marbottom5"
          >元素识别</div>
          <div style="height:98%;overflow: auto;width:auto;">
            <el-tree
              :data="treeData"
              :props="treeProps"
              @node-click="handleNodeClick"
              :load="loadNode"
              :expand-on-click-node="false"
              lazy
            ></el-tree>
          </div>
        </el-col>
        <el-col
          :span="19"
          style="height:98%;"
        >
          <div v-if="addElementForm.deptName==''">表名称</div>
          <div v-else>{{addElementForm.deptName}}</div>
          <el-row
            class="martop20"
            :gutter="20"
            style="height:96%;"
          >
            <el-col
              :span="16"
              style="overflow:auto;height:100%;border:1px solid black; border-radius: 4px;box-sizing: border-box;padding: 10px 10px;"
            >
              <div
                class="parent"
                id='parent'
              >
              </div>
            </el-col>
            <el-col
              :span="8"
              style="overflow:auto;height:100%;"
            >
              <div class="flexBetween flexItemsC">
                <el-button
                  type="info"
                  size="mini"
                  :disabled="from.id==''"
                  @click="automaticRecognition"
                >自动识别</el-button>
                <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
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="坐标"
                >
                </el-table-column>
                <el-table-column
                  prop="eName"
                  label="元素名称"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.eName"
                      placeholder="请输入内容"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="eType"
                  label="数据类型"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.eType"
                      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="eAllowDeviation"
                  label="允许偏差值"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.eAllowDeviation"
                      placeholder="请输入内容"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <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-col>
          </el-row>
        </el-col>
      </el-row>

      <!-- 关联公共WBS模板 -->
      <el-dialog
        title="关联公共WBS模板"
        class="excelBox"
        :visible.sync="AssociatedPublicTap"
        modal-append-to-body
        append-to-body
        :before-close="AssociatedPublicClose"
      >
        <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
              >
              </el-tree>
            </el-scrollbar>
          </el-col>
          <el-col
            :span="12"
            v-if="addElementForm.wbsId"
          >
            <el-button
              type="primary"
              style="float:right;"
              class="marbottom20"
              @click="addElementMD"
              :disabled="addElement"
            >新增元素信息表</el-button>

            <el-table
              :data="addTableData"
              border
              style="width: 100%"
            >
              <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.$index,'关联')"
                    v-show="!scope.row.checknd"
                  >选择关联</el-button>
                  <el-button
                    type="danger"
                    size="mini"
                    style="margin:0px;"
                    @click="relationMD(scope.$index,'取消关联')"
                    v-show="scope.row.checknd"
                  >取消关联</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div v-if="addElement">
              <div class="flexBetween martop40">
                <el-input
                  v-model="addElementForm.deptName"
                  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-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, } 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'
export default {
  data () {
    return {
      //#region 左侧树节点
      treeData: [],
      treeProps: {
        label: 'name',
        children: 'children',
        isLeaf: 'hasChildren'
      },
      //#endregion
      excelSrc: '',
      from: {
        id: '',
      },
      tableData: [],//外层table
      dataType: [],
      AssociatedPublicTap: false,
      //#region 弹框属性
      GLExcelFrom: {
        id: "",
        name: '',
        search: '',//搜素框舒服的值
      },
      GLExcelData: [],//
      GLExcelProps: {
        label: 'title',
        children: 'children',
        isLeaf: 'isExistForm',
      },
      exceldata: [],//清表模板树数据
      addTableData: [],//新增元素信息表
      exceltypeData: [],//清表类型
      addElement: false,
      GLExcelFromtag: false,
      addElementForm: {
        id: "",
        initTableName: "",
        deptName: '',
        tableType: '',
        tableOwner: '',
        wbsId: '',
        parentId: '',
      },
      //#endregion

      ownerTypeList: [],
    }
  },
  methods: {
    //#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.deptName = data.name
        this.from.id = data.id
      }
    },
    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.push({
          eName: '',
          eType: '',
          eAllowDeviation: ''
        })
      }
    },
    deleteTableData (key) {//删除
      this.tableData.splice(key, 1)
    },
    async getColByTabId () {//获取字段信息
      const { data: res } = await getColByTabId({ tabId: this.from.id })
      console.log(res);
      if (res.code === 200) {
        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并创建元素
      this.getWbsTypeList()
      this.AssociatedPublicTap = true
    },
    AssociatedPublicClose () {//关联公共WBS模板关闭事件
      this.addElementForm = {
        id: "",
        initTableName: "",
        deptName: '',
        tableType: '',
        tableOwner: '',
        wbsId: '',
        parentId: '',
      }
      this.GLExcelFrom = {
        name: '',
        search: ''
      }
      this.exceldata = []
      this.addElement = false
      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) {//点击节点事件
      console.log(data);
      if (data.hasChildren) {
        this.addElementForm.wbsId = data.id
        this.addElementForm.parentId = data.parentId
        this.selectByNodeTable(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
            }
          })
          this.addTableData = res.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 (index, type) {//关联取消关联
      console.log(this.addTableData[index]);
      if (this.addTableData.length > 0) {
        if (type == '关联') {
          this.addTableData.forEach((val, k) => {
            if (index == k) {
              val.checknd = !val.checknd
            } else {
              val.checknd = false
            }
          })
          this.addElementForm.id = this.addTableData[index].id
          this.addElementForm.initTableName = this.addTableData[index].initTableName
        } else {
          this.addTableData.forEach((val, k) => {
            val.checknd = false
          })
          this.addElementForm.id = ''
          this.addElementForm.initTableName = ''
        }
      }
    },
    saveElementMD () {//保存按钮
      if (this.addElementForm.wbsId) {
        if (this.addTableData.length > 0) {
          let tag = false
          this.addTableData.forEach(val => {
            if ((val.checknd == true && val.isLinkTable != 2) || (val.checknd == false && val.isLinkTable == 2)) {
              tag = true
            }
          })
          if (tag) {
            this.submitExcelRelationWbsTreeAndElement({
              id: this.addElementForm.id,
              initTableName: this.addElementForm.initTableName,
              elementList: this.tableData
            })
          } else {
            if (this.addElementForm.deptName && this.addElementForm.tableType && this.addElementForm.tableOwner) {
              this.submitExcelRelationWbsTreeAndElement({
                deptName: this.addElementForm.deptName,
                tableType: this.addElementForm.tableType,
                tableOwner: this.addElementForm.tableOwner,
                wbsId: this.addElementForm.wbsId,
                parentId: this.addElementForm.parentId,
                elementList: this.tableData
              })
            }
          }
        }
      } else {
        this.$message({
          type: 'error',
          message: '请先选择WBS树节点表单'
        })
      }
    },
    async submitExcelRelationWbsTreeAndElement (da) {//保存接口
      const { data: res } = await submitExcelRelationWbsTreeAndElement(da)
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '设置成功'
        })
        this.AssociatedPublicTap = false
      }
    },
    //#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) {
        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;
      })
    },
  },
  created () {
    this.getOwnerTypelist();
  }
}
</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;
}
</style>