czg_team
/
management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化商品列表

This commit is contained in:
gyq 2024-10-12 09:47:58 +08:00
parent 8d8def8e52
commit a21199d217
3 changed files with 188 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.vue
View File

@ -131,4 +131,13 @@ export default {
}
}
}
.image-slot {
width: 100%;
height: 100%;
background-color: #efefef;
display: flex;
align-items: center;
justify-content: center;
}
</style>

211
src/views/product/components/stockHistory.vue
View File

@ -2,39 +2,180 @@
<template>
<el-dialog width="80%" :title="`${keysList[key]}统计`" :visible.sync="dialogVisible" @close="reset">
<div class="head-container">
<el-table :data="tableData.data" v-loading="tableData.loading" height="400px">
<el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
<el-table-column label="变动后库存">
<template v-slot="scope">
{{ scope.row.leftNumber }}
</template>
</el-table-column>
<el-table-column label="原有库存" prop="">
<template v-slot="scope">
{{ scope.row.leftNumber + scope.row.stockNumber }}
</template>
</el-table-column>
<el-table-column label="订单编号" prop="orderNo">
<template v-slot="scope">
<router-link :to="{ path: '/order_manage/order_list', query: { orderNo: scope.row.orderNo } }">
<el-link type="primary">{{ scope.row.orderNo }}</el-link>
</router-link>
</template>
</el-table-column>
<el-table-column label="操作描述" prop="type"></el-table-column>
<el-table-column :label="`${keysList[key]}`" prop="">
<template v-slot="scope">
{{ scope.row.stockNumber }}
</template>
</el-table-column>
<!-- <el-table-column label="报损" prop=""></el-table-column> -->
<el-table-column label="操作人" prop="operator"></el-table-column>
<el-table-column label="备注" prop="remark"></el-table-column>
<el-table-column label="操作时间" prop="updatedAt">
<template v-slot="scope">
{{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table ref="table" :data="tableData.data" v-loading="tableData.loading" height="400px"
v-if="dialogVisible">
<!-- 销量统计 -->
<template v-if="key == 'saleNumber'">
<el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
<el-table-column label="原库存" prop="leftNumber">
<template v-slot="scope">
{{ `${scope.row.leftNumber}${scope.row.unitName}` }}
</template>
</el-table-column>
<el-table-column label="变动后库存">
<template v-slot="scope">
{{ scope.row.leftNumber + scope.row.stockNumber }}
</template>
</el-table-column>
<el-table-column label="销量" prop="saleNumber"></el-table-column>
<el-table-column label="订单编号" prop="orderNo">
<template v-slot="scope">
<router-link
:to="{ path: '/order_manage/order_list', query: { orderNo: scope.row.orderNo } }">
<el-link type="primary">{{ scope.row.orderNo }}</el-link>
</router-link>
</template>
</el-table-column>
<el-table-column label="操作时间" prop="updatedAt">
<template v-slot="scope">
{{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
</template>
<!-- 减少数量统计 -->
<template v-if="key == 'subCountNumber'">
<el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
<el-table-column label="变动后库存">
<template v-slot="scope">
{{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
</template>
</el-table-column>
<el-table-column label="原有库存" prop="leftNumber">
<template v-slot="scope">
{{ `${scope.row.leftNumber}` }}
</template>
</el-table-column>
<el-table-column label="手动减少" prop="subNumber"></el-table-column>
<el-table-column label="销售量" prop="saleNumber"></el-table-column>
<el-table-column label="报损" prop="lossNumber"></el-table-column>
<el-table-column label="操作人" prop="operator"></el-table-column>
<el-table-column label="备注" prop="remark"></el-table-column>
<el-table-column label="操作时间" prop="updatedAt">
<template v-slot="scope">
{{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
</template>
<!-- 手动减少统计 -->
<template v-if="key == 'subNumber'">
<el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
<el-table-column label="变动后库存">
<template v-slot="scope">
{{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
</template>
</el-table-column>
<el-table-column label="原有库存" prop="leftNumber">
<template v-slot="scope">
{{ `${scope.row.leftNumber}` }}
</template>
</el-table-column>
<el-table-column label="手动减少" prop="subNumber"></el-table-column>
<el-table-column label="操作人" prop="operator"></el-table-column>
<el-table-column label="备注" prop="remark"></el-table-column>
<el-table-column label="操作时间" prop="updatedAt">
<template v-slot="scope">
{{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
</template>
<!-- 报损统计 -->
<template v-if="key == 'lossNumber'">
<el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
<el-table-column label="原库存" prop="leftNumber">
<template v-slot="scope">
{{ `${scope.row.leftNumber}${scope.row.unitName}` }}
</template>
</el-table-column>
<el-table-column label="变动后库存">
<template v-slot="scope">
{{ `${scope.row.leftNumber + scope.row.stockNumber}` }}
</template>
</el-table-column>
<el-table-column label="报损数量" prop="lossNumber"></el-table-column>
<el-table-column label="报损人" prop="operator"></el-table-column>
<el-table-column label="图片" prop="coverImg">
<template v-slot="scope">
<el-image :src="scope.row.coverImg" style="width: 40px;height: 40px;">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</template>
</el-table-column>
<el-table-column label="备注" prop="remark"></el-table-column>
<el-table-column label="操作时间" prop="updatedAt">
<template v-slot="scope">
{{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
</template>
<!-- 增加数量统计 -->
<template v-if="key == 'addCountNumber'">
<el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
<el-table-column label="变动后库存">
<template v-slot="scope">
{{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
</template>
</el-table-column>
<el-table-column label="原库存" prop="leftNumber">
<template v-slot="scope">
{{ `${scope.row.leftNumber}` }}
</template>
</el-table-column>
<el-table-column label="手动增加" prop="addNumber"></el-table-column>
<el-table-column label="退货" prop="refundNumber"></el-table-column>
<el-table-column label="操作人" prop="operator"></el-table-column>
<el-table-column label="备注" prop="remark"></el-table-column>
<el-table-column label="操作时间" prop="updatedAt">
<template v-slot="scope">
{{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
</template>
<!-- 手动增加统计 -->
<template v-if="key == 'addNumber'">
<el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
<el-table-column label="变动后库存">
<template v-slot="scope">
{{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
</template>
</el-table-column>
<el-table-column label="原库存" prop="leftNumber">
<template v-slot="scope">
{{ `${scope.row.leftNumber}` }}
</template>
</el-table-column>
<el-table-column label="手动增加" prop="addNumber"></el-table-column>
<el-table-column label="操作人" prop="operator"></el-table-column>
<el-table-column label="备注" prop="remark"></el-table-column>
<el-table-column label="操作时间" prop="updatedAt">
<template v-slot="scope">
{{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
</template>
<!-- 退货统计 -->
<template v-if="key == 'refundNumber'">
<el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
<el-table-column label="变动后库存">
<template v-slot="scope">
{{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
</template>
</el-table-column>
<el-table-column label="原库存" prop="leftNumber">
<template v-slot="scope">
{{ `${scope.row.leftNumber}` }}
</template>
</el-table-column>
<el-table-column label="退货" prop="refundNumber"></el-table-column>
<el-table-column label="操作人" prop="operator"></el-table-column>
<el-table-column label="备注" prop="remark"></el-table-column>
<el-table-column label="操作时间" prop="updatedAt">
<template v-slot="scope">
{{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
</template>
</el-table>
</div>
<div class="head-container">
@ -59,7 +200,7 @@ export default {
return {
dayjs,
dialogVisible: false,
key: 'stockNumber',
key: 'saleNumber',
keysList: {
stockNumber: '现有数量',
addCountNumber: '增加数量',
@ -67,7 +208,7 @@ export default {
refundNumber: '退货',
subCountNumber: '减少数量',
subNumber: '手动减少',
saleNumber: '销售量',
saleNumber: '销量',
lossNumber: '报损',
},
productId: '',

5
src/views/product/index.vue
View File

@ -37,8 +37,9 @@
</div>
<div class="info">
<div class="row">
<span>现有数量</span>
<span class="link" @click="showStockHistory('stockNumber')">{{ countInfo.stockNumber || 0 }}</span>
<span>商品种数</span>
<!-- @click="showStockHistory('stockNumber')" -->
<span>{{ tableData.total || 0 }}</span>
</div>
</div>
</div>