eta_front/src/views/dataEntry_manage/components/addRightEdbDialog.vue

<template>
    <!-- 添加右轴指标 -->
    <el-dialog
        :visible.sync="isShow"
        :close-on-click-modal="false"
        :append-to-body="true"
        @close="$emit('close')"
        custom-class="average-edit-dialog"
        center
        width="650px"
        v-dialogDrag
        top="8vh"
        :title="$t('EtaChartAddPage.add_right_edb_btn')"
    >
        <div class="container">
           <div class="type-select">
                <el-radio-group v-model="rightEdbForm.IndicatorType">
                    <el-radio :label="1"><!-- 左轴指标同比 -->{{ $t('EtaChartAddPage.right_edb_type_on_year') }}</el-radio>
                    <el-radio :label="2"><!-- 指标库 -->{{ $t('EtaChartAddPage.right_edb_type_lib') }}</el-radio>
                    <el-radio :label="3"><!-- 预测指标 -->{{ $t('EtaChartAddPage.right_edb_type_pred') }}</el-radio>
                </el-radio-group>
                <el-select v-if="rightEdbForm.IndicatorType!==1"
                    v-model="search_txt"
                    v-loadMore="searchLoad"
                    ref="searchRef"
                    :filterable="!search_txt"
                    remote
                    clearable
                    :placeholder="$t('Edb.InputHolderAll.input_name_orid')"
                    style="width:90%;margin-top: 20px;display: block;"
                    :remote-method="searchHandle"
                    @click.native="inputFocusHandle"
                    @change="selectTarget($event && searchOptions.find(_ => _.EdbInfoId === $event))"
                >
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    <el-option
                        v-for="item in searchOptions"
                        :key="item.EdbInfoId"
                        :label="chart_lang==='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"
                                />
                                {{chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName }}
                            </div>
                        </edbDetailPopover>
                    </el-option>
                </el-select>
           </div>
           <div class="form-box">
            <el-form :model="rightEdbForm" :rules="formRules" hide-required-asterisk
                label-position="right"
                label-width="120px">
                <!-- 生成样式-->
                <el-form-item :label="$t('EtaChartAddPage.right_edb_gen_style')">
                    <el-select v-model="rightEdbForm.Style">
                        <el-option :label="$t('EtaChartAddPage.right_edb_gen_column')" value="column"></el-option>
                        <el-option :label="$t('EtaChartAddPage.right_edb_gen_mark')" value="mark"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 如果选择标记点 -->
                <el-form-item :label="$t('EtaChartAddPage.right_edb_mark_shape')" v-if="rightEdbForm.Style==='mark'">
                    <el-select v-model="rightEdbForm.Shape">
                        <el-option 
                            v-for="markItem in markTypesOpts" 
                            :key="markItem.value"
                            :label="markItem.label"
                            :value="markItem.value"
                            >
                            <div style="display: flex;align-items: center;justify-content: center;height: 100%;" v-html="markItem.svg">
                            </div>
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 柱形/标记点的 颜色及透明度 -->
                <el-form-item :label="$t('EtaChartAddPage.right_edb_color_set')">
                    <el-color-picker
                      style="width: 90px"
                      v-model="rightEdbForm.ChartColor"
                      show-alpha
                      :predefine="predefineColors"
                    ></el-color-picker>
                </el-form-item>
                <!-- 如果选择标记点 -->
                <el-form-item :label="$t('EtaChartAddPage.right_edb_mark_size')" v-if="rightEdbForm.Style==='mark'">
                    <el-input-number 
                        v-model="rightEdbForm.Size" 
                        controls-position="right" 
                        :min="1" 
                        style="width: 90px"/>
                </el-form-item>
                <el-form-item :label="$t('EtaChartAddPage.right_edb_legend')">
                    <el-input v-model="rightEdbForm.Legend"></el-input>
                </el-form-item>
                <!-- 如果选择左轴同比 -->
                <el-form-item :label="$t('EtaChartAddPage.right_edb_format')" v-if="rightEdbForm.IndicatorType===1">
                    <el-radio-group v-model="rightEdbForm.NumFormat">
                        <el-radio :label="1"><!-- 百分数 -->{{ $t('EtaChartAddPage.right_edb_format_per') }}</el-radio>
                        <el-radio :label="2"><!-- 小数 -->{{ $t('EtaChartAddPage.right_edb_format_dec') }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 如果选择标记点 -->
                <el-form-item label="标记点连线" v-if="rightEdbForm.Style==='mark'">
                    <el-radio-group v-model="rightEdbForm.IsConnected">
                        <el-radio :label="0">无</el-radio>
                        <el-radio :label="1">有</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 如果选择连线 -->
                <template v-if="rightEdbForm.IsConnected">
                    <el-form-item label="连线颜色">
                        <el-color-picker
                        style="width: 90px"
                        v-model="rightEdbForm.LineColor"
                        show-alpha
                        :predefine="predefineColors"
                        ></el-color-picker>
                    </el-form-item>
                    <el-form-item label="连线线型">
                        <el-select v-model="rightEdbForm.LineStyle">
                            <el-option v-for="lineItem in lineStylesOpts"
                                :key="lineItem.value"
                                :label="lineItem.label"
                                :value="lineItem.value"
                            >
                                <svg width="60" height="10" viewBox="0 0 60 10" fill="none" xmlns="http://www.w3.org/2000/svg" v-html="lineItem.svg">
                                </svg>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="连线粗细">
                        <el-input-number 
                            v-model="rightEdbForm.LineWidth" 
                            controls-position="right" 
                            :min="1" 
                            style="width: 90px"/>
                    </el-form-item>
                </template>
            </el-form>
           </div>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="$emit('close')">取消</el-button>
            <el-button type="primary" @click="confirmPerson">保存</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
import { defaultOpts } from '@/utils/defaultOptions';
import { markTypesOpts,lineStylesOpts } from '@/views/system_manage/chartTheme/common/config'
export default {
    props:{
        isShow:{
            type:Boolean,
            default:false
        },
        tableData:{
            type:Array
        },
        formData:{
            type:Object,
            default:{}
        },
        edbData:{
            type:Object,
            default:{}
        }
    },
    computed:{
        formRules(){ //方便英文翻译
            return {}
        }
    },
    watch:{
        isShow(newval){
            if(newval){
                Object.assign(this.rightEdbForm,this.formData)
                this.rightEdbData = this.edbData
            }
        }
    },
    data() {
        return {
            search_page:1,
            current_search:'',
            search_txt:'',
            search_have_more:false,
            searchOptions:[],
            rightEdbForm:{
                IndicatorType:1,//1左轴同比 2指标库 3预测指标
                Style:'column',//生成样式 column/mark
                Shape:'circle',//标记点形状
                ChartColor:'#075EEE',//颜色
                Size:3,//标记点大小
                Legend:'',//图例名称
                NumFormat:1,//数值格式 1百分比 2小数
                IsConnected:0,//连线 0无 1有
                LineColor:'#075EEE',//线条颜色
                LineWidth:3,//线条粗细
                LineStyle:'Solid',//线条线型
            },
            rightEdbData:{},
            markTypesOpts,lineStylesOpts,
            predefineColors: defaultOpts.colors.slice(0, 2),
        };
    },
    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,
            }
            const res = this.rightEdbForm.IndicatorType === 2
                ? await dataBaseInterface.targetSearchByPage(params)
                : await preDictEdbInterface.edbSearch(params)

                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);
        },
        //选择指标,获取详情,保存基本信息
        async selectTarget(item){
            if(!item) return 
            //检查添加指标是否已存在
            let have_bol = this.tableData.every(i => i.EdbInfoId === item.EdbInfoId);
            if(have_bol){
                // this.$message.warning('录入指标已存在');
                this.search_txt = ''
                return this.$message.warning(this.$t('Chart.OptMsg.edb_haved_msg'));
            }
            //以曲线图的参数获取指标详情
            let params = {
                EdbInfoId: item.EdbInfoId,
                ChartType: 1,
                Calendar: undefined,
                DateType: 3,
                StartYear:0,
                StartDate: '',
                EndDate: '',
            } 
            const res = await dataBaseInterface.chartInfo(params)
            if(res.Ret!==200) return 
            const tableItem = res.Data.EdbInfoList[0]
            this.rightEdbData = {
                EdbInfoId: tableItem.EdbInfoId,
                EdbInfoType:tableItem.EdbInfoType,
                LeadValue:tableItem.LeadValue,
                LeadUnit:tableItem.LeadUnit,
                IsAxis:0,
            }
        },
        confirmPerson(){
            //校验
            if(this.rightEdbForm.IndicatorType!==1&&!this.search_txt){
                return this.$message.warning('请选择指标!')
            }
            this.$emit('modify',{form:this.rightEdbForm,data:this.rightEdbData})
        }
    },
};
</script>

<style scoped lang="scss">
.average-edit-dialog{
    .type-select{
        padding-bottom: 30px;
        border-bottom: 1px solid #C8CDD9;
    }
    .form-box{
        margin-top: 30px;
    }
}
</style>