Commit 0e66507b authored by Kittisak Maneewong's avatar Kittisak Maneewong

make picture map

parent ce03f845
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -12,7 +12,10 @@ ...@@ -12,7 +12,10 @@
<input type="file" accept="image/*" class="input-file" ref="inputFile" @change="selectFile"> <input type="file" accept="image/*" class="input-file" ref="inputFile" @change="selectFile">
<v-tooltip right> <v-tooltip right>
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
<img v-on="on" class="img" @click="$refs.inputFile.click()" :src="srcImage" alt="" width="200"> <v-layout column align-center>
<img v-on="on" class="img" @click="$refs.inputFile.click()" :src="srcImage" alt="" width="200">
<v-btn color="error" v-if="srcImage !== 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png'" @click="srcImage = 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png'">ลบรูปภาพ</v-btn>
</v-layout>
</template> </template>
<span>{{ status }}</span> <span>{{ status }}</span>
</v-tooltip> </v-tooltip>
...@@ -131,7 +134,10 @@ ...@@ -131,7 +134,10 @@
<label>รูปภาพแผนที่</label> <label>รูปภาพแผนที่</label>
</v-flex> </v-flex>
<v-flex sm12 xs12> <v-flex sm12 xs12>
<v-btn color="deep-orange darken-4" class="px-2" small outline><v-icon>file_copy</v-icon>&nbsp;เลือกไฟล์</v-btn> <input type="file" accept="image/*" class="input-file" ref="inputFileMap" @change="selectFileMap">
<v-btn color="deep-orange darken-4" class="px-2" small outline @click="$refs.inputFileMap.click()"><v-icon>file_copy</v-icon>&nbsp;เลือกไฟล์</v-btn>
<v-btn color="error" v-if="srcImageMap" @click="srcImageMap = null">ลบรูปภาพ</v-btn>
<img :src="srcImageMap" alt="">
</v-flex> </v-flex>
<v-flex sm12 xs12> <v-flex sm12 xs12>
<v-text-field <v-text-field
...@@ -363,6 +369,7 @@ export default { ...@@ -363,6 +369,7 @@ export default {
return { return {
status: 'ยังไม่ได้เลือกไฟล์', status: 'ยังไม่ได้เลือกไฟล์',
srcImage: 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png', srcImage: 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png',
srcImageMap: null,
rules: { rules: {
required: v => !!v || 'จำเป็นต้องกรอก', required: v => !!v || 'จำเป็นต้องกรอก',
email: v => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(v) || 'รูปแบบอีเมลล์ไม่ถูกต้อง' email: v => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(v) || 'รูปแบบอีเมลล์ไม่ถูกต้อง'
...@@ -477,6 +484,17 @@ export default { ...@@ -477,6 +484,17 @@ export default {
this.srcImage = e.target.result this.srcImage = e.target.result
} }
}, },
selectFileMap (e) {
const file = e.target.files
if (!file.length) {
return
}
const fileReader = new FileReader()
fileReader.readAsDataURL(file[0])
fileReader.onload = e => {
this.srcImageMap = e.target.result
}
},
createJob () { createJob () {
if (this.amphoes.findIndex(x => x.amphoe_code === this.amphoe.amphoe_code) === -1) {this.amphoe = ''} if (this.amphoes.findIndex(x => x.amphoe_code === this.amphoe.amphoe_code) === -1) {this.amphoe = ''}
if (this.tumbons.findIndex(x => x.tumbon_code === this.tumbon.tumbon_code) === -1) {this.tumbon = ''} if (this.tumbons.findIndex(x => x.tumbon_code === this.tumbon.tumbon_code) === -1) {this.tumbon = ''}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment