本文介绍了如何在Element UI组件库中实现动态表格和表单的校验，包括静态校验、动态校验、包含多个输入框的校验以及表格删除行时的校验。通过自定义校验规则和方法，确保了数据的准确性和用户交互的流畅性。此外，还展示了如何在表单中隐藏和显示行，以及在查看模式和编辑模式之间的切换。
相信大伙肯定遇到过这样的需求，在一个表单内容里嵌套一个表格，并要校验表格里面的某些单元格内容，如果自己实现这样的校验，一般就只能遍历表格内容进行判断，然后修改标识符给出提示。
根据下图要求，从table中静态校验表单、table中动态校验表单、表单中包含多个el-input校验方法、table删除行校验方法几个方面介绍解决方案。如果大伙发现问题或有其他解决方案，欢迎指出。
要求：如下图，成团人数等于有效订单时，无效订单奖励置灰不校验，反之可编辑并校验；活动修改时，原添加商品不可编辑不可删除。
1、table中静态校验表单
使用的是 elementUI 组件库，只需要在表格单元格放入 ElFormItem 组件下，即可实现指定单元格的校验，固定的格式:prop="'autoCouponActivityInfoList.'+scope.$index+'.groupPrice'" :rules="goodsRules.groupPrice" ，autoCouponActivityInfoList对应el-table中的data的ruleForm.autoCouponActivityInfoList，goodsRules是新的校验规则，主要与form校验分开，单独校验table中的数据
-----template部分----
<el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
<el-form-item label="配置商品" prop="autoCouponActivityInfoList">
<el-input placeholder="请输入商品编号" v-model="goodsNo" class = "width400" ></el-input>
<el-button type = "success" plain @click="getNameByGoodsNo" :loading="loadings">添加</el-button>
<div>
<el-table
:data="ruleForm.autoCouponActivityInfoList"
size="small"
border
stripe
class="tablecheckout"
cell-class-name="column"
ref="multipleTable"
:row-class-name="tableRowClassName"
>
<el-table-column label="拼团价" align="center">
<template slot-scope="scope">
<el-form-item class="checkerror" label="" :prop="'autoCouponActivityInfoList.'+scope.$index+'.groupPrice'" :rules="goodsRules.groupPrice">
<el-input type="number" v-model="scope.row.groupPrice" min='1' placeholder="" class = "m0" ></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
</el-form>
--------script------data()部分-----
data() {
return {
goodsRules:{
groupPrice:[
{ required: true, message: '请输入拼团价!', trigger: ['change', 'blur'] },
],
},
rules: {
autoCouponActivityInfoList: [
{ required: true, message: '请选择活动商品！', trigger: ['change', 'blur'] },
],
}
}
},2、table中动态校验表单
根据条件显示校验规则:rules="(scope.row.activityId || scope.row.showline) ? '' : goodsRules.groupPrice"
<el-table-column label="拼团价" align="center">
<template slot-scope="scope">
<el-form-item class="checkerror" label="" :prop="'autoCouponActivityInfoList.'+scope.$index+'.groupPrice'" :rules="(scope.row.activityId || scope.row.showline) ? '' : goodsRules.groupPrice">
<el-input type="number" v-model="scope.row.groupPrice" min='1' placeholder="" class = "m0" ></el-input>
</el-form-item>
</template>
</el-table-column>3、表单中包含多个el-input、el-select等的校验方法
3-1、表单中多个el-input的校验方法
------template--部分----
<div class="flex-row">
<el-form-item label="无效订单" prop="invalidOrderAward">
<el-input v-model="ruleForm.num1" placeholder="请输入团长奖励"></el-input>
<el-input v-model="ruleForm.num2" placeholder="请输入成员奖励"></el-input>
</el-form-item>
</div>
-------script---data---部分---
data(){
var checkOrderAward = (rule, value, callback) => {
let num2 = this.$refs.num2.value;
if (value && num2) {
callback()
} else {
if (!value) {
callback(new Error('请输入团长奖励'))
}
if (!num2) {
callback(new Error('请输入成员奖励'))
}
}
}
return {
rules: {
invalidOrderAward: [{ required: true, validator: checkOrderAward, trigger: 'blur'}],
}
}
}3-2、表单中json数组的el-input的检验方法
校验方法中rule.field得到的信息是 autoCouponActivityInfoList.1.invalidOrderAward.0 和el-form-item中:prop="'autoCouponActivityInfoList.'+scope.$index+'.invalidOrderAward.'+indexReward"是一致的，根据这个可以得到当前数据索引以及当前所有数据。
此块数据是json格式，校验的是里边的每一项，动态校验数据的时候，直接写在el-form-item中的:rules=""中，校验会不及时，导致提交的时候才会校验，所以可以选择写在自定义的校验方法中。
-----template------部分----
<el-table-column label="无效订单奖励" align="center" >
<template slot-scope="scope">
<el-form-item
class="marbotom_15 martop_5 checkerror 2"
v-for="(itemReward, indexReward) in scope.row.invalidOrderAward" :key="indexReward" :prop="'autoCouponActivityInfoList.'+scope.$index+'.invalidOrderAward.'+indexReward"
:rules="goodsRules.invalidOrderAward" >
{{ itemReward.name }}
<el-select v-model="itemReward.rewardType" clearable filterable class="w80" >
<el-option
label="淳金币"
value="2" key="2"></el-option>
<el-option
label="现金"
value="1" key="2"></el-option>
</el-select>
<el-input type="number" v-model="itemReward.rewardNum" min='1' placeholder="" class = "width80" ></el-input>
元
</el-form-item>
</template>
</el-table-column>
-----script-----data部分------
data(){
const validatenooder = (rule, value, callback) => {
let field = rule.field
let field1 = field.split('.')[1]
let activityId = this.ruleForm.autoCouponActivityInfoList[field1].activityId
let showline = this.ruleForm.autoCouponActivityInfoList[field1].showline
if ((groupNumber == validOrderNumber) || activityId || showline == true) {
callback()
} else {
if (value.rewardNum == '' || value.rewardType == '' ) {
callback(new Error(`请配置${value.name}奖励方式！`))
}
else if (Number(value.rewardNum) <=0 ) {
callback(new Error(`请输入大于0的数字`))
}
else {
callback()
}
}
};
return{
invalidOrderAward:[
{ required: true, message: '请输入无效订单!', trigger: 'change' },
{ required: true, validator: validatenooder, trigger: 'change' },
],
}
}4、表单中table删除行校验
4-1、table中删除行校验
-------template-----部分------
<el-table-column label="操作" align="center" width="80" >
<template slot-scope="scope">
<el-button size="mini" type="danger" plain @click="deleteGoods(scope.$index, scope.row)" >删除</el-button>
</template>
</el-table-column>
--------script----部分------
deleteGoods(index,row){
this.ruleForm.autoCouponActivityInfoList.splice(index, 1)
},直接用this.ruleForm.autoCouponActivityInfoList.splice(index, 1)方式删除行时，会发现校验是有问题的。添加三个商品，直接删除最后2、3个商品校验不会有问题；如果直接删除1、2剩下商品3的时候，就会发现数据返回没问题，校验提示不能为空。目前想到的方案是做假删除，提交时，再处理数据，当然商品判重时，也要根据假删除处理数据。
4-2、table中隐藏行
在el-table中:row-class-name="tableRowClassName"根据条件添加class，隐藏行
-----template----部分----
<el-table
:data="ruleForm.autoCouponActivityInfoList"
size="small"
border
stripe
class="tablecheckout"
cell-class-name="column"
ref="multipleTable"
:row-class-name="tableRowClassName"
>
</el-table>
-------script---部分----
tableRowClassName: function (row, index) {
if (row.row.showline === true) {
return 'hidden-row';
} else {
return '';
}
},
--------style---部分----
.tablecheckout.el-table .hidden-row {
display: none;
}接下来，上代码
<template>
<div class = "commodity-box">
<el-form :label-position="labelPosition" :model="ruleForm" :rules="lookshow?'':rules" ref="ruleForm" label-width="140px">
<el-form-item label="活动名称" prop="title">
<el-input v-model="ruleForm.title" placeholder="请输入活动名称" class = "width400" v-if="!lookshow"></el-input>
<span v-else>{{ ruleForm.title }}</span>
</el-form-item>
<el-form-item label="应用终端" prop="applyRange">
<div v-if="!lookshow">
<el-checkbox label="小程序" v-model="ruleForm.applyRange.wxShow" disabled>小程序</el-checkbox>
<el-checkbox label="IOS" v-model="ruleForm.applyRange.iosShow">IOS</el-checkbox>
<el-checkbox label="安卓" v-model="ruleForm.applyRange.androidShow">安卓</el-checkbox>
</div>
<span v-else>{{ ruleForm.applyRangetext }}</span>
</el-form-item>
<el-form-item label="活动时间" prop="value1">
<el-date-picker
:picker-options="expireTimeOption"
v-model="ruleForm.value1"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00','23:59:00']" v-if="!lookshow" :disabled="ruleForm.id ? true : false">
</el-date-picker>
<span v-else>{{ ruleForm.startTime2 + ' ~ ' + ruleForm.endTime2 }}</span>
</el-form-item>
<el-form-item label="有效时间" prop="validTime" >
<el-input @keyup.native="keynumber($event,'validTime',ruleForm)" min = "0" type = "number" v-model="ruleForm.validTime" placeholder="输入数字" class = "width120 marright_10" v-if="!lookshow"></el-input>
<span v-else>{{ ruleForm.validTime }}</span>
小时
</el-form-item>
<el-form-item label="建团资格" prop="buildUserType" >
<el-radio-group v-model="ruleForm.buildUserType" v-if="!lookshow">
<el-radio :label="0">不限</el-radio>
<el-radio :label="1">会员</el-radio>
</el-radio-group>
<span v-else>{{ ruleForm.buildUserType == 0 ? '不限' : '会员' }}</span>
</el-form-item>
<el-form-item label="参团资格" prop="joinUserType" >
<div v-if="!lookshow">
<el-checkbox label="新客" v-model="ruleForm.joinUserType.joinNewUser">新客</el-checkbox>
<el-checkbox label="用户" v-model="ruleForm.joinUserType.joinUser">用户</el-checkbox>
<el-checkbox label="会员" v-model="ruleForm.joinUserType.joinVip">会员</el-checkbox>
</div>
<span v-else>{{ ruleForm.joinUserTypetext }}</span>
</el-form-item>
<el-form-item label="配置商品" prop="autoCouponActivityInfoList">
<el-input placeholder="请输入商品编号" v-model="goodsNo" class = "width400" v-if="!lookshow"></el-input>
<el-button type = "success" plain @click="getNameByGoodsNo" v-if="!lookshow" :loading="loadings">添加</el-button>
<span class="colororange" v-if="!lookshow">（仅支持自营商品 - 供应链，单商品多规格时，按规格维度添加到列表中，后续奖励的和正常购买一致）</span>
<!-- <div :style="!lookshow?'margin-top:20px; width:1200px;':'margin-top:10px; width:1270px;'"> -->
<div :style="!lookshow?'margin-top:20px; ':'margin-top:10px; '">
<el-table
:data="ruleForm.autoCouponActivityInfoList"
size="small"
border
stripe
class="tablecheckout"
cell-class-name="column"
ref="multipleTable"
:row-class-name="tableRowClassName"
>
<el-table-column
v-for="(item, index) in tableLabel"
align="center"
:key="index"
:prop="item.prop"
:width="item.width"
:label="item.label"
>
</el-table-column>
<el-table-column label="拼团价" align="center">
<template slot-scope="scope">
<el-form-item class="checkerror" label="" :prop="'autoCouponActivityInfoList.'+scope.$index+'.groupPrice'" :rules="(scope.row.activityId || scope.row.showline) ? '' : goodsRules.groupPrice">
<el-input type="number" @keyup.native="oninput($event,'groupPrice',scope.row)" v-model="scope.row.groupPrice" min='1' placeholder="" class = "m0" v-if="!lookshow" :disabled="scope.row.activityId ? true : false"></el-input>
<span v-else>{{ scope.row.groupPrice }}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="成团人数" align="center" >
<template slot-scope="scope">
<el-form-item class="checkerror" label="" :prop="'autoCouponActivityInfoList.'+scope.$index+'.groupNumber'" :rules="(scope.row.activityId || scope.row.showline) ? '' : goodsRules.groupNumber">
<el-input type="number" @keyup.native="keynumber($event,'groupNumber',scope.row)" placeholder="2~99" v-model="scope.row.groupNumber" min='1' class = "m0" v-if="!lookshow" :disabled="scope.row.activityId ? true : false"></el-input>
<span v-else>{{ scope.row.groupNumber }}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="有效订单" align="center">
<template slot-scope="scope">
<el-form-item class="checkerror" label="" :prop="'autoCouponActivityInfoList.'+scope.$index+'.validOrderNumber'" :rules="(scope.row.activityId || scope.row.showline) ? '' : goodsRules.validOrderNumber">
<el-input type="number" @keyup.native="keynumber($event,'validOrderNumber',scope.row)" v-model="scope.row.validOrderNumber" min='1' placeholder="1~99" class = "m0" v-if="!lookshow" :disabled="scope.row.activityId ? true : false"></el-input>
<span v-else>{{ scope.row.validOrderNumber }}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="无效订单奖励" align="center" :width="!lookshow?'313':'200'">
<template slot-scope="scope">
<div v-if="!lookshow">
<!-- <el-form-item
class="marbotom_15 martop_5 checkerror 2"
v-for="(itemReward, indexReward) in scope.row.invalidOrderAward"
:key="indexReward"
:prop="'autoCouponActivityInfoList.'+scope.$index+'.invalidOrderAward.'+indexReward"
:rules="(scope.row.groupNumber == scope.row.validOrderNumber || scope.row.activityId) ? '' : goodsRules.invalidOrderAward" > -->
<el-form-item
class="marbotom_15 martop_5 checkerror 2"
v-for="(itemReward, indexReward) in scope.row.invalidOrderAward"
:key="indexReward"
:prop="'autoCouponActivityInfoList.'+scope.$index+'.invalidOrderAward.'+indexReward"
:rules="goodsRules.invalidOrderAward" >
{{ itemReward.name }}
<el-select v-model="itemReward.rewardType" clearable filterable class="w80" :disabled="(scope.row.groupNumber == scope.row.validOrderNumber || scope.row.activityId) ? true : false">
<el-option
label="淳金币"
value="2" key="2"></el-option>
<el-option
label="现金"
value="1" key="2"></el-option>
</el-select>
<el-input type="number" @keyup.native="oninput($event,'rewardNum',itemReward)" v-model="itemReward.rewardNum" min='1' placeholder="" class = "width80" :disabled="(scope.row.groupNumber == scope.row.validOrderNumber || scope.row.activityId) ? true : false"></el-input>
元
</el-form-item>
</div>
<div v-else>{{ scope.row.invalidOrderAwardtext }}</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="80" v-if="!lookshow">
<template slot-scope="scope">
<el-button size="mini" type="danger" plain @click="deleteGoods(scope.$index, scope.row)" v-if="!scope.row.activityId">删除</el-button>
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in tableLabel2"
align="center"
:key="index"
:prop="item.prop"
:width="item.width"
:label="item.label"
v-if="lookshow"
>
</el-table-column>
</el-table>
<div class="colororange" v-if="!lookshow">注意：活动一旦提交完成，则配置列表商品数据不可修改（新加的除外），请确认后在提交！</div>
</div>
</el-form-item>
<el-form-item label="上/下架" prop="displayStatus" >
<el-radio-group v-model="ruleForm.displayStatus" v-if="!lookshow">
<el-radio :label="1">上架</el-radio>
<el-radio :label="0">下架</el-radio>
</el-radio-group>
<span v-else>{{ ruleForm.displayStatus == 1 ? '上架' : '下架' }}</span>
</el-form-item>
<el-form-item label="支持凑单" prop="goodsDetailShow">
<el-radio-group v-model="ruleForm.goodsDetailShow" v-if="!lookshow">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
<span v-else>{{ ruleForm.goodsDetailShow == 1 ? '是' : '否' }}</span>
</el-form-item>
<el-form-item >
<el-button type="primary" @click="submitForm('ruleForm')" :loading="disabled" v-if="!lookshow">提交</el-button>
<el-button @click="resetForm" v-else>返回</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { selectGoodsInfo } from '@/api/marketing.js'
import { oninput, keynumber } from '@/filters/index.js'
import validator from '@/utils/validator.js'
export default {
name: 'couponadd',
props:{
orderfirstdata:{
type: Object
},
disabled:{ // 按钮提交
type: Boolean,
default: false
},
lookshow:{ // 是否是查看详情
type: Boolean,
default:false
}
},
data() {
// 时间
const validateTime = (rule, value, callback) => {
if(value==null){
this.ruleForm.startTime = ''
this.ruleForm.endTime = ''
} else{
if (this.ruleForm.id) {
callback()
} else {
var timestamp = Date.parse(new Date());
timestamp = timestamp;
var stringTime = value[0];
var stringTime1 = value[1];
var timestamp2 = Date.parse(new Date(stringTime));
var timestamp1 = Date.parse(new Date(stringTime1));
timestamp2 = timestamp2;
this.ruleForm.startTime = timestamp2
this.ruleForm.endTime = timestamp1
if(timestamp2<timestamp){
callback(new Error(rule.message))
this.ruleForm.value1 = []
this.ruleForm.startTime = ''
this.ruleForm.endTime = ''
} else {
callback()
}
}
}
}
// 拼团价
const validategroupPrice = (rule, value, callback) => {
let field = rule.field
field = field.split('.')[1]
let price =this.ruleForm.autoCouponActivityInfoList[field].price // 零售价
if ( Number(price) < Number(value) ) {
callback(new Error('拼团价不能大于零售价！'))
} else {
callback()
}
};
// 成团人数
const validateAcquaintance2 = (rule, value, callback) => {
let field = rule.field
field = field.split('.')[1]
let groupNumber =this.ruleForm.autoCouponActivityInfoList[field].groupNumber // 成团人数
let validOrderNumber =this.ruleForm.autoCouponActivityInfoList[field].validOrderNumber // 有效订单
if ( Number(groupNumber) < Number(validOrderNumber) ) {
callback(new Error('有效订单数不能大于成团人数！-1'))
}
else {
callback()
}
};
// 有效订单
const validateAcquaintance1 = (rule, value, callback) => {
let field = rule.field
field = field.split('.')[1]
let groupNumber =this.ruleForm.autoCouponActivityInfoList[field].groupNumber // 成团人数
let validOrderNumber =this.ruleForm.autoCouponActivityInfoList[field].validOrderNumber // 有效订单
if ( Number(groupNumber) < Number(validOrderNumber) ) {
callback(new Error('有效订单数不能大于成团人数！'))
}
else {
callback()
}
};
// 无效订单配置
const validatenooder = (rule, value, callback) => {
let field = rule.field
let field1 = field.split('.')[1]
let price = this.ruleForm.autoCouponActivityInfoList[field1].price // 零售价
let validOrderNumber = this.ruleForm.autoCouponActivityInfoList[field1].validOrderNumber // 有效订单
let rewardNum1 = this.ruleForm.autoCouponActivityInfoList[field1].invalidOrderAward[0].rewardNum
let rewardNum2 = this.ruleForm.autoCouponActivityInfoList[field1].invalidOrderAward[1].rewardNum
let groupNumber = this.ruleForm.autoCouponActivityInfoList[field1].groupNumber
let activityId = this.ruleForm.autoCouponActivityInfoList[field1].activityId // 用于判断是否是原商品数据
let showline = this.ruleForm.autoCouponActivityInfoList[field1].showline // 假删除字段
if ((groupNumber == validOrderNumber) || activityId || showline == true) {
callback()
} else {
if (value.rewardNum == '' || value.rewardType == '' ) {
callback(new Error(`请配置${value.name}奖励方式！`))
}
else if (Number(value.rewardNum) <=0 ) {
callback(new Error(`请输入大于0的数字`))
}
else if ((Number(rewardNum1)+Number(rewardNum2)*Number(validOrderNumber)) > Number(price)/2) {
callback(new Error(`奖励不可大于零售价的50%！`))
}
else {
callback()
}
}
};
// 应用终端
const validateapplyRange = (rule, value, callback) => {
if (value.wxShow == false && value.iosShow == false && value.androidShow == false) {
callback(new Error(`请选择应用终端！`))
} else {
callback()
}
}
// 参团资格
const validatejoin = (rule, value, callback) => {
if (value.joinNewUser == false && value.joinUser == false && value.joinVip == false) {
callback(new Error(`请选择参团资格！`))
} else {
callback()
}
}
return {
valueprop:'',
loadings:false,
expireTimeOption: {
disabledDate(date) {
return date.getTime() < Date.now()- 8.64e7;
}
},
labelPosition: 'right',
tableData: [],
// 子组件的表头数据
tableLabel: [
{ label: '商品编号', width: '120', prop: 'goodsNo' },
{ label: '商品名称', width: '', prop: 'goodsName' },
{ label: '商品规格', width: '', prop: 'specString' },
{ label: '零售价', width: '', prop: 'price' },
{ label: '库存', width: '', prop: 'stock' },
],
tableLabel2: [
{ label: '订单数量', width: '', prop: 'orderTotal' },
{ label: '合计金额', width: '', prop: 'orderTotalMoney' },
{ label: '有效订单', width: '', prop: 'validOrderNumber' },
{ label: '合计金额', width: '', prop: 'validOrderMoney' },
{ label: '无效订单', width: '', prop: 'invalidOrderNumber' },
{ label: '合计金额', width: '', prop: 'invalidOrderMoney' },
],
ruleForm: {
id:'',
title: '',
value1: [],
startTime2: '',
endTime2: '',
startTime: '',
endTime: '',
validTime:'',
applyRange:{
wxShow: true, // 应用终端小程序 0-禁用 1-启用
iosShow: true, // 应用终端IOS 0-禁用 1-启用
androidShow: true // 应用终端Android 0-禁用 1-启用
},
applyRangetext:'小程序/IOS/安卓',
buildUserType:0,
joinUserType:{
joinNewUser: true, // 参团资格新客 0-禁用 1-启用
joinUser: true, // 参团资格用户 0-禁用 1-启用
joinVip: true // 参团资格会员 0-禁用 1-启用
},
joinUserTypetext:'新客/用户/会员',
displayStatus: 1,
goodsDetailShow:1,
autoCouponActivityInfoList:[],
},
goodsNo:'',
goodsRules:{
groupPrice:[
{ required: true, message: '请输入拼团价!', trigger: ['change', 'blur'] },
{ required: true, validator: validator.validatornum, num:0, typenum:'大于', message:'请输入大于0的数字', trigger: ['change', 'blur'] },
{ required: true, validator: validategroupPrice, trigger: ['change', 'blur'] },
],
groupNumber:[
{ required: true, message: '请输入成团人数!', trigger: ['change', 'blur'] },
{ required: true, validator: validator.validatornum, num:1, typenum:'大于', message:'请输入大于1的数字', trigger: ['change', 'blur'] },
{ required: true, validator: validator.validatornum, num:100, typenum:'小于', message:'请输入小于100的数字', trigger: ['change', 'blur'] },
{ required: true, validator: validateAcquaintance2, trigger: ['change', 'blur'] },
],
validOrderNumber:[
{ required: true, message: '请输入有效订单!', trigger: ['change', 'blur'] },
{ required: true, validator: validator.validatornum, num:0, typenum:'大于', message:'请输入大于0的数字', trigger: ['change', 'blur'] },
{ required: true, validator: validator.validatornum, num:100, typenum:'小于', message:'请输入小于100的数字', trigger: ['change', 'blur'] },
{ required: true, validator: validateAcquaintance1, trigger: ['change', 'blur'] },
],
invalidOrderAward:[
{ required: true, message: '请输入无效订单!', trigger: 'change' },
{ required: true, validator: validatenooder, trigger: 'change' },
],
},
rules: {
title: [
{ required: true, message: '请输入活动名称！', trigger: ['change', 'blur'] },
{ required: true, validator: validator.validatepatrn, trigger: ['change', 'blur'] },
{ required: true, validator: validator.validatestrlen, maxlen: 20, message: '请输入1~10个文字', trigger: ['change', 'blur'] },
],
applyRange: [
{ required: true, message: '请选择应用终端！', trigger: ['change', 'blur'] },
{ required: true, validator: validateapplyRange, trigger: ['change', 'blur'] },
],
value1: [
{ required: true, message: '请输入活动时间！', trigger: 'blur' },
{ required: true, validator: validateTime, message: '选择时间必须是当前时间之后!',trigger: 'blur' },
],
validTime: [
{ required: true, message: '请输入有效时间！', trigger: ['change', 'blur'] },
{ required: true, validator: validator.validatornum, num:0, typenum:'大于', message:'请输入大于0的数字', trigger: ['change', 'blur'] },
],
buildUserType: [
{ required: true, message: '请选择建团资格！', trigger: ['change', 'blur'] }
],
joinUserType: [
{ required: true, message: '请选择参团资格！', trigger: ['change', 'blur'] },
{ required: true, validator: validatejoin, trigger: ['change', 'blur'] },
],
autoCouponActivityInfoList: [
{ required: true, message: '请选择活动商品！', trigger: ['change', 'blur'] },
],
displayStatus: [
{ required: true, message: '请选择活动上/下架！', trigger: ['change', 'blur'] }
],
goodsDetailShow: [
{ required: true, message: '请选择是否支持凑团！', trigger: ['change', 'blur'] }
],
}
}
},
watch: {
orderfirstdata(val) {
console.log(val)
const _val = val
if (_val != undefined) {
this.valueprop = _val.startTime
this.ruleForm = {
title: _val.activityTitle,
applyRange:{
wxShow: _val.wxShow == 1 ? true : false,
iosShow: _val.iosShow == 1 ? true : false,
androidShow: _val.androidShow == 1 ? true : false,
},
value1:[_val.startTime,_val.endTime],
startTime2: this.$options.filters.changeTimes(_val.startTime),
endTime2: this.$options.filters.changeTimes(_val.endTime),
startTime: _val.startTime,
endTime: _val.endTime,
validTime: _val.validTime,
buildUserType: _val.buildUserType,
applyRangetext: _val.device,
joinUserTypetext: _val.join,
joinUserType:{
joinNewUser: _val.joinNewUser == 1 ? true : false,
joinUser: _val.joinUser == 1 ? true : false,
joinVip: _val.joinVip == 1 ? true : false,
},
displayStatus: _val.displayStatus,
goodsDetailShow: _val.goodsDetailShow,
id:_val.id
}
let groupBookingGoods = []
if (_val.groupBookingGoods.length > 0) {
_val.groupBookingGoods.map((x) => {
let obj = {
activityId: _val.id,
activityTitle: _val.activityTitle,
goodsDetailShow: _val.goodsDetailShow,
goodsNo: x.goodsNo,
goodsName: x.goodsName,
price: x.price,
stock: x.stock == -1 ? '不限' : x.stock,
goodsSpecId: x.goodsSpecId,
groupNumber: x.groupNumber,
groupPrice: x.groupPrice,
validOrderNumber: x.validOrderNumber,
orderTotal: x.orderTotal || 0,
orderTotalMoney: x.orderTotalMoney || 0,
validOrderMoney: x.validOrderMoney || 0,
validOrderNumber: x.validOrderNumber || 0,
invalidOrderMoney: x.invalidOrderMoney || 0,
invalidOrderNumber: x.invalidOrderNumber || 0,
showline: false
}
if (x.invalidOrderAward && typeof x.invalidOrderAward == 'string') {
x.invalidOrderAward = eval('(' + x.invalidOrderAward + ')')
}
if (x.productSpec && typeof x.productSpec == 'string') {
x.productSpec = eval('(' + x.productSpec + ')')
}
obj.specString = ''
if (x.productSpec.length > 0) {
x.productSpec.map((y) => {
obj.specString += y.specName + ':' + y.specValue + '; '
})
} else {
obj.specString = '单规格'
}
obj.invalidOrderAward= [
{
name:'团长',
rewardType: x.groupNumber == x.validOrderNumber ? '' : x.invalidOrderAward.leaderAwardType,
rewardNum: x.groupNumber == x.validOrderNumber ? '' : x.invalidOrderAward.leaderAwardMoney
},
{
name:'成员',
rewardType: x.groupNumber == x.validOrderNumber ? '' : x.invalidOrderAward.memberAwardType,
rewardNum: x.groupNumber == x.validOrderNumber ? '' : x.invalidOrderAward.memberAwardMoney
}
],
obj.invalidOrderAwardtext = '团长：' + (x.invalidOrderAward.leaderAwardType == 2 ? '淳金币 ' : '现金 ') + x.invalidOrderAward.leaderAwardMoney + '元；成员：' + (x.invalidOrderAward.memberAwardType == 2 ? '淳金币 ' : '现金 ') + x.invalidOrderAward.memberAwardMoney + '元；'
groupBookingGoods.push(obj)
})
}
this.ruleForm.autoCouponActivityInfoList = groupBookingGoods
}
}
},
methods: {
oninput,
keynumber,
// 获取商品信息
getNameByGoodsNo() {
const reg = /^[0-9a-zA-Z]*$/g
if(this.goodsNo == ''){
this.$message({
type: 'info',
message: '请输入商品编号！'
})
}else if(!reg.test(this.goodsNo)){
this.goodsNo = ''
this.$message({
type: 'info',
message: '请输入商品编号！'
})
}else{
this.loadings = true
let data = {
goodsNo: encodeURI(this.goodsNo)
}
selectGoodsInfo(data).then(res => {
this.loadings = false
if (res.data.code == 200) {
let listdata = res.data.data
listdata.map((x) => {
if (x.productSpec) {
x.productSpec = eval('(' + x.productSpec + ')')
}
x.specString = ''
if (x.productSpec.length > 0) {
x.productSpec.map((y) => {
x.specString += y.specName + ':' + y.specValue + '; '
})
} else {
x.specString = '单规格'
}
x.stock = x.productStock == -1 ? '不限' : x.productStock
x.groupPrice = '',
x.groupNumber = '',
x.validOrderNumber = '',
x.showline = false
x.invalidOrderAward = [
{
name:'团长',
rewardType:'',
rewardNum:''
},
{
name:'成员',
rewardType:'',
rewardNum:''
}
]
})
var ruleList = this.ruleForm.autoCouponActivityInfoList;
var repeatId=false;
if (ruleList.length == 0 || ruleList == []) {
repeatId = false;
} else {
for (var i=0;i<ruleList.length;i++) {
for (var j=0;j<listdata.length;j++) {
if (ruleList[i].goodsSpecId == listdata[j].goodsSpecId && ruleList[i].showline == false) {
repeatId = true;
}
}
}
}
if (repeatId == false) {
this.ruleForm.autoCouponActivityInfoList = this.ruleForm.autoCouponActivityInfoList.concat(listdata)
this.goodsNo = ''
} else {
this.goodsNo = ''
this.$message({
type: 'error',
message: '该商品已添加到了列表中，不能重复添加！'
})
}
}else {
this.goodsNo = ''
this.loadings = false
this.$message({
type: 'error',
message: res.data.msg
})
}
}).catch(err => {
this.goodsNo = ''
this.loadings = false
this.$message({
type: 'error',
message: err.msg
})
})
}
},
// 删除商品
deleteGoods(index,row){
let that = this;
this.ruleForm.autoCouponActivityInfoList[index].showline = true
},
tableRowClassName: function (row, index) {
if (row.row.showline === true) {
return 'hidden-row row';
} else {
return 'row';
}
},
// 提交
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let ruledata = {
title: this.ruleForm.title,
wxShow: this.ruleForm.applyRange.wxShow ? 1 : 0,
iosShow: this.ruleForm.applyRange.iosShow ? 1 : 0,
androidShow: this.ruleForm.applyRange.androidShow ? 1 : 0,
startTime: this.ruleForm.startTime,
endTime: this.ruleForm.endTime,
validTime: Number(this.ruleForm.validTime),
buildUserType: Number(this.ruleForm.buildUserType),
joinNewUser: this.ruleForm.joinUserType.joinNewUser ? 1 : 0,
joinUser: this.ruleForm.joinUserType.joinUser ? 1 : 0,
joinVip: this.ruleForm.joinUserType.joinVip ? 1 : 0,
displayStatus: Number(this.ruleForm.displayStatus),
goodsDetailShow: Number(this.ruleForm.goodsDetailShow),
}
let groupBookGoods = []
for(var i=0;i<this.ruleForm.autoCouponActivityInfoList.length;i++){
if (this.ruleForm.autoCouponActivityInfoList[i].showline == false) {
let obj = {
activityTitle: this.ruleForm.title,
goodsDetailShow: this.ruleForm.goodsDetailShow,
goodsNo: this.ruleForm.autoCouponActivityInfoList[i].goodsNo,
goodsSpecId: this.ruleForm.autoCouponActivityInfoList[i].goodsSpecId,
groupNumber: this.ruleForm.autoCouponActivityInfoList[i].groupNumber,
groupPrice: this.ruleForm.autoCouponActivityInfoList[i].groupPrice,
validOrderNumber: this.ruleForm.autoCouponActivityInfoList[i].validOrderNumber,
invalidOrderAward: {
leaderAwardType:this.ruleForm.autoCouponActivityInfoList[i].invalidOrderAward[0].rewardType,
leaderAwardMoney:this.ruleForm.autoCouponActivityInfoList[i].invalidOrderAward[0].rewardNum,
memberAwardType:this.ruleForm.autoCouponActivityInfoList[i].invalidOrderAward[1].rewardType,
memberAwardMoney:this.ruleForm.autoCouponActivityInfoList[i].invalidOrderAward[1].rewardNum
}
}
if (this.ruleForm.id) {
obj.activityId = this.ruleForm.id
}
groupBookGoods.push(obj)
}
}
ruledata.groupBookGoods = groupBookGoods
if (this.ruleForm.id) {
ruledata.id = this.ruleForm.id
}
console.log(ruledata,'---ruledata')
this.disabled = true
ruledata.disabled = true
this.$emit('getorderfirst',ruledata)
} else {
console.log('error submit!!')
return false
}
})
},
// 返回
resetForm() {
this.$options.filters.closeSelectedTag(this.$route, this.$store, this.$route.path, this.$router, 1)
},
}
}
</script>
<style >
</style>
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
