<template>
|
<div class="createIntegralOrder inner-bg-style">
|
<el-form :model="form" ref="form" label-width="120px" :rules="formRules" size="mini">
|
<receiver-info ref="receiverInfo" :form="form" :deliverAdressArray.sync="deliverAdressArray"></receiver-info>
|
<el-form-item prop="tableData">
|
<el-button type="success" size="mini" @click="addProduct">添加积分商品</el-button>
|
<el-button size="mini" @click="clearTable">清空</el-button>
|
<el-table :data="form.tableData" border>
|
<el-table-column label="商品图片" prop="imgIdUrl" align="center">
|
<template slot-scope="scope">
|
<product-img :imgUrl="scope.row.imgIdUrl"></product-img>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品类型" prop="spuType">
|
<template slot-scope="scope">
|
{{scope.row.spuType === '1' ? '实物商品' : scope.row.spuType === '2' ? '优惠券':'-'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="商品名称/优惠券" prop="spuName" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="积分价值" align="center" prop="consumeIntegral" width="150px">
|
</el-table-column>
|
<el-table-column label="库存限制" align="center" prop="storageRestrict" width="150px">
|
</el-table-column>
|
<el-table-column label="数量" width="180px">
|
<template slot-scope="scope">
|
<el-form-item :prop="`tableData.${scope.$index}.quantity`" :rules="formRules.ensalequantity">
|
<el-input-number
|
:min="0"
|
@keydown.native="limiInputType"
|
v-model="scope.row.quantity"
|
></el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column width="80px" label="操作">
|
<template slot-scope="scope">
|
<el-form-item>
|
<el-button type="danger" size="mini" @click="deleteItem(scope.row,scope.$index)">删除</el-button>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
</el-table>
|
</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>
|
<integral-product-selected :show.sync ='selectedDialog.show' :multipleSelected="false"
|
:title="selectedDialog.title"
|
>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button type="success" @click="choiceProd(scope.row)" size="mini">添加</el-button>
|
</template>
|
</el-table-column>
|
</integral-product-selected>
|
|
</div>
|
</template>
|
|
<script>
|
import { limiInputType } from '@/utils/limiInputType'
|
import { inputNumberValid, validateMobile } from '@/utils/validator'
|
import orderMgtApi from '@/api/orderMgt'
|
import receiverInfo from '@/views/orderMgt/components/receiverInfo.vue'
|
import integralProductSelected from '@/views/product/components/integralProductSelected.vue'
|
import productImg from '@/views/product/components/productImg.vue'
|
|
export default {
|
components: { integralProductSelected, receiverInfo, productImg },
|
data() {
|
const deliverAdressValidate = (rule, value, callback) => {
|
if (!this.deliverAdressArray.length || !this.form.omsOrderDelivery.detail) {
|
callback(new Error('请输入发货地址'))
|
} else {
|
callback()
|
}
|
}
|
const limitNumberSizeValid = (rule, value, callback) => {
|
if (value && this.vendibility !== -1 && value > this.storageRestrict) {
|
callback(new Error('数量应不能大于库存限制数'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
selectedDialog: {
|
show: false,
|
title: '选择积分商品'
|
},
|
deliverAdressArray: [],
|
form: {
|
omsOrderDelivery: {
|
contactName: null,
|
contactPhone: null,
|
detail: null
|
},
|
memberMemo: null,
|
tableData: []
|
},
|
formRules: {
|
'omsOrderDelivery.contactName': [
|
{ required: true, message: '请输入收货人姓名', trigger: 'change' },
|
{ message: '收货人姓名最大长度为32', max: 32, trigger: 'change' }
|
],
|
'omsOrderDelivery.contactPhone': [{ validator: validateMobile, required: true, trigger: 'change' }],
|
'omsOrderDelivery.detail': [{ validator: deliverAdressValidate, required: true, trigger: 'change' }],
|
memberMemo: [{ max: 300, message: '备注最多只能输入 300 个字', trigger: 'change' }],
|
tableData: [{ type: 'array', required: true, message: '请选择赠品规格', trigger: 'change' }],
|
ensalequantity: [
|
{ required: true, message: '请赠品数量' },
|
{ validator: inputNumberValid },
|
{ validator: limitNumberSizeValid }
|
]
|
},
|
btnLOading: false,
|
vendibility: null,
|
storageRestrict: null
|
}
|
},
|
watch: {
|
'form.tableData': {
|
handler() {
|
if (this.form.tableData.length) {
|
this.$refs.form.clearValidate('tableData')
|
}
|
},
|
deep: true
|
},
|
deliverAdressArray: {
|
handler() {
|
this.$refs.form.validateField('omsOrderDelivery.detail')
|
},
|
deep: true
|
}
|
},
|
created() {
|
if (this.$route.query.orderId) {
|
this.getDetails()
|
}
|
},
|
methods: {
|
/**
|
* 获取详情
|
*/
|
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
|
|
if (provinceId) {
|
if (provinceId === '810000' || provinceId === '820000') {
|
this.deliverAdressArray = [provinceId, aeraId]
|
} else {
|
this.deliverAdressArray = [provinceId, cityId, aeraId]
|
}
|
}
|
}
|
})
|
},
|
/**
|
* 获取弹出框返回的数据
|
*/
|
choiceProd(rowItem) {
|
this.form.tableData = []
|
this.form.tableData.push({
|
id: rowItem.id,
|
spuName: rowItem.spuName,
|
skuId: rowItem.skuId,
|
spuUnit: rowItem.spuType === '1' ? '瓶' : '张',
|
shopId: rowItem.shopId,
|
consumeIntegral: rowItem.integralWorth,
|
imgIdUrl: rowItem.imgIdUrls.length && rowItem.imgIdUrls[0].imgUrl,
|
quantity: null,
|
spuType: rowItem.spuType,
|
storageRestrict: rowItem.storageRestrict
|
})
|
|
this.storageRestrict = rowItem.storageRestrict
|
this.vendibility = rowItem.vendibility
|
|
this.selectedDialog.show = false
|
},
|
/**
|
* 清空表格数据
|
*/
|
clearTable() {
|
this.form.tableData = []
|
},
|
/**
|
* 删除表格数据
|
*/
|
deleteItem(row, index) {
|
this.form.tableData.splice(index, 1)
|
},
|
/**
|
* 打开添加商品弹窗
|
*/
|
addProduct() {
|
this.selectedDialog.show = true
|
},
|
/**
|
* 取消
|
*/
|
cancel() {
|
const query = this.$route.query
|
this.$router.push({
|
name: 'orderMgtInfo',
|
query: {
|
orderId: query.orderId,
|
promotionStatus: query.promotionStatus
|
}
|
})
|
},
|
/**
|
* 保存
|
*/
|
submit() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
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 { contactName, contactPhone, detail, orderId } = this.form.omsOrderDelivery
|
const data = { omsOrderDelivery: {}, memberMemo: null }
|
data.skuInfo = {}
|
data.memberMemo = this.form.memberMemo
|
data.skuInfo = JSON.parse(JSON.stringify(this.form.tableData[0]))
|
data.omsOrderDelivery = { contactName, contactPhone, detail, orderId }
|
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]
|
}
|
data.omsOrderDelivery.orderId = this.$route.query.orderId
|
data.isManual = '1'
|
return data
|
},
|
/**
|
* 保存手动建单
|
*/
|
addInfo() {
|
this.btnLOading = true
|
orderMgtApi.saveIntegralOrder(this.handFormData()).then((res) => {
|
if (res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.$router.push({ name: 'orderMgtList' })
|
this.btnLOading = false
|
} else {
|
this.btnLOading = false
|
}
|
})
|
},
|
/**
|
* 限制不能输入数字
|
*/
|
limiInputType(e) {
|
limiInputType(e)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.createIntegralOrder{
|
padding: 20px;
|
.el-select{
|
width: 100%;
|
}
|
.el-table {
|
margin-top: 20px;
|
// width: 1000px;
|
}
|
}
|
</style>
|
