<template>
|
<div>
|
<el-row>
|
<el-col :span="24" class="form">
|
<el-form :model="form" ref="form" label-width="120px" :rules="formRules" size="mini">
|
<el-row v-if="!$route.query.orderId">
|
<el-col :span="12">
|
<el-form-item v-if="!$route.query.orderId" label="所属渠道：" prop="orderSource">
|
<el-select v-model="form.orderSource" @change="changeOrderSource"
|
placeholder="请选择所属渠道" style="width:100%">
|
<el-option v-for="item in orderSourceArr" :key="item.id" :value="item.id"
|
:label="item.name"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="门店名称：" prop="contractId">
|
<el-select clearable v-model="form.contractId" placeholder="请选择门店名称"
|
style="width:100%">
|
<el-option v-for="item in shopNameArr" :key="item.id" :value="item.id"
|
:label="item.name"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="物流服务商：" prop="warehouseServiceName"
|
:rules="formRules.warehouseServiceName" ref="warehouseServiceName">
|
<el-select clearable v-model="form.warehouseServiceName" placeholder="请选择物流服务商"
|
@change="changeWarehouseVal" style="width:100%">
|
<el-option :value="item.warehouseService" :label="item.warehouseServiceName"
|
v-for="item in warehouseData" :key="item.warehouseService"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="仓库名称：" prop="deliveryWarehouse"
|
:rules="formRules.deliveryWarehouse" ref="deliveryWarehouse">
|
<el-select clearable v-model="form.deliveryWarehouse" placeholder="请选择仓库名称"
|
style="width:100%">
|
<el-option :value="item.entityWarehouseNo" :label="item.warehouseName"
|
v-for="item in deliveryWarehouseData" :key="item.entityWarehouseNo">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<receiver-info :form="form" ref="receiverInfo"
|
:deliverAdressArray.sync="deliverAdressArray" :adressArray="adressArray">
|
</receiver-info>
|
<el-form-item v-if="!$route.query.orderId" label="附件：">
|
<upload-file :limitNumber='10' :uploadPath="'order'"
|
accept=".xls,.xlsx,.doc,.docx,.pdf,.jpg,.jpeg,.png"
|
@handle-success="handleSuccess" @handle-remove="handleRemove"
|
:fileList="fileList" :reload="reload" :customTips="'附件上传数量不得超过10个'">
|
<template>仅支持.xls,.xlsx,.doc,.docx,.pdf,.jpg,.jpeg,.png的附件</template>
|
</upload-file>
|
</el-form-item>
|
<el-form-item prop="skuInfo">
|
<channel-prod-component ref="table" style="width: 100%" :productData.sync="form.skuInfo"
|
:formRules="formRules" :tableValidate="tableValidate"
|
:form="form" :warehouseServiceName="form.warehouseServiceName">
|
</channel-prod-component>
|
</el-form-item>
|
</el-form>
|
<div class="buttonPosition">
|
<el-button type="primary" size="mini" @click="submit" :loading="btnLOading">保存</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import { limiInputType } from '@/utils/limiInputType'
|
import { inputNumberValid, validateMobileLandlin } from '@/utils/validator'
|
import orderMgtApi from '@/api/orderMgt'
|
import channelProdComponent from '@/views/channelInventory/components/channelProdComponent.vue'
|
import receiverInfo from '@/views/orderMgt/components/receiverInfo.vue'
|
import orderSourceArr from '@/utils/constant/orderSourceArr'
|
import uploadFile from '@/components/uploadFile/uploadFile.vue'
|
import uploadFileApi from '@/api/uploadFile'
|
|
export default {
|
components: { channelProdComponent, receiverInfo, uploadFile },
|
props: ['adressArray', 'shopNameArr'],
|
data() {
|
const deliverAdressValidate = (rule, value, callback) => {
|
if (
|
!this.deliverAdressArray.length ||
|
!this.form.omsOrderDelivery.detail
|
) {
|
callback(new Error('请输入收货地址'))
|
} else if (this.form.omsOrderDelivery.detail.length > 120) {
|
callback(new Error('详细地址最多只能输入 120 个字'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
// 物流服务商下拉列表数据源
|
warehouseData: [],
|
// 发货仓库下拉列表数据源
|
deliveryWarehouseData: [],
|
orderSourceArr,
|
// 门店
|
outletArr: [
|
{
|
id: 1,
|
name: '测试数据'
|
}
|
],
|
deliverAdressArray: [],
|
form: {
|
warehouseServiceName: null, // 物流服务商
|
deliveryWarehouse: null, // 发货仓库
|
omsOrderDelivery: {
|
contactName: null,
|
contactPhone: null,
|
detail: null
|
},
|
memberMemo: null,
|
orderSourceCode: null, // 关联订单号
|
skuInfo: [],
|
promotionId: null,
|
orderSource: null,
|
contractId: null, // 门店名称
|
insuredPrice: null, // 保价金额
|
annexBizId: null, // 附件id
|
serviceProvider: null, // 物流服务商
|
warehouseName: null, // 仓库名称
|
},
|
formRules: {
|
warehouseServiceName: [{ required: true, message: '请选择物流服务商' }],
|
deliveryWarehouse: [{ required: true, message: '请选择发货仓库' }],
|
'omsOrderDelivery.contactName': [
|
{ required: true, message: '请输入收货人姓名', trigger: 'change' },
|
{ message: '收货人姓名最大长度为32', max: 32, trigger: 'change' }
|
],
|
'omsOrderDelivery.contactPhone': [
|
{ validator: validateMobileLandlin, required: true, trigger: 'change' }
|
],
|
'omsOrderDelivery.detail': [
|
{
|
validator: deliverAdressValidate,
|
required: true,
|
trigger: 'change'
|
}
|
],
|
memberMemo: [
|
{ max: 300, message: '备注最多只能输入 300 个字', trigger: 'change' }
|
],
|
skuInfo: [
|
{
|
type: 'array',
|
required: true,
|
message: '请选择商品',
|
trigger: 'submit'
|
}
|
],
|
skuId: [
|
{ required: true, message: '请选择赠品规格', trigger: 'change' }
|
],
|
orderSource: [
|
{ required: true, message: '请选择所属渠道', trigger: 'change' }
|
],
|
contractId: [
|
{ required: true, message: '请选择门店名称', trigger: 'change' }
|
],
|
serviceProvider: [
|
{ required: true, message: '请选择物流服务商', trigger: 'change' }
|
],
|
ensalequantity: [
|
{ required: true, message: '请输入总数量' },
|
{ validator: inputNumberValid },
|
{
|
validator: (rule, value, callback) => {
|
const arr = rule.fullField.split('.')
|
const row = this.form.skuInfo[Number(arr[1])]
|
if (value > row.stock || row.totalQuantity > row.stock) {
|
callback(new Error('总数量不得大于可用库存'))
|
} else {
|
callback()
|
}
|
}
|
}
|
],
|
warehouseName: [
|
{ required: true, message: '请选择仓库名称', trigger: 'change' }
|
],
|
insuredPrice: [
|
{
|
validator: (rule, value, callback) => {
|
const reg = /^(?!0+$)(?!0*\.0*$)\d{1,9}(\.\d{1,2})?$/ // 最多输入两位小数
|
const val = Number(value)
|
if (typeof (val) === 'number' && isNaN(val)) {
|
callback(new Error('保价金额只能输入数字'))
|
} else if (val && val < 0) {
|
callback(new Error('保价金额不得输入负数'))
|
} else if (val && val > 999999999) {
|
callback(new Error('保价金额最高仅支持输入999999999元'))
|
} if (val && !reg.test(value)) {
|
callback(new Error('保价金额最多输入两位小数'))
|
} else {
|
callback()
|
}
|
}
|
}]
|
},
|
// 表格内部表单验证prop
|
tableValidate: {
|
skuId(preferentialIndex, index) {
|
return `skuInfo.${index}.skuId`
|
},
|
specificationCode(preferentialIndex, index) {
|
return `skuInfo.${index}.specificationCode`
|
},
|
shipmentsCount(preferentialIndex, index, curIndex) {
|
return `skuInfo.${index}.shipmentsCountList.${curIndex}.shipmentsCount`
|
},
|
ensalequantity(preferentialIndex, index) {
|
return `skuInfo.${index}.ensalequantity`
|
}
|
},
|
btnLOading: false,
|
fileList: [],
|
reload: false, // 不重新加载
|
}
|
},
|
watch: {
|
'form.skuInfo': {
|
handler() {
|
if (this.form.skuInfo.length) {
|
this.$refs.form.clearValidate('skuInfo')
|
}
|
},
|
deep: true
|
},
|
deliverAdressArray: {
|
handler() {
|
this.$refs.form.validateField('omsOrderDelivery.detail')
|
},
|
deep: true
|
}
|
},
|
created() {
|
if (this.$route.query.orderId) {
|
this.getDetails()
|
}
|
// 获取物流服务商
|
this.getLogisticsProvidersData();
|
},
|
methods: {
|
changeOrderSource() {
|
this.form.skuInfo = []
|
},
|
/**
|
* 物流服务商值改变获取发货仓库下拉列表数据源
|
*/
|
changeWarehouseVal(val) {
|
let arr = [];
|
this.$refs.deliveryWarehouse.resetField();
|
const obj = this.warehouseData.find((item) => item.warehouseService === val)
|
if (obj && Object.keys(obj).length) {
|
arr = obj.treeList;
|
}
|
this.deliveryWarehouseData = arr;
|
},
|
/**
|
* 获取物流服务商
|
*/
|
async getLogisticsProvidersData() {
|
const res = await orderMgtApi.getWarehouseTree({})
|
if (res.code === '200' && res.data.length) {
|
this.warehouseData = res.data;
|
}
|
},
|
/**
|
* 附件上传成功
|
*/
|
handleSuccess(arr, businessId) {
|
this.fileList = arr
|
this.form.annexBizId = businessId
|
this.reload = false;
|
},
|
/**
|
* 删除附件
|
*/
|
handleRemove(file) {
|
uploadFileApi.removeFile({ key: file.id }).then(res => {
|
const index = this.fileList.findIndex(item => item.id === file.id)
|
if (index !== -1) {
|
this.fileList.splice(index, 1)
|
}
|
if (!this.fileList.length) {
|
this.form.annexBizId = null
|
}
|
})
|
},
|
/**
|
* 获取详情
|
*/
|
getDetails() {
|
orderMgtApi
|
.getOrderInfo({ orderId: this.$route.query.orderId })
|
.then((res) => {
|
if (res.data) {
|
this.form.omsOrderDelivery = res.data.omsOrderDelivery
|
const userInfo = this.form.omsOrderDelivery
|
const provinceId = userInfo.provinceId
|
const aeraId = userInfo.aeraId
|
const cityId = userInfo.cityId
|
this.form.promotionId = res.data.omsOrderItems[0].promotionId // 活动id
|
if (provinceId) {
|
if (provinceId === '810000' || provinceId === '820000') {
|
this.deliverAdressArray = [provinceId, aeraId]
|
} else {
|
this.deliverAdressArray = [provinceId, cityId, aeraId]
|
}
|
}
|
}
|
})
|
},
|
/**
|
*当选择门店时获取对应的门店信息
|
*/
|
changeShopId(val) {
|
const row = this.shopArray.find((item) => item.shopId === val)
|
if (row) {
|
this.form.linkMan = row.linkMan
|
this.form.linkPhone = row.linkPhone
|
this.form.detail = row.areaMapName + row.shopAddress
|
this.shopArea = [row.province, row.city, row.aera].join('/')
|
} else {
|
this.form.linkMan = null
|
this.form.linkPhone = null
|
this.form.detail = null
|
this.shopArea = null
|
}
|
},
|
/**
|
* 取消
|
*/
|
cancel() {
|
this.initForm();
|
},
|
// 初始化表单
|
initForm() {
|
const query = this.$route.query
|
if (query.orderId) {
|
this.$router.push({
|
name: 'orderMgtInfo',
|
query: {
|
orderId: query.orderId,
|
promotionStatus: query.promotionStatus
|
}
|
})
|
} else {
|
this.fileList = []
|
this.deliverAdressArray = []
|
this.form = {
|
omsOrderDelivery: {
|
contactName: null,
|
contactPhone: null,
|
detail: null
|
},
|
memberMemo: null,
|
skuInfo: [],
|
promotionId: null,
|
orderSource: null,
|
contractId: null,
|
insuredPrice: null, // 保价金额
|
annexBizId: null // 附件id
|
}
|
this.reload = true;
|
this.$nextTick(() => {
|
this.$refs.form.clearValidate()
|
})
|
}
|
},
|
/**
|
* 保存
|
*/
|
submit() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
if (this.$route.query.orderId) {
|
this.freeBuyProdSave()
|
} else {
|
this.addInfo()
|
}
|
}
|
})
|
},
|
/**
|
* 获取级联label
|
*/
|
getCascaderObj(val, opt) {
|
return val.map(function (value, index, array) {
|
for (var itm of opt) {
|
if (itm.value === value) {
|
opt = itm.children
|
return itm.label
|
}
|
}
|
return null
|
})
|
},
|
// 处理表单数据
|
handFormData() {
|
const { warehouseServiceName, deliveryWarehouse, omsOrderDelivery, orderSourceCode, memberMemo, orderSource, contractId, annexBizId, insuredPrice } = this.form
|
const data = { omsOrderDelivery, orderSourceCode, memberMemo, orderSource, contractId, annexBizId, insuredPrice }
|
this.$set(data.omsOrderDelivery, 'logisticSupplier', warehouseServiceName)
|
this.$set(data.omsOrderDelivery, 'warehouse', deliveryWarehouse)
|
data.skuInfo = []
|
this.form.skuInfo.forEach((item) => {
|
data.skuInfo.push({
|
quantity: this.form.warehouseServiceName === 'JD' ? item.totalQuantity : item.ensalequantity,
|
skuId: item.skuId,
|
spuUnit: item.spuUnit,
|
shopId: item.shopId,
|
spuProps: item.prodSpecs,
|
spuNum: item.spuNum,
|
logisticProds: this.getLogisticProds(item),
|
})
|
})
|
const cascaderObj = this.getCascaderObj(
|
this.deliverAdressArray,
|
this.$refs.receiverInfo.$refs.addressComponent.adressArray
|
)
|
if (
|
this.deliverAdressArray[0] === '810000' ||
|
this.deliverAdressArray[0] === '820000'
|
) {
|
data.omsOrderDelivery.provinceId = this.deliverAdressArray[0]
|
data.omsOrderDelivery.cityId = this.deliverAdressArray[0]
|
data.omsOrderDelivery.aeraId = this.deliverAdressArray[1]
|
data.omsOrderDelivery.province = cascaderObj[0]
|
data.omsOrderDelivery.city = cascaderObj[0]
|
data.omsOrderDelivery.aera = cascaderObj[1]
|
} else {
|
data.omsOrderDelivery.provinceId = this.deliverAdressArray[0]
|
data.omsOrderDelivery.cityId = this.deliverAdressArray[1]
|
data.omsOrderDelivery.aeraId = this.deliverAdressArray[2]
|
data.omsOrderDelivery.province = cascaderObj[0]
|
data.omsOrderDelivery.city = cascaderObj[1]
|
data.omsOrderDelivery.aera = cascaderObj[2]
|
}
|
return data
|
},
|
/**
|
*0元购订单保存
|
*/
|
async freeBuyProdSave() {
|
this.btnLOading = true
|
const param = this.handFormData()
|
param.activityOrder = true
|
param.isSystemOrder = true
|
param.promotionId = this.form.promotionId
|
const res = await orderMgtApi.freeBuyProdOrder(param)
|
if (res.code === '0' && res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.initForm()
|
this.$router.push({ name: 'orderMgtList' })
|
this.btnLOading = false
|
} else {
|
this.btnLOading = false
|
}
|
},
|
/**
|
* 物流商品信息（物流对应商品规格单位数量等）
|
*/
|
getLogisticProds(row) {
|
const arr = [];
|
if (row.specificationCode && row.specificationCode.length) {
|
row.specificationCode.forEach((v1, index) => {
|
const curObj = row.specificationCodeList.find((v2) => v2.prodSkuNo === v1);
|
if (curObj && Object.keys(curObj).length) {
|
arr.push({
|
skuId: curObj.prodSkuNo, // 物流商品规格
|
skuUnit: curObj.skuUnit, // 物流商品包装数量
|
unit: curObj.unitOfMeasurement, // 物流商品单位
|
quantity: row.shipmentsCountList[index].shipmentsCount, // 物流商品总数量
|
prodName: curObj.prodName
|
})
|
}
|
})
|
}
|
return arr;
|
},
|
/**
|
* 保存手动建单
|
*/
|
addInfo() {
|
this.btnLOading = true
|
orderMgtApi.saveOperationOrder(this.handFormData()).then((res) => {
|
if (res.code === '0' && res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.initForm()
|
this.$router.push({ name: 'orderMgtList' })
|
this.btnLOading = false
|
} else {
|
this.btnLOading = false
|
}
|
}).catch(() => {
|
this.btnLOading = false
|
})
|
},
|
/**
|
* 限制不能输入数字
|
*/
|
limiInputType(e) {
|
limiInputType(e)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.distributionOrderSelect {
|
.el-select {
|
width: 100%;
|
}
|
}
|
</style>
|
