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.dictValue" :value="item.dictKey">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :span="24" v-if="from.type==='date'||from.type==='daterange'">
        <el-col :span="3.8" style="line-height: 40px">
          日期：
        </el-col>
        <el-col :span="8">
          <el-checkbox-group v-model="checkDateList" style="margin-top: 10px;margin-left: 10px;" size="large" @change="changeDate">
            
            <el-checkbox v-for="item in yearList" :label="item.value">{{ item.name }}</el-checkbox>
       
          </el-checkbox-group>
        </el-col>
        <el-col :span="3.8" style="line-height: 40px">
          分隔符:
        </el-col>
        <el-col :span="8" style="margin-left: 10px;">
          <el-select
              style="width:100%;"
              v-model="from.divide_y"
              clearable
              placeholder="请选择"
            
            >
              <el-option
                label="文本"
                value="文本"
              >
              </el-option>
              <el-option
                label="-"
                value="-"
              >
              </el-option>
              <el-option
                label="/"
                value="/"
              >
              </el-option>
            </el-select>
        </el-col>
   
      </el-row>
      <el-row :span="24" v-if="from.type==='date'||from.type==='daterange'">
        <el-col :span="3.8" style="line-height: 40px">
          时间：
        </el-col>
        <el-col :span="8">
          <el-checkbox-group v-model="checkTimeist" style="margin-top: 10px;margin-left: 10px;" size="large" @change="changeTime">
            <el-checkbox v-for="item in timeList" :label="item.value">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-col>
        <el-col :span="3.8" style="line-height: 40px">
          分隔符:
        </el-col>
        <el-col :span="8" style="margin-left: 10px;">
          <el-select
              style="width:100%;"
              v-model="from.divide_h"
              clearable
              placeholder="请选择"
            
            >
              <el-option
                label="文本"
                value="文本"
              >
              </el-option>
              <el-option
                label=":"
                value=":"
              >
              </el-option>
              <el-option
                label="/"
                value="/"
              >
              </el-option>
            </el-select>
        </el-col>
   
      </el-row>
      <el-row :span="24" v-if="from.type==='daterange'">
        <el-col :span="3.3" style="line-height: 40px">
          中间分隔符：
        </el-col>
        <el-col :span="18" style="margin-left: 10px;">
          <el-select
              style="width:100%;"
              v-model="from.divide_c"
              clearable
              placeholder="请选择"
            
            >
            <el-option
                label="至"
                value='至'
              >
              </el-option>
              <el-option
                label="-"
                value="-"
              >
              </el-option>
              <el-option
                label="~"
                value="~"
              >
              </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'|| from.type == 'selectBox'">
      <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','checkList','checkNameList'],
  computed: {
    myHtmlData: function () {
      return this.htmlData;
    },
    myCheckList: function () {
      return this.checkList;
    },
    myCheckNameList: function () {
      return this.checkNameList;
    },
  },
  watch: {
    myHtmlData: function (newV) {
      console.log(newV,'1111111111')
      if (newV.type) {
        if (newV.type == 'checkbox') {
          this.from.type = 'checkbox';
          this.setInputTable = newV.checkLabelDatas;
        } else if (newV.type == 'radio') {
          this.from.type = 'radio';
          this.setInputTable = newV.radioDatas;
        } else if (newV.type == 'select') {
          this.from.type = 'select';
          this.setInputTable = newV.selectDatas;
        }
        else if (newV.type == 'selectBox') {
          this.from.type = 'selectBox';
          this.setInputTable = newV.selectDatas;
        }
      } else {
       
        // this.from.type = '';
        this.setInputTable = [];
      }
    },
    checkNameList: {
      handler (vla,val) {
        let iCan=val.some(e => e.name === "警告")
        if(iCan||this.htmlData.name==='警告'){
          this.$message({
            type: "warning",
            message: "当前选中的元素未进行匹配，不能设置输入框格式"
          });
          
          return;
        }
      },
      deep: true
    },
  },
  data() {
    return {
      elementName: [],
      kjtype: [],//框架类型
      from: {
        type: '',
        value: '',
        divide_c:'至',
        divide_y:'文本',
        divide_h:'文本',
      },
      setInputTable: [],//数据体
      disabled: false,
      yearList:[
        {name:'年',value:'YYYY',sort:1},
        {name:'月',value:'MM',sort:2},
        {name:'日',value:'DD',sort:3},
      ],
      yearSort:[],
      TimeSort:[],
      timeList:[
        {name:'时',value:'HH',sort:4},
        {name:'分',value:'mm',sort:5},
        {name:'秒',value:'ss',sort:6},
      ],
      checkDateList: [],
      checkTimeist:[],
  
    }
  },
  methods: {
    addTable() {//添加table表
      this.setInputTable.push({ dictValue: '' })
    },
    deleteTable(key) {//删除数据
      this.setInputTable.splice(key, 1)
    },
    saveType() {//保存设置按钮

      if (this.htmlData.tr === ''&&this.checkList.length==0 || this.htmlData.td === ''&&this.checkList.length==0) {
        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' | this.from.type == 'selectBox') {
          if (this.setInputTable) {
            this.setInputTable.forEach(val => {
              if (!val.dictValue) {
                ks = true
              }
            })
          }
          if (ks) {
            this.$message({
              type: "error",
              message: "请填写完枚举值"
            });
            this.disabled = false
          } else {

            if(this.checkList.length===0){
            this.saveInput([{
                  trIndex: this.htmlData.tr,
                  tdIndex: this.htmlData.td,
                  tableId: this.pkeyId,
                  textId: this.from.type,
                  type: '1',
                  textInfo: this.setInputTable
                }])
            }else if(this.checkList.length>0){
              let arr=[]
              this.checkList.forEach((ele)=>{
                  arr.push({
                    trIndex: ele.tr,
                    tdIndex: ele.td,
                    tableId: this.pkeyId,
                    textId: this.from.type,
                    type: '1',
                    textInfo: this.setInputTable
                  })
              })
              this.saveInput(arr)
            }
       
          }
        } else if(this.from.type == 'daterange'|this.from.type == 'date'){
          let c = this.yearSort.concat(this.TimeSort);//c=[1,2,3,4,5,6]
          console.log(c,'c');
          let  isAdd=this.isContinuityNum(c)
          console.log(isAdd,'isAdd');
          if(isAdd||c.length===1){
            let dateFormat=[]
            this.yearList.forEach((ele)=>{
              this.checkDateList.forEach((ele1)=>{
                if(ele.value===ele1){
                  dateFormat.push(
                    {
                      name:ele.name,
                      value:ele.value
                    }
                  )
                }
              })
            })
            this.timeList.forEach((ele)=>{
              this.checkTimeist.forEach((ele1)=>{
                if(ele.value===ele1){
                  dateFormat.push(
                    {
                      name:ele.name,
                      value:ele.value
                    }
                  )
                }
              })
            })
            if(this.from.divide_y){
              dateFormat.push({
                name:'divide_y',value:this.from.divide_y
              })
            }
            if(this.from.divide_h){
              dateFormat.push({
                name:'divide_h',value:this.from.divide_h
              })
            }
            if(this.from.divide_c&&this.from.type==='daterange'){
              dateFormat.push({
                name:'divide_c',value:this.from.divide_c
              })
            }
            console.log(dateFormat,'dateFormat');
            if(this.checkList.length===0){
                  this.saveInput([{
                    trIndex: this.htmlData.tr,
                    tdIndex: this.htmlData.td,
                    tableId: this.pkeyId,
                    textId: this.from.type,
                    type: '1',
                    textInfo: this.setInputTable,
                    dateFormat:dateFormat
                }])
            }else if(this.checkList.length>0){
              let arr=[]
              this.checkList.forEach((ele)=>{
                  arr.push({
                    trIndex: ele.tr,
                    tdIndex: ele.td,
                    tableId: this.pkeyId,
                    textId: this.from.type,
                    type: '1',
                    textInfo: this.setInputTable,
                    dateFormat:dateFormat
                  })
              })
              this.saveInput(arr)
            }
          }else{
            this.$message.warning('请按年月日时分秒顺序选择，不要跨越选择')
          }
         
        }
        else {
          if(this.checkList.length===0){
                   this.saveInput([{
                  trIndex: this.htmlData.tr,
                  tdIndex: this.htmlData.td,
                  tableId: this.pkeyId,
                  textId: this.from.type,
                  type: '1',
                  textInfo: this.setInputTable
                }])
            }else if(this.checkList.length>0){
              let arr=[]
              this.checkList.forEach((ele)=>{
                  arr.push({
                    trIndex: ele.tr,
                    tdIndex: ele.td,
                    tableId: this.pkeyId,
                    textId: this.from.type,
                    type: '1',
                    textInfo: this.setInputTable
                  })
              })
              this.saveInput(arr)
            }
        }
      } 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);
      this.checkDateList=[]
      this.checkTimeist=[]
      this.from.divide_y='文本'
      this.from.divide_h='文本'
      this.from.divide_c='至'
      this.yearSort=[]
      this.TimeSort=[]
      this.checkList=[]
      this.checkNameList=[]

      this.$emit('change')
      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')
      }
    },
    // 判断是否是是
  
   //判断一串数字是否是连续的
  isContinuityNum(num){
            let array=[];
            if(num instanceof Array){
                array = [...num];
            }else{
                array = Array.from(num.toString())//转换为数组
            }            
            
            var i=array[0];
            var isContinuation=true;
            for(var e in array){
                if(array[e]!=i){
                    isContinuation=false;
                    break;
                }
                i++;
            }
            return isContinuation;

  },



    changeDate(val){
      this.yearSort=[]
      this.yearList.forEach((ele)=>{
        val.forEach((ele1)=>{
          if(ele.value===ele1){
            this.yearSort.push(ele.sort)
          }
        })
      })


    
    },
    changeTime(val){
      this.TimeSort=[]
      this.timeList.forEach((ele)=>{
        val.forEach((ele1)=>{
          if(ele.value===ele1){
            this.TimeSort.push(ele.sort)
          }
        })
      })
     
      
    }
  },
  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>