474 lines
18 KiB
Vue
474 lines
18 KiB
Vue
<!-- 发布岗位 -->
|
||
<template>
|
||
<view>
|
||
<view class="u-demo-block__content">
|
||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||
<u--form labelPosition="left" :model="info" ref="form1">
|
||
<view style="font-size: 30rpx;font-weight: bold;padding: 20rpx 0 0;">岗位信息</view>
|
||
<u-form-item label="岗位名称" prop="jobName" borderBottom labelWidth="80" ref="item1">
|
||
<u--input v-model="info.jobName" border="none" placeholder="请输入岗位名称"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="发布时间" labelWidth="80" prop="stime" borderBottom
|
||
@click="showStime = true; hideKeyboard()" ref="item1">
|
||
<u--input v-model="info.stime" disabledColor="#ffffff" placeholder="请选择发布时间"
|
||
border="none"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="结束时间" labelWidth="80" prop="etime" borderBottom
|
||
@click="showEtime = true; hideKeyboard()" ref="item2">
|
||
<u--input v-model="info.etime" disabledColor="#ffffff" placeholder="请选择结束时间"
|
||
border="none"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<view style="font-size: 30rpx;font-weight: bold;padding: 20rpx 0 0;">岗位要求</view>
|
||
<u-form-item label="招聘人数" prop="peopleNum" borderBottom labelWidth="80" ref="item3">
|
||
<u--input v-model="info.peopleNum" border="none" placeholder="请输入招聘人数"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="参考工资" prop="wage" labelWidth="80" borderBottom
|
||
@click="showWage = true; hideKeyboard()" ref="item4">
|
||
<u--input v-model="info.wage" disabledColor="#ffffff" placeholder="请选择参考工资"
|
||
border="none"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="行业类型" prop="tradeNames" labelWidth="80" borderBottom
|
||
@click="showTrade = true; hideKeyboard()" ref="item4">
|
||
<u--input v-model="info.tradeNames" disabledColor="#ffffff" placeholder="请选择行业类型"
|
||
border="none"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="工种" prop="skillNames" labelWidth="80" borderBottom
|
||
@click="showSkills = true; hideKeyboard()" ref="item4">
|
||
<u--input v-model="info.skillNames" disabledColor="#ffffff" placeholder="请选择工种"
|
||
border="none"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="岗位描述" prop="jobDescription" borderBottom labelWidth="80" ref="item1">
|
||
<!-- <u--textarea v-model="info.jobDescription" placeholder="请输入岗位描述"></u--textarea> -->
|
||
<!-- <u--input v-model="info.jobDescription" border="none" placeholder="请输入任务描述"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon> -->
|
||
</u-form-item>
|
||
<view>
|
||
<u--textarea v-model="info.jobDescription" placeholder="参考示例:岗位名称:保姆 工作内容: 一日三餐,卫生打扫 工资: 200元/天 年龄要求: 25-40岁 工作经验要求: 有过住家保姆经验, 会做饭,受过高等教育的优先" count height="100" maxlength="200"></u--textarea>
|
||
</view>
|
||
<view style="font-size: 30rpx;font-weight: bold;padding: 20rpx 0 0;">人员要求</view>
|
||
<!-- <u-form-item label="人员属性" prop="userNature" labelWidth="80" borderBottom
|
||
@click="showNature = true; hideKeyboard()" ref="item4">
|
||
<u--input v-model="info.userNature" disabledColor="#ffffff" placeholder="请选择人员属性"
|
||
border="none"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item> -->
|
||
<u-form-item label="年龄要求" prop="ageDesc" labelWidth="80" borderBottom
|
||
@click="showAge = true; hideKeyboard()" ref="item4">
|
||
<u--input v-model="info.ageDesc" disabledColor="#ffffff" placeholder="请选择年龄要求"
|
||
border="none"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="学历要求" prop="educationLabel" labelWidth="80" borderBottom
|
||
@click="showEdu = true; hideKeyboard()" ref="item4">
|
||
<u--input v-model="info.educationLabel" disabledColor="#ffffff" placeholder="请选择学历要求"
|
||
border="none"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="经验要求" prop="experienceDesc" labelWidth="80" borderBottom
|
||
@click="showExpe = true; hideKeyboard()" ref="item4">
|
||
<u--input v-model="info.experienceDesc" disabledColor="#ffffff" placeholder="请选择学历要求"
|
||
border="none"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<view style="font-size: 30rpx;font-weight: bold;padding: 20rpx 0 0;">企业信息</view>
|
||
<u-form-item label="企业名称" prop="jobCompanyName" borderBottom labelWidth="80" ref="item1">
|
||
<u--input v-model="info.jobCompanyName" border="none" placeholder="请输入企业名称"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="企业信用代码" prop="jobCompanyScale" borderBottom labelWidth="80" ref="item1">
|
||
<u--input v-model="info.jobCompanyScale" border="none" placeholder="请输入企业信用代码"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="所属行业" prop="jobCompanyIndustry" borderBottom labelWidth="80" ref="item1">
|
||
<u--input v-model="info.jobCompanyIndustry" border="none" placeholder="请输入所属行业"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="企业性质" prop="jobCompanyNature" borderBottom labelWidth="80" ref="item1">
|
||
<u--input v-model="info.jobCompanyNature" border="none" placeholder="请输入企业性质"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="企业介绍" prop="jobCompanyDescription" borderBottom labelWidth="80" ref="item1">
|
||
<!-- <u--input v-model="info.jobCompanyDescription" border="none" placeholder="请输入企业介绍"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon> -->
|
||
</u-form-item>
|
||
<view>
|
||
<u--textarea v-model="info.jobCompanyDescription" placeholder="请输入企业介绍" count height="100" maxlength="200"></u--textarea>
|
||
</view>
|
||
<u-form-item label="联系人" prop="callName" borderBottom labelWidth="80" ref="item1">
|
||
<u--input v-model="info.callName" border="none" placeholder="请输入联系人"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="手机号" prop="callTel" borderBottom labelWidth="80" ref="item1">
|
||
<u--input v-model="info.callTel" border="none" placeholder="请输入手机号"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="座机" prop="callNumber" borderBottom labelWidth="80" ref="item1">
|
||
<u--input v-model="info.callNumber" border="none" placeholder="请输入座机"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="详细地址" prop="address" borderBottom labelWidth="80" ref="item1">
|
||
<u--input v-model="info.address" border="none" placeholder="请输入详细地址"></u--input>
|
||
</u-form-item>
|
||
<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
|
||
</u--form>
|
||
<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
|
||
<u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button>
|
||
<u-picker :show="showWage" ref="wagePicker" :columns="wageColumns" @confirm="wageConfirm"
|
||
@cancel="wageClose" @close="wageClose">
|
||
</u-picker>
|
||
<u-picker :show="showTrade" ref="tradePicker" keyName="name" :columns="tradeColumns" @confirm="tradeConfirm"
|
||
@cancel="tradeClose" @close="tradeClose">
|
||
</u-picker>
|
||
<u-picker :show="showSkills" ref="skillPicker" keyName="name" :columns="skillColumns"
|
||
@confirm="skillConfirm" @cancel="skillClose" @close="skillClose">
|
||
</u-picker>
|
||
<!-- <u-picker :show="showNature" ref="naturePicker" :columns="natureColumns"
|
||
@confirm="natureConfirm" @cancel="natureClose" @close="natureClose">
|
||
</u-picker> -->
|
||
<u-picker :show="showAge" ref="agePicker" keyName="label" :columns="ageColumns"
|
||
@confirm="ageConfirm" @cancel="ageClose" @close="ageClose">
|
||
</u-picker>
|
||
<u-picker :show="showEdu" ref="eduPicker" keyName="label" :columns="eduColumns"
|
||
@confirm="eduConfirm" @cancel="eduClose" @close="eduClose">
|
||
</u-picker>
|
||
<u-picker :show="showExpe" ref="expePicker" keyName="label" :columns="expeColumns"
|
||
@confirm="expeConfirm" @cancel="expeClose" @close="expeClose">
|
||
</u-picker>
|
||
<u-datetime-picker :show="showStime" :value="birthday" mode="date" closeOnClickOverlay
|
||
@confirm="stimeConfirm" @cancel="stimeClose" @close="stimeClose"></u-datetime-picker>
|
||
<u-datetime-picker :show="showEtime" :value="birthday" mode="date" closeOnClickOverlay
|
||
@confirm="etimeConfirm" @cancel="etimeClose" @close="etimeClose"></u-datetime-picker>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import dic from '@/common/dic.js'
|
||
import { submitInfo } from '@/api/userrecruit.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
latitude: 31.05, //中心点
|
||
longitude: 104.20,
|
||
covers: [{ //marker标记位置
|
||
id: 0,
|
||
latitude: 0,
|
||
longitude: 0,
|
||
// width:30,
|
||
// height:30,
|
||
iconPath: '../../../static/img/location.png'
|
||
}],
|
||
value2: '招工内容',
|
||
fileList1: [],
|
||
disabled1: false,
|
||
tips: '',
|
||
value: '',
|
||
showCalendar: false,
|
||
showStime: false,
|
||
showEtime: false,
|
||
info: {
|
||
jobName: '', // 招工名称
|
||
stime: '', // 发布时间
|
||
etime: '', // 结束时间
|
||
peopleNum: '', // 招聘人数
|
||
wage: '', // 参考工资
|
||
tradeId: '', // 行业类型id
|
||
tradeNames: '', // 行业类型名称
|
||
worktypeIds: '', // 工种一级id
|
||
skillIds: '', // 工种二级id
|
||
worktypeNames: '', // 工种名称
|
||
skillNames: '', // 工种二级名称
|
||
jobDescription: '', // 任务描述
|
||
// userNature: '', // 人员属性
|
||
ageDesc: '', // 年龄要求
|
||
education: '', // 学历要求
|
||
educationLabel: '', // 学历要求前端显示
|
||
experienceDesc: '', // 经验要求
|
||
jobCompanyName: '', // 企业名称
|
||
jobCompanyScale: '', // 企业信用代码
|
||
jobCompanyIndustry: '', // 所属行业
|
||
jobCompanyNature: '', // 企业性质
|
||
jobCompanyDescription: '', // 企业介绍
|
||
callName: '', // 联系人
|
||
callTel: '', // 手机号
|
||
callNumber: '', // 座机
|
||
address: '', // 公司详细地址
|
||
// userInfo: {
|
||
// name: '楼兰',
|
||
// sex: '',
|
||
// birthday: ''
|
||
// },
|
||
// radiovalue1: '苹果',
|
||
// checkboxValue1: [],
|
||
// intro: '',
|
||
// code: ''
|
||
},
|
||
showWage: false, // 参考工资选项是否展示
|
||
showTrade: false, // 行业类型是否显示
|
||
showSkills: false, // 工种类型是否显示
|
||
showNature: false, // 人员属性
|
||
showAge: false, // 年龄要求
|
||
showEdu: false, // 学历要求
|
||
showExpe: false, // 经验要求
|
||
birthday: Number(new Date()),
|
||
wageColumns: dic.taskSalary,
|
||
tradeColumns: dic.tradeArr,
|
||
skillColumns: [],
|
||
natureColumns: dic.natureArr,
|
||
ageColumns: dic.ageArr,
|
||
eduColumns: dic.eduArr,
|
||
expeColumns: dic.expeArr,
|
||
rules: {
|
||
'userInfo.name': [{
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写姓名',
|
||
trigger: ['blur', 'change']
|
||
}, {
|
||
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
||
validator: (rule, value, callback) => {
|
||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||
return uni.$u.test.chinese(value);
|
||
},
|
||
message: "姓名必须为中文",
|
||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
||
trigger: ["change", "blur"],
|
||
}],
|
||
code: {
|
||
type: 'string',
|
||
required: true,
|
||
len: 4,
|
||
message: '请填写4位验证码',
|
||
trigger: ['blur']
|
||
},
|
||
'userInfo.sex': {
|
||
type: 'string',
|
||
max: 1,
|
||
required: true,
|
||
message: '请选择男或女',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
radiovalue1: {
|
||
type: 'string',
|
||
min: 1,
|
||
max: 2,
|
||
message: '橙子有毒',
|
||
trigger: ['change']
|
||
},
|
||
checkboxValue1: {
|
||
type: 'array',
|
||
min: 2,
|
||
required: true,
|
||
message: '不能太宅，至少选两项',
|
||
trigger: ['change']
|
||
},
|
||
intro: {
|
||
type: 'string',
|
||
min: 3,
|
||
required: true,
|
||
message: '不低于3个字',
|
||
trigger: ['change']
|
||
},
|
||
hotel: {
|
||
type: 'string',
|
||
min: 2,
|
||
required: true,
|
||
message: '请选择住店时间',
|
||
trigger: ['change']
|
||
},
|
||
'userInfo.birthday': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择生日',
|
||
trigger: ['change']
|
||
},
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
wageConfirm(e) {
|
||
const {
|
||
value
|
||
} = e
|
||
this.info.wage = value[0]
|
||
this.showWage = false
|
||
},
|
||
tradeConfirm(e) {
|
||
const { value } = e
|
||
this.info.tradeId = value[0].id
|
||
this.info.tradeNames = value[0].name
|
||
this.showTrade = false
|
||
},
|
||
skillConfirm() {
|
||
this.showSkills = false
|
||
},
|
||
// natureConfirm(e) {
|
||
// const { value } = e
|
||
// this.info.userNature = value[0]
|
||
// this.showNature = false
|
||
// },
|
||
ageConfirm(e) {
|
||
const { value } = e
|
||
this.info.ageDesc = value[0].label
|
||
this.showAge = false
|
||
},
|
||
eduConfirm(e) {
|
||
const { value } = e
|
||
this.info.education = value[0].value
|
||
this.info.educationLabel = value[0].label
|
||
this.showEdu = false
|
||
},
|
||
expeConfirm(e) {
|
||
const { value } = e
|
||
this.info.experienceDesc = value[0].label
|
||
this.showExpe = false
|
||
},
|
||
expeClose() {
|
||
this.showExpe = false
|
||
},
|
||
eduClose() {
|
||
this.showEdu = false
|
||
},
|
||
ageClose() {
|
||
this.showAge = false
|
||
},
|
||
// natureClose() {
|
||
// this.showNature = false
|
||
// },
|
||
skillClose() {
|
||
this.showSkills = false
|
||
},
|
||
wageClose(e) {
|
||
this.showWage = false
|
||
},
|
||
tradeClose(e) {
|
||
this.showTrade = false
|
||
},
|
||
sexSelect(e) {
|
||
this.info.userInfo.sex = e.name
|
||
this.$refs.form1.validateField('userInfo.sex')
|
||
},
|
||
change(e) {
|
||
// console.log(e);
|
||
},
|
||
formatter(day) {
|
||
const d = new Date()
|
||
let month = d.getMonth() + 1
|
||
const date = d.getDate()
|
||
if (day.month == month && day.day == date + 3) {
|
||
day.bottomInfo = '有优惠'
|
||
day.dot = true
|
||
}
|
||
return day
|
||
},
|
||
calendarConfirm(e) {
|
||
this.showCalendar = false
|
||
this.info.hotel = `${e[0]} / ${e[e.length - 1]}`
|
||
this.$refs.form1.validateField('hotel')
|
||
},
|
||
codeChange(text) {
|
||
this.tips = text;
|
||
},
|
||
getCode() {
|
||
if (this.$refs.uCode.canGetCode) {
|
||
// 模拟向后端请求验证码
|
||
uni.showLoading({
|
||
title: '正在获取验证码'
|
||
})
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
uni.$u.toast('验证码已发送');
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start();
|
||
}, 2000);
|
||
} else {
|
||
uni.$u.toast('倒计时结束后再发送');
|
||
}
|
||
},
|
||
calendarClose() {
|
||
this.showCalendar = false
|
||
this.$refs.form1.validateField('hotel')
|
||
},
|
||
stimeClose() {
|
||
this.showStime = false
|
||
this.$refs.form1.validateField('userInfo.birthday')
|
||
},
|
||
stimeConfirm(e) {
|
||
this.showStime = false
|
||
this.info.stime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd') + ' 00:00:00'
|
||
this.$refs.form1.validateField('userInfo.birthday')
|
||
},
|
||
etimeClose() {
|
||
this.showEtime = false
|
||
this.$refs.form1.validateField('userInfo.birthday')
|
||
},
|
||
etimeConfirm(e) {
|
||
this.showEtime = false
|
||
this.info.etime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd') + ' 23:59:59'
|
||
this.$refs.form1.validateField('userInfo.birthday')
|
||
},
|
||
submit() {
|
||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||
// this.$refs.form1.validate().then(res => {
|
||
// uni.$u.toast('校验通过')
|
||
// }).catch(errors => {
|
||
// uni.$u.toast('校验失败')
|
||
// })
|
||
this.info.jobType = 1
|
||
let that = this
|
||
submitInfo(this.info).then(res => {
|
||
if(res.data.code == 200) {
|
||
that.reset()
|
||
uni.$u.toast('发布成功')
|
||
}
|
||
})
|
||
},
|
||
reset() {
|
||
const validateList = [
|
||
'jobName',
|
||
'stime',
|
||
'etime',
|
||
'peopleNum',
|
||
'wage',
|
||
'tradeId',
|
||
'tradeNames',
|
||
'worktypeIds',
|
||
'skillIds',
|
||
'worktypeNames',
|
||
'skillNames',
|
||
'jobDescription',
|
||
'ageDesc',
|
||
'education',
|
||
'educationLabel',
|
||
'experienceDesc',
|
||
'jobCompanyName',
|
||
'jobCompanyScale',
|
||
'jobCompanyIndustry',
|
||
'jobCompanyNature',
|
||
'jobCompanyDescription',
|
||
'callName',
|
||
'callTel',
|
||
'callNumber',
|
||
'address'
|
||
]
|
||
this.$refs.form1.resetFields()
|
||
this.$refs.form1.clearValidate()
|
||
setTimeout(() => {
|
||
this.$refs.form1.clearValidate(validateList)
|
||
// 或者使用 this.$refs.form1.clearValidate()
|
||
}, 10)
|
||
},
|
||
hideKeyboard() {
|
||
uni.hideKeyboard()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.map {
|
||
width: 100%;
|
||
height: 350rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
</style>
|