232 lines
8.1 KiB
Vue
232 lines
8.1 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div class="head-container">
|
||
<div class="row_wrap">
|
||
<div class="row">
|
||
<el-input v-model="query.name" size="small" clearable placeholder="商品名称"
|
||
@keyup.enter.native="getTableData" />
|
||
<el-input v-model="query.num" placeholder="库存数量：少于多少xx" />
|
||
<div style="width: 300px;">
|
||
<el-select v-model="query.isStock" placeholder="库存开关" style="width: 100%;">
|
||
<el-option label="开" :value="1">开</el-option>
|
||
<el-option label="关" :value="0">关</el-option>
|
||
</el-select>
|
||
</div>
|
||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||
<el-button @click="resetHandle">重置</el-button>
|
||
</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.img" class="cover">
|
||
<div class="img_error" slot="error">
|
||
<i class="icon el-icon-document-delete"></i>
|
||
</div>
|
||
</el-image>
|
||
<div class="info">
|
||
<span>{{ scope.row.name }}</span>
|
||
<div>
|
||
<el-tag type="primary">{{ scope.row.type }}</el-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="规格" prop="number">
|
||
<template v-slot="scope">
|
||
{{scope.row.specSnap }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="库存" prop="number">
|
||
<template v-slot="scope">
|
||
{{ `${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"
|
||
@change="showChange($event, scope.row)"></el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="100">
|
||
<template v-slot="scope">
|
||
<el-button type="text" size="mini"
|
||
@click="$refs.invoicingDetail.show(scope.row)">库存记录</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="head-container">
|
||
<el-pagination @size-change="paginationSizeChange" :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
||
@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 { 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,
|
||
UploadExcel
|
||
},
|
||
data() {
|
||
return {
|
||
dialogVisible: false,
|
||
query: {
|
||
name: '',
|
||
isStock: '',
|
||
num: ''
|
||
},
|
||
downloadLoading: false,
|
||
uploadLoading: false,
|
||
tableData: {
|
||
page: 0,
|
||
size: 10,
|
||
total: 0,
|
||
sort: 'id',
|
||
loading: false,
|
||
list: []
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
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,
|
||
num: this.query.num
|
||
})
|
||
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 stock({
|
||
page: this.tableData.page,
|
||
size: this.tableData.size,
|
||
name: this.query.name,
|
||
isStock: this.query.isStock,
|
||
num: this.query.num,
|
||
shopId: localStorage.getItem('shopId')
|
||
})
|
||
this.tableData.loading = false
|
||
this.tableData.list = res.content
|
||
this.tableData.total = res.totalElements
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
// 每页条数改变是回调
|
||
paginationSizeChange(e){
|
||
console.log(e);
|
||
this.tableData.size = e
|
||
this.getTableData()
|
||
},
|
||
// 分页回调
|
||
paginationChange(e) {
|
||
this.tableData.page = e - 1
|
||
this.getTableData()
|
||
},
|
||
// 重置查询
|
||
resetHandle() {
|
||
this.query.name = ''
|
||
this.query.num = ''
|
||
this.query.isStock = ''
|
||
this.tableData.page = 0;
|
||
this.getTableData()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.shop_info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.cover {
|
||
$size: 50px;
|
||
width: $size;
|
||
height: $size;
|
||
border-radius: 2px;
|
||
background-color: #efefef;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-left: 10px;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.row_wrap {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
}
|
||
</style>
|