4521af90 by 任超
2 parents 71050940 0edf2a93
<template>
<dialogBox title="新增系统通知" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="60%"
@closeDialog="closeDialog" v-model="value">
<dialogBox
title="新增系统通知"
@submitForm="submitForm"
saveButton="保存"
:isFullscreen="false"
width="60%"
@closeDialog="closeDialog"
v-model="value"
>
<el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
<el-row>
<el-col :span="12">
......@@ -21,14 +28,14 @@
<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>
></quill-editor>
<!-- <el-input v-model="ruleForm.noticeContent" type="textarea" :rows="16"></el-input> -->
</el-form-item>
</el-col>
......@@ -36,8 +43,14 @@
<el-row>
<el-col :span="8">
<el-form-item label="附件:" prop="noticeFileUrl">
<el-upload action="" multiple :auto-upload="false" :limit="1"
:on-change="handleChange" :before-upload="beforeUpload">
<el-upload
action
multiple
:auto-upload="false"
:limit="1"
:on-change="handleChange"
:before-upload="beforeUpload"
>
<el-button icon="el-icon-upload" type="primary">上传</el-button>
<div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
</el-upload>
......@@ -45,10 +58,16 @@
</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
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>
......@@ -56,35 +75,35 @@
</template>
<script>
import { addSysNotice } from "@/api/notice.js"
import { upload } from "@/api/system.js"
import { addSysNotice } from "@/api/notice.js";
import { upload } from "@/api/system.js";
import { quillEditor } from "vue-quill-editor";
export default {
props: {
value: { type: Boolean, default: false },
value: { type: Boolean, default: false }
},
components: { quillEditor },
data () {
data() {
return {
ruleForm: {
noticeTitle: '',
noticeContent: '',
noticeFileUrl: '',
noticeSource: '',
noticeType: '1'
noticeTitle: "",
noticeContent: "",
noticeFileUrl: "",
noticeSource: "",
noticeType: "1"
},
rules: {
noticeTitle: [
{ required: true, message: '请输入通知标题', trigger: 'blur' }
{ required: true, message: "请输入通知标题", trigger: "blur" }
],
noticeContent: [
{ required: true, message: '请输入通知内容', trigger: 'blur' }
{ required: true, message: "请输入通知内容", trigger: "blur" }
],
noticeSource: [
{ required: true, message: '请输入通知来源', trigger: 'blur' }
{ required: true, message: "请输入通知来源", trigger: "blur" }
]
},
// 富文本编辑器配置
// 富文本编辑器配置
editorOption: {
theme: "snow", // or 'bubble'
modules: {
......@@ -97,66 +116,76 @@ export default {
[{ script: "sub" }, { script: "super" }], // 上标/下标
[{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ direction: "rtl" }], // 文本方向
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
// [{ font: ['songti'] }], // 字体种类
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["image", "video"], // 链接、图片、视频
["image", "video"] // 链接、图片、视频
],
handlers: {
image: function(value) {
if (value) {
// 用upload的点击事件代替文本编辑器的图片上传事件
document.querySelector('.richUpload input').click();
} else {
this.quill.format('image', false);
}
handlers: {
image: function(value) {
if (value) {
// 用upload的点击事件代替文本编辑器的图片上传事件
document.querySelector(".richUpload input").click();
} else {
this.quill.format("image", false);
}
}
}
}
},
placeholder: "请输入正文",
},
}
placeholder: "请输入正文"
}
};
},
mounted() {
// 自定义粘贴图片功能
let quill = this.$refs.myQuillEditor.quill;
quill.root.addEventListener("paste",evt => {
console.log(1111);
if (evt.clipboardData && evt.clipboardData.files &&evt.clipboardData.files.length) {
console.log(2222);
evt.preventDefault();
[].forEach.call(evt.clipboardData.files, file => {
console.log(33333);
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
return;
}
console.log(4444);
this.RichTexthandleChange(File);
});
}
},
false
);
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);
});
}
},
false
);
});
}
}
},
mounted() {},
methods: {
submitForm () {
submitForm() {
let that = this;
that.$refs.ruleForm.validate(valid => {
if (valid) {
addSysNotice(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success('保存成功')
this.$message.success("保存成功");
this.$emit("input", false);
this.resetRuleForm();
this.$parent.queryClick();
} else {
this.$message.error(res.message)
this.$message.error(res.message);
}
})
});
} else {
// console.log('error submit!!');
return false;
......@@ -164,31 +193,38 @@ export default {
});
},
//关闭窗口
closeDialog () {
closeDialog() {
this.$emit("input", false);
this.resetRuleForm();
},
//
resetRuleForm () {
this.$refs['ruleForm'].resetFields();
this.ruleForm.noticeType = '1'
resetRuleForm() {
this.$refs["ruleForm"].resetFields();
this.ruleForm.noticeType = "1";
},
beforeUpload (file) {
return true
beforeUpload(file) {
return true;
},
//附件上传事件
async handleChange (file) {
async handleChange(file) {
var formdata = new FormData();
formdata.append("file", file.raw);
upload(formdata).then(res => {
this.ruleForm.noticeFileUrl = res.message
})
this.ruleForm.noticeFileUrl = res.message;
});
},
//富文本图片上传事件
async RichTexthandleChange (file) {
RichTexthandleChange(file) {
this.uploadPicture(file.raw)
},
//图片粘贴事件
clipboardPictureChange(file) {
this.uploadPicture(file)
},
uploadPicture(file){
let that = this;
var formdata = new FormData();
formdata.append("file", file.raw);
formdata.append("file", file);
upload(formdata).then(res => {
//editor对象
const quill = that.$refs.myQuillEditor.quill;
......@@ -196,11 +232,11 @@ export default {
// 获取光标所在位置
const length = quill.selection.savedRange.index;
// 插入图片
quill.insertEmbed(length, 'image', res.message);
quill.insertEmbed(length, "image", res.message);
// 调整光标到最后
quill.setSelection(length + 1);
//that.quillUpdateImg = false;
})
});
},
onSubmit() {
//console.log("submit!");
......@@ -221,9 +257,9 @@ export default {
onEditorChange({ quill, html, text }) {
//console.log("editor change!", quill, html, text);
//this.content = html;
},
}
}
}
};
</script>
<style scoped lang="scss">
// .ql-editor{
......@@ -232,5 +268,5 @@ export default {
/deep/.ql-editor {
padding: 0px;
height: 500px;
}
}
</style>
\ No newline at end of file
......
......@@ -38,6 +38,9 @@ export function getForm(tabName, djywbm) {
case "diyaqSlxx":
form = require("@/views/ywbl/diyaq/slxx.vue");
break;
case "diyaqSlxx200":
form = require("@/views/ywbl/diyaq/slxx200.vue");
break;
case "clxx":
form = require("@/views/workflow/components/clxx.vue");
break;
......
......@@ -166,6 +166,7 @@ export default {
});
},
handleSelectionChange(val) {
debugger;
val.forEach((item, index) => {
item.bsmSsql = item.bsmQlxx;
item.ybdcqzsh = item.bdcqzh;
......
......@@ -157,6 +157,7 @@ export default {
message: "发起申请成功",
type: "success",
});
debugger;
if (!this.isJump) {
this.jump(res.result, this.djywbm);
} else {
......@@ -168,6 +169,7 @@ export default {
});
},
handleSelectionChange(val) {
debugger;
val.forEach((item, index) => {
item.bsmSsql = item.bsmQlxx;
item.ybdcqzsh = item.bdcqzh;
......