mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-24 23:04:16 +00:00
comeplted upload china slip frontend
This commit is contained in:
Jack Goh
@@ -195,44 +195,39 @@
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Supplier Form</span>
|
||||
<span>Upload China Bankslip</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row :gutter="12" style="text-align:center">
|
||||
<el-col :span="20" style="text-align:center">
|
||||
|
||||
<el-form ref="supplierBookingForm" :model="supplierBookingForm" :rules="rules">
|
||||
<el-form ref="chinaSlipForm" :model="chinaSlipForm" :rules="rules">
|
||||
<div align="center">
|
||||
|
||||
<!-- upload image -->
|
||||
<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
|
||||
list-type="picture-card" align="center">
|
||||
<i class="el-icon-plus" />
|
||||
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove"
|
||||
:file-list="fileList2" list-type="picture">
|
||||
<el-button size="small" type="primary">Click to upload</el-button>
|
||||
<div slot="tip" class="el-upload__tip">jpg/png files with a size less than 3mb</div>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img :src="dialogImageUrl" width="100%" alt="">
|
||||
</el-dialog>
|
||||
<br>
|
||||
<!-- upload image end -->
|
||||
|
||||
<el-form-item prop="supplier">
|
||||
<el-select prop="supplier" v-model="supplierBookingForm.supplier" placeholder="Choose Supplier">
|
||||
<el-option v-for="item in supplier_options" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-form-item prop="date">
|
||||
<el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item prop="amount">
|
||||
<el-input v-model="chinaSlipForm.amount" type="text" placeholder="Amount" style="width: 80%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="rate">
|
||||
<el-input v-model="supplierBookingForm.rate" type="text" placeholder="Rate" style="width: 80%" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="rebate">
|
||||
<el-input v-model="supplierBookingForm.rebate" type="text" placeholder="Rebate" style="width: 80%" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="transfer_amount">
|
||||
<el-input v-model="supplierBookingForm.transfer_amount" type="text" placeholder="Payment Amount" style="width: 80%" />
|
||||
<el-form-item prop="details">
|
||||
<el-input v-model="chinaSlipForm.details" type="text" placeholder="Details" style="width: 80%" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button :loading="loading_btn" type="primary" @click="generateReport('supplierBookingForm')">Generate Report</el-button>
|
||||
<el-button :loading="loading_btn" type="primary" @click="submitcChinaSlip('chinaSlipForm')">Submit</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@@ -267,36 +262,53 @@
|
||||
},
|
||||
supplier: null,
|
||||
supplier_options: null,
|
||||
supplierBookingForm: {
|
||||
supplier: null,
|
||||
chinaSlipForm: {
|
||||
amount: null,
|
||||
rebate: null,
|
||||
rate: null,
|
||||
transfer_amount: null,
|
||||
date: null,
|
||||
details: null,
|
||||
},
|
||||
value: '',
|
||||
rules: {
|
||||
supplier: [{
|
||||
amount: [{
|
||||
required: true,
|
||||
message: 'Please input amount',
|
||||
trigger: 'change'
|
||||
}],
|
||||
rebate: [{
|
||||
date: [{
|
||||
required: true,
|
||||
message: 'Please input bank name',
|
||||
trigger: 'change'
|
||||
}],
|
||||
rate: [{
|
||||
details: [{
|
||||
required: true,
|
||||
message: 'Please input account name',
|
||||
trigger: 'change'
|
||||
}],
|
||||
payment_amount: [{
|
||||
required: true,
|
||||
message: 'Please input branch',
|
||||
trigger: 'change'
|
||||
}]
|
||||
},
|
||||
pickerOptions1: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
@@ -335,7 +347,7 @@
|
||||
|
||||
},
|
||||
methods: {
|
||||
generateReport(formName) {
|
||||
submitcChinaSlip(formName) {
|
||||
this.loading_btn = true
|
||||
|
||||
this.$refs[formName].validate((valid) => {
|
||||
@@ -350,23 +362,25 @@
|
||||
}
|
||||
|
||||
axios.post('/api/supplier-booking', newReport)
|
||||
.then((response) => {
|
||||
this.loading_btn = false
|
||||
|
||||
this.$router.push({
|
||||
name: 'booking.admin.supplier.report',
|
||||
params: {id: this.$route.params.id }
|
||||
.then((response) => {
|
||||
this.loading_btn = false
|
||||
|
||||
this.$router.push({
|
||||
name: 'booking.admin.supplier.report',
|
||||
params: {
|
||||
id: this.$route.params.id
|
||||
}
|
||||
})
|
||||
// redirect to supplier report
|
||||
|
||||
})
|
||||
// redirect to supplier report
|
||||
.catch((error) => {
|
||||
this.loading_btn = false
|
||||
console.log(error)
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading_btn = false
|
||||
console.log(error)
|
||||
// TODO : Show error message
|
||||
|
||||
// TODO : Show error message
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
} else {
|
||||
this.loading_btn = false
|
||||
@@ -374,6 +388,12 @@
|
||||
})
|
||||
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user