blood_vue/src/views/doctor/reactionRegist/index.vue

/**
* @file index.vue
* @description: 反应登记
* @author: w
* @since: 2026-06-03
*/


<template>
  <div class="app-container">
    <!-- 1.申请单信息卡片 -->
    <div class="card-wrap">
      <div class="card-title">申请单信息</div>
      <div class="info-row three-col">
        <div class="info-item">
          <label>申请单号</label>
          <span>1815026</span>
        </div>
        <div class="info-item">
          <label>姓 名</label>
          <span>段立方</span>
        </div>
        <div class="info-item">
          <label>血 型</label>
          <span>AB</span>
        </div>
      </div>
      <div class="info-row three-col">
        <div class="info-item">
          <label>申请日期</label>
          <span>2023-07-19</span>
        </div>
        <div class="info-item">
          <label>年 龄</label>
          <span>36</span>
        </div>
        <div class="info-item">
          <label>Rh(D)</label>
          <span>待查</span>
        </div>
      </div>
      <div class="info-row three-col">
        <div class="info-item">
          <label>住院号/ID号</label>
          <span>998076255</span>
        </div>
        <div class="info-item">
          <label>床位号</label>
          <span>07</span>
        </div>
        <div class="info-item">
          <label>临床诊断</label>
          <span>右肱骨粉碎...</span>
        </div>
      </div>
      <div class="info-row three-col">
        <div class="info-item">
          <label>科 室</label>
          <span>骨科</span>
        </div>
        <div class="info-item">
          <label>性 别</label>
          <span>男</span>
        </div>
        <div class="info-item"></div>
      </div>
    </div>

    <!-- 2.血液信息卡片 -->
    <div class="card-wrap">
      <div class="card-title">血液信息</div>
      <div class="oper-bar">
        <el-select v-model="addBloodVal" placeholder="增加血液" style="width:160px">
          <el-option label="新增血袋" value="1" />
        </el-select>
        <el-input v-model="inputVal" placeholder="请输入" style="width:240px;margin:0 12px" />
        <el-button type="primary" @click="searchBlood">确定</el-button>
      </div>
      <el-table :data="bloodTableData" border style="width:100%;margin-top:12px" height="120px">
        <el-table-column label="血液流水号" prop="bloodNo" align="center" />
        <el-table-column label="产品码" prop="productCode" align="center" />
        <el-table-column label="血液品种" prop="bloodType" align="center" />
        <el-table-column label="血型" prop="abo" align="center" />
        <el-table-column label="Rh(D)" prop="rhd" align="center" />
        <el-table-column label="容量" prop="volume" align="center" />
        <el-table-column label="单位" prop="unit" align="center" />
        <el-table-column label="有效日期" prop="validDate" align="center" />
      </el-table>
    </div>




    <!--3.输血反应信息卡片-->
    <div class="card-wrap">
      <div class="card-title">输血反应信息</div>
      <div class="form-row four-col">
        <div class="form-item">
          <div class="label">血液流水号：</div>
          <el-input v-model="formData.bloodNo" placeholder="请输入" />
        </div>
        <div class="form-item">
          <div class="label">医师：</div>
          <el-input v-model="formData.doctor" placeholder="请输入" />
        </div>
        <div class="form-item">
          <div class="label">产品码：</div>
          <el-input v-model="formData.proCode" placeholder="请输入" />
        </div>
        <div class="form-item">
          <div class="label">实际输入量：</div>
          <el-input v-model="formData.realNum" placeholder="请输入" />
        </div>
        <div class="form-item">
          <div class="label">受血方式：</div>
          <el-input v-model="formData.receiveType" placeholder="请输入" />
        </div>
      </div>
      <div class="form-row four-col">
        <div class="form-item">
          <div class="label">输血日期：</div>
          <el-date-picker v-model="formData.transDate" type="datetime" placeholder="选择日期时间" style="width:100%" />
        </div>
        <div class="form-item">
          <div class="label">发生日期：</div>
          <el-date-picker v-model="formData.occurDate" type="datetime" placeholder="选择日期时间" style="width:100%" />
        </div>
        <div class="form-item">
          <div class="label">输血反应：</div>
          <el-select v-model="formData.react" placeholder="请选择" style="width:100%">
          </el-select>
        </div>
        <div class="form-item">
          <div class="label">临床处理：</div>
          <el-select v-model="formData.clinicDeal" placeholder="请选择" style="width:100%">
          </el-select>
        </div>
        <div class="form-item">
          <div class="label">输血科处理：</div>
          <el-select v-model="formData.bloodDeptDeal" placeholder="请选择" style="width:100%">
          </el-select>
        </div>
      </div>

      <div class="form-item full-item">
        <div class="label">备注：</div>
        <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入" style="width: 50%" />
      </div>
      <div class="btn-bottom">
        <el-button type="primary">确定</el-button>
        <el-button>取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//下拉框
const addBloodVal = ref('')
const inputVal = ref('')
//表格数据
const bloodTableData = ref([
  { bloodNo: '999922220001', productCode: '999922220001', bloodType: '洗涤红细胞', abo: 'O', rhd: '待查', volume: '2.00', unit: 'u', validDate: '2021-09-10 10：00' }
])
//表单数据
const formData = reactive({
  bloodNo: '', doctor: '', proCode: '', realNum: '',
  receiveType: '', transDate: '', occurDate: '', react: '',
  clinicDeal: '', bloodDeptDeal: '', remark: ''
})
//查询血液信息
const searchBlood = () => {

}
</script>

<style scoped lang="scss">
.app-container {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;

  .card-wrap {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); //还原卡片阴影
    padding: 12px;

    &:hover {
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12); // 悬停加深阴影
    }

    .card-title {
      font-size: 15px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 8px;
      display: flex;
      align-items: center;

      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 14px;
        background-color: #409eff;
        margin-right: 8px;
        border-radius: 0 4px 4px 0;
      }
    }

    //三列基础信息
    .three-col {
      display: flex;
      gap: 24px;
      margin-bottom: 10px;

      .info-item {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 14px;

        label {
          width: 80px;
          text-align: right;
          color: #686f77;
          white-space: nowrap;
          font-weight: 500;
        }

        span {
          font-weight: 700;
          color: #284160;
          padding-left: 30px;
        }
      }
    }

    //血液操作栏
    .oper-bar {
      display: flex;
      align-items: center;
    }

    //表单四列布局
    .four-col {
      display: flex;
      gap: 18px;

      .form-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        font-size: 14px;

        .label {
          color: #80868d;
          font-weight: 700;
          margin: 8px 0;
        }
      }
    }

    //两列布局
    .two-col {
      display: flex;
      gap: 18px;
      font-size: 14px;

      .form-item {
        flex: 1;
        display: flex;
        flex-direction: column;

        .label {
          color: #80868d;
          font-weight: 700;
          margin: 8px 0;
        }
      }
    }

    //整行备注
    .full-item {
      display: flex;
      flex-direction: column;
      margin-bottom: 22px;
      font-size: 14px;

      .label {
        color: #80868d;
        font-weight: 700;
        margin: 8px 0;
      }
    }

    //底部按钮居中
    .btn-bottom {
      display: flex;
      justify-content: center;
      gap: 12px;
    }
  }
}
</style>