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(lastJgbz)]" v-if="lastJgbz > 10">
        <div class="text">{{ getLableType(lastJgbz) }}</div>
      </div>
      <el-form-item label="病人来源">
        <!-- <el-col :span="16"> -->
        <SelectTable v-model:data="labPat.patType" :fields="brlyFields" :table-data="dictData.PT" placeholder=""
          @getDataValue="handleFieldChange" />
        <!-- </el-col> -->
        <!-- <el-col :span="8">
          <el-checkbox v-model="labPat.jzbz" true-value="1" class="check_box"> 急诊 </el-checkbox>
        </el-col> -->
      </el-form-item>
      <el-form-item label="病人代号" required>
        <el-input v-model="labPat.patId" @keyup.enter="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=""
            @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="handleFieldChange" />
      </el-form-item>
      <el-form-item label="送检科室">
        <SelectTable v-model:data="labPat.execDeptCode" :table-data="dictData.DEPT" placeholder=""
          @getDataValue="handleFieldChange" />
      </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 { queryPatInfo } from '@/api/liswork/order'
import SelectTable from '@/components/SelectTable/index.vue';
import { getDictData, formatDict, dictData } from '@/hooks'
// @ts-ignore
import { listUser } from '@/api/system/user.js'
//@ts-ignore 
import { getDicts } from '@/api/system/dict/data'
const props = defineProps({
  labPat: {
    type: Object,
    required: true
  },
  //结果主键
  labPatKey: {
    type: Object,
    default: () => { }
  },
});
const lastJgbz = ref();
watch(() => props.labPat, (newVal: any) => {
  lastValue.value = JSON.stringify(newVal);
  lastJgbz.value = newVal.status;
})


const emit = defineEmits(['update:labPat']);
const lastValue = ref('');

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 handleFieldChange = async () => {
  // // 将当前labPat转为字符串用于比较
  // const currentValue = JSON.stringify(props.labPat);
  // // 对比与上一次保存的值是否有变化
  // if (currentValue !== lastValue.value) {

  //   // 找出变化的字段
  //   const oldObj = JSON.parse(lastValue.value);
  //   const newObj = props.labPat;
  //   const changedField = getChangedField(oldObj, newObj);
  //   if (changedField) {
  //     // 这里可以添加实际的更新逻辑，比如调用接口
  //     try {
  //       // saveLabPat(changedField)
  //     } catch (error) {
  //       console.error('更新失败:', error);
  //       // 失败时可以恢复旧值
  //       // emit('update:labPat', oldObj);
  //       lastValue.value = JSON.stringify(oldObj);
  //     }
  //   }
  // }
};

const getLableType = (type: string) => {
  const item = dictData.value.ZT.find((p: any) => p.value === type);
  return item ? 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 = () => {
  // queryPatInfo({ brdh: props.labPat.brdh }).then((res: any) => {
  //   if (res.data) {
  //     emit('update:labPat', { ...props.labPat, ...res.data })
  //   }
  // })
}




const userList = ref([]);
onMounted(() => {
  const data = { status: '0', del_flag: '0', pageSize: 1000, pageNum: 1 }
  listUser(data).then((res: any) => {
    userList.value = res.rows;
  });

})

</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;


    .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>