bri-components 1.2.3 → 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/BriLabels.vue

@@ -27,7 +27,8 @@
                             class="overflow"
                             :list="curValList"
                             :propsObj="{
-                                disabled: !finalCanEdit
+                                disabled: !finalCanEdit,
+                                closable: true
                             }"
                             :autoEllipsis="true"
                             @delete="clickDeleteItem"

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

@@ -23,7 +23,8 @@
                         class="text"
                         :list="curValList"
                         :propsObj="{
-                            disabled: !finalCanEdit
+                            disabled: !finalCanEdit,
+                            closable: true
                         }"
                         @delete="clickDeleteItem"
                     ></dsh-tags>

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

@@ -6,66 +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
+            <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>
 
@@ -192,7 +196,7 @@
             <!-- footer -->
             <div class="selectUsers-modal-wrap-footer">
                 <dsh-buttons
-                    :list="$getOperationList(['cancel', 'confirm'])"
+                    :list="$getOperationList(['canCancel', 'canConfirm'])"
                     @click="$dispatchEvent($event)"
                 ></dsh-buttons>
             </div>
@@ -212,9 +216,7 @@
         components: {
             departmentMenu
         },
-        props: {
-            showSelectUserModalOnly: Boolean
-        },
+        props: {},
         data () {
             return {
                 isHover: false,
@@ -260,16 +262,16 @@
                 },
 
                 operationMap: {
-                    cancel: {
+                    canCancel: {
                         name: "取消",
-                        type: "clickCancel",
+                        type: "canCancel",
                         btnType: "cancel",
                         event: "clickCancel"
                     },
-                    confirm: {
+                    canConfirm: {
                         name: "完成",
+                        type: "canConfirm",
                         btnType: "primary",
-                        type: "clickConfirm",
                         event: "clickConfirm"
                     }
                 }
@@ -296,19 +298,10 @@
                 return this.multiple ? "ios-people" : "ios-person";
             },
 
-            // 审签单定制需求使用字段
-            transmit_type () {
-                return this.selfPropsObj.transmit_type;
-            },
-            current_step_sp_user_key () {
-                return this.selfPropsObj.current_step_sp_user_key;
-            },
-            stepKey () {
-                return this.selfPropsObj.stepKey;
-            },
-
             curCheckAll () {
-                return this.userList.every(userItem => this.newValList.find(newItem => newItem._key === userItem._key));
+                return this.userList.length && this.userList.every(userItem =>
+                    this.newValList.some(newItem => newItem._key === userItem._key)
+                );
             },
             showVal () {
                 return this.$isEmptyData(this.curValList)
@@ -331,13 +324,13 @@
                 };
                 this.curDepartment = {};
                 this.pagePropsObj.page = 1;
-                this.getUserList();
-                this.getDepartmentList();
+                this.getUserListData();
+                this.getDepartmentListData();
             },
 
             search () {
                 this.pagePropsObj.page = 1;
-                this.getUserList();
+                this.getUserListData();
             },
             // 选择部门
             changeDepartment (departmentItem) {
@@ -348,7 +341,7 @@
                     this.userList = this.hightUsers;
                     this.total = 1;
                 } else {
-                    this.getUserList();
+                    this.getUserListData();
                 }
             },
             clickInput () {
@@ -374,7 +367,7 @@
                 } else {
                     this.newValList = [
                         ...this.newValList,
-                        this.userList.filter(userItem =>
+                        ...this.userList.filter(userItem =>
                             !this.newValList.some(newItem => newItem._key === userItem._key)
                         )
                     ];
@@ -400,10 +393,11 @@
             clickConfirm () {
                 this.closeModal();
                 this.curValList = this.newValList;
+                this.curDepartment = {};
             },
 
             /* ----------- 接口方法 ------------- */
-            getUserList () {
+            getUserListData () {
                 this.loading = true;
                 this.userList = [];
                 let searchName = this.searchData.name;
@@ -423,9 +417,6 @@
                     params: {
                         search: search,
                         department: this.curDepartment._key,
-                        transmit_type: this.transmit_type,
-                        current_step_sp_user_key: this.current_step_sp_user_key,
-                        stepKey: this.stepKey,
                         pagination: {
                             page: this.pagePropsObj.page,
                             pagesize: this.pagePropsObj.pagesize
@@ -438,16 +429,13 @@
                     }
                 });
             },
-            getDepartmentList () {
+            getDepartmentListData () {
                 this.$https({
                     url: {
                         module: "company",
                         name: "compDepartCascaderAll"
                     },
                     params: {
-                        transmit_type: this.transmit_type,
-                        current_step_sp_user_key: this.current_step_sp_user_key,
-                        stepKey: this.stepKey,
                         searchString: this.propsObj.searchString
                     },
                     callback: data => {
@@ -470,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" : "";