bri-components 1.2.54 → 1.2.56

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

@@ -2,6 +2,7 @@
     <div class="cascaderPicker">
         <Dropdown
             style="width: 100%;"
+            v-clickoutside="clickCancel"
             trigger="custom"
             :visible="showModal"
             :placement="placement"
@@ -13,7 +14,7 @@
             <div @click.stop="clickInput">
                 <slot>
                     <Input
-                        :value="activeStr"
+                        v-model="inputStr"
                         :placeholder="selfPropsObj._placeholder"
                         :disabled="selfPropsObj._disabled"
                         :readonly="true"
@@ -27,47 +28,51 @@
             <div
                 slot="list"
                 class="wrap"
+                @click.stop="0"
             >
-                <!-- 按钮 -->
+                <!-- 头部 -->
                 <div class="wrap-header">
                     <!-- 搜索 -->
                     <div class="wrap-header-left">
-                        <Input
-                            v-if="filterable"
-                            class="search"
-                            v-model="searchName"
-                            placeholder="请输入关键字或标识"
-                            search
-                            @on-enter="search"
-                            @on-search="search"
-                            @on-change="search"
-                        />
-
-                        <template>
-                            <div
-                                v-if="useMode"
-                                class="mode"
-                                @click="showMode = showMode === 'default' ? 'flat' : 'default'"
-                            >
-                                <dsh-icons :list="[{ icon: 'md-swap' }]" />
-                                <span class="mode-name">
-                                    {{ showMode === "default" ? "按层级" : "按平级" }}
-                                </span>
-                            </div>
-
-                            <Tooltip
-                                v-else
-                                style="margin-left: 5px; cursor: pointer;"
-                                content="在搜索时，会出现层级和平级切换开关，但搜索出的结果超100个时，将不支持使用模式切换，因为此时平级方式不方便，不适用"
-                                max-width="250"
-                                transfer
-                            >
-                                <Icon
-                                    class="item-header-help"
-                                    type="md-help-circle"
-                                    size="16"
-                                ></Icon>
-                            </Tooltip>
+                        <template v-if="filterable">
+                            <!-- 搜索框 -->
+                            <Input
+                                class="search"
+                                v-model="searchName"
+                                placeholder="请输入关键字或标识"
+                                search
+                                @on-enter="search"
+                                @on-search="search"
+                                @on-change="search"
+                            />
+
+                            <!-- 模式切换 -->
+                            <template>
+                                <div
+                                    v-if="canUseModeSwitch"
+                                    class="mode"
+                                    @click="showMode = showMode === 'default' ? 'flat' : 'default'"
+                                >
+                                    <dsh-icons :list="[{ icon: 'md-swap' }]" />
+                                    <span class="mode-name">
+                                        {{ showMode === "default" ? "按层级" : "按平级" }}
+                                    </span>
+                                </div>
+
+                                <Tooltip
+                                    v-else
+                                    style="margin-left: 5px; cursor: pointer;"
+                                    :content="modeTip"
+                                    max-width="250"
+                                    transfer
+                                >
+                                    <Icon
+                                        class="item-header-help"
+                                        type="md-help-circle"
+                                        size="16"
+                                    ></Icon>
+                                </Tooltip>
+                            </template>
                         </template>
                     </div>
 
@@ -84,7 +89,7 @@
                     <!-- 选中项tabs -->
                     <div class="wrap-content-tabs">
                         <span
-                            v-for="(tabItem, tabIndex) in curSelectLinealDatas"
+                            v-for="(tabItem, tabIndex) in selectedLinealDatas"
                             :key="tabIndex"
                             class="item"
                             @click="curTabIndex = tabIndex"
@@ -102,68 +107,64 @@
                     <!-- 列表 -->
                     <div class="wrap-content-list">
                         <!-- 有数据 -->
-                        <DropdownMenu
+                        <div
                             v-if="showTreeData.length"
                             class="wrap-content-list-menu"
                         >
                             <!-- 拍平方式 -->
                             <template v-if="useFlatMode">
