bri-components 1.5.13 → 1.5.15

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

@@ -1,416 +1,416 @@
-<template>
-    <div class="cascaderPicker">
-        <Dropdown
-            v-clickoutside="clickCancel"
-            style="width: 100%;"
-            trigger="custom"
-            :visible="showModal"
-            :placement="'bottom-start'"
-            :transfer="true"
-            :transfer-class-name="`cascaderPicker-down ${selfPropsObj._transferClassName}`"
-            :stop-propagation="true"
-            :events-enabled="true"
-        >
-            <div @click="clickInput">
-                <slot>
-                    <Input
-                        v-model="inputStr"
-                        :placeholder="selfPropsObj._placeholder"
-                        :disabled="disabled"
-                        :readonly="true"
-                        :clearable="clearable"
-                        :size="selfPropsObj._size"
-                    ></Input>
-                </slot>
-            </div>
-
-            <!-- 下拉面板 click.stop目的：slot插槽里的会渲染到body下，点击此面板时，click事件会被Dropdown捕捉到，被当成外部点击事件，用stop阻止住 -->
-            <div
-                slot="list"
-                class="wrap"
-                @click.stop="0"
-            >
-                <!-- 头部 -->
-                <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="canUseModeSwitch"
-                                    class="mode"
-                                    @click="searchMode = searchMode === 'default' ? 'flat' : 'default'"
-                                >
-                                    <dsh-icons :list="[{ icon: 'md-swap' }]" />
-                                    <span class="mode-name">
-                                        {{ searchMode === "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">
-                        <!-- 有数据 -->
-                        <div
-                            v-if="showTreeData.length"
-                            class="wrap-content-list-menu"
-                        >
-                            <!-- 拍平方式 -->
-                            <template v-if="useFlatMode">
-                                <div
-                                    v-for="nodeItem in showFlatData"
-                                    :key="nodeItem[valueKey]"
-                                    :class="{
-                                        'item': true,
-                                        'item-active': selectedObj && nodeItem[valueKey] === selectedObj[valueKey],
-                                        'item-disabled': nodeItem.disabled
-                                    }"
-                                    @click="clickItem(nodeItem)"
-                                >
-                                    <span class="item-name">
-                                        {{ nodeItem[nameKey] }}
-                                    </span>
-
-                                    <span class="item-icon">
-                                        <dsh-icons :list="[{
-                                            icon: selectedObj && nodeItem[valueKey] === selectedObj[valueKey]
-                                                ? 'md-checkmark'
-                                                : ''
-                                        }]" />
-                                    </span>
-                                </div>
-                            </template>
-
-                            <!-- 层级方式 -->
-                            <template v-else>
-                                <div
-                                    v-for="nodeItem in curSelectedLinealData.data"
-                                    :key="nodeItem[valueKey]"
-                                    :class="{
-                                        'item': true,
-                                        'item-active': nodeItem[valueKey] === curSelectedLinealData[valueKey],
-                                        'item-disabled': nodeItem.disabled
-                                    }"
-                                    @click="clickItem(nodeItem)"
-                                >
-                                    <span class="item-name">
-                                        {{ nodeItem[nameKey] }}
-                                    </span>
-
-                                    <span class="item-icon">
-                                        <dsh-icons :list="[{
-                                            icon: nodeItem[valueKey] === curSelectedLinealData[valueKey]
-                                                ? 'md-checkmark'
-                                                : nodeItem.children.length
-                                                    ? 'ios-arrow-forward'
-                                                    : ''
-                                        }]" />
-                                    </span>
-                                </div>
-                            </template>
-                        </div>
-
-                        <!-- 无数据 -->
-                        <div
-                            v-else
-                            class="wrap-content-list-nodata"
-                        >
-                            暂无可用的数据……
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Dropdown>
-    </div>
-</template>
-
-<script>
-    import cascaderPickerMixin from "../../../mixins/cascaderPickerMixin.js";
-
-    export default {
-        name: "cascaderPicker",
-        mixins: [
-            cascaderPickerMixin
-        ],
-        components: {},
-        props: {},
-        data () {
-            return {
-                curTabIndex: 0
-            };
-        },
-        computed: {
-            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.selectedObj.children.length && this.curTabIndex + 1 > this.selectedOptions.length
-                                ? [
-                                    {
-                                        data: this.selectedObj.children
-                                    }
-                                ]
-                                : []
-                            : [
-                                {
-                                    data: this.showTreeData
-                                }
-                            ]
-                    )
-                ];
-            },
-            curSelectedLinealData () {
-                return this.selectedLinealDatas[this.curTabIndex];
-            }
-        },
-        watch: {
-            data () {
-                this.init();
-            }
-        },
-        created () {
-            this.init();
-        },
-        methods: {
-            // 初始化
-            init () {
-                this.curTabIndex = this.selectedOptions.length
-                    ? this.selectedObj.children.length
-                        ? this.selectedOptions.length
-                        : this.selectedOptions.length - 1
-                    : 0;
-            },
-
-            search () {
-                this.selectedValue = [];
-                this.searchMode = "default";
-                this.curTabIndex = 0;
-            },
-            clickItem (node) {
-                // 避免重复点击
-                if (JSON.stringify(this.selectedValue) !== JSON.stringify(node.keys)) {
-                    this.selectedValue = node.keys;
-
-                    const obj = {
-                        value: this.selectedValue,
-                        selectedOptions: this.selectedOptions,
-                        tabIndex: this.curTabIndex
-                    };
-                    this.$emit("change", obj);
-                    !node.children.length && this.$emit("finish", obj);
-                }
-
-                // 区分展示方式
-                if (this.searchMode === "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: 500px; // 必须有，压住iview的300px
-                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: 280px;
-                        max-height: 360px;
-                        padding: 5px 10px 10px;
-                        overflow: auto;
-
-                        &-menu {
-                            .item {
-                                margin: 2px 0px;
-                                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>
+<template>
+    <div class="cascaderPicker">
+        <Dropdown
+            v-clickoutside="clickCancel"
+            style="width: 100%;"
+            trigger="custom"
+            :visible="showModal"
+            :placement="'bottom-start'"
+            :transfer="true"
+            :transfer-class-name="`cascaderPicker-down ${selfPropsObj._transferClassName}`"
+            :stop-propagation="true"
+            :events-enabled="true"
+        >
+            <div @click="clickInput">
+                <slot>
+                    <Input
+                        v-model="inputStr"
+                        :placeholder="selfPropsObj._placeholder"
+                        :disabled="disabled"
+                        :readonly="true"
+                        :clearable="clearable"
+                        :size="selfPropsObj._size"
+                    ></Input>
+                </slot>
+            </div>
+
+            <!-- 下拉面板 click.stop目的：slot插槽里的会渲染到body下，点击此面板时，click事件会被Dropdown捕捉到，被当成外部点击事件，用stop阻止住 -->
+            <div
+                slot="list"
+                class="wrap"
+                @click.stop="0"
+            >
+                <!-- 头部 -->
+                <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="canUseModeSwitch"
+                                    class="mode"
+                                    @click="searchMode = searchMode === 'default' ? 'flat' : 'default'"
+                                >
+                                    <dsh-icons :list="[{ icon: 'md-swap' }]" />
+                                    <span class="mode-name">
+                                        {{ searchMode === "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">
+                        <!-- 有数据 -->
+                        <div
+                            v-if="showTreeData.length"
+                            class="wrap-content-list-menu"
+                        >
+                            <!-- 拍平方式 -->
+                            <template v-if="useFlatMode">
+                                <div
+                                    v-for="nodeItem in showFlatData"
+                                    :key="nodeItem[valueKey]"
+                                    :class="{
+                                        'item': true,
+                                        'item-active': selectedObj && nodeItem[valueKey] === selectedObj[valueKey],
+                                        'item-disabled': nodeItem.disabled
+                                    }"
+                                    @click="clickItem(nodeItem)"
+                                >
+                                    <span class="item-name">
+                                        {{ nodeItem[nameKey] }}
+                                    </span>
+
+                                    <span class="item-icon">
+                                        <dsh-icons :list="[{
+                                            icon: selectedObj && nodeItem[valueKey] === selectedObj[valueKey]
+                                                ? 'md-checkmark'
+                                                : ''
+                                        }]" />
+                                    </span>
+                                </div>
+                            </template>
+
+                            <!-- 层级方式 -->
+                            <template v-else>
+                                <div
+                                    v-for="nodeItem in curSelectedLinealData.data"
+                                    :key="nodeItem[valueKey]"
+                                    :class="{
+                                        'item': true,
+                                        'item-active': nodeItem[valueKey] === curSelectedLinealData[valueKey],
+                                        'item-disabled': nodeItem.disabled
+                                    }"
+                                    @click="clickItem(nodeItem)"
+                                >
+                                    <span class="item-name">
+                                        {{ nodeItem[nameKey] }}
+                                    </span>
+
+                                    <span class="item-icon">
+                                        <dsh-icons :list="[{
+                                            icon: nodeItem[valueKey] === curSelectedLinealData[valueKey]
+                                                ? 'md-checkmark'
+                                                : nodeItem.children.length
+                                                    ? 'ios-arrow-forward'
+                                                    : ''
+                                        }]" />
+                                    </span>
+                                </div>
+                            </template>
+                        </div>
+
+                        <!-- 无数据 -->
+                        <div
+                            v-else
+                            class="wrap-content-list-nodata"
+                        >
+                            暂无可用的数据……
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Dropdown>
+    </div>
+</template>
+
+<script>
+    import cascaderPickerMixin from "../../../mixins/cascaderPickerMixin.js";
+
+    export default {
+        name: "cascaderPicker",
+        mixins: [
+            cascaderPickerMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {
+                curTabIndex: 0
+            };
+        },
+        computed: {
+            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.selectedObj.children.length && this.curTabIndex + 1 > this.selectedOptions.length
+                                ? [
+                                    {
+                                        data: this.selectedObj.children
+                                    }
+                                ]
+                                : []
+                            : [
+                                {
+                                    data: this.showTreeData
+                                }
+                            ]
+                    )
+                ];
+            },
+            curSelectedLinealData () {
+                return this.selectedLinealDatas[this.curTabIndex];
+            }
+        },
+        watch: {
+            data () {
+                this.init();
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            // 初始化
+            init () {
+                this.curTabIndex = this.selectedOptions.length
+                    ? this.selectedObj.children.length
+                        ? this.selectedOptions.length
+                        : this.selectedOptions.length - 1
+                    : 0;
+            },
+
+            search () {
+                this.selectedValue = [];
+                this.searchMode = "default";
+                this.curTabIndex = 0;
+            },
+            clickItem (node) {
+                // 避免重复点击
+                if (JSON.stringify(this.selectedValue) !== JSON.stringify(node.keys)) {
+                    this.selectedValue = node.keys;
+
+                    const obj = {
+                        value: this.selectedValue,
+                        selectedOptions: this.selectedOptions,
+                        tabIndex: this.curTabIndex
+                    };
+                    this.$emit("change", obj);
+                    !node.children.length && this.$emit("finish", obj);
+                }
+
+                // 区分展示方式
+                if (this.searchMode === "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: 500px; // 必须有，压住iview的300px
+                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: 280px;
+                        max-height: 360px;
+                        padding: 5px 10px 10px;
+                        overflow: auto;
+
+                        &-menu {
+                            .item {
+                                margin: 2px 0px;
+                                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>