<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" 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'">
|
<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"
|
:limit="3"
|
: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"
|
:disabled="submitting"
|
@click="handleSubmit"
|
>
|
保存
|
</el-button>
|
<el-button class="save-btn" color="#4C34FF" :loading="submitting" :disabled="submitting" @click="handleApply">申请</el-button>
|
</template>
|
<template v-if="dialogReadonly && detailObjectionStatus === '1'">
|
<el-button color="#F2F3F5" :loading="submitting" :disabled="submitting" @click="visible = false">取消</el-button>
|
|
<el-button
|
class="save-btn"
|
color="#4C34FF"
|
|
:loading="submitting"
|
:disabled="submitting"
|
@click="handleFeedbackSubmit"
|
|
>
|
反馈
|
</el-button>
|
<el-button
|
class="save-btn"
|
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>
|
</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'
|
// 初始化表单数据
|
const initForm = () => ({
|
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 rules = {
|
title: fieldRules(true),
|
objectionType: fieldRules(true),
|
submitter: fieldRules(true),
|
submitterContact: fieldRules(true),
|
catalogResourceName: fieldRules(true),
|
objectionDesc: fieldRules(true),
|
objectionBasis: fieldRules(true),
|
}
|
|
// 异议反馈表单校验规则
|
const feedbackRules = {
|
otherObjectionDetail: fieldRules(true),
|
reviewOpinion: fieldRules(true),
|
}
|
|
// 自定义上传请求
|
const handleHttpRequest = async options => {
|
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)
|
}
|
}
|
|
// 文件移除
|
const handleFileRemove = (file, fileListVal) => {
|
if (file.response && file.response.attachId) {
|
uploadedFiles.value = uploadedFiles.value.filter(item => item.attachId !== file.response.attachId)
|
}
|
}
|
|
// 上传前验证
|
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) {
|
const isValid = await formRef.value?.validate().catch(() => false)
|
if (!isValid) return
|
submitting.value = true
|
try {
|
// 构建符合接口要求的提交数据
|
const submitData = {
|
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 || '',
|
// 构建附件列表
|
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')
|
}
|
|
// 申请提交
|
async function handleApply() {
|
await submitForm('1')
|
}
|
|
// 处理异议反馈提交
|
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) {
|
getAttachDetail(formData.value.attachIds)
|
}
|
}
|
// 获取附件详情
|
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)
|
console.log('附件详情', attachmentDetailsList.value)
|
}
|
// 处理附件下载
|
async function handleDownloadAttach() {
|
if (attachmentDetailsList.value.length === 0) {
|
ElMessage.warning('没有可下载的附件')
|
return
|
}
|
|
// 遍历所有附件并下载
|
attachmentDetailsList.value.forEach(attach => {
|
if (attach.link) {
|
const link = document.createElement('a')
|
link.href = attach.link
|
link.download = attach.originalName || attach.name
|
link.style.display = 'none'
|
document.body.appendChild(link)
|
link.click()
|
document.body.removeChild(link)
|
}
|
})
|
}
|
|
|
// 打开弹框
|
async function open({ mode = 'add', row } = {}) {
|
dialogMode.value = mode
|
// 重置文件列表
|
fileList.value = []
|
uploadedFiles.value = []
|
// 重置表单数据
|
formData.value = dialogMode.value === 'add' ? initForm() : row
|
// 重置反馈表单数据
|
feedbackFormData.value = initFeedbackForm()
|
if (dialogMode.value !== 'add') {
|
await loadDetail()
|
}
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style scoped lang="scss">
|
.detail-container {
|
padding: 20px;
|
}
|
.upload-container {
|
width: 100%;
|
}
|
.label {
|
width: 120px !important;
|
}
|
</style>
|
