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="$t('ETableChildren.impord_date_title')"
		@close="cancelHandle"
		custom-class="dialog"
		center
		width="650px"
		v-dialogDrag>
			<div class="dialog-main">

          <ul>
            <li class="form-item">
              <el-radio 
                v-model="dateChangeSelect"
                style="margin-right:12px"
                :label="2"
              >{{$t('ETableChildren.indicator_date_radio')}}</el-radio>

              <selectTarget
                :defaultId="search_edb"
                :defaultOpt="searchOptions"
                ref="selectRef"
                @select="e => { selectEdbInfo = e ||{} }"
                :filter="false"
                width="240px"
              />
              
              <span v-show="selectEdbInfo.Frequency" style="margin: 0 10px">{{$t('ETableChildren.frequency_lable')}}: {{ selectEdbInfo.Frequency }}</span>
              <span v-show="selectEdbInfo.LatestDate">{{$t('OnlineExcelPage.lastest_date_lab')}}: {{ selectEdbInfo.LatestDate }}</span>
            </li>
            <li class="form-item" style="padding-left:10px">
              <label class="el-form-item__label">{{$t('ETableChildren.lagging_period_label')}}</label>
              <el-input
                v-model="formData.MoveForward"
                type="number"
                :min="0"
                style="margin-right:10px;width:80px"
                @change="e => {formData.MoveForward=Number(e)}"
              />{{$t('ETableChildren.term_ipt')}}
            </li>
            <li class="form-item">
              <el-radio 
                v-model="dateChangeSelect"
                :label="1"
                style="margin-right:12px"
              >{{$t('ETableChildren.system_date_rai')}}</el-radio>
              
              <span>{{ $moment().format('YYYY-MM-DD') }}</span>
            </li>
            <li class="form-item">
              <dateMoveWaySec ref="dateMoveWayRef"/>
            </li>
          </ul>
			</div>

      <el-popover
        placement="top-start"
        width="500"
        trigger="click">
        <p style="padding:20px;line-height:25px;" v-html="tips"/>
        <el-button slot="reference" class="tip-label" type="text">{{$t('ETableChildren.formula_explanation_btn')}}</el-button>
      </el-popover>

			<div class="dia-bot">
				<el-button type="primary" style="margin-right:20px" @click="saveInsertHandle">{{$t('Dialog.confirm_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'
import dateMoveWaySec from './dateMoveWaySection.vue'
export default {
  props: {
    isShow: {
      type: Boolean
    },
    info: {
      type: Object
    }
  },
  components: { selectTarget,dateMoveWaySec },
  watch: {
    isShow : { 
      async handler(nval) {
        if(nval && this.info.Value) { //处理日期编辑回显
          const valueObj = JSON.parse(this.info.Value);

          // this.formData = {
          //   ...this.formData,
          //   ...valueObj
          // }
          this.formData = {
            MoveForward: valueObj.MoveForward
          }
          this.dateChangeSelect = this.info.DataTimeType;

          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];
          }

          this.$nextTick(() => {
            this.$refs.dateMoveWayRef&&this.$refs.dateMoveWayRef.initData(valueObj.DateChange)
          })
        }
      }
    }  

  },
  computed:{
    tips(){
      return this.$t('ETableChildren.tips_text') 
    }
  },
  data() {
    return {
      formData: {
        // Source: 1,
        // Frequency: '本周',
        // Day: '周一',
        // CalculateNum: 0,
        // CalculateFrequency: '日'
        MoveForward: 0,
      },



      selectEdbInfo: {},

      dateChangeSelect: 2,//日期方式选择 1系统日期 2指标日期

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

      if(this.dateChangeSelect===2 && !this.selectEdbInfo.EdbInfoId) return this.$message.warning('请选择指标')
      
      let backData = {}
      //插入系统日期
      // if(this.info.key==='insert-sys-date') {

        let valueParam = {
          EdbInfoId: this.selectEdbInfo.EdbInfoId||0,
          MoveForward: this.formData.MoveForward,
          DateChange: this.$refs.dateMoveWayRef.dateChangeArr
        }

        let { Data } = await sheetInterface.getSystemDate({
          DataTimeType: this.dateChangeSelect,
          Value: JSON.stringify(valueParam)
        })
        
        backData = {
          insertValue: Data.Date,
          dataTimeType: this.dateChangeSelect,
          str: JSON.stringify(valueParam)
        }
      // }else { //指标日期
      //   backData = {
      //     insertValue: this.selectEdbInfo.LatestDate,
      //     dataTimeType: 2,
      //     str:  JSON.stringify({EdbInfoId: this.selectEdbInfo.EdbInfoId})
      //   }
      // }
      this.$emit('insert',backData)
      this.cancelHandle()
    },

    init() {

      this.formData = {
        MoveForward: 0,
      }

      this.search_edb = '';
      this.searchOptions = [];
      if(this.$refs.selectRef) this.$refs.selectRef.search_txt='';
      this.selectEdbInfo = {}
      this.dateChangeSelect = 2;
      this.$refs.dateMoveWayRef.initData();
    },
    cancelHandle() {
      this.init()
      this.$emit('update:isShow',false)
    }
  },
}
</script>
<style scoped lang='scss'>
.dialog-main {
  padding: 0 20px;
  .form-item { 
    margin: 20px 0; 
    display: flex;
    align-items: center;
    label { width: 90px;flex-shrink: 0;text-align: right;}
  }
}
.dia-bot {
  margin: 30px 0;
  display: flex;
  justify-content: center;
}
.tip-label {
  position: absolute;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
}
</style>