bri-components 1.5.13 → 1.5.15

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

@@ -1,141 +1,141 @@
-<template>
-    <div class="cascaderSimple">
-        <Cascader
-            :value="activeCodeValue"
-            :data="renderData"
-            :placeholder="selfPropsObj._placeholder"
-            :disabled="disabled"
-            :clearable="clearable"
-            :size="selfPropsObj._size"
-            :filterable="useFilter"
-            :render-format="renderFormat"
-            :change-on-select="changeOnSelect"
-            :transfer="selfPropsObj._transfer"
-            :transfer-class-name="'cascaderSimple-transfer ' + selfPropsObj._transferClassName"
-            :load-data="loadData"
-            @on-visible-change="changeVisible"
-            @on-change="changeSelect"
-            @click.native="clickCascader"
-        >
-            <slot></slot>
-        </Cascader>
-    </div>
-</template>
-
-<script>
-    import cascaderPickerMixin from "../../../mixins/cascaderPickerMixin.js";
-
-    export default {
-        name: "cascaderSimple",
-        mixins: [
-            cascaderPickerMixin
-        ],
-        components: {},
-        props: {},
-        data () {
-            return {
-                renderAll: false
-            };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    ...this.propsObj
-                };
-            },
-            useFilter () {
-                // 多选暂不支持搜索，值得弄成false，不然出bug
-                return this.multipleMode ? false : this.filterable;
-            },
-
-            renderData () {
-                return this.renderAll
-                    ? this.data
-                    : this.data.map(item => ({
-                        ...item,
-                        children: []
-                }));
-            }
-        },
-        created () {},
-        methods: {
-            // 动态加载数据
-            loadData (treeItem, cb) {
-                const linealDatas = this.$getTreeLinealDatas(treeItem.keys, this.data, undefined, this.saveKey);
-                const lastData = linealDatas.slice(-1)[0];
-                treeItem.children = lastData.children.map(item =>
-                    ({
-                        ...item,
-                        children: []
-                    })
-                );
-
-                cb();
-            },
-            // 点击级联框 如果是需要搜索，需要先渲染完多有节点，不然搜索起来
-            clickCascader () {
-                // if (
-                //     !this.disabled &&
-                //     this.useFilter === true &&
-                //     this.renderAll === false &&
-                //     !this.clickFlag
-                // ) {
-                //     this.clickFlag = true; // 这个处理其实觉大概率没必要，有没有不受影响
-                //     setTimeout(() => {
-                //         this.renderAll = true;
-                //     }, 0);
-                // }
-            },
-            // 展开和关闭弹窗时触发
-            changeVisible (bool) {
-                this.isVisible = bool;
-
-                if (this.isVisible === false) {
-                    // 多选时
-                    if (this.multipleMode) {
-                        this.clickConfirm();
-                    }
-                }
-            },
-            // 选项变化
-            changeSelect (value, selectedOptions) {
-                if (this.isVisible || !value.length) {
-                    const node = selectedOptions.slice(-1)[0] || {
-                        keys: [],
-                        loading: false
-                    };
-
-                    // 避免重复点击 -简易模式其实无效，不过为了代码对照好看
-                    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.loading === undefined && this.$emit("finish", obj);
-
-                        // 单选时
-                        if (!this.multipleMode) {
-                            this.clickConfirm();
-                        }
-                    }
-                }
-            },
-            clickConfirm () {
-                if (this.selectedValue.length && this.selectedOptions.length) {
-                    this.$emit("confirm", this.selectedValue, this.selectedOptions);
-                }
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .cascaderSimple {
-        &-transfer.ivu-cascader-transfer {
-            max-width: 800px;
-        }
-    }
-</style>
+<template>
+    <div class="cascaderSimple">
+        <Cascader
+            :value="activeCodeValue"
+            :data="renderData"
+            :placeholder="selfPropsObj._placeholder"
+            :disabled="disabled"
+            :clearable="clearable"
+            :size="selfPropsObj._size"
+            :filterable="useFilter"
+            :render-format="renderFormat"
+            :change-on-select="changeOnSelect"
+            :transfer="selfPropsObj._transfer"
+            :transfer-class-name="'cascaderSimple-transfer ' + selfPropsObj._transferClassName"
+            :load-data="loadData"
+            @on-visible-change="changeVisible"
+            @on-change="changeSelect"
+            @click.native="clickCascader"
+        >
+            <slot></slot>
+        </Cascader>
+    </div>
+</template>
+
+<script>
+    import cascaderPickerMixin from "../../../mixins/cascaderPickerMixin.js";
+
+    export default {
+        name: "cascaderSimple",
+        mixins: [
+            cascaderPickerMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {
+                renderAll: false
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj
+                };
+            },
+            useFilter () {
+                // 多选暂不支持搜索，值得弄成false，不然出bug
+                return this.multipleMode ? false : this.filterable;
+            },
+
+            renderData () {
+                return this.renderAll
+                    ? this.data
+                    : this.data.map(item => ({
+                        ...item,
+                        children: []
+                }));
+            }
+        },
+        created () {},
+        methods: {
+            // 动态加载数据
+            loadData (treeItem, cb) {
+                const linealDatas = this.$getTreeLinealDatas(treeItem.keys, this.data, undefined, this.saveKey);
+                const lastData = linealDatas.slice(-1)[0];
+                treeItem.children = lastData.children.map(item =>
+                    ({
+                        ...item,
+                        children: []
+                    })
+                );
+
+                cb();
+            },
+            // 点击级联框 如果是需要搜索，需要先渲染完多有节点，不然搜索起来
+            clickCascader () {
+                // if (
+                //     !this.disabled &&
+                //     this.useFilter === true &&
+                //     this.renderAll === false &&
+                //     !this.clickFlag
+                // ) {
+                //     this.clickFlag = true; // 这个处理其实觉大概率没必要，有没有不受影响
+                //     setTimeout(() => {
+                //         this.renderAll = true;
+                //     }, 0);
+                // }
+            },
+            // 展开和关闭弹窗时触发
+            changeVisible (bool) {
+                this.isVisible = bool;
+
+                if (this.isVisible === false) {
+                    // 多选时
+                    if (this.multipleMode) {
+                        this.clickConfirm();
+                    }
+                }
+            },
+            // 选项变化
+            changeSelect (value, selectedOptions) {
+                if (this.isVisible || !value.length) {
+                    const node = selectedOptions.slice(-1)[0] || {
+                        keys: [],
+                        loading: false
+                    };
+
+                    // 避免重复点击 -简易模式其实无效，不过为了代码对照好看
+                    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.loading === undefined && this.$emit("finish", obj);
+
+                        // 单选时
+                        if (!this.multipleMode) {
+                            this.clickConfirm();
+                        }
+                    }
+                }
+            },
+            clickConfirm () {
+                if (this.selectedValue.length && this.selectedOptions.length) {
+                    this.$emit("confirm", this.selectedValue, this.selectedOptions);
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .cascaderSimple {
+        &-transfer.ivu-cascader-transfer {
+            max-width: 800px;
+        }
+    }
+</style>

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

@@ -1,151 +1,151 @@
-<template>
-    <div class="cascaderTree">
-        <Dropdown
-            v-clickoutside="clickCancel"
-            style="width: 100%;"
-            trigger="custom"
-            :visible="showModal"
-            :placement="'bottom-start'"
-            :transfer="true"
-            :transfer-class-name="`cascaderTree-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">
-
-                    </div>
-
-                    <!-- 按钮 -->
-                    <dsh-buttons
-                        class="wrap-header-right"
-                        :list="$getOperationList()"
-                        @click="$dispatchEvent($event)"
-                    ></dsh-buttons>
-                </div>
-
-                <!-- 内容 -->
-                <div class="wrap-content">
-                    <Tree
-                        :data="showTreeData"
-                        show-checkbox
-                        check-directly
-                        @on-check-change="changeCheck"
-                    ></Tree>
-                </div>
-            </div>
-        </Dropdown>
-    </div>
-</template>
-
-<script>
-    import cascaderPickerMixin from "../../../mixins/cascaderPickerMixin.js";
-
-    export default {
-        name: "cascaderTree",
-        mixins: [
-            cascaderPickerMixin
-        ],
-        components: {},
-        props: {},
-        data () {
-            return {
-                checkList: []
-            };
-        },
-        computed: {},
-        created () {},
-        methods: {
-            changeCheck (checkList = [], curItem) {
-                // 不是末级节点 -点击后是选中状态话，把子孙后代节点全部展开；点击后是取消勾选状态话，把子孙后代节点全部收起来
-                if (!curItem.isLeaf) {
-                    const loop = (node = { children: [] }) => {
-                        node.expand = !!node.checked;
-                        node.children.forEach(childNode => loop(childNode));
-                    };
-                    loop(curItem);
-                }
-
-                this.confirmed = false;
-                this.checkList = checkList;
-            },
-            clickConfirm () {
-                if (this.confirmed === false) {
-                    this.selectedValueArr = this.checkList.filter(node => !!node.checked).map(node => node.keys);
-                    this.$emit("confirmMul", this.selectedValueArr, this.selectedOptionsArr);
-                    this.confirmed = true;
-                } else {
-                    this.clickCancel();
-                }
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .cascaderTree {
-        &-down {
-            .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: 200px;
-                        display: flex;
-                        align-items: center;
-                    }
-
-                    &-right {
-                        padding-left: 10px;
-                        display: flex;
-                        justify-content: flex-end;
-                    }
-                }
-
-                &-content {
-                    width: 100%;
-                    min-height: 300px;
-                    max-height: 540px;
-                    padding: 10px 20px;
-                    overflow: auto;
-                }
-            }
-
-            &.ivu-select-dropdown {
-                min-width: 420px;
-                max-width: 420px;
-                // min-height: 300px;
-                max-height: 600px; // 必须有，压住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);
-            }
-        }
-    }
-</style>
+<template>
+    <div class="cascaderTree">
+        <Dropdown
+            v-clickoutside="clickCancel"
+            style="width: 100%;"
+            trigger="custom"
+            :visible="showModal"
+            :placement="'bottom-start'"
+            :transfer="true"
+            :transfer-class-name="`cascaderTree-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">
+
+                    </div>
+
+                    <!-- 按钮 -->
+                    <dsh-buttons
+                        class="wrap-header-right"
+                        :list="$getOperationList()"
+                        @click="$dispatchEvent($event)"
+                    ></dsh-buttons>
+                </div>
+
+                <!-- 内容 -->
+                <div class="wrap-content">
+                    <Tree
+                        :data="showTreeData"
+                        show-checkbox
+                        check-directly
+                        @on-check-change="changeCheck"
+                    ></Tree>
+                </div>
+            </div>
+        </Dropdown>
+    </div>
+</template>
+
+<script>
+    import cascaderPickerMixin from "../../../mixins/cascaderPickerMixin.js";
+
+    export default {
+        name: "cascaderTree",
+        mixins: [
+            cascaderPickerMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {
+                checkList: []
+            };
+        },
+        computed: {},
+        created () {},
+        methods: {
+            changeCheck (checkList = [], curItem) {
+                // 不是末级节点 -点击后是选中状态话，把子孙后代节点全部展开；点击后是取消勾选状态话，把子孙后代节点全部收起来
+                if (!curItem.isLeaf) {
+                    const loop = (node = { children: [] }) => {
+                        node.expand = !!node.checked;
+                        node.children.forEach(childNode => loop(childNode));
+                    };
+                    loop(curItem);
+                }
+
+                this.confirmed = false;
+                this.checkList = checkList;
+            },
+            clickConfirm () {
+                if (this.confirmed === false) {
+                    this.selectedValueArr = this.checkList.filter(node => !!node.checked).map(node => node.keys);
+                    this.$emit("confirmMul", this.selectedValueArr, this.selectedOptionsArr);
+                    this.confirmed = true;
+                } else {
+                    this.clickCancel();
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .cascaderTree {
+        &-down {
+            .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: 200px;
+                        display: flex;
+                        align-items: center;
+                    }
+
+                    &-right {
+                        padding-left: 10px;
+                        display: flex;
+                        justify-content: flex-end;
+                    }
+                }
+
+                &-content {
+                    width: 100%;
+                    min-height: 300px;
+                    max-height: 540px;
+                    padding: 10px 20px;
+                    overflow: auto;
+                }
+            }
+
+            &.ivu-select-dropdown {
+                min-width: 420px;
+                max-width: 420px;
+                // min-height: 300px;
+                max-height: 600px; // 必须有，压住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);
+            }
+        }
+    }
+</style>