学生-实习报告：新增实习报告

src/api/recruit/personal/student.js

@@ -38,4 +38,20 @@ export const getStudentPracticePage = async (params) => {
 		url: '/app-api/menduner/system/student/page',
 		params
 	})
+}
+
+// 获取学生实习报告列表
+export const getStudentReportList = async (enterpriseId) => {
+	return await request.get({
+		url: '/app-api/menduner/system/student/get/report/list',
+		params: { enterpriseId }
+	})
+}
+
+// 保存学生实习报告
+export const saveStudentReport = async (data) => {
+	return await request.post({
+		url: '/app-api/menduner/system/student/report/save',
+		data
+	})
 }

src/views/recruit/personal/PersonalCenter/student/InternshipReport/index.vue

@@ -1,77 +1,101 @@
 <template>
 	<!-- 筛选 -->
 	<div class="pa-3 d-flex justify-space-between align-center">
-		<Autocomplete v-model="query.enterpriseId" :item="selectItems" style="width: 300px;" />
+		<Autocomplete v-model="enterpriseId" @change="getList" :item="selectItems" style="width: 300px;" />
 		<div>
-			<v-btn color="primary" elevation="5" prepend-icon="mdi-plus" @click="handleAddReport">新增报告</v-btn>
+			<v-btn color="primary" elevation="5" prepend-icon="mdi-refresh" @click="handleRefresh">刷 新</v-btn>
+			<v-btn color="#00897B" class="ml-5" elevation="5" prepend-icon="mdi-plus" @click="handleAddReport">新增报告</v-btn>
 		</div>
 	</div>
 	<v-divider class="ma-3"></v-divider>
 	<!-- 实习报告 -->
 	<div class="pa-3">
-		<div v-for="item in items" :key="item.date" class="mb-3">
-			<div class="title-date">{{ item.date }}</div>
-			<div class="d-flex flex-wrap">
-				<img 
-					v-for="(src, index) in item.arr" 
-					:key="index" 
-					:src="src" 
-					@click="handlePreview(item.arr, index)" 
-					class="cursor-pointer" 
-					style="width: 200px; height: 250px;"
-				/>
+		<div v-if="enterpriseId && items && items.length > 0">
+			<div v-for="item in items" :key="item.date" class="mb-3">
+				<div class="title-date">{{ item.date }}</div>
+				<div class="d-flex flex-wrap">
+					<img 
+						v-for="(src, index) in item.arr" 
+						:key="index" 
+						:src="src" 
+						@click="handlePreview(item.arr, index)" 
+						class="cursor-pointer" 
+						style="width: 200px; height: 250px;"
+					/>
+				</div>
 			</div>
 		</div>
+		<div v-else class="color-666 text-center" style="line-height: 60vh;">请选择要查看的实习企业</div>
 	</div>
 
 	<CtDialog :visible="showDialog" :widthType="2" titleClass="text-h6" :footer="true" title="新增实习报告" @close="handleClose" @submit="handleSubmit">
-		<div>
-			<Imgs v-model="fileUrls" :showTips="false" limit="9"></Imgs>
-			<div class="color-999 font-size-14 mt-3 text-left">
-				<p>*最多可上传9张图片</p>
-				<p>*只支持JPG、JPEG、PNG类型的图片</p>
-			</div>
-		</div>
+		<CtForm ref="CtFormRef" :items="formItems">
+			<template #urlList="{ item }">
+				<div>
+					<p class="color-primary">*请上传实习报告图片（最多可上传9张图片）</p>
+					<p class="mb-3 color-primary">*只支持JPG、JPEG、PNG类型的图片</p>
+					<Imgs v-model="item.value" :showTips="false" limit="9"></Imgs>
+				</div>
+			</template>
+		</CtForm>
 	</CtDialog>
 </template>
 
 <script setup>
 defineOptions({ name: 'InternshipReport' })
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { usePersonCenterStore } from '@/store/personCenter'
+import { useRoute } from 'vue-router'
+import { getStudentReportList, saveStudentReport } from '@/api/recruit/personal/student'
+import Snackbar from '@/plugins/snackbar'
 
