EmploymentSite/h5app/src/views/pages/jobhunt/jobHuntEdit.vue

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="onCancel" style="padding-left:10px;width:24px;height:24px;"></ion-icon>
        </ion-buttons>
        <ion-title>求职意向收集</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="stepFlex">
        <div v-for="(record,key) in stepList" :key="key" class="stepFlex-item">
          <div
              :class="[(record.val < curStepData?.statusVal || curStepData?.statusVal==stepList.val) ? 'greenCircle' :record.val == curStepData?.statusVal ? 'now' : 'grayCircle']"></div>
          <div v-if="key !== stepList.length - 1"
               :class="[record.val < curStepData?.statusVal ? 'greenLine' : 'grayLine']"></div>
          <div class="stepFlex-item-label">
            <p class="stepFlex-item-label-title">{{ record.title }}</p>
<!--            <p class="stepFlex-item-label-desc">{{ record.desc }}</p>-->
          </div>
        </div>
      </div>
        <ion-list class="canvasWrapper" >
          <ion-item-group>
            <ion-item>
              <div class="panel-title2">
                <div class="item-flag"></div>
                求职意向
              </div>
            </ion-item>
            <ion-label class="title-item">工种名称<span class="danger">*</span></ion-label>
            <ion-item :class="[huntDataValid.dataModel.workName.$error?'ion-invalid':'ion-valid']">
              <ion-input name="workName" id="workName"  style="text-align: left;" class="custom"
                         placeholder="请输入工种名称" v-model="dataModel.workName" ></ion-input>
              <ion-note slot="error">工种名称不能为空</ion-note>
            </ion-item>
            <ion-label class="title-item">求职类型<span class="danger">*</span></ion-label>
            <ion-item :class="[huntDataValid.dataModel.jobHuntType.$error?'ion-invalid':'ion-valid']">
              <ion-select name="jobHuntType"  id="jobHuntType" okText="确定" cancelText="取消" v-model="dataModel.jobHuntType"
                          interface="action-sheet" placeholder="请选择求职类型" style="width:100%;text-align: left;">
                <ion-select-option v-for=" (it,key) in jobHuntTypeList" :key="key" :value="it.value">
                  {{ it.name }}
                </ion-select-option>
              </ion-select>
              <ion-note slot="error">求职类型不能为空</ion-note>
            </ion-item>
            <ion-label class="title-item">求职岗位<span class="danger">*</span></ion-label>
            <ion-item :class="[huntDataValid.dataModel.postID.$error?'ion-invalid':'ion-valid']">
              <ion-select name="postID"  id="postID" okText="确定" cancelText="取消" v-model="dataModel.postID"
                          interface="action-sheet" placeholder="请选择求职岗位"  style="width:100%;text-align: left;">
                <ion-select-option v-for=" (it,key) in allPostList" :key="key" :value="it.postID">
                  {{ it.postName }}
                </ion-select-option>
              </ion-select>
              <ion-note slot="error">求职岗位不能为空</ion-note>
            </ion-item>
            <ion-label class="title-item">人才类型<span class="danger">*</span></ion-label>
            <ion-item :class="[huntDataValid.dataModel.jobUserType.$error?'ion-invalid':'ion-valid']">
              <ion-select name="jobUserType"  id="jobUserType" okText="确定" cancelText="取消" v-model="dataModel.jobUserType"
                          interface="action-sheet" placeholder="请选择人才类型"  style="width:100%;text-align: left;">
                <ion-select-option v-for=" (it,key) in jobUserTypeList" :key="key" :value="it.value">
                  {{ it.name }}
                </ion-select-option>
              </ion-select>
              <ion-note slot="error">人才类型不能为空</ion-note>
            </ion-item>
            <ion-label class="title-item">月薪要求(元)<span class="danger">*</span></ion-label>
            <ion-item :class="[huntDataValid.dataModel.maxSalary.$error||huntDataValid.dataModel.minSalary.$error?'ion-invalid':'ion-valid']">
              <ion-input inputmode="numeric" name="minSalary" id="minSalary" style="text-align: left;" class="custom"
                         placeholder="请输入最低薪资" v-model="dataModel.minSalary" ></ion-input>
              <span style="padding-left:20px;padding-right:20px;">至</span>
              <ion-input inputmode="numeric" name="maxSalary" id="maxSalary" style="text-align: left;" class="custom"
                         placeholder="请输入最高薪资" v-model="dataModel.maxSalary" ></ion-input>
              <ion-note slot="error">月薪要求不能为空</ion-note>
            </ion-item>
            <ion-label class="title-item">工作年限<span class="danger">*</span></ion-label>
            <ion-item :class="[huntDataValid.dataModel.workYear.$error?'ion-invalid':'ion-valid']">
              <ion-select name="workYear"  id="workYear" okText="确定" cancelText="取消" v-model="dataModel.workYear"
                          interface="action-sheet" placeholder="请选择工作年限"  style="width:100%;text-align: left;">
                <ion-select-option v-for=" (it,key) in workYearTypeList" :key="key" :value="it.value">
                  {{ it.name }}
                </ion-select-option>
              </ion-select>
              <ion-note slot="error">工作年限不能为空</ion-note>
            </ion-item>
            <ion-label class="title-item">期望工作地区<span class="danger">*</span></ion-label>
            <ion-item :class="[huntDataValid.dataModel.areaWork.$error?'ion-invalid':'ion-valid']">
              <ion-input name="areaWork" id="areaWork" style="text-align: left;" class="custom"
                         placeholder="请输入期望工作地区" v-model="dataModel.areaWork" ></ion-input>
              <ion-note slot="error">期望工作地区不能为空</ion-note>
            </ion-item>
            <ion-label class="title-item">可到职日期<span class="danger">*</span></ion-label>
            <ion-item  :class="[huntDataValid.dataModel.inDate.$error?'ion-invalid':'ion-valid']">
              <ion-datetime-button datetime="inDate" style="background-color: white;"></ion-datetime-button>
              <ion-modal :keep-contents-mounted="true">
                <ion-datetime name="inDate" id="inDate" placeholder="可到职日期"
                              v-model="dataModel.inDate"  :prefer-wheel="true"
                              dataformatas="YYYY-MM-DD" presentation="date" cancel-text="取消" done-text="确定"
                              :show-default-buttons="true">
                </ion-datetime>
              </ion-modal>
            </ion-item>
            <ion-label class="title-item">其他信息</ion-label>
            <ion-item>
              <ion-textarea name="areaWork" id="otherDemand" style="text-align: left;" class="custom"  rows="4"
                         placeholder="请输入其他信息" v-model="dataModel.otherDemand" ></ion-textarea>
            </ion-item>
          </ion-item-group>
        </ion-list>
    </ion-content>
    <ion-footer>
      <ion-toolbar>
        <div slot="end">
          <ion-button shape="round" expand="block"  @click="onSave">保  存</ion-button>
        </div>
      </ion-toolbar>
      <ion-loading
          :is-open="loading"
          message="加载中..."
          @didDismiss="setOpen(false)" >
      </ion-loading>
    </ion-footer>
  </ion-page>
