bri-components 1.2.1 → 1.2.3

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

@@ -7,7 +7,7 @@
                 class="BriLabels-dropdown"
                 trigger="custom"
                 placement="bottom-start"
-                :visible="listVisible"
+                :visible="isVisible"
                 transfer
                 @on-clickoutside="clickInput"
             >
@@ -17,58 +17,68 @@
                         ...commonClass,
                         'BriLabels-edit': true
                     }"
+                    @mouseenter="isHover = true"
+                    @mouseleave="isHover = false"
                     @click="clickInput"
                 >
-                    <template v-if="!$isEmptyData(val)">
+                    <!-- 有值 -->
+                    <template v-if="!$isEmptyData(curValList)">
                         <dsh-tags
                             class="overflow"
-                            :list="val"
+                            :list="curValList"
                             :propsObj="{
                                 disabled: !finalCanEdit
                             }"
+                            :autoEllipsis="true"
                             @delete="clickDeleteItem"
-                        >
-                            <span slot-scope="{ tagItem }">
-                                {{ tagItem.name }}
-                            </span>
-                        </dsh-tags>
+                        ></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>
-
-                    <template v-else>
-                        {{ emptyShowVal }}
-                    </template>
                 </div>
 
                 <template #list>
                     <DropdownMenu class="BriLabels-dropdown-menu">
                         <DropdownItem
-                            v-for="item in listData"
-                            :key="item._key"
+                            v-for="listItem in listData"
+                            :key="listItem._key"
                             :class="{
                                 'item': true,
-                                'item-active': !!val.find(i=>i._key == item._key)
+                                'item-active': !!curValList.find(item => item._key === listItem._key)
                             }"
-                            @click.native="clickItem(item)"
+                            @click.native="clickItem(listItem)"
                         >
 
                             <div
-                                v-if="item.isEdit"
+                                v-if="listItem.isEdit"
                                 class="item-edit"
                             >
                                 <Input
-                                    v-model="item.name"
+                                    v-model="listItem.name"
                                     @click.native="clickEditInput($event)"
                                 >
                                 <template #suffix>
                                     <Icon
                                         color="#3DB8C5"
                                         custom="bri bri-duigou"
-                                        @click.native.stop="clickConfirm(item)"
+                                        @click.native.stop="clickConfirm(listItem)"
                                     />
                                 </template>
                                 </Input>
@@ -78,13 +88,13 @@
                                 v-else
                                 class="item-show"
                             >
-                                {{ item.name }}
+                                {{ listItem.name }}
                                 <span class="item-show-icons">
                                     <Icon
-                                        v-if="!item.coreLabel"
+                                        v-if="!listItem.coreLabel"
                                         class="item-show-icons-edit"
                                         custom="bri bri-bianji"
-                                        @click.stop="clickEditIcon(item)"
+                                        @click.stop="clickEditIcon(listItem)"
                                     />
                                     <!-- 暂时不需要删除 -->
                                     <!-- <Icon
@@ -96,7 +106,7 @@
                         </DropdownItem>
 
                         <div
-                            v-if="!selfPropsObj._onlySelect"
+                            v-if="!onlySelect"
                             class="btns"
                         >
                             <bri-button
@@ -116,7 +126,7 @@
         <!-- 查看 -->
         <template v-else>
             <bri-tooltip
-                :content="showValStr"
+                :content="showVal"
                 maxWidth="200"
                 :transfer="true"
             >
@@ -125,17 +135,10 @@
                     'BriLabels-show': true
                 }">
                     <dsh-tags
-                        v-if="!$isEmptyData(val)"
+                        v-if="!$isEmptyData(curValList)"
                         class="text"
-                        :list="val"
-                        :propsObj="{
-                            closable: false
-                        }"
-                    >
-                        <span slot-scope="{ tagItem }">
-                            {{ tagItem.name }}
-                        </span>
-                    </dsh-tags>
+                        :list="curValList"
+                    ></dsh-tags>
 
                     <template v-else>
                         {{ emptyShowVal }}
