813788fb by renchao@pashanhoo.com

style:系统通知

1 parent 6f68f042
<template>
<dialogBox :title="title" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
@closeDialog="closeDialog" v-model="value" :isButton="isButtonFlag">
<el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
<el-row>
<el-col :span="24">
<el-form-item label="通知标题:" prop="noticeTitle">
<el-input v-model="ruleForm.noticeTitle" class="width100"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="通知来源:" prop="noticeSource">
<el-input v-model="ruleForm.noticeSource" class="width100"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="通知内容:" prop="noticeContent">
<quill-editor v-model="ruleForm.noticeContent" class="editor ql-editor" ref="myQuillEditor"
:options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)" @ready="onEditorReady($event)"></quill-editor>
<el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
<el-row>
<el-col :span="24">
<el-form-item label="通知标题:" prop="noticeTitle">
<el-input v-model="ruleForm.noticeTitle" class="width100"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="通知来源:" prop="noticeSource">
<el-input v-model="ruleForm.noticeSource" class="width100"></el-input>
</el-form-item>
</el-row>
<!-- <el-row>
</el-col>
</el-row>
<el-row>
<el-form-item label="通知内容:" prop="noticeContent">
<quill-editor v-model="ruleForm.noticeContent" class="editor ql-editor" ref="myQuillEditor"
:options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)" @ready="onEditorReady($event)"></quill-editor>
</el-form-item>
</el-row>
<!-- <el-row>
<el-col :span="8">
<el-form-item label="附件:" prop="noticeFileUrl">
<el-upload action multiple :auto-upload="false" :limit="1" :on-change="handleChange"
......@@ -34,16 +32,19 @@
</el-form-item>
</el-col>
</el-row> -->
<!-- 隐藏上传按钮 用于代替触发富文本上传事件 -->
<div v-show="false">
<el-upload action multiple :auto-upload="false" :on-change="RichTexthandleChange" :before-upload="beforeUpload"
class="richUpload">
<el-button icon="el-icon-upload" type="primary">上传</el-button>
<div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
</el-upload>
</div>
</el-form>
</dialogBox>
<!-- 隐藏上传按钮 用于代替触发富文本上传事件 -->
<div v-show="false">
<el-upload action multiple :auto-upload="false" :on-change="RichTexthandleChange" :before-upload="beforeUpload"
class="richUpload">
<el-button icon="el-icon-upload" type="primary">上传</el-button>
<div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
</el-upload>
</div>
<el-form-item v-if="formData.isButtonFlag" class="text-center">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="submitForm" plain>确定</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { addSysNotice, updateSysNotice } from "@/api/system.js";
......@@ -51,9 +52,10 @@ import { upload } from "@/api/system.js";
import { quillEditor } from "vue-quill-editor";
export default {
props: {
value: { type: Boolean, default: false },
isButtonFlag: { type: Boolean, default: true },
title: { type: String, default: '新增系统通知' }
formData: {
type: Object,
default: () => { }
}
},
components: { quillEditor },
data () {
......@@ -113,38 +115,35 @@ export default {
}
};
},
watch: {
value (val) {
if (val) {
let that = this
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);
});
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;
}
},
false
);
});
}
that.clipboardPictureChange(file);
});
}
},
false
)
})
if (this.formData) {
this.getDetailInfo(this.formData)
}
},
mounted () { },
methods: {
submitForm () {
let that = this;
......@@ -156,14 +155,13 @@ export default {
that.addNotice();
}
} else {
// console.log('error submit!!');
return false;
}
});
},
//关闭窗口
closeDialog () {
this.$emit("input", false);
this.$popupCacel()
this.resetRuleForm();
},
//新增通知
......@@ -171,7 +169,7 @@ export default {
addSysNotice(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success("保存成功");
this.$emit("input", false);
this.$popupCacel()
this.resetRuleForm();
this.$parent.queryClick();
} else {
......@@ -184,7 +182,7 @@ export default {
updateSysNotice(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success("编辑成功");
this.$emit("input", false);
this.$popupCacel()
this.resetRuleForm();
this.$parent.queryClick();
} else {
......@@ -201,7 +199,6 @@ export default {
noticeSource: "",
noticeType: "1"
}
this.isButtonFlag = true;
},
beforeUpload (file) {
return true;
......@@ -239,7 +236,6 @@ export default {
quill.insertEmbed(length, "image", res.message);
// 调整光标到最后
quill.setSelection(length + 1);
//that.quillUpdateImg = false;
});
},
onSubmit () {
......@@ -267,6 +263,7 @@ export default {
</script>
<style scoped lang="scss">
@import "~@/styles/dialogBoxheader.scss";
.quill-editor {
padding: 0;
}
......
......@@ -19,7 +19,7 @@
</el-col>
<el-col :span="14" class="btnColRight">
<el-form-item>
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button type="primary" @click="openDialog()">新增</el-button>
</el-form-item>
</el-col>
......@@ -86,16 +86,10 @@ export default {
//打开新增弹窗
openDialog (item) {
if (item) {
this.$nextTick(() => {
this.isButtonFlag = false;
this.$refs.addDialog.getDetailInfo(item);
this.dialogTitle = '系统通知详情'
})
this.$popupDialog("系统通知详情", "system/xttz/components/addDialog", { ...item, "isButtonFlag": false }, "50%")
} else {
this.isButtonFlag = true;
this.dialogTitle = '新增系统通知'
this.$popupDialog("新增系统通知", "system/xttz/components/addDialog", { "isButtonFlag": true }, "50%")
}
this.isDialog = true;
},
//删除
delNotice (item) {
......