bonus-ui/src/views/foodManage/stockManage/inventoryCount/edit.vue

686 lines
32 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div style="padding: 10px;background: #E5EBF6;min-height: 830px;">
<div style="background: #FFF;padding: 10px;border-radius: 10px;margin-bottom: 20px;">
<el-form :model="baseInfo" ref="baseInfo" :rules="baseRules" size="medium" :inline="true" label-width="110px">
<el-form-item label="盘点单号" prop="checkCode">
<el-input v-model="baseInfo.checkCode" placeholder="盘点单号自动生成" disabled maxlength="20" clearable style="width: 240px"/>
</el-form-item>
<el-form-item label="所属区域" prop="areaId">
<el-cascader v-model="baseInfo.areaId"
:options="treeAreaOptions" :filterable="true" style="width: 240px" :show-all-levels="false"
:disabled="materialList.length>0"
:props="{
emitPath: false,// 若设置 false则只返回该节点的值只返回最后选择的id
checkStrictly: false,//来设置父子节点取消选中关联,从而达到选择任意一级选项的目的
value:'id',label:'label'
}" @change="handleAreaChange">
</el-cascader>
</el-form-item>
<el-form-item label="货品仓库" prop="warehouseId">
<el-select v-model="baseInfo.warehouseId" clearable :disabled="materialList.length>0" placeholder="请选择货品仓库" style="width: 100%;">
<el-option v-for="item in wareHouseOptions"
:key="item.warehouseId"
:label="item.warehouseName"
:value="item.warehouseId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="盘点员" prop="firstCheckUser">
<el-input v-model="baseInfo.firstCheckUser" placeholder="盘点员" maxlength="20" clearable style="width: 240px"/>
</el-form-item>
<el-form-item label="盘点开始时间" prop="firstCheckDate">
<el-date-picker
v-model="baseInfo.firstCheckDate"
type="datetime" align="right"
format="yyyy-MM-dd HH:mm:ss" style="width: 240px;"
:picker-options="pickerOptions" @change="baseInfo.firstCheckDate=formatDateTime(baseInfo.firstCheckDate)">
</el-date-picker>
</el-form-item>
<el-form-item label="盘点结束时间" prop="secondCheckDate">
<el-date-picker
v-model="baseInfo.secondCheckDate"
type="datetime" align="right"
format="yyyy-MM-dd HH:mm:ss" style="width: 240px;"
:picker-options="pickerOptions" @change="baseInfo.secondCheckDate=formatDateTime(baseInfo.secondCheckDate)">
</el-date-picker>
</el-form-item>
<!-- <el-form-item label="备注" prop="remark">
<el-input v-model="baseInfo.remark" placeholder="请输入备注" maxlength="30" clearable style="width: 240px"/>
</el-form-item> -->
</el-form>
</div>
<div style="width: 100%;height: 450px;padding: 10px;border-radius: 10px;margin-bottom: 10px;background: #FFF;">
<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
<div>
货品信息
</div>
<div style="display: flex;align-items: center;">
<el-button type="primary" plain @click="addMaterial">添加货品</el-button>
<!-- <el-button type="primary" plain @click="importMaterial">导入库存盘点</el-button> -->
<el-button type="danger" plain @click="delMaterial">删除</el-button>
</div>
</div>
<div style="width: 100%;height: 400px;overflow-y: auto;">
<el-table v-loading="loading" :data="materialList" ref="multipleTable" height="380" :row-key="(row)=>{return row.materialId}" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" :reserve-selection="true" />
<el-table-column label="序号" align="center" width="80" type="index" />
<!-- <el-table-column label="图片" align="center" prop="" :show-overflow-tooltip="true" /> -->
<el-table-column label="货品编码" align="center" prop="materialCode" :show-overflow-tooltip="true" />
<el-table-column label="货品名称" align="center" prop="materialName" :show-overflow-tooltip="true" />
<el-table-column label="货品类别" align="center" prop="materialTypeName" :show-overflow-tooltip="true" />
<el-table-column label="计量单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
<el-table-column label="货品规格" align="center" prop="size" :show-overflow-tooltip="true">
</el-table-column>
<!-- <el-table-column label="批次号" align="center" prop="intoCode" :show-overflow-tooltip="true" width="200"/> -->
<el-table-column label="账面数" align="center" prop="bookNum" :show-overflow-tooltip="true" />
<!-- <el-table-column label="单价(元)" align="center" prop="price" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ (scope.row.price/100).toFixed(2)||"" }}</span>
</template>
</el-table-column> -->
<el-table-column label="账面总额(元)" align="center" prop="bookAmount" :show-overflow-tooltip="true" width="120">
<template slot-scope="scope">
<span>{{ (scope.row.bookAmount/100).toFixed(2)||"" }}</span>
</template>
</el-table-column>
<el-table-column label="实盘总额(元)" align="center" prop="" :show-overflow-tooltip="true" width="120">
<template slot-scope="scope">
<span>{{ (scope.row.actualNum*(scope.row.price/100)).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="差异数" align="center" prop="" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ (scope.row.actualNum-scope.row.bookNum).toFixed(2) }}</span>
</template>
</el-table-column>
<!-- <el-table-column label="差异总额(元)" align="center" prop="" :show-overflow-tooltip="true" width="120">
<template slot-scope="scope">
<span>{{ (Number(scope.row.actualNum)-Number(scope.row.bookNum))*scope.row.price/100 }}</span>
</template>
</el-table-column> -->
<el-table-column label="实盘数量" align="center" prop="actualNum" :show-overflow-tooltip="true" width="120">
<template slot-scope="scope">
<el-input v-model.number="scope.row.actualNum" placeholder="请输入" maxlength="10" clearable @input="(v)=>(scope.row.actualNum=v.replace(/[^\d]/g,''))"/>
</template>
</el-table-column>
<el-table-column label="差异原因" align="center" prop="differReason" :show-overflow-tooltip="true" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.differReason" placeholder="请输入" maxlength="20" clearable/>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div style="width: 100%;height: 80px;padding: 10px;background: #FFF;border-radius: 10px;display: flex;align-items: center;justify-content: center;">
<el-button type="primary" plain @click="confirmSave" :loading="loadingBtn">保存草稿</el-button>
<el-button type="success" plain @click="confirmSubmit" :loading="loadingBtn">提交</el-button>
<el-button @click="jumpList">返回</el-button>
</div>
<!-- 选择货品 -->
<el-dialog title="选择货品" :visible.sync="openDialog" width="65%" append-to-body >
<div style="width: 100%;height:620px;">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="货品类别" prop="materialTypeIds">
<el-cascader v-model="queryParams.materialTypeIds"
:options="materialTreeOptions" :filterable="true" style="width: 240px" :show-all-levels="false"
:props="{
multiple: true,
emitPath: false,// 若设置 false则只返回该节点的值只返回最后选择的id
checkStrictly: false,//来设置父子节点取消选中关联,从而达到选择任意一级选项的目的
value:'id',label:'categoryName'
}" collapse-tags>
</el-cascader>
</el-form-item>
<el-form-item label="货品编码" prop="materialCode">
<el-input v-model="queryParams.materialCode" placeholder="请输入货品编码" maxlength="20" clearable style="width: 240px"/>
</el-form-item>
<el-form-item label="货品名称" prop="materialName">
<el-input v-model="queryParams.materialName" placeholder="请输入货品名称" maxlength="20" clearable style="width: 240px"/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="tableListData" ref="multipleTable1" height="520" :row-key="(row)=>{return row.inventoryId}" @selection-change="handleSelectionChange2">
<el-table-column type="selection" width="50" align="center" :reserve-selection="true" />
<el-table-column label="序号" align="center" width="80" type="index">
<template slot-scope="scope">
<span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<!-- <el-table-column label="图片" align="center" prop="" :show-overflow-tooltip="true" /> -->
<el-table-column label="货品编码" align="center" prop="materialCode" :show-overflow-tooltip="true" />
<el-table-column label="货品名称" align="center" prop="materialName" :show-overflow-tooltip="true" />
<el-table-column label="货品类别" align="center" prop="materialTypeName" :show-overflow-tooltip="true" />
<el-table-column label="计量单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
<el-table-column label="单价" align="center" prop="price" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ (scope.row.price/100).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="货品库存" align="center" prop="bookNum" :show-overflow-tooltip="true" />
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmChosen">确 定</el-button>
<el-button @click="openDialog=false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { imgUpLoadTwo } from '@/api/system/upload'
import { systemAreaTreeApi } from "@/api/base/stall";
import { systemMaterialTreeApi,getMaterialInStockBatchApi,drpWareHousePageApi,supplierPageApi } from "@/api/foodManage/stockManage";
import { getCheckInventoryInfoApi,addCheckInventorySaveApi,addCheckInventoryCommitApi,getCheckInventoryMaterialPageApi,editCheckInventorySaveApi,editCheckInventoryCommitApi } from "@/api/foodManage/stockManage";
export default {
name: "InventoryCountEdit",
dicts: [],
data() {
return {
countRowData:{},//页面传参
loading:false,
loadingBtn:false,
baseInfo: {
contractType:undefined,
areaId:undefined,
canteenId:undefined,
},
// 表单校验
baseRules: {
areaId: [
{ required: true, message: "所属区域不能为空", trigger: "change" }
],
canteenId: [
{ required: true, message: "所属食堂不能为空", trigger: "change" }
],
stallId: [
{ required: true, message: "所属档口不能为空", trigger: "change" }
],
supplierId: [
{ required: true, message: "供应商不能为空", trigger: "change" }
],
firstCheckDate: [
{ required: true, message: "盘点开始时间不能为空", trigger: "change" }
],
firstCheckUser: [
{ required: true, message: "盘点员不能为空", trigger: "change" }
],
secondCheckDate: [
{ required: true, message: "盘点结束时间不能为空", trigger: "change" }
],
warehouseId: [
{ required: true, message: "货品仓库不能为空", trigger: "change" }
],
intoType: [
{ required: true, message: "入库类型不能为空", trigger: "change" }
]
},
treeAreaOptions:[],
canteenOptions:[],
stallOptions:[],
supplierOptions:[],
wareHouseOptions:[],
pickerOptions: {
disabledDate(v) {
return v.getTime() < (new Date().getTime() - 86400000);// - 86400000是否包括当天
}
},
materialList:[],//货品信息-表格数据
batchIds:[],//货品信息-表格数据-多选
openDialog:false,
materialTreeOptions:[],
queryParams: { // 货品弹窗-货品表格-查询参数
pageNum: 1,
pageSize: 10,
},
pickerOptions2: {
disabledDate(v) {
return v.getTime() < (new Date().getTime() - 86400000) ||v.getTime() > (new Date().getTime() + 3600 * 1000 * 24 * 60);// - 86400000是否包括当天
}
},
pickerOptions3: {
disabledDate(v) {
return v.getTime() > (new Date().getTime() - 86400000) ||v.getTime() > (new Date().getTime() + 3600 * 1000 * 24 * 60);// - 86400000是否包括当天
}
},
total: 0, // 总条数
tableListData: [],//货品弹窗-货品表格数据
batchChosenMaterial:[],//货品弹窗-货品表格-选中的货品数组
noMaterial:false,
};
},
created() {
this.getAreaTreeData()
this.getMaterialTree()
if(this.$route.query.countRowData){
this.countRowData = JSON.parse(this.$route.query.countRowData)
this.getContractInfo()
}
},
watch:{
'$route.query.countRowData':function(newId, oldId) {
if(newId){
this.countRowData = JSON.parse(newId)
this.getContractInfo()
}else{
this.baseInfo={}
this.materialList=[]
}
},
},
methods: {
// 返回列表页
jumpList() {
const obj = { path: "/foodManage/stockManage/inventoryCountEdit" };
this.$tab.closeOpenPage(obj);
this.$router.replace({ path: "/foodManage/stockManage/inventoryCount" }); // 要打开的页面
},
getContractInfo(){
console.log(this.countRowData)
let param = {
checkId:this.countRowData.checkId
}
//查询查询食堂下拉结构
getCheckInventoryInfoApi(param).then((response) => {
this.baseInfo = response.data;
this.$set(this.baseInfo,"firstCheckUser",this.baseInfo.firstCheckUserName)
this.materialList = this.baseInfo.detailList;
// this.$set(this.baseInfo,'areaId',Number(response.data.areaId))
// this.materialList.forEach(item=>{
// this.$set(item,"price",Number(item.price)/100)
// })
drpWareHousePageApi({ areaId:this.baseInfo.areaId }).then((response) => {
this.wareHouseOptions = response.rows||[];
// this.$set(this.baseInfo,'warehouseId',this.baseInfo.warehouseId)
});
supplierPageApi({ isPaging:1,areaIdList:[] }).then((response) => {
this.supplierOptions = response.rows||[];
});
});
},
//区域树
getAreaTreeData() {
systemAreaTreeApi({}).then((response) => {
this.treeAreaOptions = response.data;
});
},
getFirstChild(node) {
if (!node.children || node.children.length === 0) {
return node; // 没有子节点或子节点为空,返回当前节点
} else {
return this.getFirstChild(node.children[0]); // 递归调用最后一个子节点
}
},
//选中区域-查询食堂
handleAreaChange(e){
this.getWareHouseData()
this.getSupplierData()
},
/** 查询供应商下拉结构 */
getWareHouseData() {
drpWareHousePageApi({ areaId:this.baseInfo.areaId }).then((response) => {
this.wareHouseOptions = response.rows||[];
this.$set(this.baseInfo,'warehouseId',null)
});
},
/** 查询供应商下拉结构 */
getSupplierData() {
supplierPageApi({ isPaging:1,areaIdList:[] }).then((response) => {
this.supplierOptions = response.rows||[];
});
},
/** 查询货品类别下拉树结构 */
getMaterialTree() {
let param = {
// goodsType:1
}
systemMaterialTreeApi(param).then((response) => {
this.materialTreeOptions = response.data;
});
},
//选择日期范围
changeDateRange(e){
//this.formatDate(e[0])
},
// 多选框选中数据
handleSelectionChange(selection) {
this.batchIds = selection.map(item => item.materialId)
},
//删除货品
delMaterial(){
this.batchIds.forEach(ID=>{
let index = this.materialList.findIndex(v=>v.materialId==ID)
if(index>-1){
this.materialList.splice(index,1)
}
})
setTimeout(()=>{
this.$refs.multipleTable.clearSelection()
},300)
},
//添加货品
addMaterial(){
if(this.baseInfo.areaId!=undefined&&this.baseInfo.warehouseId!=undefined){
this.openDialog=true
this.resetQuery()
setTimeout(()=>{
this.$refs.multipleTable1.clearSelection()
},300)
}else{
this.$modal.msgError("请先选择区域,仓库");
}
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams = {
pageNum: 1,
pageSize: 10,
}
this.resetForm("queryForm");
this.handleQuery();
},
/** 查询列表 */
getList() {
this.loading = true;
let param = {
"pageSize": this.queryParams.pageSize,
"pageNum": this.queryParams.pageNum,
"checkWay": 1,
"warehouseId": this.baseInfo.warehouseId,
// "materialName": this.queryParams.materialName,
// "materialCode": this.queryParams.materialCode,
"categoryIds": this.queryParams.materialTypeIds,
}
getCheckInventoryMaterialPageApi(param).then(response => {
this.tableListData = response.rows;
this.total = Number(response.total);
this.loading = false;
});
},
handleSelectionChange2(selection) {
this.batchChosenMaterial = selection;
this.batchChosenMaterial.forEach(item=>{
this.$set(item,"actualNum",item.bookNum)
})
},
confirmChosen(){
if(this.batchChosenMaterial.length>0){
this.loading = true
let items = [...this.materialList,...this.batchChosenMaterial]
let uniqueItems = items.filter((item, index, array) => {
return array.findIndex((t) => (t.materialId === item.materialId)) === index;
});
this.materialList = uniqueItems;
setTimeout(()=>{
this.loading = false
this.openDialog=false
},500)
}
},
importMaterial(){
if(this.baseInfo.areaId!=undefined||this.baseInfo.warehouseId!=undefined){
// this.openImportDialog=true
// this.resetQuery2()
// setTimeout(()=>{
// this.$refs.multipleTable2.clearSelection()
// },300)
}else{
this.$modal.msgError("请先选择区域,仓库");
}
},
//保存草稿
confirmSave(){
this.$refs["baseInfo"].validate(valid => {
if (valid) {
let param = Object.assign({},this.baseInfo);
param.firstCheckDate = this.formatDateTime(this.baseInfo.firstCheckDate)
param.secondCheckDate = this.formatDateTime(this.baseInfo.secondCheckDate)
param.checkWay = 1
param.inspectUser = "1"
param.detailList = [];
this.noMaterial = false;
if(this.materialList.length>0){
this.materialList.forEach(item=>{
if(item.actualNum==0){
this.noMaterial = true
}else{
let obj = Object.assign({}, item)
obj.differNum = Number(obj.actualNum)-Number(obj.bookNum)
obj.differAmount = (Number(obj.actualNum)-Number(obj.bookNum))*obj.price;
obj.actualAmount = Number(obj.actualNum)*(obj.price)
param.detailList.push(obj)
}
})
}
if(this.noMaterial){
this.$modal.msgError("表格数据请填写完整!");
}else{
this.noMaterial = true;
if(this.materialList.length>0){
this.noMaterial = false;
}
console.log(param)
if(this.noMaterial){
this.$modal.msgError("请添加货品!");
}else{
this.loadingBtn=true;
if (this.baseInfo.checkId != undefined) {
editCheckInventorySaveApi(param).then((response) => {
this.$modal.msgSuccess("修改成功");
this.loadingBtn=false
this.jumpList()
}).catch(() => {
this.loadingBtn=false
});
} else {
addCheckInventorySaveApi(param).then((response) => {
this.$modal.msgSuccess("保存成功");
this.loadingBtn=false
this.jumpList()
}).catch(() => {
this.loadingBtn=false
});
}
}
}
}
});
},
// 提交按钮
confirmSubmit(){
this.$refs["baseInfo"].validate(valid => {
if (valid) {
let param = Object.assign({},this.baseInfo);
param.firstCheckDate = this.formatDateTime(this.baseInfo.firstCheckDate)
param.secondCheckDate = this.formatDateTime(this.baseInfo.secondCheckDate)
param.checkWay = 1
param.inspectUser = "1"
param.detailList = [];
this.noMaterial = false;
if(this.materialList.length>0){
this.materialList.forEach(item=>{
if(item.actualNum==0){
this.noMaterial = true
}else{
let obj = Object.assign({}, item)
obj.differNum = Number(obj.actualNum)-Number(obj.bookNum)
obj.differAmount = (Number(obj.actualNum)-Number(obj.bookNum))*obj.price;
obj.actualAmount = Number(obj.actualNum)*(obj.price)
param.detailList.push(obj)
}
})
}
if(this.noMaterial){
this.$modal.msgError("表格数据请填写完整!");
}else{
this.noMaterial = true;
if(this.materialList.length>0){
this.noMaterial = false;
}
console.log(param)
if(this.noMaterial){
this.$modal.msgError("请添加货品!");
}else{
this.loadingBtn=true;
if (this.baseInfo.checkId != undefined) {
editCheckInventoryCommitApi(param).then((response) => {
this.$modal.msgSuccess("修改成功");
this.loadingBtn=false
this.jumpList()
}).catch(() => {
this.loadingBtn=false
});
} else {
addCheckInventoryCommitApi(param).then((response) => {
this.$modal.msgSuccess("保存成功");
this.loadingBtn=false
this.jumpList()
}).catch(() => {
this.loadingBtn=false
});
}
}
}
}
});
},
//日期
formatDate(date) {
// 格式化为 YYYY-MM-DD
date = new Date(date)
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
},
//日期时间
formatDateTime(date) {
// 格式化为 YYYY-MM-DD
date = new Date(date)
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
const day = String(date.getDate()).padStart(2, '0');
const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
}
};
</script>
<style scoped>
.dishes-card{
width: 20%;
height: 100%;
margin-right: 15px;
position: relative;
}
.body-card{
width: 96%;
margin: 10px auto;
display: flex;
flex-direction: column;
height: 300px;
overflow-y: auto;
}
.bottom-card{
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0;
}
.dialog-left{
width: 20%;
height: 100%;
}
.dish-name{
width: 100%;
height: 32px;
display: flex;
align-items: center;
cursor: pointer;
}
.dish-name:hover{
background-color:rgba(0, 0, 0, 0.1);
color: #4b80fd;
}
.dialog-center{
width: 10%;
height: 100%;
/* background: #4b80fd; */
border: 1px solid #ccc;
border-radius: 5px;
margin: 0 1%;
}
.dialog-center-header{
width: 100%;display: flex;align-items: center;justify-content: center;height: 60px;font-weight: bold;border-bottom: 1px solid #ccc;
}
.dialog-right{
width: 70%;
height: 100%;
}
.primary{
background: #1890ff!important;
color: #fff!important;
}
.dateTable{
width: 14%;
height: 40px;
color: #9a9da3;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e6ebf5;
}
.dateTable2{
width: 14%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color:#000;
border: 1px solid #e6ebf5;
cursor: pointer;
}
.bgBlue{
width: 14%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #0c6ccc;
color:#fff !important;
border: 1px solid #fff;
cursor: pointer;
}
</style>