index.vue 6.06 KB
<template>
  <div class="user">
    <el-form ref="searchFrom" :model="searchFrom" label-width="80px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="商品名称">
            <el-input v-model="searchFrom.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" plain>搜索</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="12">
          <el-form-item>
            <el-button type="success" plain @click="add">添加商品</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="userList"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="商品ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <el-table-column
        label="商品类型">
        <template slot-scope="scope">
          {{scope.row.goods_type | goodsType}}
        </template>
      </el-table-column>
      <el-table-column
        label="现价">
        <template slot-scope="scope">
          {{scope.row.current_price/100}}
        </template>
      </el-table-column>
      <el-table-column
        label="课程类别">
        <template slot-scope="scope">
          {{scope.row.course_type | lessonType}}
        </template>
      </el-table-column>
      <el-table-column
        label="是否有实物">
        <template slot-scope="scope">
          {{scope.row.is_real | isOrNot}}
        </template>
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          {{scope.row.status | goodsStatus}}
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        label="操作">
        <template slot-scope="scope">
          <el-popover
            placement="top"
            width="320">
            <div style="text-align: center">
              <el-button size="mini" plain type="primary" @click="detail(scope.row)">
                查看详情
              </el-button>
              <el-button v-if="scope.row.status === 1" size="mini" plain type="primary" @click="onUp(scope.row)">
                上架
              </el-button>
              <el-button size="mini"  v-if="scope.row.status === 0" plain type="primary" @click="onDown(scope.row)">
                下架
              </el-button>
              <el-button size="mini" plain type="warning" @click="edit(scope.row)">
                编辑
              </el-button>
              <el-button size="mini" plain type="danger" @click="onDel(scope.row)">
                删除
              </el-button>
            </div>
            <el-button slot="reference" size="mini" type="text" >操作</el-button>
          </el-popover>

        </template>
      </el-table-column>
    </el-table>
    <page :total="total" v-model="nowPage"/>
    <dialog-com :dialogObj="dialogObj"  @changeShow="changeShow" @reflash="getUser"/>
  </div>
</template>

<script>
  import {getGoodsListApi,deleteGoodsApi,downGoodsApi,upGoodsApi} from "../../service/api";
  import {ISORNOT,GOODSTYPE,LESSONTYPE,GOODSSTATUS} from "../../util/wordbook";
  import page from '../framework/page'
  import dialogCom from './dialog'
  export default {
    name: "index",
    data(){
      return {
        searchFrom:{
          name:'',
        },
        userList:[],
        total:0,
        nowPage:0,
        dialogObj:{
          type:0,
          show:false,
          title:'',
          id:''
        },
      }
    },
    components:{
      page,
      dialogCom
    },
    filters:{
      isOrNot(value){
        return ISORNOT[value]
      },
      goodsType(value){
        return GOODSTYPE[value]
      },
      lessonType(value){
        return LESSONTYPE[value]
      },
      goodsStatus(value){
        return GOODSSTATUS[value]
      },
    },
    mounted(){
      this.getUser()
    },
    methods:{
      getUser(){
        getGoodsListApi(this.searchFrom).then(res=>{
          this.userList = res.list;
          this.total = res.total
        })
      },
      edit(data){
        this.dialogObj={
          type:1,
          title:'编辑商品',
          show:true,
          id:data.id
        }
      },
      add(){
        this.dialogObj={
          type:0,
          title:'添加商品',
          show:true
        }
      },
      detail(data){
        this.dialogObj.id = data.id;
        this.dialogObj.type = 1;
        this.dialogObj.show = true
      },
      onDel(data){
        this.$confirm('此操作将删除该商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteGoodsApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          });
          this.getUser()
        });
      },
      onUp(data){
        this.$confirm('此操作将上架该商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          upGoodsApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          });
          this.getUser()
        });
      },
      onDown(data){
        this.$confirm('此操作将下架该商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          downGoodsApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          });
          this.getUser()
        });
      },
      changeShow(data){
        this.dialogObj.show=data
      }

    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .user{
    height: 100%;
    overflow: auto;
    padding: 20px;
    .btn-content{
      text-align: center;
    }
  }
</style>