cief/exchange
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git synced 2026-08-30 09:44:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add CRUD for marking setting

Browse Source
This commit is contained in:
weiweitoo
2018-07-20 00:58:47 +08:00
parent d97d7f4cb4
commit 34bc7a43c6
2 changed files with 151 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/pages/settings/admin-marking-setting.vue
+148 -21
View File
@@ -1,20 +1,75 @@
<template>
<div>
<span align="center"><h4>Marking Setting</h4></span><br>
<el-form ref="markingForm" :model="markingForm" :rules="rules">
<div align="right">
<el-form-item label="Marking" prop="marking">
<el-input v-model="markingForm.marking" type="text" style="width: 80%" />
</el-form-item>
<el-form-item label="Email" prop="email">
<el-input v-model="markingForm.email" type="text" style="width: 80%" />
</el-form-item>
</div>
</el-form>
<div align="right">
<el-button type="primary" icon="el-icon-plus" @click="CreateMarking('markingForm')">Add New Data</el-button>
</div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="marking" label="Marking" width="120px"></el-table-column>
<el-table-column prop="email" label="Email"></el-table-column>
<el-table-column label="Action">
<template slot-scope="scope">
<el-button type="text" size="small" @click="PopOutEditMarking(scope.$index)">Edit</el-button>
<el-button type="text" size="small" @click="DeleteMarking(tableData[scope.$index].id)">Delete</el-button>
</template>
</el-table-column>
</el-table><br>
<div align="right">
<el-button type="primary" icon="el-icon-plus" @click="PopOutAddMarking">Add New Data</el-button>
</div>
<!-- popup add new data -->
<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
<el-form ref="markingForm" :model="markingForm" :rules="rules">
<div align="right">
<el-form-item label="Marking" prop="marking">
<el-input v-model="markingForm.marking" type="text" style="width: 80%" />
</el-form-item>
<el-form-item label="Email" prop="email">
<el-input v-model="markingForm.email" type="text" style="width: 80%" />
</el-form-item>
</div>
</el-form>
<div align="right">
<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
<el-button type="primary" icon="el-icon-plus" @click="CreateMarking('markingForm')">Add New Data</el-button>
</div>
</el-dialog>
<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
<span>Data Added Successfully</span><br><br>
<div align="center">
<el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
</div>
</el-dialog>
<!-- popup add new data end -->
<!-- popup edit data -->
<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
<el-form ref="markingForm" :model="markingForm" :rules="rules">
<div align="right">
<el-form-item label="Marking" prop="marking">
<el-input v-model="markingForm.marking" type="text" style="width: 80%" />
</el-form-item>
<el-form-item label="Email" prop="email">
<el-input v-model="markingForm.email" type="text" style="width: 80%" />
</el-form-item>
</div>
</el-form>
<div align="right">
<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
<el-button type="primary" icon="el-icon-plus" @click="EditMarking">Submit</el-button>
</div>
</el-dialog>
<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
<span>Data Updated Successfully</span><br><br>
<div align="center">
<el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
</div>
</el-dialog>
<!-- popup edit data end -->
<!-- popup delete -->
<el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
<span>Data Deleted</span><br><br>
<div align="center">
<el-button type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
</div>
</el-dialog>
<!-- popup delete end -->
</div>
</template>
@@ -40,11 +95,21 @@
trigger: 'change'
}]
},
tableData: [],
EditDatadialogVisible: false,
DeleteAdddialogVisible: false,
AddDatadialogVisible: false,
DoneAddDatadialogVisible: false,
DoneUpdateDatadialogVisible: false,
currentEdit : -1,
}
},
mounted(){
this.UpdateTableData();
},
methods: {
CreateMarking : function(formName){
CreateMarking : function(formName){
this.AddDatadialogVisible = false;
this.$refs[formName].validate((valid) => {
if (valid) {
axios.post('/api/setting-marking', this.markingForm)
@@ -57,6 +122,7 @@
duration: 5000
});
this.ClearMarkingForm();
this.UpdateTableData();
})
.catch((error) => {
this.loading_btn = false
@@ -68,6 +134,7 @@
duration: 10000
});
this.ClearMarkingForm();
this.UpdateTableData();
});
}
else{
@@ -78,16 +145,76 @@
duration: 10000
});
}
});
});
},
ClearMarkingForm : function(){
this.markingForm.marking = '';
this.markingForm.email = '';
},
},
UpdateTableData : function(){
axios.get('/api/setting-marking', this.markingForm)
.then((response) => {
this.tableData = response.data;
})
.catch((error) => {
console.log(error);
this.$message({
showClose: true,
message: 'Fetch data fail',
type: 'error',
duration: 10000
});
})
},
DeleteMarking : function(marking_id){
this.DeleteAdddialogVisible = true;
console.log(marking_id);
axios.delete('/api/setting-marking/' + marking_id)
.then((response) => {
console.log('123fuck');
this.UpdateTableData();
})
.catch((error) => {
console.log(error);
this.$message({
showClose: true,
message: 'Delete data fail',
type: 'error',
duration: 10000
});
});
},
EditMarking : function(){
this.EditDatadialogVisible = false;
this.DoneUpdateDatadialogVisible = true;
axios.put('/api/setting-marking/' + this.currentEdit, this.markingForm)
.then((response) => {
this.UpdateTableData();
})
.catch((error) => {
console.log(error);
this.$message({
showClose: true,
message: 'Update Fail',
type: 'error',
duration: 10000
});
});
},
PopOutAddMarking : function(){
this.AddDatadialogVisible = true;
this.ClearMarkingForm();
},
PopOutEditMarking : function(tableDataRow){
this.EditDatadialogVisible = true;
this.FillupMarkingForm(tableDataRow);
this.currentEdit = this.tableData[tableDataRow].id;
},
FillupMarkingForm : function(tableDataRow){
this.markingForm.marking = this.tableData[tableDataRow].marking;
this.markingForm.email = this.tableData[tableDataRow].email;
}
},
}
</script>
<style type="text/css">
routes/api.php
+3 -3
View File
@@ -93,9 +93,9 @@ Route::group(['middleware' => ['role:admin']], function() {
Route::get('setting-marking', 'MarkingController@index');
Route::post('setting-marking', 'MarkingController@store');
Route::get('setting-marking/{beneficiary}', 'MarkingController@show');
Route::put('setting-marking/{beneficiary}', 'MarkingController@update');
Route::delete('setting-marking/{beneficiary}', 'MarkingController@delete');
Route::get('setting-marking/{marking}', 'MarkingController@show');
Route::put('setting-marking/{marking}', 'MarkingController@update');
Route::delete('setting-marking/{marking}', 'MarkingController@delete');
Route::get('supplier-booking', 'BookingSupplierController@index');
Route::get('supplier-booking/{id}', 'BookingSupplierController@show');