|
@@ -0,0 +1,398 @@
|
|
|
+<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">
|
|
|
+ <ion-list>
|
|
|
+ <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 mode="md" :class="[v$.dataModel.postName.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <ion-input placeholder="请输入岗位名称" label-placement="stacked" :clear-input="true"
|
|
|
+ v-model="dataModel.postName" class="custom">
|
|
|
+ </ion-input>
|
|
|
+ <ion-note slot="error">请输入岗位名称</ion-note>
|
|
|
+ </ion-item>
|
|
|
+ <ion-label class="title-item">招聘数量(人)<span class="danger">*</span></ion-label>
|
|
|
+ <ion-item mode="md" :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>
|
|
|
+ <ion-label class="title-item">招聘日期<span class="danger">*</span></ion-label>
|
|
|
+ <ion-item mode="md" :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>
|
|
|
+ <ion-label class="title-item">招聘地点<span class="danger">*</span></ion-label>
|
|
|
+ <ion-item mode="md" :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>
|
|
|
+
|
|
|
+ <ion-item mode="md" >
|
|
|
+ <div class="panel-title2" style="width: 25%;">
|
|
|
+ <div class="item-flag"></div>
|
|
|
+ 其他信息
|
|
|
+ </div>
|
|
|
+ <div style="width: 75%;text-align: right;">
|
|
|
+ <ion-icon :icon="chevronDownOutline" @click="isShow=!isShow" v-show="!isShow"
|
|
|
+ style="font-size: 24px;"></ion-icon>
|
|
|
+ <ion-icon :icon="chevronUpOutline" @click="isShow=!isShow" v-show="isShow"
|
|
|
+ style="font-size: 24px;"></ion-icon>
|
|
|
+ </div>
|
|
|
+ </ion-item>
|
|
|
+ <ion-list v-show="isShow" >
|
|
|
+ <ion-label class="title-item">岗位月薪(元)</ion-label>
|
|
|
+ <ion-item mode="md" >
|
|
|
+ <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>
|
|
|
+ <ion-label class="title-item">是否有试用期</ion-label>
|
|
|
+ <ion-item mode="md" >
|
|
|
+ <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>
|
|
|
+ <ion-label class="title-item">试用期(月)</ion-label>
|
|
|
+ <ion-item mode="md" >
|
|
|
+ <ion-input type="number" placeholder="请输入试用期月数" label-placement="stacked"
|
|
|
+ v-model="dataModel.trailMonths" class="custom">
|
|
|
+ </ion-input>
|
|
|
+ </ion-item>
|
|
|
+ <ion-label class="title-item">试用期月薪(元)</ion-label>
|
|
|
+ <ion-item mode="md" >
|
|
|
+ <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>
|
|
|
+ <ion-label class="title-item">工作年限要求</ion-label>
|
|
|
+ <ion-item mode="md" >
|
|
|
+ <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>
|
|
|
+ <ion-label class="title-item">学历要求</ion-label>
|
|
|
+ <ion-item mode="md" >
|
|
|
+ <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>
|
|
|
+ <ion-label class="title-item">福利待遇</ion-label>
|
|
|
+ <ion-item mode="md" >
|
|
|
+ <ion-textarea placeholder="请输入福利待遇" :rows="3" label-placement="stacked"
|
|
|
+ v-model="dataModel.welfare" class="custom">
|
|
|
+ </ion-textarea>
|
|
|
+ </ion-item>
|
|
|
+ <ion-label class="title-item">其他要求</ion-label>
|
|
|
+ <ion-item mode="md" >
|
|
|
+ <ion-textarea placeholder="请输入其他要求" :rows="3" label-placement="stacked"
|
|
|
+ v-model="dataModel.postDesc" class="custom">
|
|
|
+ </ion-textarea>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
+ </ion-list>
|
|
|
+ </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 {minLength, required} from "@vuelidate/validators";
|
|
|
+import {getSysDictionaryList} from "@/api/system/dictionary";
|
|
|
+import dayjs from "dayjs";
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'PostEdit',
|
|
|
+ setup() {
|
|
|
+ const router = useRouter();
|
|
|
+ const route = useRoute();
|
|
|
+ const isShow = ref<any>(false);
|
|
|
+ const isEdit = ref<any>(false);
|
|
|
+ const formState = reactive({
|
|
|
+ dataModel: {
|
|
|
+ companyID:null,
|
|
|
+ postID:null,
|
|
|
+ postName: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: {
|
|
|
+ postName: {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 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) {
|
|
|
+ console.log("当前岗位信息",formState.dataModel);
|
|
|
+ await presentAlert('请输入完整信息!');
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ savePost(formState.dataModel).then(result=>{
|
|
|
+ if(result){
|
|
|
+ router.push({path: "./postList", query: {reload:1,id:formState.dataModel.companyID,status: 3}});
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const back = () => {
|
|
|
+ router.push({path: "./postList", query: {reload:1,id:formState.dataModel.companyID,status: 3}});
|
|
|
+ }
|
|
|
+
|
|
|
+ const getWorkYearList = async function(){
|
|
|
+ const data :any = await getSysDictionaryList("WorkYearType");
|
|
|
+ workYearList.value = data;
|
|
|
+ console.log(workYearList.value);
|
|
|
+ }
|
|
|
+ const getCultureRankList = async function(){
|
|
|
+ const data:any = await getSysDictionaryList("CultureLevel");
|
|
|
+ cultureRankList.value = data;
|
|
|
+ console.log(cultureRankList.value);
|
|
|
+ }
|
|
|
+
|
|
|
+ const loadData = async (postID: any,companyID:any) => {
|
|
|
+ await getWorkYearList();
|
|
|
+ await getCultureRankList();
|
|
|
+ const reqData = await getPostByID(postID);
|
|
|
+ formState.dataModel = reqData;
|
|
|
+ formState.dataModel.companyID = companyID;
|
|
|
+ console.log("初始化岗位信息",formState.dataModel);
|
|
|
+ };
|
|
|
+
|
|
|
+ const reload = (postID: any,companyID:any) => {
|
|
|
+ formState.dataModel.recruitCount = null;
|
|
|
+ loadData(postID,companyID);
|
|
|
+ }
|
|
|
+
|
|
|
+ onIonViewDidEnter(() => {
|
|
|
+ if (route.query.reload)
|
|
|
+ reload(route.query.id,route.query.companyID);
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...toRefs(formState),
|
|
|
+ chevronDownOutline,
|
|
|
+ chevronUpOutline,
|
|
|
+ arrowBackOutline,
|
|
|
+ route,
|
|
|
+ router,
|
|
|
+ isShow,
|
|
|
+ isEdit,
|
|
|
+ isTrailList,
|
|
|
+ workYearList,
|
|
|
+ cultureRankList,
|
|
|
+ v$,
|
|
|
+ onSave,
|
|
|
+ back,
|
|
|
+ }
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+
|
|
|
+.custom{
|
|
|
+ --placeholder-color: gray;
|
|
|
+ --placeholder-font-style:italic;
|
|
|
+ --placeholder-opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.title-item{
|
|
|
+ margin-left: 15px;
|
|
|
+ color:#1c3d70 !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+ion-item {
|
|
|
+ --border-width: 0;
|
|
|
+ --border-style: none;
|
|
|
+
|
|
|
+ ion-label, input, ion-select, ion-datetime {
|
|
|
+ font-size: 14px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|