338 lines
11 KiB
Vue
338 lines
11 KiB
Vue
<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> |