channels_web/src/pages/goods/index.vue

<template>
  <div class="wrapper">
    <el-tabs v-model="searchForm.type" @tab-click="handleClick">
      <el-tab-pane :label="'上架('+type1Count+')'" name="1"></el-tab-pane>
      <el-tab-pane :label="'下架('+type2Count+')'" name="2"></el-tab-pane>
      <el-tab-pane :label="'审核列表('+type3Count+')'" name="3"></el-tab-pane>
    </el-tabs>
    <div class="serach flex row space-between">
      <el-button class="blackbtn" icon="el-icon-plus" @click="addGoods">新增商品</el-button>
      <div class="flex row">
        <el-input v-model="searchForm.searchName" placeholder="请输入商品名称/ID" clearable></el-input>
        <el-button class="btn_search blackbtn" icon="el-icon-search" @click="search">查询</el-button>
      </div>
    </div>
    <e-table class="table" ref="eTable" :tableHeadConfig="tableHeadConfig" :tableLoadData="tableLoadData"
      :pageShow="true" :total="searchForm.total" :currentPage="searchForm.page" :pageSize="searchForm.pageSize"
      @getPageList="getPageList" @changeSort="changeSort">
      <template v-slot:operation="slotData">
        <div class="operationDiv">
          <el-button type="text" @click="toEdit(slotData.data.row)" v-if="searchForm.type!='3'">
            {{searchForm.type=='1'?'下架':'上架'}}</el-button>
          <el-button type="text" @click="toView(slotData.data.row)">查看</el-button>
          <el-button type="text" @click="copy(slotData.data.row)">复制</el-button>
        </div>
      </template>
    </e-table>
  </div>
</template>

<script>
  import eTable from '@/components/base-table'
  import {
    list,
    changeStatus,
    getCountByType,
    detail,
    authDetail
  } from '@/api/goods'
  import store from '@/store/index'
  export default {
    name: "goods",
    components: {
      eTable
    },
    data() {
      return {
        type1Count: 0,
        type2Count: 0,
        type3Count: 0,
        searchForm: {
          searchName: '',
          total: 0,
          page: 1,
          pageSize: 10,
          type: '1',
          sortField: '',
          sortOrder: ''
        },
        tableHeadConfig: [{
            label: '商品名称',
            prop: 'title',
            isShow: true,
          },
          {
            label: '商品ID',
            prop: 'out_product_id',
            isShow: true,
          },
          {
            label: '价格',
            prop: 'sale_price',
            isShow: true,
            sortable: true,
            width: 120,
          },
          {
            label: '库存',
            prop: 'stock_num',
            isShow: true,
            sortable: true,
            width: 120,
          },
          {
            label: '审核状态',
            prop: 'status_name',
            isShow: true,
          },
          {
            label: '创建时间',
            prop: 'create_time',
            isShow: true,
            sortable: true
          },
          {
            label: '上架时间',
            prop: 'stand_down_time',
            isShow: true,
          },
          {
            label: '操作',
            columnType: 'operation',
            slotName: 'operation',
            width: 200,
            isShow: true,
          }
        ],
        tableLoadData: [],
      };
    },
    created() {},
    methods: {
      getPageList(pageRequest) {
        if (pageRequest) {
          this.searchForm.page = pageRequest.pageIndex;
          this.searchForm.pageSize = pageRequest.pageSize;
          this.searchForm.sortField=''
          this.searchForm.sortOrder =''
          if(pageRequest.order){
              this.searchForm.sortField = pageRequest.sort;
              this.searchForm.sortOrder = pageRequest.order
          }
        }
        list(this.searchForm).then(res => {
          this.searchForm.total = res.data.totalCount
          this.tableLoadData = res.data.list
        })
        this.getCount()
      },
      addGoods() { // 新增商品
        this.$router.push({
          name: "addGoods",
          params: {
            isNew:true
          }
        });
      },
      handleClick(tab, event) {
        if(this.searchForm.type==1){
          this.tableHeadConfig[6].isShow=true
          this.tableHeadConfig[6].label='上架时间'
        }else if(this.searchForm.type==2){
          this.tableHeadConfig[6].isShow=true
          this.tableHeadConfig[6].label='下架时间'
        }else{
           this.tableHeadConfig[6].isShow=false
        }
        this.searchForm.searchName = ''
        this.searchForm.page = 1
        this.getPageList()
      },
      copy(row) {
        if(this.searchForm.type==1 || this.searchForm.type==2){
          detail({outProductId: row.out_product_id}).then(res => {
            this.copyToAdd(res)
          })
        }else{
          authDetail({outProductId: row.out_product_id}).then(res => {
            this.copyToAdd(res)
          })
        }
      },
      copyToAdd(res) {
        let params = {}
            params.commodity_id = res.data.commodity_id
            params.title = res.data.title
            params.out_product_id = res.data?.auditInfo?.out_product_id
            params.brand_id=res.data.has_brand==0?'-1':res.data.has_brand
            params.third=res.data.third_cat_audit==0?res.data.third_cat_id:''
            params.stock_num = res.data.stock_num
            params.sale_price = res.data.sale_price
            params.market_price = res.data.market_price
            params.path = res.data.path
            params.third_cat_id =res.data.third_cat_audit==0?'-1':res.data.third_cat_id
            params.goodsList = [{url: res.data.thumb_img}]
            params.goodszizhiList = []
            if (res.data.qualificationImgs.length > 0) {
                  res.data.qualificationImgs.forEach(element => {
                    params.goodszizhiList.push({
                      url: element
                      })
                  });
            }
            this.$router.push({
            name: "addGoods",
            params: {
              isNew: true,
              data:JSON.stringify(params)
            }
        });
      },
      toView(row) {
        this.$router.push({
          name: "goodsDetail",
          params: {
            outProductId: row.out_product_id
          }
        });
      },
      toEdit(row) {
        this.$confirm('确定' + (this.searchForm.type == '1' ? '下架？' : '上架？'), '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          changeStatus({
            commodityId: row.commodity_id,
            editStatus: this.searchForm.type == '1' ? 11 : 5
          }).then(res => {
            this.$message.success((this.searchForm.type == '1' ? '下架' : '上架') + '成功');
            this.searchForm.searchName = ''
            this.searchForm.page = 1
            this.getPageList()
          })
        }).catch(() => {});

      },
      search() {
        this.searchForm.page = 1
        this.getPageList()
      },
      getCount() {
        getCountByType().then(res => {
          res.data.forEach(element => {
            if (element.type == 1) {
              this.type1Count = element.count
            }
            if (element.type == 2) {
              this.type2Count = element.count
            }
            if (element.type == 3) {
              this.type3Count = element.count
            }
          });
        })
      },
      initPage(){
        if(this.$route.params.checking){
          this.searchForm.type='3'
          this.getPageList()
        }
      }
    },
    activated() {
      this.getPageList()
      this.initPage()
    },
    mounted() {
    }
  };
</script>
<style lang="less" scoped>
.wrapper{
  .btn_search {
    width: 150px;
    margin-left: 10px;
  }
  .serach {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>