integrate edit feature

This commit is contained in:
Too
2018-07-04 16:30:34 +08:00
parent 55455b89d7
commit bfae59bf1e
@@ -8,10 +8,10 @@
<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
<el-table-column prop="acc_no" label="Account No"></el-table-column>
<el-table-column label="Action">
<template slot-scope="scope">
<el-button type="text" size="small" @click="EditSupplierdialogVisible = true">Edit</el-button>
<el-button type="text" size="small" @click="DeleteSupplier(tableData[scope.$index].id)">Delete</el-button>
</template>
<template slot-scope="scope">
<el-button type="text" size="small" @click="PopOutEditSupplier(scope.$index)">Edit</el-button>
<el-button type="text" size="small" @click="DeleteSupplier(tableData[scope.$index].id)">Delete</el-button>
</template>
</el-table-column>
</el-table><br>
<div align="right">
@@ -19,7 +19,7 @@
</div>
<!-- popup add new supplier -->
<el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible" width="40%">
<el-form :label-position="right" label-width="150px">
<el-form label-width="150px">
<el-form-item label="Company Name"><el-input v-model="supplierForm.company_name"></el-input></el-form-item>
<el-form-item label="Registration No"><el-input v-model="supplierForm.supplier_reg_no"></el-input></el-form-item>
<el-form-item label="GST No"><el-input v-model="supplierForm.gst_no"></el-input></el-form-item>
@@ -40,16 +40,16 @@
<!-- popup add new supplier end -->
<!-- popup edit supplier -->
<el-dialog title="Edit Supplier" align="center" :visible.sync="EditSupplierdialogVisible" 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="Registration No"><el-input></el-input></el-form-item>
<el-form-item label="GST No"><el-input></el-input></el-form-item>
<el-form-item label="Bank Name"><el-input></el-input></el-form-item>
<el-form-item label="Account No"><el-input></el-input></el-form-item>
<el-form label-width="150px">
<el-form-item label="Company Name"><el-input v-model="supplierForm.company_name"></el-input></el-form-item>
<el-form-item label="Registration No"><el-input v-model="supplierForm.supplier_reg_no"></el-input></el-form-item>
<el-form-item label="GST No"><el-input v-model="supplierForm.gst_no"></el-input></el-form-item>
<el-form-item label="Bank Name"><el-input v-model="supplierForm.bank_name"></el-input></el-form-item>
<el-form-item label="Account No"><el-input v-model="supplierForm.acc_no"></el-input></el-form-item>
</el-form>
<div align="center">
<el-button @click="EditSupplierdialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="EditSupplierdialogVisible = false; DoneUpdateSupplierdialogVisible = true">OK</el-button>
<el-button type="primary" @click="EditSupplier">OK</el-button>
</div>
</el-dialog>
<el-dialog align="center" :visible.sync="DoneUpdateSupplierdialogVisible" width="30%">
@@ -89,6 +89,7 @@ var client = require('./client');
DoneAddSupplierdialogVisible: false,
DoneUpdateSupplierdialogVisible: false,
DeleteSupplierdialogVisible: false,
currentEdit: -1,
}
},
beforeMount(){
@@ -143,12 +144,44 @@ var client = require('./client');
});
})
},
EditSupplier : function(){
this.EditSupplierdialogVisible = false;
this.DoneUpdateSupplierdialogVisible = true;
client.put('api/setting-supplier/' + this.currentEdit, this.supplierForm)
.then((response) => {
this.ClearSupplierForm();
this.UpdateTableData();
})
.catch((error) => {
console.log(error);
this.$message({
showClose: true,
message: 'Update Fail',
type: 'error',
duration: 10000
});
})
},
PopOutEditSupplier : function(supplier_id){
this.EditSupplierdialogVisible = true;
this.FillupSupplierForm(supplier_id);
this.currentEdit = this.tableData[supplier_id].id;
},
ClearSupplierForm : function(){
supplierForm.company_name = '';
supplierForm.supplier_reg_no = '';
supplierForm.gst_no = '';
supplierForm.bank_name = '';
supplierForm.companacc_noy_name = '';
this.supplierForm.company_name = '';
this.supplierForm.supplier_reg_no = '';
this.supplierForm.gst_no = '';
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;
}
}
}