caimei-authentic-manager/src/views/normal/club/cate/index.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-control">
        <span>设备名称:</span>
        <el-input v-model="listQuery.name" placeholder="设备名称" @keyup.enter.native="handleFilter" />
      </div>
      <div class="filter-control">
        <span>审核状态:</span>
        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
          <el-option label="全部" value="" />
          <el-option label="待审核" :value="2" />
          <el-option label="审核通过" :value="1" />
          <el-option label="审核未通过" :value="0" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>上线状态:</span>
        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
          <el-option label="全部" value="" />
          <el-option label="已上线" :value="1" />
          <el-option label="待上线" :value="2" />
          <el-option label="未上线" :value="0" />
        </el-select>
      </div>
      <div class="filter-control">
        <permission-button type="primary" @click="handleFilter">查询</permission-button>
        <permission-button type="primary" @click="handleAdd">添加</permission-button>
      </div>
    </div>
    <!-- 表格区域 -->
    <el-table
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      header-row-class-name="tableHeader"
    >
      <el-table-column label="序号" :index="indexMethod" type="index" align="center" width="80" />
      <el-table-column label="设备名称" align="center" prop="name" />

      <el-table-column label="审核状态" width="220px" align="center">
        <template slot-scope="{ row }">
          <audit-status :status="row.auditStatus" :reason="row.invalidReason" />
        </template>
      </el-table-column>

      <el-table-column label="上线状态" width="140px" align="center">
        <template slot-scope="{ row }">
          <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
          <template v-if="row.auditStatus === 1">
            <template v-if="row.status === 0">
              <span style="margin-right: 10px" class="status danger">已下线</span>
              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
            </template>
            <template v-else>
              <span style="margin-right: 10px" class="status success">已上线</span>
              <permission-button type="info" size="mini" @click="handleChangeStatus(row)">下线</permission-button>
            </template>
          </template>
          <template v-else>
            <!-- <el-tag type="warning">待上线</el-tag> -->
            <span style="margin-right: 10px" class="status warning">待上线</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" class-name="status-col" width="160px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createTime | formatTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="createBy" width="160" />
      <!-- <el-table-column v-if="false" label="创建人" width="180px" align="center" prop="createBy" /> -->
      <el-table-column label="操作" align="center" width="240px" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <permission-button type="primary" size="mini" @click="handleQrcode(row)"> 设备二维码 </permission-button>
          <permission-button type="primary" size="mini" @click="handleEdit(row)"> 编辑 </permission-button>
          <permission-button type="danger" size="mini" @click="handleRemove(row)"> 删除 </permission-button>
        </template>
      </el-table-column>
    </el-table>

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

<script>
import { mapGetters } from 'vuex'
import { fetchProductCateList, removeProductCate, updateProductCateStatus } from '@/api/product'

const resetFormData = () => ({
  productTypeId: '',
  authUserId: '',
  name: '',
  image: '',
  createBy: ''
})

export default {
  name: 'ComplexTable',
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listQuery: {
        authUserId: '',
        auditStatus: '',
        listType: 1,
        name: '',
        pageNum: 1,
        pageSize: 10,
        status: ''
      },
      productInfo: {},
      // 添加分类表单
      formData: resetFormData(),
      rules: {
        name: [{ required: true, message: '请输入设备名称', trigger: ['blur'] }],
        image: [{ required: true, message: '请上传设备图片', trigger: ['change'] }]
      },
      productImageList: []
    }
  },
  computed: {
    ...mapGetters(['authUserId'])
  },
  created() {
    this.getList()
  },
  activated() {
    this.getList()
  },

  methods: {
    // 获取列表信息
    getList() {
      this.fetchProductList()
    },
    // 过滤列表
    handleFilter() {
      this.formData.pageNum = 1
      this.list = []
      this.fetchProductList()
    },
    // 改变启用状态
    async handleChangeStatus(row) {
      let status = Boolean(row.status)
      const tip = status ? '下架' : '上架'
      let confirmType = ''
      try {
        confirmType = await this.$confirm(`确定${tip}该设备管理吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        status = !status
      } catch (error) {
        console.log(error)
      }

      if (confirmType !== 'confirm') {
        return
      }
      try {
        await updateProductCateStatus({
          productTypeId: row.productTypeId,
          status: Number(status)
        })
        this.$message.success('修改设备状态成功')
        this.fetchProductList()
      } catch (error) {
        console.log(error)
      }
    },
    // 获取设备分类列表
    async fetchProductList() {
      this.listQuery.authUserId = this.authUserId
      try {
        const res = await fetchProductCateList(this.listQuery)
        this.total = res.data.total
        this.list = res.data.list
      } catch (error) {
        console.log(error)
      }
    },
    // 添加分类
    handleAdd() {
      this.$router.push(`device-cate-edit?type=add`)
    },
    // 编辑分类
    handleEdit(row) {
      this.$router.push(`device-cate-edit?id=${row.productTypeId}&type=edit`)
    },
    // 设备二维码
    handleQrcode(row) {
      this.$router.push(`device-qrcode?id=${row.productTypeId}&name=${row.name}`)
    },
    // 删除
    async handleRemove(row) {
      let confirmType = ''
      try {
        confirmType = await this.$confirm('确认删除改商品分类吗？该操作不可逆！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (error) {
        console.log(error)
      }

      if (confirmType !== 'confirm') return

      try {
        await removeProductCate({
          productTypeId: row.productTypeId
        })
        this.$message.success('删除设备分类成功')
        this.fetchProductList()
      } catch (error) {
        console.log(error)
      }
    },

    // 表格索引
    indexMethod(index) {
      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  ::v-deep {
    .el-dialog__body {
      padding-bottom: 0;
    }
  }
  .pd-10 {
    padding-top: 10px;
  }
}
</style>