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

<template>
  <div class="app-container">
    <div class="filter-container">
      <span>供应商名称:</span>
      <el-input v-model="listQuery.shopName" placeholder="供应商名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <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>
      <span>所属品牌:</span>
      <el-select v-model="listQuery.brandId" placeholder="所属品牌" clearable class="filter-item" style="width: 200px" filterable @change="getList()">
        <el-option label="所有品牌" value="" />
        <el-option
          v-for="item in brandList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <span>手机号:</span>
      <el-input v-model="listQuery.mobile" placeholder="手机号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <span>联系人:</span>
      <el-input v-model="listQuery.linkMan" placeholder="联系人" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button type="primary" icon="el-icon-search" @click="getList(listQuery)">查询</el-button>
      <el-button type="primary" icon="el-icon-edit" @click="$_navigationTo('add')">添加供应商</el-button>
    </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="序号" type="index" sortable="custom" align="center" width="80" />
      <el-table-column label="供应商名称" align="center" prop="name" />
      <el-table-column label="供应商类型" width="150px" 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="联系人" width="100px" align="center" prop="linkMan" />
      <el-table-column label="供应商状态" align="center" width="140px">
        <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="200px">
        <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(`edit?id=${row.authUserId}`)">
            编辑
          </el-button>
          <el-button size="mini" type="primary" @click="handleProxy(row)">
            代他操作
          </el-button>
          <el-button size="mini" type="primary" @click="$_navigationTo(`/auth/list?id=${row.authUserId}`)">
            授权信息
          </el-button>
          <el-button size="mini" type="primary" @click="handleResetPwd(row)">
            重置密码
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <pagination v-show="total>0" :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, supplierStatusChange } from '@/api/supplier'
import { resetPassword } from '@/api/user'
import { fetchBrandList } from '@/api/brand'
import { formatDate } from '@/utils'
// import scrollTo from '@/mixin/scrollTo'
export default {
  name: 'ComplexTable',
  components: { Pagination },
  filters: {
    formatTime(time) {
      if (!time) {
        return ''
      }
      return formatDate(time, 'yyyy-MM-DD HH:mm:ss')
    }
  },
  // mixins: [scrollTo],
  data() {
    return {
      slider: 1,
      listLoading: true,
      tableKey: '',
      total: 0, // 条数统计
      listQuery: {
        brandId: '', // 品牌id
        linkMan: '', // 联系人
        mobile: '', // 手机号
        pageNum: 0, // 页码
        pageSize: 20, // 分页大小
        shopName: '', // 供应商名称
        shopType: ''// 供应商类型
      },
      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('user/SET_PROXY_INFO', item)
      this.$router.push(`/auth/list?type=${item.shopType}`)
    },
    // 过滤列表
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-container{
  span{
    display: inline-block;
    margin-bottom: 10px;
    vertical-align: middle;
    font-size: 14px;
  }
  .el-button{
    display: inline-block;
    margin-bottom: 10px;
    vertical-align: middle;
  }
  .el-input,.el-select{
    margin-right: 10px;
    margin-left: 10px;
  }
}

</style>