优化进销存库存上传下载
This commit is contained in:
@@ -1,23 +1,30 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<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="6">
|
||||
<div class="row_wrap">
|
||||
<div class="row">
|
||||
<el-input v-model="query.name" size="small" clearable placeholder="商品名称"
|
||||
@keyup.enter.native="getTableData" />
|
||||
<el-select v-model="query.isStock" placeholder="库存开关">
|
||||
<el-option label="开" :value="1">开</el-option>
|
||||
<el-option label="关" :value="0">关</el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-button icon="el-icon-download" :loading="downloadLoading" @click="protHandle">导出库存</el-button>
|
||||
<el-button icon="el-icon-upload2" :loading="uploadLoading"
|
||||
@click="dialogVisible = true">导入库存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading">
|
||||
<el-table-column label="商品信息">
|
||||
<template v-slot="scope">
|
||||
<div class="shop_info">
|
||||
<el-image :src="scope.row.coverImg" class="cover">
|
||||
<el-image :src="scope.row.img" class="cover">
|
||||
<div class="img_error" slot="error">
|
||||
<i class="icon el-icon-document-delete"></i>
|
||||
</div>
|
||||
@@ -25,20 +32,21 @@
|
||||
<div class="info">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
<div>
|
||||
<el-tag type="primary">{{ scope.row.typeEnum | typeEnum }}</el-tag>
|
||||
<el-tag type="primary">{{ scope.row.type }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" prop="stockNumber">
|
||||
<el-table-column label="库存" prop="number">
|
||||
<template v-slot="scope">
|
||||
{{ `${scope.row.stockNumber} ${scope.row.unitName}` }}
|
||||
{{ `${scope.row.number} ${scope.row.unitName}` }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存开关">
|
||||
<template v-slot="scope">
|
||||
<el-switch v-model="scope.row.isStock" :active-value="1" :inactive-value="0"></el-switch>
|
||||
<el-switch v-model="scope.row.isStock" :active-value="1" :inactive-value="0"
|
||||
@change="showChange($event, scope.row)"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
@@ -54,22 +62,33 @@
|
||||
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
<invoicingDetail ref="invoicingDetail" />
|
||||
<!-- 导入库存弹窗 -->
|
||||
<el-dialog title="导入库存" :visible.sync="dialogVisible">
|
||||
<UploadExcel :beforeUpload="excelSuccessUpload" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tbProductGet } from '@/api/invoicing'
|
||||
import { stock, stockdownload, stockdoImport, stockStateChange } from '@/api/invoicing'
|
||||
import settings from '@/settings'
|
||||
import invoicingDetail from './components/invoicingDetail'
|
||||
import UploadExcel from '@/components/UploadExcel/'
|
||||
import { downloadFile } from "@/utils/index";
|
||||
export default {
|
||||
components: {
|
||||
invoicingDetail
|
||||
invoicingDetail,
|
||||
UploadExcel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
query: {
|
||||
name: ''
|
||||
name: '',
|
||||
isStock: ''
|
||||
},
|
||||
downloadLoading: false,
|
||||
uploadLoading: false,
|
||||
tableData: {
|
||||
page: 0,
|
||||
size: 10,
|
||||
@@ -89,25 +108,60 @@ export default {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
async excelSuccessUpload(file) {
|
||||
console.log(file);
|
||||
try {
|
||||
this.uploadLoading = true
|
||||
this.dialogVisible = false
|
||||
const res = await stockdoImport(file)
|
||||
this.uploadLoading = false
|
||||
this.$notify.success('导入成功')
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
this.dialogVisible = false
|
||||
this.uploadLoading = false
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 导出库存
|
||||
async protHandle() {
|
||||
try {
|
||||
this.downloadLoading = true;
|
||||
const file = await stockdownload({
|
||||
name: this.query.name,
|
||||
isStock: this.query.isStock
|
||||
})
|
||||
downloadFile(file, "商品库存", "xlsx");
|
||||
this.downloadLoading = false;
|
||||
} catch (error) {
|
||||
this.downloadLoading = false;
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 状态切换
|
||||
async showChange(e, row) {
|
||||
try {
|
||||
await stockStateChange({
|
||||
proId: row.proId,
|
||||
isStock: row.isStock
|
||||
})
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbProductGet({
|
||||
const res = await stock({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
sort: this.tableData.sort,
|
||||
name: this.query.name,
|
||||
isStock: this.query.isStock,
|
||||
shopId: localStorage.getItem('shopId')
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.list = res.content.map(item => {
|
||||
let stockNumber = 0
|
||||
for (let i of item.skuList) {
|
||||
stockNumber += i.stockNumber
|
||||
}
|
||||
item.stockNumber = stockNumber
|
||||
return item
|
||||
})
|
||||
this.tableData.list = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
@@ -120,7 +174,7 @@ export default {
|
||||
},
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.query.blurry = ''
|
||||
this.query.name = ''
|
||||
this.tableData.page = 0;
|
||||
this.getTableData()
|
||||
}
|
||||
@@ -148,4 +202,15 @@ export default {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.row_wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user