@@ -156,97 +159,99 @@
         ],
         data () {
             return {
+                isHover: false,
+
                 listData: [],
-                listVisible: false,
-                inputIcon: "ios-arrow-down",
+                isVisible: false,
                 renderList: false
             };
         },
         computed: {
             selfPropsObj () {
                 return {
+                    _labelType: "entity",
+                    _onlySelect: false,
+                    _originLabels: [],
+
                     ...this.propsObj,
                     ...this.commonDealPropsObj
                 };
             },
-            val: {
-                get () {
-                    return this.value[this.controlKey] || [];
-                },
-                set (val) {
-                    this.value[this.controlKey] = val;
-                }
-            },
 
-            isCore () {
-                return this.selfPropsObj.isCore;
+            labelType () {
+                return this.selfPropsObj._labelType;
+            },
+            onlySelect () {
+                return this.selfPropsObj._onlySelect;
             },
-            showValStr () {
-                let valArr = this.val && this.val.map(item => item.name);
-                return valArr && valArr.join("、");
+            originLabels () {
+                return this.selfPropsObj._originLabels;
+            },
+            inputIcon () {
+                return this.isVisible ? "ios-arrow-up" : "ios-arrow-down";
+            },
+
+            showVal () {
+                return this.$isEmptyData(this.curValList)
+                    ? this.emptyShowVal
+                    : this.curValList.map(item => item.name).join("、");
             }
         },
         created () {},
         methods: {
-            init () {
-                if (this.isCore) {
-                    this.listData = this.selfPropsObj._originLabels.map(item => {
-                        return {
-                            ...item,
-                            isEdit: false
-                        };
-                    });
-                } else {
-                    this.getListData();
-                }
-            },
-
             clickInput () {
-                if (!this.finalCanEdit) return;
-                if (!this.renderList) {
-                    this.init();
-                }
-                this.renderList = true;
-                this.listVisible = !this.listVisible;
-                if (this.listVisible) {
-                    this.inputIcon = "ios-arrow-up";
-                } else {
-                    this.inputIcon = "ios-arrow-down";
+                if (this.finalCanEdit) {
+                    if (!this.renderList) {
+                        if (this.isCore) {
+                            this.listData = this.originLabels.map(item => {
+                                return {
+                                    ...item,
+                                    isEdit: false
+                                };
+                            });
+                        } else {
+                            this.getListData();
+                        }
+                    }
+                    this.renderList = true;
+                    this.isVisible = !this.isVisible;
                 }
             },
             clickEditInput (e) {
                 e.stopPropagation();
             },
-            clickEditIcon (item) {
-                item.isEdit = true;
+            clickEditIcon (listItem) {
+                listItem.isEdit = true;
                 this.$forceUpdate();
             },
-            clickConfirm (item) {
-                if (item.name == "") return;
-                item.isEdit = false;
-                this.$forceUpdate();
-                this.change();
+            clickConfirm (listItem) {
+                if (listItem.name) {
+                    listItem.isEdit = false;
+                    this.$forceUpdate();
+                };
             },
 
-            clickItem (item) {
-                if (this.val.findIndex(i => i._key == item._key) > -1) {
-                    this.val = this.val.filter(i => i._key != item._key);
+            clickItem (listItem) {
+                if (this.curValList.some(item => item._key === listItem._key)) {
+                    this.curValList = this.curValList.filter(item => item._key !== listItem._key);
                 } else {
-                    this.val.push(item);
+                    this.curValList = [...this.curValList, listItem];
                 }
-                this.change();
-            },
-            clickDeleteItem (item) {
-                this.change();
             },
             clickAddItem () {
                 this.listData.push({
                     _key: this.$randomB36("Labels"),
                     isEdit: true,
                     name: "",
-                    labelType: this.selfPropsObj._labelType
+                    labelType: this.labelType
                 });
-                this.change();
+            },
+            clickDeleteItem (deleteItem) {
+                this.curValList = this.curValList.filter(item => item._key !== deleteItem._key);
+            },
+            // 点击清除选择项
+            clickClear () {
+                this.curValList = [];
             },
 
             // 接口 -获取列表数据
@@ -258,10 +263,10 @@
                     },
                     params: {
                         search: {
-                            entityKey: this.entityKey, // 当前工作表关联的数据表Key
-                            fieldKey: this.selfPropsObj._key === "_default" ? this.value._key : (this.selfPropsObj.__realKey__ || this.selfPropsObj._key), // 当前字段Key
-                            labelType: this.selfPropsObj._labelType,
-                            modKey: this.modKey
+                            entityKey: this.entityKey,
+                            modKey: this.modKey,
+                            fieldKey: this.fieldKey, // 当前字段Key
+                            labelType: this.labelType
                         },
                         pagination: {
                             page: 1,

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

@@ -17,6 +17,7 @@
                 @mouseleave="isHover = false"
                 @click="clickInput"
             >
+                <!-- 有值 -->
                 <template v-if="!$isEmptyData(curValList)">
                     <dsh-tags
                         class="text"
@@ -26,23 +27,26 @@
                         }"
                         @delete="clickDeleteItem"
                     ></dsh-tags>
+                </template>
+                <!-- 无值 -->
+                <template v-else>
+                    {{ emptyShowVal }}
+                </template>
 
+                <!-- 图标 -->
+                <template>
                     <Icon
-                        v-if="selfPropsObj._clearable && isHover"
+                        v-if="!$isEmptyData(curValList) && selfPropsObj._clearable && isHover"
                         class="icon-close"
-                        type="md-close"
+                        type="ios-close-circle"
                         @click.stop="clickClear"
                     />
                     <Icon
                         v-else
                         class="icon-default"
-                        :type="`${multiple ? 'ios-people' : 'ios-person'}`"
+                        :type="inputIcon"
                     />
                 </template>
-
-                <template v-else>
-                    {{ emptyShowVal }}
-                </template>
             </div>
 
             <!-- 查看模式 -->
@@ -57,9 +61,6 @@
                     v-if="!$isEmptyData(curValList)"
                     class="text"
                     :list="curValList"
-                    :propsObj="{
-                        closable: false
-                    }"
                 ></dsh-tags>
 
                 <template v-else>
@@ -93,7 +94,7 @@
                         </span>
                         <Icon
                             class="item-delete"
-                            type="md-close"
+                            type="ios-close-circle"
                             @click="deleteSelect(selectItem, selectIndex, newValList)"
                         />
                     </span>
@@ -246,6 +247,10 @@
             highSearch () {
                 return this.selfPropsObj._highSearch;
             },
+            inputIcon () {
+                return this.multiple ? "ios-people" : "ios-person";
+            },
+
             // 暂时没配置
             isCascader () {
                 return this.selfPropsObj._isCascader;

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

@@ -36,7 +36,7 @@
                 <span>
                     <Icon
                         v-if="depart.children && depart.children.length"
-                        :type="iconType(depart)"
+                        :type="getIcon(depart)"
                         @click.stop="toggleChildren(depart)"
                     />
                     <span class="DepartmentMenu-item-name-text">
@@ -124,7 +124,7 @@
             };
         },
         computed: {
-            iconType () {
+            getIcon () {
                 return function (depart) {
                     return depart.isShowChildren ? "ios-arrow-down" : "ios-arrow-forward";
                 };

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

@@ -17,6 +17,7 @@
                 @mouseleave="isHover = false"
                 @click="clickInput"
             >
+                <!-- 有值 -->
                 <template v-if="!$isEmptyData(curValList)">
                     <dsh-tags
                         class="text"
@@ -26,23 +27,26 @@
                         }"
                         @delete="clickDeleteItem"
                     ></dsh-tags>
+                </template>
+                <!-- 无值 -->
+                <template v-else>
+                    {{ emptyShowVal }}
+                </template>
 
+                <!-- 图标 -->
+                <template>
                     <Icon
-                        v-if="selfPropsObj._clearable && isHover"
+                        v-if="!$isEmptyData(curValList) && selfPropsObj._clearable && isHover"
                         class="icon-close"
-                        type="md-close"
+                        type="ios-close-circle"
                         @click.stop="clickClear"
                     />
                     <Icon
                         v-else
                         class="icon-default"
-                        :type="`${multiple ? 'ios-people' : 'ios-person'}`"
+                        :type="inputIcon"
                     />
                 </template>
-
-                <template v-else>
-                    {{ emptyShowVal }}
-                </template>
             </div>
 
             <!-- 查看 -->
@@ -57,9 +61,6 @@
                     v-if="!$isEmptyData(curValList)"
                     class="text"
                     :list="curValList"
-                    :propsObj="{
-                        closable: false
-                    }"
                 ></dsh-tags>
 
                 <template v-else>
@@ -121,9 +122,7 @@
                                             :indeterminate="false"
                                             :value="curCheckAll"
                                             @click.prevent.native="clickCheckAll"
-                                        >
-                                            全选
-                                        </Checkbox>
+                                        >全选</Checkbox>
                                     </div>
 
                                     <!-- 下 列表-->
@@ -182,7 +181,7 @@
                             </span>
                             <Icon
                                 class="list-item-delete"
-                                type="md-close"
+                                type="ios-close-circle"
                                 @click="clickDeleteUserItem(userItem, userIndex, newValList)"
                             />
                         </span>
@@ -293,6 +292,10 @@
             highSearch () {
                 return this.selfPropsObj._highSearch;
             },
+            inputIcon () {
+                return this.multiple ? "ios-people" : "ios-person";
+            },
+
             // 审签单定制需求使用字段
             transmit_type () {
                 return this.selfPropsObj.transmit_type;
@@ -305,7 +308,7 @@
             },
 
             curCheckAll () {
-                return this.userList.every(userItem => this.newValList.find(newItem => newItem._key == userItem._key));
+                return this.userList.every(userItem => this.newValList.find(newItem => newItem._key === userItem._key));
             },
             showVal () {
                 return this.$isEmptyData(this.curValList)

package/src/components/small/BriDrawer.vue

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

package/src/components/small/DshDropdown.vue

@@ -4,6 +4,7 @@
         :trigger="trigger"
         :placement="placement"
         :transfer="transfer"
+        transfer-class-name="DshDropdown"
     >
         <slot>
             <Icon

package/src/components/small/DshModal.vue

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