bri-components 1.2.57 → 1.2.59

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.2.57",
+    "version": "1.2.59",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",
@@ -32,7 +32,7 @@
     "dependencies": {
         "ali-oss": "^6.13.1",
         "axios": "^0.23.0",
-        "bri-datas": "^1.0.47",
+        "bri-datas": "^1.0.48",
         "jshint": "^2.12.0",
         "jsonlint": "^1.6.3",
         "minio": "7.1.0",

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

@@ -89,7 +89,7 @@
 </template>
 
 <script>
-    import controlMixin from "../../controlMixin.js";
+    import controlMixin from "../../mixins/controlMixin.js";
     import uploadMixin from "./uploadMixin.js";
     import BriUploadImage from "./BriUploadImage.vue";
     import uploadList from "./uploadList.vue";

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

@@ -4,80 +4,40 @@
         v-if="!multipleMode && canEdit"
         class="DshCascader"
     >
-        <!-- 简洁方式 -->
-        <template v-if="showType === 'simple'">
-            <Cascader
-                :value="curValKeyList"
-                :data="renderCascaderData"
-                :placeholder="selfPropsObj._placeholder"
-                :disabled="selfPropsObj._disabled"
-                :clearable="selfPropsObj._clearable"
-                :size="selfPropsObj._size"
-                :filterable="filterable"
-                :render-format="renderFormat"
-                :change-on-select="changeOnSelect"
-                :transfer="selfPropsObj._transfer"
-                :transfer-class-name="selfPropsObj._transferClassName"
-                :load-data="loadData"
-                @on-visible-change="changeVisible"
-                @on-change="changeSelect"
-                @click.native="clickCascader"
-            ></Cascader>
-        </template>
-
-        <!-- 弹框方式 -->
-        <template v-else-if="showType === 'custom'">
-            <cascader-modal
-                v-model="showModal"
-                :activeValue="curValList"
-                :data="cascaderData"
-                :propsObj="selfPropsObj"
-                @confirm="confirmCb"
-            >
-                <dsh-control-input
-                    :class="commonClass"
-                    :value="curValName"
-                    :disabled="inputPropsObj._disabled"
-                    :propsObj="inputPropsObj"
-                    @clear="clickClear"
-                ></dsh-control-input>
-            </cascader-modal>
-        </template>
-
-        <!-- 确认面板方式 -->
-        <template v-else>
-            <cascader-picker
-                v-model="showModal"
-                :activeValue="curValList"
-                :data="cascaderData"
-                :propsObj="selfPropsObj"
-                @confirm="confirmCb"
-            >
-                <dsh-control-input
-                    :class="commonClass"
-                    :value="curValName"
-                    :disabled="inputPropsObj._disabled"
-                    :propsObj="inputPropsObj"
-                    @clear="clickClear"
-                ></dsh-control-input>
-            </cascader-picker>
-        </template>
+        <component
+            :is="showTypeMap[showType]"
+            v-model="showModal"
+            :activeValue="curValList"
+            :data="cascaderData"
+            :propsObj="selfPropsObj"
+            @confirm="confirmCb"
+        >
+            <dsh-control-input
+                v-if="!['simple'].includes(showType)"
+                :class="commonClass"
+                :value="curValName"
+                :disabled="inputPropsObj._disabled"
+                :propsObj="inputPropsObj"
+                @clear="clickClear"
+            ></dsh-control-input>
+        </component>
     </div>
 
     <!-- 单选模式 查看 -->
     <div
         v-else-if="!multipleMode && !canEdit"
-        class="DshCascader"
+        class="DshCascader-show"
     >
         <!-- 有值 -->
         <bri-tooltip
             v-if="!$isEmptyData(curValList)"
             :content="showVal"
-            placement="top"
-            maxWidth="200"
             :transfer="true"
         >
-            <div :class="commonClass">
+            <div :class="{
+                commonClass,
+                'DshCascader-show-ellipsis': true
+            }">
                 {{ showVal }}
             </div>
         </bri-tooltip>
