搜索栏UI调整

src/components/FilterUser.vue

@@ -1,91 +1,108 @@
 <template>
   <div class="filter-user">
+
     <div class="filter-option">
-      <el-select
-        v-model="filterType"
-        class="filter-item"
-        :placeholder="$t('common.selectType')"
-        @change="handleFilterTypeChange"
-      >
-        <el-option v-for="(item,key) in allFilterTypes" :key="key" :label="item.name" :value="key" />
-      </el-select>
-      <el-select
-        v-model="filterSymbol"
-        class="filter-item"
-        :placeholder="$t('common.selectFunction')"
-      >
-        <el-option v-for="(item,key) in filterSymbols" :key="key" :label="item" :value="key" />
-      </el-select>
-      <template
-        v-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'date'"
-      >
-        <el-date-picker
-          v-model="filterValue"
-          class="filter-item"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="datetime"
-          :placeholder="$t('common.selectDate')"
-        />
-      </template>
-      <template
-        v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'month'"
-      >
-        <el-date-picker
-          v-model="filterValue"
-          class="filter-item"
-          value-format="yyyyMM"
-          type="month"
-          :placeholder="$t('common.selectMonth')"
-        />
-      </template>
-      <template
-        v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'area'"
-      >
-        <el-cascader
-          v-model="filterAreaValue"
-          class="filter-item"
-          :options="regionData"
-          :props="{ checkStrictly: true }"
-        />
-      </template>
-      <template
-        v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'select'"
-      >
-        <el-select
-          v-model="filterValue"
-          class="filter-item"
-          :placeholder="`${pleaseSelect.pleaseSelect}${allFilterTypes[filterType].name}`"
-        >
-          <el-option
-            v-for="(item,key) in allFilterTypes[filterType].selectData"
-            :key="key"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </template>
-      <template
-        v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && filterCustomType.hasOwnProperty(allFilterTypes[filterType].other)"
-      >
-        <el-select v-model="filterValue" class="filter-item" :placeholder="`${filterCustomType[allFilterTypes[filterType].other].placeholder}`">
-          <el-option v-for="(item,key) in filterCustomType[allFilterTypes[filterType].other].values" :key="key" :label="item[filterCustomType[allFilterTypes[filterType].other].labelField]" :value="item[filterCustomType[allFilterTypes[filterType].other].valueField]" />
-        </el-select>
-      </template>
-      <template v-else>
-        <el-input v-model="filterValue" class="filter-item filter-value" :placeholder="$t('common.pleaseInputContent')" />
-      </template>
-      <el-select
-        v-model="filterRelation"
-        class="filter-item filter-relation"
-        :placeholder="$t('common.relation')"
-      >
-        <el-option v-for="(item,key) in filterRelations" :key="key" :label="item" :value="key" />
-      </el-select>
-      <el-button class="filter-item" icon="el-icon-plus" @click="handleOptionPlus" />
-      <el-button class="filter-item" type="primary" @click="handleFilterUser">{{ filterBtnName }}</el-button>
-      <el-button class="filter-item" type="" @click="handleFilterClear">{{ $t('common.reset') }}</el-button>
-<!--      <el-button class="down-button" type="text"><i class="el-icon-arrow-down" /></el-button>-->
+			<div v-if="device">
+					<el-select v-model="filterType" class="filter-item" :placeholder="$t('common.selectType')" @change="handleFilterTypeChange">
+						<el-option v-for="(item,key) in allFilterTypes" :key="key" :label="item.name" :value="key" />
+					</el-select>
+
+					<el-select v-model="filterSymbol" class="filter-item" :placeholder="$t('common.selectFunction')">
+						<el-option v-for="(item,key) in filterSymbols" :key="key" :label="item" :value="key" />
+					</el-select>
+
+					<template v-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'date'">
+						<el-date-picker v-model="filterValue" class="filter-item" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder="$t('common.selectDate')"/>
+					</template>
+
+					<template v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'month'">
+						<el-date-picker v-model="filterValue" class="filter-item" value-format="yyyyMM" type="month" :placeholder="$t('common.selectMonth')"/>
+					</template>
+
+					<template v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'area'">
+						<el-cascader v-model="filterAreaValue" class="filter-item" :options="regionData" :props="{ checkStrictly: true }"/>
+					</template>
+
+					<template v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'select'">
+						<el-select v-model="filterValue" class="filter-item" :placeholder="`${pleaseSelect.pleaseSelect}${allFilterTypes[filterType].name}`">
+							<el-option v-for="(item,key) in allFilterTypes[filterType].selectData" :key="key" :label="item.name" :value="item.id"/>
+						</el-select>
+					</template>
+
+					<template v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && filterCustomType.hasOwnProperty(allFilterTypes[filterType].other)">
+						<el-select v-model="filterValue" class="filter-item" :placeholder="`${filterCustomType[allFilterTypes[filterType].other].placeholder}`">
+							<el-option v-for="(item,key) in filterCustomType[allFilterTypes[filterType].other].values" :key="key" :label="item[filterCustomType[allFilterTypes[filterType].other].labelField]" :value="item[filterCustomType[allFilterTypes[filterType].other].valueField]" />
+						</el-select>
+					</template>
+
+					<template v-else>
+						<el-input v-model="filterValue" class="filter-item filter-value" :placeholder="$t('common.pleaseInputContent')" />
+					</template>
+
+					<el-select v-model="filterRelation" class="filter-item filter-relation" :placeholder="$t('common.relation')">
+						<el-option v-for="(item,key) in filterRelations" :key="key" :label="item" :value="key" />
+					</el-select>
+
+      		<el-button class="filter-item" icon="el-icon-plus" @click="handleOptionPlus" />
+      		<el-button class="filter-item" type="primary" @click="handleFilterUser">{{ filterBtnName }}</el-button>
+      		<el-button class="filter-item" type="" @click="handleFilterClear">{{ $t('common.reset') }}</el-button>
+			</div>
+
+			<el-row :gutter="20" v-else>
+				<el-col :xs="24" :sm="8" :md="8" :lg="8" style="margin-top: 5px;">
+					<el-select v-model="filterType" class="filter-item" :placeholder="$t('common.selectType')" @change="handleFilterTypeChange">
+						<el-option v-for="(item,key) in allFilterTypes" :key="key" :label="item.name" :value="key" />
+					</el-select>
+				</el-col>
+
+				<el-col :xs="24" :sm="8" :md="8" :lg="8" style="margin-top: 5px;">
+					<el-select v-model="filterSymbol" class="filter-item" :placeholder="$t('common.selectFunction')">
+						<el-option v-for="(item,key) in filterSymbols" :key="key" :label="item" :value="key" />
+					</el-select>
+				</el-col>
+
+				<el-col :xs="24" :sm="8" :md="8" :lg="8" style="margin-top: 5px;">
+					<template v-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'date'">
+						<el-date-picker v-model="filterValue" class="filter-item" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder="$t('common.selectDate')"/>
+					</template>
+
+					<template v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'month'">
+						<el-date-picker v-model="filterValue" class="filter-item" value-format="yyyyMM" type="month" :placeholder="$t('common.selectMonth')"/>
+					</template>
+
+					<template v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'area'">
+						<el-cascader v-model="filterAreaValue" class="filter-item" :options="regionData" :props="{ checkStrictly: true }"/>
+					</template>
+
+					<template v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'select'">
+						<el-select v-model="filterValue" class="filter-item" :placeholder="`${pleaseSelect.pleaseSelect}${allFilterTypes[filterType].name}`">
+							<el-option v-for="(item,key) in allFilterTypes[filterType].selectData" :key="key" :label="item.name" :value="item.id"/>
+						</el-select>
+					</template>
+
+					<template v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && filterCustomType.hasOwnProperty(allFilterTypes[filterType].other)">
+						<el-select v-model="filterValue" class="filter-item" :placeholder="`${filterCustomType[allFilterTypes[filterType].other].placeholder}`">
+							<el-option v-for="(item,key) in filterCustomType[allFilterTypes[filterType].other].values" :key="key" :label="item[filterCustomType[allFilterTypes[filterType].other].labelField]" :value="item[filterCustomType[allFilterTypes[filterType].other].valueField]" />
+						</el-select>
+					</template>
+
+					<template v-else>
+						<el-input v-model="filterValue" class="filter-item filter-value" :placeholder="$t('common.pleaseInputContent')" />
+					</template>
+
+					<el-select v-model="filterRelation" class="filter-item filter-relation" :placeholder="$t('common.relation')">
+						<el-option v-for="(item,key) in filterRelations" :key="key" :label="item" :value="key" />
+					</el-select>
+				</el-col>
+
+				<el-col :xs="24" :sm="24" :md="24" :lg="24" style="margin-top: 5px;">
+					<el-button class="filter-item" icon="el-icon-plus" @click="handleOptionPlus" />
+					<el-button class="filter-item" type="primary" @click="handleFilterUser">{{ filterBtnName }}</el-button>
+					<el-button class="filter-item" type="" @click="handleFilterClear">{{ $t('common.reset') }}</el-button>
+				</el-col>
+			</el-row>
     </div>
+
     <div v-show="filterSelected.length > 0" class="filter-selected">
       <el-tag
         v-for="(item,key) in filterSelected"
@@ -150,6 +167,7 @@ import baseInfo from '@/utils/baseInfo'
 import store from '@/utils/vuexStore'
 import Pagination from './Pagination'
 import filterHelper from '@/utils/filterHelper'
+import {getOperatingSystem, getScreenWidth} from "@/utils"
 
 export default {
   name: 'FilterUser',
@@ -274,7 +292,7 @@ export default {
       },
       allFilterTypes: this.filterTypes,
       filterType: '',
-      
+
       filterSymbol: '',
       // filterSymbols: {
       //   '=': this.$t('filter.eq'),
@@ -299,7 +317,8 @@ export default {
       multipleSelectionUserId: [],
       regionData: store.state.regionInfo.regionData,
       filterAreaValue: [],
-      filterRequest: {}
+      filterRequest: {},
+			device: getScreenWidth() > 920
     }
   },
   computed: {
@@ -408,7 +427,7 @@ export default {
         'pleaseSelect':this.$t('filter.pleaseSelectNotice'),
       }
     },
-    
+
     filterRelations() {
       return {
         'and': this.$t('filter.and'),