ngds-backend-ele/src/components/FilterUser.vue

<template>
  <div class="filter-user">

    <div class="filter-option">
			<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"
        :key="key"
        class="selected-tag"
        closable
        @close="handleCloseTag(key)"
      >{{ item.filterTypeName }} {{ item.filterSymbolName }} {{ item.filterName }}
      </el-tag>
    </div>
    <el-dialog :title="$t('filter.memberSelect')" :visible.sync="filterUserDialogShow" width="80%">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('filter.memberNumber')">
          <template slot-scope="scope">
            {{ scope.row.USER_NAME }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('filter.name')">
          <template slot-scope="scope">
            {{ scope.row.REAL_NAME }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('filter.idNumber')" width="180">
          <template slot-scope="scope">
            {{ scope.row.ID_CARD }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('filter.phoneNumber')">
          <template slot-scope="scope">
            {{ scope.row.MOBILE }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('filter.memberLevel')">
          <template slot-scope="scope">
            {{ scope.row.DEC_LV ? filterCustomType.decLevel.values[scope.row.DEC_LV]['LEVEL_NAME'] : '' }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('filter.level')">
          <template slot-scope="scope">
            {{ scope.row.EMP_LV ? filterCustomType.empLevel.values[scope.row.EMP_LV]['LEVEL_NAME'] : '' }}
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <el-button type="primary" size="small" :disabled="multipleSelectionUserId == undefined || multipleSelectionUserId.length <= 0?true:false" @click="handleSelectValue(false)">{{ $t('filter.confirmSelect') }}</el-button>
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { filterUser } from '@/api/filter'
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',
  components: { Pagination },
  props: {
    filterTypes: {
      type: Object,
      default() {
        return {
          'USER_NAME': { isUserTable: true, name: this.$t('filter.memberNumber') },
          'REAL_NAME': { isUserTable: true, name: this.$t('filter.memberName') },
          'ID_CARD': { isUserTable: true, name: this.$t('filter.ID') },
          'MOBILE': { isUserTable: true, name: this.$t('filter.phoneNumber') },
          'CREATED_AT': { isUserTable: true, name: this.$t('filter.addAt'), other: 'date' }
        }
      }
    },
    filterBtnName: {
      type: String,
      default() {
        return this.$t('filter.memberSelect')
      }
    }
  },
  data() {
    return {
      loading: false,
      filterUserDialogShow: false,
      tableData: [],
      currentPage: 1,
      totalPages: 1,
      totalCount: 1,
      pageSize: 20,
      // filterCustomType: {
      //   decLevel: {
      //     placeholder: this.$t('filter.pleaseSelectDecLevel'),
      //     labelField: 'LEVEL_NAME',
      //     valueField: 'ID',
      //     values: baseInfo.decLevels()
      //   },
      //   empLevel: {
      //     placeholder: this.$t('filter.pleaseSelectEmpLevel'),
      //     labelField: 'LEVEL_NAME',
      //     valueField: 'ID',
      //     values: baseInfo.empLevels()
      //   },
      //   decRole: {
      //     placeholder: '请选择报单中心级别',
      //     labelField: 'ROLE_NAME',
      //     valueField: 'ID',
      //     values: baseInfo.decRoles()
      //   },
      //   subCompany: {
      //     placeholder: '请选择分公司',
      //     labelField: 'COM_NAME',
      //     valueField: 'ID',
      //     values: baseInfo.subCompanies()
      //   },
      //   status: {
      //     placeholder: '请选择会员状态',
      //     labelField: 'label',
      //     valueField: 'value',
      //     values: baseInfo.allStatus()
      //   },
      //   dealTypes: {
      //     placeholder: '请选择交易类型',
      //     labelField: 'TYPE_NAME',
      //     valueField: 'ID',
      //     values: baseInfo.dealTypes()
      //   },
      //   systems: {
      //     placeholder: '请选择体系',
      //     labelField: 'SYSTEM_NAME',
      //     valueField: 'ID',
      //     values: baseInfo.systems()
      //   },
      //   sex: {
      //     placeholder: '请选择性别',
      //     labelField: 'label',
      //     valueField: 'value',
      //     values: {
      //       '男': { label: '男', value: '男' },
      //       '女': { label: '女', value: '女' }
      //     }
      //   },
      //   yesOrNo: {
      //     placeholder: '请选择是否',
      //     labelField: 'label',
      //     valueField: 'value',
      //     values: {
      //       1: { label: '是', value: 1 },
      //       0: { label: '否', value: 0 }
      //     }
      //   },
      //   banks: {
      //     placeholder: '请选择开户行',
      //     labelField: 'BANK_NAME',
      //     valueField: 'BANK_CODE',
      //     values: baseInfo.allOpenBank()
      //   },
      //   nations: {
      //     placeholder: '请选择民族',
      //     labelField: 'name',
      //     valueField: 'id',
      //     values: baseInfo.allNation()
      //   },
      //   location: {
      //     placeholder: '请选择市场',
      //     labelField: 'label',
      //     valueField: 'value',
      //     values: {
      //       1: { label: '一市场', value: 1 },
      //       2: { label: '二市场', value: 2 },
      //       3: { label: '三市场', value: 3 },
      //       4: { label: '四市场', value: 4 },
      //       5: { label: '五市场', value: 5 }
      //     }
      //   }
      // },
      filterModel: {
        userId: ''
      },
      allFilterTypes: this.filterTypes,
      filterType: '',

      filterSymbol: '',
      // filterSymbols: {
      //   '=': this.$t('filter.eq'),
      //   'like': this.$t('filter.like'),
      //   '<>': this.$t('filter.noeq'),
      //   'notLike': this.$t('filter.nolike'),
      //   '>': this.$t('filter.moreThan'),
      //   '>=': this.$t('filter.moreThanEq'),
      //   '<': this.$t('filter.less'),
      //   '<=': this.$t('filter.lessThan')
      // },
      filterRelation: 'and',
      // filterRelations: {
      //   'and': this.$t('filter.and'),
      //   'or': this.$t('filter.or')
      // },
      filterValue: '',
      filterName: '',
      filterSelected: [],
      selectData: [],
      multipleSelection: [],
      multipleSelectionUserId: [],
      regionData: store.state.regionInfo.regionData,
      filterAreaValue: [],
      filterRequest: {},
			device: getScreenWidth() > 920
    }
  },
  computed: {
    filterCustomType() {
      return {
        decLevel: {
          placeholder: this.$t('filter.pleaseSelectDecLevel'),
          labelField: 'LEVEL_NAME',
          valueField: 'ID',
          values: baseInfo.decLevels()
        },
        empLevel: {
          placeholder: this.$t('filter.pleaseSelectEmpLevel'),
          labelField: 'LEVEL_NAME',
          valueField: 'ID',
          values: baseInfo.empLevels()
        },
        decRole: {
          placeholder: this.$t('filter.selectStockistHint'),
          labelField: 'ROLE_NAME',
          valueField: 'ID',
          values: baseInfo.decRoles()
        },
        // subCompany: {
        //   placeholder: '请选择分公司',
        //   labelField: 'COM_NAME',
        //   valueField: 'ID',
        //   values: baseInfo.subCompanies()
        // },
        status: {
          placeholder: this.$t('filter.selectMemberStatusHint'),
          labelField: 'label',
          valueField: 'value',
          values: baseInfo.allStatus()
        },
        dealTypes: {
          placeholder: this.$t('filter.selectHint'),
          labelField: 'TYPE_NAME',
          valueField: 'ID',
          values: baseInfo.dealTypes()
        },
        // systems: {
        //   placeholder: '请选择体系',
        //   labelField: 'SYSTEM_NAME',
        //   valueField: 'ID',
        //   values: baseInfo.systems()
        // },
        sex: {
          placeholder: this.$t('filter.selectGenderHint'),
          labelField: 'label',
          valueField: 'value',
          values: {
            '男': { label: this.$t('filter.man'), value: '男' },
            '女': { label: this.$t('filter.woman'), value: '女' }
          }
        },
        yesOrNo: {
          placeholder: this.$t('filter.selectWhetherOrNotHint'),
          labelField: 'label',
          valueField: 'value',
          values: {
            1: { label: this.$t('filter.yes'), value: 1 },
            0: { label: this.$t('filter.not'), value: 0 }
          }
        },
        banks: {
          placeholder: this.$t('filter.selectBankHint'),
          labelField: 'BANK_NAME',
          valueField: 'BANK_CODE',
          values: baseInfo.allOpenBank()
        },
        // nations: {
        //   placeholder: '请选择民族',
        //   labelField: 'name',
        //   valueField: 'id',
        //   values: baseInfo.allNation()
        // },
        location: {
          placeholder: this.$t('filter.selectMarketHint'),
          labelField: 'label',
          valueField: 'value',
          values: {
            1: { label: this.$t('filter.marketI'), value: 1 },
            2: { label: this.$t('filter.marketII'), value: 2 },
            // 3: { label: '三市场', value: 3 },
            // 4: { label: '四市场', value: 4 },
            // 5: { label: '五市场', value: 5 }
          }
        }
      }
    },
    filterSymbols() {
      return {
        '=': this.$t('filter.eq'),
        'like': this.$t('filter.like'),
        '<>': this.$t('filter.noeq'),
        'notLike': this.$t('filter.nolike'),
        '>': this.$t('filter.moreThan'),
        '>=': this.$t('filter.moreThanEq'),
        '<': this.$t('filter.less'),
        '<=': this.$t('filter.lessThan')
      }
    },
    pleaseSelect() {
      return {
        'pleaseSelect':this.$t('filter.pleaseSelectNotice'),
      }
    },

    filterRelations() {
      return {
        'and': this.$t('filter.and'),
        'or': this.$t('filter.or')
      }
    }

  },
  watch: {
    filterTypes(newVal) {
      this.allFilterTypes = this.filterTypes
    }
  },
  methods: {
    handleFilterTypeChange() {
      this.filterValue = ''
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.multipleSelectionUserId = []
      for (const i in this.multipleSelection) {
        this.multipleSelectionUserId.push(this.multipleSelection[i].ID)
      }
    },
    handleCurrentChange(page) {
      this.getData(this.filterRequest, page, this.pageSize)
    },
    handleSizeChange(pageSize) {
      this.getData(this.filterRequest, this.currentPage, pageSize)
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        filterUser({ kw: query }).then(response => {
          this.selectData = response
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      }
    },
    handleOptionPlus() {
      if (this.filterType === '' || this.filterSymbol === '' || (this.filterValue === '' && this.filterAreaValue === [])) {
        this.$message({
          message: this.$t('filter.selectContentNotice'),
          type: 'warning'
        })
        return false
      }
      let valueName = this.filterValue
      if (this.filterType !== '' && this.allFilterTypes[this.filterType].hasOwnProperty('other')) {
        // 获取下拉筛选时的选中项
        if (this.allFilterTypes[this.filterType].other === 'select') {
          let nameObj = []
          const _this = this
          if (!Array.isArray(this.allFilterTypes[this.filterType].selectData)) {
            nameObj[0] = this.allFilterTypes[this.filterType].selectData[_this.filterValue]
          } else {
            nameObj = (this.allFilterTypes[this.filterType].selectData).filter(function(item, index, array) {
              return item.id === _this.filterValue
            })
          }
          valueName = nameObj[0] ? nameObj[0].name : null
        } else if (this.allFilterTypes[this.filterType].other === 'area') {
          if (this.filterSymbol !== '=') {
            this.$message({
              message: this.$t('filter.areaSelectNotice'),
              type: 'warning'
            })
            return false
          }
          this.filterValue = this.filterAreaValue.join(',')
          valueName = ''
          for (const i in this.regionData) {
            if (this.regionData[i].value === this.filterAreaValue[0]) {
              valueName += this.regionData[i].label + ','
              for (const j in this.regionData[i].children) {
                if (this.regionData[i].children[j].value === this.filterAreaValue[1]) {
                  valueName += this.regionData[i].children[j].label + ','
                  for (const h in this.regionData[i].children[j].children) {
                    if (this.regionData[i].children[j].children[h].value === this.filterAreaValue[2]) {
                      valueName += this.regionData[i].children[j].children[h].label
                      break
                    }
                  }
                  break
                }
              }
              break
            }
          }
        } else if (this.filterCustomType.hasOwnProperty(this.allFilterTypes[this.filterType].other)) {
          const allCustomData = this.filterCustomType[this.allFilterTypes[this.filterType].other].values
          const customField = this.filterCustomType[this.allFilterTypes[this.filterType].other].labelField
          valueName = allCustomData[this.filterValue][customField]
        }
      }
      // 如果是筛选会员编号，则把会员编号转成小写
      // if(this.filterType === 'USER_NAME'){
      //   this.filterValue = this.filterValue.toLowerCase()
      // }

      this.filterSelected.push({
        filterType: this.filterType,
        filterTypeName: this.allFilterTypes[this.filterType].name,
        filterSymbol: this.filterSymbol,
        filterSymbolName: this.filterSymbols[this.filterSymbol],
        filterValue: this.filterValue,
        filterRelation: this.filterRelation,
        filterRelationName: this.filterRelations[this.filterRelation],
        filterName: valueName,
        filterOther: this.filterType !== '' && this.allFilterTypes[this.filterType].hasOwnProperty('other') ? this.allFilterTypes[this.filterType].other : null,
        isUserTable: this.allFilterTypes[this.filterType].isUserTable
      })
    },
    handleCloseTag(tag) {
      this.filterSelected.splice(tag, 1)
    },
    handleFilterUser() {
      console.log('===>>>', this.filterSelected.length, '<<===')
      if (this.filterSelected.length > 0) {
        this.loading = true
        this.filterRequest = {}
        for (const i in this.filterSelected) {
          if (this.filterSelected[i].isUserTable) {
            let reqFilterValue = `${this.filterSelected[i].filterSymbol},${this.filterSelected[i].filterValue}`
            if (this.filterSelected[i].hasOwnProperty('filterOther')) {
              reqFilterValue += `,${this.filterSelected[i].filterOther}`
            }
            const filterType = this.filterSelected[i].filterType
            if (this.filterRequest[filterType]) {
              this.$set(this.filterRequest, filterType, (this.filterRequest[filterType] + '|' + reqFilterValue))
            } else {
              this.$set(this.filterRequest, filterType, reqFilterValue)
            }
          }
        }
        if (Object.keys(this.filterRequest).length === 0) {
          this.handleSelectValue(true)
        } else {
          this.getData(this.filterRequest, this.currentPage)
        }
      }
    },
    getData(request, page = null, pageSize = null) {
      request.page = page
      request.pageSize = pageSize

      filterUser(this.listQuery).then(response => {
        this.filterUserDialogShow = true
      })
    },
    handleSelectValue(isAll = false) {
      const otherFilterTypes = []
      for (const i in this.filterSelected) {
        if (!this.filterSelected[i].isUserTable) {
          otherFilterTypes.push(this.filterSelected[i])
        }
      }
      let userIds = this.multipleSelectionUserId
      if (isAll) {
        userIds = 'all'
      }
      this.$emit('select-value', {
        userIds: userIds,
        otherFilterTypes: otherFilterTypes
      })
      this.filterUserDialogShow = false
    },
    handleFilterClear() {
      Object.assign(this.$data, this.$options.data())
      this.allFilterTypes = this.filterTypes
      // 清空地址栏
      filterHelper.clearFilterOption(this)
      this.$emit('select-value', { userIds: 'all', otherFilterTypes: [] })
    }
  }
}
</script>

  <style scoped>
    .filter-option:after {
      content: '';
      clear: both;
      display: table;
    }

    .filter-item {
      float: left;
      margin-left: 10px;
    }

    .filter-value {
      width: 200px;
    }

    .filter-relation {
      width: 100px;
      display: none;
    }

    .down-button {
      float: right;
    }

    .filter-selected {
      clear: both;
      margin: 10px;
      padding: 5px;
      border: 1px solid #ebeef5;
    }

    .selected-tag {
      margin-left: 10px;
    }
    /deep/ .el-input__inner {
        width:203px;
    }
  </style>