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

<template>
<div v-dialogDrag v-show="isShow" >
  <div class="select-target-value-dia el-dialog" >
    <div class="header el-dialog__header">
      <span>{{$t('OnlineExcelPage.select_criteria_btn')}}</span>
      <i class="el-icon-close" @click="cancelHandle"/>
    </div>
    <div class="main">
      <selectTarget
        ref="selectRef"
        :selectStyleType="3"
        @select="chooseEdb"
      />

      <ul class="data-cont">
        <template v-if="result.List&&result.List.length">
          <li 
            v-for="(item,index) in result.List" 
            :key="index" 
            :class="[{'choose': item.DataTime===chooseItem.date || (!chooseItem.date&&index===0)},'data-li']"
          >
            <span>{{item.DataTime}}</span>
            <span style="min-width:150px">{{item.Value}}</span>
          </li>
        </template>
        <tableNoData size="mini" v-else/>
      </ul>

      <div class="dia-bot">
        <el-button type="primary" style="margin-right: 20px" @click="insertData"
          >{{$t('OnlineExcelPage.insert_value_btn')}}</el-button
        >
        <el-button type="primary" plain @click="cancelHandle">{{$t('ETable.Btn.cancel_btn')}}</el-button>
      </div>
    </div>
    
  </div>
</div>
</template>
<script>
import * as sheetInterface from "@/api/modules/sheetApi.js";
import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue';
import { resetDialogCellStyle } from "../common/customTable";
export default {
  props: {
    isShow: {
      type: Boolean,
    }
  },
  components: { selectTarget },
  data() {
    return {
      result: {},
      edbInfo: null,
      chooseItem: {
        edbId: 0,
        value:''
      }
    }
  },
  methods:{
    /* 选择指标和日期获取近5期数据 */
    async chooseEdb(edb) {
      if(!edb){
        this.initData();
        return
      } 

      this.edbInfo = edb;

      let Date = this.$parent.selectCell.DataType === 1 ? this.$parent.selectCell.ShowValue : ''

      const res = await sheetInterface.getDateLatelyData({ 
        EdbInfoId: edb.EdbInfoId,
        Date
      })
      if(res.Ret !== 200) return

      this.result = res.Data;
      // if(!this.result.Date && Date) return this.$message.warning('所选指标所选日期无值')

      let value = (this.result.List&&this.result.List.length)
        ? (this.result.List.find(_ => _.DataTime===Date) ? this.result.List.find(_ => _.DataTime===Date).Value.toString() : this.result.List[0].Value.toString()) 
        : ''
      this.chooseItem = {
        date: Date,
        edbId: edb.EdbInfoId,
        value
      }

      console.log( this.chooseItem)

    },

    insertData() {
      // if(this.$parent.selectCell.DataType !== 1){
      //   this.$message.warning('请在表格中选择日期')
      //   return
      // }
      if(!this.chooseItem.value) return this.$message.warning(this.$t('OnlineExcelPage.there_data_no_msg') )

      this.$emit('insert',this.chooseItem)
      this.cancelHandle();
    },

    initData() {
      this.$refs.selectRef.search_txt='';
      this.result = {};
      this.edbInfo=null;
      this.chooseItem = { edbId: 0,value: '',date: '' }
    },

    cancelHandle() {
      this.initData();
      this.$emit('update:isShow',false);
      resetDialogCellStyle();
    }
  },
}
</script>
<style scoped lang='scss'>
@import "~@/styles/theme-vars.scss";
.select-target-value-dia {
  background: #fff;
  position: fixed;
  top: 20%;
  left: 55%;
  width: 500px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  .header { 
    height: 50px;
    font-size: 16px;
    background: $theme-color;
    color: #fff;
    padding: 0 15px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    span {
      line-height: 50px;
    }
    .el-icon-close {
      font-size: 20px;
      line-height: 50px;
      cursor: pointer;
    }
  }
  .main {
    padding: 20px 15px;
    .data-cont {
      margin: 15px 0;
      border: 1px solid #DCDFE6;
      /* padding: 20px; */
      .data-li {
        display: flex;
        padding: 15px;
        text-align: center;
        justify-content: space-around;
        &.choose {
          background: #ECF5FF;
        }
      }
    }
    .dia-bot {
      margin-top: 20px; 
      display: flex;
      justify-content: center;
    }
  }
}
</style>