招聘会详情

src/router/modules/remaining.ts

@@ -527,6 +527,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
     name: 'jobFairManage',
     meta: { hidden: true },
     children: [
+      {
+        path: 'jobFair/add',
+        name: 'JobFairAdd',
+        meta: {
+          title: '新增招聘会',
+          noCache: true,
+          hidden: true
+        },
+        component: () => import('@/views/menduner/system/jobFair/manage/details/index.vue')
+      },
       {
         path: 'jobFair/detail/:id',
         name: 'JobFairDetail',

src/views/menduner/system/jobFair/manage/details/components/Category.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="140px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="类别" prop="category" @change="handleChangeCategory">
+        <el-radio-group v-model="formData.category">
+          <el-radio
+            v-for="dict in categoryList"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="类别详情" prop="tag">
+        <el-row v-for="(val, index) in formData.tag" :key="index" class="mb-10px">
+          <el-col :span="8">
+            <el-input v-model="val.title" clearable placeholder="请输入类别名称"/>
+          </el-col>
+          <el-col :span="10" class="mx-10px">
+            <el-select v-model="val.value" filterable multiple placeholder="请选择类别数值" collapse-tags collapse-tags-tooltip>
+              <el-option v-for="k in formData.category === '0' ? enterpriseList : position" :key="k.id" :label="formData.category === '0' ? k.name : k.nameCn" :value="k.id.toString()"/>
+            </el-select>
+          </el-col>
+          <el-col :span="4">
+            <el-button text circle @click="handleDelete(index)">
+              <Icon icon="ep:close" />
+            </el-button>
+          </el-col>
+        </el-row>
+        <div>
+          <el-button type="primary" @click="handleAdd"><Icon class="mr-5px" icon="ep:plus" />添加类别</el-button>
+          <div class="color-red-400 mt-5px">若填写了类别，请最少填写两项</div>
+        </div>
+      </el-form-item>
+    </el-form>
+    
+		<div class="text-right">
+			<el-button @click="emit('close')">返回</el-button>
+			<el-button @click="submitForm" type="primary" :disabled="formLoading">保存</el-button>
+		</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/** 招聘会管理 信息设置 */
+defineOptions({ name: 'JobFairManageInfoSettings' })
+import { JobFairManageApi, JobFairManageVO } from '@/api/menduner/system/jobFair/manage'
+import { PositionApi } from '@/api/menduner/system/position'
+import { JobFairWhiteApi } from '@/api/menduner/system/jobFair/white'
+import { cloneDeep } from 'lodash-es'
+
+const props = defineProps({ formType: String, info: Object, enterpriseList: Array })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  category: '0',
+  tag: []
+})
+const formRules = reactive({
+  category: [{ required: true, message: '展示类别不能为空', trigger: 'blur' }]
+})
+const categoryList = [
+  { label: '企业', value: '0' },
+  { label: '招聘职位', value: '1' }
+]
+const formRef = ref() // 表单 Ref
+
+// 职位类型
+const position = ref([])
+const getPositionList = async () => {
+  const data = await PositionApi.getPositionList({})
+  position.value = data || []
+}
+getPositionList()
+
+onMounted(() => {
+  if (props.info && Object.keys(props.info).length > 0) {
+		formLoading.value = true
+		formData.value = cloneDeep(props.info)
+		if (!formData.value.tag || !formData.value.tag.length) {
+			formData.value.tag = []
+		}
+		formLoading.value = false
+  }
+})
+
+// 切换类别时需将数据清空
+const handleChangeCategory = () => {
+  formData.value.tag.forEach(e => e.value = [])
+}
+
+const handleDelete = (index) => {
+  formData.value.tag.splice(index, 1)
+}
+
+const handleAdd = () => {
+  formData.value.tag.push({ title: '', value: [] })
+}
+
+// 效验内容是否填写完整
+const checkObjectValues = (obj) => {
+  for (let key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (obj[key] === undefined || obj[key] === null || obj[key] === '' || obj[key].length === 0) {
+        return false
+      }
+    }
+  }
+  return true
+}
+
+/** 提交表单 */
+const emit = defineEmits(['close'])
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  
+  if (formData.value?.tag && formData.value?.tag.length > 0) {
+    // 效验类别项是否填写完整
+    const check = formData.value.tag.every(e => checkObjectValues(e))
+    if (!check) return message.warning('请将类别详情中的项填写完整')
+    if (formData.value.tag.length < 2) return message.warning('请至少填写两个类别详情')
+    formData.value.tag.forEach(e => e.key = formData.value.category === '0' ? 'enterpriseId' : 'positionId')
+
+		if (formData.value.category === '0') {
+		  try {
+				await message.confirm('是否要将选中的企业同步到白名单中？')
+				const enterpriseIds = formData.value.tag.map(e => e.value.join(',')).join(',')
+				await JobFairWhiteApi.addJobFairWhiteList({ jobFairId: formData.value.id, enterpriseIds }) 
+			} catch {}
+		}
+  }
+
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as JobFairManageVO
+		await JobFairManageApi.updateJobFair(data)
+		message.success(t('common.updateSuccess'))
+  } finally {
+    formLoading.value = false
+  }
+}
+
+</script>
+
+<style>
+.el-row {
+  width: 100%;
+}
+</style>

src/views/menduner/system/jobFair/manage/details/components/InfoSettings.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="140px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="招聘会标题" prop="title">
+        <el-input v-model="formData.title" :rows="3" type="textarea" placeholder="请输入标题" />
+      </el-form-item>
+      <el-form-item label="招聘会背景色" prop="backgroundColour">
+        <div>
+          <el-color-picker v-model="formData.backgroundColour" size="large" />
+          <div>为了页面的美观性，请勿选择白色（#FFF / #FFFFFF）作为页面背景颜色</div>
+        </div>
+      </el-form-item>
+      <el-form-item label="PC封面海报" prop="pcPreviewImg">
+        <div>
+          <UploadImg v-model="formData.pcPreviewImg" height="150px" width="300px" :fileSize="10" :validSpecifications="true" :maxWidth="800" :maxHeight="300" />
+          <div class="flex" style="color: orange; align-items: center;"><Icon :size="20" icon="ep:warning" class="mr-3px" />提示：请上传宽800px*高300px规格的图片</div>
+        </div>
+      </el-form-item>
+      <el-form-item label="小程序封面海报" prop="previewImg">
+        <div>
+          <UploadImg v-model="formData.previewImg" height="150px" width="300px" :fileSize="10" :validSpecifications="true" :maxWidth="750" :maxHeight="350" />
+          <div class="flex" style="color: orange; align-items: center;"><Icon :size="20" icon="ep:warning" class="mr-3px" />提示：请上传宽750px*高350px规格的图片</div>
+        </div>
+      </el-form-item>
+      <el-form-item label="PC顶部banner" prop="pcHeadImg">
+        <div>
+          <UploadImgs v-model="formData.pcHeadImg" :limit="20" />
+          <div class="flex" style="color: orange; align-items: center;"><Icon :size="20" icon="ep:warning" class="mr-3px" />提示：请上传宽1920px*高553px规格的图片</div>
+        </div>
+      </el-form-item>
+      <el-form-item label="小程序顶部banner" prop="headImg">
+        <div>
+          <UploadImgs v-model="formData.headImg" :limit="20" />
+          <div class="flex" style="color: orange; align-items: center;"><Icon :size="20" icon="ep:warning" class="mr-3px" />提示：请上传宽750px*高350px规格的图片</div>
+        </div>
+      </el-form-item>
+      <el-form-item label="招聘会分享海报" prop="shareImg">
+        <UploadImg v-model="formData.shareImg" height="300px" width="250px" :fileSize="10" />
+      </el-form-item>
+      <el-form-item label="企业分享海报" prop="contentImg">
+        <div>
+          <UploadImg v-model="formData.contentImg" height="300px" width="250px" :fileSize="10" :validSpecifications="true" :maxWidth="540" :maxHeight="788" />
+          <div class="flex" style="color: orange; align-items: center;"><Icon :size="20" icon="ep:warning" class="mr-3px" />提示：请上传宽540px*高788px规格的图片</div>
+        </div>
+      </el-form-item>
+      <el-form-item label="开始时间" prop="startTime">
+        <el-date-picker v-model="formData.startTime" type="date" value-format="x" placeholder="选择开始时间" />
+      </el-form-item>
+      <el-form-item label="结束时间" prop="endTime">
+        <el-date-picker v-model="formData.endTime" type="date" value-format="x" placeholder="选择结束时间" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_STATUS)"
+            :key="dict.value"
+            :label="dict.value.toString()"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    
+		<div class="text-right">
+			<el-button @click="emit('close')">返回</el-button>
+			<el-button @click="submitForm" type="primary" :disabled="formLoading">保存</el-button>
+		</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/** 招聘会管理 信息设置 */
+defineOptions({ name: 'JobFairManageInfoSettings' })
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { JobFairManageApi, JobFairManageVO } from '@/api/menduner/system/jobFair/manage'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { cloneDeep } from 'lodash-es'
+
+const { push, currentRoute } = useRouter() // 路由
+const { delView } = useTagsViewStore() // 视图操作
+
+const props = defineProps({ formType: String, info: Object })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  type: 1,
+  title: undefined,
+  headImg: [],
+  pcHeadImg: [],
+  backgroundColour: undefined,
+  pcPreviewImg: undefined,
+  previewImg: undefined,
+  startTime: undefined,
+  endTime: undefined,
+  shareImg: undefined,
+  contentImg: undefined,
+  status: '0',
+  category: undefined,
+  tag: []
+})
+const formRules = reactive({
+  backgroundColour: [{ required: true, message: '招聘会背景颜色不能为空', trigger: 'change' }],
+  previewImg: [{ required: true, message: 'PC封面海报不能为空', trigger: 'change' }],
+  pcPreviewImg: [{ required: true, message: '小程序封面海报不能为空', trigger: 'change' }],
+  headImg: [{ required: true, message: '小程序顶部banner图片不能为空', trigger: 'change' }],
+  pcHeadImg: [{ required: true, message: 'PC顶部banner图片不能为空', trigger: 'change' }],
+  shareImg: [{ required: true, message: '招聘会分享海报不能为空', trigger: 'change' }],
+  contentImg: [{ required: true, message: '企业分享海报不能为空', trigger: 'change' }],
+  title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
+  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
+  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
+})
+const formRef = ref() // 表单 Ref
+
+onMounted(() => {
+  if (props.info && Object.keys(props.info).length > 0) {
+		formLoading.value = true
+		formData.value = cloneDeep(props.info)
+		formLoading.value = false
+  }
+})
+
+/** 提交表单 */
+const emit = defineEmits(['close'])
+const submitForm = async () => {
+  if (['#ffffff', '#FFFFFF'].indexOf(formData.value.backgroundColour) !== -1) return message.warning('请勿将白色作为页面背景色')
+  // 校验表单
+  await formRef.value.validate()
+  
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as JobFairManageVO
+		if (props.formType === 'create') {
+			const result = await JobFairManageApi.createJobFair(data)
+			message.success(t('common.createSuccess'))
+			delView(unref(currentRoute))
+			push({ name: 'JobFairDetail', params: { id: result } })
+		} else {
+			await JobFairManageApi.updateJobFair(data)
+			message.success(t('common.updateSuccess'))
+		}
+  } finally {
+    formLoading.value = false
+  }
+}
+
+</script>

