Merge branch 'too/chinabanksetting' into 'master'

done integrate for cief bank setting page

See merge request CIEFWorldwideSdnBhd/exchange!58
This commit is contained in:
Jack Goh
2018-07-05 03:05:56 +00:00
2 changed files with 273 additions and 123 deletions
@@ -1,115 +1,263 @@
<template>
<div>
<span align="center"><h4>CIEF China Bank Details</h4></span><br>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="comp_name" label="Company Name" width="90px"></el-table-column>
<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
<el-table-column prop="bank_acc_no" label="Bank Account No" width="115px"></el-table-column>
<el-table-column prop="bank_address" label="Bank Address" width="111px"></el-table-column>
<el-table-column prop="swift_code" label="SWIFT Code"></el-table-column>
<el-table-column prop="cnap" label="CNAP" width="80px"></el-table-column>
<el-table-column prop="bank_branch" label="Bank Branch"></el-table-column>
<el-table-column label="Action">
<template slot-scope="scope">
<el-button type="text" size="small" @click="EditDatadialogVisible = true">Edit</el-button>
<el-button type="text" size="small" @click="DeleteAdddialogVisible = true">Delete</el-button>
</template>
</el-table-column>
</el-table><br>
<div align="right">
<el-button type="primary" icon="el-icon-plus" @click="AddDatadialogVisible = true">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 :label-position="right" label-width="150px">
<el-form-item label="Company Name"><el-input></el-input></el-form-item>
<el-form-item label="Bank Name"><el-input></el-input></el-form-item>
<el-form-item label="Bank Account No"><el-input></el-input></el-form-item>
<el-form-item label="Bank Address"><el-input></el-input></el-form-item>
<el-form-item label="SWIFT Code"><el-input></el-input></el-form-item>
<el-form-item label="CNAP"><el-input></el-input></el-form-item>
<el-form-item label="Bank Branch"><el-input></el-input></el-form-item>
</el-form>
<div align="center">
<el-button @click="AddDatadialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="AddDatadialogVisible = false; DoneAddDatadialogVisible = true">OK</el-button>
</div>
<span slot="footer" class="dialog-footer">
* Please key in the data in Chinese
</span>
</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 :label-position="right" label-width="150px">
<el-form-item label="Company Name"><el-input></el-input></el-form-item>
<el-form-item label="Bank Name"><el-input></el-input></el-form-item>
<el-form-item label="Bank Account No"><el-input></el-input></el-form-item>
<el-form-item label="Bank Address"><el-input></el-input></el-form-item>
<el-form-item label="SWIFT Code"><el-input></el-input></el-form-item>
<el-form-item label="CNAP"><el-input></el-input></el-form-item>
<el-form-item label="Bank Branch"><el-input></el-input></el-form-item>
</el-form>
<div align="center">
<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="EditDatadialogVisible = false; DoneUpdateDatadialogVisible = true">Submit</el-button>
</div>
<span slot="footer" class="dialog-footer">
* Please key in the data in Chinese
</span>
</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 -->
<span align="center"><h4>CIEF China Bank Details</h4></span><br>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="company_name" label="Company Name" width="90px"></el-table-column>
<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
<el-table-column prop="acc_no" label="Bank Account No" width="115px"></el-table-column>
<el-table-column prop="bank_address" label="Bank Address" width="111px"></el-table-column>
<el-table-column prop="swift" label="SWIFT Code"></el-table-column>
<el-table-column prop="cnap" label="CNAP" width="80px"></el-table-column>
<el-table-column prop="bank_branch" label="Bank Branch"></el-table-column>
<el-table-column label="Action">
<template slot-scope="scope">
<el-button type="text" size="small" @click="PopOutEditBeneficiaries(scope.$index)">Edit</el-button>
<el-button type="text" size="small" @click="DeleteBeneficiaries(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="PopOutAddBeneficiaries">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 label-width="150px">
<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
</el-form-item>
<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
<el-input v-model="beneficiariesForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
</el-form-item>
<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
<el-input v-model="beneficiariesForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
</el-form-item>
<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
</el-form-item>
<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
</el-form-item>
<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
</el-form-item>
<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
</el-form-item>
</el-form>
<div align="center">
<el-button @click="AddDatadialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="CreateBeneficiaries">OK</el-button>
</div>
<span slot="footer" class="dialog-footer">
* Please key in the data in Chinese
</span>
</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 label-width="150px">
<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
</el-form-item>
<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
<el-input v-model="beneficiariesForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
</el-form-item>
<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
<el-input v-model="beneficiariesForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
</el-form-item>
<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
</el-form-item>
<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
</el-form-item>
<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
</el-form-item>
<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
</el-form-item>
</el-form>
<div align="center">
<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="EditBeneficiaries">Submit</el-button>
</div>
<span slot="footer" class="dialog-footer">
* Please key in the data in Chinese
</span>
</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>
<script>
export default {
data() {
return {
tableData: [{
comp_name: 'CIEF Worldwide',
bank_name: 'Myabank',
bank_acc_no: '6725137521',
bank_address: 'Cyberjaya',
swift_code: '2376abc',
cnap: 'ghi123',
bank_branch: 'Klang'
}, {
comp_name: 'DPulze',
bank_name: 'AFFbank',
bank_acc_no: '246891247',
bank_address: 'Putrajaya',
swift_code: 'qwe4567',
cnap: '7890po',
bank_branch: 'Jawa'
}],
chinaBankForm : [],
EditDatadialogVisible: false,
DeleteAdddialogVisible: false,
AddDatadialogVisible: false,
DoneAddDatadialogVisible: false,
DoneUpdateDatadialogVisible: false
}
}
}
</script>
var axios = require('axios');
var client = axios.create({
baseURL: 'http://localhost:8000'
});
export default {
data() {
return {
tableData: [],
beneficiariesForm : {
company_name : '',
bank_name : '',
acc_no : '',
bank_address : '',
swift : '',
cnap : '',
bank_branch : '',
},
EditDatadialogVisible: false,
DeleteAdddialogVisible: false,
AddDatadialogVisible: false,
DoneAddDatadialogVisible: false,
DoneUpdateDatadialogVisible: false,
currentEdit : -1,
}
},
beforeMount(){
this.UpdateTableData();
},
methods: {
CreateBeneficiaries : function(){
this.AddDatadialogVisible = false;
console.log(this.beneficiariesForm);
client.post('api/setting-beneficiary', this.beneficiariesForm)
.then((response) => {
this.DoneAddDatadialogVisible = true;
this.ClearBeneficiariesForm();
this.UpdateTableData();
})
.catch((error) => {
console.log(error);
this.$message({
showClose: true,
message: 'Create Fail',
type: 'error',
duration: 10000
});
this.ClearBeneficiariesForm();
});
},
UpdateTableData : function(){
client.get('api/setting-beneficiary', this.beneficiariesForm)
.then((response) => {
this.tableData = response.data;
})
.catch((error) => {
console.log(error);
this.$message({
showClose: true,
message: 'Fetch data fail',
type: 'error',
duration: 10000
});
})
},
DeleteBeneficiaries : function(beneficiaries_id){
this.DeleteAdddialogVisible = true;
client.delete('api/setting-beneficiary/' + beneficiaries_id)
.then((response) => {
this.UpdateTableData();
})
.catch((error) => {
console.log(error);
this.$message({
showClose: true,
message: 'Delete data fail',
type: 'error',
duration: 10000
});
});
},
EditBeneficiaries : function(){
this.EditDatadialogVisible = false;
this.DoneUpdateDatadialogVisible = true;
client.put('api/setting-beneficiary/' + this.currentEdit, this.beneficiariesForm)
.then((response) => {
this.UpdateTableData();
})
.catch((error) => {
console.log(error);
this.$message({
showClose: true,
message: 'Update Fail',
type: 'error',
duration: 10000
});
});
},
PopOutAddBeneficiaries : function(){
this.AddDatadialogVisible = true;
this.ClearBeneficiariesForm();
},
PopOutEditBeneficiaries : function(tableDataRow){
this.EditDatadialogVisible = true;
this.FillupBeneficiariesForm(tableDataRow);
this.currentEdit = this.tableData[tableDataRow].id;
},
ClearBeneficiariesForm : function(){
this.beneficiariesForm.company_name = '';
this.beneficiariesForm.bank_name = '';
this.beneficiariesForm.acc_no = '';
this.beneficiariesForm.bank_address = '';
this.beneficiariesForm.swift = '';
this.beneficiariesForm.cnap = '';
this.beneficiariesForm.bank_branch = '';
},
FillupBeneficiariesForm : function(tableDataRow){
this.beneficiariesForm.company_name = this.tableData[tableDataRow].company_name;
this.beneficiariesForm.bank_name = this.tableData[tableDataRow].bank_name;
this.beneficiariesForm.acc_no = this.tableData[tableDataRow].acc_no;
this.beneficiariesForm.bank_address = this.tableData[tableDataRow].bank_address;
this.beneficiariesForm.swift = this.tableData[tableDataRow].swift;
this.beneficiariesForm.cnap = this.tableData[tableDataRow].cnap;
this.beneficiariesForm.bank_branch = this.tableData[tableDataRow].bank_branch;
}
}
}
</script>
<style type="text/css">
.error-message{
position: absolute;
left: 0;
}
</style>
@@ -15,7 +15,7 @@
</el-table-column>
</el-table><br>
<div align="right">
<el-button type="primary" icon="el-icon-plus" @click="AddNewSupplierdialogVisible = true">Add New Supplier</el-button>
<el-button type="primary" icon="el-icon-plus" @click="PopOutAddSupplier">Add New Supplier</el-button>
</div>
<!-- popup add new supplier -->
<el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible" width="40%">
@@ -103,7 +103,7 @@
<script>
var axios = require('axios');
var client = axios.create({
baseURL: 'http://localhost:8000'
baseURL: 'http://localhost:8000'
});
export default {
@@ -134,7 +134,7 @@ var client = axios.create({
client.post('api/setting-supplier', this.supplierForm)
.then((response) => {
this.DoneAddSupplierdialogVisible = true;
this.ClearSupplierForm();
this.UpdateTableData();
})
.catch((error) => {
console.log(error);
@@ -144,14 +144,12 @@ var client = axios.create({
type: 'error',
duration: 10000
});
this.ClearSupplierForm();
});
},
UpdateTableData : function(){
client.get('api/setting-supplier', this.supplierForm)
.then((response) => {
this.tableData = response.data;
this.UpdateTableData();
})
.catch((error) => {
console.log(error);
@@ -197,10 +195,14 @@ var client = axios.create({
});
})
},
PopOutEditSupplier : function(supplier_id){
PopOutAddSupplier : function(){
this.AddNewSupplierdialogVisible = true;
this.ClearSupplierForm();
},
PopOutEditSupplier : function(tableDataRow){
this.EditSupplierdialogVisible = true;
this.FillupSupplierForm(supplier_id);
this.currentEdit = this.tableData[supplier_id].id;
this.FillupSupplierForm(tableDataRow);
this.currentEdit = this.tableData[tableDataRow].id;
},
ClearSupplierForm : function(){
this.supplierForm.company_name = '';
@@ -209,12 +211,12 @@ var client = axios.create({
this.supplierForm.bank_name = '';
this.supplierForm.acc_no = '';
},
FillupSupplierForm : function(supplier_id){
this.supplierForm.company_name = this.tableData[supplier_id].company_name;
this.supplierForm.supplier_reg_no = this.tableData[supplier_id].supplier_reg_no;
this.supplierForm.gst_no = this.tableData[supplier_id].gst_no;
this.supplierForm.bank_name = this.tableData[supplier_id].bank_name;
this.supplierForm.acc_no = this.tableData[supplier_id].acc_no;
FillupSupplierForm : function(tableDataRow){
this.supplierForm.company_name = this.tableData[tableDataRow].company_name;
this.supplierForm.supplier_reg_no = this.tableData[tableDataRow].supplier_reg_no;
this.supplierForm.gst_no = this.tableData[tableDataRow].gst_no;
this.supplierForm.bank_name = this.tableData[tableDataRow].bank_name;
this.supplierForm.acc_no = this.tableData[tableDataRow].acc_no;
}
}
}