From c4599aa279fd2f90b741608392e056fbae2282d5 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期四, 20 八月 2026 17:16:54 +0800
Subject: [PATCH] 各表单布局调整
---
src/views/business/transfer/TransportEdit.vue | 389 +++++++++++++++++++++++++++++++-----------------------
1 files changed, 223 insertions(+), 166 deletions(-)
diff --git a/src/views/business/transfer/TransportEdit.vue b/src/views/business/transfer/TransportEdit.vue
index 7481687..b334b74 100644
--- a/src/views/business/transfer/TransportEdit.vue
+++ b/src/views/business/transfer/TransportEdit.vue
@@ -47,9 +47,10 @@
:model="formData"
:rules="formRules"
label-width="120px"
+ class="paper-form"
>
<!-- 鍩虹淇℃伅 -->
- <el-card class="form-section" shadow="never">
+ <el-card class="form-section paper-card" shadow="never">
<div slot="header" class="section-header">
<i
class="el-icon-document"
@@ -58,70 +59,60 @@
<span>鍩虹淇℃伅</span>
</div>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="妗堜緥缂栧彿" prop="caseNo">
- <el-input
- v-model="formData.caseNo"
- :disabled="true"
- placeholder="鑷姩浠庢渚嬭幏鍙�"
- />
- </el-form-item>
- </el-col>
- </el-row>
+ <div class="form-row">
+ <el-form-item label="妗堜緥缂栧彿" prop="caseNo" class="col-half">
+ <el-input
+ v-model="formData.caseNo"
+ :disabled="true"
+ placeholder="鑷姩浠庢渚嬭幏鍙�"
+ />
+ </el-form-item>
+ </div>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="鎮ｈ�呭鍚�" prop="patName">
- <el-input
- v-model="formData.patName"
- :disabled="true"
- placeholder="鑷姩浠庢渚嬭幏鍙�"
- />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鎬у埆" prop="sex">
- <el-select
- v-model="formData.sex"
- :disabled="true"
- placeholder="璇烽�夋嫨鎬у埆"
- style="width: 100%"
- >
- <el-option label="鐢�" value="1" />
- <el-option label="濂�" value="2" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
+ <div class="form-row">
+ <el-form-item label="鎮ｈ�呭鍚�" prop="patName" class="col-half">
+ <el-input
+ v-model="formData.patName"
+ :disabled="true"
+ placeholder="鑷姩浠庢渚嬭幏鍙�"
+ />
+ </el-form-item>
+ <el-form-item label="鎬у埆" prop="sex" class="col-half">
+ <el-select
+ v-model="formData.sex"
+ :disabled="true"
+ placeholder="璇烽�夋嫨鎬у埆"
+ style="width: 100%"
+ >
+ <el-option label="鐢�" value="1" />
+ <el-option label="濂�" value="2" />
+ </el-select>
+ </el-form-item>
+ </div>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="骞撮緞" prop="age">
- <el-input-number
- v-model="formData.age"
- :min="0"
- :max="120"
- :disabled="true"
- placeholder="鑷姩浠庢渚嬭幏鍙�"
- style="width: 100%"
- />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鐤剧梾璇婃柇" prop="diagnosisname">
- <el-input
- v-model="formData.diagnosisname"
- :disabled="true"
- placeholder="鑷姩浠庢渚嬭幏鍙�"
- />
- </el-form-item>
- </el-col>
- </el-row>
+ <div class="form-row">
+ <el-form-item label="骞撮緞" prop="age" class="col-half">
+ <el-input-number
+ v-model="formData.age"
+ :min="0"
+ :max="120"
+ :disabled="true"
+ placeholder="鑷姩浠庢渚嬭幏鍙�"
+ style="width: 100%"
+ />
+ </el-form-item>
+ <el-form-item label="鐤剧梾璇婃柇" prop="diagnosisname" class="col-half">
+ <el-input
+ v-model="formData.diagnosisname"
+ :disabled="true"
+ placeholder="鑷姩浠庢渚嬭幏鍙�"
+ />
+ </el-form-item>
+ </div>
</el-card>
<!-- 鍖婚櫌淇℃伅 -->
- <el-card class="form-section" shadow="never">
+ <el-card class="form-section paper-card" shadow="never">
<div slot="header" class="section-header">
<i
class="el-icon-office-building"
@@ -130,47 +121,39 @@
<span>鍖婚櫌淇℃伅</span>
</div>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="娌荤枟鍖婚櫌" prop="treatmentHospitalName">
- <el-input
- v-model="formData.treatmentHospitalName"
- :disabled="true"
- placeholder="鑷姩浠庢渚嬭幏鍙�"
- />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="娌荤枟绉戝" prop="treatmentDeptName">
- <el-input
- v-model="formData.treatmentDeptName"
- placeholder="璇疯緭鍏ユ不鐤楃瀹ゅ悕绉�"
- />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="ICU璇勪及鍖荤敓" prop="icuDoctor">
- <el-input
- v-model="formData.icuDoctor"
- placeholder="璇疯緭鍏CU璇勪及鍖荤敓"
- />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="ICU鍖荤敓鐢佃瘽" prop="icuDoctorPhone">
- <el-input
- v-model="formData.icuDoctorPhone"
- placeholder="璇疯緭鍏CU鍖荤敓鎵嬫満鍙�"
- />
- </el-form-item>
- </el-col>
- </el-row>
+ <div class="form-row">
+ <el-form-item label="娌荤枟鍖婚櫌" prop="treatmentHospitalName" class="col-half">
+ <el-input
+ v-model="formData.treatmentHospitalName"
+ :disabled="true"
+ placeholder="鑷姩浠庢渚嬭幏鍙�"
+ />
+ </el-form-item>
+ <el-form-item label="娌荤枟绉戝" prop="treatmentDeptName" class="col-half">
+ <el-input
+ v-model="formData.treatmentDeptName"
+ placeholder="璇疯緭鍏ユ不鐤楃瀹ゅ悕绉�"
+ />
+ </el-form-item>
+ </div>
+ <div class="form-row">
+ <el-form-item label="ICU璇勪及鍖荤敓" prop="icuDoctor" class="col-half">
+ <el-input
+ v-model="formData.icuDoctor"
+ placeholder="璇疯緭鍏CU璇勪及鍖荤敓"
+ />
+ </el-form-item>
+ <el-form-item label="ICU鍖荤敓鐢佃瘽" prop="icuDoctorPhone" class="col-half">
+ <el-input
+ v-model="formData.icuDoctorPhone"
+ placeholder="璇疯緭鍏CU鍖荤敓鎵嬫満鍙�"
+ />
+ </el-form-item>
+ </div>
</el-card>
<!-- 杞繍淇℃伅 -->
- <el-card class="form-section" shadow="never">
+ <el-card class="form-section paper-card" shadow="never">
<div slot="header" class="section-header">
<i
class="el-icon-location-information"
@@ -179,29 +162,25 @@
<span>杞繍淇℃伅</span>
</div>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="鍑哄彂鍦扮偣" prop="transportStartPlace">
- <el-input
- v-model="formData.transportStartPlace"
- placeholder="璇疯緭鍏ュ嚭鍙戝湴鐐�"
- />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鍑哄彂鏃堕棿" prop="transportStartTime">
- <el-date-picker
- v-model="formData.transportStartTime"
- type="datetime"
- placeholder="閫夋嫨鍑哄彂鏃堕棿"
- value-format="yyyy-MM-dd HH:mm:ss"
- style="width: 100%"
- />
- </el-form-item>
- </el-col>
- </el-row>
+ <div class="form-row">
+ <el-form-item label="鍑哄彂鍦扮偣" prop="transportStartPlace" class="col-half">
+ <el-input
+ v-model="formData.transportStartPlace"
+ placeholder="璇疯緭鍏ュ嚭鍙戝湴鐐�"
+ />
+ </el-form-item>
+ <el-form-item label="鍑哄彂鏃堕棿" prop="transportStartTime" class="col-half">
+ <el-date-picker
+ v-model="formData.transportStartTime"
+ type="datetime"
+ placeholder="閫夋嫨鍑哄彂鏃堕棿"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </div>
- <el-row :gutter="20">
+ <div class="form-row">
<!-- <el-col :span="12">
<el-form-item label="杞繍鐘舵��" prop="transitStatus">
<el-select
@@ -217,19 +196,17 @@
</el-select>
</el-form-item>
</el-col> -->
- <el-col :span="12">
- <el-form-item label="璐熻矗鍗忚皟鍛�" prop="contactPerson">
- <el-input
- v-model="formData.contactPerson"
- placeholder="璇疯緭鍏ュ崗璋冨憳濮撳悕"
- />
- </el-form-item>
- </el-col>
- </el-row>
+ <el-form-item label="璐熻矗鍗忚皟鍛�" prop="contactPerson" class="col-half">
+ <el-input
+ v-model="formData.contactPerson"
+ placeholder="璇疯緭鍏ュ崗璋冨憳濮撳悕"
+ />
+ </el-form-item>
+ </div>
</el-card>
<!-- 鍖绘姢浜哄憳淇℃伅 -->
- <el-card class="form-section" shadow="never">
+ <el-card class="form-section paper-card" shadow="never">
<div slot="header" class="section-header">
<i
class="el-icon-user"
@@ -238,15 +215,13 @@
<span>鍖绘姢浜哄憳淇℃伅</span>
</div>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="杞繍鍖荤敓" prop="doctor">
- <el-input
- v-model="formData.doctor"
- placeholder="璇疯緭鍏ヨ浆杩愬尰鐢�"
- />
- </el-form-item>
- </el-col>
+ <div class="form-row">
+ <el-form-item label="杞繍鍖荤敓" prop="doctor" class="col-half">
+ <el-input
+ v-model="formData.doctor"
+ placeholder="璇疯緭鍏ヨ浆杩愬尰鐢�"
+ />
+ </el-form-item>
<!-- <el-col :span="12">
<el-form-item label="鍖荤敓鐢佃瘽" prop="doctorPhone">
<el-input
@@ -255,12 +230,10 @@
/>
</el-form-item>
</el-col> -->
- <el-col :span="12">
- <el-form-item label="杞繍鎶ゅ＋" prop="nurse">
- <el-input v-model="formData.nurse" placeholder="璇疯緭鍏ユ姢澹鍚�" />
- </el-form-item>
- </el-col>
- </el-row>
+ <el-form-item label="杞繍鎶ゅ＋" prop="nurse" class="col-half">
+ <el-input v-model="formData.nurse" placeholder="璇疯緭鍏ユ姢澹鍚�" />
+ </el-form-item>
+ </div>
<!-- <el-row :gutter="20">
@@ -274,15 +247,13 @@
</el-col>
</el-row> -->
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="杞繍椹鹃┒鍛�" prop="driver">
- <el-input
- v-model="formData.driver"
- placeholder="璇疯緭鍏ラ┚椹跺憳濮撳悕"
- />
- </el-form-item>
- </el-col>
+ <div class="form-row">
+ <el-form-item label="杞繍椹鹃┒鍛�" prop="driver" class="col-half">
+ <el-input
+ v-model="formData.driver"
+ placeholder="璇疯緭鍏ラ┚椹跺憳濮撳悕"
+ />
+ </el-form-item>
<!-- <el-col :span="12">
<el-form-item label="椹鹃┒鍛樼數璇�" prop="driverPhone">
<el-input
@@ -291,7 +262,7 @@
/>
</el-form-item>
</el-col> -->
- </el-row>
+ </div>
</el-card>
<!-- 闄勪欢淇℃伅 -->
@@ -390,7 +361,7 @@
</el-card>
<!-- 澶囨敞淇℃伅 -->
- <el-card class="form-section" shadow="never">
+ <el-card class="form-section paper-card" shadow="never">
<div slot="header" class="section-header">
<i
class="el-icon-edit"
@@ -398,16 +369,18 @@
></i>
<span>澶囨敞淇℃伅</span>
</div>
- <el-form-item prop="remark">
- <el-input
- v-model="formData.remark"
- type="textarea"
- :rows="4"
- placeholder="璇疯緭鍏ュ娉ㄤ俊鎭�"
- maxlength="500"
- show-word-limit
- />
- </el-form-item>
+ <div class="form-row">
+ <el-form-item prop="remark" class="col-full">
+ <el-input
+ v-model="formData.remark"
+ type="textarea"
+ :rows="4"
+ placeholder="璇疯緭鍏ュ娉ㄤ俊鎭�"
+ maxlength="500"
+ show-word-limit
+ />
+ </el-form-item>
+ </div>
</el-card>
</el-form>
@@ -857,4 +830,88 @@
.case-info-card {
border-left: 4px solid #67c23a;
}
+
+/* ===== 绾歌川琛ㄦ牸缃戞牸鏍峰紡 ===== */
+.paper-card >>> .el-card__body {
+ padding: 16px;
+}
+
+.paper-form {
+ border-left: 1px solid #d0d3db;
+ background: #fff;
+}
+
+.paper-form >>> .form-row {
+ display: flex;
+ width: 100%;
+ border-top: 1px solid #d0d3db;
+}
+
+.paper-form >>> .el-form-item {
+ flex: 0 0 33.3333%;
+ display: flex;
+ margin: 0;
+ background: #fff;
+ border-right: 1px solid #d0d3db;
+ border-bottom: 1px solid #d0d3db;
+}
+.paper-form >>> .el-form-item::after,
+.paper-form >>> .el-form-item::before {
+ display: none;
+}
+
+.paper-form >>> .col-1-3 { flex: 0 0 33.3333%; }
+.paper-form >>> .col-half { flex: 0 0 50%; }
+.paper-form >>> .col-2-3 { flex: 0 0 66.6666%; }
+.paper-form >>> .col-full { flex: 0 0 100%; }
+
+.paper-form >>> .el-form-item__label {
+ flex: 0 0 120px;
+ width: 120px !important;
+ float: none;
+ padding: 0 8px !important;
+ background: #ecf5ff;
+ border-right: 1px solid #d0d3db;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ font-size: 13px;
+ font-weight: 600;
+ color: #2c3038;
+ line-height: 1.3;
+ white-space: normal;
+ word-break: break-all;
+}
+.paper-form >>> .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
+ color: #f56c6c;
+ margin-right: 2px;
+}
+
+.paper-form >>> .el-form-item__content {
+ flex: 1;
+ margin-left: 0 !important;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ padding: 6px 10px;
+ background: #fff;
+ min-height: 42px;
+ line-height: 1.4;
+}
+
+/* ===== TransportEdit 鐗规畩閫傞厤锛氳〃鍗曞唴鏈夊涓垎鍖� el-card锛屾瘡涓垎鍖哄悇鑷嫭绔嬫垚瀹屾暣缃戞牸 ===== */
+.paper-form {
+ border: none;
+ background: transparent;
+}
+.paper-form >>> .paper-card {
+ border: none;
+ box-shadow: none;
+}
+.paper-form >>> .paper-card >>> .el-card__body {
+ border-top: 1px solid #d0d3db;
+ border-left: 1px solid #d0d3db;
+ background: #fff;
+}
</style>
--
Gitblit v1.9.3