bri-components 1.2.53 → 1.2.54

package/package.json

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

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

@@ -1,246 +1,244 @@
 <template>
-    <div class="DshCascader">
-        <!-- 编辑 -->
-        <template v-if="canEdit">
-            <!-- 多选 多选的filterable必须是false，不然出bug -->
-            <template v-if="multipleMode">
-                <Cascader
-                    class="DshCascader-edit-multiple"
-                    :value="multipleSelectVal"
-                    :data="renderCascaderData"
-                    :disabled="selfPropsObj._disabled"
-                    :change-on-select="changeOnSelect"
-                    :clearable="selfPropsObj._clearable"
-                    :size="selfPropsObj._size"
-                    :filterable="false"
-                    :transfer="selfPropsObj._transfer"
-                    :transfer-class-name="selfPropsObj._transferClassName"
-                    :load-data="loadData"
-                    @on-visible-change="multipleVisibleChange"
-                    @on-change="createItem"
-                >
-                    <bri-control-input
-                        :class="{
-                            ...commonClass,
-                            'DshCascader-edit-multiple-edit': true,
-                            'DshCascader-row-edit': isFullRow && multipleMode
-                        }"
-                        :canEdit="finalCanEdit"
-                        :value="curValNameList"
-                        :inputIcon="inputIcon"
-                        :propsObj="selfPropsObj"
-                        @deleteItem="clickDeleteItem"
-                        @clear="clickClear"
-                        @click.native="clickInput"
-                    ></bri-control-input>
-                </Cascader>
-            </template>
-
-            <!-- 单选 -->
-            <template v-else>
-                <!-- 弹框方式 -->
-                <template v-if="showMode === 'custom'">
-                    <bri-control-input
-                        :class="{
-                            ...commonClass,
-                            'DshCascader-edit-custom': true
-                        }"
-                        :canEdit="finalCanEdit"
-                        :value="curValName"
-                        :inputIcon="inputIcon"
-                        :propsObj="selfPropsObj"
-                        @clear="clickClear"
-                        @click.native="openModal"
-                    ></bri-control-input>
+    <!-- 单选模式 编辑 -->
+    <div
+        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>
 
-                    <!-- 内容弹框 -->
-                    <info-cascader
-                        v-if="showModal"
-                        :showModal="showModal"
-                        v-model="curValList"
-                        :data="cascaderData"
-                        :propsObj="selfPropsObj"
-                        @changeShowModal="toggleModal"
-                        @change="change"
-                    ></info-cascader>
-                </template>
+            <!-- 弹框 -->
+            <cascader-modal
+                :showModal="showModal"
+                v-model="curValList"
+                :data="cascaderData"
+                :propsObj="selfPropsObj"
+                @close="closeModal"
+                @change="change"
+            ></cascader-modal>
+        </template>
 
-                <!-- 输入框方式 -->
-                <template v-else>
-                    <Cascader
-                        class="DshCascader-edit-single"
-                        :value="curValList"
-                        :data="renderCascaderData"
-                        :placeholder="selfPropsObj._placeholder"
-                        :disabled="selfPropsObj._disabled"
-                        :change-on-select="changeOnSelect"
-                        :clearable="selfPropsObj._clearable"
-                        :size="selfPropsObj._size"
-                        :filterable="selfPropsObj._filterable"
-                        :render-format="selfPropsObj._renderFormat"
-                        :transfer="selfPropsObj._transfer"
-                        :transfer-class-name="selfPropsObj._transferClassName"
-                        :load-data="loadData"
-                        @on-visible-change="visibleChange"
-                        @on-change="changeVal"
-                        @click="clickCascader"
-                    ></Cascader>
-                </template>
-            </template>
+        <!-- 简洁方式 -->
+        <template v-else-if="showType === 'simple'">
+            <Cascader
+                class="DshCascader-simple"
+                :value="curValList"
+                :data="renderCascaderData"
+                :placeholder="selfPropsObj._placeholder"
+                :disabled="selfPropsObj._disabled"
+                :change-on-select="changeOnSelect"
+                :clearable="selfPropsObj._clearable"
+                :size="selfPropsObj._size"
+                :filterable="selfPropsObj._filterable"
+                :render-format="renderFormat"
+                :transfer="selfPropsObj._transfer"
+                :transfer-class-name="selfPropsObj._transferClassName"
+                :load-data="loadData"
+                @on-visible-change="visibleChange"
+                @on-change="changeVal"
+                @click="clickCascader"
+            ></Cascader>
         </template>
 
