<template>
|
<el-dialog
|
class="gd-dialog"
|
v-model="visible"
|
:title="titleEnum[dialogMode]"
|
@closed="visible = false"
|
destroy-on-close
|
>
|
<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.submitUnitName }}</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.attachName || '暂无附件' }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
<el-form
|
class="gd-dialog-form"
|
v-else
|
ref="formRef"
|
:model="formData"
|
:rules="rules"
|
:disabled="dialogReadonly"
|
label-width="120px"
|
>
|
<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="submitUnitId">-->
|
<!-- <el-tree-select-->
|
<!-- class="gd-select"-->
|
<!-- popper-class="gd-tree-select-popper"-->
|
<!-- v-model="formData.submitUnitId"-->
|
<!-- node-key="id"-->
|
<!-- :data="deptTree"-->
|
<!-- :props="treeProps"-->
|
<!-- check-strictly-->
|
<!-- 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>
|
<el-button
|
class="save-btn"
|
color="#4C34FF"
|
v-if="!dialogReadonly"
|
:loading="submitting"
|
:disabled="submitting"
|
@click="handleSubmit"
|
>
|
保存
|
</el-button>
|
<el-button color="#F2F3F5" @click="handleApply">申请</el-button>
|
|
</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,
|
} from '@/views/orderView/orderDataManage/dataObjection/dataObjectionApi'
|
import { putFileAttachApi } from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi'
|
|
// 初始化表单数据
|
const initForm = () => ({
|
title: '',
|
objectionType: '',
|
submitter: '',
|
submitterContact: '',
|
submitUnitId: '',
|
catalogResourceName: '',
|
objectionDesc: '',
|
objectionBasis: '',
|
attachmentList:[
|
{
|
attachId: '',
|
attachName: '',
|
}
|
]
|
|
})
|
|
// 注入部门树和字典
|
const deptTree = inject('deptTree')
|
const treeProps = inject('treeProps')
|
const dictObj = inject('dictObj')
|
|
const emit = defineEmits(['success'])
|
const formRef = ref(null) // 表单实例
|
const formData = ref(initForm()) // 表单数据
|
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 rules = {
|
title: fieldRules(true),
|
objectionType: fieldRules(true),
|
submitter: fieldRules(true),
|
submitterContact: fieldRules(true),
|
catalogResourceName: fieldRules(true),
|
objectionDesc: fieldRules(true),
|
objectionBasis: 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)
|
}
|
// 更新formData中的附件信息
|
formData.value.attachId = uploadedFiles.value.map(f => f.attachId).join(',')
|
formData.value.attachName = uploadedFiles.value.map(f => f.originalName).join(',')
|
}
|
|
// 上传前验证
|
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,
|
})
|
// 更新formData中的附件信息
|
formData.value.attachId = uploadedFiles.value.map(f => f.attachId).join(',')
|
formData.value.attachName = uploadedFiles.value.map(f => f.originalName).join(',')
|
ElMessage.success('文件上传成功！')
|
}
|
}
|
|
// 上传失败处理
|
const handleUploadError = (error, file, fileListVal) => {
|
ElMessage.error(error?.message || '文件上传失败，请重试')
|
}
|
|
// 提交新增/编辑
|
async function handleSubmit() {
|
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 || '',
|
objectionStatus: formData.value.objectionStatus || '',
|
otherObjectionDetail: formData.value.otherObjectionDetail || '',
|
reviewOpinion: formData.value.reviewOpinion || '',
|
// 构建附件列表
|
attachmentList: uploadedFiles.value.map(file => ({
|
attachId: file.attachId,
|
attachName: file.originalName,
|
}))
|
}
|
await gdDataObjectionSubmitApi(submitData)
|
ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
|
visible.value = false
|
emit('success')
|
} finally {
|
submitting.value = false
|
}
|
}
|
// 申请提交
|
async function handleApply() {
|
|
}
|
// 加载详情
|
async function loadDetail() {
|
if (!formData.value.id) return
|
const res = await gdDataObjectionDetailApi({ id: formData.value.id })
|
formData.value = res?.data?.data ?? {}
|
}
|
|
// 打开弹框
|
async function open({ mode = 'add', row } = {}) {
|
dialogMode.value = mode
|
// 重置文件列表
|
fileList.value = []
|
uploadedFiles.value = []
|
formData.value = dialogMode.value === 'add' ? initForm() : row
|
if (dialogMode.value !== 'add') {
|
await loadDetail()
|
}
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style scoped lang="scss">
|
.detail-container {
|
padding: 20px;
|
.label {
|
font-weight: 500;
|
color: #333333;
|
margin-bottom: 8px;
|
}
|
.val {
|
padding: 8px;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
min-height: 32px;
|
word-break: break-all;
|
margin-bottom: 16px;
|
}
|
}
|
|
.upload-container {
|
width: 100%;
|
}
|
</style>
|
