lis8.0-vue3/src/views/liswork/Issueorder/components/info.vue

<template>
  <div class="labpat_box">
    <el-form :model="labPat" label-width="5rem" label-position="right" ref="formRef" class="left-form">
      <div :class="['sh_box', getColor(newStatus)]" v-if="visbileMask">
        <div class="text">{{ getLableType(newStatus) }}</div>
      </div>
      <el-form-item label="病人来源">
        <SelectTable v-model:data="labPat.patType" :fields="brlyFields" :table-data="dictData.PT" placeholder=""
          @getDataValue="handleFieldChange" @enter-press="selectEnter(1)" />
      </el-form-item>
      <el-form-item label="病人代号" required>
        <el-input v-model="labPat.patId" @change="brdhHandle" @keydown.enter="nextFocus" />
      </el-form-item>
      <el-form-item label="姓 名" required>
        <el-input v-model="labPat.patName" @change="handleFieldChange" @keydown.enter="nextFocus" />
      </el-form-item>
      <el-form-item label="性 别" required>
        <SelectTable v-model:data="labPat.patSex" :table-data="dictData.SX" placeholder=""
          @getDataValue="handleFieldChange" @enter-press="selectEnter(4)" />
      </el-form-item>
      <el-form-item label="年龄" required>
        <el-col :span="14">
          <el-input v-model="labPat.patAge" @change="handleFieldChange" @keydown.enter="nextFocus" />
        </el-col>
        <el-col :span="10">
          <SelectTable v-model:data="labPat.ageUnit" :table-data="dictData.AU" placeholder="" :clearable="false"
            @getDataValue="handleFieldChange" @enter-press="selectEnter(6)" />
        </el-col>
      </el-form-item>
      <el-form-item label="生理周期" v-if="labPat.patSex == '2'">
        <SelectTable v-model:data="labPat.slzq" :table-data="dictData.SLZQ" placeholder=""
          @getDataValue="handleFieldChange" @enter-press="selectEnter(labPat.patSex == '2' ? 7 : -1)" />
      </el-form-item>
      <el-form-item label="送检医生">
        <SelectTable v-model:data="labPat.doctorCode" :tableData="dictData.DOCTOR" placeholder=""
          @getDataValue="doctorHandle" @enter-press="selectEnter(labPat.patSex == '2' ? 8 : 7)" />
      </el-form-item>
      <el-form-item label="送检科室">
        <SelectTable v-model:data="labPat.departCode" :table-data="dictData.DEPT" placeholder=""
          @getDataValue="deptHandle" @enter-press="selectEnter(labPat.patSex == '2' ? 9 : 8)" />
      </el-form-item>
      <el-form-item label="床 号">
        <el-input v-model="labPat.patBed" @change="handleFieldChange" @keydown.enter="nextFocus" />
      </el-form-item>

      <el-form-item label="临床诊断">
        <el-input v-model="labPat.diagnosisName" @change="handleFieldChange" @keydown.enter="nextFocus" />
      </el-form-item>
      <el-form-item label="备 注">
        <el-input v-model="labPat.bz" @change="handleFieldChange" @keydown.enter="nextFocus" />
      </el-form-item>

      <el-form-item label="登记人员">
        <el-input v-model="labPat.userName" disabled />
      </el-form-item>
      <el-form-item label="登记时间">
        <el-date-picker v-model="labPat.orderTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" disabled
          value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="医疗机构">
        <el-input v-model="labPat.srcHospName" disabled />
      </el-form-item>
      <el-form-item label="证件类型">
        <SelectTable v-model:data="labPat.zjlx" :table-data="dictData.ZJLX" placeholder=""
          @getDataValue="handleFieldChange" @enter-press="selectEnter(labPat.patSex == '2' ? 13 : 12)" />
      </el-form-item>
      <el-form-item label="证件号码">
        <el-input v-model="labPat.patIdentity" @keydown.enter="nextFocus" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="labPat.phone" @keydown.enter="nextFocus" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import SelectTable from '@/components/SelectTable/index.vue';
import { getDictData, formatDict, dictData } from '@/hooks'

const props = defineProps({
  labPat: {
    type: Object,
    required: true
  },
  //展示水印
  visbileMask: {
    type: Boolean,
    default: false
  },
});
const newStatus = ref('');
watch(() => props.labPat.status, (newVal: any) => {
  newStatus.value = newVal;
})


const emit = defineEmits(['update:labPat', 'getBrdh']);

const brlyFields = ref([
  { prop: 'value', label: '代号', width: 80, enablePinyinSearch: true },
  { prop: 'label', label: '名称', width: 120, enablePinyinSearch: true },
])

const ysFields = ref([
  { prop: 'userName', label: '用户代号', width: 80, enablePinyinSearch: true },
  { prop: 'nickName', label: '用户姓名', width: 150, enablePinyinSearch: true },
])

const doctorHandle = (data) => {
  props.labPat.doctorName = data.label
}
const deptHandle = (data) => {
  props.labPat.departName = data.label
}

const handleFieldChange = async () => {

};

const getLableType = (type: string) => {
  const item = dictData.value.SQDS.find((p: any) => p.value === type);
  return item && props.visbileMask ? item.label : '';
}

