| New file |
| | |
| | | <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> |
| | | <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="24"> |
| | | <div class="label">异议描述</div> |
| | | <div class="val">{{ formData.objectionDesc }}</div> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <div class="label">异议依据</div> |
| | | <div class="val">{{ formData.objectionBasis }}</div> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <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="24"> |
| | | <el-form-item label="异议描述" prop="objectionDesc"> |
| | | <el-input |
| | | class="gd-input" |
| | | v-model="formData.objectionDesc" |
| | | type="textarea" |
| | | :rows="4" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="异议依据" prop="objectionBasis"> |
| | | <el-input |
| | | class="gd-input" |
| | | v-model="formData.objectionBasis" |
| | | type="textarea" |
| | | :rows="4" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <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 color="#F2F3F5" @click="visible = false">{{ dialogReadonly ? '关闭' : '取消' }}</el-button> |
| | | <el-button |
| | | class="save-btn" |
| | | color="#4C34FF" |
| | | v-if="!dialogReadonly" |
| | | :loading="submitting" |
| | | :disabled="submitting" |
| | | @click="handleSubmit" |
| | | > |
| | | 保存 |
| | | </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: '', |
| | | 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 { |
| | | await gdDataObjectionSubmitApi(formData.value) |
| | | ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功') |
| | | 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 ?? {} |
| | | } |
| | | |
| | | // 打开弹框 |
| | | 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> |