menduner-admin/src/views/menduner/system/jobFair/manage/details/components/job.vue

<template>
  <div class="flex">
    <el-input
      v-model="queryParams.jobName"
      placeholder="职位名称（回车搜索）"
      class="!w-240px"
      clearable
      @keyup.enter="handleRefresh"
      @clear="handleRefresh"
    />
		<el-input
      v-model="queryParams.enterpriseName"
      placeholder="企业全称（回车搜索）"
      class="!w-240px mx-10px"
      clearable
      @keyup.enter="handleRefresh"
      @clear="handleRefresh"
    />
    <!-- <el-button @click="handleRefresh"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> -->
    <!-- <el-button @click="resetQuery" plain><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> -->
    <el-button type="success" @click="handleRefresh" plain><Icon icon="ep:refresh" class="mr-5px" /> 刷新</el-button>
  </div>
  <el-table v-loading="loading" :data="tableData" :stripe="true" class="m-t-20px">
    <el-table-column label="职位名称" align="center" prop="jobName">
      <template #default="{ row }">{{ formatName(row.jobName) }}</template>
    </el-table-column>
		<el-table-column label="企业全称" align="center" prop="enterpriseName">
      <template #default="{ row }">{{ formatName(row.enterpriseName) }}</template>
    </el-table-column>
		<el-table-column label="企业别称" align="center" prop="enterpriseAnotherName">
      <template #default="{ row }">{{ formatName(row.enterpriseAnotherName) }}</template>
    </el-table-column>
		<el-table-column
      label="发布时间"
      align="center"
      prop="createTime"
      :formatter="dateFormatter"
      :show-overflow-tooltip="true"
      width="180px"
    />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button v-if="scope.row.jobId" link type="primary" @click="openDetail(scope.row)">职位详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <Pagination
    :total="total"
    v-model:page="queryParams.pageNo"
    v-model:limit="queryParams.pageSize"
    @pagination="getList"
  />

  <Dialog title="职位详情" v-model="dialogVisible" class="!w-60%">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="职位名称">{{ formatName(itemData.name) }}</el-descriptions-item>
      <el-descriptions-item label="发布企业">{{ itemData.enterpriseName }}</el-descriptions-item>
      <el-descriptions-item label="职位类型">{{ itemData.positionName }}</el-descriptions-item>
      <el-descriptions-item label="地区">{{ !itemData.areaId ? '全国' : itemData.areaName }}</el-descriptions-item>
      <el-descriptions-item label="详细地址">{{ itemData.address }}</el-descriptions-item>
      <el-descriptions-item label="薪资">
        <span v-if="itemData.payFrom && itemData.payTo">
          {{ itemData.payFrom }} - {{ itemData.payTo }}/{{ payUnit.find(e => e.value === Number(itemData.payUnit))?.label }}
        </span>
        <span v-else>面议</span>
      </el-descriptions-item>
      <el-descriptions-item label="招聘类型">
        <dict-tag :type="DICT_TYPE.MENDUNER_JOB_TYPE" :value="itemData.type" />
      </el-descriptions-item>
      <el-descriptions-item label="学历要求">
        <dict-tag v-if="itemData.eduType" :type="DICT_TYPE.MENDUNER_EDUCATION_TYPE" :value="itemData.eduType" />
        <el-tag v-else>学历不限</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="工作经验">
        <dict-tag v-if="itemData.expType" :type="DICT_TYPE.MENDUNER_EXP_TYPE" :value="itemData.expType" />
        <el-tag v-else>经验不限</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="职位状态">
        <el-tag v-if="itemData.status === '99'" type="warning">待支付</el-tag>
        <dict-tag v-else :type="DICT_TYPE.MENDUNER_STATUS" :value="itemData.status" />
      </el-descriptions-item>
      <el-descriptions-item label="发布时间">{{ timesTampChange(itemData.createTime) }}</el-descriptions-item>
      <el-descriptions-item label="刷新时间">{{ timesTampChange(itemData.updateTime) }}</el-descriptions-item>
    </el-descriptions>

		<el-descriptions :column="1" border>
			<el-descriptions-item label="职位关键字">
        <el-tag type="primary" v-for="k in itemData.tagList" :key="k" class="m-r-5px">{{ k }}</el-tag>
      </el-descriptions-item>
			<el-descriptions-item label="岗位职责">
        <div v-html="cleanedHtml(itemData.content)"></div>
      </el-descriptions-item>
      <el-descriptions-item label="岗位要求">
        <div v-html="cleanedHtml(itemData.requirement)"></div>
      </el-descriptions-item>
		</el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible = false; itemData = {}">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup>
defineOptions({ name: 'EnterpriseUserList'})
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dealDictObjData } from '@/utils/transform/position'
import { timesTampChange } from '@/utils/transform/date'
import { formatName } from '@/utils'
import { dateFormatter } from '@/utils/formatTime'
import { JobFairManageApi } from '@/api/menduner/system/jobFair/manage'
import { JobAdvertisedApi } from '@/api/menduner/system/job'

const props = defineProps({
  fairId: String
})

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  jobName: undefined,
	enterpriseName: undefined,
  jobFairId: props.fairId
})
const payUnit = getIntDictOptions(DICT_TYPE.MENDUNER_PAY_UNIT)
const dialogVisible = ref(false)
const itemData = ref({})

// 职位列表
const getList = async () => {
  loading.value = true
  try {
    const data = await JobFairManageApi.getJobFairEnterpriseJobs(queryParams)
    tableData.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
getList()

const handleRefresh = () => {
  queryParams.pageNo = 1
  getList()
}

const resetQuery = () => {
	queryParams.jobName = undefined
	queryParams.enterpriseName = undefined
	handleRefresh()
}

// 富文本去除空格、换行、空标签
const cleanedHtml = (text) => {
  let cleaned = text.replace(/\n/g, '</br>')
  cleaned = cleaned.replace(/\s+/g, ' ').trim()
  cleaned = cleaned.replace(/(^|\s+)<\/p>(\s*<p>|$)/g, '</p><p>').trim()
  cleaned = cleaned.replace(/<p>\s*(<br>)\s*<\/p>/g, '')
  cleaned = cleaned.replace(/<p>\s*(<\/br>)\s*<\/p>/g, '')
  return cleaned
}

// 职位详情
const openDetail = async (item) => {
	try {
		const data = await JobAdvertisedApi.getJobAdvertised(item.jobId)
		itemData.value = {
			enterpriseName: formatName(item.enterpriseAnotherName || item.enterpriseName),
			...dealDictObjData({}, data)
		}
		dialogVisible.value = true
	} catch {}
}
</script>

<style scoped lang="scss">
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 100px;
}
</style>