bri-components 1.2.54 → 1.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.2.54",
+    "version": "1.2.55",
     "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.42",
+        "bri-datas": "^1.0.47",
         "jshint": "^2.12.0",
         "jsonlint": "^1.6.3",
         "minio": "7.1.0",

package/src/components/controls/{BriControlInput.vue → DshControlInput.vue}

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="BriControlInput"
+        class="DshControlInput"
         @mouseenter="isHover = true"
         @mouseleave="isHover = false"
     >
@@ -13,7 +13,7 @@
                     class="overflow"
                     :list="value"
                     :propsObj="{
-                        disabled: !canEdit,
+                        disabled: disabled,
                         closable: true
                     }"
                     @delete="clickDeleteItem"
@@ -47,13 +47,13 @@
         <!-- 图标 -->
         <template>
             <Icon
-                v-if="!$isEmptyData(value) && propsObj._clearable && isHover"
+                v-if="propsObj._clearable && !$isEmptyData(value) && isHover"
                 class="icon-close"
                 type="ios-close-circle"
                 @click.stop="clickClear"
             />
             <Icon
-                v-else
+                v-else-if="inputIcon"
                 class="icon-default"
                 :type="inputIcon"
             />
@@ -63,14 +63,13 @@
 
 <script>
     export default {
-        name: "BriControlInput",
+        name: "DshControlInput",
         props: {
-            canEdit: {
+            disabled: {
                 type: Boolean,
-                default: true
+                default: false
             },
             value: [Array, Object, String],
-            inputIcon: String,
             propsObj: {
                 type: Object,
                 default () {
@@ -83,7 +82,11 @@
                 isHover: false
             };
         },
-        computed: {},
+        computed: {
+            inputIcon () {
+                return this.propsObj._icon;
+            }
+        },
         created () {},
         methods: {
             clickDeleteItem (...params) {
@@ -97,7 +100,7 @@
 </script>
 
 <style lang="less" scoped>
-    .BriControlInput {
+    .DshControlInput {
         height: 32px;
         padding: 0px 0px 0px 7px;
         line-height: 24px;
@@ -133,9 +136,9 @@
     }
 </style>
 <style lang="less">
-    .BriControlInput {
+    .DshControlInput {
         .ivu-icon {
-            padding: 5px;
+            padding: 2px 5px;
             color: @placeholder-disabled-color;
         }
 

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

@@ -4,65 +4,63 @@
         v-if="!multipleMode && canEdit"
         class="DshCascader"
     >
-        <!-- 弹框方式 -->
-        <template v-if="showType === 'custom'">
-            <bri-control-input
-                :class="{
-                    ...commonClass,
-                    'DshCascader-custom': true
-                }"
-                :canEdit="finalCanEdit"
-                :value="curValName"
-                :inputIcon="inputIcon"
-                :propsObj="selfPropsObj"
-                @clear="clickClear"
-                @click.native="clickInput"
-            ></bri-control-input>
-
-            <!-- 弹框 -->
-            <cascader-modal
-                :showModal="showModal"
-                v-model="curValList"
-                :data="cascaderData"
-                :propsObj="selfPropsObj"
-                @close="closeModal"
-                @change="change"
-            ></cascader-modal>
-        </template>
-
         <!-- 简洁方式 -->
-        <template v-else-if="showType === 'simple'">
+        <template v-if="showType === 'simple'">
             <Cascader
-                class="DshCascader-simple"
-                :value="curValList"
+                :value="curValKeyList"
                 :data="renderCascaderData"
                 :placeholder="selfPropsObj._placeholder"
                 :disabled="selfPropsObj._disabled"
-                :change-on-select="changeOnSelect"
                 :clearable="selfPropsObj._clearable"
                 :size="selfPropsObj._size"
-                :filterable="selfPropsObj._filterable"
+                :filterable="filterable"
                 :render-format="renderFormat"
+                :change-on-select="changeOnSelect"
                 :transfer="selfPropsObj._transfer"
                 :transfer-class-name="selfPropsObj._transferClassName"
                 :load-data="loadData"
-                @on-visible-change="visibleChange"
-                @on-change="changeVal"
-                @click="clickCascader"
+                @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="selfPropsObj._disabled"
+                    :propsObj="selfPropsObj"
+                    @clear="clickClear"
+                ></dsh-control-input>
+            </cascader-modal>
+        </template>
+
         <!-- 确认面板方式 -->
         <template v-else>
             <cascader-picker
-                class="DshCascader-simple"
                 v-model="showModal"
                 :activeValue="curValList"
-                :activeStr="curValName"
                 :data="cascaderData"
                 :propsObj="selfPropsObj"
-                @confirm="clickConfirm"
-            ></cascader-picker>
+                @confirm="confirmCb"
+            >
+                <dsh-control-input
+                    :class="commonClass"
+                    :value="curValName"
+                    :disabled="selfPropsObj._disabled"
+                    :propsObj="selfPropsObj"
+                    @clear="clickClear"
+                ></dsh-control-input>
+            </cascader-picker>
         </template>
     </div>
 
@@ -79,9 +77,7 @@
             maxWidth="200"
             :transfer="true"
         >
-            <div :class="{
-                ...commonClass
-            }">
+            <div :class="commonClass">
                 {{ showVal }}
             </div>
         </bri-tooltip>
@@ -89,9 +85,7 @@
         <!-- 无值 -->
         <div
             v-else
-            :class="{
-            ...commonClass
-        }"
+            :class="commonClass"
         >
             {{ emptyShowVal }}
         </div>
@@ -102,62 +96,70 @@
         v-else-if="multipleMode && canEdit"
         class="DshCascaders"
     >
-        <!-- 简洁方式 -->
+        <!-- 简洁方式 多选的filterable必须是false，不然出bug -->
         <template v-if="showType === 'simple'">
-            <!-- 多选 多选的filterable必须是false，不然出bug -->
             <Cascader
-                class="DshCascaders-wrap"
-                :value="multipleSelectVal"
                 :data="renderCascaderData"
                 :disabled="selfPropsObj._disabled"
-                :change-on-select="changeOnSelect"
                 :clearable="selfPropsObj._clearable"
                 :size="selfPropsObj._size"
                 :filterable="false"
+                :render-format="renderFormat"
+                :change-on-select="changeOnSelect"
                 :transfer="selfPropsObj._transfer"
                 :transfer-class-name="selfPropsObj._transferClassName"
                 :load-data="loadData"
-                @on-visible-change="multipleVisibleChange"
-                @on-change="createItem"
+                @on-visible-change="changeMulVisible"
+                @on-change="changeMulSelect"
+                @click.native="clickCascader"
             >
-                <bri-control-input
-                    :class="{
-                        ...commonClass,
-                        'DshCascaders-input-row': isFullRow
-                    }"
-                    :canEdit="finalCanEdit"
+                <dsh-control-input
+                    :class="commonClass"
                     :value="curValNameList"
-                    :inputIcon="inputIcon"
+                    :disabled="selfPropsObj._disabled"
                     :propsObj="selfPropsObj"
                     @deleteItem="clickDeleteItem"
                     @clear="clickClear"
                     @click.native="clickInput"
-                ></bri-control-input>
+                ></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="selfPropsObj._disabled"
+                    :propsObj="selfPropsObj"
+                    @deleteItem="clickDeleteItem"
+                    @clear="clickClear"
+                ></dsh-control-input>
+            </cascader-modal>
+        </template>
+
         <!-- 确认面板方式 -->
         <template v-else>
             <cascader-picker
-                class="DshCascader-simple"
                 v-model="showModal"
                 :data="cascaderData"
                 :propsObj="selfPropsObj"
-                @confirm="clickConfirm"
+                @confirm="confirmMulCb"
             >
-                <bri-control-input
-                    :class="{
-                        ...commonClass,
-                        'DshCascaders-input-row': isFullRow
-                    }"
-                    :canEdit="finalCanEdit"
+                <dsh-control-input
+                    :class="commonClass"
                     :value="curValNameList"
-                    :inputIcon="inputIcon"
+                    :disabled="selfPropsObj._disabled"
                     :propsObj="selfPropsObj"
                     @deleteItem="clickDeleteItem"
                     @clear="clickClear"
-                    @click.native="clickInput"
-                ></bri-control-input>
+                ></dsh-control-input>
             </cascader-picker>
         </template>
     </div>
@@ -201,7 +203,7 @@
 <script>
     import cascaderMixin from "./cascaderMixin.js";
     import cascaderPicker from "./cascaderPicker.vue";
-    import cascaderModal from "./InfoCascader.vue";
+    import cascaderModal from "./cascaderModal.vue";
 
     export default {
         name: "DshCascader",
@@ -215,48 +217,49 @@
         props: {},
         data () {
             return {
-                curSelectVal: [],
-
-                renderDataFlag: true,
-                clickInputFlag: true,
+                renderAll: false,
+                clickFlag: true,
                 isVisible: false,
-                multipleSelectVal: [] // 必须要，每次选完之后再选，需清空上次选的
+                curSelectVal: []
             };
         },
         computed: {
             selfPropsObj () {
                 return {
+                    _icon: this.isVisible ? "ios-arrow-up" : "ios-arrow-down",
                     _showMode: "default", // 只有单选模式有效，值为"default", "custom", "simple"
                     _transfer: true,
 
-                    ...this.basePropsObj
+                    ...this.basePropsObj,
+
+                    // 默认模式-多选时 暂不支持搜索
+                    _filterable: this.basePropsObj._showMode === "simple" && this.multipleMode
+                        ? false
+                        : this.basePropsObj._filterable
                 };
             },
-            showType () {
-                return this.selfPropsObj._showMode;
-            },
-            inputIcon () {
-                return this.isVisible ? "ios-arrow-up" : "ios-arrow-down";
-            },
 
             renderCascaderData () {
-                return this.renderDataFlag
-                    ? this.cascaderData.map(item => {
+                return this.renderAll
+                    ? this.cascaderData
+                    : this.cascaderData.map(item => {
                         return {
                             ...item,
                             children: []
                         };
-                    })
-                    : this.cascaderData;
+                });
             }
         },
         created () {},
         methods: {
+            /* --------- 简洁方式 ------- */
             // 动态加载数据
             loadData (treeItem, cb) {
-                let list = this.$getTreeLinealDatas(treeItem.keys, this.cascaderData, undefined, this.saveKey);
-                treeItem.children = list[list.length - 1]
-                    ? list[list.length - 1].children.map(item =>
+                const list = this.$getTreeLinealDatas(treeItem.keys, this.cascaderData, undefined, this.saveKey);
+                const lastOption = list[list.length - 1];
+
+                treeItem.children = lastOption
+                    ? lastOption.children.map(item =>
                         ({
                             ...item,
                             children: []
@@ -266,26 +269,21 @@
 
                 cb();
             },
-
-            /* -------- 单选模式 -输入框方式 ------- */
-            // 默认方式的
             clickCascader () {
-                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);
-                    }
+                if (
+                    !this.selfPropsObj._disabled &&
+                    this.filterable === true &&
+                    this.renderAll === false &&
+                    this.clickFlag === true
+                ) {
+                    this.clickFlag = false; // 这个处理其实觉大概率没必要，有没有不受影响
+                    setTimeout(() => {
+                        this.renderAll = true;
+                    }, 0);
                 }
             },
-            // 默认方式的 -展开和关闭弹窗时触发
-            visibleChange (bool) {
+            // 简洁方式-单选 -展开和关闭弹窗时触发
+            changeVisible (bool) {
                 if (bool) {
                     this.isVisible = bool;
                 } else {
@@ -294,29 +292,26 @@
                     }, 0);
                 }
             },
-            // 默认方式的 -值改变
-            changeVal (val, ...params) {
-                if (this.isVisible || !val.length) {
-                    this.curValList = val;
+            // 简洁方式-单选 -选项变化
+            changeSelect (value, selectedOptions) {
+                if (this.isVisible || !value.length) {
+                    this.curValList = selectedOptions.map(item => item[this.saveKey]);
                 }
             },
-
-            /* --------- 多选模式 -------- */
-            // 展开和关闭弹窗时触发
-            multipleVisibleChange (bool) {
+            // 简洁方式-多选 -展开和关闭弹窗时触发
+            changeMulVisible (bool) {
                 this.isVisible = bool;
 
-                if (bool === false) {
-                    this.clickConfirm();
+                if (bool === false && this.curSelectVal.length) {
+                    this.confirmMulCb(this.curSelectVal);
 
                     this.curSelectVal = [];
-                    this.multipleSelectVal = [];
                 }
             },
-            // 添加
-            createItem (val, ...params) {
+            // 简洁方式-多选 -选项变化
+            changeMulSelect (value, selectedOptions) {
                 if (this.isVisible) {
-                    this.curSelectVal = val;
+                    this.curSelectVal = selectedOptions.map(item => item[this.saveKey]);
                 }
             }
         },
@@ -330,31 +325,11 @@
 
 <style lang="less">
     .DshCascader {
-        width: 100%;
-
-        //新模式
-        &-custom {
-            width: 100%;
-        }
 
-        // 简单模式
-        &-simple {
-            width: 100%;
-        }
     }
 
     // 多选
     .DshCascaders {
-        &-wrap {
-            width: 100%;
-        }
-
-        &-input {
-            &-row {
-
-            }
-        }
-
         &-show {
             height: auto;
 

package/src/components/controls/base/DshCascader/cascaderMixin.js

@@ -14,9 +14,10 @@ export default {
         basePropsObj () {
             const _joinSymbol = this.propsObj._joinSymbol || "/";
             return {
+                _showMode: "default",
+                _filterable: true,
                 _cascaderFilterVals: [], // 过滤级联数据，只保留的数组
                 _changeOnSelect: false, // 每级菜单都可取值
-                _filterable: true,
                 _renderFormat: (labels) => labels.join(_joinSymbol),
 
                 ...this.propsObj,
@@ -28,6 +29,12 @@ export default {
                 _joinSymbol: _joinSymbol // 级联拼接符
             };
         },
+        showType () {
+            return this.selfPropsObj._showMode;
+        },
+        filterable () {
+            return this.selfPropsObj._filterable;
+        },
         cascaderLevel () {
             return this.selfPropsObj._cascaderLevel;
         },
@@ -95,12 +102,15 @@ export default {
 
             return loop(this.originData, this.cascaderLevel, undefined, this.cascaderFilterVals, this.isMobile);
         },
+        curValKeyList () {
+            return this.$getTreeLinealDatas(this.curValList, this.cascaderData, this.valueKey, this.saveKey);
+        },
         curValName: {
             get () {
                 return this.transformFullName(this.curValList);
             },
-            set (val) {
-                if (!val) {
+            set (str) {
+                if (!str) {
                     this.clickClear();
                 }
             }
@@ -134,54 +144,33 @@ export default {
         clickClear () {
             this.curValList = [];
         },
-        // 删除
-        clickDeleteItem (nameItem, index) {
-            this.curValList.splice(index, 1);
-            this.curValList = [...this.curValList];
-        },
-        confirmCb (val, selectedOptions) {
-            this.curValList = val;
+        confirmCb (selectedValue, selectedOptions) {
+            this.curValList = selectedValue;
 
             this.closeModal();
         },
-        confirmMulCb (val, selectedOptions) {
-            if (this.curValList.some(item => JSON.stringify(item) == JSON.stringify(val))) {
+        confirmMulCb (selectedValue, selectedOptions) {
+            if (this.curValList.some(item => JSON.stringify(item) === JSON.stringify(selectedValue))) {
                 this.$Message.error({
-                    content: `"${this.transformFullName(val)}"已选择，请勿重复选择！`,
+                    content: `"${this.transformFullName(selectedValue)}"已选择，请勿重复选择！`,
                     duration: 4
                 });
             } else {
-                this.curValList = [...this.curValList, val];
+                this.curValList = [...this.curValList, selectedValue];
 
                 this.closeModal();
             }
         },
-
-        /* --------- 级联面板 -------- */
-        clickConfirm (val, selectedOptions) {
-            if (val.length) {
-                if (!this.changeOnSelect && !selectedOptions.slice(-1)[0].isLeaf) {
-                    this.$Message.error({
-                        content: "请选择到末级数据！",
-                        duration: 2
-                    });
-                } else {
-                    this.multipleMode
-                        ? this.confirmMulCb(val, selectedOptions)
-                        : this.confirmCb(val, selectedOptions);
-                }
-            } else {
-                this.$Message.error({
-                    content: "请选择数据！",
-                    duration: 2
-                });
-            }
+        // 删除
+        clickDeleteItem (nameItem, index) {
+            this.curValList.splice(index, 1);
+            this.curValList = [...this.curValList];
         },
 
         /* --------- 工具类 -------- */
         // 转化出级联全名
-        transformFullName (val) {
-            return this.renderFormat(this.$getTreeLinealDatas(val, this.cascaderData, this.nameKey, this.saveKey));
+        transformFullName (value) {
+            return this.renderFormat(this.$getTreeLinealDatas(value, this.cascaderData, this.nameKey, this.saveKey));
         }
     }
 };