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

<template>
  <div>
    <div class="setInputcss">
      <el-row :span="24">
        <el-col :span="3.3" style="line-height: 40px">
          元素坐标：
        </el-col>
        <el-col :span="18">
            <avue-input v-model="htmlData.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-select
        style="width:100%;"
        v-model="from.type"
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="item in kjtype"
          :key="item.dictKey"
          :label="item.remark"
          :value="item.dictKey"
        >
        </el-option>
      </el-select>
        </el-col>
      </el-row>
    </div>
    <!-- 添加框 -->
    <div
      style="border: 1px dotted rgb(187, 187, 187);box-sizing: border-box;padding: 0px 15px;"
      class="martop20 marbottom10"
      v-show="from.type=='select'||from.type=='radio'||from.type=='checkbox'"
    >
      <table
        class="table"
        width='100%'
        border='1px'
        cellpadding='2px'
        bordercolor="#E5E5E5"
      >
        <thead
          cellpadding='2px'
          height='40px'
        >
          <tr>
            <th width='15%'>序号</th>
            <th width='65%'>默认值</th>
            <th width='20%'>操作</th>
          </tr>
        </thead>
        <tbody height='36px'>
          <tr
            v-for="(item,key) in setInputTable"
            :key="key"
          >
            <td align="center">{{key+1}}</td>
            <td>
              <el-input
                v-model="setInputTable[key].dictValue"
                size="mini"
                placeholder="请输入内容"
              ></el-input>
            </td>
            <td align="center">
              <el-link
                type="warning"
                @click="deleteTable(key)"
              >删除</el-link>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="martop20 flexEnd marbottom10"><i
          style="padding-bottom: 10px;color:rgb(10, 134, 217);font-size:24px;cursor: pointer;"
          class="el-icon-circle-plus"
          @click="addTable()"
        ></i></div>
    </div>
    <el-row style="text-align: center">
      <el-button type="primary"
                 size="small"
                 icon="el-icon-circle-plus-outline"
                 @click="saveType()">保存设置</el-button> &nbsp;&nbsp;
      <el-button type="primary"
                 size="small"
                 icon="el-icon-circle-plus-outline"
                 @click="saveType()">继续保存</el-button>
    </el-row>
  </div>
</template>
<script>
import { dictionary, saveInput, getColByTabId } from "@/api/manager/AdjustForm";
import { getExcelHtml } from '@/api/exctab/excelmodel'
export default {
  props: ['pkeyId', 'htmlData'],
  data () {
    return {
      elementName: [],
      kjtype: [],//框架类型
      from: {
        type: '',
        value: '',
      },
      setInputTable: [],//数据体
      disabled: false,
    }
  },
  methods: {
    addTable () {//添加table表
      this.setInputTable.push({ dictValue: '' })
    },
    deleteTable (key) {//删除数据
      this.setInputTable.splice(key, 1)
    },
    saveType () {//保存设置按钮
      if(this.htmlData.tr == '' || this.htmlData.td == ''){
        this.$message({
          type: "warning",
          message: "请先选择元素"
        });
        return;
      }

      this.disabled = true
      if (this.from.type) {
        let ks = false
        if (this.from.type == 'select' | this.from.type == 'radio' | this.from.type == 'checkbox') {
          if (this.setInputTable) {
            this.setInputTable.forEach(val => {
              if (!val.dictValue) {
                ks = true
              }
            })
          }
          if (ks) {
            this.$message({
              type: "error",
              message: "请填写完枚举值"
            });
            this.disabled = false
          } else {
            this.saveInput({
              trIndex: this.htmlData.tr,
              tdIndex: this.htmlData.td,
              tableId: this.pkeyId,
              textId: this.from.type,
              type: '1',
              textInfo: this.setInputTable
            })
          }
        } else {
          this.saveInput({
            trIndex: this.htmlData.tr,
            tdIndex: this.htmlData.td,
            tableId: this.pkeyId,
            textId: this.from.type,
            type: '1',
            textInfo: []
          })
        }
      } else {
        this.disabled = false
        this.$message({
          type: "warning",
          message: "请选择文本格式"
        });
      }
    },
    async dictionary () {//获取文本类型接口
      const { data: res } = await dictionary()
      console.log(res);
      if (res.code === 200) {
        this.kjtype = res.data
      }
    },
    async saveInput (da) {//保存设置文本接口
      const { data: res } = await saveInput(da)
      console.log(res);
      if (res.code == 200) {
        this.setInputTable = []
        this.disabled = false
        this.getExcelHtml()
      }
    },
    // async getColByTabId () {//获取字段信息
    //   const { data: res } = await getColByTabId({ tabId: this.pkeyId })
    //   console.log(res);
    //   if (res.code === 200) {
    //     this.elementName = res.data
    //   }
    // },
    async getExcelHtml () {
      const { data: res } = await getExcelHtml({ pkeyId:this.pkeyId})
      console.log(res);
      if (res.code === 200) {
        this.htmlData.name = ''
        this.from.type = ''
        this.htmlData.tr = ''
        this.htmlData.td = ''
        this.setInputTable = []
        localStorage.setItem('excelHtml', res.data)
        this.$emit('cop')
      }
    },
  },
  created () {
    this.dictionary()  //获取文本类型接口
    // this.getColByTabId()
  },
}
</script>
<style lang="scss" scoped>
.table {
  margin-top: 20px;
  border-radius: 5px;

  color: #101010;
  font-size: 14px;
}
.setInputcss{
  width: 90%;
  height: 100%;
}
</style>