bri-components 1.5.21 → 1.6.0

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

@@ -1,366 +1,366 @@
-<template>
-    <div class="cascaderModal">
-        <div @click="clickInput">
-            <slot>
-                <Input
-                    v-model="inputStr"
-                    :placeholder="selfPropsObj._placeholder"
-                    :disabled="disabled"
-                    :readonly="true"
-                    :clearable="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="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">
-                    <!-- 左 -->
-                    <div class="wrap-content-list">
-                        <template v-if="showTreeData.length">
-                            <!-- 拍平方式 -->
-                            <div 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>
-                            </div>
-
-                            <!-- 层级方式 -->
-                            <Tree
-                                v-else
-                                :data="showTreeData"
-                            ></Tree>
-                        </template>
-
-                        <!-- 无数据 -->
-                        <div
-                            v-else
-                            class="wrap-content-list-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 "../../../mixins/cascaderPickerMixin.js";
-
-    export default {
-        name: "cascaderModal",
-        mixins: [
-            cascaderPickerMixin
-        ],
-        components: {},
-        props: {},
-        data () {
-            return {
-                description: ""
-            };
-        },
-        computed: {
-            modalPropsObj () {
-                return {
-                    title: this.selfPropsObj._name,
-                    clasName: this.selfPropsObj._transferClassName
-                };
-            },
-
-            initData () {
-                const loop = (arr = [], newArr = []) => {
-                    return arr.reduce((newArr, 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 [...newArr, newItem];
-                    }, newArr);
-                };
-
-                return loop(this.data);
-            }
-        },
-        created () {
-            this.init();
-        },
-        methods: {
-            init () {
-                this.selectedOptions.forEach(item => {
-                    item.expand = true;
-                });
-                this.getDescription(this.selectedValue);
-            },
-
-            search () {
-                this.selectedValue = [];
-                this.searchMode = "default";
-            },
-            clickItem (node) {
-                // 避免重复点击
-                if (JSON.stringify(this.selectedValue) !== JSON.stringify(node.keys)) {
-                    this.selectedValue = node.keys;
-
-                    const obj = {
-                        value: this.selectedValue,
-                        selectedOptions: this.selectedOptions
-                    };
-                    this.$emit("change", obj);
-                    !node.children.length && this.$emit("finish", obj);
-
-                    this.getDescription(this.selectedValue);
-                }
-            }
-        }
-    };
-</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;
-
-                    &-list {
-                        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>
+<template>
+    <div class="cascaderModal">
+        <div @click="clickInput">
+            <slot>
+                <Input
+                    v-model="inputStr"
+                    :placeholder="selfPropsObj._placeholder"
+                    :disabled="disabled"
+                    :readonly="true"
+                    :clearable="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="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">
+                    <!-- 左 -->
+                    <div class="wrap-content-list">
+                        <template v-if="showTreeData.length">
+                            <!-- 拍平方式 -->
+                            <div 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>
+                            </div>
+
+                            <!-- 层级方式 -->
+                            <Tree
+                                v-else
+                                :data="showTreeData"
+                            ></Tree>
+                        </template>
+
+                        <!-- 无数据 -->
+                        <div
+                            v-else
+                            class="wrap-content-list-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 "../../../mixins/cascaderPickerMixin.js";
+
+    export default {
+        name: "cascaderModal",
+        mixins: [
+            cascaderPickerMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {
+                description: ""
+            };
+        },
+        computed: {
+            modalPropsObj () {
+                return {
+                    title: this.selfPropsObj._name,
+                    clasName: this.selfPropsObj._transferClassName
+                };
+            },
+
+            initData () {
+                const loop = (arr = [], newArr = []) => {
+                    return arr.reduce((newArr, 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 [...newArr, newItem];
+                    }, newArr);
+                };
+
+                return loop(this.data);
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.selectedOptions.forEach(item => {
+                    item.expand = true;
+                });
+                this.getDescription(this.selectedValue);
+            },
+
+            search () {
+                this.selectedValue = [];
+                this.searchMode = "default";
+            },
+            clickItem (node) {
+                // 避免重复点击
+                if (JSON.stringify(this.selectedValue) !== JSON.stringify(node.keys)) {
+                    this.selectedValue = node.keys;
+
+                    const obj = {
+                        value: this.selectedValue,
+                        selectedOptions: this.selectedOptions
+                    };
+                    this.$emit("change", obj);
+                    !node.children.length && this.$emit("finish", obj);
+
+                    this.getDescription(this.selectedValue);
+                }
+            }
+        }
+    };
+</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;
+
+                    &-list {
+                        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>