</template>
<script lang="ts">
import {arrowBackOutline,addCircleOutline} from 'ionicons/icons';
import {reactive,defineComponent, computed,ref,toRefs} from "vue";
import {useRoute,useRouter} from "vue-router";
import {required} from "@vuelidate/validators";
import {useVuelidate} from "@vuelidate/core";
import {getJobHuntByID,saveJobHunt} from "@/api/jobHuntInfo";
import {getSysDictionaryList} from '@/api/system/dictionary';
import {getPostList} from '@/api/post'
import {alertController, onIonViewDidEnter} from "@ionic/vue";
import dayjs from "dayjs";

interface huntModel {
  dataModel: any;
}
interface SelectProps {
  name: string,
  value: string
}
interface StepParams{
  name: string,
  statusVal: number
}
export class ExampleComponent {
  pinFormatter(value: number) {
    return `${value}`;
  }
}

export default defineComponent({
  name: 'jobHuntEdit',
  setup() {
    const router = useRouter();
    const route = useRoute();
    const loading = ref(false);
    const editForm = ref();
    const curStepData = ref<StepParams>({
      name:"",
      statusVal: 2
    });
    const stepList = ref([
      {title: '个人基础信息', desc: '个人基础信息', val: 1},
      {title: '完善教育经历', desc: '完善个人教育经历',val: 2},
      {title: '个人求职意向', desc: '个人求职意向', val: 3}]);
    const allPostList = ref([]);
    const jobHuntTypeList = ref<SelectProps[]>([]);
    const jobUserTypeList = ref<SelectProps[]>([]);
    const workYearTypeList = ref<SelectProps[]>([]);
    const jobHuntData = reactive<huntModel>({dataModel:{
        jobUserID:null,
        workName:null,
        jobHuntType:null,
        jobUserType:null,
        postID:null,
        minSalary:null,
        maxSalary:null,
        workYear:null,
        areaWork:null,
        inDate:dayjs().format("YYYY-MM-DD"),
        otherDemand:null
      }});
    const huntDataRule = computed(()=>{
      return {dataModel:{
          workName:{required},
          jobHuntType:{required},
          jobUserType:{required},
          postID:{required},
          minSalary:{required},
          maxSalary:{required},
          workYear:{required},
          areaWork:{required},
          inDate:{required}
        }}});
    const huntDataValid = useVuelidate(huntDataRule,jobHuntData);

    const setOpen = (isOpen: boolean) => {
      loading.value = isOpen;
    };

    const presentAlert = async (message: string) => {
      const alert = await alertController.create({
        header: '错误！',
        message: message,
        buttons: [
          '确定'
        ],
      });

      await alert.present();
    }

    const getAllPostList = async function(){
      const allPostResult :any = await getPostList();
      allPostList.value = allPostResult.list;
      console.log("allPostList",allPostList.value);
    }
    const getJobHuntTypeList = async function(){
      const data :any = await getSysDictionaryList("JobHuntType");
      jobHuntTypeList.value = data;
    }
    const getJobUserTypeList = async function(){
      const data :any = await getSysDictionaryList("JobUserType");
      jobUserTypeList.value = data;
    }
    const getWorkYearTypeList = async function(){
      const data :any = await getSysDictionaryList("WorkYearType");
      workYearTypeList.value = data;
    }

    const onSave = async function (){
      const isFormCorrect = await huntDataValid.value.$validate();
      if(!isFormCorrect){
        console.log("当前求职意向数据",jobHuntData.dataModel);
        await presentAlert("请填写完整的信息！");
        return null;
      }
      saveJobHunt(jobHuntData.dataModel).then(result => {
        if (result) {
          router.push({path: './edit', query: {reload:1,jobUserID: jobHuntData.dataModel.jobUserID,status:4}});
        }
      });
    }

    const onCancel = () => {
      router.push({path: './edit', query: {reload:1,jobUserID: jobHuntData.dataModel.jobUserID,status:4}});
    }


    const loadData = async (jobHuntID: any,jobUserID:any,status:any) => {
      loading.value = true;
      await getAllPostList();
      await getJobHuntTypeList();
      await getJobUserTypeList();
      await getWorkYearTypeList();
      const reqData = await getJobHuntByID(jobHuntID);
      curStepData.value.statusVal = status;
      jobHuntData.dataModel = reqData;
      jobHuntData.dataModel.jobUserID = jobUserID;
      console.log("初始化求职意向 ",jobHuntData.dataModel);
      loading.value = false;
    };

    const reload = (educationID: any,jobUserID:any,status:any) => {
      loadData(educationID,jobUserID,status);
    }

    onIonViewDidEnter(() => {
      if (route.query.reload){
        reload(route.query.jobHuntID,route.query.jobUserID,route.query.status);
      }
    });

    return {
      ...toRefs(jobHuntData),
      arrowBackOutline,
      addCircleOutline,
      editForm,
      curStepData,
      stepList,
      allPostList,
      jobUserTypeList,
      jobHuntTypeList,
      workYearTypeList,
      setOpen,
      onSave,
      onCancel,
      loadData,
      route,
      router,
      loading,
      huntDataValid
    }
  }
});
</script>
<style lang="less">
ion-input.custom{
  --placeholder-color: gray;
  --placeholder-font-style:oblique;
  --placeholder-opacity: 1;
}

