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

<template>
  <div class="labpat_box">
    <el-form :model="labPat" label-width="4.3rem" class="compact-form" label-position="right">
      <el-form-item label="病人来源">
        <el-col :span="16">
          <SelectTable v-model:data="labPat.brly" :fields="brlyFields" :table-data="dictData.PT" size="small"
            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="病人代号">
        <el-input v-model="labPat.brdh" @keyup.enter="brdhHandle" size="small" />
      </el-form-item>
      <el-form-item label="姓 名">
        <el-input v-model="labPat.brxm" @change="handleFieldChange" size="small" />
      </el-form-item>
      <el-form-item label="性 别">
        <SelectTable v-model:data="labPat.brxb" :table-data="dictData.SX" size="small" placeholder=""
          @getDataValue="handleFieldChange" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-col :span="14">
          <el-input v-model="labPat.nl" @change="handleFieldChange" size="small" />
        </el-col>
        <el-col :span="10">
          <SelectTable v-model:data="labPat.nldw" :table-data="dictData.AU" size="small" placeholder=""
            @getDataValue="handleFieldChange" />
        </el-col>
      </el-form-item>
      <el-form-item label="样本类型">
        <SelectTable v-model:data="labPat.yblx" :table-data="dictData.BT" size="small" placeholder=""
          @getDataValue="handleFieldChange" />
      </el-form-item>
      <el-form-item label="送检医生">
        <SelectTable v-model:data="labPat.yhdh" :fields="ysFields" :tableData="userList || []" label="nickName"
          value="userName" objKey="userName" :border="true" size="small" placeholder=""
          @getDataValue="handleFieldChange" />
      </el-form-item>
      <el-form-item label="送检科室">
        <SelectTable v-model:data="labPat.ksdh" :table-data="dictData.DP" size="small" placeholder=""
          @getDataValue="handleFieldChange" />
      </el-form-item>
      <el-form-item label="床 号">
        <el-input v-model="labPat.ch" @change="handleFieldChange" size="small" />
      </el-form-item>

      <el-form-item label="临床诊断">
        <el-input v-model="labPat.zd" @change="handleFieldChange" size="small" />
      </el-form-item>
      <el-form-item label="备 注">
        <el-input v-model="labPat.bz" @change="handleFieldChange" size="small" />
      </el-form-item>

      <el-form-item label="登记人员">
        <SelectTable v-model:data="labPat.sjys" :table-data="dictData.SRD" size="small" placeholder=""
          :disabled="true" />
      </el-form-item>
      <el-form-item label="登记时间">
        <el-date-picker v-model="labPat.djry" type="datetime" format="YYYY-MM-DD HH:mm:ss" :disabled="true"
          value-format="YYYY-MM-DD HH:mm:ss" size="small" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="条 码 号">
        <el-input v-model="labPat.sqh" :disabled="true" size="small" />
      </el-form-item>

      <el-form-item label="申请状态">
        <SelectTable v-model:data="labPat.zt" size="small" :table-data="lisReqs" placeholder="" :disabled="true" />
      </el-form-item>

      <el-form-item label="证件类型">
        <SelectTable v-model:data="labPat.zjlx" size="small" :table-data="dictData.ZJLX" placeholder=""
          @getDataValue="handleFieldChange" />
      </el-form-item>
      <el-form-item label="证件号码">
        <el-input v-model="labPat.sfzh" size="small" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="labPat.phone" size="small" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, toRaw, computed, onMounted } from 'vue';
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) => {
  lastValue.value = JSON.stringify(newVal);
  lastJgbz.value = newVal.jgbz;
})


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 brdhHandle = () => {
  queryPatInfo({ brdh: props.labPat.brdh }).then((res: any) => {
    if (res.data) {
      emit('update:labPat', { ...props.labPat, ...res.data })
    }
  })
}



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

  getDicts('lis_req_type').then((resp: any) => {
    lisReqs.value = resp.data.map((p: any) => ({
      label: p.dictLabel,
      value: p.dictValue,
      elTagType: p.listClass,
      elTagClass: p.cssClass
    }))

  })
})

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



  .compact-form {
    flex: 1;
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;


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

    .el-form-item__label {
      padding-bottom: 0px;
      color: #08355E;
      font-size: 12px;

    }

    :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;
  }
}
</style>