提交代码

fhKeeper/formulahousekeeper/timesheet/src/components/select.vue

@@ -3,30 +3,35 @@
   <div tabindex="0" @blur="selectClihide()" style="display: inline-block;" v-if="!wxCope">
     <!-- <div :style="'width:' + selectWidth + 'px;height:' + selectHeight + 'px'" :class="classDiv ? 'select selectDiv' : 'select'" @click="selectCli" :ref="disabled ? '' : 'selectDiv'"> -->
     <div :class="disabled ? 'disabledTrue' : 'disabledFalse'" @mouseenter="moveIonDiv" @mouseleave="outIonDiv">
-        <div :style="`width:${selectWidth}px;height:${selectHeight}px`" :class="classDiv ? 'select selectDiv' : 'select'" @click="selectCli" :ref="disabled ? '' : 'selectDiv'">
+        <div :style="`width:${selectWidth}px;min-height:${selectHeight}px`" :class="classDiv ? 'select selectDiv' : 'select'" @click="selectCli" :ref="disabled ? '' : 'selectDiv'">
             <div v-if="!multiSelect" :style="'line-height: '+selectHeight+'px;font-size: '+selectFontSize+'px;'" :class="selectName == $t('defaultText.pleaseChoose') ? 'selecttex selecttexXuan' : 'selecttex'">
                 <TranslationOpenDataText type='userName' :openid='selectName'></TranslationOpenDataText>
-                <!-- {{selectName}} -->
             </div>
             <div v-if="multiSelect" :style="'line-height: '+selectHeight+'px;margin-left: -10px'" :class="selectName == $t('defaultText.pleaseChoose') ? 'selecttex selecttexXuan' : 'selecttex'">
-                <span v-if="multiSelectList.length > 0">
-                    <span v-if="!tile" style="width: 100%">
-                        <span class="all">
-                            <TranslationOpenDataText type='userName' :openid='multiSelectList[0].name'></TranslationOpenDataText>
-                            <!-- {{multiSelectList[0].name}} -->
-                            <i class="el-icon-error" v-if="!disabled" @click.stop="deleteMultiSelectList('-1')"></i>
-                        </span>
-                        <span class="all" v-if="multiSelectList.length > 1"> + {{multiSelectList.length - 1}}</span>
-                    </span>
+                <template v-if="multiSelectList.length > 0">
+                    <div v-if="!tile" style="width: 100%">
+                        <template v-if="!expandPersonnel">
+                            <span class="all">
+                                <TranslationOpenDataText type='userName' :openid='multiSelectList[0].name'></TranslationOpenDataText>
+                                <i class="el-icon-error" v-if="!disabled" @click.stop="deleteMultiSelectList('-1')"></i>
+                            </span>
+                            <span class="all" v-if="multiSelectList.length > 1"> + {{multiSelectList.length - 1}}</span>
+                        </template>
+                        <template v-else>
+                            <span class="all" v-for="(ueseItem, userIndex) in multiSelectList" :key="userIndex">
+                                <TranslationOpenDataText type='userName' :openid='ueseItem.name'></TranslationOpenDataText>
+                                <i class="el-icon-error" v-if="!disabled" @click.stop="deleteMultiSelectList('-2', userIndex)"></i>
+                            </span>
+                        </template>
+                    </div>
                     <span v-if="tile" style="width: 100%">
                         <span class="all" style="margin-right: 6px" v-for="(items, indexs) in multiSelectList" :key="indexs">
                             <TranslationOpenDataText type='userName' :openid='items.name'></TranslationOpenDataText>
-                            <!-- {{items.name}} -->
                             <span v-if="items.jobNumber" class="spanFllat">{{items.jobNumber}}</span>
                             <i class="el-icon-error" @click.stop="deleteMultiSelectList(indexs)" v-if="!disabled"></i>
                         </span>
                     </span>
-                </span>
+                </template>
                 <span v-else class="allTwo">{{$t('defaultText.pleaseChoose')}}</span>
             </div>
             <i :class=" move ? 'el-icon-arrow-down iostu iostuHover' : 'el-icon-arrow-down iostu'" v-if="!moveIon"></i>
@@ -158,6 +163,10 @@ export default {
         searchBoxTop: {
             type: String,
             default: '-9'
+        },
+        expandPersonnel: { // 多选是否展开
+            type: Boolean,
+            default: true
         }
     },
     components: {
@@ -479,11 +488,13 @@ export default {
                 this.options = this.fistArrListOne
             }
         },
-        deleteMultiSelectList(str) {
+        deleteMultiSelectList(str, userIndex) {
             let userId
             if(str == '-1') {
                 userId = this.multiSelectList[0].id
                 this.multiSelectList.splice(0, 1)
+            } else if(str == '-2') {
+                this.multiSelectList.splice(userIndex, 1)
             } else {
                 userId = this.multiSelectList[str].id
                 this.multiSelectList.splice(str, 1)
@@ -495,7 +506,7 @@ export default {
                     }
                 }
             }
-            
+
             let obj = {
                 distinction: this.distinction,
                 index: this.index, // 选中的索引
@@ -607,7 +618,7 @@ export default {
         color: #606266;
         display: inline-block;
         font-size: inherit;
-        height: 40px;
+        min-height: 40px;
         line-height: 40px;
         outline: 0;
         padding: 0 15px;
@@ -618,7 +629,7 @@ export default {
         cursor: pointer;
     }
     .selecttex {
-        height: 28px;
+        // height: 28px;
         line-height: 28px;
         text-overflow: ellipsis;
         font-size: 12px;
@@ -690,6 +701,7 @@ export default {
         line-height: 24px;
         padding: 0px 8px;
         color: #909399;
+        margin-right: 4px;
     }
     .allTwo {
         display: inline-block;