index.vue

<template>
  <div class="admin-refresh">
    <el-form ref="searchFrom" :model="form" style="padding-top: 20px;background: white" label-width="100px" size="small" inline>
      <el-form-item label="标题">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="商品">
        <el-select v-model="form.goods_id" filterable>
          <el-option v-for="data in goodsList" :key="data.id" :label="`【${data.id}】${data.name}`" :value="data.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="getList">搜索</el-button>
        <el-button type="success" plain @click="addIntegral" v-if="!$store.state.readonly">生成兑换码</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" size="small">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="goods_name" label="商品">
        <template slot-scope="scope">
          【{{scope.row.goods_id}}】{{scope.row.goods_name}}
        </template>
      </el-table-column>
      <el-table-column prop="num" label="数量" width="80px"></el-table-column>
      <el-table-column prop="source" label="活动方案">
        <template slot-scope="scope">{{scope.row.source | classSourceFilter}}</template>
      </el-table-column>
      <el-table-column prop="desc" label="备注"/>
      <el-table-column prop="expire_at" label="失效时间" width="90px"/>
      <el-table-column prop="created_at" label="创建时间" width="90px"/>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="onDetail(scope.row)">查看详情</el-button>
          <el-button type="warning" size="mini" v-if="!$store.state.readonly" @click="onEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <add-exchange ref="add_page" :newIntegral="newIntegral" :goodsList="goodsList" @subAdd="subAdd" @subEdit="subEdit"></add-exchange>
    <list-detail :detailList="detailList"/>
  </div>
</template>

<script>
  import {getExchangeListApi,getGoodsListApi,addExchangeApi,editExchangeApi,getSourceStudentApi} from "../../service/api";
  import {INTEGRALTYPE,INTEGRALFUN} from "../../util/wordbook";
  import page from '../framework/page'
  import addExchange from './add'
  import listDetail from './list'
  let studentSource=[]
  export default {
    name: "index",
    components: {
      page,
      addExchange,
      listDetail
    },
    filters: {
    classSourceFilter(val) {
      console.log(val)
      console.log(studentSource)
      // return CLASSSOURCE[val];
      return studentSource[val];
    },
  },
    data(){
      let is_addOption = [];
      for(let k in INTEGRALTYPE){
        is_addOption.push({id:k,value:INTEGRALTYPE[k]})
      }
      let sourceOption = [];
      for(let j in INTEGRALFUN){
        sourceOption.push({id:j,value:INTEGRALFUN[j]})
      }
      return {
        list:[],
        total:0,
        detailList:{
          show:false,
          user_id:'',
          is_exchange:"",
          id:null
        },
        newIntegral:{
          show:false,
          goods_id:'',
          num:'',
          expire_at:'',
          desc:'',
          id:null,
          source:''
        },
        goodsList:[],
        is_addOption:is_addOption,
        sourceOption:sourceOption,
        limit:10,
        userListShow:{
          show:false
        },
        nowPage:1,
        form:{
          name:'',
          goods_id:'',
        }
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      onDetail(data){
        this.detailList={
          show:true,
          user_id:'',
          is_exchange:"",
          id:data.id
        }
      },
      onEdit(data){
        this. newIntegral={
          show:true,
          goods_id:data.goods_id,
          num:data.num,
          expire_at:data.expire_at,
          desc:data.desc,
          name:data.name,
          id:data.id,
          source:data.source
        }
      },
      subEdit(){
        let json = {
          goods_id:this.newIntegral.goods_id,
          num:this.newIntegral.num,
          expire_at:this.newIntegral.expire_at,
          desc:this.newIntegral.desc,
          name:this.newIntegral.name,
          source:this.newIntegral.source,
        };
        editExchangeApi(this.newIntegral.id,json).then(res=>{
          this.$message({
            message: '数据修改成功',
            type: 'success'
          });
          this.getList();
          this.newIntegral.show = false
        })
      },
      subAdd(){
        let json = {
          goods_id:this.newIntegral.goods_id,
          num:this.newIntegral.num,
          expire_at:this.newIntegral.expire_at,
          desc:this.newIntegral.desc,
          name:this.newIntegral.name,
          source:this.newIntegral.source,
        };
        addExchangeApi(json).then(res=>{
          this.$message({
            message: '数据添加成功',
            type: 'success'
          });
          this.getList();
          this.newIntegral.show = false
        })
      },
      showUserList(){
        this.userListShow.show = true
      },
      addUser(value){
        this.userListShow.show = false;
        this.newIntegral.user_id = value
      },
      changeUserList(){},
      addIntegral(){
        this.newIntegral={
          show:true,
          goods_id:'',
          num:'',
          expire_at:'',
          name:'',
          id:null,
          desc:''
        }
      },
      initPage(){
        this.form = {
          name:'',
          goods_id:'',
        };
        this.getGood();
        
        getSourceStudentApi().then(res=>{
          let obj = {}
          res.forEach((item,index)=>{
            obj[item.type]=item.name
          })
          studentSource = obj
          console.log(obj)
          this.getList()
        });
      },
      getGood(){
        getGoodsListApi({limit:1000}).then(res=>{
          this.goodsList = res.list
        })
      },
      onPageChange(val){
        this.nowPage = val;
        this.getList()
      },
      onSizeChange(val){
        this.limit = val;
        this.nowPage = 1;
        this.getList()
      },
      getList(){
        let json={
          limit:this.limit,
          page: this.nowPage
        };
        if(this.form.name !== ''){json.name = this.form.name}
        if(this.form.goods_id !== ''){json.goods_id = this.form.goods_id}
        getExchangeListApi(json).then(res=>{
          this.list = res.list;
          this.total = res.total
        })
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .avatar{
    width: 50px;
    min-width: 50px;
    height: 50px;
    margin-right: 5px;
    border-radius: 50%;
  }
</style>

<style>
  .f-c > .cell {
    display: flex !important;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
</style>