bri-components 1.2.53 → 1.2.55

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

@@ -0,0 +1,176 @@
+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 {
+                _showMode: "default",
+                _filterable: true,
+                _cascaderFilterVals: [], // 过滤级联数据，只保留的数组
+                _changeOnSelect: false, // 每级菜单都可取值
+                _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 // 级联拼接符
+            };
+        },
+        showType () {
+            return this.selfPropsObj._showMode;
+        },
+        filterable () {
+            return this.selfPropsObj._filterable;
+        },
+        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);
+        },
+        curValKeyList () {
+            return this.$getTreeLinealDatas(this.curValList, this.cascaderData, this.valueKey, this.saveKey);
+        },
+        curValName: {
+            get () {
+                return this.transformFullName(this.curValList);
+            },
+            set (str) {
+                if (!str) {
+                    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 = [];
+        },
+        confirmCb (selectedValue, selectedOptions) {
+            this.curValList = selectedValue;
+
+            this.closeModal();
+        },
+        confirmMulCb (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();
+            }
+        },
+        // 删除
+        clickDeleteItem (nameItem, index) {
+            this.curValList.splice(index, 1);
+            this.curValList = [...this.curValList];
+        },
+
+        /* --------- 工具类 -------- */
+        // 转化出级联全名
+        transformFullName (value) {
+            return this.renderFormat(this.$getTreeLinealDatas(value, this.cascaderData, this.nameKey, this.saveKey));
+        }
+    }
+};

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

