370 lines
8.8 KiB
Vue
370 lines
8.8 KiB
Vue
<template>
|
||
<div class="step-units">
|
||
<el-form
|
||
ref="formRef"
|
||
:model="localFormData"
|
||
:rules="rules"
|
||
label-position="right"
|
||
>
|
||
<!-- 参与单位列表 -->
|
||
<div class="section-header">
|
||
<h3>参与单位列表</h3>
|
||
<p class="description">添加本项目涉及的参与单位信息</p>
|
||
</div>
|
||
|
||
<el-table
|
||
:data="localFormData.participatingUnits"
|
||
style="width: 100%"
|
||
border
|
||
stripe
|
||
class="units-table"
|
||
>
|
||
<el-table-column prop="index" label="序号" width="80" align="center">
|
||
<template #default="{ $index }">
|
||
{{ $index + 1 }}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="单位Logo" width="120" align="center">
|
||
<template #default="{ row, $index }">
|
||
<el-upload
|
||
class="logo-uploader"
|
||
:show-file-list="false"
|
||
:before-upload="(file) => handleLogoUpload(file, $index)"
|
||
accept="image/*"
|
||
>
|
||
<div v-if="row.logoUrl" class="logo-preview">
|
||
<img :src="row.logoUrl" class="logo-image" />
|
||
<div class="logo-overlay">
|
||
<el-icon><Camera /></el-icon>
|
||
<span>更换</span>
|
||
</div>
|
||
</div>
|
||
<div v-else class="logo-placeholder">
|
||
<el-icon><Plus /></el-icon>
|
||
<span>上传Logo</span>
|
||
</div>
|
||
</el-upload>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="单位名称" min-width="200" align="center">
|
||
<template #default="{ row, $index }">
|
||
<el-form-item
|
||
:prop="`participatingUnits.${$index}.unitName`"
|
||
:rules="unitNameRules"
|
||
style="margin-bottom: 0"
|
||
>
|
||
<el-input
|
||
v-model="row.unitName"
|
||
placeholder="请输入单位名称"
|
||
maxlength="100"
|
||
/>
|
||
</el-form-item>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="单位角色" min-width="150" align="center">
|
||
<template #default="{ row, $index }">
|
||
<el-form-item
|
||
:prop="`participatingUnits.${$index}.role`"
|
||
:rules="roleRules"
|
||
style="margin-bottom: 0"
|
||
>
|
||
<el-select v-model="row.role" placeholder="请选择角色">
|
||
<el-option label="主办单位" value="host" />
|
||
<el-option label="协办单位" value="coorganizer" />
|
||
<el-option label="支持单位" value="supporter" />
|
||
<el-option label="合作单位" value="partner" />
|
||
<el-option label="赞助单位" value="sponsor" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作" width="120" align="center">
|
||
<template #default="{ $index }">
|
||
<div class="action-buttons">
|
||
<el-button
|
||
type="danger"
|
||
size="small"
|
||
@click="handleDeleteUnit($index)"
|
||
:disabled="localFormData.participatingUnits.length <= 1"
|
||
>
|
||
<el-icon><Delete /></el-icon>
|
||
</el-button>
|
||
<el-tooltip content="删除该单位" placement="top">
|
||
<span :class="{ 'disabled-tip': localFormData.participatingUnits.length > 1 }"></span>
|
||
</el-tooltip>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 添加单位按钮 -->
|
||
<div class="add-unit-action">
|
||
<el-button type="primary" @click="handleAddUnit" plain>
|
||
<el-icon><Plus /></el-icon>
|
||
添加单位
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 验证提示 -->
|
||
<el-alert
|
||
v-if="localFormData.participatingUnits.length === 0"
|
||
title="提示"
|
||
type="warning"
|
||
:closable="false"
|
||
class="validation-alert"
|
||
>
|
||
请至少添加一个参与单位
|
||
</el-alert>
|
||
</el-form>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, watch } from 'vue'
|
||
import { Delete, Plus, Camera } from '@element-plus/icons-vue'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
// 定义 props
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
})
|
||
|
||
// 定义 emits
|
||
const emit = defineEmits(['update:modelValue'])
|
||
|
||
// 表单引用
|
||
const formRef = ref(null)
|
||
|
||
// 本地表单数据副本
|
||
const localFormData = reactive({
|
||
participatingUnits: []
|
||
})
|
||
|
||
// 初始化本地数据
|
||
// localFormData.participatingUnits = JSON.parse(JSON.stringify(props.modelValue.participatingUnits || []))
|
||
|
||
// 监听本地数据变化，同步到父组件
|
||
watch(localFormData, (newVal) => {
|
||
emit('update:modelValue', newVal)
|
||
}, { deep: true })
|
||
|
||
// 监听父组件数据变化，同步到本地
|
||
watch(() => props.modelValue, (newVal) => {
|
||
if (newVal && newVal.participatingUnits) {
|
||
localFormData.participatingUnits = JSON.parse(JSON.stringify(newVal.participatingUnits))
|
||
}
|
||
}, { deep: true })
|
||
|
||
// 单位名称验证规则
|
||
const unitNameRules = [
|
||
{ required: true, message: '请输入单位名称', trigger: 'blur' },
|
||
{ min: 2, max: 100, message: '单位名称长度为2-100个字符', trigger: 'blur' }
|
||
]
|
||
|
||
// 角色验证规则
|
||
const roleRules = [
|
||
{ required: true, message: '请选择单位角色', trigger: 'change' }
|
||
]
|
||
|
||
// 表单验证规则
|
||
const rules = reactive({
|
||
participatingUnits: [
|
||
{
|
||
type: 'array',
|
||
required: true,
|
||
message: '请至少添加一个参与单位',
|
||
trigger: 'change',
|
||
validator: (rule, value, callback) => {
|
||
if (!value || value.length === 0) {
|
||
callback(new Error('请至少添加一个参与单位'))
|
||
} else {
|
||
// 检查是否所有行都填写完整
|
||
const incomplete = value.some(unit => !unit.unitName || !unit.role)
|
||
if (incomplete) {
|
||
callback(new Error('请完善所有单位信息'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
})
|
||
|
||
// 处理 Logo 上传
|
||
const handleLogoUpload = (file, index) => {
|
||
const isImage = file.type.startsWith('image/')
|
||
const isLt2M = file.size / 1024 / 1024 < 2
|
||
|
||
if (!isImage) {
|
||
ElMessage.error('只能上传图片文件！')
|
||
return false
|
||
}
|
||
|
||
if (!isLt2M) {
|
||
ElMessage.error('图片大小不能超过 2MB！')
|
||
return false
|
||
}
|
||
|
||
// 使用 FileReader 读取文件并转换为 base64
|
||
const reader = new FileReader()
|
||
reader.onload = (e) => {
|
||
const base64Url = e.target.result
|
||
localFormData.participatingUnits[index].logoUrl = base64Url
|
||
ElMessage.success('Logo 上传成功！')
|
||
}
|
||
reader.readAsDataURL(file)
|
||
|
||
return false // 阻止默认上传行为
|
||
}
|
||
|
||
// 添加单位
|
||
const handleAddUnit = () => {
|
||
localFormData.participatingUnits.push({
|
||
unitName: '',
|
||
role: '',
|
||
logoUrl: ''
|
||
})
|
||
}
|
||
|
||
// 删除单位
|
||
const handleDeleteUnit = (index) => {
|
||
localFormData.participatingUnits.splice(index, 1)
|
||
}
|
||
|
||
// 暴露验证方法给父组件
|
||
const validate = async () => {
|
||
if (!formRef.value) return false
|
||
try {
|
||
await formRef.value.validate()
|
||
return true
|
||
} catch (error) {
|
||
return false
|
||
}
|
||
}
|
||
|
||
defineExpose({
|
||
validate
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.step-units {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.section-header {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-header h3 {
|
||
font-size: 18px;
|
||
color: #303133;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.section-header .description {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
}
|
||
|
||
.units-table {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* Logo 上传样式 */
|
||
.logo-uploader {
|
||
display: inline-block;
|
||
}
|
||
|
||
.logo-uploader .el-upload {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.logo-uploader .el-upload:hover {
|
||
border-color: #409eff;
|
||
}
|
||
|
||
.logo-placeholder {
|
||
width: 80px;
|
||
height: 80px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #8c939d;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.logo-placeholder .el-icon {
|
||
font-size: 24px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.logo-preview {
|
||
width: 80px;
|
||
height: 80px;
|
||
position: relative;
|
||
}
|
||
|
||
.logo-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.logo-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: none;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.logo-preview:hover .logo-overlay {
|
||
display: flex;
|
||
}
|
||
|
||
.logo-overlay .el-icon {
|
||
font-size: 20px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.add-unit-action {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.validation-alert {
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|