适用类型

src/views/components/source/SourceListIsp.vue

@@ -46,9 +46,9 @@
                         </el-dropdown-menu>
                     </template>
                 </el-dropdown>
-                <el-select class="selectWidth" style="margin-left: -1px;"
+                <el-select class="" style="margin-left: -1px;"
                 :style="{'max-width':searchParmeters.type==2?'':''}"
-                :class="[searchParmeters.type==2?'':'']"
+                :class="[searchParmeters.type==2?'selectWidth':'col']"
                 @change="handleChangeTypeOrPlatform(searchParmeters.Province,2)"
                     v-model="searchParmeters.Province"
                     filterable
@@ -61,21 +61,25 @@
                     :value="item.ID"
                     />
                 </el-select> 
-                <el-select class="selectWidth" style="margin-left: -1px;"
-                @change="handleChangeTypeOrPlatform(searchParmeters.Province,5)"
-                    v-model="searchParmeters.UseType"
-                    multiple
-                    filterable
-                    placeholder="适用类型"
-                    clearable>
-                    <el-option
-                    v-for="item in ApplicableTypeList"
-                    :key="item.ID"
-                    :label="item.Name"
-                    :value="item.ID"
-                    />
-                </el-select>
+                
                 <template v-if="searchParmeters.type==2">
+                    <el-dropdown style="margin-left: -1px;" trigger="click">
+                        <el-button type="default" class="ppt-button text-white selectWidth"
+                            style="background: #000;border-radius: 0;padding: 8px;">
+                            <div class="row items-center">
+                                <span class="col" style="margin-top: 2px; text-align: left;">{{ currentUseType }}</span>
+                                <IconDown class="q-ml-sm" :size="16" />
+                            </div>
+                        </el-button>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item v-for="(x, i) in ApplicableTypeList" @click="handleChangeTypeOrPlatform(x.ID, 5)"
+                                    :key="i"
+                                    :style="{'font-weight':searchParmeters.UseType.indexOf(x.ID)!=-1?'600':'',
+                                    'color':searchParmeters.UseType.indexOf(x.ID)!=-1?'#564bec':'',}">{{ x.Name }}</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
                     <el-dropdown style="margin-left: -1px;" trigger="click">
                         <el-button type="default" class="ppt-button text-white selectWidth"
                             style="background: #000;border-radius: 0;padding: 8px;">
@@ -125,7 +129,7 @@
                                     size="mini" class="text-bold UseTypeTitle">{{ getTypeName(x.Type, 1)
                                     }}</el-tag>
                                 <template v-if="x.UseTypeList&&x.UseTypeList.length>0">
-                                    <el-tag type="info" size="mini" class="text-bold UseTypeTitle" v-for="(item,index) in x.UseTypeList">
+                                    <el-tag :type="index==0?'danger':index==1?'warning':index==2?'':'info'" size="mini" class="text-bold UseTypeTitle" v-for="(item,index) in x.UseTypeList">
                                        <template v-if="item.indexOf('团')!=-1">{{ item.replace('团', "")}}</template> 
                                        <template v-else>{{ item.replace('常用', "")}}</template> </el-tag>
                                 </template>
@@ -174,7 +178,7 @@ const searchParmeters = reactive({
     Province: 0,
     DiningType: 0,
     DiningPriceType: 0,
-    UseType: []
+    UseType: [0]
 
 })
 const platforms = ref<{ id: number, name: string }[]>([
@@ -211,7 +215,11 @@ const currentDiningPriceType = computed(() => {
     return getTypeName(searchParmeters.DiningPriceType, 4)
 })
 
-const getTypeName = (t: number, st: 0 | 1) => {
+const currentUseType = computed(() => {
+    return getTypeName(searchParmeters.UseType, 5)
+})
+
+const getTypeName = (t: number|array, st: number) => {
     if (st == 1) {
         const p = allTypes.value.find(x => x.id == t)
         return (p?.name ?? "").replace('不限', "")
@@ -224,6 +232,13 @@ const getTypeName = (t: number, st: 0 | 1) => {
     }else if (st == 4) {
         const p = DiningPriceTypeList.value.find(x => x.ID == t)
         return (p?.Name ?? "").replace('不限', "")
+    }else if (st == 5) {
+        let p = ''
+        t.forEach(z => {
+           let find =  ApplicableTypeList.value.find(x => x.ID == z)
+           p +=(find?.Name ?? "").replace('不限', "")
+        });
+        return p
     } else {
         const p = platforms.value.find(x => x.id == t)
         return (p?.name ?? "").replace('不限', "")
@@ -277,12 +292,12 @@ const getDiningUseType = async () => {
         ApplicableTypeList.value = response.data.data
         let obj = {
             ID: 0,
-            Name: '不限'
+            Name: '不限适用类型'
         }
         ApplicableTypeList.value.unshift(obj)
     }
 }
-const handleChangeTypeOrPlatform = (id: number, t: 0 | 1 | 2 | 3 | 4 | 5) => {
+const handleChangeTypeOrPlatform = (id: number, t: number) => {
     if (t == 0) searchParmeters.platform = id
     else if(t == 2){
         searchParmeters.Province = id
@@ -291,7 +306,20 @@ const handleChangeTypeOrPlatform = (id: number, t: 0 | 1 | 2 | 3 | 4 | 5) => {
     }else if(t == 4){
         searchParmeters.DiningPriceType = id
     }else if(t == 5){
-        
+        let findIndex = searchParmeters.UseType.findIndex(x=>{
+            return x==id
+        })
+        if(findIndex==-1) {
+            if(id>0){
+                searchParmeters.UseType.push(id)
+                searchParmeters.UseType = searchParmeters.UseType.filter(x=>{return x!=0})
+            }else{
+                searchParmeters.UseType = [0]
+            }
+        }else {
+            searchParmeters.UseType = searchParmeters.UseType.filter(x=>{return x!=id})
+            if(searchParmeters.UseType.length==0) searchParmeters.UseType = [0]
+        }
     }else searchParmeters.type = id
     searchParmeters.pageIndex = 1
     handleSearch()
@@ -353,7 +381,7 @@ getDiningUseType()
         color: #fff;
     }
     .tools-bar ::v-deep(.el-button span.col){
-        max-width: 50px;
+        max-width: 35px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;