源文件

src/views/table/table_config.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="app-container">
+        <el-form :model="form" label-width="120px">
+            <el-form-item label="网络预定开关">
+                <el-switch v-model="form.yd" :active-value="1" :inactive-value="0"></el-switch>
+            </el-form-item>
+            <el-form-item label="预定时间" v-if="form.timeList.length">
+                <div class="time_row" v-for="(item, index) in form.timeList" :key="index">
+                    <el-time-picker is-range v-model="item.time" range-separator="至" start-placeholder="开始时间"
+                        end-placeholder="结束时间" placeholder="选择时间范围">
+                    </el-time-picker>
+                    <i class="icon el-icon-delete" @click="form.timeList.splice(index, 1)"></i>
+                </div>
+            </el-form-item>
+            <el-form-item>
+                <el-button plain icon="el-icon-plus" @click="form.timeList.push({ time: [] })">添加时间段</el-button>
+                <div class="tips">注：结束时间不能小于开始时间</div>
+            </el-form-item>
+            <el-form-item label="允许预约天数">
+                <el-input-number v-model="form.dayMax" controls-position="right" :min="0"></el-input-number>
+                <div class="tips">注：最多预约几天后的日期</div>
+            </el-form-item>
+            <el-form-item label="允许预约天数">
+                <el-input type="textarea" v-model="form.info" placeholder="充值说明" style="width: 500px;"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary">保存</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+                yd: 0,
+                timeList: [],
+                dayMax: 3,
+                info: ''
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.time_row {
+    display: flex;
+    align-items: center;
+
+    &:not(:first-child) {
+        margin-top: 20px;
+    }
+
+    .icon {
+        margin-left: 20px;
+    }
+}
+</style>