224 lines
6.7 KiB
Vue
224 lines
6.7 KiB
Vue
<template>
|
||
<div class="pageBox">
|
||
<div class="cardBox">
|
||
<div class="searchBox">
|
||
<div class="row">
|
||
<span>sku标题：</span>
|
||
<el-input v-model="filter.title" clearable></el-input>
|
||
</div>
|
||
<div class="row">
|
||
<span>规格编码：</span>
|
||
<el-input v-model="filter.external_sku_id" clearable></el-input>
|
||
</div>
|
||
<div class="row">
|
||
<span>创建时间：</span>
|
||
<el-date-picker
|
||
v-model="addTime"
|
||
type="datetimerange"
|
||
range-separator="-"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
style="width: 340px">
|
||
</el-date-picker>
|
||
</div>
|
||
<div class="row">
|
||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">筛选</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-card>
|
||
<div class="opaBox">
|
||
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
||
<el-button type="warning" icon="el-icon-upload2" @click="handleImport">导入</el-button>
|
||
</div>
|
||
<el-table v-loading="loading" :data="supplierList" style="width: 100%" border>
|
||
<el-table-column prop="id" label="ID" width="80" align="center" />
|
||
<el-table-column prop="goods_sku.name" label="商品标题" />
|
||
<el-table-column prop="goods_sku.external_sku_id" label="规格编码" />
|
||
<el-table-column prop="sku_id" label="skuID" />
|
||
<el-table-column prop="day" label="日期" />
|
||
<el-table-column prop="inventory" label="盘点库存" />
|
||
<el-table-column prop="inventory_time" label="盘点时间" />
|
||
</el-table>
|
||
<div class="page-pagination">
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="page"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:page-size="pageSize"
|
||
layout="prev, pager, next, jumper, sizes, total"
|
||
:total="total">
|
||
</el-pagination>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-dialog title="新增" :visible.sync="dialogVisible" width="500px">
|
||
<el-form label-width="90px">
|
||
<el-form-item label="规格编码：">
|
||
<el-input v-model="curInfo.external_sku_id" clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="盘点库存：">
|
||
<el-input v-model="curInfo.inventory" clearable></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="commitSupplier" :loading="commitloading">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<el-dialog title="导入" :visible.sync="showImport" width="500px">
|
||
<div style="text-align: center;">
|
||
<el-upload class="upload-demo" drag action="" :limit="1" :multiple="false"
|
||
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
||
:file-list="fileList" :auto-upload="false" :on-change="importFileChange" :on-remove="fileRemove">
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
</el-upload>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="showImport = false">取 消</el-button>
|
||
<el-button type="primary" @click="commitUpload" :loading="commitloading">上 传</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getDailyStock, addDailyStock } from "@/api/supplyChain"
|
||
import axios from "axios"
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
page: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
supplierList: [],
|
||
dialogVisible: false,
|
||
curInfo: {},
|
||
commitloading: false,
|
||
filter: {
|
||
title: '',
|
||
external_sku_id: ''
|
||
},
|
||
addTime: [],
|
||
showImport: false,
|
||
fileList: []
|
||
}
|
||
},
|
||
methods: {
|
||
fetchList() {
|
||
this.loading = true
|
||
let params = {
|
||
page: this.page,
|
||
per_page: this.pageSize,
|
||
...this.filter,
|
||
start_time: this.addTime ? this.addTime[0] : '',
|
||
end_time: this.addTime ? this.addTime[1] : ''
|
||
}
|
||
getDailyStock(params).then((res) => {
|
||
this.supplierList = res.data.data
|
||
this.total = res.data.meta.total
|
||
this.loading = false
|
||
}).catch(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
handleSizeChange(val) {
|
||
this.page = 1
|
||
this.pageSize = val
|
||
this.fetchList()
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.page = val
|
||
this.fetchList()
|
||
},
|
||
handleSearch() {
|
||
this.page = 1
|
||
this.fetchList()
|
||
},
|
||
// 新增供应商
|
||
handleAdd() {
|
||
this.curInfo = {}
|
||
this.dialogVisible = true
|
||
},
|
||
commitSupplier() {
|
||
this.commitloading = true
|
||
addDailyStock(this.curInfo).then((res) => {
|
||
this.page = 1
|
||
this.fetchList()
|
||
this.$message({ type: "success", message: "新增成功!" })
|
||
this.dialogVisible = false
|
||
this.commitloading = false
|
||
}).catch(() => {
|
||
this.commitloading = false
|
||
})
|
||
},
|
||
handleImport() {
|
||
this.fileList = []
|
||
this.showImport = true
|
||
},
|
||
importFileChange(file, fileList) {
|
||
console.log(fileList)
|
||
this.fileList = fileList
|
||
},
|
||
fileRemove() {
|
||
this.fileList = []
|
||
},
|
||
commitUpload() {
|
||
if(this.fileList.length) {
|
||
this.commitloading = true
|
||
const params = new FormData();
|
||
params.append("inventoryFile", this.fileList[0].raw)
|
||
let token = localStorage.getItem("token")
|
||
axios.post("/api/supplier/daily_stock_record/inventory_import", params, {
|
||
headers: {
|
||
Authorization: `Bearer ${token}`
|
||
}
|
||
}).then((res) => {
|
||
if (res.status === 200) {
|
||
this.$message.success("导入成功")
|
||
this.page = 1
|
||
this.fetchList()
|
||
this.commitloading = false
|
||
this.showImport = false
|
||
} else {
|
||
this.commitloading = false
|
||
}
|
||
}).catch(() => {
|
||
this.commitloading = false
|
||
})
|
||
} else {
|
||
this.$message.error("请先上传文件")
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.fetchList()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.searchBox{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
white-space: nowrap;
|
||
.row{
|
||
font-size: 14px;
|
||
margin-bottom: 20px;
|
||
margin-right: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.opaBox{
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|