-        <!-- 查看 -->
+        <!-- 确认面板方式 -->
         <template v-else>
-            <!-- 多选 -->
-            <template v-if="multipleMode">
-                <bri-tooltip
-                    :content="showMulVal"
-                    placement="top"
-                    maxWidth="200"
-                    :transfer="true"
-                >
-                    <div :class="{
-                        ...commonClass,
-                        'DshCascader-show-multiple': true,
-                        'DshCascader-row-show': !isUnitShow && isFullRow && multipleMode
-                    }">
-                        <!-- 有值 -->
-                        <dsh-tags
-                            v-if="!$isEmptyData(curValList)"
-                            class="text"
-                            :list="curValNameList"
-                        ></dsh-tags>
+            <cascader-picker
+                class="DshCascader-simple"
+                v-model="showModal"
+                :activeValue="curValList"
+                :activeStr="curValName"
+                :data="cascaderData"
+                :propsObj="selfPropsObj"
+                @confirm="clickConfirm"
+            ></cascader-picker>
+        </template>
+    </div>
 
-                        <!-- 无值 -->
-                        <template v-else>
-                            {{ emptyShowVal }}
-                        </template>
-                    </div>
-                </bri-tooltip>
-            </template>
+    <!-- 单选模式 查看 -->
+    <div
+        v-else-if="!multipleMode && !canEdit"
+        class="DshCascader"
+    >
+        <!-- 有值 -->
+        <bri-tooltip
+            v-if="!$isEmptyData(curValList)"
+            :content="showVal"
+            placement="top"
+            maxWidth="200"
+            :transfer="true"
+        >
+            <div :class="{
+                ...commonClass
+            }">
+                {{ showVal }}
+            </div>
+        </bri-tooltip>
 
-            <!-- 单选 -->
-            <template v-else>
-                <bri-tooltip
-                    :content="showVal"
-                    placement="top"
-                    maxWidth="200"
-                    :transfer="true"
-                >
-                    <div :class="{
+        <!-- 无值 -->
+        <div
+            v-else
+            :class="{
+            ...commonClass
+        }"
+        >
+            {{ emptyShowVal }}
+        </div>
+    </div>
+
+    <!-- 多选模式 编辑 -->
+    <div
+        v-else-if="multipleMode && canEdit"
+        class="DshCascaders"
+    >
+        <!-- 简洁方式 -->
+        <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"
+                :transfer="selfPropsObj._transfer"
+                :transfer-class-name="selfPropsObj._transferClassName"
+                :load-data="loadData"
+                @on-visible-change="multipleVisibleChange"
+                @on-change="createItem"
+            >
+                <bri-control-input
+                    :class="{
                         ...commonClass,
-                        'DshCascader-show-single': true
-                    }">
-                        {{ showVal }}
-                    </div>
-                </bri-tooltip>
-            </template>
+                        'DshCascaders-input-row': isFullRow
+                    }"
+                    :canEdit="finalCanEdit"
+                    :value="curValNameList"
+                    :inputIcon="inputIcon"
+                    :propsObj="selfPropsObj"
+                    @deleteItem="clickDeleteItem"
+                    @clear="clickClear"
+                    @click.native="clickInput"
+                ></bri-control-input>
+            </Cascader>
+        </template>
+
+        <!-- 确认面板方式 -->
+        <template v-else>
+            <cascader-picker
+                class="DshCascader-simple"
+                v-model="showModal"
+                :data="cascaderData"
+                :propsObj="selfPropsObj"
+                @confirm="clickConfirm"
+            >
+                <bri-control-input
+                    :class="{
+                        ...commonClass,
+                        'DshCascaders-input-row': isFullRow
+                    }"
+                    :canEdit="finalCanEdit"
+                    :value="curValNameList"
+                    :inputIcon="inputIcon"
+                    :propsObj="selfPropsObj"
+                    @deleteItem="clickDeleteItem"
+                    @clear="clickClear"
+                    @click.native="clickInput"
+                ></bri-control-input>
+            </cascader-picker>
         </template>
     </div>
-</template>
 
