bonus-ui/src/views/foodManage/purchaseManage/purchasePlan/edit.vue

654 lines
30 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="planCode">
<el-input v-model="baseInfo.planCode" placeholder="采购计划单号自动生成" disabled maxlength="20" clearable style="width: 240px"/>
</el-form-item>
<el-form-item label="采购时间" prop="purchaseDate">
<el-date-picker
v-model="baseInfo.purchaseDate"
type="datetime" align="right"
format="yyyy-MM-dd HH:mm:ss" style="width: 240px;"
:picker-options="pickerOptions" @change="baseInfo.purchaseDate=formatDateTime(baseInfo.purchaseDate)">
</el-date-picker>
</el-form-item>
<el-form-item label="交货日期" prop="deliverGoodsDate">
<el-date-picker
v-model="baseInfo.deliverGoodsDate"
type="date" align="right"
format="yyyy-MM-dd" style="width: 240px;"
:picker-options="pickerOptions" @change="baseInfo.deliverGoodsDate=formatDate(baseInfo.deliverGoodsDate)">
</el-date-picker>
</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="canteenId">
<el-select v-model="baseInfo.canteenId" placeholder="请选择所属食堂" style="width: 240px;" @change="handleCanteenChange">
<el-option v-for="item in canteenOptions"
:key="item.canteenId"
:label="item.canteenName"
:value="item.canteenId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属档口" prop="stallId">
<el-select v-model="baseInfo.stallId" placeholder="请选择所属档口" style="width: 240px;">
<el-option v-for="item in stallOptions"
:key="item.stallId"
:label="item.stallName"
:value="item.stallId"
></el-option>
</el-select>
</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="inventoryNum" :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="unitPrice" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-model="scope.row.unitPrice" placeholder="请输入" maxlength="10" clearable @input="(v)=>(scope.row.unitPrice=v.replace(/[^\d.]/g, '').replace(/^(\d*\.\d{2}).*$/, '$1'))"/>
</template>
</el-table-column>
<el-table-column label="采购数量" align="center" prop="purchaseNum" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-model.number="scope.row.purchaseNum" placeholder="请输入" maxlength="10" clearable @input="(v)=>(scope.row.purchaseNum=v.replace(/[^\d.]/g, '').replace(/^(\d*\.\d{2}).*$/, '$1'))"/>
</template>
</el-table-column>
<el-table-column label="预计采购金额(元)" align="center" prop="" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ scope.row.purchaseNum*scope.row.unitPrice }}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-model="scope.row.remark" 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.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="inventoryNum" :show-overflow-tooltip="true" />
<el-table-column label="单价(元)" align="center" prop="unitPrice" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ (scope.row.unitPrice/100).toFixed(2)||"" }}</span>
</template>
</el-table-column>
</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,getCanteenByAreaApi,getStallByCanteenApi } from "@/api/base/stall";
import { systemMaterialTreeApi,getMaterialListApi,supplierPageApi } from "@/api/foodManage/purchaseManage";
import { getPurchasePlanInfoApi, addPurchasePlanApi, editPurchasePlanApi } from "@/api/foodManage/purchaseManage";
export default {
name: "PurchasePlanEdit",
dicts: [],
data() {
return {
purchasePlanRowData:{},//编辑页面传参
loading:false,
loadingBtn:false,
baseInfo: {},
// 表单校验
baseRules: {
purchaseDate: [
{ required: true, message: "采购日期不能为空", trigger: "change" }
],
// deliverGoodsDate: [
// { required: true, message: "交货日期不能为空", trigger: "change" }
// ],
areaId: [
{ required: true, message: "所属区域不能为空", trigger: "change" }
],
canteenId: [
{ required: true, message: "所属食堂不能为空", trigger: "change" }
],
stallId: [
{ required: true, message: "所属档口不能为空", trigger: "change" }
],
},
treeAreaOptions:[],
canteenOptions:[],
stallOptions:[],
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,
};
},
created() {
this.getAreaTreeData()
this.getMaterialTree()
if(this.$route.query.purchasePlanRowData){
this.purchasePlanRowData = JSON.parse(this.$route.query.purchasePlanRowData)
this.getContractInfo()
}
},
watch:{
'$route.query.purchasePlanRowData':function(newId, oldId) {
if(newId){
this.purchasePlanRowData = JSON.parse(newId)
this.getContractInfo()
}
},
},
methods: {
// 返回列表页
jumpList() {
const obj = { path: "foodManage/purchaseManage/purchasePlanEdit" };
this.$tab.closeOpenPage(obj);
this.$router.replace({ path: "/foodManage/purchaseManage/purchasePlan" }); // 要打开的页面
},
//编辑计划-获取详情
getContractInfo(){
console.log(this.purchasePlanRowData)
let param = {
planId:this.purchasePlanRowData.planId
}
//查询查询食堂下拉结构
getPurchasePlanInfoApi(param).then((response) => {
this.baseInfo = response.data;
this.materialList = this.baseInfo.purchasePlanDetailList;
this.materialList.forEach(item=>{
this.$set(item,"unitPrice",Number(item.unitPrice)/100)
})
getCanteenByAreaApi({areaId:this.baseInfo.areaId}).then((response) => {
this.canteenOptions=response.rows||[];
this.$set(this.baseInfo,"canteenId",this.baseInfo.canteenId)
});
getStallByCanteenApi({ canteenId:this.baseInfo.canteenId }).then((response) => {
this.stallOptions=response.rows||[]
this.$set(this.baseInfo,"stallId",this.baseInfo.stallId)
});
});
},
//区域树
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.getCanteenData()
},
/** 查询查询食堂下拉结构 */
getCanteenData() {
let param= {
areaId:this.baseInfo.areaId
}
getCanteenByAreaApi(param).then((response) => {
this.canteenOptions=response.rows||[];
this.$set(this.baseInfo,"canteenId",null)
});
},
//选中食堂-查询档口
handleCanteenChange(e){
this.getStallData()
},
/** 查询查询食堂下拉结构 */
getStallData() {
let param= {
canteenId:this.baseInfo.canteenId
}
getStallByCanteenApi(param).then((response) => {
this.stallOptions=response.rows||[]
this.$set(this.baseInfo,"stallId",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.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,
"areaId": this.queryParams.areaId,
"materialName": this.queryParams.materialName,
"materialCode": this.queryParams.materialCode,
"materialTypeIds": this.queryParams.materialTypeIds,
}
getMaterialListApi(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,"purchaseNum",0)
this.$set(item,"unitPrice",item.unitPrice)
})
},
confirmChosen(){
if(this.batchChosenMaterial.length>0){
this.loading = true;
this.materialList = []
this.batchChosenMaterial.forEach(item=>{
let obj = Object.assign({}, item)
obj.unitPrice = item.unitPrice/100;
this.materialList.push(obj)
})
setTimeout(()=>{
this.loading = false
this.openDialog=false
},500)
}
},
//保存草稿
confirmSave(){
this.$refs["baseInfo"].validate(valid => {
if (valid) {
let param = Object.assign({},this.baseInfo);
param.purchaseDate = this.formatDateTime(this.baseInfo.purchaseDate)
if(this.baseInfo.deliverGoodsDate){
param.deliverGoodsDate = this.formatDate(this.baseInfo.deliverGoodsDate)
}
param.purchaseBudgetTotal = 0
param.totalNum=0
param.status=1
param.purchasePlanDetailList = []
this.noMaterial = false;
if(this.materialList.length>0){
this.materialList.forEach(item=>{
if(item.unitPrice==0 || item.purchaseNum==0){
this.noMaterial = true
}else{
let obj = Object.assign({}, item)
obj.unitPrice = Number(obj.unitPrice)*100
obj.purchasingBudgetPrice = (Number(obj.unitPrice)*Number(obj.purchaseNum))
param.purchasePlanDetailList.push(obj)
param.totalNum = param.totalNum+Number(obj.purchaseNum)
param.purchaseBudgetTotal = param.purchaseBudgetTotal+obj.purchasingBudgetPrice
}
})
}
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.planId != undefined) {
editPurchasePlanApi(param).then((response) => {
this.$modal.msgSuccess("修改成功");
this.loadingBtn=false
this.jumpList()
}).catch(() => {
this.loadingBtn=false
});
} else {
addPurchasePlanApi(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.purchaseDate = this.formatDateTime(this.baseInfo.purchaseDate)
if(this.baseInfo.deliverGoodsDate){
param.deliverGoodsDate = this.formatDate(this.baseInfo.deliverGoodsDate)
}
param.purchaseBudgetTotal = 0
param.totalNum=0
param.status=2
param.purchasePlanDetailList = []
this.noMaterial = false;
if(this.materialList.length>0){
this.materialList.forEach(item=>{
if(item.unitPrice==0 || item.purchaseNum==0){
this.noMaterial = true
}else{
let obj = Object.assign({}, item)
obj.unitPrice = Number(obj.unitPrice)*100
obj.purchasingBudgetPrice = (Number(obj.unitPrice)*Number(obj.purchaseNum))
param.purchasePlanDetailList.push(obj)
param.totalNum = param.totalNum+Number(obj.purchaseNum)
param.purchaseBudgetTotal = param.purchaseBudgetTotal+obj.purchasingBudgetPrice
}
})
}
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.planId != undefined) {
editPurchasePlanApi(param).then((response) => {
this.$modal.msgSuccess("修改成功");
this.loadingBtn=false
this.jumpList()
}).catch(() => {
this.loadingBtn=false
});
} else {
addPurchasePlanApi(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>