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

<template>
  <div v-dialogDrag v-if="isShow" >
    <div class="calculate-edb-value-dialog el-dialog" >
      <div class="header el-dialog__header">
        <span>{{info.label}}</span>
        <i class="el-icon-close" @click="cancelHandle"/>
      </div>

      <div class="main">

        <section class="main-top">
          <el-radio-group v-model="formData.edbFromSource" @change="initData">
            <el-radio :label="1">表格指标</el-radio>
            <el-radio :label="2">ETA指标&预测指标</el-radio>
          </el-radio-group>

        <template v-if="info.fromEdbKey===62">
          <el-divider direction="vertical" style="margin: 0 20px;"/>
          <el-radio-group 
            v-model="formData.source"
          >
            <el-radio :label="62">累计值</el-radio>
            <el-radio :label="63">年初至今累计值</el-radio>
          </el-radio-group>
        </template>

          <selectTarget
            v-show="formData.edbFromSource===2"
            :defaultId="search_edb"
            :defaultOpt="searchOptions"
            ref="selectRef"
            @select="e => { selectEdbInfo = e ||null }"
            :filter="false"
            style="margin: 20px 0"
          />
        </section>

        <tableEdbListSection 
          v-if="formData.edbFromSource===1"
        />
        
        <edbDetailSection 
          v-if="formData.edbFromSource===2"
          :tableData="selectEdbInfo?[selectEdbInfo]:[]"
        />

        <section class="form-section">
          <el-form
						ref="form"
						label-position="right"
						inline
						label-width="80px"
						:model="formData"
						:rules="formRules"
					>
						<el-form-item label="移动方式" style="display: block;" v-if="info.fromEdbKey === 22" prop="moveVal">
							<el-select
								v-model="formData.moveType"
								style="width: 100px"
								placeholder=""
								size="mini"
								@change="refreshTarget"
							>
								<el-option
									v-for="item in moveTypeOpions"
									:key="item.key"
									:label="item.label"
									:value="item.key"
								>
								</el-option>
							</el-select>
							<el-input
								style="width: 80px"
								type="number"
								min="0"
								size="mini"
								v-model="formData.moveVal"
								@keyup.native="filterCode(formData)"
							></el-input>
							<el-select
								v-model="formData.moveUnit"
								size="mini"
								placeholder=""
								style="width: 100px"
								@change="refreshTarget"
							>
								<el-option
									v-for="item in fre_options"
									:key="item"
									:label="item"
									:value="item"
								>
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="N等于" prop="nNum" v-if="[8,12,13,35].includes(info.fromEdbKey)">
							<el-input
								v-model="formData.nNum"
								style="width: 200px"
								placeholder="请输入N数值"
								type="number"
								@change="NchangeHandle"
							/>
						</el-form-item>

						<el-form-item label="日历" prop="calendarType" v-if="info.fromEdbKey===35">
							<el-select
								v-model="formData.calendarType"
								placeholder="请选择日历"
								style="width: 200px"
								@change="NchangeHandle"
							>
								<el-option
									v-for="item in calendarOptions"
									:key="item.key"
									:label="item.label"
									:value="item.label"
								>
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="数据取值" prop="valueType" v-if="info.fromEdbKey===51">
							<el-select
								v-model="formData.valueType"
								placeholder="请选择数据取值类型"
								style="width: 200px"
							>
								<el-option key="期末值" label="期末值" value="期末值"/>
								<el-option key="平均值" label="平均值" value="平均值"/>
							</el-select>
						</el-form-item>

						<el-form-item label="alpha值" prop="alphaValue" v-if="info.fromEdbKey==='alpha'">
              <el-input 
                v-model="formData.alphaValue" 
                placeholder="请选择alpha值"
                style="width: 200px"
              />
						</el-form-item>
					</el-form>
        </section>

        <!-- 计算结果 -->
        <section class="result-section" v-if="calculateResult.List">
          <label>计算结果:</label>
          <ul class="data-cont">
              <li v-for="(item,index) in result.List" :key="index" :class="[{'choose': item.DataTime===result.Date},'data-li']">
                <span>{{item.DataTime}}</span>
                <span style="min-width:150px">{{item.Value}}</span>
              </li>
          </ul>
        </section>

        <section class="bot">
          <el-button type="primary" @click="insertData" v-if="chooseItem">插入值</el-button>
          <el-button type="primary" @click="calculateHandle" v-else>计算</el-button>
          <el-button type="primary" plain @click="cancelHandle">取消</el-button>

        </section>

      </div>


    </div>
  </div>    
</template>
<script>
import { resetDialogCellStyle } from "../common/customTable";
import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue';
import edbDetailSection from './edbDetailSection.vue';
import tableEdbListSection from './tableEdbListSection.vue';
import { formRules } from '@/views/dataEntry_manage/databaseComponents/util';
export default {
  props: {
    isShow: {
      type: Boolean
    },
    info: {
      type: Object
    }
  },
  components: { selectTarget,edbDetailSection,tableEdbListSection },
  data() {
    return {
      formData: {
        edbFromSource: 2,
        source: this.info.fromEdbKey,
        nNum: 1,
				moveType: 1,
				moveUnit: '天',
				moveVal: '',
				calendarType: '公历',
				valueType: '期末值',
      },
      formRules,

      calculateResult: {},
      chooseItem: null,

      search_edb: '',
      searchOptions: [],
      selectEdbInfo: null,

      moveTypeOpions: [
				{
					label: '领先',
					key: 1
				},
				{
					label: '滞后',
					key: 2
				},
			],
      fre_options: ['天','周','月','季','年'],
      calendarOptions: [
				{label: '公历',key: 1},
				{label: '农历',key: 2},
			],
    }
  },
  mounted(){

  },
  methods:{
    /* 计算 */
    async calculateHandle() {
      await this.$refs.form.validate();
    },

    /* 插入值 */
    insertData() {
      if(this.$parent.selectCell.DataType !== 1){
        this.$message.warning('请在表格中选择日期')
        return
      }

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

    initData() {
      this.search_edb='';
      this.calculateResult = {};
      this.chooseItem = null;
      this.formData = {
        edbFromSource: this.formData.edbFromSource,
        nNum: 1,
				moveType: 1,
				moveUnit: '天',
				moveVal: '',
				calendarType: '公历',
				valueType: '期末值'
      }
    },

    cancelHandle() {
      this.initData();
      this.$emit('update:isShow',false);
      resetDialogCellStyle();
    }
  },
}
</script>
<style scoped lang='scss'>
@import "~@/styles/theme-vars.scss";
.calculate-edb-value-dialog {
  background: #fff;
  position: fixed;
  top: 20%;
  left: 50%;
  width: 750px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 999;
  .header { 
    font-size: 16px;
    background: $theme-color;
    color: #fff;
    padding: 15px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    .el-icon-close {
      font-size: 20px;
      cursor: pointer;
    }
  }

  .main {
    padding: 20px;
    .main-top {
      margin-bottom: 20px;
    }
    .form-section { margin: 20px 0; }
    .bot {
      display: flex;
      justify-content: center;
      margin: 30px 0;
    }
    .data-cont {
      margin: 15px 0;
      border: 1px solid #DCDFE6;
      .data-li {
        display: flex;
        padding: 15px;
        text-align: center;
        justify-content: space-around;
        &.choose {
          background: #ECF5FF;
        }
      }
    }
  }
}  
</style>