traffic-laser/src/views/tables/extract.vue

<!--  -->
<template>
  <div class="explorate" :class="{ downMode }" ref="layoutRef">
    <h2 class="title">当事人血样（尿样）提取登记表</h2>

    <div class="container">
      <table>
        <tr>
          <td width="15%" colspan="2">姓名</td>
          <td width="20%"><input type="text" /></td>
          <td width="10%">性别</td>
          <td width="5%"><input type="text" /></td>
          <td width="20%">身份证号码</td>
          <td width="30%" colspan="2"><input type="text" /></td>
        </tr>
        <tr>
          <td width="15%" colspan="2">事故时间</td>
          <td width="35%" colspan="3"><input type="text" /></td>
          <td width="20%">地点</td>
          <td width="30%" colspan="2"><input type="text" /></td>
        </tr>
        <tr>
          <td colspan="2">血样（尿样)提取时间</td>
          <td colspan="6"><input type="text" /></td>
        </tr>
        <tr>
          <td colspan="2">血样（尿样)提取地点</td>
          <td colspan="6"><input type="text" /></td>
        </tr>
        <tr>
          <td width="10%" rowspan="4" colspan="1">血样（尿样）提取人员填写</td>
          <td width="5%" rowspan="3">提取登记</td>
          <td colspan="3">A样本盛装容器编号</td>
          <td><input type="text" /></td>
          <td width="10%">提取量</td>
          <td>
            <div><input type="text" />ml</div>
          </td>
        </tr>
        <tr>
          <td colspan="3">B样本盛装容器编号</td>
          <td><input type="text" /></td>
          <td>提取量</td>
          <td>
            <div><input type="text" />ml</div>
          </td>
        </tr>
        <tr>
          <td colspan="1">消毒名称</td>
          <td colspan="2"><input type="text" /></td>
          <td>密封方式</td>
          <td colspan="2"><input type="text" /></td>
        </tr>
        <tr>
          <td width="10%" colspan="2">提取人员单位</td>
          <td colspan="2"><input type="text" /></td>
          <td>提取人员（签名）</td>
          <td colspan="2"><input type="text" /></td>
        </tr>
        <tr>
          <td>通知家属情况</td>
          <td colspan="7"><input type="text" /></td>
        </tr>
        <tr>
          <td>被提取人（签名）</td>
          <td colspan="2"><input type="text" /></td>
          <td>见证人（签名）</td>
          <td colspan="2"><input type="text" /></td>
          <td>交通警察（签名）</td>
          <td colspan="2"><input type="text" /></td>
        </tr>
        <tr>
          <td>办案单位</td>
          <td colspan="7"><input type="text" /></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
</script>
<style lang="scss" scoped>
td[contenteditable] {
  // display: flex;
  // align-items: center;
  // justify-content: center;
}
.explorate {
  color: #000;
  font-size: 20px;
  // padding: 10px 30px;
  width: 100%;
  height: 100%;
  // display: grid;
  overflow: auto;
  font-family: sr, st;
  box-sizing: border-box;

  .title {
    text-align: center;
    margin-bottom: 10px;
  }
  .container {
    table {
      width: 100%;
      // height: 100%;
      border-collapse: collapse;
      border: 1px solid #000;
      tr {
        &:last-of-type {
          td {
            border-bottom: none;
          }
        }
        td {
          // height: 40px;
          height: 110px;
          outline: none;
          // line-height: 24px;
          padding: 0 5px;
          text-align: center;
          border-right: 1px solid #000;
          border-bottom: 1px solid #000;
          &:last-of-type {
            border-right: none;
          }
          > div {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            input {
              width: 100%;
              height: 100%;
              text-align: center;
            }
          }
          input {
            width: 100%;
            height: 100%;
            text-align: center;
          }
        }
      }
    }
  }
  &.downMode {
    // table {
    //   border: 1px solid #000;
    //   tr {
    //     td {
    //       border: none;
    //       border-bottom: 1px solid #000;
    //       border-right: 1px solid #000;
    //       &:last-of-type {
    //         border-right: none;
    //       }
    //     }
    //   }
    // }
  }
}
</style>