eta_front/src/views/system_manage/components/refreshConfig.vue

<template>
    <!-- 刷新配置 + 添加删除-->
    <div class="refresh-config-wrap">
        <!-- form -->
        <el-form :model="dynamicForm" ref="dynamicForm" label-width="110px" class="dynamic-form">
            <div class="group" v-for="(item,index) in dynamicForm.configList" :key="item.key">
                <div class="delete btn-box" @click="deleteSetting(index)"
                    v-if="index!==0"><i class="el-icon-delete"></i>删除</div>
                <el-form-item label="刷新频率" class="item">
                    <el-form-item :prop="`configList[${index}].frequency`" :rules="{required:true,message:'请选择刷新频率',trigger: 'blur'}">
                        <el-select v-model="item.frequency">
                            <el-option v-for="i in frequencyType" :key="i.key" 
                                :label="i.label" :value="i.key"/>
                        </el-select>
                    </el-form-item>
                    
                    <!-- 每周 -->
                    <el-form-item :prop="`configList[${index}].frequency_week`" v-if="item.frequency.includes('周')" :rules="{required:true,message:'请选择刷新频率',trigger: 'blur'}">
                        <el-select v-model="item.frequency_week" class="full-input" key="week">
                            <el-option v-for="i in weekList" :key="i.key" 
                                :label="i.label" :value="i.key"/>
                        </el-select>
                    </el-form-item>
                    
                    <!-- 每旬、月、季、半年、年 -->
                    <el-form-item :prop="`configList[${index}].frequency_last`" v-if="!item.frequency.includes('日')&&!item.frequency.includes('周')"
                        :rules="{required:true,message:'请选择刷新频率',trigger: 'blur'}">
                        <el-select v-model="item.frequency_last" :key="item.key" key="option">
                            <el-option v-for="i in timeOptionList" :key="i.key" 
                                :label="i.label" :value="i.key"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item :prop="`configList[${index}].frequency_n`" v-if="item.frequency_last==='n'&&!item.frequency.includes('日')&&!item.frequency.includes('周')"
                        :rules="{required:true,message:'请选择刷新频率',trigger: 'blur'}">
                        <el-input v-model="item.frequency_n" type="number" :min="1" :max="n_limit_map[item.frequency]||10">
                            <template slot="prefix">N=</template>
                        </el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item class="item" label="时间">
                    <el-form-item :prop="`configList[${index}].time`" :rules="{required:true,message:'请选择刷新时间',trigger: 'blur'}">
                        <el-select v-model="item.time" class="full-input" key="single">
                            <el-option v-for="i in timeList" :key="i" 
                                :label="i" :value="i"/>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item v-if="Source!==11"
                    :prop="`configList[${index}].num`" label="刷新单元格数" class="item" :rules="{required:true,message:'请输入刷新单元格数',trigger: 'blur'}">
                    <el-input v-model="item.num" type="number"></el-input>
                    <el-checkbox v-model="item.isAll">全部刷新</el-checkbox>
                </el-form-item>
                <div class="line"></div>
                <div class="add btn-box" @click="addSetting"
                    v-if="index===dynamicForm.configList.length-1&&index<maxSetting-1">
                    <i class="el-icon-circle-plus-outline"></i>添加刷新时间</div>
            </div>
        </el-form>
    </div>
</template>

