Skip to content

M
mes-ui
Commit eda0e1b7 authored by 周远喜's avatar 周远喜
Browse files
Options

ok

parent a50da6bd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 5680 additions and 1017 deletions
components/quill/index.vue
View file @ eda0e1b7
<template>
<div class="i-quill" :class="classes">
<div ref="editor" :style="styles"></div>
</div>
<div class="i-quill" :class="classes" >
<div ref="editor" :style="styles"></div>
</div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
name: 'i-quill',
props: {
value: {
type: String,
default: ''
},
border: {
type: Boolean,
default: false
},
height: {
type: Number
},
minHeight: {
type: Number
}
},
data () {
return {
Quill: null,
currentValue: '',
options: {
theme: 'snow',
bounds: document.body,
debug: 'warn',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'color': [] }, { 'background': [] }],
['blockquote', 'code-block'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
// [{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'align': [] }],
[{ 'direction': 'rtl' }],
// [{ 'font': [] }],
['clean'],
['link', 'image']
]
},
placeholder: '内容...',
readOnly: false
}
}
},
computed: {
classes () {
return [
{
'i-quill-no-border': !this.border
}
];
},
styles () {
let style = {};
if (this.minHeight) {
style.minHeight = `${this.minHeight}px`;
}
if (this.height) {
style.height = `${this.height}px`;
}
return style;
}
},
watch: {
value: {
handler (val) {
if (val !== this.currentValue) {
this.currentValue = val;
if (this.Quill) {
this.Quill.pasteHTML(this.value);
}
}
},
immediate: true
}
},
methods: {
init () {
const editor = this.$refs.editor;
// 初始化编辑器
this.Quill = new Quill(editor, this.options);
// 默认值
this.Quill.pasteHTML(this.currentValue);
// 绑定事件
this.Quill.on('text-change', (delta, oldDelta, source) => {
const html = this.$refs.editor.children[0].innerHTML;
const text = this.Quill.getText();
const quill = this.Quill;
// 更新内部的值
this.currentValue = html;
// 发出事件 v-model
this.$emit('input', html);
// 发出事件
this.$emit('on-change', { html, text, quill });
});
// 将一些 quill 自带的事件传递出去
this.Quill.on('text-change', (delta, oldDelta, source) => {
this.$emit('on-text-change', delta, oldDelta, source);
});
this.Quill.on('selection-change', (range, oldRange, source) => {
this.$emit('on-selection-change', range, oldRange, source);
});
this.Quill.on('editor-change', (eventName, ...args) => {
this.$emit('on-editor-change', eventName, ...args);
});
}
},
mounted () {
this.init();
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// import resizeImage from "quill-image-resize-module"; // 图片缩放组件。
// import { ImageDrop } from "quill-image-drop-module"; // 图片拖动组件。
// Quill.register("modules/imageDrop", ImageDrop);
// Quill.register("modules/resizeImage ", resizeImage);
export default {
name: "i-quill",
props: {
value: {
type: String,
default: ""
},
border: {
type: Boolean,
default: false
},
height: {
type: Number
},
minHeight: {
type: Number
}
},
data() {
return {
Quill: null,
currentValue: "",
options: {
theme: "snow",
bounds: document.body,
debug: "warn",
modules: {
// imageDrop: true,
// imageResize: {
// displayStyles: {
// backgroundColor: "black",
// border: "none",
// color: "white"
// },
// modules: ["Resize", "DisplaySize", "Toolbar"]
// },
toolbar: [
["bold", "italic", "underline", "strike"],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ size: ["small", false, "large", "huge"] }],
[{ color: [] }, { background: [] }],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }],
// [{ 'script': 'sub' }, { 'script': 'super' }],
[{ indent: "-1" }, { indent: "+1" }],
[{ align: [] }],
[{ direction: "rtl" }],
// [{ 'font': [] }],
["clean"],
["link", "image"]
]
},
beforeDestroy () {
// 在组件销毁后销毁实例
this.Quill = null;
placeholder: "内容...",
readOnly: false
}
};
},
computed: {
classes() {
return [
{
"i-quill-no-border": !this.border
}
];
},
styles() {
let style = {};
if (this.minHeight) {
style.minHeight = `${this.minHeight}px`;
}
if (this.height) {
style.height = `${this.height}px`;
}
return style;
}
</script>
<style lang="less">
.i-quill-no-border{
.ql-toolbar.ql-snow{
border: none;
border-bottom: 1px solid #e8eaec;
}
.ql-container.ql-snow{
border: none;
},
watch: {
value: {
handler(val) {
if (val !== this.currentValue) {
this.currentValue = val;
if (this.Quill) {
this.Quill.pasteHTML(this.value);
}
}
},
immediate: true
}
},
methods: {
init() {
const editor = this.$refs.editor;
// 初始化编辑器
this.Quill = new Quill(editor, this.options);
// 默认值
this.Quill.pasteHTML(this.currentValue);
// 绑定事件
this.Quill.on("text-change", (delta, oldDelta, source) => {
const html = this.$refs.editor.children[0].innerHTML;
const text = this.Quill.getText();
const quill = this.Quill;
// 更新内部的值
this.currentValue = html;
// 发出事件 v-model
this.$emit("input", html);
// 发出事件
this.$emit("on-change", { html, text, quill });
});
// 将一些 quill 自带的事件传递出去
this.Quill.on("text-change", (delta, oldDelta, source) => {
this.$emit("on-text-change", delta, oldDelta, source);
});
this.Quill.on("selection-change", (range, oldRange, source) => {
this.$emit("on-selection-change", range, oldRange, source);
});
this.Quill.on("editor-change", (eventName, ...args) => {
this.$emit("on-editor-change", eventName, ...args);
});
}
},
handleImg(e) {
console.warn(e);
let file = null;
if (
e.clipboardData &&
e.clipboardData.items[0] &&
e.clipboardData.items[0].type &&
e.clipboardData.items[0].type.indexOf("image") > -1
) {
//这里就是判断是否有粘贴进来的文件且文件为图片格式
file = e.clipboardData.items[0].getAsFile();
let reader = new FileReader();
reader.readAsDataURL(file);
setTimeout(() => {
var img = '<img src="' + reader.result + '" alt=""/>';
this.currentValue += img;
}, 1000);
// new R
}
},
mounted() {
this.init();
},
beforeDestroy() {
// 在组件销毁后销毁实例
this.Quill = null;
}
};
</script>
<style lang="less">
.i-quill-no-border {
.ql-toolbar.ql-snow {
border: none;
border-bottom: 1px solid #e8eaec;
}
.ql-container.ql-snow {
border: none;
}
}
</style>
i18n/locale/zh-CN.js
View file @ eda0e1b7
......@@ -1180,7 +1180,7 @@ export default {
routingType: '工艺类型',
status: '状态',
approvalStatus: '审批状态',
remark: '备注',
remark: '工艺说明',
approvalStatusRemark: '审批备注',
auditUserId1: '审批人',
auditUserId2: '审批人',
......
package-lock.json
View file @ eda0e1b7
This diff is collapsed.
package.json
View file @ eda0e1b7
......@@ -12,19 +12,23 @@
},
"dependencies": {
"@nuxtjs/axios": "^5.3.6",
"@svgdotjs/svg.draggable.js": "^3.0.2",
"@svgdotjs/svg.js": "^3.0.16",
"area-data": "^5.0.6",
"awe-dnd": "^0.3.4",
"better-scroll": "^1.12.1",
"cross-env": "^5.2.0",
"dayjs": "^1.8.22",
"echarts": "^4.7.0",
"echarts-liquidfill": "^2.0.5",
"gojs": "^2.1.10",
"iview-loader": "^1.3.0",
"iview-pro": "file:./iview-pro",
"js-cookie": "^2.2.1",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"lodash.chunk": "^4.2.0",
"lodash": "^4.17.15",
"lodash.chunk": "^4.2.0",
"lowdb": "^1.0.0",
"marked": "^0.3.9",
"mockjs": "^1.0.1-beta3",
......@@ -32,12 +36,9 @@
"nuxt": "^2.10.2",
"oidc-client": "^1.9.1",
"qs": "^6.6.0",
"gojs": "^2.1.10",
"quill-image-drop-module": "^1.0.3",
"quill-image-resize-module": "^3.0.0",
"screenfull": "^5.0.2",
"area-data": "^5.0.6",
"xlsx": "^0.15.1",
"@svgdotjs/svg.draggable.js": "^3.0.2",
"@svgdotjs/svg.js": "^3.0.16",
"ua-parser-js": "^0.7.18",
"view-design": "^4.1.3",
"vue-echarts": "^4.0.3",
......@@ -47,7 +48,8 @@
"vue-ueditor-wrap": "^2.4.1",
"vue2-editor": "^2.10.2",
"vuedraggable": "^2.23.0",
"vuex-along": "^1.2.10"
"vuex-along": "^1.2.10",
"xlsx": "^0.15.1"
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.2.0",
......
pages/bug/component/add.vue
View file @ eda0e1b7
......@@ -33,7 +33,6 @@
<i-quill
v-model="bugForm.content"
:height="600"
v-paste="handleImg"
/>
</FormItem>
</Row>
......
pages/technology/add.vue
View file @ eda0e1b7
......@@ -11,57 +11,57 @@
<Input v-model="entity.unicode"></Input>
</FormItem>
</Col>-->
<Col :span="12">
<Col :span="8">
<FormItem :label="l('name')" prop="name">
<Input v-model="entity.name"></Input>
</FormItem>
</Col>
<Col :span="12">
<Col :span="8">
<FormItem :label="l('code')" prop="code">
<Input v-model="entity.code"></Input>
</FormItem>
</Col>
<Col :span="12">
<Col :span="8">
<FormItem :label="l('routingType')" prop="routingType">
<Dictionary code="Process.Routing.routingType" v-model="entity.routingType"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<Col :span="8">
<FormItem :label="l('productId')" prop="productId">
<ProductSelect v-model="entity.productId"></ProductSelect>
</FormItem>
</Col>
<Col :span="12">
<Col :span="8">
<FormItem :label="l('version')" prop="version">
<Input v-model="entity.version"></Input>
</FormItem>
</Col>
<Col :span="12">
<Col :span="8">
<FormItem :label="l('author')" prop="author">
<Input v-model="entity.author"></Input>
</FormItem>
</Col>
<Col :span="12">
<Col :span="8">
<FormItem :label="l('departmentId')" prop="departmentId">
<departmentSelect v-model="entity.departmentId"></departmentSelect>
</FormItem>
</Col> <Col :span="12">
</Col> <Col :span="5">
<FormItem :label="l('isMain')" prop="isMain">
<Dictionary code="Process.state" v-model="entity.isMain" type="radio"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<Col :span="6">
<FormItem :label="l('isSendPpm')" prop="isSendPpm">
<Dictionary code="Process.Status" v-model="entity.isSendPpm" type="radio"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<Col :span="5">
<FormItem :label="l('isEffect')" prop="isEffect">
<Dictionary code="Process.Status" v-model="entity.isEffect" type="radio"></Dictionary>
</FormItem>
</Col>
<!--
<!--
<Col :span="12">
<FormItem :label="l('upId')" prop="upId">
<InputNumber v-model="entity.upId"></InputNumber>
......@@ -120,12 +120,24 @@
<InputNumber v-model="entity.versionid"></InputNumber>
</FormItem>
</Col>-->
<Col :span="24">
<FormItem :label="l('remark')" prop="remark">
<Input v-model="entity.remark" type="textarea" :rows="5"></Input>
<FormItem :label="l('remark')" prop="remark">
<i-quill
v-model="entity.remark"
:height="300"
border
v-paste="handleImg"
/>
</FormItem>
</Col>
</Row>
<Col :span="24">
<FormItem label="多媒体附件" prop="files">
<files />
</FormItem>
</Col>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
......@@ -135,8 +147,13 @@
</template>
<script>
import Api from "./api";
import iQuill from '@/components/quill'
export default {
name: "Add",
components: {
iQuill
// VueUeditorWrap
},
data() {
return {
disabled: false,
......@@ -206,6 +223,27 @@ export default {
},
handleClose() {
this.$emit("on-close");
},
handleImg(e) {
console.warn(e)
let file = null
if (
e.clipboardData &&
e.clipboardData.items[0] &&
e.clipboardData.items[0].type &&
e.clipboardData.items[0].type.indexOf('image') > -1
) {
//这里就是判断是否有粘贴进来的文件且文件为图片格式
file = e.clipboardData.items[0].getAsFile()
let reader = new FileReader()
reader.readAsDataURL(file)
setTimeout(() => {
var img = '<img src="' + reader.result + '" alt=""/>'
this.entity.remark += img
}, 1000)
// new R
}
},
load(v) {
Api.get({ id: v }).then(r => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment