caimei-authentic-manager/src/views/admin/logistics-licensed/components/supplier-list.vue

<template>
  <div>
    <div class="filter-container">
      <div class="filter-control">
        <span>供应商名称:</span>
        <el-input v-model="listQuery.shopName" placeholder="供应商名称" @keyup.enter.native="handleFilter" />
      </div>

      <div class="filter-control">
        <span>供应商类型:</span>
        <el-select
          v-model="listQuery.shopType"
          placeholder="供应商类型"
          clearable
          style="width: 200px"
          class="filter-item"
          @change="getList()"
        >
          <el-option label="所有类型" value="" />
          <el-option label="代理商" :value="2" />
          <el-option label="品牌方" :value="1" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>手机号:</span>
        <el-input
          v-model="listQuery.mobile"
          placeholder="手机号"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
      </div>
      <div class="filter-control">
        <span>联系人:</span>
        <el-input
          v-model="listQuery.linkMan"
          placeholder="联系人"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
      </div>
      <div class="filter-control">
        <el-button type="primary" @click="getList(listQuery)">查询</el-button>
      </div>
    </div>
    <!-- 表格区域 -->
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      header-row-class-name="tableHeader"
    >
      <el-table-column label="序号" :index="indexMethod" type="index" sortable="custom" align="center" width="80" />
      <el-table-column label="供应商名称" align="center" prop="name" />
      <el-table-column label="供应商类型" width="100px" align="center">
        <template v-slot="{ row }">
          <span v-if="row.shopType === 1">品牌方</span>
          <span v-if="row.shopType === 2">代理商</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="120px" align="center" prop="mobile" />
      <el-table-column label="联系人" align="center" prop="linkMan" />
      <el-table-column label="创建时间" class-name="status-col" width="160px">
        <template slot-scope="{ row }">
          <span>{{ row.createTime | formatTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160px">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="$_navigationTo(`/logistics/club-list?id=${row.authUserId}`)">
            机构授权牌
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <pagination
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList(listQuery)"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { fetchSupplierList } from '@/api/supplier'

export default {
  name: 'ComplexTable',
  components: { Pagination },
  props: {
    sendStatus: {
      type: Number,
      default: 0
    }
  },
  // mixins: [scrollTo],
  data() {
    return {
      slider: 1,
      listLoading: true,
      tableKey: '',
      total: 0, // 条数统计
      listQuery: {
        brandId: '', // 品牌id
        linkMan: '', // 联系人
        mobile: '', // 手机号
        pageNum: 0, // 页码
        pageSize: 10, // 分页大小
        shopName: '', // 供应商名称
        shopType: '', // 供应商类型
        loginAccount: '', // 登录账号
        listType: 7,
        sendStatus: ''
      },
      list: [],
      prevData: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    getList() {
      this.listQuery.sendStatus = this.sendStatus
      this.listLoading = true
      fetchSupplierList(this.listQuery)
        .then((res) => {
          if (res.code !== 0) {
            return this.$message.error('获取数据失败~')
          }
          const { total, list } = res.data
          this.total = total
          this.formatList(list)
          this.list = list
          console.log(this.list)
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    // 格式化数组
    formatList(list = []) {
      list.forEach((i) => {
        i.shopStatus = i.shopStatus === 1
      })
    },
    // 过滤列表
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    indexMethod(index) {
      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
    }
  }
}
</script>