需求分析：点击新增后新增一个月度活动详情，提交时可同时提交多个月度活动详情。点击某一个月度活动信息的删除后可删除对应月度活动信息
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" label-width="80px">
<el-button @click="addItem" type="primary">增加</el-button>
<div v-for="(item, index) in form.dynamicItem" :key="index" style="background-color:#f2f5f9;margin: 10px;" >
<el-form :model="form.dynamicItem[index]" :rules="rules" label-width="120px">
<!-- 动态产生重复表单项 -->
<el-row>
<el-col :span="8">
<el-form-item label="活动类型" prop="type" >
<el-select v-model="item.type" placeholder="请选择活动类型">
<el-option v-for="dict in activeType"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" >
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="活动开始时间" prop="starttime">
<el-time-picker
v-model="item.starttime"
format = 'HH:mm'
value-format = 'HH:mm'
placeholder="活动开始时间"
style="width: 30%">
</el-time-picker>
至
<el-time-picker
style="width: 30%"
v-model="item.endtime"
format = 'HH:mm'
value-format = 'HH:mm'
placeholder="活动结束时间">
</el-time-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="活动人数" prop="ptotal">
<el-select v-model="item.ptotal" placeholder="请选择活动人数">
<el-option v-for="dict in activePtotal"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="报名开始时间" prop="regTime">
<el-date-picker
v-model="item.regTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="活动题目" prop="title">
<el-input v-model="item.title" placeholder="请输入活动题目" />
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="活动场景" prop="scene">
<el-radio-group v-model="item.scene">
<el-radio :key="3" :label="1">室内</el-radio>
<el-radio :key="4" :label="2">室外</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="活动室名称" prop="roomnum">
<el-select v-model="item.roomnum" placeholder="请选择活动室名称">
<el-option label="请选择字典生成" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="活动预算" prop="badget">
<el-input v-model="item.badget" placeholder="请输入活动预算" />
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :span="8">
<el-form-item label="活动主管" prop="manager">
<el-input v-model="item.manager" placeholder="请输入活动主管" />
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="协助人员" prop="assistant">
<el-input v-model="item.assistant" placeholder="请输入协助人员" />
</el-form-item>
</el-col>
<el-button @click="delItem(index)" type="danger" style="float: right;">删除</el-button>
</el-row>
</el-form>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" label-width="80px">
<el-button @click="addItem" type="primary">增加</el-button>
<!-- 动态产生重复表单项 -->
<div v-for="(item, index) in form.dynamicItem" :key="index" style="background-color:#f2f5f9;margin: 10px;" >
<el-form :model="form.dynamicItem[index]" :rules="rules" label-width="120px">
<el-row>
<el-col :span="8">
<el-form-item label="活动类型" prop="type" >
表单项1
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="活动开始时间" prop="starttime">
表单项2
</el-form-item>
</el-col>
<el-button @click="delItem(index)" type="danger" style="float: right;">删除</el-button>
</el-row>
</el-form>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
/** 点击新增后增加新的项目 **/
addItem(){
// console.log(this.form.dynamicItem);
this.form.dynamicItem.push({});
},
/** 点击按钮删除动态添加的表单 **/
delItem(index){
this.form.dynamicItem.splice(index,1);
}
// 表单参数
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" }],
}
};
},
};
<template>
<div class="app-container">
<el-date-picker
v-model="monthValue"
type="month"
style="width: 120px"
value-format="yyyy-MM"
format="yyyy-MM"
placeholder="选择月"
@change="changeMonth"
>
</el-date-picker>
<el-calendar v-model="nowDate" >
<template
slot="dateCell"
slot-scope="{date, data}"
>
<p :class="data.isSelected ? 'is-selected' : ''" style="width: 100%;height: 100%;" @click="clickDate(date)">
{{ data.day.split('-').slice(1).join('月')+"日"}} {{ data.isSelected ? '✔️' : ''}}
</p>
</template>
</el-calendar>
<!-- 对话框(添加 / 修改) -->
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" label-width="80px">
<el-button @click="addItem" type="primary">增加</el-button>
<div v-for="(item, index) in form.dynamicItem" :key="index" style="background-color:#f2f5f9;margin: 10px;" >
<el-form :model="form.dynamicItem[index]" :rules="rules" label-width="120px">
<!-- 动态产生重复表单项 -->
<el-row>
<el-col :span="8">
<el-form-item label="活动类型" prop="type" >
<el-select v-model="item.type" placeholder="请选择活动类型">
<el-option v-for="dict in activeType"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" >
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="活动开始时间" prop="starttime">
<el-time-picker
v-model="item.starttime"
format = 'HH:mm'
value-format = 'HH:mm'
placeholder="活动开始时间"
style="width: 30%">
</el-time-picker>
至
<el-time-picker
style="width: 30%"
v-model="item.endtime"
format = 'HH:mm'
value-format = 'HH:mm'
placeholder="活动结束时间">
</el-time-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="活动人数" prop="ptotal">
<el-select v-model="item.ptotal" placeholder="请选择活动人数">
<el-option v-for="dict in activePtotal"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="报名开始时间" prop="regTime">
<el-date-picker
v-model="item.regTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="活动题目" prop="title">
<el-input v-model="item.title" placeholder="请输入活动题目" />
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="活动场景" prop="scene">
<el-radio-group v-model="item.scene">
<el-radio :key="3" :label="1">室内</el-radio>
<el-radio :key="4" :label="2">室外</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="活动室名称" prop="roomnum">
<el-select v-model="item.roomnum" placeholder="请选择活动室名称">
<el-option label="请选择字典生成" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="活动预算" prop="badget">
<el-input v-model="item.badget" placeholder="请输入活动预算" />
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :span="8">
<el-form-item label="活动主管" prop="manager">
<el-input v-model="item.manager" placeholder="请输入活动主管" />
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="协助人员" prop="assistant">
<el-input v-model="item.assistant" placeholder="请输入协助人员" />
</el-form-item>
</el-col>
<el-button @click="delItem(index)" type="danger" style="float: right;">删除</el-button>
</el-row>
</el-form>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<style rel="stylesheet/scss" lang="scss">
@import "~@/assets/styles/month.scss";
</style>
<script>
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/form'
export 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.monthValue=this.nowDate;
this.getList();
//活动类型下拉框获取数据
this.activeType=this.getDictDatas(DICT_TYPE.ACTIVITY_MONTH_TYPE);
//活动人数下拉框获取数据
this.activePtotal=this.getDictDatas(DICT_TYPE.ACTIVITY_MONTH_PTOTAL);
//活动场景单选框数据
// this.activeScene=this.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 flag=0;
var subData=this.form.dynamicItem;
//提交数据验证
subData.forEach((data,index)=>{
//对提交数据进行验证:type,starttime,endtime,ptotal,regTime,title,roomnum,manager,badget
if (!data.type||!data.starttime||!data.endtime||!data.ptotal||!data.regTime||!data.title||!data.roomnum||!data.manager||!data.badget){
alert("数据提交异常1");
flag=1;
}
}
)
if (flag===1){
return;
}
//数据信息进行处理并进行提交
subData.forEach((data,index)=>{
//对提交数据进行验证:type,starttime,endtime,ptotal,regTime,title,roomnum,manager,badget
data.regStarttime=data.regTime[0];
data.regEndtime=data.regTime[1];
if (typeof(data.starttime )=='string'){
var hourAndMinutesS=data.starttime.split(':');
data.starttime=new Date(this.addActiveDate.setHours(parseInt(hourAndMinutesS[0])));
data.starttime=new Date(this.addActiveDate.setMinutes(parseInt(hourAndMinutesS[1])));
}
if (typeof(data.endtime )=='string'){
var hourAndMinutesE=data.endtime.split(':');
data.endtime=new Date(this.addActiveDate.setHours(hourAndMinutesE[0]));
data.endtime=new 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.addActiveDate=date;
},
/** 点击新增后增加新的项目 **/
addItem(){
// console.log(this.form.dynamicItem);
this.form.dynamicItem.push({});
},
/** 点击按钮删除动态添加的表单 **/
delItem(index){
this.form.dynamicItem.splice(index,1);
}
}
};
</script>
删除某个月度活动：
我正在使用i18n从头开始构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在rubyonrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi
当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..
我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss
我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以
我有一些非常大的模型，我必须将它们迁移到最新版本的Rails。这些模型有相当多的验证(User有大约50个验证)。是否可以将所有这些验证移动到另一个文件中？说app/models/validations/user_validations.rb。如果可以，有人可以提供示例吗？ 最佳答案 您可以为此使用关注点:#app/models/validations/user_validations.rbrequire'active_support/concern'moduleUserValidationsextendActiveSupport:
当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested