bri-components 1.5.22 → 1.6.0

package/src/components/controls/base/DshSelect/DshSelectAll.vue

@@ -1,269 +1,269 @@
-<template>
-    <div class="DshSelectAll">
-        <Dropdown
-            style="width: 100%;"
-            v-clickoutside="clickCancel"
-            trigger="custom"
-            :visible="showModal"
-            :placement="'bottom-start'"
-            :transfer="true"
-            :transfer-class-name="`DshSelectAll-down ${selfPropsObj._transferClassName}`"
-            :stop-propagation="true"
-            :events-enabled="true"
-        >
-            <div class="DshSelectAll-input" @click="clickInput">
-                <div v-if="inputData.length" class="DshSelectAll-input-selected dsh-ellipsis">
-                    <Tag
-                        v-for="(item, index) in inputData"
-                        :key="item._key"
-                        closable
-                        @on-close="clickDelete(item, index)"
-                    >
-                        {{ item.name }}
-                    </Tag>
-                </div>
-                <Input
-                    v-if="!selfPropsObj._disabled"
-                    v-model="searchName"
-                    :placeholder="selfPropsObj._placeholder"
-                    :clearable="selfPropsObj._clearable"
-                    :size="selfPropsObj._size"
-                ></Input>
-            </div>
-            <DropdownMenu slot="list">
-                <!-- 用了transfer="true"，防止点击面板冒泡关闭 -->
-                <div class="DshSelectAll-down-box" @click.stop="0">
-                    <div class="DshSelectAll-down-all">
-                        <Checkbox
-                            :indeterminate="indeterminate"
-                            :value="checkAll"
-                            @click.prevent.native="handleCheckAll"
-                        >全选</Checkbox>
-                    </div>
-                    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
-                        <div
-                            v-for="dataItem in dropDownData"
-                            :key="dataItem._key">
-                            <Checkbox :label="dataItem._key">
-                                <span>{{ dataItem._name || dataItem.name }}</span>
-                            </Checkbox>
-                        </div>
-                    </CheckboxGroup>
-
-                    <dsh-buttons
-                        class="DshSelectAll-down-footer"
-                        :list="$getOperationList(['canCancel', 'canConfirm'])"
-                        @click="$dispatchEvent($event)"
-                    ></dsh-buttons>
-                </div>
-            </DropdownMenu>
-        </Dropdown>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "DshSelectAll",
-        data () {
-            return {
-                showModal: false,
-                searchName: "",
-
-                indeterminate: false,
-                checkAll: false,
-                checkAllGroup: [],
-
-                operationMap: {
-                    canCancel: {
-                        name: "取消",
-                        type: "canCancel",
-                        btnType: "text",
-                        size: "small",
-                        event: "clickCancel"
-                    },
-                    canConfirm: {
-                        name: "确认",
-                        type: "canConfirm",
-                        btnType: "primary",
-                        size: "small",
-                        event: "clickConfirm"
-                    }
-                }
-            };
-        },
-        props: {
-            value: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            }
-        },
-        computed: {
-            compKey () {
-                return this.propsObj.compKey;
-            },
-            appKey () {
-                return this.propsObj.appKey;
-            },
-            selfPropsObj () {
-                return {
-                    ...this.propsObj,
-                    _data: this.propsObj._data || [],
-                    _showData: this.propsObj._showData || [],
-                    _placeholder: `请选择${this.propsObj._name}`
-                };
-            },
-            dropDownData () {
-                const _data = this.selfPropsObj._data.filter(item => item._key);
-                const _showData = this.selfPropsObj._showData.filter(item => item._key);
-                let dropShowData = _data.filter(item => item.name.indexOf(this.searchName) > -1);
-                if (dropShowData.length > 20) {
-                    dropShowData.slice(0, 20);
-                }
-                return this.searchName ? dropShowData : _showData;
-            },
-            inputData () {
-                return this.selfPropsObj._data.filter(item => this.value[this.propsObj._key].includes(item._key));
-            },
-            inputStr () {
-                return this.inputData.map(item => item._name || item.name).join("、");
-            }
-        },
-        created () {
-            this.init();
-        },
-        methods: {
-            init () {
-                this.clickCancel(); // 加载先赋值
-            },
-            openModal () {
-                this.showModal = true;
-            },
-            closeModal () {
-                this.searchName = "";
-                this.showModal = false;
-            },
-            clickInput (e) {
-                if (!this.selfPropsObj._disabled) {
-                    this.openModal();
-                } else {
-                    e.stopPropagation();
-                }
-            },
-            clickDelete (item, index) {
-                this.value[this.propsObj._key].splice(index, 1);
-                this.checkAllGroup = this.value[this.propsObj._key];
-                this.$emit("change", this.value[this.propsObj._key]);
-            },
-
-            clickCancel () {
-                if (this.value[this.propsObj._key] && this.value[this.propsObj._key].length) {
-                    this.checkAllGroup = this.value[this.propsObj._key];
-                }
-                this.closeModal();
-            },
-            clickConfirm () {
-                this.value[this.propsObj._key] = this.checkAllGroup;
-                this.closeModal();
-                this.$emit("change", this.value[this.propsObj._key]);
-            },
-
-            handleCheckAll () {
-                if (this.indeterminate) {
-                    this.checkAll = false;
-                } else {
-                    this.checkAll = !this.checkAll;
-                }
-                this.indeterminate = false;
-
-                if (this.checkAll) {
-                    this.checkAllGroup = this.dropDownData.map(item => item._key);
-                } else {
-                    this.checkAllGroup = [];
-                }
-            },
-            checkAllGroupChange (data) {
-                if (data.length === this.dropDownData.length) {
-                    this.indeterminate = false;
-                    this.checkAll = true;
-                } else if (data.length > 0) {
-                    this.indeterminate = true;
-                    this.checkAll = false;
-                } else {
-                    this.indeterminate = false;
-                    this.checkAll = false;
-                }
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .DshSelectAll {
-        &-input {
-            background-color: #FFF;
-            padding: 0 6px;
-            display: flex;
-            align-items: center;
-            border: 1px solid #dcdee2;
-            input::placeholder{
-                color: #666;
-            }
-            &-selected {
-
-            }
-
-            .ivu-input-wrapper {
-                flex: 1;
-                min-width: 20%;
-
-                .ivu-input {
-                    height: 30px;
-                    border: none;
-
-                    &:focus {
-                        box-shadow: none;
-                    }
-                }
-            }
-            .ivu-tag-text{
-                color: #000;
-            }
-            .ivu-tag .ivu-icon-ios-close{
-                color: #000;
-                opacity: 1;
-            }
-        }
-        &-down {
-            &-box {
-                width: 100%;
-                max-height: 300px;
-                padding: 10px 16px;
-                display: flex;
-                flex-direction: column;
-
-                .ivu-checkbox {
-                    margin-right: 10px;
-                }
-                .ivu-checkbox-group {
-                    flex: 1;
-                    overflow: auto;
-                }
-            }
-
-            &-footer {
-                border-top: 1px solid #ccc;
-                margin-top: 10px;
-                padding-top: 10px;
-                text-align: right;
-            }
-        }
-    }
-</style>
+<template>
+    <div class="DshSelectAll">
+        <Dropdown
+            style="width: 100%;"
+            v-clickoutside="clickCancel"
+            trigger="custom"
+            :visible="showModal"
+            :placement="'bottom-start'"
+            :transfer="true"
+            :transfer-class-name="`DshSelectAll-down ${selfPropsObj._transferClassName}`"
+            :stop-propagation="true"
+            :events-enabled="true"
+        >
+            <div class="DshSelectAll-input" @click="clickInput">
+                <div v-if="inputData.length" class="DshSelectAll-input-selected dsh-ellipsis">
+                    <Tag
+                        v-for="(item, index) in inputData"
+                        :key="item._key"
+                        closable
+                        @on-close="clickDelete(item, index)"
+                    >
+                        {{ item.name }}
+                    </Tag>
+                </div>
+                <Input
+                    v-if="!selfPropsObj._disabled"
+                    v-model="searchName"
+                    :placeholder="selfPropsObj._placeholder"
+                    :clearable="selfPropsObj._clearable"
+                    :size="selfPropsObj._size"
+                ></Input>
+            </div>
+            <DropdownMenu slot="list">
+                <!-- 用了transfer="true"，防止点击面板冒泡关闭 -->
+                <div class="DshSelectAll-down-box" @click.stop="0">
+                    <div class="DshSelectAll-down-all">
+                        <Checkbox
+                            :indeterminate="indeterminate"
+                            :value="checkAll"
+                            @click.prevent.native="handleCheckAll"
+                        >全选</Checkbox>
+                    </div>
+                    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
+                        <div
+                            v-for="dataItem in dropDownData"
+                            :key="dataItem._key">
+                            <Checkbox :label="dataItem._key">
+                                <span>{{ dataItem._name || dataItem.name }}</span>
+                            </Checkbox>
+                        </div>
+                    </CheckboxGroup>
+
+                    <dsh-buttons
+                        class="DshSelectAll-down-footer"
+                        :list="$getOperationList(['canCancel', 'canConfirm'])"
+                        @click="$dispatchEvent($event)"
+                    ></dsh-buttons>
+                </div>
+            </DropdownMenu>
+        </Dropdown>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshSelectAll",
+        data () {
+            return {
+                showModal: false,
+                searchName: "",
+
+                indeterminate: false,
+                checkAll: false,
+                checkAllGroup: [],
+
+                operationMap: {
+                    canCancel: {
+                        name: "取消",
+                        type: "canCancel",
+                        btnType: "text",
+                        size: "small",
+                        event: "clickCancel"
+                    },
+                    canConfirm: {
+                        name: "确认",
+                        type: "canConfirm",
+                        btnType: "primary",
+                        size: "small",
+                        event: "clickConfirm"
+                    }
+                }
+            };
+        },
+        props: {
+            value: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        computed: {
+            compKey () {
+                return this.propsObj.compKey;
+            },
+            appKey () {
+                return this.propsObj.appKey;
+            },
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    _data: this.propsObj._data || [],
+                    _showData: this.propsObj._showData || [],
+                    _placeholder: `请选择${this.propsObj._name}`
+                };
+            },
+            dropDownData () {
+                const _data = this.selfPropsObj._data.filter(item => item._key);
+                const _showData = this.selfPropsObj._showData.filter(item => item._key);
+                let dropShowData = _data.filter(item => item.name.indexOf(this.searchName) > -1);
+                if (dropShowData.length > 20) {
+                    dropShowData.slice(0, 20);
+                }
+                return this.searchName ? dropShowData : _showData;
+            },
+            inputData () {
+                return this.selfPropsObj._data.filter(item => this.value[this.propsObj._key].includes(item._key));
+            },
+            inputStr () {
+                return this.inputData.map(item => item._name || item.name).join("、");
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.clickCancel(); // 加载先赋值
+            },
+            openModal () {
+                this.showModal = true;
+            },
+            closeModal () {
+                this.searchName = "";
+                this.showModal = false;
+            },
+            clickInput (e) {
+                if (!this.selfPropsObj._disabled) {
+                    this.openModal();
+                } else {
+                    e.stopPropagation();
+                }
+            },
+            clickDelete (item, index) {
+                this.value[this.propsObj._key].splice(index, 1);
+                this.checkAllGroup = this.value[this.propsObj._key];
+                this.$emit("change", this.value[this.propsObj._key]);
+            },
+
+            clickCancel () {
+                if (this.value[this.propsObj._key] && this.value[this.propsObj._key].length) {
+                    this.checkAllGroup = this.value[this.propsObj._key];
+                }
+                this.closeModal();
+            },
+            clickConfirm () {
+                this.value[this.propsObj._key] = this.checkAllGroup;
+                this.closeModal();
+                this.$emit("change", this.value[this.propsObj._key]);
+            },
+
+            handleCheckAll () {
+                if (this.indeterminate) {
+                    this.checkAll = false;
+                } else {
+                    this.checkAll = !this.checkAll;
+                }
+                this.indeterminate = false;
+
+                if (this.checkAll) {
+                    this.checkAllGroup = this.dropDownData.map(item => item._key);
+                } else {
+                    this.checkAllGroup = [];
+                }
+            },
+            checkAllGroupChange (data) {
+                if (data.length === this.dropDownData.length) {
+                    this.indeterminate = false;
+                    this.checkAll = true;
+                } else if (data.length > 0) {
+                    this.indeterminate = true;
+                    this.checkAll = false;
+                } else {
+                    this.indeterminate = false;
+                    this.checkAll = false;
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshSelectAll {
+        &-input {
+            background-color: #FFF;
+            padding: 0 6px;
+            display: flex;
+            align-items: center;
+            border: 1px solid #dcdee2;
+            input::placeholder{
+                color: #666;
+            }
+            &-selected {
+
+            }
+
+            .ivu-input-wrapper {
+                flex: 1;
+                min-width: 20%;
+
+                .ivu-input {
+                    height: 30px;
+                    border: none;
+
+                    &:focus {
+                        box-shadow: none;
+                    }
+                }
+            }
+            .ivu-tag-text{
+                color: #000;
+            }
+            .ivu-tag .ivu-icon-ios-close{
+                color: #000;
+                opacity: 1;
+            }
+        }
+        &-down {
+            &-box {
+                width: 100%;
+                max-height: 300px;
+                padding: 10px 16px;
+                display: flex;
+                flex-direction: column;
+
+                .ivu-checkbox {
+                    margin-right: 10px;
+                }
+                .ivu-checkbox-group {
+                    flex: 1;
+                    overflow: auto;
+                }
+            }
+
+            &-footer {
+                border-top: 1px solid #ccc;
+                margin-top: 10px;
+                padding-top: 10px;
+                text-align: right;
+            }
+        }
+    }
+</style>