Skip to content

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

ok

parent a50da6bd
Hide whitespace changes
Inline Side-by-side
Showing with 5680 additions and 1017 deletions
components/quill/index.vue
View file @ eda0e1b7
<template> <template>
<div class="i-quill" :class="classes"> <div class="i-quill" :class="classes" >
<div ref="editor" :style="styles"></div> <div ref="editor" :style="styles"></div>
</div> </div>
</template> </template>
<script> <script>
import Quill from 'quill'; import Quill from "quill";
import 'quill/dist/quill.core.css'; import "quill/dist/quill.core.css";
import 'quill/dist/quill.snow.css'; import "quill/dist/quill.snow.css";
import 'quill/dist/quill.bubble.css'; import "quill/dist/quill.bubble.css";
// import resizeImage from "quill-image-resize-module"; // 图片缩放组件。
export default { // import { ImageDrop } from "quill-image-drop-module"; // 图片拖动组件。
name: 'i-quill', // Quill.register("modules/imageDrop", ImageDrop);
props: { // Quill.register("modules/resizeImage ", resizeImage);
value: { export default {
type: String, name: "i-quill",
default: '' props: {
}, value: {
border: { type: String,
type: Boolean, default: ""
default: false },
}, border: {
height: { type: Boolean,
type: Number default: false
}, },
minHeight: { height: {
type: Number type: Number
} },
}, minHeight: {
data () { type: Number
return { }
Quill: null, },
currentValue: '', data() {
options: { return {
theme: 'snow', Quill: null,
bounds: document.body, currentValue: "",
debug: 'warn', options: {
modules: { theme: "snow",
toolbar: [ bounds: document.body,
['bold', 'italic', 'underline', 'strike'], debug: "warn",
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], modules: {
[{ 'size': ['small', false, 'large', 'huge'] }], // imageDrop: true,
[{ 'color': [] }, { 'background': [] }], // imageResize: {
['blockquote', 'code-block'], // displayStyles: {
[{ 'list': 'ordered' }, { 'list': 'bullet' }], // backgroundColor: "black",
// [{ 'script': 'sub' }, { 'script': 'super' }], // border: "none",
[{ 'indent': '-1' }, { 'indent': '+1' }], // color: "white"
[{ 'align': [] }], // },
[{ 'direction': 'rtl' }], // modules: ["Resize", "DisplaySize", "Toolbar"]
// [{ 'font': [] }], // },
['clean'], toolbar: [
['link', 'image'] ["bold", "italic", "underline", "strike"],
] [{ header: [1, 2, 3, 4, 5, 6, false] }],
}, [{ size: ["small", false, "large", "huge"] }],
placeholder: '内容...', [{ color: [] }, { background: [] }],
readOnly: false ["blockquote", "code-block"],
} [{ list: "ordered" }, { list: "bullet" }],
} // [{ 'script': 'sub' }, { 'script': 'super' }],
}, [{ indent: "-1" }, { indent: "+1" }],
computed: { [{ align: [] }],
classes () { [{ direction: "rtl" }],
return [ // [{ 'font': [] }],
{ ["clean"],
'i-quill-no-border': !this.border ["link", "image"]
} ]
];
},
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();
}, },
beforeDestroy () { placeholder: "内容...",
// 在组件销毁后销毁实例 readOnly: false
this.Quill = null; }
};
},
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"> watch: {
.i-quill-no-border{ value: {
.ql-toolbar.ql-snow{ handler(val) {
border: none; if (val !== this.currentValue) {
border-bottom: 1px solid #e8eaec; this.currentValue = val;
} if (this.Quill) {
.ql-container.ql-snow{ this.Quill.pasteHTML(this.value);
border: none; }
} }
},
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> </style>
i18n/locale/zh-CN.js
View file @ eda0e1b7
...@@ -1180,7 +1180,7 @@ export default { ...@@ -1180,7 +1180,7 @@ export default {
routingType: '工艺类型', routingType: '工艺类型',
status: '状态', status: '状态',
approvalStatus: '审批状态', approvalStatus: '审批状态',
remark: '备注', remark: '工艺说明',
approvalStatusRemark: '审批备注', approvalStatusRemark: '审批备注',
auditUserId1: '审批人', auditUserId1: '审批人',
auditUserId2: '审批人', auditUserId2: '审批人',
......
package-lock.json
View file @ eda0e1b7
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ eda0e1b7
...@@ -12,19 +12,23 @@ ...@@ -12,19 +12,23 @@
}, },
"dependencies": { "dependencies": {
"@nuxtjs/axios": "^5.3.6", "@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", "awe-dnd": "^0.3.4",
"better-scroll": "^1.12.1", "better-scroll": "^1.12.1",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"dayjs": "^1.8.22", "dayjs": "^1.8.22",
"echarts": "^4.7.0", "echarts": "^4.7.0",
"echarts-liquidfill": "^2.0.5", "echarts-liquidfill": "^2.0.5",
"gojs": "^2.1.10",
"iview-loader": "^1.3.0", "iview-loader": "^1.3.0",
"iview-pro": "file:./iview-pro", "iview-pro": "file:./iview-pro",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"less": "^3.10.3", "less": "^3.10.3",
"less-loader": "^5.0.0", "less-loader": "^5.0.0",
"lodash.chunk": "^4.2.0",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"lodash.chunk": "^4.2.0",
"lowdb": "^1.0.0", "lowdb": "^1.0.0",
"marked": "^0.3.9", "marked": "^0.3.9",
"mockjs": "^1.0.1-beta3", "mockjs": "^1.0.1-beta3",
...@@ -32,12 +36,9 @@ ...@@ -32,12 +36,9 @@
"nuxt": "^2.10.2", "nuxt": "^2.10.2",
"oidc-client": "^1.9.1", "oidc-client": "^1.9.1",
"qs": "^6.6.0", "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", "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", "ua-parser-js": "^0.7.18",
"view-design": "^4.1.3", "view-design": "^4.1.3",
"vue-echarts": "^4.0.3", "vue-echarts": "^4.0.3",
...@@ -47,7 +48,8 @@ ...@@ -47,7 +48,8 @@
"vue-ueditor-wrap": "^2.4.1", "vue-ueditor-wrap": "^2.4.1",
"vue2-editor": "^2.10.2", "vue2-editor": "^2.10.2",
"vuedraggable": "^2.23.0", "vuedraggable": "^2.23.0",
"vuex-along": "^1.2.10" "vuex-along": "^1.2.10",
"xlsx": "^0.15.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/plugin-transform-runtime": "^7.2.0", "@babel/plugin-transform-runtime": "^7.2.0",
......
pages/bug/component/add.vue
View file @ eda0e1b7
...@@ -33,7 +33,6 @@ ...@@ -33,7 +33,6 @@
<i-quill <i-quill
v-model="bugForm.content" v-model="bugForm.content"
:height="600" :height="600"
v-paste="handleImg"
/> />
</FormItem> </FormItem>
</Row> </Row>
......
pages/technology/add.vue
View file @ eda0e1b7
...@@ -11,57 +11,57 @@ ...@@ -11,57 +11,57 @@
<Input v-model="entity.unicode"></Input> <Input v-model="entity.unicode"></Input>
</FormItem> </FormItem>
</Col>--> </Col>-->
<Col :span="12"> <Col :span="8">
<FormItem :label="l('name')" prop="name"> <FormItem :label="l('name')" prop="name">
<Input v-model="entity.name"></Input> <Input v-model="entity.name"></Input>
</FormItem> </FormItem>
</Col> </Col>
<Col :span="12"> <Col :span="8">
<FormItem :label="l('code')" prop="code"> <FormItem :label="l('code')" prop="code">
<Input v-model="entity.code"></Input> <Input v-model="entity.code"></Input>
</FormItem> </FormItem>
</Col> </Col>
<Col :span="12"> <Col :span="8">
<FormItem :label="l('routingType')" prop="routingType"> <FormItem :label="l('routingType')" prop="routingType">
<Dictionary code="Process.Routing.routingType" v-model="entity.routingType"></Dictionary> <Dictionary code="Process.Routing.routingType" v-model="entity.routingType"></Dictionary>
</FormItem> </FormItem>
</Col> </Col>
<Col :span="12"> <Col :span="8">
<FormItem :label="l('productId')" prop="productId"> <FormItem :label="l('productId')" prop="productId">
<ProductSelect v-model="entity.productId"></ProductSelect> <ProductSelect v-model="entity.productId"></ProductSelect>
</FormItem> </FormItem>
</Col> </Col>
<Col :span="12"> <Col :span="8">
<FormItem :label="l('version')" prop="version"> <FormItem :label="l('version')" prop="version">
<Input v-model="entity.version"></Input> <Input v-model="entity.version"></Input>
</FormItem> </FormItem>
</Col> </Col>
<Col :span="12"> <Col :span="8">
<FormItem :label="l('author')" prop="author"> <FormItem :label="l('author')" prop="author">
<Input v-model="entity.author"></Input> <Input v-model="entity.author"></Input>
</FormItem> </FormItem>
</Col> </Col>
<Col :span="12"> <Col :span="8">
<FormItem :label="l('departmentId')" prop="departmentId"> <FormItem :label="l('departmentId')" prop="departmentId">
<departmentSelect v-model="entity.departmentId"></departmentSelect> <departmentSelect v-model="entity.departmentId"></departmentSelect>
</FormItem> </FormItem>
</Col> <Col :span="12"> </Col> <Col :span="5">
<FormItem :label="l('isMain')" prop="isMain"> <FormItem :label="l('isMain')" prop="isMain">
<Dictionary code="Process.state" v-model="entity.isMain" type="radio"></Dictionary> <Dictionary code="Process.state" v-model="entity.isMain" type="radio"></Dictionary>
</FormItem> </FormItem>
</Col> </Col>
<Col :span="12"> <Col :span="6">
<FormItem :label="l('isSendPpm')" prop="isSendPpm"> <FormItem :label="l('isSendPpm')" prop="isSendPpm">
<Dictionary code="Process.Status" v-model="entity.isSendPpm" type="radio"></Dictionary> <Dictionary code="Process.Status" v-model="entity.isSendPpm" type="radio"></Dictionary>
</FormItem> </FormItem>
</Col> </Col>
<Col :span="12"> <Col :span="5">
<FormItem :label="l('isEffect')" prop="isEffect"> <FormItem :label="l('isEffect')" prop="isEffect">
<Dictionary code="Process.Status" v-model="entity.isEffect" type="radio"></Dictionary> <Dictionary code="Process.Status" v-model="entity.isEffect" type="radio"></Dictionary>
</FormItem> </FormItem>
</Col> </Col>
<!-- <!--
<Col :span="12"> <Col :span="12">
<FormItem :label="l('upId')" prop="upId"> <FormItem :label="l('upId')" prop="upId">
<InputNumber v-model="entity.upId"></InputNumber> <InputNumber v-model="entity.upId"></InputNumber>
...@@ -120,12 +120,24 @@ ...@@ -120,12 +120,24 @@
<InputNumber v-model="entity.versionid"></InputNumber> <InputNumber v-model="entity.versionid"></InputNumber>
</FormItem> </FormItem>
</Col>--> </Col>-->
<Col :span="24"> <Col :span="24">
<FormItem :label="l('remark')" prop="remark"> <FormItem :label="l('remark')" prop="remark">
<Input v-model="entity.remark" type="textarea" :rows="5"></Input> <i-quill
v-model="entity.remark"
:height="300"
border
v-paste="handleImg"
/>
</FormItem>
</Col>
</Row>
<Col :span="24">
<FormItem label="多媒体附件" prop="files">
<files />
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
<FormItem> <FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button> <Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
...@@ -135,8 +147,13 @@ ...@@ -135,8 +147,13 @@
</template> </template>
<script> <script>
import Api from "./api"; import Api from "./api";
import iQuill from '@/components/quill'
export default { export default {
name: "Add", name: "Add",
components: {
iQuill
// VueUeditorWrap
},
data() { data() {
return { return {
disabled: false, disabled: false,
...@@ -206,6 +223,27 @@ export default { ...@@ -206,6 +223,27 @@ export default {
}, },
handleClose() { handleClose() {
this.$emit("on-close"); 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) { load(v) {
Api.get({ id: v }).then(r => { 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