<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>