bri-components 1.2.53 → 1.2.54

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

@@ -22,13 +22,12 @@
 
                 <div class="InfoCascader-content-right">
                     <div class="InfoCascader-content-right-title">
-                        {{curName}}说明
+                        {{ curName }}说明
                     </div>
                     <p
                         class="InfoCascader-content-right-content"
                         v-html="description"
-                    >
-                    </p>
+                    ></p>
                 </div>
             </div>
 
@@ -89,9 +88,9 @@
                 operationMap: {
                     canCancel: {
                         name: "取消",
-                        type: "clickCancel",
-                        event: "clickCancel",
-                        class: "z-default"
+                        type: "canCancel",
+                        class: "z-default",
+                        event: "clickCancel"
                     },
                     canConfirm: {
                         name: "确定",
@@ -109,116 +108,128 @@
                     return this.showModal;
                 },
                 set (val) {
-                    this.$emit("changeShowModal", val);
+                    this.$emit("close", val);
                 }
             },
+
             modalPropsObj () {
                 return {
                     title: this.propsObj._name
                 };
             },
+            selfPropsObj () {
+                return {
+                    ...this.propsObj
+                };
+            },
+            saveKey () {
+                return this.selfPropsObj._saveKey;
+            },
+            resourceKey () {
+                return this.selfPropsObj._resourceKey;
+            },
+
             initData () {
-                return this.loop(this.data, null, this.value);
+                return this.loop(this.data, null);
             },
             treeData () {
-                if (!this.searchData.search) { // 内容为空时，查询所有
+                // 内容为空时，查询所有
+                if (!this.searchData.search) {
                     return this.initData;
-                }
-                let that = this;
-                const rebuildData = (value, treeList) => {
-                    that.show = false;
-                    let newarr = [];
-                    treeList.forEach(element => {
-                        if (element.children && element.children.length) {
-                            const ab = rebuildData(value, element.children);
-                            const obj = {
-                                ...element,
-                                expand: true,
-                                children: ab
-                            };
-                            if (ab && ab.length) {
-                                newarr.push(obj);
-                            } else if (element.title.indexOf(value) > -1) {
-                                element.expand = true;
-                                newarr.push(element);
-                            }
-                        } else {
-                            if (element.title.indexOf(value) > -1) {
-                                newarr.push(element);
+                } else {
+                    const loop = (value, treeList) => {
+                        let newarr = [];
+                        treeList.forEach(element => {
+                            if (element.children && element.children.length) {
+                                const ab = loop(value, element.children);
+                                const obj = {
+                                    ...element,
+                                    expand: true,
+                                    children: ab
+                                };
+                                if (ab && ab.length) {
+                                    newarr.push(obj);
+                                } else if (element.title.indexOf(value) > -1) {
+                                    element.expand = true;
+                                    newarr.push(element);
+                                }
+                            } else {
+                                if (element.title.indexOf(value) > -1) {
+                                    newarr.push(element);
+                                }
                             }
-                        }
-                    });
-                    that.show = true;
-                    return newarr;
-                };
-                return rebuildData(this.searchData.search, this.initData);
+                        });
+                        return newarr;
+                    };
+
+                    return loop(this.searchData.search, this.initData);
+                }
             }
         },
         created () {
-            this.curSelect.codeArr = this.value;
-            if (this.value && this.value.length) {
-                // 回显已选择的名称
-                const loop = (arr) => {
-                    for (let item of arr) {
-                        if (item.codeArr.length == this.value.length && item.codeArr.every((code, idx) => code === this.value[idx])) {
-                            this.curName = item.name;
-                            break;
-                        }
-                        if (item.children.length) {
-                            loop(item.children);
-                        }
-                    }
-                };
-                loop(this.initData);
-                this.getDescription(this.value);
-            }
+            this.init();
         },
         methods: {
-            change (node) {
-                this.curName = node.name;
-                if (node.codeArr.length && this.curSelect.codeArr && this.curSelect.codeArr.length === node.codeArr.length && node.codeArr.every((code, idx) => code === this.curSelect.codeArr[idx])) {
-                    this.curSelect = {};
-                } else {
-                    if (!this.propsObj._cascaderLevel || node.level == this.propsObj._cascaderLevel || !node.children.length) {
-                        this.curSelect = node;
-                    }
-                    this.getDescription(node.codeArr);
+            init () {
+                this.curSelect.keys = this.value;
+
+                if (this.value.length) {
+                    // 回显已选择的名称
+                    const loop = (arr) => {
+                        for (let item of arr) {
+                            if (
+                                item.keys.length === this.value.length &&
+                                item.keys.every((code, idx) => code === this.value[idx])
+                            ) {
+                                this.curName = item.name;
+                                break;
+                            }
+                            if (item.children.length) {
+                                loop(item.children);
+                            }
+                        }
+                    };
+                    loop(this.initData);
+                    this.getDescription(this.value);
                 }
             },
-            getDescription (nodeKeys) {
-                this.$https({
-                    url: {
-                        module: "sheet",
-                        name: "getResourceDescription"
-                    },
-                    params: {
-                        resourceKey: this.propsObj._resourceKey,
-                        nodeKeys
-                    },
-                    callback: data => {
-                        this.description = data;
-                    }
-                });
-            },
+
             clickCancel () {
-                this.$emit("changeShowModal", false);
+                this.$emit("close", false);
             },
             clickConfirm () {
                 if (this.curName) {
-                    this.$emit("input", this.curSelect.codeArr);
-                    this.$emit("change", this.curSelect.codeArr);
-                    this.$emit("changeShowModal", false);
+                    this.$emit("input", this.curSelect.keys);
+                    this.$emit("change", this.curSelect.keys);
+                    this.$emit("close", false);
                 } else {
                     this.$Message.warning(`请选择${this.propsObj._name}!`);
                 }
+            },
+            change (node) {
+                this.curName = node.name;
 
+                if (
+                    this.curSelect.keys &&
+                    this.curSelect.keys.length === node.keys.length &&
+                    node.keys.length &&
+                    node.keys.every((code, idx) => code === this.curSelect.keys[idx])
+                ) {
+                    this.curSelect = {};
+                } else {
+                    if (!this.propsObj._cascaderLevel || node.level == this.propsObj._cascaderLevel || !node.children.length) {
+                        this.curSelect = node;
+                    }
+                    this.getDescription(node.keys);
+                }
             },
-            loop (data = [], level, codeArr) {
+
+            loop (data = [], level) {
                 return data
                     ? data.reduce((arr, item) => {
                         item.expand = false;
                         if (this.value.length) {
-                            let arr = this.$getTreeLinealDatas(this.value, this.data);
+                            let arr = this.$getTreeLinealDatas(this.value, this.data, undefined, this.saveKey);
                             arr.forEach(i => { i.expand = true; });
                         }
                         const newItem = {
@@ -229,7 +240,7 @@
                             render: (h, { root, node, data }) => {
                                 return h("span", {
                                     class: {
-                                        "ivu-tree-title-selected": this.curSelect.codeArr && this.curSelect.codeArr.length && this.curSelect.codeArr.length === data.codeArr.length && this.curSelect.codeArr.every((code, idx) => code === data.codeArr[idx])
+                                        "ivu-tree-title-selected": this.curSelect.keys && this.curSelect.keys.length && this.curSelect.keys.length === data.keys.length && this.curSelect.keys.every((code, idx) => code === data.keys[idx])
                                     },
                                     style: {
                                         display: "inline-block",
@@ -244,13 +255,28 @@
                             }
                         };
                         if (!level || level > item.level) {
-                            newItem.children = this.loop(item.children, level, this.value);
+                            newItem.children = this.loop(item.children, level);
                         }
                         arr.push(newItem);
 
                         return arr;
                     }, [])
                     : [];
+            },
+            getDescription (nodeKeys) {
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "getResourceDescription"
+                    },
+                    params: {
+                        resourceKey: this.resourceKey,
+                        nodeKeys
+                    },
+                    callback: data => {
+                        this.description = data;
+                    }
+                });
             }
         }
     };

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

@@ -0,0 +1,187 @@
+import controlMixin from "../../controlMixin.js";
+import { regionData, userIndustryData } from "bri-datas";
+
+export default {
+    mixins: [
+        controlMixin
+    ],
+    components: {},
+    props: {},
+    data () {
+        return {};
+    },
+    computed: {
+        basePropsObj () {
+            const _joinSymbol = this.propsObj._joinSymbol || "/";
+            return {
+                _cascaderFilterVals: [], // 过滤级联数据，只保留的数组
+                _changeOnSelect: false, // 每级菜单都可取值
+                _filterable: true,
+                _renderFormat: (labels) => labels.join(_joinSymbol),
+
+                ...this.propsObj,
+                ...this.commonDealPropsObj,
+
+                _saveKey: this.propsObj._saveKey || "_key",
+                _valueKey: this.propsObj._valueKey || "code",
+                _nameKey: this.propsObj._nameKey || "name",
+                _joinSymbol: _joinSymbol // 级联拼接符
+            };
+        },
+        cascaderLevel () {
+            return this.selfPropsObj._cascaderLevel;
+        },
+        cascaderFilterVals () {
+            return this.selfPropsObj._cascaderFilterVals;
+        },
+        changeOnSelect () {
+            return this.isOnSearch ? true : this.selfPropsObj._changeOnSelect;
+        },
+        saveKey () {
+            return this.selfPropsObj._saveKey;
+        },
+        valueKey () {
+            return this.selfPropsObj._valueKey;
+        },
+        nameKey () {
+            return this.selfPropsObj._nameKey;
+        },
+        renderFormat () {
+            return this.selfPropsObj._renderFormat;
+        },
+
+        originData () {
+            return ["region", "regions"].includes(this.controlType)
+                ? regionData
+                : ["userIndustry"].includes(this.controlType)
+                    ? userIndustryData
+                    : this.selfPropsObj._data;
+        },
+        cascaderData () {
+            const loop = (data = [], level, parentKeys = [], filterVals = [], isMobile = false) => {
+                if (data && filterVals.length) {
+                    data = data.filter(item => filterVals.includes(item[this.saveKey]));
+                }
+
+                return data
+                    ? data.reduce((arr, item) => {
+                        let newItem = {
+                            keys: [...parentKeys, item[this.saveKey]], // ！！此处就是用_key拼，不会用别的属性
+                            code: [...parentKeys, item._key].join(""),
+                            ...item
+                        };
+                        newItem = {
+                            ...newItem,
+                            value: newItem[this.valueKey],
+                            label: newItem[this.nameKey]
+                        };
+
+                        if (
+                            (!level || level > newItem.level) &&
+                            (newItem.children && newItem.children.length)
+                        ) {
+                            newItem.loading = false; // 此代码pc端在用：为了所请求的级，出现继续加载的箭头图标
+                            newItem.children = loop(newItem.children, level, newItem.keys, undefined, isMobile);
+                        } else {
+                            newItem.children = isMobile ? undefined : [];
+                            newItem.isLeaf = true;
+                        }
+                        arr.push(newItem);
+
+                        return arr;
+                    }, [])
+                    : [];
+            };
+
+            return loop(this.originData, this.cascaderLevel, undefined, this.cascaderFilterVals, this.isMobile);
+        },
+        curValName: {
+            get () {
+                return this.transformFullName(this.curValList);
+            },
+            set (val) {
+                if (!val) {
+                    this.clickClear();
+                }
+            }
+        },
+        showVal () {
+            return this.$isEmptyData(this.curValList)
+                ? this.emptyShowVal
+                : this.curValName;
+        },
+        curValNameList () {
+            return this.curValList.map(item => this.transformFullName(item));
+        },
+        showMulVal () {
+            return this.$isEmptyData(this.curValList)
+                ? this.emptyShowVal
+                : this.curValNameList.join("，");
+        }
+    },
+    created () { },
+    methods: {
+        // 点击选择框 进行选择
+        clickInput (e) {
+            if (!this.selfPropsObj._disabled) {
+                this.openModal();
+            } else {
+                e.stopPropagation();
+            }
+        },
+
+        // 点击清除
+        clickClear () {
+            this.curValList = [];
+        },
+        // 删除
+        clickDeleteItem (nameItem, index) {
+            this.curValList.splice(index, 1);
+            this.curValList = [...this.curValList];
+        },
+        confirmCb (val, selectedOptions) {
+            this.curValList = val;
+
+            this.closeModal();
+        },
+        confirmMulCb (val, selectedOptions) {
+            if (this.curValList.some(item => JSON.stringify(item) == JSON.stringify(val))) {
+                this.$Message.error({
+                    content: `"${this.transformFullName(val)}"已选择，请勿重复选择！`,
+                    duration: 4
+                });
+            } else {
+                this.curValList = [...this.curValList, val];
+
+                this.closeModal();
+            }
+        },
+
+        /* --------- 级联面板 -------- */
+        clickConfirm (val, selectedOptions) {
+            if (val.length) {
+                if (!this.changeOnSelect && !selectedOptions.slice(-1)[0].isLeaf) {
+                    this.$Message.error({
+                        content: "请选择到末级数据！",
+                        duration: 2
+                    });
+                } else {
+                    this.multipleMode
+                        ? this.confirmMulCb(val, selectedOptions)
+                        : this.confirmCb(val, selectedOptions);
+                }
+            } else {
+                this.$Message.error({
+                    content: "请选择数据！",
+                    duration: 2
+                });
+            }
+        },
+
+        /* --------- 工具类 -------- */
+        // 转化出级联全名
+        transformFullName (val) {
+            return this.renderFormat(this.$getTreeLinealDatas(val, this.cascaderData, this.nameKey, this.saveKey));
+        }
+    }
+};