EmploymentSite/h5app/src/views/pages/post/edit.vue

<template>
  <ion-page class="list-page">
    <ion-header class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="back"></ion-icon>
        </ion-buttons>
        <ion-title>
          岗位信息收集
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <form autocomplete="off">
        <div class="bw-vue-form">
          <div class="form-title">基础信息</div>
          <div class="form-select">
            <ion-label>企业</ion-label>
            <ion-item>
              {{dataModel.companyName}}
            </ion-item>
            <!--            <ion-label>企业<span class="danger">*</span></ion-label>-->
<!--            <ion-item :class="[v$.dataModel.companyID.$error?'ion-invalid':'ion-valid']">-->
<!--              <ion-select interface="action-sheet" placeholder="请选择企业" cancel-text="取消"-->
<!--                          disabled="true" id="companyID" v-model="dataModel.companyID" style="width: 100%;text-align: left;">-->
<!--                <ion-select-option v-for="(record,key) in companyList" :key="key"-->
<!--                                   v-model:value="record.companyID">-->
<!--                  {{ record.companyName }}-->
<!--                </ion-select-option>-->
<!--              </ion-select>-->
<!--              <ion-note slot="error">请选择企业</ion-note>-->
<!--            </ion-item>-->
          </div>
          <div class="form-input">
            <ion-label>岗位名称<span class="danger">*</span></ion-label>
            <ion-item :class="[v$.dataModel.professionName.$error?'ion-invalid':'ion-valid']">
              <ion-input readonly placeholder="请输入岗位" label-placement="stacked" :clear-input="true"
                        @click="onOpenPost" v-model="dataModel.professionName" class="custom">
              </ion-input>
              <post-selection-like ref="refPostSelectionLike" @resultInfo="onResultInfo"></post-selection-like>
              <ion-note slot="error">请输入岗位</ion-note>
            </ion-item>
          </div>
          <div class="form-input">
            <ion-label>招聘人数<span class="danger">*</span></ion-label>
            <ion-item :class="[v$.dataModel.recruitCount.$error?'ion-invalid':'ion-valid']">
              <ion-input type="number" placeholder="请输入招聘数量" label-placement="stacked" :clear-input="true"
                         v-model="dataModel.recruitCount" class="custom">
              </ion-input>
              <ion-note slot="error">请输入招聘人数</ion-note>
            </ion-item>
          </div>
          <div class="form-input">
            <ion-label>招聘日期<span class="danger">*</span></ion-label>
            <ion-item
                      :class="[v$.dataModel.startTime.$error||v$.dataModel.endTime.$error?'ion-invalid':'ion-valid']">
              <ion-datetime-button datetime="startTime"></ion-datetime-button>
              <ion-modal :keep-contents-mounted="true">
                <ion-datetime placeholder="招聘日期" id="startTime"
                              v-model="dataModel.startTime" :prefer-wheel="true"
                              dataformatas="YYYY-MM-DD" presentation="date" cancel-text="取消" done-text="确定"
                              :show-default-buttons="true" style="text-align: left;width: 100%;">
                </ion-datetime>
              </ion-modal>
              至
              <ion-datetime-button datetime="endTime"></ion-datetime-button>
              <ion-modal :keep-contents-mounted="true">
                <ion-datetime placeholder="招聘日期" id="endTime"
                              v-model="dataModel.endTime" :prefer-wheel="true"
                              dataformatas="YYYY-MM-DD" presentation="date" cancel-text="取消" done-text="确定"
                              :show-default-buttons="true" style="text-align: left;width: 100%;">
                </ion-datetime>
              </ion-modal>
              <ion-note slot="error">招聘开始日期与结束日期不能为空</ion-note>
            </ion-item>
          </div>
          <div class="form-detail">
            <ion-label>工作地点<span class="danger">*</span></ion-label>
            <ion-item :class="[v$.dataModel.jobPlace.$error?'ion-invalid':'ion-valid']">
              <ion-textarea placeholder="请输入工作地点" :rows="3" label-placement="stacked" :clear-input="true"
                            v-model="dataModel.jobPlace" class="custom">
              </ion-textarea>
              <ion-note slot="error">请输入工作地点</ion-note>
            </ion-item>
          </div>
        </div>
        <div class="bw-vue-form">
          <div class="form-title" style="display: flex;justify-content: space-between;">
            <div style="width: 25%;">
              其他信息
            </div>
            <div style="width: 75%;text-align: right;">
              <ion-label style="color: red;font-size: 14px;" @click="isShow=!isShow">{{isShow?"收起":"展开"}}</ion-label>
            </div>
          </div>
          <div v-show="isShow">
            <div class="form-input">
              <ion-label>岗位月薪(元)</ion-label>
              <ion-item>
                <ion-input placeholder="请输入金额" label-placement="stacked"
                           v-model="dataModel.minSalary" class="custom">
                </ion-input>
                <ion-label style="text-align:left;width:70px;">至</ion-label>
                <ion-input placeholder="请输入金额" label-placement="stacked"
                           v-model="dataModel.maxSalary" class="custom">
                </ion-input>
              </ion-item>
            </div>
            <div class="form-select">
              <ion-label>是否有试用期</ion-label>
              <ion-item>
                <ion-select interface="action-sheet" placeholder="请选择是否有试用期" cancel-text="取消"
                            id="isTrail" v-model="dataModel.isTrail" style="width: 100%;text-align: left;">
                  <ion-select-option v-for="(record,key) in isTrailList" :key="key"
                                     v-model:value="record.value">
                    {{ record.name }}
                  </ion-select-option>
                </ion-select>
              </ion-item>
            </div>
            <div class="form-input">
              <ion-label>试用期(月)</ion-label>
              <ion-item>
                <ion-input type="number" placeholder="请输入试用期月数" label-placement="stacked"
                           v-model="dataModel.trailMonths" class="custom">
                </ion-input>
              </ion-item>
            </div>
            <div class="form-input">
              <ion-label>试用期月薪(元)</ion-label>
              <ion-item>
                <ion-input type="number" placeholder="请输入金额" label-placement="stacked"
                           v-model="dataModel.trailMinSalary" class="custom">
                </ion-input>
                <ion-label style="text-align:left;width:70px;">至</ion-label>
                <ion-input type="number" placeholder="请输入金额" label-placement="stacked"
                           v-model="dataModel.trailMaxSalary" class="custom">
                </ion-input>
              </ion-item>
            </div>
            <div class="form-select">
              <ion-label>工作年限要求</ion-label>
              <ion-item>
                <ion-select interface="action-sheet" placeholder="请选择工作年限" cancel-text="取消"
                            id="workYear" v-model="dataModel.workYear" style="width: 100%;text-align: left;">
                  <ion-select-option v-for="(record,key) in workYearList" :key="key"
                                     v-model:value="record.value">
                    {{ record.name }}
                  </ion-select-option>
                </ion-select>
              </ion-item>
            </div>
            <div class="form-select">
              <ion-label>学历要求</ion-label>
              <ion-item>
                <ion-select interface="action-sheet" placeholder="请选择学历" cancel-text="取消"
                            id="cultureRank" v-model="dataModel.cultureRank" style="width: 100%;text-align: left;">
                  <ion-select-option v-for="(record,key) in cultureRankList" :key="key"
                                     v-model:value="record.value">
                    {{ record.name }}
                  </ion-select-option>
                </ion-select>
              </ion-item>
            </div>
            <div class="form-input">
              <ion-label>福利待遇</ion-label>
              <ion-item>
                <ion-textarea placeholder="请输入福利待遇" :rows="3" label-placement="stacked"
                              v-model="dataModel.welfare" class="custom">
                </ion-textarea>
              </ion-item>
            </div>
            <div class="form-input">
              <ion-label>其他要求</ion-label>
              <ion-item>
                <ion-textarea placeholder="请输入其他要求" :rows="3" label-placement="stacked"
                              v-model="dataModel.postDesc" class="custom">
                </ion-textarea>
              </ion-item>
            </div>
          </div>
        </div>
      </form>
    </ion-content>
    <ion-footer>
      <ion-toolbar>
        <div slot="end">
          <ion-button shape="round" expand="block" @click="onSave">提交</ion-button>
        </div>
      </ion-toolbar>
    </ion-footer>
  </ion-page>
