学生-实习报告

src/components/Upload/imgs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-3 color-666">共<strong class="color-primary"> {{ srcList.length }} </strong>张，还能上传 <strong class="color-primary">{{ (Number(limit) - Number(srcList.length)) }}</strong> 张</div>
+  <div v-if="showTips" class="mb-3 color-666">共<strong class="color-primary"> {{ srcList.length }} </strong>张，还能上传 <strong class="color-primary">{{ (Number(limit) - Number(srcList.length)) }}</strong> 张</div>
   <div class="d-flex flex-wrap">
     <div style="position: relative;" v-for="val in srcList" :key="val" class="mr-3 mb-3">
       <v-icon color="error" class="close" @click="handleClose(val)">mdi-close-circle</v-icon>
@@ -40,6 +40,10 @@ const props = defineProps({
   limit: {
     type: [Number, String],
     default: 9
+  },
+  showTips: {
+    type: Boolean,
+    default: true
   }
 })
 

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

@@ -1,9 +1,14 @@
 <template>
 	<!-- 筛选 -->
-	<div>筛选</div>
-	<v-divider class="my-3"></v-divider>
+	<div class="pa-3 d-flex justify-space-between align-center">
+		<Autocomplete v-model="query.enterpriseId" :item="selectItems" style="width: 300px;" />
+		<div>
+			<v-btn color="primary" elevation="5" prepend-icon="mdi-plus" @click="handleAddReport">新增报告</v-btn>
+		</div>
+	</div>
+	<v-divider class="ma-3"></v-divider>
 	<!-- 实习报告 -->
-	<div>
+	<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">
@@ -18,6 +23,16 @@
 			</div>
 		</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>
+	</CtDialog>
 </template>
 
 <script setup>
@@ -25,6 +40,9 @@ defineOptions({ name: 'InternshipReport' })
 import { ref } from 'vue'
 import { usePersonCenterStore } from '@/store/personCenter'
 
+const query = ref({
+	enterpriseId: null
+})
 const items = ref([
 	{
 		date: '2025-02-21',
@@ -52,6 +70,37 @@ const items = ref([
 	}
 ])
 
+const handleChangeEnterprise = (val) => {
+  console.log(val, 'enterpriseId')
+}
+
+const selectItems = ref({
+  label: '请选择要查看的企业',
+  itemText: 'name',
+  itemValue: 'id',
+  clearable: true,
+  hideDetails: true,
+	change: handleChangeEnterprise,
+  items: []
+})
+
+// 新增实习报告
+const fileUrls = ref([])
+const showDialog = ref(false)
+const handleAddReport = () => {
+	fileUrls.value = []
+	showDialog.value = true
+}
+
+const handleClose = () => {
+	showDialog.value = false
+}
+
+const handleSubmit = () => {
+  console.log('handleSubmit', fileUrls.value)
+	showDialog.value = false
+}
+
 // 预览
 const personCenterStore = usePersonCenterStore()
 const handlePreview = (arr, index) => {