saber/src/views/manager/projectinfo/editElement/editElement.vue

<template>
  <div
    style="height:100%;"
    ref="heights"
  >
    <basic-container class="editElement" style="height:900px">
      <div class="flex" style="position:fixed;left:30px;top:0;">
        <h2 class="mg-r-10">编辑元素</h2>
        <el-link type="primary" @click="toBack">返回上一级</el-link>
      </div>
      <div
        class="header"
        style="padding-bottom:20px;"
      >
        提示：鼠标右键功能：更换匹配元素字段、新增元素字段、删除匹配元素字段、公式配置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 红色：代表匹配不成功、蓝色代表推荐匹配元素字段、绿色代表匹配成功
      </div>
      <el-row
        :gutter="20"
        :style="{height:heights-150+'px',}"
      >
        <el-col :span="16">
          <div
            class='parent'
            id='parent'
            @click="parentClick($event)"
          >
          </div>

        </el-col>
        <el-col
          :span="7"
          style="position: fixed;right: 13px;"
        >
          <div v-show="AddNewElementField == '替换元素'">
            <!-- <div>
              <el-checkbox v-model="isMultiple" @change="multipleChange">多选模式</el-checkbox>
            </div> -->
            <el-table
              :data="eleData" height="300px"
              border size="small" v-show="isMultiple"
              style="width: 100%;margin-bottom:10px;">
              <el-table-column
                label="td_tr" width="100px" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.td}}_{{scope.row.tr}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称">
              </el-table-column>
              <el-table-column label="操作" width="100px" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="eleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-select
              style="width:300px;"
              v-model="value"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.eName"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <div class="tihuan">替换为：</div>
            <el-input
              style="width:95%;"
              :disabled="true"
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="names"
            >
            </el-input>
            <div class="martop20">
              <el-button
                type="info"
                @click="cancelReplace()"
              >取消</el-button>
              <el-button
                type="primary"
                :disabled="tag"
                @click="saveReplace()"
              >保存</el-button>
            </div>
          </div>
          <div
            v-show="AddNewElementField ==''"
            style="width:160px;position: fixed;bottom: 50px; right:20px;"
          >
            <el-button type="info" @click="toBack">取消</el-button>
            <el-button type="primary">保存</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 弹框 -->
      <!-- <div
        @mouseout="mouseout22"
        @mousemove="mousemove22"
        v-if="cascaderPanel"
      >
        <el-cascader-panel
          :style="{width:'360px',position: 'absolute',top:top+'px',left:left+'px','background-color':'#fff',margin:'40px',}"
          :props="{ expandTrigger: 'hover' }"
          :options="options2"
          @change="takuangchangge"
        ></el-cascader-panel>
      </div> -->

      <el-dialog append-to-body :show-close="false" width="360px" :modal='false' class="cascader-dialog" top="0"
        :visible.sync="cascaderPanel" :style="{position: 'absolute',top:top+'px',left:left+'px'}">
        <el-cascader-panel
            :props="{ expandTrigger: 'hover' }"
            :options="options2"
            @change="takuangchangge"
            ref="cascader"

        ></el-cascader-panel>
      </el-dialog>

      <el-dialog
        title="添加新元素字段"
        :visible="AddNewElementField=='新增元素'"
        width="60%"
        :before-close="handleClose"
        :modal-append-to-body="false"
        style="z-index: 999999;"
      >
        <div>
          <i
            @click="addyuansu"
            class="el-icon-circle-plus marbottom10"
            style="color:red; font-size:24px; float: right;cursor: pointer;"
          ></i>
          <el-table
            :data="tableData"
            height="250"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="date"
              label="清表元素名称"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.eName"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="date"
              label="元素数据类型"
            >
              <template slot-scope="scope">
                <el-select
                  style="width:100%;"
                  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="date"
            label="长度"
            align="center"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.date"
                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="deleteziduan(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="tableData.length===0"
            @click="pushNewElementField()"
          >确 定</el-button>
        </span>
      </el-dialog>

      <!-- 公式 -->
      <el-dialog title="元素公式" :visible.sync="formulaCompVisible" fullscreen append-to-body class="full-dialog">
        <FormulaEdit :wbsid="wbsid" :nodeid="nodeid" :eleid="eleid" :projectid="pid" @hideDialog="formulaCompVisible = false" v-if="formulaCompVisible"
        :globaltype="globaltype" :fromcurNode="editElementQuery"></FormulaEdit>
      </el-dialog>
      <el-dialog title="" :visible.sync="formulaCompVisible1" fullscreen append-to-body class="full-dialog">
      <FormulaEditone  :wbsid="wbsid" :nodeid="nodeid" :eleid="eleid"   :elementType="elementType" :projectid="pid"   :fromcurNode="curEleTable"
      :globaltype="globaltype" @hideDialog="formulaCompVisible1 = false"
       v-if="formulaCompVisible1">
       </FormulaEditone>
    </el-dialog>

    </basic-container>
  </div>
</template>

<script>
import FormulaEdit from '@/views/formula/edit.vue'
import FormulaEditone from '@/views/formula/edit1.vue'

import { getExcelHtml } from '@/api/exctab/excelmodel'
import { getElementInfoByTabId, submit, dictionarydataType, submitBatch } from '@/api/exctab/editelement'
import Vue from 'vue'

export default {
  components:{
    FormulaEdit,
    FormulaEditone
  },
  props: {
    pkeyId:{
      type:String,
      default:''
    },
    excelId:{
      type:String,
      default:''
    },
    id:{
      type:String,
      default:''
    },
    initTableName:{
      type:String,
      default:''
    },
    initTableId:{
      type:String,
      default:''
    },
    pid:{
      type:String,
      default:''
    },
    wbsid:{
      type:String,
      default:''
    },
    nodeid:{
      type:String,
      default:''
    },
     globaltype:{
      type:Number,
      default:10
    },
    elementType:{
      type:Boolean,
      default:false
    },
    curEleTable:{
      type:Object,
      default:{}
    },
    editElementQuery:{
      type:Object,
      default:{}
    }
  },
  data () {
    return {
      heights: '',
      dataType: [],//数据类型
      tag: false,
      table: {

      },//table表鼠标右键事件
      AddNewElementField: '',
      setTimeout: '',
      top: 0,
      left: 0,
      cascaderPanel: false,
      options: [],
      value: '',
      names: '',//替换元素得值
      tableData: [],//table表
      options2: [{
        value: '编辑元素字段',
        label: '编辑元素字段',
        children: [{
          value: '替换元素',
          label: '替换元素'
        }, {
          value: '新增元素',
          label: '新增元素'
        }, {
          value: '删除文本信息',
          label: '删除文本信息'
        }]
      }, {
        value: '公式配置',
        label: '公式配置',
      }],

      ekeyReg:/(key_\d+)/,

      isMultiple:false,
      eleData:[],

      formulaCompVisible:false,//公式弹框节点公式
       formulaCompVisible1:false,//公式弹框全局公式
      eleid:'',//当前元素
    }
  },
  mounted () {
    this.cop()
    this.heights = this.$refs.heights.clientHeight
  },
  created () {
    this.getElementInfoByTabId()
  },
  methods: {
    takuangchangge (value) {//切换事件
      if (value[value.length - 1] == '替换元素') {
        this.AddNewElementField = '替换元素'
        this.cascaderPanel = false
        clearTimeout(this.setTimeout)
      } else if (value[value.length - 1] == '新增元素') {
        if (this.dataType.length == 0) {
          this.dictionarydataType()
        }
        this.tableData = []
        this.AddNewElementField = '新增元素'//打开新增元素弹框
        this.cascaderPanel = false
        clearTimeout(this.setTimeout)
      } else if (value[value.length - 1] == '删除文本信息') {
        this.deleteelement()
        this.cascaderPanel = false
        clearTimeout(this.setTimeout)
      } else if (value[value.length - 1] == '公式配置') {
        this.cascaderPanel = false
        clearTimeout(this.setTimeout)

        this.toFormulaEdit();
      }
    },

    mouseout22 () {//鼠标移出事件
      clearTimeout(this.setTimeout)
      this.setTimeout = setTimeout(() => {
        this.cascaderPanel = false
      }, 500)
    },
    mousemove22 () {//鼠标移入事件
      clearTimeout(this.setTimeout)
      this.setTimeout = setTimeout(() => {
        this.cascaderPanel = true
      }, 500)
    },
    RightClick2 (tr, td, x1, x2, y1, y2) {
      //console.log(event.target.getAttribute("keyname"))
      let targetkeyname = event.target.getAttribute("keyname");
      //console.log(event.target)
      let ekey = null;
      if(this.ekeyReg.test(targetkeyname)){
        ekey = targetkeyname.match(this.ekeyReg)[1]
      }
      this.table = {
        tr,
        td,
        ekey
      }


      this.left = window.event.clientX - 80
      let Y = window.event.clientY -54
      if (window.outerHeight - Y > 200) {
        this.top = window.event.clientY - 80 + 65
      } else {
        this.top = window.event.clientY - 270 + 65
      }
      this.cascaderPanel = true
      clearTimeout(this.setTimeout)
      this.setTimeout = setTimeout(() => {
        this.cascaderPanel = false
      }, 3000)

      let curTdEle = this.getTd(event.target);
      if(this.isMultiple){
        //是否已经存在了
        for (let i = 0; i < this.eleData.length; i++) {
          if(this.eleData[i].tr == tr && this.eleData[i].td == td){
            //存在就移除
            this.eleData[i].tdEle.classList.remove('select-td');
            this.eleData.splice(i,1);
            return;
          }
        }

        //添加
        this.eleData.push({
          tr,
          td,
          tdEle:curTdEle,
          name:curTdEle.getAttribute("title")
        })
      }else{
        this.clearSelect();
        this.eleData = [{
          tr,
          td,
          tdEle:curTdEle,
          name:curTdEle.getAttribute("title")
        }]
      }

      curTdEle.classList.add('select-td')

      this.$nextTick(()=>{
        //隐藏日期弹框
        let pickers = document.querySelectorAll('.el-date-picker__header')
        for (let i = 0; i < pickers.length; i++) {
          pickers[i].parentNode.parentNode.parentNode.style.display = 'none'
        }
      })

    },

    getTd(ele){

      while(ele.tagName.toLowerCase() != 'td' && ele.id != 'parent'){
        ele = ele.parentNode;
        //console.log(ele);
      }

      if(ele.id == 'parent'){
        return null;
      }else{
        return ele;
      }

    },

    deleteelement () {//删除元素提示
      let _that = this
      this.$confirm('确认删除该元素？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _that.submit({
          colName: '/',
          tabId: this.pkeyId,
          tdIndex: this.table.td,
          trIndex: this.table.tr,
        })
      }).catch(() => {
        _that.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getInformation2 (a, b, c) {
      if (this.AddNewElementField) {
        this.table = {
          tr: b,
          td: c
        }
      }
    },
    async cop () {
      let _that = this
      console.log("33")
      var MyComponent = await Vue.extend({
        template: localStorage.getItem('editElement'),
        data () {
          return {
            formData: {},
            getTokenHeader: {},
            dap_site_data:{}
          }
        },
        methods: {
          contextmenuClick(event) {
            event.preventDefault();
          },
          //鼠标右键事件
          RightClick (tr, td, x1, x2, y1, y2) {
            _that.RightClick2(tr, td, x1, x2, y1, y2)
          },
          getInformation (a, b, c) {
            _that.getInformation2(a, b, c)
          },
          getRegularExpression(){},
          dateKeydown(){},
          formUploadSuccess(){},
          formUploadExceed(){},
          formUploadLoading(){},
          delTableFormFile(){},
          formUploadError(){},
          uploadprogress(){},
          formRemoteMethod(){},
          formRemoteChange(){},
          checkboxGroupChange(){},
          keyupShiftUp() {},
          keyupShiftDown() {},
          keyupShiftLeft() {},
          keyupShiftRight() {},
          inputLeftClick() {},
        }
      })
      var component = new MyComponent().$mount()

      document.getElementById('parent').appendChild(component.$el);
    },
    async copss () {
      let _that = this
      console.log("44")
      var MyComponent = await Vue.extend({
        template: localStorage.getItem('editElement'),
        data () {
          return {
            formData: {},
            getTokenHeader: {},
            dap_site_data:{}
          }
        },
        methods: {
          contextmenuClick(event) {
            event.preventDefault();
          },
          //鼠标右键事件
          RightClick (tr, td, x1, x2, y1, y2) {
            _that.RightClick2(tr, td, x1, x2, y1, y2)
          },
          getInformation (a, b, c) {
            _that.getInformation2(a, b, c)
          },
          getRegularExpression(){},
          dateKeydown(){},
          formUploadSuccess(){},
          formUploadExceed(){},
          formUploadLoading(){},
          delTableFormFile(){},
          formUploadError(){},
          uploadprogress(){},
          formRemoteMethod(){},
          formRemoteChange(){},
          checkboxGroupChange(){},
          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);
    },
    async dictionarydataType () {
      const { data: res } = await dictionarydataType()
      console.log(res);
      if (res.code == 200) {
        this.dataType = res.data
      }
    },
    returns () {
      this.$router.push({
        path: '/project/tree',
        query: {
          pid: this.pid,
          wbsid: this.wbsid,
        }
      })
    },
    //#region 左侧替换元素
    cancelReplace () {//替换元素取消按钮
      this.AddNewElementField = ''
       this.$refs.cascader.clearCheckedNodes()//调用方法无效
    },
    saveReplace () {//保存按钮
      if (this.value) {
        this.tag = true
        this.submit({
          tabId: this.pkeyId,
          tdIndex: this.table.td,
          trIndex: this.table.tr,
          colName: "",
          htmlType: this.value
        })
      } else {
        this.$message({
          type: "error",
          message: "请选择要替换的元素"
        })
      }
    },
    async getElementInfoByTabId () {//获取字段信息
      const { data: res } = await getElementInfoByTabId({ tabId: this.initTableId })
      console.log(res);
      if (res.code === 200) {
        this.options = res.data
      }
    },
    async submit (da) {//保存替换元素
      const { data: res } = await submit(da)
      console.log(res);
      if (res.code == 200) {
        const { data: res } = await getExcelHtml({ pkeyId: this.pkeyId })
        console.log(res);
        if (res.code === 200) {
          this.tag = false
          this.value = ''
          this.options = []
          localStorage.setItem('editElement', res.data)
          this.getElementInfoByTabId()
          this.copss()
        }
      }
    },
    //#endregion

    //#region 弹框事件
    handleClose () {
      console.log('取消');
      this.tableData = []
      this.AddNewElementField = ''

    },
    addyuansu () {//新增元素
      this.tableData.unshift({ eName: '', eType: '' })
    },
    deleteziduan (key) {//删除新增元素弹框字段
      this.tableData.splice(key, 1)
    },
    pushNewElementField () {//确定添加按钮
      if (this.tableData.length > 0) {
        let tag = true
        this.tableData.forEach(val => {
          if (!(val.eName && val.eType)) {
            tag = false
          }
        })
        if (tag) {
          this.submitBatch({
            projectId: this.pid,
            initTableName: this.initTableName,
            id: this.pkeyId,
            listData: this.tableData,
          })
        } else {
          this.$message({
            type: 'error',
            message: '请填写所有字段'
          });
        }
      }
    },
    async submitBatch (da) {
      const { data: res } = await submitBatch(da)
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.AddNewElementField = ''

        //更新下拉列表s
        this.getElementInfoByTabId()
      }
    },
    //#endregion

    //跳转到公式配置页面
    toFormulaEdit () {
      let eleid = null;
      if(this.table.ekey){
        for (let i = 0; i < this.options.length; i++) {
          if(this.options[i].ekey == this.table.ekey){
            eleid = this.options[i].id;
            break;
          }
        }
      }

      if(eleid == null){
        this.$message({
          type: "warning",
          message: "找不到元素id"
        })
          this.$refs.cascader.clearCheckedNodes()//调用方法无效
        return;
      }

      // this.$router.push({
      //   path: '/formula/edit',
      //   query: {
      //     wbsid: this.wbsid,
      //     eleid: eleid,
      //     nodeid:this.nodeid,
      //     projectid:this.pid
      //   }
      // });

      this.eleid = eleid;

      if (this.globaltype===10) {
        this.formulaCompVisible = true;
      }else{
         this.formulaCompVisible1 = true;
      }
      this.$refs.cascader.clearCheckedNodes()
    },

    // 返回上一页
    toBack(){
      // this.$router.go(-1);

      this.$emit('hideDialog')

    },


    eleDelete(index){
      this.eleData[index].tdEle.classList.remove('select-td');
      this.eleData.splice(index,1);
    },
    clearSelect(){
      this.eleData.forEach((data)=>{
        data.tdEle.classList.remove('select-td');
      })
    },
    multipleChange(value){
      if(!value && this.eleData.length > 1){
        let last = this.eleData[this.eleData.length-1];
        this.clearSelect();
        this.eleData = [last];
        this.eleData[0].tdEle.classList.add('select-td');
      }
    },

    //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");

        }
      }
    },

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

  },
  watch: {
    'options' () {
      if (this.options) {
        this.options2 = [{
          value: '编辑元素字段',
          label: '编辑元素字段',
          children: [{
            value: '替换元素',
            label: '替换元素'
          }, {
            value: '新增元素',
            label: '新增元素'
          }, {
            value: '删除文本信息',
            label: '删除文本信息'
          }]
        }, {
          value: '公式配置',
          label: '公式配置',
        }]
      } else {
        this.options2 = [{
          value: '编辑元素字段',
          label: '编辑元素字段',
          children: [{
            value: '新增元素',
            label: '新增元素'
          }, {
            value: '删除文本信息',
            label: '删除文本信息'
          }]
        }, {
          value: '公式配置',
          label: '公式配置',
        }]
      }
    },
    'value' (values) {
      if (values) {
        this.options.forEach(val => {
          if (val.id == values) {
            this.names = val.eName
          }
        })
      }
    },
    // 'cascaderPanel'(val){
    //   this.AddNewElementField = '替换元素'
    // }
  }
}
</script>

<style lang="scss" scoped>
.editElement {
  padding-bottom: 40px !important;
  .header {
    color: rgb(240, 114, 10);
  }
  .tihuan {
    margin-top: 15px;
    margin-bottom: 10px;
    font-family: SourceHanSansSC;
    font-weight: 400;
    font-size: 14px;
    color: rgb(16, 16, 16);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 20px;
    text-decoration: none;
  }
}

.parent{
  /deep/ .select-td{
    border-width: 4px;
    border-color: #E6A23C;
    border-style: solid;
  }

  /deep/ .oldlace-bg{
    background-color: oldlace;
  }
}

.full-dialog{
  /deep/ .el-dialog__body{
    padding-bottom: 0;
    padding-top: 0;
  }

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