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

<template>
  <el-dialog
		:visible.sync="isShow"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
    :title="titleMap[info.key]"
		@close="cancelHandle"
		custom-class="dialog"
		center
		width="560px"
		v-dialogDrag>
			<div class="dialog-main">
          <!-- 导入系统日期 -->
            <ul v-if="info.key==='insert-sys-date'">
              <li class="form-item">
                <label>导入方式</label>
                <el-select
                    v-model="formData.Source"
                    placeholder="请选择导入方式"
                    @change="init('form')"
                >
                  <el-option
                      v-for="item in wayOptions"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                  />
                </el-select>

                <template v-if="formData.Source===3">
                  <el-select
                      style="max-width: 120px;margin:0 10px"
                      v-model="formData.Frequency"
                      :placeholder="$t('OnlineExcelPage.please_select_frequency')"
                      @change="formData.Day=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;"
                      v-model="formData.Day"
                      placeholder="请选择"
                  >
                    <el-option
                        v-for="item in frequencyDaysOptions"
                        :key="item.name"
                        :label="item.name"
                        :value="item.name"
                    />
                  </el-select>
                </template>

                <el-tooltip effect="dark" style="margin-left:10px">
                  <div
                    slot="content"
                    v-html="tips[info.key]"
                    style="line-height: 20px;"
                  ></div>
                  <i class="el-icon-question" style="font-size:18px;"/>
                </el-tooltip>
              </li>
              <template v-if="formData.Source===2">
                <li class="form-item">
                  <label>{{$t('OnlineExcelPage.days_label')}}</label>
                  <el-input
                    v-model="formData.CalculateNum"
                    type="number"
                    style="margin-right:10px;width:200px"
                    @change="e => {formData.CalculateNum=Number(e)}"
                  />
                  {{formData.CalculateFrequency}}
                </li>
                <li style="color:#999">{{$t('OnlineExcelPage.example_show_text')}}</li>
              </template>
            </ul>

          <!-- 导入指标日期 -->
          <ul v-else> 
            <li class="form-item">

              <selectTarget
                :defaultId="search_edb"
                :defaultOpt="searchOptions"
                ref="selectRef"
                @select="e => { selectEdbInfo = e ||{} }"
                :filter="false"
              />

              <el-tooltip effect="dark" style="margin-left:10px">
                <div
                  slot="content"
                  v-html="tips[info.key]"
                  style="line-height: 20px;"
                ></div>
                <i class="el-icon-question" style="font-size:18px;"/>
              </el-tooltip>
            </li>
            <li class="form-item" v-if="selectEdbInfo.Frequency">
              <label>{{$t('OnlineExcelPage.update_frequency_label')}}</label>
              {{ selectEdbInfo.Frequency }}
            </li>
            <li class="form-item" v-if="selectEdbInfo.LatestDate">
              <label>{{$t('OnlineExcelPage.lastest_date_label')}}</label>
              {{ selectEdbInfo.LatestDate }}
            </li>
          </ul>
			</div>
			<div class="dia-bot">
				<el-button type="primary" style="margin-right:20px" @click="saveInsertHandle">{{$t('ETable.Btn.save_btn')}}</el-button>
				<el-button type="primary" plain @click="cancelHandle">{{$t('ETable.Btn.cancel_btn')}}</el-button>
			</div>
	</el-dialog>
</template>
<script>
import * as sheetInterface from "@/api/modules/sheetApi.js";
import { dataBaseInterface } from '@/api/api.js';
import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue'
export default {
  props: {
    isShow: {
      type: Boolean
    },
    info: {
      type: Object
    }
  },
  components: { selectTarget },
  watch: {
    isShow : { 
      async handler(nval) {
        if(nval && this.info.Value) { //处理日期编辑回显
          const valueObj = JSON.parse(this.info.Value);

          this.formData = {
            ...this.formData,
            ...valueObj
          }

          if(this.info.DataTimeType===2) { //指标日期时获取指标详情
            const { Data } = await dataBaseInterface.targetDetail({EdbInfoId: valueObj.EdbInfoId})

            const { EdbName,LatestDate,Frequency,EdbInfoId } = Data;
            this.selectEdbInfo = { EdbName,LatestDate,Frequency,EdbInfoId }

            this.search_edb = valueObj.EdbInfoId;
            this.searchOptions = [this.selectEdbInfo];
          }
        }
      }
    }  

  },
  computed: {
    frequencyDaysOptions() {
      let typeMap = {
        '本周': [
          { name: '周一' },
          { name: '周二' },
          { name: '周三' },
          { name: '周四' },
          { name: '周五' },
          { name: '周六' },
          { name: '周日' },
        ]
      }
      return typeMap[this.formData.Frequency] 
        ? typeMap[this.formData.Frequency] 
        : [{name:'第一天'},{name:'最后一天'}]
    },
    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 {
      formData: {
        Source: 1,
        Frequency: '本周',
        Day: '周一',
        CalculateNum: 0,
        CalculateFrequency: '日'
      },

      wayOptions: [
        { name: '直接导入', value: 1 },
        { name: '日期计算', value: 2 },
        { name: '指定频率', value: 3 },
      ],


      search_edb: '',
      searchOptions:[],

      titleMap: {
        'insert-sys-date': '导入系统日期',
        'insert-edb-date': '导入指标日期'
      },

      tips: {
        'insert-sys-date': `1、直接导入：直接取系统日期，跟随系统日期更新<br>
        2、日期计算：取系统日期进行公式计算，跟随系统日期更新 <br>
        3、指定频率：取系统日期相关的指定日期，跟随系统日期更新`,
        'insert-edb-date': '取指标的最新日期，跟随指标最新日期更新'
      },

      selectEdbInfo: {}

    }
  },
  methods:{
    // 保存插入信息
    async saveInsertHandle() {

      if(this.info.key==='insert-edb-date' && !this.selectEdbInfo.EdbInfoId) return this.$message.warning('请选择指标')
      
      let backData = {}
      //插入系统日期
      if(this.info.key==='insert-sys-date') {
        let { Data } = await sheetInterface.getSystemDate({
          DataTimeType: 1,
          Value: JSON.stringify(this.formData)
        })
        
        backData = {
          insertValue: Data.Date,
          dataTimeType: 1,
          str: JSON.stringify(this.formData)
        }
      }else { //指标日期
        backData = {
          insertValue: this.selectEdbInfo.LatestDate,
          dataTimeType: 2,
          str:  JSON.stringify({EdbInfoId: this.selectEdbInfo.EdbInfoId})
        }
      }
      this.$emit('insert',backData)
      this.cancelHandle()
    },

    init(type='') {

      this.formData = {
        Source: this.formData.Source,
        Frequency: '本周',
        Day: '周一',
        CalculateNum: 0,
        CalculateFrequency: '日'
      }

      this.search_edb = '';
      this.searchOptions = [];
      if(this.$refs.selectRef) this.$refs.selectRef.search_txt='';

      if(!type) this.formData.Source = 1;
      this.selectEdbInfo = {}
    },
    cancelHandle() {
      this.init()
      this.$emit('update:isShow',false)
    }
  },
}
</script>
<style scoped lang='scss'>
.dialog-main {
  padding: 20px;
  .form-item { 
    margin: 15px 0; 
    display: flex;
    align-items: center;
    label { width: 80px;flex-shrink: 0; }
  }
}
.dia-bot {
  margin: 30px 0;
  display: flex;
  justify-content: center;
}
</style>