可玩项目

src/main/vue/src/views/ArticleEdit.vue

@@ -13,7 +13,33 @@
                 <el-input v-model="formData.name" :disabled="!!formData.id"></el-input>
             </el-form-item>
             <el-form-item prop="content" label="内容" style="width:800px">
-                <rich-text v-model="formData.content"></rich-text>
+                <div v-if="formData.name === '可玩项目'">
+                    <el-form
+                        v-for="(item, i) in list"
+                        :key="i"
+                        :model="item"
+                        ref="subform"
+                        label-position="right"
+                        label-width="60px"
+                        class="subform"
+                        :rules="subrule"
+                    >
+                        <el-form-item label="名称" prop="name">
+                            <el-input v-model="item.name"></el-input>
+                        </el-form-item>
+                        <el-form-item label="描述" prop="desc">
+                            <el-input v-model="item.desc" :rows="5" type="textarea"></el-input>
+                        </el-form-item>
+                        <el-form-item label="图片" prop="img">
+                            <multi-upload v-model="item.img"></multi-upload>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="delItem(i)">删除</el-button>
+                        </el-form-item>
+                    </el-form>
+                    <el-button @click="list.push({ name: '', desc: '', img: [] })">添加</el-button>
+                </div>
+                <rich-text v-model="formData.content" v-else></rich-text>
             </el-form-item>
             <el-form-item>
                 <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
@@ -32,6 +58,9 @@ export default {
                 .get('article/get/' + this.$route.query.id)
                 .then(res => {
                     this.formData = res;
+                    if (res.name === '可玩项目') {
+                        this.list = JSON.parse(res.content) || [];
+                    }
                 })
                 .catch(e => {
                     console.log(e);
@@ -43,22 +72,51 @@ export default {
         return {
             saving: false,
             formData: {},
-            rules: {}
+            rules: {},
+            list: [],
+            subrule: {
+                name: { required: true, message: '请输入名称', trigger: 'blur' },
+                desc: { required: true, message: '请输入描述', trigger: 'blur' },
+                img: {
+                    validator: (rule, value, callback) => {
+                        if (value && value.length > 0) {
+                            callback();
+                        } else {
+                            callback(new Error('请上传图片'));
+                        }
+                    },
+                    trigger: 'blur'
+                }
+            }
         };
     },
     methods: {
         onSave() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.submit();
-                } else {
-                    return false;
-                }
-            });
+            if (this.formData.name === '可玩项目') {
+                Promise.all(this.$refs.subform.map(i => i.validate())).then(() => {
+                    this.$refs.form.validate(valid => {
+                        if (valid) {
+                            this.submit();
+                        } else {
+                            return false;
+                        }
+                    });
+                });
+            } else {
+                this.$refs.form.validate(valid => {
+                    if (valid) {
+                        this.submit();
+                    } else {
+                        return false;
+                    }
+                });
+            }
         },
         submit() {
             let data = { ...this.formData };
-
+            if (this.formData.name === '可玩项目') {
+                data.content = JSON.stringify(this.list);
+            }
             this.saving = true;
             this.$http
                 .post('/article/save', data, { body: 'json' })
@@ -88,8 +146,19 @@ export default {
                         this.$message.error(e.error);
                     }
                 });
+        },
+        delItem(i) {
+            this.list.splice(i, 1);
         }
     }
 };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.subform {
+    padding: 16px 16px 1px 16px;
+    background: #f2f3f5;
+    border-radius: 8px;
+    border: 1px solid #eee;
+    margin-bottom: 20px;
+}
+</style>