<template>
|
<el-dialog
|
class="gd-dialog"
|
v-model="visible"
|
:title="titleEnum[dialogMode]"
|
@closed="visible = false"
|
destroy-on-close
|
:close-on-click-modal="false"
|
>
|
<div class="detail-container detail-container1" v-if="dialogReadonly">
|
<el-row class="detail-row-view">
|
<el-col :span="12">
|
<div class="label">标题</div>
|
<div class="val">{{ formData.title }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">异议类型</div>
|
<div class="val">{{ getDictLabel(formData.objectionType, dictObj.objectionType) }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">问题提交人</div>
|
<div class="val">{{ formData.submitter }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">提交人联系方式</div>
|
<div class="val">{{ formData.submitterContact }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">目录/申请资源名称</div>
|
<div class="val">{{ formData.catalogResourceName }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">异议描述</div>
|
<div class="val">{{ formData.objectionDesc }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">异议依据</div>
|
<div class="val">{{ formData.objectionBasis }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">相关附件</div>
|
<div class="val">{{ formData.attachNames || '暂无附件' }}</div>
|
</el-col>
|
<el-col :span="12" v-if="detailObjectionStatus === '2'">
|
<div class="label">其他异议详情</div>
|
<div class="val">{{ formData.otherObjectionDetail }}</div>
|
</el-col>
|
<el-col :span="12" v-if="detailObjectionStatus === '2'">
|
<div class="label">审核意见</div>
|
<div class="val">{{ formData.reviewOpinion }}</div>
|
</el-col>
|
</el-row>
|
<div v-if=" detailObjectionStatus === '1' && !requesterProvider">
|
<div class="detail-title" :style="{ marginTop:pxToRem(20)}">异议反馈</div>
|
<el-form ref="feedbackFormRef" class="gd-dialog-form" :model="feedbackFormData"
|
:rules="feedbackRules" label-width="140px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="其他异议详情" prop="otherObjectionDetail">
|
<el-input
|
class="gd-input"
|
v-model="feedbackFormData.otherObjectionDetail"
|
placeholder="请输入"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="审核意见" prop="reviewOpinion">
|
<el-input
|
class="gd-input"
|
v-model="feedbackFormData.reviewOpinion"
|
placeholder="请输入"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</div>
|
|
<el-form
|
class="gd-dialog-form"
|
v-else
|
ref="formRef"
|
:model="formData"
|
:rules="rules"
|
:disabled="dialogReadonly"
|
label-width="180px"
|
>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="标题" prop="title">
|
<el-input class="gd-input" v-model="formData.title" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="异议类型" prop="objectionType">
|
<el-select
|
class="gd-select"
|
popper-class="gd-select-popper"
|
v-model="formData.objectionType"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option
|
v-for="item in dictObj.objectionType"
|
:key="item.dictKey"
|
:label="item.dictValue"
|
:value="item.dictKey"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="问题提交人" prop="submitter">
|
<el-input class="gd-input" v-model="formData.submitter" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="提交人联系方式" prop="submitterContact">
|
<el-input class="gd-input" v-model="formData.submitterContact" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="目录/申请资源名称" prop="catalogResourceName">
|
<el-input class="gd-input" v-model="formData.catalogResourceName" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="异议描述" prop="objectionDesc">
|
<el-input
|
class="gd-input"
|
v-model="formData.objectionDesc"
|
placeholder="请输入"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="异议依据" prop="objectionBasis">
|
<el-input
|
class="gd-input"
|
v-model="formData.objectionBasis"
|
placeholder="请输入"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="相关附件" prop="attachId">
|
<div class="upload-container">
|
<el-upload
|
:http-request="handleHttpRequest"
|
:on-success="handleUploadSuccess"
|
:on-error="handleUploadError"
|
: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>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<template #footer>
|
<template v-if="!dialogReadonly">
|
<el-button
|
color="#F2F3F5"
|
|
v-if="!dialogReadonly"
|
:loading="submitting || uploading"
|
:disabled="submitting || uploading"
|
@click="handleSubmit"
|
>
|
保存
|
</el-button>
|
<el-button class="" color="#4C34FF" :loading="submitting || uploading" :disabled="submitting || uploading" @click="handleApply">申请</el-button>
|
</template>
|
<template v-if="dialogReadonly && detailObjectionStatus === '1' && !requesterProvider">
|
<el-button color="#F2F3F5" :loading="submitting" :disabled="submitting" @click="visible = false">取消</el-button>
|
|
<el-button
|
class=""
|
color="#4C34FF"
|
|
:loading="submitting"
|
:disabled="submitting"
|
@click="handleFeedbackSubmit"
|
|
>
|
反馈
|
</el-button>
|
<el-button
|
class=""
|
color="#4C34FF"
|
|
:loading="submitting"
|
:disabled="submitting"
|
@click="handleDownloadAttach"
|
|
>
|
下载附件
|
</el-button>
|
</template>
|
<template v-if="detailObjectionStatus === '2'">
|
<!-- <el-button color="#F2F3F5" :loading="submitting" :disabled="submitting" @click="visible = false">关闭</el-button>-->
|
</template>
|
</template>
|
|
<!-- 申请弹框 -->
|
<el-dialog
|
class="gd-dialog"
|
v-model="showApplyDialog"
|
title="申请"
|
@closed="handleApplyDialogClosed"
|
width="500px"
|
destroy-on-close
|
:close-on-click-modal="false"
|
>
|
<el-form class="gd-dialog-form" ref="applyFormRef" :model="applyFormData" :rules="applyRules">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="申请对象部门" prop="applyTargetDeptId">
|
<el-tree-select
|
class="gd-select"
|
popper-class="gd-tree-select-popper"
|
v-model="applyFormData.applyTargetDeptId"
|
node-key="id"
|
:data="deptTree"
|
:props="treeProps"
|
check-strictly
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<el-button color="#F2F3F5" @click="showApplyDialog = false">取消</el-button>
|
<el-button class="" color="#4C34FF" :loading="applying" :disabled="applying" @click="handleApplySubmit">
|
确认
|
</el-button>
|
</template>
|
</el-dialog>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed, ref, inject } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import { fieldRules, getDictLabel } from '@ztzf/utils'
|
import {
|
gdDataObjectionDetailApi,
|
gdDataObjectionSubmitApi,
|
getAttachDetailApi,
|
} from '@/views/orderView/orderDataManage/dataObjection/dataObjectionApi'
|
import { putFileAttachApi } from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi'
|
import { pxToRem } from '@/utils/rem'
|
import { useStore } from 'vuex'
|
const store = useStore()
|
const requesterProvider = computed(() => store.state.user.userInfo?.role_id === '2014158512610869250')
|
// 初始化表单数据
|
const initForm = () => ({
|
id:'',
|
title: '',
|
objectionType: '',
|
submitter: '',
|
submitterContact: '',
|
submitUnitId: '',
|
catalogResourceName: '',
|
objectionDesc: '',
|
objectionBasis: '',
|
attachmentList:[
|
{
|
attachId: '',
|
attachName: '',
|
}
|
],
|
objectionStatus: '',
|
|
})
|
|
// 初始化异议反馈表单数据
|
const initFeedbackForm = () => ({
|
otherObjectionDetail: '',
|
reviewOpinion: '',
|
objectionStatus: '2'
|
})
|
|
// 注入部门树和字典
|
const deptTree = inject('deptTree')
|
const treeProps = inject('treeProps')
|
const dictObj = inject('dictObj')
|
const detailObjectionStatus = inject('detailObjectionStatus')
|
const emit = defineEmits(['success'])
|
const formRef = ref(null) // 表单实例
|
const feedbackFormRef = ref(null) // 反馈表单实例
|
const formData = ref(initForm()) // 表单数据
|
const feedbackFormData = ref(initFeedbackForm()) // 异议反馈表单数据
|
const visible = defineModel() // 弹框显隐
|
const dialogMode = ref('add') // 弹框模式
|
const submitting = ref(false) // 提交中
|
const dialogReadonly = computed(() => dialogMode.value === 'view')
|
const titleEnum = ref({ edit: '编辑', view: '查看', add: '数据异议申请' })
|
const fileList = ref([]) // 上传文件列表
|
const uploadedFiles = ref([]) // 已上传文件列表
|
const attachmentDetailsList = ref([])
|
const uploading = ref(false) // 文件上传中状态
|
|
// 申请弹框相关
|
const showApplyDialog = ref(false)
|
const applyFormRef = ref(null)
|
const applying = ref(false)
|
const applyFormData = ref({
|
applyTargetDeptId: ''
|
})
|
|
// 表单校验规则
|
const rules = {
|
title: fieldRules(true),
|
objectionType: fieldRules(true),
|
submitter: fieldRules(true),
|
submitterContact: fieldRules(true),
|
catalogResourceName: fieldRules(true),
|
objectionDesc: fieldRules(true),
|
objectionBasis: fieldRules(true),
|
attachId: fieldRules(true)
|
|
}
|
|
// 异议反馈表单校验规则
|
const feedbackRules = {
|
otherObjectionDetail: fieldRules(true),
|
reviewOpinion: fieldRules(true),
|
}
|
|
// 申请弹框校验规则
|
const applyRules = {
|
applyTargetDeptId: fieldRules(true),
|
}
|
|
// 自定义上传请求
|
const handleHttpRequest = async options => {
|
uploading.value = true
|
try {
|
const formDataObj = new FormData()
|
formDataObj.append('file', options.file)
|
const response = await putFileAttachApi(formDataObj)
|
if (response.data && response.data.success) {
|
options.onSuccess(response)
|
} else {
|
options.onError(new Error(response.data?.msg || '文件上传失败'))
|
}
|
} catch (error) {
|
options.onError(error)
|
console.error('文件上传失败:', error)
|
} finally {
|
uploading.value = false
|
}
|
}
|
|
// 文件移除
|
const handleFileRemove = (file, fileListVal) => {
|
// 从展示列表中移除
|
fileList.value = fileListVal
|
|
// 从已上传列表中移除
|
const index = uploadedFiles.value.findIndex(item =>
|
item.attachId === file.attachId || item.name === file.name
|
)
|
if (index > -1) {
|
uploadedFiles.value.splice(index, 1)
|
}
|
}
|
// 上传前验证
|
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
|
}
|
// const maxSize = 100 * 1024 * 1024 // 100MB
|
// if (file.size > maxSize) {
|
// ElMessage.error('文件大小不能超过100MB')
|
// return false
|
// }
|
return true
|
}
|
|
// 上传成功处理
|
const handleUploadSuccess = (response, file, fileListVal) => {
|
if (response && response?.data && response?.data?.success) {
|
const fileData = response.data.data
|
uploadedFiles.value.push({
|
name: fileData.name,
|
originalName: fileData.originalName,
|
link: fileData.link,
|
attachId: fileData.attachId,
|
})
|
ElMessage.success('文件上传成功！')
|
}
|
}
|
|
// 上传失败处理
|
const handleUploadError = (error, file, fileListVal) => {
|
ElMessage.error(error?.message || '文件上传失败，请重试')
|
}
|
|
// 提交数据的通用函数
|
async function submitForm(objectionStatus) {
|
formData.value.attachId = uploadedFiles.value.length > 0 ? uploadedFiles.value.length : ''
|
const isValid = await formRef.value?.validate().catch(() => false)
|
if (!isValid) return
|
|
// 在编辑模式下，如果已有附件，可以不强制上传新附件
|
if (dialogMode.value === 'add' && uploadedFiles.value.length === 0) {
|
return ElMessage.warning('请上传附件')
|
}
|
|
submitting.value = true
|
|
try {
|
// 构建符合接口要求的提交数据
|
const submitData = {
|
// 编辑模式下传递id
|
...(formData.value.id && { id: formData.value.id }),
|
title: formData.value.title,
|
objectionType: formData.value.objectionType,
|
submitter: formData.value.submitter,
|
submitterContact: formData.value.submitterContact,
|
catalogResourceName: formData.value.catalogResourceName,
|
objectionDesc: formData.value.objectionDesc,
|
objectionBasis: formData.value.objectionBasis,
|
areaCode: formData.value.areaCode || '',
|
handleUnit: formData.value.handleUnit || '',
|
// 构建附件列表 - 使用当前已上传的文件（包括回显的）
|
...(uploadedFiles.value.length > 0 && {
|
attachmentList: uploadedFiles.value.map(file => ({
|
attachId: file.attachId,
|
attachName: file.originalName,
|
})),
|
}),
|
objectionStatus: objectionStatus
|
}
|
await gdDataObjectionSubmitApi(submitData)
|
ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
|
visible.value = false
|
emit('success')
|
} finally {
|
submitting.value = false
|
}
|
}
|
|
// 提交新增/编辑（保存）
|
async function handleSubmit() {
|
await submitForm('0')
|
}
|
|
// 申请弹框关闭处理
|
function handleApplyDialogClosed() {
|
applyFormData.value.applyTargetDeptId = ''
|
}
|
|
// 申请
|
async function handleApply() {
|
formData.value.attachId = uploadedFiles.value.length > 0 ? uploadedFiles.value.length : ''
|
// 先验证主表单
|
const mainFormValid = await formRef.value?.validate().catch(() => false)
|
if (!mainFormValid) return
|
|
showApplyDialog.value = true
|
}
|
|
// 申请提交
|
async function handleApplySubmit() {
|
const isValid = await applyFormRef.value?.validate().catch(() => false)
|
if (!isValid) return
|
applying.value = true
|
try {
|
// 构建申请数据
|
const applyData = {
|
...formData.value,
|
objectionStatus: '1',
|
applyTargetDeptId: applyFormData.value.applyTargetDeptId
|
}
|
|
// 构建符合接口要求的提交数据
|
const submitData = {
|
// 编辑模式下传递id
|
...(applyData.id && { id: applyData.id }),
|
title: applyData.title,
|
objectionType: applyData.objectionType,
|
submitter: applyData.submitter,
|
submitterContact: applyData.submitterContact,
|
catalogResourceName: applyData.catalogResourceName,
|
objectionDesc: applyData.objectionDesc,
|
objectionBasis: applyData.objectionBasis,
|
areaCode: applyData.areaCode || '',
|
handleUnit: applyData.handleUnit || '',
|
// 构建附件列表 - 使用当前已上传的文件（包括回显的）
|
...(uploadedFiles.value.length > 0 && {
|
attachmentList: uploadedFiles.value.map(file => ({
|
attachId: file.attachId,
|
attachName: file.originalName,
|
})),
|
}),
|
objectionStatus: applyData.objectionStatus,
|
applyTargetDeptId: applyData.applyTargetDeptId
|
}
|
|
await gdDataObjectionSubmitApi(submitData)
|
ElMessage.success('申请成功')
|
showApplyDialog.value = false
|
visible.value = false
|
emit('success')
|
} finally {
|
applying.value = false
|
}
|
}
|
|
// 处理异议反馈提交
|
async function handleFeedbackSubmit() {
|
// 验证反馈表单
|
const isValid = await feedbackFormRef.value?.validate().catch(() => false)
|
if (!isValid) return
|
submitting.value = true
|
try {
|
// 构建反馈提交数据
|
const submitData = {
|
id: formData.value.id,
|
otherObjectionDetail: feedbackFormData.value.otherObjectionDetail || '',
|
reviewOpinion: feedbackFormData.value.reviewOpinion || '',
|
objectionStatus: '2'
|
}
|
await gdDataObjectionSubmitApi(submitData)
|
ElMessage.success('反馈提交成功')
|
visible.value = false
|
emit('success')
|
} finally {
|
submitting.value = false
|
}
|
}
|
// 加载详情
|
async function loadDetail() {
|
if (!formData.value.id) return
|
const res = await gdDataObjectionDetailApi({ id: formData.value.id })
|
formData.value = res?.data?.data ?? {}
|
|
// 处理附件回显
|
if (formData.value.attachIds) {
|
await getAttachDetail(formData.value.attachIds)
|
// 回显到上传组件
|
updateFileListForDisplay()
|
}
|
}
|
|
// 更新文件列表用于显示
|
function updateFileListForDisplay() {
|
fileList.value = []
|
uploadedFiles.value = []
|
|
if (attachmentDetailsList.value && attachmentDetailsList.value.length > 0) {
|
attachmentDetailsList.value.forEach(attach => {
|
const fileItem = {
|
name: attach.originalName || attach.name,
|
url: attach.link, // 用于预览
|
attachId: attach.id, // 文件ID
|
originalName: attach.originalName,
|
link: attach.link
|
}
|
|
fileList.value.push({
|
name: fileItem.name,
|
url: fileItem.url,
|
status: 'success' // 已上传状态
|
})
|
|
uploadedFiles.value.push(fileItem)
|
})
|
}
|
}
|
// 获取附件详情
|
async function getAttachDetail(attachIds) {
|
// 如果 attachIds 是字符串，尝试分割成数组
|
const ids = typeof attachIds === 'string' ? attachIds.split(',') : Array.isArray(attachIds) ? attachIds : [attachIds]
|
const detailPromises = ids.map(id => getAttachDetailApi({ id }))
|
const results = await Promise.all(detailPromises)
|
attachmentDetailsList.value = results.map(res => res.data.data).filter(Boolean)
|
}
|
// 处理附件下载
|
const handleDownloadAttach = async () => {
|
if (!attachmentDetailsList.value || attachmentDetailsList.value.length === 0) {
|
ElMessage.warning('没有可下载的附件')
|
return
|
}
|
// 顺序下载每个附件
|
for (let i = 0; i < attachmentDetailsList.value.length; i++) {
|
const attach = attachmentDetailsList.value[i]
|
|
if (!attach.link) {
|
console.warn(`附件 ${attach.originalName || attach.name} 链接无效，跳过`)
|
continue
|
}
|
|
try {
|
const response = await fetch(attach.link)
|
const blob = await response.blob()
|
const url = window.URL.createObjectURL(blob)
|
const a = document.createElement('a')
|
a.href = url
|
|
// 设置文件名：优先使用 originalName
|
let fileName = attach.originalName || attach.name || `附件_${i + 1}`
|
|
// 确保有扩展名
|
if (fileName && !fileName.includes('.')) {
|
const contentType = response.headers.get('content-type')
|
if (contentType && contentType.includes('zip')) {
|
fileName += '.zip'
|
} else if (contentType && contentType.includes('rar')) {
|
fileName += '.rar'
|
} else {
|
fileName += '.zip'
|
}
|
}
|
|
a.download = fileName
|
a.style.display = 'none'
|
document.body.appendChild(a)
|
a.click()
|
|
// 清理
|
setTimeout(() => {
|
window.URL.revokeObjectURL(url)
|
document.body.removeChild(a)
|
}, 100)
|
|
// 文件间延迟（除了最后一个）
|
if (i < attachmentDetailsList.value.length - 1) {
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
}
|
|
} catch (error) {
|
console.error(`下载失败: ${attach.originalName || attach.name}`, error)
|
}
|
}
|
|
}
|
// 打开弹框
|
async function open({ mode = 'add', row } = {}) {
|
dialogMode.value = mode
|
// 重置文件列表
|
fileList.value = []
|
uploadedFiles.value = []
|
// 重置表单数据
|
formData.value = dialogMode.value === 'add' ? initForm() : row
|
// 重置反馈表单数据
|
feedbackFormData.value = initFeedbackForm()
|
// 重置申请弹框数据
|
applyFormData.value.applyTargetDeptId = ''
|
|
if (dialogMode.value !== 'add') {
|
// 如果是编辑，设置ID并加载详情
|
if (row && row.id) {
|
formData.value.id = row.id
|
}
|
await loadDetail()
|
}
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style scoped lang="scss">
|
.detail-container1 {
|
display: flex;
|
flex-direction: column;
|
}
|
.upload-container {
|
width: 100%;
|
.el-upload__tip {
|
display: inline;
|
}
|
}
|
.label {
|
width: 120px !important;
|
}
|
</style>
|
