This commit is contained in:
weipengfei 2024-07-02 11:44:11 +08:00
parent f65aed1e0c
commit f5171c9498
9 changed files with 181 additions and 600 deletions

View File

@ -100,3 +100,10 @@ export function storeStorageInfoListsApi(data) {
export function storeStorageInfoEditApi(data) {
return request.post('/system_store_storage/systemstorestorage/edit', data)
}
/**
* @description 门店库存列表
*/
export function storeProductListsApi(data) {
return request.get('/store_product/storeProduct/lists', { params: data })
}

View File

@ -456,6 +456,7 @@ const handlecodeEnter = () => {
if (!uid.value) return ElMessage.error('请先选择用户');
let pay_type = 18; //
if (active.value == 4) pay_type = 19; //
if (active.value == 5) pay_type = 3; //
orderCreateApi({
pay_type: pay_type,
is_storage: is_storage,
@ -483,7 +484,7 @@ const aleft = () => {
};
const aright = () => {
if (!drawer.value || (isFocus.value && input.value.length > 0)) return;
if (active.value != 4) return changeActive(active.value + 1);
if (active.value != 5) return changeActive(active.value + 1);
};
onMounted(() => {
mitt.on("left", aleft);
@ -513,9 +514,12 @@ onUnmounted(() => {
<div class="center" style="border-left: none;" :class="{ active: active == 3 }" @click="changeActive(3)">
采购款
</div>
<div class="right" :class="{ active: active == 4 }" @click="changeActive(4)">
<div class="center" style="border-left: none;" :class="{ active: active == 4 }" @click="changeActive(4)">
礼品券兑换
</div>
<div class="right" :class="{ active: active == 5 }" @click="changeActive(5)">
余额
</div>
</div>
<div>
<div v-if="form.activities == 1 && active != 4" style="display: inline-block;margin-right: 20px">
@ -588,7 +592,7 @@ onUnmounted(() => {
</div>
</div>
</div>
<div class="card3" v-else-if="active == 3 || active == 4">
<div class="card3" v-else-if="active == 3 || active == 4 || active == 5">
<div class="codes">
<el-input v-model="smsCode" autofocus class="code-input" placeholder="请输入验证码"
@keyup.enter="handlecodeEnter" @focus="isFocus = true" @blur="isFocus = false" />
@ -617,7 +621,7 @@ onUnmounted(() => {
text-align: center;
.header {
width: 30rem;
width: 35rem;
display: flex;
&>div {

View File

@ -94,7 +94,8 @@ defineExpose({
</div>
<div class="bottom flex" style="justify-content: space-between;">
<div>采购款: <span class="red">{{ item.purchase_funds }}</span></div>
<div>礼品券: <span class="red">{{ item.get_frozen }}</span></div>
<div>礼品券: <span class="red">{{ item.get_frozen?.toFixed(2) || item.get_frozen }}</span></div>
<div>余额: <span class="red">{{ item.now_money }}</span></div>
</div>
</div>
</div>
@ -147,7 +148,7 @@ defineExpose({
.item {
width: 45%;
height: 6rem;
height: 7rem;
border-radius: 0.5rem;
cursor: pointer;
box-sizing: border-box;
@ -185,7 +186,7 @@ defineExpose({
.bottom {
&>div{
flex: 1;
width: 50%;
}
}

View File

@ -77,6 +77,12 @@ const list = ref([
ico: "Van",
count: 0,
},
{
name: "stock",
title: "商品库存",
ico: "Box",
count: 0,
},
{
name: "user",
title: "用户",

View File

@ -53,6 +53,12 @@ const routes = [
meta: { title: '入库登记' },
component: () => import('@/views/putStorage/index.vue'),
},
{
path: '/stock',
name: 'stock',
meta: { title: '入库登记' },
component: () => import('@/views/stock/index.vue'),
},
{
path: '/user',
name: 'user',

View File

@ -46,7 +46,7 @@ const getList = () => {
cartListApi().then((res) => {
extend.value = res.data.extend;
list.value = res.data.lists || [];
if(!extend.value?.pay_price) userInfo.value.uid = "";
if (!extend.value?.pay_price) userInfo.value.uid = "";
// if (res.data?.lists?.length > 0) {
// list.value = res.data.lists;
// allPrice.value = res.data?.lists.reduce((previous, current) => {
@ -114,7 +114,7 @@ const setUser = (row) => {
const is_storage = ref(false)
const resetView = ()=>{
const resetView = () => {
is_storage.value = false;
getList();
}
@ -156,19 +156,24 @@ onUnmounted(() => {
<div class="info" v-if="userInfo.uid">
<div class="flex-bewteen">
<div>手机号: {{ userInfo.mobile || userInfo.account }}</div>
<el-button type="primary" link class="change-user" @click="userListRef.open(userInfo.uid)">切换用户<el-icon>
<el-button type="primary" link class="change-user"
@click="userListRef.open(userInfo.uid)">切换用户<el-icon>
<ArrowRight />
</el-icon></el-button>
</div>
<div class="flex-bewteen" style="align-items: flex-end;">
<div style="display:flex;">
<div class="flex-bewteen" style="align-items: flex-start;">
<div class="user-money">
<div style="margin-right: 0.5rem;">采购款: <span style="color: #f70;">{{
userInfo.purchase_funds }}</span></div>
<div>礼品券: <span style="color: #f70;">{{ userInfo.get_frozen }}</span></div>
userInfo.purchase_funds }}</span></div>
<div style="margin-right: 0.5rem;">礼品券: <span style="color: #f70;">{{ userInfo.get_frozen?.toFixed(2) || userInfo.get_frozen
}}</span></div>
<div>余额: <span style="color: #f70;">{{ userInfo.now_money }}</span></div>
</div>
<el-button link @click="userInfo.uid = ''">重置<el-icon>
<el-button style="margin-top:0.2rem;" link @click="userInfo.uid = ''">
重置<el-icon>
<RefreshLeft />
</el-icon></el-button>
</el-icon>
</el-button>
</div>
</div>
<div class="info" v-else style="align-items: center;display:flex;justify-content: space-between;">
@ -234,13 +239,7 @@ onUnmounted(() => {
</div> -->
</div>
<div class="update-price">
<el-switch
v-model="is_storage"
size="large"
inline-prompt
active-text="存货"
inactive-text="不存"
/>
<el-switch v-model="is_storage" size="large" inline-prompt active-text="存货" inactive-text="不存" />
</div>
</div>
<div class="order-btn">
@ -292,6 +291,16 @@ onUnmounted(() => {
.change-user {
font-size: 1rem;
}
.user-money {
display: flex;
flex: 1;
flex-wrap: wrap;
&>div {
flex-shrink: 0;
}
}
}
}
}

View File

@ -1,293 +0,0 @@
<script setup>
import { ref, watch, nextTick, computed, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import mitt from "@/utils/mitt.js";
import { useUserStore } from "@/store/user.js";
import config from "@/config";
import {
categoryListApi,
productCreateApi,
productDetailApi,
productUpdateApi,
} from "@/api/shop.js";
const drawer = ref(false);
const table = {
store_name: "",
image: [],
slider_image: [],
attrValue: [
{
bar_code: "",
price: "",
stock: "",
cost: "",
ot_price: "",
wholesale_price: "0",
extension_one: "",
extension_two: "",
},
],
content: {
image: [],
},
unit_name: "",
delivery_way: ["1"],
};
const formData = ref(table);
const userStore = useUserStore();
const emit = defineEmits(["reload"]);
const dialogImgVisible = ref(false);
const dialogImageUrl = ref("");
const handlePictureCardPreview = (uploadFile) => {
dialogImageUrl.value = uploadFile.url;
dialogImgVisible.value = true;
};
const showType = ref("add");
const show = (type, data) => {
formData.value = table;
showType.value = type;
if (type == "add") {
drawer.value = true;
} else if (type == "edit") {
drawer.value = true;
getProductDetail(data.product_id);
}
};
const getProductDetail = (id) => {
productDetailApi(userStore.userInfo.service.store_id, id).then((res) => {
res.data.image = [
{
url: res.data.image,
uid: res.data.image,
},
];
if(res.data.content?.image) res.data.content.image = res.data.content.image.map((item) => {
return {
url: item,
uid: res.data.image,
};
});
else res.data.content = {
image: []
};
res.data.slider_image = res.data.slider_image.map((item) => {
return {
url: item,
uid: res.data.image,
};
});
formData.value = res.data;
console.log(formData.value);
});
};
const categoryList = ref([]);
const getCategoryList = () => {
categoryListApi(userStore.userInfo.service.store_id).then((res) => {
categoryList.value = res.data;
});
};
getCategoryList();
const uploadImage = (res) => {
formData.value.image = res.data.path;
};
const uploadSliderImage = (res) => {
console.log(formData.value.slider_image);
};
const handleRemove = (file) => {
console.log(file);
};
const formRef = ref(null);
const submit = () => {
let data = JSON.parse(JSON.stringify(formData.value));
console.log(data.cate_id);
if (data.cate_id && typeof data.cate_id == "object" && data.cate_id.length > 0)
data.cate_id = data.cate_id[data.cate_id.length - 1] || '';
else data.cate_id = data.cate_id || '';
if (data.image == "") return ElMessage.error("请上传商品封面图");
// if (data.content.image.length == 0)
// return ElMessage.error("");
if (data.slider_image.length == 0) return ElMessage.error("请上传商品轮播图");
data.content.image = data.content.image.map((item) => {
return item?.response?.data?.path ? item?.response?.data?.path : item.url;
});
data.image = data.image[0]?.response?.data?.path
? data.image[0]?.response?.data?.path
: data.image[0].url;
data.slider_image = data.slider_image.map((item) => {
return item?.response?.data?.path ? item?.response?.data?.path : item.url;
});
if (data.store_name == "") return ElMessage.error("请输入商品名称");
if (data.cate_id == "") return ElMessage.error("请选择平台分类");
if (data.attrValue[0].bar_code == "")
return ElMessage.error("请输入商品条码");
if (data.attrValue[0].stock<=0) return ElMessage.error("请输入商品库存");
if (data.attrValue[0].price<=0) return ElMessage.error("请输入商品价格");
if (showType.value == "add")
productCreateApi(userStore.userInfo.service.store_id, data).then((res) => {
ElMessage.success(res.message);
emit("reload", true);
beforeClose();
});
else
productUpdateApi(
userStore.userInfo.service.store_id,
data.product_id,
data
).then((res) => {
ElMessage.success(res.message);
emit("reload", true);
beforeClose();
});
};
const cancelClick = () => {
beforeClose();
};
const beforeClose = () => {
drawer.value = false;
};
const open = () => {};
defineExpose({
drawer,
show,
});
</script>
<template>
<el-drawer
size="60rem"
v-model="drawer"
direction="rtl"
@open="open"
:before-close="beforeClose"
>
<template #header>
<h4 v-if="showType=='add'">添加商品</h4>
<h4 v-else>编辑商品 [{{formData.product_id}}]</h4>
</template>
<template #default>
<div class="dra-body">
<el-form ref="formRef" :model="formData" label-width="150px">
<el-form-item label="商品条码" required>
<el-input
v-model="formData.attrValue[0].bar_code"
type="number"
placeholder="请输入商品条码"
></el-input>
</el-form-item>
<el-form-item label="商品名称" required>
<el-input
v-model="formData.store_name"
placeholder="请输入商品名称"
></el-input>
</el-form-item>
<el-form-item label="平台分类" required>
<el-cascader
v-model="formData.cate_id"
class="pageWidth"
:options="categoryList"
filterable
clearable
/>
</el-form-item>
<el-form-item label="商品封面图" required>
<el-upload
v-model:file-list="formData.image"
:action="config.upload"
name="field"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:page_size="1"
>
<el-icon><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="商品轮播图" required>
<el-upload
v-model:file-list="formData.slider_image"
:action="config.upload"
name="field"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:page_size="9"
>
<el-icon><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="商品详情">
<el-upload
v-model:file-list="formData.content.image"
:action="config.upload"
name="field"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:page_size="9"
>
<el-icon><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="商品单位" required>
<el-input
v-model="formData.unit_name"
placeholder="请输入商品单位"
></el-input>
</el-form-item>
<el-form-item label="零售价" required>
<el-input
v-model="formData.attrValue[0].price"
type="number"
placeholder="请输入零售价"
></el-input>
</el-form-item>
<el-form-item label="库存" required>
<el-input
v-model="formData.attrValue[0].stock"
type="number"
placeholder="请输入库存"
></el-input>
</el-form-item>
</el-form>
</div>
<el-dialog v-model="dialogImgVisible">
<img
style="width: 100%; height: 100%"
w-full
:src="dialogImageUrl"
alt="Preview Image"
/>
</el-dialog>
</template>
<template #footer>
<el-button @click="cancelClick">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</template>
</el-drawer>
</template>
<style lang="scss" scoped>
.dra-body {
width: 100%;
display: flex;
flex-direction: column;
/* align-items: center; */
text-align: center;
}
::v-deep .el-upload--picture-card {
--el-upload-picture-card-size: 60px !important;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
height: 60px !important;
width: 60px !important;
}
</style>

View File

@ -1,284 +0,0 @@
<script setup>
import { onMounted, ref } from "vue";
import { storeListApi, userFreeTrialApi, productTitleApi, productStatusApi } from "@/api/shop.js";
import { useUserStore } from "@/store/user.js";
import { ElMessage } from "element-plus";
import add from "./component/add.vue";
const orderList = ref([]);
const userStore = useUserStore();
const where = ref({
page_no: 1,
page_size: 15,
type: 1,
keyword: "",
staff_id: userStore.userInfo.service.service_id,
});
const loading = ref(false);
const total = ref(0);
const productTitle = ref([]);
const getProductTitleApi = () => {
productTitleApi(userStore.userInfo.service.store_id).then((res) => {
productTitle.value = res.data;
});
};
getProductTitleApi()
const getShopList = (loadmore = false) => {
loading.value = true;
getProductTitleApi();
storeListApi(userStore.userInfo.service.store_id, where.value).then((res) => {
orderList.value = res.data.list;
total.value = res.data.count;
loading.value = false;
});
};
getShopList();
const prevClick = (e) => {
where.value.page_no = e;
getShopList();
};
const nextClick = (e) => {
where.value.page_no = e;
getShopList();
};
const currentChange = (e) => {
where.value.page_no = e;
getShopList();
};
const dialogFormVisible = ref(false);
const form = ref({});
const edit = (row) => {
form.value = row;
dialogFormVisible.value = true;
};
const submitUpdate = () => {
let obj = {
attr: form.value.attr || [],
attrValue: form.value.attrValue,
mer_cate_id: form.value.merCateId || [],
spec_type: form.value.spec_type,
is_stock: 1,
};
userFreeTrialApi(form.value.product_id, obj)
.then((res) => {
ElMessage({
message: res.message,
type: "success",
});
dialogFormVisible.value = false;
getShopList();
})
.catch((err) => {
ElMessage({
message: err,
type: "error",
});
});
};
const activeIndex = ref('1');
const handleSelect = (key) => {
where.value.type = key;
where.value.page_no = 1;
getShopList();
};
const updateShow = (row) => {
productStatusApi(userStore.userInfo.service.store_id, row.product_id, {
status: row.is_show ? 1 : 0
}).then(res=>{
ElMessage.success(res.message);
getShopList(true);
})
}
const addRef = ref(null);
const showAdd = (type='add', data)=>{
addRef.value.show(type, data);
}
</script>
<template>
<div v-loading="loading" element-loading-text="加载中" class="my-shop">
<el-form :inline="true">
<el-form-item label="关键字:">
<el-input v-model="where.keyword" placeholder="请输入关键字搜索" style="width: 20rem;" clearable @clear="getShopList(true)" @keydown.enter="getShopList(true)"/>
</el-form-item>
<el-form-item >
<el-button type="primary" @click="getShopList(true)">搜索</el-button>
</el-form-item>
<el-form-item >
<el-button type="primary" @click="showAdd('add')">新增</el-button>
</el-form-item>
</el-form>
<el-menu
:default-active="activeIndex"
class="el-menu-top"
mode="horizontal"
@select="handleSelect"
>
<el-menu-item
:index="item.type+''"
v-for="(item, index) in productTitle"
:key="index"
>{{ `${item.name}(${item.count})` }}</el-menu-item
>
</el-menu>
<el-table :data="orderList" style="width: 100%">
<el-table-column prop="product_id" label="ID" width="100" />
<el-table-column prop="image" label="图片" width="120">
<template #default="scope">
<el-image
loading="lazy"
style="width: 3.75rem; height: 3.75rem;"
:src="scope.row.image"
></el-image>
</template>
</el-table-column>
<el-table-column prop="store_name" label="商品名称" width="500" />
<el-table-column prop="price" label="售价" />
<el-table-column prop="stock" label="库存" />
<el-table-column label="上/下架" v-if="where.type<=2" width="100">
<template #default="scope">
<el-switch
v-model="scope.row.is_show"
:active-value="1"
inline-prompt
active-text="上架"
inactive-text="下架"
@click="updateShow(scope.row)"
/>
</template>
</el-table-column>
<el-table-column label="商品状态" v-if="where.type<=4" width="100">
<template #default="scope">
<span v-if="!scope.row.is_used" style="color: #ff4a00">平台关闭</span>
<span v-else-if="scope.row.is_show">上架显示</span>
<span v-else>下架</span>
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template #default="scope">
<el-button
type="primary"
v-if="where.type != 5"
link
@click="edit(scope.row)"
>修改库存</el-button
>
<el-button
type="primary"
v-if="where.type != 1 && where.type != 5"
link
@click="showAdd('edit', scope.row)"
>编辑</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:page_no-size="where.page_size"
layout="prev, pager, next"
:total="total"
@prev-click="prevClick"
@next-click="nextClick"
@current-change="currentChange"
/>
<el-dialog v-model="dialogFormVisible" title="编辑商品库存" width="800">
<el-table
v-if="form.attrValue"
:data="form.attrValue"
stripe
style="width: 100%"
>
<el-table-column prop="image" label="图片" width="180">
<template #default="scope">
<el-image
loading="lazy"
style="width: 5rem; height: 5rem"
:src="scope.row.image || form.image"
/>
</template>
</el-table-column>
<el-table-column prop="sku" label="名称" width="180">
<template #default="scope">
<span>{{ scope.row.sku || form.store_name }}</span>
</template>
</el-table-column>
<el-table-column prop="price" label="价格" />
<el-table-column prop="stock" label="库存">
<template #default="scope">
<el-input-number
v-model="scope.row.stock"
step-strictly
:min="0"
:step="1"
/>
</template>
</el-table-column>
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="submitUpdate"> 确定 </el-button>
</div>
</template>
</el-dialog>
<add ref="addRef" @reload="getShopList"></add>
</div>
</template>
<style lang="scss" scoped>
.my-shop {
background-color: #fff;
border-radius: 1.2rem;
box-sizing: border-box;
padding: 1rem;
overflow-y: scroll;
}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
width: 0.315rem; /* 设置滚动条的宽度 */
}
/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 设置轨道的背景色 */
margin: 1.25rem 0;
}
/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
background-color: #ccc; /* 设置滑块的背景色 */
border-radius: 0.315rem; /* 设置滑块的圆角 */
}
/* 设置滚动条鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
}
.el-menu--horizontal {
height: 2.5rem;
}
.el-form--inline .el-form-item{
margin-right: 1rem;
}
</style>

125
src/views/stock/index.vue Normal file
View File

@ -0,0 +1,125 @@
<script setup>
import { ref, nextTick } from "vue";
import { storeProductListsApi } from "@/api/shop.js"
import { ElMessage } from "element-plus";
const orderList = ref([]);
const where = ref({
page_no: 1,
page_size: 20,
loadend: false,
type: 1
});
const loading = ref(false);
const getOrderList = () => {
if (where.value.loadend) return;
loading.value = true;
storeProductListsApi({
page_no: where.value.page_no,
page_size: where.value.page_size,
type: where.value.type
}).then((res) => {
orderList.value = [...orderList.value, ...res.data.lists];
if (res.data.lists.length < where.value.page_size) where.value.loadend = true;
where.value.page_no++;
loading.value = false;
});
};
getOrderList();
const reload = ()=>{
where.value.page_no = 1;
where.value.loadend = false;
orderList.value = [];
getOrderList();
};
</script>
<template>
<div class="my-card put-storage">
<el-radio-group style="margin-bottom: 20px" v-model="where.type" @change="reload">
<el-radio-button :label="1" :value="1">售卖库存</el-radio-button>
<el-radio-button :label="2" :value="2">兑换库存</el-radio-button>
</el-radio-group>
<div class="order-lists" v-loading="loading" v-infinite-scroll="getOrderList" :infinite-scroll-distance="300"
:infinite-scroll-delay="500" :infinite-scroll-immediate="false" style="overflow: auto">
<el-table :data="orderList">
<el-table-column label="导入人员" prop="admin_name" />
<el-table-column label="门店确认人员" prop="staff_name" />
<el-table-column label="商品图" prop="image">
<template #default="{ row }">
<el-image class="image" :src="row.image" />
</template>
</el-table-column>
<el-table-column label="商品" prop="store_name" />
<el-table-column label="数量" prop="nums" />
<el-table-column label="状态" prop="status">
<template #default="{ row }">
<el-tag type="success" v-if="row.status === 1">已入库</el-tag>
<el-tag type="warning" v-else-if="row.status === 0">待确认</el-tag>
<el-tag type="danger" v-else-if="row.status === -1">库存不足</el-tag>
</template>
</el-table-column>
<el-table-column label="备注" prop="mark" />
</el-table>
</div>
</div>
</template>
<style lang="scss">
.put-storage {
background-color: #fff;
border-radius: 1.2rem;
box-sizing: border-box;
padding: 1rem;
height: 100%;
display: flex;
flex-direction: column;
.image {
width: 4rem;
height: 4rem;
}
.order-lists {
flex: 1;
width: 100%;
}
}
.my-card {}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
width: 0.315rem;
/* 设置滚动条的宽度 */
}
/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
/* 设置轨道的背景色 */
/* margin: 1.25rem 0; */
}
/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
background-color: #ccc;
/* 设置滑块的背景色 */
border-radius: 0.315rem;
/* 设置滑块的圆角 */
}
/* 设置滚动条鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
background-color: #999;
/* 设置鼠标悬停时滑块的背景色 */
}
</style>