CreateJob.vue

<template>
    <div class="">
        <v-form @submit.prevent="createJob()" ref="job">
        <v-layout row wrap justify-center >
                <v-flex  xs12 sm10 offset-sm-1 class="ma-2">
                    <v-flex class="bg-title pa-2">
                        <v-layout row wrap align-center>
                            <div class="mx-3">
                                <v-icon x-large dark>fas fa-briefcase</v-icon>
                            </div>
                            <div class="pa-0">
                                <v-flex xs12 sm12>
                                    <span class="font-title font-weight-bold">ข้อมูลรายละเอียดของงาน</span>
                                </v-flex>                       
                                <v-flex xs12 sm12>
                                    <span class="font-subtitle ">(Job description information)</span>
                                </v-flex>                       
                            </div>
                        </v-layout>
                    </v-flex>
                    <v-flex class="bg-body pa-4">
                        <v-layout row wrap>
                            <v-flex xs12 sm6 class="px-3">
                                <v-text-field
                                    label="หัวข้องาน"
                                    v-model="job_data.job_title"
                                    :rules="[v => !!v || 'จำเป็นต้องกรอก']"
                                    placeholder=" "
                                ></v-text-field>
                                <v-combobox
                                    v-model="job_data.job_type"
                                    :items="jobs_data"
                                    :rules="[v => !!v || 'จำเป็นต้องกรอก']"
                                    label="ประเภทงาน"
                                    placeholder=" "
                                    >
                                    <template v-slot:selection="data">
                                        <v-chip
                                        :key="JSON.stringify(data.item)"
                                        :selected="data.selected"
                                        :disabled="data.disabled"
                                        class="v-chip--select-multi"
                                        @click.stop="data.parent.selectedIndex = data.index"
                                        @input="data.parent.selectItem(data.item)"
                                        >
                                        <v-avatar class="accent white--text">
                                            {{ data.item.slice(0, 1).toUpperCase() }}
                                        </v-avatar>
                                        {{ data.item }}
                                        </v-chip>
                                    </template>
                                </v-combobox>
                                <v-text-field
                                    label="ตำแหน่งงาน "
                                    v-model="job_data.department"
                                    :rules="[v => !!v || 'จำเป็นต้องกรอก']"
                                    placeholder=" "
                                ></v-text-field>
                                <v-text-field
                                    label="ค่าตอบแทน/เงินเดือน  "
                                    v-model="job_data.salary"
                                    placeholder=" "
                                ></v-text-field>
                            </v-flex>
                            <v-flex xs12 sm6 class="px-3">
                                <v-text-field
                                    label="สาขาวิชาที่เปิดรับ "
                                    v-model="job_data.branch"
                                    placeholder=" "
                                ></v-text-field>
                                
                                <v-text-field
                                    label="วันทำงาน  "
                                    v-model="job_data.day"
                                    placeholder=" "
                                ></v-text-field>
                                <v-text-field
                                    label="เวลาทำงาน  "
                                    v-model="job_data.time"
                                    placeholder=" "
                                ></v-text-field>
                                <v-text-field
                                    label="จำนวนที่รับ  "
                                    v-model="job_data.num"
                                    placeholder=" "
                                    type="number"
                                ></v-text-field>
                            </v-flex>
                        </v-layout>
                    
                    </v-flex>
                </v-flex>
                <v-flex  xs12 sm10 offset-sm-1 class="ma-2">
                    <v-flex class="bg-title-1 pa-2">
                        <v-layout row wrap align-center>
                            <div class="mx-3">
                                <v-icon x-large dark>fas fa-user-circle</v-icon>
                            </div>
                            <div class="pa-0">
                                <v-flex xs12 sm12>
                                    <span class="font-title font-weight-bold">คุณสมบัติของผู้สมัครงาน</span>
                                </v-flex>
                                <v-flex xs12 sm12>
                                    <span class="font-subtitle ">(Job applicant qualifications)</span>
                                </v-flex>                       
                            </div>
                        </v-layout>
                    </v-flex>
                    <v-flex class="bg-body pa-4">
                        <v-layout row wrap>
                            <v-flex xs12 sm6 class="px-3">
                                <v-select
                                    v-model="job_data.gender"
                                    :items="items"
                                    label="เพศ"
                                    placeholder=" "
                                    multiple
                                    >
                                    <template v-slot:selection="data">
                                        <v-chip
                                        :key="JSON.stringify(data.item)"
                                        :selected="data.selected"
                                        :disabled="data.disabled"
                                        class="v-chip--select-multi"
                                        @input="data.parent.selectItem(data.item)"
                                        >
                                        <v-avatar
                                            class="accent white--text"
                                            v-text="data.item.slice(0, 1).toUpperCase()"
                                        ></v-avatar>
                                        {{ data.item }}
                                        </v-chip>
                                    </template>
                                </v-select>
                                <v-select
                                    label="ระดับการศึกษา"
                                    v-model="job_data.degree"
                                    placeholder=" "
                                    :items="degree"
                                ></v-select>
                                <v-text-field
                                    label="เกรดเฉลี่ย  "
                                    v-model="job_data.gpax"
                                    placeholder=" "
                                ></v-text-field>
                                <v-text-field
                                    label="ระยะเวลาในการทำงาน  "
                                    v-model="job_data.phase"
                                    placeholder=" "
                                ></v-text-field>
                                <v-textarea
                                    label="คุณสมบัติเพิ่มเติม"
                                    v-model="job_data.feature"
                                    rows="3"
                                    outline
                                    placeholder=" "
                                ></v-textarea>
                            </v-flex>
                            <v-flex xs12 sm6 class="px-3">
                                <v-textarea
                                    outline
                                    label="หน้าที่รับผิดชอบ"
                                    v-model="job_data.role"
                                    placeholder=" "
                                    rows="7"
                                ></v-textarea>
                                <v-textarea
                                    outline
                                    label="สวัสดิการ"
                                    v-model="job_data.welfare"
                                    placeholder=" "
                                    rows="7"
                                ></v-textarea>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-flex>
                <v-flex xs12 sm10 offset-sm-1 class="my-1 text-xs-center text-sm-center.">
                    <v-btn type="submit" round dark color="blue accent-3" class="px-3 white--text">เพิ่มข้อมูลงาน</v-btn>
                    <v-btn color="error" round dark @click="$router.push('/employer')">ยกเลิก</v-btn>
                </v-flex>
        </v-layout>
        </v-form>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        degree: [
          'ระดับปวช.',
          'ระดับปวส.',
          'ระดับปริญญา'
        ],
        gender: [],
        items: [
          'ชาย',
          'หญิง'
        ],
        jobs_data: [],
        job_data: {
            id: null,
            job_title: '',
            job_type: '',
            department: '',
            salary: '',
            branch: '',
            day: '',
            time: '',
            num: '',
            gender: '',
            degree: '',
            gpax: '',
            phase: '',
            feature: '',
            role: '',
            welfare: ''
        }
      }
    },
    methods: {
        createJob () {
            if (this.$refs.job.validate()) {
                axios.post('/api/jobs', this.job_data)
                  .then(res => {
                      this.$router.push('/employer');
                  })
                  .catch(err => {console.log(err.response)})
            } else {
                this.$Loading.error()
            }
        }
    },
    beforeMount () {
        this.$store.dispatch('checkEmployer')
          .then(res => {
              console.log(res)
              this.job_data.id = res.id
              axios.get(`/api/jobs/${res.id}`)
                .then(res => {
                    this.jobs_data = res.data.job_all.map(x => x.job_type).filter((item, pos, self) => {return self.indexOf(item) == pos})
                })
                .catch(err => {console.log(err.response)})
          })
          .catch(err => {
              console.log(err)
          })
        // this.$store.dispatch('checkEmployer')
        //   .then(res => {
        //       console.log(res)
        //   })
        //   .catch(err => {console.log(err.response)})
    }
  }
</script>

<style lang="scss" scoped>
    .bg-title{
        background-color: #00AAFF;
        border-radius: 8px 8px 0 0;
        display: block;
    }
    .bg-body{
        background-color: #fff;
        border-radius:0 0 8px 8px;
        border-bottom:1px solid #dcdcdc ;
        border-left:1px solid #dcdcdc ;
        border-right:1px solid #dcdcdc ;
    }
    .bg-title-1{
        background-color: #89969f;
        border-radius: 8px 8px 0 0;
    }
    .font-title {
        font-size: 20px;
        color: #fff;
        display: block;
        font-family: "Prompt", sans-serif;
    }
    .font-subtitle {
        font-size: 16px;
        color: #2d3f4b;
        display: block;
        font-family: "Prompt", sans-serif;
    }
</style>