bri-components 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.1.4",
+    "version": "1.1.6",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",

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

@@ -1,11 +1,11 @@
 <template>
-    <div :class="`DshCascader`">
-        <!-- 编辑和disabled模式 -->
+    <div class="DshCascader">
+        <!-- 编辑 -->
         <template v-if="canEdit">
-            <!-- 多选 多选模式的filterable必须是false，不然出bug -->
+            <!-- 多选 多选的filterable必须是false，不然出bug -->
             <template v-if="useMultiple === true">
                 <Cascader
-                    style="width: 100%;"
+                    class="DshCascader-multiple"
                     :value="multipleSelectVal"
                     :data="renderCascaderData"
                     :disabled="!finalCanEdit"
@@ -19,101 +19,167 @@
                     @on-visible-change="multipleVisibleChange"
                     @on-change="createItem"
                 >
-                    <dsh-control-define
-                        :value="valTags"
-                        :canEdit="canEdit"
-                        :finalCanEdit="finalCanEdit"
-                        :propsObj="{
-                            ...selfPropsObj,
-                            _multiplerow: selfPropsObj._span == 24 || !selfPropsObj._span
+                    <div
+                        :class="{
+                            ...commonClass,
+                            'DshCascader-multiple-input': true,
+                            'DshCascader-multiplerow': isSelfRow,
                         }"
-                        @delete="deleteItem"
-                    ></dsh-control-define>
+                        @click="clickInput"
+                    >
+                        <!-- 有值 -->
+                        <div
+                            v-if="!$isEmptyData(curVal)"
+                            class="hasdata"
+                        >
+                            <dsh-tags
+                                class="hasdata-multiple"
+                                :list="curValNameList"
+                                :propsObj="{
+                                    closable: canEdit,
+                                    size: isSelfRow ? 'medium' : 'default'
+                                }"
+                                @delete="deleteItem"
+                            ></dsh-tags>
+                        </div>
+
+                        <!-- 无值 -->
+                        <span
+                            v-else
+                            class="nodata"
+                        >
+                            {{ emptyShowVal }}
+                        </span>
+                    </div>
                 </Cascader>
             </template>
 
             <!-- 单选 -->
             <template v-else>
-                <!-- 弹框模式 -->
-                <template v-if="selfPropsObj._showMode === 'custom'">
+                <!-- 弹框方式 -->
+                <template v-if="showMode === 'custom'">
                     <div
-                        :class="commonClass"
+                        :class="{
+                            ...commonClass,
+                            'DshCascader-custom-input': true
+                        }"
+                        class
                         @click="openModal"
                     >
+                        <!-- 有值 -->
                         <div
-                            v-if="value[controlKey] && value[controlKey].length"
-                            class="DshCascader-single-val"
+                            v-if="!$isEmptyData(curValList)"
+                            class="hasdata"
+                            @mouseenter="isHover = true"
+                            @mouseleave="isHover = false"
                         >
-                            <span :class="{
-                                'DshCascader-single-val-text': true,
-                                'DshCascader-single-val-text-disabled': !finalCanEdit,
-                            }">
-                                {{ $getTreeLinealDatas(value[controlKey], cascaderData, "name").join("/") }}
+                            <span class="hasdata-text">
+                                {{ curValNameStr }}
                             </span>
+
                             <Icon
-                                v-if="selfPropsObj._clearable"
-                                class="DshCascader-single-val-clear"
+                                v-if="selfPropsObj._clearable && isHover"
+                                class="hasdata-clear"
                                 type="md-close"
                                 @click.stop="clickClear"
                             />
+                            <Icon
+                                v-else
+                                class="hasdata-clear"
+                                type="ios-arrow-down"
+                            />
                         </div>
 
+                        <!-- 无值 -->
                         <span
                             v-else
-                            class="DshCascader-single-placeholder"
+                            class="nodata"
                         >
-                            {{ selfPropsObj._placeholder }}
+                            {{ emptyShowVal }}
                         </span>
                     </div>
 
