bri-components 1.0.5 → 1.1.0

package/lib/styles/bundle.css

@@ -1,5 +1,3 @@
-@import "view-design/dist/styles/iview.css";
-
 @import "codemirror/lib/codemirror.css";
 @import "codemirror/theme/cobalt.css";
 @import "codemirror/theme/base16-light.css";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.0.5",
+    "version": "1.1.0",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",
@@ -39,6 +39,7 @@
         "viewerjs": "^1.10.2",
         "vue-codemirror": "^4.0.6",
         "vue-cropperjs": "^4.1.0",
+        "vue-easytable": "^2.21.9",
         "vuedraggable": "^2.24.1",
         "wangeditor": "^4.7.5"
     },

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

@@ -0,0 +1,117 @@
+<!-- 动态标签 -->
+<template>
+    <div class="BriLabels">
+        <Dropdown
+            class="BriLabels-dropdown"
+            trigger="custom"
+            placement="bottom-start"
+            transfer
+            :visible="listVisible"
+            @on-clickoutside="clickInput"
+        >
+            <Input
+                class="BriLabels-dropdown-input"
+                :value="showValStr"
+                :suffix="inputIcon"
+                readonly
+                @click.native="clickInput"
+            >
+            </Input>
+            <template #list>
+                <DropdownMenu>
+                    <DropdownItem
+                        v-for="item in listData"
+                        :key="item._key"
+                        :class="{
+                            'BriLabels-dropdown-item':true,
+                            'BriLabels-dropdown-item-active':!!val.find(i=>i._key == item._key)
+                        }"
+                    >
+                        {{item.name}}
+                    </DropdownItem>
+                </DropdownMenu>
+            </template>
+        </Dropdown>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "BriLabels",
+        mixins: [controlMixin],
+        data () {
+            return {
+                listData: [],
+                listVisible: false,
+                inputIcon: "ios-arrow-down"
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            modKey () {
+                return this.propsObj.modKey;
+            },
+            val: {
+                get () {
+                    return this.value[this.propsObj._key] || [];
+                },
+                set (val) {
+                    this.value[this.propsObj._key] = val;
+                }
+            },
+            showValStr () {
+                let valArr = this.val && this.val.map(item => item.name);
+                return valArr && valArr.join("、");
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                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 => {
+                        this.listData = data.list;
+                    }
+                });
+            },
+            clickInput () {
+                this.listVisible = !this.listVisible;
+                if (this.listVisible) {
+                    this.inputIcon = "ios-arrow-up";
+                } else {
+                    this.inputIcon = "ios-arrow-down";
+                }
+            }
+        },
+        watch: {
+        }
+    };
+</script>

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

@@ -1,7 +1,7 @@
 <template>
-    <div :class="`DshCascader ycFormItem control-${mode}`">
-        <!-- 编辑模式 -->
-        <template v-if="finalCanEdit">
+    <div :class="`DshCascader`">
+        <!-- 编辑和disabled模式 -->
+        <template v-if="finalCanEdit  || $isDisabled(canEdit, selfPropsObj)">
             <!-- 多选 多选模式的filterable必须是false，不然出bug -->
             <template v-if="useMultiple === true">
                 <Cascader
@@ -86,17 +86,16 @@
                     v-else
                     style="width: 100%;"
                     :class="{
-                        'DshCascader-readonly': $isReadonly(canEdit, selfPropsObj),
                         'DshCascader-disabled': $isDisabled(canEdit, selfPropsObj)
                     }"
                     :value="value[controlKey]"
                     :data="renderCascaderData"
                     :placeholder="selfPropsObj._placeholder"
-                    :disabled="!finalCanEdit"
+                    :disabled="$isDisabled(canEdit, selfPropsObj)"
                     :change-on-select="selfPropsObj._changeOnSelect"
                     :clearable="selfPropsObj._clearable"
                     :size="selfPropsObj._size"
-                    :filterable="selfPropsObj._filterable"
+                    :filterable="selfPropsObj._filterable && !$isDisabled(canEdit, selfPropsObj)"
                     :transfer="selfPropsObj._transfer"
                     :transfer-class-name="selfPropsObj._transferClassName"
                     :load-data="loadData"
@@ -107,29 +106,13 @@
             </template>
         </template>
 
-        <!-- 查看 和 编辑下无编辑权限 -->
-        <Ctooltip
+        <!-- 查看模式 -->
+        <control-show
             v-else
-            placement="top"
-            :transfer="true"
-            maxWidth="200"
-            :content="showVal"
-            :class="commonClass"
-        >
-            <span
-                v-if="showVal"
-                class="dsh-ellipsis hb-show-text"
-                :class="`control-${mode}-text`"
-            >
-                {{ showVal }}
-            </span>
-            <div
-                v-else
-                class="hb-nodata-text dsh-ellipsis"
-            >
-                <span>暂无内容</span>
-            </div>
-        </Ctooltip>
+            :showVal="showVal"
+            :propsObj="selfPropsObj"
+            :isUnit="isUnit"
+        ></control-show>
     </div>
 </template>
 
