bri-components 1.2.48 → 1.2.50

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>

package/src/components/controls/base/DshSelect/selectMixin.js

@@ -0,0 +1,241 @@
+import controlMixin from "../../controlMixin.js";
+import { resourceData } from "bri-datas";
+
+export default {
+    mixins: [
+        controlMixin
+    ],
+    components: {},
+    props: {},
+    data () {
+        return {
+            initListData: [],
+            showTipTpl: false,
+            showTipModal: false,
+            dynamicContent: ""
+        };
+    },
+    computed: {
+        selectPropsObj () {
+            return {
+                colorMap: resourceData.colorMap,
+                _optionKind: "dropdown", // "flat"、"dropdown"
+                _useColor: false,
+                _filterable: true,
+                _data: [],
+                _customData: [],
+
+                ...this.propsObj,
+                ...this.commonDealPropsObj,
+
+                _disabled: this.propsObj._disabled || !this.finalCanEdit
+            };
+        },
+        showType () {
+            return this.selfPropsObj._optionKind;
+        },
+        useColor () {
+            return this.selfPropsObj._useColor;
+        },
+        colorMap () {
+            return this.selfPropsObj.colorMap;
+        },
+        listData () {
+            const listData = this.selfPropsObj._data.concat(this.initListData);
+
+            return this.$dataType(this.selfPropsObj._filterFunc, "function")
+                ? this.selfPropsObj._filterFunc(listData, this.selfPropsObj, this.value)
+                : listData;
+        },
+
+        openTip () {
+            return this.isOnSearch ? false : this.propsObj._openTip;
+        },
+        modalTipContent () {
+            return this.propsObj._tipContent || this.dynamicContent || "暂无信息";
+        },
+
+        curValObj () {
+            return this.$isEmptyData(this.curVal)
+                ? undefined
+                : this.getItemData(this.curVal);
+        },
+        valStr: {
+            get () {
+                return this.curValObj
+                    ? this.curValObj.name || this.curValObj._name
+                    : "";
+            },
+            set (val) {
+                if (!val) {
+                    this.curVal = "";
+                }
+            }
+        },
+        showVal () {
+            return this.$isEmptyData(this.curVal)
+                ? this.emptyShowVal
+                : this.valStr;
+        },
+        // 已选择项的对象列表
+        curValObjList () {
+            return this.curValList.map(key => this.getItemData(key));
+        },
+        valListStr () {
+            return this.curValObjList.map(item => item.name || item._name).join("、");
+        },
+        showMulVal () {
+            return this.$isEmptyData(this.curValList)
+                ? this.emptyShowVal
+                : this.valListStr;
+        }
+    },
+    created () {
+        this.init();
+    },
+    methods: {
+        init () {
+            this.getTipData();
+            this.getListData();
+        },
+
+        getItemData (key) {
+            const obj = this.listData.find(item => item._key === key) || {
+                _key: key,
+                name: `温馨提示：选项${key}已找不到`
+            };
+
+            return {
+                ...obj,
+                style: this.getItemStyle(obj),
+                color: undefined
+            };
+        },
+        getItemStyle (item) {
+            const color = this.colorMap[item.color] || this.colorMap["color-1"];
+            return {
+                "background-color": this.useColor ? this.$getColor(color, 0.1) : "#E5E5E5",
+                color: this.useColor ? color : "rgba(0, 0, 0, 0.9)",
+                display: "inline-block",
+                "max-width": "100%",
+                padding: "0px 6px",
+                "border-radius": "4px"
+            };
+        },
+        // 获取某项的置灰状态
+        getItemDisabled (item) {
+            return !!(this.selfPropsObj._disabled || item._disabled);
+        },
+
+        // 是否打开tip弹窗
+        clickOpenTip (item) {
+            if (item.__isTip__) {
+                if (this.propsObj._tipKind === "dynamic" && !this.propsObj._tipContent) {
+                    this.getTipUrl();
+                } else {
+                    this.showTipTpl = true;
+                    this.showTipModal = true;
+                }
+            }
+        },
+        getTipUrl () {
+            if (this.propsObj._tipUrl) {
+                this.$https({
+                    url: {
+                        module: "customPath",
+                        name: this.propsObj._tipUrl
+                    },
+                    params: {
+                        formData: this.value,
+                        propsObj: this.propsObj
+                    },
+                    callback: res => {
+                        this.dynamicContent = res;
+                        this.showTipTpl = true;
+                        this.showTipModal = true;
+                    }
+                });
+            } else {
+                this.$Message.warning("请配置接口路径！");
+            }
+        },
+        tipModalRender (h) {
+            return this.showTipTpl
+                ? h("dsh-modal", {
+                    props: {
+                        value: this.showTipModal,
+                        mode: "custom",
+                        propsObj: {
+                            title: "温馨提示",
+                            maskClosable: true,
+                            class: "DshSelect-modal"
+                        }
+                    },
+                    on: {
+                        input: bool => {
+                            this.showTipModal = bool;
+                        }
+                    }
+                }, [
+                    h("div", {
+                        class: "DshSelect-modal-content",
+                        domProps: {
+                            innerHTML: this.modalTipContent
+                        }
+                    }),
+                    h("div", {
+                        class: "DshSelect-modal-footer"
+                    }, [
+                        h("Button", {
+                            props: {
+                                type: "primary"
+                            },
+                            on: {
+                                click: () => {
+                                    this.showTipModal = false;
+                                }
+                            }
+                        }, "我知道了")
+                    ])
+                ])
+                : undefined;
+        },
+        getTipData () {
+            if (
+                (this.propsObj._key !== "_default") &&
+                this.finalCanEdit &&
+                this.openTip
+            ) {
+                let tipObj = {
+                    _key: "openTip",
+                    _name: this.propsObj._tipName || "其他",
+                    __isTip__: true,
+                    _disabled: true,
+                    color: "#6991cc",
+                    class: `Dsh${this.propsObj._type}-tip`
+                };
+                this.initListData.push(tipObj);
+            }
+        },
+        // 接口 -获取自定义的接口数据
+        getListData () {
+            this.selfPropsObj._customData.forEach(item => {
+                this.$https({
+                    url: item.url,
+                    params: item.params,
+                    callback: data => {
+                        this.initListData = [
+                            ...this.initListData,
+                            ...data.list.map(dataItem =>
+                                ({
+                                    _key: dataItem[item._key || "_key"],
+                                    name: dataItem[item._name || "name"]
+                                })
+                            )
+                        ];
+                    }
+                });
+            });
+        }
+    }
+};

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