@@ -96,70 +56,23 @@
         v-else-if="multipleMode && canEdit"
         class="DshCascaders"
     >
-        <!-- 简洁方式 多选的filterable必须是false，不然出bug -->
-        <template v-if="showType === 'simple'">
-            <Cascader
-                :data="renderCascaderData"
-                :disabled="selfPropsObj._disabled"
-                :clearable="selfPropsObj._clearable"
-                :size="selfPropsObj._size"
-                :filterable="filterable"
-                :render-format="renderFormat"
-                :change-on-select="changeOnSelect"
-                :transfer="selfPropsObj._transfer"
-                :transfer-class-name="selfPropsObj._transferClassName"
-                :load-data="loadData"
-                @on-visible-change="changeMulVisible"
-                @on-change="changeMulSelect"
-            >
-                <dsh-control-input
-                    :class="commonClass"
-                    :value="curValNameList"
-                    :disabled="inputPropsObj._disabled"
-                    :propsObj="inputPropsObj"
-                    @deleteItem="clickDeleteItem"
-                    @clear="clickClear"
-                ></dsh-control-input>
-            </Cascader>
-        </template>
-
-        <!-- 弹框方式 -->
-        <template v-else-if="showType === 'custom'">
-            <cascader-modal
-                v-model="showModal"
-                :data="cascaderData"
-                :propsObj="selfPropsObj"
-                @confirm="confirmMulCb"
-            >
-                <dsh-control-input
-                    :class="commonClass"
-                    :value="curValNameList"
-                    :disabled="inputPropsObj._disabled"
-                    :propsObj="inputPropsObj"
-                    @deleteItem="clickDeleteItem"
-                    @clear="clickClear"
-                ></dsh-control-input>
-            </cascader-modal>
-        </template>
-
-        <!-- 确认面板方式 -->
-        <template v-else>
-            <cascader-picker
-                v-model="showModal"
-                :data="cascaderData"
-                :propsObj="selfPropsObj"
-                @confirm="confirmMulCb"
-            >
-                <dsh-control-input
-                    :class="commonClass"
-                    :value="curValNameList"
-                    :disabled="inputPropsObj._disabled"
-                    :propsObj="inputPropsObj"
-                    @deleteItem="clickDeleteItem"
-                    @clear="clickClear"
-                ></dsh-control-input>
-            </cascader-picker>
-        </template>
+        <component
+            :is="showTypeMap[showType]"
+            v-model="showModal"
+            :multipleMode="multipleMode"
+            :data="cascaderData"
+            :propsObj="selfPropsObj"
+            @confirm="confirmMulCb"
+        >
+            <dsh-control-input
+                :class="commonClass"
+                :value="curValNameList"
+                :disabled="inputPropsObj._disabled"
+                :propsObj="inputPropsObj"
+                @deleteItem="clickDeleteItem"
+                @clear="clickClear"
+            ></dsh-control-input>
+        </component>
     </div>
 
     <!-- 多选模式 查看 -->
@@ -171,19 +84,15 @@
         <bri-tooltip
             v-if="!$isEmptyData(curValList)"
             :content="showMulVal"
-            placement="top"
-            maxWidth="200"
             :transfer="true"
         >
-            <div :class="{
-                ...commonClass,
-                'DshCascader-show-row': isFullRow && !isUnitShow
-            }">
-                <dsh-tags
-                    class="text"
-                    :list="curValNameList"
-                ></dsh-tags>
-            </div>
+            <dsh-tags
+                :class="{
+                    ...commonClass,
+                    'DshCascaders-show-ellipsis': !(isDetailShow && isFullRow)
+                }"
+                :list="curValNameList"
+            ></dsh-tags>
         </bri-tooltip>
 
         <!-- 无值 -->
@@ -199,9 +108,10 @@
 </template>
 
 <script>
