<template>
<div class="app-container">
<el-card >
<div slot="header" class="clearfix">
<i class="el-icon-back" @click="goToAbout">返回 | </i>
<!-- <el-link icon="el-icon-edit" :underline="false" @click="goToAbout">编辑</el-link>-->
<span> 盘点详情</span>
</div>
<div class="" style="height: 110px; display: flex; justify-content: space-between;">
<div style="height: 100%; display: flex; justify-content: space-between;">
<div style="height: 100%; width: 70%; display: flex; justify-content: space-between;">
<div class="box">
<span style="font-size: 26px;color: #0DC291;font-weight: bold" >{{inventoryForm.productQuantity}}</span>
<span style="display: flex">
<div style="background-color: #0DC291;width: 10px;height: 10px;border-radius: 50%;margin-top: 6px;margin-right: 10px"></div>
商品数量</span>
</div>
<div class="box">
<span style="font-size: 26px;color: #00CAFF;font-weight: bold">{{inventoryForm.inventoryQuantity}}</span>
<span style="display: flex">
<div style="background-color: #00CAFF;width: 10px;height: 10px;border-radius: 50%;margin-top: 6px;margin-right: 10px"></div>
盘点数量</span>
</div>
<div class="box">
<span style="font-size: 26px;color: #F44522;font-weight: bold" >{{inventoryForm.inventoryDiscrepancy}}</span>
<span style="display: flex">
<div style="background-color: #F44522;width: 10px;height: 10px;border-radius: 50%;margin-top: 6px;margin-right: 10px"></div>
库存差异</span>
</div>
<div class="box">
<span style="font-size: 26px;color: #FA6400;font-weight: bold">{{inventoryForm.profitLossAmount}}</span>
<span style="display: flex">
<div style="background-color: #FA6400;width: 10px;height: 10px;border-radius: 50%;margin-top: 6px;margin-right: 10px"></div>
盈亏总额
</span>
</div>
</div>
<div style="height: 100%; width: 40%; display: flex; flex-direction: column; justify-content: space-between;">
<el-form ref="" label-width="100px">
<el-form-item label="制单人" style="margin-bottom: 1px">
<el-input size="mini" v-model="inventoryForm.creataByName" disabled="true"
style="width: 220Px;margin-bottom: 1px;">
</el-input>
</el-form-item>
<el-form-item label="制单时间" style="margin-bottom: 1px">
<el-input size="mini" v-model="inventoryForm.orderDate" disabled="true"
style="width: 220Px">
</el-input>
</el-form-item>
<el-form-item label="盘点编号" style="margin-bottom: 1px">
<el-input size="mini" v-model="inventoryForm.orderNumber" disabled="true"
style="width: 220Px">
</el-input>
</el-form-item>
</el-form>
<!-- <table class="container1">-->
<!-- <tr>-->
<!-- <td>制单人</td>-->
<!-- <td style="width: 10px;"> </td>-->
<!-- <td style=""><span class="underlined-text" >{{inventoryForm.creataByName}}</span></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>制单时间</td>-->
<!-- <td> </td>-->
<!-- <td><span class="underlined-text">{{parseTime(inventoryForm.orderDate)}}</span></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>盘点编号</td>-->
<!-- <td> </td>-->
<!-- <td><span class="underlined-text">{{inventoryForm.orderNumber}}</span></td>-->
<!-- </tr>-->
<!-- </table>-->
</div>
</div>
<div style="height: 100%; width: 30%; display: flex; align-items: center; justify-content: flex-end;">
<el-button type="primary" v-if="state=='await'" :disabled="saveFlag" @click="save()">保存</el-button>
<el-button type="success" v-if="state=='await'" :disabled="auditFlag" @click="audit()">生成差异单</el-button>
<el-button type="success" v-if="state=='ysh'" :disabled="storageFlag" @click="storage">退货处理库存</el-button>
<el-button type="warning" v-if="state !='await' || state=='ysh'" :disabled="voidFlag" @click="abolition()">作废</el-button>
<el-button type="warning" v-if="state !='await'" @click="exportExcel()">导出</el-button>
</div>
</div>
</el-card>
<el-card style="margin-top: 20px" >
<el-row :gutter="10" class="mb8">
<el-col :span="1.5" style="text-align: right; float: right">
<el-button
v-if="!numberInput"
type="primary"
icon="el-icon-plus"
@click="commodityAdd"
>添加盘点</el-button>
</el-col>
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
</el-row>
<el-table ref="tables"
v-loading="loading"
:data="detailsList"
:default-sort="defaultSort">
<el-table-column label="序号" align="center" prop="commodityName"/>
<el-table-column label="商品名称" align="center" prop="commodityName"/>
<el-table-column label="商品编码" align="center" prop="goodsNo"/>
<el-table-column label="进货量" align="center" prop="purchase">
<template slot-scope="scope">
{{scope.row.purchase?scope.row.purchase:'--'}}
</template>
</el-table-column>
<el-table-column label="单位" align="center" prop="unit"/>
<el-table-column label="销售量" align="center" prop="unit">
<el-table-column label="便利店销售" align="center" prop="goodsSales">
<template slot-scope="scope">
{{scope.row.goodsSales?scope.row.goodsSales:'0'}}
</template>
</el-table-column>
<el-table-column label="积分兑换" align="center" prop="inventorySales">
<template slot-scope="scope">
{{scope.row.inventorySales?scope.row.inventorySales:'0'}}
</template>
</el-table-column>
<el-table-column label="兑换卷兑换" align="center" prop="inventorySales">
<template slot-scope="scope">
{{scope.row.exchangeSales?scope.row.exchangeSales:'0'}}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="当前进价" align="center" prop="purchasePrice"/>
<el-table-column label="库存数量" align="center" prop="stock"/>
<el-table-column label="盘点数量" align="center" prop="unit">
<el-table-column label="正常商品" align="center" prop="purchasePrice">
<template slot-scope="scope">
<el-input-number :disabled="numberInput" v-model="scope.row.inventoryQuantity" @change="change(scope.row,2)" controls-position="right" :precision="0" :min="0" :max="100000000" :step="1" style="max-width: 100%"></el-input-number>
</template>
</el-table-column>
<el-table-column label="货损数量" align="center" prop="damageQuantity">
<template slot-scope="scope">
<el-input-number :disabled="numberInput" v-model="scope.row.damageQuantity" @change="change(scope.row,2)" controls-position="right" :precision="0" :min="0" :max="100000000" :step="1" style="max-width: 100%"></el-input-number>
</template>
</el-table-column>
<el-table-column label="总盘点数量" align="center" prop="inventoryQuantity">
<template slot-scope="scope">
{{ scope.row.inventoryQuantity + scope.row.damageQuantity}}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="库存差异" align="center" prop="inventoryDiscrepancy"/>
<el-table-column label="盈亏金额" align="center" prop="profitLossAmount"/>
<el-table-column v-if="!numberInput" label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="commodityDel(scope.row)"
>删除</el-button>
</template>
<!-- v-hasPermi="['']"-->
</el-table-column>
</el-table>
<!-- <pagination-->
<!-- v-show="total>0"-->
<!-- :total="total"-->
<!-- :page.sync="queryParams.page"-->
<!-- :limit.sync="queryParams.pageSize"-->
<!-- @pagination="getList"-->
<!-- />-->
</el-card>
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false">
<el-container>
<el-header style="">
<el-form ref="tankForm" :model="commodityForm" label-width="80px">
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="商品分类">
<el-select
v-model="commodityForm.cvsGoodId"
placeholder="全部"
clearable
>
<el-option v-for="item in cvsGoodList" :key="item.id" :label="item.name" :value="item.id"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="供应商" prop="supplierId">
<el-select
v-model="commodityForm.supplierId"
placeholder="全部"
clearable
>
<el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="详细信息">
<el-input v-model="commodityForm.remark" placeholder="商品名称，拼音码，条形码等信息" ></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="inquire()">查询</el-button>
</el-col>
</el-row>
</el-form>
</el-header>
<el-main>
<el-table ref="tables"
v-loading="loading"
:data="commodityList"
@selection-change="handleSelectionChange"
border
:default-sort="defaultSort">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column label="商品名称" align="center" prop="name"/>
<el-table-column label="商品编码" align="center" prop="goodsNo"/>
<el-table-column label="分类名称" prop="cvsGoodId" align="center">
<template slot-scope="scope">
<span>{{ getName(cvsGoodList, scope.row.cvsGoodId) }}</span>
</template>
</el-table-column>
<el-table-column label="供应商" prop="supplierId" align="center">
<template slot-scope="scope">
<span>{{ getName(supplierList, scope.row.supplierId) }}</span>
</template>
</el-table-column>
<el-table-column label="单位" align="center" prop="unit"/>
<el-table-column label="当前库存" align="center" prop="stock"/>
</el-table>
</el-main>
</el-container>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="addCommodity">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {getAuditPremApi} from "@/api/oilConfig/staff";
import {BigNumber} from "bignumber.js";
import {listLJGoods} from "@/api/convenienceStore/ljgoods";
import {getName,parseTime} from "../../../utils/fuint";
import {selectParentById, selectTree} from "@/api/convenienceStore/goods";
import {listSupplier} from "@/api/convenienceStore/supplier";
import {
getInventoryDetailsPageApi,
delDetailsApi,
editInventoryApi,
addInventoryApi,
batchProcessingApi,
auditInventoryApi,
storageInventoryApi,
abolitionInventoryApi,
exportExcelApi, getSalesByMtInventoryApi
} from "@/api/convenienceStore/inventory";
export default {
name: "details",
props:[
'PinventoryId',
'PorderNumber',
'PorderDate',
'PapprovalStatus',
'PcreataByName',
],
data() {
return {
detailsList: [],
commodityList: [],
commodityForm:{
cvsGoodId: "",
cvsGood: "",
supplierId: "",
supplier: "",
detailed: "",
remark: "",
page: 1,
pageSize: 10,
isRecovery:0,
},
inventoryForm: {
inventoryId:this.$props.PinventoryId,
id:this.$props.PinventoryId,
orderNumber: this.$props.PorderNumber,
approvalStatus: this.$props.PapprovalStatus,
orderDate: this.$props.PorderDate,
creataByName: this.$props.PcreataByName,
roductQuantity:0, // 商品数量
inventoryQuantity: 0 ,// 盘点数量
damageQuantity: 0 ,// 货损数量
inventoryDiscrepancy: 0,// 库存差异
profitLossAmount: 0// 盈亏总额
},
inventoryId : this.$props.PinventoryId,
// 商品分类列表
cvsGoodList:[],
// 供应商列表
supplierList:[],
state:this.$props.PapprovalStatus,
saveFlag:false,
auditFlag:true,
voidFlag:true,
storageFlag:true,
multipleSelection:[], // 表格
// 弹出框标题
title:'选择商品',
// 显示搜索条件
showSearch: true,
disableInput: false, // 默认不禁用
// 是否显示弹出层
open: false,
// 总条数
total: 0,
// 查询参数
queryParams: {
// supplierId: '',
inventoryId: this.$props.PinventoryId,
page:null,
pageSize:null
},
// 遮罩层
loading: false,
// 默认排序
defaultSort: {prop: 'createTime', order: 'descending'},
// 表单校验
rules: {
supplierName: [
{ required: true, message: "供应商名称不能为空", trigger: "blur" },
],
},
}
},
async created() {
if (this.inventoryForm.orderDate) {
this.inventoryForm.orderDate = parseTime(this.inventoryForm.orderDate)
}
// this.inventoryForm.inventoryId = this.$props.PinventoryId
// this.inventoryId = this.$props.PinventoryId
// this.queryParams.inventoryId = this.$props.PinventoryId
// this.inventoryForm.orderNumber = this.$props.PorderNumber
// this.inventoryForm.orderDate = this.$props.PorderDate
// this.inventoryForm.approvalStatus = this.$props.PapprovalStatus
this.state = this.$props.PapprovalStatus
if ( this.state == null) {
this.state = 'await'
}
if (this.state=='await') {
this.numberInput = false
}else {
this.numberInput = true
}
console.log("this.inventoryForm",this.inventoryForm)
if (this.inventoryForm.orderNumber == null) {
this.refresh();
}
if (this.inventoryForm.orderDate == null) {
this.inventoryForm.orderDate =new Date()
}
this.getDetailsList();
this.getQueryList();
this.JudgmentButton();
},
methods: {
parseTime,
getDetailsList() {
let this_ = this
getInventoryDetailsPageApi(this.queryParams).then(res=>{
this_.detailsList = res.data.records;
this.total = res.data.total;
this.inventoryForm.productQuantity = res.data.total;
this.sumMethod(res.data.records);
})
},
getCommodityList() {
let this_ = this
listLJGoods(this_.commodityForm).then(res=>{
this_.commodityList = res.data.records;
this_.sumMethod(res.data.records);
// this.total = response.data.total;
})
},
// 页面跳转
goToAbout() {
this.$router.push('/convenienceStore/inventory/index');
},
commodityAdd() {
this.open = true;
},
commodityDel(data) {
this.$confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (data.id != null) {
delDetailsApi(data).then(res=>{
})
}
const index = this.detailsList.indexOf(data); // 查找要删除的对象的索引
if (index !== -1) {
this.detailsList.splice(index, 1); // 使用splice方法删除对象
}
this.inventoryForm.productQuantity--;
this.sumMethod(this.detailsList);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 查询商品
inquire() {
this.getCommodityList();
},
// 改变数字时
change(data,flag) {
let profitLossAmount = new BigNumber(data.profitLossAmount);
let inventoryDiscrepancy = new BigNumber(data.inventoryDiscrepancy);
let inventoryQuantity = new BigNumber(data.inventoryQuantity); //正常
let damageQuantity = new BigNumber(data.damageQuantity); //货损
let purchasePrice = new BigNumber(data.purchasePrice);
let stock = new BigNumber(data.stock);
// 计算库存差异
console.log("inventoryQuantity",inventoryQuantity)
console.log("damageQuantity",damageQuantity)
console.log("stock",stock)
let addStocke = inventoryQuantity.minus(damageQuantity) // 正常减货损
// let addStocke = inventoryQuantity.plus(damageQuantity)
inventoryDiscrepancy = addStocke.minus(stock) //
// 计算盈亏金额
profitLossAmount = inventoryDiscrepancy.multipliedBy(purchasePrice);
// data.inventoryDiscrepancy = inventoryDiscrepancy.toNumber();
// data.profitLossAmount = profitLossAmount.toNumber();
// 计算盈亏
// 库存差异
let a = inventoryQuantity.minus(stock)
let b= a.minus(purchasePrice)
// 盈亏金额
data.inventoryDiscrepancy = a.toNumber();
data.profitLossAmount = b.toNumber();
this.sumMethod(this.detailsList)
},
// 计算header数据
sumMethod(data) {
let this_ = this
// if (data.length>0) {
// this_.inventoryForm.productQuantity = data.length
// } else {
// this_.inventoryForm.productQuantity = 0
// }
this_.inventoryForm.productQuantity = data.length,
this_.inventoryForm.inventoryQuantity = new BigNumber(0),
this_.inventoryForm.damageQuantity = new BigNumber(0),
this_.inventoryForm.inventoryDiscrepancy = new BigNumber(0),
this_.inventoryForm.profitLossAmount = new BigNumber(0),
data.forEach(da => {
if (da.inventoryQuantity != null) {
this_.inventoryForm.inventoryQuantity= this_.inventoryForm.inventoryQuantity.plus(da.inventoryQuantity)
}
if (da.inventoryDiscrepancy != null) {
this_.inventoryForm.inventoryDiscrepancy = this_.inventoryForm.inventoryDiscrepancy.plus(da.inventoryDiscrepancy)
}
if (da.profitLossAmount != null) {
this_.inventoryForm.profitLossAmount = this_.inventoryForm.profitLossAmount.plus(da.profitLossAmount)
}
})
},
async addCommodity () {
let this_ = this
let sum = 0;
for (const mul of this.multipleSelection) {
let flag = true;
this_.detailsList.forEach(det=>{
if (mul.id == det.goodsId) {
flag = false
sum++
}
})
if(flag) {
let getPurchaseByTankIdData
await getSalesByMtInventoryApi({goodsId:mul.id}).then(res=>{
getPurchaseByTankIdData = res.data
})
let now = {
inventoryId: this.inventoryId,
goodsId: mul.id,
commodityName: mul.name,
cvsGoodId: mul.cvsGoodId,
unit:mul.unit,
stock:mul.stock,
purchasePrice: mul.buyingPrice,
goodsNo:mul.goodsNo,
inventoryQuantity:1,
damageQuantity:0,
profitLossAmount:0, // 盈亏金额
inventoryDiscrepancy:0, // 库存差异
purchase:getPurchaseByTankIdData.purchase,
goodsSales:getPurchaseByTankIdData.goodsSales,
inventorySales:getPurchaseByTankIdData.inventorySales,
exchangeSales:getPurchaseByTankIdData.exchangeSales,
}
this_.detailsList.push(now)
}
}
if(sum>0) {
this.$modal.msgError("同一货损单不能有两件相同的商品，您选择了"+sum+"件相同的商品，已为您剔除");
}
this_.open = false
this_.open = false
this.multipleSelection = []
this.commodityForm = {
cvsGoodId: "",
cvsGood: "",
supplierId: "",
supplier: "",
detailed: "",
remark: "",
page: 1,
pageSize: 1000,
total: 0,
isRecovery:0,
}
this.commodityList = []
this_.inventoryForm.inventoryQuantity = this_.inventoryForm.inventoryQuantity + this_.multipleSelection.length
this_.sumMethod(this_.detailsList);
},
// 查询搜索列表信息
getQueryList(){
selectTree().then(response => {
this.cvsGoodList = response.data.records
});
listSupplier().then(response => {
this.supplierList = response.data.records
})
},
cancel() {
this.open = false;
},
// 表格选择器
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 刷新订单编号
refresh() {
let timestamp = new Date().getTime();
let min = 100; // 最小的四位数是 1000
let max = 999; // 最大的四位数是 9999
let randomFourDigitNumber = Math.floor(Math.random() * (max - min + 1)) + min;
this.inventoryForm.orderNumber = timestamp+randomFourDigitNumber.toString();
},
// 判断按钮是否可用
async JudgmentButton(){
let judgmentPermissions1 = await this.judgmentPermissions("盘点商品审核");
if (judgmentPermissions1 > 0){
this.auditFlag=false,
this.voidFlag=false
}
let judgmentPermissions2 = await this.judgmentPermissions("盘点商品入库");
if (judgmentPermissions2 > 0){
this.storageFlag = false
}
let judgmentPermissions3 = await this.judgmentPermissions("盘点商品废止");
if (judgmentPermissions3 > 0){
this.voidFlag=false
}else {
this.voidFlag=true
}
},
// 判断权限
async judgmentPermissions(data) {
let fil ={
auditPrem:data
}
return await getAuditPremApi(fil).then(res => {
return res.data
});
},
async save(flag){
let this_ = this
// 保存时修改退货单
// inventoryForm: {
// inventoryId:this.$props.PinventoryId,
// id:this.$props.PinventoryId,
// orderNumber: this.$props.PorderNumber,
// approvalStatus: this.$props.PapprovalStatus,
// orderDate: this.$props.PorderDate,
// creataByName: this.$props.PcreataByName,
// roductQuantity:0, // 商品数量
// inventoryQuantity: 0 // 盘点数量
// },
if(this_.detailsList.length<=0) {
this.$modal.msgError("盘点单不能为空");
return -1;
}
await editInventoryApi(this.inventoryForm).then(res=>{
// 批量保存订单
batchProcessingApi(this_.detailsList).then(res=>{
this.$modal.msgSuccess("保存成功");
if (flag != -1) {
this.goToAbout();
}
}).catch(res=>{
this.$modal.msgError("保存失败");
})
})
},
// 保存并审核
async audit(){
// 保存
let number = await this.save(-1);
if (number != -1) {
// 审核
let fil ={
id: this.inventoryId
}
console.log(" id: this.inventoryId",fil)
await auditInventoryApi(fil).then(res => {
if (res.data) {
this.state = 'ysh'
this.$modal.msgWarning("审核成功");
}else {
this.$modal.msgWarning("暂无审核权限");
}
this.goToAbout()
})
}
},
// 入库
storage() {
let this_ = this;
this.$confirm('确认后盘点中的对应商品入库商品库存将发生变化，且不可逆，确认已按照盘点数量入库吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 审核
let fil ={
id: this.inventoryId
}
storageInventoryApi(fil).then(res => {
this.state = 'qrts'
this.$modal.msgWarning("入库成功");
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
// 作废
abolition(){
if (this.inventoryId < 0) {
this.$modal.msgWarning("数据未保存，不可废弃");
return;
}
this.$confirm('确定要废弃盘点好的数据吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let fil ={
id: this.inventoryId
}
abolitioninventoryApi(fil).then(res => {
if (res.data) {
this.state = 'yzf'
this.$modal.msgWarning("作废成功");
this.goToAbout()
} else {
this.$modal.msgWarning("暂无作废权限");
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
})
},
async exportExcel() {
let fil ={
inventoryId: this.inventoryId
}
exportExcelApi(fil).then(res=>{
console.log("res",res)
// this.downloadFile(res);
const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
this.$download.saveAs(blob,this.inventoryForm.orderNumber+'.xlsx')
})
},
}
}
</script>
<style scoped lang="scss">
.app-container{
width: 100%;
height: 100%;
background: #f6f8f9;
}
/* .underlined-text {
/* padding-bottom: 10px; /* 通过增加下边距来调整文本与下划线的间距 */
/* text-decoration: underline; 添加下划线 */
/* border-bottom: 1px solid; */
/* padding-bottom: 3px; */
/* } */
.container {
height: 100%;
width: 38%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.container p {
margin: 0; /* 重置段落的上下外边距 */
font-size: 15px; /* 调整文字大小 */
}
.underlined-text {
border-bottom: 1px solid;
padding-bottom: 3px;
/* text-decoration: underline; */
/* vertical-align: middle; */
}
.box {
height: 100%;
width: 212px;
margin-right: 10px;
background: #FFFFFF;
border: 1px solid #FF9655;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
padding-left: 20px;
}
</style>