index.vue

<template>
  <div class="user">
    <el-form ref="searchFrom" :model="searchFrom" label-width="100px" class="search-form" inline>
          <el-form-item label="商品名称">
            <el-input v-model="searchFrom.name"></el-input>
          </el-form-item>
          <el-form-item label="商品类型">
            <el-select v-model="searchFrom.goods_type" placeholder="请选择" @change="getUser">
              <el-option value="" label="请选择"></el-option>
              <el-option
                :label="'普通商品'"
                :value="1">
              </el-option>
              <el-option
                :label="'团购商品'"
                :value="2">
              </el-option>
              <el-option
                :label="'续课商品'"
                :value="3">
              </el-option>
              <el-option
                :label="'优惠券商品'"
                :value="4">
              </el-option>
               <el-option
                :label="'实物商品'"
                :value="5">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程">
            <el-select v-model="searchFrom.course_id" placeholder="请选择" @change="getUser">
              <el-option value="" label="请选择"></el-option>
              <el-option
                v-for="(data,index) in classList"
                :key="index"
                :label="data.title"
                :value="data.id">
              </el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="课程类别">
        <el-select v-model="searchFrom.course_type" placeholder="请选择" @change="getUser" clearable>
          <el-option v-for="item in classType" :key="item.course_type" :label="item.value" :value="item.course_type">
          </el-option>
        </el-select>
      </el-form-item>
          <el-form-item label="商品现价/团购价" label-width="120px">
            <el-input-number v-model="searchFrom.current_price"></el-input-number>
          </el-form-item>
      <el-form-item>
        <div class="search-btn-block">
          <el-button type="primary" plain @click="getUser" icon="el-icon-search">搜索</el-button>
        </div>
      </el-form-item>

    </el-form>
    <div class="new-block">
      <el-button type="success" plain @click="add" v-if="!$store.state.readonly">添加商品</el-button>
    </div>
    <el-tabs v-model="searchFrom.status" type="card" style="background: white;padding-top: 10px" @tab-click="getUser">
      <el-tab-pane label="上架" name="1"></el-tab-pane>
      <el-tab-pane label="编辑中" name="0"></el-tab-pane>
      <el-tab-pane label="下架" name="2"></el-tab-pane>
      <el-tab-pane label="全部" name="-1"></el-tab-pane>
    </el-tabs>
    <el-table
      :data="userList"
      style="width: 100%"  fixed>
      <el-table-column
        prop="id"
        label="商品编号" width="80">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称">
        <template slot-scope="scope">
          <router-link :to="{name:'periods', query: { goods_id: scope.row.id}}" >
            {{scope.row.name}}
          </router-link>
        </template>
      </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.original_price/100}}元
        </template>
      </el-table-column>
      <el-table-column
        label="商品现价/团购价">
        <template slot-scope="scope">
          {{scope.row.current_price/100}}元
        </template>
      </el-table-column>
      <el-table-column
        prop="course_title"
        label="课程名称">
      </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
        prop="buy_nums"
        label="商品购买数量">
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          {{scope.row.status | goodsStatus}}
        </template>
      </el-table-column>
      <el-table-column
        label="备注">
        <template slot-scope="scope">
          {{scope.row.desc | goodsDesc}}
        </template>
      </el-table-column>
      <el-table-column   fixed="right"
        width="60"
        label="操作">
        <template slot-scope="scope">
          <el-popover
            placement="top"
            width="800">
            <div style="text-align: center">
              <el-button size="mini" plain type="primary" @click="detail(scope.row)">
                查看详情
              </el-button>
              <el-button size="mini" plain @click="copyUrl(scope.row.id)">
                复制链接
              </el-button>
              <template v-if="!$store.state.readonly">
                <el-button v-if="scope.row.status === 2 || scope.row.status === 0" size="mini" plain type="primary" @click="onUp(scope.row)">
                  上架
                </el-button>
                <el-button size="mini"  v-if="scope.row.status === 1" 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="success" @click="copyShop(scope.row)">
                  复制商品
                </el-button>
                <el-button size="mini" plain v-if="scope.row.status === 2" @click="bindOther(scope.row)">
                  绑定商品
                </el-button>
                <el-button size="mini" plain @click="conflict(scope.row)">
                  冲突商品
                </el-button>
                <el-button size="mini" plain type="success" @click="addComment(scope.row)">
                  编辑备注
                </el-button>
                <el-button size="mini" plain type="primary" @click="updateGoodsNumber(scope.row)">
                  修改购买数量
                </el-button>
                <el-button size="mini" plain type="danger" @click="onDel(scope.row)" v-if="$store.state.deletePermission">
                  删除
                </el-button>
              </template>
            </div>
            <el-button slot="reference" size="mini" type="text" >操作</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getUser"/>
    <el-dialog
      :title="chooseDialog.title"
      :visible.sync="chooseDialog.show"
      width="30%">
      <el-form ref="form" label-width="80px">
        <el-form-item label="绑定商品" v-if="chooseDialog.type === 0">
          <el-select v-model="chooseDialog.form.value" placeholder="请选择" style="width: 100%">
            <el-option v-for="data in userList"
              :key="data.id"
              :label="`【${data.id}】${data.name}`"
              :value="data.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="冲突商品" v-if="chooseDialog.type === 1">
          <el-select v-model="chooseDialog.form.list" placeholder="请选择" multiple style="width: 100%">
            <el-option v-for="data in userList"
                       :key="data.id"
                       :label="`【${data.id}】${data.name}`"
                       :value="data.id.toString()">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chooseDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="dialogSub()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getGoodsListApi,deleteGoodsApi,downGoodsApi,upGoodsApi,bindOtherApi,conflictApi,copyShopApi,getLessonApi,editGoodsDescApi,updateGoodsNumbeApi} 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:'',
          goods_type: '',
          status: '1',
          course_id: '',
          course_type:"",
        },
        classType:[
          {
          course_type: 0,
          value: "月课"
        },
        {
          course_type: 1,
          value: "日课"
        }
        ],
        userList:[],
        total:0,
        nowPage:1,
        limit: 10,
        chooseDialog:{
          show:false,
          title:'',
          id:'',
          form:{
            value:'',
            list:[],
          },
          type:0
        },
        dialogObj:{
          type:0,
          show:false,
          title:'',
          id:''
        },
        classList: []
      }
    },
    components:{
      page,
      dialogCom
    },
    filters:{
      isOrNot(value){
        return ISORNOT[value]
      },
      goodsType(value){
        return GOODSTYPE[value]
      },
      lessonType(value){
        return LESSONTYPE[value]
      },
      goodsStatus(value){
        return GOODSSTATUS[value]
      },
      goodsDesc(value){
        let _desc = JSON.parse(value)
        return _desc.desc
      }
    },
    mounted(){
      this.getUser();
      this.getClassList();
    },
    methods:{
      onPageChange(val){
        this.nowPage = val;
        this.getUser()
      },
      onSizeChange(val){
        this.limit = val;
        this.nowPage = 1;
        this.getUser()
      },
      copyShop(data){
        this.$confirm('此操作将复制该商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          copyShopApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '复制成功!'
            });
          });
          this.getUser()
        });
      },
      copyUrl(data){
        let url = `${process.env.INVITE_URL}#/buyDetail?shopId=${data}`;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '已成功复制到剪切板',
          type: 'success'
        });
        oInput.remove()
      },
      dialogSub(){
        switch (this.chooseDialog.type) {
          case 0:
            bindOtherApi(this.chooseDialog.id,this.chooseDialog.form.value).then(res=>{
              this.$message({
                message: '绑定成功',
                type: 'success'
              });
              this.chooseDialog.show = false
            });
            this.getUser();
            break;
          case 1:
            let json = {
              conflict_goods_ids:this.chooseDialog.form.list.toString()
            };
            conflictApi(this.chooseDialog.id,json).then(res=>{
              this.$message({
                message: '设置成功',
                type: 'success'
              });
              this.chooseDialog.show = false;
              this.getUser();
            })
        }
      },
      getUser(){
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        if (this.searchFrom.name) {
            json.name = this.searchFrom.name
        }
        if (this.searchFrom.goods_type){
            json.goods_type = this.searchFrom.goods_type
        }
        if (this.searchFrom.course_id) {
          json.course_id = this.searchFrom.course_id
        }
        if (this.searchFrom.status && this.searchFrom.status !== '-1') {
          json.status = this.searchFrom.status
        }
        if (this.searchFrom.current_price) {
          json.current_price = this.searchFrom.current_price * 100
        }
          json.course_type = this.searchFrom.course_type
        getGoodsListApi(json).then(res=>{
          res.list.forEach(i=>{
            if(i.conflict_goods_ids === ''){
              i.conflict_goods_ids=[]
            }else{
              i.conflict_goods_ids=i.conflict_goods_ids.split(',')
            }
          });
          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 = 2;
        this.dialogObj.title = '查看商品'
        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
      },
      bindOther(data){
        this.chooseDialog = {
          show:true,
          title:'绑定商品',
          id:data.id,
          form:{
            value:data.bind_goods_id,
            list:[],
          },
          type:0
        }
      },
      conflict(data){
        this.chooseDialog = {
          show:true,
          title:'冲突商品',
          id:data.id,
          form:{
            value:'',
            list:data.conflict_goods_ids
          },
          type:1
        }
      },
      getClassList(){
        let json = {
          limit: 200,
          page: 1
        }
        getLessonApi(json).then(res=>{
          this.classList = res.list;
        })
      },
      addComment(row){
        let _descJson = JSON.parse(row.desc) || {}
        this.$prompt('', '编辑备注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType:'textarea',
          inputValue: _descJson.desc || ''
        }).then(({ value }) => {
          editGoodsDescApi(row.id,{desc: value}).then(res=>{
            this.$message({
              type: 'success',
              message: '编辑备注成功'
            });
            this.getUser()
          });
        })
      },
      updateGoodsNumber(row){
        this.$prompt('', '修改商品购买数量', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType:'number',
          inputValue: row.buy_nums || 0
        }).then(({ value }) => {
          updateGoodsNumbeApi(row.id,{buy_nums: parseInt(value)}).then(res=>{
            this.$message({
              type: 'success',
              message: '修改商品购买数量成功'
            });
            this.getUser()
          });
        })
      }
    }
  }
</script>

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