-                    <template v-if="showModal">
-                        <info-cascader
-                            v-model="value[controlKey]"
-                            :showModal="showModal"
-                            :propsObj="selfPropsObj"
-                            :data="cascaderData"
-                            @change="change"
-                            @changeShowModal="changeShowModal"
-                        ></info-cascader>
-                    </template>
+                    <!-- 内容弹框 -->
+                    <info-cascader
+                        v-if="showModal"
+                        :showModal="showModal"
+                        v-model="curValList"
+                        :data="cascaderData"
+                        :propsObj="selfPropsObj"
+                        @change="change"
+                        @changeShowModal="changeShowModal"
+                    ></info-cascader>
                 </template>
 
-                <!-- 输入框模式 -->
-                <Cascader
-                    v-else
-                    style="width: 100%;"
-                    :class="{
-                        'DshCascader-disabled': !finalCanEdit
-                    }"
-                    :value="value[controlKey]"
-                    :data="renderCascaderData"
-                    :placeholder="selfPropsObj._placeholder"
-                    :disabled="!finalCanEdit"
-                    :change-on-select="selfPropsObj._changeOnSelect"
-                    :clearable="selfPropsObj._clearable"
-                    :size="selfPropsObj._size"
-                    :filterable="selfPropsObj._filterable && finalCanEdit"
-                    :transfer="selfPropsObj._transfer"
-                    :transfer-class-name="selfPropsObj._transferClassName"
-                    :load-data="loadData"
-                    @on-visible-change="visibleChange"
-                    @on-change="changeVal"
-                    @click.native.stop="clickInput"
-                ></Cascader>
+                <!-- 输入框方式 -->
+                <template v-else>
+                    <Cascader
+                        class="DshCascader-single"
+                        :value="curValList"
+                        :data="renderCascaderData"
+                        :placeholder="selfPropsObj._placeholder"
+                        :disabled="!finalCanEdit"
+                        :change-on-select="selfPropsObj._changeOnSelect"
+                        :clearable="selfPropsObj._clearable"
+                        :size="selfPropsObj._size"
+                        :filterable="selfPropsObj._filterable"
+                        :transfer="selfPropsObj._transfer"
+                        :transfer-class-name="selfPropsObj._transferClassName"
+                        :load-data="loadData"
+                        @on-visible-change="visibleChange"
+                        @on-change="changeVal"
+                        @click.stop="clickCascader"
+                    ></Cascader>
+                </template>
             </template>
         </template>
 
-        <!-- 查看模式 -->
-        <dsh-control-define
-            v-else
-            :value="valTags"
-            :canEdit="canEdit"
-            :finalCanEdit="finalCanEdit"
-            :propsObj="{
-                ...selfPropsObj,
-                _multiplerow: selfPropsObj._span == 24 || !selfPropsObj._span
-            }"
-        ></dsh-control-define>
+        <!-- 查看 -->
+        <template v-else>
+            <div :class="{
+                ...commonClass,
+                'DshCascader-show': true,
+                'DshCascader-multiplerow': isSelfRow,
+            }">
+                <!-- 有值 -->
+                <div
+                    v-if="!$isEmptyData(curVal)"
+                    class="hasdata"
+                >
+                    <!-- 多选 -->
+                    <dsh-tags
+                        v-if="useMultiple"
+                        class="hasdata-multiple"
+                        :list="curValNameList"
+                        :propsObj="{
+                            closable: !canEdit,
+                            size: isSelfRow ? 'medium' : 'default'
+                        }"
+                    ></dsh-tags>
+
+                    <!-- 单选 -->
+                    <Ctooltip
+                        v-else
+                        :content="curValNameStr"
+                        placement="top"
+                        maxWidth="200"
+                        :transfer="true"
+                    >
+                        <div class="hasdata-single">
+                            {{ curValNameStr }}
+                        </div>
+                    </Ctooltip>
+                </div>
+
+                <!-- 无值 -->
+                <span
+                    v-else
+                    class="nodata"
+                >
+                    {{ emptyShowVal }}
+                </span>
+            </div>
+        </template>
     </div>
 </template>
 
