任务详情该为多行文本

src/main/vue/src/views/MetaTaskEdit.vue

@@ -1,205 +1,203 @@
 <template>
-	<div class="edit-view">
-		<page-title>
-			<el-button @click="$router.go(-1)" :disabled="saving"> 取消 </el-button>
-			<el-button @click="onDelete" :disabled="saving" type="danger" v-if="formData.id"> 删除 </el-button>
-			<el-button @click="onSave" :loading="saving" type="primary"> 保存 </el-button>
-		</page-title>
-		<div class="edit-view__content-wrapper">
-			<div class="edit-view__content-section">
-				<el-form
-					:model="formData"
-					:rules="rules"
-					ref="form"
-					label-width="130px"
-					label-position="right"
-					size="small"
-					style="max-width: 500px"
-				>
-					<el-form-item prop="name" label="任务名称">
-						<el-input v-model="formData.name"> </el-input>
-					</el-form-item>
-					<el-form-item prop="detail" label="详情" style="width: calc(100vw - 450px)">
-						<rich-text v-model="formData.detail"> </rich-text>
-					</el-form-item>
-					<el-form-item prop="awardPic" label="奖励图片">
+    <div class="edit-view">
+        <page-title>
+            <el-button @click="$router.go(-1)" :disabled="saving"> 取消 </el-button>
+            <el-button @click="onDelete" :disabled="saving" type="danger" v-if="formData.id"> 删除 </el-button>
+            <el-button @click="onSave" :loading="saving" type="primary"> 保存 </el-button>
+        </page-title>
+        <div class="edit-view__content-wrapper">
+            <div class="edit-view__content-section">
+                <el-form
+                    :model="formData"
+                    :rules="rules"
+                    ref="form"
+                    label-width="130px"
+                    label-position="right"
+                    size="small"
+                    style="max-width: 500px"
+                >
+                    <el-form-item prop="name" label="任务名称">
+                        <el-input v-model="formData.name"> </el-input>
+                    </el-form-item>
+                    <el-form-item prop="detail" label="详情" style="width: calc(100vw - 450px)">
+                        <el-input
+                            v-model="formData.detail"
+                            type="textarea"
+                            :autosize="{ minRows: 3, maxRows: 20 }"
+                            placeholder="请输入任务详情"
+                        >
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item prop="awardPic" label="奖励图片">
                         <single-upload v-model="formData.awardPic"> </single-upload>
                     </el-form-item>
-					<el-form-item prop="type" label="任务类型">
-						<el-select v-model="formData.type" clearable filterable placeholder="请选择" @change="change">
-							<el-option
-								v-for="item in typeOptions"
-								:key="item.value"
-								:label="item.label"
-								:value="item.value"
-							>
-							</el-option>
-						</el-select>
-					</el-form-item>
-					<template v-if="formData.type">
-						<el-form-item
-							v-if="formData.type === 'SIGN_IN_SINGLE_DAY'"
-							prop="value"
-							label="签到日期"
-						>
-							<el-date-picker
-								v-model="formData.value"
-								type="date"
-								value-format="yyyy-MM-dd"
-								placeholder="指定签到日期"
-							>
-							</el-date-picker>
-						</el-form-item>
-						<el-form-item
-							v-if="formData.type === 'SIGN_IN_CONTINUOUS'"
-							prop="value"
-							label="开始日期"
-						>
-							<el-date-picker
-								v-model="formData.value"
-								type="date"
-								value-format="yyyy-MM-dd"
-								placeholder="指定开始日期"
-							>
-							</el-date-picker>
-						</el-form-item>
-						<el-form-item prop="value" label="藏品id" v-if="formData.type === 'COLLECT_COLLECTION'">
-							<el-input v-model="formData.value" placeholder="请输入定藏品id"> </el-input>
-							<div class="tip">多个藏品id请用空格隔开 例如 111 222 333</div>
-						</el-form-item>
-						<el-form-item prop="value" label="次数" v-if="formData.type === 'ACCUMULATE'">
-							<el-input-number v-model="formData.value" :min="0"> </el-input-number>
-						</el-form-item>
-						<el-form-item prop="value" label="在线时长(min)" v-if="formData.type === 'ON_LINE_TIME_DAILY'">
-							<el-input-number v-model="formData.value" :min="0"> </el-input-number>
-						</el-form-item>
-					</template>
-					<el-form-item prop="publish" label="是否发布">
-						<el-switch v-model="formData.publish"> </el-switch>
-					</el-form-item>
-					<el-form-item prop="mark" label="是否展示角标">
-						<el-switch v-model="formData.mark"> </el-switch>
-					</el-form-item>
-					<el-form-item class="form-submit">
-						<el-button @click="onSave" :loading="saving" type="primary"> 保存 </el-button>
-						<el-button @click="onDelete" :disabled="saving" type="danger" v-if="formData.id">
-							删除
-						</el-button>
-						<el-button @click="$router.go(-1)" :disabled="saving"> 取消 </el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-		</div>
-	</div>
+                    <el-form-item prop="type" label="任务类型">
+                        <el-select v-model="formData.type" clearable filterable placeholder="请选择" @change="change">
+                            <el-option
+                                v-for="item in typeOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <template v-if="formData.type">
+                        <el-form-item v-if="formData.type === 'SIGN_IN_SINGLE_DAY'" prop="value" label="签到日期">
+                            <el-date-picker
+                                v-model="formData.value"
+                                type="date"
+                                value-format="yyyy-MM-dd"
+                                placeholder="指定签到日期"
+                            >
+                            </el-date-picker>
+                        </el-form-item>
+                        <el-form-item v-if="formData.type === 'SIGN_IN_CONTINUOUS'" prop="value" label="开始日期">
+                            <el-date-picker
+                                v-model="formData.value"
+                                type="date"
+                                value-format="yyyy-MM-dd"
+                                placeholder="指定开始日期"
+                            >
+                            </el-date-picker>
+                        </el-form-item>
+                        <el-form-item prop="value" label="藏品id" v-if="formData.type === 'COLLECT_COLLECTION'">
+                            <el-input v-model="formData.value" placeholder="请输入定藏品id"> </el-input>
+                            <div class="tip">多个藏品id请用空格隔开 例如 111 222 333</div>
+                        </el-form-item>
+                        <el-form-item prop="value" label="次数" v-if="formData.type === 'ACCUMULATE'">
+                            <el-input-number v-model="formData.value" :min="0"> </el-input-number>
+                        </el-form-item>
+                        <el-form-item prop="value" label="在线时长(min)" v-if="formData.type === 'ON_LINE_TIME_DAILY'">
+                            <el-input-number v-model="formData.value" :min="0"> </el-input-number>
+                        </el-form-item>
+                    </template>
+                    <el-form-item prop="publish" label="是否发布">
+                        <el-switch v-model="formData.publish"> </el-switch>
+                    </el-form-item>
+                    <el-form-item prop="mark" label="是否展示角标">
+                        <el-switch v-model="formData.mark"> </el-switch>
+                    </el-form-item>
+                    <el-form-item class="form-submit">
+                        <el-button @click="onSave" :loading="saving" type="primary"> 保存 </el-button>
+                        <el-button @click="onDelete" :disabled="saving" type="danger" v-if="formData.id">
+                            删除
+                        </el-button>
+                        <el-button @click="$router.go(-1)" :disabled="saving"> 取消 </el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
 </template>
 <script>
 export default {
-	name: 'MetaTaskEdit',
-	created() {
-		if (this.$route.query.id) {
-			this.$http
-				.get('metaTask/get/' + this.$route.query.id)
-				.then(res => {
-					this.formData = res;
-				})
-				.catch(e => {
-					console.log(e);
-					this.$message.error(e.error);
-				});
-		}
-	},
-	data() {
-		return {
-			saving: false,
-			formData: {},
-			rules: {
-				name: [
-					{
-						required: true,
-						message: '请输入任务名称',
-						trigger: 'blur'
-					}
-				],
-				description: [
-					{
-						required: true,
-						message: '请输入任务详情',
-						trigger: 'blur'
-					}
-				],
-				type: [
-					{
-						required: true,
-						message: '请输入任务类型',
-						trigger: 'blur'
-					}
-				],
-				value: [
-					{
-						required: true,
-						message: '请指定参数配置',
-						trigger: 'blur'
-					}
-				]
-			},
-			typeOptions: [
-				{ label: '单日签到', value: 'SIGN_IN_SINGLE_DAY' },
-				{ label: '连续多日签到', value: 'SIGN_IN_CONTINUOUS' },
-				{ label: '收集藏品', value: 'COLLECT_COLLECTION' },
-				{ label: '每日在线时长', value: 'ON_LINE_TIME_DAILY' },
-				{ label: '累计', value: 'ACCUMULATE' }
-			]
-		};
-	},
-	methods: {
+    name: 'MetaTaskEdit',
+    created() {
+        if (this.$route.query.id) {
+            this.$http
+                .get('metaTask/get/' + this.$route.query.id)
+                .then(res => {
+                    this.formData = res;
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.$message.error(e.error);
+                });
+        }
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {},
+            rules: {
+                name: [
+                    {
+                        required: true,
+                        message: '请输入任务名称',
+                        trigger: 'blur'
+                    }
+                ],
+                description: [
+                    {
+                        required: true,
+                        message: '请输入任务详情',
+                        trigger: 'blur'
+                    }
+                ],
+                type: [
+                    {
+                        required: true,
+                        message: '请输入任务类型',
+                        trigger: 'blur'
+                    }
+                ],
+                value: [
+                    {
+                        required: true,
+                        message: '请指定参数配置',
+                        trigger: 'blur'
+                    }
+                ]
+            },
+            typeOptions: [
+                { label: '单日签到', value: 'SIGN_IN_SINGLE_DAY' },
+                { label: '连续多日签到', value: 'SIGN_IN_CONTINUOUS' },
+                { label: '收集藏品', value: 'COLLECT_COLLECTION' },
+                { label: '每日在线时长', value: 'ON_LINE_TIME_DAILY' },
+                { label: '累计', value: 'ACCUMULATE' }
+            ]
+        };
+    },
+    methods: {
         change() {
             if (this.formData.value) {
-                this.formData.value = undefined
+                this.formData.value = undefined;
             }
         },
-		onSave() {
-			this.$refs.form.validate(valid => {
-				if (valid) {
-					this.submit();
-				} else {
-					return false;
-				}
-			});
-		},
-		submit() {
-			let data = { ...this.formData };
+        onSave() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.submit();
+                } else {
+                    return false;
+                }
+            });
+        },
+        submit() {
+            let data = { ...this.formData };
 
-			this.saving = true;
-			this.$http
-				.post('/metaTask/save', data, { body: 'json' })
-				.then(res => {
-					this.saving = false;
-					this.$message.success('成功');
-					this.$router.go(-1);
-				})
-				.catch(e => {
-					console.log(e);
-					this.saving = false;
-					this.$message.error(e.error);
-				});
-		},
-		onDelete() {
-			this.$confirm('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
-				.then(() => {
-					return this.$http.post(`/metaTask/del/${this.formData.id}`);
-				})
-				.then(() => {
-					this.$message.success('删除成功');
-					this.$router.go(-1);
-				})
-				.catch(e => {
-					if (e !== 'cancel') {
-						console.log(e);
-						this.$message.error((e || {}).error || '删除失败');
-					}
-				});
-		}
-	}
+            this.saving = true;
+            this.$http
+                .post('/metaTask/save', data, { body: 'json' })
+                .then(res => {
+                    this.saving = false;
+                    this.$message.success('成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.saving = false;
+                    this.$message.error(e.error);
+                });
+        },
+        onDelete() {
+            this.$confirm('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/metaTask/del/${this.formData.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        console.log(e);
+                        this.$message.error((e || {}).error || '删除失败');
+                    }
+                });
+        }
+    }
 };
 </script>
 <style lang="less" scoped>