632 lines
19 KiB
Vue
632 lines
19 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import {
|
||
useGetJobById,
|
||
useUpdateJob,
|
||
useUpdateJobSetting
|
||
} from '@/api/recruitment'
|
||
import {
|
||
useGetImagesList,
|
||
useGetBackgroundList,
|
||
useGetLogoList
|
||
} from '@/api/interview'
|
||
import { Upload, Picture } from '@element-plus/icons-vue'
|
||
import { useCompanyStore, useUserStore } from '@/stores'
|
||
import { pcaTextArr } from 'element-china-area-data'
|
||
import { useGetTypeListByType } from '@/api/question'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const region_data = ref()
|
||
region_data.value = pcaTextArr
|
||
const companyStore = useCompanyStore()
|
||
const emit = defineEmits(['getJobSettingList'])
|
||
const userStore = useUserStore()
|
||
const enditDialog = ref(false)
|
||
const active = ref(0)
|
||
const FormModel = ref({
|
||
id: '',
|
||
jobName: '',
|
||
address: [],
|
||
addressDetail: '',
|
||
details: '',
|
||
startTime: '',
|
||
endTime: '',
|
||
minSalary: '',
|
||
maxSalary: '',
|
||
minNumber: '',
|
||
maxNumber: '',
|
||
requirement: 1,
|
||
jobType: 1,
|
||
jobTips: [],
|
||
userId: '',
|
||
encoding: ''
|
||
})
|
||
const rules = {
|
||
jobName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
|
||
details: [{ required: true, message: '请输入岗位详情', trigger: 'blur' }],
|
||
address: [{ required: true, message: '请选择工作地址', trigger: 'blur' }],
|
||
startTime: [{ required: true, message: '请选择工作时间', trigger: 'blur' }],
|
||
minNumber: [{ required: true, message: '请输入招聘人数', trigger: 'blur' }],
|
||
minSalary: [{ required: true, message: '请输入薪资', trigger: 'blur' }],
|
||
jobTips: [{ required: true, message: '请输入/选择岗位标签', trigger: 'blur' }]
|
||
}
|
||
|
||
const submitFormModel = ref({
|
||
jobId: '',
|
||
imagesId: '',
|
||
backgroundId: '',
|
||
logoId: '',
|
||
professional: '',
|
||
comprehensive: '',
|
||
psychology: '',
|
||
userId: '',
|
||
encoding: '',
|
||
jobPromote: ''
|
||
})
|
||
|
||
const openProfessional = ref('0')
|
||
const openComprehensive = ref('0')
|
||
const openPsychology = ref('0')
|
||
|
||
const professionalList = ref([])
|
||
const comprehensiveList = ref([])
|
||
const psychologyList = ref([])
|
||
|
||
const imagesList = ref([])
|
||
const backgroundList = ref([])
|
||
const logoList = ref([])
|
||
|
||
const tips = ref([
|
||
{
|
||
value: 'HTML',
|
||
label: 'HTML'
|
||
},
|
||
{
|
||
value: 'CSS',
|
||
label: 'CSS'
|
||
},
|
||
{
|
||
value: 'JavaScript',
|
||
label: 'JavaScript'
|
||
}
|
||
])
|
||
|
||
const open = async (row) => {
|
||
submitFormModel.value = row
|
||
console.log(submitFormModel.value)
|
||
enditDialog.value = true
|
||
const res = await useGetJobById(row.jobId)
|
||
FormModel.value = res.data.data
|
||
FormModel.value.address = FormModel.value.address.slice(1, -1).split(', ')
|
||
FormModel.value.jobTips = FormModel.value.jobTips.slice(1, -1).split(', ')
|
||
FormModel.value.addressDetail = res.data.data.addressDetail
|
||
FormModel.value.encoding = companyStore.encoding
|
||
FormModel.value.userId = userStore.userInfo.id
|
||
if (submitFormModel.value.professional !== 0) {
|
||
openProfessional.value = '1'
|
||
}
|
||
if (submitFormModel.value.comprehensive !== 0) {
|
||
openComprehensive.value = '1'
|
||
}
|
||
if (submitFormModel.value.psychology !== 0) {
|
||
openPsychology.value = '1'
|
||
}
|
||
if (submitFormModel.value.professional === 0) {
|
||
submitFormModel.value.professional = ''
|
||
}
|
||
if (submitFormModel.value.comprehensive === 0) {
|
||
submitFormModel.value.comprehensive = ''
|
||
}
|
||
if (submitFormModel.value.psychology === 0) {
|
||
submitFormModel.value.psychology = ''
|
||
}
|
||
}
|
||
|
||
const handleEndit = async () => {
|
||
const res = await useUpdateJob(FormModel.value)
|
||
ElMessage.success(res.data.data)
|
||
}
|
||
const handleProfessional = async () => {
|
||
const res = await useGetTypeListByType(FormModel.value.encoding, 1)
|
||
professionalList.value = res.data.data
|
||
console.log(res)
|
||
}
|
||
const handleComprehensive = async () => {
|
||
const res = await useGetTypeListByType(FormModel.value.encoding, 2)
|
||
comprehensiveList.value = res.data.data
|
||
console.log(res)
|
||
}
|
||
const handlePsychology = async () => {
|
||
const res = await useGetTypeListByType(FormModel.value.encoding, 3)
|
||
psychologyList.value = res.data.data
|
||
console.log(res)
|
||
}
|
||
const next = async () => {
|
||
if (active.value === 0) {
|
||
const res = await useGetImagesList(FormModel.value.encoding)
|
||
imagesList.value = res.data.data
|
||
console.log(imagesList.value)
|
||
}
|
||
if (active.value === 1) {
|
||
if (!submitFormModel.value.imagesId) {
|
||
ElMessage.error('请选择面试官形象！')
|
||
return
|
||
}
|
||
const res = await useGetBackgroundList(FormModel.value.encoding)
|
||
backgroundList.value = res.data.data
|
||
}
|
||
if (active.value === 2) {
|
||
if (!submitFormModel.value.backgroundId) {
|
||
ElMessage.error('请选择面试背景图片！')
|
||
return
|
||
}
|
||
const res = await useGetLogoList(FormModel.value.encoding)
|
||
logoList.value = res.data.data
|
||
}
|
||
if (active.value === 3) {
|
||
if (!submitFormModel.value.logoId) {
|
||
ElMessage.error('请选择公司logo！')
|
||
return
|
||
}
|
||
|
||
const res = await useGetLogoList(FormModel.value.encoding)
|
||
logoList.value = res.data.data
|
||
handleProfessional()
|
||
handleComprehensive()
|
||
handlePsychology()
|
||
}
|
||
if (active.value === 4) {
|
||
if (
|
||
openProfessional.value === '0' &&
|
||
openComprehensive.value === '0' &&
|
||
openPsychology.value === '0'
|
||
) {
|
||
ElMessage.error('请至少选择一个题库')
|
||
return
|
||
}
|
||
}
|
||
|
||
active.value = active.value + 1
|
||
}
|
||
const before = () => {
|
||
active.value = active.value - 1
|
||
}
|
||
const submit = async () => {
|
||
if (submitFormModel.value.professional === '') {
|
||
submitFormModel.value.professional = 0
|
||
}
|
||
if (submitFormModel.value.comprehensive === '') {
|
||
submitFormModel.value.comprehensive = 0
|
||
}
|
||
if (submitFormModel.value.psychology === '') {
|
||
submitFormModel.value.psychology = 0
|
||
}
|
||
|
||
submitFormModel.value.userId = userStore.userInfo.id
|
||
console.log(submitFormModel.value)
|
||
const res = await useUpdateJobSetting(submitFormModel.value)
|
||
ElMessage.success(res.data.data)
|
||
console.log(submitFormModel.value)
|
||
active.value = 0
|
||
enditDialog.value = false
|
||
|
||
emit('getJobSettingList')
|
||
}
|
||
defineExpose({
|
||
open
|
||
})
|
||
</script>
|
||
<template>
|
||
<el-dialog v-model="enditDialog" title="岗位面试设置" width="50%">
|
||
<el-scrollbar height="600px">
|
||
<el-steps :space="200" :active="active" simple finish-status="success">
|
||
<el-step title="修改岗位信息" :icon="Upload" />
|
||
<el-step title="选择形象" :icon="Picture" />
|
||
<el-step title="选择背景" :icon="Picture" />
|
||
<el-step title="选择logo" :icon="Picture" />
|
||
<el-step title="选择题库" :icon="Picture" />
|
||
<el-step title="填写岗位promote" :icon="Picture" />
|
||
</el-steps>
|
||
<div v-if="active === 0">
|
||
<el-form
|
||
ref="form"
|
||
label-width="150px"
|
||
style="padding-right: 30px; padding-top: 5%"
|
||
:model="FormModel"
|
||
:rules="rules"
|
||
>
|
||
<el-form-item label="岗位名称" prop="jobName">
|
||
<el-input
|
||
v-model="FormModel.jobName"
|
||
placeholder="请输入岗位名称"
|
||
id="jobName"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="岗位详情" prop="details">
|
||
<el-input
|
||
v-model="FormModel.details"
|
||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||
type="textarea"
|
||
placeholder="请输入岗位详情"
|
||
id="details"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="工作地址" prop="address">
|
||
<el-cascader
|
||
v-model="FormModel.address"
|
||
:options="region_data"
|
||
placeholder="请选择地址"
|
||
/>
|
||
<el-input
|
||
style="width: 50%; padding-left: 5%"
|
||
v-model="FormModel.addressDetail"
|
||
placeholder="请输入详细地址"
|
||
id="address"
|
||
></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="工作时间" prop="startTime">
|
||
<div>
|
||
<el-time-select
|
||
v-model="FormModel.startTime"
|
||
:max-time="FormModel.endTime"
|
||
class="mr-4"
|
||
placeholder="上班时间"
|
||
start="06:30"
|
||
step="00:30"
|
||
end="22:00"
|
||
/>
|
||
-
|
||
<el-time-select
|
||
v-model="FormModel.endTime"
|
||
:min-time="FormModel.startTime"
|
||
placeholder="下班时间"
|
||
start="06:30"
|
||
step="00:30"
|
||
end="22:00"
|
||
/>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="人数要求" prop="minNumber">
|
||
<el-input
|
||
style="width: 30%"
|
||
v-model="FormModel.minNumber"
|
||
placeholder="请输入最低人数--10"
|
||
id="min_number"
|
||
></el-input>
|
||
-
|
||
<el-input
|
||
style="width: 30%"
|
||
v-model="FormModel.maxNumber"
|
||
placeholder="请输入最高人数--200"
|
||
id="max_number"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="薪资" prop="minSalary">
|
||
<el-input
|
||
style="width: 30%"
|
||
v-model="FormModel.minSalary"
|
||
placeholder="请输入最低薪资--5k"
|
||
id="min_salary"
|
||
></el-input>
|
||
-
|
||
<el-input
|
||
style="width: 30%"
|
||
v-model="FormModel.maxSalary"
|
||
placeholder="请输入最高薪资--10k"
|
||
id="max_salary"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="学历要求" prop="requetment">
|
||
<el-radio-group v-model="FormModel.requirement">
|
||
<el-radio :label="1">无学历要求</el-radio>
|
||
<el-radio :label="2">小学/初中</el-radio>
|
||
<el-radio :label="3">高中/中专</el-radio>
|
||
<el-radio :label="4">大专及以上</el-radio>
|
||
<el-radio :label="5">本科及以上</el-radio>
|
||
<el-radio :label="6">研究生及以上</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="岗位类型" prop="jobType">
|
||
<el-radio-group v-model="FormModel.jobType">
|
||
<el-radio :label="1">行政</el-radio>
|
||
<el-radio :label="2">财务</el-radio>
|
||
<el-radio :label="3">技术</el-radio>
|
||
<el-radio :label="4">销售</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="岗位tips" prop="jobTips">
|
||
<el-select
|
||
v-model="FormModel.jobTips"
|
||
multiple
|
||
filterable
|
||
allow-create
|
||
default-first-option
|
||
:reserve-keyword="false"
|
||
placeholder="请选择岗位或添加标签"
|
||
>
|
||
<el-option
|
||
v-for="item in tips"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="text-align: center">
|
||
<el-button type="primary" @click="handleEndit">保存修改</el-button>
|
||
</div>
|
||
</div>
|
||
<div :style="{ marginTop: '20px' }" v-if="active === 1">
|
||
<p>请选择面试官形象</p>
|
||
<a-radio-group v-model="submitFormModel.imagesId">
|
||
<template v-for="item in imagesList" :key="item.id">
|
||
<a-radio :value="item.id">
|
||
<template #radio="{ checked }">
|
||
<a-space
|
||
align="start"
|
||
class="custom-radio-card"
|
||
:class="{ 'custom-radio-card-checked': checked }"
|
||
>
|
||
<div className="custom-radio-card-mask">
|
||
<div className="custom-radio-card-mask-dot" />
|
||
</div>
|
||
<div>
|
||
<div className="custom-radio-card-title">
|
||
{{ item.picName }}
|
||
</div>
|
||
<a-image
|
||
width="200"
|
||
height="200"
|
||
:preview="false"
|
||
:src="item.image"
|
||
/>
|
||
</div>
|
||
</a-space>
|
||
</template>
|
||
</a-radio>
|
||
</template>
|
||
</a-radio-group>
|
||
</div>
|
||
<div :style="{ marginTop: '20px' }" v-if="active === 2">
|
||
<p>请选择面试背景图片</p>
|
||
<a-radio-group v-model="submitFormModel.backgroundId">
|
||
<template v-for="item in backgroundList" :key="item.id">
|
||
<a-radio :value="item.id">
|
||
<template #radio="{ checked }">
|
||
<a-space
|
||
align="start"
|
||
class="custom-radio-card"
|
||
:class="{ 'custom-radio-card-checked': checked }"
|
||
>
|
||
<div className="custom-radio-card-mask">
|
||
<div className="custom-radio-card-mask-dot" />
|
||
</div>
|
||
<div>
|
||
<div className="custom-radio-card-title">
|
||
{{ item.picName }}
|
||
</div>
|
||
<a-image
|
||
width="200"
|
||
height="200"
|
||
:preview="false"
|
||
:src="item.image"
|
||
/>
|
||
</div>
|
||
</a-space>
|
||
</template>
|
||
</a-radio>
|
||
</template>
|
||
</a-radio-group>
|
||
</div>
|
||
<div :style="{ marginTop: '20px' }" v-if="active === 3">
|
||
<p>请选择公司logo</p>
|
||
<a-radio-group v-model="submitFormModel.logoId">
|
||
<template v-for="item in logoList" :key="item.id">
|
||
<a-radio :value="item.id">
|
||
<template #radio="{ checked }">
|
||
<a-space
|
||
align="start"
|
||
class="custom-radio-card"
|
||
:class="{ 'custom-radio-card-checked': checked }"
|
||
>
|
||
<div className="custom-radio-card-mask">
|
||
<div className="custom-radio-card-mask-dot" />
|
||
</div>
|
||
<div>
|
||
<div className="custom-radio-card-title">
|
||
{{ item.picName }}
|
||
</div>
|
||
<a-image
|
||
width="200"
|
||
height="200"
|
||
:preview="false"
|
||
:src="item.image"
|
||
/>
|
||
</div>
|
||
</a-space>
|
||
</template>
|
||
</a-radio>
|
||
</template>
|
||
</a-radio-group>
|
||
</div>
|
||
<div :style="{ marginTop: '20px' }" v-if="active === 4">
|
||
<p>请选择题库</p>
|
||
<div style="margin-top: 30px">
|
||
<a-card class="card-demo" title="是否开启专业测试？" hoverable>
|
||
<template #extra>
|
||
<a-switch
|
||
v-model="openProfessional"
|
||
checked-value="1"
|
||
unchecked-value="0"
|
||
/>
|
||
</template>
|
||
请选择专业题库 <br />
|
||
<br />
|
||
<el-select
|
||
v-model="submitFormModel.professional"
|
||
clearable
|
||
placeholder="请选择专业题库"
|
||
:disabled="openProfessional === '0' ? true : false"
|
||
>
|
||
<el-option
|
||
v-for="item in professionalList"
|
||
:key="item.id"
|
||
:label="item.typeName"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</a-card>
|
||
</div>
|
||
<div style="margin-top: 30px">
|
||
<a-card class="card-demo" title="是否开启综合测试？" hoverable>
|
||
<template #extra>
|
||
<a-switch
|
||
v-model="openComprehensive"
|
||
checked-value="1"
|
||
unchecked-value="0"
|
||
/>
|
||
</template>
|
||
请选择综合题库 <br />
|
||
<br />
|
||
<el-select
|
||
v-model="submitFormModel.comprehensive"
|
||
clearable
|
||
placeholder="请选择综合题库"
|
||
:disabled="openComprehensive === '0' ? true : false"
|
||
>
|
||
<el-option
|
||
v-for="item in comprehensiveList"
|
||
:key="item.id"
|
||
:label="item.typeName"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</a-card>
|
||
</div>
|
||
<div style="margin-top: 30px">
|
||
<a-card class="card-demo" title="是否开启心理测试？" hoverable>
|
||
<template #extra>
|
||
<a-switch
|
||
v-model="openPsychology"
|
||
checked-value="1"
|
||
unchecked-value="0"
|
||
/>
|
||
</template>
|
||
请选择心理题库 <br />
|
||
<br />
|
||
<el-select
|
||
v-model="submitFormModel.psychology"
|
||
clearable
|
||
placeholder="请选择心理题库"
|
||
:disabled="openPsychology === '0' ? true : false"
|
||
>
|
||
<el-option
|
||
v-for="item in psychologyList"
|
||
:key="item.id"
|
||
:label="item.typeName"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</a-card>
|
||
</div>
|
||
</div>
|
||
<div :style="{ marginTop: '20px' }" v-if="active === 5">
|
||
<p>请输入岗位promote,让面试官更加智能！</p>
|
||
<el-input
|
||
v-model="submitFormModel.jobPromote"
|
||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||
type="textarea"
|
||
placeholder="请输入岗位的promote"
|
||
/>
|
||
</div>
|
||
</el-scrollbar>
|
||
<template #footer>
|
||
<span class="dialog-footer" v-if="active === 0">
|
||
<el-button @click="addEnditDialog = false">取消</el-button>
|
||
<el-button type="primary" @click="next"> 下一步 </el-button>
|
||
</span>
|
||
<span
|
||
class="dialog-footer"
|
||
v-if="active === 1 || active === 2 || active === 3 || active === 4"
|
||
>
|
||
<el-button @click="before">上一步</el-button>
|
||
<el-button type="primary" @click="next"> 下一步 </el-button>
|
||
</span>
|
||
<span class="dialog-footer" v-if="active === 5">
|
||
<el-button @click="before">上一步</el-button>
|
||
<el-button type="primary" @click="submit"> 提交 </el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.select {
|
||
text-align: center;
|
||
padding-top: 10%;
|
||
}
|
||
.custom-radio-card {
|
||
padding: 10px 16px;
|
||
border: 1px solid var(--color-border-2);
|
||
border-radius: 4px;
|
||
width: 250px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.custom-radio-card-mask {
|
||
height: 14px;
|
||
width: 14px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 100%;
|
||
border: 1px solid var(--color-border-2);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.custom-radio-card-mask-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.custom-radio-card-title {
|
||
color: var(--color-text-1);
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.custom-radio-card:hover,
|
||
.custom-radio-card-checked,
|
||
.custom-radio-card:hover .custom-radio-card-mask,
|
||
.custom-radio-card-checked .custom-radio-card-mask {
|
||
border-color: rgb(var(--primary-6));
|
||
}
|
||
|
||
.custom-radio-card-checked {
|
||
background-color: var(--color-primary-light-1);
|
||
}
|
||
|
||
.custom-radio-card:hover .custom-radio-card-title,
|
||
.custom-radio-card-checked .custom-radio-card-title {
|
||
color: rgb(var(--primary-6));
|
||
}
|
||
|
||
.custom-radio-card-checked .custom-radio-card-mask-dot {
|
||
background-color: rgb(var(--primary-6));
|
||
}
|
||
.card-demo {
|
||
width: 360px;
|
||
margin-left: 24px;
|
||
transition-property: all;
|
||
}
|
||
|
||
.card-demo:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
</style>
|