@@ -161,33 +227,32 @@
                 renderDataFlag: true,
                 clickInputFlag: true,
                 isVisible: false,
-                multipleSelectVal: [],
+                multipleSelectVal: [], // 必须要，每次选完之后再选，需清空上次选的
                 selectVal: [],
 
+                isHover: false,
                 showModal: false,
-                modalVal: [],
-                operationMap: {
-                    cancel: {
-                        name: "取消",
-                        type: "clickCancel",
-                        event: "clickCancel",
-                        class: "z-default"
-                    },
-                    confirm: {
-                        name: "确定",
-                        btnType: "primary",
-                        type: "clickConfirm",
-                        event: "clickConfirm",
-                        class: "z-primary"
-                    }
-                }
+                modalVallist: []
             };
         },
         computed: {
+            // 是否多选模式
+            useMultiple () {
+                return ["regions", "cascaders"].includes(this.propsObj._type);
+            },
+            selfPropsObj () {
+                return {
+                    _filterable: true,
+                    _showMode: false,
+                    _transfer: true,
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
             cascaderData: {
                 get () {
                     return loop(
-                        ["region", "regions"].includes(this.selfPropsObj._type) ? regionData : this.selfPropsObj._data,
+                        ["region", "regions"].includes(this.propsObj._type) ? regionData : this.selfPropsObj._data,
                         this.selfPropsObj._cascaderLevel,
                         undefined,
                         this.selfPropsObj._cascaderFilterVals
@@ -206,45 +271,26 @@
                     : this.cascaderData;
             },
 
-            selfPropsObj () {
-                return {
-                    _filterable: true,
-                    _showMode: false,
-                    _transfer: true,
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj
-                };
+            showMode () {
+                return this.selfPropsObj._showMode;
             },
-            useMultiple () {
-                return ["regions", "cascaders"].includes(this.selfPropsObj._type);
+            isSelfRow () {
+                return this.selfPropsObj._span === 24 || !this.selfPropsObj._span;
             },
-            valTags () {
-                return this.value[this.controlKey]
-                    ? this.value[this.controlKey].map(item => this.$getTreeLinealDatas(item, this.cascaderData, "name").join("/"))
-                    : [];
-            }
 
-            // selfModalPropsObj () {
-            //     return {
-            //         mode: "default",
-            //         title: this.selfPropsObj._placeholder
-            //     };
-            // },
-            // showVal () {
-            //     return this.useMultiple
-            //         ? this.valTags.join("、")
-            //         : this.$getTreeLinealDatas(this.value[this.controlKey], this.cascaderData, "name").join(["region"].includes(this.selfPropsObj._type) ? "" : "/");
-            // }
-        },
-        created () {
-            this.init();
+            // 单选用的展示文字
+            curValNameStr () {
+                return this.$getTreeLinealDatas(this.curValList, this.cascaderData, "name").join("/");
+            },
+            // 多选用的展示文字
+            curValNameList () {
+                return this.curValList.map(item =>
+                    this.$getTreeLinealDatas(item, this.cascaderData, "name").join("/")
+                );
+            }
         },
+        created () {},
         methods: {
-            init () {
-                if (!this.value[this.controlKey]) {
-                    this.$set(this.value, this.controlKey, []);
-                }
-            },
             // 动态加载数据
             loadData (treeItem, cb) {
                 let list = this.$getTreeLinealDatas(treeItem.codeArr, this.cascaderData);
@@ -253,21 +299,25 @@
                 cb();
             },
 
-            /* 多选使用 */
+            /* --------- 多选使用 -------- */
+            clickInput (e) {
+                if (!this.finalCanEdit) {
+                    e.stopPropagation();
+                }
+            },
             // 展开和关闭弹窗时触发
             multipleVisibleChange (bool) {
                 this.isVisible = bool;
 
                 if (bool === false) {
                     if (this.selectVal.length) {
-                        if (this.value[this.controlKey].some(item => JSON.stringify(item) == JSON.stringify(this.selectVal))) {
+                        if (this.curValList.some(item => JSON.stringify(item) == JSON.stringify(this.selectVal))) {
                             this.$Message.error({
                                 content: `"${this.$getTreeLinealDatas(this.selectVal, this.cascaderData, "name").join("/")}"已选择，请勿重复选择！`,
                                 duration: 5
                             });
                         } else {
-                            this.value[this.controlKey] = [...this.value[this.controlKey], this.selectVal];
-                            this.change();
+                            this.curValList = [...this.curValList, this.selectVal];
                         }
                     }
 
@@ -283,12 +333,29 @@
             },
             // 删除
             deleteItem (item, index) {
-                this.value[this.controlKey].splice(index, 1);
-                this.change();
+                this.curValList.splice(index, 1);
+                this.curValList = [...this.curValList];
             },
 
-            /* ----------- 单选使用 ---------- */
-            clickInput () {
+            /* -------- 单选使用 ------- */
+            // 弹窗方式的 -打开模态框
+            openModal () {
+                if (this.finalCanEdit) {
+                    this.modalVallist = this.curValList;
+                    this.showModal = true;
+                }
+            },
+            // 弹窗方式的 -关闭模态框
+            changeShowModal (bool) {
+                this.showModal = bool;
+            },
+            // 弹窗方式的 -点击清除
+            clickClear () {
+                this.curValList = [];
+            },
+
+            // 默认方式的
+            clickCascader () {
                 if (this.finalCanEdit) {
                     if (
                         ["cascader"].includes(this.selfPropsObj._type) &&
@@ -303,7 +370,7 @@
                     }
                 }
             },
-            // 展开和关闭弹窗时触发
+            // 默认方式的 -展开和关闭弹窗时触发
             visibleChange (bool) {
                 if (bool) {
                     this.isVisible = bool;
@@ -313,41 +380,16 @@
                     }, 0);
                 }
             },
-            changeVal (selectVal, ...params) {
-                if (this.isVisible || !selectVal.length) {
-                    this.value[this.controlKey] = selectVal;
-                    this.$emit("change", this.value[this.controlKey], ...params);
-                }
-            },
-
-            // 点击清除
-            clickClear () {
-                this.value[this.controlKey] = [];
-                this.change();
-            },
-            openModal () {
-                if (this.finalCanEdit) {
-                    this.modalVal = this.value[this.controlKey];
-                    this.showModal = true;
+            // 默认方式的 -值改变
+            changeVal (val, ...params) {
+                if (this.isVisible || !val.length) {
+                    this.curValList = val;
                 }
-            },
-            changeShowModal (val) {
-                this.showModal = val;
-            },
-            clickConfirm () {
-                this.value[this.controlKey] = this.modalVal;
-                this.showModal = false;
-
-                this.change();
-            },
-            clickCancel () {
-                this.showModal = false;
             }
         },
         watch: {
             "propsObj._cascaderLevel" () {
                 this.value[this.controlKey] = [];
-                this.init();
             }
         }
     };

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

@@ -9,8 +9,8 @@
                 class="InfoCascader-search"
                 :value="searchData"
                 :propsObj="inputPropsObj"
-            >
-            </dsh-input>
+            ></dsh-input>
+
             <div class="InfoCascader-content">
                 <div class="InfoCascader-content-left">
                     <Tree
@@ -30,6 +30,7 @@
                     </p>
                 </div>
             </div>
+
             <div class="InfoCascader-footer">
                 <dsh-buttons
                     class="InfoCascader-footer-btns"
@@ -45,25 +46,26 @@
     export default {
         name: "InfoCascader",
         props: {
+            showModal: Boolean,
+
             value: {
                 type: Array,
                 default () {
                     return [];
                 }
             },
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
             data: {
                 type: Array,
                 default () {
                     return [];
                 }
             },
-            showModal: Boolean
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
         },
         data () {
             return {