eta_front/src/views/datasheet_manage/components/dateMoveWaySection.vue

<template>
  <div class="date-change-ways">
    <div class="header date-item">
      <label class="el-form-item__label">{{$t('ETableChildren.date_change_label')}}</label>
                
      <el-select v-model="dateChangeSelect" :placeholder="$t('ETable.Msg.please_select')" style="width:110px">
        <el-option :label="$t('ETableChildren.date_displacement_label')" :value="1"/>
        <el-option :label="$t('ETableChildren.specified_frequency_tag')" :value="2"/>
      </el-select>

      <el-button type="text" style="margin: 0 10px;" @click="addDateChange">{{$t('ETable.Btn.add_btn')}}</el-button>
    </div>
    
    <ul v-if="dateChangeArr.length" class="date-change-list">
      <li v-for="(dateItem,index) in dateChangeArr" :key="dateItem.ChangeType" class="date-change-li">

        <div v-if="dateItem.ChangeType===1" class="date-item">
          <el-tag type="info" style="margin-right:15px">{{$t('ETableChildren.date_displacement_label')}}</el-tag>
          <div>
            <el-input
              v-model="dateItem.Day"
              type="number"
              style="margin-right:10px;width:80px"
              @change="e => {dateItem.Day=Number(e);}"
            />{{$t('ETable.Date.day')}}
            <el-input
              v-model="dateItem.Month"
              type="number"
              style="margin-right:10px;width:80px"
              @change="e => {dateItem.Month=Number(e);}"
            />{{$t('ETable.Date.month')}}
            <el-input
              v-model="dateItem.Year"
              type="number"
              style="margin-right:10px;width:80px"
              @change="e => {dateItem.Year=Number(e);}"
            />{{$t('ETable.Date.year')}}
          </div>
          <i class="el-icon-delete" @click="removeDateItem(index)"></i>
        </div>

        <div v-else-if="dateItem.ChangeType===2" class="date-item">
          <el-tag type="info" style="margin-right:15px">{{$t('ETableChildren.specified_frequency_tag')}}</el-tag>
          <el-select
              style="max-width: 120px;"
              v-model="dateItem.Frequency"
              :placeholder="$t('OnlineExcelPage.please_select_frequency')"
              @change="dateItem.FrequencyDay=frequencyDaysOptions[0].name;"
          >
            <el-option
                v-for="item in frequencyOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
            />
          </el-select>

          <el-select
              style="max-width: 120px;margin:0 10px"
              v-model="dateItem.FrequencyDay"
              :placeholder="$t('ETable.Msg.please_select')"
          >
            <el-option
                v-for="item in frequencyDaysOptions"
                :key="item.name"
                :label="item.lable"
                :value="item.name"
            />
          </el-select>

          <i class="el-icon-delete" @click="removeDateItem(index)"></i>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:{
    defaultArr:{
      default:()=>[]
    }
  },
  computed: {
    frequencyDaysOptions() {
      let typeMap = {
        '本周': [
          { name: '周一' ,lable: this.$t('ETable.Date.monday') },
          { name: '周二' ,lable: this.$t('ETable.Date.tuesday')},
          { name: '周三' ,lable: this.$t('ETable.Date.wednesday')},
          { name: '周四' ,lable: this.$t('ETable.Date.thursday')},
          { name: '周五' ,lable: this.$t('ETable.Date.friday')},
          { name: '周六' ,lable: this.$t('ETable.Date.saturday')},
          { name: '周日' ,lable: this.$t('ETable.Date.sunday')},
        ]
      }
      
      let obj = this.dateChangeArr.find(_ => _.ChangeType===2);
      if(!obj) return []

      return typeMap[obj.Frequency] 
        ? typeMap[obj.Frequency] 
        : [
          {name:'第一天',lable: this.$t('ETable.Date.first_day')},
          {name:'最后一天',lable: this.$t('ETable.Date.last_day')}
        ]
    },
    frequencyOptions(){
      return  [
        { name: this.$t('ETable.Date.this_week'), value: '本周' },
        { name: this.$t('ETable.Date.this_ten_days'), value: '本旬' },
        { name: this.$t('ETable.Date.this_month'), value: '本月' },
        { name: this.$t('ETable.Date.this_season'), value: '本季' },
        { name: this.$t('ETable.Date.this_half_year'), value: '本半年' },
        { name: this.$t('ETable.Date.this_year'), value: '本年' },
      ]
    }
  },
  data() {
    return {
      dateChangeSelect: 1,
      dateChangeArr: [],

      
    }
  },
  created() {
    console.log('日期变换组件加载',this.defaultArr);
    this.initData(this.defaultArr)
  },
  methods:{
    /* 提加日期变换数组 */
    addDateChange() {
      let haveObj = this.dateChangeArr.find(_ => _.ChangeType===this.dateChangeSelect);
      if(haveObj) return this.$message.warning(this.dateChangeSelect===1?this.$t('ETableChildren.added_date_offset_msg') :this.$t('ETableChildren.added_frequency_offset_msg') )
      let item = {
        ChangeType: this.dateChangeSelect,
        Day: 0,
        Month: 0,
        Year: 0,
        Frequency: '本周',
        FrequencyDay: '周一'
      }

      this.dateChangeArr.push(item)
    },

    /* 参数更新时刷数据 */
    changeParams() {
      this.$emit('updateData')
    },

    initData(data=null) {
      if(data) {
        this.dateChangeArr = data || [];
      }else {
        this.dateChangeSelect = 1;
        this.dateChangeArr = []
      }
    },

    removeDateItem(index) {
      this.dateChangeArr.splice(index,1)
    }
  },
}
</script>
<style scoped lang='scss'>
.date-change-ways {
  padding-left: 20px;
  .date-change-list {
    padding-left: 68px;
  }
  .date-change-li {
    margin: 10px 0;
  }
  .header {
    label { width: 100px;text-align: right;margin-left: -20px;}
  }
  .date-item {
    display: flex;
    align-items: center;
    .el-icon-delete {
      color: #f00;
      font-size: 16px;
      margin:0 10px;
      cursor: pointer;
    }
  }
}
</style>