wine-manager/src/views/super/config/wine/index.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="wine.query.cond"
        placeholder="酒名、描述"
        style="width: 300px;"
        class="filter-item"
      />
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-search"
        @click="handleQuery"
      >
        查询
      </el-button>
      <el-button
        plain
        class="filter-item"
        style="margin-left: 10px;"
        type="success"
        icon="el-icon-plus"
        @click="handleShowCreate"
      >
        添加
      </el-button>
      <el-button
        plain
        class="filter-item"
        style="margin-left: 10px;"
        icon="el-icon-delete"
        type="danger"
        @click="handleBatchDelete"
      >
        删除
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="wine.loading"
      :data="wine.list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="80" align="center" :selectable="selectableList" />
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column
        label="酒名"
        prop="name"
        align="center"
        width="250"
      />
      <el-table-column
        label="上架时间"
        width="200"
        prop="time"
        align="center"
        sortable="custom"
        :class-name="wine.sort.time"
      >
        <template slot-scope="{row}">
          <span>{{ row.time | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="价格（￥分/两）"
        prop="price"
        align="center"
        sortable="custom"
        min-width="250"
        :class-name="wine.sort.price"
      />
      <el-table-column
        label="浓度（×100 度）"
        prop="degree"
        width="200"
        align="center"
        sortable="custom"
        :class-name="wine.sort.degree"
      />
      <el-table-column
        label="密度（×1000 g/ml）"
        width="200"
        prop="density"
        align="center"
        sortable="custom"
        :class-name="wine.sort.density"
      />
      <el-table-column
        label="图片"
        width="200"
        align="center"
      >
        <template #default="scope">
          <img style="width: 50px" :src="scope.row.picture" alt="">
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button plain type="primary" size="mini" icon="el-icon-edit" @click="handleShowDetail(row)">
            编辑
          </el-button>
          <el-button
            v-if="canDelete(row.id)"
            plain
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="handleDeleteOne(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      hide-on-single-page
      :total="wine.total"
      :page.sync="wine.query.page"
      :limit.sync="wine.query.limit"
      @pagination="getList"
    />

    <el-dialog
      :visible.sync="detailVisible"
      :title="detail.title"
      :close-on-click-modal="false"
      center
    />
  </div>
</template>

<script>
import api from '@/api/super/config/wine'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'

const InitWineId = 10100
export default {
  name: 'WineConfig',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      wine: {
        list: [],
        total: 0,
        loading: true,
        sort: {
          time: 'ascending',
          price: 'ascending',
          degree: 'ascending',
          density: 'ascending'
        },
        query: {
          page: 1,
          limit: 10,
          cond: ''
        }
      },
      batch: [],
      detailVisible: false,
      detail: {
        title: '',
        id: 0,
        name: '',
        time: new Date(),
        price: 0,
        degree: 0,
        density: 0,
        picture: '',
        describe: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    selectableList(row) {
      return row.id !== InitWineId
    },
    canDelete(id) {
      return id !== InitWineId
    },
    handleDeleteOne(id) {
      this.$confirm('此操作将删除该酒品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.Delete([id]).then(() => {
          this.$notify({
            title: '成功',
            message: '删除酒品信息成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        }).catch(msg => {
          this.$notify({
            title: '失败',
            message: msg,
            type: 'error',
            duration: 0
          })
        })
      })
    },
    handleBatchDelete() {
      if (this.batch.length === 0) return this.$message.info('请勾选需要删除的酒品')
      this.$confirm('此操作将删除选中的酒品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.Delete(this.batch).then(() => {
          this.$notify({
            title: '成功',
            message: '删除酒品信息成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        }).catch(msg => {
          this.$notify({
            title: '失败',
            message: msg,
            type: 'error',
            duration: 0
          })
        })
      })
    },
    handleShowDetail(row) {
      this.detail = Object.assign({}, row)
      this.detail.time = parseTime(row.time)
      this.detail.title = '酒品详情'
      this.detailVisible = true
    },
    handleShowCreate() {
      this.resetDetail()
      this.detail.title = '新增酒品'
      this.detailVisible = true
    },
    getList() {
      this.wine.loading = true
      api.Query(this.wine.query).then(res => {
        for (let i = 0; i < res.wines.length; ++i) {
          res.wines[i].time = new Date(res.wines[i].time)
        }
        this.wine.list = res.wines
        this.wine.total = res.total
        this.wine.loading = false
      })
    },
    handleQuery() {
      this.wine.query.page = 1
      this.getList()
    },
    sortChange(data) {
      const { prop, order } = data
      this.wine.sort[prop] = order
      const cmp = order === 'ascending' ? (a, b) => a[prop] - b[prop] : (a, b) => b[prop] - a[prop]
      this.wine.list.sort(cmp)
    },
    selectionChange(val) {
      this.batch = val.map(e => e.id)
    },
    resetDetail() {
      this.detail = {
        title: '',
        id: 0,
        name: '',
        time: new Date(),
        price: 0,
        degree: 0,
        density: 0,
        picture: '',
        describe: ''
      }
    }
  }
}
</script>

<style scoped>

</style>