saber/src/views/manager/projectinfo/treeTemplate/template/promptSettings.vue

<template>
  <div>
    <div class="editDefault">
      <el-row :span="24">
        <el-col :span="3.3" style="line-height: 40px">
          元素坐标：
        </el-col>
        <el-col :span="18">
          <avue-input v-model="htmlData1.name" placeholder="请点击坐标" :disabled='true'></avue-input>
        </el-col>
      </el-row>

      <el-row :span="24">
        <el-col :span="3.3" style="line-height: 40px">
          提示信息：
        </el-col>
        <el-col :span="18">
          <el-input
            class="martop15"
            style="width:100%;"
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="textarea"
          ></el-input>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        <el-button type="primary"
                   size="small"
                   icon="el-icon-circle-plus-outline"
                   @click="saveTiool()">保存
        </el-button> &nbsp;&nbsp;
        <el-button type="primary"
                   size="small"
                   icon="el-icon-circle-plus-outline"
                   @click="cleanDefult()">清空
        </el-button>
      </el-row>
    </div>
    <div style="border: 1px dotted rgb(187, 187, 187);box-sizing: border-box;padding: 0px 15px;"
         class="martop20 marbottom10">
      <table @click
             class="table martop20 copyTable"
             width='100%'
             border='1px '
             bordercolor="#E5E5E5"
             cellpadding='2px'
      >
        <thead
          cellpadding='2px'
          height='40px'
        >
        <tr>
          <th width='30%'>元素位置</th>
          <th width='30%'>提示语</th>
          <th width='20%'>操作</th>
        </tr>
        </thead>
        <tbody height='36px'>
        <tr v-for="(item,key) in setsignaTable" :key="key" v-on:click="">
          <td>{{ item.colName }}</td>
          <td>{{ item.sigRoleName }}</td>
          <td align="center"><span style="color:red;cursor: pointer;" v-on:click="deleteTableSig(item.id)">删除</span></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import {getSigList, saveDdefual,remove} from "../../../../../api/manager/AdjustForm";

export default {
  props: ['pkeyId1', 'htmlData1'],
  data() {
    return {
      textarea: '',
      setsignaTable: [],
    }
  },
  methods: {
    cleanDefult () {//清空数据
      this.textarea='';
    },
    async saveTiool() {

      if(this.htmlData1.tr === '' || this.htmlData1.td === ''){
        this.$message({
          type: "warning",
          message: "请先选择元素"
        });
        return;
      }

      if(this.textarea === '' || this.textarea=== ''){
        this.$message({
          type: "warning",
          message: "请输入提示语"
        });
        return;
      }


      const {data: res} = await saveDdefual({
        trIndex: this.htmlData1.tr,
        tdIndex: this.htmlData1.td,
        tableId: this.pkeyId1,
        textId: this.textarea,
        type: '5',
      })
      if (res.code === 200) {
        this.getSingInfo()
        this.$message({
          type: "success",
          message: "操作成功"
        });
        this.$parent.getExcelHtml(this.pkeyId1);
      }
    },
    async deleteTableSig(ids) {//删除数据
    //  this.setsignaTable.splice(key, 1);
      const {data: res} = await remove(ids);
      this.getSingInfo();
      if (res.code === 200) {
        this.$message({
          type: "success",
          message: "操作成功"
        });
      }

    },
    async getSingInfo() {
      const {data: res} = await getSigList(
        {
          current: 0,
          size: 100,
          tabId: this.pkeyId1,
          type: 5
        }
      )
      if (res.code === 200) {
        this.setsignaTable = res.data.records;
      }
    }
  },
  created() {
    this.getSingInfo();
    this.setsignaTable = [];
  }
}
</script>
<style lang="scss" scoped>

.copyTable td{
  user-select:initial !important;
}

</style>