promise
一、同时提交多个表单：
src/components/warehouse/order/create.vue
<template>
<div>
<div class="row">
<div class="col-xs-12">
<template v-if="isEditBeforeOutStorage">
<div style="margin-bottom: 10px;">
<button class="btn default" @click.prevent="cancelTo()">取消</button>
<button class="btn green" @click.prevent="change">修改</button>
</div>
</template>
<div class="portlet-title tabbable-line tabbable-line-style" v-if="isOrderCreate">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab_1_3" data-toggle="tab" @click.prevent="changeTemp(false)"> 签约商家 </a>
</li>
<!-- 屏蔽临时商家 -->
<!-- <li v-if="!id">
<a href="#tab_1_4" data-toggle="tab" @click.prevent="changeTemp(true)"> 临时商家 </a>
</li>-->
</ul>
</div>
<div v-if="isEditBeforeOutStorage && boolTurnOrder" class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
<strong>警告!</strong>
本单已被分拣给 <span class="font-red">{{ branch }}</span>，修改订单后本单将重新分拣给系统内网点，请在修改订单后重新转派订单！
</div>
<typography title="基本信息">
<!--商家信息 basic-->
<basic ref="basic"
:isTemp="isTemp"
:detailDetail="detailDetail"
:isEditBeforeOutStorage="isEditBeforeOutStorage"
@serviceMap="setServiceMap"
@merchantPickupLocations="setMerchantPickupLocations"
@boolCollection="setBoolConllection"
@ifCredit="setIfCredit"
@creditBalace="setCreditBalace"
@businessTypes="setBusinessTypes"
@clearingSubject="setClearingSubject"
@cleaningCycle="setCleaningCycle"
@setMerchantId="setMerchantId"
@setTempClearingModeNo="setTempClearingModeNo"
:canrevampArr="canrevampArr"
></basic>
<!--服务信息service-->
<service ref="service"
:isTemp="isTemp"
:merchantId="merchantId"
:isEditBeforeOutStorage="isEditBeforeOutStorage"
:detailDetail="detailDetail"
:propBusinessTypes="businessTypes"
:propServiceMap="serviceMap"
:propMerchantPickupLocations="merchantPickupLocations"
:propBoolCollection="boolCollection"
@setService="setService"
@setOrderSource="setOrderSource"
:tempClearingModeNo="tempClearingModeNo"
:propWriteOffSource="propWriteOffSource"
:canrevampArr="canrevampArr"
:isTemporaryOrder="isTemporaryOrder"
></service>
<!--客户信息 customer-->
<customer
ref="customer"
:detailDetail="detailDetail"
@customerAddress="setCustomerAddress"
@setExceedFee="setExceedFee"
@setExceedPrice="setExceedPrice"
@setExceedDistance="setExceedDistance"
@setRealityDistance="setRealityDistance"
:canrevampArr="canrevampArr"
@choosePro="choosePro"
@chooseCi="chooseCi"
@chooseSt="chooseSt"
@chooseAr="chooseAr"
:isEditBeforeOutStorage="isEditBeforeOutStorage"
></customer>
<!--分拣信息sorting-->
<sorting
ref="sorting"
:detailDetail="detailDetail"
:isEditBeforeOutStorage="isEditBeforeOutStorage"
@setTrunkDestinationNo="setTrunkDestinationNo"
@setLineNo="setLineNo"
:customerAddress="customerAddress"
:exceedFee="exceedFee"
:exceedPrice="exceedPrice"
:exceedDistance="exceedDistance"
:realityDistance="realityDistance"
:merchantId="merchantId"
:service="service"
:amend= "isEditBeforeOutStorage"
:canrevampArr="canrevampArr"
:isTemporaryOrder="isTemporaryOrder"
>
</sorting>
</typography>
<typography title="产品信息">
<production
:from="from"
:detailDetail="detailDetail"
@setTotalVolume="setTotalVolume"
@setTotalWeight="setTotalWeight"
@setCargoPrice="setCargoPrice"
@setOrderGoodss="setOrderGoodss"
@setIsLightHeavy="setIsLightHeavy"
:service="service"
:fee="fee"
:canrevampArr="canrevampArr"
:isEditBeforeOutStorage="isEditBeforeOutStorage"
:orderSource="orderSource"
ref="production">
</production>
</typography>
<typography title="费用信息">
<fee
ref="fee"
:detailDetail="detailDetail"
:isTemp="isTemp"
:service="service"
:clearingSubject="clearingSubject"
@totalFee="setTotalFee"
:fee="fee"
:inStorage="inStorage"
:cargoPrice="cargoPrice"
:exceedFee="exceedFee"
:canrevampArr="canrevampArr"
:isEditBeforeOutStorage="isEditBeforeOutStorage"
:isTemporaryOrder="isTemporaryOrder"
></fee>
</typography>
</div>
</div>
<div class="row">
<create-portlet-group>
<!-- 订单变更 -->
<div v-if="isEditBeforeOutStorage">
<!-- 变更弹窗 -->
<edit-voucher :changeOrderData="changeOrderData" :id="id" listRoute="/operate/order/change" :orderData="detailDetail" ref="editVoucher"></edit-voucher>
<div class="portlet-body">
<div class="row">
<div class="col-xs-2 col-xs-offset-5">
<button @click.prevent="change" class="btn btn-primary btn-block btn-lg green ladda-button"
data-style="zoom-out">提交变更
</button>
</div>
</div>
</div>
</div>
<!-- /订单变更 -->
<!-- 订单新增-->
<div v-if="!isEditBeforeOutStorage">
<div class="portlet-body">
<div class="row">
<div class="col-xs-2 col-xs-offset-5">
<button @click.prevent="submit" class="btn btn-primary btn-block btn-lg green ladda-button"
data-style="zoom-out">提交
</button>
<!-- <button style="width: 107px; margin-left: 15px; border: 1px solid #cccccc; display: inline-block;" @click.prevent="save" class="btn default btn-lg btn-circle ladda-button" data-style="zoom-out">保存
</button> -->
</div>
</div>
</div>
</div>
<!-- 订单新增 -->
</create-portlet-group>
<tong-guo-model
ref="tongGuoModel"
@saveTrunk="saveTrunk"
></tong-guo-model>
</div>
</div>
</template>
<script>
import tongGuoModel from 'components/warehouse/order/tongGuoModel'
import {httpSuccessPost, httpSuccessGet} from 'assets/scripts/base/util'
import {merge, swal, dotData, alert} from 'assets/scripts/base/functions'
import {empty} from 'assets/scripts/base/validatorUtil'
import {hasProduction, hasTrunkSorting, hasBranchSorting} from 'assets/scripts/business/orderCreate'
import {mapActions} from 'vuex'
import createPortletGroup from 'components/base/createPortletGroup'
import basic from 'components/warehouse/order/create/basic'
import service from 'components/warehouse/order/create/service'
import customer from 'components/warehouse/order/create/customer'
import sorting from 'components/warehouse/order/create/sorting'
import production from 'components/warehouse/order/create/production'
import fee from 'components/warehouse/order/create/fee'
import jFormItem from 'components/base/form/jFormItem'
import {getOrderTag, getFreedomFeeType} from 'assets/scripts/business/store'
import lodash from 'lodash'
import editVoucher from 'components/operate/order/detail/change/editVoucher'
import {canRevampFilter, returnValueFilter, unixTimestampFilter} from 'assets/scripts/base/filters'
import showPortlet from 'components/base/showPortlet'
import typography from 'components/base/typography'
export default {
name: 'dataDotCreate',
components: {
createPortletGroup,
basic,
service,
customer,
sorting,
production,
fee,
jFormItem,
editVoucher,
showPortlet,
tongGuoModel,
typography
},
props: {
orderId: {
type: String,
default: ''
},
// 暂存单详情
isTemporaryOrder: {
type: Boolean,
default: false
},
// 判断是否是入库前
inStorage: {
type: Boolean,
default: false
}
},
filters: {
unixTimestampFilter
},
data () {
return {
id: this.$route.params.id,
from: this.$route.params.from || '',
detailDetail: {}, // 详细信息
isTemp: false,
propWriteOffSource: [],
businessTypes: [],
serviceMap: new Map(),
merchantPickupLocations: [],
boolCollection: '',
ifCredit: false,
creditBalace: '',
customerAddress: [],
service: '',
clearingSubject: '', // 结算主体
cleaningCycle: '',
trunkDestinationNo: '', // 干线到达站编号
merchantId: '', // 商家编号
totalVolume: '', // 总体积
totalWeight: '', // 总重量
cargoPrice: '', // 总货值
lineNo: '', // 线路编号
orderGoodss: [], // 商品
isLightHeavy: '', // 轻重货
totalFee: '', // 服务费用总计
fee: {}, // 算费
tempClearingModeNo: '', // 临时商家结算方式
exceedPrice: '', // 超区单价
exceedFee: '', // 超区费
exceedDistance: '', // 超区距离
realityDistance: '', // 距区/县中心
calculateData: {}, // 算费参数
changeOrderData: {}, // 订单变更数据
tabIndex: 1,
canrevampArr: [], // 可修改的数组
historyEdition: [],
saveTrunkVal: '0', // 不保留物流
orderSource: ''
}
},
created () {
this.setPageBar([
{text: '录单'}
])
this.init()
this.http()
},
computed: {
// 录单
isOrderCreate () {
return this.$route.name === 'warehouseOrderCreate'
},
// 直营导单
isZhiying () {
return this.$route.name === 'warehouseZhiYingImport'
},
// 订单出库前修改
isEditBeforeOutStorage () {
return this.$route.name === 'operateOrderChangeBeforeOutStorage'
},
// 是否已转单
boolTurnOrder () {
return dotData(this.detailDetail, 'boolTurnOrder')
},
// 已转网点的网点和姓名
branch () {
return dotData(this.detailDetail, 'branch')
}
},
methods: {
returnValueFilter,
canRevampFilter,
init () {
getOrderTag().then(arr => {
this.orderIdentification = arr
})
getFreedomFeeType().then(arr => {
this.freedomFeeType = arr
})
// 如果有id 获取详情数据
if (this.id) {
// 出库前编辑
if (this.isEditBeforeOutStorage) {
httpSuccessGet('/ms-order-data/orderUpdate/queryOrder', {orderId: this.id}).then(response => {
if (response) {
this.detailDetail = response
const isTemp = dotData(response, 'isTemp')
if (isTemp !== null) {
this.isTemp = isTemp
}
let arr = []
response.orderChengeConfigurationList.forEach(v => {
arr.push({text: v.changeValue, value: v.function})
})
let arr1 = []
response.orderChengeConfigurationList.forEach(v => {
arr1.push(v.changeValue)
})
this.canrevampArr = arr
}
})
}
}
// 如果有传入的 orderId
if (this.orderId) {
this.id = this.orderId
httpSuccessGet('/ms-order-data/tempOrderInfo/queryOrder', {orderId: this.orderId}).then(response => {
this.detailDetail = response
const isTemp = dotData(response, 'isTemp')
if (isTemp !== null) {
this.isTemp = isTemp
}
// 辅助 orderSource 产品信息要用
this.orderSource = dotData(response, 'orderSource')
return response
})
}
},
changeTemp (bo) {
this.isTemp = bo
},
// 业务类型
setBusinessTypes (businessTypes) {
this.businessTypes = businessTypes
},
// 服务类型
setServiceMap (serviceMap) {
this.serviceMap = serviceMap
},
// 商家提货地址
setMerchantPickupLocations (merchantPickupLocations) {
this.merchantPickupLocations = merchantPickupLocations
},
// 商家是否需要代收款
setBoolConllection (boolCollection) {
this.boolCollection = boolCollection
},
// 是否授信限制
setIfCredit (ifCredit) {
this.ifCredit = ifCredit
},
// 授信剩余额度
setCreditBalace (creditBalace) {
this.creditBalace = creditBalace
},
// 保存
save ($event) {
const basic = this.$refs.basic.getModel()
const service = this.$refs.service.getModel()
const customer = this.$refs.customer.getModel()
const sorting = this.$refs.sorting.getModel()
const production = this.$refs.production.getModel()
const fee = this.$refs.fee.getModel()
// 如果以上任何一个表单块 验证不通过，则返回的false，就不会执行下面的promise.all
Promise.all([basic, service, customer, sorting, production, fee]).then(arr => {
for (let v of arr) {
if (v === false) {
alert('表单验证未通过')
return
}
}
const loading = window.Ladda.create($event.currentTarget || $event.target)
loading.start()
const data = merge(...arr, {isTemp: this.isTemp})
if (this.id) {
data.handleType = 3
data.id = this.id
} else {
data.handleType = 0
}
httpSuccessPost('/ms-order-data/orderData/insertData', data).then(response => {
const success = dotData(response, 'success')
if (success) {
swal({
title: '保存成功',
confirmButtonText: '确定',
type: 'success',
customClass: 'visible'
}, (confirm) => {
loading.stop()
let path = ''
if (this.isOrderCreate) {
path = '/warehouse/order/create'
this.setRefreshRoute({path})
} else if (this.isTemporaryOrder) {
path = `/warehouse/temporary/create/${this.id}`
this.setCloseRoute({path})
this.setRefreshRoute({path: '/warehouse/temporary/index'})
}
})
} else {
loading.stop()
}
})
})
},
// 验证总体积， 不影响提交 后期加了 商家重复判断
prePostValidateTotalVolume (data) {
return new Promise((resolve, reject) => {
let totalVolume = dotData(data, 'totalVolume')
if (parseFloat(totalVolume) >= 20) {
swal({
title: '录单超方',
text: '<p>你录的订单已超过20m³,<br/>' +
'请核实是否填写正确! <br/>你可以返回修改或者继续提交订单</p><p class="font-red">(如确定按以上信息提交,发生金额纠纷将由本人承担!)</p> ',
html: true,
showCancelButton: true,
confirmButtonText: '提交订单',
cancelButtonText: '返回修改',
type: 'warning'
}, (result) => {
if (result) {
resolve(true)
}
reject(false)
})
} else {
resolve(true)
}
}).then(result => {
if (result) {
return this.preValidateSameCustomer(data)
}
return result
})
},
preValidateSameCustomer (data) {
return new Promise((resolve, reject) => {
httpSuccessGet('/ms-order-data/orderData/check-repeat-data', {
merchant: data.merchant,
consigneeName: data.consigneeName,
consignePhone: data.consigneePhone,
provinceNo: data.provinceNo,
cityNo: data.cityNo,
districtNo: data.districtNo,
streetNo: data.streetNo
}).then(response => {
if (Array.isArray(response)) {
let orderNO = ''
response.forEach(v => {
orderNO += `<a href="/#/order/show/${v.id}" class="to-route">${v.orderNo}</a><br/>`
})
if (response.length > 0) {
swal({
title: '订单信息重复提醒',
text: `<p>根据录入商家、收件人、收件电话、收件地址信息发现疑似重复订单， 订单号为<br/>
${orderNO}<br/>请确认此次操作为非重复录单！</p>`,
html: true,
showCancelButton: true,
confirmButtonText: '提交订单',
cancelButtonText: '返回修改',
type: 'warning'
}, (result) => {
if (result) {
resolve(true)
}
reject(false)
})
} else {
resolve(true)
}
} else {
alert('验证重复接口返回的不是一个数组')
}
// resolve(false)
})
})
},
submit ($event) {
// 判断剩余授信额度是否足够
if (this.ifCredit && this.totalFee > this.creditBalace) {
swal({
title: '本月剩余授信额度不足',
text: `此订单服务费超出该商家本月剩余授信额度，请及时联系商家负责人新增本月授信额度。
<div>商家本月剩余授信额度：` + this.creditBalace + `</div>`,
html: true,
type: 'warning',
confirmButtonText: '确定'
})
return
}
const basic = this.$refs.basic.getModel()
const service = this.$refs.service.getModel()
const customer = this.$refs.customer.getModel()
const sorting = this.$refs.sorting.getModel()
const production = this.$refs.production.getModel()
const fee = this.$refs.fee.getModel()
Promise.all([basic, service, customer, sorting, production, fee]).then(arr => {
for (let v of arr) {
if (v === false) {
alert('表单验证未通过')
return
}
}
const data = merge(...arr, {isTemp: this.isTemp})
this.prePostValidateTotalVolume(data).then(result => {
if (result) {
const loading = window.Ladda.create($event.currentTarget || $event.target)
loading.start()
if (this.id) {
data.handleType = 2
data.id = this.id
} else {
data.handleType = 1
}
let postUrl = ''
if (this.isZhiying) {
postUrl = '/ms-order-data/orderData/insertDirect'
} else {
postUrl = '/ms-order-data/orderData/insertData'
}
httpSuccessPost(postUrl, data).then(response => {
const success = dotData(response, 'success')
if (success) {
swal({
title: '新增成功',
confirmButtonText: '确定',
type: 'success',
customClass: 'visible'
}, (confirm) => {
if (confirm) {
loading.stop()
let path = ''
if (this.isOrderCreate) {
path = '/warehouse/order/create'
this.setRefreshRoute({path})
} else if (this.isTemporaryOrder) {
this.$emit('temporaryOrderCreate', true)
}
}
})
} else {
loading.stop()
}
})
}
})
})
},
// 订单变更
change ($event) {
const basic = this.$refs.basic.getModel()
const service = this.$refs.service.getModel()
const customer = this.$refs.customer.getModel()
const sorting = this.$refs.sorting.getModel()
const production = this.$refs.production.getModel()
const fee = this.$refs.fee.getModel()
Promise.all([basic, service, customer, sorting, production, fee]).then(arr => {
for (let v of arr) {
if (v === false) {
alert('表单验证未通过')
return
}
}
const data = merge(...arr, {isTemp: this.isTemp})
data.id = this.id
this.changeOrderData = data
this.$refs.editVoucher.show()
})
},
// 设置结算主体
setClearingSubject (clearingSubject) {
this.clearingSubject = clearingSubject
},
// setCleaningCycle
setCleaningCycle (cleaningCycle) {
this.cleaningCycle = cleaningCycle
},
// 需改省份触犯算费
choosePro (address) {
// 算费
},
// 需改市份触犯算费
chooseCi (address) {
// 算费
let data = []
if (this.canRevampFilter('cityNo', this.canrevampArr)) {
data = this.returnValueFilter('cityNo', this.canrevampArr).split(',')
}
// 触发算费
for (let key in data) {
if (data[key] === 'fee') {
this.getFee()
}
if (data[key] === 'trunkArrive') {
this.$refs.sorting.setOrderTrunkArriveInfoAddressArr(address)
}
if (data[key] === 'trunkSort') {
this.$refs.sorting.setTrunkSorting(true)
// 直接改
this.$refs.sorting.resetTrunk()
}
if (data[key] === 'trunPrompting') {
this.$refs.customer.changeTipText()
}
if (data[key] === 'trunkSortingPrompting') {
this.$refs.customer.changeTipText()
this.$refs.tongGuoModel.show()
// 是否保存物流
}
}
},
// 需改区触犯算费
chooseAr (address) {
// 算费
let data = []
if (this.canRevampFilter('cityNo', this.canrevampArr)) {
data = this.returnValueFilter('cityNo', this.canrevampArr).split(',')
}
// 触发算费
for (let key in data) {
if (data[key] === 'fee') {
this.getFee()
}
if (data[key] === 'trunkArrive') {
this.$refs.sorting.setOrderTrunkArriveInfoAddressArr(address)
}
if (data[key] === 'trunkSort') {
this.$refs.sorting.setTrunkSorting(address)
}
if (data[key] === 'trunPrompting') {
this.$refs.customer.changeTipText()
}
if (data[key] === 'trunkSortingPrompting') {
this.$refs.customer.changeTipText()
}
}
},
// 需改街算费
chooseSt (address) {
// 算费
let data = []
if (this.canRevampFilter('cityNo', this.canrevampArr)) {
data = this.returnValueFilter('cityNo', this.canrevampArr).split(',')
}
// 触发算费
for (let key in data) {
if (data[key] === 'fee') {
this.getFee()
}
if (data[key] === 'trunkArrive') {
this.$refs.sorting.setOrderTrunkArriveInfoAddressArr(address)
}
if (data[key] === 'trunkSort') {
this.$refs.sorting.setTrunkSorting(address)
}
if (data[key] === 'trunPrompting') {
this.$refs.customer.changeTipText()
}
if (data[key] === 'trunkSortingPrompting') {
this.$refs.customer.changeTipText()
}
}
},
// 设置客户地址
setCustomerAddress (address) {
this.customerAddress = address
// 算费
if (!this.isEditBeforeOutStorage) {
this.getFee()
}
},
// 设置服务类型
setService (service) {
this.service = service
if (!this.isEditBeforeOutStorage) {
this.getFee()
}
},
// 获取干线到达站
setTrunkDestinationNo (no) {
this.trunkDestinationNo = no
if (!this.isEditBeforeOutStorage) {
this.getFee()
}
},
// 设置商家
setMerchantId (id) {
this.merchantId = id
if (!this.isEditBeforeOutStorage) {
this.getFee()
}
},
// 设置总体积
setTotalVolume (v) {
this.totalVolume = v
if (this.isEditBeforeOutStorage) {
let data = []
if (this.canRevampFilter('totalVolume', this.canrevampArr)) {
data = this.returnValueFilter('totalVolume', this.canrevampArr).split(',')
}
for (let key in data) {
if (data[key] === 'fee') {
this.getFee()
}
}
} else {
this.getFee()
}
},
// 设置总重量
setTotalWeight (v) {
this.totalWeight = v
if (!this.isEditBeforeOutStorage) {
this.getFee()
} else {
this.isGoToFee('totalWeight')
}
},
// 设置
setCargoPrice (v) {
this.cargoPrice = v
if (!this.isEditBeforeOutStorage) {
this.getFee()
} else {
this.isGoToFee('cargoPrice')
}
},
// 设置线路编号
setLineNo (v) {
this.lineNo = v
if (!this.isEditBeforeOutStorage) {
this.getFee()
}
},
// 设置产品
setOrderGoodss (v) {
this.orderGoodss = v
if (this.isEditBeforeOutStorage) {
this.orderGoodss = v
this.isGoToFee('goodsInfo')
} else {
this.getFee()
}
},
// 轻货重货
setIsLightHeavy (v) {
this.isLightHeavy = v
if (!this.isEditBeforeOutStorage) {
this.getFee()
} else {
this.isGoToFee('isLightHeavy')
}
},
// 取服务费用总计
setTotalFee (v) {
this.totalFee = v
},
// 算费
getFee () {
const provinceNo = dotData(this.customerAddress, '0.value')
const cityNo = dotData(this.customerAddress, '1.value')
const districtNo = dotData(this.customerAddress, '2.value')
const streetNo = dotData(this.customerAddress, '3.value')
let data = {
provinceNo: provinceNo, // 用户省编码
cityNo: cityNo, // 用户市编码
districtNo: districtNo, // 用户区编码
streetNo,
v: this.totalVolume, // 体积
w: this.totalWeight, // 重量
serviceTypeNo: this.service, // 服务类型编号
isLightHeavy: this.isLightHeavy // 轻重货（1轻2重）
}
// 如果有订单id
if (this.id) {
data.orderId = this.id
} else {
delete data.orderId
}
// 总货值 有就传，没有就不传
if (this.cargoPrice) {
data.cargoPrice = this.cargoPrice
}
// 要有产品信息
if (hasProduction(this.service)) {
data.products = this.orderGoodss // 产品
// 验证产品信息
for (let v of data.products) {
if (empty(v.num) || empty(v.balse) || empty(v.goodsNo)) {
console.warn('算费', `num: ${v.num}, balse: ${v.balse}, goodsNo: ${v.goodsNo}`, '产品数据为空')
return
}
}
}
// 承运物流
if (hasTrunkSorting(this.service)) {
data.lineId = this.lineNo // 线路ID
}
// 有分拣网点
if (hasBranchSorting(this.service)) {
data.trunkDestinationNo = this.trunkDestinationNo // 干线到达站
}
// 如果是正式商家
if (!this.isTemp) {
data.merchantId = this.merchantId // 商家ID
} else {
data.isTemp = true
}
for (let k in data) {
if (empty(data[k])) {
console.warn('算费', `${k}:${data[k]}`, '数据为空')
return
}
}
// 如果不是临时商家 加一个参数方便算法
if (!this.isTemp) {
data.isTemp = false
}
// 如果有收货仓 给算费传入收货仓
const warehouseId = dotData(this.detailDetail, 'warehouseId')
if (warehouseId) {
data.warehouseId = warehouseId
}
this.calculateData = data
this.setFee()
},
// 延迟算费
setFee: lodash.debounce(function () {
if (this.detailDetail.buttJointSource === 'directSale') { // 如果订单为直营导单不需要再次算费（任务7441）
return
}
httpSuccessPost('/ms-fee-gather/calculate/calculate', this.calculateData).then(response => {
const success = dotData(response, 'success')
if (success) {
this.fee = response.data
}
})
}, 600),
// 设置临时商家结算类型
setTempClearingModeNo (value) {
this.tempClearingModeNo = value
},
// 设置超区单价
setExceedPrice (value) {
this.exceedPrice = value
},
// 设置超区费
setExceedFee (value) {
this.exceedFee = value
},
// 设置超区距离
setExceedDistance (value) {
this.exceedDistance = value
},
// 设置超区距离
setRealityDistance (value) {
this.realityDistance = value
},
...mapActions([
'setPageBar',
'setRefreshRoute',
'setCloseRoute'
]),
changeTab (a) {
this.tabIndex = a
},
// 获取历史版本
http () {
if (this.isEditBeforeOutStorage) {
httpSuccessGet('/ms-order-data/orderUpdate/historyEdition', {orderId: this.id}).then(response => {
if (response) {
this.historyEdition = response
}
})
}
},
// 跳转至新界面
check (id) {
},
cancelTo () {
this.setCloseRoute({path: this.$route.fullPath})
this.$router.push('/operate/order/create/' + this.id + '/1')
},
saveTrunk (val) {
this.saveTrunkVal = val
if (val === '0') {
this.$refs.sorting.resetTrunk()
this.$refs.sorting.setTrunkSorting(true)
}
},
// 体积等触发算费
isGoToFee (val) {
let data = []
if (this.canRevampFilter(val, this.canrevampArr)) {
data = this.returnValueFilter(val, this.canrevampArr).split(',')
}
for (let key in data) {
if (data[key] === 'fee') {
this.getFee()
}
}
},
toRoute (id) {
this.setRefreshRoute({path: '/order/show/' + id})
},
// 设置订单来源
setOrderSource (orderSource) {
this.orderSource = orderSource
}
}
}
</script>
其中 基本信息块：src/components/warehouse/order/create/basic.vue
代码：
<template>
<typography-title title="商家信息">
<span class="font-blue-dark" slot="title-append">
<span v-if="model.clearingSubject && isTemp == false">
(
<span v-if="isEditBeforeOutStorage" class="m-r-10">商家名称: {{ model.merchantIdMap.text }},</span>
<span class="m-r-10">结算主体: {{ model.clearingSubject }},</span>
<span :class="{'m-r-10': model.clearingTypeNo == 'ZQ'}">结算类型: {{ model.clearingTypeName }}
<span v-if="model.clearingTypeNo == 'ZQ'">,</span>
</span>
<span v-if="model.clearingTypeNo == 'ZQ'">结算周期: {{ model.clearingCycleName }}</span>
)
</span>
<span v-if="tempSubject && isTemp == true">
(
<span v-if="isEditBeforeOutStorage" class="m-r-10">商家名称: {{ model.tempMerchantBean.name }},</span>
<span>结算主体: {{ tempSubject }}</span>
)
</span>
</span>
<j-form :model="model" ref="form" v-if="isEditBeforeOutStorage">
<div class="row">
<!-- 临时商家 -->
<template v-if="isTemp">
<div class="col-xs-3" v-if="canChangeMerchant">
<j-form-item
prop="tempMerchantBean.name"
:rules="[
{required: true, message: '商家名称必须', trigger: 'change'}
]"
>
<j-select
key="临时商家"
ref="merchantType"
@remoteValue="setMerchantTemp"
@choose="chooseSellerTemp"
placeholder="输入获取建议"
:remote="getTempSeller"
:forceReadonly= "!canRevampFilter('canChangeMerchant', canrevampArr)"
:class="changeBorder(!canRevampFilter('canChangeMerchant', canrevampArr))"
>
<span slot="left" class="input-group-addon">商家名称:</span>
<span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
</j-select>
</j-form-item>
</div>
<div class="col-xs-3">
<j-form-item
prop="tempMerchantBean.clearingModeNoMap"
:rules="[
{validator: selectRequired, message: '结算方式必须', trigger: 'change'}
]"
>
<j-select
v-model="model.tempMerchantBean.clearingModeNoMap"
:forbiddenInputUndefined="true"
@choose="setPayModel"
:options="clearingType"
>
<span slot="left" class="input-group-addon">结算方式:</span>
<span class="input-group-addon" slot="right"><span class="font-red">*</span></span>
</j-select>
</j-form-item>
</div>
<div class="col-xs-3">
<span v-if="model.tempMerchantBean.clearingModeNoMap.value == 'DF'" class="font-red">
仅干线自体单可以选择到付，如需其他服务，请选择录单付
</span>
<j-form-item
v-else
prop="tempMerchantBean.payModeNoMap"
:rules="[
{validator: selectRequired, message: '支付方式', trigger: 'change'}
]"
>
<j-select
v-model="model.tempMerchantBean.payModeNoMap"
:options="payModel"
ref="payModel"
>
<span slot="left" class="input-group-addon">支付方式:</span>
</j-select>
</j-form-item>
</div>
</template>
<!-- 正式商家 -->
<template v-else>
<div class="col-xs-3" v-if="canChangeMerchant">
<j-form-item
prop="merchantIdMap"
:rules="[
{validator: selectRequired, message: '商家名称必须', trigger: 'change'}
]"
>
<j-select
key="正式商家"
v-model="model.merchantIdMap"
ref="merchantNode"
@choose="chooseSeller"
placeholder="输入获取建议"
:forbiddenInputUndefined="true"
:remote="getSeller"
:forceReadonly= "!canRevampFilter('merchantIdMap', canrevampArr)"
:class="changeBorder(!canRevampFilter('merchantIdMap', canrevampArr))"
>
<span slot="left" class="input-group-addon">商家名称:</span>
<span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
</j-select>
</j-form-item>
</div>
<!-- 逐单结 -->
<template v-if="model.clearingTypeNo == 'ZD'">
<div class="col-xs-3">
<j-form-item
prop="clearingModeNoMap"
:rules="[
{validator: selectRequired, message: '结算方式必须', trigger: 'change'}
]"
>
<j-select
v-model="model.clearingModeNoMap"
@choose="setPayModel"
:options="clearingType"
:forceReadonly="readOnlyBoole"
:readonly= "!canRevampFilter('clearingModeNoMap', canrevampArr)"
:class="changeBorder(!canRevampFilter('clearingModeNoMap', canrevampArr))"
>
<span slot="left" class="input-group-addon">结算方式:</span>
<span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
</j-select>
</j-form-item>
</div>
<div class="col-xs-3">
<j-form-item
prop="payTypeNoMap"
:rules="[
{validator: selectRequired, message: '支付方式', trigger: 'change'}
]"
>
<j-select
v-model="model.payTypeNoMap"
ref="payModeNo2"
:options="payModel"
:forceReadonly="readOnlyBoole"
:readonly= "!canRevampFilter('payTypeNoMap', canrevampArr)"
:class="changeBorder(!canRevampFilter('payTypeNoMap', canrevampArr))"
>
<span slot="left" class="input-group-addon">支付方式:</span>
<span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
</j-select>
</j-form-item>
</div>
</template>
</template>
<div class="col-xs-3">
<j-form-item
>
<j-input-group
v-model="model.merchantOrder"
:readonly = "!canRevampFilter('merchantOrder', canrevampArr)"
:class="changeBorder(!canRevampFilter('merchantOrder', canrevampArr))"
>
<span slot="left" class="input-group-addon">商家单号:</span>
</j-input-group>
</j-form-item>
</div>
<div class="col-xs-3">
<j-form-item
>
<j-select
v-model="model.orderSignMap"
:options="orderTags"
:forceReadonly="!canRevampFilter('orderSignMap', canrevampArr)"
:class="changeBorder(!canRevampFilter('orderSignMap', canrevampArr))"
>
<span slot="left" class="input-group-addon">订单标记:</span>
</j-select>
</j-form-item>
</div>
<div class="col-xs-3">
<j-form-item
prop="payLogistics"
:rules="[
{max: 100, message: '输入字数在100字内！', trigger: 'blur'}
]"
>
<j-input-group
v-model="model.payLogistics"
:readonly = "!canRevampFilter('payLogistics', canrevampArr)"
:class="changeBorder(!canRevampFilter('payLogistics', canrevampArr))"
>
<span slot="left" class="input-group-addon">支付流水:</span>
</j-input-group>
</j-form-item>
</div>
</div>
</j-form>
<j-form :model="model" ref="form" v-if="!isEditBeforeOutStorage">
<div class="row">
<!-- 临时商家 -->
<template v-if="isTemp">
<div class="col-xs-3" v-if="canChangeMerchant">
<j-form-item
prop="tempMerchantBean.name"
:rules="[
{required: true, message: '商家名称必须', trigger: 'change'}
]"
>
<j-select
key="临时商家"
ref="merchantType"
@remoteValue="setMerchantTemp"
@choose="chooseSellerTemp"
placeholder="输入获取建议"
:remote="getTempSeller"
>
<span slot="left" class="input-group-addon">商家名称:</span>
<span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
</j-select>
</j-form-item>
</div>
<div class="col-xs-3">
<j-form-item
prop="tempMerchantBean.clearingModeNoMap"
:rules="[
{validator: selectRequired, message: '结算方式必须', trigger: 'change'}
]"
>
<j-select
v-model="model.tempMerchantBean.clearingModeNoMap"
:forbiddenInputUndefined="true"
@choose="setPayModel"
:options="clearingType"
>
<span slot="left" class="input-group-addon">结算方式:</span>
<span class="input-group-addon" slot="right"><span class="font-red">*</span></span>
</j-select>
</j-form-item>
</div>
<div class="col-xs-3">
<span v-if="model.tempMerchantBean.clearingModeNoMap.value == 'DF'" class="font-red">
仅干线自体单可以选择到付，如需其他服务，请选择录单付
</span>
<j-form-item
v-else
prop="tempMerchantBean.payModeNoMap"
:rules="[
{validator: selectRequired, message: '支付方式', trigger: 'change'}
]"
>
<j-select
v-model="model.tempMerchantBean.payModeNoMap"
:options="payModel"
ref="payModel"
>
<span slot="left" class="input-group-addon">支付方式:</span>
</j-select>
</j-form-item>
</div>
</template>
<!-- 正式商家 -->
<template v-else>
<div class="col-xs-3" v-if="canChangeMerchant">
<j-form-item
prop="merchantIdMap"
:rules="[
{validator: selectRequired, message: '商家名称必须', trigger: 'change'}
]"
>
<j-select
key="正式商家"
v-model="model.merchantIdMap"
ref="merchantNode"
@choose="chooseSeller"
placeholder="输入获取建议"
:forbiddenInputUndefined="true"
:remote="getSeller"
>
<span slot="left" class="input-group-addon">商家名称:</span>
<span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
</j-select>
<span v-if="ifCredit" class="font-red">{{creditStr}}</span>
</j-form-item>
</div>
<!-- 逐单结 -->
<template v-if="model.clearingTypeNo == 'ZD'">
<div class="col-xs-3">
<j-form-item
prop="clearingModeNoMap"
:rules="[
{validator: selectRequired, message: '结算方式必须', trigger: 'change'}
]"
>
<j-select
v-model="model.clearingModeNoMap"
@choose="setPayModel"
:options="clearingType"
:forceReadonly="readOnlyBoole"
>
<span slot="left" class="input-group-addon">结算方式:</span>
<span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
</j-select>
</j-form-item>
</div>
<div class="col-xs-3">
<j-form-item
prop="payTypeNoMap"
:rules="[
{validator: selectRequired, message: '支付方式', trigger: 'change'}
]"
>
<j-select
v-model="model.payTypeNoMap"
ref="payModeNo2"
:options="payModel"
:forceReadonly="readOnlyBoole"
>
<span slot="left" class="input-group-addon">支付方式:</span>
<span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
</j-select>
</j-form-item>
</div>
</template>
</template>
<div class="col-xs-3">
<j-form-item
>
<j-input-group
v-model="model.merchantOrder"
:readonly = "readOnlyBoole"
>
<span slot="left" class="input-group-addon">商家单号:</span>
</j-input-group>
</j-form-item>
</div>
<div class="col-xs-3">
<j-form-item
>
<j-select
v-model="model.orderSignMap"
:options="orderTags"
:forceReadonly="readOnlyBoole"
>
<span slot="left" class="input-group-addon">订单标记:</span>
</j-select>
</j-form-item>
</div>
<div class="col-xs-3">
<j-form-item
prop="payLogistics"
:rules="[
{max: 100, message: '输入字数在100字内！', trigger: 'blur'}
]"
>
<j-input-group
v-model="model.payLogistics"
:readonly = "readOnlyBoole"
>
<span slot="left" class="input-group-addon">支付流水:</span>
</j-input-group>
</j-form-item>
</div>
</div>
</j-form>
</typography-title>
</template>
<script>
// import createPortlet from 'components/base/createPortlet'
import typographyTitle from 'components/base/typographyTitle'
import {
isPhone,
selectRequired,
arrayRequired,
isNumber,
requiredIf,
range,
isText
} from 'assets/scripts/base/validator'
import {mapGetValue, isEqual, dotData, swal, copy} from 'assets/scripts/base/functions'
import {httpSuccessGetArr, httpSuccessGet} from 'assets/scripts/base/util'
import {getOrderTag, getClearingModeTemp, getPayModelTemp} from 'assets/scripts/business/store'
import {getSellerSuggest, getSellerDetail} from 'assets/scripts/business/seller'
import jFormItem from 'components/base/form/jFormItem'
import jInputGroup from 'components/base/form/jInputGroup'
import jForm from 'components/base/form/jForm'
import jSelect from 'components/base/form/jSelect'
import jDateGroup from 'components/base/form/jDateGroup'
import jAddressGroup from 'components/base/form/jAddressGroup'
import jCheckbox from 'components/base/form/jCheckbox'
import jCheckboxGroup from 'components/base/form/jCheckboxGroup'
import jRadio from 'components/base/form/jRadio'
import jRadioGroup from 'components/base/form/jRadioGroup'
import jTextareaGroup from 'components/base/form/jTextareaGroup'
import {canRevampFilter} from 'assets/scripts/base/filters'
export default {
name: 'warehouseOrderCreateBasic',
components: {
typographyTitle,
jFormItem,
jInputGroup,
jForm,
jSelect,
jDateGroup,
jAddressGroup,
jCheckbox,
jCheckboxGroup,
jRadio,
jRadioGroup,
jTextareaGroup
},
props: {
canrevampArr: {
type: Array,
default () {
return []
}
},
prop: {
type: Object,
default () {
return {}
}
},
isTemp: {
type: Boolean,
required: true
},
detailDetail: {
type: Object,
required: true
},
// 是否是出库前修改
isEditBeforeOutStorage: {
type: Boolean,
required: true
}
},
data () {
return {
model: {
merchantIdMap: {value: '', text: ''}, // 商家
merchant: '', // 商家名称
merchantOrder: '', // 商家单号
clearingSubject: '',
clearingSubjectId: '',
cleaningType: '',
cleaningCycle: '',
clearingTypeNo: '',
clearingTypeName: '',
payLogistics: '', // 支付流水
tempMerchantBean: { // 临时商家
name: '', // 商家名称
clearingModeNoMap: {
value: '', text: ''
},
payModeNo: '',
id: ''
},
// 结算方式
clearingModeNoMap: {
value: '', text: ''
},
// 支付方式
payTypeNoMap: {
value: '', text: ''
},
// 订单标志
orderSignMap: {value: '', text: ''}
},
readOnlyBoole: false,
merchantNature: [],
merchantLevel: [],
serviceLevel: [],
orderTags: [],
clearingType: [],
payModel: [],
tempSubject: '', // 临时商家结算主体
// 商家签约是否过期
signingOverdue: '',
ifCredit: false,
creditBalace: '',
creditStr: ''
}
},
computed: {
// 能否更改商家
canChangeMerchant () {
return !this.isEditBeforeOutStorage
}
},
watch: {
'model.tempMerchantBean.clearingModeNoMap.value' (val, oldVal) {
if (val === oldVal) {
return
}
this.$emit('setTempClearingModeNo', val)
},
detailDetail (val, oldVal) {
if (isEqual(val, oldVal)) {
return
}
// 商家
const merchantId = dotData(val, 'merchantId')
const merchant = dotData(val, 'merchant')
if (this.isTemp) {
const clearingModeNo = dotData(val, 'tempMerchantBean.clearingModeNo')
const payModeNo = dotData(val, 'tempMerchantBean.payModeNo')
const name = dotData(val, 'tempMerchantBean.name')
const id = dotData(val, 'tempMerchantBean.id')
this.model.tempMerchantBean = {
name,
clearingModeNoMap: {value: clearingModeNo, text: ''},
payModeNoMap: {value: payModeNo, text: ''}
}
if (clearingModeNo) {
this.setPayModel({value: clearingModeNo, text: ''})
}
if (id) {
this.model.tempMerchantBean.id = id
}
}
this.model.merchant = merchant
this.model.merchantIdMap = {value: merchantId, text: merchant}
const merchantNode = this.$refs.merchantNode
if (merchantNode) {
merchantNode.setInputValue(merchant)
}
// 抛出商家方便算费
this.$emit('setMerchantId', merchantId)
if (!this.isTemp) {
this.httpGetSeller(merchantId)
}
// 设置商家单号
const merchantOrder = dotData(val, 'merchantOrder')
this.model.merchantOrder = merchantOrder
// 订单标志
const orderSign = dotData(val, 'orderSign')
if (orderSign) {
this.model.orderSignMap = {text: '', value: orderSign}
}
// 结算方式
const clearingModeNo = dotData(val, 'clearingModeNo')
if (clearingModeNo) {
this.model.clearingModeNoMap = {value: clearingModeNo, text: ''}
this.setPayModel(this.model.clearingModeNoMap)
}
// 支付方式
const payTypeNo = dotData(val, 'payTypeNo')
if (payTypeNo) {
this.model.payTypeNoMap = {value: payTypeNo, text: ''}
}
},
isTemp (val, oldVal) {
if (val === oldVal) {
return
}
this.model.clearingSubject = ''
}
},
created () {
getOrderTag().then(arr => {
this.orderTags = arr
})
getClearingModeTemp().then(arr => {
this.clearingType = arr
})
// 获取临时商家结算主体
httpSuccessGet('/ms-merchant/merchantsExt/clearingSubject').then(obj => {
if (obj) {
this.tempSubject = obj.name
}
})
if (this.isEditBeforeOutStorage) {
this.readOnlyBoole = true
}
},
methods: {
canRevampFilter,
isPhone,
selectRequired,
arrayRequired,
isNumber,
requiredIf,
range,
isText,
// 验证并获取数据
getModel () {
return this.$refs.form.validate().then((result) => {
if (result) {
let data = copy(this.model, true)
// 特殊处理 后端要求 clearingSubject 传 clearingSubjectId
data.clearingSubject = data.clearingSubjectId
return mapGetValue(data) // 如果验证通过，则返回这块表单数据
}
return result // 如果验证不通过，则返回false
})
},
// 获取商家
getSeller (value) {
return getSellerSuggest(value)
},
getTempSeller (value) {
return httpSuccessGetArr('/ms-merchant/merchantsExt/merchantsListTemp', {name: value}).then(result => {
if (result) {
let temp = []
result.forEach(v => {
temp.push({value: v.id, text: v.name})
})
return temp
}
return []
})
},
// 选中商家
httpGetSeller (id) {
getSellerDetail(id).then(object => {
if (object) {
this.model.clearingSubject = object.clearingSubject
this.model.clearingSubjectId = object.clearingSubjectId
this.model.clearingTypeName = object.clearingTypeName
this.model.clearingTypeNo = object.clearingTypeNo
this.model.clearingCycleName = object.clearingCycleName
this.model.boolCollection = object.boolCollection
this.ifCredit = object.ifCredit
this.creditBalace = object.creditBalace
this.$emit('businessTypes', object.businessTypes)
this.$emit('serviceMap', object.serviceMap)
this.$emit('clearingSubject', object.clearingSubject)
this.$emit('cleaningCycle', object.clearingCycleName)
this.$emit('merchantPickupLocations', object.merchantPickupLocations)
this.$emit('boolCollection', object.boolCollection)
this.$emit('ifCredit', object.ifCredit)
this.$emit('creditBalace', object.creditBalace === '' ? '0' : this.creditBalace)
this.signingOverdue = object.signingOverdue // 合同是否过期
if (this.signingOverdue) {
swal({
title: '签约商家过期提醒',
text: `<span class="font-red">${object.name}</span>的签约已过期，不再享有优惠价格，系统将按照
<span class="font-red">基础报价</span>
进行核算，商家补签后将恢复优惠报价。
<div>由此带来的不便敬请原谅</div>`,
html: true,
type: 'warning',
confirmButtonText: '确定'
})
}
if (this.ifCredit) {
if (this.creditBalace > 500) {
this.creditStr = '此商家授信额度剩余：' + this.creditBalace + '元'
} else {
this.creditStr = '此商家授信额度剩余：' + (this.creditBalace === '' ? '0' : this.creditBalace) + '元。授信余额可能不足支付本单，如需录单请联系营销人员'
}
}
}
})
},
// 获取商家
chooseSeller (value) {
this.tempSeller = false
this.model.merchant = value.text
this.$emit('setMerchantId', value.value)
this.httpGetSeller(value.value)
},
// 设置临时商家 支付方式
setPayModel ({value, text}) {
const payModelNode = this.$refs.payModel
if (payModelNode) {
payModelNode.resetField()
}
const payModeNo2 = this.$refs.payModel
if (payModeNo2) {
payModeNo2.resetField()
}
this.payModel = []
getPayModelTemp(value).then(arr => {
this.payModel = arr
})
},
// 设置临时商家
setMerchantTemp (value) {
this.model.tempMerchantBean.name = value
},
// 临时商家选择
chooseSellerTemp ({value, text}) {
this.model.tempMerchantBean.name = text
this.model.tempMerchantBean.id = value
},
changeBorder (a) {
if (a) {
return 'OrderModify'
} else {
return ''
}
}
}
}
</script>
子组件： 分拣信息 表单块：src/components/warehouse/order/create/sorting.vue 里面的getModal():
子组件 客户信息表单块：src/components/warehouse/order/create/customer.vue
==========================================================================================
src/views/oms/order/CreateOut.vue 等待两个请求接口 都请求完数据回来之后 再将loading关闭：