mirror of
https://gitee.com/hzchunfen/erp.git
synced 2025-12-01 22:50:44 +00:00
277 lines
8.6 KiB
Vue
277 lines
8.6 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="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="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="curInfo.id ? '编辑' : '新增'" :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.num" clearable :disabled="curInfo.id ? true : false"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="成本">
|
||
<el-input v-model="curInfo.cost" clearable></el-input>
|
||
</el-form-item>
|
||
<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-input v-model="curInfo.reason" 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 { getLossLog, addLossLog, updateLossLog } from "@/api/supplyChain"
|
||
import axios from "axios"
|
||
import { userList } from "@/api/user"
|
||
|
||
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: []
|
||
}
|
||
},
|
||
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 = {}
|
||
this.dialogVisible = true
|
||
},
|
||
handleEdit(row) {
|
||
this.curInfo = JSON.parse(JSON.stringify(row))
|
||
this.dialogVisible = true
|
||
},
|
||
commitSupplier() {
|
||
this.commitloading = true
|
||
let params = {
|
||
...this.curInfo
|
||
}
|
||
params.buyer_name = ''
|
||
if(params.buyer_user_id) {
|
||
params.buyer_name = this.$refs.userRef.selectedLabel
|
||
}
|
||
if(this.curInfo.id) {
|
||
updateLossLog(this.curInfo.id, params).then((res) => {
|
||
this.fetchList()
|
||
this.$message({ type: "success", message: "更新成功!" })
|
||
this.dialogVisible = false
|
||
this.commitloading = false
|
||
}).catch(() => {
|
||
this.commitloading = false
|
||
})
|
||
} else {
|
||
addLossLog(params).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("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
|
||
})
|
||
}
|
||
},
|
||
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;
|
||
}
|
||
</style>
|