pyxis-page/src/views/shop/list.vue

<template>
  <div class="app-container">
    <!-- filter -->
    <el-form ref="filterForm" :inline="true" :model="filterForm" class="filter">
      <el-form-item label="关键字" prop="key">
        <el-input v-model="filterForm.key" placeholder="关键字"/>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select
          v-model="filterForm.publish"
          placeholder="所有"
          class="w100"
        >
          <el-option value="all">所有</el-option>
          <el-option value="true">已审核</el-option>
          <el-option value="false">未审核</el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="resetFilterForm">重置</el-button>
      </el-form-item>
    </el-form>
    <router-link to="/system/create">
      <el-button
        type="primary"
        icon="el-icon-edit"
        v-permission="['shopman:edit']"
      >
        添加
      </el-button>
    </router-link>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-top:30px;"
    >
      <el-table-column
        width="180px"
        align="center"
        label="添加时间"
      >
        <template slot-scope="{row}">
          <span>{{ row.createdAt | parseTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        min-width="200px"
        label="店铺名"
      >
        <template slot-scope="{row}">
          <router-link
            :to="'/system/edit/'+row._id"
            class="link-type"
          >
            <span>{{ row.name }}</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column
        label="区域"
      >
        <template slot-scope="{row}">
          <span>{{ row.areaStr }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="publish"
        align="center"
        label="审核状态"
      >
        <template slot-scope="{row}">
          <el-tag
            size="small"
            :type="row.publish ? 'info': 'danger'"
          >{{ formPublish(row.publish) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        fixed="right"
        width="320"
      >
        <template slot-scope="scope">
          <el-button
            :type="scope.row.publish? 'warning': 'success'"
            size="small"
            style="margin-left: 10px"
            v-permission="['shopman:review']"
            @click="publishShop(scope)"
          >
            {{ scope.row.publish? '取消审核': '通过审核' }}
          </el-button>
          <router-link :to="'/system/edit/'+scope.row._id">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              style="margin-left: 10px"
              v-permission="['shopman:edit']"
            >
              编辑
            </el-button>
          </router-link>
          <el-button
            type="danger"
            size="small"
            style="margin-left: 10px"
            v-permission="['shopman:delete']"
            @click="handleDelete(scope)"
          >
            {{ $t('permission.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { IShopData } from '@/api/types'
import Pagination from '@/components/Pagination/index.vue'
import { deleteShop, getShops, updateShopPublish } from '@/api/shop'
import { parseTime } from '@/utils'

@Component({
  name: 'ShopList',
  components: {
    Pagination
  },
  filters: {
    parseTime: (timestamp: string) => {
      return parseTime(timestamp)
    }
  }
})

export default class extends Vue {
  private total = 0
  private list: IShopData[] = []
  private listLoading = true
  private listQuery = {
    page: 1,
    limit: 20,
    key: '',
    publish: 'all'
  }

  private filterForm = {
    key: '',
    publish: 'all'
  }

  $refs!: {
    filterForm: HTMLFormElement
  }

  created() {
    this.getList()
  }

  activated() {
    this.getList()
  }

  private async getList() {
    this.listLoading = true
    const { data } = await getShops(this.listQuery)
    this.listLoading = false
    this.list = data.records
    this.total = data.total
  }

  private formPublish(cellValue: boolean) {
    return cellValue ? '已审核' : '未审核'
  }

  private async handleDelete(scope: any) {
    const { $index, row } = scope
    await this.$confirm('确认删除该店铺?', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await deleteShop(row._id)
    this.list.splice($index, 1)
    this.$message({
      type: 'success',
      message: '删除成功!'
    })
  }

  private async publishShop(scope: any) {
    const { row } = scope
    const str = row.publish ? '确认取消该店铺的审核状态?' : '确定通过该店铺的审核?'
    try {
      await this.$confirm(str, 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await updateShopPublish({ id: row._id, publish: !row.publish })
      row.publish = !row.publish
    } catch (err) {
      console.log(err)
    }
  }

  private search() {
    this.filterData()
  }

  private filterData() {
    this.listQuery.key = this.filterForm.key
    this.listQuery.page = 1
    this.listQuery.publish = this.filterForm.publish
    this.getList()
  }

  private resetFilterForm() {
    this.$refs.filterForm.resetFields()
  }
}
</script>

<style lang="scss" scoped>
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

</style>