338 lines
11 KiB
338 lines
11 KiB
<template> |
|
<div v-loading="loading" style="padding:20px"> |
|
<el-row> |
|
<el-form ref="ruleForm" :rules="ruleForm" :model="oilTfOrder" label-width="120px" :size="$store.getters.size"> |
|
<el-row :span="24"> |
|
<el-col :span="13"> |
|
<el-form-item label="匹配任务名称" prop="taskName"> |
|
<el-input v-model="oilTfOrder.taskName" clearable placeholder="请输入匹配任务内容" /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="13"> |
|
<el-form-item label="匹配公司" prop="companyId"> |
|
<el-select v-model="oilTfOrder.companyId" style="width:100%" remote filterable :remote-method="parentCompanyOrginQuery" clearable placeholder="请输入" @change="queryCompanyInfo" @keyup.enter.native="getByPage"> |
|
<el-option |
|
v-for="item in companyList" |
|
:key="item.id" |
|
:label="item.name" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="13"> |
|
<el-form-item label="匹配目标金额" prop="matchAmount"> |
|
<el-input v-model="oilTfOrder.matchAmount" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="13"> |
|
<el-form-item label="匹配油站" prop="siteId"> |
|
<!-- <el-input v-model="oilTfOrder.siteId" clearable /> --> |
|
<div style="margin-bottom:20px"> |
|
<el-radio v-model="pipeiType" :label="0" border size="medium">按省份</el-radio> |
|
<el-radio v-model="pipeiType" :label="1" border size="medium">按独立油站</el-radio> |
|
</div> |
|
<el-cascader |
|
@change="query" |
|
v-show="!pipeiType" |
|
ref="refSubCat" |
|
v-model="addrCode" |
|
placeholder="请选择" |
|
:size="$store.getters.size" |
|
style="width: 100%" |
|
:options="areaTree" |
|
:props="{value:'id', label:'areaName'}" |
|
filterable |
|
clearable |
|
/> |
|
<el-select |
|
v-show="pipeiType" |
|
v-model="oilTfOrder.siteId" |
|
style="width:100%" |
|
filterable |
|
remote |
|
clear |
|
clearable |
|
reserve-keyword |
|
placeholder="油站名称" |
|
:remote-method="getSimpleOilSiteInfo" |
|
@change="query" |
|
> |
|
<el-option v-for="item in sites" :key="item.id" :label="item.siteName" :value="item.id" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="13"> |
|
<el-form-item label="订单结束时间" prop="orderEndTime"> |
|
<el-date-picker |
|
:picker-options="pickerOptions" |
|
:disabled="disabled" |
|
v-model="value1" |
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
style="width:100%" |
|
type="datetimerange" |
|
range-separator="至" |
|
:unlink-panels="true" |
|
start-placeholder="开始日期" |
|
end-placeholder="结束日期" |
|
@change="showss" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row type="flex" :span="24" class="row-show" justify="end" style="margin-bottom:24px;justify-content: space-between !important;padding: 0 50px;"> |
|
<el-col v-show="oilCompanyAccount.balance" :span="11"> |
|
<el-card class="box-card"> |
|
<div> |
|
公司账户信息 |
|
</div> |
|
<hr> |
|
<el-row style="margin-top:10px"> |
|
<el-col :span="12"> |
|
<font color="#A4A4A4">公司名称 </font> |
|
</el-col> |
|
<el-col :span="12" style="text-align:right"> |
|
<font>{{ oilCompanyAccount.companyName }} </font> |
|
</el-col> |
|
</el-row> |
|
<el-row style="margin-top:10px"> |
|
<el-col :span="12"> |
|
<font color="#A4A4A4">总余额： </font> |
|
</el-col> |
|
<el-col :span="12" style="text-align:right"> |
|
<font>¥ {{ oilCompanyAccount.balance }}</font> |
|
</el-col> |
|
</el-row> |
|
</el-card> |
|
</el-col> |
|
<el-col v-show="orderQueryInfo.tfOrderTotal" :span="11"> |
|
<el-card class="box-card"> |
|
<div> |
|
订单匹配信息 |
|
</div> |
|
<hr> |
|
<el-row> |
|
<el-col :span="12"> |
|
<font color="#A4A4A4">订单数量： </font> |
|
</el-col> |
|
<el-col :span="12" style="text-align:right"> |
|
<font> {{ orderQueryInfo.tfOrderTotal }} </font> |
|
</el-col> |
|
</el-row> |
|
|
|
<el-row style="margin-top:10px"> |
|
<el-col :span="12"> |
|
<font color="#A4A4A4">订单金额 </font> |
|
</el-col> |
|
<el-col :span="12" style="text-align:right"> |
|
<font>¥ {{ orderQueryInfo.payRealAmountTotal }} </font> |
|
</el-col> |
|
</el-row> |
|
|
|
</el-card> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="22"> |
|
<el-form-item label="匹配备注说明" prop="remark"> |
|
<el-input |
|
v-model="oilTfOrder.remark" |
|
type="textarea" |
|
:rows="3" |
|
placeholder="请输入内容" |
|
clearable |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<div :span="24" |
|
style="background:#fff;margin-top:20px;text-align: right;width:100%;"> |
|
<el-button @click="close">取消</el-button> |
|
<el-button type="primary" @click="submit" style="margin-right:10px">提交</el-button> |
|
</div> |
|
</el-form> |
|
</el-row> |
|
</div> |
|
</template> |
|
<script> |
|
import oilCompanyInfoApi from '@/api/user/oilCompanyInfo' |
|
import oilCompanyAccountApi from '@/api/finance/oilCompanyAccount' |
|
import oilSiteInfoApi from '@/api/user/oilSiteInfo' |
|
import AreaCodeApi from '@/api/base/areaCode' |
|
import orderInfoApi from '@/api/order/orderInfo' |
|
export default { |
|
data() { |
|
return { |
|
pickerOptions:{ |
|
disabledDate:function(e){ |
|
if(Date.parse(e)<Date.parse('2022/05/25')){ |
|
return true |
|
}else{ |
|
return false |
|
} |
|
} |
|
}, |
|
disabled:false, |
|
pipeiType:0, |
|
areaTree: [], |
|
addrCode: [], // 省市区code |
|
value1: '', |
|
gridNum: { |
|
row: { |
|
gutter: 2 |
|
}, |
|
cols: { |
|
xs: 24, |
|
sm: 24, |
|
md: 12, |
|
lg: 12, |
|
xl: 6 |
|
} |
|
}, |
|
oilTfOrder: { |
|
}, |
|
sites: [], // 主油站集合 |
|
loading: false, |
|
ruleForm: { |
|
task_name: [ |
|
{ required: true, message: '匹配任务名称不能为空', trigger: 'change' } |
|
], |
|
companyId: [ |
|
{ required: true, message: '匹配公司不能为空', trigger: 'change' } |
|
], |
|
matchAmount: [ |
|
{ required: true, message: '匹配目标金额不能为空', trigger: 'change' }, |
|
{ pattern: /(^[1-9]\d{0,5}(\.[0-9]{1,2})?$)|(^[0](\.\d{1,2})?$)|(^[1][0]{6}(\.[0]{1,2})?$)/, message: '匹配金额在1-1000000区间' } |
|
], |
|
orderStartTime: [ |
|
{ required: true, message: '订单开始时间不能为空', trigger: 'change' } |
|
] |
|
}, |
|
companyList: [], // 企业列表 |
|
orderQueryInfo: {}, // 匹配订单信息 |
|
oilCompanyAccount: {} // 企业账户信息 |
|
} |
|
}, |
|
watch:{ |
|
pipeiType(){ |
|
if(this.pipeiType){ |
|
this.addrCode = [] |
|
}else{ |
|
this.oilTfOrder.siteId = '' |
|
} |
|
} |
|
}, |
|
created() { |
|
AreaCodeApi.getTree().then(res => { |
|
this.areaTree = res.data |
|
}) |
|
}, |
|
methods: { |
|
showss() { |
|
this.oilTfOrder.orderStartTime = this.value1[0] |
|
this.oilTfOrder.orderEndTime = this.value1[1] |
|
this.query() |
|
}, |
|
// 远程搜索主油站 |
|
getSimpleOilSiteInfo(siteName) { |
|
if (siteName) { |
|
const oilSiteInfo = {} |
|
oilSiteInfo.siteName = siteName |
|
oilSiteInfoApi.getSimpleOilSiteInfo(oilSiteInfo).then(res => { |
|
this.sites = res.data |
|
}) |
|
} else { |
|
this.sites = [] |
|
} |
|
}, |
|
queryCompanyInfo(value) { |
|
console.log('123') |
|
if (value) { |
|
oilCompanyAccountApi.getByCompanyId(value).then(res => { |
|
this.oilCompanyAccount = res.data |
|
}) |
|
} else { |
|
this.oilCompanyAccount = {} |
|
} |
|
}, |
|
parentCompanyOrginQuery(value) { // 远程搜索企业 |
|
if (value) { |
|
oilCompanyInfoApi.getLikeByNameSuccess({ 'name': value }).then(res => { |
|
this.companyList = res.data |
|
}) |
|
} |
|
}, |
|
// disabledDate(){ |
|
// console.log(arguments,'禁用回调') |
|
|
|
// return false |
|
// }, |
|
query() { |
|
if(this.addrCode.length>0 && this.addrCode){ |
|
this.oilTfOrder.provinceCode = this.addrCode[0] |
|
}else{ |
|
this.oilTfOrder.provinceCode = '' |
|
} |
|
// 查询日期匹配信息 |
|
if (this.oilTfOrder.orderEndTime && this.oilTfOrder.orderStartTime) { |
|
orderInfoApi.getTfOrderInfo(this.oilTfOrder).then(res => { |
|
console.log(res) |
|
this.orderQueryInfo = res.data |
|
}) |
|
} |
|
}, |
|
submit() { |
|
this.$refs['ruleForm'].validate((valid) => { |
|
console.log(valid) |
|
if (valid) { |
|
console.log('这里是匹配订单信息') |
|
console.log(this.oilTfOrder) |
|
this.save(this.oilTfOrder) |
|
} |
|
}) |
|
}, |
|
save() { |
|
this.$confirm('是否确定添加，请确认！', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning' |
|
}).then(() => { |
|
// 这里调用接口 |
|
// 保存 |
|
this.loading = true |
|
orderInfoApi.TfOrder(this.oilTfOrder).then(res => { |
|
this.$message.success(res.msg) |
|
this.oilTfOrder = {} |
|
this.orderQueryInfo = {} |
|
this.oilCompanyAccount = {} |
|
this.companyList = [] |
|
this.value1 = '' |
|
this.loading = false |
|
this.$emit('closeDialog') |
|
this.$emit('getByPage') |
|
}) |
|
}).catch(() => { |
|
this.$message({ |
|
type: 'info', |
|
message: '已取消' |
|
}) |
|
}).finally(res=>{ |
|
this.loading = false; |
|
console.log('finally') |
|
|
|
}) |
|
}, |
|
close() { |
|
this.$emit('closeDialog') |
|
} |
|
} |
|
} |
|
</script> |
|
<style> |
|
|
|
</style> |
|
<style scoped> |
|
.el-divider--horizontal { |
|
margin: 10px 0; |
|
} |
|
</style> |