From 8a709ba6db50831048f9c3e2452ea6dc6c3de36f Mon Sep 17 00:00:00 2001 From: Bang Hu <hu_bang@hotmail.com> Date: 星期五, 12 九月 2025 15:45:33 +0800 Subject: [PATCH] bug修改代码提交 --- src/views/tradeManage/detail/index.vue | 326 +++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 250 insertions(+), 76 deletions(-) diff --git a/src/views/tradeManage/detail/index.vue b/src/views/tradeManage/detail/index.vue index c5eb9b5..9e0589f 100644 --- a/src/views/tradeManage/detail/index.vue +++ b/src/views/tradeManage/detail/index.vue @@ -2,84 +2,103 @@ <div class="default-main"> <!-- 璁㈠崟淇℃伅 + 鐢宠浜轰俊鎭� + 浜ゆ槗鍐呭锛堝悎骞朵负鍚屼竴鍗$墖锛� --> <el-card shadow="never"> - <el-descriptions - :column="2" - border - class="mt10 order-desc fixed-label" - label-width="180px" - :label-style="labelStyle" - :content-style="contentStyle" - > - <el-descriptions-item :span="2" class="section-header"> - <template #label> - <el-icon class="section-icon"><Document /></el-icon> - <span>璁㈠崟淇℃伅</span> - </template> - <template #default></template> - </el-descriptions-item> - <el-descriptions-item label="璁㈠崟缂栧彿">{{ detail.orderNo }}</el-descriptions-item> - <el-descriptions-item label="浜ゆ槗璧勬簮绫诲瀷">{{ detail.resourceTypeName }}</el-descriptions-item> - <el-descriptions-item label="鐢宠鏃堕棿">{{ detail.applyTime }}</el-descriptions-item> - <el-descriptions-item label="浜ゆ槗鐘舵��"> - <el-tag :type="getStatusType(detail.status)" size="small">{{ detail.statusName }}</el-tag> - </el-descriptions-item> - </el-descriptions> + <!-- 璁㈠崟淇℃伅 - 浣跨敤鑷畾涔夎〃鏍煎竷灞� --> + <div class="order-info-section"> + <div class="section-header"> + <el-icon class="section-icon"><Document /></el-icon> + <span>璁㈠崟淇℃伅</span> + </div> + <div class="order-info-grid"> + <div class="order-info-item"> + <div class="order-label">璁㈠崟缂栧彿</div> + <div class="order-content">{{ detail.orderNo }}</div> + </div> + <div class="order-info-item"> + <div class="order-label">浜ゆ槗璧勬簮绫诲瀷</div> + <div class="order-content">{{ detail.resourceTypeName }}</div> + </div> + <div class="order-info-item"> + <div class="order-label">鐢宠鏃堕棿</div> + <div class="order-content">{{ detail.applyTime }}</div> + </div> + <div class="order-info-item"> + <div class="order-label">浜ゆ槗鐘舵��</div> + <div class="order-content"> + <el-tag :type="getStatusType(detail.status)" size="small">{{ detail.statusName }}</el-tag> + </div> + </div> + </div> + </div> - <!-- 鐢宠浜轰俊鎭紙涓庤鍗曚俊鎭悓鍗$墖锛屽鐢ㄥ垎闅旀爣棰樻牱寮忥級 --> - <el-descriptions - :column="2" - border - class="mt15 order-desc fixed-label" - label-width="180px" - :label-style="labelStyle" - :content-style="contentStyle" - > - <el-descriptions-item :span="2" class="section-header"> - <template #label> - <el-icon class="section-icon"><User /></el-icon> - <span>鐢宠浜轰俊鎭�</span> - </template> - <template #default></template> - </el-descriptions-item> - <el-descriptions-item label="濮撳悕">{{ detail.userName || '-' }}</el-descriptions-item> - <el-descriptions-item label="鍗曚綅">{{ detail.unitName || '-' }}</el-descriptions-item> - <el-descriptions-item label="閮ㄩ棬">{{ detail.userDept || '-' }}</el-descriptions-item> - <el-descriptions-item label="鐢ㄦ埛鍚�">{{ detail.userAccount || '-' }}</el-descriptions-item> - </el-descriptions> + <!-- 鐢宠浜轰俊鎭� - 浣跨敤鑷畾涔夎〃鏍煎竷灞� --> + <div class="applicant-info-section"> + <div class="section-header"> + <el-icon class="section-icon"><User /></el-icon> + <span>鐢宠浜轰俊鎭�</span> + </div> + <div class="applicant-info-grid"> + <div class="applicant-info-item"> + <div class="applicant-label">濮撳悕</div> + <div class="applicant-content">{{ detail.userName || '-' }}</div> + </div> + <div class="applicant-info-item"> + <div class="applicant-label">鍗曚綅</div> + <div class="applicant-content">{{ detail.unitName || '-' }}</div> + </div> + <div class="applicant-info-item"> + <div class="applicant-label">閮ㄩ棬</div> + <div class="applicant-content">{{ detail.userDept || '-' }}</div> + </div> + <div class="applicant-info-item"> + <div class="applicant-label">鐢ㄦ埛鍚�</div> + <div class="applicant-content">{{ detail.userAccount || '-' }}</div> + </div> + </div> + </div> - <!-- 浜ゆ槗鍐呭锛堢揣闅忕敵璇蜂汉淇℃伅锛屽悓鍗$墖锛屽鐢ㄥ垎闅旀爣棰樻牱寮忥級 --> - <el-descriptions - :column="2" - border - class="mt15 order-desc fixed-label" - label-width="180px" - :label-style="labelStyle" - :content-style="contentStyle" - > - <el-descriptions-item :span="2" class="section-header"> - <template #label> - <el-icon class="section-icon"><Goods /></el-icon> - <span>浜ゆ槗鍐呭</span> - </template> - <template #default></template> - </el-descriptions-item> - <el-descriptions-item label="浜у搧鍚嶇О"> - <el-link type="primary" :underline="false">{{ detail.productName }}</el-link> - </el-descriptions-item> - <el-descriptions-item label="鎻愪緵鑰�">{{ detail.supplier }}</el-descriptions-item> - <el-descriptions-item label="琛屼笟棰嗗煙">{{ detail.industry }}</el-descriptions-item> - <el-descriptions-item label="鍗曚綅宸ョ▼"> - <el-tooltip effect="dark" :content="detail.projectUnit || '-'" placement="top" :disabled="!(detail.projectUnit && String(detail.projectUnit).trim())" popper-class="tooltip-wrap"> - <div class="ellipsis-1">{{ detail.projectUnit || '-' }}</div> - </el-tooltip> - </el-descriptions-item> - <el-descriptions-item label="浜у搧绫诲瀷">{{ detail.productType || '-' }}</el-descriptions-item> - <el-descriptions-item label="浜у搧绠�浠�"> - <el-tooltip effect="dark" :content="detail.productDesc || '-'" placement="top" :disabled="!(detail.productDesc && String(detail.productDesc).trim())" popper-class="tooltip-wrap" trigger="click"> - <div class="desc-wrap ellipsis-3">{{ detail.productDesc || '-' }}</div> - </el-tooltip> - </el-descriptions-item> - </el-descriptions> + <!-- 浜ゆ槗鍐呭 - 浣跨敤鑷畾涔夎〃鏍煎竷灞� --> + <div class="transaction-content-section"> + <div class="section-header"> + <el-icon class="section-icon"><Goods /></el-icon> + <span>浜ゆ槗鍐呭</span> + </div> + <div class="transaction-content-grid"> + <div class="transaction-content-item"> + <div class="transaction-label">浜у搧鍚嶇О</div> + <div class="transaction-content"> + <el-link type="primary" :underline="false">{{ detail.productName }}</el-link> + </div> + </div> + <div class="transaction-content-item"> + <div class="transaction-label">鎻愪緵鑰�</div> + <div class="transaction-content">{{ detail.supplier }}</div> + </div> + <div class="transaction-content-item"> + <div class="transaction-label">琛屼笟棰嗗煙</div> + <div class="transaction-content">{{ detail.industry }}</div> + </div> + <div class="transaction-content-item"> + <div class="transaction-label">鍗曚綅宸ョ▼</div> + <div class="transaction-content"> + <el-tooltip effect="dark" :content="detail.projectUnit || '-'" placement="top" :disabled="!(detail.projectUnit && String(detail.projectUnit).trim())" popper-class="tooltip-wrap"> + <div class="ellipsis-1">{{ detail.projectUnit || '-' }}</div> + </el-tooltip> + </div> + </div> + <div class="transaction-content-item"> + <div class="transaction-label">浜у搧绫诲瀷</div> + <div class="transaction-content">{{ detail.productType || '-' }}</div> + </div> + <div class="transaction-content-item"> + <div class="transaction-label">浜у搧绠�浠�</div> + <div class="transaction-content"> + <el-tooltip effect="dark" :content="detail.productDesc || '-'" placement="top" :disabled="!(detail.productDesc && String(detail.productDesc).trim())" popper-class="tooltip-wrap" trigger="click"> + <div class="desc-wrap ellipsis-3">{{ detail.productDesc || '-' }}</div> + </el-tooltip> + </div> + </div> + </div> + </div> <!-- 璁㈠崟璇︽儏锛堢Щ鍔ㄥ埌浜ゆ槗鍐呭涓嬮潰锛屽悓涓�鍗$墖鍐咃級 --> <div ref="orderTableWrapRef"> @@ -382,6 +401,7 @@ }) const labelStyle = { width: '180px', maxWidth: '180px' } const contentStyle = { width: 'calc(50% - 180px)' } + // 鏂囦欢鐩稿叧 const fileList = ref<any[]>([]) @@ -1086,6 +1106,160 @@ width: calc(50% - 180px) !important; } +/* 璁㈠崟淇℃伅鑷畾涔夊竷灞�鏍峰紡 */ +.order-info-section { + border: 1px solid #e4e7ed; + border-radius: 4px; + margin-top: 10px; + overflow: hidden; +} + +.order-info-section .section-header { + background: #f3f6fb; + padding: 12px 16px; + border-bottom: 1px solid #e4e7ed; + font-weight: 600; + display: flex; + align-items: center; +} + +.order-info-section .section-icon { + margin-right: 6px; + color: #409eff; +} + +.order-info-grid { + display: grid; + grid-template-columns: 15% 30% 15% 40%; + width: 100%; +} + +.order-info-item { + display: contents; +} + +.order-info-item .order-label { + padding: 12px 16px; + background: #fafafa; + border: 1px solid #e4e7ed; + font-size: 14px; + color: #606266; + display: flex; + align-items: center; +} + +.order-info-item .order-content { + padding: 12px 16px; + border: 1px solid #e4e7ed; + font-size: 14px; + color: #303133; + display: flex; + align-items: center; +} + +/* 鐢宠浜轰俊鎭嚜瀹氫箟甯冨眬鏍峰紡 */ +.applicant-info-section { + border: 1px solid #e4e7ed; + border-radius: 4px; + margin-top: 15px; + overflow: hidden; +} + +.applicant-info-section .section-header { + background: #f3f6fb; + padding: 12px 16px; + border-bottom: 1px solid #e4e7ed; + font-weight: 600; + display: flex; + align-items: center; +} + +.applicant-info-section .section-icon { + margin-right: 6px; + color: #409eff; +} + +.applicant-info-grid { + display: grid; + grid-template-columns: 15% 30% 15% 40%; + width: 100%; +} + +.applicant-info-item { + display: contents; +} + +.applicant-info-item .applicant-label { + padding: 12px 16px; + background: #fafafa; + border: 1px solid #e4e7ed; + font-size: 14px; + color: #606266; + display: flex; + align-items: center; +} + +.applicant-info-item .applicant-content { + padding: 12px 16px; + border: 1px solid #e4e7ed; + font-size: 14px; + color: #303133; + display: flex; + align-items: center; +} + +/* 浜ゆ槗鍐呭鑷畾涔夊竷灞�鏍峰紡 */ +.transaction-content-section { + border: 1px solid #e4e7ed; + border-radius: 4px; + margin-top: 15px; + overflow: hidden; +} + +.transaction-content-section .section-header { + background: #f3f6fb; + padding: 12px 16px; + border-bottom: 1px solid #e4e7ed; + font-weight: 600; + display: flex; + align-items: center; +} + +.transaction-content-section .section-icon { + margin-right: 6px; + color: #409eff; +} + +.transaction-content-grid { + display: grid; + grid-template-columns: 15% 30% 15% 40%; + width: 100%; +} + +.transaction-content-item { + display: contents; +} + +.transaction-content-item .transaction-label { + padding: 12px 16px; + background: #fafafa; + border: 1px solid #e4e7ed; + font-size: 14px; + color: #606266; + display: flex; + align-items: center; +} + +.transaction-content-item .transaction-content { + padding: 12px 16px; + border: 1px solid #e4e7ed; + font-size: 14px; + color: #303133; + display: flex; + align-items: center; +} + + .desc-wrap { white-space: pre-wrap; line-height: 22px; -- Gitblit v1.8.0