Question

我正在使用Laravel，vue和momentjs开发一个鸡禽网站。我已经计划好了，但是我不知道如何申请我的网站。

这是is the picture of the modal named 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">&times;</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_cleaning -它会自动显示清洁日期。此文本字段的等式是date_end_raise和9天之和
date_disinfection -它会自动显示消毒日期。此文本字段的等式是date_end_raise和10天的总和。
date_rest_day -它会自动显示休息日期。此文本字段的等式是date_end_raise和20天的总和。
date_preparation -它会自动显示准备日期。此文本字段的等式是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;
}
}

Answer 1

考虑使用计算出的属性：

computed: {
  dateEndRaise: {
    get: function() {
        return moment(this.form.date_start_raise).add(this.form.raising_days, 'days')
    }
  }
}

然后将其用作您的显示值：

:value="dateEndRaise"

然后将该技术重新用于计算日期所需的其他字段。

Laravel，Vue和Momentjs通过在模式中获取数据来添加日期并将其发送到数据库

1 个答案: