addq
<template> <el-row id="AddRoom"> <el-col :xs="0" :sm="2" :md="3" :lg="4">.</el-col> <el-col :xs="24" :sm="19" :md="16" :lg="13"> <el-card class="box-card"> <el-form ref="form" :model="form" > <el-form-item label="标题" prop="title" :rules="[ { required: true, message: '标题不能为空'}, {min: 5, max: 15, message: '长度在 5 到 80', trigger: 'blur' } ]"> <el-input v-model="form.title" style="width: 100%" placeholder="输入文章标题" ></el-input> </el-form-item> <el-form-item label="类型" > <el-form-item prop="mainTag"> <el-select v-model="form.mainTag" style="width: 100%" placeholder="文章类型" > <el-option label="预测" value="预测"></el-option> <el-option label="讨论" value="讨论"></el-option> <el-option label="知识" value="知识"></el-option> <el-option label="不限" value="不限"></el-option> </el-select> </el-form-item> </el-form-item> <el-form-item > <section class="container" style="margin-top: 10px"> <div class="quill-editor" :content="content" @change="onEditorChange($event)" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" v-quill:myQuillEditor="editorOption"> </div> <el-button type="primary" style="margin-top:20px;" @click="submitForm('form')">{{gonext}}</el-button> <el-button style="margin-top:20px;" @click="resetForm('form')">重置</el-button> <el-button style="margin-top:20px;" @click="submit">提交</el-button> </section> </el-form-item> </el-form> </el-card> </el-col> </el-row> </template> <style scoped> /* .container { width: 60%; margin: 0 auto; padding: 50px 0; } */ .box-card{ margin-top:30px; } .quill-editor { min-height: 350px; /* max-height: 400px;*/ overflow-y: auto; } </style> <script> export default { data () { return { content: '<p>I am Example</p>', editorOption: { // some quill options modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block', 'image'] ] } }, gonext:"立即创建", form: { title:'', content:'', mainTag:'不限', tags:'', }, roomid:this.$route.params.id, action:"api/room/upload/"+this.$route.params.id, pantext:"添加", rules: { title: [ { required: true, message: '请输入标题', trigger: 'blur' }, { min: 5, max: 64, message: '长度在 5 到 64 个字符', trigger: 'blur' } ], } } }, mounted() { console.log('app init, my quill insrance object is:', this.myQuillEditor) setTimeout(() => { this.content = 'i am changed' }, 3000) if(this.$route.params.id) { this.getRoom(); //this.getFilelist(); this.pantext = "修改"; } }, methods: { submit(){ alert(this.content ); }, onEditorBlur(editor) { console.log('editor blur!', editor) }, onEditorFocus(editor) { console.log('editor focus!', editor) }, onEditorReady(editor) { console.log('editor ready!', editor) }, onEditorChange({ editor, html, text }) { console.log('editor change!', editor, html, text) this.content = html }, // getRoom(){ var id=this.$route.params.id; this.editorContent='111'; var gvue=this; this.$axios({ method: 'get', url: 'api/article/one/'+id+'?time='+new Date().getTime(), changeOrigin:true, }).then(function (response) { console.log(response.data); gvue.form=response.data;//[0]; gvue.gonext="立即修改"; gvue.content=response.data.content; editor.txt.html(response.data.content); }) .catch(function (error) { console.log(error); }); }, submitForm(form) {//2表示是求组 console.log('submit!'); this.$refs[form].validate((valid) => { if (valid) { //alert('submit!'); var url = 'api/article/add?time='+new Date().getTime(); if(this.$route.params.id) url = 'api/article/edit?time='+new Date().getTime(); var gvue=this; this.form.content=this.content; this.$axios({ method: 'post', url:url , changeOrigin:true, data: this.form//"courtname="+this.form.courtname+"&areaname="+this.form.areaname }).then(function (response) { console.log(response); if(response.data=="00"){ gvue.$message({ showClose: true, message: response.data.ret_msg+',操作成功1', type: 'success' }); //gvue.$router.push("/addroom2/"+response.data.ret_roomid); gvue.$router.push("/postarticles"); } }) .catch(function (error) { console.log(error); }); } else { console.log('error submit!!'); return false; } }); } } } </script>