各表单布局调整

WXL

4 天以前 c4599aa279fd2f90b741608392e056fbae2282d5

 src/views/business/allocation/allocationInfo.vue

@@ -1,43 +1,36 @@
<template>
  <div class="organ-allocation-detail">
    <case-basic-info :case-id="caseId" :show-attachment="true" />
    <case-basic-info :case-id="caseId" :show-attachment="true":column="3" />
    <!-- 基本信息部分 -->
    <el-card class="detail-card">
    <el-card class="detail-card paper-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">器官分配基本信息</span>
      </div>

      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="分配状态" prop="allocationStatus">
      <el-form :model="form" ref="form" :rules="rules" label-width="120px" class="paper-form">
        <div class="form-row">
          <el-form-item label="分配状态" prop="allocationStatus" class="col-half">
              <el-select v-model="form.allocationStatus" placeholder="请选择分配状态">
                <el-option v-for="dict in dict.type.organ_allocation_status || []" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分配时间" prop="allocationTime">
          <el-form-item label="分配时间" prop="allocationTime" class="col-half">
              <el-date-picker v-model="form.allocationTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%" :disabled="form.allocationStatus == '1'" />
            </el-form-item>
          </el-col>
        </el-row>
        </div>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="负责人" prop="registrationName">
        <div class="form-row">
          <el-form-item label="负责人" prop="registrationName" class="col-half">
              <el-input v-model="form.registrationName" />
            </el-form-item>
          </el-col>

        </el-row>
        </div>
      </el-form>
    </el-card>

    <!-- 器官分配记录部分 -->
    <el-card class="allocation-card">
    <el-card class="allocation-card paper-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">器官分配记录</span>
        <div style="float: right;">
@@ -45,10 +38,9 @@
        </div>
      </div>

      <el-form ref="allocationForm" :rules="allocationRules" :model="allocationData" label-position="right">
        <el-row>
          <el-col>
            <el-form-item label-width="100px" label="分配器官">
      <el-form ref="allocationForm" :rules="allocationRules" :model="allocationData" label-position="right" class="paper-form">
        <div class="form-row">
          <el-form-item label-width="100px" label="分配器官" class="col-full">
              <el-checkbox-group v-model="selectedOrgans" @change="handleOrganSelectionChange">
                <el-checkbox v-for="dict in dict.type.sys_Organ || []" :key="dict.value" :label="dict.value"
                  :disabled="form.allocationStatus == '1'">
@@ -58,12 +50,10 @@
              <el-input v-if="showOtherInput" v-model="otherOrganInput" placeholder="请输入其他器官名称"
                style="margin-top: 10px; width: 300px;" :disabled="form.allocationStatus == '1'" />
            </el-form-item>
          </el-col>
        </el-row>
        </div>

        <el-row>
          <el-col>
            <el-form-item>
        <div class="form-row">
          <el-form-item class="col-full">
              <el-table :data="displayOrgans" v-loading="loading" border style="width: 100%"
                :row-class-name="getOrganRowClassName">
                <el-table-column label="序号" type="index" width="60" align="center" fixed></el-table-column>
@@ -202,8 +192,7 @@
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
        </div>

        <!-- 分配统计信息 -->
        <!-- <div
@@ -1887,4 +1876,73 @@
    font-size: 11px;
  }
}

/* ===== 纸质表格网格样式 ===== */
.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;
}
</style>