bri-components 1.2.4 → 1.2.5

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

@@ -1,118 +1,104 @@
 <template>
     <div class="DshSelect">
-        <!-- optionKind值 'flat'、'dropdown' -->
         <template v-if="canEdit">
             <!-- 平铺 -->
-            <RadioGroup
-                v-if="['flat', 'button'].includes(showType)"
-                :class="{
-                    'DshSelect-radioGroup': true,
-                    'DshSelect-radioGroup-useColor': selfPropsObj._useColor,
-                    'DshSelect-radioGroup-scroll': selfPropsObj._span < 24 && !selfPropsObj._br
-                }"
-                v-model="value[controlKey]"
-                :type="radioGroupType"
-                @on-change="change"
-            >
-                <template v-if="listData.length">
-                    <Radio
-                        v-for="(item, index) in listData"
-                        :key="index"
-                        :class="getColorClass(item.color)"
-                        :style="{
-                            backgroundColor: selfPropsObj._useColor ? getBgColor(item.color) : undefined,
-                            color:selfPropsObj._useColor ? getColor(item.color) : undefined,
-                        }"
-                        :label="item._key"
-                        :disabled="item._disabled || !finalCanEdit"
-                        :border="selfPropsObj._useColor"
-                        @click.native="cancelSelect(item)"
-                    >
-                        <span @click.stop="clickOpenTip(item)">
-                            {{ item.name || item._name }}
-                        </span>
-                    </Radio>
+            <template v-if="['flat', 'button'].includes(showType)">
+                <RadioGroup
+                    :class="{
+                        'DshSelect-radioGroup': true,
+                        'DshSelect-radioGroup-useColor': selfPropsObj._useColor,
+                        'DshSelect-radioGroup-scroll': selfPropsObj._span < 24 && !selfPropsObj._br
+                    }"
+                    v-model="value[controlKey]"
+                    :type="radioGroupType"
+                    @on-change="change"
+                >
+                    <template v-if="listData.length">
+                        <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>
+
+                    </template>
 
-                </template>
+                    <div
+                        v-else
+                        class="dsh-subtip"
+                        style="backgroundColor: #f3f3f3;"
+                    >-- 无选择项 --</div>
+                </RadioGroup>
 
-                <div
-                    v-else
-                    class="dsh-subtip"
-                    style="backgroundColor: #f3f3f3;"
-                >-- 无选择项 --</div>
-            </RadioGroup>
+                <!-- tip项弹框提示 -->
+                <dsh-render :render="tipModalRender"></dsh-render>
+            </template>
 
             <!-- 下拉 -->
-            <Select
-                v-else
-                v-model="value[controlKey]"
-                :placeholder="selfPropsObj._placeholder"
-                :multiple="selfPropsObj._multiple"
-                :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"
-                    :disabled="item._disabled || !finalCanEdit"
+            <template v-else>
+                <Select
+                    v-model="curVal"
+                    :placeholder="selfPropsObj._placeholder"
+                    :multiple="selfPropsObj._multiple"
+                    :disabled="!finalCanEdit"
+                    :clearable="selfPropsObj._clearable"
+                    :filterable="selfPropsObj._filterable"
+                    :size="selfPropsObj._size"
+                    :transfer="selfPropsObj._transfer"
+                    :transfer-class-name="selfPropsObj._transferClassName"
+                    @on-change="change"
                 >
-                    <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>
+                    <!-- </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>
 
-        <bri-tooltip
-            v-else
-            :content="showVal"
-            maxWidth="200"
-            placement="top"
-            :transfer="true"
-        >
-            <div
-                v-if="curSelectItem"
-                class="DshSelect-value-wrapper"
-                :style="{
-                    justifyContent: showAlign
-                }"
+        <!-- 查看 -->
+        <template v-else>
+            <bri-tooltip
+                :content="showVal"
+                maxWidth="200"
+                placement="top"
+                :transfer="true"
             >
