eta_front/src/views/chartRelevance_manage/components/selectTarget.vue

<template>
  <div style="flex: 1">
    <el-select
      style="width: 100%"
      v-model="targetType"
      :placeholder="$t('StatisticAnalysis.StatisticFeatureChart.selecr_indicator_pld')"
      :disabled="isDisabled"
      @change="targetTypeChange"
      v-if="selectStyleType===1&&filter"
    >
      <el-option
        v-for="item in etaTypeOpt"
        :key="item.val"
        :label="item.label"
        :value="item.val"
      />
    </el-select>

    <div v-else-if="selectStyleType===2&&filter">
      <label>{{$t('StatisticAnalysis.StatisticFeatureChart.select_edb')}}：</label>
      <el-radio-group v-model="targetType" @change="targetTypeChange">
        <el-radio  
          v-for="item in etaTypeOpt"
          :key="item.val"
          :label="item.val"
        >{{item.label}}</el-radio>
      </el-radio-group>
    </div>

    <div v-else-if="selectStyleType===3&&filter" style="display:flex;align-items:center">
      <el-select
        v-model="targetType"
        :placeholder="$t('StatisticAnalysis.StatisticFeatureChart.selecr_indicator_pld')"
        @change="targetTypeChange"
        :style="{'width': selectBoxWidth?selectBoxWidth:'150px'}"
      >
        <el-option
          v-for="item in etaTypeOpt"
          :key="item.val"
          :label="item.label"
          :value="item.val"
        />
      </el-select>
      <el-select
        v-model="search_txt"
        v-loadMore="searchLoad"
        :filterable="!search_txt"
        remote
        clearable
        :placeholder="$t('Edb.InputHolderAll.select_edb_name')"
        style="flex: 1;margin-left: 15px"
        :remote-method="searchHandle"
        @click.native="inputFocusHandle"
        @change="handleSelectTarget"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
        <el-option
          v-for="item in searchOptions"
          :key="item.EdbInfoId"
          :label="currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
          :value="item.EdbInfoId"
          :disabled="!item.HaveOperaAuth"
        >
          <edbDetailPopover :info="item">
            <div slot="reference">
              <img 
                :src="$icons.lock_ico2" 
                width="18" 
                height="18" 
                style="vertical-align:middle" 
                v-if="!item.HaveOperaAuth"
              />
              {{currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName}}
            </div>
          </edbDetailPopover>
        </el-option>
      </el-select>
      <slot name="setDecimal"></slot>
    </div>
    <el-select
      v-model="search_txt"
      v-loadMore="searchLoad"
      v-if="selectStyleType!==3"
      :filterable="!search_txt"
      remote
      clearable
      :disabled="isDisabled"
      :placeholder="$t('Edb.InputHolderAll.select_edb_name')"
      :style="`width: ${showMoreBtn?'auto':width}; ${filter?'margin-top: 20px':''}`"
      :remote-method="searchHandle"
      @click.native="inputFocusHandle"
      @change="handleSelectTarget"
    >
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
      <el-option
        v-for="item in searchOptions"
        :key="item.EdbInfoId"
        :label="currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
        :value="item.EdbInfoId"
        :disabled="!item.HaveOperaAuth"
      >
        <edbDetailPopover :info="item">
          <div slot="reference">
            <img 
              :src="$icons.lock_ico2" 
              width="18" 
              height="18" 
              style="vertical-align:middle" 
              v-if="!item.HaveOperaAuth"
            />
            {{currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName}}
          </div>
        </edbDetailPopover>
      </el-option>
    </el-select>
    <slot name="moreBtn"></slot>
  </div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
import * as sheetInterface from "@/api/modules/sheetApi.js";
export default {
    props:{
      defaultId:{
        default:''
      },
      defaultOpt:{
        default:()=>[]
      },
      defaultType:{
        default:''
      },
      selectStyleType: {
        default: 1
      },
      filter: { //是否要预测和eta的筛选
        default: true
      },
      width: {
        default:'100%'
      },
      isDisabled:{
        default:false
      },
      selectBoxWidth:{
        default:''
      },
      showMoreBtn:{
        default:false
      }
    },
    watch:{
      defaultId(){
        this.search_txt=this.defaultId||''
        this.searchOptions=this.defaultOpt||[]
        this.current_search=this.defaultOpt[0]?this.defaultOpt[0].EdbName:''
        this.targetType=this.defaultType==1?'2':'1' //EdbInfoCategoryType 0普通 1预测
      }
    },
    computed:{
      etaTypeOpt(){
        return [
                {
                    label:this.$t('Edb.eta_name'),
                    val:'1'
                },
                {
                    label:this.$t('Edb.eta_predictor_name'),
                    val:'2'
                },
            ]
      },

      currentLang() {
        return this.$store.state.lang
      }
    },
    data() {
        return {
            targetType:'1',//1：ETA指标 2：ETA预测指标

            search_txt: this.defaultId||'',
            searchOptions: this.defaultOpt||[],
            search_have_more: true,
            search_page: 1,
            current_search: this.defaultOpt[0]?this.defaultOpt[0].EdbName:'',
        }
    },
    methods: {
        /* 搜索 */
        searchHandle(query) {
            this.search_page = 1;
            this.current_search = query;
            this.searchApi(this.current_search)
        },

        async searchApi(query, page = 1) {
            let params = {
                KeyWord: query,
                CurrentIndex: page,
            }

            let res;
            if(this.filter) {
               res = this.targetType=='1'?await dataBaseInterface.targetSearchByPage(params):await preDictEdbInterface.edbSearch(params)
            }else {
              const filterMap = {
                1: 2,
                8: 3,
                14: 6
              }

              let FilterSource = (['/addMixedSheet','/editBalanceSheet'].includes(this.$route.path) && this.$parent.isCalculateDia)
                ? filterMap[this.$parent.formData.source]||1 
                : 1;
              let Frequency = (['/addMixedSheet','/editBalanceSheet'].includes(this.$route.path) && this.$parent.isCalculateDia && this.$parent.formData.source===2)
                ? '季度' 
                : ''
              res = await sheetInterface.searchTarget({
                ...params,
                FilterSource,
                Frequency
              })
            }
            

            if (res.Ret !== 200) return
            const { List, Paging } = res.Data;
            this.search_have_more = page < Paging.Pages;
            this.searchOptions = page === 1 ? List : this.searchOptions.concat(List);
        },

        /* 聚焦获取当前检索 */
        inputFocusHandle(e) {
            this.search_page = 1;
            this.current_search = e.target.value;
            this.searchApi(this.current_search);
        },

        searchLoad() {
            if (!this.search_have_more) return;
            this.searchApi(this.current_search, ++this.search_page);
        },

        //要搜索的指标类型变化
        targetTypeChange(){
          this.searchOptions=[]
          this.search_page = 1;
          this.search_txt=''
          this.$emit('select','')
          this.$emit('edbTypeChange',this.targetType=='1'?0:1)
        },

        // 指标选择
        handleSelectTarget(e){
            let arr=this.searchOptions.filter(_item=>_item.EdbInfoId==e)
            this.$emit('select',arr[0])
            this.$emit('edbTypeChange',this.targetType=='1'?0:1)
        },
    },
}
</script>

<style>
</style>