bri-components 1.0.0

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

@@ -0,0 +1,166 @@
+<template>
+    <div class="DshEditor">
+        <!-- 有值、无值 可编辑 -->
+        <div
+            v-if="(value[propsObj._key] && finalCanEdit) || (!value[propsObj._key] && finalCanEdit)"
+            class="DshEditor-show"
+            :class="commonClass"
+            v-show="showType === 'show'"
+            v-html="value[propsObj._key]"
+            @click="handleEdit"
+        ></div>
+
+        <div
+            v-else-if="value[propsObj._key] && !finalCanEdit"
+            class="DshEditor-show hb-show-text"
+            :class="commonClass"
+            v-show="showType === 'show'"
+            v-html="value[propsObj._key]"
+            @click="handleEdit"
+        ></div>
+
+        <div
+            v-else
+            class="DshEditor-show hb-nodata-text"
+        >
+            <span>暂无内容</span>
+        </div>
+        <div
+            v-show="showType=='edit'"
+            class="DshEditor-wrap"
+        >
+            <div
+                ref="toolbar"
+                class="toolbar"
+            ></div>
+            <div
+                ref="editor"
+                class="text"
+            ></div>
+
+            <dsh-buttons
+                class="DshEditor-wrap-btn"
+                :list="$getOperationList(['save'])"
+                @click="$dispatchEvent($event)"
+            ></dsh-buttons>
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+    import uploadMixin from "./ZUpload/uploadMixin.js";
+    import E from "wangeditor";
+
+    export default {
+        name: "DshEditor",
+        mixins: [controlMixin, uploadMixin],
+        props: {},
+        data () {
+            return {
+                editor: null,
+                showType: "show",
+                operationMap: {
+                    save: {
+                        name: "完成",
+                        type: "save",
+                        btnType: "primary",
+                        size: "default",
+                        event: "save"
+                    }
+                }
+            };
+        },
+        computed: {
+        },
+        created () {},
+        mounted () {
+            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", // 列表
+                    "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.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.finalCanEdit)editor.disable();
+                this.editor = editor;
+            },
+            handleEdit () {
+                if (this.finalCanEdit) {
+                    this.editor.txt.html(this.value[this.propsObj._key]);
+                    this.showType = "edit";
+                }
+            },
+            save () {
+                this.showType = "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>

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

@@ -0,0 +1,139 @@
+<template>
+    <div :class="`DshInput ycFormItem control-${mode}`">
+        <Input
+            v-if="finalCanEdit"
+            :class="{
+                'DshInput-readonly': $isReadonly(canEdit, selfPropsObj),
+                'DshInput-disabled': $isDisabled(canEdit, selfPropsObj)
+            }"
+            v-model="value[controlKey]"
+            :type="inputType"
+            :placeholder="selfPropsObj._placeholder"
+            :disabled="!finalCanEdit"
+            :clearable="selfPropsObj._clearable"
+            :size="selfPropsObj._size"
+            :rows="selfPropsObj._rows"
+            :search="selfPropsObj._search"
+            :show-word-limit="selfPropsObj._showWordLimit"
+            :maxlength="selfPropsObj._maxlength"
+            :autosize="selfPropsObj._autosize"
+            @on-enter="onEnter"
+            @on-search="onSearch"
+            @on-focus="onFocus"
+            @on-change="onChange"
+            @on-blur="onBlur"
+            @on-clear="onClear"
+        >
+            <span
+                v-if="selfPropsObj._prepend"
+                slot="prepend"
+            >{{ selfPropsObj._prepend }}</span>
+            <span
+                v-if="selfPropsObj._append"
+                slot="append"
+            >{{ selfPropsObj._append }}</span>
+        </Input>
+
+        <!-- 查看 和 编辑下无编辑权限 -->
+        <p
+            v-else-if="subType === 'textarea'"
+            :class="[commonClass, showVal ? 'hb-show-text' : 'hb-nodata-text', 'DshInput-textarea-show']"
+        >{{ showVal || '暂无内容' }}</p>
+
+        <Ctooltip
+            v-else
+            placement="top"
+            :transfer="true"
+            maxWidth="200"
+            :content="showVal"
+            :class="{
+                'DshInput-notAllowed': mode === 'default',
+                'DshInput-ellipsis-readonly': mode === 'default' && $isReadonly(canEdit, selfPropsObj),
+                'DshInput-ellipsis-disabled': mode === 'default' && $isDisabled(canEdit, selfPropsObj),
+                [commonClass]: true
+            }"
+        >
+            <span
+                v-if="showVal"
+                class="dsh-ellipsis hb-show-text"
+                :class="`control-${mode}-text`"
+            >
+                {{ showVal }}
+            </span>
+            <span
+                v-else
+                class="hb-nodata-text dsh-ellipsis"
+                :class="`control-${mode}-text`"
+            >
+                <span>暂无内容</span>
+            </span>
+        </Ctooltip>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "DshInput",
+        mixins: [controlMixin],
+        props: {},
+        data () {
+            return {
+                changeStatus: false
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _showWordLimit: this.propsObj._showWordLimit || (!!this.propsObj._maxlength || this.propsObj._maxlength === 0),
+                    _autosize: {
+                        minRows: 2
+                    },
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            subType () {
+                return this.selfPropsObj._type;
+            },
+            inputType () {
+                return ["text", "password", "textarea", "url", "email", "number", "tel"].includes(this.subType)
+                    ? this.subType
+                    : undefined;
+            },
+
+            showVal () {
+                return this.value[this.controlKey] || "";
+            }
+        },
+        created () {},
+        methods: {
+            onSearch (...params) {
+                this.$emit("search", ...params);
+            },
+            // 无参数
+            onFocus () {
+                this.changeStatus = false;
+            },
+            // 无参数
+            onBlur () {
+                this.$emit("blur");
+                if (this.changeStatus === true) {
+                    this.change();
+                }
+            },
+            onEnter (event) {
+                this.$emit("inputChange");
+            },
+            // 参数event
+            onChange (event) {
+                this.$emit("inputChange");
+                this.changeStatus = true;
+            },
+            onClear () {
+                this.change();
+            }
+        }
+    };
+</script>

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

