caimei-authentic-www/mixins/deviceList.js

import { debounce } from '@/utils'
import { mapGetters } from 'vuex'
export default {
  filters: {
    formatSnCode(code) {
      if (!code) return ''
      return code.replace(/^(\w{2})\w+(\w{4})$/, '$1******$2')
    },
  },
  data() {
    return {
      loadingMore: false,
      finished: true,
      isRequest: false,
      searchQuery: {
        type: 2,
        keyword: '',
      },
      listQuery: {
        listType: 1,
        productTypeId: '',
        snCode: '',
        provinceId: '',
        cityId: '',
        townId: '',
        authParty: '',
        pageNum: 1,
        pageSize: 10,
      },
      list: [],
      total: 0,
      productSelectList: [],
      searchFlag: false,
    }
  },
  computed: {
    ...mapGetters(['routePrefix', 'supplierInfo', 'authUserId']),
  },
  mounted() {
    this.fetchProductSelectList()
  },
  methods: {
    // 获取设备列表
    fetchList: debounce(async function () {
      try {
        this.isRequest = true
        this.loadingMore = true
        const res = await this.$http.api.getAuthProductList(this.listQuery)
        this.list = [...this.list, ...res.data.list]
        this.finished = !res.data.hasNextPage
        this.total = res.data.total
        this.loadingMore = false
        this.listQuery.pageNum += 1
        this.searchFlag = true
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequest = false
        this.searchFlag = true
      }
    }, 400),

    // 搜索
    onSearch() {
      const { productTypeId } = this.listQuery
      const { type, keyword } = this.searchQuery
      if (!productTypeId) {
        return this.$toast('请选择设备分类')
      }
      if (!type) {
        return this.$toast('请选择搜索条件')
      }
      if (!keyword) {
        return this.$toast('搜索内容不能为空')
      }

      if (type === 1) {
        this.listQuery.snCode = keyword
        this.listQuery.authParty = ''
      } else {
        this.listQuery.snCode = ''
        this.listQuery.authParty = keyword
      }

      this.list = []
      this.listQuery.pageNum = 1
      this.fetchList()
    },

    // 获取设备种类
    async fetchProductSelectList() {
      try {
        const res = await this.$http.api.fetchProductSelectList({
          authUserId: this.authUserId,
        })
        this.productSelectList = res.data
      } catch (error) {
        console.log(error)
      }
    },

    // 设备详情
    toDetail(item) {
      const url = `${this.routePrefix}/approve/device/detail?id=${item.productId}`
      this.$router.push(url)
    },

    // 机构详情
    toClubDetail(item) {
      const url = `${this.routePrefix}/approve/club/detail?id=${item.authId}`
      this.$router.push(url)
    },

    // 加载更多
    onLoadMore() {
      if (!this.searchFlag) return
      this.fetchList()
    },

    // 城市变化
    onCityChange(valueMap) {
      const { provinceId, cityId, townId } = valueMap
      this.listQuery.provinceId = provinceId
      this.listQuery.cityId = cityId
      this.listQuery.townId = townId
    },

  },
}