bri-components 1.2.53 → 1.2.55

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

@@ -1,359 +1,289 @@
 <template>
-    <div class="DshCascader">
-        <!-- 编辑 -->
-        <template v-if="canEdit">
-            <!-- 多选 多选的filterable必须是false，不然出bug -->
-            <template v-if="multipleMode">
-                <Cascader
-                    class="DshCascader-edit-multiple"
-                    :value="multipleSelectVal"
-                    :data="renderCascaderData"
+    <!-- 单选模式 编辑 -->
+    <div
+        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="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>
+                    :propsObj="selfPropsObj"
+                    @clear="clickClear"
+                ></dsh-control-input>
+            </cascader-modal>
+        </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>
+        <!-- 确认面板方式 -->
+        <template v-else>
+            <cascader-picker
+                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-picker>
+        </template>
+    </div>
+
+    <!-- 单选模式 查看 -->
+    <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>
 
-                    <!-- 内容弹框 -->
-                    <info-cascader
-                        v-if="showModal"
-                        :showModal="showModal"
-                        v-model="curValList"
-                        :data="cascaderData"
-                        :propsObj="selfPropsObj"
-                        @changeShowModal="toggleModal"
-                        @change="change"
-                    ></info-cascader>
-                </template>
+        <!-- 无值 -->
+        <div
+            v-else
+            :class="commonClass"
+        >
+            {{ emptyShowVal }}
+        </div>
+    </div>
+
+    <!-- 多选模式 编辑 -->
+    <div
+        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="false"
+                :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"
+                @click.native="clickCascader"
+            >
+                <dsh-control-input
+                    :class="commonClass"
+                    :value="curValNameList"
+                    :disabled="selfPropsObj._disabled"
+                    :propsObj="selfPropsObj"
+                    @deleteItem="clickDeleteItem"
+                    @clear="clickClear"
+                    @click.native="clickInput"
+                ></dsh-control-input>
+            </Cascader>
+        </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 === '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>
-            <!-- 多选 -->
-            <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
+                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-picker>
+        </template>
+    </div>
 
-                        <!-- 无值 -->
-                        <template v-else>
-                            {{ emptyShowVal }}
-                        </template>
-                    </div>
-                </bri-tooltip>
-            </template>
+    <!-- 多选模式 查看 -->
+    <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>
 
-            <!-- 单选 -->
-            <template v-else>
-                <bri-tooltip
-                    :content="showVal"
-                    placement="top"
-                    maxWidth="200"
-                    :transfer="true"
-                >
-                    <div :class="{
-                        ...commonClass,
-                        'DshCascader-show-single': true
-                    }">
-                        {{ showVal }}
-                    </div>
-                </bri-tooltip>
-            </template>
-        </template>
+        <!-- 无值 -->
+        <div
+            v-else
+            :class="{
+                ...commonClass
+            }"
+        >
+            {{ emptyShowVal }}
+        </div>
     </div>
 </template>
 
 <script>
-    import { regionData, userIndustryData } from "bri-datas";
-    import controlMixin from "../../controlMixin.js";
-    import InfoCascader from "./InfoCascader.vue";
-
-    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);
-
-                return arr;
-            }, [])
-            : [];
-    };
+    import cascaderMixin from "./cascaderMixin.js";
+    import cascaderPicker from "./cascaderPicker.vue";
+    import cascaderModal from "./cascaderModal.vue";
 
     export default {
         name: "DshCascader",
         mixins: [
-            controlMixin
+            cascaderMixin
         ],
         components: {
-            InfoCascader
+            cascaderPicker,
+            cascaderModal
         },
         props: {},
         data () {
             return {
-                renderDataFlag: true,
-                clickInputFlag: true,
+                renderAll: false,
+                clickFlag: true,
                 isVisible: false,
-                multipleSelectVal: [], // 必须要，每次选完之后再选，需清空上次选的
-                selectVal: [],
-
-                showModal: false
+                curSelectVal: []
             };
         },
         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),
+                    _icon: this.isVisible ? "ios-arrow-up" : "ios-arrow-down",
+                    _showMode: "default", // 只有单选模式有效，值为"default", "custom", "simple"
                     _transfer: true,
 
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj
+                    ...this.basePropsObj,
+
+                    // 默认模式-多选时 暂不支持搜索
+                    _filterable: this.basePropsObj._showMode === "simple" && this.multipleMode
+                        ? false
+                        : this.basePropsObj._filterable
                 };
             },
-            // 每级菜单都可取值
-            changeOnSelect () {
-                return this.isOnSearch ? true : this.selfPropsObj._changeOnSelect;
-            },
-            cascaderLevel () {
-                return this.selfPropsObj._cascaderLevel;
-            },
-            cascaderFilterVals () {
-                return this.selfPropsObj._cascaderFilterVals;
-            },
-            // 只有单选模式有效
-            showMode () {
-                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 => {
+                return this.renderAll
+                    ? this.cascaderData
+                    : this.cascaderData.map(item => {
                         return {
                             ...item,
                             children: []
                         };
-                    })
-                    : 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: [] }));
-
-                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];
-                        }
-                    }
+                const list = this.$getTreeLinealDatas(treeItem.keys, this.cascaderData, undefined, this.saveKey);
+                const lastOption = list[list.length - 1];
 
-                    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];
-            },
+                treeItem.children = lastOption
+                    ? lastOption.children.map(item =>
+                        ({
+                            ...item,
+                            children: []
+                        })
+                    )
+                    : [];
 
-            /* -------- 单选模式 -弹窗方式 ------- */
-            // 弹窗方式的 -打开模态框
-            openModal () {
-                if (this.finalCanEdit) {
-                    this.showModal = true;
-                }
-            },
-            // 弹窗方式的 -关闭模态框
-            toggleModal (bool) {
-                this.showModal = bool;
+                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 {
@@ -362,10 +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]);
+                }
+            },
+            // 简洁方式-多选 -展开和关闭弹窗时触发
+            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]);
                 }
             }
         },
@@ -379,49 +325,22 @@
 
 <style lang="less">
     .DshCascader {
-        width: 100%;
 
-        &-edit {
-
-            // 多选
-            &-multiple {
-                width: 100%;
-
-                &-edit {}
-            }
-
-            // 单选 -新模式
-            &-custom {
-                width: 100%;
-            }
-
-            // 单选 -默认模式
-            &-single {
-                width: 100%;
-            }
-        }
+    }
 
-        // 查看
+    // 多选
+    .DshCascaders {
         &-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();
                 }
             }
         }