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

<template>
  <div class="setInput">
    <div class="flexBetween">
      <!-- <el-select
        style="width:45%;"
        v-model="from.value"
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="item in elementName"
          :key="item.tabId"
          :label="item.colName"
          :value="item.tabId"
        >
        </el-option>
      </el-select> -->
      <el-input
        style="width:45%;"
        :disabled='true'
        v-model="htmlData.name"
        placeholder="请输入内容"
      ></el-input>
      <el-select
        style="width:45%;"
        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>
    </div>
    <!-- 添加框 -->
    <div
      style="border: 1px dotted rgb(187, 187, 187);box-sizing: border-box;padding: 0px 15px;"
      class="martop20"
      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="color:rgb(10, 134, 217);font-size:24px;cursor: pointer;"
          class="el-icon-circle-plus"
          @click="addTable()"
        ></i></div>
    </div>

    <el-button
      style="float:right;margin-top:15px;"
      type="info"
      size="mini"
      @click="saveType()"
      :disabled="disabled"
    >保存设置</el-button>
  </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 () {//保存设置按钮
      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
      }
    },
    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.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({ excelId: this.excelId })
      console.log(res);
      if (res.code === 200) {
        this.htmlData.name = ''
        this.from.type = ''
        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;
}
</style>