admin/guoju0808
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(submission-detail): 回退 el-descriptions 改回 el-form readonly

Browse Source 
- template: el-descriptions → el-form + el-input readonly + readonly-cell
- script: 恢复 fmt / display computed
- style: 恢复 readonly-form / readonly-cell CSS
- 保留: page-card + 标准 breadcrumb + max-width 1200px
This commit is contained in:
郭庆泰
2026-08-18 00:55:45 +08:00
parent 3de26199b1
commit b6428dc5c8
1 changed files with 82 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ry-vue3/src/views/doctor/SubmissionDetail.vue
+82 -13
View File
@@ -3,18 +3,55 @@
<!-- 面包屑 (标准: 首页 / 分类 / 当前页) -->
<div class="breadcrumb">首页 / 我的项目设计投稿 / 投稿详情</div>
<!-- 只读信息 (el-descriptions 是详情页标准) -->
<el-descriptions :column="2" border>
<el-descriptions-item label="策划方案名称">{{ detail.planName || '-' }}</el-descriptions-item>
<el-descriptions-item label="项目方向">{{ detail.planDirectionTitle || detail.planDirection || '-' }}</el-descriptions-item>
<el-descriptions-item label="项目形式">{{ detail.projectForm || '-' }}</el-descriptions-item>
<el-descriptions-item label="项目类别">{{ detail.planCategory || '-' }}</el-descriptions-item>
<el-descriptions-item label="设计文件" :span="2">
<el-link v-if="detail.designFileUrl" :href="detail.designFileUrl" :download="detail.planName || '设计文件'" target="_blank" type="primary">下载</el-link>
<span v-else>-</span>
</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">{{ detail.remark || '-' }}</el-descriptions-item>
</el-descriptions>
<!-- 表单 (只读, 用 el-input readonly 展示) -->
<el-form label-width="120px" class="readonly-form">
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="策划方案名称">
<el-input :model-value="display.planName" readonly />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目方向">
<el-input :model-value="display.planDirectionTitle" readonly />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="项目形式">
<el-input :model-value="display.projectForm" readonly />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目类别">
<el-input :model-value="display.planCategory" readonly />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="24">
<el-form-item label="设计文件">
<div class="readonly-cell">
<template v-if="detail.designFileUrl">
<el-link :href="detail.designFileUrl" :download="detail.planName || '设计文件'" target="_blank" type="primary">下载</el-link>
</template>
<span v-else>-</span>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="24">
<el-form-item label="备注">
<el-input :model-value="display.remark" type="textarea" :rows="4" readonly />
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 操作按钮 -->
<div class="detail-actions">
@@ -24,7 +61,7 @@
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
@@ -35,6 +72,20 @@ const router = useRouter()
const loading = ref(false)
const detail = ref({})
// 显示用: 空值显示 "-"
function fmt(v) {
if (v === null || v === undefined || v === '') return '-'
return v
}
const display = computed(() => ({
planName: fmt(detail.value.planName),
planDirectionTitle: fmt(detail.value.planDirectionTitle || detail.value.planDirection),
projectForm: fmt(detail.value.projectForm),
planCategory: fmt(detail.value.planCategory),
remark: fmt(detail.value.remark)
}))
function goBack() {
router.push({ path: '/doctor/submissions', query: { _t: Date.now() } })
}
@@ -65,5 +116,23 @@ onMounted(load)
/* 整页面板 (详情页标准: max-width 1200px) */
.doctor-submission-detail { max-width: 1200px; padding: 16px; }
.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; }
/* 只读表单样式 - 模拟 el-input 视觉, 但只显示文字 */
.readonly-form :deep(.el-form-item) { margin-bottom: 22px; }
.readonly-form :deep(.el-form-item__label) { color: #606266; font-weight: normal; }
.readonly-cell {
min-height: 40px;
line-height: 38px;
padding: 0 14px;
background: #fafafa;
border: 1px solid #e8e8e8;
border-radius: 4px;
color: #262626;
font-size: 14px;
word-break: break-all;
}
.readonly-form :deep(.el-link) { font-weight: 500; }
.detail-actions { margin-top: 16px; }
</style>