Show download button for non-preview able file in the complete page.

This commit is contained in:
weiweitoo
2018-07-18 23:53:04 +08:00
parent 4ab9a0a640
commit 6e849b6145
6 changed files with 123 additions and 55 deletions
@@ -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">