<template>
|
<ContentScrollView :paddingH="false">
|
<nut-form :model-value="form" ref="formRef" :rules="rules">
|
<nut-form-item label="订单名称:" class="bole-form-item" prop="name" required>
|
<nut-input
|
v-model.trim="form.name"
|
class="nut-input-text bole-input-text"
|
placeholder="请输入订单名称"
|
type="text"
|
:max-length="20"
|
/>
|
</nut-form-item>
|
<nut-form-item label="招聘人数:" class="bole-form-item" prop="hireType" required>
|
<nut-radio-group v-model="form.hireType" direction="horizontal">
|
<BlRadio :label="Number(key)" v-for="(val, key) in HireTypeText" :key="key">{{
|
val
|
}}</BlRadio>
|
</nut-radio-group>
|
</nut-form-item>
|
<nut-form-item label=" " class="bole-form-item" prop="hireNumber">
|
<div class="bole-form-input-wrapper">
|
<NumberInput
|
v-model.trim="form.hireNumber"
|
class="nut-input-text bole-input-text"
|
placeholder="请输入招聘人数"
|
:min="1"
|
/>
|
<template v-if="form.hireType === HireType.hireEndNumber">
|
<div class="form-input-separator">至</div>
|
<NumberInput
|
v-model.trim="form.hireEndNumber"
|
class="nut-input-text bole-input-text"
|
placeholder="请输入招聘人数"
|
:min="1"
|
/>
|
</template>
|
</div>
|
</nut-form-item>
|
<nut-form-item label="工作地点:" class="bole-form-item" prop="areaList" required>
|
<ChooseInputWithAreaPicker
|
:columns="areaTreeList"
|
v-model="form.areaList"
|
placeholder="请添加工作地点"
|
></ChooseInputWithAreaPicker>
|
</nut-form-item>
|
<nut-form-item label="年龄范围:" class="bole-form-item" prop="ageStart" required>
|
<div class="bole-form-input-wrapper">
|
<NumberInput
|
v-model.trim="form.ageStart"
|
class="nut-input-text bole-input-text"
|
placeholder="请选择年龄范围"
|
:min="1"
|
/>
|
<div class="form-input-separator">至</div>
|
<NumberInput
|
v-model.trim="form.ageEnd"
|
class="nut-input-text bole-input-text"
|
placeholder="请选择年龄范围"
|
:min="1"
|
/>
|
</div>
|
</nut-form-item>
|
<nut-form-item label="性别要求:" class="bole-form-item" prop="sexRequirement" required>
|
<ChooseInputWithPicker
|
v-model="form.sexRequirement"
|
placeholder="请选择性别要求"
|
:value-enum="SexRequirementTextV3"
|
/>
|
</nut-form-item>
|
<nut-form-item label="行业类型:" class="bole-form-item" prop="industryTypeId" required>
|
<ChooseInputWithPicker
|
v-model="form.industryTypeId"
|
placeholder="请选择行业类型"
|
:value-enum="industryCategoryList"
|
enum-label-key="name"
|
enum-value-key="id"
|
/>
|
</nut-form-item>
|
</nut-form>
|
</ContentScrollView>
|
<PageFooter :isOnlyAction="false">
|
<PageFooterBtn type="primary" @click="handleNext">下一步</PageFooterBtn>
|
</PageFooter>
|
</template>
|
|
<script setup lang="ts">
|
import { usePublishOrderContext } from './context';
|
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
|
import {
|
Radio as BlRadio,
|
NumberInput,
|
ChooseInputWithAreaPicker,
|
ChooseInputWithPicker,
|
} from '@12333/components';
|
import { HireTypeText, HireType, SexRequirementTextV3, SearchType } from '@12333/constants';
|
import { useAllAreaList, useAllSearchSettingList } from '@12333/hooks';
|
import { FormValidator } from '@12333/utils';
|
import { FormItemRuleWithoutValidator } from '@nutui/nutui-taro/dist/types/__VUE/formitem/types';
|
|
defineOptions({
|
name: 'PublishOrderStep1',
|
});
|
|
const { goToNext, form } = usePublishOrderContext();
|
|
const { allSearchSettingList: industryCategoryList } = useAllSearchSettingList({
|
searchType: SearchType.IndustryCategory,
|
enabled: true,
|
status: true,
|
});
|
|
const { findAreaNameFromCode, areaTreeList } = useAllAreaList();
|
|
const rules = reactive<FormRules>({
|
name: [{ required: true, message: '请输入订单名称' }],
|
hireNumber: [
|
{
|
required: true,
|
message: '请选择招聘人数',
|
validator: (value: any, ruleCfg: FormItemRuleWithoutValidator) => {
|
if (!form.hireNumber) {
|
return Promise.reject('请输入招聘人数');
|
}
|
if (form.hireType === HireType.hireEndNumber) {
|
if (!form.hireEndNumber) {
|
return Promise.reject('请输入招聘人数');
|
}
|
if (Number(form.hireEndNumber) <= Number(form.hireNumber)) {
|
return Promise.reject('招聘最大人数不能小于招聘最小人数');
|
}
|
}
|
return Promise.resolve(true);
|
},
|
},
|
],
|
areaList: [
|
{ required: true, message: '清添加工作地点', validator: FormValidator.validatorArray },
|
],
|
ageStart: [
|
{
|
required: true,
|
message: '请输入年龄要求',
|
validator: () => {
|
if (!form.ageStart) {
|
return Promise.reject('请输入年龄要求');
|
}
|
if (!form.ageEnd) {
|
return Promise.reject('请输入年龄要求');
|
}
|
if (Number(form.ageEnd) <= Number(form.ageStart)) {
|
return Promise.reject('最大年龄不能小于最小年龄');
|
}
|
return Promise.resolve(true);
|
},
|
},
|
],
|
sexRequirement: [{ required: true, message: '请选择性别要求' }],
|
industryTypeId: [{ required: true, message: '请选择行业类型' }],
|
});
|
|
const formRef = ref<any>(null);
|
|
function handleNext() {
|
if (!formRef.value) return;
|
formRef.value.validate().then(({ valid, errors }: any) => {
|
if (valid) {
|
goToNext();
|
}
|
});
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.bole-form-input-wrapper {
|
display: flex;
|
align-items: center;
|
}
|
|
.form-input-separator {
|
margin: 0 10px;
|
color: boleGetCssVar('text-color', 'primary');
|
flex-shrink: 0;
|
}
|
|
.form-input-unit {
|
margin-left: 10px;
|
color: boleGetCssVar('text-color', 'primary');
|
flex-shrink: 0;
|
}
|
</style>
|