src/views/menduner/system/jobFair/manage/details/components/TicketSettings.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="text-right">
+    <el-button type="success" plain @click="emit('refresh', info.id)">刷新</el-button>
+  </div>
+  <div class="mb-50px !w-400px color-orange text-16px">
+    <Icon :size="20" icon="ep:warning" class="mr-3px" />
+    提示：不需要设置门票限制时则不需要填写以下内容
+  </div>
+  <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      label-width="110px"
+      class="!w-350px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="门票金额" prop="admissionPrice">
+        <el-input-number v-model="formData.admissionPrice" :precision="2" :min="0.01" :step="100" />
+        <span class="mx-10px">元</span>
+        <Icon @click="formData.admissionPrice = null" class="cursor-pointer" :size="25" icon="ep:circle-close-filled" /> 
+      </el-form-item>
+      <el-form-item label="可发布职位数量" prop="allowedJobNum">
+        <el-input-number v-model="formData.allowedJobNum" :min="0" :step="10" />
+        <span class="mx-10px">个</span>
+        <Icon @click="formData.allowedJobNum = null" class="cursor-pointer" :size="25" icon="ep:circle-close-filled" /> 
+      </el-form-item>
+    </el-form>
+    
+    <div class="mt-50px">
+      <el-button @click="emit('close')">返回</el-button>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">保 存</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/** 招聘会 门票设置 */
+defineOptions({ name: 'JobFairManageTicketSettings' })
+import { JobFairManageApi } from '@/api/menduner/system/jobFair/manage'
+
+const message = useMessage() // 消息弹窗
+const emit = defineEmits(['refresh', 'close'])
+const props = defineProps({ info: Object })
+
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  admissionPrice: undefined,
+  allowedJobNum: undefined
+})
+const formRef = ref() // 表单 Ref
+
+onMounted(() => {
+  if (props.info && Object.keys(props.info).length > 0) {
+    const { id, admissionPrice: price, allowedJobNum } = props.info
+    formData.value = {
+      id,
+      admissionPrice: price > 0 ? (price / 100) : null,
+      allowedJobNum
+    }
+  }
+})
+
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+
+	const { id, admissionPrice, allowedJobNum } = formData.value
+	const params = {
+		id,
+		admissionPrice: admissionPrice > 0 ? (admissionPrice * 100) : null,
+		allowedJobNum
+	}
+
+  // 提交请求
+  formLoading.value = true
+  try {
+    await JobFairManageApi.updateTicketSettings(params)
+    message.success('设置成功')
+    // 发送操作成功的事件
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>

src/views/menduner/system/jobFair/manage/details/components/WhiteList.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-form
+    class=" m-y-20px"
+    :model="queryParams"
+    ref="queryFormRef"
+    :inline="true"
+    label-width="68px"
+    @submit.prevent
+  >
+    <el-form-item label="企业名称" prop="name">
+      <el-input v-model="queryParams.name" placeholder="请输入企业名称" clearable @keyup.enter="handleQuery" class="!w-240px" />
+    </el-form-item>
+    <el-form-item>
+      <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+      <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+      <el-button type="primary" plain @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" />新增</el-button>
+  <el-button type="success" plain @click="queryParams.pageNo = 1, getList()"><Icon icon="ep:refresh" class="mr-5px" />刷新</el-button>
+    </el-form-item>
+  </el-form>
+  <el-table v-loading="loading" :data="list" :stripe="true">
+    <el-table-column label="企业全称" align="center" prop="name">
+      <template #default="scope">{{ formatName(scope.row.enterprise.name) }}</template>
+    </el-table-column>
+    <el-table-column label="企业别称" align="center" prop="anotherName">
+      <template #default="scope">{{ formatName(scope.row.enterprise.anotherName) }}</template>
+    </el-table-column>
+		<el-table-column label="剩余发布职位数" align="center" prop="num" />
+		<el-table-column label="来源" align="center" prop="source">
+      <template #default="scope">{{ scope.row.source === '0' ? '系统添加' : scope.row.source === '1' ? '购买门票' : '' }}</template>
+    </el-table-column>
+    <el-table-column label="操作" align="center">
+      <template #default="scope">
+        <el-button
+          link
+          type="primary"
+          @click="handleRemoveWhiteList(formatName(scope.row.enterprise.anotherName || scope.row.enterprise.name), scope.row.enterpriseId)"
+        >
+          移出白名单
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+    
+  <Pagination
+    :total="total"
+    v-model:page="queryParams.pageNo"
+    v-model:limit="queryParams.pageSize"
+    @pagination="getList"
+  />
+
+  <!-- 表单弹窗：添加/修改 -->
+  <JobFairForm ref="formRef" :enterpriseList="enterpriseList" @success="getList" />
+</template>
+
+<script setup lang="ts">
+/** 招聘会 白名单 */
+defineOptions({ name: 'WhiteList' })
+import { JobFairWhiteApi } from '@/api/menduner/system/jobFair/white'
+import JobFairForm from '../jobFairForm.vue'
+import { formatName } from '@/utils'
+
+const props = defineProps({ info: Object, enterpriseList: Array })
+const message = useMessage() // 消息弹窗
+
+const loading = ref(false) // 列表的加载中
+const list = ref([]) // 列表的数据
+const total = ref(0)
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  jobFairId: undefined
+})
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await JobFairWhiteApi.getJobFairWhiteList(queryParams.value)
+    total.value = data.total
+    list.value = data.list
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleQuery = () => {
+  total.value = 0
+  list.value = []
+  queryParams.value.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const queryFormRef = ref()
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+const formRef = ref()
+const handleAdd = () => {
+  formRef.value.open(queryParams.value.jobFairId)
+}
+
+// 移出白名单
+const handleRemoveWhiteList = async (enterpriseName: string, enterpriseId: string) => {
+  if (!enterpriseId) return message.warning('操作失败，请刷新页面重试')
+  try {
+    await message.confirm(`确定要将【${enterpriseName}】移出白名单吗？`)
+    await JobFairWhiteApi.removeJobFairWhiteList({ enterpriseIds: enterpriseId, jobFairId: queryParams.value.jobFairId })
+    message.success('移出成功')
+    getList()
+  } catch (err) {}
+}
+
+onMounted(() => {
+	if (props.info && Object.keys(props.info).length > 0) {
+		queryParams.value.jobFairId = props.info.id
+    queryParams.value.pageNo = 1
+		getList()
+	}
+})
+
+defineExpose({
+  getList
+})
+</script>

src/views/menduner/system/jobFair/manage/details/index copy.vue

@@ -0,0 +1,242 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <CardTitle fontSize="16" :title="jobFairInfo.title?.replace(/<\/?p[^>]*>/gi, '')" />
+    <el-form
+      class="-mb-15px m-t-20px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+      @submit.prevent
+    >
+      <el-form-item label="企业名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入企业名称" clearable @keyup.enter="handleQuery" class="!w-240px" />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button type="primary" :loading="exportLoading" plain @click="handleExport"><Icon icon="ep:download" class="mr-5px" /> 参加招聘会职位列表导出</el-button>
+        <el-button type="primary" :loading="exportDeliveryLoading" plain @click="handleExportDelivery"><Icon icon="ep:download" class="mr-5px" /> 招聘会职位投递情况导出</el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-tabs v-model="activeName" @tab-change="handleClick">
+      <el-tab-pane label="白名单" name="whiteList">
+        <div class="text-right">
+          <el-button type="primary" plain @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" /> 新增</el-button>
+        </div>
+        <el-table v-loading="loading" :data="list" :stripe="true">
+          <el-table-column label="企业全称" align="center" prop="name">
+            <template #default="scope">{{ formatName(scope.row.enterprise.name) }}</template>
+          </el-table-column>
+          <el-table-column label="企业别称" align="center" prop="anotherName">
+            <template #default="scope">{{ formatName(scope.row.enterprise.anotherName) }}</template>
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template #default="scope">
+              <el-button
+                link
+                type="primary"
+                @click="handleRemoveWhiteList(formatName(scope.row.enterprise.anotherName || scope.row.enterprise.name), scope.row.enterpriseId)"
+              >
+                移出白名单
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="购买门票企业" name="ticketEntList">
+        <el-table v-loading="loading" :data="list" :stripe="true">
+          <el-table-column label="企业全称" align="center" prop="name">
+            <template #default="scope">{{ formatName(scope.row.enterprise.name) }}</template>
+          </el-table-column>
+          <el-table-column label="企业别称" align="center" prop="anotherName">
+            <template #default="scope">{{ formatName(scope.row.enterprise.anotherName) }}</template>
+          </el-table-column>
+          <el-table-column label="权益" align="center" prop="status">
+            <template #default="scope">
+              <span :style="{'color': scope.row.status === '1' ? '#f56c6c' : '#67c23a' }">{{ scope.row.status === '1' ? '已禁用' : '已开启' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template #default="scope">
+              <el-button v-if="scope.row.status === '1'" link type="primary" @click="handleEnableRights(formatName(scope.row.enterprise.anotherName || scope.row.enterprise.name), scope.row.id)">
+                开启权益
+              </el-button>
+              <el-button v-if="scope.row.status === '0'" link type="danger" @click="handleDisableRights(formatName(scope.row.enterprise.anotherName || scope.row.enterprise.name), scope.row.id)">禁用权益</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+    
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <JobFairForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { JobFairWhiteApi } from '@/api/menduner/system/jobFair/white'
+import JobFairForm from './jobFairForm.vue'
+import download from '@/utils/download'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { ElMessage } from 'element-plus'
+import { formatName } from '@/utils'
+import { JobFairManageApi } from '@/api/menduner/system/jobFair/manage'
+
+/** 招聘会 列表 */
+defineOptions({ name: 'JobFairDetails' })
+
+const message = useMessage() // 消息弹窗
+
+const activeName = ref('whiteList')
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+const total = ref(0)
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  jobFairId: ''
+})
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  const api = activeName.value === 'whiteList' ? JobFairWhiteApi.getJobFairWhiteList : JobFairManageApi.getBuyTicketEnterprise
+  try {
+    const data = await api(queryParams.value)
+    total.value = data.total
+    list.value = data.list
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleClick = () => {
+  total.value = 0
+  list.value = []
+  queryParams.value.pageNo = 1
+  getList()
+}
+
+/* 查询招聘会详情 */
+const jobFairInfo = ref({})
+const getJobFairDetail = async () => {
+  try {
+    const data = await JobFairManageApi.getJobFair(queryParams.value.jobFairId)
+    jobFairInfo.value = data
+  } catch {}
+}
+
+const handleQuery = () => {
+  total.value = 0
+  list.value = []
+  queryParams.value.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const queryFormRef = ref()
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+const formRef = ref()
+const handleAdd = () => {
+  formRef.value.open(queryParams.value.jobFairId)
+}
+
+// 移出白名单
+const handleRemoveWhiteList = async (enterpriseName: string, enterpriseId: string) => {
+  if (!enterpriseId) return message.warning('操作失败，请刷新页面重试')
+  try {
+    await message.confirm(`确定要将【${enterpriseName}】移出白名单吗？`)
+    await JobFairWhiteApi.removeJobFairWhiteList({ enterpriseIds: enterpriseId, jobFairId: queryParams.value.jobFairId })
+    message.success('移出成功')
+    getList()
+  } catch (err) {}
+}
+
+// 开启权益
+const handleEnableRights = async (enterpriseName: string, id: string) => {
+  if (!id) return message.warning('操作失败，请刷新页面重试')
+  try {
+    await message.confirm(`是否确定开启【${formatName(enterpriseName)}】的招聘会权益？`)
+    await JobFairManageApi.enableTicketRights(id)
+    message.success('开启成功')
+    getList()
+  } catch (err) {}
+}
+
+// 关闭权益
+const handleDisableRights = async (enterpriseName: string, id: string) => {
+  if (!id) return message.warning('操作失败，请刷新页面重试')
+  try {
+    await message.confirm(`是否确定禁用【${formatName(enterpriseName)}】的招聘会权益？`)
+    await JobFairManageApi.disableTicketRights(id)
+    message.success('禁用成功')
+    getList()
+  } catch (err) {}
+}
+
+const exportLoading = ref(false)
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await JobFairWhiteApi.exportJobFairWhiteList(queryParams.value.jobFairId)
+    download.excel(data, '招聘会职位列表.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+// 招聘会投递情况导出
+const exportDeliveryLoading = ref(false)
+const handleExportDelivery = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportDeliveryLoading.value = true
+    const data = await JobFairWhiteApi.exportJobFairApplyData(queryParams.value.jobFairId)
+    download.excel(data, '招聘会职位投递情况.xls')
+  } catch {
+  } finally {
+    exportDeliveryLoading.value = false
+  }
+}
+
+/** 初始化 */
+const { currentRoute } = useRouter() // 路由
+const { delView } = useTagsViewStore() // 视图操作
+const route = useRoute()
+const { id } = route.params
+onMounted(() => {
+  if (!id) {
+    ElMessage.warning('参数错误，招聘会编号不能为空！')
+    delView(unref(currentRoute))
+    return
+  }
+  queryParams.value.jobFairId = id
+  getList()
+  getJobFairDetail()
+})
+</script>

src/views/menduner/system/jobFair/manage/details/index.vue

@@ -1,195 +1,78 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
+  <ContentWrap v-if="id">
     <CardTitle fontSize="16" :title="jobFairInfo.title?.replace(/<\/?p[^>]*>/gi, '')" />
-    <el-form
-      class="-mb-15px m-t-20px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-      @submit.prevent
-    >
-      <el-form-item label="企业名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入企业名称" clearable @keyup.enter="handleQuery" class="!w-240px" />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button type="primary" :loading="exportLoading" plain @click="handleExport"><Icon icon="ep:download" class="mr-5px" /> 参加招聘会职位列表导出</el-button>
-        <el-button type="primary" :loading="exportDeliveryLoading" plain @click="handleExportDelivery"><Icon icon="ep:download" class="mr-5px" /> 招聘会职位投递情况导出</el-button>
-      </el-form-item>
-    </el-form>
+    <div class="mt-20px text-right">
+      <el-button type="primary" :loading="exportLoading" plain @click="handleExport"><Icon icon="ep:download" class="mr-5px" /> 参加招聘会职位列表导出</el-button>
+      <el-button type="primary" :loading="exportDeliveryLoading" plain @click="handleExportDelivery"><Icon icon="ep:download" class="mr-5px" /> 招聘会职位投递情况导出</el-button>
+    </div>
   </ContentWrap>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-tabs v-model="activeName" @tab-change="handleClick">
-      <el-tab-pane label="白名单" name="whiteList">
-        <div class="text-right">
-          <el-button type="primary" plain @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" /> 新增</el-button>
-        </div>
-        <el-table v-loading="loading" :data="list" :stripe="true">
-          <el-table-column label="企业全称" align="center" prop="name">
-            <template #default="scope">{{ formatName(scope.row.enterprise.name) }}</template>
-          </el-table-column>
-          <el-table-column label="企业别称" align="center" prop="anotherName">
-            <template #default="scope">{{ formatName(scope.row.enterprise.anotherName) }}</template>
-          </el-table-column>
-          <el-table-column label="操作" align="center">
-            <template #default="scope">
-              <el-button
-                link
-                type="primary"
-                @click="handleRemoveWhiteList(formatName(scope.row.enterprise.anotherName || scope.row.enterprise.name), scope.row.enterpriseId)"
-              >
-                移出白名单
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+  <ContentWrap v-if="!id || (jobFairInfo && Object.keys(jobFairInfo).length > 0)">
+    <el-tabs v-model="activeName" @tab-change="handleTabChange">
+      <el-tab-pane label="招聘会信息" name="infoSettings">
+        <InfoSettings :info="jobFairInfo" :formType="id ? 'update' : 'create'" @close="handleClose" />
       </el-tab-pane>
-      <el-tab-pane label="购买门票企业" name="ticketEntList">
-        <el-table v-loading="loading" :data="list" :stripe="true">
-          <el-table-column label="企业全称" align="center" prop="name">
-            <template #default="scope">{{ formatName(scope.row.enterprise.name) }}</template>
-          </el-table-column>
-          <el-table-column label="企业别称" align="center" prop="anotherName">
-            <template #default="scope">{{ formatName(scope.row.enterprise.anotherName) }}</template>
-          </el-table-column>
-          <el-table-column label="权益" align="center" prop="status">
-            <template #default="scope">
-              <span :style="{'color': scope.row.status === '1' ? '#f56c6c' : '#67c23a' }">{{ scope.row.status === '1' ? '已禁用' : '已开启' }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center">
-            <template #default="scope">
-              <el-button v-if="scope.row.status === '1'" link type="primary" @click="handleEnableRights(formatName(scope.row.enterprise.anotherName || scope.row.enterprise.name), scope.row.id)">
-                开启权益
-              </el-button>
-              <el-button v-if="scope.row.status === '0'" link type="danger" @click="handleDisableRights(formatName(scope.row.enterprise.anotherName || scope.row.enterprise.name), scope.row.id)">禁用权益</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+      <el-tab-pane v-if="id" label="类别设置" name="categorySettings">
+        <Category :info="jobFairInfo" :enterpriseList="enterpriseList" @close="handleClose" />
+      </el-tab-pane>
+      <el-tab-pane v-if="id" label="白名单" name="whiteList">
+        <WhiteList ref="whiteListRef" :info="jobFairInfo" :enterpriseList="enterpriseList" />
+      </el-tab-pane>
+      <el-tab-pane v-if="id" label="门票设置" name="ticketSettings">
+        <TicketSettings :info="jobFairInfo" @close="handleClose" @refresh="getJobFairDetail" />
       </el-tab-pane>
     </el-tabs>
-    
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
   </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <JobFairForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
-import { JobFairWhiteApi } from '@/api/menduner/system/jobFair/white'
-import JobFairForm from './jobFairForm.vue'
+/** 招聘会 详情 */
+defineOptions({ name: 'JobFairDetails' })
 import download from '@/utils/download'
-import { useTagsViewStore } from '@/store/modules/tagsView'
-import { ElMessage } from 'element-plus'
-import { formatName } from '@/utils'
 import { JobFairManageApi } from '@/api/menduner/system/jobFair/manage'
-
-/** 招聘会 列表 */
-defineOptions({ name: 'JobFairDetails' })
+import { JobFairWhiteApi } from '@/api/menduner/system/jobFair/white'
+import { EnterpriseUserBindApi } from '@/api/menduner/system/enterprise/userBind'
+import TicketSettings from './components/TicketSettings.vue'
+import WhiteList from './components/WhiteList.vue'
+import InfoSettings from './components/InfoSettings.vue'
+import Category from './components/Category.vue'
+import { useTagsViewStore } from '@/store/modules/tagsView'
 
 const message = useMessage() // 消息弹窗
-
-const activeName = ref('whiteList')
-const loading = ref(true) // 列表的加载中
-const list = ref([]) // 列表的数据
-const total = ref(0)
-const queryParams = ref({
-  pageNo: 1,
-  pageSize: 10,
-  name: undefined,
-  jobFairId: ''
-})
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  const api = activeName.value === 'whiteList' ? JobFairWhiteApi.getJobFairWhiteList : JobFairManageApi.getBuyTicketEnterprise
-  try {
-    const data = await api(queryParams.value)
-    total.value = data.total
-    list.value = data.list
-  } finally {
-    loading.value = false
-  }
-}
-
-const handleClick = () => {
-  total.value = 0
-  list.value = []
-  queryParams.value.pageNo = 1
-  getList()
-}
+const activeName = ref('infoSettings') // 当前激活的tab
 
 /* 查询招聘会详情 */
 const jobFairInfo = ref({})
-const getJobFairDetail = async () => {
+const getJobFairDetail = async (id) => {
   try {
-    const data = await JobFairManageApi.getJobFair(queryParams.value.jobFairId)
+    const data = await JobFairManageApi.getJobFair(id)
     jobFairInfo.value = data
   } catch {}
 }
 
-const handleQuery = () => {
-  total.value = 0
-  list.value = []
-  queryParams.value.pageNo = 1
-  getList()
+const whiteListRef = ref(null)
+const handleTabChange = () => {
+  if (activeName.value === 'whiteList') {
+    whiteListRef.value?.getList()
+  } else getJobFairDetail(route.params.id)
 }
 
-/** 重置按钮操作 */
-const queryFormRef = ref()
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
+// 企业列表
+const enterpriseList = ref([])
+const getEnterpriseListData = () => {
+  EnterpriseUserBindApi.getEnterpriseList().then(res => {
+    enterpriseList.value = res || []
+  })
 }
+getEnterpriseListData()
 
-const formRef = ref()
-const handleAdd = () => {
-  formRef.value.open(queryParams.value.jobFairId)
-}
-
-// 移出白名单
-const handleRemoveWhiteList = async (enterpriseName: string, enterpriseId: string) => {
-  if (!enterpriseId) return message.warning('操作失败，请刷新页面重试')
-  try {
-    await message.confirm(`确定要将【${enterpriseName}】移出白名单吗？`)
-    await JobFairWhiteApi.removeJobFairWhiteList({ enterpriseIds: enterpriseId, jobFairId: queryParams.value.jobFairId })
-    message.success('移出成功')
-    getList()
-  } catch (err) {}
-}
+const { push, currentRoute } = useRouter() // 路由
+const { delView } = useTagsViewStore() // 视图操作
 
-// 开启权益
-const handleEnableRights = async (enterpriseName: string, id: string) => {
-  if (!id) return message.warning('操作失败，请刷新页面重试')
-  try {
-    await message.confirm(`是否确定开启【${formatName(enterpriseName)}】的招聘会权益？`)
-    await JobFairManageApi.enableTicketRights(id)
-    message.success('开启成功')
-    getList()
-  } catch (err) {}
-}
-
-// 关闭权益
-const handleDisableRights = async (enterpriseName: string, id: string) => {
-  if (!id) return message.warning('操作失败，请刷新页面重试')
-  try {
-    await message.confirm(`是否确定禁用【${formatName(enterpriseName)}】的招聘会权益？`)
-    await JobFairManageApi.disableTicketRights(id)
-    message.success('禁用成功')
-    getList()
-  } catch (err) {}
+/** 关闭按钮 */
+const handleClose = () => {
+  delView(unref(currentRoute))
+  push({ path: '/job-fair/manage' })
 }
 
 const exportLoading = ref(false)
@@ -200,7 +83,7 @@ const handleExport = async () => {
     await message.exportConfirm()
     // 发起导出
     exportLoading.value = true
-    const data = await JobFairWhiteApi.exportJobFairWhiteList(queryParams.value.jobFairId)
+    const data = await JobFairWhiteApi.exportJobFairWhiteList(id)
     download.excel(data, '招聘会职位列表.xls')
   } catch {
   } finally {
@@ -216,7 +99,7 @@ const handleExportDelivery = async () => {
     await message.exportConfirm()
     // 发起导出
     exportDeliveryLoading.value = true
-    const data = await JobFairWhiteApi.exportJobFairApplyData(queryParams.value.jobFairId)
+    const data = await JobFairWhiteApi.exportJobFairApplyData(id)
     download.excel(data, '招聘会职位投递情况.xls')
   } catch {
   } finally {
@@ -225,18 +108,9 @@ const handleExportDelivery = async () => {
 }
 
 /** 初始化 */
-const { currentRoute } = useRouter() // 路由
-const { delView } = useTagsViewStore() // 视图操作
 const route = useRoute()
 const { id } = route.params
 onMounted(() => {
-  if (!id) {
-    ElMessage.warning('参数错误，招聘会编号不能为空！')
-    delView(unref(currentRoute))
-    return
-  }
-  queryParams.value.jobFairId = id
-  getList()
-  getJobFairDetail()
+  if (id) getJobFairDetail(id)
 })
 </script>

src/views/menduner/system/jobFair/manage/details/jobFairForm.vue

@@ -22,14 +22,13 @@
 
 <script setup lang="ts">
 import { JobFairWhiteApi } from '@/api/menduner/system/jobFair/white'
-import { EnterpriseUserBindApi } from '@/api/menduner/system/enterprise/userBind'
 
 /** 招聘会 表单 */
 defineOptions({ name: 'JobFairDetailsForm' })
 
 const message = useMessage() // 消息弹窗
+defineProps({ enterpriseList: Array })
 
-const enterpriseList = ref([])
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = ref({
@@ -49,15 +48,6 @@ const open = async (id: string) => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-// 企业列表
-const getEnterpriseListData = async () => {
-  try {
-    const data = await EnterpriseUserBindApi.getEnterpriseList()
-    enterpriseList.value = data
-  } catch (err) {}
-}
-getEnterpriseListData()
-
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {

src/views/menduner/system/jobFair/manage/index.vue

@@ -50,7 +50,7 @@
         <el-button
           type="primary"
           plain
-          @click="openForm('create')"
+          @click="openForm"
           v-hasPermi="['menduner:system:job-fair:create']"
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
@@ -86,13 +86,6 @@
           <el-image v-if="scope.row.pcPreviewImg" :src="scope.row.pcPreviewImg" lazy preview-teleported :preview-src-list="[scope.row.pcPreviewImg]" fit="contain" />
         </template>
       </el-table-column>
-      <!-- <el-table-column label="简历投递次数" align="center" prop="cvRelNum" /> -->
-      <!-- <el-table-column label="门票金额" align="center" prop="admissionPrice">
-        <template #default="scope">
-          {{ scope.row.admissionPrice > 0 ? scope.row.admissionPrice / 100 : '' }}
-        </template>
-      </el-table-column>
-      <el-table-column label="企业可发布职位数" align="center" prop="allowedJobNum" /> -->
       <el-table-column label="状态" align="center" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.MENDUNER_STATUS" :value="scope.row.status" />
@@ -103,10 +96,8 @@
       <el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" />
       <el-table-column label="操作" align="center" fixed="right" min-width="100">
         <template #default="scope">
-          <el-button link type="success" @click="openTicketSettings(scope.row)">门票设置</el-button>
-          <el-button link type="primary" @click="openStatistics(scope.row.id)">数据统计</el-button>
-          <el-button link type="primary" @click="openDetail(scope.row.id)">白名单</el-button>
-          <el-button link type="primary" @click="openForm('update', scope.row.id)" v-hasPermi="['menduner:system:job-fair:update']">编辑</el-button>
+          <el-button link type="primary" @click="openDetail(scope.row.id)">详情</el-button>
+          <el-button link type="success" @click="openStatistics(scope.row.id)">数据统计</el-button>
           <!-- <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['menduner:system:job-fair:delete']">删除</el-button> -->
         </template>
       </el-table-column>
@@ -152,7 +143,6 @@ const queryParams = reactive({
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
-// const exportLoading = ref(false) // 导出的加载中
 
 /** 查询列表 */
 const getList = async () => {
@@ -179,15 +169,10 @@ const resetQuery = () => {
 }
 
 /** 添加/修改操作 */
+const { push } = useRouter()
 const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
-/** 门票设置 */
-const ticketRef = ref()
-const openTicketSettings = ({ id, admissionPrice, allowedJobNum}) => {
-  ticketRef.value.open({ id, admissionPrice, allowedJobNum})
+const openForm = () => {
+  push({ name: 'JobFairAdd' })
 }
 
 /** 删除按钮操作 */
@@ -203,23 +188,7 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
-/** 导出按钮操作 */
-// const handleExport = async () => {
-//   try {
-//     // 导出的二次确认
-//     await message.exportConfirm()
-//     // 发起导出
-//     exportLoading.value = true
-//     const data = await JobFairManageApi.exportJobFair(queryParams)
-//     download.excel(data, '招聘会管理.xls')
-//   } catch {
-//   } finally {
-//     exportLoading.value = false
-//   }
-// }
-
 /** 打开招聘会详情 */
-const { push } = useRouter()
 const openDetail = (id) => {
   push({ name: 'JobFairDetail', params: { id } })
 }