mp-ui-pc/src/views/business/goods/index.vue

<template>
  <div class="app-container coupon-list">
    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" :inline="true" size="small">
      <el-form-item label="商品名称" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入商品名称"
          clearable
          @clear="queryParams.pageNum = 1;getList()"
          @keyup.enter.native="queryParams.pageNum = 1;getList()"
        />
      </el-form-item>
      <el-form-item label="商品ID" prop="goodsId">
        <el-input
          v-model="queryParams.goodsId"
          placeholder="请输入商品ID"
          clearable
          @clear="queryParams.pageNum = 1;getList()"
          @keyup.enter.native="queryParams.pageNum = 1;getList()"
        />
      </el-form-item>
      <el-form-item label="商品类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择商品类型" clearable
                   @change="queryParams.pageNum = 1;getList()">
          <el-option label="全部" value=""/>
          <el-option label="实物商品" value="1"/>
          <el-option label="卡密商品" value="2"/>
          <el-option label="采购商品" value="3"/>
        </el-select>
      </el-form-item>
      <el-form-item label="商品分类" prop="categoryIdList">
        <el-cascader
          v-model="queryParams.categoryIdList" collapse-tags clearable
          :options="goodsCategoryItemsList"
          :props="{ expandTrigger: 'hover', value: 'categoryId',label: 'name', children: 'goodsCategoryList', multiple: true, }"
          @change="queryParams.pageNum = 1;getList()"></el-cascader>
      </el-form-item>
      <el-form-item label="商品标签" prop="tagId">
        <el-select
          v-model="queryParams.tagId"
          placeholder="请选择商品标签"
          clearable
          @change="queryParams.pageNum = 1;getList()"
        >
          <el-option :label="item.name" :value="item.tagId" v-for="(item, index) in goodsTagItemsList" :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="上架状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择商品状态" clearable
                   @change="queryParams.pageNum = 1;getList()">
          <el-option label="全部" value=""/>
          <el-option label="待上架" value="init"/>
          <el-option label="已上架" value="on"/>
          <el-option label="已下架" value="off"/>
        </el-select>
      </el-form-item>
      <el-form-item label="是否支持兑换" prop="exchangeShow">
        <el-select v-model="queryParams.exchangeShow" placeholder="请选择是否支持兑换" clearable
                   @change="queryParams.pageNum = 1;getList()">
          <el-option label="全部" value=""/>
          <el-option label="支持兑换" value="1"/>
          <el-option label="不支持兑换" value="0"/>
          <el-option label="盲票商品" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="supplierId">
        <el-select v-model="queryParams.supplierId" placeholder="请选择供应商" filterable clearable
                   @clear="queryParams.pageNum = 1;getList()" @change="queryParams.pageNum = 1;getList()">
          <el-option :label="item.name" :value="item.id" v-for="(item, index) in SupplierList" :key="index"/>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="商品成本" prop="minCost">
        <el-input v-model="queryParams.minCost" placeholder="最低成本" clearable
                  @keyup.enter.native="queryParams.pageNum = 1;getList()"/>
      </el-form-item>
      <el-form-item label="-" prop="maxCost">
        <el-input v-model="queryParams.maxCost" placeholder="最高成本" clearable
                  @keyup.enter.native="queryParams.pageNum = 1;getList()"/>
      </el-form-item>
      <el-form-item label="价格" prop="minValue">
        <el-input v-model="queryParams.minValue" placeholder="最低价格" clearable
                  @keyup.enter.native="queryParams.pageNum = 1;getList()"/>
      </el-form-item>
      <el-form-item label="-" prop="maxValue">
        <el-input v-model="queryParams.maxValue" placeholder="最高价格" clearable
                  @keyup.enter.native="queryParams.pageNum = 1;getList()"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="queryParams.pageNum = 1;getList()">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermi="['business:goods:add']" type="primary" icon="el-icon-plus" size="mini"
                   @click="$router.push({ name: 'GoodsAdd' })">添加商品
        </el-button>
        <!-- <el-button v-hasPermi="['business:goods:on']" type="primary" plain size="mini">上架</el-button> -->
        <!-- <el-button v-hasPermi="['business:goods:off']" type="primary" plain size="mini">下架</el-button> -->
        <!-- <el-button v-hasPermi="['business:goods:remove']" type="danger" plain size="mini">删除</el-button> -->
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="infor"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleOrderExport"
          v-hasPermi="['business:goods:export']"
        >导出商品
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="tableData" @sort-change="sortChannelId">
      <el-table-column label="商品ID" prop="goodsId" width="60"/>
      <el-table-column label="商品图片" prop="picUrl" align="center">
        <template slot-scope="{row}">
          <div v-if="row.picUrl">
            <el-image
              style="width: 100px; height: 100px"
              :src="IMG_URL + row.picUrl.split(',')[0]"
              :preview-src-list="row.picUrl.split(',').map(item => { return IMG_URL + item })"
            />
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="title"/>
      <el-table-column label="价格" prop="value" sortable="custom">
        <template slot-scope="{row}">
          ¥{{ $numberFormat(row.value) }}
        </template>
      </el-table-column>
      <el-table-column label="商品成本" prop="cost" sortable="custom" min-width="100px">
        <template slot-scope="{row}">
          ¥{{ $numberFormat(row.cost) }}
        </template>
      </el-table-column>
      <el-table-column label="是否支持兑换" prop="exchangeShow" min-width="100px">
        <template slot-scope="{row}">
          <span v-if="row.exchangeShow == '1'">支持</span>
          <span v-if="row.exchangeShow == '0'">不支持</span>
          <span v-if="row.exchangeShow == '2'">盲票商品</span>
        </template>
      </el-table-column>
      <el-table-column label="商品类型" prop="type" min-width="100px">
        <template slot-scope="{row}">
          <span v-if="row.type == '1'">实物商品</span>
          <span v-if="row.type == '2'">卡密商品</span>
          <span v-if="row.type == '3'">采购商品</span>
        </template>
      </el-table-column>
      <el-table-column label="盲豆兑换数量" prop="exchangePrice" sortable="custom" min-width="125"/>
      <el-table-column label="销量" prop="exchangedQty" sortable="custom"/>
      <el-table-column label="库存" prop="quantity" sortable="custom"/>
      <el-table-column label="状态" prop="status">
        <template slot-scope="{row}">
          <el-tag :type="JSON.parse(row.status).value === 'on' ? 'success' : 'info'">{{
              JSON.parse(row.status).desc
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sortWeight" sortable="custom" align="center" width="140px">
        <template slot-scope="{row, $index}">
          <el-input-number v-model="row.sortWeight" @change="handleSortChange($index,row.sortWeight)"
                           controls-position="right" size="small"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="140">
        <template slot-scope="{row}">
          <el-button  v-hasPermi="['business:goods:edit']" type="text" @click="toAssociation(row.goodsId)">查看关联盲票</el-button>
          <!-- <el-button v-hasPermi="['business:goods:query']" type="text">查看</el-button> -->
          <el-button v-hasPermi="['business:goods:edit']" type="text" @click="handleCamilo(row.goodsId)" v-if="row.type === 2">
            查看卡密
          </el-button>
          <el-button v-hasPermi="['business:goods:edit']" type="text" @click="handleImport(row.goodsId)"
                     v-if="row.type === 2">添加卡密
          </el-button>
          <el-button v-hasPermi="['business:goods:edit']" type="text"
                     @click="$router.push({ name: 'GoodsEdit', query: { id: row.goodsId } })">编辑
          </el-button>
          <el-button v-if="JSON.parse(row.status).value === 'off' || JSON.parse(row.status).value === 'init'"
                     v-hasPermi="['business:goods:on']" type="text" @click="setStatus(row, 'on')">上架
          </el-button>
          <el-button v-if="JSON.parse(row.status).value === 'on'" v-hasPermi="['business:goods:off']" type="text"
                     @click="setStatus(row, 'off')">下架
          </el-button>
          <el-button v-if="JSON.parse(row.status).value === 'init'" v-hasPermi="['business:coupon:remove']" class="del"
                     type="text" @click="del(row)">删除
          </el-button>
          
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList()"/>
    <!--    查看卡密-->
    <camilo v-if="camiloShow" @cancel="cancel" :camiloShow="camiloShow" :camiloGoodsId="camiloGoodsId"></camilo>
    <!--    导入卡密-->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body :before-close="openSwitch">
      1.请下载Excel模版，填写卡密
      <br><br>
      &emsp;&emsp;<a style="color: #1890FF;" @click="downloadExcel">下载Excel模版</a>
      <br><br>
      2.上传填写好卡密的Excel
      <div style="padding-top: 20px; text-align: center">
        <el-upload
          ref="upload"
          :limit="1"
          :data="reqData"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          :http-request="reqUploadFile"
          :on-exceed="exceedMax"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip text-center" slot="tip">
            <span>仅允许导入 xls xlsx 格式文件。</span>
          </div>
        </el-upload>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="openSwitch()">取 消</el-button>
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
      </div>
    </el-dialog>
    <!--    查询关联盲票弹框-->
    <Association v-if="associationShow" @cancel="associationTicket" :associationShow="associationShow" :associationGoodsId="associationGoodsId"></Association>
  </div>
</template>
<script>

import Camilo from '@/components/Camilo'
import Association from '@/components/Association'
import {publicFileGetUrl} from "@/api/common"
import {
  getGoodsList,
  delGoods,
  setGoodsStatus,
  setTableData,
  salesiteGoodsExport,
  setCamiloShip, cradDownload
} from '@/api/business/goods'
import {goodsCategoryListTree} from '@/api/business/category'
import {goodsTagItems} from '@/api/business/tag'
import {accMul} from '@/utils/util'
import {getSupplierList} from '@/api/business/supplier'
import {randomStr20} from '@/utils/util'
import {getToken, getSign} from "@/utils/auth";

export default {
  name: 'List',
  components: {
    Camilo,
    Association
  },
  data() {
    return {
      IMG_URL: publicFileGetUrl,
      loading: false,
      showSearch: true,
      queryParams: {pageNum: 1, pageSize: 10, orderByColumn: '', isAsc: '',},
      tableData: [],
      total: 0,
      goodsCategoryItemsList: [],
      goodsTagItemsList: [],
      SupplierList: [],
      camiloShow: false,
      // 用户导入参数
      upload: {
        open: false,// 是否显示弹出层（用户导入）
        title: "",// 弹出层标题（用户导入）
        isUploading: false,// 是否禁用上传
        url: "",// 上传的地址
        headers: {},//请求头
      },
      reqData: {},
      camiloGoodsId: null,
      associationShow: false,
      associationGoodsId: '',
    }
  },
  created() {
    this.getList(true)
    this.getGoodsCategoryItems()
    this.getGoodsTagItems()
    this.getSupplierItems()
  },
  methods: {
    //获取供应商
    getSupplierItems() {
      getSupplierList('', {}).then(res => {
        this.SupplierList = res && res.rows
      })
    },

    //切换排序
    sortChannelId(row) {
      if (row) {
        let prop = row.prop == 'commRate' ? ('t1.' + row.prop) : row.prop;
        this.queryParams.orderByColumn = prop
        this.queryParams.isAsc = row.order == 'ascending' ? "asc" : "desc";
        this.getList()
      }
    },

    //步进器修改
    handleSortChange(index, sortWeight) {
      this.tableData[index].sortWeight = sortWeight
      let data = {
        goodsId: this.tableData[index].goodsId,
        sortWeight: this.tableData[index].sortWeight
      }
      setTableData(data)
    },

    //取消查看卡密
    cancel() {
      this.camiloShow = false
    },
    //下载excel模版表格
    downloadExcel() {
      cradDownload().then(response => {
        this.download(response.msg);
      })
    },
    //查看卡密
    handleCamilo(id){
      this.camiloGoodsId = id
      this.camiloShow = true
    },
    //查看关联盲票
    toAssociation(id) {
      this.associationShow = true
      this.associationGoodsId = id
      
    },
    //关闭关联盲票弹框
    associationTicket() {
      this.associationShow = false
      this.associationGoodsId = ''
    },
    //上传卡密按钮操作
    handleImport(id) {
      this.camiloGoodsId = id
      this.upload.title = "添加卡密";
      this.upload.open = true;
      this.getHttpHeader(id)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.getList();
    },
    // 超出限制时的提示
    exceedMax() {
      this.$message({
        message: '请移除已有文件后再进行上传',
        type: 'warning'
      })
    },
    openSwitch() {
      this.upload.open = false
      this.$refs.upload.clearFiles();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    //请求头
    getHttpHeader(id) {
      let timestamp = parseInt(new Date().getTime()),
        nonce = randomStr20();
      var sign = getSign(this.reqData || {}, timestamp)
      let url = process.env.VUE_APP_BASE_API + `/api/v1/mp/admin/goods/card/import/${id}` + '?sign=' + sign + '&nonce=' + nonce;
      this.upload.url = url
      var headers = {
        "Authorization": "Bearer " + getToken(),
        "x-zz-timestamp": timestamp
      }
      this.upload.headers = headers
    },

    // 自定义文件上传的实现
    reqUploadFile(param) {
      var data = this.reqData || {}
      var params = {
        file: param.file,
        ...data
      }
      this.vloading = this.$loading({
        lock: true,
        text: "正在导入卡密.....",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setCamiloShip(params, this.headers, this.camiloGoodsId).then(response => {
        this.vloading.close();
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$message({
          message: '导入成功',
          type: 'success'
        })
      }).catch(() => {
        this.$refs.upload.clearFiles();
        this.vloading.close();
      })
    },

    getGoodsCategoryItems() {
      goodsCategoryListTree("", {}).then(res => {
        this.goodsCategoryItemsList = res && res.rows
      })
    },

    getGoodsTagItems() {
      goodsTagItems({}).then(res => {
        this.goodsTagItemsList = res && res.data
      })
    },

    getList(reset) {
      if (this.loading) {
        return
      }
      this.loading = true
      // if (reset) {
      //   this.queryParams = { pageNum: 1, pageSize: 20, orderByColumn: '', isAsc: '', }
      // }
      if (this.queryParams.categoryIdList) {
        for (let i = 0; i < this.queryParams.categoryIdList.length; i++) {
          if (this.queryParams.categoryIdList[i][1]) {
            this.queryParams.categoryIdList[i] = this.queryParams.categoryIdList[i][1]
          }
        }
      }
      getGoodsList('pageNum=' + this.queryParams.pageNum + '&pageSize=' + this.queryParams.pageSize + '&orderByColumn=' + this.queryParams.orderByColumn + '&isAsc=' + this.queryParams.isAsc + '&', {
        title: this.queryParams.title,
        goodsId: this.queryParams.goodsId,
        type: this.queryParams.type ? Number(this.queryParams.type) : this.queryParams.type,
        categoryIdList: this.queryParams.categoryIdList,
        tagId: this.queryParams.tagId,
        status: this.queryParams.status,
        exchangeShow: this.queryParams.exchangeShow, supplierId: this.queryParams.supplierId,
        minCost: this.queryParams.minCost ? accMul(this.queryParams.minCost, 100) : this.queryParams.minCost,
        maxCost: this.queryParams.maxCost ? accMul(this.queryParams.maxCost, 100) : this.queryParams.maxCost,
        minValue: this.queryParams.minValue ? accMul(this.queryParams.minValue, 100) : this.queryParams.minValue,
        maxValue: this.queryParams.maxValue ? accMul(this.queryParams.maxValue, 100) : this.queryParams.maxValue
      }).then(res => {
        this.loading = false
        if (res.code === 0) {
          this.tableData = res.rows
          // this.tableData.map()
          this.total = res.total
        }
      }).catch(() => {
        this.loading = false
      })
    },

    // 重置
    resetQuery() {
      this.queryParams = {pageNum: 1, pageSize: 10, orderByColumn: '', isAsc: '',}
      this.getList();
    },

    setStatus(item, status) {
      this.$confirm(`确认${status === 'on' ? '上架' : '下架'}商品 “${item.title}” 吗？`, `${status === 'on' ? '上架' : '下架'}商品`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setGoodsStatus({
          goodsId: item.goodsId,
          status
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('操作已完成！')
            this.getList()
          }
        })
      })
    },

    // 导出商品
    handleOrderExport() {
      this.$confirm("是否确认导出商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.vloading = this.$loading({
            lock: true,
            text: "正在导出商品.....",
            background: "rgba(0, 0, 0, 0.7)",
          });
          return salesiteGoodsExport(this.queryParams);
        })
        .then((response) => {
          this.vloading.close();
          this.download(response.msg);
        })
        .catch(() => {
          this.vloading.close();
        });
    },

    del(item) {
      this.$confirm(`确认删除商品 “${item.title}” 吗？`, '删除商品', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delGoods(item.goodsId).then(res => {
          if (res.code === 0) {
            this.$message.success('操作已完成！')
            this.getList()
          }
        })
      })
    }
  }
}
</script>