bonus-ui/src/views/foodManage/supplierFunction/supplierQuotation/edit.vue

604 lines
26 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-descriptions style="margin-bottom: 20px;" title="基本信息" :column="4" size="medium" border>
<el-descriptions-item>
<template slot="label">询价单号</template>
{{baseInfo.inquiryCode}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">询价标题</template>
{{baseInfo.title}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">联系人</template>
{{ baseInfo.linkMan }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">联系电话</template>
{{ baseInfo.phone }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">送货地址</template>
{{ baseInfo.address }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">交货时间</template>
<el-date-picker
v-model="baseInfo.arrivalTime"
type="date" align="right" placeholder="请选择交货时间"
format="yyyy-MM-dd" style="width: 240px;"
:picker-options="pickerOptions" @change="baseInfo.arrivalTime=formatDate(baseInfo.arrivalTime)">
</el-date-picker>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">报价时间</template>
{{ baseInfo.startTime }} - {{ baseInfo.endTime }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">要求到货时间</template>
{{baseInfo.requestArrivalTime}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">总金额</template>
{{ baseInfo.quoteAmount }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">备注</template>
{{ baseInfo.inquiryNotes }}
</el-descriptions-item>
<el-descriptions-item label="所属区域" prop="areaId">
{{ baseInfo.area }}
<!-- <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-descriptions-item>
<el-descriptions-item label="供应商名称" prop="supplierId">
{{ baseInfo.supplierName }}
<!-- <el-select v-model="baseInfo.supplierId" @change="handleSupplierChange" placeholder="请选择供应商" style="width: 100%;">
<el-option v-for="item in supplierOptions"
:key="item.supplierId"
:label="item.supplierName"
:value="item.supplierId"
></el-option>
</el-select> -->
</el-descriptions-item>
</el-descriptions>
</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>
<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="purNum" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="单价(元)" align="center" prop="singlePrice" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-model="scope.row.singlePrice" placeholder="请输入" maxlength="6" clearable @change="sumAmount" @input="(v)=>(scope.row.singlePrice=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.purNum*scope.row.singlePrice).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="notes" :show-overflow-tooltip="true"></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="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="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 } from "@/api/base/stall";
import { systemMaterialTreeApi,getMaterialListApi,supplierPageApi } from "@/api/foodManage/stockManage";
import { getGoodsInquiryInfoBySupplierIdApi,addGoodsInquiryApi,editGoodsQuotationApi,getGoodsInquiryDetailInfoApi } from "@/api/foodManage/purchaseManage";
export default {
name: "SupplierQuotationEdit",
dicts: [],
data() {
return {
supplierQuotationData:{},//页面传参
loading:false,
loadingBtn:false,
baseInfo: {
contractType:undefined,
areaId:undefined,
canteenId:undefined,
},
// 表单校验
baseRules: {
title: [
{ required: true, message: "询价标题不能为空", trigger: "change" }
],
dateRange: [
{ required: true, message: "报价时间不能为空", trigger: "change" }
],
requestArrivalTime: [
{ required: true, message: "要求到货时间不能为空", trigger: "change" }
],
areaId: [
{ required: true, message: "所属区域不能为空", trigger: "change" }
],
supplierIds: [
{ required: true, message: "邀请供应商不能为空", trigger: "change" }
],
phone: [
{
pattern: /^1[3456789]\d{9}$/,
message: '请输入正确的手机号码',
trigger: 'blur',
},
],
},
treeAreaOptions:[],
canteenOptions:[],
stallOptions:[],
supplierOptions:[],
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.supplierQuotationData){
this.supplierQuotationData = JSON.parse(this.$route.query.supplierQuotationData)
console.log(this.supplierQuotationData)
this.getContractInfo()
}
},
watch:{
'$route.query.supplierQuotationData':function(newId, oldId) {
if(newId){
this.supplierQuotationData = JSON.parse(newId)
this.getContractInfo()
}else{
this.baseInfo={}
this.materialList=[]
}
},
},
methods: {
// 返回列表页
jumpList() {
const obj = { path: "/foodManage/supplierFunction/supplierQuotationEdit" };
this.$tab.closeOpenPage(obj);
this.$router.replace({ path: "/foodManage/supplierFunction/supplierQuotation" }); // 要打开的页面
},
getContractInfo(){
let param = {
inquiryId:this.supplierQuotationData.inquiryId,
supplierId:this.supplierQuotationData.supplierId
}
//查询
getGoodsInquiryInfoBySupplierIdApi(param).then((response) => {
this.baseInfo = response.data;
this.$set(this.baseInfo,'dateRange',[this.baseInfo.startTime,this.baseInfo.endTime])
this.materialList = this.baseInfo.detailList;
supplierPageApi({ isPaging:1,areaIdList:[] }).then((response) => {
this.supplierOptions = response.rows||[];
});
this.handleSupplierChange();
});
},
//区域树
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.getSupplierData()
},
/** 查询供应商下拉结构 */
getSupplierData() {
supplierPageApi({ isPaging:1,areaIdList:[] }).then((response) => {
this.supplierOptions = response.rows||[];
});
},
handleSupplierChange(e){
let param = {
inquiryId:this.supplierQuotationData.inquiryId,
supplierId:this.supplierQuotationData.supplierId
}
console.log("detailparam",param)
//查询
getGoodsInquiryDetailInfoApi(param).then((response) => {
console.log('responseCCCC',response);
this.materialList = response.data;
console.log("this.materialList",this.materialList);
if(this.materialList==null||this.materialList.length==0||this.materialList==undefined){
this.$modal.msgError("该供应商不在询价供应商之类!");
}else{
console.log("获取供应商报价信息");
}
this.baseInfo.arrivalTime=this.materialList[0].arrivalTime
});
},
/** 查询货品类别下拉树结构 */
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.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,
"areaId": this.baseInfo.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,"purNum",0)
})
},
confirmChosen(){
if(this.batchChosenMaterial.length>0){
this.loading = true
this.materialList = this.batchChosenMaterial;
this.materialList.forEach(item=>{
this.$set(item,"unitPrice",item.unitPrice/100)
})
setTimeout(()=>{
this.loading = false
this.openDialog=false
},500)
}
},
// 提交按钮
confirmSubmit(){
let param = Object.assign({},this.baseInfo);
param.arrivalTime = this.formatDateTime(this.baseInfo.arrivalTime)
param.detailList = []
param.quoteAmount=0
console.log(param.arrivalTime)
if(param.arrivalTime.includes('1970')){
this.$modal.msgError("请选择交货时间!");
return;
}
this.noMaterial = false;
if(this.materialList.length>0){
this.materialList.forEach(item=>{
if(item.singlePrice==0){
this.noMaterial = true
}else{
let obj = Object.assign({}, item)
obj.quoteNum = Number(obj.purNum)
obj.singlePrice = Number(obj.singlePrice)*100
obj.totalPrice = (Number(obj.singlePrice)*Number(obj.purNum))
param.quoteAmount = param.quoteAmount+obj.totalPrice;
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;
console.log("param",param)
editGoodsQuotationApi(param).then((response) => {
this.$modal.msgSuccess("报价成功");
this.loadingBtn=false
this.jumpList()
}).catch(() => {
this.loadingBtn=false
});
}
}
},
sumAmount(){
this.baseInfo.quoteAmount=0
this.materialList.forEach(item=>{
this.baseInfo.quoteAmount = this.baseInfo.quoteAmount + (Number(item.singlePrice)*Number(item.purNum))
})
},
//日期
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>