招聘会调整

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

@@ -1,22 +1,53 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" class="!w-60%">
     <el-form
       ref="formRef"
       :model="formData"
       :rules="formRules"
-      label-width="110px"
+      label-width="140px"
       v-loading="formLoading"
     >
-      <el-form-item label="标题" prop="title">
+      <el-form-item label="招聘会标题" prop="title">
         <el-input v-model="formData.title" :rows="3" type="textarea" placeholder="请输入标题" />
       </el-form-item>
-      <el-form-item label="PC背景图" prop="pcHeadImg">
-        <UploadImg v-model="formData.pcHeadImg" 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>
+      <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="小程序背景图" prop="headImg">
-        <UploadImg v-model="formData.headImg" 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>
+      <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="选择开始时间" />
@@ -35,6 +66,38 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
+      <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' ? industry : position" :key="k.id" :label="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>若填写了类别，请最少填写两项</div>
+        </div>
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -42,9 +105,12 @@
     </template>
   </Dialog>
 </template>
+
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { JobFairManageApi, JobFairManageVO } from '@/api/menduner/system/jobFair/manage'
+import { PositionApi } from '@/api/menduner/system/position'
+import { IndustryApi } from '@/api/menduner/system/industry'
 
 /** 招聘会管理 表单 */
 defineOptions({ name: 'JobFairManageForm' })
