H5部分#xff1a;

append-to-body点击新增后新增一个月度活动详情提交时可同时提交多个月度活动详情。

点击某一个月度活动信息的删除后可删除对应月度活动信息

H5部分

stylebackground-color:#f2f5f9;margin:

10px;

/el-option/el-select/el-form-item/el-colel-col

:span16el-form-item

propstarttimeel-time-pickerv-modelitem.starttimeformat

HH:mmvalue-format

HH:mmplaceholder活动开始时间stylewidth:

30%/el-time-picker至el-time-pickerstylewidth:

HH:mmvalue-format

HH:mmplaceholder活动结束时间/el-time-picker/el-form-item/el-col/el-rowel-rowel-col

:span8el-form-item

//el-select/el-form-item/el-colel-col

:span16el-form-item

propregTimeel-date-pickerv-modelitem.regTimetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker/el-form-item/el-col/el-rowel-form-item

label活动题目

:label2室外/el-radio/el-radio-group/el-form-item/el-colel-col

:span8el-form-item

//el-select/el-form-item/el-colel-col

:span8el-form-item

//el-form-item/el-col/el-rowel-row

el-col

right;删除/el-button/el-row/el-form/div/el-formdiv

slotfooter

消/el-button/div/el-dialog抽取H5部分的主要框架

el-dialog

stylebackground-color:#f2f5f9;margin:

10px;

propstarttime表单项2/el-form-item/el-colel-button

clickdelItem(index)

right;删除/el-button/el-row/el-form/div/el-formdiv

slotfooter

console.log(this.form.dynamicItem);this.form.dynamicItem.push({});},/**

**/delItem(index){this.form.dynamicItem.splice(index,1);}页面中form数据对象声明

表单参数form:

classapp-containerel-date-pickerv-modelmonthValuetypemonthstylewidth:

120pxvalue-formatyyyy-MMformatyyyy-MMplaceholder选择月changechangeMonth/el-date-pickerel-calendar

v-modelnowDate

templateslotdateCellslot-scope{date,

data}p

data.day.split(-).slice(1).join(月)日}}

data.isSelected

stylebackground-color:#f2f5f9;margin:

10px;

/el-option/el-select/el-form-item/el-colel-col

:span16el-form-item

propstarttimeel-time-pickerv-modelitem.starttimeformat

HH:mmvalue-format

HH:mmplaceholder活动开始时间stylewidth:

30%/el-time-picker至el-time-pickerstylewidth:

HH:mmvalue-format

HH:mmplaceholder活动结束时间/el-time-picker/el-form-item/el-col/el-rowel-rowel-col

:span8el-form-item

//el-select/el-form-item/el-colel-col

:span16el-form-item

propregTimeel-date-pickerv-modelitem.regTimetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker/el-form-item/el-col/el-rowel-form-item

label活动题目

:label2室外/el-radio/el-radio-group/el-form-item/el-colel-col

:span8el-form-item

//el-select/el-form-item/el-colel-col

:span8el-form-item

//el-form-item/el-col/el-rowel-row

el-col

right;删除/el-button/el-row/el-form/div/el-formdiv

slotfooter

{createMonth,updateMonth,deleteMonth,getMonth,getMonthPage,exportMonthExcel,createMonthActivities

from

{//活动类型下拉框获取后端数据activeType:null,//活动人数下拉框获取后端数据activePtotal:null,monthValue:null,nowDate:new

Date(),//

[],//新增活动日期addActiveDate:null,//

查询参数queryParams:

{this.monthValuethis.nowDate;this.getList();//活动类型下拉框获取数据this.activeTypethis.getDictDatas(DICT_TYPE.ACTIVITY_MONTH_TYPE);//活动人数下拉框获取数据this.activePtotalthis.getDictDatas(DICT_TYPE.ACTIVITY_MONTH_PTOTAL);//活动场景单选框数据//

this.activeScenethis.getDictDatas(DICT_TYPE.ACTIVITY_MONTH_SCENE);},methods:

{/**

{...this.queryParams};this.addBeginAndEndTime(params,

this.dateRangeTime,

time);this.addBeginAndEndTime(params,

regTime);this.addBeginAndEndTime(params,

createTime);//

执行查询getMonthPage(params).then(response

{this.list

response.data.total;this.loading

false;});},/**

subDatathis.form.dynamicItem;//提交数据验证subData.forEach((data,index){//对提交数据进行验证:type,starttime,endtime,ptotal,regTime,title,roomnum,manager,badgetif

(!data.type||!data.starttime||!data.endtime||!data.ptotal||!data.regTime||!data.title||!data.roomnum||!data.manager||!data.badget){alert(数据提交异常1);flag1;}})if

(flag1){return;}//数据信息进行处理并进行提交subData.forEach((data,index){//对提交数据进行验证:type,starttime,endtime,ptotal,regTime,title,roomnum,manager,badgetdata.regStarttimedata.regTime[0];data.regEndtimedata.regTime[1];if

)string){var

hourAndMinutesSdata.starttime.split(:);data.starttimenew

Date(this.addActiveDate.setHours(parseInt(hourAndMinutesS[0])));data.starttimenew

Date(this.addActiveDate.setMinutes(parseInt(hourAndMinutesS[1])));}if

(typeof(data.endtime

hourAndMinutesEdata.endtime.split(:);data.endtimenew

Date(this.addActiveDate.setHours(hourAndMinutesE[0]));data.endtimenew

Date(this.addActiveDate.setMinutes(hourAndMinutesE[1]));}console.log(处理过后的数据对象,data);console.log(数据index,data);})console.log(this.form.dynamicItem);//

添加的提交createMonthActivities(this.form.dynamicItem).then(response

{this.$modal.msgSuccess(新增成功);this.open

**/changeMonth()

{//上方日期选择器选择了月份后下方日历显示为选中月份this.nowDate

new

Date(this.monthValue);console.log(this.nowDate,this.nowDate);},clickDate(date){//点击某个日期后弹出弹出框this.reset();this.open

true;this.title

添加月度活动;this.addActiveDatedate;},/**

**/addItem(){//

console.log(this.form.dynamicItem);this.form.dynamicItem.push({});},/**

**/delItem(index){this.form.dynamicItem.splice(index,1);}}

/script