-                                <DropdownItem
-                                    v-for="dataItem in showFlatData"
-                                    :key="dataItem[valueKey]"
+                                <div
+                                    v-for="nodeItem in showFlatData"
+                                    :key="nodeItem[valueKey]"
                                     :class="{
                                         'item': true,
-                                        'item-active': curSelectObj && dataItem[valueKey] === curSelectObj[valueKey],
-                                        'item-disabled': dataItem.disabled
+                                        'item-active': selectedLastOption && nodeItem[valueKey] === selectedLastOption[valueKey],
+                                        'item-disabled': nodeItem.disabled
                                     }"
-                                    :name="dataItem[valueKey]"
-                                    :disabled="dataItem.disabled"
-                                    @click.native.stop="clickItem(dataItem)"
+                                    @click="clickItem(nodeItem)"
                                 >
                                     <span class="item-name">
-                                        {{ dataItem[nameKey] }}
+                                        {{ nodeItem[nameKey] }}
                                     </span>
 
                                     <span class="item-icon">
                                         <dsh-icons :list="[{
-                                            icon: curSelectObj && dataItem[valueKey] === curSelectObj[valueKey]
+                                            icon: selectedLastOption && nodeItem[valueKey] === selectedLastOption[valueKey]
                                                 ? 'md-checkmark'
                                                 : ''
                                         }]" />
                                     </span>
-                                </DropdownItem>
+                                </div>
                             </template>
 
                             <!-- 层级方式 -->
                             <template v-else>
-                                <DropdownItem
-                                    v-for="dataItem in curSelectLinealData.data"
-                                    :key="dataItem[valueKey]"
+                                <div
+                                    v-for="nodeItem in curSelectedLinealData.data"
+                                    :key="nodeItem[valueKey]"
                                     :class="{
                                         'item': true,
-                                        'item-active': dataItem[valueKey] === curSelectLinealData[valueKey],
-                                        'item-disabled': dataItem.disabled
+                                        'item-active': nodeItem[valueKey] === curSelectedLinealData[valueKey],
+                                        'item-disabled': nodeItem.disabled
                                     }"
-                                    :name="dataItem[valueKey]"
-                                    :disabled="dataItem.disabled"
-                                    @click.native.stop="clickItem(dataItem)"
+                                    @click="clickItem(nodeItem)"
                                 >
                                     <span class="item-name">
-                                        {{ dataItem[nameKey] }}
+                                        {{ nodeItem[nameKey] }}
                                     </span>
 
                                     <span class="item-icon">
                                         <dsh-icons :list="[{
-                                            icon: dataItem[valueKey] === curSelectLinealData[valueKey]
+                                            icon: nodeItem[valueKey] === curSelectedLinealData[valueKey]
                                                 ? 'md-checkmark'
-                                                : dataItem.children.length
+                                                : nodeItem.children.length
                                                     ? 'ios-arrow-forward'
                                                     : ''
                                         }]" />
                                     </span>
-                                </DropdownItem>
+                                </div>
                             </template>
-                        </DropdownMenu>
+                        </div>
 
                         <!-- 无数据 -->
                         <div
@@ -180,39 +181,15 @@
 </template>
 
 <script>
