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

addq的更多相关文章

  1. Golang汇编命令解读

    我们可以很容易将一个golang程序转变成汇编语言. 比如我写了一个main.go: package main func g(p int) int { return p+1; } func main( ...

  2. 【教程】简易CDQ分治教程&学习笔记

    前言 辣鸡蒟蒻__stdcall终于会CDQ分治啦!       CDQ分治是我们处理各类问题的重要武器.它的优势在于可以顶替复杂的高级数据结构,而且常数比较小:缺点在于必须离线操作. CDQ分治的基 ...

  3. 数据结构 浙大MOOC 笔记二 线性结构

    线性表及其表现 第二章的内容是关于三种最基本的数据结构 结合<DDSA>第三章 表.栈和队列做一个总结 首先简单说明一下各个数据结构的特点: 数组:连续存储,遍历快且方便,长度固定,缺点是 ...

  4. 06-图1 列出连通集 (25分)(C语言邻接表实现)

    题目地址:https://pta.patest.cn/pta/test/558/exam/4/question/9495 由于边数E<(n*(n-1))/2 所以我选用了邻接表实现,优先队列用循 ...

  5. HDU 4757 Tree(可持久化Trie+Tarjan离线LCA)

    Tree Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 102400/102400 K (Java/Others) Total Su ...

  6. julia的优化?

    julia> function fib1(n) if n==1 return n else return n+fib1(n-1) end end fib1 (generic function w ...

  7. TCP校验和的原理和实现

        http://blog.csdn.net/zhangskd/article/details/11770647 分类: Linux TCP/IP Linux Kernel 2013-09-24 ...

  8. BZOJ4573 : [Zjoi2016]大森林

    扫描线,从左到右依次处理每棵树. 用set按时间顺序维护影响了这棵树的所有操作,那么一个点的父亲就是它前面第一个操作1. 用Splay维护树的括号序列,那么两点间的距离就是括号数量减去匹配的括号个数. ...

  9. SPOJ 10628 Count on a tree(Tarjan离线LCA+主席树求树上第K小)

    COT - Count on a tree #tree You are given a tree with N nodes.The tree nodes are numbered from 1 to  ...

随机推荐

  1. wsl中使用原生docker

    之前介绍过windows中安装docker,但是它需要用到hyper-v.hyper-v与vm不兼容非常之不方便.不过发现windows有wsl(linux子系统)遂试验,结果非常nice功能一应俱全 ...

  2. vnc server的安装

    vnc是一款使用广泛的服务器管理软件,可以实现图形化管理.我在安装vnc server碰到一些问题,也整理下我的安装步骤,希望对博友们有一些帮助. 1 安装对应的软件包 [root@centos6 ~ ...

  3. Docker系列08—搭建使用私有docker registry

    本文收录在容器技术学习系列文章总目录 1.了解Docker Registry 1.1 介绍 registry 用于保存docker 镜像,包括镜像的层次结构和元数据. 启动容器时,docker dae ...

  4. webpack4.0各个击破(9)—— karma篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  5. json 按照字段分类

    let arr = [ { Category:'A', Amount:, },{ Category:'B', Amount:, },{ Category:'A', Amount:, },{ Categ ...

  6. Selenium自动化 Xpath-元素定位

    最近在教妹子做自动化测试,妹子基础差,于是想到很多初学自动化的朋友们学习的知识没有规范化,信息太过杂乱.所以,本文整理了一些自动化元素定位方式: 这次将讲Xpath定位! 什么是Xpath: Path ...

  7. Lyndon Word学习笔记

    Lyndon Word 定义:对于字符串\(s\),若\(s\)的最小后缀为其本身,那么称\(s\)为Lyndon串 等价性:\(s\)为Lyndon串等价于\(s\)本身是其循环移位中最小的一个 性 ...

  8. html标签种类很多,为什么不都用div?

    why not divs? 所有html页面标签都可以用div解决,为什么还会存在各种不同的标签呢? 代码是写给机器阅读的,初始化标签更利于快速编程,毕竟很多标签有了自定义属性,无需编码控制,可维护性 ...

  9. win10系统下安装MySQLdb和pymysql

      (1)使用的是Python3.6,想要使用MySQLdb, 需要先在https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysqlclient中下载相应版本的包 ...

  10. iOS----------使用cocoapods遇到的问题

    -bash: /usr/local/bin/pod: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad ...