各表单布局调整

WXL

4 天以前 c4599aa279fd2f90b741608392e056fbae2282d5

 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="请输入ICU评估医生"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="ICU医生电话" prop="icuDoctorPhone">
              <el-input
                v-model="formData.icuDoctorPhone"
                placeholder="请输入ICU医生手机号"
              />
            </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="请输入ICU评估医生"
            />
          </el-form-item>
          <el-form-item label="ICU医生电话" prop="icuDoctorPhone" class="col-half">
            <el-input
              v-model="formData.icuDoctorPhone"
              placeholder="请输入ICU医生手机号"
            />
          </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>