暂存

src/views/system_manage/components/refreshConfig.vue

@@ -1,64 +1,90 @@
 <template>
     <!-- 刷新配置 + 添加删除-->
     <div class="refresh-config-wrap">
-        <div class="group" v-for="(item,index) in configList" :key="index">
-            <div class="item" label="刷新频率">
-                <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-select v-model="item.frequency_week" multiple v-if="item.frequency==='week'">
-                    <el-option v-for="i in weekList" :key="i.key" 
-                        :label="i.label" :value="i.key"/>
-                </el-select>
-                <!-- 每旬、月、季、半年、年 -->
-                <el-select v-model="item.frequency_last" v-if="!['day','eday','week',''].includes(item.frequency)">
-                    <el-option v-for="i in timeOptionList" :key="i.key" 
-                        :label="i.label" :value="i.key"/>
-                </el-select>
-                <template v-if="item.frequency_last==='n'&&!['day','eday','week',''].includes(item.frequency)">
-                    <label>N等于</label>
-                    <el-input v-model="item.frequency_n"></el-input>
-                </template>
+        <!-- form -->
+        <el-form :model="dynamicForm" ref="dynamicForm" label-width="100px" class="dynamic-form">
+            <div class="group" v-for="(item,index) in dynamicForm.configList" :key="item.key">
+                <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 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="frequency">
+                        <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="frequency_week" v-if="item.frequency==='week'">
+                        <el-select v-model="item.frequency_week" multiple 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="frequency_last" v-if="!['day','eday','week',''].includes(item.frequency)">
+                        <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="frequency_n" v-if="item.frequency_last==='n'&&!['day','eday','week',''].includes(item.frequency)">
+                        <el-input v-model="item.frequency_n">
+                            <template slot="prefix">N=</template>
+                        </el-input>
+                    </el-form-item>
+                </el-form-item>
+                <el-form-item class="item" label="时间">
+                    <!-- 非周度时可多选 -->
+                    <el-form-item prop="times" v-if="item.frequency!=='week'">
+                        <el-select v-model="item.times" multiple class="full-input" key="multiple">
+                            <el-option v-for="i in timeList" :key="i" 
+                                :label="i" :value="i"/>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item prop="time" v-if="item.frequency==='week'">
+                        <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 prop="num" label="刷新单元格数" class="item">
+                    <el-input v-model="item.num"></el-input>
+                    <el-checkbox v-model="item.isAll">全部刷新</el-checkbox>
+                </el-form-item>
             </div>
-            <div class="item" label="时间">
-                <!-- 非周度时可多选 -->
-                <el-select v-model="item.times" multiple v-if="item.frequency!=='week'">
-                    <el-option v-for="i in timeList" :key="i" 
-                        :label="i" :value="i"/>
-                </el-select>
-                <el-select v-model="item.time" v-else>
-                    <el-option v-for="i in timeList" :key="i" 
-                        :label="i" :value="i"/>
-                </el-select>
-            </div>
-            <div class="item" label="刷新单元格数">
-                <el-input v-model="item.num"></el-input>
-                <el-checkbox v-model="item.isAll">全部刷新</el-checkbox>
-            </div>
-            <div class="add-btn-box">添加</div>
-            <div class="delete-btn-box">删除</div>
-        </div>
+        </el-form>
     </div>
 </template>
 
 <script>
+const config = {
+    frequency:'',//刷新频率
+    frequency_week:[],//频率为每周时，选择
+    frequency_last:'',//第N天或最后一天
+    frequency_n:0,
+    time:'',//时间
+    times:[],
+    num:3,//刷新单元格数
+    isAll:false,//全部刷新
+}
 export default {
     data() {
         return {
-            configList:[
-                {
-                    frequency:'',//刷新频率
-                    frequency_week:[],//频率为每周时，选择
-                    frequency_last:'',//第N天或最后一天
-                    frequency_n:0,
-                    time:'',//时间
-                    times:[],
-                    num:3,//刷新单元格数
-                    isAll:false,//全部刷新
-                }
-            ],
+            maxSetting:3,//可设置的刷新时间数量
+            dynamicForm:{
+                configList:[{
+                        ...config,
+                        key:0
+                    }
+                    
+                ]
+            },
             frequencyType:[
                 {label:'每自然日',key:'day'},
                 {label:'每交易日',key:'eday'},
@@ -102,11 +128,63 @@ export default {
         };
     },
     methods: {
-
+        addSetting(){
+            this.dynamicForm.configList.push({
+                ...config,
+                key:Date.now()
+            })
+        },
+        deleteSetting(index){
+            this.dynamicForm.configList.splice(index,1)
+        }
     },
 };
 </script>
 
-<style scoped lang="scss">
-
+<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;
+                }
+                .btn-box{
+                    position:absolute;
+                    cursor: pointer;
+                    i{
+                        margin-right: 8px;
+                        font-size: 16px;
+                    }
+                    &.add{
+                        left:0;
+                        bottom:-40px;
+                        color:#0052D9;
+                    }
+                    &.delete{
+                        right:0;
+                        top:20px;
+                        color:#AD352F;
+                    }
+                }
+                .item{
+                    .el-input{
+                        width:110px;
+                    }
+                    .full-input{
+                        width: 100%;
+                        .el-input{
+                            width:100%;
+                        }
+                    }
+                    >.el-form-item__content{
+                        display: flex;
+                        gap:10px;
+                    }
+                }
+            }
+        }
+}
 </style>

src/views/system_manage/dataRefreshSetting.vue

@@ -54,25 +54,34 @@
             :modal-append-to-body="false"
             @close="isSetTimeDialogShow=false"
             width="578px"
+            top="5vh"
             v-dialogDrag
             center
         >
             <div class="dialog-container">
                 <!-- 默认刷新时间设置数据频度 -->
-                <div class="default-box">
-                    123 456
+                <div class="default-box" v-if="isDefault">
+                    <label style="display: block;width:88px;text-align:right;padding-right: 12px;">数据频度</label>
+                    <el-select style="margin-left: 10px;" v-model="defaultFrequence">
+                        <el-option v-for="i in ['日度','周度','旬度','月度','季度','半年度','年度']" :key="i"
+                            :label="i" :value="i"
+                        />
+                    </el-select>
                 </div>
                 <!-- 刷新配置 -->
                 <RefreshConfig></RefreshConfig>
             </div>
+            <!-- 弹窗按钮 -->
+            <div class="dialog-btn">
+                <el-button type="primary" plain>取消</el-button>
+                <el-button type="primary">确定</el-button>
+            </div>
         </el-dialog>
-        <!-- 设置刷新状态 -->
     </div>
 </template>
 
 <script>
 import RefreshConfig from './components/refreshConfig.vue';
-
 export default {
     data() {
         return {
@@ -111,7 +120,7 @@ export default {
             ],
             tableData: [{ code: 'aaa' }],
             isSetTimeDialogShow: false,
-            isSetStateDialogShow: false,
+            defaultFrequence:'日度',
         };
     },
     methods: {
@@ -171,5 +180,22 @@ export default {
             text-align: right;
         }
     }
+    .refresh-setting-dialog{
+        .dialog-container{
+            max-height: 80vh;
+            overflow-y: auto;
+            .default-box{
+                display: flex;
+                align-items: center;
+                padding-bottom: 30px;
+                margin-bottom: 30px;
+                border-bottom: 1px solid #EBEFF6;
+            }
+        }
+        .dialog-btn{
+            text-align: center;
+            padding: 25px 0;
+        }
+    }
 }
 </style>