@@ -303,16 +286,18 @@
 
             /* ----------- 单选使用 ---------- */
             clickInput () {
-                if (
-                    ["cascader"].includes(this.selfPropsObj._type) &&
-                    this.selfPropsObj._filterable === true &&
-                    this.renderDataFlag === true &&
-                    this.clickInputFlag === true
-                ) {
-                    this.clickInputFlag = false; // 这个处理其实觉大概率没必要，有没有不受影响
-                    setTimeout(() => {
-                        this.renderDataFlag = false;
-                    }, 0);
+                if (this.finalCanEdit) {
+                    if (
+                        ["cascader"].includes(this.selfPropsObj._type) &&
+                        this.selfPropsObj._filterable === true &&
+                        this.renderDataFlag === true &&
+                        this.clickInputFlag === true
+                    ) {
+                        this.clickInputFlag = false; // 这个处理其实觉大概率没必要，有没有不受影响
+                        setTimeout(() => {
+                            this.renderDataFlag = false;
+                        }, 0);
+                    }
                 }
             },
             // 展开和关闭弹窗时触发

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="DshCascaderMultiple ycFormItem">
+    <div class="DshCascaderMultiple">
         <Cascader
             class="DshCascaderMultiple-control"
             v-model="cascaderVal"

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

@@ -1,6 +1,6 @@
 <template>
     <div
-        :class="`DshCheckbox ycFormItem control-${mode}`"
+        class="DshCheckbox"
         ref="dshCheckboxRef"
     >
         <template v-if="canEdit">
@@ -87,11 +87,13 @@
             :transfer="true"
             maxWidth="200"
             :content="showVal"
-            :class="commonClass"
         >
             <div
                 v-if="showVal"
                 class="DshCheckbox-value-wrapper"
+                :style="{
+                    justifyContent: flatShowAlign
+                }"
             >
                 <span
                     v-for="col in colData"
@@ -105,9 +107,14 @@
             </div>
             <div
                 v-else
-                class="hb-nodata-text dsh-ellipsis"
+                class="control-nodata-text dsh-ellipsis"
             >
-                <span>暂无内容</span>
+                <template v-if="isUnit">
+                    -
+                </template>
+                <template v-else>
+                    暂无内容
+                </template>
             </div>
         </Ctooltip>
 
@@ -169,6 +176,9 @@
             // 选项数据
             colData () {
                 return this.listData.filter(item => (this.value[this.controlKey] || []).includes(item._key));
+            },
+            flatShowAlign () {
+                return !this.propsObj._align || this.propsObj._align == "left" || !this.isUnit ? "flex-start" : this.propsObj._align == "right" ? "flex-end" : "center";
             }
         },
         created () {

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

@@ -1,11 +1,10 @@
 <template>
-    <div :class="`DshCoordinates ycFormItem control-${mode}`">
+    <div class="DshCoordinates">
         <Ctooltip
             placement="top"
             :transfer="true"
             maxWidth="200"
-            :content="showVal"
-            :class="commonClass"
+            :content="currentVal"
         >
             <!-- 编辑模式 -->
             <div
@@ -38,11 +37,8 @@
             </div>
 
             <!-- 查看模式 -->
-            <span
-                v-else
-                :class="[`dsh-ellipsis control-${mode}-text`, showVal ? 'hb-show-text' : 'hb-nodata-text']"
-            >
-                <span>{{ showVal || '暂无内容' }}</span>
+            <span v-else :class="commonClass">
+                {{ showText }}
             </span>
         </Ctooltip>
 
@@ -177,7 +173,7 @@
                     this.value[this.controlKey] = val;
                 }
             },
-            showVal () {
+            currentVal () {
                 return this.curVal && this.curVal.name;
             },
             curLnglat: {

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

@@ -1,20 +1,19 @@
 <template>
     <div
         v-if="show"
-        :class="`DshDate ycFormItem control-${mode}`"
+        class="DshDate"
     >
-        <template v-if="finalCanEdit">
+        <template v-if="finalCanEdit || $isDisabled(canEdit, selfPropsObj)">
             <template v-if="['time'].includes(subType)">
                 <TimePicker
                     style="width: 100%;"
                     :class="{
-                        'DshDate-time-readonly': $isReadonly(canEdit, selfPropsObj),
                         'DshDate-time-disabled': $isDisabled(canEdit, selfPropsObj)
                     }"
                     v-model="val"
                     :type="subType"
                     :placeholder="selfPropsObj._placeholder"
-                    :disabled="!finalCanEdit"
+                    :disabled="$isDisabled(canEdit, selfPropsObj)"
                     :clearable="selfPropsObj._clearable"
                     :transfer="selfPropsObj._transfer"
                     @on-change="change"
@@ -25,13 +24,12 @@
                 <DatePicker
                     style="width: 100%;"
                     :class="{
-                        'DshDate-date-readonly': $isReadonly(canEdit, selfPropsObj),
                         'DshDate-date-disabled': $isDisabled(canEdit, selfPropsObj)
                     }"
                     v-model="val"
                     :type="subType"
                     :placeholder="selfPropsObj._placeholder"
