transitPlatForm-Vue3/src/views/liswork/Issueorder/components/info.vue

<template>
  <div class="labpat_box">
    <el-form :model="labPat" label-width="5rem" label-position="right" 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" />
      </el-form-item>
      <el-form-item label="病人代号" required>
        <el-input v-model="labPat.patId" @change="brdhHandle" />
      </el-form-item>
      <el-form-item label="姓 名" required>
        <el-input v-model="labPat.patName" @change="handleFieldChange" />
      </el-form-item>
      <el-form-item label="性 别" required>
        <SelectTable v-model:data="labPat.patSex" :table-data="dictData.SX" placeholder=""
          @getDataValue="handleFieldChange" />
      </el-form-item>
      <el-form-item label="年龄" required>
        <el-col :span="14">
          <el-input v-model="labPat.patAge" @change="handleFieldChange" />
        </el-col>
        <el-col :span="10">
          <SelectTable v-model:data="labPat.ageUnit" :table-data="dictData.AU" placeholder="" :clearable="false"
            @getDataValue="handleFieldChange" />
        </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" />
      </el-form-item>
      <el-form-item label="送检医生">
        <SelectTable v-model:data="labPat.doctorCode" :tableData="dictData.DOCTOR" placeholder=""
          @getDataValue="doctorHandle" />
      </el-form-item>
      <el-form-item label="送检科室">
        <SelectTable v-model:data="labPat.departCode" :table-data="dictData.DEPT" placeholder=""
          @getDataValue="deptHandle" />
      </el-form-item>
      <el-form-item label="床 号">
        <el-input v-model="labPat.patBed" @change="handleFieldChange" />
      </el-form-item>

      <el-form-item label="临床诊断">
        <el-input v-model="labPat.diagnosisName" @change="handleFieldChange" />
      </el-form-item>
      <el-form-item label="备 注">
        <el-input v-model="labPat.bz" @change="handleFieldChange" />
      </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="true"
          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" />
      </el-form-item>
      <el-form-item label="证件号码">
        <el-input v-model="labPat.patIdentity" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="labPat.phone" />
      </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)
}

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>