</template>
<script lang="ts">
import {computed, defineComponent, reactive, ref, toRefs, watch} from "vue";
import {chevronDownOutline, chevronUpOutline, arrowBackOutline} from 'ionicons/icons';
import {useRoute, useRouter} from "vue-router";
import {alertController, onIonViewDidEnter} from "@ionic/vue";
import {useVuelidate} from "@vuelidate/core";
import {getPostByID, savePost} from "@/api/post";
import { required} from "@vuelidate/validators";
import {getSysDictionaryList} from "@/api/system/dictionary";
import {getCompanyBySiteID} from "@/api/company";
import {useUserStore} from '@/store/modules/user';
import dayjs from "dayjs";
import PostSelectionLike from "@/components/postSelectionLike.vue";

export default defineComponent({
  name: 'PostEdit',
  components:{PostSelectionLike},
  setup() {
    const router = useRouter();
    const route = useRoute();
    const userStore = useUserStore();
    const isShow = ref<any>(false);
    const isEdit = ref<any>(false);
    const formState = reactive({
      dataModel: {
        companyID: null,
        postID: null,
        professionName: null,
        professionID: null,
        recruitCount: null,
        startTime: dayjs().format("YYYY-MM-DD"),
        endTime: dayjs().format("YYYY-MM-DD"),
        jobPlace: null,
        minSalary: null,
        maxSalary: null,
        isTrail: null,
        trailMonths: null,
        trailMinSalary: null,
        trailMaxSalary: null,
        workYear: null,
        cultureRank: null,
        welfare: null,
        postDesc: null
      }
    });
    const rules = computed(() => {
      return {
        dataModel: {
          companyID: {required},
          professionName: {required},
          recruitCount: {required},
          startTime: {required},
          endTime: {required},
          jobPlace: {required}
        }
      }
    });
    const v$ = useVuelidate(rules, formState);
    const isTrailList = ref([
      {value: true, name: '是'},
      {value: false, name: '否'},
    ]);
    const workYearList = ref([]);
    const cultureRankList = ref([]);
    const companyList = ref([]);
    const refPostSelectionLike = ref();

    const presentAlert = async (message: string) => {
      const alert = await alertController.create({
        header: '错误！',
        message: message,
        buttons: [
          '确定'
        ],
      });
      await alert.present();
    }
    const onSave = async function () {
      const isFormCorrect = await v$.value.$validate();
      if (!isFormCorrect) {
        await presentAlert('请输入完整信息！');
        return null;
      }
      savePost(formState.dataModel).then(result => {
        if (result) {
          router.push({path: "./list", query: {reload: 1}});
        }
      })
    }

    const onResultInfo = (data: any)=>{
      formState.dataModel.professionID = data.value;
      formState.dataModel.professionName = data.text;
    }

    const onOpenPost = () => {
      refPostSelectionLike.value.onOpen();
    }

    const back = () => {
      router.push({path: "./list", query: {reload: 1}});
    }

    const getCompanyBySiteIDList = async function () {
      const siteID = userStore.getUserInfo.siteID;
      const data: any = await getCompanyBySiteID(siteID);
      companyList.value = data;
    }
    const getWorkYearList = async function () {
      const data: any = await getSysDictionaryList("WorkYearType");
      workYearList.value = data;
    }
    const getCultureRankList = async function () {
      const data: any = await getSysDictionaryList("CultureLevel");
      cultureRankList.value = data;
    }

    const loadData = async (postID: any) => {
      await getCompanyBySiteIDList();
      await getWorkYearList();
      await getCultureRankList();
      const reqData = await getPostByID(postID);
      formState.dataModel = reqData;
    };

    const reload = (postID: any) => {
      formState.dataModel.recruitCount = null;
      loadData(postID);
    }

    onIonViewDidEnter(() => {
      if (route.query.reload)
        reload(route.query.id);
    });

    return {
      ...toRefs(formState),
      chevronDownOutline,
      chevronUpOutline,
      arrowBackOutline,
      route,
      router,
      isShow,
      isEdit,
      companyList,
      isTrailList,
      workYearList,
      cultureRankList,
      v$,
      refPostSelectionLike,
      onOpenPost,
      onResultInfo,
      onSave,
      back,
    }
  }
});
</script>

<style lang="less">


</style>