-                    :disabled="!finalCanEdit"
+                    :disabled="$isDisabled(canEdit, selfPropsObj)"
                     :clearable="selfPropsObj._clearable"
                     :options="options"
                     :transfer="selfPropsObj._transfer"
@@ -40,29 +38,13 @@
             </template>
         </template>
 
-        <Ctooltip
+        <!-- 查看模式 -->
+        <control-show
             v-else
-            placement="top"
-            :transfer="true"
-            maxWidth="200"
-            :content="showVal"
-            :class="commonClass"
-        >
-            <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>
+            :showVal="showVal"
+            :propsObj="selfPropsObj"
+            :isUnit="isUnit"
+        ></control-show>
     </div>
 </template>
 
@@ -140,9 +122,3 @@
         }
     };
 </script>
-
-<style lang="less">
-    .DshDate {
-        width: 100%;
-    }
-</style>

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

@@ -1,5 +1,5 @@
 <template>
-    <div :class="`DshDivider control-${mode}`">
+    <div class="DshDivider">
         <!-- <div class="DshDivider-divider-cli">
             <p>{{ propsObj._name }}</p>
         </div> -->

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

@@ -1,49 +1,44 @@
 <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-if="isUnit" class="DshEditor-unit">
+            <span class="DshEditor-unit-text">
+                {{ unitVal }}
+            </span>
+        </div>
+
+        <template v-else-if="finalCanEdit">
+            <div class="DshEditor-show DshEditor-edit"
+                :class="value[controlKey] ? '': 'DshEditor-edit-placeholder'"
+                v-show="showType === 'show'"
+                v-html="editVal"
+                @click="handleEdit"
+            ></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>
+        </template>
 
-        <div
-            v-else-if="value[propsObj._key] && !finalCanEdit"
-            class="DshEditor-show hb-show-text"
-            :class="commonClass"
+        <div v-else
+            class="DshEditor-show"
+            :class="$isDisabled(canEdit, selfPropsObj) ? 'DshEditor-show-disabled' : value[controlKey] ? '' : 'DshEditor-show-nodata'"
             v-show="showType === 'show'"
-            v-html="value[propsObj._key]"
-            @click="handleEdit"
+            v-html="showVal"
         ></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>
 
@@ -72,10 +67,25 @@
             };
         },
         computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            unitVal () {
+                return this.value[this.controlKey] ? "富文本" : "-";
+            },
+            showVal () {
+                return this.value[this.controlKey] || "暂无内容";
+            },
+            editVal () {
+                return this.value[this.controlKey] || this.selfPropsObj._placeholder;
+            }
         },
         created () {},
         mounted () {
-            this.initEditor();
+            this.finalCanEdit && this.initEditor();
         },
         methods: {
             initEditor () {
@@ -142,10 +152,8 @@
                 this.editor = editor;
             },
             handleEdit () {
-                if (this.finalCanEdit) {
-                    this.editor.txt.html(this.value[this.propsObj._key]);
-                    this.showType = "edit";
-                }
+                this.editor.txt.html(this.value[this.propsObj._key]);
+                this.showType = "edit";
             },
             save () {
                 this.showType = "show";

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

@@ -1,9 +1,8 @@
 <template>
-    <div :class="`DshInput ycFormItem control-${mode}`">
+    <div :class="`DshInput`">
         <Input
-            v-if="finalCanEdit"
+            v-if="finalCanEdit || $isDisabled(canEdit, selfPropsObj)"
             :class="{
-                'DshInput-readonly': $isReadonly(canEdit, selfPropsObj),
                 'DshInput-disabled': $isDisabled(canEdit, selfPropsObj)
             }"
             v-model="value[controlKey]"
@@ -24,50 +23,23 @@
             @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>
+        <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
+        <!-- 查看模式 -->
+        <control-show
             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>
+            :showVal="showVal"
+            :propsObj="selfPropsObj"
+            :isUnit="isUnit"
+        ></control-show>
     </div>
 </template>
 
@@ -107,7 +79,8 @@
                 return this.value[this.controlKey] || "";
             }
         },
-        created () {},
+        created () {
+        },
         methods: {
             onSearch (...params) {
                 this.$emit("search", ...params);

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

@@ -106,9 +106,8 @@
         <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
+                'DshLabels-view-readonly': $isReadonly(canEdit, selfPropsObj),
+                'DshLabels-view-disabled': $isDisabled(canEdit, selfPropsObj),
             }"
         >
             <template v-if="val.length">
@@ -126,7 +125,12 @@
                 v-else
                 class="DshLabels-view-nodata"
             >
-                <span>暂无数据</span>
+                <template v-if="isUnit">
+                    -
+                </template>
+                <template v-else>
+                    暂无内容
+                </template>
             </div>
         </div>
     </div>