<template>
|
<el-dialog
|
class="gd-dialog"
|
v-model="visible"
|
:title="'查看申请'"
|
@closed="visible = false"
|
destroy-on-close
|
>
|
<div class="detail-container">
|
<!-- 左侧步骤条 -->
|
<div class="detail-left">
|
<el-steps :active="activeStep" direction="vertical" align-center>
|
<el-step v-for="(step, index) in steps" :key="index" :title="step.title">
|
<template #description>
|
<div class="step-person">{{ step.person }}</div>
|
<div class="step-time">{{ step.time }}</div>
|
</template>
|
</el-step>
|
</el-steps>
|
</div>
|
<!-- 右侧表单数据 -->
|
<div class="detail-right">
|
<div>
|
<div class="label">需求详情</div>
|
<div class="requirementsDetailsBox">
|
<div class="detail-table">
|
<div class="detail-row">
|
<div class="detail-cell">
|
<span class="cell-label">需求名称</span>
|
<span class="cell-value">{{ formData.demandName }}</span>
|
</div>
|
<div class="detail-cell">
|
<span class="cell-label">需求类型</span>
|
<span class="cell-value">{{ getDictLabel(formData.demandType, dictObj.requirementType) }}</span>
|
</div>
|
</div>
|
<div class="detail-row">
|
<div class="detail-cell">
|
<span class="cell-label">需求联系人</span>
|
<span class="cell-value">{{ formData.contactPerson }}</span>
|
</div>
|
<div class="detail-cell">
|
<span class="cell-label">需求联系人电话</span>
|
<span class="cell-value">{{ formData.contactPhone }}</span>
|
</div>
|
</div>
|
<div class="detail-row">
|
<div class="detail-cell">
|
<span class="cell-label">需求邮箱</span>
|
<span class="cell-value">{{ formData.contactEmail }}</span>
|
</div>
|
<div class="detail-cell">
|
<span class="cell-label">更新周期</span>
|
<span class="cell-value">{{ formData.updateCycle }}</span>
|
</div>
|
</div>
|
<div class="detail-row">
|
<div class="detail-cell">
|
<span class="cell-label">申请依据</span>
|
<span class="cell-value">{{ formData.applyBasis }}</span>
|
</div>
|
<div class="detail-cell">
|
<span class="cell-label">共享类型</span>
|
<span class="cell-value">{{ getDictLabel(formData.shareType, dictObj.sharedType) }}</span>
|
</div>
|
</div>
|
<div class="detail-row">
|
<div class="detail-cell">
|
<span class="cell-label">应用场景类型</span>
|
<span class="cell-value">{{ getDictLabel(formData.applicationScene, dictObj.appSceneType) }}</span>
|
</div>
|
<div class="detail-cell">
|
<span class="cell-label">责任部门</span>
|
<span class="cell-value">{{ formData.responsibleDeptName }}</span>
|
</div>
|
</div>
|
<div class="detail-row">
|
<div class="detail-cell">
|
<span class="cell-label">数据来源依据</span>
|
<span class="cell-value">{{ formData.dataSource }}</span>
|
</div>
|
<div class="detail-cell">
|
<span class="cell-label">需求信息项</span>
|
<span class="cell-value">{{ formData.demandInfo }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div class="label">数据上传</div>
|
<div class="upload-container">
|
<el-upload
|
ref="uploadRef"
|
:auto-upload="false"
|
:limit="1"
|
:on-change="handleFileChange"
|
:on-remove="handleFileRemove"
|
:before-upload="beforeFileUpload"
|
:file-list="fileList"
|
accept=".zip,.rar,.7z,.tar,.gz"
|
class="upload-demo"
|
>
|
<template #trigger>
|
<el-button type="primary">选择文件</el-button>
|
</template>
|
<template #tip>
|
<div class="el-upload__tip">
|
请上传压缩文件 (.zip/.rar/.7z/.tar/.gz)
|
</div>
|
</template>
|
</el-upload>
|
<el-button
|
type="success"
|
:disabled="!selectedFile"
|
@click="handleUpload"
|
style="margin-top: 10px;"
|
>
|
上传文件
|
</el-button>
|
|
<!-- 已上传文件列表 -->
|
<div v-if="uploadedFiles.length > 0" class="uploaded-files">
|
<h4>已上传文件：</h4>
|
<div v-for="(file, index) in uploadedFiles" :key="index" class="file-item">
|
<span>{{ file.originalName }}</span>
|
<el-button type="text" @click="viewFile(file)" style="margin-left: 10px;">查看</el-button>
|
<el-button type="text" @click="downloadFile(file)" style="margin-left: 5px;">下载</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
<template #footer>
|
<el-button
|
class="save-btn"
|
color="#4C34FF"
|
|
|
@click="rejectTheApplication"
|
>
|
拒绝申请
|
</el-button>
|
<el-button color="#F2F3F5" @click="approvedByTheReview">审核通过</el-button>
|
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, inject } from 'vue'
|
import { getDictLabel } from '@ztzf/utils'
|
import { gdSupplyDemandDetailApi, putFileAttachApi,gdSupplyDemandAuditPassApi,gdSupplyDemandAuditRejectApi } from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
const dictObj = inject('dictObj')
|
const deptTree = inject('deptTree')
|
|
const visible = defineModel() // 弹框显隐
|
const formData = ref({}) // 表单数据
|
const uploadRef = ref() // 上传组件引用
|
const selectedFile = ref(null) // 选择的文件
|
const fileList = ref([]) // 上传文件列表
|
const uploadedFiles = ref([]) // 已上传文件列表
|
const uploadLoading = ref(false) // 上传加载状态
|
const responseData = ref([])
|
// 步骤条数据
|
const steps = ref([
|
{ title: '需求申请', person: '张三', time: '2025-03-31 12:23:30' },
|
{ title: '审核通过', person: '', time: '' },
|
])
|
// 当前激活步骤
|
const activeStep = ref(0)
|
|
// 文件选择变化
|
const handleFileChange = (file, fileList) => {
|
if (fileList.length > 0) {
|
selectedFile.value = file.raw
|
} else {
|
selectedFile.value = null
|
}
|
}
|
|
// 文件移除
|
const handleFileRemove = () => {
|
selectedFile.value = null
|
}
|
|
// 上传前验证
|
const beforeFileUpload = (file) => {
|
const allowedExtensions = ['.zip', '.rar', '.7z', '.tar', '.gz']
|
const fileExtension = '.' + file.name.split('.').pop().toLowerCase()
|
|
if (!allowedExtensions.includes(fileExtension)) {
|
ElMessage.error('只能上传压缩文件格式：.zip/.rar/.7z/.tar/.gz')
|
return false
|
}
|
|
// 文件大小限制，这里限制为100MB
|
const maxSize = 100 * 1024 * 1024 // 100MB
|
if (file.size > maxSize) {
|
ElMessage.error('文件大小不能超过100MB')
|
return false
|
}
|
|
return true
|
}
|
|
// 处理文件上传
|
const handleUpload = async () => {
|
if (!selectedFile.value) {
|
ElMessage.warning('请先选择文件')
|
return
|
}
|
|
// 再次验证文件类型
|
if (!beforeFileUpload(selectedFile.value)) {
|
return
|
}
|
|
try {
|
uploadLoading.value = true
|
|
// 创建FormData对象
|
const formData = new FormData()
|
formData.append('file', selectedFile.value)
|
|
// 调用上传接口
|
const response = await putFileAttachApi(formData)
|
|
if (response.data && response.data.success) {
|
const fileData = response.data.data
|
console.log('成功数据',fileData);
|
responseData.value = fileData
|
// 添加到已上传文件列表
|
uploadedFiles.value.push({
|
name: fileData.name,
|
originalName: fileData.originalName,
|
link: fileData.link,
|
attachId: fileData.attachId
|
})
|
|
ElMessage.success('文件上传成功！')
|
|
// 清空上传列表
|
uploadRef.value.clearFiles()
|
selectedFile.value = null
|
|
// 这里可以将附件ID保存到表单数据中，供后续提交使用
|
// formData.value.attachmentId = fileData.attachId
|
|
} else {
|
ElMessage.error(response.data?.msg || '文件上传失败')
|
}
|
} catch (error) {
|
console.error('文件上传失败:', error)
|
ElMessage.error('文件上传失败，请重试')
|
} finally {
|
uploadLoading.value = false
|
}
|
}
|
|
// 查看文件
|
const viewFile = (file) => {
|
if (file.link) {
|
window.open(file.link, '_blank')
|
} else {
|
ElMessage.warning('文件链接无效')
|
}
|
}
|
|
// 下载文件
|
const downloadFile = (file) => {
|
if (file.link) {
|
// 创建一个隐藏的a标签来触发下载
|
const a = document.createElement('a')
|
a.href = file.link
|
a.download = file.originalName || file.name
|
document.body.appendChild(a)
|
a.click()
|
document.body.removeChild(a)
|
} else {
|
ElMessage.warning('文件链接无效')
|
}
|
}
|
|
// 根据部门ID获取部门名称
|
function getDeptNameById(deptId, deptList) {
|
// 处理类型转换，确保比较的是相同类型
|
const targetId = String(deptId)
|
|
// 递归遍历部门树
|
function findDept(deptList) {
|
for (const dept of deptList) {
|
if (String(dept.id) === targetId) {
|
return dept.name
|
}
|
if (Array.isArray(dept.children) && dept.children.length > 0) {
|
const name = findDept(dept.children)
|
if (name) return name
|
}
|
}
|
return ''
|
}
|
|
if (!targetId || !Array.isArray(deptList) || deptList.length === 0) {
|
return ''
|
}
|
|
return findDept(deptList)
|
}
|
|
// 打开弹框
|
async function open({ row }) {
|
if (row?.id) {
|
await loadDetail(row.id)
|
// 可以在这里加载已上传的文件列表
|
// loadUploadedFiles(row.id)
|
}
|
visible.value = true
|
}
|
|
// 加载详情
|
async function loadDetail(id) {
|
const res = await gdSupplyDemandDetailApi({ id })
|
const data = res?.data?.data ?? {}
|
// 如果没有部门名称，根据部门ID从部门树中获取
|
if (data.responsibleDeptId && !data.responsibleDeptName) {
|
data.responsibleDeptName = getDeptNameById(data.responsibleDeptId, deptTree.value)
|
}
|
formData.value = data
|
}
|
|
// 如果需要加载已上传的文件列表
|
const loadUploadedFiles = async (id) => {
|
try {
|
// 这里根据实际情况调用接口获取已上传的文件列表
|
// const response = await getFileListApi({ id })
|
// if (response.data?.success) {
|
// uploadedFiles.value = response.data.data || []
|
// }
|
} catch (error) {
|
console.error('加载已上传文件失败:', error)
|
}
|
}
|
// 拒绝申请
|
const rejectTheApplication = () => {
|
if(responseData.value.length === 0){
|
return ElMessage.warning('请上传数据')
|
}
|
const id = [responseData.value.attachId]
|
console.log('responseData.value',responseData.value)
|
gdSupplyDemandAuditRejectApi({ attachIds:id }).then(() => {
|
ElMessage.success('拒绝申请成功')
|
visible.value = false
|
})
|
}
|
// 审核通过
|
const approvedByTheReview = () => {
|
if(responseData.value.length === 0){
|
return ElMessage.warning('请上传数据')
|
}
|
const id = [responseData.value.attachId]
|
gdSupplyDemandAuditPassApi({ id }).then(() => {
|
ElMessage.success('审核通过成功')
|
visible.value = false
|
})
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style scoped lang="scss">
|
.detail-container {
|
padding: 20px;
|
display: flex;
|
align-items: flex-start;
|
gap: 30px;
|
}
|
|
/* 左侧步骤条 */
|
.detail-left {
|
width: 25%;
|
padding-right: 20px;
|
border-right: 1px solid #e8e8e8;
|
}
|
|
/* 右侧表单 */
|
.detail-right {
|
width: 75%;
|
.requirementsDetailsBox {
|
background: #F2F3F5;
|
border-radius: 2px 2px 2px 2px;
|
}
|
|
/* 详情表格样式 */
|
.detail-table {
|
width: 100%;
|
}
|
|
.detail-row {
|
display: flex;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.detail-cell {
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
padding: 5px 12px;
|
margin-right: 8px;
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
|
.cell-label {
|
font-weight: 500;
|
color: #333333;
|
margin-right: 8px;
|
text-align: right;
|
min-width: 100px;
|
flex-shrink: 0;
|
}
|
|
.cell-value {
|
color: #666666;
|
flex: 1;
|
text-align: left;
|
}
|
}
|
|
/* 步骤条样式 */
|
:deep(.el-steps) {
|
align-items: flex-start;
|
}
|
|
:deep(.el-step) {
|
margin-bottom: 20px;
|
}
|
|
:deep(.el-step__title) {
|
font-size: 14px;
|
font-weight: 500;
|
margin-bottom: 8px;
|
}
|
|
/* 步骤描述 */
|
.step-person {
|
font-size: 13px;
|
color: #333;
|
margin-bottom: 4px;
|
}
|
|
.step-time {
|
font-size: 12px;
|
color: #909399;
|
}
|
|
/* 表单样式 */
|
.label {
|
font-weight: 500;
|
margin-bottom: 8px;
|
color: #333;
|
}
|
|
/* 上传容器样式 */
|
.upload-container {
|
padding: 15px;
|
background: #F2F3F5;
|
border-radius: 2px 2px 2px 2px;
|
}
|
|
.uploaded-files {
|
margin-top: 15px;
|
|
h4 {
|
margin-bottom: 10px;
|
font-size: 14px;
|
color: #333333;
|
font-weight: 500;
|
}
|
|
.file-item {
|
display: flex;
|
align-items: center;
|
padding: 8px;
|
background: white;
|
border-radius: 4px;
|
margin-bottom: 5px;
|
|
span {
|
flex: 1;
|
color: #333;
|
}
|
}
|
}
|
|
.val {
|
padding: 8px;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
min-height: 32px;
|
word-break: break-all;
|
margin-bottom: 16px;
|
}
|
|
/* 上传按钮样式 */
|
:deep(.el-upload) {
|
display: inline-block;
|
}
|
|
:deep(.el-upload-list) {
|
margin-top: 10px;
|
}
|
</style>
|
