mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-19 12:24:09 +00:00
Show download button for non-preview able file in the complete page.
This commit is contained in:
@@ -20,8 +20,9 @@
|
||||
</div>
|
||||
<el-row :gutter="12" type="flex">
|
||||
<el-col :span="12">
|
||||
<a target=" _blank" :href="booking_details.user_po_path">
|
||||
<img v-bind:src="booking_details.user_po_path" class="image">
|
||||
<a target="_blank" :href="getURL(booking_details.user_po_path)">
|
||||
<img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -36,8 +37,9 @@
|
||||
</div>
|
||||
<el-row :gutter="12" type="flex">
|
||||
<el-col :span="12">
|
||||
<a target=" _blank" :href="booking_details.china_bankslip_path">
|
||||
<img v-bind:src="booking_details.china_bankslip_path" class="image">
|
||||
<a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
|
||||
<img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -51,8 +53,9 @@
|
||||
</div>
|
||||
<el-row :gutter="12" type="flex">
|
||||
<el-col :span="12">
|
||||
<a target="_blank" :href="booking_details.invoice_path">
|
||||
<img v-bind:src="booking_details.invoice_path" class="image">
|
||||
<a target="_blank" :href="getURL(booking_details.invoice_path)">
|
||||
<img v-if="isImage(booking_details.invoice_path)" v-bind:src="booking_details.invoice_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -264,8 +267,9 @@
|
||||
</div>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="22" style="text-align:center">
|
||||
<a target="_blank" :href="booking_details.user_bankslip_path">
|
||||
<img v-bind:src="booking_details.user_bankslip_path" class="image">
|
||||
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
|
||||
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -326,6 +330,7 @@ export default {
|
||||
.then((response) => {
|
||||
this.booking_details = response.data
|
||||
this.trackerConfig.term = response.data.term;
|
||||
console.log(this.booking_details);
|
||||
loading.close()
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
@@ -336,7 +341,21 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
getExtension(path){
|
||||
return path.slice(-3);
|
||||
},
|
||||
isImage(path){
|
||||
var ext = this.getExtension(path);
|
||||
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
|
||||
},
|
||||
getURL(path){
|
||||
var getUrl = window.location;
|
||||
console.log(getUrl.protocol);
|
||||
console.log(getUrl.host);
|
||||
console.log(getUrl.pathname.split('/')[1]);
|
||||
var baseUrl = getUrl.protocol + "//" + getUrl.host;
|
||||
return baseUrl + path;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -203,8 +203,6 @@
|
||||
|
||||
<el-form ref="supplierBookingForm" :model="supplierBookingForm" :rules="rules">
|
||||
<div align="center">
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
@@ -294,8 +294,8 @@
|
||||
.then((response) => {
|
||||
this.booking_details = response.data;
|
||||
this.trackerConfig.term = response.data.term;
|
||||
console.log(this.booking_details);
|
||||
loading.close()
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
|
||||
@@ -20,8 +20,9 @@
|
||||
</div>
|
||||
<el-row :gutter="12" type="flex">
|
||||
<el-col :span="12">
|
||||
<a target=" _blank" href="#">
|
||||
<img v-bind:src="booking_details.user_po_path" class="image">
|
||||
<a target="_blank" :href="getURL(booking_details.user_po_path)">
|
||||
<img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -36,8 +37,9 @@
|
||||
</div>
|
||||
<el-row :gutter="12" type="flex">
|
||||
<el-col :span="12">
|
||||
<a target=" _blank" href="#">
|
||||
<img v-bind:src="booking_details.china_bankslip_path" class="image">
|
||||
<a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
|
||||
<img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -51,7 +53,10 @@
|
||||
</div>
|
||||
<el-row :gutter="12" type="flex">
|
||||
<el-col :span="12">
|
||||
<img v-bind:src="booking_details.invoice_path" class="image">
|
||||
<a target="_blank" :href="getURL(booking_details.invoice_path)">
|
||||
<img v-if="isImage(booking_details.invoice_path)" v-bind:src="booking_details.invoice_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
@@ -262,7 +267,10 @@
|
||||
</div>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="22" style="text-align:center">
|
||||
<img v-bind:src="booking_details.user_bankslip_path" class="image">
|
||||
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
|
||||
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
@@ -307,7 +315,7 @@ export default {
|
||||
.get('/api/booking/' + this.$route.params.id)
|
||||
.then((response) => {
|
||||
this.booking_details = response.data
|
||||
loading.close()
|
||||
loading.close();
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
@@ -318,7 +326,21 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
getExtension(path){
|
||||
return path.slice(-3);
|
||||
},
|
||||
isImage(path){
|
||||
var ext = this.getExtension(path);
|
||||
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
|
||||
},
|
||||
getURL(path){
|
||||
var getUrl = window.location;
|
||||
console.log(getUrl.protocol);
|
||||
console.log(getUrl.host);
|
||||
console.log(getUrl.pathname.split('/')[1]);
|
||||
var baseUrl = getUrl.protocol + "//" + getUrl.host;
|
||||
return baseUrl + path;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -316,6 +316,7 @@ export default {
|
||||
name: 'notfound'
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
@@ -1,65 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<span align="center"><h4>Marking Setting</h4></span><br>
|
||||
<el-form label-width="150px">
|
||||
<el-form-item label="Marking" :class="{'has-error': errors.has('marking') }">
|
||||
<el-input v-model="markingForm.marking" v-validate="'required|max:255'" name="marking"></el-input>
|
||||
<span class="error-message text-danger" v-if="errors.has('marking')">{{ errors.first('marking') }}<br/></span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Email" :class="{'has-error': errors.has('email') }">
|
||||
<el-input v-model="markingForm.email" v-validate="'required|email|max:255'" name="email"></el-input>
|
||||
<span class="error-message text-danger" v-if="errors.has('email')">{{ errors.first('email') }}<br/></span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<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" :disabled="errors.any() || markingForm.email=='' || markingForm.marking=='' ? true : false">Add New Data</el-button>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="CreateMarking('markingForm')">Add New Data</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading_btn: false,
|
||||
markingForm : {
|
||||
marking : '',
|
||||
email : '',
|
||||
},
|
||||
markingForm: {
|
||||
marking : null,
|
||||
email : null,
|
||||
},
|
||||
rules: {
|
||||
email: [{
|
||||
required: true,
|
||||
message: 'Please input email',
|
||||
trigger: 'change'
|
||||
}],
|
||||
marking: [{
|
||||
required: true,
|
||||
message: 'Please input marking',
|
||||
trigger: 'change'
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
CreateMarking : function(){
|
||||
axios.post('/api/setting-marking', this.markingForm)
|
||||
.then((response) => {
|
||||
this.loading_btn = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Success',
|
||||
type: 'success',
|
||||
duration: 5000
|
||||
});
|
||||
this.ClearMarkingForm();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading_btn = false
|
||||
console.log(error);
|
||||
CreateMarking : function(formName){
|
||||
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
axios.post('/api/setting-marking', this.markingForm)
|
||||
.then((response) => {
|
||||
this.loading_btn = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Success',
|
||||
type: 'success',
|
||||
duration: 5000
|
||||
});
|
||||
this.ClearMarkingForm();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading_btn = false
|
||||
console.log(error);
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Update failed, please contact support',
|
||||
type: 'error',
|
||||
duration: 10000
|
||||
});
|
||||
this.ClearMarkingForm();
|
||||
});
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Update failed, please contact support',
|
||||
message: 'Please fillup form',
|
||||
type: 'error',
|
||||
duration: 10000
|
||||
});
|
||||
this.ClearMarkingForm();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
ClearMarkingForm : function(){
|
||||
this.markingForm.marking = '';
|
||||
this.markingForm.email = '';
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
|
||||
Reference in New Issue
Block a user