bri-components 1.5.22 → 1.6.0

package/src/components/controls/senior/DshLabels.vue

@@ -1,333 +1,333 @@
-<template>
-    <!-- 编辑 -->
-    <div
-        v-if="canEdit"
-        class="DshLabels"
-    >
-        <Dropdown
-            class="DshLabels-dropdown"
-            trigger="custom"
-            placement="bottom-start"
-            :visible="isVisible"
-            transfer
-            @on-clickoutside="clickInput"
-        >
-            <!-- 可编辑 -->
-            <dsh-control-input
-                :class="commonClass"
-                :value="curValList"
-                :disabled="disabled"
-                :heightAuto="isHeightAuto"
-                :propsObj="selfPropsObj"
-                @deleteItem="clickDeleteItem"
-                @clear="clickClear"
-                @click.native="clickInput"
-            ></dsh-control-input>
-
-            <template #list>
-                <DropdownMenu class="DshLabels-dropdown-menu">
-                    <DropdownItem
-                        v-for="listItem in listData"
-                        :key="listItem._key"
-                        :class="{
-                            'item': true,
-                            'item-active': !!curValList.find(item => item._key === listItem._key)
-                        }"
-                        @click.native="clickItem(listItem)"
-                    >
-
-                        <div
-                            v-if="listItem.isEdit"
-                            class="item-edit"
-                        >
-                            <Input
-                                v-model="listItem.name"
-                                @click.native="clickEditInput($event)"
-                            >
-                            <template #suffix>
-                                <Icon
-                                    class="item-edit-icon"
-                                    custom="bri bri-duigou"
-                                    @click.native.stop="clickConfirm(listItem)"
-                                />
-                            </template>
-                            </Input>
-                        </div>
-
-                        <div
-                            v-else
-                            class="item-show"
-                        >
-                            {{ listItem.name }}
-                            <span class="item-show-icons">
-                                <Icon
-                                    v-if="!listItem.coreLabel"
-                                    class="item-show-icons-edit"
-                                    custom="bri bri-bianji"
-                                    @click.stop="clickEditIcon(listItem)"
-                                />
-                                <!-- 暂时不需要删除 -->
-                                <!-- <Icon
-                                        class="item-show-icons-del"
-                                        custom="bri bri-shanchu"
-                                    /> -->
-                            </span>
-                        </div>
-                    </DropdownItem>
-
-                    <div
-                        v-if="!onlySelect"
-                        class="btns"
-                    >
-                        <bri-button
-                            class="btns-add"
-                            :propsObj="{
-                                    btnType: 'default',
-                                    icon:'md-add'
-                                }"
-                            @click.native.stop="clickAddItem"
-                        >添加选项</bri-button>
-                    </div>
-                </DropdownMenu>
-            </template>
-        </Dropdown>
-    </div>
-
-    <!-- 查看 -->
-    <div
-        v-else
-        class="DshLabels-show"
-    >
-        <!-- 有值 -->
-        <template v-if="!$isEmptyData(curValList)">
-            <!-- 高度自由时 -->
-            <dsh-tags
-                v-if="isHeightAuto"
-                :class="{
-                    ...commonClass,
-                    'DshLabels-show-auto': true
-                }"
-                itemClass="DshLabels-show-auto-tag"
-                :list="curValList"
-            ></dsh-tags>
-
-            <!-- 高度不自由（不换行） -->
-            <bri-tooltip
-                v-else
-                :content="showMulVal"
-                :transfer="true"
-            >
-                <dsh-tags
-                    :class="{
-                        ...commonClass,
-                        'DshLabels-show-ellipsis': true
-                    }"
-                    itemClass="DshLabels-show-ellipsis-tag"
-                    :list="curValList"
-                ></dsh-tags>
-            </bri-tooltip>
-        </template>
-
-        <!-- 无值 -->
-        <div
-            v-else
-            :class="commonClass"
-        >
-            {{ emptyShowVal }}
-        </div>
-    </div>
-</template>
-
-<script>
-    import controlMixin from "../mixins/controlMixin.js";
-
-    export default {
-        name: "DshLabels",
-        mixins: [
-            controlMixin
-        ],
-        data () {
-            return {
-                listData: [],
-                isVisible: false,
-                renderList: false
-            };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    _icon: this.isVisible ? "ios-arrow-up" : "ios-arrow-down",
-                    _labelType: "entity",
-                    _onlySelect: false,
-                    _originLabels: [],
-
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj
-                };
-            },
-            subType () {
-                return this.selfPropsObj._labelType;
-            },
-            onlySelect () {
-                return this.isInAnySearch ? true : this.selfPropsObj._onlySelect;
-            },
-            originLabels () {
-                return this.selfPropsObj._originLabels;
-            },
-
-            showMulVal () {
-                return this.$isEmptyData(this.curValList)
-                    ? this.emptyShowVal
-                    : this.curValList.map(item => item.name).join("、");
-            }
-        },
-        created () {},
-        methods: {
-            clickInput () {
-                if (!this.disabled) {
-                    if (!this.renderList) {
-                        if (this.isDftSet) {
-                            this.listData = this.originLabels.map(item => {
-                                return {
-                                    ...item,
-                                    isEdit: false
-                                };
-                            });
-                        } else {
-                            this.getListData();
-                        }
-                    }
-                    this.renderList = true;
-                    this.isVisible = !this.isVisible;
-                }
-            },
-            clickEditInput (e) {
-                e.stopPropagation();
-            },
-            clickEditIcon (listItem) {
-                listItem.isEdit = true;
-                this.$forceUpdate();
-            },
-            clickConfirm (listItem) {
-                if (listItem.name) {
-                    listItem.isEdit = false;
-                    this.$forceUpdate();
-                };
-            },
-
-            clickItem (listItem) {
-                if (this.curValList.some(item => item._key === listItem._key)) {
-                    this.curValList = this.curValList.filter(item => item._key !== listItem._key);
-                } else {
-                    this.curValList = [...this.curValList, listItem];
-                }
-            },
-            clickAddItem () {
-                this.listData.push({
-                    _key: this.$randomB36("Labels"),
-                    isEdit: true,
-                    name: "",
-                    labelType: this.subType
-                });
-            },
-            clickDeleteItem (deleteItem) {
-                this.curValList = this.curValList.filter(item => item._key !== deleteItem._key);
-            },
-
-            // 接口 -获取列表数据
-            getListData () {
-                this.$https({
-                    url: {
-                        module: "sheet",
-                        name: "memberAll"
-                    },
-                    params: {
-                        search: {
-                            entityKey: this.entityKey,
-                            modKey: this.modKey,
-                            fieldKey: this.fieldKey, // 当前字段Key
-                            labelType: this.subType
-                        },
-                        pagination: {
-                            page: 1,
-                            pagesize: 999
-                        }
-                    },
-                    callback: data => {
-                        this.listData = data.list.map(item => {
-                            return {
-                                ...item,
-                                isEdit: false
-                            };
-                        });
-                    }
-                });
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    @import url("../control.less");
-
-    .DshLabels {
-        #control-show();
-
-        &-dropdown {
-            width: 100%;
-
-            &-menu {
-                .item {
-                    margin: 4px 8px;
-                    border-radius: @borderRadius;
-
-                    &-active {
-                        background-color: @theme-focus;
-                        color: @themeColor;
-                    }
-
-                    &-edit {
-                        &-icon {
-                            color: @themeColor;
-                        }
-                    }
-
-                    &-show {
-
-                    }
-                }
-
-                .btns {
-                    border-top: 1px solid #E7E7E7;
-                    margin: 12px 8px 0;
-                    padding-top: 8px;
-
-                    &-add {
-                        width: 100%;
-                        margin-bottom: 8px;
-                    }
-                }
-            }
-        }
-
-        .ivu-select-dropdown {
-            width: fit-content;
-        }
-
-        .ivu-input-suffix {
-            display: flex;
-            align-items: center;
-
-            i {
-                width: 24px;
-                height: 24px;
-                line-height: 24px;
-
-                &:hover {
-                    background-color: @btn-hover;
-                    border-radius: @borderRadius;
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <!-- 编辑 -->
+    <div
+        v-if="canEdit"
+        class="DshLabels"
+    >
+        <Dropdown
+            class="DshLabels-dropdown"
+            trigger="custom"
+            placement="bottom-start"
+            :visible="isVisible"
+            transfer
+            @on-clickoutside="clickInput"
+        >
+            <!-- 可编辑 -->
+            <dsh-control-input
+                :class="commonClass"
+                :value="curValList"
+                :disabled="disabled"
+                :heightAuto="isHeightAuto"
+                :propsObj="selfPropsObj"
+                @deleteItem="clickDeleteItem"
+                @clear="clickClear"
+                @click.native="clickInput"
+            ></dsh-control-input>
+
+            <template #list>
+                <DropdownMenu class="DshLabels-dropdown-menu">
+                    <DropdownItem
+                        v-for="listItem in listData"
+                        :key="listItem._key"
+                        :class="{
+                            'item': true,
+                            'item-active': !!curValList.find(item => item._key === listItem._key)
+                        }"
+                        @click.native="clickItem(listItem)"
+                    >
+
+                        <div
+                            v-if="listItem.isEdit"
+                            class="item-edit"
+                        >
+                            <Input
+                                v-model="listItem.name"
+                                @click.native="clickEditInput($event)"
+                            >
+                            <template #suffix>
+                                <Icon
+                                    class="item-edit-icon"
+                                    custom="bri bri-duigou"
+                                    @click.native.stop="clickConfirm(listItem)"
+                                />
+                            </template>
+                            </Input>
+                        </div>
+
+                        <div
+                            v-else
+                            class="item-show"
+                        >
+                            {{ listItem.name }}
+                            <span class="item-show-icons">
+                                <Icon
+                                    v-if="!listItem.coreLabel"
+                                    class="item-show-icons-edit"
+                                    custom="bri bri-bianji"
+                                    @click.stop="clickEditIcon(listItem)"
+                                />
+                                <!-- 暂时不需要删除 -->
+                                <!-- <Icon
+                                        class="item-show-icons-del"
+                                        custom="bri bri-shanchu"
+                                    /> -->
+                            </span>
+                        </div>
+                    </DropdownItem>
+
+                    <div
+                        v-if="!onlySelect"
+                        class="btns"
+                    >
+                        <bri-button
+                            class="btns-add"
+                            :propsObj="{
+                                    btnType: 'default',
+                                    icon:'md-add'
+                                }"
+                            @click.native.stop="clickAddItem"
+                        >添加选项</bri-button>
+                    </div>
+                </DropdownMenu>
+            </template>
+        </Dropdown>
+    </div>
+
+    <!-- 查看 -->
+    <div
+        v-else
+        class="DshLabels-show"
+    >
+        <!-- 有值 -->
+        <template v-if="!$isEmptyData(curValList)">
+            <!-- 高度自由时 -->
+            <dsh-tags
+                v-if="isHeightAuto"
+                :class="{
+                    ...commonClass,
+                    'DshLabels-show-auto': true
+                }"
+                itemClass="DshLabels-show-auto-tag"
+                :list="curValList"
+            ></dsh-tags>
+
+            <!-- 高度不自由（不换行） -->
+            <bri-tooltip
+                v-else
+                :content="showMulVal"
+                :transfer="true"
+            >
+                <dsh-tags
+                    :class="{
+                        ...commonClass,
+                        'DshLabels-show-ellipsis': true
+                    }"
+                    itemClass="DshLabels-show-ellipsis-tag"
+                    :list="curValList"
+                ></dsh-tags>
+            </bri-tooltip>
+        </template>
+
+        <!-- 无值 -->
+        <div
+            v-else
+            :class="commonClass"
+        >
+            {{ emptyShowVal }}
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../mixins/controlMixin.js";
+
+    export default {
+        name: "DshLabels",
+        mixins: [
+            controlMixin
+        ],
+        data () {
+            return {
+                listData: [],
+                isVisible: false,
+                renderList: false
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _icon: this.isVisible ? "ios-arrow-up" : "ios-arrow-down",
+                    _labelType: "entity",
+                    _onlySelect: false,
+                    _originLabels: [],
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            subType () {
+                return this.selfPropsObj._labelType;
+            },
+            onlySelect () {
+                return this.isInAnySearch ? true : this.selfPropsObj._onlySelect;
+            },
+            originLabels () {
+                return this.selfPropsObj._originLabels;
+            },
+
+            showMulVal () {
+                return this.$isEmptyData(this.curValList)
+                    ? this.emptyShowVal
+                    : this.curValList.map(item => item.name).join("、");
+            }
+        },
+        created () {},
+        methods: {
+            clickInput () {
+                if (!this.disabled) {
+                    if (!this.renderList) {
+                        if (this.isDftSet) {
+                            this.listData = this.originLabels.map(item => {
+                                return {
+                                    ...item,
+                                    isEdit: false
+                                };
+                            });
+                        } else {
+                            this.getListData();
+                        }
+                    }
+                    this.renderList = true;
+                    this.isVisible = !this.isVisible;
+                }
+            },
+            clickEditInput (e) {
+                e.stopPropagation();
+            },
+            clickEditIcon (listItem) {
+                listItem.isEdit = true;
+                this.$forceUpdate();
+            },
+            clickConfirm (listItem) {
+                if (listItem.name) {
+                    listItem.isEdit = false;
+                    this.$forceUpdate();
+                };
+            },
+
+            clickItem (listItem) {
+                if (this.curValList.some(item => item._key === listItem._key)) {
+                    this.curValList = this.curValList.filter(item => item._key !== listItem._key);
+                } else {
+                    this.curValList = [...this.curValList, listItem];
+                }
+            },
+            clickAddItem () {
+                this.listData.push({
+                    _key: this.$randomB36("Labels"),
+                    isEdit: true,
+                    name: "",
+                    labelType: this.subType
+                });
+            },
+            clickDeleteItem (deleteItem) {
+                this.curValList = this.curValList.filter(item => item._key !== deleteItem._key);
+            },
+
+            // 接口 -获取列表数据
+            getListData () {
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "memberAll"
+                    },
+                    params: {
+                        search: {
+                            entityKey: this.entityKey,
+                            modKey: this.modKey,
+                            fieldKey: this.fieldKey, // 当前字段Key
+                            labelType: this.subType
+                        },
+                        pagination: {
+                            page: 1,
+                            pagesize: 999
+                        }
+                    },
+                    callback: data => {
+                        this.listData = data.list.map(item => {
+                            return {
+                                ...item,
+                                isEdit: false
+                            };
+                        });
+                    }
+                });
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    @import url("../control.less");
+
+    .DshLabels {
+        #control-show();
+
+        &-dropdown {
+            width: 100%;
+
+            &-menu {
+                .item {
+                    margin: 4px 8px;
+                    border-radius: @borderRadius;
+
+                    &-active {
+                        background-color: @theme-focus;
+                        color: @themeColor;
+                    }
+
+                    &-edit {
+                        &-icon {
+                            color: @themeColor;
+                        }
+                    }
+
+                    &-show {
+
+                    }
+                }
+
+                .btns {
+                    border-top: 1px solid #E7E7E7;
+                    margin: 12px 8px 0;
+                    padding-top: 8px;
+
+                    &-add {
+                        width: 100%;
+                        margin-bottom: 8px;
+                    }
+                }
+            }
+        }
+
+        .ivu-select-dropdown {
+            width: fit-content;
+        }
+
+        .ivu-input-suffix {
+            display: flex;
+            align-items: center;
+
+            i {
+                width: 24px;
+                height: 24px;
+                line-height: 24px;
+
+                &:hover {
+                    background-color: @btn-hover;
+                    border-radius: @borderRadius;
+                }
+            }
+        }
+    }
+</style>