bri-components 1.2.53 → 1.2.55

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

@@ -0,0 +1,406 @@
+<template>
+    <div class="cascaderPicker">
+        <Dropdown
+            style="width: 100%;"
+            trigger="custom"
+            :visible="showModal"
+            :placement="placement"
+            :transfer="true"
+            transfer-class-name="cascaderPicker-down"
+            :stop-propagation="true"
+            :events-enabled="true"
+        >
+            <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>
+
+            <!-- 下拉面板 -->
+            <div
+                slot="list"
+                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">
+                    <!-- 选中项tabs -->
+                    <div class="wrap-content-tabs">
+                        <span
+                            v-for="(tabItem, tabIndex) in selectedLinealDatas"
+                            :key="tabIndex"
+                            class="item"
+                            @click="curTabIndex = tabIndex"
+                        >
+                            <span :class="{
+                                'item-text': true,
+                                'item-text-empty': tabItem[nameKey] === undefined,
+                                'item-text-active': tabIndex === curTabIndex,
+                            }">
+                                {{ tabItem[nameKey] === undefined ?  "请选择" : tabItem[nameKey] }}
+                            </span>
+                        </span>
+                    </div>
+
+                    <!-- 列表 -->
+                    <div class="wrap-content-list">
+                        <!-- 有数据 -->
+                        <DropdownMenu
+                            v-if="showTreeData.length"
+                            class="wrap-content-list-menu"
+                        >
+                            <!-- 拍平方式 -->
+                            <template v-if="useFlatMode">
+                                <DropdownItem
+                                    v-for="dataItem in showFlatData"
+                                    :key="dataItem[valueKey]"
+                                    :class="{
+                                        'item': true,
+                                        'item-active': selectedLastOption && dataItem[valueKey] === selectedLastOption[valueKey],
+                                        'item-disabled': dataItem.disabled
+                                    }"
+                                    :name="dataItem[valueKey]"
+                                    :disabled="dataItem.disabled"
+                                    @click.native.stop="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>
+                                </DropdownItem>
+                            </template>
+
+                            <!-- 层级方式 -->
+                            <template v-else>
+                                <DropdownItem
+                                    v-for="dataItem in curSelectedLinealData.data"
+                                    :key="dataItem[valueKey]"
+                                    :class="{
+                                        'item': true,
+                                        'item-active': dataItem[valueKey] === curSelectedLinealData[valueKey],
+                                        'item-disabled': dataItem.disabled
+                                    }"
+                                    :name="dataItem[valueKey]"
+                                    @click.native.stop="clickItem(dataItem)"
+                                >
+                                    <span class="item-name">
+                                        {{ dataItem[nameKey] }}
+                                    </span>
+
+                                    <span class="item-icon">
+                                        <dsh-icons :list="[{
+                                            icon: dataItem[valueKey] === curSelectedLinealData[valueKey]
+                                                ? 'md-checkmark'
+                                                : dataItem.children.length
+                                                    ? 'ios-arrow-forward'
+                                                    : ''
+                                        }]" />
+                                    </span>
+                                </DropdownItem>
+                            </template>
+                        </DropdownMenu>
+
+                        <!-- 无数据 -->
+                        <div
+                            v-else
+                            class="wrap-content-list-nodata"
+                        >
+                            暂无可用的数据……
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Dropdown>
+    </div>
+</template>
+
+<script>
+    import cascaderPickerMixin from "./cascaderPickerMixin.js";
+
+    export default {
+        name: "cascaderPicker",
+        mixins: [
+            cascaderPickerMixin
+        ],
+        components: {},
+        props: {
+            placement: {
+                type: String,
+                default: "bottom-start"
+            }
+        },
+        data () {
+            return {
+                curTabIndex: 0
+            };
+        },
+        computed: {
+            initData () {
+                return this.data;
+            },
+            selectedLinealDatas () {
+                const arr = this.selectedOptions.map((item, index, list) => {
+                    return {
+                        ...item,
+                        data: index === 0 ? this.showTreeData : list[index - 1].children
+                    };
+                });
+
+                return [
+                    ...arr,
+
+                    ...(
+                        this.selectedOptions.length
+                            ? this.selectedLastOption.children.length && this.curTabIndex + 1 > this.selectedOptions.length
+                                ? [
+                                    {
+                                        data: this.selectedLastOption.children
+                                    }
+                                ]
+                                : []
+                            : [
+                                {
+                                    data: this.showTreeData
+                                }
+                            ]
+                    )
+                ];
+            },
+            curSelectedLinealData () {
+                return this.selectedLinealDatas[this.curTabIndex];
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            // 初始化
+            init () {
+                this.selectedValue = this.activeValue;
+                this.curTabIndex = this.selectedOptions.length
+                    ? this.selectedLastOption.children.length
+                        ? this.selectedOptions.length
+                        : this.selectedOptions.length - 1
+                    : 0;
+            },
+
+            search () {
+                this.selectedValue = [];
+                this.curTabIndex = 0;
+            },
+            clickItemCb (node) {
+                // 区分展示方式
+                if (this.showMode === "default" && node.children.length) {
+                    this.curTabIndex = this.curTabIndex + 1;
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .cascaderPicker {
+        &-down {
+            &.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 {
+                    width: 100%;
+                    height: 40px;
+                    padding: 0px 8px 3px;
+                    border-bottom: 1px solid @borderColor;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    &-left {
+                        width: 270px;
+                        display: flex;
+                        align-items: center;
+
+                        .search {
+                            width: 180px;
+                        }
+
+                        .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 {
+                    &-tabs {
+                        width: 100%;
+                        height: 40px;
+                        padding: 0px 5px;
+                        white-space: nowrap;
+                        overflow: auto;
+
+                        .item {
+                            display: inline-block;
+                            padding: 0px 10px;
+                            cursor: pointer;
+
+                            &-text {
+                                display: inline-block;
+                                padding-top: 3px; // 为了文字靠下点
+                                line-height: 34px;
+                                font-weight: 500;
+
+                                &-empty {
+                                    color: @placeholderColor;
+                                }
+
+                                &-active {
+                                    border-bottom: 3px solid @themeColor;
+                                    // transition-duration: 0.3s;
+                                }
+                            }
+                        }
+                    }
+
+                    &-list {
+                        width: 100%;
+                        min-height: 360px;
+                        max-height: 360px;
+                        padding: 5px 10px 10px;
+                        overflow: auto;
+
+                        &-menu {
+                            .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();
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>

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;
+        },
+
+        useMode () {
+            return this.searchName.trim() &&
+                this.showFlatData.length < this.maxFlatModeSearchNum;
+        },
+        useFlatMode () {
+            return this.filterable &&
+                this.showMode === "flat" &&
+                this.useMode;
+        },
+        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
+                });
+            }
+        }
+
+    }
+};

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

@@ -7,18 +7,15 @@
             :transfer="true"
         >
             <!-- 编辑 -->
-            <bri-control-input
+            <dsh-control-input
                 v-if="canEdit"
-                :class="{
-                    ...commonClass
-                }"
-                :canEdit="finalCanEdit"
+                :class="commonClass"
                 :value="curVal"
-                :inputIcon="inputIcon"
+                :disabled="selfPropsObj._disabled"
                 :propsObj="selfPropsObj"
                 @clear="clickClear"
                 @click.native="clickInput"
-            ></bri-control-input>
+            ></dsh-control-input>
 
             <!-- 查看 -->
             <div
@@ -194,6 +191,8 @@
         computed: {
             selfPropsObj () {
                 return {
+                    _icon: "ios-map-outline",
+
                     ...this.propsObj,
                     ...this.commonDealPropsObj
                 };
@@ -201,9 +200,6 @@
             showType () {
                 return this.selfPropsObj._showType;
             },
-            inputIcon () {
-                return "ios-map-outline";
-            },
 
             curVal: {
                 get () {