eta_mini_crm_front/src/views/indicator/components/addEbdDialog.vue

<script setup>
import { ref, reactive, nextTick, watch } from 'vue'
import { apiIndicatorImport } from '@/api/indicator'
import { ElMessage } from 'element-plus'
const ruleFormRef = ref();
const show = defineModel('show', { type: Boolean, default: false });
const formData = reactive({
    IndexCode:'',
    IndexName:'',
    Frequency:'',
    Unit:'',
    StartDate:'',
    EndDate:'',
});
const tableData = ref([]);
const dataList = ref([]);
const showData = ref(false);
const dataLoading = ref(false);
const saveLoading = ref(false);
const emits = defineEmits(["success"]);

watch(show,(val)=>{
  if(val) closeDialog();
})

const frequencyOptions = [
    { label:'日度',val: '日度' },
    { label:'周度',val: '周度' },
    { label:'旬度',val: '旬度' },
    { label:'月度',val: '月度' },
    { label:'季度',val: '季度' },
    { label:'半年度',val: '半年度' },
    { label:'年度',val: '年度' },
];

const tableColums = [
    {
        label: '指标ID',
        key: 'IndexCode',
    },
    {
        label: '起始时间',
        key: 'StartDate',
    },
    {
        label: '结束时间',
        key: 'EndDate',
    },
];

const rules = reactive({
    IndexCode: [{required: true,message: '请输入指标ID',trigger: 'change'}],
    // IndexName: [{required: true,message: '请输入指标名称',trigger: 'change'}],
    // Frequency: [{required: true,message: '请选择频度',trigger: 'change'}],
    // Unit: [{required: true,message: '请输入单位',trigger: 'change'}],
});

function closeDialog(){
    ruleFormRef.value?.resetFields();
    formData.IndexCode = '';
    formData.IndexName = '';
    formData.Frequency = '';
    formData.Unit = '';
    formData.StartDate = '';
    formData.EndDate = '';
    tableData.value = [];
    dataList.value = [];
    showData.value = false;
    dataLoading.value = false;
    saveLoading.value = false;
};

async function getIndexDetail(){
    if(!formData.IndexCode) return;
    dataLoading.value = true;
    let res = await apiIndicatorImport.getIndexInfo({
        IndexCode:formData.IndexCode
    });
    dataLoading.value = false;
    if(res.Ret != 200) return;
    const { Data } = res;
    formData.IndexName = Data.IndexName;
    formData.Frequency = Data.Frequency;
    formData.Unit = Data.Unit;
    formData.StartDate = Data.StartDate;
    formData.EndDate = Data.EndDate;
    dataList.value = Data.DataList || [];
    tableData.value = [{
        StartDate:formData.StartDate,
        EndDate:formData.EndDate,
        IndexCode:formData.IndexCode
    }]
    showData.value = true;
}

async function confirm(){
   await ruleFormRef.value?.validate();
//    if(!showData.value) return ElMessage.warning('请在数据搜索之后再进行添加操作');
   saveLoading.value = true; 
   let res = await apiIndicatorImport.dataPush({ IndexCode:formData.IndexCode });
   saveLoading.value = false;
   if(res.Ret != 200) return;
   ElMessage.success('添加成功')
   emits('success');
   show.value = false;
}

</script>

<template>
    <el-dialog
        v-model="show"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        width="75%"
        draggable
        title="添加指标"
        @close="closeDialog"
        style="min-width: 900px;overflow: auto;"
    >
        <el-form ref="ruleFormRef" :model="formData" size="large" @submit.prevent class="form-wrap" :rules="rules">
            <el-form-item label="指标ID" :style="showData?`flex:1`:`width:300px;`" prop="IndexCode">
                <el-input v-model="formData.IndexCode" placeholder="请输入指标ID" @change="getIndexDetail" clearable/>
            </el-form-item>
            <el-form-item label="指标名称" style="flex: 1;" v-if="showData" prop="IndexName">
                <el-input v-model="formData.IndexName" placeholder="请输入指标名称" clearable :disabled="true"/>
            </el-form-item>
            <el-form-item label="频度" style="flex: 1;" v-if="showData" prop="Frequency">
                <el-select
                    v-model="formData.Frequency"
                    placeholder="请选择频度"
                    clearable
                    :disabled="true"
                >
                    <el-option v-for="item in frequencyOptions" :key="item.val" :label="item.label" :value="item.val"/>
                </el-select>
            </el-form-item>
            <el-form-item label="单位" style="flex: 1;" v-if="showData" prop="Unit">
                <el-input v-model="formData.Unit" placeholder="请输入单位" clearable :disabled="true"/>
            </el-form-item>
        </el-form>
        <div class="main" v-loading="dataLoading">
            <el-table
                :data="tableData"
                border
            >
                <el-table-column
                    v-for="item in tableColums"
                    :key="item.label"
                    :label="item.label"
                    :width="item.widthsty"
                    :min-width="item.minwidthsty"
                    align="center"
                    >
                    <template #default="scope">
                        <span>{{ scope.row[item.key] }}</span>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无数据" />
                </template>
            </el-table>
            <div v-if="dataList && dataList.length" class="value-ul" ref="valueUl">
                 <div v-for="(item,index) in dataList" :key="index + 1" class="ul-content">
                     <div>{{ item.Date }}</div>
                     <div>{{ item.Value }}</div>
                 </div>
            </div>
        </div>
        <div class="footer">
            <el-button @click="show = false" size="large" style="width: 100px;">取 消</el-button>
            <el-button type="primary" size="large" style="width: 100px;margin-left: 20px;" @click="confirm" :loading="saveLoading">确定</el-button>
        </div>
    </el-dialog>
</template>

<style lang="scss" scoped>
.form-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 37px;
}
.main {
    .value-ul{
        height: 300px;
        margin-top: 0;
        border-bottom: 1px solid #EBEFF6;
        border-left: 1px solid #EBEFF6;
        border-right: 1px solid #EBEFF6;
        overflow-y: auto;
        .ul-content{
            display: flex;
            align-items: center;
            justify-content: space-around;
            line-height: 40px;
            color: #666;
        }
    }
}
.footer{
    margin: 80px 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>