-    import cascaderMixin from "./cascaderMixin.js";
-    import cascaderPicker from "./cascaderPicker.vue";
-    import cascaderModal from "./cascaderModal.vue";
+    import cascaderMixin from "../../mixins/cascaderMixin.js";
+    import cascaderPicker from "./components/cascaderPicker.vue";
+    import cascaderModal from "./components/cascaderModal.vue";
+    import cascaderSimple from "./components/cascaderSimple.vue";
 
     export default {
         name: "DshCascader",
@@ -210,106 +120,38 @@
         ],
         components: {
             cascaderPicker,
-            cascaderModal
+            cascaderModal,
+            cascaderSimple
         },
         props: {},
         data () {
             return {
-                // renderAll: false,
-                // clickFlag: true,
-                isVisible: false,
-                curSelectVal: []
+                showTypeMap: {
+                    default: cascaderPicker, // 确认面板方式（默认）
+                    custom: cascaderModal, // 弹框方式
+                    simple: cascaderSimple // 简易方式
+                }
             };
         },
         computed: {
             selfPropsObj () {
                 return {
-                    _showMode: "default", // 只有单选模式有效，值为"default", "custom", "simple"
+                    _showMode: "default", // 值为"default", "custom", "simple"
                     _transfer: true,
                     _transferClassName: "",
 
-                    ...this.basePropsObj,
-
-                    // 默认模式-多选时 暂不支持搜索
-                    _filterable: this.basePropsObj._showMode === "simple" && this.multipleMode
-                        ? false
-                        : this.basePropsObj._filterable
+                    ...this.basePropsObj
                 };
             },
             inputPropsObj () {
                 return {
-                    _icon: this.isVisible ? "ios-arrow-up" : "ios-arrow-down",
+                    _icon: this.showModal ? "ios-arrow-up" : "ios-arrow-down",
                     ...this.selfPropsObj
                 };
-            },
-
-            renderCascaderData () {
-                return this.renderAll
-                    ? this.cascaderData
-                    : this.cascaderData.map(item => {
-                        return {
-                            ...item,
-                            children: []
-                        };
-                });
             }
         },
         created () {},
-        methods: {
-            /* --------- 简洁方式 ------- */
-            // 动态加载数据
-            loadData (treeItem, cb) {
-                const linealDatas = this.$getTreeLinealDatas(treeItem.keys, this.cascaderData, undefined, this.saveKey);
-                const lastData = linealDatas.slice(-1)[0];
-                treeItem.children = lastData.children.map(item =>
-                    ({
-                        ...item,
-                        children: []
-                    })
-                );
-
-                cb();
-            },
-            clickCascader () {
-                // if (
-                //     !this.selfPropsObj._disabled &&
-                //     this.filterable === true &&
-                //     this.renderAll === false &&
-                //     this.clickFlag === true
-                // ) {
-                //     this.clickFlag = false; // 这个处理其实觉大概率没必要，有没有不受影响
-                //     setTimeout(() => {
-                //         this.renderAll = true;
-                //     }, 0);
-                // }
-            },
-            // 简洁方式-单选 -展开和关闭弹窗时触发
-            changeVisible (bool) {
-                this.isVisible = bool;
-            },
-            // 简洁方式-单选 -选项变化
-            changeSelect (value, selectedOptions) {
-                if (this.isVisible || !value.length) {
-                    this.curValList = selectedOptions.map(item => item[this.saveKey]);
-                }
-            },
-            // 简洁方式-多选 -展开和关闭弹窗时触发
-            changeMulVisible (bool) {
-                this.isVisible = bool;
-
-                if (bool === false && this.curSelectVal.length) {
-                    this.confirmMulCb(this.curSelectVal);
-
-                    this.curSelectVal = [];
-                }
-            },
-            // 简洁方式-多选 -选项变化
-            changeMulSelect (value, selectedOptions) {
-                if (this.isVisible) {
-                    this.curSelectVal = selectedOptions.map(item => item[this.saveKey]);
-                }
-            }
-        },
+        methods: {},
         watch: {
             "cascaderLevel" () {
                 this.value[this.controlKey] = [];
@@ -320,23 +162,18 @@
 
 <style lang="less">
     .DshCascader {
-
+        &-show {
+            &-ellipsis {
+                .dsh-ellipsis();
+            }
+        }
     }
 
     // 多选
     .DshCascaders {
         &-show {
-            height: auto;
-
-            &-row {
-                .text,
-                .overflow {
-                    .bri-scrollbar3();
-                    width: 100%;
-                    height: 100%;
-                    white-space: normal;
-                    overflow: auto;
-                }
+            &-ellipsis {
+                .dsh-ellipsis();
             }
         }
     }

package/src/components/controls/base/DshCascader/{cascaderModal.vue → components/cascaderModal.vue}

@@ -1,6 +1,6 @@
 <template>
     <div class="cascaderModal">
-        <div @click.stop="clickInput">
+        <div @click="clickInput">
             <slot>
                 <Input
                     v-model="inputStr"
@@ -84,7 +84,7 @@
                                     :key="nodeItem[valueKey]"
                                     :class="{
                                         'item': true,
-                                        'item-active': selectedLastOption && nodeItem[valueKey] === selectedLastOption[valueKey],
+                                        'item-active': selectedObj && nodeItem[valueKey] === selectedObj[valueKey],
                                         'item-disabled': nodeItem.disabled
                                     }"
                                     @click="clickItem(nodeItem)"
@@ -95,7 +95,7 @@
 
                                     <span class="item-icon">
                                         <dsh-icons :list="[{
-                                            icon: selectedLastOption && nodeItem[valueKey] === selectedLastOption[valueKey]
+                                            icon: selectedObj && nodeItem[valueKey] === selectedObj[valueKey]
                                                 ? 'md-checkmark'
                                                 : ''
                                         }]" />
