yunyubang-web/src/views/productService/welfare.vue

<template>
  <div style="padding:0 20px;">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="福利包" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>
        <slot>
          <div>
            <Input style="width: 200px; margin-right: 10px" placeholder="关键字搜索" />
            <Button type="primary">查询</Button>
            <Button type="primary" style="margin-left: 10px" @click="$refs['addWelfare'].type = 'add',$refs['addWelfare'].isShow = true">新增</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :list="list" :table-item="table" :total="total" :page-size="select.pageSize" @pageIndexChange="pageChange" @pageSizeChange="e => select.pageSize = e">
      <template v-slot:btns>
        <el-table-column label="操作" header-align="center" fixed="right" min-width="382">
          <template slot-scope="scope">
            <Button icon="ios-basket" type="primary" style="margin-left: 10px;" size="small" @click="isShowCombine = true,$refs['productCombine'].id = scope.row.id">产品组合</Button>
            <Button icon="ios-build" type="primary" style="margin-left: 10px;" size="small" @click="editorClick(scope.row)">编辑</Button>
            <Poptip
              transfer
              confirm
              title="确认删除?"
              @on-ok="deletePackage(scope.row)">
              <Button icon="ios-trash-outline" type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
            </Poptip>
            <el-switch
              style="margin-left: 10px;"
              :value="scope.row.state_name == '已上架' ? true : false"
              active-color="#BF617C"
              inactive-color="#E5E5E5"
              :active-text="scope.row.state_name == '已上架' ? '已上架' : '已下架'"
              @change="stateChange(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <productCombine ref="productCombine" :is-show.sync="isShowCombine"></productCombine>

    <addWelfare ref="addWelfare" @refresh="getPackage"></addWelfare>
  </div>
</template>

<script>
import {index,toggleActive,destroy} from "@/api/package"
import {deepCopy} from '@/utils'

import productCombine from './components/productCombine'
import addWelfare from '@/views/productService/components/addWelfare'
import { Message } from 'element-ui'
export default {
  components:{
    productCombine,
    addWelfare
  },
  data() {
    return {
      select:{
        pageIndex:1,
        pageSize:10,
      },

      isShowCombine:false,
      total:0,
      list:[],
      table:[
        {
          prop:"name",
          label:'名称',
          width: 280,
          align:'left'
        },
        {
          label:'项目数量',
          width: 200,
          customFn:(row)=>{
            return (<div>{row.items.length}</div>)
          }
        },
        {
          prop:"price",
          label:"价格",
          width: 180,
          align:'right'
        },
        {
          prop: 'state_name',
          label: '状态',
          width: 160,
          customFn:(row)=>{
            if(row.state_name == '已上架'){
              return <div style="color: green;text-align: center;">{row.state_name}</div>
            }else{
              return <div style="color: red;text-align: center;">{row.state_name}</div>
            }
          }
        }
      ]
    }
  },
  methods: {
    stateChange(row){
      toggleActive({id:row.id}).then(res => {
        row.state_name = row.state_name == '已上架' ? '已下架' : '已上架'
        Message({
          type:'success',
          message:`${row.state_name.slice(1)}成功`
        })
      })
    },

    pageChange(e){
      this.select.pageIndex = e
      this.getPackage()
    },
    async getPackage(){
      const res = await index({
        page_size:this.select.pageSize,
        page:this.select.pageIndex
      })
      this.list = res.data
      this.total = res.total
    },

    deletePackage(row){
      destroy({id:row.id}).then(res => {
        Message({
          type:'success',
          message:'删除成功'
        })
        this.getPackage()
      })
    },
    editorClick(row){
      this.$refs['addWelfare'].id = row.id
      this.$refs['addWelfare'].detail = deepCopy(row)
      this.$refs['addWelfare'].type = 'editor'
      this.$refs['addWelfare'].isShow = true
    }
  },
  mounted() {
    this.getPackage()
  }

}
</script>

<style scoped lang="scss">
</style>