<script>
const config = {
    frequency:'',//刷新频率:
    frequency_week:'',//频率为每周时，选择
    frequency_last:'',//第N天或最后一天
    frequency_n:1,
    time:'',//时间
    num:7,//刷新单元格数
    isAll:false,//全部刷新
}
export default {
    props:{
        Source:{
            type:Number,
        },
        defaultForm:{
            type:Object
        }
    },
    data() {
        return {
            maxSetting:5,//可设置的刷新时间数量
            dynamicForm:{
                configList:[{
                        ...config,
                        key:0
                    }
                ]
            },
            frequencyType:[
                {label:'每自然日',key:'每自然日'},
                {label:'每交易日',key:'每交易日'},
                {label:'每周',key:'每周'},
                {label:'每旬',key:'每旬'},
                {label:'每月',key:'每月'},
                {label:'每季',key:'每季'},
                {label:'每半年',key:'每半年'},
                {label:'每年',key:'每年'},
            ],
            //每周，可多选
            weekList:[
                {key:1,label:'周一'},
                {key:2,label:'周二'},
                {key:3,label:'周三'},
                {key:4,label:'周四'},
                {key:5,label:'周五'},
                {key:6,label:'周六'},
                {key:7,label:'周日'}
            ],
            //每旬、月、季、半年、年
            timeOptionList:[
                {label:'第N天',key:'n'},
                {label:'最后一天',key:'last'}
            ],
            //时间选项，仅整点
            timeList:[
                '00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30',
                '04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30',
                '08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30',
                '12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30',
                '16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30',
                '20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30'
            ],
            //N 范围 1-~
            n_limit_map:{
                '每旬':11,
                '每月':31,
                '每季':92,
                '每半年':184,
                '每年':365
            },
        };
    },
    watch:{
        defaultForm:{
            handler(newVal){
                this.dynamicForm = this.formatForm(newVal)
            },
            deep:true
        }
    },
    methods: {
        addSetting(){
            this.dynamicForm.configList.push({
                ...config,
                key:Date.now()
            })
        },
        deleteSetting(index){
            this.dynamicForm.configList.splice(index,1)
        },
        //将接口数据转换成form支持的格式
        formatForm(form){
            const {configList=[]} = form
            if(!configList.length){
                return {
                    configList:[{
                        ...config,
                        key:0
                    }]
                }
            }
            const formatList = configList.map((item)=>{
                let isOther = false
                if(!item.RefreshFrequency.includes("周")&&!item.RefreshFrequency.includes("日")){
                    isOther = true
                }
                return {
                    frequency:item.RefreshFrequency,
                    frequency_week:item.RefreshFrequency.includes("周")?item.RefreshFrequencyDay:'',
                    frequency_last:isOther?(item.RefreshFrequencyDay===0?'last':'n'):'',
                    frequency_n:item.RefreshFrequencyDay,
                    time:item.RefreshTime,
                    num:item.RefreshDataNum,
                    isAll:Boolean(item.RefreshAllData)
                }
            })
            return {
                configList:formatList
            }
        },
        //将数据转换成接口形式
        getFormList(){
            const list = this.dynamicForm.configList.map((item)=>{
                //RefreshFrequencyDay: 每自然日、每交易日传0；每周传1~7；其他传n，最后一天n=0
                let FrequencyDay = 0
                if(item.frequency.includes("日")){
                    FrequencyDay = 0
                }else if(item.frequency.includes("周")){
                    FrequencyDay = item.frequency_week
                }else{
                    FrequencyDay = item.frequency_last==='last'?0:item.frequency_n
                }
                return {
                    RefreshFrequency:item.frequency,
                    RefreshFrequencyDay:Number(FrequencyDay),
                    RefreshTime:item.time,
                    RefreshAllData:Number(item.isAll),
                    RefreshDataNum:Number(item.num),
                }
            })
            return list
        }
    },
};
</script>

<style lang="scss">
.refresh-config-wrap{
        .dynamic-form{
            .group{
                position:relative;
                padding: 30px 0 8px 0;
                /* border-bottom: 1px solid #EBEFF6; */
                &:first-child{
                    padding-top: 0;
                }
                .line{
                    height:1px;
                    background-color: #EBEFF6;
                }
                .btn-box{
                    cursor: pointer;
                    i{
                        margin-right: 8px;
                        font-size: 16px;
                    }
                    &.add{
                        display:inline-block;
                        margin-top: 20px;
                        color:#0052D9;
                    }
                    &.delete{
                        position: absolute;
                        right:10px;
                        top:10px;
                        color:#AD352F;
                    }
                }
                .item{
                    .el-input{
                        width:110px;
                    }
                    .full-input{
                        width: 100%;
                        .el-input{
                            width:100%;
                        }
                    }
                    >.el-form-item__content{
                        display: flex;
                        gap:10px;
                    }
                }
            }
        }
}
</style>