我正在使用Laravel、vue和momentjs开发一个肉鸡网站。我心里有我的计划，但我不知道如何申请我的网站。
这是名为cycle_modal的模态的图片。该模式由1个日期选择、2个文本字段和6个禁用文本字段组成。
这是我的模式的代码
<div class="modal fade" tabindex="-1" role="dialog" id="cycle_modal" aria-labelledby="cycle_modal_label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 v-show="editmode" class="modal_title">Update Cycle's Info</h4>
<h4 v-show="!editmode" class="modal_title">Add New Cycle</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<form @submit.prevent="editmode ? updateCycle() :addCycle()">
<div class="modal-body">
<div class="form-group">
<label for="names">Start date of Raising</label>
<picker-wrapper v-model="form.date_start_raise" :isDateDisabled="isFutureDate" name="date_start_raise" class="form-control" placeholder="Select Date" :inputAttributes="{readonly: true}" :class="{'is-invalid': form.errors.has('date_start_raise')}"></picker-wrapper>
<has-error :form="form" field="date_start_raise"></has-error>
</div>
<div class="form-group">
<label for="names">Population</label>
<input v-model="form.population" type="text" name="population" placeholder="Chicken's Population" class="form-control" :class="{'is-invalid': form.errors.has('population')}">
<has-error :form="form" field="population"></has-error>
</div>
<div class="form-group">
<label for="names">Raising Days</label>
<input v-model="form.raising_days" type="text" name="raising_days" placeholder="Number of days" class="form-control" :class="{'is-invalid': form.errors.has('raising_days')}">
<has-error :form="form" field="raising_days"></has-error>
</div>
<div class="form-group">
<label>End Date of Raising</label>
<input v-model="form.date_end_raise" type="text" name="date_end_raise" placeholder="End Date of Raising Chickens" class="form-control" :class="{'is-invalid': form.errors.has('date_end_raise')}" disabled>
<has-error :form="form" field="date_end_raise"></has-error>
</div>
<div class="form-group">
<label> Start of Manure Collection</label>
<input v-model="form.date_manure_collection" type="text" name="date_manure_collection" placeholder="Date for Manure Collection" class="form-control" :class="{'is-invalid': form.errors.has('date_manure_collection')}" disabled>
<has-error :form="form" field="date_manure_collection"></has-error>
</div>
<div class="form-group">
<label> Start of Cleaning</label>
<input v-model="form.date_cleaning" type="text" name="date_cleaning" placeholder="Date for Cleaning" class="form-control" :class="{'is-invalid': form.errors.has('date_cleaning')}" disabled>
<has-error :form="form" field="date_cleaning"></has-error>
</div>
<div class="form-group">
<label> Start of Disinfection</label>
<input v-model="form.date_disinfection" type="text" name="date_disinfection" placeholder="Date for Disinfection" class="form-control" :class="{'is-invalid': form.errors.has('date_disinfection')}" disabled>
<has-error :form="form" field="date_disinfection"></has-error>
</div>
<div class="form-group">
<label> Start of Rest</label>
<input v-model="form.date_rest_day" type="text" name="date_rest_day" placeholder="Date for Rest" class="form-control" :class="{'is-invalid': form.errors.has('date_rest_day')}" disabled>
<has-error :form="form" field="date_rest_day"></has-error>
</div>
<div class="form-group">
<label> Start of Preparation</label>
<input v-model="form.date_preparation" type="text" name="date_preparation" placeholder="Date for Preparation" class="form-control" :class="{'is-invalid': form.errors.has('date_preparation')}" disabled>
<has-error :form="form" field="date_preparation"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button v-show="editmode" type="submit" class="btn btn-primary">Update</button>
<button v-show="!editmode" type="submit" class="btn btn-primary">Add</button>
</div>
</form><!-- /.form -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
此代码显示脚本的内容
<script>
export default {
data(){
return{
editmode: false,
cycles : {},
form: new Form({
id: "",
date_start_raise: '',
population: '',
raising_days: '',
date_end_raise: '',
date_manure_collection:'',
date_cleaning: '',
date_disinfection: '',
date_rest_day: '',
date_preparation: '',
user_id:'',
})
}
},
methods:{
getResults(page = 1) {
axios.get('api/cycle?page=' + page)
.then(response => {
this.cycles = response.data;
});
},
isFutureDate(date_start_raise) {
const currentDate = new Date();
return date_start_raise > currentDate;
},
loadCycles(){
axios.get("api/cycle").then(({ data }) => (this.cycles = data ));
},
editModal(cycle){
this.editmode = true;
this.form.reset();
$('#cycle_modal').modal('show');
this.form.fill(cycle);
},
openModal(){
this.editmode = false;
this.form.reset();
$('#cycle_modal').modal('show');
},
updateCycle(){
this.$Progress.start();
this.form.put('api/cycle/'+this.form.id)
.then(() =>{
// success
$('#cycle_modal').modal('hide');
swal(
'Updated!',
'Information has been updated.',
'success'
)
this.$Progress.finish();
Fire.$emit('AfterCreate');
})
.catch(() =>{
this.$Progress.fail();
swal("Failed!", "There was something wrong.", "warning");
});
},
deleteCycle(id){
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
// Send request to the server
if (result.value) {
this.form.delete('api/cycle/'+id).then(()=>{
swal(
'Deleted!',
'Your data has been deleted.',
'success'
)
Fire.$emit('AfterCreate');
}).catch(()=> {
swal("Failed!", "There was something wrong.", "warning");
});
}
})
},
addCycle(){
this.$Progress.start();
this.form.post('api/cycle')
.then(()=>{
Fire.$emit('AfterCreate');
$('#cycle_modal').modal('hide')
toast({
type: 'success',
title: 'New Cycle added in successfully'
})
this.$Progress.finish();
})
.catch(()=>{
this.$Progress.fail();
swal("Failed!", "There was something wrong.", "warning");
})
}
},
created() {
this.loadCycles();
Fire.$on('AfterCreate',() => {
this.loadCycles();
});
}
}
</script>
这是我对模态内容的计划。
日期选择
- date_start_raise-用户输入开始养鸡的日期
文本字段
- 种群-用户输入鸡的种群
- raising_days-用户输入他/她养鸡的天数
文本字段(禁用(
- date_end_raise-它将自动显示养鸡的结束日期。该文本字段的方程式是date_start_raise和raising_days的总和
- date_manure_collection-它将自动显示粪便收集的日期。此文本字段的方程式是date_end_raise和2天的总和
- 日期清理-它将自动显示清理日期。此文本字段的公式是date_end_raise和9天的总和
- date_disinfection-它将自动显示消毒日期。此文本字段的方程式是date_end_raise和10天的总和
- date_rest_day-它将自动显示休息日期。此文本字段的方程式是date_end_raise和20天的总和
- 日期_修复-它将自动显示准备日期。该文本字段的方程式是date_end_raise和21天的总和
如果用户完成应用他/她的数据，他/她通过单击"添加"按钮提交所有数据，数据将发送到数据库中。
我如何实现我的网站计划(尤其是禁用的文本字段(
这是我使用momentjs的试用代码，但我不知道如何应用，或者这是一个错误的代码
在app.js 中导入momentjs
import moment from 'moment';
脚本代码
methods:{
isEndRaiseDate() {
date_end_raise = moment(date_start_raise).add(raising_days,'day');
return date_end_raise;
},
isManureCollectionDate() {
date_manure_collection = moment(date_end_raise).add(2,'day');
return date_manure_collection;
},
isCleaningDate() {
date_cleaning = moment(date_end_raise).add(9,'day');
return date_cleaning;
},
isDisinfectionDate() {
date_disinfection = moment(date_end_raise).add(10,'day');
return date_disinfection;
},
isRestDate() {
date_rest_day = moment(date_end_raise).add(20,'day');
return date_rest_day;
},
isPreparationDate() {
date_preparation = moment(date_end_raise).add(21,'day');
return date_preparation;
}
}
考虑使用计算属性：
computed: {
dateEndRaise: {
get: function() {
return moment(this.form.date_start_raise).add(this.form.raising_days, 'days')
}
}
}
然后将其用作显示值：
:value="dateEndRaise"
并将该技术用于其他需要计算日期的字段。