const getColor = (type: string) => {
  switch (type) {
    case '10':
      return 'cs_color';
    case '20':
      return 'sh_color';
    case '30':
      return 'cb_color';
    case '40':
      return 'eb_color';
    case '50':
      return 'sd_color';
    default:
      return 'default';
  }
}



// 病人代号查询病人信息的逻辑
const brdhHandle = () => {
  emit('getBrdh', props.labPat.patId)
}

const formRef = useTemplateRef('formRef')
const currentTarget = ref(null);
// 回车跳转到下一个表单元素
const nextFocus = (e?: Event, idx?: number) => {
  if (e) e.preventDefault() // 禁止回车提交表单

  // 找到所有可聚焦的表单项：
  const els = formRef.value.$el.querySelectorAll(
    'input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), ' +
    '.select-table__wrapper .el-select__input:not([disabled]), ' + '.el-date-editor input:not([disabled])'
  );

  const arr = Array.from(els).filter((el: any) => {
    // 额外过滤：排除隐藏元素、禁用状态的父级封装组件（如 SelectTable 被 disabled 时）
    const isHidden = el.offsetParent === null;
    const isDisabled = el.hasAttribute('disabled') || el.parentElement?.closest('.is-disabled') !== null;
    return !isHidden && !isDisabled;
  });

  let index: number;
  if (!idx) {
    // 找到当前触发元素在列表中的位置
    currentTarget.value = e?.target as HTMLElement;
    // 兼容 SelectTable：如果点击的是组件外层，定位到内部输入框
    if (currentTarget.value.closest('.select-table-container')) {
      currentTarget.value = currentTarget.value.closest('.select-table-container').querySelector('.el-select__input');
    }

    index = arr.findIndex((item: any) => item === currentTarget.value || item.contains(currentTarget.value));
  } else {
    index = idx - 1;
  }



  // 跳转到下一个可聚焦元素（循环到第一个 if 最后一个）
  if (index > -1) {
    const nextIndex = (index + 1) % arr.length;
    // 确保下一个元素存在且可聚焦
    if (arr[nextIndex]) {
      nextTick(() => {
        (arr[nextIndex] as HTMLElement)?.focus();
      });

      // 针对 SelectTable 额外处理：聚焦后激活下拉框 
      if ((arr[nextIndex] as HTMLElement).closest('.select-table-container')) {
        (arr[nextIndex] as HTMLElement).dispatchEvent(new Event('click'));
      }
    }
  }
}

const selectEnter = (index: number) => {
  const emptyEvent = new Event('keydown', { cancelable: true });
  nextFocus(emptyEvent, index)
}

onMounted(() => {


})

</script>
<style scoped lang="scss">
.labpat_box {
  height: calc(90vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid #E6E9ED;
  padding-right: 5px;

  .check_box {
    :deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
      color: #f00 !important;
      font-size: .875rem;
    }

    :deep(.el-checkbox__label) {
      font-size: .875rem;
    }
  }

  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #96B8D9 inset;
    background-color: rgba(236, 244, 251, 0.5);
    color: #08355E;


    .is-focus {
      box-shadow: 0 0 0 1px #1f6dd3 inset !important;
    }

    &:hover {
      box-shadow: 0 0 0 1px #1f6dd3 inset !important;
    }

    // .el-input__placeholder {
    //   color: none !important;
    // }
  }

  :deep(.el-select__wrapper) {
    box-shadow: 0 0 0 1px #96B8D9 inset;
    background-color: rgba(236, 244, 251, 0.5);
    color: #08355E;


    .is-focus {
      box-shadow: 0 0 0 1px #1f6dd3 inset !important;
    }

    &:hover {
      box-shadow: 0 0 0 1px #1f6dd3 inset !important;
    }

    .el-select__placeholder {
      color: #08355E !important;
    }
  }

  :deep(.el-input__inner) {
    color: #08355E !important;
    -webkit-text-fill-color: #08355E;
  }


  :deep(.el-select__input) {
    color: #08355E !important;
  }


  .left-form {
    flex: 1;
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 5px;

    .el-form-item {
      margin-bottom: 8px;
    }

    :deep(.el-form-item__label) {
      padding-bottom: 0px;
      color: #08355E;
      font-size: .875rem !important;

    }

    :deep(.el-form-item__label:before) {
      margin-right: 0 !important;
    }

    :deep(.el-form-item--default .el-form-item__label) {
      height: 27px !important;
      line-height: 27px !important;
    }

    :deep(.el-form-item--default .el-form-item__content) {
      line-height: 27px !important;
    }

    // pointer-events: none;

    :deep(.el-radio__label) {
      color: #08355E;
    }
  }


  :deep(.el-switch__label) {
    color: #08355E;
  }
}


.sh_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: vertical-rl;
  font-weight: 500;
  font-size: 100px;

  .text {
    font-style: italic;
  }

  // pointer-events: none;
}

.cs_color {
  color: rgba(40, 189, 187, 0.25);
}

.sh_color {
  color: rgba(238, 8, 8, 0.25);
}

.cb_color {
  color: rgba(0, 128, 0, 0.25);
}

.eb_color {
  color: rgba(255, 165, 0, 0.25);
}

.sd_color {
  color: rgb(233, 126, 32, .25);
}

.default {
  color: rgba(40, 189, 187, 0.25);
}
</style>