ConfigCompany.vue

<template>
    <div>
        <v-layout row wrap class=" pa-0 my-3">
            <v-flex xs12 sm12 class="pa-3 font-weight-bold title">
                <v-icon color="black">business</v-icon> ข้อมูลบริษัท
                <v-divider></v-divider>
            </v-flex>
            <v-form enctype="multipart/form-data" @submit.prevent="configCompany()" ref="create">
                <v-flex sm12 xs12>
                    <v-layout row wrap class="ป pa-3">                           
                        <v-flex sm4 xs12 class="px-3">
                            <v-layout align-center justify-center fill-height>
                                <input type="file" accept="image/*" class="input-file" ref="inputFile" @change="selectFile">
                                <v-tooltip right>
                                    <template v-slot:activator="{ on }">
                                        <v-layout column align-center>
                                            <img v-on="on" class="img" @click="$refs.inputFile.click()" :src="company_data.imageCompany" alt="" width="200">
                                            <v-btn color="error" v-if="company_data.imageCompany !== 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png'" @click="company_data.imageCompany = 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png';status = 'ยังไม่ได้เลือกไฟล์'">ลบรูปภาพ</v-btn>
                                        </v-layout>
                                    </template>
                                    <span>{{ status }}</span>
                                </v-tooltip>
                            </v-layout>
                        </v-flex>
                        <v-flex sm4 xs12 class="px-3">
                            <label class="font-weight-bold">ชื่อบริษัท <span class="red--text">&nbsp;*</span></label>
                            <v-text-field
                                readonly
                                outline
                                label="ชื่อบริษัท"
                                :rules="[rules.required]"
                                v-model="company_data.company_name"
                                class="my-ip"
                            ></v-text-field>
                            <label class="font-weight-bold">ชื่อผู้ติดต่อ <span class="red--text">&nbsp;*</span></label>
                            <v-text-field
                                outline
                                label="ชื่อผู้ติดต่อ"
                                v-model="company_data.company_owner"
                                :rules="[rules.required]"
                                class="my-ip"
                            ></v-text-field>
                            <label class="font-weight-bold">เบอร์ผู้ติดต่อ <span class="red--text">&nbsp;*</span></label>
                            <v-text-field
                                outline
                                label="เบอร์ผู้ติดต่อ"
                                v-model="company_data.phone_no"
                                :rules="[rules.required]"
                                class="my-ip"
                            ></v-text-field>
                        </v-flex>
                        <v-flex sm4 xs12 class="px-3">                        
                            <label class="font-weight-bold">อีเมล <span class="red--text">&nbsp;*</span></label>
                            <v-text-field
                                readonly
                                outline
                                label="อีเมล"
                                v-model="company_data.email"
                                :rules="[rules.required, rules.email]"
                                class="my-ip"
                            ></v-text-field>
                            <label class="font-weight-bold">Fax <span class="red--text"></span></label>
                            <v-text-field
                                outline
                                label="Fax"
                                class="my-ip"
                                v-model="company_data.fax"
                            ></v-text-field>
                            <label class="font-weight-bold">เว็บไซต์ <span class="red--text"></span></label>
                            <v-text-field
                                outline
                                label="เว็บไซต์"
                                class="my-ip"
                                v-model="company_data.website"
                            ></v-text-field>
                        </v-flex>
                    </v-layout>
                </v-flex>
                <v-flex sm12>
                    <v-flex sm12 xs12 class="pa-3">
                            <h2 class="font-weight-bold subheading"><span class="red--text">&nbsp;ข้อมูลสำหรับติดต่อ</span></h2>
                    </v-flex>
                    <v-layout row wrap class="pa-3">  
                        <v-flex sm6 xs12 class="px-3">
                            <label class="font-weight-bold">ที่อยู่ <span class="red--text">&nbsp;*</span></label>
                            <v-textarea
                                outline
                                label="ที่อยู่"
                                :rules="[rules.required]"
                                v-model="company_data.addr"
                                class="my-1"
                            ></v-textarea>
                            <label class="font-weight-bold">จังหวัด <span class="red--text">&nbsp;*</span></label>
                            <v-select
                                :items="provinces"
                                item-text="province"
                                v-model="province"
                                label="เลือกจังหวัด"
                                :rules="[rules.required]"
                                return-object
                                @change="showAmphoes()"
                            ></v-select>

                            <label class="font-weight-bold">เขต/อำเภอ <span class="red--text">&nbsp;*</span></label>
                            <v-select
                                :items="amphoes"
                                item-text="amphoe"
                                label="เลือกเขต/อำเภอ"
                                return-object
                                v-model="amphoe"
                                no-data-text="กรุณาเลือกจังหวัด"
                                :disabled="!openAmphoe"
                                :rules="[rules.required]"
                                @change="showTumbons()"
                            ></v-select>
                            <label class="font-weight-bold">เกี่ยวกับบริษัท</label>
                            <v-textarea
                                outline
                                label="เกี่ยวกับบริษัท"
                                class="my-1"
                                v-model="company_data.about"
                            ></v-textarea>
                        </v-flex>
                        <v-flex sm6 xs12 class="px-3">
                            <label class="font-weight-bold">แขวง/ตำบล<span class="red--text">&nbsp;*</span></label>
                            <v-select
                                :items="tumbons"
                                item-text="tumbon"
                                return-object
                                v-model="tumbon"
                                no-data-text="กรุณาเลือกอำเภอ"
                                :rules="[rules.required]"
                                :disabled="!openTumbon"
                                label="เลือกแขวง/ตำบล"
                                @change = "showDetail()"
                            ></v-select>
                            <label class="font-weight-bold">รหัสไปรษณีย์<span class="red--text">&nbsp;*</span></label>
                            <v-text-field
                                :disabled="!openZipCode"
                                label="รหัสไปรษณีย์"
                                v-model="company_data.zip_code"
                                :rules="[rules.required]"
                                class="my-ip"
                            ></v-text-field>
                            <label class="font-weight-bold">แผนที่บริษัท</label>
                            <v-layout row wrap class="pa-2">
                                <v-flex sm12 xs12>
                                    <label>รูปภาพแผนที่</label>
                                </v-flex>                           
                                <v-flex sm12 xs12>
                                    <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>
                                    {{ nameImage }}
                                    <v-btn v-if="nameImage" flat icon color="error" @click="nameImage = null; company_data.imageMap = null">
                                        <v-icon>close</v-icon>
                                    </v-btn>
                                </v-flex>                       
                                <v-flex sm12 xs12>
                                    <GmapAutocomplete class="form-control form-control-sm my-1" placeholder="ป้อนตำแหน่งใกล้เคียง" @place_changed="setPlace">
                                    </GmapAutocomplete>
                                </v-flex>                       
                                <v-flex sm12 xs12>
                                    <GmapMap v-if="this.place" style="width: 100%; height: 200px;" :zoom="15" :center="{lat: company_data.lat, lng: company_data.lng}">
                                        <GmapMarker
                                            :position="{lat: company_data.lat, lng: company_data.lng}"
                                            :draggable="true"
                                            @dragend="dragMarker"
                                        />
                                    </GmapMap>
                                </v-flex>
                                <v-flex sm12 xs12>
                                    <p class="text-xs-center" v-if="this.place"><v-btn color="error" @click="place = null;company_data.lat = null;company_data.lng = null">
                                        ลบเเผนที่
                                    </v-btn></p>
                                </v-flex>                          
                            </v-layout>
                            
                        </v-flex>
                    </v-layout>
                    <v-layout row wrap class="borderbottom pa-3"> 
                        <v-flex sm12>
                            <h2 class="font-weight-bold subheading"><span class="red--text">&nbsp;การเดินทาง</span></h2>
                        </v-flex>
                        
                        <v-flex sm3 xs12 class="px-3">
                            <label class="font-weight-bold my-2">ใกล้ BTS</label>
                            <v-select
                                label="เลือก"
                                :items="bts"
                                v-model="company_data.bts"
                            ></v-select>
                        </v-flex>
                        <v-flex sm3 xs12 class="px-3">
                            <label class="font-weight-bold">ใกล้ MRT</label>
                            <v-select
                                label="เลือก"
                                :items="mrt"
                                v-model="company_data.mrt"
                            ></v-select>
                        </v-flex>
                        <v-flex sm3 xs12 class="px-3">
                            <label class="font-weight-bold">ใกล้ ARL</label>
                            <v-select
                                label="เลือก"
                                :items="arl"
                                v-model="company_data.arl"
                            ></v-select>
                        </v-flex>
                        <v-flex sm3 xs12 class="px-3">
                            <label class="font-weight-bold">สายรถเมล์</label>
                            <VTextField
                                label="สายรถเมล์"
                                v-model="company_data.bus"
                            ></VTextField>
                        </v-flex>
                        <v-flex sm12 class="px-3">
                            <label class="font-weight-bold">การเดินทางเพิ่มเติม</label>
                        </v-flex>
                        <v-flex sm6 xs12 class="px-3">
                            <v-textarea
                                outline
                                label=""
                                class="my-2"
                                v-model="company_data.another"
                            ></v-textarea>
                        </v-flex>
                        <v-flex sm6 xs12 class="px-3 py-3 detail">
                            <span class="red--text">หมายเหตุ : </span>
                            <span >เพื่อความสะดวกในการเดินทางของผู้สมัครงาน กรุณาระบุสถานีรถไฟฟ้าที่ใกล้กับสถานที่ปฏิบัติงาน (ถ้ามี) หรือระบุสายรถเมล์ที่ผ่านสถานที่ประกอบการ และระบุการเดินทางเพิ่มเติม เพื่อให้เข้าใจในการเดินทางมากยิ่งขึ้น</span>
                        </v-flex>
                        <v-layout row wrap justify-center class="my-2">
                            <v-btn color="red" dark="" type="submit" :loading="loading">บันทึกข้อมูล</v-btn>
                        </v-layout>
                    </v-layout>
                </v-flex>
            </v-form>
        </v-layout>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            status: 'ยังไม่ได้เลือกไฟล์',
            nameImage: null,
            company_data: {
                currentImageCompany: null,
                currentImageMap: null,
                exists: false,
                user_id: null,
                imageCompany: 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png',
                company_name: '',
                company_owner: '',
                phone_no: '',
                email: '',
                fax: '',
                website: '',
                addr: '',
                province: '',
                amphoe: '',
                tumbon: '',
                zip_code: '',
                about: '',
                imageMap: null,
                lat: null,
                lng: null,
                bts: '',
                mrt: '',
                arl: '',
                bus: '',
                another: ''
            },
            rules: {
                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) || 'รูปแบบอีเมลล์ไม่ถูกต้อง'
            },
            timeFrom: null,
            timeTo: null,
            showTimeFrom: false,
            showTimeTo: false,
            provinces: [],
            amphoes: [],
            tumbons: [],
            province: '',
            amphoe: '',
            tumbon: '',
            openAmphoe: false,
            openTumbon: false,
            openZipCode: false,
            bts: [
                'หมอชิต',
                'สะพานควาย',
                'อารีย์',
                'สนามเป้า',
                'อนุสาวรีย์ชัยสมรภูมิ',
                'พญาไท',
                'ราชเทวี',
                'สยาม',
                'ชิดลม',
                'เพลินจิต',
                'นานา',
                'อโศก',
                'พร้อมพงษ์',
                'ทองหล่อ',
                'เอกมัย',
                'พระโขนง',
                'อ่อนนุช',
                'บางจาก',
                'ปุณณวิถี',
                'อุดมสุข',
                'บางนา',
                'สนามกีฬาแห่งชาติ',
                'ราชดำริ',
                'ศาลาแดง',
                'ช่องนนทรี',
                'สุรศักดิ์',
                'สะพานตากสิน',
                'กรุงธนบุรี',
                'วงเวียนใหญ่',
                'โพธิ์นิมิตร',
                'ตลาดพลู',
                'วุฒากาศ',
                'บางหว้า',
                'แบริ่ง'
            ],
            mrt: [
                'หัวลำโพง',
                'สามย่าน',
                'สีลม',
                'ลุมพินี',
                'คลองเตย',
                'ศูนย์การประชุมแห่งชาติสิริกิติ์',
                'สุขุมวิท',
                'เพชรบุรี',
                'พระราม 9',
                'ศูนย์วัฒนธรรมแห่งประเทศไทย',
                'ห้วยขวาง',
                'สุทธิสาร',
                'รัชดาภิเษก',
                'ลาดพร้าว',
                'พหลโยธิน',
                'สวนจตุจักร',
                'กำแพงเพชร',
                'บางซื่อ',
                'เตาปูน',
                'บางซ่อน',
                'วงศสว่าง',
                'แยกติวานนท์',
                'กระทรวงสาธารณะสุข',
                'ศูนย์ราชการนนทบุรี',
                'บางกระสอ',
                'แยกนนทบุรี 1',
                'สะพานพระนั่งเกล้า',
                'ไทรม้า',
                'บางรักน้อยท่าอิฐ',
                'บางรักใหญ่',
                'บางพลู',
                'สามแยกบางใหญ่',
                'ตลาดบางใหญ่',
                'คลองบางไผ่'
            ],
            arl: [
                'สุวรรณภูมิ',
                'ลาดกระบัง',
                'บ้านทับช้าง',
                'หัวหมาก',
                'รามคำแหง',
                'มักกะสัน',
                'ราชปรารภ',
                'พญาไท'
            ],
            place: null
        }
    },
    methods: {
        dragMarker (e) {
            this.company_data.lat = e.latLng.lat()
            this.company_data.lng = e.latLng.lng()
        },
        setPlace(place) {
            this.place = place
            this.company_data.lat = this.place.geometry.location.lat()
            this.company_data.lng = this.place.geometry.location.lng()
        },
        selectFile (e) {
            const file = e.target.files
            this.status = file[0].name
            if (!file.length) {
                return
            }
            const fileReader = new FileReader()
            fileReader.readAsDataURL(file[0])
            fileReader.onload = e => {
                this.company_data.imageCompany = e.target.result
            }
        },
        selectFileMap (e) {
            const file = e.target.files
            this.nameImage = file[0].name
            if (!file.length) {
                return
            }
            const fileReader = new FileReader()
            fileReader.readAsDataURL(file[0])
            fileReader.onload = e => {
                this.company_data.imageMap = e.target.result
            }
        },
        configCompany () {
          this.loading = true
          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.company_data.zip_code === ' ') {this.company_data.zip_code = ''}
          if (this.$refs.create.validate()) {
              this.company_data.province = this.province.province
              this.company_data.amphoe = this.amphoe.amphoe
              this.company_data.tumbon = this.tumbon.tumbon
              if (this.company_data.exists) {
                  axios.put(`/api/companys/${this.company_data.user_id}`, this.company_data)
                    .then(res => {
                        this.$router.push('/employer')
                        this.loading = false
                        console.log(res)
                    })
                    .catch(err => {
                        this.loading = false
                        console.log(err.response)
                    })
              } else {
                  console.log(false)
                axios.post('/api/companys', this.company_data)
                  .then(res => {
                    this.$router.push('/employer')
                    this.loading = false
                    console.log(res)
                  })
                  .catch(err => {
                    console.log(err.response)
                    this.loading = false
                  })
              }
          } else {
              this.$Loading.error()
              this.loading = false
          }
        },
        showProvinces () {
            axios.get('/api/province')
              .then(res => {
                  res.data.forEach(data => {
                      this.provinces.push({
                          province: data.province,
                          province_code: data.province_code
                      })
                  });
              })
              .catch(err => {
                  console.log(err.response)
              })
        },
        showAmphoes () {
            this.amphoes = []
            this.company_data.zip_code = ''
            this.openAmphoe = true
            this.openTumbon = false
            this.openZipCode = false
            axios.get(`/api/province/${this.province.province_code}/amphoe`)
              .then(res => {
                  res.data.forEach(data => {
                      this.amphoes.push({
                          amphoe: data.amphoe,
                          amphoe_code: data.amphoe_code
                      })
                  })
              })
              .catch(err => {
                  console.log(err.response)
              })
        },
        showTumbons () {
            this.tumbons = []
            this.company_data.zip_code = ' '
            this.openTumbon = true
            this.openZipCode = false
            axios.get(`/api/province/${this.province.province_code}/amphoe/${this.amphoe.amphoe_code}/district`)
              .then(res => {
                  res.data.forEach(data => {
                      this.tumbons.push({
                          tumbon: data.district,
                          tumbon_code: data.district_code
                      })
                  })
              })
              .catch(err => {
                  console.log(err.response)
              })
        },
        showDetail () {
            this.openZipCode = true
            axios.get(`/api/province/${this.province.province_code}/amphoe/${this.amphoe.amphoe_code}/district/${this.tumbon.tumbon_code}`)
              .then(res => {
                  this.company_data.zip_code = res.data[0].zipcode
              })
              .catch(err => {
                  console.log(err.resonse)
              })
        }
    },
    mounted() {
      this.showProvinces()
    },
    beforeMount() {
      this.$store.dispatch('checkEmployer')
        .then(res => {
          axios.get(`/api/companys/${res.id}/edit`)
            .then(res => {
                console.log(res)
                const data = res.data.company
                if (res.data.exists) {
                    this.company_data.currentImageCompany = data.imageCompany
                    this.company_data.currentImageMap = data.imageMap
                    this.company_data.exists = res.data.exists
                    this.company_data.about = data.about
                    this.company_data.addr = data.addr
                    this.company_data.another = data.another
                    this.company_data.arl = data.arl
                    this.company_data.bts = data.bts
                    this.company_data.bus = data.bus
                    this.company_data.company_name = data.company_name
                    this.company_data.company_owner = data.company_owner
                    this.company_data.email = data.email
                    this.company_data.fax = data.fax
                    this.company_data.imageCompany = data.imageCompany
                    this.company_data.imageMap = data.imageMap
                    this.company_data.lat = data.lat*1
                    this.company_data.lng = data.long*1
                    this.company_data.mrt = data.mrt
                    this.company_data.phone_no = data.phone_no
                    this.company_data.website = data.website
                    this.company_data.user_id = data.id
                    if (this.company_data.lat) {
                        this.place = '_';
                    }
                    axios.get(`/api/${data.province}/${data.amphoe}/${data.tambon}/${data.zipcode}`)
                      .then(res => {
                        this.province = {
                            province: res.data.addr.province,
                            province_code: res.data.addr.province_code
                        }
                        this.amphoe = {
                            amphoe: res.data.addr.amphoe,
                            amphoe_code: res.data.addr.amphoe_code
                        }
                        this.tumbon = {
                            tumbon: res.data.addr.district,
                            tumbon_code: res.data.addr.district_code
                        }
                        this.showAmphoes()
                        this.showTumbons()
                        this.company_data.zip_code = data.zipcode
                      })
                      .catch(err => {console.log(err.response)})
                } else {
                    this.company_data.company_name = data.company_name
                    this.company_data.email = data.email_employers
                    this.company_data.phone_no = data.tel
                    this.company_data.user_id = data.id
                    this.company_data.exists = res.data.exists
                }
            })
            .catch(err => {console.log(err)})
        })
    }
}
</script>


