lixuan
2 years ago
parent
b8b3905598
commit
038f919147
9 changed files with 1095 additions and 6 deletions
@ -0,0 +1,48 @@ |
||||
import request from "utils/axios.js"; |
||||
// table
|
||||
const getByPage = (params) => { |
||||
return request.postJson("/oil-refinery/xoilRefineryOrder/getByPage", params); |
||||
}; |
||||
//查看提货单信息
|
||||
const findDeliveryByOrderId = (id) => { |
||||
return request.get(`/oil-refinery/xoilRefineryDelivery/findDeliveryByOrderId/${id}`); |
||||
}; |
||||
//创建提货单
|
||||
const billSave = (params) => { |
||||
return request.postJson("/oil-refinery/xoilRefineryDelivery/save", params); |
||||
}; |
||||
//修改提货单
|
||||
const update = (params) => { |
||||
return request.putJson("/oil-refinery/xoilRefineryDelivery/update", params); |
||||
}; |
||||
//查看订单信息
|
||||
const findByOrderId = (id) => { |
||||
return request.get(`/oil-refinery/xoilRefineryDelivery/findByOrderId/${id}`); |
||||
}; |
||||
//修改提货单
|
||||
const deleteBill = (params) => { |
||||
return request.putJson("/oil-refinery/xoilRefineryDelivery/delete", params); |
||||
}; |
||||
//下单
|
||||
const orderSuccess = (params) => { |
||||
return request.postJson("/oil-refinery/xoilRefineryOrder/orderSuccess", params); |
||||
}; |
||||
//订单锁定
|
||||
const orderLock = (params) => { |
||||
return request.postJson("/oil-refinery/xoilRefineryOrder/orderLock", params); |
||||
}; |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default { |
||||
getByPage, |
||||
findDeliveryByOrderId, |
||||
billSave, |
||||
findByOrderId, |
||||
update, |
||||
deleteBill, |
||||
orderSuccess, |
||||
orderLock |
||||
}; |
||||
@ -0,0 +1,31 @@ |
||||
import request from "utils/axios.js"; |
||||
// table
|
||||
const getByPage = (params) => { |
||||
return request.postJson("/oil-refinery/xoilRefineryInfo/getByPage", params); |
||||
}; |
||||
// 新增
|
||||
const save = (params) => { |
||||
return request.postJson("/oil-refinery/xoilRefineryInfo/save", params); |
||||
}; |
||||
// 修改
|
||||
const update = (params) => { |
||||
return request.postJson("/oil-refinery/xoilRefineryInfo/update", params); |
||||
}; |
||||
// 删除
|
||||
const deleteRow = (params) => { |
||||
return request.postJson("/oil-refinery/xoilRefineryInfo/delete", params); |
||||
}; |
||||
//炼厂list
|
||||
const findByEntity = (params = {}) => { |
||||
return request.postJson( |
||||
"/oil-refinery/xoilRefineryInfo/findByEntity", |
||||
params |
||||
); |
||||
}; |
||||
export default { |
||||
getByPage, |
||||
save, |
||||
update, |
||||
deleteRow, |
||||
findByEntity, |
||||
}; |
||||
@ -0,0 +1,104 @@ |
||||
<template> |
||||
<!-- <el-autocomplete |
||||
v-model="text" |
||||
:fetch-suggestions="querySearchAsync" |
||||
:value-key="config.valueKey" |
||||
:placeholder="config.placeholder" |
||||
clearable |
||||
@select="selectAutocomplete" |
||||
@clear="params[config.querykey] = ''" |
||||
></el-autocomplete> --> |
||||
|
||||
<el-select |
||||
v-model="params[config.querykey]" |
||||
filterable |
||||
remote |
||||
clearable |
||||
reserve-keyword |
||||
:placeholder="config.placeholder" |
||||
:remote-method="remoteMethod" |
||||
@clear="list = []" |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in list" |
||||
:key="item.id + index" |
||||
:label="item[config.labelKey]" |
||||
:value="item[config.valueKey]" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
params: Object, |
||||
config: Object, |
||||
// config: { |
||||
// serveTarget: {}, // 远程搜索接口 |
||||
// autocompleteKey: "", //远程搜索接口参数名 |
||||
// labelKey: "", //接口返回数据label名 |
||||
// valueKey: "", //接口返回数据唯一值 |
||||
// querykey: "", //查询接口参数名 |
||||
// }, |
||||
}, |
||||
data() { |
||||
return { |
||||
text: "", |
||||
list: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
"config.echoId": { |
||||
handler(nval, oval) { |
||||
if (nval) { |
||||
console.log(nval); |
||||
this.remoteMethod(this.config.echoName); |
||||
} |
||||
}, |
||||
deep: true, |
||||
immediate: true, |
||||
}, |
||||
}, |
||||
methods: { |
||||
// 远程搜索 |
||||
remoteMethod(query) { |
||||
if (query !== "") { |
||||
this.loading = true; |
||||
let params = {}; |
||||
params[this.config.autocompleteKey] = query; |
||||
this.config.serveTarget(params).then((res) => { |
||||
let timeInstance = setTimeout(() => { |
||||
this.loading = false; |
||||
clearTimeout(timeInstance); |
||||
if (res.data.length) { |
||||
this.list = res.data; |
||||
} else this.list = []; |
||||
}, 1000 * Math.random()); |
||||
}); |
||||
} else { |
||||
this.list = []; |
||||
} |
||||
}, |
||||
// querySearchAsync(queryString, cb) { |
||||
// if (queryString) { |
||||
// let params = {}; |
||||
// params[this.config.autocompleteKey] = queryString; |
||||
// this.config.serveTarget(params).then((res) => { |
||||
// let timeInstance = setTimeout(() => { |
||||
// clearTimeout(timeInstance); |
||||
// if (res.data.length) { |
||||
// cb(res.data); |
||||
// } else cb([]); |
||||
// }, 1000 * Math.random()); |
||||
// }); |
||||
// } else cb([]); |
||||
// }, |
||||
// selectAutocomplete(item) { |
||||
// this.params[this.config.querykey] = item.id; |
||||
// }, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,449 @@ |
||||
<template> |
||||
<el-drawer |
||||
direction="ltr" |
||||
size="40%" |
||||
:visible="controlWindows.bill" |
||||
@opened="openDrawer" |
||||
:before-close="closeWindow" |
||||
:show-close = false |
||||
> |
||||
<div class="create" v-if="controlWindows.bill"> |
||||
<el-form label-width="100px"> |
||||
<div class="billTop"> |
||||
<div class="billTop-top"> |
||||
<div class="billTop-top-left"> |
||||
<el-form-item label="订单信息"> |
||||
</el-form-item> |
||||
<el-form-item label="提货单数量:"> |
||||
<span>{{billData.orderInfo.deliveryAccount}}</span> |
||||
</el-form-item> |
||||
</div> |
||||
<el-form-item label="订单状态"> |
||||
<el-tag effect='dark' :type="orderTagType(billData.orderInfo.orderStatus).orderType">{{orderTagType(billData.orderInfo.orderStatus).orderLabel}}</el-tag> |
||||
</el-form-item> |
||||
</div> |
||||
<div> |
||||
<div class="billTop-top-left"> |
||||
<el-form-item label="预订数量:"> |
||||
<span>{{billData.orderInfo.preQuantity}}</span> |
||||
</el-form-item> |
||||
<el-form-item label="订单金额:"> |
||||
<span>{{billData.orderInfo.preAmount}}</span> |
||||
</el-form-item> |
||||
</div> |
||||
<div class="billTop-top-left"> |
||||
<el-form-item label="已提数量:"> |
||||
<span>{{billData.orderInfo.alreadyQuantity}}</span> |
||||
</el-form-item> |
||||
<el-form-item label="已提金额:"> |
||||
<span>{{billData.orderInfo.alreadyAmount}}</span> |
||||
</el-form-item> |
||||
</div> |
||||
<div class="billTop-top-left"> |
||||
<el-form-item label="剩余数量:"> |
||||
<span>{{billData.orderInfo.surplusQuantity}}</span> |
||||
</el-form-item> |
||||
<el-form-item label="剩余金额:"> |
||||
<span>{{billData.orderInfo.surplusAmount}}</span> |
||||
</el-form-item> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="billBottom"> |
||||
<div class="billBottom-title"> |
||||
<span>提货单列表</span> |
||||
<el-button type="primary" @click="billAdd()">创建提货单</el-button> |
||||
</div> |
||||
<div class="" style="height: 58vh;overflow: auto;"> |
||||
<div class="billBottom-body" v-for="(item,index) in billData.list" :key="index"> |
||||
<div class="billBottom-body-top"> |
||||
<el-form-item label="提货单"> |
||||
<span>{{item.id}}</span> |
||||
</el-form-item> |
||||
<el-tag :type="orderTagType(item.deliveryStatus).type">{{orderTagType(item.deliveryStatus).label}}</el-tag> |
||||
</div> |
||||
<div class="billBottom-body-middle"> |
||||
<div class="billBottom-body-middle-info"> |
||||
<el-form-item label="预约提货量"> |
||||
<span>{{ item.preDeliveryQuantity }}</span> |
||||
</el-form-item> |
||||
<el-form-item label="提货人"> |
||||
<span>{{item.driverName}}</span> |
||||
</el-form-item> |
||||
<el-form-item label="车牌号"> |
||||
<span>{{ item.plateNumber }}</span> |
||||
</el-form-item> |
||||
</div> |
||||
<div class="billBottom-body-middle-info"> |
||||
<el-form-item label="实际提货量"> |
||||
<span>{{ item.accDeliveryQuantity }}</span> |
||||
</el-form-item> |
||||
<el-form-item label="身份证"> |
||||
<span>{{ item.identityCard }}</span> |
||||
</el-form-item> |
||||
</div> |
||||
</div> |
||||
<div v-show="item.deliveryStatus=='SUBMITED'" style="text-align: right;color: #409EFF;" @click="billAdd(item,index)">我来修改/锁定</div> |
||||
<div class="billBottom-body-bottom"> |
||||
<div> |
||||
<el-form-item label="创建时间"> |
||||
<span>{{ item.createTime }}</span> |
||||
</el-form-item> |
||||
<el-form-item label="更新时间"> |
||||
<span>{{ item.updateTime }}</span> |
||||
</el-form-item> |
||||
</div> |
||||
<div> |
||||
<el-button v-show="item.deliveryStatus=='SUBMITED'&&billData.orderInfo.orderStatus=='DELIVERING'&&billData.orderInfo.payStatus!=='REFUNDED'" type="danger" @click="billDelete(item,index)">删除提货单</el-button> |
||||
<el-button :disabled="item.deliveryStatus!=='PLATENUM_LOCKED'&&item.deliveryStatus!=='PLATENUM_SUCCESS'" @click="billSubmit(item,index)" :type="orderTagType(item.deliveryStatus).type1">{{orderTagType(item.deliveryStatus).info}}</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
<div class="buttons"> |
||||
<el-button @click="controlWindows.bill = false">取消 </el-button> |
||||
<!-- <el-button @click="submit">订单确认</el-button> --> |
||||
</div> |
||||
<el-dialog :close-on-click-modal="false" :append-to-body="true" title="提货单信息" width="400px" :visible.sync="dialogBillAdd"> |
||||
<el-form v-if="dialogBillAdd" :model="billAddData" ref="form" :rules="rules"> |
||||
<el-form-item label="预约提货量" prop="preDeliveryQuantity"> |
||||
<el-input v-model="billAddData.preDeliveryQuantity"></el-input>元/吨 |
||||
</el-form-item> |
||||
<el-form-item label="提货人" prop="driverName"> |
||||
<el-input v-model="billAddData.driverName"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="提货人身份证号" prop="identityCard"> |
||||
<el-input v-model="billAddData.identityCard"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="提货车牌号码" prop="plateNumber"> |
||||
<el-input v-model="billAddData.plateNumber"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="info" @click="dialogBillAdd = false">取 消</el-button> |
||||
<el-button v-show="!billTitle" type="primary" @click="billAddSave()">确定</el-button> |
||||
<el-button v-show="billTitle" type="primary" @click="billAddSave(1)">修改</el-button> |
||||
<el-button v-show="billTitle" type="primary" @click="billAddSave(2)">修改并锁定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<el-dialog |
||||
destroy-on-close |
||||
title="提示" |
||||
:close-on-click-modal="false" :append-to-body="true" |
||||
:visible.sync="dialogDelivery" |
||||
width="30%"> |
||||
<el-form v-if="dialogDelivery"> |
||||
<el-form-item label="实际提货量" prop="plateNumber"> |
||||
<el-input v-model="deliveryQuantity"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="dialogDelivery = false">取 消</el-button> |
||||
<el-button type="primary" @click="billdelivery()">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</el-drawer> |
||||
</template> |
||||
|
||||
<script> |
||||
import serve from "api/product.js"; |
||||
import order from "api/order.js"; |
||||
import refineryInfoServe from "api/refineryInfo.js"; |
||||
|
||||
import autocomplete from "components/autocomplete/index.vue"; |
||||
export default { |
||||
components: { |
||||
autocomplete, |
||||
}, |
||||
filters:{ |
||||
orderTagType(val){ |
||||
switch(val){ |
||||
case 'SUBMITED': return '订单提交' |
||||
case 'ORDER_LOCKED': return '订单锁定' |
||||
case 'ORDER_SUCCESS': return '下单成功' |
||||
case 'DELIVERING': return '提货中' |
||||
case 'COMPLETE': return '提货单完成' |
||||
case 'CANCELED': return '订单取消' |
||||
} |
||||
return {label:val?val:'暂无数据',type:'info'} |
||||
}, |
||||
}, |
||||
props: { |
||||
controlWindows: Object, |
||||
billData:Array |
||||
// refineryTypeEnum: Array, |
||||
}, |
||||
data() { |
||||
return { |
||||
billTitle:'', |
||||
quantity:'', |
||||
deliveryQuantity:'', |
||||
dialogDelivery:false, |
||||
customList:[], |
||||
form: { |
||||
actAmount:0 |
||||
}, |
||||
billAddData:{}, |
||||
dialogBillAdd:false, |
||||
productNameList:[], |
||||
refineryList: [], |
||||
productRowData:{}, |
||||
configAutocomplete: { |
||||
serveTarget: refineryInfoServe.findByEntity, |
||||
autocompleteKey: "refineryName", |
||||
labelKey: "refineryName", |
||||
valueKey: "id", |
||||
placeholder: "炼厂名称", |
||||
querykey: "refineryId", |
||||
echoId: "", |
||||
echoName: "", |
||||
}, |
||||
rules: { |
||||
preDeliveryQuantity: [ |
||||
{ required: true, message: "请输入预约提货量", trigger: "blur" }, |
||||
], |
||||
driverName: [ |
||||
{ required: true, message: "请输入提货人", trigger: "blur" }, |
||||
], |
||||
identityCard: [ |
||||
{ required: true, message: "请输入提货人身份证号", trigger: "blur" }, |
||||
], |
||||
plateNumber: [ |
||||
{ required: true, message: "请输入提货车牌号", trigger: "blur" }, |
||||
], |
||||
}, |
||||
}; |
||||
}, |
||||
created(){ |
||||
}, |
||||
methods: { |
||||
billdelivery(){ |
||||
this.billAddData.deliveryStatus = 'COMPLETE' |
||||
this.billAddData.accDeliveryQuantity = this.deliveryQuantity |
||||
order.update(this.billAddData).then(res=>{ |
||||
if(res.code == 20000){ |
||||
this.billListMeth() |
||||
// this.$set(this.billData.list,this.billData.index,this.billAddData) |
||||
this.$message.success(res.msg) |
||||
this.dialogDelivery = false |
||||
} |
||||
}) |
||||
}, |
||||
billSubmit(e,index){ |
||||
if(e.deliveryStatus=='PLATENUM_SUCCESS'){ |
||||
this.billAddData = JSON.parse(JSON.stringify(e)) |
||||
this.billData.index = index |
||||
this.dialogDelivery = true |
||||
}else if(e.deliveryStatus=='PLATENUM_LOCKED'){ |
||||
this.billAddData = JSON.parse(JSON.stringify(e)) |
||||
this.billAddData.deliveryStatus = 'PLATENUM_SUCCESS' |
||||
this.$confirm('是否确认?', '提示', { type: 'info' }).then(() => { |
||||
console.log(this.billData.list,index,this.billAddData,'aaaaaaaaaaa') |
||||
order.update(this.billAddData).then(res=>{ |
||||
if(res.code == 20000){ |
||||
this.billListMeth() |
||||
// this.$set(this.billData.list,index,this.billAddData) |
||||
this.$message.success(res.msg) |
||||
this.dialogBillAdd = false |
||||
} |
||||
}) |
||||
}) |
||||
} |
||||
}, |
||||
orderTagType(val){ |
||||
switch(val){ |
||||
case 'SUBMITED': return {orderLabel:'订单提交',label:'等待信息',info:'等待信息锁定',type:'warning',type1:'info',orderType:'info'} |
||||
case 'PLATENUM_LOCKED': return {orderLabel:'下单中',label:'信息锁定',info:'提货信息确认',type:'info',type1:'success',orderType:'warning'} |
||||
case 'PLATENUM_SUCCESS': return {orderLabel:'下单成功',label:'提货中',info:'提货量确认',type:'',type1:'warning',orderType:''} |
||||
case 'DELIVERING': return {orderLabel:'提货中',label:'提货中', type: '',orderType:'info'} |
||||
case 'COMPLETE': return {orderLabel:'订单完成',label:'提货完成',info:'提货完成',type:'success',type1:'info',orderType:'success'} |
||||
case 'CANCELED': return {orderLabel:'订单取消',label:'订单取消',info:'订单取消',type:'info',type1:'dark',orderType:'info'} |
||||
} |
||||
return {label:val?val:'暂无数据',info:val?val:'暂无数据',type:'info'} |
||||
}, |
||||
//创建修改提货单弹窗 |
||||
billAdd(e,index){ |
||||
this.billTitle = e?true:false |
||||
this.billAddData = e?JSON.parse(JSON.stringify(e)):{} |
||||
this.billData.index = index |
||||
this.dialogBillAdd = true |
||||
}, |
||||
//创建修改提货单 |
||||
billAddSave(e){ |
||||
this.$refs["form"].validate((valid) => { |
||||
if (valid) { |
||||
if(!e){ |
||||
this.billAddData.orderId=this.controlWindows.addInfo.id |
||||
this.billAddData.productMeasurement=this.controlWindows.addInfo.productMeasurement |
||||
order.billSave(this.billAddData).then(res=>{ |
||||
if(res.code == 20000){ |
||||
this.billAddData.deliveryStatus = 'SUBMITED' |
||||
this.billData.list.push(this.billAddData) |
||||
this.billListMeth() |
||||
this.$message.success(res.msg) |
||||
this.dialogBillAdd = false |
||||
} |
||||
}) |
||||
}else{ |
||||
delete this.billAddData.productMeasurement |
||||
this.billAddData.deliveryStatus = e==2?'PLATENUM_LOCKED':'' |
||||
order.update(this.billAddData).then(res=>{ |
||||
if(res.code == 20000){ |
||||
this.billListMeth() |
||||
this.$message.success(res.msg) |
||||
this.dialogBillAdd = false |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
//更新提货单数据 |
||||
billListMeth(){ |
||||
setTimeout(()=>{ |
||||
order.findDeliveryByOrderId(this.controlWindows.addInfo.id).then((res) => { |
||||
this.billData.list = res.data |
||||
this.$forceUpdate() |
||||
}); |
||||
},200) |
||||
}, |
||||
//删除提货单 |
||||
billDelete(e,index){ |
||||
this.$confirm('确定删除提货单?', '提示', { type: 'error' }).then(() => { |
||||
order.deleteBill({id:e.id}).then(res=>{ |
||||
if(res.code == 20000){ |
||||
this.$message.success(res.msg) |
||||
this.dialogBillAdd = false; |
||||
this.billListMeth() |
||||
} |
||||
}) |
||||
this.$set(this.billData.list,index,'') |
||||
}) |
||||
}, |
||||
openDrawer() { |
||||
let { id } = this.controlWindows.addInfo; |
||||
if (id) { |
||||
//回显 |
||||
this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo)); |
||||
this.configAutocomplete.echoId = id; |
||||
this.configAutocomplete.echoName = this.form.refineryName; |
||||
console.log("this.form", this.form.floorPrice); |
||||
} |
||||
}, |
||||
submit() { |
||||
this.quantity = 0 |
||||
this.billData.list.forEach(element => { |
||||
this.quantity += element.accDeliveryQuantity |
||||
}); |
||||
this.$confirm('确定下单?', '提示', { type: 'success' }).then(() => { |
||||
let data={ |
||||
id:this.controlWindows.addInfo.id, |
||||
actQuantity:this.quantity, |
||||
customerId:this.controlWindows.addInfo.customerId |
||||
} |
||||
order.orderSuccess(data).then((res) => { |
||||
if (res.code === 20000) { |
||||
this.$message.success(res.msg); |
||||
this.closeWindow(); |
||||
} |
||||
}); |
||||
}) |
||||
}, |
||||
judgeInterface(form) { |
||||
// let { id } = this.controlWindows.addInfo; |
||||
// if (id) return serve.update(form); |
||||
// else |
||||
return serve.orderSave(form); |
||||
}, |
||||
closeWindow() { |
||||
this.$emit("closeWindow"); |
||||
this.form = {}; |
||||
this.$refs.form.clearValidate(); |
||||
this.controlWindows.create = false; |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.create { |
||||
padding: 40px; |
||||
.el-input, |
||||
.el-select, |
||||
.el-textarea, |
||||
.el-autocomplete { |
||||
width: 300px; |
||||
} |
||||
} |
||||
.buttons { |
||||
background: #fff; |
||||
position: absolute; |
||||
left: 0; |
||||
bottom: 0; |
||||
padding-right: 40px; |
||||
width: 100%; |
||||
height: 80px; |
||||
line-height: 80px; |
||||
text-align: right; |
||||
border-top: 1px solid #f2f3f5; |
||||
.el-button { |
||||
text-align: right; |
||||
font-size: 14px; |
||||
border-radius: 5px; |
||||
} |
||||
} |
||||
.billTop{ |
||||
background: #f0f0f0; |
||||
padding: 15px 35px; |
||||
border-radius: 5px; |
||||
} |
||||
.billTop-top,.billBottom-title,.billBottom-body-top,.billBottom-body-bottom{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
.billTop-top-left{ |
||||
display: flex; |
||||
::v-deep .el-form-item{ |
||||
margin-bottom:0 |
||||
} |
||||
} |
||||
.billBottom{ |
||||
.billBottom-title{ |
||||
align-items: center; |
||||
margin: 20px 0; |
||||
} |
||||
} |
||||
.billBottom-body-middle { |
||||
::v-deep .el-form-item{ |
||||
margin-bottom:0 |
||||
} |
||||
.billBottom-body-middle-info{ |
||||
display: flex; |
||||
} |
||||
} |
||||
.billBottom-body{ |
||||
padding: 20px; |
||||
box-shadow: 0 1px 4px rgba(0,21,41,.50); |
||||
margin: 25px 0px; |
||||
} |
||||
.billBottom-body-bottom{ |
||||
::v-deep .el-form-item{ |
||||
margin-bottom:0 |
||||
} |
||||
align-items: center; |
||||
margin-top: 20px; |
||||
} |
||||
::v-deep .el-drawer__header{ |
||||
display: none; |
||||
} |
||||
::v-deep .billBottom .el-form-item__label{ |
||||
line-height: 20px; |
||||
color: #999; |
||||
} |
||||
::v-deep .billBottom .el-form-item__content{ |
||||
line-height: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,436 @@ |
||||
<template> |
||||
<div class="order"> |
||||
<div class="frame"> |
||||
<el-input class="mr20" v-model="parameter.params.customerId" clearable></el-input> |
||||
<el-select style="margin-right: 20px;" v-model="parameter.params.id" placeholder="用户名称" clearable> |
||||
<el-option |
||||
v-for="item in refineryList" |
||||
:key="item.id" |
||||
:label="item.refineryName" |
||||
:value="item.id" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
<el-select v-model="parameter.params.id" placeholder="炼厂名称" clearable> |
||||
<el-option |
||||
v-for="item in refineryList" |
||||
:key="item.id" |
||||
:label="item.refineryName" |
||||
:value="item.id" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
<el-select v-model="parameter.params.id" placeholder="产品名称" clearable> |
||||
<el-option |
||||
v-for="item in refineryList" |
||||
:key="item.id" |
||||
:label="item.refineryName" |
||||
:value="item.id" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
<div class="buttons"> |
||||
<el-button icon="el-icon-search" @click="handleCurrentChange(1)" |
||||
>查询</el-button |
||||
> |
||||
<el-button icon="el-icon-refresh" @click="reset">重置</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="table"> |
||||
<div class="operation"> |
||||
<!-- <el-button icon="el-icon-upload2" @click="addition">炼厂入驻</el-button> --> |
||||
</div> |
||||
<el-table |
||||
v-if="tableHeight" |
||||
ref="multipleTable" |
||||
:height="tableHeight" |
||||
:data="tableData" |
||||
style="width: 100%" |
||||
> |
||||
<el-table-column |
||||
prop="id" |
||||
label="订单ID" |
||||
show-overflow-tooltip |
||||
minWidth="250" |
||||
> |
||||
</el-table-column> |
||||
<el-table-column label="购方客户信息" minWidth="250"> |
||||
<template slot-scope="{ row }"> |
||||
<p class="gray"> |
||||
<span>{{ row.customerName }}</span> |
||||
</p> |
||||
<p class="gray"> |
||||
<span>{{ row.customerId || "暂无" }}</span> |
||||
</p> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="炼厂&产品" minWidth="250"> |
||||
<template slot-scope="{ row }"> |
||||
<p class="gray"> |
||||
炼厂名称 <span>{{ row.refineryName }}</span> |
||||
</p> |
||||
<p class="gray"> |
||||
产品名称 <span>{{ row.productName }}</span> |
||||
</p> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
prop="salePrice" label="价格" minWidth="90"> |
||||
</el-table-column> |
||||
|
||||
|
||||
<el-table-column prop="payStatus" label="支付状态" minWidth="120" show-overflow-tooltip> |
||||
<template slot-scope="{ row }"> |
||||
<el-tag :effect="payTagType(row.payStatus).effect" :type="payTagType(row.payStatus).type">{{ payTagType(row.payStatus).label }}</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="orderStatus" label="订单状态" minWidth="120"> |
||||
<template slot-scope="{ row }"> |
||||
<el-tag :effect="orderTagType(row.orderStatus).effect" :type="orderTagType(row.orderStatus).type">{{ orderTagType(row.orderStatus).label }}</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
prop="orderSerialNumber" |
||||
label="订单提货量(实际/预约)" |
||||
minWidth="180" |
||||
> |
||||
<template slot-scope="{ row }"> |
||||
<span>{{ row.actQuantity?row.actQuantity:'--' }} / {{ row.preQuantity?row.preQuantity:'--' }} 吨</span> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
prop="orderSerialNumber" |
||||
label="订单金额(实际/预约)" |
||||
minWidth="180" |
||||
> |
||||
<template slot-scope="{ row }"> |
||||
<span>{{ row.actAmount }} / {{ row.preAmount }} 元</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="时间" minWidth="235"> |
||||
<template slot-scope="{ row }"> |
||||
<p class="gray"> |
||||
创建时间 <span>{{ row.createTime }}</span> |
||||
</p> |
||||
<p class="gray"> |
||||
更新时间 <span>{{ row.updateTime || "暂无" }}</span> |
||||
</p> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="orderSerialNumber" fixed="right" label="操作" width="250"> |
||||
<template slot-scope="{ row }"> |
||||
<el-link type="primary" :underline="false" @click="detail(row)" |
||||
>详情</el-link |
||||
> |
||||
<el-link v-show="row.orderStatus!=='SUBMITED'&&row.orderStatus!=='ORDER_LOCKED'" type="primary" :underline="false" @click="billOfLading(row)" |
||||
>提货单</el-link |
||||
> |
||||
<el-popconfirm |
||||
title="是否确认订单锁定？" |
||||
icon-color="red" |
||||
@confirm="deleteRow(row)" |
||||
> |
||||
<el-link v-show="row.orderStatus=='SUBMITED'" slot="reference" type="primary" :underline="false" |
||||
>订单锁定</el-link |
||||
> |
||||
</el-popconfirm> |
||||
<el-popconfirm |
||||
title="是否确认取消订单？" |
||||
icon-color="red" |
||||
@confirm="deleteRow(row)" |
||||
> |
||||
<el-link v-show="row.orderStatus=='SUBMITED'" slot="reference" type="primary" :underline="false" |
||||
>订单取消</el-link |
||||
> |
||||
</el-popconfirm> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<el-pagination |
||||
background |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="parameter.currentPage" |
||||
:page-size="parameter.pageSize" |
||||
:popper-append-to-body="false" |
||||
:page-sizes="[10, 20, 30, 50]" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
|
||||
<el-drawer |
||||
title="详情" |
||||
direction="ltr" |
||||
size="60%" |
||||
:withHeader="false" |
||||
:visible="controlWindows.detail" |
||||
> |
||||
<general-details |
||||
title="详情" |
||||
:isHeader="true" |
||||
v-if="controlWindows.detail" |
||||
:sourceData="oilCompanyMatch" |
||||
:mappingData="mappingData" |
||||
@close="controlWindows.detail = false" |
||||
> |
||||
</general-details> |
||||
</el-drawer> |
||||
<!-- 提货单 --> |
||||
<billOfLading :billData="billData" :controlWindows="controlWindows" @closeWindow="handleCurrentChange" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import serve from "api/refineryInfo.js"; |
||||
import order from "api/order.js"; |
||||
import generalDetails from "components/generalDetails/index.vue"; |
||||
import billOfLading from "./components/billOfLading.vue"; |
||||
import { mapGetters } from "vuex"; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
controlWindows: { |
||||
add: false, |
||||
addInfo: { |
||||
|
||||
}, |
||||
detail: false, |
||||
bill: false, |
||||
}, |
||||
refineryTypeEnum: [ |
||||
{ |
||||
label: "普通炼厂", |
||||
value: "COMMON", |
||||
}, |
||||
], |
||||
refineryList: [], |
||||
tableHeight: 0, |
||||
tableData: [], |
||||
total: 0, |
||||
parameter: { |
||||
currentPage: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
params: {}, |
||||
}, |
||||
oilCompanyMatch: {}, |
||||
billData:[], |
||||
mappingData: [ |
||||
{ |
||||
carTitle: "", |
||||
carItems: [ |
||||
{ label: "订单ID", value: "id" }, |
||||
{ label: "炼厂ID", value: "refineryId" }, |
||||
{ label: "支付状态", value: "payStatus" }, |
||||
{ label: "订单状态", value: "orderStatus" }, |
||||
{ label: "提货单数量", value: "deliveryCount" }, |
||||
// { label: "创建用户ID", value: "createUser" }, |
||||
// { label: "创建时间", value: "createTime" }, |
||||
// { label: "修改用户ID", value: "updateUser" }, |
||||
// { label: "修改时间", value: "updateTime" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapGetters(["company_id"]), |
||||
}, |
||||
components: { |
||||
generalDetails, |
||||
billOfLading |
||||
}, |
||||
mounted() { |
||||
this.$nextTick(() => { |
||||
this.heightHandle(); |
||||
}); |
||||
window.addEventListener( |
||||
"resize", |
||||
this.$utils.debounce(this.heightHandle, 500) |
||||
); |
||||
}, |
||||
created() { |
||||
this.findByEntity(); |
||||
this.getByPage(); |
||||
console.log(localStorage.getItem('companyIdData'),'ssssssssssss') |
||||
}, |
||||
methods: { |
||||
payTagType(val){ |
||||
switch(val){ |
||||
case 'PREPAID': return {label:'预支付',type:'info'} |
||||
case 'PAYING': return {label:'支付中',type:'warning'} |
||||
case 'SUCCESS': return {label:'支付成功',type:'success',effect:'dark'} |
||||
case 'FAILURE': return {label:'支付失败',type:'danger',effect:'dark'} |
||||
case 'CANCELED': return {label:'支付取消',type:'info'} |
||||
case 'REFUNDED': return {label:'退款成功',type:'danger',effect:'dark'} |
||||
case 'REFUNDING': return{label:'退款中',type:'warning'} |
||||
case 'REFUNDFAIL': return{label:'退款失败',type:'info',effect:'dark'} |
||||
} |
||||
return {label:val?val:'暂无数据',type:'info',effect:'plain'} |
||||
}, |
||||
orderTagType(val){ |
||||
switch(val){ |
||||
case 'SUBMITED': return {label:'订单提交 ',type:'info'} |
||||
case 'ORDER_LOCKED': return {label:'订单锁定',type:'warning'} |
||||
case 'ORDER_SUCCESS': return {label:'下单成功',type:'success',effect:'dark'} |
||||
case 'DELIVERING': return {label:'提货中', type: ''} |
||||
case 'COMPLETE': return {label:'订单完成',type:'success',effect:'dark'} |
||||
case 'CANCELED': return {label:'订单取消',type:'info'} |
||||
} |
||||
return {label:val?val:'暂无数据',type:'info'} |
||||
}, |
||||
// currentPage change |
||||
handleCurrentChange(page) { |
||||
this.parameter.currentPage = page; |
||||
this.getByPage(); |
||||
}, |
||||
// pageSize change |
||||
handleSizeChange(size) { |
||||
this.parameter.currentPage = 1; |
||||
this.parameter.pageSize = size; |
||||
this.getByPage(); |
||||
}, |
||||
//table list |
||||
getByPage() { |
||||
order.getByPage(this.parameter).then((res) => { |
||||
this.tableData = res.data.list; |
||||
this.total = res.data.totalCount; |
||||
}); |
||||
}, |
||||
//炼厂list |
||||
findByEntity() { |
||||
serve.findByEntity().then((res) => { |
||||
this.refineryList = res.data; |
||||
}); |
||||
}, |
||||
//新增 |
||||
addition() { |
||||
this.controlWindows.addInfo.title = "炼厂入驻"; |
||||
this.controlWindows.add = true; |
||||
}, |
||||
//提货单 |
||||
async billOfLading(row){ |
||||
this.controlWindows.addInfo.title = ""; |
||||
await order.findDeliveryByOrderId(row.id).then((res) => { |
||||
this.billData.list = res.data |
||||
}); |
||||
await order.findByOrderId(row.id).then((res) => { |
||||
this.billData.orderInfo = res.data |
||||
}); |
||||
this.controlWindows.addInfo = row |
||||
this.controlWindows.bill = true |
||||
}, |
||||
//详情 |
||||
detail(row) { |
||||
this.oilCompanyMatch = [row]; |
||||
this.controlWindows.detail = true; |
||||
}, |
||||
//订单锁定 |
||||
deleteRow(row) { |
||||
order.orderLock({id:row.id}).then((res) => { |
||||
if(res.code == 20000){ |
||||
this.getByPage() |
||||
} |
||||
}); |
||||
}, |
||||
//启用禁用 |
||||
switchTrigger(val, row) { |
||||
row.enableMark = row.enableMark; |
||||
serve |
||||
.update({ |
||||
id: row.id, |
||||
enableMark: val, |
||||
}) |
||||
.then((res) => { |
||||
if (res.code === 20000) { |
||||
this.getByPage(); |
||||
} else this.$message.error(res.msg); |
||||
}); |
||||
}, |
||||
//重置 |
||||
reset() { |
||||
this.parameter = { |
||||
currentPage: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
params: {}, |
||||
}; |
||||
}, |
||||
// table height |
||||
heightHandle() { |
||||
let bodyHeight = document.body.clientHeight; |
||||
let frameHeight = this.obtainElement(".frame").clientHeight; |
||||
let operationHeight = this.obtainElement(".operation").clientHeight; |
||||
let paginationHeight = this.obtainElement(".el-pagination").clientHeight; |
||||
this.tableHeight = |
||||
bodyHeight - frameHeight - operationHeight - paginationHeight - 145; |
||||
}, |
||||
obtainElement(className) { |
||||
return document.documentElement.querySelector(className); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.order { |
||||
.frame { |
||||
margin: 20px; |
||||
padding: 20px; |
||||
// width: 100%; |
||||
border-radius: 6px; |
||||
border: 1px solid #e3e3e5; |
||||
background: #fff; |
||||
.el-input, |
||||
.el-select { |
||||
width: 183px; |
||||
height: 40px; |
||||
} |
||||
.el-input + .el-input, |
||||
.el-input + .el-select, |
||||
.el-select + .el-select, |
||||
.el-select + .el-input { |
||||
margin-right: 20px; |
||||
margin-bottom: 15px; |
||||
} |
||||
.mr20 { |
||||
margin-right: 20px; |
||||
} |
||||
.buttons { |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
.table { |
||||
overflow: hidden; |
||||
margin: 0 20px; |
||||
padding-bottom: 20px; |
||||
background: #fff; |
||||
border-radius: 6px; |
||||
border: 1px solid #e3e3e5; |
||||
> .operation { |
||||
box-sizing: content-box; |
||||
// padding: 15px; |
||||
} |
||||
.gray { |
||||
color: #999; |
||||
span { |
||||
color: #333; |
||||
} |
||||
} |
||||
.el-table { |
||||
margin-bottom: 20px; |
||||
border-radius: 10px 10px 0px 0px; |
||||
} |
||||
.el-link { |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue