324 lines
7.4 KiB
Vue
324 lines
7.4 KiB
Vue
<template>
|
||
|
||
<div class="backinfo-container">
|
||
<div class="headClass" style="">
|
||
<h3>群体信息</h3>
|
||
<el-button type="primary" v-if="showBut" :disabled="disabled" @click="ClickSave">保存</el-button>
|
||
</div>
|
||
<el-input v-model="qtbjxx" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" placeholder="请输入背景信息"
|
||
class="background-info-input" :disabled="disabled"/>
|
||
|
||
<!-- 文件列表区域 -->
|
||
<div class="file-attachment-section">
|
||
<div class="section-title">相关附件</div>
|
||
<div class="file-list-container">
|
||
<div v-if="fileList.length === 0" class="empty-file-list">暂无附件</div>
|
||
<div v-else class="file-list">
|
||
<div v-for="(file, index) in fileList" :key="index" class="file-item">
|
||
<div class="file-info">
|
||
<span class="file-name">{{ file.originalName }}</span>
|
||
<span class="file-time">{{ file.uploadTime }}</span>
|
||
</div>
|
||
<div class="file-actions">
|
||
<el-button type="text" size="small" @click="downloadFile(file)" title="下载文件" :disabled="disabled">
|
||
<el-icon>
|
||
<Download />
|
||
</el-icon>
|
||
</el-button>
|
||
<el-button type="text" size="small" @click="deleteFile(index)" title="删除文件" class="delete-btn" :disabled="disabled">
|
||
<el-icon>
|
||
<Delete />
|
||
</el-icon>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 上传按钮区域 -->
|
||
<div class="upload-btn-container">
|
||
<el-upload v-model:file-list="fileList" class="upload-demo" :show-file-list="false" multiple
|
||
:http-request="handleUploadRequest" :on-remove="handleRemove" :limit="3" :on-exceed="handleExceed">
|
||
<el-button type="primary" :disabled="disabled">上传文件</el-button >
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref ,watch} from "vue";
|
||
import { ElMessage } from 'element-plus';
|
||
import { Delete, Download } from '@element-plus/icons';
|
||
import { uploadMultipleFiles } from './fileUp'
|
||
import {tbGsxtZdqtUpdate} from '@/api/qt.js'
|
||
const props = defineProps({
|
||
dataList: {
|
||
type: Object,
|
||
default: () => { },
|
||
}, disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
showBut: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
})
|
||
const qtbjxx = ref('')
|
||
// 文件列表数据
|
||
const fileList = ref([])
|
||
watch(()=>props.dataList,(val)=>{
|
||
if (val) {
|
||
qtbjxx.value=val.qtBjzl
|
||
fileList.value=val.qtFjZl?JSON.parse(val.qtFjZl):[]
|
||
}
|
||
},{deep:true})
|
||
|
||
// 下载文件
|
||
const downloadFile = (file) => {
|
||
// 实际项目中，这里应该调用下载API
|
||
console.log('下载文件:', file.name)
|
||
// 示例：window.open(file.url)
|
||
}
|
||
// 删除文件
|
||
const deleteFile = (index) => {
|
||
// 实际项目中，这里应该先调用删除API，成功后再从列表中移除
|
||
fileList.value.splice(index, 1)
|
||
ElMessage.success('文件已删除')
|
||
}
|
||
|
||
// 上传相关方法
|
||
const handleUploadRequest = async (options) => {
|
||
try {
|
||
// 调用uploadMultipleFiles进行文件上传
|
||
const result = await uploadMultipleFiles(options.file, {
|
||
uploadedFiles: fileList.value,
|
||
fjIds: [], // 如果需要保存文件ID列表，可以在这里传递
|
||
compressImage: null // 可选的图片压缩函数
|
||
});
|
||
// 更新文件列表，添加上传时间信息
|
||
const index = fileList.value.findIndex(f => f.originalName === options.file.name);
|
||
if (index !== -1) {
|
||
fileList.value[index].uploadTime = new Date().toLocaleString('zh-CN');
|
||
}
|
||
// 调用成功回调
|
||
if (options.onSuccess) {
|
||
options.onSuccess(result);
|
||
}
|
||
} catch (error) {
|
||
console.error('文件上传失败:', error);
|
||
// 调用失败回调
|
||
if (options.onError) {
|
||
options.onError(error);
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleRemove = (uploadFile, uploadFiles) => {
|
||
// 实际项目中，这里应该先调用删除API，成功后再从列表中移除
|
||
const index = fileList.value.findIndex(f => f.name === uploadFile.name);
|
||
if (index !== -1) {
|
||
fileList.value.splice(index, 1);
|
||
}
|
||
}
|
||
|
||
const handleExceed = (files, uploadFiles) => {
|
||
ElMessage.warning(`最多只能上传 3 个文件`);
|
||
}
|
||
// 修改数据
|
||
const ClickSave = () => {
|
||
const promes = {
|
||
id: props.dataList.id,
|
||
qtBjzl: qtbjxx.value,
|
||
qtFjZl:fileList.value.length>0?JSON.stringify(fileList.value):null
|
||
}
|
||
tbGsxtZdqtUpdate(promes).then((res) => {
|
||
ElMessage.success('修改成功')
|
||
}).catch((err) => {
|
||
ElMessage.error('修改失败')
|
||
});
|
||
}
|
||
const throwData = () => {
|
||
return new Promise((resolve) => {
|
||
// 基本验证：确保背景信息不为空
|
||
if (!qtbjxx.value.trim()) {
|
||
throw new Error('请输入群体背景信息');
|
||
}
|
||
|
||
resolve({
|
||
qtbjxx: qtbjxx.value,
|
||
fileList: fileList.value
|
||
});
|
||
});
|
||
}
|
||
defineExpose({
|
||
throwData
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "~@/assets/css/layout.scss";
|
||
@import "~@/assets/css/element-plus.scss";
|
||
|
||
.backinfo-container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.background-info-input {
|
||
width: 100%;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.file-attachment-section {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 5px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
.file-list-container {
|
||
max-height: 100px;
|
||
overflow-y: auto;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 4px;
|
||
background-color: #ffffff;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* 自定义滚动条样式 */
|
||
.file-list-container::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.file-list-container::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.file-list-container::-webkit-scrollbar-thumb {
|
||
background: #c0c4cc;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.file-list-container::-webkit-scrollbar-thumb:hover {
|
||
background: #909399;
|
||
}
|
||
|
||
.empty-file-list {
|
||
padding: 20px;
|
||
text-align: center;
|
||
color: #909399;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.file-list {
|
||
padding: 5px;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 10px;
|
||
margin-bottom: 2px;
|
||
background-color: #f8f9fa;
|
||
border-radius: 4px;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.file-item:hover {
|
||
background-color: #e6f7ff;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.file-info {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.file-name {
|
||
flex: 1;
|
||
font-size: 12px;
|
||
color: #303133;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.file-size {
|
||
font-size: 11px;
|
||
color: #909399;
|
||
min-width: 60px;
|
||
}
|
||
|
||
.file-time {
|
||
font-size: 11px;
|
||
color: #909399;
|
||
}
|
||
|
||
.file-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.file-actions .el-button {
|
||
padding: 0 5px;
|
||
margin: 0;
|
||
color: #606266;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.file-actions .el-button:hover {
|
||
color: #409eff;
|
||
}
|
||
|
||
.delete-btn:hover {
|
||
color: #f56c6c !important;
|
||
}
|
||
|
||
.upload-btn-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.headClass {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin: 0 0 10px 0;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #409eff;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.headClass::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -2px;
|
||
width: 60px;
|
||
height: 2px;
|
||
background-color: #409eff;
|
||
}
|
||
|
||
h3 {
|
||
margin: 0;
|
||
}
|
||
</style>
|