@@ -60,32 +126,58 @@ const formData = ref({
   id: undefined,
   type: 1,
   title: undefined,
-  // slogan: undefined,
-  headImg: undefined,
-  pcHeadImg: undefined,
-  // bottomImg: undefined,
-  // pcHeadImg: undefined,
-  // pcBackgroundImg: undefined,
-  // pcBottomImg: undefined,
-  // insideColour: undefined,
-  // jobColour: undefined,
-  // backgroundColour: undefined,
-  // shareImg: undefined,
+  headImg: [],
+  pcHeadImg: [],
+  backgroundColour: undefined,
+  pcPreviewImg: undefined,
+  previewImg: undefined,
   startTime: undefined,
   endTime: undefined,
+  shareImg: undefined,
+  contentImg: undefined,
   status: '0',
-  // vipRequire: undefined
+  category: '0',
+  tag: [
+    { title: '', value: [] }
+  ]
 })
 const formRules = reactive({
-  headImg: [{ required: true, message: '小程序背景图不能为空', trigger: 'change' }],
-  pcHeadImg: [{ required: true, message: 'PC背景图不能为空', trigger: 'change' }],
+  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' }],
-  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
+  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()
+
+// 企业行业类型
+const industry = ref([])
+const getIndustryList = async () => {
+  const data = await IndustryApi.getIndustryList({})
+  industry.value = data || []
+  
+}
+getIndustryList()
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
@@ -97,6 +189,10 @@ const open = async (type: string, id?: number) => {
     formLoading.value = true
     try {
       formData.value = await JobFairManageApi.getJobFair(id)
+      if (!formData.value.tag || !formData.value.tag.length) {
+        formData.value.tag = []
+      }
+      
     } finally {
       formLoading.value = false
     }
@@ -104,11 +200,46 @@ const open = async (type: string, id?: number) => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
+// 切换类别时需将数据清空
+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(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
+  if (['#ffffff', '#FFFFFF'].indexOf(formData.value.backgroundColour) !== -1) return message.warning('请勿将白色作为页面背景色')
   // 校验表单
   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' ? 'industryId' : 'positionId')
+  }
+
   // 提交请求
   formLoading.value = true
   try {
@@ -134,22 +265,27 @@ const resetForm = () => {
     id: undefined,
     type: 1,
     title: undefined,
-    // slogan: undefined,
-    headImg: undefined,
-    pcHeadImg: undefined,
-    // bottomImg: undefined,
-    // pcHeadImg: undefined,
-    // pcBackgroundImg: undefined,
-    // pcBottomImg: undefined,
-    // insideColour: undefined,
-    // jobColour: undefined,
-    // backgroundColour: undefined,
-    // shareImg: undefined,
+    headImg: [],
+    pcHeadImg: [],
+    backgroundColour: undefined,
+    pcPreviewImg: undefined,
+    previewImg: undefined,
     startTime: undefined,
     endTime: undefined,
+    shareImg: undefined,
+    contentImg: undefined,
     status: '0',
-    // vipRequire: undefined
+    category: '0',
+    tag: [
+      { title: '', value: [] }
+    ]
   }
   formRef.value?.resetFields()
 }
-</script>
+</script>
+
+<style>
+.el-row {
+  width: 100%;
+}
+</style>

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

@@ -76,14 +76,14 @@
           <div v-html="scope.row.title"></div>
         </template>
       </el-table-column>
-      <el-table-column label="小程序背景图" align="center" prop="headImg">
+      <el-table-column label="小程序封面海报" align="center" prop="previewImg">
         <template #default="scope">
-          <el-image v-if="scope.row.pcHeadImg" :src="scope.row.headImg" lazy preview-teleported :preview-src-list="[scope.row.headImg]" fit="contain" />
+          <el-image v-if="scope.row.previewImg" :src="scope.row.previewImg" lazy preview-teleported :preview-src-list="[scope.row.previewImg]" fit="contain" />
         </template>
       </el-table-column>
-      <el-table-column label="PC背景图" align="center" prop="pcHeadImg">
+      <el-table-column label="PC封面海报" align="center" prop="pcPreviewImg">
         <template #default="scope">
-          <el-image v-if="scope.row.pcHeadImg" :src="scope.row.pcHeadImg" lazy preview-teleported :preview-src-list="[scope.row.pcHeadImg]" fit="contain" />
+          <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="status">
@@ -98,7 +98,7 @@
         <template #default="scope">
           <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="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['menduner:system:job-fair:delete']">删除</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>
     </el-table>
@@ -125,8 +125,8 @@ import JobFairManageForm from './JobFairManageForm.vue'
 /** 招聘会管理 列表 */
 defineOptions({ name: 'JobFair' })
 
-// const message = useMessage() // 消息弹窗
-// const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const list = ref<JobFairManageVO[]>([]) // 列表的数据
@@ -176,17 +176,17 @@ const openForm = (type: string, id?: number) => {
 }
 
 /** 删除按钮操作 */
-// const handleDelete = async (id: number) => {
-//   try {
-//     // 删除的二次确认
-//     await message.delConfirm()
-//     // 发起删除
-//     await JobFairManageApi.deleteJobFair(id)
-//     message.success(t('common.delSuccess'))
-//     // 刷新列表
-//     await getList()
-//   } catch {}
-// }
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await JobFairManageApi.deleteJobFair(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
 
 /** 导出按钮操作 */
 // const handleExport = async () => {

src/views/menduner/system/web/WebContentForm.vue

@@ -82,7 +82,7 @@ const imgSizeList = {
   'appHomeCarousel': [750, 350],
   'appAdvertisement': [331, 442],
   'pcLoginBackground': [1920, 940],
-  'pcTop': [1429, 80],
+  'pcTop': [1920, 80],
   'pcHomePreferred': [378, 173],
   // 'appHomeColumn': [72, 72]
 }

src/views/menduner/system/web/index.vue

@@ -79,7 +79,7 @@ const loading = ref(false)
 const tab = ref(0)
 let info = reactive({})
 const tabList = ref([
-  { label: 'PC首页顶部广告图', value: 0, key: 'pcTop', size: '宽1429px*高80px' },
+  { label: 'PC首页顶部广告图', value: 0, key: 'pcTop', size: '宽1920px*高80px' },
   { label: 'PC首页左侧广告图', value: 1, key: 'pcLeft', size: '宽869px*高1512px' },
   { label: 'PC首页弹窗广告图', value: 2, key: 'pcAdvertisement', size: '宽900px*高530px' },
   { label: 'PC首页轮播图', value: 3, key: 'pcHomeCarousel', size: '宽792px*高392px' },