add validation for supplier form

This commit is contained in:
Too
2018-07-04 17:27:44 +08:00
parent bfae59bf1e
commit aa7c665d9c
3 changed files with 65 additions and 20 deletions
+1
View File
@@ -27,6 +27,7 @@
"npm": "^6.0.1",
"popper.js": "^1.14.1",
"sweetalert2": "^7.15.1",
"vee-validate": "^2.1.0-beta.5",
"vform": "^1.0.0",
"vue": "^2.5.16",
"vue-axios": "^2.1.1",
@@ -19,34 +19,64 @@
</div>
<!-- popup add new supplier -->
<el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible" width="40%">
<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>
<el-form label-width="150px" >
<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
<el-input v-model="supplierForm.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="Registration No" :class="{'has-error': errors.has('supplier_reg_no') }">
<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('supplier_reg_no')">{{ errors.first('supplier_reg_no') }}<br/></span>
</el-form-item>
<el-form-item label="GST No" :class="{'has-error': errors.has('gst_no') }">
<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
</el-form-item>
<el-form-item label="Bank Name":class="{'has-error': errors.has('bank_name') }">
<el-input v-model="supplierForm.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="Account No":class="{'has-error': errors.has('acc_no') }">
<el-input v-model="supplierForm.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>
<div align="center">
<el-button @click="AddNewSupplierdialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="AddNewSupplierdialogVisible = false; DoneAddSupplierdialogVisible = true">OK</el-button>
<el-button type="primary" @click="CreateSupplier">OK</el-button>
</div>
</el-dialog>
<el-dialog align="center" :visible.sync="DoneAddSupplierdialogVisible" width="30%">
<span>Supplier Added Successfully</span><br><br>
<div align="center">
<el-button type="primary" @click="CreateSupplier">OK</el-button>
<el-button type="primary" @click="DoneAddSupplierdialogVisible = false;">OK</el-button>
</div>
</el-dialog>
<!-- popup add new supplier end -->
<!-- popup edit supplier -->
<el-dialog title="Edit Supplier" align="center" :visible.sync="EditSupplierdialogVisible" width="40%">
<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>
<el-form label-width="150px" >
<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
<el-input v-model="supplierForm.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="Registration No" :class="{'has-error': errors.has('supplier_reg_no') }">
<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('supplier_reg_no')">{{ errors.first('supplier_reg_no') }}<br/></span>
</el-form-item>
<el-form-item label="GST No" :class="{'has-error': errors.has('gst_no') }">
<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
</el-form-item>
<el-form-item label="Bank Name":class="{'has-error': errors.has('bank_name') }">
<el-input v-model="supplierForm.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="Account No":class="{'has-error': errors.has('acc_no') }">
<el-input v-model="supplierForm.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>
<div align="center">
<el-button @click="EditSupplierdialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="EditSupplier">OK</el-button>
@@ -72,6 +102,10 @@
<script>
var client = require('./client');
import Vue from 'vue'
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
export default {
data() {
@@ -97,9 +131,10 @@ var client = require('./client');
},
methods:{
CreateSupplier : function(){
this.DoneAddSupplierdialogVisible = false;
this.AddNewSupplierdialogVisible = false;
client.post('api/setting-supplier', this.supplierForm)
.then((response) => {
this.DoneAddSupplierdialogVisible = true;
this.ClearSupplierForm();
})
.catch((error) => {
@@ -110,7 +145,8 @@ var client = require('./client');
type: 'error',
duration: 10000
});
})
this.ClearSupplierForm();
});
},
UpdateTableData : function(){
client.get('api/setting-supplier', this.supplierForm)
@@ -150,7 +186,6 @@ var client = require('./client');
client.put('api/setting-supplier/' + this.currentEdit, this.supplierForm)
.then((response) => {
this.ClearSupplierForm();
this.UpdateTableData();
})
.catch((error) => {
@@ -162,7 +197,6 @@ var client = require('./client');
duration: 10000
});
})
},
PopOutEditSupplier : function(supplier_id){
this.EditSupplierdialogVisible = true;
@@ -186,3 +220,9 @@ var client = require('./client');
}
}
</script>
<style type="text/css">
.error-message{
position: absolute;
left: 0;
}
</style>
+4
View File
@@ -9792,6 +9792,10 @@ vary@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
vee-validate@^2.1.0-beta.5:
version "2.1.0-beta.5"
resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-2.1.0-beta.5.tgz#311c4629face2383964beb06768b379500f25a69"
vendors@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.2.tgz#7fcb5eef9f5623b156bcea89ec37d63676f21801"