caimei-authentic-manager/src/views/admin/supplier/index.vue

<template>
  <div class="app-container">
    <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.loginAccount" placeholder="登录账号" @keyup.enter.native="handleFilter" />
      </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>
        <el-button type="primary" @click="$_navigationTo('supplier-add')">添加供应商</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">
        <template slot-scope="{ row }">
          <span v-if="row.loginAccount">{{ row.loginAccount }}</span>
          <span v-else>未绑定</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="120px" align="center" prop="mobile" />
      <el-table-column label="联系人" width="100px" align="center" prop="linkMan" />
      <el-table-column label="供应商状态" align="center" width="100px">
        <template v-slot="{ row }">
          <el-switch v-model="row.shopStatus" @change="handleChangeStatus(row)" />
        </template>
      </el-table-column>
      <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="创建人" class-name="status-col" width="100px" prop="createBy" /> -->
      <el-table-column label="操作" align="center" width="360" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="$_navigationTo(`supplier-edit?id=${row.authUserId}&type=edit`)">
            编辑
          </el-button>
          <el-button size="mini" type="primary" @click="handleProxy(row)">
            代他操作
          </el-button>
          <el-button size="mini" type="primary" @click="$_navigationTo(`club-list?id=${row.authUserId}`)">
            查看机构认证
          </el-button>
          <el-button size="mini" type="primary" @click="handleResetPwd(row)">
            重置密码
          </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 { fetchSupplierList, supplierStatusChange } from '@/api/supplier'
import { resetPassword } from '@/api/user'
import { fetchBrandList } from '@/api/brand'

export default {
  name: 'ComplexTable',
  // mixins: [scrollTo],
  data() {
    return {
      slider: 1,
      listLoading: true,
      tableKey: '',
      total: 0, // 条数统计
      listQuery: {
        brandId: '', // 品牌id
        linkMan: '', // 联系人
        mobile: '', // 手机号
        pageNum: 0, // 页码
        pageSize: 10, // 分页大小
        shopName: '', // 供应商名称
        shopType: '', // 供应商类型
        loginAccount: '' // 登录账号
      },
      list: [],
      brandList: [], // 品牌列表
      prevData: ''
    }
  },
  created() {
    this.getList()
    this.getBrandList()
  },
  methods: {
    // 获取列表数据
    getList() {
      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
      })
    },
    // 获取品牌列表
    getBrandList() {
      // 获取品牌列表
      fetchBrandList()
        .then(res => {
          if (res.code === 0) {
            this.brandList = res.data
          }
        })
        .catch(err => console.log(err))
    },
    // 供应商状态改变
    handleChangeStatus(item) {
      const params = {
        status: item.shopStatus ? 1 : 0,
        authUserId: item.authUserId
      }
      supplierStatusChange(params)
        .then(res => {
          if (res.code === 0) {
            this.getList()
            this.$message({
              message: '操作成功',
              duration: 500,
              type: 'success'
            })
          }
        })
        .catch(() => {
          this.getList()
          this.$message({
            message: '操作失败',
            duration: 500,
            type: 'danger'
          })
        })
    },
    // 重置密码
    async handleResetPwd(item) {
      const text = await this.$confirm('此操作将重置该供应商的密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message.info('已取消操作')
      })
      if (text !== 'confirm') return
      // 要执行的操作
      resetPassword({ authUserId: item.authUserId }).then(res => {
        if (res.code !== 0) return
        const h = this.$createElement
        this.$notify.success({
          title: '重置密码',
          message: h('i', { style: 'color: #333' }, `已重置供应商"${item.name}"的密码`),
          duration: 2000
        })
      })
    },
    // 代他操作
    async handleProxy(item) {
      const text = await this.$confirm('此操作将临时登录该供应商账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message.info('已取消操作')
      })
      if (text !== 'confirm') return
      console.log(item)
      // 要执行的操作
      this.$store.commit('proxy/OPEN_PROXY', item)
      this.$store.dispatch('user/proxyLogin')
      this.$router.push('/proxy')
    },
    // 过滤列表
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    indexMethod(index) {
      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
    }
  }
}
</script>

<style lang="scss" scoped>

</style>