Commit 51ab882a authored by Kittisak Maneewong's avatar Kittisak Maneewong

update page add job

parent 74c09d6a
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<v-content class="my-0"> <v-content class="my-0">
<v-container fluid white> <v-container fluid white>
<v-layout > <v-layout >
<v-flex xs10 offset-xs1> <v-flex sm10 xs12 offset-sm1>
<v-card flat height="600px"> <v-card flat height="600px">
<router-view></router-view> <router-view></router-view>
</v-card> </v-card>
......
...@@ -4,274 +4,346 @@ ...@@ -4,274 +4,346 @@
<v-flex xs12 sm12 class="pa-3"> <v-flex xs12 sm12 class="pa-3">
<h2 class="font-weight-bold red--text">ข้อมูลบริษัท</h2> <h2 class="font-weight-bold red--text">ข้อมูลบริษัท</h2>
</v-flex> </v-flex>
<form enctype="multipart/form-data" > <v-form enctype="multipart/form-data" @submit.prevent="createJob()" ref="create">
<v-flex sm12 xs12> <v-flex sm12 xs12>
<v-layout row wrap class="borderbottom pa-3"> <v-layout row wrap class="borderbottom pa-3">
<v-flex sm4 xs12 class="px-3"> <v-flex sm4 xs12 class="px-3">
<v-layout align-center justify-center fill-height> <v-layout align-center justify-center fill-height>
<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"> <img v-on="on" class="img" @click="$refs.inputFile.click()" :src="srcImage" alt="" width="200">
</template> </template>
<span>{{ status }}</span> <span>{{ status }}</span>
</v-tooltip> </v-tooltip>
</v-layout> </v-layout>
</v-flex> </v-flex>
<v-flex sm4 xs12 class="px-3"> <v-flex sm4 xs12 class="px-3">
<label class="font-weight-bold">ชื่อบริษัท <span class="red--text">&nbsp;*</span></label> <label class="font-weight-bold">ชื่อบริษัท <span class="red--text">&nbsp;*</span></label>
<v-text-field
outline
label="ชื่อบริษัท"
class="my-ip"
></v-text-field>
<label class="font-weight-bold">ชื่อผู้ติดต่อ <span class="red--text">&nbsp;*</span></label>
<v-text-field
outline
label="ชื่อผู้ติดต่อ"
class="my-ip"
></v-text-field>
<label class="font-weight-bold">เบอร์ผู้ติดต่อ <span class="red--text">&nbsp;*</span></label>
<v-text-field
outline
label="เบอร์ผู้ติดต่อ"
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
outline
label="อีเมล"
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-text-field>
<label class="font-weight-bold">เว็บไซต์ <span class="red--text"></span></label>
<v-text-field
outline
label="เว็บไซต์"
class="my-ip"
></v-text-field>
</v-flex>
</v-layout>
</v-flex>
<v-flex sm12>
<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="ที่อยู่"
rows
class="my-1"
></v-textarea>
<label class="font-weight-bold">จังหวัด <span class="red--text">&nbsp;*</span></label>
<VSelect
:items="items"
label="เลือกจังหวัด"
></VSelect>
<label class="font-weight-bold">เขต/อำเภอ <span class="red--text">&nbsp;*</span></label>
<VSelect
:items="items"
label="เลือกเขต/อำเภอ"
></VSelect>
<label class="font-weight-bold">เกี่ยวกับบริษัท <span class="red--text">&nbsp;*</span></label>
<v-textarea
outline
label="เกี่ยวกับบริษัท"
rows="6"
class="my-1"
></v-textarea>
</v-flex>
<v-flex sm6 xs12 class="px-3">
<label class="font-weight-bold">แขวง/ตำบล<span class="red--text">&nbsp;*</span></label>
<VSelect
:items="items"
label="เลือกแขวง/ตำบล"
></VSelect>
<label class="font-weight-bold">รหัสไปรษณีย์<span class="red--text">&nbsp;*</span></label>
<v-text-field
label="รหัสไปรษณีย์"
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>
<v-btn color="deep-orange darken-4" class="px-2" small outline><v-icon>file_copy</v-icon>&nbsp;เลือกไฟล์</v-btn>
</v-flex>
<v-flex sm12 xs12>
<v-text-field
label="ค้นหาสถานที่"
style="height:50px;"
></v-text-field>
</v-flex>
<v-flex sm12 xs12>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3851.7461712415493!2d104.9009800139957!3d15.117311868259526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x311684db0c98987f%3A0x228caf3246f0fd8e!2z4Lih4Lir4Liy4Lin4Li04LiX4Lii4Liy4Lil4Lix4Lii4Lit4Li44Lia4Lil4Lij4Liy4LiK4LiY4Liy4LiZ4Li1!5e0!3m2!1sth!2sth!4v1555418432669!5m2!1sth!2sth" width="400" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<v-layout row wrap class="borderbottom pa-3">
<v-flex sm12>
<h2 class="font-weight-bold"><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>
<VSelect
:items="items"
label="เลือก"
></VSelect>
</v-flex>
<v-flex sm3 xs12 class="px-3">
<label class="font-weight-bold">ใกล้ MRT</label>
<VSelect
:items="items"
label="เลือก"
></VSelect>
</v-flex>
<v-flex sm3 xs12 class="px-3">
<label class="font-weight-bold">ใกล้ ARL</label>
<VSelect
:items="items"
label="เลือก"
></VSelect>
</v-flex>
<v-flex sm3 xs12 class="px-3">
<label class="font-weight-bold">สายรถเมล์</label>
<VTextField
label="สายรถเมล์"/>
</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=""
rows
class="my-2"
></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>
<v-layout row wrap class="borderbottom">
<v-flex sm6 xs12 class="pa-3">
<h2 class="font-weight-bold my-2"><span class="red--text">&nbsp;รายละเอียดงาน</span></h2>
<v-flex sm12 xs12 class="pa-3">
<label class="font-weight-bold">หัวข้องาน <span class="red--text">&nbsp;*</span></label>
<v-text-field <v-text-field
outline outline
label="หัวข้องาน" label="ชื่อบริษัท"
class="my-job" :rules="[rules.required]"
class="my-ip"
></v-text-field> ></v-text-field>
<label class="font-weight-bold my-2">ประเภทธุรกิจ</label> <label class="font-weight-bold">ชื่อผู้ติดต่อ <span class="red--text">&nbsp;*</span></label>
<VSelect <v-text-field
outline outline
:items="items" label="ชื่อผู้ติดต่อ"
label="เลือก" :rules="[rules.required]"
class="my-job" class="my-ip"
></VSelect> ></v-text-field>
<label class="font-weight-bold my-2">ตำแหน่งงาน</label> <label class="font-weight-bold">เบอร์ผู้ติดต่อ <span class="red--text">&nbsp;*</span></label>
<VSelect <v-text-field
outline outline
:items="items" label="เบอร์ผู้ติดต่อ"
label="เลือก" :rules="[rules.required]"
class="my-job" class="my-ip"
></VSelect> ></v-text-field>
<label class="font-weight-bold my-2">ค่าตอบแทน/เงินเดือน</label> </v-flex>
<v-flex sm4 xs12 class="px-3">
<label class="font-weight-bold">อีเมล <span class="red--text">&nbsp;*</span></label>
<v-text-field <v-text-field
outline outline
label="ค่าตอบแทน/เงินเดือน" label="อีเมล"
class="my-job" :rules="[rules.required, rules.email]"
class="my-ip"
></v-text-field> ></v-text-field>
<label class="font-weight-bold my-2">จำนวน(อัตรา)</label> <label class="font-weight-bold">Fax <span class="red--text"></span></label>
<v-text-field <v-text-field
outline outline
label="จำนวน(อัตรา)" label="Fax"
class="my-job" class="my-ip"
type="number"
></v-text-field> ></v-text-field>
<label class="font-weight-bold my-2">วันทำงาน</label> <label class="font-weight-bold">เว็บไซต์ <span class="red--text"></span></label>
<v-layout align-center justify-center row fill-height wrap> <v-text-field
<v-flex sm6 xs12 class="px-2"> outline
<v-text-field label="เว็บไซต์"
outline class="my-ip"
label="จาก" ></v-text-field>
class="my-job" </v-flex>
></v-text-field> </v-layout>
</v-flex> </v-flex>
<v-flex xs12 sm6 class="px-2"> <v-flex sm12>
<v-text-field <v-layout row wrap class="pa-3">
outline <v-flex sm6 xs12 class="px-3">
label="ถึง" <label class="font-weight-bold">ที่อยู่ <span class="red--text">&nbsp;*</span></label>
class="my-job"
></v-text-field>
</v-flex>
</v-layout>
<label class="font-weight-bold my-2">เวลาทำงาน</label>
<v-layout align-center justify-center row fill-height wrap>
<v-flex sm6 xs12 class="px-2">
<v-text-field
outline
label="จาก"
class="my-job"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="px-2">
<v-text-field
outline
label="ถึง"
class="my-job"
></v-text-field>
</v-flex>
</v-layout>
</v-flex>
</v-flex>
<v-flex sm6 xs12 class="pa-3">
<h2 class="font-weight-bold mt-2"><span class="red--text">&nbsp;หน้าที่รับผิดชอบ</span></h2>
<v-flex sm12 xs12 class="pa-3">
<v-textarea <v-textarea
outline outline
label="หน้าที่รับผิดชอบ" label="ที่อยู่"
:rules="[rules.required]"
rows
class="my-1"
></v-textarea> ></v-textarea>
</v-flex> <label class="font-weight-bold">จังหวัด <span class="red--text">&nbsp;*</span></label>
<h2 class="font-weight-bold"><span class="red--text">&nbsp;คุณสมบัติ</span></h2> <VSelect
<v-flex sm12 xs12 class="pa-3"> :items="items"
label="เลือกจังหวัด"
:rules="[rules.required]"
></VSelect>
<label class="font-weight-bold">เขต/อำเภอ <span class="red--text">&nbsp;*</span></label>
<VSelect
:items="items"
label="เลือกเขต/อำเภอ"
:rules="[rules.required]"
></VSelect>
<label class="font-weight-bold">เกี่ยวกับบริษัท</label>
<v-textarea <v-textarea
outline outline
label="คุณสมบัติ" label="เกี่ยวกับบริษัท"
rows="6"
class="my-1"
></v-textarea> ></v-textarea>
</v-flex> </v-flex>
<h2 class="font-weight-bold"><span class="red--text">&nbsp;สวัสดิการ</span></h2> <v-flex sm6 xs12 class="px-3">
<v-flex sm12 xs12 class="pa-3"> <label class="font-weight-bold">แขวง/ตำบล<span class="red--text">&nbsp;*</span></label>
<VSelect
:items="items"
:rules="[rules.required]"
label="เลือกแขวง/ตำบล"
></VSelect>
<label class="font-weight-bold">รหัสไปรษณีย์<span class="red--text">&nbsp;*</span></label>
<v-text-field
label="รหัสไปรษณีย์"
: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>
<v-btn color="deep-orange darken-4" class="px-2" small outline><v-icon>file_copy</v-icon>&nbsp;เลือกไฟล์</v-btn>
</v-flex>
<v-flex sm12 xs12>
<v-text-field
label="ค้นหาสถานที่"
style="height:50px;"
></v-text-field>
</v-flex>
<v-flex sm12 xs12>
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3851.7461712415493!2d104.9009800139957!3d15.117311868259526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x311684db0c98987f%3A0x228caf3246f0fd8e!2z4Lih4Lir4Liy4Lin4Li04LiX4Lii4Liy4Lil4Lix4Lii4Lit4Li44Lia4Lil4Lij4Liy4LiK4LiY4Liy4LiZ4Li1!5e0!3m2!1sth!2sth!4v1555418432669!5m2!1sth!2sth" width="400" height="200" frameborder="0" style="border:0" allowfullscreen></iframe> -->
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<v-layout row wrap class="borderbottom pa-3">
<v-flex sm12>
<h2 class="font-weight-bold"><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>
<VSelect
:items="items"
label="เลือก"
></VSelect>
</v-flex>
<v-flex sm3 xs12 class="px-3">
<label class="font-weight-bold">ใกล้ MRT</label>
<VSelect
:items="items"
label="เลือก"
></VSelect>
</v-flex>
<v-flex sm3 xs12 class="px-3">
<label class="font-weight-bold">ใกล้ ARL</label>
<VSelect
:items="items"
label="เลือก"
></VSelect>
</v-flex>
<v-flex sm3 xs12 class="px-3">
<label class="font-weight-bold">สายรถเมล์</label>
<VTextField
label="สายรถเมล์"/>
</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 <v-textarea
outline outline
label="สวัสดิการ" label=""
rows
class="my-2"
></v-textarea> ></v-textarea>
</v-flex> </v-flex>
<v-flex sm6 xs12 class="px-3 py-3 detail">
<span class="red--text">หมายเหตุ : </span>
<span >เพื่อความสะดวกในการเดินทางของผู้สมัครงาน กรุณาระบุสถานีรถไฟฟ้าที่ใกล้กับสถานที่ปฏิบัติงาน (ถ้ามี) หรือระบุสายรถเมล์ที่ผ่านสถานที่ประกอบการ และระบุการเดินทางเพิ่มเติม เพื่อให้เข้าใจในการเดินทางมากยิ่งขึ้น</span>
</v-flex> </v-flex>
<v-btn color="success">บันทึกข้อมูล</v-btn> </v-layout>
</v-layout> <v-layout row wrap class="borderbottom">
<v-flex sm6 xs12 class="pa-3">
</v-flex> <h2 class="font-weight-bold my-2"><span class="red--text">&nbsp;รายละเอียดงาน</span></h2>
<v-flex sm12 xs12 class="pa-3">
</form> <label class="font-weight-bold">หัวข้องาน <span class="red--text">&nbsp;*</span></label>
<v-text-field
outline
label="หัวข้องาน"
:rules="[rules.required]"
class="my-job"
></v-text-field>
<label class="font-weight-bold my-2">ประเภทธุรกิจ <span class="red--text">&nbsp;*</span></label>
<VSelect
outline
:items="items"
:rules="[rules.required]"
label="เลือก"
class="my-job"
></VSelect>
<label class="font-weight-bold my-2">ตำแหน่งงาน <span class="red--text">&nbsp;*</span></label>
<VSelect
outline
:items="items"
:rules="[rules.required]"
label="เลือก"
class="my-job"
></VSelect>
<label class="font-weight-bold my-2">ค่าตอบแทน/เงินเดือน</label>
<v-text-field
outline
label="ค่าตอบแทน/เงินเดือน"
class="my-job"
></v-text-field>
<label class="font-weight-bold my-2">จำนวน(อัตรา) <span class="red--text">&nbsp;*</span></label>
<v-text-field
outline
label="จำนวน(อัตรา)"
class="my-job"
:rules="[rules.required]"
min="0"
type="number"
></v-text-field>
<label class="font-weight-bold my-2">วันทำงาน <span class="red--text">&nbsp;*</span></label>
<v-layout align-center justify-center row fill-height wrap>
<v-flex sm6 xs12 class="px-2">
<v-text-field
outline
label="จาก"
:rules="[rules.required]"
class="my-job"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="px-2">
<v-text-field
outline
:rules="[rules.required]"
label="ถึง"
class="my-job"
></v-text-field>
</v-flex>
</v-layout>
<label class="font-weight-bold my-2">เวลาทำงาน <span class="red--text">&nbsp;*</span></label>
<v-layout align-center justify-center row fill-height wrap>
<v-flex sm6 xs12 class="px-2">
<!-- <v-text-field
outline
label="จาก"
type="time"
:rules="[rules.required]"
class="my-job"
></v-text-field> -->
<v-menu
ref="time1"
v-model="showTimeFrom"
:close-on-content-click="false"
:nudge-right="40"
lazy
transition="scale-transition"
offset-y
full-width
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
outline
v-model="timeFrom"
label="จาก"
:rules="[rules.required]"
readonly
v-on="on"
></v-text-field>
</template>
<v-time-picker
v-if="showTimeFrom"
v-model="timeFrom"
full-width
@click:minute="$refs.time1.save(time)"
></v-time-picker>
</v-menu>
</v-flex>
<v-flex xs12 sm6 class="px-2">
<v-menu
ref="time2"
v-model="showTimeTo"
:close-on-content-click="false"
:nudge-right="40"
lazy
transition="scale-transition"
offset-y
full-width
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
outline
v-model="timeTo"
label="ถึง"
:rules="[rules.required]"
readonly
v-on="on"
></v-text-field>
</template>
<v-time-picker
v-if="showTimeTo"
v-model="timeTo"
full-width
@click:minute="$refs.time2.save(time)"
></v-time-picker>
</v-menu>
</v-flex>
</v-layout>
</v-flex>
</v-flex>
<v-flex sm6 xs12 class="pa-3">
<h2 class="font-weight-bold mt-2"><span class="red--text">&nbsp;หน้าที่รับผิดชอบ</span> <span class="red--text">&nbsp;*</span></h2>
<v-flex sm12 xs12 class="pa-3">
<v-textarea
outline
:rules="[rules.required]"
label="หน้าที่รับผิดชอบ"
></v-textarea>
</v-flex>
<h2 class="font-weight-bold"><span class="red--text">&nbsp;คุณสมบัติ</span> <span class="red--text">&nbsp;*</span></h2>
<v-flex sm12 xs12 class="pa-3">
<v-textarea
outline
:rules="[rules.required]"
label="คุณสมบัติ"
></v-textarea>
</v-flex>
<h2 class="font-weight-bold"><span class="red--text">&nbsp;สวัสดิการ</span></h2>
<v-flex sm12 xs12 class="pa-3">
<v-textarea
outline
label="สวัสดิการ"
></v-textarea>
</v-flex>
</v-flex>
<v-layout justify-center>
<v-btn color="success" type="submit">บันทึกข้อมูล</v-btn>
</v-layout>
</v-layout>
</v-flex>
</v-form>
</v-layout> </v-layout>
</div> </div>
</template> </template>
...@@ -281,7 +353,15 @@ export default { ...@@ -281,7 +353,15 @@ export default {
data () { data () {
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',
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
} }
}, },
methods: { methods: {
...@@ -308,6 +388,13 @@ export default { ...@@ -308,6 +388,13 @@ export default {
console.log(imgBlob) console.log(imgBlob)
} }
reader.readAsArrayBuffer(file) reader.readAsArrayBuffer(file)
},
createJob () {
if (this.$refs.create.validate()) {
console.log('create job')
} else {
this.$Loading.error()
}
} }
} }
} }
...@@ -315,12 +402,12 @@ export default { ...@@ -315,12 +402,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.my-job{ // .my-job{
height: 70px; // height: 70px;
} // }
.my-ip{ // .my-ip{
height: 65px; // height: 65px;
} // }
.detail { .detail {
color: #276f86; color: #276f86;
background-color: #f8ffff; background-color: #f8ffff;
......
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