+    import cascaderPickerMixin from "./cascaderPickerMixin.js";
+
     export default {
         name: "cascaderPicker",
-        mixins: [],
+        mixins: [
+            cascaderPickerMixin
+        ],
         components: {},
         props: {
-            value: {
-                type: Boolean,
-                default: false
-            },
-
-            activeValue: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            activeStr: {
-                type: String,
-                default: ""
-            },
-            data: {
-                type: Array,
-                drfault () {
-                    return [];
-                }
-            },
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-
             placement: {
                 type: String,
                 default: "bottom-start"
@@ -220,103 +197,15 @@
         },
         data () {
             return {
-                searchName: "",
-                showMode: "default", // "flat", "default"
-
-                curTabIndex: 0,
-                curSelectObj: undefined,
-                curSelectVal: [],
-
-                operationMap: {
-                    canCancel: {
-                        name: "取消",
-                        type: "canCancel",
-                        btnType: "cancel",
-                        size: "small",
-                        event: "clickCancel"
-                    },
-                    canConfirm: {
-                        name: "确认",
-                        type: "canConfirm",
-                        btnType: "primary",
-                        size: "small",
-                        event: "clickConfirm"
-                    }
-                }
+                curTabIndex: 0
             };
         },
         computed: {
-            showModal: {
-                get () {
-                    return this.value;
-                },
-                set (bool) {
-                    this.$emit("input", bool);
-                }
-            },
-
-            selfPropsObj () {
-                return {
-                    ...this.propsObj
-                };
-            },
-            filterable () {
-                return this.selfPropsObj._filterable;
-            },
-            changeOnSelect () {
-                return this.selfPropsObj._changeOnSelect;
-            },
-            saveKey () {
-                return this.selfPropsObj._saveKey;
-            },
-            valueKey () {
-                return this.selfPropsObj._valueKey;
-            },
-            nameKey () {
-                return this.selfPropsObj._nameKey;
+            initData () {
+                return this.data;
             },
-            renderFormat () {
-                return this.selfPropsObj._renderFormat;
-            },
-
-            useMode () {
-                return this.filterable &&
-                    this.searchName.trim() &&
-                    this.showFlatData.length < 200;
-            },
-            useFlatMode () {
-                return this.useMode &&
-                    this.showMode === "flat";
-            },
-            showTreeData () {
-                return this.$getTreeDataByMatchFunc(node => {
-                    return (
-                        this.changeOnSelect
-                            ? true
-                            : node.isLeaf
-                    ) && (
-                        this.searchName.trim()
-                            ? node[this.nameKey].includes(this.searchName.trim()) || node[this.valueKey].includes(this.searchName.trim())
-                            : true
-                    );
-                }, this.data);
-            },
-            showFlatData () {
-                return this.$getTreeLinealDatasArr(this.showTreeData).map(arrItem => {
-                    return {
-                        ...arrItem.slice(-1)[0],
-                        [this.nameKey]: this.renderFormat(arrItem.map(item => item[this.nameKey]))
-                    };
-                });
-            },
-            curSelectedOptions () {
-                return this.$getTreeLinealDatas(this.curSelectVal, this.showTreeData, undefined, this.saveKey);
-            },
-            curSelectLinealData () {
-                return this.curSelectLinealDatas[this.curTabIndex];
-            },
-            curSelectLinealDatas () {
-                const arr = this.curSelectedOptions.map((item, index, list) => {
+            selectedLinealDatas () {
+                const arr = this.selectedOptions.map((item, index, list) => {
                     return {
                         ...item,
                         data: index === 0 ? this.showTreeData : list[index - 1].children
@@ -327,66 +216,50 @@
                     ...arr,
 
                     ...(
-                        this.curSelectedOptions.length === 0
-                            ? [
-                                {
-                                    data: this.showTreeData
-                                }
-                            ]
-                            : this.curTabIndex + 1 > this.curSelectedOptions.length && this.curSelectedOptions.slice(-1)[0].children.length
+                        this.selectedOptions.length
+                            ? this.selectedLastOption.children.length && this.curTabIndex + 1 > this.selectedOptions.length
                                 ? [
                                     {
-                                        data: this.curSelectedOptions.slice(-1)[0].children
+                                        data: this.selectedLastOption.children
                                     }
                                 ]
                                 : []
+                            : [
+                                {
+                                    data: this.showTreeData
+                                }
+                            ]
                     )
                 ];
+            },
+            curSelectedLinealData () {
+                return this.selectedLinealDatas[this.curTabIndex];
             }
         },
         created () {
             this.init();
         },
         methods: {
+            // 初始化
             init () {
-                this.curSelectVal = this.activeValue;
-                this.curTabIndex = this.curSelectVal.length === 0 ? 0 : this.curSelectVal.length - 1;
+                this.selectedValue = this.activeValue;
+                this.curTabIndex = this.selectedOptions.length
+                    ? this.selectedLastOption.children.length
+                        ? this.selectedOptions.length
+                        : this.selectedOptions.length - 1
+                    : 0;
             },
 
             search () {
-                this.curSelectVal = [];
+                this.selectedValue = [];
+                this.showMode = "default";
                 this.curTabIndex = 0;
             },
-            clickInput () {
-                if (!this.selfPropsObj._disabled) {
-                    this.showModal = true;
-                }
-            },
-            clickItem (dataItem) {
-                this.curSelectObj = dataItem;
-                this.curOldSelectVal = this.curSelectVal;
-                this.curSelectVal = dataItem.keys;
-                // 过滤重复点击
-                if (JSON.stringify(this.curSelectVal) !== JSON.stringify(this.curOldSelectVal)) {
-                    const obj = {
-                        value: this.curSelectVal,
-                        selectedOptions: this.curSelectedOptions,
-                        tabIndex: this.curTabIndex
-                    };
-                    this.$emit("change", obj);
-                    !dataItem.children.length && this.$emit("finish", obj);
-                }
-
+            clickItemCb (node) {
                 // 区分展示方式
-                if (this.showMode === "default" && dataItem.children.length) {
+                if (this.showMode === "default" && node.children.length) {
                     this.curTabIndex = this.curTabIndex + 1;
                 }
-            },
-            clickCancel () {
-                this.showModal = false;
-            },
-            clickConfirm () {
-                this.$emit("confirm", this.curSelectVal, this.curSelectedOptions);
             }
         }
     };
@@ -395,11 +268,13 @@
 <style lang="less">
     .cascaderPicker {
         &-down {
-            min-width: 400px;
-            max-width: 400px;
-            max-height: 600px; // 必须有
-            border: 0.5px solid #e5e5e5;
-            box-shadow: 0 3px 14px 2px rgba(0,0,0,0.05), 0 8px 10px 1px rgba(0,0,0,0.06), 0 5px 5px -3px rgba(0,0,0,0.1);
+            &.ivu-select-dropdown {
+                min-width: 400px;
+                max-width: 400px;
+                max-height: 600px; // 必须有
+                border: 0.5px solid #e5e5e5;
+                box-shadow: 0 3px 14px 2px rgba(0,0,0,0.05), 0 8px 10px 1px rgba(0,0,0,0.06), 0 5px 5px -3px rgba(0,0,0,0.1);
+            }
 
             .wrap {
                 &-header {
@@ -484,6 +359,7 @@
                                 padding: 8px 10px;
                                 border-radius: @borderRadius;
                                 line-height: 16px;
+                                cursor: pointer;
                                 display: flex;
                                 flex-direction: row;
                                 justify-content: space-between;

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

@@ -0,0 +1,202 @@
+export default {
+    mixins: [],
+    components: {},
+    props: {
+        value: {
+            type: Boolean,
+            default: false
+        },
+
+        activeValue: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+        activeStr: {
+            type: String,
+            default: ""
+        },
+        data: {
+            type: Array,
+            drfault () {
+                return [];
+            }
+        },
+        propsObj: {
+            type: Object,
+            default () {
+                return {};
+            }
+        }
+    },
+    data () {
+        return {
+            searchName: "",
+            showMode: "default", // "flat", "default"
+            maxFlatModeSearchNum: 80,
+
+            selectedValue: [],
+
+            operationMap: {
+                canCancel: {
+                    name: "取消",
+                    type: "canCancel",
+                    btnType: "cancel",
+                    size: "small",
+                    event: "clickCancel"
+                },
+                canConfirm: {
+                    name: "确认",
+                    type: "canConfirm",
+                    btnType: "primary",
+                    size: "small",
+                    event: "clickConfirm"
+                }
+            }
+        };
+    },
+    computed: {
+        showModal: {
+            get () {
+                return this.value;
+            },
+            set (bool) {
+                this.$emit("input", bool);
+            }
+        },
+
+        selfPropsObj () {
+            return {
+                ...this.propsObj
+            };
+        },
+        filterable () {
+            return this.selfPropsObj._filterable;
+        },
+        changeOnSelect () {
+            return this.selfPropsObj._changeOnSelect;
+        },
+        saveKey () {
+            return this.selfPropsObj._saveKey;
+        },
+        valueKey () {
+            return this.selfPropsObj._valueKey;
+        },
+        nameKey () {
+            return this.selfPropsObj._nameKey;
+        },
+        renderFormat () {
+            return this.selfPropsObj._renderFormat;
+        },
+        resourceKey () {
+            return this.selfPropsObj._resourceKey;
+        },
+
+        canUseModeSwitch () {
+            return this.searchName.trim() &&
+                this.showFlatData.length < this.maxFlatModeSearchNum;
+        },
+        useFlatMode () {
+            return this.filterable &&
+                this.canUseModeSwitch &&
+                this.showMode === "flat";
+        },
+        modeTip () {
+            return `在搜索时，会出现层级和平级切换开关，但搜索出的结果超${this.maxFlatModeSearchNum}个时，\
+                    将不支持使用模式切换，因为此时平级方式不方便，不适用`;
+        },
+
+        inputStr: {
+            get () {
+                return this.activeStr;
+            },
+            set (str) {
+                if (!str) {
+                    this.$emit("clear", []);
+                }
+            }
+        },
+        matchFunc () {
+            return node => {
+                return (
+                    this.changeOnSelect
+                        ? true
+                        : node.isLeaf
+                ) && (
+                    this.searchName.trim()
+                        ? node[this.nameKey].includes(this.searchName.trim()) || node[this.valueKey].includes(this.searchName.trim())
+                        : true
+                );
+            };
+        },
+        showTreeData () {
+            return this.$getTreeDataByMatchFunc(this.matchFunc, this.initData);
+        },
+        showFlatData () {
+            return this.$getListDataByMatchFunc(this.matchFunc, this.initData).map(arrItem => {
+                return {
+                    ...arrItem.slice(-1)[0],
+                    [this.nameKey]: this.renderFormat(arrItem.map(item => item[this.nameKey]))
+                };
+            });
+        },
+        // 选中项 -各级数据对象集合
+        selectedOptions () {
+            return this.$getTreeLinealDatas(this.selectedValue, this.showTreeData, undefined, this.saveKey);
+        },
+        // 选中项 -最后一级数据对象
+        selectedLastOption () {
+            return this.selectedOptions.slice(-1)[0];
+        },
+        // 选中项 -名字
+        selectedName () {
+            return this.selectedLastOption ? this.selectedLastOption[this.nameKey] : "";
+        }
+    },
+    created () { },
+    methods: {
+        clickInput () {
+            if (!this.selfPropsObj._disabled) {
+                this.showModal = true;
+            }
+        },
+        clickItem (node) {
+            this.oldSelectedValue = this.selectedValue;
+            this.selectedValue = node.keys;
+            // 避免重复点击
+            if (JSON.stringify(this.selectedValue) !== JSON.stringify(this.oldSelectedValue)) {
+                const obj = {
+                    value: this.selectedValue,
+                    selectedOptions: this.selectedOptions,
+                    tabIndex: this.curTabIndex
+                };
+                this.$emit("change", obj);
+                !node.children.length && this.$emit("finish", obj);
+            }
+
+            this.clickItemCb && this.clickItemCb(node);
+        },
+        clickCancel () {
+            this.showModal = false;
+        },
+        clickConfirm () {
+            if (this.selectedValue.length && this.selectedOptions.length) {
+                if (!this.changeOnSelect && !this.selectedLastOption.isLeaf) {
+                    this.$Message.error({
+                        content: "请选择到末级数据！",
+                        duration: 2
+                    });
+                } else {
+                    this.$emit("confirm", this.selectedValue, this.selectedOptions);
+                }
+            } else {
+                this.$Message.error({
+                    content: "请选择数据！",
+                    duration: 2
+                });
+            }
+        }
+
+    }
+};