.title-item{
  margin-left: 15px;
  color:#1c3d70 !important;
  font-size: 14px !important;
  font-weight: bold;
}

.stepFlex {
  margin: 0;
  display: flex;
  width: 100%;

  .stepFlex-item {
    position: relative;
    flex: 1;
    text-align: center;
    margin-top: -10px;

    .stepFlex-item-label {
      padding-top: 60px;
      font-size: 14px;

      .stepFlex-item-label-title{
        margin-top:30px;
      }

      .stepFlex-item-label-desc{
        margin-top:5px;color: #b9b9bd;
      }
    }
  }

  .greenCircle {
    top: calc(50% - 15px);
    left: calc(50% - 4px);
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #31A2FE;
  }

  .now {
    top: calc(50% - 18px);
    left: calc(50% - 8px);
    position: absolute;
    z-index: 3;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #31A2FE;
    border: 4px solid #c5e8f9;
  }

  .grayCircle {
    top: calc(50% - 15px);
    left: calc(50% - 4px);
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
  }

  .greenLine {
    width: 100%;
    top: calc(50% - 11px);
    left: calc(50% - 2px);
    height: 2px;
    background-color: #31A2FE;
    position: absolute;
  }

  .grayLine {
    height: 0;
    border: 1px dashed #ccc;
    width: 100%;
    top: calc(50% - 11px);
    left: calc(50% - 2px);
    position: absolute;
  }
}

</style>