bri-components 1.5.14 → 1.5.15

package/src/components/controls/base/DshEditor.vue

@@ -1,274 +1,274 @@
-<template>
-    <div class="DshEditor">
-        <!-- 编辑 -->
-        <template v-if="canEdit">
-            <div
-                :class="{
-                    ...commonClass,
-                    'DshEditor-edit': true
-                }"
-                v-show="showStatus === 'show'"
-                v-html="showVal"
-                @click="handleEdit"
-            ></div>
-
-            <div
-                v-if="!disabled"
-                v-show="showStatus === 'edit'"
-                class="DshEditor-wrap"
-            >
-                <div
-                    ref="toolbar"
-                    class="DshEditor-wrap-toolbar"
-                ></div>
-
-                <div
-                    ref="editor"
-                    class="DshEditor-wrap-text"
-                ></div>
-
-                <dsh-buttons
-                    class="DshEditor-wrap-btn"
-                    :list="$getOperationList(['canSave'])"
-                    @click="$dispatchEvent($event)"
-                ></dsh-buttons>
-            </div>
-        </template>
-
-        <!-- 查看 -->
-        <template v-else>
-            <!-- 单元格里 的查看 -->
-            <div
-                v-if="isUnitShow"
-                :class="{
-                    ...commonClass,
-                    'DshEditor-unit': !$isEmptyData(curVal)
-                }"
-            >
-                {{ $isEmptyData(curVal) ? emptyShowVal : "富文本" }}
-            </div>
-
-            <!-- 查看页里 的查看 -->
-            <div
-                v-else
-                :class="{
-                    ...commonClass,
-                    'DshEditor-show': true,
-                    'DshEditor-show-nodata': $isEmptyData(curVal)
-                }"
-                v-html="showVal"
-            ></div>
-        </template>
-    </div>
-</template>
-
-<script>
-    import controlMixin from "../mixins/controlMixin.js";
-    import uploadMixin from "./BriUpload/uploadMixin.js";
-    import E from "wangeditor";
-
-    export default {
-        name: "DshEditor",
-        mixins: [
-            controlMixin,
-            uploadMixin
-        ],
-        props: {},
-        data () {
-            return {
-                editor: null,
-                showStatus: "show",
-                operationMap: {
-                    canSave: {
-                        name: "完成",
-                        type: "canSave",
-                        btnType: "primaryLine",
-                        size: "default",
-                        event: "clickSave"
-                    }
-                }
-            };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj
-                };
-            }
-        },
-        created () {},
-        mounted () {
-            !this.disabled && this.initEditor();
-        },
-        methods: {
-            initEditor () {
-                let that = this;
-                let editor = new E(this.$refs.toolbar, this.$refs.editor);
-                editor.config.uploadImgShowBase64 = false; // base 64 存储图片
-                let url = this.$getRequests(this.computedUrlModule);
-                editor.config.uploadImgServer = `${location.origin}${config.apiUrl}${url}`;// 配置服务器端地址(自己更换为自己项目的服务器)
-                editor.config.uploadImgHeaders = this.propsObj._headers || { authtoken: sessionStorage.getItem("authtoken") }; // 自定义 header
-                editor.config.uploadFileName = "file_stream"; // 后端接受上传文件的参数名
-                editor.config.uploadImgMaxSize = 20 * 1024 * 1024; // 将图片大小限制为 20M
-                editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片
-                editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
-                // 配置菜单
-                editor.config.menus = [
-                    "head", // 标题
-                    "bold", // 粗体
-                    "fontSize", // 字号
-                    "fontName", // 字体
-                    "italic", // 斜体
-                    "underline", // 下划线
-                    "strikeThrough", // 删除线
-                    "foreColor", // 文字颜色
-                    "backColor", // 背景颜色
-                    "link", // 插入链接
-                    "list", // 列表
-                    "table", // 表格
-                    "justify", // 对齐方式
-                    "quote", // 引用
-                    "image", // 插入图片
-                    "undo", // 撤销
-                    "redo" // 重复
-                ];
-                editor.config.zIndex = 500;
-                editor.config.uploadImgHooks = {
-                    before: (xhr, editor, files) => {
-                        editor.config.files = files;
-                    },
-                    customInsert: (insertImg, result, editor) => {
-                        const ossType = result.data && result.data.ossType || "ali-oss";
-                        editor.config.files.forEach(fileItem => {
-                            if (ossType === "ali-oss") {
-                                that.multipartUpload(fileItem, result.data, res => {
-                                    insertImg(res.data.url);
-                                });
-                            } else if (ossType === "local") {
-                                that.localUpload(fileItem, result.data, res => {
-                                    insertImg(res.data.url);
-                                });
-                            } else {
-                                console.log(`请开发这种类型‘${ossType}’的上传模式`);
-                            }
-                        });
-                    }
-                };
-                editor.config.onchange = (html) => {
-                    if (this.value[this.propsObj._key] !== html) {
-                        this.value[this.propsObj._key] = html;
-                        this.change();
-                    }
-                };
-                // 创建富文本编辑器
-                editor.create();
-
-                if (this.disabled) {
-                    editor.disable();
-                } else {
-                    this.editor = editor;
-                    this.handleEdit();
-                }
-            },
-            handleEdit () {
-                if (!this.disabled) {
-                    this.editor.txt.html(this.value[this.propsObj._key]);
-                    this.showStatus = "edit";
-                }
-            },
-            clickSave () {
-                this.showStatus = "show";
-            },
-            // 插入代码
-            insertHTML (value) {
-                // let tempNode = document.createElement("span");
-                // tempNode.innerHTML = value;
-                // document.body.appendChild(tempNode);
-                // html2canvas(tempNode).then(canvas => {
-                //     this.editor.cmd.do("insertHTML", canvas);
-                //     document.body.removeChild(tempNode);
-                // });
-                this.editor.cmd.do("insertHTML", value);
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .DshEditor {
-        width: 100%;
-
-        #show {
-            white-space: pre-wrap;
-            word-break: break-all;
-
-            p {
-                font-size: 14px !important;
-            }
-
-            li {
-                margin-left: 20px;
-            }
-
-            ul li {
-                list-style: disc;
-            }
-
-            ol li {
-                list-style: auto;
-            }
-        }
-
-        &-edit {
-            #show();
-            height: 100%;
-            min-height: 32px;
-            padding: 4px 7px;
-            border-radius: @borderRadius;
-
-            &.bri-control-nodata {
-                line-height: 24px;
-            }
-        }
-
-        &-wrap {
-            border: 1px solid @themeColor;
-            border-radius: 4px;
-            background: #fff;
-
-            &-toolbar {
-                margin-top: 5px;
-            }
-
-            &-text {
-                min-height: 130px;
-
-                ul li {
-                    list-style: disc;
-                }
-
-                ol li {
-                    list-style: auto;
-                }
-            }
-
-            &-btn {
-                text-align: right;
-                padding: 10px;
-            }
-        }
-
-        &-unit {
-            .bri-unit-show();
-        }
-
-        &-show {
-            #show();
-
-            &-nodata {
-                .bri-control-nodata();
-            }
-        }
-    }
-</style>
+<template>
+    <div class="DshEditor">
+        <!-- 编辑 -->
+        <template v-if="canEdit">
+            <div
+                :class="{
+                    ...commonClass,
+                    'DshEditor-edit': true
+                }"
+                v-show="showStatus === 'show'"
+                v-html="showVal"
+                @click="handleEdit"
+            ></div>
+
+            <div
+                v-if="!disabled"
+                v-show="showStatus === 'edit'"
+                class="DshEditor-wrap"
+            >
+                <div
+                    ref="toolbar"
+                    class="DshEditor-wrap-toolbar"
+                ></div>
+
+                <div
+                    ref="editor"
+                    class="DshEditor-wrap-text"
+                ></div>
+
+                <dsh-buttons
+                    class="DshEditor-wrap-btn"
+                    :list="$getOperationList(['canSave'])"
+                    @click="$dispatchEvent($event)"
+                ></dsh-buttons>
+            </div>
+        </template>
+
+        <!-- 查看 -->
+        <template v-else>
+            <!-- 单元格里 的查看 -->
+            <div
+                v-if="isUnitShow"
+                :class="{
+                    ...commonClass,
+                    'DshEditor-unit': !$isEmptyData(curVal)
+                }"
+            >
+                {{ $isEmptyData(curVal) ? emptyShowVal : "富文本" }}
+            </div>
+
+            <!-- 查看页里 的查看 -->
+            <div
+                v-else
+                :class="{
+                    ...commonClass,
+                    'DshEditor-show': true,
+                    'DshEditor-show-nodata': $isEmptyData(curVal)
+                }"
+                v-html="showVal"
+            ></div>
+        </template>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../mixins/controlMixin.js";
+    import uploadMixin from "./BriUpload/uploadMixin.js";
+    import E from "wangeditor";
+
+    export default {
+        name: "DshEditor",
+        mixins: [
+            controlMixin,
+            uploadMixin
+        ],
+        props: {},
+        data () {
+            return {
+                editor: null,
+                showStatus: "show",
+                operationMap: {
+                    canSave: {
+                        name: "完成",
+                        type: "canSave",
+                        btnType: "primaryLine",
+                        size: "default",
+                        event: "clickSave"
+                    }
+                }
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            }
+        },
+        created () {},
+        mounted () {
+            !this.disabled && this.initEditor();
+        },
+        methods: {
+            initEditor () {
+                let that = this;
+                let editor = new E(this.$refs.toolbar, this.$refs.editor);
+                editor.config.uploadImgShowBase64 = false; // base 64 存储图片
+                let url = this.$getRequests(this.computedUrlModule);
+                editor.config.uploadImgServer = `${location.origin}${config.apiUrl}${url}`;// 配置服务器端地址(自己更换为自己项目的服务器)
+                editor.config.uploadImgHeaders = this.propsObj._headers || { authtoken: sessionStorage.getItem("authtoken") }; // 自定义 header
+                editor.config.uploadFileName = "file_stream"; // 后端接受上传文件的参数名
+                editor.config.uploadImgMaxSize = 20 * 1024 * 1024; // 将图片大小限制为 20M
+                editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片
+                editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
+                // 配置菜单
+                editor.config.menus = [
+                    "head", // 标题
+                    "bold", // 粗体
+                    "fontSize", // 字号
+                    "fontName", // 字体
+                    "italic", // 斜体
+                    "underline", // 下划线
+                    "strikeThrough", // 删除线
+                    "foreColor", // 文字颜色
+                    "backColor", // 背景颜色
+                    "link", // 插入链接
+                    "list", // 列表
+                    "table", // 表格
+                    "justify", // 对齐方式
+                    "quote", // 引用
+                    "image", // 插入图片
+                    "undo", // 撤销
+                    "redo" // 重复
+                ];
+                editor.config.zIndex = 500;
+                editor.config.uploadImgHooks = {
+                    before: (xhr, editor, files) => {
+                        editor.config.files = files;
+                    },
+                    customInsert: (insertImg, result, editor) => {
+                        const ossType = result.data && result.data.ossType || "ali-oss";
+                        editor.config.files.forEach(fileItem => {
+                            if (ossType === "ali-oss") {
+                                that.multipartUpload(fileItem, result.data, res => {
+                                    insertImg(res.data.url);
+                                });
+                            } else if (ossType === "local") {
+                                that.localUpload(fileItem, result.data, res => {
+                                    insertImg(res.data.url);
+                                });
+                            } else {
+                                console.log(`请开发这种类型‘${ossType}’的上传模式`);
+                            }
+                        });
+                    }
+                };
+                editor.config.onchange = (html) => {
+                    if (this.value[this.propsObj._key] !== html) {
+                        this.value[this.propsObj._key] = html;
+                        this.change();
+                    }
+                };
+                // 创建富文本编辑器
+                editor.create();
+
+                if (this.disabled) {
+                    editor.disable();
+                } else {
+                    this.editor = editor;
+                    this.handleEdit();
+                }
+            },
+            handleEdit () {
+                if (!this.disabled) {
+                    this.editor.txt.html(this.value[this.propsObj._key]);
+                    this.showStatus = "edit";
+                }
+            },
+            clickSave () {
+                this.showStatus = "show";
+            },
+            // 插入代码
+            insertHTML (value) {
+                // let tempNode = document.createElement("span");
+                // tempNode.innerHTML = value;
+                // document.body.appendChild(tempNode);
+                // html2canvas(tempNode).then(canvas => {
+                //     this.editor.cmd.do("insertHTML", canvas);
+                //     document.body.removeChild(tempNode);
+                // });
+                this.editor.cmd.do("insertHTML", value);
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshEditor {
+        width: 100%;
+
+        #show {
+            white-space: pre-wrap;
+            word-break: break-all;
+
+            p {
+                font-size: 14px !important;
+            }
+
+            li {
+                margin-left: 20px;
+            }
+
+            ul li {
+                list-style: disc;
+            }
+
+            ol li {
+                list-style: auto;
+            }
+        }
+
+        &-edit {
+            #show();
+            height: 100%;
+            min-height: 32px;
+            padding: 4px 7px;
+            border-radius: @borderRadius;
+
+            &.bri-control-nodata {
+                line-height: 24px;
+            }
+        }
+
+        &-wrap {
+            border: 1px solid @themeColor;
+            border-radius: 4px;
+            background: #fff;
+
+            &-toolbar {
+                margin-top: 5px;
+            }
+
+            &-text {
+                min-height: 130px;
+
+                ul li {
+                    list-style: disc;
+                }
+
+                ol li {
+                    list-style: auto;
+                }
+            }
+
+            &-btn {
+                text-align: right;
+                padding: 10px;
+            }
+        }
+
+        &-unit {
+            .bri-unit-show();
+        }
+
+        &-show {
+            #show();
+
+            &-nodata {
+                .bri-control-nodata();
+            }
+        }
+    }
+</style>