<style lang="scss" scoped>
    // .my-job{
    //     height: 70px;
    // }
    // .my-ip{
    //     height: 65px;
    // }
    .detail {
        color: #276f86;
        background-color: #f8ffff;
        border:1px solid #a9d5de;
        border-radius: 5px;
        display: inline-block;
        line-height: 26px;
    }
    .borderbottom{
        border-bottom: 1px dotted #dcdcdc ;
    }
    .border-div{
        border:1px solid #dcdcdc;
        border-radius: 5px;
    }
    input {
        overflow: visible;
    }
    .bd-example>.form-control+.form-control {
        margin-top: .5rem;
    }
    .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
        padding-right: 0;
        padding-left: 0;
    }

    .form-control-sm {
        height: calc(1.0em + 0.5rem + 1px);
        padding: 0.15rem 0.5rem;
        font-size: 0.7rem;
        line-height: 1.5;
        border-radius: 0.3rem;
    }
    .form-control {
        display: block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    @media (prefers-reduced-motion: reduce) {
        .form-control {
            transition: none;
        }
    }

    .form-control::-ms-expand {
    background-color: transparent;
    border: 0;
    }

    .form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .form-control::-webkit-input-placeholder {
    color: #6c757d;
    opacity: 1;
    }

    .form-control::-moz-placeholder {
    color: #6c757d;
    opacity: 1;
    }

    .form-control:-ms-input-placeholder {
    color: #6c757d;
    opacity: 1;
    }

    .form-control::-ms-input-placeholder {
    color: #6c757d;
    opacity: 1;
    }

    .form-control::placeholder {
    color: #6c757d;
    opacity: 1;
    }

    .form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
    }

    select.form-control:focus::-ms-value {
    color: #495057;
    background-color: #fff;
    }

    .form-control-file,
    .form-control-range {
    display: block;
    width: 100%;
    }

    .img {
        cursor: pointer;
        border: 1px solid;
    }

    .input-file {
        display: none;
    }
</style>