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

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

    <div class="container">
      <table>
        <tr>
          <td width="12%" colspan="2">姓名</td>
          <td width="20%">
            <div>
              <input v-model="data.name" />
              <div class="content-box">{{ data.name }}</div>
            </div>
          </td>
          <td width="10%">性别</td>
          <td width="8%">
            <div>
              <input v-model="data.sex" />
              <div class="content-box">{{ data.sex }}</div>
            </div>
          </td>
          <td width="20%">身份证号码</td>
          <td width="30%" colspan="2">
            <div>
              <input v-model="data.id" />
              <div class="content-box">{{ data.id }}</div>
            </div>
          </td>
        </tr>
        <tr>
          <td width="15%" colspan="2">事故时间</td>
          <td width="35%" colspan="3">
            <div>
              <input v-model="data.time" />
              <div class="content-box">{{ data.time }}</div>
            </div>
          </td>
          <td width="20%">地点</td>
          <td width="30%" colspan="2">
            <div>
              <input v-model="data.address" />
              <div class="content-box">{{ data.address }}</div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">血样（尿样)提取时间</td>
          <td colspan="6">
            <div>
              <input v-model="data.extractTime" />
              <div class="content-box">{{ data.extractTime }}</div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">血样（尿样)提取地点</td>
          <td colspan="6">
            <div>
              <input v-model="data.extractAdress" />
              <div class="content-box">{{ data.extractAdress }}</div>
            </div>
          </td>
        </tr>
        <tr>
          <td width="10%" rowspan="4" colspan="1">血样（尿样）提取人员填写</td>
          <td width="5%" rowspan="3">提取登记</td>
          <td colspan="3">A样本盛装容器编号</td>
          <td>
            <div>
              <input v-model="data.aNumber" />
              <div class="content-box">{{ data.aNumber }}</div>
            </div>
          </td>
          <td width="10%">提取量</td>
          <td>
            <div>
              <div>
                <input v-model="data.aVolume" />
                <div class="content-box">{{ data.aVolume }}</div>
              </div>
              ml
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="3">B样本盛装容器编号</td>
          <td>
            <div>
              <input v-model="data.bNumber" />
              <div class="content-box">{{ data.bNumber }}</div>
            </div>
          </td>
          <td>提取量</td>
          <td>
            <div>
              <div>
                <input v-model="data.bVolume" />
                <div class="content-box">{{ data.bVolume }}</div>
              </div>
              ml
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="1">消毒名称</td>
          <td colspan="2">
            <div>
              <input v-model="data.disinfect" />
              <div class="content-box">{{ data.disinfect }}</div>
            </div>
          </td>
          <td>密封方式</td>
          <td colspan="2">
            <div>
              <input v-model="data.sealing" />
              <div class="content-box">{{ data.sealing }}</div>
            </div>
          </td>
        </tr>
        <tr>
          <td width="10%" colspan="2">提取人员单位</td>
          <td colspan="2">
            <div>
              <input v-model="data.extractUnit" />
              <div class="content-box">{{ data.extractUnit }}</div>
            </div>
          </td>
          <td>提取人员（签名）</td>
          <td colspan="2">
            <div>
              <input v-model="data.extractMumber" />
              <div class="content-box">{{ data.extractMumber }}</div>
            </div>
          </td>
        </tr>
        <tr>
          <td>通知家属情况</td>
          <td colspan="7">
            <div>
              <input v-model="data.notice" />
              <div class="content-box">{{ data.notice }}</div>
            </div>
          </td>
        </tr>
        <tr>
          <td>被提取人（签名）</td>
          <td colspan="2">
            <div>
              <input v-model="data.extractBySign" />
              <div class="content-box">{{ data.extractBySign }}</div>
            </div>
          </td>
          <td>见证人（签名）</td>
          <td colspan="2">
            <div>
              <input v-model="data.witnessSign" />
              <div class="content-box">{{ data.witnessSign }}</div>
            </div>
          </td>
          <td>交通警察（签名）</td>
          <td colspan="2">
            <div>
              <input v-model="data.policeSign" />
              <div class="content-box">{{ data.policeSign }}</div>
            </div>
          </td>
        </tr>
        <tr>
          <td>办案单位</td>
          <td colspan="7">
            <div>
              <input v-model="data.company" />
              <div class="content-box">{{ data.company }}</div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from "vue";

import { tables } from "@/store/tables";
import { tablesInfo, setData } from "./data";
const props = defineProps({
  downMode: { type: Boolean, default: false },
  isDownloadShow: { type: Boolean, default: false },
});
const data = ref(null);
const saveHandler = () => {
  return { type: "extract", data: data.value };
};

defineExpose({ saveHandler, data });
onMounted(() => {
  if (props.isDownloadShow) {
  } else {
    setData("extract");
  }

  if (tablesInfo.extract) {
    data.value = tablesInfo.extract;
  }
});
</script>
<style lang="scss" scoped>
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  &.left {
    justify-content: flex-start;
  }
}
div[contenteditable] {
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  // height: 100%;
  width: 100%;
}
.extract {
  color: #000;
  font-size: 20px;
  // padding: 10px 30px;
  width: 100%;
  height: 100%;
  // display: grid;
  overflow: auto;
  font-family: sr, st;
  box-sizing: border-box;
  .content-box {
    display: none;
  }
  &.downMode {
    input {
      display: none;
    }
    .content-box {
      display: flex;
    }
  }

  .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: center;
            // word-break: break-all;
            white-space: nowrap;
            line-height: 110px;
            width: 100%;
            height: 100%;
            input {
              width: 100%;
              height: 100%;
              text-align: center;
            }
          }
          input {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 110px;
          }
        }
      }
    }
  }
}
</style>