-const query = ref({
-	enterpriseId: null
+const route = useRoute()
+const enterpriseId = ref(null)
+const CtFormRef = ref(null)
+const items = ref([])
+const formItems = ref({
+  options: [
+    {
+      type: 'autocomplete',
+      key: 'enterpriseId',
+      value: null,
+      defaultValue: null,
+      label: '实习企业 *',
+      outlined: true,
+      itemText: 'name',
+      itemValue: 'id',
+      rules: [v => !!v || '请选择实习企业'],
+      items: [{ name: '门墩儿科技有限公司', id: '1' }, { name: '华为科技有限公司', id: '2' }]
+    },
+    {
+			slotName: 'urlList',
+			value: [],
+			defaultValue: [],
+			key: 'urlList',
+			label: '实习报告 *'
+    },
+  ]
 })
-const items = ref([
-	{
-		date: '2025-02-21',
-		arr: [
-			'https://minio.citupro.com/dev/huomiao/report.png',
-			'https://minio.citupro.com/dev/huomiao/report1.png',
-			'https://minio.citupro.com/dev/huomiao/report2.png'
-		]
-	},
-	{
-		date: '2025-02-25',
-		arr: [
-			'https://minio.citupro.com/dev/huomiao/report.png',
-			'https://minio.citupro.com/dev/huomiao/report1.png',
-			'https://minio.citupro.com/dev/huomiao/report2.png'
-		]
-	},
-	{
-		date: '2025-03-01',
-		arr: [
-			'https://minio.citupro.com/dev/huomiao/report.png',
-			'https://minio.citupro.com/dev/huomiao/report1.png',
-			'https://minio.citupro.com/dev/huomiao/report2.png'
-		]
+
+const getList = async () => {
+	try {
+		const data = await getStudentReportList(enterpriseId.value)
+		console.log(data, '实习报告')
+	} catch {}
+}
+
+onMounted(() => {
+	const { id } = route.query
+	if (id) {
+		enterpriseId.value = id
+		getList()
 	}
-])
+})
 
-const handleChangeEnterprise = (val) => {
-  console.log(val, 'enterpriseId')
+// 刷新
+const handleRefresh = () => {
+	if (!enterpriseId.value) return Snackbar.warning('请先选择要查看的实习企业')
+	getList()
 }
 
 const selectItems = ref({
@@ -80,25 +104,38 @@ const selectItems = ref({
   itemValue: 'id',
   clearable: true,
   hideDetails: true,
-	change: handleChangeEnterprise,
-  items: []
+  items: [{ name: '门墩儿科技有限公司', id: '1' }, { name: '华为科技有限公司', id: '2' }]
 })
 
 // 新增实习报告
-const fileUrls = ref([])
 const showDialog = ref(false)
 const handleAddReport = () => {
-	fileUrls.value = []
+	formItems.value.options.find(e => e.key === 'urlList').value = []
 	showDialog.value = true
 }
 
 const handleClose = () => {
+	formItems.value.options.forEach(e => e.value = e.defaultValue)
 	showDialog.value = false
 }
 
-const handleSubmit = () => {
-  console.log('handleSubmit', fileUrls.value)
-	showDialog.value = false
+const handleSubmit = async () => {
+	const { valid } = await CtFormRef.value.formRef.validate()
+	if (!valid) return
+	let obj = {}
+	formItems.value.options.forEach(e => {
+		obj[e.key] = e.value
+	})
+	if (!obj.urlList || !obj.urlList.length) return Snackbar.warning('请上传实习报告')
+
+	try {
+		await saveStudentReport(obj)
+		Snackbar.success('保存成功')
+		handleClose()
+		getList()
+	} catch {
+		handleClose()
+	}
 }
 
 // 预览