@@ -136,7 +136,7 @@
 </template>
 
 <script>
-    import cascaderPickerMixin from "./cascaderPickerMixin.js";
+    import cascaderPickerMixin from "../../../mixins/cascaderPickerMixin.js";
 
     export default {
         name: "cascaderModal",
@@ -147,6 +147,7 @@
         props: {},
         data () {
             return {
+                inputStr: "",
                 description: ""
             };
         },
@@ -159,8 +160,8 @@
             },
 
             initData () {
-                const loop = (data = [], newData = []) => {
-                    return data.reduce((newData, item) => {
+                const loop = (arr = [], newArr = []) => {
+                    return arr.reduce((newArr, item) => {
                         const newItem = {
                             ...item,
                             value: item[this.valueKey],
@@ -186,8 +187,8 @@
                             children: loop(item.children)
                         };
 
-                        return [...newData, newItem];
-                    }, newData);
+                        return [...newArr, newItem];
+                    }, newArr);
                 };
 
                 return loop(this.data);
@@ -198,40 +199,30 @@
         },
         methods: {
             init () {
-                this.selectedValue = this.activeValue;
                 this.selectedOptions.forEach(item => {
                     item.expand = true;
                 });
-                this.dealDescription();
+                this.getDescription(this.selectedValue);
             },
 
             search () {
                 this.selectedValue = [];
                 this.showMode = "default";
             },
-            clickItemCb (node) {
-                this.dealDescription();
-            },
-            dealDescription () {
-                if (this.selectedValue.length && this.selectedLastOption.description == undefined) {
+            clickItem (node) {
+                // 避免重复点击
+                if (JSON.stringify(this.selectedValue) !== JSON.stringify(node.keys)) {
+                    this.selectedValue = node.keys;
+
+                    const obj = {
+                        value: this.selectedValue,
+                        selectedOptions: this.selectedOptions
+                    };
+                    this.$emit("change", obj);
+                    !node.children.length && this.$emit("finish", obj);
+
                     this.getDescription(this.selectedValue);
                 }
-            },
-            getDescription (nodeKeys) {
-                this.$https({
-                    url: {
-                        module: "sheet",
-                        name: "getResourceDescription"
-                    },
-                    params: {
-                        resourceKey: this.resourceKey,
-                        nodeKeys
-                    },
-                    callback: data => {
-                        this.description = data;
-                        this.selectedLastOption.description = data;
-                    }
-                });
             }
         }
     };

package/src/components/controls/base/DshCascader/{cascaderPicker.vue → components/cascaderPicker.vue}

@@ -5,7 +5,7 @@
             v-clickoutside="clickCancel"
             trigger="custom"
             :visible="showModal"
-            :placement="placement"
+            :placement="'bottom-start'"
             :transfer="true"
             :transfer-class-name="`cascaderPicker-down ${selfPropsObj._transferClassName}`"
             :stop-propagation="true"
@@ -118,7 +118,7 @@
                                     :key="nodeItem[valueKey]"
                                     :class="{
                                         'item': true,
-                                        'item-active': selectedLastOption && nodeItem[valueKey] === selectedLastOption[valueKey],
+                                        'item-active': selectedObj && nodeItem[valueKey] === selectedObj[valueKey],
                                         'item-disabled': nodeItem.disabled
                                     }"
                                     @click="clickItem(nodeItem)"
@@ -129,7 +129,7 @@
 
                                     <span class="item-icon">
                                         <dsh-icons :list="[{
-                                            icon: selectedLastOption && nodeItem[valueKey] === selectedLastOption[valueKey]
+                                            icon: selectedObj && nodeItem[valueKey] === selectedObj[valueKey]
                                                 ? 'md-checkmark'
                                                 : ''
                                         }]" />
