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

优化商品列表数据展示

Browse Source
This commit is contained in:
gyq
2024-10-09 09:33:30 +08:00
parent 44c2f6c3dd
commit 940ceee222
3 changed files with 67 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,6 +42,12 @@
import dayjs from 'dayjs'
import { tbProductStockDetailStock } from '@/api/shop.js'
export default {
props: {
query: {
type: Object,
default: {}
}
},
data() {
return {
dayjs,
@@ -77,7 +83,12 @@ export default {
page: this.tableData.page,
size: this.tableData.size,
shopId: localStorage.getItem('shopId'),
column: this.key
column: this.key,
productName: this.query.name,
categoryId: this.query.categoryId,
type: this.query.typeEnum,
startTime: this.query.createdAt[0] || '',
endTime: this.query.createdAt[1] || '',
})
this.tableData.loading = false
this.tableData.data = res.content

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

@@ -1,32 +1,22 @@
<template>
<div class="app-container">
<div class="head-container">
<el-row :gutter="20">
<el-col :span="3">
<el-input v-model="query.name" size="small" clearable placeholder="请输入商品名称" style="width: 100%;"
class="filter-item" @keyup.enter.native="getTableData" />
</el-col>
<el-col :span="3">
<el-select v-model="query.categoryId" placeholder="请选择商品分类" style="width: 100%;">
<el-option :label="item.name" :value="item.id" v-for="item in categorys" :key="item.id" />
</el-select>
</el-col>
<el-col :span="3">
<el-select v-model="query.typeEnum" placeholder="请选择商品规格" style="width: 100%;">
<el-option :label="item.label" :value="item.typeEnum" v-for="item in typeEnums" :key="item.typeEnum" />
</el-select>
</el-col>
<el-col :span="6">
<el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-col>
<el-col :span="6">
<el-button type="primary" @click="queryHandle">查询</el-button>
<el-button @click="resetHandle">重置</el-button>
<el-button @click="showStockWarningHandle">库存预警：{{ warnLine }}</el-button>
</el-col>
</el-row>
<div class="flex">
<el-input v-model="query.name" size="small" clearable placeholder="请输入商品名称" @keyup.enter.native="getTableData"
style="width: 200px;" />
<el-select v-model="query.categoryId" placeholder="请选择商品分类">
<el-option :label="item.name" :value="item.id" v-for="item in categorys" :key="item.id" />
</el-select>
<el-select v-model="query.typeEnum" placeholder="请选择商品规格">
<el-option :label="item.label" :value="item.typeEnum" v-for="item in typeEnums" :key="item.typeEnum" />
</el-select>
<el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
<el-button type="primary" @click="queryHandle">查询</el-button>
<el-button @click="resetHandle">重置</el-button>
<el-button @click="showStockWarningHandle">库存预警：{{ warnLine }}</el-button>
</div>
</div>
<div class="head-container">
<div class="header_wrap">
@@ -149,6 +139,7 @@
<div v-if="scope.row.conInfos && scope.row.conInfos.length">
<el-button type="text" @click="showBindCons(scope.row)">
{{ scope.row.conInfos | conInfosFilter }}
<i class="el-icon-edit"></i>
</el-button>
</div>
<el-button v-else type="text" @click="showBindCons(scope.row)">
@@ -216,7 +207,7 @@
<!-- 绑定耗材 -->
<BindCons ref="bindCons" @refundChange="refundChange" />
<!-- 商品库存记录 -->
<StockHistory ref="stockHistory" />
<StockHistory ref="stockHistory" :query="query" />
<!-- 编辑售价、库存 -->
<el-dialog :title="editorEumn[editorForm.key]" :visible.sync="editorVisable" :show-close="false" width="300px">
<el-form :model="editorForm">
@@ -430,6 +421,7 @@ export default {
queryHandle() {
localStorage.setItem('shopIndexQuery', JSON.stringify(this.query))
this.getTableData()
this.tbProductStockDetailStockCount()
},
//表格拖拽
tableDrag() {
@@ -474,9 +466,11 @@ export default {
this.query.categoryId = ''
this.query.typeEnum = ''
this.query.productId = ''
this.query.createdAt = []
this.tableData.page = 0
localStorage.setItem('shopIndexQuery', JSON.stringify(this.query))
this.getTableData()
this.tbProductStockDetailStockCount()
},
// 分页回调
paginationChange(e) {
@@ -561,6 +555,13 @@ export default {
justify-content: space-between;
}
.flex {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.data_wrap {
display: flex;
justify-content: space-between;