menduner-admin/src/views/menduner/system/enterprise/message/details/components/job.vue

<template>
  <div class="flex">
    <div>
      <el-input
        v-model="queryParams.name"
        placeholder="职位名称（回车搜索）"
        class="!w-240px"
        clearable
        @keyup.enter="handleRefresh"
        @clear="handleRefresh"
      />
      <el-select v-model="queryParams.fairId" placeholder="招聘会" class="!w-240px ml-10px" clearable @change="handleRefresh">
        <el-option
          v-for="item in jobFairList"
          :key="item.id"
          :label="item.title"
          :value="item.id"
        />
        <template #footer v-if="jobFairList?.length < +jobFairTotal">
          <div class="text-center">
            <el-button type="primary" link @click="handleGetMore">加载更多</el-button>
          </div>
        </template>
      </el-select>
    </div>
    <el-button class="ml-10px" type="success" plain @click="handleRefresh"><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="name">
      <template #default="{ row }">{{ formatName(row.name) }}</template>
    </el-table-column>
    <el-table-column label="招聘会" align="center" prop="jobFairName" />
    <el-table-column label="职位类型" align="center" prop="positionName" />
    <el-table-column label="地区" align="center" prop="areaName">
      <template #default="scope">
        {{ !scope.row.areaId ? '全国' : scope.row.areaName }}
      </template>
    </el-table-column>
    <el-table-column label="薪资" align="center" prop="payFrom">
      <template #default="scope">
        <span v-if="scope.row.payFrom && scope.row.payTo">
          {{ scope.row.payFrom }} - {{ scope.row.payTo }}/{{ payUnit.find(e => e.value === Number(scope.row.payUnit))?.label }}
        </span>
        <span v-else>面议</span>
      </template>
    </el-table-column>
    <el-table-column label="招聘类型" align="center" prop="type">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.MENDUNER_JOB_TYPE" :value="scope.row.type" />
      </template>
    </el-table-column>
    <el-table-column label="要求学历" align="center" prop="eduType">
      <template #default="scope">
        <dict-tag v-if="scope.row.eduType" :type="DICT_TYPE.MENDUNER_EDUCATION_TYPE" :value="scope.row.eduType" />
        <el-tag v-else>学历不限</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="工作经验" align="center" prop="expType">
      <template #default="scope">
        <dict-tag v-if="scope.row.expType" :type="DICT_TYPE.MENDUNER_EXP_TYPE" :value="scope.row.expType" />
        <el-tag v-else>经验不限</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="职位状态" align="center" prop="status">
        <template #default="scope">
          <el-tag v-if="scope.row.status === '99'" type="warning">待支付</el-tag>
          <dict-tag v-else :type="DICT_TYPE.MENDUNER_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
    <el-table-column label="刷新时间" align="center" prop="updateTime" width="180px">
      <template #default="scope">
        {{ timesTampChange(scope.row.updateTime, 'Y-M-D h:m') }}
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button link type="primary" @click="openDetail(scope.row)">详情</el-button>
        <el-button link type="primary" @click="handleActions(scope.row.id, 0)">刷新</el-button>
        <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        <el-button v-if="scope.row.status === '1'" link type="success" @click="handleActions(scope.row.id, 1)">开启</el-button>
        <el-button v-if="scope.row.status === '0'" link type="danger" @click="handleActions(scope.row.id, 2)">关闭</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.jobFairName }}</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 { EnterpriseApi } from '@/api/menduner/system/enterprise/message'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dealDictArrayData } from '@/utils/transform/position'
import { timesTampChange } from '@/utils/transform/date'
import { formatName } from '@/utils'
import { JobFairManageApi } from '@/api/menduner/system/jobFair/manage'

const props = defineProps({
  id: 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,
  name: undefined,
  fairId: undefined,
  enterpriseId: props.id
})
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 EnterpriseApi.getEnterpriseJobPage(queryParams)
    tableData.value = dealDictArrayData([], data.list)
    total.value = data.total
  } finally {
    loading.value = false
  }
}
getList()

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

// 获取招聘会列表
const jobFairTotal = ref(0)
const pageInfo = ref({
  pageNo: 1,
  pageSize: 10
})
const jobFairList = ref([])
const getJobFairList = async () => {
  try {
    const data = await JobFairManageApi.getJobFairPage(pageInfo.value)
    jobFairList.value = jobFairList.value.concat(data.list)
    jobFairTotal.value = data.total 
  } catch {}
}
getJobFairList()

const handleGetMore = () => {
  pageInfo.value.pageNo++
  getJobFairList()
}

// 职位刷新、开启、关闭
const arr = [
  { api: EnterpriseApi.refreshEnterpriseJob, label: '刷新' },
  { api: EnterpriseApi.openEnterpriseJob, label: '开启' },
  { api: EnterpriseApi.closeEnterpriseJob, label: '关闭' }
]
const handleActions = async (id, index) => {
  const obj = arr[index]
  if (!obj || !id) return
  try {
    await message.confirm(`确定${obj.label}该职位吗？`)
    await obj.api([id])
    message.success(obj.label + '成功')
    // 刷新列表
    await getList()
  } catch {}
}

// 富文本去除空格、换行、空标签
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 = (item) => {
  itemData.value = item
  dialogVisible.value = true
}

/** 删除按钮操作 */
const handleDelete = async (id) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await EnterpriseApi.deleteJob(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}
</script>

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