|
@@ -0,0 +1,455 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ title="选择商品"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="80%"
|
|
|
+ :before-close="handleClose"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-tabs v-model="queryParams.spuType" @tab-click="handleQuery">
|
|
|
+ <el-tab-pane label="批发商品" name="2"></el-tab-pane>
|
|
|
+ <el-tab-pane label="秒送商品" name="3"></el-tab-pane>
|
|
|
+ <el-tab-pane label="福利商品" name="4"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ label-width="120px"
|
|
|
+ >
|
|
|
+ <el-form-item label="商品名称" prop="spuName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.spuName"
|
|
|
+ placeholder="请输入商品名称"
|
|
|
+ clearable
|
|
|
+ style="width: 240px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商品分类" prop="categoryId">
|
|
|
+ <el-cascader
|
|
|
+ v-model="queryParams.categoryId"
|
|
|
+ ref="formCascader"
|
|
|
+ placeholder="请选择分类"
|
|
|
+ :props="categoryprops"
|
|
|
+ style="width: 240px"
|
|
|
+ @change="cascaderChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="店铺分类" prop="merchantClassifyId">
|
|
|
+ <el-cascader
|
|
|
+ v-model="queryParams.merchantClassifyId"
|
|
|
+ ref="formCascader"
|
|
|
+ placeholder="请选择分类"
|
|
|
+ :props="categorypropsmerchant"
|
|
|
+ style="width: 240px"
|
|
|
+ @change="cascadermerchantChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="商品状态" prop="spuStatus">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.spuStatus"
|
|
|
+ placeholder="请选择商品状态"
|
|
|
+ style="width: 240px"
|
|
|
+ >
|
|
|
+ <el-option label="全部" value=""> </el-option>
|
|
|
+ <el-option label="售罄" value="2"> </el-option>
|
|
|
+ <el-option label="上架" value="0"> </el-option>
|
|
|
+ <el-option label="下架" value="1"> </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ label="销售方式"
|
|
|
+ prop="saleModel"
|
|
|
+ v-if="queryParams.spuType == 0"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.saleModel"
|
|
|
+ placeholder="请选择销售方式"
|
|
|
+ style="width: 240px"
|
|
|
+ >
|
|
|
+ <el-option label="全部" value=""> </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="销售方式"
|
|
|
+ prop="saleModel"
|
|
|
+ v-if="queryParams.spuType == 1"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.saleModel"
|
|
|
+ placeholder="请选择销售方式"
|
|
|
+ style="width: 240px"
|
|
|
+ >
|
|
|
+ <el-option label="全部" value=""> </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="奖励设置" prop="isShare">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.isShare"
|
|
|
+ placeholder="请选择奖励设置"
|
|
|
+ style="width: 240px"
|
|
|
+ >
|
|
|
+ <el-option label="全部" value=""> </el-option>
|
|
|
+ <el-option label="未设置" value="0"> 未设置</el-option>
|
|
|
+ <el-option label="已设置" value="1"> 已设置</el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="tableList"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ row-key="id"
|
|
|
+ >
|
|
|
+ <!-- shareRate -->
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="55"
|
|
|
+ align="center"
|
|
|
+ :selectable="checkSelectable"
|
|
|
+ />
|
|
|
+ <el-table-column label="商品图片" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image
|
|
|
+ style="width: 60px; height: 60px"
|
|
|
+ :src="scope.row.pic"
|
|
|
+ :preview-src-list="[scope.row.pic]"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="商品名称"
|
|
|
+ align="center"
|
|
|
+ prop="spuName"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ />
|
|
|
+ <el-table-column label="分类" align="center" prop="categoryName" />
|
|
|
+ <el-table-column
|
|
|
+ label="店铺所属分类"
|
|
|
+ align="center"
|
|
|
+ prop="merchantClassifyName"
|
|
|
+ />
|
|
|
+ <el-table-column label="价格" align="center" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.lowestPrice.toFixed(2) }}/{{ scope.row.unit }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="起批量" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.lowestPurchase }}{{ scope.row.unit }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="预计库存" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.totalPredictStocks ? scope.row.totalPredictStocks : 0
|
|
|
+ }}{{ scope.row.unit }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="实际库存" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.totalStocks }}{{ scope.row.unit }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="实际销量" align="center" prop="salesVolume">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="销售方式"
|
|
|
+ align="center"
|
|
|
+ v-if="queryParams.spuType == 0"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>
|
|
|
+ {{
|
|
|
+ scope.row.saleModel == 1
|
|
|
+ ? "普通商品"
|
|
|
+ : scope.row.saleModel == 2
|
|
|
+ ? "采集预售"
|
|
|
+ : scope.row.saleModel == 3
|
|
|
+ ? "团批秒杀"
|
|
|
+ : scope.row.saleModel == 4
|
|
|
+ ? "清库专区"
|
|
|
+ : scope.row.saleModel == 5
|
|
|
+ ? "新店福利"
|
|
|
+ : ""
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="销售方式"
|
|
|
+ align="center"
|
|
|
+ v-if="queryParams.spuType == 1"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>
|
|
|
+ {{
|
|
|
+ scope.row.saleModel == 1
|
|
|
+ ? "普通商品"
|
|
|
+ : scope.row.saleModel == 2
|
|
|
+ ? "预售"
|
|
|
+ : scope.row.saleModel == 3
|
|
|
+ ? "团购秒杀"
|
|
|
+ : scope.row.saleModel == 4
|
|
|
+ ? "特价"
|
|
|
+ : scope.row.saleModel == 5
|
|
|
+ ? "新人福利"
|
|
|
+ : ""
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="商品状态" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{
|
|
|
+ scope.row.spuStatus == 2
|
|
|
+ ? "售罄"
|
|
|
+ : scope.row.spuStatus == 0
|
|
|
+ ? "上架"
|
|
|
+ : scope.row.spuStatus == 1
|
|
|
+ ? "下架"
|
|
|
+ : ""
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="奖励设置" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{
|
|
|
+ scope.row.isShare == 0
|
|
|
+ ? "未设置"
|
|
|
+ : scope.row.shareRate
|
|
|
+ ? scope.row.shareRate + "%"
|
|
|
+ : ""
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNo"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogSubmit">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getMerchantClassifyList } from "@/api/sort/index.js";
|
|
|
+import { getGoodsListPage } from "@/api/manage/product";
|
|
|
+import { getClassificationListPage } from "@/api/common/index";
|
|
|
+export default {
|
|
|
+ props: ["isShare"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ queryParams: {
|
|
|
+ saleModel: "",
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 5,
|
|
|
+ spuName: "",
|
|
|
+ categoryId: "",
|
|
|
+ spuStatus: "",
|
|
|
+ saleType: "",
|
|
|
+ scope: "",
|
|
|
+ benefitType: "",
|
|
|
+ isShare: "",
|
|
|
+ spuType: '2',
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ loading: false,
|
|
|
+ tableList: [],
|
|
|
+ categoryprops: {
|
|
|
+ checkStrictly: true,
|
|
|
+ lazy: true,
|
|
|
+ lazyLoad: this.categoryLazyLoad,
|
|
|
+ },
|
|
|
+ categorypropsmerchant: {
|
|
|
+ checkStrictly: true,
|
|
|
+ lazy: true,
|
|
|
+ lazyLoad: this.categoryLazyLoadmerchant,
|
|
|
+ },
|
|
|
+ multipleSelection: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checkSelectable(row, index) {
|
|
|
+ return row.returnVoucherRatio <= 0;
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.multipleSelection = val;
|
|
|
+ },
|
|
|
+ dialogSubmit() {
|
|
|
+ this.multipleSelection = this.multipleSelection.map((item) => {
|
|
|
+ // 为每个对象添加新字段
|
|
|
+ return { ...item, spuType: this.queryParams.spuType };
|
|
|
+ });
|
|
|
+ this.$emit("productDialogInfo", this.multipleSelection);
|
|
|
+ this.handleClose();
|
|
|
+ },
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ handleQuery() {
|
|
|
+ if (this.queryParams.spuType == 2) {
|
|
|
+ this.queryParams.benefitType = 1;
|
|
|
+ } else {
|
|
|
+ this.queryParams.benefitType = "";
|
|
|
+ }
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 查询参数列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ getGoodsListPage(this.queryParams).then((res) => {
|
|
|
+ this.tableList = res.data.records;
|
|
|
+ this.total = res.data.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+ openDialog() {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ cascaderChange(val) {
|
|
|
+ if (val.length == 1) {
|
|
|
+ this.queryParams.categoryId = val[0];
|
|
|
+ } else if (val.length == 2) {
|
|
|
+ this.queryParams.categoryId = val[1];
|
|
|
+ } else if (val.length == 3) {
|
|
|
+ this.queryParams.categoryId = val[2];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ categoryLazyLoad(node, resolve) {
|
|
|
+ let level = node.level;
|
|
|
+ if (!node.data) {
|
|
|
+ getClassificationListPage({ parentId: 0 }).then((res) => {
|
|
|
+ //接口
|
|
|
+ const nodes = Array.from(res.data).map((item, index) => ({
|
|
|
+ value: item.id,
|
|
|
+ label: `${item.className}`,
|
|
|
+ leaf: level >= 2,
|
|
|
+ }));
|
|
|
+ resolve(nodes);
|
|
|
+ });
|
|
|
+ } else if (level == 1) {
|
|
|
+ getClassificationListPage({ parentId: node.data.value }).then((res) => {
|
|
|
+ const nodes = Array.from(res.data).map((item) => ({
|
|
|
+ value: item.id,
|
|
|
+ label: `${item.className}`,
|
|
|
+ leaf: level >= 2,
|
|
|
+ // level: 2,
|
|
|
+ }));
|
|
|
+ resolve(nodes);
|
|
|
+ });
|
|
|
+ } else if (level == 2) {
|
|
|
+ getClassificationListPage({ parentId: node.data.value }).then((res) => {
|
|
|
+ const nodes = Array.from(res.data).map((item) => ({
|
|
|
+ value: item.id,
|
|
|
+ label: `${item.className}`,
|
|
|
+ leaf: level >= 1,
|
|
|
+ level: 1,
|
|
|
+ }));
|
|
|
+ resolve(nodes);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ resolve({});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cascadermerchantChange(val) {
|
|
|
+ if (val.length == 1) {
|
|
|
+ this.queryParams.merchantClassifyId = val[0];
|
|
|
+ } else if (val.length == 2) {
|
|
|
+ this.queryParams.merchantClassifyId = val[1];
|
|
|
+ } else if (val.length == 3) {
|
|
|
+ this.queryParams.merchantClassifyId = val[2];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ categoryLazyLoadmerchant(node, resolve, sortType) {
|
|
|
+ let params = {
|
|
|
+ classifyType: 1,
|
|
|
+ };
|
|
|
+ if (sortType) {
|
|
|
+ params.isDefault = 1;
|
|
|
+ }
|
|
|
+ let level = node.level;
|
|
|
+ if (!node.data) {
|
|
|
+ getMerchantClassifyList(params).then((res) => {
|
|
|
+ //接口
|
|
|
+ const nodes = Array.from(res.data).map((item, index) => ({
|
|
|
+ value: item.id,
|
|
|
+ label: `${item.classifyName}`,
|
|
|
+ leaf: level >= 2,
|
|
|
+ }));
|
|
|
+ // 通过调用resolve将子节点数据返回,通知组件数据加载完成
|
|
|
+ resolve(nodes);
|
|
|
+ });
|
|
|
+ } else if (level == 1) {
|
|
|
+ getMerchantClassifyList({
|
|
|
+ parentId: node.data.value,
|
|
|
+ classifyType: 1,
|
|
|
+ }).then((res) => {
|
|
|
+ const nodes = Array.from(res.data).map((item) => ({
|
|
|
+ value: item.id,
|
|
|
+ label: `${item.classifyName}`,
|
|
|
+ leaf: level >= 2,
|
|
|
+ // level: 2,
|
|
|
+ }));
|
|
|
+ // 通过调用resolve将子节点数据返回,通知组件数据加载完成
|
|
|
+ resolve(nodes);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ resolve({});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.el-cascader-panel
|
|
|
+ > .el-scrollbar:first-child
|
|
|
+ > .el-cascader-menu__wrap
|
|
|
+ > .el-cascader-menu__list
|
|
|
+ > .el-cascader-node
|
|
|
+ > .el-radio {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+</style>
|