各表单布局调整

WXL

4 天以前 c4599aa279fd2f90b741608392e056fbae2282d5

 src/views/business/affirm/affirmInfo.vue

@@ -1,47 +1,28 @@
<template>
  <div class="confirmation-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>
        <!-- <el-button
          type="primary"
          style="float: right;margin-left: 20px;"
          @click="handleSave"
          :loading="saveLoading"
        >
          保存确认信息
        </el-button>
        <el-button
          type="success"
          style="float: right;margin-left: 20px;"
          @click="accomplish"
          :loading="saveLoading"
        >
          确认完成
        </el-button> -->

      </div>

      <el-form :model="form" ref="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="协调员1" prop="coordinatedusernameo">
              <el-input v-model="form.coordinatedusernameo" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="协调员2" prop="coordinatedusernamet">
              <el-input v-model="form.coordinatedusernamet" />
            </el-form-item>
          </el-col>
      <el-form :model="form" ref="form" label-width="120px" class="paper-form">
        <div class="form-row">
          <el-form-item label="协调员1" prop="coordinatedusernameo" class="col-1-3">
            <el-input v-model="form.coordinatedusernameo" />
          </el-form-item>
          <el-form-item label="协调员2" prop="coordinatedusernamet" class="col-1-3">
            <el-input v-model="form.coordinatedusernamet" />
          </el-form-item>
          <!-- <el-col :span="8">
            <el-form-item label="业务人员" prop="responsibleusername">
              <el-input v-model="form.responsibleusername" />
            </el-form-item>
          </el-col> -->
        </el-row>
        </div>

        <!-- <el-row :gutter="20">
          <el-col :span="8">
@@ -66,7 +47,7 @@
          style="margin-bottom: 15px;"
        >
        </el-alert>
        <el-row style="margin-top: 15px;">
        <div style="margin-top: 15px;">
          <el-button
          style="float: right; margin-bottom: 5px;"
            type="primary"
@@ -76,7 +57,7 @@
          >
            添加其他家属
          </el-button>
        </el-row>
        </div>
        <el-table :data="familyMemberList" size="small" border>
          <el-table-column label="序号" width="60" align="center">
            <template slot-scope="scope">
@@ -143,8 +124,8 @@
          </el-table-column>
        </el-table>

        <el-row>
          <el-form-item label-width="100px" label="捐献决定">
        <div class="form-row">
          <el-form-item label-width="100px" label="捐献决定" class="col-full">
            <el-checkbox-group v-model="organdecision">
              <el-checkbox
                v-for="item in organselection"
@@ -160,16 +141,18 @@
              style="margin-top: 10px; width: 300px;"
            ></el-input>
          </el-form-item>
        </el-row>
        </div>

        <el-form-item label="家属意见备注" prop="relativeRemark">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.relativeRemark"
            placeholder="记录家属的意见和沟通情况"
          />
        </el-form-item>
        <div class="form-row">
          <el-form-item label="家属意见备注" prop="relativeRemark" class="col-full">
            <el-input
              type="textarea"
              :rows="3"
              v-model="form.relativeRemark"
              placeholder="记录家属的意见和沟通情况"
            />
          </el-form-item>
        </div>
      </el-form>
    </el-card>

@@ -635,6 +618,9 @@
    },

    getAttachmentsByType(type) {
      console.log(type);
      console.log(this.attachmentData[type]);

      return this.attachmentData[type] || [];
    },

@@ -703,6 +689,8 @@
        uploader: "当前用户"
      };
      this.attachmentData[this.currentUploadType].push(newAttachment);
      console.log(this.attachmentData,'this.attachmentData');

      this.updateAssessannexField();
      this.$message.success("上传成功");
      this.uploadLoading = false;
@@ -1082,4 +1070,73 @@
  font-size: 13px;
  color: #606266;
}

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