@@ -0,0 +1,84 @@
+<template>
+    <!-- 单选模式 编辑 -->
+    <div
+        v-if="!multipleMode && canEdit"
+        class="DshSwitch"
+    >
+        <i-switch
+            v-model="curVal"
+            :disabled="selfPropsObj._disabled"
+            :loading="selfPropsObj.loading"
+            :size="selfPropsObj._size"
+            :true-color="selfPropsObj._openColor"
+            :false-color="selfPropsObj._closeColor"
+            :true-value="selfPropsObj._openValue"
+            :false-value="selfPropsObj._closeValue"
+            @on-change="change"
+        >
+            <span slot="open">
+                {{ selfPropsObj._openText }}
+            </span>
+            <span slot="close">
+                {{ selfPropsObj._closeText }}
+            </span>
+        </i-switch>
+    </div>
+
+    <!-- 单选模式 查看 -->
+    <span
+        v-else-if="!multipleMode && !canEdit"
+        :class="{
+            ...commonClass
+        }"
+        :style="showStyle"
+    >
+        {{ showVal }}
+    </span>
+
+    <!-- 多选模式 -->
+    <dsh-checkbox
+        v-else
+        :canEdit="canEdit"
+        :value="value"
+        :propsObj="mulPropsObj"
+        @change="change"
+    ></dsh-checkbox>
+</template>
+
+<script>
+    import switchMixin from "./switchMixin.js";
+
+    export default {
+        name: "DshSwitch",
+        mixins: [
+            switchMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _size: "default", // "default", "small", "large"
+
+                    ...this.switchPropsObj
+                };
+            }
+        },
+        created () {},
+        methods: {}
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshSwitch {
+
+    }
+</style>
+<style lang="less">
+    .DshSwitch {
+
+    }
+</style>