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'">
      <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'],
  computed: {
    myHtmlData: function () {
      return this.htmlData;
    }
  },
  watch: {
    myHtmlData: function (newV) {
      //console.log(newV)
      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 {
       
        // this.from.type = '';
        this.setInputTable = [];
      }
    }
  },
  data() {
    return {
      elementName: [],
      kjtype: [],//框架类型
      from: {
        type: '',
        value: '',
        divide_c:'至'
      },
      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.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 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.IncreasingFn(c)
          console.log(isAdd,'isAdd');
          if(isAdd){
            let dateFormat=[]
            this.yearList.forEach((ele)=>{
              this.checkDateList.forEach((ele1)=>{
                if(ele.value===ele1){
                  dateFormat.push(
                    ele
                  )
                }
              })
            })
            this.timeList.forEach((ele)=>{
              this.checkTimeist.forEach((ele1)=>{
                if(ele.value===ele1){
                  dateFormat.push(
                    ele
                  )
                }
              })
            })
            if(this.from.divide_y){
              dateFormat.push({
                divide_y:this.from.divide_y
              })
            }
            if(this.from.divide_h){
              dateFormat.push({
                divide_h:this.from.divide_h
              })
            }
            if(this.from.divide_c&&this.from.type==='daterange'){
              dateFormat.push({
                divide_c:this.from.divide_c
              })
            }
            console.log(dateFormat,'dateFormat');
            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{
            this.$message.warning('请按年月日时分秒顺序选择，不要跨越选择')
          }
         
        }
        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);
      this.checkDateList=[]
      this.checkTimeist=[]
      this.from.divide_y=''
      this.from.divide_h=''
      this.yearSort=[]
      this.TimeSort=[]
      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')
      }
    },
    // 判断是否是是
  
    IncreasingFn(array) {
      let IncreasingFn = false
      let arrayCount = array.length - 1
      // console.log(arrayCount,'现在是？');
      for (var i = 0; i < arrayCount; i++) {
        let currentArr = Number(array[i]) + 1
        let nestArr = Number(array[i + 1])
 
        if (i < 1 == arrayCount) {
          console.log('执行')
          currentArr = Number(array[i])
          nestArr = Number(array[i])
        }
        if (currentArr != nestArr) {
          IncreasingFn = false
          break
        } else {
          IncreasingFn = true
        }
      }
      return IncreasingFn
    },


    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>