吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/FormDiaLog.vue
@@ -5,9 +5,11 @@
      :title="titleEnum[dialogMode]"
      @closed="visible = false"
      destroy-on-close
      :close-on-click-modal="false"
   >
      <div class="detail-container" v-if="dialogReadonly">
         <el-row>
      <div class="detail-container  detail-container1" v-if="dialogReadonly">
         <div class="detail-title">异议详情</div>
         <el-row class="detail-row-view">
            <el-col :span="12">
               <div class="label">标题</div>
               <div class="val">{{ formData.title }}</div>
@@ -24,10 +26,6 @@
               <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>
@@ -42,9 +40,45 @@
            </el-col>
            <el-col :span="12">
               <div class="label">相关附件</div>
               <div class="val">{{ formData.attachName || '暂无附件' }}</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' && permission.orderData_feedback">
            <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
@@ -54,7 +88,7 @@
         :model="formData"
         :rules="rules"
         :disabled="dialogReadonly"
         label-width="120px"
         label-width="180px"
      >
         <el-row>
            <el-col :span="12">
@@ -90,20 +124,6 @@
                  <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 />
@@ -134,7 +154,6 @@
                  <div class="upload-container">
                     <el-upload
                        :http-request="handleHttpRequest"
                        :limit="3"
                        :on-success="handleUploadSuccess"
                        :on-error="handleUploadError"
                        :on-remove="handleFileRemove"
@@ -147,7 +166,7 @@
                           <el-button type="primary">选择文件</el-button>
                        </template>
                        <template #tip>
                           <div class="el-upload__tip">支持上传 (.zip/.rar/.7z/.tar/.gz)格式文件</div>
                           <div class="el-upload__tip">支持上传 (.zip/.rar/.7z/.tar/.gz)格式</div>
                        </template>
                     </el-upload>
                  </div>
@@ -155,20 +174,87 @@
            </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 #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' && permission.orderData_feedback">
            <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>
@@ -179,11 +265,17 @@
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 permission = computed(() => store.state.user.permission);
// const requesterProvider = computed(() => store.state.user.userInfo?.role_id === '2014158512610869250')
// 初始化表单数据
const initForm = () => ({
   id:'',
   title: '',
   objectionType: '',
   submitter: '',
@@ -197,18 +289,28 @@
         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) // 提交中
@@ -216,6 +318,16 @@
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 = {
@@ -226,10 +338,24 @@
   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)
@@ -242,19 +368,24 @@
   } catch (error) {
      options.onError(error)
      console.error('文件上传失败:', error)
   } finally {
      uploading.value = false
   }
}
// 文件移除
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(',')
  // 从展示列表中移除
  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']
@@ -263,11 +394,11 @@
      ElMessage.error('只能上传压缩文件格式:.zip/.rar/.7z/.tar/.gz')
      return false
   }
   const maxSize = 100 * 1024 * 1024 // 100MB
   if (file.size > maxSize) {
      ElMessage.error('文件大小不能超过100MB')
      return false
   }
   // const maxSize = 100 * 1024 * 1024 // 100MB
   // if (file.size > maxSize) {
   //    ElMessage.error('文件大小不能超过100MB')
   //    return false
   // }
   return true
}
@@ -281,9 +412,6 @@
         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('文件上传成功!')
   }
}
@@ -293,85 +421,283 @@
   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() {
   const isValid = await formRef.value?.validate().catch(() => false)
   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 = {
         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,
         }))
         id: formData.value.id,
         otherObjectionDetail: feedbackFormData.value.otherObjectionDetail || '',
         reviewOpinion: feedbackFormData.value.reviewOpinion || '',
         objectionStatus: '2'
      }
      await gdDataObjectionSubmitApi(submitData)
      ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
      ElMessage.success('反馈提交成功')
      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 ?? {}
  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
   if (dialogMode.value !== 'add') {
      await loadDetail()
   }
  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-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;
   }
.detail-container1 {
display: flex;
flex-direction: column;
}
.upload-container {
   width: 100%;
   .el-upload__tip {
      display: inline;
   }
}
.label {
   width: 120px !important;
}
</style>