bri-components 1.2.58 → 1.2.60

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

@@ -1,111 +1,110 @@
 <template>
-    <!-- 单选模式 -->
+    <!-- 单选模式 编辑 -->
     <div
-        v-if="!multipleMode"
+        v-if="!multipleMode && canEdit"
         class="DshSelect"
     >
-        <template v-if="canEdit">
-            <!-- 有选项 -->
-            <template v-if="listData.length">
-                <!-- flat方式 -->
-                <template v-if="['flat', 'button'].includes(showType)">
-                    <RadioGroup
-                        :class="{
+        <!-- 有选项 -->
+        <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
+                        'DshSelect-flat-scroll': !isHeightAuto
                     }"
-                        v-model="value[controlKey]"
-                        :type="radioGroupType"
-                        @on-change="change"
+                    v-model="curVal"
+                    :type="radioGroupType"
+                >
+                    <Radio
+                        v-for="(item, index) in listData"
+                        :key="item._key"
+                        :class="getItemClass(item)"
+                        :style="getItemColorStyle(item)"
+                        :value="curVal === item._key"
+                        :label="item._key"
+                        :disabled="getRadioItemDisabled(item, index)"
+                        :border="useColor"
+                        @click.native.stop="cancelRadioItemSelect(item, index)"
                     >
-                        <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>
+                        <span @click.stop="0">{{ item.name || item._name }}</span>
+                    </Radio>
+                </RadioGroup>
+            </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"
+            <!-- dropdown模式 -->
+            <template v-else>
+                <Select
+                    class="DshSelect-dropdown"
+                    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"
+                >
+                    <!-- </Option>必须和输出内容在一行，否则出现空格导致_filterable出bug -->
+                    <Option
+                        v-for="(item, index) in listData"
+                        :key="item._key"
+                        :value="item._key"
+                        :label="item.name || item._name"
+                        :disabled="getRadioItemDisabled(item, index)"
                     >
-                        <!-- </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>
+                        <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"
+                        />
+
+                        <slot :item="item"></slot>
+
+                        <span>{{ item.name || item._name }}</span>
+                    </Option>
+                </Select>
             </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>
+        <!-- 无选项 -->
+        <div
+            v-else
+            class="dsh-subtip"
+        >-- 无选择项 --</div>
+    </div>
 
-                    <!-- 无值 -->
-                    <template v-else>
-                        {{ emptyShowVal }}
-                    </template>
-                </div>
-            </bri-tooltip>
-        </template>
+    <!-- 单选模式 查看 -->
+    <div
+        v-else-if="!multipleMode && !canEdit"
+        class="DshSelect-show"
+    >
+        <!-- 有值 -->
+        <bri-tooltip
+            v-if="!$isEmptyData(curVal)"
+            :content="showVal"
+            :transfer="true"
+        >
+            <dsh-tags
+                :class="{
+                    ...commonClass,
+                    'DshSelect-show-ellipsis': !(isDetailShow && isHeightAuto)
+                }"
+                :list="[curValObj]"
+            ></dsh-tags>
+        </bri-tooltip>
+
+        <!-- 无值 -->
+        <div
+            v-else
+            :class="commonClass"
+        >
+            {{ emptyShowVal }}
+        </div>
     </div>
 
     <!-- 多选模式 -->
@@ -138,7 +137,8 @@
             selfPropsObj () {
                 return {
                     _transfer: true,
-                    ...this.selectPropsObj
+
+                    ...this.basePropsObj
                 };
             },
             radioGroupType () {
@@ -146,115 +146,15 @@
             }
         },
         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
-                };
-            }
-        }
+        methods: {}
     };
 </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;
-                        }
-                    }
-                }
+    @import url("../../control.less");
 
-                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();
-            }
-        }
+    .DshSelect {
+        #control-select(radio);
 
         &-modal {
             .ivu-modal-wrap {
@@ -307,13 +207,5 @@
                 }
             }
         }
-
-        &-tip {
-            cursor: pointer;
-
-            .ivu-radio {
-                display: none;
-            }
-        }
     }
 </style>

package/src/components/controls/control.less