@@ -181,7 +181,7 @@
 </template>
 
 <script>
-    import cascaderPickerMixin from "./cascaderPickerMixin.js";
+    import cascaderPickerMixin from "../../../mixins/cascaderPickerMixin.js";
 
     export default {
         name: "cascaderPicker",
@@ -189,21 +189,13 @@
             cascaderPickerMixin
         ],
         components: {},
-        props: {
-            placement: {
-                type: String,
-                default: "bottom-start"
-            }
-        },
+        props: {},
         data () {
             return {
                 curTabIndex: 0
             };
         },
         computed: {
-            initData () {
-                return this.data;
-            },
             selectedLinealDatas () {
                 const arr = this.selectedOptions.map((item, index, list) => {
                     return {
@@ -217,10 +209,10 @@
 
                     ...(
                         this.selectedOptions.length
-                            ? this.selectedLastOption.children.length && this.curTabIndex + 1 > this.selectedOptions.length
+                            ? this.selectedObj.children.length && this.curTabIndex + 1 > this.selectedOptions.length
                                 ? [
                                     {
-                                        data: this.selectedLastOption.children
+                                        data: this.selectedObj.children
                                     }
                                 ]
                                 : []
@@ -242,9 +234,8 @@
         methods: {
             // 初始化
             init () {
-                this.selectedValue = this.activeValue;
                 this.curTabIndex = this.selectedOptions.length
-                    ? this.selectedLastOption.children.length
+                    ? this.selectedObj.children.length
                         ? this.selectedOptions.length
                         : this.selectedOptions.length - 1
                     : 0;
@@ -255,7 +246,20 @@
                 this.showMode = "default";
                 this.curTabIndex = 0;
             },
-            clickItemCb (node) {
+            clickItem (node) {
+                // 避免重复点击
+                if (JSON.stringify(this.selectedValue) !== JSON.stringify(node.keys)) {
+                    this.selectedValue = node.keys;
+
+                    const obj = {
+                        value: this.selectedValue,
+                        selectedOptions: this.selectedOptions,
+                        tabIndex: this.curTabIndex
+                    };
+                    this.$emit("change", obj);
+                    !node.children.length && this.$emit("finish", obj);
+                }
+
                 // 区分展示方式
                 if (this.showMode === "default" && node.children.length) {
                     this.curTabIndex = this.curTabIndex + 1;