-<script>
-    import { regionData, userIndustryData } from "bri-datas";
-    import controlMixin from "../../controlMixin.js";
-    import InfoCascader from "./InfoCascader.vue";
+    <!-- 多选模式 查看 -->
+    <div
+        v-else
+        class="DshCascaders-show"
+    >
+        <!-- 有值 -->
+        <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>
+        </bri-tooltip>
 
-    const loop = function (data = [], level, parentCode, filterVals = []) {
-        if (data && filterVals.length) {
-            data = data.filter(item => filterVals.includes(item._key));
-        }
-        return data
-            ? data.reduce((arr, item) => {
-                const newItem = {
-                    ...item,
-                    value: item._key,
-                    label: item.name,
-                    codeArr: [ ...(parentCode || []), item._key ]
-                };
-                if (!level || level > item.level) {
-                    newItem.children = loop(item.children, level, newItem.codeArr);
-                    newItem.children.length && (newItem.loading = false); // 此代码为了所请求的级出现继续加载的箭头图标
-                } else {
-                    newItem.children = [];
-                }
-                arr.push(newItem);
+        <!-- 无值 -->
+        <div
+            v-else
+            :class="{
+                ...commonClass
+            }"
+        >
+            {{ emptyShowVal }}
+        </div>
+    </div>
+</template>
 
-                return arr;
-            }, [])
-            : [];
-    };
+<script>
+    import cascaderMixin from "./cascaderMixin.js";
+    import cascaderPicker from "./cascaderPicker.vue";
+    import cascaderModal from "./InfoCascader.vue";
 
     export default {
         name: "DshCascader",
         mixins: [
-            controlMixin
+            cascaderMixin
         ],
         components: {
-            InfoCascader
+            cascaderPicker,
+            cascaderModal
         },
         props: {},
         data () {
             return {
+                curSelectVal: [],
+
                 renderDataFlag: true,
                 clickInputFlag: true,
                 isVisible: false,
-                multipleSelectVal: [], // 必须要，每次选完之后再选，需清空上次选的
-                selectVal: [],
-
-                showModal: false
+                multipleSelectVal: [] // 必须要，每次选完之后再选，需清空上次选的
             };
         },
         computed: {
-            // 级联拼接符
-            joinSymbol () {
-                return this.propsObj._joinSymbol || "/";
-            },
-            nameKey () {
-                return this.propsObj._nameKey || "name";
-            },
-
             selfPropsObj () {
                 return {
-                    _showMode: false,
-                    _filterable: true,
-                    _changeOnSelect: false,
-                    _renderFormat: (label) => label.join(this.joinSymbol),
+                    _showMode: "default", // 只有单选模式有效，值为"default", "custom", "simple"
                     _transfer: true,
 
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj
+                    ...this.basePropsObj
                 };
             },
-            // 每级菜单都可取值
-            changeOnSelect () {
-                return this.isOnSearch ? true : this.selfPropsObj._changeOnSelect;
-            },
-            cascaderLevel () {
-                return this.selfPropsObj._cascaderLevel;
-            },
-            cascaderFilterVals () {
-                return this.selfPropsObj._cascaderFilterVals;
-            },
-            // 只有单选模式有效
-            showMode () {
+            showType () {
                 return this.selfPropsObj._showMode;
             },
             inputIcon () {
                 return this.isVisible ? "ios-arrow-up" : "ios-arrow-down";
             },
 
-            originData () {
-                return ["region", "regions"].includes(this.controlType)
-                    ? regionData
-                    : ["userIndustry"].includes(this.controlType)
-                        ? userIndustryData
-                        : this.selfPropsObj._data;
-            },
-            cascaderData: {
-                get () {
-                    return loop(this.originData, this.cascaderLevel, undefined, this.cascaderFilterVals);
-                },
-                set () {}
-            },
             renderCascaderData () {
                 return this.renderDataFlag
                     ? this.cascaderData.map(item => {
@@ -250,90 +248,24 @@
                         };
                     })
                     : this.cascaderData;
-            },
-            curValName () {
-                return this.$getTreeLinealDatas(this.curValList, this.cascaderData, this.nameKey).join(this.joinSymbol);
-            },
-            showVal () {
-                return this.$isEmptyData(this.curValList)
-                    ? this.emptyShowVal
-                    : this.curValName;
-            },
-            // 多选用
-            curValNameList () {
-                return this.curValList.map(item =>
-                    this.$getTreeLinealDatas(item, this.cascaderData, this.nameKey).join(this.joinSymbol)
-                );
-            },
-            showMulVal () {
-                return this.$isEmptyData(this.curValList)
-                    ? this.emptyShowVal
-                    : this.curValNameList.join("、");
             }
         },
         created () {},
         methods: {
             // 动态加载数据
             loadData (treeItem, cb) {
-                let list = this.$getTreeLinealDatas(treeItem.codeArr, this.cascaderData);
-                treeItem.children = list[list.length - 1].children.map(item => ({ ...item, children: [] }));
+                let list = this.$getTreeLinealDatas(treeItem.keys, this.cascaderData, undefined, this.saveKey);
+                treeItem.children = list[list.length - 1]
+                    ? list[list.length - 1].children.map(item =>
+                        ({
+                            ...item,
+                            children: []
+                        })
+                    )
+                    : [];
 
                 cb();
             },
-            // 点击清除
-            clickClear () {
-                this.curValList = [];
-            },
-
-            /* --------- 多选模式 -------- */
-            clickInput (e) {
-                if (!this.finalCanEdit) {
-                    e.stopPropagation();
-                }
-            },
-            // 展开和关闭弹窗时触发
-            multipleVisibleChange (bool) {
-                this.isVisible = bool;
-
-                if (bool === false) {
-                    if (this.selectVal.length) {
-                        if (this.curValList.some(item => JSON.stringify(item) === JSON.stringify(this.selectVal))) {
-                            this.$Message.error({
-                                content: `"${this.$getTreeLinealDatas(this.selectVal, this.cascaderData, this.nameKey).join(this.joinSymbol)}"已选择，请勿重复选择！`,
-                                duration: 5
-                            });
-                        } else {
-                            this.curValList = [...this.curValList, this.selectVal];
-                        }
-                    }
-
-                    this.selectVal = [];
-                    this.multipleSelectVal = [];
-                }
-            },
-            // 添加
-            createItem (selectVal, ...params) {
-                if (this.isVisible) {
-                    this.selectVal = selectVal;
-                }
-            },
-            // 删除
-            clickDeleteItem (item, index) {
-                this.curValList.splice(index, 1);
-                this.curValList = [...this.curValList];
-            },
-
-            /* -------- 单选模式 -弹窗方式 ------- */
-            // 弹窗方式的 -打开模态框
-            openModal () {
-                if (this.finalCanEdit) {
-                    this.showModal = true;
-                }
-            },
-            // 弹窗方式的 -关闭模态框
-            toggleModal (bool) {
-                this.showModal = bool;
-            },
 
             /* -------- 单选模式 -输入框方式 ------- */
             // 默认方式的
@@ -367,6 +299,25 @@
                 if (this.isVisible || !val.length) {
                     this.curValList = val;
                 }
+            },
+
+            /* --------- 多选模式 -------- */
+            // 展开和关闭弹窗时触发
+            multipleVisibleChange (bool) {
+                this.isVisible = bool;
+
+                if (bool === false) {
+                    this.clickConfirm();
+
+                    this.curSelectVal = [];
+                    this.multipleSelectVal = [];
+                }
+            },
+            // 添加
+            createItem (val, ...params) {
+                if (this.isVisible) {
+                    this.curSelectVal = val;
+                }
             }
         },
         watch: {
@@ -381,47 +332,40 @@
     .DshCascader {
         width: 100%;
 
-        &-edit {
+        //新模式
+        &-custom {
+            width: 100%;
+        }
 
-            // 多选
-            &-multiple {
-                width: 100%;
+        // 简单模式
+        &-simple {
+            width: 100%;
+        }
+    }
 
-                &-edit {}
-            }
+    // 多选
+    .DshCascaders {
+        &-wrap {
+            width: 100%;
+        }
 
-            // 单选 -新模式
-            &-custom {
-                width: 100%;
-            }
+        &-input {
+            &-row {
 
-            // 单选 -默认模式
-            &-single {
-                width: 100%;
             }
         }
 
-        // 查看
         &-show {
-            &-multiple {}
-
-            &-single {}
-        }
-
-        // 多选类型且独自一行时
-        &-row {
-            &-edit {}
-
-            &-show {
-                height: auto;
+            height: auto;
 
+            &-row {
                 .text,
                 .overflow {
+                    .bri-scrollbar3();
                     width: 100%;
                     height: 100%;
                     white-space: normal;
                     overflow: auto;
-                    .bri-scrollbar3();
                 }
             }
         }