mirror of
https://gitee.com/hzchunfen/erp.git
synced 2025-12-01 06:30:49 +00:00
450 lines
14 KiB
Vue
450 lines
14 KiB
Vue
<template>
|
||
<div class="pageBox">
|
||
<div class="cardBox">
|
||
<div class="searchBox">
|
||
<div class="row">
|
||
<span>商品名称：</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="external_sku_id" label="商品编码" />
|
||
<!-- <el-table-column prop="sku_id" label="skuID" /> -->
|
||
<el-table-column prop="num" label="数量" />
|
||
<el-table-column prop="cost" label="成本" />
|
||
<el-table-column prop="buyer_name" label="采购人姓名" />
|
||
<el-table-column prop="reason" label="报损原因" />
|
||
<el-table-column prop="phenomenon" label="报损现象" />
|
||
<el-table-column prop="created_at" label="创建时间" align="center" />
|
||
<el-table-column label="操作" width="120" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit" size="mini">编辑</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</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="900px">
|
||
<el-form label-width="90px" :inline="true">
|
||
<el-form-item label="采购人:">
|
||
<el-select v-model="curInfo.buyer_id" clearable filterable ref="userBatchRef">
|
||
<el-option v-for="item in usersList" :key="item.id" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div v-for="(item, index) in lossOrders" :key="index" class="bgBox">
|
||
<div class="close" @click="delItem(index)"><i class="el-icon-delete-solid"></i></div>
|
||
<el-form label-width="90px" :inline="true">
|
||
<el-form-item label="商品名称:">
|
||
<el-select v-model="item.external_sku_id" filterable remote reserve-keyword placeholder="商品名称" clearable
|
||
:remote-method="remoteMethod" :loading="searchLoading">
|
||
<el-option v-for="it in goodsList" :key="it.external_sku_id" :label="it.title" :value="it.external_sku_id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="商品编码:">
|
||
<el-input v-model="item.external_sku_id" clearable></el-input>
|
||
</el-form-item> -->
|
||
<el-form-item label="数量:">
|
||
<el-input v-model="item.num" clearable @input="changeInput(index, item)"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="成本:">
|
||
<el-input v-model="item.cost" clearable @input="changeInput(index, item)" style="width: 215px;">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="商品总价:">
|
||
<el-input v-model="item.total_price" style="width: 215px;">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="报损原因:">
|
||
<el-input v-model="item.reason" clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="报损现象:">
|
||
<el-input v-model="item.phenomenon" clearable></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="btn" @click="addItem()"><i class="el-icon-plus"></i>添加记录</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="commitBatchLoss" :loading="commitloading">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<el-dialog title="编辑" :visible.sync="editDialog" width="500px">
|
||
<el-form label-width="90px">
|
||
<el-form-item label="采购人">
|
||
<el-select v-model="curInfo.buyer_user_id" clearable filterable ref="userRef">
|
||
<el-option v-for="item in usersList" :key="item.id" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="商品名称">
|
||
<el-select v-model="curInfo.external_sku_id" filterable remote reserve-keyword placeholder="商品名称" clearable
|
||
:remote-method="editRemoteMethod" :loading="searchLoading">
|
||
<el-option v-for="it in editGoodsList" :key="it.external_sku_id" :label="it.title" :value="it.external_sku_id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- <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.num" disabled></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="成本">
|
||
<el-input v-model="curInfo.cost" clearable>
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="商品总价">
|
||
<el-input v-model="curInfo.total_price" disabled>
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="报损原因">
|
||
<el-input v-model="curInfo.reason" clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="报损现象">
|
||
<el-input v-model="curInfo.phenomenon" 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="commitEditLoss" :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 { getLossLog, batchAddLossLog, updateLossLog } from "@/api/supplyChain"
|
||
import axios from "axios"
|
||
import { userList } from "@/api/user"
|
||
import { goodsSkusList } from "@/api/goods"
|
||
|
||
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: [],
|
||
usersList: [],
|
||
lossOrders: [],
|
||
editDialog: false,
|
||
goodsList: [],
|
||
searchLoading: false,
|
||
editGoodsList: []
|
||
}
|
||
},
|
||
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] : ''
|
||
}
|
||
getLossLog(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 = {
|
||
buyer_id: localStorage.getItem("userId")
|
||
}
|
||
this.lossOrders = [{
|
||
external_sku_id: '',
|
||
num: '',
|
||
cost: '',
|
||
total_price: '',
|
||
reason: '',
|
||
phenomenon: ''
|
||
}]
|
||
this.dialogVisible = true
|
||
},
|
||
delItem(i) {
|
||
this.lossOrders.splice(i, 1)
|
||
},
|
||
addItem() {
|
||
this.lossOrders.push({
|
||
external_sku_id: '',
|
||
num: '',
|
||
cost: '',
|
||
total_price: '',
|
||
reason: '',
|
||
phenomenon: ''
|
||
})
|
||
},
|
||
handleEdit(row) {
|
||
this.curInfo = JSON.parse(JSON.stringify(row))
|
||
this.editGoodsList = [{
|
||
external_sku_id: row.external_sku_id,
|
||
title: row.goods_sku && row.goods_sku.name
|
||
}]
|
||
this.curInfo.total_price = (row.cost * 1) * (row.num * 1)
|
||
this.editDialog = true
|
||
},
|
||
commitBatchLoss() {
|
||
this.commitloading = true
|
||
let list = []
|
||
let params = {
|
||
...this.curInfo
|
||
}
|
||
params.buyer_name = ''
|
||
if(params.buyer_id) {
|
||
params.buyer_name = this.$refs.userBatchRef.selectedLabel
|
||
}
|
||
this.lossOrders.forEach((item) => {
|
||
list.push({
|
||
...item,
|
||
buyer_name: params.buyer_name,
|
||
buyer_id: params.buyer_id
|
||
})
|
||
})
|
||
batchAddLossLog({lossOrders: list}).then((res) => {
|
||
this.page = 1
|
||
this.fetchList()
|
||
this.$message({ type: "success", message: "新增成功!" })
|
||
this.dialogVisible = false
|
||
this.commitloading = false
|
||
}).catch(() => {
|
||
this.commitloading = false
|
||
})
|
||
},
|
||
commitEditLoss() {
|
||
this.commitloading = true
|
||
let params = {
|
||
...this.curInfo
|
||
}
|
||
params.buyer_name = ''
|
||
if(params.buyer_id) {
|
||
params.buyer_name = this.$refs.userRef.selectedLabel
|
||
}
|
||
updateLossLog(this.curInfo.id, params).then((res) => {
|
||
this.fetchList()
|
||
this.$message({ type: "success", message: "更新成功!" })
|
||
this.editDialog = 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("lossFile", this.fileList[0].raw)
|
||
let token = localStorage.getItem("token")
|
||
axios.post("/api/supplier/loss_record/loss_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("请先上传文件");
|
||
}
|
||
},
|
||
getUserList() {
|
||
let params = {
|
||
page: 1,
|
||
per_page: 9999
|
||
}
|
||
userList(params).then((res) => {
|
||
this.usersList = res.data.data
|
||
})
|
||
},
|
||
changeInput(index, row) {
|
||
this.$set(this.lossOrders[index], 'total_price', ((row.num * 1) * (row.cost * 1)))
|
||
},
|
||
remoteMethod(query) {
|
||
if (query !== '') {
|
||
this.searchLoading = true
|
||
setTimeout(() => {
|
||
this.searchLoading = false
|
||
goodsSkusList(query).then((res) => {
|
||
this.goodsList = res.data.filter(item => {
|
||
return item.title.toLowerCase().indexOf(query.toLowerCase()) > -1
|
||
})
|
||
})
|
||
}, 200)
|
||
} else {
|
||
this.goodsList = []
|
||
}
|
||
},
|
||
editRemoteMethod(query) {
|
||
if (query !== '') {
|
||
this.searchLoading = true
|
||
setTimeout(() => {
|
||
this.searchLoading = false
|
||
goodsSkusList(query).then((res) => {
|
||
this.editGoodsList = res.data.filter(item => {
|
||
return item.title.toLowerCase().indexOf(query.toLowerCase()) > -1
|
||
})
|
||
})
|
||
}, 200)
|
||
} else {
|
||
this.editGoodsList = []
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.fetchList()
|
||
this.getUserList()
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
.bgBox{
|
||
position: relative;
|
||
border-radius: 5px;
|
||
background-color: #f5f2f2;
|
||
margin-bottom: 15px;
|
||
padding: 15px 30px 15px 0;
|
||
.close{
|
||
color: #f00;
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 5px;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.btn{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #409eff;
|
||
cursor: pointer;
|
||
width: fit-content;
|
||
}
|
||
</style>
|