Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
7d1060f8 by renchao@pashanhoo.com
Options

style:系统通知

1 parent bbdd382c
Inline Side-by-side
Showing 2 changed files with 313 additions and 300 deletions
......@@ -54,317 +54,318 @@
</el-form>
</template>
<script>
import { addSysNotice, updateSysNotice } from "@/api/sysNotice.js";
import { upload } from "@/api/file.js";
import { quillEditor } from "vue-quill-editor";
export default {
props: {
formData: {
type: Object,
default: () => { }
}
},
components: { quillEditor },
data () {
return {
ruleForm: {
noticeTitle: "",
noticeContent: "",
noticeFileUrl: "",
noticeSource: "",
validDays: 14,
noticeType: "1"
},
rules: {
noticeTitle: [
{ required: true, message: "请输入通知标题", trigger: "blur" }
],
noticeContent: [
{ required: true, message: "请输入通知内容", trigger: "blur" }
],
noticeSource: [
{ required: true, message: "请输入通知来源", trigger: "blur" }
]
},
// 富文本编辑器配置
editorOption: {
theme: "snow", // or 'bubble'
modules: {
toolbar: {
container: [
["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] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
// [{ font: ['songti'] }], // 字体种类
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["image", "video"] // 链接、图片、视频
],
handlers: {
image: function (value) {
if (value) {
// 用upload的点击事件代替文本编辑器的图片上传事件
document.querySelector(".richUpload input").click();
} else {
this.quill.format("image", false);
import { addSysNotice, updateSysNotice } from "@/api/sysNotice.js";
import { upload } from "@/api/file.js";
import store from '@/store'
import { quillEditor } from "vue-quill-editor";
export default {
props: {
formData: {
type: Object,
default: () => { }
}
},
components: { quillEditor },
data () {
return {
ruleForm: {
noticeTitle: "",
noticeContent: "",
noticeFileUrl: "",
noticeSource: "",
validDays: 14,
noticeType: "1"
},
rules: {
noticeTitle: [
{ required: true, message: "请输入通知标题", trigger: "blur" }
],
noticeContent: [
{ required: true, message: "请输入通知内容", trigger: "blur" }
],
noticeSource: [
{ required: true, message: "请输入通知来源", trigger: "blur" }
]
},
// 富文本编辑器配置
editorOption: {
theme: "snow", // or 'bubble'
modules: {
toolbar: {
container: [
["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] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
// [{ font: ['songti'] }], // 字体种类
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["image", "video"] // 链接、图片、视频
],
handlers: {
image: function (value) {
if (value) {
// 用upload的点击事件代替文本编辑器的图片上传事件
document.querySelector(".richUpload input").click();
} else {
this.quill.format("image", false);
}
}
}
}
}
},
placeholder: "请输入正文"
},
placeholder: "请输入正文"
}
};
},
mounted () {
this.$nextTick(() => {
//创建富文本粘贴事件监听
let quill = this.$refs.myQuillEditor.quill;
this.$forceUpdate();
quill.root.addEventListener(
"paste",
evt => {
if (
evt.clipboardData &&
evt.clipboardData.files &&
evt.clipboardData.files.length
) {
evt.preventDefault();
[].forEach.call(evt.clipboardData.files, file => {
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
return;
}
that.clipboardPictureChange(file);
});
}
},
false
)
})
if (!this.formData.isButtonFlag) {
this.getDetailInfo(this.formData)
}
};
},
mounted () {
this.$nextTick(() => {
//创建富文本粘贴事件监听
let quill = this.$refs.myQuillEditor.quill;
this.$forceUpdate();
quill.root.addEventListener(
"paste",
evt => {
if (
evt.clipboardData &&
evt.clipboardData.files &&
evt.clipboardData.files.length
) {
evt.preventDefault();
[].forEach.call(evt.clipboardData.files, file => {
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
return;
}
that.clipboardPictureChange(file);
});
if (this.formData.edit) {
this.getDetailInfo(this.formData)
}
},
methods: {
/**
* @description: submitForm
* @author: renchao
*/
submitForm () {
let that = this;
that.$refs.ruleForm.validate(valid => {
if (valid) {
if (that.ruleForm.bsmNotice) {
that.editNotice();
} else {
that.addNotice();
}
} else {
return false;
}
},
false
)
})
if (!this.formData.isButtonFlag) {
this.getDetailInfo(this.formData)
}
if (this.formData.edit) {
this.getDetailInfo(this.formData)
}
},
methods: {
/**
* @description: submitForm
* @author: renchao
*/
submitForm () {
let that = this;
that.$refs.ruleForm.validate(valid => {
if (valid) {
if (that.ruleForm.bsmNotice) {
that.editNotice();
});
},
//关闭窗口
/**
* @description: 关闭窗口
* @author: renchao
*/
closeDialog () {
this.$popupCacel()
this.resetRuleForm();
},
//新增通知
/**
* @description: 新增通知
* @author: renchao
*/
addNotice () {
// 解决报错
// this.ruleForm.noticeType = "1"
addSysNotice(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success("保存成功");
store.dispatch("user/refreshPage", true);
this.$popupCacel()
this.resetRuleForm();
} else {
that.addNotice();
this.$message.error(res.message);
}
} else {
return false;
}
});
},
//关闭窗口
/**
* @description: 关闭窗口
* @author: renchao
*/
closeDialog () {
this.$popupCacel()
this.resetRuleForm();
},
//新增通知
/**
* @description: 新增通知
* @author: renchao
*/
addNotice () {
// 解决报错
// this.ruleForm.noticeType = "1"
addSysNotice(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success("保存成功");
this.$popupCacel()
this.resetRuleForm();
this.$parent.queryClick();
} else {
this.$message.error(res.message);
}
});
},
//编辑通知
/**
* @description: 编辑通知
* @author: renchao
*/
editNotice () {
updateSysNotice(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success("编辑成功");
this.$popupCacel()
this.resetRuleForm();
this.$parent.queryClick();
} else {
this.$message.error(res.message);
});
},
//编辑通知
/**
* @description: 编辑通知
* @author: renchao
*/
editNotice () {
updateSysNotice(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success("编辑成功");
this.$popupCacel()
this.resetRuleForm();
store.dispatch("user/refreshPage", true);
} else {
this.$message.error(res.message);
}
});
},
/**
* @description: 重置表单
* @author: renchao
*/
resetRuleForm () {
this.ruleForm = {
noticeTitle: "",
noticeContent: "",
noticeFileUrl: "",
noticeSource: "",
validDays: 14,
noticeType: "1"
}
});
},
//重置表单
/**
* @description: 重置表单
* @author: renchao
*/
resetRuleForm () {
this.ruleForm = {
noticeTitle: "",
noticeContent: "",
noticeFileUrl: "",
noticeSource: "",
validDays: 14,
noticeType: "1"
},
/**
* @description: beforeUpload
* @param {*} file
* @author: renchao
*/
beforeUpload (file) {
return true;
},
//附件上传事件
/**
* @description: 附件上传事件
* @param {*} file
* @author: renchao
*/
async handleChange (file) {
var formdata = new FormData();
formdata.append("file", file.raw);
upload(formdata).then(res => {
this.ruleForm.noticeFileUrl = res.message;
});
},
//富文本图片上传事件
/**
* @description: 富文本图片上传事件
* @param {*} file
* @author: renchao
*/
RichTexthandleChange (file) {
this.uploadPicture(file.raw)
},
//图片粘贴事件
/**
* @description: 图片粘贴事件
* @param {*} file
* @author: renchao
*/
clipboardPictureChange (file) {
this.uploadPicture(file)
},
/**
* @description: getDetailInfo
* @param {*} item
* @author: renchao
*/
getDetailInfo (item) {
this.ruleForm = item
},
/**
* @description: uploadPicture
* @param {*} file
* @author: renchao
*/
uploadPicture (file) {
let that = this;
var formdata = new FormData();
formdata.append("file", file);
upload(formdata).then(res => {
//editor对象
const quill = that.$refs.myQuillEditor.quill;
// 如果上传成功
// 获取光标所在位置
const length = quill.selection.savedRange.index;
// 插入图片
quill.insertEmbed(length, "image", res.message);
// 调整光标到最后
quill.setSelection(length + 1);
});
},
/**
* @description: onSubmit
* @author: renchao
*/
onSubmit () {
//console.log("submit!");
},
// 失去焦点事件
/**
* @description: 失去焦点事件
* @param {*} quill
* @author: renchao
*/
onEditorBlur (quill) {
//console.log("editor blur!", quill);
},
// 获得焦点事件
/**
* @description: 获得焦点事件
* @param {*} quill
* @author: renchao
*/
onEditorFocus (quill) {
//console.log("editor focus!", quill);
},
// 准备富文本编辑器
/**
* @description: 准备富文本编辑器
* @param {*} quill
* @author: renchao
*/
onEditorReady (quill) {
//console.log("editor ready!", quill);
},
// 内容改变事件
/**
* @description: 内容改变事件
* @param {*} quill
* @param {*} html
* @param {*} text
* @author: renchao
*/
onEditorChange ({ quill, html, text }) {
//console.log("editor change!", quill, html, text);
//this.content = html;
}
},
/**
* @description: beforeUpload
* @param {*} file
* @author: renchao
*/
beforeUpload (file) {
return true;
},
//附件上传事件
/**
* @description: 附件上传事件
* @param {*} file
* @author: renchao
*/
async handleChange (file) {
var formdata = new FormData();
formdata.append("file", file.raw);
upload(formdata).then(res => {
this.ruleForm.noticeFileUrl = res.message;
});
},
//富文本图片上传事件
/**
* @description: 富文本图片上传事件
* @param {*} file
* @author: renchao
*/
RichTexthandleChange (file) {
this.uploadPicture(file.raw)
},
//图片粘贴事件
/**
* @description: 图片粘贴事件
* @param {*} file
* @author: renchao
*/
clipboardPictureChange (file) {
this.uploadPicture(file)
},
/**
* @description: getDetailInfo
* @param {*} item
* @author: renchao
*/
getDetailInfo (item) {
this.ruleForm = item
},
/**
* @description: uploadPicture
* @param {*} file
* @author: renchao
*/
uploadPicture (file) {
let that = this;
var formdata = new FormData();
formdata.append("file", file);
upload(formdata).then(res => {
//editor对象
const quill = that.$refs.myQuillEditor.quill;
// 如果上传成功
// 获取光标所在位置
const length = quill.selection.savedRange.index;
// 插入图片
quill.insertEmbed(length, "image", res.message);
// 调整光标到最后
quill.setSelection(length + 1);
});
},
/**
* @description: onSubmit
* @author: renchao
*/
onSubmit () {
//console.log("submit!");
},
// 失去焦点事件
/**
* @description: 失去焦点事件
* @param {*} quill
* @author: renchao
*/
onEditorBlur (quill) {
//console.log("editor blur!", quill);
},
// 获得焦点事件
/**
* @description: 获得焦点事件
* @param {*} quill
* @author: renchao
*/
onEditorFocus (quill) {
//console.log("editor focus!", quill);
},
// 准备富文本编辑器
/**
* @description: 准备富文本编辑器
* @param {*} quill
* @author: renchao
*/
onEditorReady (quill) {
//console.log("editor ready!", quill);
},
// 内容改变事件
/**
* @description: 内容改变事件
* @param {*} quill
* @param {*} html
* @param {*} text
* @author: renchao
*/
onEditorChange ({ quill, html, text }) {
//console.log("editor change!", quill, html, text);
//this.content = html;
}
}
};
};
</script>
<style scoped lang="scss">
@import "~@/styles/dialogBoxheader.scss";
@import "~@/styles/dialogBoxheader.scss";
.quill-editor {
padding: 0;
}
.quill-editor {
padding: 0;
}
.ql-editor {
height: auto !important;
}
.ql-editor {
height: auto !important;
}
/deep/.ql-container {
padding: 0;
max-height: 400px;
min-height: 160px;
overflow-y: scroll;
}</style>
/deep/.ql-container {
padding: 0;
max-height: 400px;
min-height: 160px;
overflow-y: scroll;
}
</style>
......
......@@ -38,6 +38,7 @@
</template>
<script>
import table from "@/utils/mixin/table";
import { mapGetters } from 'vuex'
import { datas, sendThis } from "./xttzdata";
import { getSysNoticeList, deleteSysNotice, publishNotice, unPublishNotice } from "@/api/sysNotice.js"
import addDialog from "./components/addDialog.vue";
......@@ -73,6 +74,17 @@
isDiglog: false
}
},
computed: {
...mapGetters(['isRefresh'])
},
watch: {
isRefresh: {
handler (newVal, oldVal) {
if (newVal) this.queryClick()
},
immediate: true
}
},
methods: {
// 列表渲染接口
/**
......@@ -90,7 +102,6 @@
}
})
},
//打开新增弹窗
/**
* @description: 打开新增弹窗
* @param {*} item
......@@ -102,6 +113,7 @@
} else {
this.$popupDialog("新增系统通知", "system/xttz/components/addDialog", { "isButtonFlag": true }, "50%")
}
this.$store.dispatch("user/refreshPage", false);
},
//删除
delNotice (item) {
......