@@ -0,0 +1,302 @@
+<!-- 动态标签 -->
+<template>
+    <div
+        class="DshLabels"
+        ref="dshLabelsRef"
+    >
+        <!-- 编辑 -->
+        <template v-if="canEdit">
+            <!-- 编辑区 -->
+            <Input
+                class="DshLabels-input"
+                v-show="status === 'edit'"
+                type="text"
+                v-model="curVal"
+                ref="dshLabelsInput"
+                :icon="selfPropsObj._inputIcon"
+                :placeholder="selfPropsObj._placeholder"
+                :disabled="!finalCanEdit"
+                @on-enter="onClick"
+                @on-click="onClick"
+                @on-change="onChange"
+                @on-focus="onChange"
+            ></Input>
+
+            <!-- 查看区 -->
+            <div
+                v-show="status === 'show'"
+                :class="{'DshLabels-show':true,'DshLabels-showReadOnly':!finalCanEdit}"
+                @click="clickAdd"
+            >
+                <div
+                    class="DshLabels-show-content"
+                    @click="clickAdd"
+                >
+                    <span
+                        v-for="labelItem in val"
+                        class="DshLabels-show-content-item"
+                        :key="labelItem._key"
+                    >
+                        <span
+                            class="DshLabels-show-content-item-content"
+                            @click.stop="clickEdit(labelItem)"
+                            :title="labelItem.name"
+                        >
+                            {{labelItem.name}}
+                        </span>
+                        <Icon
+                            class="DshLabels-show-content-item-del"
+                            type="ios-close"
+                            size="20"
+                            @click.stop="clickDelete(labelItem)"
+                        />
+                    </span>
+                </div>
+                <div
+                    class="DshLabels-show-add"
+                    v-if="canEdit"
+                >
+                    <Icon
+                        type="md-create"
+                        @click="clickAdd"
+                    />
+                </div>
+
+            </div>
+
+            <!-- 数据选择区：接口依据用户输入返回数据 -->
+            <div
+                class="DshLabels-searchResult"
+                ref="searchResultRef"
+                :style="{
+                    width: getStyle()
+                }"
+                v-if="ShowTagList"
+            >
+                <Icon
+                    type="md-close"
+                    class="DshLabels-searchResult-close"
+                    @click="closeTagList"
+                />
+                <ul
+                    class="DshLabels-searchResult-list"
+                    v-if="list&&list.length>0"
+                >
+                    <li
+                        v-for="item in list"
+                        :class="{'selected':item.selected}"
+                        :key="item._id"
+                        @click="clickTag(item)"
+                    >{{ item.name }}
+                    </li>
+                </ul>
+                <div
+                    class="DshLabels-searchResult-nodata"
+                    v-else
+                >
+                    无匹配数据
+                </div>
+            </div>
+        </template>
+
+        <!-- 查看 -->
+        <div
+            v-else
+            :class="{'DshLabels-view':true,
+                'DshLabels-view-readonly': mode === 'default' && $isReadonly(canEdit, selfPropsObj),
+                'DshLabels-view-disabled': mode === 'default' && $isDisabled(canEdit, selfPropsObj),
+                [commonClass]:true
+            }"
+        >
+            <template v-if="val.length">
+                <Tag
+                    v-for="tagItem in val"
+                    :key="tagItem._key"
+                    size="medium"
+                    class="DshLabels-view-tag"
+                >
+                    {{ tagItem.name }}
+                </Tag>
+            </template>
+
+            <div
+                v-else
+                class="DshLabels-view-nodata"
+            >
+                <span>暂无数据</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "DshLabels",
+        mixins: [controlMixin],
+
+        data () {
+            return {
+                status: "", // edit/show
+                curVal: "",
+                curKey: "", // 当前正在修改label的_key
+                ShowTagList: false,
+                list: []
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj,
+                    _inputIcon: !this.propsObj._onlySelect ? "md-add" : ""
+                };
+            },
+            modKey () {
+                return this.propsObj.modKey;
+            },
+            val: {
+                get () {
+                    return this.value[this.propsObj._key] || [];
+                },
+                set (val) {
+                    this.value[this.propsObj._key] = val;
+                }
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.status = this.canEdit && !this.val.length
+                    ? "edit"
+                    : "show";
+
+            },
+            // 确认输入
+            onClick () {
+                if (this.finalCanEdit && !this.selfPropsObj._onlySelect) {
+                    if (this.curVal.trim().length > 0) {
+                        this.status = "show";
+                        let labelItem = {_key: "", name: ""};
+                        labelItem._key = this.curKey || this.$randomB36("Labels");
+                        labelItem.name = this.curVal.trim();
+                        labelItem.labelType = this.selfPropsObj._labelType;
+                        this.val = this.val.concat([labelItem]);
+                        this.ShowTagList = false;
+                        this.change();
+                    } else {
+                        this.status = "show";
+                        this.ShowTagList = false;
+                    }
+                }
+            },
+            onChange () {
+                this.getListData();
+            },
+            getListData () {
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "memberAll"
+                    },
+                    params: {
+                        search: {
+                            entityKey: this.entityKey, // 当前工作表关联的数据表Key
+                            modKey: this.modKey,
+                            name: this.curVal,
+                            fieldKey: this.selfPropsObj._key === "_default" ? this.value._key : (this.selfPropsObj.__realKey__ || this.selfPropsObj._key), // 当前字段Key
+                            labelType: this.selfPropsObj._labelType
+                        },
+                        pagination: {
+                            page: 1,
+                            pagesize: 999
+                        }
+                    },
+                    callback: data => {
+                        // 当前已选择的标签
+                        let keysArr = this.val.map(item => item._key);
+                        if (data.list.length > 0) {
+                            this.list = data.list.map(item => ({
+                                ...item,
+                                selected: !!keysArr.includes(item._key)
+                            }));
+                        } else {
+                            this.list = [];
+                        }
+                        this.ShowTagList = true;
+                        // this.ShowTagList = !this.ShowTagList;
+                    }
+                });
+            },
+            clickTag (item) {
+                if (this.finalCanEdit) {
+                    this.status = "show";
+                    let keysArr = this.val.map(i => i._key);
+                    if (!keysArr.includes(item._key)) {
+                        this.val = this.val.concat(this.list.filter(listItem => listItem._key == item._key));
+                        this.ShowTagList = false;
+                        this.change();
+                    } else {
+                        this.ShowTagList = false;
+                        this.status = "show";
+                        this.curVal = "";
+                    }
+                }
+            },
+            clickEdit (labelItem) {
+                if (this.finalCanEdit) {
+                    this.status = "edit";
+                    this.curVal = labelItem.name;
+                    this.curKey = labelItem._key;
+                    this.val = this.val.filter(i => i._key != labelItem._key);
+                }
+            },
+            // 切换为输入框编辑模式
+            clickAdd () {
+                if (this.finalCanEdit) {
+                    this.status = "edit";
+                    this.curVal = "";
+                    this.$nextTick(() => {
+                        this.$refs.dshLabelsInput.focus({
+                            cursor: "start"
+                        });
+                    });
+
+                    this.$debounce(this.getListData(), 100);
+                }
+            },
+            clickDelete (labelItem) {
+                if (this.finalCanEdit) {
+                    this.val = this.val.filter(i => i._key != labelItem._key);
+
+                    if (!this.val.length) {
+                        this.curVal = "";
+                        this.status = "edit";
+                        this.change();
+                    }
+                    this.change();
+                }
+            },
+            closeTagList () {
+                this.ShowTagList = false;
+                this.status = "show";
+            },
+            getStyle () {
+                this.$nextTick(() => {
+                    this.$refs.searchResultRef.style.width = `${this.$refs.dshLabelsRef.offsetWidth}px`;
+                    this.$refs.searchResultRef.style.top = `${this.$refs.dshLabelsRef.getBoundingClientRect().top + 34}px`;
+                });
+            }
+        },
+        watch: {
+            value (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.init();
+                }
+            }
+        }
+    };
+</script>