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

689 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="goodsTransferCode">
<el-input v-model="baseInfo.goodsTransferCode" 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"
:props="{
emitPath: false,// 若设置 false则只返回该节点的值只返回最后选择的id
checkStrictly: false,//来设置父子节点取消选中关联,从而达到选择任意一级选项的目的
value:'id',label:'label'
}" @change="handleAreaChange">
</el-cascader>
</el-form-item>
<el-form-item label="调出仓库" prop="outWarehouseId">
<el-select v-model="baseInfo.outWarehouseId" clearable 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="intoWarehouseId">
<el-select v-model="baseInfo.intoWarehouseId" clearable 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="requestArrivalTime">
<el-date-picker
v-model="baseInfo.requestArrivalTime"
type="datetime" align="right"
format="yyyy-MM-dd HH:mm:ss" style="width: 240px;"
:picker-options="pickerOptions" @change="baseInfo.requestArrivalTime=formatDateTime(baseInfo.requestArrivalTime)">
</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="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="fetchNum" :show-overflow-tooltip="true"/>
<el-table-column label="调货数量" align="center" prop="orderNum" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-model.number="scope.row.orderNum" placeholder="请输入" maxlength="10" clearable @input="(v)=>(scope.row.orderNum=v.replace(/[^\d]/g,''))"/>
</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.materialId}" @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="size" :show-overflow-tooltip="true">
<!-- <template slot-scope="scope">
<span v-if="scope.row.salesMode==1">按份</span>
<span v-if="scope.row.salesMode==2">称重</span>
</template> -->
</el-table-column>
<el-table-column label="货品库存" align="center" prop="materialNum" :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>
<!-- 选择货品 -->
<el-dialog title="导入采购订单" :visible.sync="openImportDialog" width="70%" append-to-body >
<div style="width: 100%;height:620px;">
<el-form :model="queryParams2" ref="queryForm2" size="small" :inline="true" label-width="90px">
<el-form-item label="领料单标题" prop="title">
<el-input v-model="queryParams2.title" 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="loading2" :data="tableListData2" ref="multipleTable2" height="520" :row-key="(row)=>{return row.fetchMaterialId}" @selection-change="handleSelectionChange3">
<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>{{(queryParams2.pageNum - 1) * queryParams2.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="fetchMaterialCode" :show-overflow-tooltip="true" />
<el-table-column label="领料标题" align="center" prop="title" :show-overflow-tooltip="true" />
<el-table-column label="所属区域" align="center" prop="areaName" :show-overflow-tooltip="true" />
<el-table-column label="所属食堂" align="center" prop="canteenName" :show-overflow-tooltip="true" />
<el-table-column label="所属档口" align="center" prop="stallName" :show-overflow-tooltip="true" />
<el-table-column label="货品数量" align="center" prop="totalNum" :show-overflow-tooltip="true" />
<el-table-column label="货品仓库" align="center" prop="warehouseName" :show-overflow-tooltip="true" />
<el-table-column label="领料日期" align="center" prop="fetchMaterialTime" :show-overflow-tooltip="true" width="150"/>
</el-table>
<pagination
v-show="total2>0"
:total="total2"
:page.sync="queryParams2.pageNum"
:limit.sync="queryParams2.pageSize"
@pagination="getList2"
/>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="">确 定</el-button>
<el-button @click="openImportDialog=false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { imgUpLoadTwo } from '@/api/system/upload'
import { systemAreaTreeApi } from "@/api/base/stall";
import { systemMaterialTreeApi,getStockMaterialListApi,drpWareHousePageApi } from "@/api/foodManage/stockManage";
import { getGoodsTransferInfoApi,addGoodsTransferSaveApi,addGoodsTransferCommitApi } from "@/api/foodManage/stockManage";
//addGoodsTransferSaveApi addGoodsTransferCommitApi editGoodsTransferSaveApi editGoodsTransferCommitApi
import { fetchMaterialPageApi } from "@/api/foodManage/pickManage";
export default {
name: "WarehouseOutEdit",
dicts: [],
data() {
return {
transferRowData:{},//页面传参
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" }
],
outWarehouseId: [
{ required: true, message: "货品仓库不能为空", trigger: "change" }
],
outType: [
{ required: true, message: "出库类型不能为空", trigger: "change" }
],
requestArrivalTime: [
{ 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,
},
total: 0, // 总条数
tableListData: [],//货品弹窗-货品表格数据
batchChosenMaterial:[],//货品弹窗-货品表格-选中的货品数组
noMaterial:false,
openImportDialog:false,
queryParams2: { // 货品弹窗-货品表格-查询参数
pageNum: 1,
pageSize: 10,
},
loading2:false,
total2: 0, // 总条数
tableListData2: [],//导入弹窗-表格数据
};
},
created() {
this.getAreaTreeData()
this.getMaterialTree()
if(this.$route.query.transferRowData){
this.transferRowData = JSON.parse(this.$route.query.transferRowData)
this.getContractInfo()
}
},
watch:{
'$route.query.transferRowData':function(newId, oldId) {
if(newId){
this.transferRowData = JSON.parse(newId)
this.getContractInfo()
}else{
this.baseInfo={}
this.materialList=[]
}
},
},
methods: {
// 返回列表页
jumpList() {
const obj = { path: "foodManage/stockManage/goodsTransferEdit" };
this.$tab.closeOpenPage(obj);
this.$router.replace({ path: "/foodManage/stockManage/goodsTransfer" }); // 要打开的页面
},
getContractInfo(){
console.log(this.transferRowData)
let param = {
goodsTransferId:this.transferRowData.goodsTransferId
}
//查询查询食堂下拉结构
getGoodsTransferInfoApi(param).then((response) => {
this.baseInfo = response.data;
this.materialList = this.baseInfo.goodsAllocationDetailDTOList;
// this.materialList.forEach(item=>{
// this.$set(item,"unitPrice",Number(item.unitPrice)/100)
// })
drpWareHousePageApi({ areaId:this.baseInfo.areaId }).then((response) => {
this.wareHouseOptions = response.rows||[];
this.$set(this.baseInfo,'outWarehouseId',this.baseInfo.outWarehouseId)
this.$set(this.baseInfo,'intoWarehouseId',this.baseInfo.intoWarehouseId)
});
});
},
//区域树
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()
},
/** 查询供应商下拉结构 */
getWareHouseData() {
drpWareHousePageApi({ areaId:this.baseInfo.areaId }).then((response) => {
this.wareHouseOptions = response.rows||[];
this.$set(this.baseInfo,'outWarehouseId',null)
this.$set(this.baseInfo,'intoWarehouseId',null)
});
},
/** 查询货品类别下拉树结构 */
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)
}
})
},
//添加货品
addMaterial(){
if(this.baseInfo.areaId!=undefined||this.baseInfo.outWarehouseId!=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.resetForm("queryForm");
this.handleQuery();
},
/** 查询列表 */
getList() {
this.loading = true;
let param = {
"pageSize": this.queryParams.pageSize,
"pageNum": this.queryParams.pageNum,
"warehouseId": this.baseInfo.outWarehouseId,
"materialName": this.queryParams.materialName,
"materialCode": this.queryParams.materialCode,
"materialTypeIds": this.queryParams.materialTypeIds,
}
getStockMaterialListApi(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,"fetchNum",item.materialNum)
this.$set(item,"orderNum",0)
})
},
confirmChosen(){
if(this.batchChosenMaterial.length>0){
this.loading = true
this.materialList = this.batchChosenMaterial;
setTimeout(()=>{
this.loading = false
this.openDialog=false
},500)
}
},
//保存草稿
confirmSave(){
this.$refs["baseInfo"].validate(valid => {
if (valid) {
let param = Object.assign({},this.baseInfo);
param.requestArrivalTime = this.formatDateTime(this.baseInfo.requestArrivalTime)
param.totalNum=0
param.goodsAllocationDetailDTOList = []
this.noMaterial = false;
if(this.materialList.length>0){
this.materialList.forEach(item=>{
if(item.orderNum==0){
this.noMaterial = true
}else{
let obj = Object.assign({}, item)
param.totalNum = param.totalNum+Number(obj.orderNum)
param.goodsAllocationDetailDTOList.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.goodsTransferId != undefined) {
addGoodsTransferSaveApi(param).then((response) => {
this.$modal.msgSuccess("修改成功");
this.loadingBtn=false
this.jumpList()
}).catch(() => {
this.loadingBtn=false
});
} else {
addGoodsTransferSaveApi(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.requestArrivalTime = this.formatDateTime(this.baseInfo.requestArrivalTime)
param.totalNum=0
param.goodsAllocationDetailDTOList = []
this.noMaterial = false;
if(this.materialList.length>0){
this.materialList.forEach(item=>{
if(item.orderNum==0){
this.noMaterial = true
}else{
let obj = Object.assign({}, item)
param.totalNum = param.totalNum+Number(obj.orderNum)
param.goodsAllocationDetailDTOList.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.goodsTransferId != undefined) {
addGoodsTransferCommitApi(param).then((response) => {
this.$modal.msgSuccess("修改成功");
this.loadingBtn=false
this.jumpList()
}).catch(() => {
this.loadingBtn=false
});
} else {
addGoodsTransferCommitApi(param).then((response) => {
this.$modal.msgSuccess("保存成功");
this.loadingBtn=false
this.jumpList()
}).catch(() => {
this.loadingBtn=false
});
}
}
}
}
});
},
importMaterial(){
if(this.baseInfo.areaId!=undefined||this.baseInfo.outWarehouseId!=undefined){
this.openImportDialog=true
this.resetQuery2()
setTimeout(()=>{
this.$refs.multipleTable2.clearSelection()
},300)
}else{
this.$modal.msgError("请先选择区域,仓库");
}
},
/** 搜索按钮操作 */
handleQuery2() {
this.queryParams2.pageNum = 1;
this.getList2();
},
/** 重置按钮操作 */
resetQuery2() {
this.resetForm("queryForm2");
this.handleQuery2();
},
/** 查询列表 */
getList2() {
this.loading2 = true;
let param = {
"pageSize": this.queryParams2.pageSize,
"pageNum": this.queryParams2.pageNum,
"areaId": this.baseInfo.areaId,
"outWarehouseId": this.baseInfo.outWarehouseId
}
fetchMaterialPageApi(param).then(response => {
this.tableListData2 = response.rows;
this.total2 = Number(response.total);
this.loading2 = false;
});
},
handleSelectionChange3(selection) {
},
//日期
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>