王健
4 years ago
2 changed files with 198 additions and 188 deletions
@ -1,196 +1,206 @@
|
||||
<template> |
||||
<div class="edit_container" v-loading="loading"> |
||||
<div class="btn"> |
||||
<div> |
||||
<el-form :inline="true" :model="searchForm" class="demo-form-inline"> |
||||
<el-form-item label="标题：" style="margin-right: 20px;"> |
||||
<el-input |
||||
v-model="searchForm.messageTitle" |
||||
placeholder="请输入" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="消息类型："> |
||||
<el-select |
||||
style="width: 100%" |
||||
v-model="searchForm.messageType" |
||||
filterable |
||||
allow-create |
||||
placeholder="请选择" |
||||
> |
||||
<el-option |
||||
v-for="item in typeList" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<div> |
||||
<el-button @click="save" type="primary" |
||||
>保存</el-button |
||||
> |
||||
<el-button @click="back" |
||||
>返回</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
<!-- 新增时输入 --> |
||||
<quill-editor |
||||
v-model="content" |
||||
ref="myQuillEditor" |
||||
:options="editorOption" |
||||
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" |
||||
@change="onEditorChange($event)"> |
||||
</quill-editor> |
||||
<!-- 从数据库读取展示 --> |
||||
<div class="edit_container" v-loading="loading"> |
||||
<div style="background-color: white; padding-top: 20px"> |
||||
<el-row> |
||||
<el-col :span="22" :offset="1" class="content"> |
||||
<quill-editor |
||||
v-model="content" |
||||
ref="myQuillEditor" |
||||
:options="editorOption" |
||||
@blur="onEditorBlur($event)" |
||||
@focus="onEditorFocus($event)" |
||||
@change="onEditorChange($event)" |
||||
> |
||||
</quill-editor> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="4" :offset="20"> |
||||
<div class="btn"> |
||||
<el-button @click="dialogVisible = true" type="primary" |
||||
>保存</el-button |
||||
> |
||||
<el-button @click="back">返回</el-button> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
<el-dialog title="保存" :visible.sync="dialogVisible" width="30%"> |
||||
<el-form :model="searchForm"> |
||||
<el-form-item label="标题："> |
||||
<el-input |
||||
v-model="searchForm.messageTitle" |
||||
placeholder="请输入标题" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="消息类型："> |
||||
<el-select |
||||
style="width: 100%" |
||||
v-model="searchForm.messageType" |
||||
filterable |
||||
allow-create |
||||
placeholder="请选择消息类型" |
||||
> |
||||
<el-option |
||||
v-for="item in typeList" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button type="primary" @click="save">确 定</el-button> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import {newMessage,getMessage,editMessage} from "./api/api"; |
||||
import { quillEditor } from "vue-quill-editor"; //调用编辑器 |
||||
import 'quill/dist/quill.core.css'; |
||||
import 'quill/dist/quill.snow.css'; |
||||
import 'quill/dist/quill.bubble.css'; |
||||
import * as api from "../houseList/api"; |
||||
export default { |
||||
components: { |
||||
quillEditor |
||||
import { newMessage, getMessage, editMessage } from "./api/api"; |
||||
import { quillEditor } from "vue-quill-editor"; //调用编辑器 |
||||
import "quill/dist/quill.core.css"; |
||||
import "quill/dist/quill.snow.css"; |
||||
import "quill/dist/quill.bubble.css"; |
||||
import * as api from "../houseList/api"; |
||||
export default { |
||||
components: { |
||||
quillEditor, |
||||
}, |
||||
data() { |
||||
return { |
||||
searchForm: { |
||||
// 公告序号 |
||||
messageTitle: "", |
||||
messageType: "", |
||||
}, |
||||
loading: false, |
||||
content: ``, |
||||
dialogVisible: false, |
||||
messageTitle: "", |
||||
str: "", |
||||
isEdit: false, |
||||
myHtml: "", |
||||
typeList: [], |
||||
editorOption: { |
||||
placeholder: "请在这里输入", |
||||
modules: { |
||||
toolbar: [ |
||||
["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线 |
||||
["blockquote", "code-block"], //引用，代码块 |
||||
[{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小 |
||||
[{ list: "ordered" }, { list: "bullet" }], //列表 |
||||
[{ script: "sub" }, { script: "super" }], // 上下标 |
||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进 |
||||
[{ direction: "rtl" }], // 文本方向 |
||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小 |
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题 |
||||
[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色 |
||||
[{ align: [] }], //对齐方式 |
||||
["clean"], //清除字体样式 |
||||
], |
||||
}, |
||||
data() { |
||||
return { |
||||
searchForm: { |
||||
// 公告序号 |
||||
messageTitle: "", |
||||
messageType:'', |
||||
}, |
||||
loading:false, |
||||
content: ``, |
||||
messageTitle:'', |
||||
str: '', |
||||
isEdit:false, |
||||
myHtml:'', |
||||
typeList:[], |
||||
editorOption: { |
||||
placeholder: "请在这里输入", |
||||
modules:{ |
||||
toolbar:[ |
||||
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线 |
||||
['blockquote', 'code-block'], //引用，代码块 |
||||
[{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小 |
||||
[{ 'list': 'ordered'}, { 'list': 'bullet' }], //列表 |
||||
[{ 'script': 'sub'}, { 'script': 'super' }], // 上下标 |
||||
[{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进 |
||||
[{ 'direction': 'rtl' }], // 文本方向 |
||||
[{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小 |
||||
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], //几级标题 |
||||
[{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色 |
||||
[{ 'align': [] }], //对齐方式 |
||||
['clean'], //清除字体样式 |
||||
] |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
this.$route.query.isEditOr=='true'?this.isEdit=true:this.isEdit=false; |
||||
if (this.isEdit){ |
||||
this.loading=true; |
||||
getMessage(this.$route.query.data).then(res=>{ |
||||
this.content=res.data.data.messageContent |
||||
this.myHtml=res.data.data.messageContent; |
||||
this.searchForm.messageTitle=res.data.data.messageTitle; |
||||
this.searchForm.messageType=res.data.data.messageType; |
||||
this.id=res.data.data.messageId; |
||||
this.loading=false; |
||||
// this.escapeStringHTML(this.content) |
||||
}) |
||||
} |
||||
}, |
||||
methods: { |
||||
onEditorReady(editor) { // 准备编辑器 |
||||
|
||||
}, |
||||
onEditorBlur(){}, // 失去焦点事件 |
||||
onEditorFocus(){}, // 获得焦点事件 |
||||
onEditorChange(e){ |
||||
this.myHtml=e.html; |
||||
}, // 内容改变事件 |
||||
// 转码 |
||||
escapeStringHTML(str) { |
||||
str = str.replace(/<\/?.+?>/g, ""); |
||||
return str; |
||||
}, |
||||
back(){ |
||||
window.history.back() |
||||
}, |
||||
save(){ |
||||
if (!this.searchForm.messageTitle){ |
||||
this.$message.error("请先输入消息标题"); |
||||
return false |
||||
} |
||||
if (!this.searchForm.messageType){ |
||||
this.$message.error("请先选择消息类型"); |
||||
return false |
||||
} |
||||
let data={ |
||||
messageTitle:this.searchForm.messageTitle, |
||||
messageContent:this.myHtml, |
||||
messageType:this.searchForm.messageType |
||||
} |
||||
if (this.isEdit){ |
||||
this.$set(data,'messageId',this.id) |
||||
editMessage(data).then(res=>{ |
||||
if (res.data.success){ |
||||
this.$message({ |
||||
type: 'success', |
||||
message: '保存成功' |
||||
}); |
||||
window.history.back() |
||||
}else { |
||||
this.$message.error("保存失败"); |
||||
} |
||||
}) |
||||
}else { |
||||
newMessage(data).then(res=>{ |
||||
if (res.data.success){ |
||||
this.$message({ |
||||
type: 'success', |
||||
message: '保存成功' |
||||
}); |
||||
window.history.back() |
||||
}else { |
||||
this.$message.error("保存失败"); |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
}, |
||||
computed: { |
||||
editor() { |
||||
return this.$refs.myQuillEditor.quill; |
||||
}, |
||||
}, |
||||
mounted() { |
||||
api.getDict('message_type').then(res=>{ |
||||
this.typeList=res.data.data |
||||
}) |
||||
} |
||||
}, |
||||
}; |
||||
}, |
||||
created() { |
||||
this.$route.query.isEditOr == "true" |
||||
? (this.isEdit = true) |
||||
: (this.isEdit = false); |
||||
if (this.isEdit) { |
||||
this.loading = true; |
||||
getMessage(this.$route.query.data).then((res) => { |
||||
this.content = res.data.data.messageContent; |
||||
this.myHtml = res.data.data.messageContent; |
||||
this.searchForm.messageTitle = res.data.data.messageTitle; |
||||
this.searchForm.messageType = res.data.data.messageType; |
||||
this.id = res.data.data.messageId; |
||||
this.loading = false; |
||||
// this.escapeStringHTML(this.content) |
||||
}); |
||||
} |
||||
}, |
||||
methods: { |
||||
onEditorReady(editor) { |
||||
// 准备编辑器 |
||||
}, |
||||
onEditorBlur() {}, // 失去焦点事件 |
||||
onEditorFocus() {}, // 获得焦点事件 |
||||
onEditorChange(e) { |
||||
this.myHtml = e.html; |
||||
}, // 内容改变事件 |
||||
// 转码 |
||||
escapeStringHTML(str) { |
||||
str = str.replace(/<\/?.+?>/g, ""); |
||||
return str; |
||||
}, |
||||
back() { |
||||
window.history.back(); |
||||
}, |
||||
save() { |
||||
if (!this.searchForm.messageTitle) { |
||||
this.$message.error("请先输入消息标题"); |
||||
return false; |
||||
} |
||||
if (!this.searchForm.messageType) { |
||||
this.$message.error("请先选择消息类型"); |
||||
return false; |
||||
} |
||||
let data = { |
||||
messageTitle: this.searchForm.messageTitle, |
||||
messageContent: this.myHtml, |
||||
messageType: this.searchForm.messageType, |
||||
}; |
||||
if (this.isEdit) { |
||||
this.$set(data, "messageId", this.id); |
||||
editMessage(data).then((res) => { |
||||
if (res.data.success) { |
||||
this.$message({ |
||||
type: "success", |
||||
message: "保存成功", |
||||
}); |
||||
window.history.back(); |
||||
} else { |
||||
this.$message.error("保存失败"); |
||||
} |
||||
}); |
||||
} else { |
||||
newMessage(data).then((res) => { |
||||
if (res.data.success) { |
||||
this.$message({ |
||||
type: "success", |
||||
message: "保存成功", |
||||
}); |
||||
window.history.back(); |
||||
} else { |
||||
this.$message.error("保存失败"); |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
computed: { |
||||
editor() { |
||||
return this.$refs.myQuillEditor.quill; |
||||
}, |
||||
}, |
||||
mounted() { |
||||
api.getDict("message_type").then((res) => { |
||||
this.typeList = res.data.data; |
||||
}); |
||||
}, |
||||
}; |
||||
</script> |
||||
<style scoped> |
||||
.edit_container{ |
||||
position: relative; |
||||
.edit_container { |
||||
padding: 20px 40px 0 40px; |
||||
} |
||||
.content { |
||||
height: 700px; |
||||
} |
||||
.quill-editor { |
||||
height: 90%; |
||||
} |
||||
.btn{ |
||||
height: 80px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 0 30px; |
||||
border-top: 1px solid #ccc; |
||||
background-color: white; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue