jsk 商超

This commit is contained in:
skjia 2025-06-09 08:52:52 +08:00
parent 7e81bee3ba
commit d33855f05b
3 changed files with 680 additions and 172 deletions

View File

@ -69,7 +69,17 @@ export function deleteSupermarketApi(data) {
data: data
})
}
// 商品列表
export function shopPageListApi(data) {
return request({
url: '/smart-canteen/supermarket_product/list',
method: 'get',
headers: {
"merchant-id":"378915229716713472",
},
params: data
})
}

View File

@ -67,7 +67,11 @@
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleAddShoping(scope.row)"
>商品</el-button>
<el-button
size="mini"
type="text"
@ -143,24 +147,6 @@
<el-input v-model="baseForm.address" placeholder="请输入超市地址" maxlength="30" clearable/>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="用户类别" prop="userType">
<el-select v-model="baseForm.userType" style="width: 100%" clearable>
<el-option
v-for="dict in dict.type.sys_user_type"
:key="dict.value"
:label="dict.label"
:value="Number(dict.value)"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="配送费" prop="deliveryCost">
<el-input v-model="baseForm.deliveryCost" placeholder="请输入配送费" maxlength="30" clearable
@input="(v)=>(baseForm.deliveryCost=v.replace(/[^\d]/g,''))"/>
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="线上超市模式" prop="appSaleMode">
<el-select v-model="baseForm.appSaleMode" style="width: 100%" clearable>
@ -255,7 +241,333 @@
<el-dialog :visible.sync="dialogVisible" width="700px">
<img style="width: 100%;height: 100%;" :src="dialogImageUrl" alt="">
</el-dialog>
<el-dialog :title="titleProduct" :visible.sync="openProduct" width="1200px" append-to-body>
<div class="app-container" id="toolsType">
<el-row>
<el-form
:model="queryShopParams"
ref="queryShopForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="商品名称" prop="materialName">
<el-input
v-model="queryShopParams.materialName"
placeholder="请输入商品名称"
clearable maxlength="30"
style="width: 240px"
@keyup.enter.native="handleShopQuery"
/>
</el-form-item>
<el-form-item label="上架状态" prop="putawayState">
<el-select v-model="queryShopParams.putawayState" placeholder="请选择" style="width: 220px" >
<el-option v-for="item in putawayStates"
:key="item.putawayState"
:label="item.putawayStateName"
:value="item.putawayState"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="条码" prop="barCode">
<el-input
v-model="queryShopParams.barCode"
placeholder="请输入条码"
clearable maxlength="30"
style="width: 240px"
@keyup.enter.native="handleShopQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleShopQuery"
>查询</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetShopQuery"
>重置</el-button
>
</el-form-item>
</el-form>
</el-row>
<el-row :gutter="20">
<!--树数据-->
<el-col :span="5" :xs="24">
<div class="head-container">
商品类别
<el-input
v-model="keyShopWord"
placeholder="请输入关键字进行搜索"
clearable
maxlength="50"
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container" style>
<el-tree
style="height: 700px; overflow: scroll"
:data="treeShopOptions"
:props="defaultProps"
:show-checkbox="true"
:default-expand-all="true"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="typeTree"
node-key="materialTypeId"
highlight-current
@node-click="handleNodeClick"
@check-change="handleCheckChange"
>
<span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
<span v-if="isMousemoveId === data.id && node.label.length > 10">{{
node.label.slice(0, 10) + "..."
}}</span>
<span v-else>{{ node.label }}</span>
<span class="btn-items" v-if="isMousemoveId === data.id">
<el-button
type="text"
size="mini"
icon="el-icon-plus" v-if="data.level<1"
@click.stop="() => appendTreeNode(data)"
>
</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-edit-outline"
style="color: #67c23a"
v-if="data.id !== 0"
@click.stop="() => editTreeNode(data)"
>
</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-delete"
style="color: #f56c6c"
v-if="data.parentId != '0'"
@click.stop="() => removeTreeNode(data)"
>
</el-button>
</span>
</span>
</el-tree>
</div>
</el-col>
<!--用户数据-->
<el-col :span="19" :xs="24">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleShopAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
size="mini"
:disabled="multiple"
@click="handleShopBatchDel"
>批量删除</el-button>
</el-col>
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
</el-row>
<el-table v-loading="loading" :data="tableShopListData" height="550" ref="multipleTable" border :row-key="(row)=>{return row.materialId}" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
<el-table-column label="序号" align="center" width="80" type="index">
<template slot-scope="scope">
<span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="名称" align="center" key="materialName" prop="materialName" :show-overflow-tooltip="true" />
<el-table-column label="单位" align="center" key="unitName" prop="unitName" :show-overflow-tooltip="true" />
<el-table-column label="商品类别" align="center" key="materialTypeName" prop="materialTypeName" :show-overflow-tooltip="true" />
<el-table-column label="上架状态" align="center" key="putawayState" prop="putawayState" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ scope.row.putawayState==1 ? '上架' : '下架' }}</span>
<el-switch
v-model="scope.row.putawayState"
@change="handlePutawayStateChange(scope.row)">
</el-switch>
<span>{{ scope.row.putawayState==1 ? '上架' : '下架' }}</span>
</template>
</el-table-column>
<el-table-column label="线上销售" align="center" key="ifOnline" prop="ifOnline" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ scope.row.ifOnline==2 ? '否' : '是' }}</span>
<el-switch
v-model="scope.row.ifOnline"
@change="handleIfOnlineChange(scope.row)">
</el-switch>
<span>{{ scope.row.ifOnline==2 ? '否' : '是' }}</span>
</template>
</el-table-column>
<el-table-column label="零售价" align="center" key="salePrice" prop="salePrice" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ (scope.row.salePrice/100).toFixed(2)||"" }}</span>
</template>
</el-table-column>
<el-table-column label="会员价" align="center" key="prefPrice" prop="prefPrice" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ (scope.row.prefPrice/100).toFixed(2)||"" }}</span>
</template>
</el-table-column>
<el-table-column label="个人限购数量" align="center" key="personLimit" prop="personLimit" :show-overflow-tooltip="true" />
<el-table-column label="每日限购数量" align="center" key="oneDayLimit" prop="oneDayLimit" :show-overflow-tooltip="true" />
<el-table-column label="库存数" align="center" key="inventoryNum" prop="inventoryNum" :show-overflow-tooltip="true" />
<el-table-column label="条码" align="center" key="barCode" prop="barCode" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="100" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleShopUpdate(scope.row)"
>
编辑
</el-button>
<el-button
size="mini"
type="text" style="color: red;"
@click="handleShopDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
</div>
</el-dialog>
<el-dialog :title="titleAddProduct" :visible.sync="openAddProduct" width="1200px" append-to-body>
<div class="app-container" id="toolsType">
<el-row>
<el-form
:model="queryAddShopParams"
ref="queryShopForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="商品名称" prop="materialName">
<el-input
v-model="queryAddShopParams.materialName"
placeholder="请输入商品名称"
clearable maxlength="30"
style="width: 240px"
@keyup.enter.native="handleAddShopQuery"
/>
</el-form-item>
<el-form-item label="条码" prop="barCode">
<el-input
v-model="queryAddShopParams.barCode"
placeholder="请输入条码"
clearable maxlength="30"
style="width: 240px"
@keyup.enter.native="handleAddShopQuery"
/>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-refresh" size="mini" @click=""
>批量线上销售</el-button
>
</el-form-item>
</el-form>
</el-row>
<el-row>
<!--数据-->
<el-col :span="24" :xs="24">
<el-table v-loading="loading" :data="tableAddShopListData" height="550" ref="multipleTable" border :row-key="(row)=>{return row.materialId}" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
<el-table-column label="序号" align="center" width="80" type="index">
<template slot-scope="scope">
<span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="名称" align="center" key="materialName" prop="materialName" :show-overflow-tooltip="true" />
<el-table-column label="单位" align="center" key="unitName" prop="unitName" :show-overflow-tooltip="true" />
<el-table-column label="商品类别" align="center" key="materialTypeName" prop="materialTypeName" :show-overflow-tooltip="true" />
<el-table-column label="上架状态" align="center" key="putawayState" prop="putawayState" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ scope.row.putawayState==1 ? '上架' : '下架' }}</span>
<el-switch
v-model="scope.row.putawayState"
@change="handlePutawayStateChange(scope.row)">
</el-switch>
<span>{{ scope.row.putawayState==1 ? '上架' : '下架' }}</span>
</template>
</el-table-column>
<el-table-column label="线上销售" align="center" key="ifOnline" prop="ifOnline" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ scope.row.ifOnline==2 ? '否' : '是' }}</span>
<el-switch
v-model="scope.row.ifOnline"
@change="handleIfOnlineChange(scope.row)">
</el-switch>
<span>{{ scope.row.ifOnline==2 ? '否' : '是' }}</span>
</template>
</el-table-column>
<el-table-column label="零售价" align="center" key="salePrice" prop="salePrice" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ (scope.row.salePrice/100).toFixed(2)||"" }}</span>
</template>
</el-table-column>
<el-table-column label="会员价" align="center" key="prefPrice" prop="prefPrice" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ (scope.row.prefPrice/100).toFixed(2)||"" }}</span>
</template>
</el-table-column>
<el-table-column label="个人限购数量" align="center" key="personLimit" prop="personLimit" :show-overflow-tooltip="true" />
<el-table-column label="每日限购数量" align="center" key="oneDayLimit" prop="oneDayLimit" :show-overflow-tooltip="true" />
<el-table-column label="库存数" align="center" key="inventoryNum" prop="inventoryNum" :show-overflow-tooltip="true" />
<el-table-column label="条码" align="center" key="barCode" prop="barCode" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="100" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleShopUpdate(scope.row)"
>
编辑
</el-button>
<el-button
size="mini"
type="text" style="color: red;"
@click="handleShopDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
</div>
</el-dialog>
@ -265,11 +577,17 @@
<script>
import { systemAreaTreeApi } from "@/api/base/area";
import { drpWareHousePageApi,supermarketPageListApi,insertSupermarketApi,editSupermarketApi,deleteSupermarketApi,userListByRoleApi } from "@/api/superStore/super";
import { drpWareHousePageApi,supermarketPageListApi,insertSupermarketApi,editSupermarketApi,deleteSupermarketApi,userListByRoleApi
,shopPageListApi} from "@/api/superStore/super";
import { shopMaterialTreeApi} from "@/api/superStore/shopMaterial";
import { imgUpLoadTwo } from '@/api/system/upload'
import ShopingDialog from './ShopingDialog.vue';
export default {
name: "",
dicts: ['sys_user_type'],
components: {
ShopingDialog
},
data() {
return {
//
@ -287,10 +605,14 @@
total: 0,
//
tableListData: [],
//
tableShopListData: [],
//
title: "",
//
open: false,
titleProduct:"",
openProduct:false,
treeOptions:[],//
treeProps:{
value:"id",
@ -299,6 +621,15 @@
label:"label",
children:"children",
},
treeShopOptions: undefined,
treeTemp: [],
isMousemoveId: null,
defaultProps: {
children: "children",
label: "materialTypeName",
},
keyShopWord:"",//-
putawayStates:[{"putawayState":"1","putawayStateName":"上架"},{"putawayState":"2","putawayStateName":"下架"}],
//
queryParams: {
pageNum: 1,
@ -306,6 +637,12 @@
warehouseId: undefined,
areaId: undefined,
},
queryShopParams: {
pageNum: 1,
pageSize: 10,
keyShopWord: undefined,
putawayState: undefined,
},
wareHouseOptions:[],
wareHouseOptions2:[],
psnTypeOptions:[],
@ -417,7 +754,16 @@
orderDTO:{},//
mealtimeList:[],//
selectSupermarketId:"",
queryAddShopParams:{
pageNum: 1,
pageSize: 10,
materialName:"",
barCode:""
},
openAddProduct:"",
titleAddProduct:"",
tableAddShopListData:[],
};
},
created() {
@ -451,6 +797,7 @@
this.queryParams.warehouseId = null
});
},
getWareHouse() {
drpWareHousePageApi({}).then(response => {
this.wareHouseOptions = response.rows
@ -482,6 +829,7 @@
this.loading = false;
});
},
handleTabClick(tab, event) {
console.log(tab, event);
},
@ -647,7 +995,158 @@
getShopTreeData() {
shopMaterialTreeApi().then((response) => {
this.treeShopOptions = this.handleTree(response.rows,'materialTypeId');
this.addLevel(this.treeShopOptions)
console.log("this.treeOptions",this.treeShopOptions)
if(this.treeShopOptions && this.treeShopOptions.length > 0){
this.getShopList();
} else {
this.getShopList();
}
});
},
// -
filterNode(value, data) {
if (!value) return true;
return data.materialTypeName.indexOf(value) !== -1;
},
handleTree(data, idKey, parentIdKey = 'parentId', childrenKey = 'children') {
// MapidKey
const nodeMap = new Map();
//
const rootNodes = [];
// nodeMap
data.forEach(node => {
// nodeMapchildren
nodeMap.set(node[idKey], { ...node, [childrenKey]: [] });
// parentIdnullnodeMap
if (node[parentIdKey] === null || !nodeMap.has(node[parentIdKey])) {
// rootNodes
rootNodes.push(nodeMap.get(node[idKey]));
} else {
// children
//
const parentNode = nodeMap.get(node[parentIdKey]);
// children
parentNode[childrenKey].push(nodeMap.get(node[idKey]));
}
});
//
return rootNodes;
},
addLevel(nodes, level = 0) {
nodes.forEach(node => {
node.level = level; //
if (node.children) { //
this.addLevel(node.children, level + 1);
}
});
},
// -
async handleNodeClick(data, node) {
console.log(data)
// this.handleQuery();
},
handleCheckChange(data, checked, indeterminate) {
this.handleQuery();
},
/* 树节点增加 */
appendTreeNode(data) {
console.log(data)
this.isEditType=false;
this.form={}
this.resetForm("form");
this.$set(this.form,"parentId",data.materialTypeId)
this.open = true;
this.title = "新增";
},
/* 树节点修改 */
editTreeNode(data) {
this.isEditType=true;
this.form={}
this.resetForm("form");
this.form = {
...data
};
console.log(this.form)
this.open = true;
this.title = "修改";
},
//
handleAddShoping(row){
console.log("商品",row)
this.selectSupermarketId=row.supermarketId;
this.titleProduct="商品";
this.openProduct=true;
this.getShopTreeData();
},
/** 商品搜索按钮操作 */
handleShopQuery() {
this.queryShopParams.pageNum = 1;
this.getShopList();
},
/** 商品重置按钮操作 */
resetShopQuery() {
this.resetForm("queryShopForm");
this.handleShopQuery();
},
/** 商品列表 */
getShopList() {
this.loading = true;
let param = {
"pageNum": this.queryShopParams.pageNum,
"pageSize": this.queryShopParams.pageSize,
"warehouseId": this.queryShopParams.warehouseId,
"areaId":this.queryShopParams.areaId
}
shopPageListApi(param).then(response => {
this.tableShopListData = response.rows;
console.log("this.tableShopListData",this.tableShopListData);
this.total = Number(response.total);
this.loading = false;
});
},
handleSelectionChange(selection){
this.batchIds = []
this.batchIds = selection.map((item) => item.materialId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
//
handleShopBatchDel(){
console.log(this.batchIds)
removeMaterialApi({"materialId":this.batchIds.join(",")}).then(response => {
this.$modal.msgSuccess("删除成功");
this.$refs.multipleTable.clearSelection()
this.getShopList();
});
},
/** 商品新增 */
handleShopAdd() {
this.reset();
this.openAddProduct = true;
this.titleAddProduct = "新增-超市商品";
},
/** 新增商品列表 */
getAddShopList() {
this.loading = true;
let param = {
"pageNum": this.queryAddShopParams.pageNum,
"pageSize": this.queryAddShopParams.pageSize,
"warehouseId": this.queryAddShopParams.warehouseId,
"areaId":this.queryAddShopParams.areaId
}
shopPageListApi(param).then(response => {
this.tableAddShopListData = response.rows;
console.log("this.tableAddShopListData",this.tableAddShopListData);
this.total = Number(response.total);
this.loading = false;
});
},
@ -663,4 +1162,3 @@
}
}
</style>