@@ -0,0 +1,374 @@
+<template>
+    <div class="cascaderModal">
+        <div @click.stop="clickInput">
+            <slot>
+                <Input
+                    v-model="inputStr"
+                    :placeholder="selfPropsObj._placeholder"
+                    :disabled="selfPropsObj._disabled"
+                    :readonly="true"
+                    :clearable="selfPropsObj._clearable"
+                    :size="selfPropsObj._size"
+                ></Input>
+            </slot>
+        </div>
+
+        <dsh-modal
+            class="cascaderModal-modal"
+            v-model="showModal"
+            mode="middle"
+            :propsObj="modalPropsObj"
+        >
+            <div class="wrap">
+                <div class="wrap-header">
+                    <!-- 搜索 -->
+                    <div class="wrap-header-left">
+                        <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="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="modeTip"
+                                    max-width="250"
+                                    transfer
+                                >
+                                    <Icon
+                                        class="item-header-help"
+                                        type="md-help-circle"
+                                        size="16"
+                                    ></Icon>
+                                </Tooltip>
+                            </template>
+                        </template>
+                    </div>
+
+                    <!-- 按钮 -->
+                    <dsh-buttons
+                        class="wrap-header-right"
+                        :list="$getOperationList()"
+                        @click="$dispatchEvent($event)"
+                    ></dsh-buttons>
+                </div>
+
+                <div class="wrap-content">
+                    <!-- 左 -->
+                    <div class="wrap-content-left">
+                        <template v-if="showTreeData.length">
+                            <!-- 拍平方式 -->
+                            <div v-if="useFlatMode">
+                                <div
+                                    v-for="dataItem in showFlatData"
+                                    :key="dataItem[valueKey]"
+                                    :class="{
+                                        'item': true,
+                                        'item-active': selectedLastOption && dataItem[valueKey] === selectedLastOption[valueKey],
+                                        'item-disabled': dataItem.disabled
+                                    }"
+                                    @click="clickItem(dataItem)"
+                                >
+                                    <span class="item-name">
+                                        {{ dataItem[nameKey] }}
+                                    </span>
+
+                                    <span class="item-icon">
+                                        <dsh-icons :list="[{
+                                            icon: selectedLastOption && dataItem[valueKey] === selectedLastOption[valueKey]
+                                                ? 'md-checkmark'
+                                                : ''
+                                        }]" />
+                                    </span>
+                                </div>
+                            </div>
+
+                            <!-- 层级方式 -->
+                            <Tree
+                                v-else
+                                :data="showTreeData"
+                            ></Tree>
+                        </template>
+
+                        <!-- 无数据 -->
+                        <div
+                            v-else
+                            class="wrap-content-left-nodata"
+                        >
+                            暂无可用的数据……
+                        </div>
+                    </div>
+
+                    <!-- 右 描述 -->
+                    <div class="wrap-content-right">
+                        <div class="wrap-content-right-title">
+                            {{ selectedName }}说明
+                        </div>
+                        <p
+                            class="wrap-content-right-content"
+                            v-html="description"
+                        ></p>
+                    </div>
+                </div>
+            </div>
+        </dsh-modal>
+    </div>
+</template>
+
+<script>
+    import cascaderPickerMixin from "./cascaderPickerMixin.js";
+
+    export default {
+        name: "cascaderModal",
+        mixins: [
+            cascaderPickerMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {
+                description: ""
+            };
+        },
+        computed: {
+            modalPropsObj () {
+                return {
+                    title: this.selfPropsObj._name
+                };
+            },
+
+            initData () {
+                const loop = (data = [], newData = []) => {
+                    return data.reduce((newData, item) => {
+                        const newItem = {
+                            ...item,
+                            value: item[this.valueKey],
+                            title: item[this.nameKey],
+                            expand: false,
+                            description: undefined,
+                            render: (h, { root, node, data }) => {
+                                return h("span", {
+                                    class: {
+                                        "ivu-tree-title-selected": JSON.stringify(data.keys) === JSON.stringify(this.selectedValue)
+                                    },
+                                    style: {
+                                        display: "inline-block",
+                                        width: "100%"
+                                    },
+                                    on: {
+                                        click: () => {
+                                            this.clickItem(data);
+                                        }
+                                    }
+                                }, data.title);
+                            },
+                            children: loop(item.children)
+                        };
+
+                        return [...newData, newItem];
+                    }, newData);
+                };
+
+                return loop(this.data);
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.selectedValue = this.activeValue;
+                this.selectedOptions.forEach(item => {
+                    item.expand = true;
+                });
+                this.dealDescription();
+            },
+
+            search () {
+                this.selectedValue = [];
+            },
+            clickItemCb (node) {
+                this.dealDescription();
+            },
+            dealDescription () {
+                if (this.selectedValue.length && this.selectedLastOption.description == undefined) {
+                    this.getDescription(this.selectedValue);
+                }
+            },
+            getDescription (nodeKeys) {
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "getResourceDescription"
+                    },
+                    params: {
+                        resourceKey: this.resourceKey,
+                        nodeKeys
+                    },
+                    callback: data => {
+                        this.description = data;
+                        this.selectedLastOption.description = data;
+                    }
+                });
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .cascaderModal {
+        &-modal {
+            .wrap {
+                width: 100%;
+                height: 100%;
+                padding: 10px 24px;
+                display: flex;
+                flex-direction: column;
+
+                &-header {
+                    width: 100%;
+                    padding: 0px;
+                    // border-bottom: 1px solid @borderColor;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    &-left {
+                        width: 370px;
+                        display: flex;
+                        align-items: center;
+
+                        .search {
+                            width: 280px;
+                        }
+
+                        .mode {
+                            width: 90px;
+                            padding-top: 14px;
+                            padding-left: 5px;
+                            display: flex;
+                            align-items: center;
+                            cursor: pointer;
+
+                            &-name {
+                                font-size: 12px;
+                            }
+                        }
+                    }
+
+                    &-right {
+                        padding-left: 10px;
+                        display: flex;
+                        justify-content: flex-end;
+                    }
+                }
+
+                &-content {
+                    flex: 1;
+                    min-height: 0px;
+                    margin: 10px 0px 24px;
+                    border: 1px solid #E5E5E5;
+                    display: flex;
+
+                    &-left {
+                        flex: 1;
+                        min-width: 0px;
+                        padding: 5px 10px;
+                        border-right: 1px solid #E5E5E5;
+                        overflow: auto;
+
+                        .item {
+                            padding: 8px 10px;
+                            border-radius: @borderRadius;
+                            line-height: 16px;
+                            cursor: pointer;
+                            display: flex;
+                            flex-direction: row;
+                            justify-content: space-between;
+                            align-items: center;
+
+                            &-name {
+                                flex: 1;
+                                min-width: 0px;
+                                white-space: normal;
+                            }
+
+                            &-icon {
+                                width: 40px;
+                                padding-left: 10px;
+                                text-align: right;
+                            }
+
+                            &:hover,
+                            &-active {
+                                background-color: @theme-focus;
+                                color: @themeColor;
+                            }
+
+                            &-disabled {
+                                background-color: @inputBg-disabled;
+                                color: @textColor-disabled;
+
+                                &:hover {
+                                    background-color: @inputBg-disabled;
+                                    color: @textColor-disabled;
+                                }
+                            }
+                        }
+
+                        &-nodata {
+                            #dsh-nodata();
+                        }
+                    }
+
+                    &-right {
+                        flex: 1;
+                        min-width: 0px;
+
+                        &-title {
+                            padding: 6px 16px;
+                            border-bottom: 1px solid #E5E5E5;
+                            font-weight: 700;
+                        }
+
+                        &-content {
+                            height: calc(100% - 32px);
+                            padding: 16px;
+                            white-space: pre-line;
+                            overflow: auto;
+                        }
+                    }
+
+                    .ivu-tree-title-selected {
+                        background-color: #eee;
+                        color: #3D84EE;
+                    }
+
+                    .ivu-tree-empty {
+                        text-align: center;
+                    }
+                }
+            }
+        }
+    }
+</style>