网站建设 全包 模板,佛山响应式网站建设,公司网站建设一年多少钱,腾讯云域名注册步骤需求分析#xff1a;点击新增后新增一个月度活动详情#xff0c;提交时可同时提交多个月度活动详情。点击某一个月度活动信息的删除后可删除对应月度活动信息 H5部分#xff1a;
el-dialog :titletitle :visible.syncopen append-to-body点击新增后新增一个月度活动详情提交时可同时提交多个月度活动详情。点击某一个月度活动信息的删除后可删除对应月度活动信息 H5部分
el-dialog :titletitle :visible.syncopen append-to-bodyel-form refform :modelform label-width80pxel-button clickaddItem typeprimary增加/el-buttondiv v-for(item, index) in form.dynamicItem :keyindex stylebackground-color:#f2f5f9;margin: 10px; el-form :modelform.dynamicItem[index] :rulesrules label-width120px!-- 动态产生重复表单项 --el-rowel-col :span8el-form-item label活动类型 proptype el-select v-modelitem.type placeholder请选择活动类型el-option v-fordict in activeType:keydict.value :labeldict.label :valueparseInt(dict.value) /el-option/el-select/el-form-item/el-colel-col :span16el-form-item label活动开始时间 propstarttimeel-time-pickerv-modelitem.starttimeformat HH:mmvalue-format HH:mmplaceholder活动开始时间stylewidth: 30%/el-time-picker至el-time-pickerstylewidth: 30%v-modelitem.endtimeformat HH:mmvalue-format HH:mmplaceholder活动结束时间/el-time-picker/el-form-item/el-col/el-rowel-rowel-col :span8el-form-item label活动人数 propptotalel-select v-modelitem.ptotal placeholder请选择活动人数el-option v-fordict in activePtotal:keydict.value :labeldict.label :valueparseInt(dict.value) //el-select/el-form-item/el-colel-col :span16el-form-item label报名开始时间 propregTimeel-date-pickerv-modelitem.regTimetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker/el-form-item/el-col/el-rowel-form-item label活动题目 proptitleel-input v-modelitem.title placeholder请输入活动题目 //el-form-itemel-rowel-col :span8el-form-item label活动场景 propsceneel-radio-group v-modelitem.sceneel-radio :key3 :label1室内/el-radioel-radio :key4 :label2室外/el-radio/el-radio-group/el-form-item/el-colel-col :span8el-form-item label活动室名称 proproomnumel-select v-modelitem.roomnum placeholder请选择活动室名称el-option label请选择字典生成 value1 //el-select/el-form-item/el-colel-col :span8el-form-item label活动预算 propbadgetel-input v-modelitem.badget placeholder请输入活动预算 //el-form-item/el-col/el-rowel-row el-col :span8el-form-item label活动主管 propmanagerel-input v-modelitem.manager placeholder请输入活动主管 //el-form-item/el-colel-col :span16el-form-item label协助人员 propassistantel-input v-modelitem.assistant placeholder请输入协助人员 //el-form-item/el-colel-button clickdelItem(index) typedanger stylefloat: right;删除/el-button/el-row/el-form/div/el-formdiv slotfooter classdialog-footerel-button typeprimary clicksubmitForm确 定/el-buttonel-button clickcancel取 消/el-button/div/el-dialog抽取H5部分的主要框架 el-dialog :titletitle :visible.syncopen append-to-bodyel-form refform :modelform label-width80pxel-button clickaddItem typeprimary增加/el-button!-- 动态产生重复表单项 --div v-for(item, index) in form.dynamicItem :keyindex stylebackground-color:#f2f5f9;margin: 10px; el-form :modelform.dynamicItem[index] :rulesrules label-width120pxel-rowel-col :span8el-form-item label活动类型 proptype 表单项1/el-form-item/el-colel-col :span16el-form-item label活动开始时间 propstarttime表单项2/el-form-item/el-colel-button clickdelItem(index) typedanger stylefloat: right;删除/el-button/el-row/el-form/div/el-formdiv slotfooter classdialog-footerel-button typeprimary clicksubmitForm确 定/el-buttonel-button clickcancel取 消/el-button/div/el-dialogjs部分 /** 点击新增后增加新的项目 **/addItem(){// console.log(this.form.dynamicItem);this.form.dynamicItem.push({});},/** 点击按钮删除动态添加的表单 **/delItem(index){this.form.dynamicItem.splice(index,1);}页面中form数据对象声明
// 表单参数form: {dynamicItem: []},表单验证
// 表单校验rules: {type: [{ required: true, message: 活动类型不能为空, trigger: change }],starttime: [{ required: true, message: 活动开始时间不能为空, trigger: blur }],endtime: [{ required: true, message: 活动结束时间不能为空, trigger: blur }],ptotal: [{ required: true, message: 活动人数不能为空, trigger: change }],regTime: [{ required: true, message: 报名时间不能为空, trigger: blur }],title: [{ required: true, message: 活动题目不能为空, trigger: blur }],roomnum: [{ required: true, message: 活动室名称不能为空, trigger: change }],badget: [{ required: true, message: 活动预算不能为空, trigger: blur }],manager: [{ required: true, message: 活动主管不能为空, trigger: blur }],}export default {name: Month,components: {Form},data() {return {// 表单参数form: {dynamicItem: []},// 表单校验rules: {type: [{ required: true, message: 活动类型不能为空, trigger: change }],starttime: [{ required: true, message: 活动开始时间不能为空, trigger: blur }],endtime: [{ required: true, message: 活动结束时间不能为空, trigger: blur }],ptotal: [{ required: true, message: 活动人数不能为空, trigger: change }],regTime: [{ required: true, message: 报名时间不能为空, trigger: blur }],title: [{ required: true, message: 活动题目不能为空, trigger: blur }],roomnum: [{ required: true, message: 活动室名称不能为空, trigger: change }],badget: [{ required: true, message: 活动预算不能为空, trigger: blur }],manager: [{ required: true, message: 活动主管不能为空, trigger: blur }],}};},
};完整demo
templatediv classapp-containerel-date-pickerv-modelmonthValuetypemonthstylewidth: 120pxvalue-formatyyyy-MMformatyyyy-MMplaceholder选择月changechangeMonth/el-date-pickerel-calendar v-modelnowDate templateslotdateCellslot-scope{date, data}p :classdata.isSelected ? is-selected : stylewidth: 100%;height: 100%; clickclickDate(date){{ data.day.split(-).slice(1).join(月)日}} {{ data.isSelected ? ✔️ : }}/p/template/el-calendar!-- 对话框(添加 / 修改) --el-dialog :titletitle :visible.syncopen append-to-bodyel-form refform :modelform label-width80pxel-button clickaddItem typeprimary增加/el-buttondiv v-for(item, index) in form.dynamicItem :keyindex stylebackground-color:#f2f5f9;margin: 10px; el-form :modelform.dynamicItem[index] :rulesrules label-width120px!-- 动态产生重复表单项 --el-rowel-col :span8el-form-item label活动类型 proptype el-select v-modelitem.type placeholder请选择活动类型el-option v-fordict in activeType:keydict.value :labeldict.label :valueparseInt(dict.value) /el-option/el-select/el-form-item/el-colel-col :span16el-form-item label活动开始时间 propstarttimeel-time-pickerv-modelitem.starttimeformat HH:mmvalue-format HH:mmplaceholder活动开始时间stylewidth: 30%/el-time-picker至el-time-pickerstylewidth: 30%v-modelitem.endtimeformat HH:mmvalue-format HH:mmplaceholder活动结束时间/el-time-picker/el-form-item/el-col/el-rowel-rowel-col :span8el-form-item label活动人数 propptotalel-select v-modelitem.ptotal placeholder请选择活动人数el-option v-fordict in activePtotal:keydict.value :labeldict.label :valueparseInt(dict.value) //el-select/el-form-item/el-colel-col :span16el-form-item label报名开始时间 propregTimeel-date-pickerv-modelitem.regTimetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker/el-form-item/el-col/el-rowel-form-item label活动题目 proptitleel-input v-modelitem.title placeholder请输入活动题目 //el-form-itemel-rowel-col :span8el-form-item label活动场景 propsceneel-radio-group v-modelitem.sceneel-radio :key3 :label1室内/el-radioel-radio :key4 :label2室外/el-radio/el-radio-group/el-form-item/el-colel-col :span8el-form-item label活动室名称 proproomnumel-select v-modelitem.roomnum placeholder请选择活动室名称el-option label请选择字典生成 value1 //el-select/el-form-item/el-colel-col :span8el-form-item label活动预算 propbadgetel-input v-modelitem.badget placeholder请输入活动预算 //el-form-item/el-col/el-rowel-row el-col :span8el-form-item label活动主管 propmanagerel-input v-modelitem.manager placeholder请输入活动主管 //el-form-item/el-colel-col :span16el-form-item label协助人员 propassistantel-input v-modelitem.assistant placeholder请输入协助人员 //el-form-item/el-colel-button clickdelItem(index) typedanger stylefloat: right;删除/el-button/el-row/el-form/div/el-formdiv slotfooter classdialog-footerel-button typeprimary clicksubmitForm确 定/el-buttonel-button clickcancel取 消/el-button/div/el-dialog/div
/template
style relstylesheet/scss langscss
import ~/assets/styles/month.scss;
/stylescript
import {createMonth,updateMonth,deleteMonth,getMonth,getMonthPage,exportMonthExcel,createMonthActivities
} from /api/activity/month
import {DICT_TYPE, getDictDataLabel, getDictDatas, getDictDatas2} from /utils/dict;
import Form from /views/bpm/formexport default {name: Month,components: {Form},data() {return {//活动类型下拉框获取后端数据activeType:null,//活动人数下拉框获取后端数据activePtotal:null,monthValue:null,nowDate:new Date(),// 遮罩层loading: true,// 导出遮罩层exportLoading: false,// 显示搜索条件showSearch: true,// 总条数total: 0,// 月度活动列表list: [],// 弹出层标题title: ,// 是否显示弹出层open: false,dateRangeTime: [],dateRangeRegTime: [],dateRangeCreateTime: [],//新增活动日期addActiveDate:null,// 查询参数queryParams: {pageNo: 1,pageSize: 10,id: null,type: null,ptotal: null,title: null,scene: null,roomnum: null,badget: null,manager: null,assistant: null,},// 表单参数form: {dynamicItem: []},// 表单校验rules: {type: [{ required: true, message: 活动类型不能为空, trigger: change }],starttime: [{ required: true, message: 活动开始时间不能为空, trigger: blur }],endtime: [{ required: true, message: 活动结束时间不能为空, trigger: blur }],ptotal: [{ required: true, message: 活动人数不能为空, trigger: change }],regTime: [{ required: true, message: 报名时间不能为空, trigger: blur }],title: [{ required: true, message: 活动题目不能为空, trigger: blur }],roomnum: [{ required: true, message: 活动室名称不能为空, trigger: change }],badget: [{ required: true, message: 活动预算不能为空, trigger: blur }],manager: [{ required: true, message: 活动主管不能为空, trigger: blur }],}};},created() {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: {/** 查询列表 */getList() {this.loading true;// 处理查询参数let params {...this.queryParams};this.addBeginAndEndTime(params, this.dateRangeTime, time);this.addBeginAndEndTime(params, this.dateRangeRegTime, regTime);this.addBeginAndEndTime(params, this.dateRangeCreateTime, createTime);// 执行查询getMonthPage(params).then(response {this.list response.data.list;this.total response.data.total;this.loading false;});},/** 取消按钮 */cancel() {this.open false;this.reset();},/** 表单重置 */reset() {this.form.dynamicItem [];this.resetForm(form);},/** 提交按钮 */submitForm() {var flag0;var 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 (typeof(data.starttime )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 )string){var 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 false;this.getList();});},/** 上方月份选择后下方日历的联动 **/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
整体效果及功能 删除某个月度活动