-                <span
-                    class="DshSelect-value dsh-ellipsis"
-                    :style="{
-                        background: selfPropsObj._useColor ? getBgColor(curSelectItem.color, 0.1) : '',
-                        color: selfPropsObj._useColor ? getColor(curSelectItem.color) : ''
-                    }"
-                >{{ showVal }}</span>
-            </div>
-            <div
-                v-else
-                class="bri-control-nodata dsh-ellipsis"
-            >
-                {{ emptyShowVal }}
-            </div>
-        </bri-tooltip>
-
-        <!-- tip项弹框提示 -->
-        <dsh-render :render="tipModalRender"></dsh-render>
+                <div :class="{
+                    ...commonClass,
+                    'DshSelect-show': true
+                }">
+                    {{ showVal }}
+                </div>
+            </bri-tooltip>
+        </template>
     </div>
 </template>
 
 <script>
-    import { resourceData } from "bri-datas";
     import controlMixin from "../controlMixin.js";
     import selectMixin from "./selectMixin.js";
+    import { resourceData } from "bri-datas";
 
     export default {
         name: "DshSelect",
@@ -123,23 +109,15 @@
         props: {},
         data () {
             return {
-                flag: false,
-                initListData: [],
-                getBgColor: color => {
-                    let curColor = this.colorMap[color] || this.colorMap["color-1"];
-                    return this.$getColor(curColor, 0.1);
-                },
-                getColor: color => {
-                    return this.colorMap[color] || this.colorMap["color-1"];
-                },
-                getColorClass: color => {
-                    return this.colorMap[color] ? color : "color-1";
-                }
+                flag: false
             };
         },
         computed: {
             selfPropsObj () {
                 return {
+                    _optionKind: "dropdown", // 'flat'、'dropdown'
+                    _useColor: false,
+                    colorMap: resourceData.colorMap,
                     _filterable: true,
                     _transfer: true,
                     _data: [],
@@ -154,25 +132,30 @@
             radioGroupType () {
                 return this.showType === "button" ? "button" : undefined;
             },
+            useColor () {
+                return this.selfPropsObj._useColor;
+            },
             colorMap () {
-                return this.selfPropsObj.colorMap || resourceData.colorMap;
+                return this.selfPropsObj.colorMap;
             },
 
             listData () {
-                const listData = (this.selfPropsObj._data || []).concat(this.initListData);
-                if (this.$dataType(this.selfPropsObj._filterFunc, "function")) {
-                    return this.selfPropsObj._filterFunc(listData, this.selfPropsObj, this.value);
-                } else {
-                    return 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;
             },
-            curSelectItem () {
-                return this.listData.find(item => item._key === this.value[this.controlKey]);
+            curValObj () {
+                return this.listData.find(item => item._key === this.curVal) || {
+                    _key: this.curVal,
+                    name: `温馨提示：选项${this.curVal}已找不到`
+                };
             },
             showVal () {
-                return this.curSelectItem
-                    ? this.curSelectItem.name || this.curSelectItem._name
-                    : "";
+                return this.$isEmptyData(this.curValList)
+                    ? this.emptyShowVal
+                    : this.curValObj.name || this.curValObj._name;
             }
         },
         created () {
@@ -207,7 +190,7 @@
             // 取消flat模式的选择项
             cancelSelect (item) {
                 if (item._disabled !== true && this.selfPropsObj._clearable !== false) {
-                    if (item._key === this.value[this.controlKey]) {
+                    if (item._key === this.curVal) {
                         this.value[this.controlKey] = "";
 
                         this.change();
@@ -222,7 +205,22 @@
                     this.value[this.controlKey] = "";
                 }
 
-                this.$emit("change", 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 {
+                    background: this.useColor ? this.$getColor(color, 0.1) : undefined,
+                    color: this.useColor ? color : undefined
+                };
+            },
+            // 获取某项的置灰状态
+            getItemDisabled (item) {
+                return !!(!this.finalCanEdit || item._disabled);
             }
         }
     };

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

@@ -20,17 +20,18 @@
         </template>
 
         <!-- 查看 -->
-        <span v-else
+        <span
+            v-else
             :class="{
-                'DshSwitch-show': true,
-                ...commonClass
+                ...commonClass,
+                'DshSwitch-show': true
             }"
             :style="{
                 background: curVal ? '#d3f3dcff' : '#FDEDED',
                 color: curVal ? '#37C45E' : '#E83636'
             }"
         >
-            {{ showText }}
+            {{ showVal }}
         </span>
     </div>
 </template>
@@ -47,7 +48,7 @@
             return {};
         },
         computed: {
-            showText () {
+            showVal () {
                 return this.value[this.controlKey]
                     ? this.propsObj._openText
                     : this.propsObj._closeText;

package/src/components/controls/controlMixin.js

@@ -63,7 +63,7 @@ export default {
                     ? "--"
                     : "暂无内容";
         },
-        showText () {
+        showVal () {
             return this.$isEmptyData(this.curVal) ? this.emptyShowVal : this.curVal;
         },
 
@@ -85,6 +85,9 @@ export default {
         isUnitShow () {
             return !this.canEdit && this.inTable;
         },
+        multipleMode () {
+            return !!this.propsObj._multiple;
+        },
         commonDealPropsObj () {
             const selectControlTypes = ["date", "switch", "select", "checkbox", "file", "region", "regions", "cascader", "cascaders", "coordinates", "users", "departments"];
             return {

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

@@ -6,67 +6,70 @@
             :transfer="true"
             maxWidth="200"
         >
-            <!-- 编辑 -->
-            <div
-                v-if="canEdit"
-                :class="{
-                    ...commonClass,
-                    'selectUsers-edit': true
-                }"
-                @mouseenter="isHover = true"
-                @mouseleave="isHover = false"
-                @click="clickInput"
-            >
-                <!-- 有值 -->
-                <template v-if="!$isEmptyData(curValList)">
-                    <dsh-tags
-                        class="text"
-                        :list="curValList"
-                        :propsObj="{
-                            disabled: !finalCanEdit,
-                            closable: true
+            <div @click.stop="clickInput">
+                <slot>
+                    <!-- 编辑 -->
+                    <div
+                        v-if="canEdit"
+                        :class="{
+                            ...commonClass,
+                            'selectUsers-edit': true
                         }"
-                        @delete="clickDeleteItem"
-                    ></dsh-tags>
-                </template>
-                <!-- 无值 -->
-                <template v-else>
-                    {{ emptyShowVal }}
-                </template>
+                        @mouseenter="isHover = true"
+                        @mouseleave="isHover = false"
+                    >
+                        <!-- 有值 -->
+                        <template v-if="!$isEmptyData(curValList)">
+                            <dsh-tags
+                                class="text"
+                                :list="curValList"
+                                :propsObj="{
+                                    disabled: !finalCanEdit,
+                                    closable: true
+                                }"
+                                @delete="clickDeleteItem"
+                            ></dsh-tags>
+                        </template>
+                        <!-- 无值 -->
+                        <template v-else>
+                            {{ emptyShowVal }}
+                        </template>
 
-                <!-- 图标 -->
-                <template>
-                    <Icon
-                        v-if="!$isEmptyData(curValList) && selfPropsObj._clearable && isHover"
-                        class="icon-close"
-                        type="ios-close-circle"
-                        @click.stop="clickClear"
-                    />
-                    <Icon
-                        v-else
-                        class="icon-default"
-                        :type="inputIcon"
-                    />
-                </template>
-            </div>
+                        <!-- 图标 -->
+                        <template>
+                            <Icon
+                                v-if="!$isEmptyData(curValList) && selfPropsObj._clearable && isHover"
+                                class="icon-close"
+                                type="ios-close-circle"
+                                @click.stop="clickClear"
+                            />
+                            <Icon
+                                v-else
+                                class="icon-default"
+                                :type="inputIcon"
+                            />
+                        </template>
+                    </div>
 
-            <!-- 查看 -->
-            <div
-                v-else
-                :class="{
-                    ...commonClass,
-                    'selectUsers-show': true
-                }"
-            >
-                <dsh-tags
-                    v-if="!$isEmptyData(curValList)"
-                    class="text"
-                    :list="curValList"
-                ></dsh-tags>
+                    <!-- 查看 -->
+                    <div
+                        v-else
+                        :class="{
+                            ...commonClass,
+                            'selectUsers-show': true
+                        }"
+                    >
+                        <dsh-tags
+                            v-if="!$isEmptyData(curValList)"
+                            class="text"
+                            :list="curValList"
+                        ></dsh-tags>
 
-                <template v-else>
-                    {{ emptyShowVal }}
-                </template>
+                        <template v-else>
+                            {{ emptyShowVal }}
+                        </template>
+                    </div>
+                </slot>
             </div>
         </bri-tooltip>
 
@@ -213,9 +216,7 @@
         components: {
             departmentMenu
         },
-        props: {
-            showSelectUserModalOnly: Boolean
-        },
+        props: {},
         data () {
             return {
                 isHover: false,
@@ -392,6 +393,7 @@
             clickConfirm () {
                 this.closeModal();
                 this.curValList = this.newValList;
+                this.curDepartment = {};
             },
 
             /* ----------- 接口方法 ------------- */
@@ -456,12 +458,6 @@
                 });
             }
         },
-        watch: {
-            showSelectUserModalOnly (nV, oV) {
-                nV && this.init();
-                nV && this.openModal();
-            }
-        },
         filters: {
             isActive (item, list) {
                 return list.some(o => o._key === item._key) ? "selectUsers-list-item-active" : "";

package/src/components/small/BriDrawer.vue

@@ -36,7 +36,7 @@
             v-if="selfPropsObj.closable"
             slot="close"
             class="BriDrawer-close"
-            type="ios-close-circle"
+            type="md-close"
             size="20"
             @click.stop="clickClose"
         />

package/src/components/small/DshModal.vue

@@ -41,7 +41,7 @@
         <Icon
             v-if="selfPropsObj.showSlotClose !== false"
             class="DshModal-close"
-            type="ios-close-circle"
+            type="md-close"
             size="20"
             @click.native.stop="visibleChange(false)"
         />

package/src/index.js

@@ -81,7 +81,11 @@ import BriUploadImage from "./components/controls/base/BriUpload/BriUploadImage.
 import DshCoordinates from "./components/controls/base/DshCoordinates.vue";
 import DshEditor from "./components/controls/base/DshEditor.vue";
 import DshDivider from "./components/controls/base/DshDivider.vue";
+
 import DshPackage from "./components/controls/senior/DshPackage.vue";
+import selectUsers from "./components/controls/senior/selectUsers/selectUsers.vue";
+import selectDepartments from "./components/controls/senior/selectDepartments.vue";
+
 import DshBack from "./components/controls/special/DshBack.vue";
 import DshUndeveloped from "./components/controls/special/DshUndeveloped.vue";
 
@@ -224,6 +228,8 @@ export {
     DshPackage,
     DshBack,
     DshUndeveloped,
+    selectUsers,
+    selectDepartments,
 
     // other
     BriCode,

package/src/styles/components/controls/base/DshNumber.less

@@ -10,14 +10,6 @@
             color: @textColor;
         }
     }
-
-    &-unit {
-
-    }
-
-    &-show {
-        
-    }
 }
 
 .ivu-input-number {

package/src/styles/components/controls/base/DshSelect.less

@@ -135,25 +135,6 @@
         }
     }
 
-    &-value {
-        height: 24px;
-        line-height: 20px;
-        padding: 2px 8px;
-        border-radius: 4px;
-        margin-right: 8px;
-        display: inline-flex;
-
-        &:last-of-type {
-            margin-right: 0px;
-        }
-
-        &-wrapper {
-            min-height: 32px;
-            padding: 4px 0;
-            .dsh-ellipsis();
-        }
-    }
-
     &-tip {
         cursor: pointer;
 

package/src/styles/components/small/DshDropdown.less

@@ -35,7 +35,7 @@
                         color: @textColor-disabled
                     }
                     &-icon {
-                        margin-right: 3px;
+                        margin-right: 8px;
                     }
                     &-name {