<template>
|
<div class="inner-bg-style disInfoStyle">
|
<el-form :model="form" ref="form" label-width="180px" :rules="formRules" size="mini">
|
<el-row>
|
<el-col :span="16" class="form">
|
<el-row>
|
<el-col :span="12" class="distributionOrderSelect">
|
<el-form-item label="经销商：" prop="merchantId">
|
<el-select v-model="form.merchantId" placeholder="请选择经销商" @change="changeMerchantId" clearable>
|
<el-option v-for="item in merchantArray" :key="item.merchantId" :value="item.merchantId" :label="item.merchantName"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" class="distributionOrderSelect">
|
<el-form-item label="收货门店：" prop="marketShopId">
|
<el-select v-model="form.marketShopId" no-data-text="选择经销商,获取对应门店" @change="changeShopId" placeholder="请选择收货门店" clearable>
|
<el-option v-for="item in shopArray" :disabled="item.perfectStatus !== '1' ? true : false" :key="item.shopId" :value="item.shopId" :label="item.shopName">
|
<span style="float: left">{{ item.shopName }}</span>
|
<span style="float: right; color: #8492a6; font-size: 13px">{{item.perfectStatus !== '1' ?'未完善':'' }}</span>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="联系人：">
|
<el-input v-model="form.linkMan" :disabled="true"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="联系电话：">
|
<el-input v-model="form.linkPhone" :disabled="true"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="门店地址：">
|
<el-row>
|
<el-col :span="10">
|
<el-input v-model="shopArea" :title="shopArea+form.detail" :disabled="true"></el-input>
|
<!-- <address-component ref="addressComponent" :isDisabled="true" :adressArr.sync='shopArea'></address-component> -->
|
</el-col>
|
<el-col :span="14">
|
<el-input v-model="form.detail" :title="shopArea+form.detail" :disabled="true"></el-input>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="订单备注：" prop="memberMemo">
|
<el-input type="textarea" :autosize="{minRows:4,maxRows:6}" v-model="form.memberMemo"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item prop="promotionProducts">
|
<coupon-product ref="table" style="width:1000px;" :productData.sync="form.promotionProducts" :extraVariables="'quantity'" :formRules="formRules">
|
<template slot="productTableRow">
|
<el-table-column label="件数" style="width:300px;">
|
<template slot-scope="scope">
|
<el-form-item :prop="'promotionProducts.'+ scope.$index + '.quantity'" label=" " v-if="scope.row.skuId instanceof Array ? false : true" :rules="formRules.quantity">
|
<el-input-number
|
:min="0"
|
@keydown.native="limiInputType"
|
v-model="scope.row.quantity"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item :prop="'promotionProducts.'+ scope.$index + '.quantity.' + index" v-else v-for="(item,index) in scope.row.prodSpecs " :key="index" :label="item" :rules="formRules.quantity">
|
<el-input-number
|
:min="0"
|
@keydown.native="limiInputType"
|
v-model="scope.row.quantity[index]"
|
></el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
</template>
|
</coupon-product>
|
</el-form-item>
|
</el-form>
|
<div class="buttonPosition">
|
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import couponProduct from '@/views/couponMgt/components/couponProduct.vue'
|
import { limiInputType } from '@/utils/limiInputType'
|
import { inputNumberValid } from '@/utils/validator'
|
import { ecMarketMerchantQueryEcMarketMerchantList, ecMarketShopManageGetShopByBiz } from '@/api/MarketingMgt/dealerMgt'
|
import distributionOrderApi from '@/api/distributionOrder'
|
|
export default {
|
components: { couponProduct },
|
data () {
|
const deliverAdressValidate = (rule, value, callback) => {
|
if (!this.deliverAdressArray.length || !this.form.deliverDetail) {
|
callback(new Error('请输入发货地址'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
merchantArray: [],
|
shopArray: [],
|
shopArea: null,
|
deliverAdressArray: [],
|
form: {
|
bizId: 'B02',
|
merchantId: null,
|
promotionProducts: [],
|
marketShopId: null
|
},
|
formRules: {
|
merchantId: [
|
{ required: true, message: '请选择经销商', trigger: 'change' }
|
],
|
marketShopId: [
|
{ required: true, message: '请选择收货门店', trigger: 'change' }
|
],
|
deliverDetail: [
|
{ required: true, validator: deliverAdressValidate, trigger: 'change' }
|
],
|
couponSkuId: [{ type: 'array', required: true, message: '请选择商品规格', trigger: 'change' }],
|
memberMemo: [{ max: 300, message: '备注最多只能输入 300 个字', trigger: 'change' }],
|
quantity: [
|
{ required: true, message: '请输入商品数量' },
|
{ validator: inputNumberValid }
|
],
|
promotionProducts: [
|
{ type: 'array', required: true, message: '请选择商品', trigger: 'submit' }
|
]
|
}
|
}
|
},
|
created () {
|
this.getMerchantArray()
|
},
|
watch: {
|
'form.promotionProducts': {
|
handler () {
|
if (this.form.promotionProducts.length) {
|
this.$refs.form.clearValidate('promotionProducts')
|
}
|
},
|
deep: true
|
}
|
},
|
methods: {
|
/**
|
*当选择门店时获取对应的门店信息
|
*/
|
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
|
}
|
},
|
/**
|
* 当选择经销商时，获取对应的门店val
|
*/
|
changeMerchantId (val) {
|
this.shopArray = []
|
this.form.marketShopId = null
|
this.form.linkMan = null
|
this.form.linkPhone = null
|
this.form.detail = null
|
this.shopArea = null
|
if (!val) return
|
const query = {
|
merchantId: val,
|
isDeleted: '0'
|
}
|
ecMarketShopManageGetShopByBiz(Object.assign({ param: query }, { pageNum: 1, pageSize: 1000 }), false).then(res => {
|
if (res.data) {
|
this.shopArray = res.data.list
|
}
|
})
|
},
|
/**
|
* 获取经销商
|
*/
|
getMerchantArray (pageInfo = { pageNum: 1, pageSize: 1000 }) {
|
ecMarketMerchantQueryEcMarketMerchantList(Object.assign({ param: { status: '1' } }, pageInfo)).then(res => {
|
if (res.code === '0') {
|
this.merchantArray = res.data.list
|
}
|
})
|
},
|
/**
|
* 取消
|
*/
|
cancel () {
|
this.$router.push({ name: 'distribution' })
|
},
|
/**
|
* 保存
|
*/
|
submit () {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.form.skuInfo = this.$refs.table.handTableData()
|
this.addInfo()
|
}
|
})
|
},
|
/**
|
* 增加配货订单
|
*/
|
addInfo () {
|
distributionOrderApi.addItem(this.form).then((res) => {
|
if (res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.$router.push({ name: 'distribution' })
|
}
|
})
|
},
|
/**
|
* 限制不能输入数字
|
*/
|
limiInputType (e) {
|
limiInputType(e)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.distributionOrderSelect{
|
.el-select{
|
width: 100%;
|
}
|
}
|
.disInfoStyle{
|
padding-top:20px;
|
}
|
</style>
|