@@ -0,0 +1,194 @@
+#control-select(@control-type) {
+    &-flat {
+        width: 100%;
+
+        .ivu-@{control-type}-wrapper {
+            height: auto;
+            padding: 6px 0px;
+            margin-right: 12px;
+            margin-bottom: 4px;
+            white-space: normal;
+            
+            .ivu-@{control-type} {
+                .ivu-@{control-type}-inner {
+
+                }
+
+                .ivu-@{control-type}-focus {
+                    box-shadow: 0 0 0 0;
+                }
+
+                &-checked {
+                    // 因为不一致，所以明确名字分开写
+                    .ivu-radio-inner {
+                        &::after {
+                            background-color: @themeColor;
+                        }
+                    }
+
+                    .ivu-checkbox-inner {
+                        background-color: @themeColor;
+                    }
+                }
+
+                & + span {
+
+                }
+            }
+
+            // 选项置灰时
+            &-disabled {
+                .ivu-@{control-type} {
+                    .ivu-@{control-type}-inner {
+                        border-color: #aaaaaa!important; // 为了useColor且disbaled时，压住下面each里的样式，这些还生效
+                    }
+
+                    &-checked {
+                        .ivu-@{control-type}-inner {
+                            background-color: #E5E5E5!important; // 为了useColor且disbaled时，压住下面each里的样式，这些还生效
+
+                            &::after {
+                                background-color: #aaaaaa!important; // 为了useColor且disbaled时，压住下面each里的样式，这些还生效
+                            }
+                        }
+                    }
+
+
+                    & + span {
+                        color: #aaaaaa!important; // 为了useColor且disbaled时，压住下面each里的样式，这些还生效
+                    }
+                }
+            }
+
+            &:last-child {
+                margin-right: 0px;
+            }
+        }
+
+        &-color {
+            .ivu-@{control-type}-wrapper {
+                padding: 6px 15px;
+                border-radius: 4px;
+                border-color: transparent;
+                line-height: 16px;
+
+                .ivu-@{control-type} {
+                    .ivu-@{control-type}-inner {
+                        border: 2px solid @themeColor;
+                        background-color: transparent;
+                    }
+
+                    // 因为不一致，所以明确名字分开写
+                    .ivu-radio-inner {
+                        width: 14px;
+                        height: 14px;
+
+                        &::after {
+                            width: 6px;
+                            height: 6px;
+                            left: 2px;
+                            top: 2px;
+                        }
+                    }
+                    .ivu-checkbox-inner {
+                        &::after {
+                            top: 2px;
+                            left: 4px;
+                        }
+                    }
+                }
+            }
+
+            each(@resourceColor, {
+                .color-@{index}.ivu-@{control-type}-wrapper {
+                    .ivu-@{control-type} {
+                        .ivu-@{control-type}-inner {
+                            border-color: @value;
+                        }
+
+                        &-checked {
+                            // 因为不一致，所以明确名字分开写
+                            .ivu-radio-inner {
+                                &::after {
+                                    background-color: @value;
+                                }
+                            }
+                            .ivu-checkbox-inner {
+                                background-color: @value;
+                            }
+                        }
+                    }
+
+                    &-checked {
+                        border-color: @value;
+                    }
+
+                    &-disabled {
+                        border-color: #f3f3f3;
+                        background-color: #f3f3f3!important; // 压住style里的background-color
+
+                        &.ivu-@{control-type}-wrapper-checked {
+                            border-color: #aaaaaa;
+                        }
+                    }
+                }
+            });
+        }
+
+        &-scroll {
+            .bri-scrollbar3();
+            white-space: nowrap;
+            overflow: auto;
+
+            .ivu-@{control-type}-wrapper {
+                height: 30px;
+                margin-bottom: 2px;
+                white-space: nowrap;
+            }
+        }
+    }
+    
+    &-dropdown {
+        &.ivu-select-multiple {
+            .ivu-select-selection {
+                height: 32px;
+                .dsh-flex-row-between-center();
+
+                & > div {
+                    .bri-scrollbar3();
+                    width: 100%;
+                    height: 100%;
+                    word-break: keep-all;
+                    white-space: nowrap;
+                    overflow: auto;
+
+                    .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;
+            }
+        }
+    }
+
+    // 查看
+    &-show {
+        &-ellipsis {
+            .dsh-ellipsis();
+        }
+    }
+}

package/src/components/controls/mixins/controlMixin.js

@@ -47,7 +47,11 @@ export default {
             },
             set (val) {
                 this.value[this.controlKey] = val;
-                // this.change();
+                // 修复文本框clear后值为undefined，后端无法更新保存数据bug
+                if (["select"].includes(this.controlType) && this.value[this.controlKey] === undefined) {
+                    this.value[this.controlKey] = "";
+                }
+                this.change();
             }
         },
         // 值为[]类型用的
@@ -119,9 +123,17 @@ export default {
                 "bri-control-nodata": this.$isEmptyData(this.curVal)
             };
         },
+        // 单独一行
         isFullRow () {
             return this.propsObj._span === 24 || !this.propsObj._span;
         },
+        // 控件内容高度 自由
+        isHeightAuto () {
+            return this.isFullRow && !this.isInTable;
+        },
+        clearable () {
+            return this.commonDealPropsObj._clearable;
+        },
         // showAlign () {
         //     return !this.isUnitShow
         //         ? "flex-start"
@@ -133,12 +145,17 @@ export default {
         // },
 
         /* 部分条件下 才使用的属性 */
+        // isShare () {
+        //     return !!this.propsObj.isShare;
+        // },
         isInTable () {
             return !!this.propsObj.isInTable;
         },
+        // 高级搜索状态
         isOnSearch () {
             return !!this.propsObj.onSearch;
         },
+        // 默认搜索状态
         isOnDftSearch () {
             return !!this.propsObj.onDftSearch;
         },
@@ -148,9 +165,12 @@ export default {
         isUnitShow () {
             return this.isInTable && !this.canEdit;
         },
-        // isShare () {
-        //     return !!this.propsObj.isShare;
-        // },
+        isDetailUpdate () {
+            return !this.isInTable && !!this.canEdit;
+        },
+        isDetailShow () {
+            return !this.isInTable && !this.canEdit;
+        },
 
         /* 部分控件下 才使用的属性 */
         compKey () {
@@ -188,6 +208,12 @@ export default {
             this.$emit("refChange", this.value[this.controlKey]);
         },
 
+        // 点击输入框
+        clickInput () {
+            if (!this.selfPropsObj._disabled) {
+                this.openModal();
+            }
+        },
         /* ----- 工具方法 ------- */
         // 切换弹框
         toggleModal (bool) {