|
|
|
|
@ -4,54 +4,76 @@ |
|
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
|
<div class="cardtitle"> |
|
|
|
|
<div class="cardline"></div> |
|
|
|
|
<div class="cardtext">新增招聘</div> |
|
|
|
|
<div class="cardtext">{{ form.jobId ? '修改' : '新增' }}招聘</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="cardBtn" @click="backlist">{{ '< 返回' }}</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 表单 --> |
|
|
|
|
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="formclass"> |
|
|
|
|
<el-form-item label="职位名称：" prop="name"> |
|
|
|
|
<el-input v-model="form.name"></el-input> |
|
|
|
|
<el-form-item label="职位名称：" prop="title"> |
|
|
|
|
<el-input v-model="form.title" placeholder="请输入职位名称"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="经验要求：" prop="name"> |
|
|
|
|
<el-input v-model="form.name"></el-input> |
|
|
|
|
<!-- 工作地点 --> |
|
|
|
|
<el-form-item label="工作地点" prop="city" class="citybox"> |
|
|
|
|
<el-input v-model="form.city" v-show="false"></el-input> |
|
|
|
|
<v-distpicker |
|
|
|
|
@province="onChangeProvince" |
|
|
|
|
@city="onChangeCity" |
|
|
|
|
:placeholders="placeholders" |
|
|
|
|
:province="province" |
|
|
|
|
:city="city" |
|
|
|
|
hide-area |
|
|
|
|
></v-distpicker> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="招聘人数：" prop="name" class="littleBox"> |
|
|
|
|
<el-input v-model="form.name"></el-input> |
|
|
|
|
<el-form-item label="经验要求：" prop="experience"> |
|
|
|
|
<el-input v-model="form.experience" placeholder="请输入经验要求"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="工作方式：" prop="name" class="littleBox"> |
|
|
|
|
<el-select v-model="form.region" placeholder="请选择活动区域"> |
|
|
|
|
<el-option label="全职" value="全职"></el-option> |
|
|
|
|
<el-option label="兼职" value="兼职"></el-option> |
|
|
|
|
<el-form-item label="招聘人数：" prop="personCount" class="littleBox"> |
|
|
|
|
<el-input min="1" type="number" v-model="form.personCount" placeholder="请输入招聘人数"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="工作方式：" prop="jobType" class="littleBox"> |
|
|
|
|
<el-select v-model="form.jobType" placeholder="请选择工作方式"> |
|
|
|
|
<el-option label="全职" :value="0"></el-option> |
|
|
|
|
<el-option label="兼职" :value="1"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="学历要求：" prop="name" class="littleBox"> |
|
|
|
|
<el-select v-model="form.region" placeholder="请选择活动区域"> |
|
|
|
|
<el-form-item label="学历要求：" prop="education" class="littleBox"> |
|
|
|
|
<el-select v-model="form.education" placeholder="请选择学历要求"> |
|
|
|
|
<el-option label="硕士" value="硕士"></el-option> |
|
|
|
|
<el-option label="本科" value="本科"></el-option> |
|
|
|
|
<el-option label="专科" value="专科"></el-option> |
|
|
|
|
<el-option label="不限学历" value="不限学历"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="福利：" prop="name"> |
|
|
|
|
<el-select v-model="form.region" multiple placeholder="请选择活动区域"> |
|
|
|
|
<el-option label="硕士" value="硕士"></el-option> |
|
|
|
|
<el-option label="本科" value="本科"></el-option> |
|
|
|
|
<el-option label="专科" value="专科"></el-option> |
|
|
|
|
<el-option label="不限学历" value="不限学历"></el-option> |
|
|
|
|
<el-form-item label="福利：" prop="welfare"> |
|
|
|
|
<el-select v-model="form.welfare" multiple placeholder="请选择福利"> |
|
|
|
|
<el-option label="五险一金" value="五险一金"></el-option> |
|
|
|
|
<el-option label="餐饮福利" value="餐饮福利"></el-option> |
|
|
|
|
<el-option label="住房福利" value="住房福利"></el-option> |
|
|
|
|
<el-option label="带薪休假" value="带薪休假"></el-option> |
|
|
|
|
<el-option label="节日福利" value="节日福利"></el-option> |
|
|
|
|
<el-option label="生日福利" value="生日福利"></el-option> |
|
|
|
|
<el-option label="健康体检" value="健康体检"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="入职企业：" prop="name"> |
|
|
|
|
<el-input v-model="form.name"></el-input> |
|
|
|
|
<el-form-item label="入职企业：" prop="company"> |
|
|
|
|
<el-input v-model="form.company" placeholder="请输入入职企业"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="职位描述：" prop="name"> |
|
|
|
|
<el-input v-model="form.name" type="textarea"></el-input> |
|
|
|
|
<el-form-item label="职位描述：" prop="jobDesc" class="jobDesc"> |
|
|
|
|
<quill-editor |
|
|
|
|
class="ql-editor" |
|
|
|
|
v-model="editContent" |
|
|
|
|
ref="myQuillEditor" |
|
|
|
|
:options="editorOption" |
|
|
|
|
@change="onEditorChange($event)" |
|
|
|
|
> |
|
|
|
|
</quill-editor> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="薪资范围：" prop="name"> |
|
|
|
|
<el-input v-model="form.name"></el-input> |
|
|
|
|
<el-form-item label="薪资范围：" prop="emolument"> |
|
|
|
|
<el-input v-model="form.emolument" placeholder="请输入入职企业"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="" prop="name"> |
|
|
|
|
<div class="subJob">保存</div> |
|
|
|
|
<el-form-item label=""> |
|
|
|
|
<div class="subJob" @click="subJob">保存</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
</el-card> |
|
|
|
|
@ -59,30 +81,177 @@ |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
|
import { addJob, jobDetailById, editJob } from '@/api/job' |
|
|
|
|
|
|
|
|
|
// 富文本编辑器 |
|
|
|
|
import { quillEditor } from 'vue-quill-editor' //调用编辑器 |
|
|
|
|
import 'quill/dist/quill.core.css' |
|
|
|
|
import 'quill/dist/quill.snow.css' |
|
|
|
|
import 'quill/dist/quill.bubble.css' |
|
|
|
|
import Quill from 'quill' |
|
|
|
|
const fontSizeStyle = Quill.import('attributors/style/size') |
|
|
|
|
fontSizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px'] |
|
|
|
|
Quill.register(fontSizeStyle, true) |
|
|
|
|
const Font = Quill.import('attributors/style/font') |
|
|
|
|
const fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong'] |
|
|
|
|
Font.whitelist = fonts |
|
|
|
|
Quill.register(Font, true) |
|
|
|
|
|
|
|
|
|
const AlignStyle = Quill.import('attributors/style/align') |
|
|
|
|
AlignStyle.whitelist = ['right', 'center', 'justify'] |
|
|
|
|
Quill.register(AlignStyle, true) |
|
|
|
|
|
|
|
|
|
const toolbarOptions = [ |
|
|
|
|
['bold', 'italic', 'underline', 'strike'], |
|
|
|
|
[{ color: [] }, { background: [] }], |
|
|
|
|
[{ align: [] }], |
|
|
|
|
[{ size: fontSizeStyle.whitelist }], |
|
|
|
|
[{ font: fonts }], |
|
|
|
|
[{ header: [1, 2, 3, 4, 5, 6, true] }], |
|
|
|
|
[{ direction: 'ltl' }], |
|
|
|
|
[{ direction: 'rtl' }], |
|
|
|
|
[{ indent: '-1' }, { indent: '+1' }], |
|
|
|
|
[{ list: 'ordered' }, { list: 'bullet' }], |
|
|
|
|
[{ script: 'sub' }, { script: 'super' }], |
|
|
|
|
['blockquote', 'code-block'], |
|
|
|
|
['clean'], |
|
|
|
|
] |
|
|
|
|
// 富文本编辑器 |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
components: { quillEditor }, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
form: {}, |
|
|
|
|
form: { |
|
|
|
|
city: '北京市-北京市', |
|
|
|
|
}, |
|
|
|
|
rules: { |
|
|
|
|
name: [{ required: true, message: '请输入职位名称', trigger: 'blur' }], |
|
|
|
|
title: [{ required: true, message: '请输入职位名称', trigger: 'blur' }], |
|
|
|
|
city: [{ required: true, message: '请输入工作地点', trigger: 'blur' }], |
|
|
|
|
experience: [{ required: true, message: '请输入职位名称', trigger: 'blur' }], |
|
|
|
|
personCount: [{ required: true, message: '请输入招聘人数', trigger: 'blur' }], |
|
|
|
|
jobType: [{ required: true, message: '请选择工作方式', trigger: 'change' }], |
|
|
|
|
education: [{ required: true, message: '请选择学历要求', trigger: 'change' }], |
|
|
|
|
welfare: [{ required: true, message: '请选择福利', trigger: 'blur' }], |
|
|
|
|
company: [{ required: true, message: '请输入入职企业', trigger: 'blur' }], |
|
|
|
|
jobDesc: [{ required: true, message: '请输入职位描述', trigger: 'blur' }], |
|
|
|
|
emolument: [{ required: true, message: '请输入薪资范围', trigger: 'blur' }], |
|
|
|
|
}, |
|
|
|
|
province: '北京市', |
|
|
|
|
city: '北京市', |
|
|
|
|
placeholders: { |
|
|
|
|
province: '--- 省 ----', |
|
|
|
|
city: '--- 市 ---', |
|
|
|
|
}, |
|
|
|
|
editContent: '', //任务描述 |
|
|
|
|
editorOption: { |
|
|
|
|
placeholder: '请在这里输入', |
|
|
|
|
modules: { |
|
|
|
|
toolbar: { |
|
|
|
|
container: toolbarOptions, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() {}, |
|
|
|
|
mounted() { |
|
|
|
|
const id = this.$route.query.id |
|
|
|
|
if (id) { |
|
|
|
|
this.getDetail(id) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
...mapGetters(['userinform']), |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
// 修改获取详情 |
|
|
|
|
getDetail(id) { |
|
|
|
|
jobDetailById(id).then((res) => { |
|
|
|
|
this.form = res.data || {} |
|
|
|
|
if (this.form.city) { |
|
|
|
|
this.province = this.form.city.split('-')[0] |
|
|
|
|
this.city = this.form.city.split('-')[1] |
|
|
|
|
} |
|
|
|
|
this.editContent = this.form.jobDesc |
|
|
|
|
if (this.form.welfare) { |
|
|
|
|
this.form.welfare = this.form.welfare.split(',') |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 返回上一步 |
|
|
|
|
backlist() { |
|
|
|
|
this.$router.push('/console/jobM') |
|
|
|
|
}, |
|
|
|
|
subJob() {}, |
|
|
|
|
// 保存表单 |
|
|
|
|
subJob() { |
|
|
|
|
this.form.jobDesc = this.editContent |
|
|
|
|
this.form.welfare = this.form.welfare.join(',') |
|
|
|
|
this.$refs.form.validate((valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
if (this.form.jobId) { |
|
|
|
|
// 修改 |
|
|
|
|
editJob(this.form).then((res) => { |
|
|
|
|
this.$message.success('修改成功') |
|
|
|
|
this.form = { city: '北京市-北京市' } |
|
|
|
|
this.$router.push('/console/jobM') |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
// 新增 |
|
|
|
|
addJob(this.form).then((res) => { |
|
|
|
|
this.$message.success('新增成功') |
|
|
|
|
this.form = { city: '北京市-北京市' } |
|
|
|
|
this.$router.push('/console/jobM') |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 省 |
|
|
|
|
onChangeProvince(data) { |
|
|
|
|
if (data.value.indexOf('---') == -1) { |
|
|
|
|
this.province = data.value |
|
|
|
|
this.city = '--- 市 ---' |
|
|
|
|
this.form.city = this.province + '-' + this.city |
|
|
|
|
} else { |
|
|
|
|
this.province = '' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 市 |
|
|
|
|
onChangeCity(data) { |
|
|
|
|
if (data.value.indexOf('---') == -1) { |
|
|
|
|
this.city = data.value |
|
|
|
|
this.form.city = this.province + '-' + this.city |
|
|
|
|
} else { |
|
|
|
|
this.city = '' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onEditorChange() { |
|
|
|
|
this.form.jobDesc = this.escapeStringHTML(this.editContent) |
|
|
|
|
}, |
|
|
|
|
escapeStringHTML(content) { |
|
|
|
|
content = content.replace(/</g, '<') |
|
|
|
|
content = content.replace(/>/g, '>') |
|
|
|
|
return content |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
<style scoped> |
|
|
|
|
.jobDesc >>> .quill-editor { |
|
|
|
|
width: 570px; |
|
|
|
|
padding: 0; |
|
|
|
|
} |
|
|
|
|
.jobDesc >>> .ql-container { |
|
|
|
|
height: 150px; |
|
|
|
|
} |
|
|
|
|
.citybox >>> select { |
|
|
|
|
width: 282px !important; |
|
|
|
|
font-size: 14px !important; |
|
|
|
|
} |
|
|
|
|
.littleBox >>> .el-input__inner { |
|
|
|
|
padding: 0 0 0 15px; |
|
|
|
|
} |
|
|
|
|
.clearfix { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
