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

<template>
  <div
    style="height:100%;"
    ref="heights"
  >
    <basic-container class="editElement">
      <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'
          >
          </div>

        </el-col>
        <el-col
          :span="7"
          style="position: fixed;right: 13px;"
        >
          <div v-show="AddNewElementField == '替换元素'">
            <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: 20px; right:20px;"
          >
            <el-button type="info">取消</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
        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>
    </basic-container>
  </div>
</template>

<script>
import { getExcelHtml } from '@/api/exctab/excelmodel'
import { getElementInfoByTabId, submit, dictionarydataType, submitBatch } from '@/api/exctab/editelement'
import Vue from 'vue'
export 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+)/,
    }
  },
  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");
      let ekey = null;
      if(this.ekeyReg.test(targetkeyname)){
        ekey = targetkeyname.match(this.ekeyReg)[1]
      }
      this.table = {
        tr,
        td,
        ekey
      }

      this.left = window.event.clientX - 300
      let Y = window.event.clientY
      if (window.outerHeight - Y > 200) {
        this.top = window.event.clientY - 80
      } else {
        this.top = window.event.clientY - 270
      }
      this.cascaderPanel = true
      clearTimeout(this.setTimeout)
      this.setTimeout = setTimeout(() => {
        this.cascaderPanel = false
      }, 3000)
    },
    deleteelement () {//删除元素提示
      let _that = this
      this.$confirm('确认删除该元素？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _that.submit({
          colName: '/',
          tabId: this.$route.query.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
      var MyComponent = await Vue.extend({
        template: localStorage.getItem('editElement'),
        data () {
          return {
            formData: {}
          }
        },
        methods: {
          RightClick (tr, td, x1, x2, y1, y2) {//鼠标右键事件
            _that.RightClick2(tr, td, x1, x2, y1, y2)
          },
          getInformation (a, b, c) {
            _that.getInformation2(a, b, c)
          }
        }
      })
      var component = new MyComponent().$mount()

      document.getElementById('parent').appendChild(component.$el);
    },
    async copss () {
      let _that = this
      var MyComponent = await Vue.extend({
        template: localStorage.getItem('editElement'),
        data () {
          return {
            formData: {}
          }
        },
        methods: {
          RightClick (tr, td, x1, x2, y1, y2) {//鼠标右键事件
            _that.RightClick2(tr, td, x1, x2, y1, y2)
          },
          getInformation (a, b, c) {
            _that.getInformation2(a, b, c)
          }
        }
      })
      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.$route.query.pid,
          wbsid: this.$route.query.wbsid,
        }
      })
    },
    //#region 左侧替换元素
    cancelReplace () {//替换元素取消按钮
      this.AddNewElementField = ''
    },
    saveReplace () {//保存按钮
      if (this.value) {
        this.tag = true
        console.log({
          tabId: this.$route.query.pkeyId,
          tdIndex: this.table.td,
          trIndex: this.table.tr,
          colName: "",
          htmlType: this.value
        });
        this.submit({
          tabId: this.$route.query.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.$route.query.id })
      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.$route.query.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 () {
      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({
            initTableName: this.$route.query.initTableName,
            id: this.$route.query.id,
            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 = ''
      }
    },
    //#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"
        })
        return;
      }

      this.$router.push({
        path: '/formula/edit',
        query: {
          wbsid: this.$route.query.wbsid,
          eleid: eleid,
          nodeid:this.$route.query.nodeid,
          projectid:this.$route.query.pid
        }
      });
    },
  },
  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
          }
        })
      }
    },
  }
}
</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;
  }
}
</style>