bri-components 1.5.21 → 1.6.0

package/src/components/controls/mixins/cascaderMixin.js

@@ -1,325 +1,325 @@
-import controlMixin from "./controlMixin.js";
-import { resourceData, regionDataMap, userIndustryData } from "bri-datas";
-
-export default {
-    mixins: [
-        controlMixin
-    ],
-    components: {},
-    props: {},
-    data () {
-        return {};
-    },
-    computed: {
-        basePropsObj () {
-            const _joinSymbol = this.propsObj._joinSymbol || "/";
-            return {
-                _regionType: "default", // "default", "benji"
-                _showMode: "default", // "default", "custom", "simple"
-                _searchShowMode: undefined, // "tree", "default", "custom", "simple"
-
-                _saveKey: "_key",
-                _valueKey: "code",
-                _nameKey: "name",
-                colorMap: resourceData.colorMap,
-                _useColor: false,
-                _filterable: true, // 是否支持搜索
-                _cascaderLevel: undefined, // 级联数据取到第几级
-                _reverseFilter: false, // 是否反向过滤，默认正向过滤
-                _cascaderFilterVals: [], // 过滤的数据的第一级选项
-                _cascaderSelectVals: [], // 过滤的数据的级联选项
-                _renderFormat: (labels) => labels.join(_joinSymbol),
-                _data: [],
-
-                ...this.propsObj,
-                ...this.commonDealPropsObj,
-
-                _changeOnSelect: this.isInAnySearch
-                    ? true
-                    : this.propsObj._changeOnSelect == undefined ? false : this.propsObj._changeOnSelect, // 每级菜单都可取值 -默认取末级
-                _joinSymbol: _joinSymbol // 级联拼接符
-            };
-        },
-        subType () {
-            return this.selfPropsObj._regionType;
-        },
-        showMode () {
-            return this.isInAnySearch
-                ? this.selfPropsObj._searchShowMode || this.selfPropsObj._showMode
-                : this.selfPropsObj._showMode;
-        },
-
-        saveKey () {
-            return this.selfPropsObj._saveKey;
-        },
-        valueKey () {
-            return this.selfPropsObj._valueKey;
-        },
-        nameKey () {
-            return this.selfPropsObj._nameKey;
-        },
-        colorMap () {
-            return this.selfPropsObj.colorMap;
-        },
-        useColor () {
-            return this.selfPropsObj._useColor;
-        },
-        // filterable () {
-        //     return this.selfPropsObj._filterable;
-        // },
-        cascaderLevel () {
-            return this.selfPropsObj._cascaderLevel;
-        },
-        reverseFilter () {
-            return this.selfPropsObj._reverseFilter;
-        },
-        filterVals () {
-            return this.selfPropsObj._cascaderFilterVals;
-        },
-        cascaderVals () {
-            return this.selfPropsObj._cascaderSelectVals;
-        },
-        renderFormat () {
-            return this.selfPropsObj._renderFormat;
-        },
-
-        originData () {
-            return ["userIndustry"].includes(this.controlType)
-                ? userIndustryData
-                : ["region", "regions"].includes(this.controlType)
-                    ? regionDataMap[this.subType] || regionDataMap.default
-                    : this.selfPropsObj._data;
-        },
-        cascaderAllData () {
-            const loop = (arr = [], level, parentKeys = [], filterVals = [], cascaderVals = [], reverseFilter = false, isMb = false, saveKey = "_key", valueKey = "code", nameKey = "name") => {
-                arr = cascaderVals.length
-                    ? arr.filter(item => {
-                        const itemKey = item[saveKey];
-                        const keys = [...parentKeys, itemKey]; // ！！此处就是用_key拼，不会用别的属性
-
-                        return reverseFilter
-                            ? !cascaderVals.some(valArr =>
-                                keys.length < valArr.length
-                                    ? false
-                                    : valArr.every((valArrKey, index) => valArrKey === keys[index])
-                            )
-                            : cascaderVals.some(valArr =>
-                                keys.length < valArr.length
-                                    ? keys.every((levelKey, index) => levelKey === valArr[index])
-                                    : valArr.every((valArrKey, index) => valArrKey === keys[index])
-                        );
-                    })
-                    : filterVals.length
-                        ? arr.filter(item =>
-                            reverseFilter
-                                ? !filterVals.includes(item[saveKey])
-                                : filterVals.includes(item[saveKey])
-                        )
-                        : arr;
-
-                return arr.reduce((newArr, item) => {
-                    const itemKey = item[saveKey];
-                    const keys = [...parentKeys, itemKey]; // ！！此处就是用_key拼，不会用别的属性
-                    let newItem = {
-                        keys: keys,
-                        code: keys.join(""),
-                        ...item
-                    };
-                    newItem = {
-                        ...newItem,
-                        value: newItem[valueKey],
-                        label: newItem[nameKey]
-                    };
-
-                    if (this.showMode === "tree") {
-                        newItem.title = newItem[nameKey];
-                        newItem.checked = this.multipleMode
-                            ? this.curValList.some(valListItem => valListItem.join("") === newItem.code)
-                            : this.curValList.join("") === newItem.code;
-                        newItem.expand = !!newItem.expand;
-                    }
-
-                    if (
-                        (!level || level > newItem.level) &&
-                        (newItem.children && newItem.children.length)
-                    ) {
-                        newItem.children = loop(newItem.children, level, newItem.keys, [], cascaderVals, reverseFilter, isMb, saveKey, valueKey, nameKey);
-
-                        if (newItem.children.length) {
-                            newItem.loading = false; // 此代码pc端在用：为了所请求的级，出现继续加载的箭头图标
-                            newItem.isLeaf = false;
-
-                            if (this.showMode === "tree") {
-                                newItem.expand = newItem.expand || newItem.checked || newItem.children.some(childItem => childItem.expand || childItem.checked);
-                            }
-                        } else {
-                            newItem.children = isMb ? undefined : [];
-                            newItem.isLeaf = true;
-                        }
-                    } else {
-                        newItem.children = isMb ? undefined : [];
-                        newItem.isLeaf = true;
-                    }
-
-                    return [
-                        ...newArr,
-                        newItem
-                    ];
-                }, []);
-            };
-
-            return loop(this.originData, this.cascaderLevel, [], this.filterVals, this.cascaderVals, this.reverseFilter, this.isMb, this.saveKey, this.valueKey, this.nameKey);
-        },
-        cascaderData () {
-            const loop = (arr = [], isMb) => {
-                return arr
-                    ? arr.reduce((newArr, item) => {
-                        if (item.rm !== 1) {
-                            let newItem = {
-                                ...item
-                            };
-
-                            if (newItem.children && newItem.children.length) {
-                                newItem.children = loop(newItem.children, isMb);
-
-                                if (newItem.children.length) {
-                                    // 无需处理
-                                } else {
-                                    newItem.children = isMb ? undefined : [];
-                                }
-                            } else {
-                                newItem.children = isMb ? undefined : [];
-                            }
-
-                            newArr.push(newItem);
-                        }
-
-                        return newArr;
-                    }, [])
-                    : [];
-            };
-
-            return loop(this.cascaderAllData, this.isMobile);
-        },
-
-        curValObj () {
-            return this.getItemObj(this.curValList);
-        },
-        curValName: {
-            get () {
-                return this.curValObj
-                    ? this.curValObj[this.nameKey]
-                    : "";
-            },
-            set (val) {
-                if (!val) {
-                    this.clickClear();
-                }
-            }
-        },
-        showVal () {
-            return this.$isEmptyData(this.curValList)
-                ? this.emptyShowVal
-                : this.curValName;
-        },
-        // 已选择项的对象列表
-        curValObjList () {
-            return this.curValList.map((item, index) =>
-                index < this.curValList.length - 1
-                    ? this.getItemObj(item, { marginRight: "4px" })
-                    : this.getItemObj(item)
-            );
-        },
-        curValNameList () {
-            return this.curValObjList.map(item => item[this.nameKey]);
-        },
-        showMulVal () {
-            return this.$isEmptyData(this.curValList)
-                ? this.emptyShowVal
-                : this.curValNameList.join("、");
-        }
-    },
-    created () { },
-    methods: {
-        // 单选 -确认回调
-        confirmCb (selectedValue, selectedOptions) {
-            this.curValList = selectedValue;
-
-            this.closeModal();
-        },
-        // 多选 -追加的确认回调
-        confirmAddCb (selectedValue, selectedOptions) {
-            if (this.curValList.some(item => JSON.stringify(item) === JSON.stringify(selectedValue))) {
-                this.$Message.error({
-                    content: `请勿重复选择"${this.transformFullName(selectedValue)}"！`,
-                    duration: 4
-                });
-            } else {
-                this.curValList = [...this.curValList, selectedValue];
-
-                this.closeModal();
-            }
-        },
-        // 多选 -整体多选的回调
-        confirmMulCb (selectedValueArr, selectedOptionsArr) {
-            this.curValList = ["eq", "ne"].includes(this.value.fieldOperator)
-                ? [...selectedValueArr]
-                : selectedValueArr.reduce((newNodeArr, node, nodeIndex) => (
-                    newNodeArr.every(newNode => !node.join("").startsWith(newNode.join("")))
-                        ? [
-                            ...newNodeArr,
-                            node
-                        ]
-                        : newNodeArr
-                ), []);
-
-            this.closeModal();
-        },
-        // 删除
-        clickDeleteItem (nameItem, index) {
-            this.curValList.splice(index, 1);
-            this.curValList = [...this.curValList];
-        },
-
-        /* --------- 工具类 -------- */
-        getItemObj (val, selfStyle = {}) {
-            const objArr = this.$getTreeLinealDatas(val, this.cascaderAllData, undefined, this.saveKey);
-            const obj = objArr.length
-                ? {
-                    ...objArr.slice(-1)[0],
-                    [this.nameKey]: this.transformFullName(val)
-                }
-                : {
-                    [this.saveKey]: val,
-                    [this.nameKey]: `提示：选项${val}已不存在`
-            };
-
-            return !this.$isEmptyData(val)
-                ? {
-                    name: obj[this.nameKey], // 查看状态时tag用
-                    ...obj,
-                    style: {
-                        ...this.tagStyle,
-                        ...this.getItemColorStyle(obj),
-                        ...selfStyle
-                    }, // 查看状态时tag用
-                    color: undefined
-                }
-                : undefined;
-        },
-        // 每项的颜色相关style --flat方式在用
-        getItemColorStyle (item = {}) {
-            const color = this.colorMap[item.color] || this.colorMap["color-default"];
-            return this.useColor
-                ? {
-                    backgroundColor: this.$getColor(color, 0.1),
-                    color: color
-                }
-                : {};
-        },
-        // 转化出级联全名
-        transformFullName (val) {
-            return this.renderFormat(this.$getTreeLinealDatas(val, this.cascaderAllData, this.nameKey, this.saveKey));
-        }
-    }
-};
+import controlMixin from "./controlMixin.js";
+import { resourceData, regionDataMap, userIndustryData } from "bri-datas";
+
+export default {
+    mixins: [
+        controlMixin
+    ],
+    components: {},
+    props: {},
+    data () {
+        return {};
+    },
+    computed: {
+        basePropsObj () {
+            const _joinSymbol = this.propsObj._joinSymbol || "/";
+            return {
+                _regionType: "default", // "default", "benji"
+                _showMode: "default", // "default", "custom", "simple"
+                _searchShowMode: undefined, // "tree", "default", "custom", "simple"
+
+                _saveKey: "_key",
+                _valueKey: "code",
+                _nameKey: "name",
+                colorMap: resourceData.colorMap,
+                _useColor: false,
+                _filterable: true, // 是否支持搜索
+                _cascaderLevel: undefined, // 级联数据取到第几级
+                _reverseFilter: false, // 是否反向过滤，默认正向过滤
+                _cascaderFilterVals: [], // 过滤的数据的第一级选项
+                _cascaderSelectVals: [], // 过滤的数据的级联选项
+                _renderFormat: (labels) => labels.join(_joinSymbol),
+                _data: [],
+
+                ...this.propsObj,
+                ...this.commonDealPropsObj,
+
+                _changeOnSelect: this.isInAnySearch
+                    ? true
+                    : this.propsObj._changeOnSelect == undefined ? false : this.propsObj._changeOnSelect, // 每级菜单都可取值 -默认取末级
+                _joinSymbol: _joinSymbol // 级联拼接符
+            };
+        },
+        subType () {
+            return this.selfPropsObj._regionType;
+        },
+        showMode () {
+            return this.isInAnySearch
+                ? this.selfPropsObj._searchShowMode || this.selfPropsObj._showMode
+                : this.selfPropsObj._showMode;
+        },
+
+        saveKey () {
+            return this.selfPropsObj._saveKey;
+        },
+        valueKey () {
+            return this.selfPropsObj._valueKey;
+        },
+        nameKey () {
+            return this.selfPropsObj._nameKey;
+        },
+        colorMap () {
+            return this.selfPropsObj.colorMap;
+        },
+        useColor () {
+            return this.selfPropsObj._useColor;
+        },
+        // filterable () {
+        //     return this.selfPropsObj._filterable;
+        // },
+        cascaderLevel () {
+            return this.selfPropsObj._cascaderLevel;
+        },
+        reverseFilter () {
+            return this.selfPropsObj._reverseFilter;
+        },
+        filterVals () {
+            return this.selfPropsObj._cascaderFilterVals;
+        },
+        cascaderVals () {
+            return this.selfPropsObj._cascaderSelectVals;
+        },
+        renderFormat () {
+            return this.selfPropsObj._renderFormat;
+        },
+
+        originData () {
+            return ["userIndustry"].includes(this.controlType)
+                ? userIndustryData
+                : ["region", "regions"].includes(this.controlType)
+                    ? regionDataMap[this.subType] || regionDataMap.default
+                    : this.selfPropsObj._data;
+        },
+        cascaderAllData () {
+            const loop = (arr = [], level, parentKeys = [], filterVals = [], cascaderVals = [], reverseFilter = false, isMb = false, saveKey = "_key", valueKey = "code", nameKey = "name") => {
+                arr = cascaderVals.length
+                    ? arr.filter(item => {
+                        const itemKey = item[saveKey];
+                        const keys = [...parentKeys, itemKey]; // ！！此处就是用_key拼，不会用别的属性
+
+                        return reverseFilter
+                            ? !cascaderVals.some(valArr =>
+                                keys.length < valArr.length
+                                    ? false
+                                    : valArr.every((valArrKey, index) => valArrKey === keys[index])
+                            )
+                            : cascaderVals.some(valArr =>
+                                keys.length < valArr.length
+                                    ? keys.every((levelKey, index) => levelKey === valArr[index])
+                                    : valArr.every((valArrKey, index) => valArrKey === keys[index])
+                        );
+                    })
+                    : filterVals.length
+                        ? arr.filter(item =>
+                            reverseFilter
+                                ? !filterVals.includes(item[saveKey])
+                                : filterVals.includes(item[saveKey])
+                        )
+                        : arr;
+
+                return arr.reduce((newArr, item) => {
+                    const itemKey = item[saveKey];
+                    const keys = [...parentKeys, itemKey]; // ！！此处就是用_key拼，不会用别的属性
+                    let newItem = {
+                        keys: keys,
+                        code: keys.join(""),
+                        ...item
+                    };
+                    newItem = {
+                        ...newItem,
+                        value: newItem[valueKey],
+                        label: newItem[nameKey]
+                    };
+
+                    if (this.showMode === "tree") {
+                        newItem.title = newItem[nameKey];
+                        newItem.checked = this.multipleMode
+                            ? this.curValList.some(valListItem => valListItem.join("") === newItem.code)
+                            : this.curValList.join("") === newItem.code;
+                        newItem.expand = !!newItem.expand;
+                    }
+
+                    if (
+                        (!level || level > newItem.level) &&
+                        (newItem.children && newItem.children.length)
+                    ) {
+                        newItem.children = loop(newItem.children, level, newItem.keys, [], cascaderVals, reverseFilter, isMb, saveKey, valueKey, nameKey);
+
+                        if (newItem.children.length) {
+                            newItem.loading = false; // 此代码pc端在用：为了所请求的级，出现继续加载的箭头图标
+                            newItem.isLeaf = false;
+
+                            if (this.showMode === "tree") {
+                                newItem.expand = newItem.expand || newItem.checked || newItem.children.some(childItem => childItem.expand || childItem.checked);
+                            }
+                        } else {
+                            newItem.children = isMb ? undefined : [];
+                            newItem.isLeaf = true;
+                        }
+                    } else {
+                        newItem.children = isMb ? undefined : [];
+                        newItem.isLeaf = true;
+                    }
+
+                    return [
+                        ...newArr,
+                        newItem
+                    ];
+                }, []);
+            };
+
+            return loop(this.originData, this.cascaderLevel, [], this.filterVals, this.cascaderVals, this.reverseFilter, this.isMb, this.saveKey, this.valueKey, this.nameKey);
+        },
+        cascaderData () {
+            const loop = (arr = [], isMb) => {
+                return arr
+                    ? arr.reduce((newArr, item) => {
+                        if (item.rm !== 1) {
+                            let newItem = {
+                                ...item
+                            };
+
+                            if (newItem.children && newItem.children.length) {
+                                newItem.children = loop(newItem.children, isMb);
+
+                                if (newItem.children.length) {
+                                    // 无需处理
+                                } else {
+                                    newItem.children = isMb ? undefined : [];
+                                }
+                            } else {
+                                newItem.children = isMb ? undefined : [];
+                            }
+
+                            newArr.push(newItem);
+                        }
+
+                        return newArr;
+                    }, [])
+                    : [];
+            };
+
+            return loop(this.cascaderAllData, this.isMobile);
+        },
+
+        curValObj () {
+            return this.getItemObj(this.curValList);
+        },
+        curValName: {
+            get () {
+                return this.curValObj
+                    ? this.curValObj[this.nameKey]
+                    : "";
+            },
+            set (val) {
+                if (!val) {
+                    this.clickClear();
+                }
+            }
+        },
+        showVal () {
+            return this.$isEmptyData(this.curValList)
+                ? this.emptyShowVal
+                : this.curValName;
+        },
+        // 已选择项的对象列表
+        curValObjList () {
+            return this.curValList.map((item, index) =>
+                index < this.curValList.length - 1
+                    ? this.getItemObj(item, { marginRight: "4px" })
+                    : this.getItemObj(item)
+            );
+        },
+        curValNameList () {
+            return this.curValObjList.map(item => item[this.nameKey]);
+        },
+        showMulVal () {
+            return this.$isEmptyData(this.curValList)
+                ? this.emptyShowVal
+                : this.curValNameList.join("、");
+        }
+    },
+    created () { },
+    methods: {
+        // 单选 -确认回调
+        confirmCb (selectedValue, selectedOptions) {
+            this.curValList = selectedValue;
+
+            this.closeModal();
+        },
+        // 多选 -追加的确认回调
+        confirmAddCb (selectedValue, selectedOptions) {
+            if (this.curValList.some(item => JSON.stringify(item) === JSON.stringify(selectedValue))) {
+                this.$Message.error({
+                    content: `请勿重复选择"${this.transformFullName(selectedValue)}"！`,
+                    duration: 4
+                });
+            } else {
+                this.curValList = [...this.curValList, selectedValue];
+
+                this.closeModal();
+            }
+        },
+        // 多选 -整体多选的回调
+        confirmMulCb (selectedValueArr, selectedOptionsArr) {
+            this.curValList = ["eq", "ne"].includes(this.value.fieldOperator)
+                ? [...selectedValueArr]
+                : selectedValueArr.reduce((newNodeArr, node, nodeIndex) => (
+                    newNodeArr.every(newNode => !node.join("").startsWith(newNode.join("")))
+                        ? [
+                            ...newNodeArr,
+                            node
+                        ]
+                        : newNodeArr
+                ), []);
+
+            this.closeModal();
+        },
+        // 删除
+        clickDeleteItem (nameItem, index) {
+            this.curValList.splice(index, 1);
+            this.curValList = [...this.curValList];
+        },
+
+        /* --------- 工具类 -------- */
+        getItemObj (val, selfStyle = {}) {
+            const objArr = this.$getTreeLinealDatas(val, this.cascaderAllData, undefined, this.saveKey);
+            const obj = objArr.length
+                ? {
+                    ...objArr.slice(-1)[0],
+                    [this.nameKey]: this.transformFullName(val)
+                }
+                : {
+                    [this.saveKey]: val,
+                    [this.nameKey]: `提示：选项${val}已不存在`
+            };
+
+            return !this.$isEmptyData(val)
+                ? {
+                    name: obj[this.nameKey], // 查看状态时tag用
+                    ...obj,
+                    style: {
+                        ...this.tagStyle,
+                        ...this.getItemColorStyle(obj),
+                        ...selfStyle
+                    }, // 查看状态时tag用
+                    color: undefined
+                }
+                : undefined;
+        },
+        // 每项的颜色相关style --flat方式在用
+        getItemColorStyle (item = {}) {
+            const color = this.colorMap[item.color] || this.colorMap["color-default"];
+            return this.useColor
+                ? {
+                    backgroundColor: this.$getColor(color, 0.1),
+                    color: color
+                }
+                : {};
+        },
+        // 转化出级联全名
+        transformFullName (val) {
+            return this.renderFormat(this.$getTreeLinealDatas(val, this.cascaderAllData, this.nameKey, this.saveKey));
+        }
+    }
+};