eta_front/src/views/dataEntry_manage/thirdBase/components/addIndicsDia.vue

<template>
    <!-- 单个指标添加进指标库 -->
    <el-dialog
        :visible.sync="isOpenDialog"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        top="5vh"
        :title="$t('ManualEdbListPage.add_tobase_btn')"
        @close="$emit('close')"
        custom-class="add-indics-dia"
        center
        width="798px"
        v-dialogDrag
    >
        <div class="dialog-container">
            <el-form
                ref="targetForm"
                label-position="right"
                label-width="120px"
                hide-required-asterisk
                :model="formData"
                :rules="formRules"
            >
                <el-form-item :label="$t('Table.edb_name')" prop="edb_name">
                    <el-input
                    v-model="formData.edb_name"
                    style="width: 80%"
                    :placeholder="$t('Table.edb_name')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('Edb.Detail.select_catalogue')" prop="menu">
                    <cascader
                        v-model="formData.menu"
                        :options="options"
                        cascaderWidth="width: 80%"
                        clearable
                        :placeholder="$t('CustomAnalysisPage.select_appropriate_category')"
                        :config="{ emitPath: false, checkStrictly: true }"
                    />
                </el-form-item>
                <el-form-item :label="$t('Table.frequency')" prop="frequency">
                    <el-select 
                    v-model="formData.frequency" 
                    :placeholder="$t('CustomAnalysisPage.select_frequency')" 
                    style="width:80%"
                    clearable>
                        <el-option
                            v-for="item in frequencyArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('Table.unit')">
                    <selectUnit 
                            v-model="formData.unit" 
                            style="width: 80%"
                        />
                </el-form-item>
            </el-form>
        </div>
        <div class="footer-container" slot="footer">
            <el-button type="primary" @click="handleAddEdb" :loading="btnloading">{{ $t('Dialog.confirm_save_btn') }}</el-button>
            <el-button type="primary" plain @click="$emit('close')">{{ $t('Dialog.cancel_btn') }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import { steelInterface } from "@/api/modules/thirdBaseApi";
import selectUnit from '@/components/selectUnit.vue';
import { frequencySelectList } from '@/utils/defaultOptions';
export default {
    components: { selectUnit },
    props:{
        isOpenDialog:{
            type:Boolean,
            default:false
        },
        edbData:{
            type:Object,
            defalut:{}
        }
    },
    computed:{
        formRules(){
            return {
                edb_name:[
                    { required: true, message: /* '指标名称不能为空' */this.$t('Edb.Valids.name_msg'), trigger: 'blur' },
                ],
                menu:[
                    { required: true, message: /* '所属目录不能为空' */this.$t('Edb.Valids.menu_msg'), trigger: 'blur' },
                ],
                frequency:[
                    { required: true, message: /* '频率不能为空' */this.$t('Edb.Valids.fre_msg'), trigger: 'blur' },
                ],
                unit:[
                    { required: true, message: /* '单位不能为空' */this.$t('Edb.Valids.unit_msg'), trigger: 'blur' },
                ],
            }
        }
    },
    watch:{
        isOpenDialog(newval){
            if(newval){
                this.initDia()
            }
        }
    },
    data() {
        return {
            formData:{
                code:'',
                edb_name:'',
                menu:'',
                frequency:'',
                unit:'',
            },
            options:[],
            levelProps: {
                label: 'ClassifyName',
                value: 'ClassifyId',
                children: 'Children',
                emitPath: false,
                checkStrictly: true
            },
            frequencyArr:frequencySelectList(),
            btnloading:false,
        };
    },
    methods: {
        filterNodes(arr) {
            arr.length &&
                arr.forEach((item) => {
                    item.Children.length && this.filterNodes(item.Children);
                    if (!item.Children.length) {
                        delete item.Children;
                    }
                });
        },
        // 获取指标分类列表
        async getClassifyOpt(){
            const res=await dataBaseInterface.menuListV3()
            if (res.Ret !== 200) return
            this.filterNodes(res.Data.AllNodes||[]);
            this.options = res.Data.AllNodes || [];
        },
        async handleAddEdb(){
            //校验表单
            try{
                await this.$refs.targetForm.validate()
            }catch(e){
                return 
            }
            const {code,edb_name,menu,frequency,unit} = this.formData
            this.btnloading = true
            //添加检测
            const resAddCheck = await steelInterface.batchAddEdbCheck({
                IndexCodes:[code]
            })
            if(resAddCheck.Ret!==200) return (this.btnloading=false)
            //已存在提示并关闭该弹窗
            if(resAddCheck.Data[0]&&resAddCheck.Data[0].EdbExist){
                this.$emit('close')
                return this.$message.warning(this.$t('YsDataPage.haved_all_msg'))
            }
            //重名校验
            const resCheck = await steelInterface.batchCheckEdbName([{
                EdbCode:code,
                EdbName:edb_name,
                Frequency:frequency,
            }])
            if(resCheck.Ret!==200) return (this.btnloading=false)
            if(resCheck.Data[0]&&resCheck.Data[0].Exist){
                return this.$message.warning(this.$t('BloombergPage.add_edb_check_hint2'))&&(this.btnloading=false)
            }
            //添加至指标库
            const res = await steelInterface.AddToLib({
                EdbCode:code,
                EdbName:edb_name,
                Unit:unit,
                Frequency:frequency,
                ClassifyId:Number(menu),
            })
            if(res.Ret!==200) return (this.btnloading=false)
            this.$message.success(this.$t('MsgPrompt.add_msg2'))
            this.$emit('addCallback')
        },
        initDia(){
            this.btnloading=false
            this.getClassifyOpt()
            const {IndexName,UnitName,FrequencyName,IndexCode} = this.edbData
            this.formData = {
                code:IndexCode,
                edb_name:IndexName,
                menu:'',
                frequency:FrequencyName,
                unit:UnitName
            }
        }
    },
};
</script>

<style lang="scss">
.add-indics-dia{
    .el-cascader .el-input {
        width: 100%;
    }
}
</style>