bri-components 1.2.49 → 1.2.50

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

@@ -0,0 +1,280 @@
+<template>
+    <div class="DshCheckbox">
+        <!-- 编辑 -->
+        <template v-if="canEdit">
+            <!-- 有选项 -->
+            <template v-if="listData.length">
+                <!-- flat方式 -->
+                <template v-if="showType === 'flat'">
+                    <CheckboxGroup
+                        :class="{
+                        'DshCheckbox-flat': true,
+                        'DshCheckbox-flat-color': useColor,
+                        'DshCheckbox-flat-disabled': !canEdit,
+                        'DshCheckbox-flat-scroll': selfPropsObj._span < 24 && !selfPropsObj._br,
+                    }"
+                        v-model="curValList"
+                    >
+                        <Checkbox
+                            v-for="(item, index) in listData"
+                            :key="index"
+                            :class="[
+                                'DshCheckbox-item',
+                                getItemColorClass(item),
+                                selfPropsObj.class,
+                                item.class
+                            ]"
+                            :style="getItemStyle(item)"
+                            :label="item._key"
+                            :disabled="getItemDisabled(item)"
+                            :border="useColor"
+                            @click.native="clickOpenTip(item)"
+                        >
+                            <slot :item="item"></slot>
+
+                            <span>{{ item.name || item._name }}</span>
+                        </Checkbox>
+
+                        <!-- tip项弹框提示 -->
+                        <dsh-render :render="tipModalRender"></dsh-render>
+                    </CheckboxGroup>
+                </template>
+
+                <!-- dropdown模式 -->
+                <template v-else>
+                    <Select
+                        v-model="value[controlKey]"
+                        :multiple="true"
+                        :placeholder="selfPropsObj._placeholder"
+                        :disabled="!finalCanEdit"
+                        :filterable="selfPropsObj._filterable"
+                        :transfer="selfPropsObj._transfer"
+                        :transfer-class-name="selfPropsObj._transferClassName"
+                        :max-tag-count="selfPropsObj._maxTagCount"
+                        @on-select="changeSelect"
+                    >
+                        <Option
+                            v-for="(item, index) in listData"
+                            :key="index"
+                            :value="item._key"
+                            :label="item.name || item._name"
+                            :disabled="getItemDisabled(item)"
+                        >
+                            <Checkbox :value="getItemSelectStatus(item)"></Checkbox>
+
+                            <slot :item="item"></slot>
+
+                            <span>{{ item.name || item._name }}</span>
+                            <span style="float:right; padding-right:20px">
+                                {{ item.rightName }}
+                            </span>
+                        </Option>
+                    </Select>
+                </template>
+            </template>
+
+            <!-- 无选项 -->
+            <div
+                v-else
+                class="dsh-subtip"
+            >-- 无选择项 --</div>
+        </template>
+
+        <!-- 查看 -->
+        <template v-else>
+            <bri-tooltip
+                :content="showMulVal"
+                placement="top"
+                maxWidth="200"
+                :transfer="true"
+            >
+                <div :class="{
+                    ...commonClass,
+                    'DshCheckbox-show': true
+                }">
+                    <!-- 有值 -->
+                    <dsh-tags
+                        v-if="!$isEmptyData(curValList)"
+                        class="text"
+                        :list="curValObjList"
+                    ></dsh-tags>
+
+                    <!-- 无值 -->
+                    <template v-else>
+                        {{ emptyShowVal }}
+                    </template>
+                </div>
+            </bri-tooltip>
+        </template>
+    </div>
+</template>
+
+<script>
+    import selectMixin from "./selectMixin.js";
+
+    export default {
+        name: "DshCheckbox",
+        mixins: [
+            selectMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _transfer: true,
+                    ...this.selectPropsObj
+                };
+            }
+        },
+        created () {},
+        methods: {
+            // 下拉框的change (下拉方式时用v-model触发change有问题，组件进来如果值不为空的，就会v-model返值一次)
+            changeSelect (item) {
+                if (this.curValList.includes(item.value)) {
+                    let itemIndex = this.curValList.findIndex(valItem => valItem === item.value);
+                    this.curValList.splice(itemIndex, 1);
+                } else {
+                    this.curValList.push(item.value);
+                }
+
+                this.curValList = [...this.curValList];
+            },
+
+            getItemColorClass (item) {
+                return this.colorMap[item.color] ? item.color : "color-1";
+            },
+            getItemStyle (item) {
+                const color = this.colorMap[item.color] || this.colorMap["color-1"];
+                return {
+                    background: this.useColor ? this.$getColor(color, 0.1) : undefined,
+                    color: this.useColor ? color : undefined
+                };
+            },
+            // 获取某项的置灰状态
+            getItemDisabled (item) {
+                return !!(
+                    !this.finalCanEdit ||
+                    item._disabled ||
+                    this.curValList.length >= this.selfPropsObj._max && !this.getItemSelectStatus(item)
+                );
+            },
+            // 获取某项的选中状态
+            getItemSelectStatus (item) {
+                return this.curValList.includes(item._key);
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshCheckbox {
+        width: 100%;
+
+        &-flat {
+            width: 100%;
+
+            // 选中时背景为白色
+            .ivu-checkbox-checked .ivu-checkbox-inner {
+                background-color: @themeColor;
+            }
+
+            &-item {}
+
+            &-color {
+                .ivu-checkbox-border {
+                    margin-right: 16px;
+                    height: 32px;
+                    border: none;
+                    border-radius: 4px;
+                    line-height: 32px;
+                    color: #FFF;
+                }
+
+                .ivu-checkbox {
+                    .ivu-checkbox-inner {
+                        border: 2px solid @themeColor;
+                        background-color: transparent;
+                    }
+
+                    .ivu-checkbox-focus {
+                        box-shadow: 0 0 0 0;
+                    }
+                }
+
+                .ivu-checkbox-disabled+span {
+                    color: inherit;
+                }
+
+                each(@resourceColor, {
+                    .color-@{index} {
+                        .ivu-checkbox {
+                            .ivu-checkbox-inner {
+                                border-color: @value;
+                            }
+                        }
+
+                        .ivu-checkbox-checked {
+                            .ivu-checkbox-inner {
+                                background-color: @value;
+                            }
+                        }
+                    }
+                });
+            }
+
+            &-disabled {
+                .ivu-checkbox-disabled+span {
+                    color: #515a6e;
+                }
+            }
+
+            &-scroll {
+                overflow: auto;
+                white-space: nowrap;
+
+                .bri-scrollbar3();
+            }
+        }
+
+        &-show {}
+
+        .ivu-select-multiple {
+            .ivu-select-selection {
+                height: 32px;
+                .dsh-flex-row-between-center();
+
+                & > div {
+                    width: 100%;
+                    height: 100%;
+                    word-break: keep-all;
+                    white-space: nowrap;
+                    overflow: auto;
+                    .bri-scrollbar3();
+
+                    .ivu-tag {
+                        margin: 2px 4px 0px 0px;
+                        background-color: @borderColor;
+                    }
+                }
+            }
+
+            &.ivu-select-disabled {
+                .ivu-select-selection {
+                    & > div {
+                        .ivu-tag {
+                            background-color: @border-disabled;
+                        }
+                    }
+                }
+            }
+
+            .ivu-select-item-selected:after {
+                content: none;
+            }
+        }
+    }
+</style>

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

@@ -0,0 +1,319 @@
+<template>
+    <!-- 单选模式 -->
+    <div
+        v-if="!multipleMode"
+        class="DshSelect"
+    >
+        <template v-if="canEdit">
+            <!-- 有选项 -->
+            <template v-if="listData.length">
+                <!-- flat方式 -->
+                <template v-if="['flat', 'button'].includes(showType)">
+                    <RadioGroup
+                        :class="{
+                        'DshSelect-flat': true,
+                        'DshSelect-flat-color': useColor,
+                        'DshSelect-flat-scroll': selfPropsObj._span < 24 && !selfPropsObj._br
+                    }"
+                        v-model="value[controlKey]"
+                        :type="radioGroupType"
+                        @on-change="change"
+                    >
+                        <Radio
+                            v-for="(item, index) in listData"
+                            :key="index"
+                            :class="getItemColorClass(item)"
+                            :style="getItemStyle(item)"
+                            :label="item._key"
+                            :disabled="getItemDisabled(item)"
+                            :border="useColor"
+                            @click.native="cancelSelect(item)"
+                        >
+                            <span @click.stop="clickOpenTip(item)">
+                                {{ item.name || item._name }}
+                            </span>
+                        </Radio>
+                    </RadioGroup>
+
+                    <!-- tip项弹框提示 -->
+                    <dsh-render :render="tipModalRender"></dsh-render>
+                </template>
+
+                <!-- dropdown模式 -->
+                <template v-else>
+                    <Select
+                        v-model="curVal"
+                        :placeholder="selfPropsObj._placeholder"
+                        :multiple="false"
+                        :disabled="!finalCanEdit"
+                        :clearable="selfPropsObj._clearable"
+                        :filterable="selfPropsObj._filterable"
+                        :size="selfPropsObj._size"
+                        :transfer="selfPropsObj._transfer"
+                        :transfer-class-name="selfPropsObj._transferClassName"
+                        @on-change="change"
+                    >
+                        <!-- </Option>必须和输出内容在一行，否则出现空格导致_filterable出bug -->
+                        <Option
+                            v-for="(item, index) in listData"
+                            :key="index"
+                            :value="item._key"
+                            :label="item.name || item._name"
+                            :disabled="getItemDisabled(item)"
+                        >
+                            <Icon
+                                v-if="item.icon || item.customIcon"
+                                :type="item.icon"
+                                :custom="item.customIcon ? `bico-font ${item.customIcon}` : undefined"
+                                :color="item.color"
+                                :size="item.size || 20"
+                            />{{ item.name || item._name }}
+                        </Option>
+                    </Select>
+                </template>
+            </template>
+
+            <!-- 无选项 -->
+            <div
+                v-else
+                class="dsh-subtip"
+            >-- 无选择项 --</div>
+        </template>
+
+        <!-- 查看 -->
+        <template v-else>
+            <bri-tooltip
+                :content="showVal"
+                maxWidth="200"
+                placement="top"
+                :transfer="true"
+            >
+                <div :class="{
+                    ...commonClass,
+                    'DshSelect-show': true
+                }">
+                    <!-- 有值 -->
+                    <dsh-tags
+                        v-if="!$isEmptyData(curVal)"
+                        class="text"
+                        :list="[curValObj]"
+                    ></dsh-tags>
+
+                    <!-- 无值 -->
+                    <template v-else>
+                        {{ emptyShowVal }}
+                    </template>
+                </div>
+            </bri-tooltip>
+        </template>
+    </div>
+
+    <!-- 多选模式 -->
+    <dsh-checkbox
+        v-else
+        :canEdit="canEdit"
+        :value="value"
+        :propsObj="propsObj"
+        @change="change"
+    ></dsh-checkbox>
+</template>
+
+<script>
+    import selectMixin from "./selectMixin.js";
+    import DshCheckbox from "./DshCheckbox.vue";
+
+    export default {
+        name: "DshSelect",
+        mixins: [
+            selectMixin
+        ],
+        components: {
+            DshCheckbox
+        },
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _transfer: true,
+                    ...this.selectPropsObj
+                };
+            },
+            radioGroupType () {
+                return this.showType === "button" ? "button" : undefined;
+            }
+        },
+        created () {},
+        methods: {
+            // 取消flat模式的选择项
+            cancelSelect (item) {
+                if (item._disabled !== true && this.selfPropsObj._clearable !== false) {
+                    if (item._key === this.curVal) {
+                        this.value[this.controlKey] = "";
+                        this.change();
+                    }
+                }
+
+                this.clickOpenTip(item);
+            },
+            change (...params) {
+                // 修复clear后值为undefined，数据库不更新数据bug
+                if (this.value[this.controlKey] == undefined) {
+                    this.value[this.controlKey] = "";
+                }
+
+                this.$emit("change", this.curVal);
+            },
+
+            getItemColorClass (item) {
+                return this.colorMap[item.color] ? item.color : "color-1";
+            },
+            getItemStyle (item) {
+                const color = this.colorMap[item.color] || this.colorMap["color-1"];
+                return {
+                    backgroundColor: this.useColor ? this.$getColor(color, 0.1) : undefined,
+                    color: this.useColor ? color : undefined
+                };
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshSelect {
+        width: 100%;
+
+        &-flat {
+            width: 100%;
+
+            &-color {
+                .ivu-radio-border {
+                    height: 32px;
+                    line-height: 32px;
+                    border-radius: 4px;
+                    border: none;
+                    color: #FFF;
+                    margin-right: 16px;
+                }
+
+                .ivu-radio {
+                    .ivu-radio-inner {
+                        border: 2px solid @themeColor;
+                        background-color: transparent;
+                        width: 14px;
+                        height: 14px;
+
+                        &::after {
+                            width: 6px;
+                            height: 6px;
+                            left: 2px;
+                            top: 2px;
+                            background-color: transparent;
+                            opacity: 1;
+                            transform: scale(1);
+                        }
+                    }
+
+                    .ivu-radio-focus {
+                        box-shadow: 0 0 0 0;
+                    }
+                }
+
+                .ivu-radio-checked {
+                    .ivu-radio-inner {
+                        &::after {
+                            background-color: @themeColor;
+                        }
+                    }
+                }
+
+                each(@resourceColor, {
+                    .color-@{index} {
+                        .ivu-radio {
+                            .ivu-radio-inner {
+                                border-color: @value;
+                            }
+                        }
+
+                        .ivu-radio-checked {
+                            .ivu-radio-inner {
+                                &::after {
+                                    background-color: @value;
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+
+            &-scroll {
+                overflow: auto;
+                white-space: nowrap;
+
+                .bri-scrollbar3();
+            }
+        }
+
+        &-modal {
+            .ivu-modal-wrap {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .ivu-modal {
+                width: 544px !important;
+                position: static;
+            }
+
+            .ivu-modal-content {
+                border-radius: 8px;
+            }
+
+            .ivu-modal-header {
+                border-bottom: none;
+                padding: 32px 32px 0;
+
+                .ivu-modal-header-inner {
+                    font-size: 18px;
+                    font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
+                    font-weight: 600;
+                    color: #252F36;
+                }
+            }
+
+            .DshModal-close {
+                right: 30px !important;
+                top: 30px !important;
+                background: #F4F6F8;
+                border-radius: 4px 4px 4px 4px;
+            }
+
+            .ivu-modal-body {
+                padding: 24px 32px 32px;
+            }
+
+            &-footer {
+                margin-top: 24px;
+                text-align: right;
+
+                .ivu-btn {
+                    font-size: 16px;
+                    font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
+                    font-weight: 600;
+                    border-radius: 4px;
+                }
+            }
+        }
+
+        &-tip {
+            cursor: pointer;
+
+            .ivu-radio {
+                display: none;
+            }
+        }
+    }
+</style>