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

<template>
	<!-- 筛选 -->
	<div class="pa-3 d-flex justify-space-between align-center">
		<Autocomplete v-model="enterpriseId" @change="getList" :item="selectItems" style="width: 300px;" />
		<div>
			<v-btn color="primary" elevation="5" prepend-icon="mdi-refresh" @click="getList(true)">刷 新</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-if="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>
		<Empty v-else :elevation="false" />
	</div>

	<CtDialog :visible="showDialog" :widthType="2" titleClass="text-h6" :footer="true" title="新增实习报告" @close="handleClose" @submit="handleSubmit">
		<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, onMounted } from 'vue'
import { usePersonCenterStore } from '@/store/personCenter'
import { useRoute } from 'vue-router'
import { getStudentReportList, saveStudentReport, getStudentPracticeCompanyList } from '@/api/recruit/personal/student'
import Snackbar from '@/plugins/snackbar'
import { formatName } from '@/utils/getText'

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: 'enterpriseName',
      itemValue: 'id',
      rules: [v => !!v || '请选择实习企业'],
      items: []
    },
    {
			slotName: 'urlList',
			value: [],
			defaultValue: [],
			key: 'urlList',
			label: '实习报告 *'
    },
  ]
})

const selectItems = ref({
  label: '请选择要查看的企业',
  itemText: 'enterpriseName',
  itemValue: 'id',
  clearable: true,
  hideDetails: true,
  items: []
})

// 获取实习企业列表
const getCompanyList = async () => {
  try {
    const data = await getStudentPracticeCompanyList()
		data.forEach(e => {
			e.id = e.id.toString()
			e.enterpriseName = formatName(e.anotherName || e.name)
		})
		selectItems.value.items = data
		formItems.value.options.find(e => e.key === 'enterpriseId').items = data
	} catch {}
}

// 实习报告列表
const getList = async (isRefresh = false) => {
	if ((!items.value || !items.value.length) && isRefresh) return Snackbar.warning('暂无实习报告')
	items.value = []
	try {
		const data = await getStudentReportList(enterpriseId.value ? { enterpriseId: enterpriseId.value } : {})
		if (!data || !Object.keys(data).length) return
		for (let item in data) {
			items.value.push({ date: item, arr: data[item].map(e => e.url) })
		}
	} catch {}
}

onMounted(() => {
	getCompanyList()
	const { id } = route.query
	if (id) {
		enterpriseId.value = id
	}
	getList()
})


// 新增实习报告
const showDialog = ref(false)
const handleAddReport = () => {
	if (!selectItems.value.items || !selectItems.value.items.length) return Snackbar.warning('暂无实习企业')
	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 = 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()
	}
}

// 预览
const personCenterStore = usePersonCenterStore()
const handlePreview = (arr, index) => {
	personCenterStore.setPreviewData(arr, index)
}
</script>

<style scoped lang="scss">
.title-date {
	border-left: 5px solid var(--v-primary-base);
	padding-left: 12px;
	line-height: 17px;
}
</style>