lis8.0-vue3/src/views/liswork/work/components/labpat.vue

<template>
  <div class="labpat_box">
    <div class="flex-between mb5">
      <el-input v-model="sqhValue" placeholder="条码号" ref="sqhRef" :size="aotuSize" class="mr10" style="width:100%"
        @keyup.enter="handleInputFocus" />
      <el-button type="primary" :size="aotuSize">打印条码</el-button>
    </div>
    <el-form :model="labPat" label-width="5rem" class="compact-form" label-position="right">
      <div :class="['sh_box', getColor(lastJgbz)]" v-if="lastJgbz != null && lastJgbz != 0 && lastJgbz != 'C'">
        <div class="text">{{ getLableType(lastJgbz) }}</div>
      </div>
      <template v-for="v in labSysList" :key="v.xh">
        <el-row :gutter="10" v-if="v.mrts == '病人来源'">
          <el-col :span="18">
            <el-form-item :label="v.zdts" v-if="v.kj == '1'">
              <SelectTable v-model:data="labPat[v.zdmc]" :fields="brlyFields" :dictType="v.dict" placeholder=""
                label="label" value="value" objKey="value" :border="true" size="small"
                @getDataValue="handleFieldChange" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-checkbox v-model="labPat.jzbz" true-value="1" class="check_box"> 急诊 </el-checkbox>
            <!-- :disabled="v.kybj == '0'" -->
          </el-col>
        </el-row>

        <el-form-item :label="v.zdts" v-if="v.kj == '1' && !v.dict && v.mrts != '年龄'">
          <el-input v-if="v.zdlb == '1'" v-model="labPat[v.zdmc]" @change="handleFieldChange" size="small" />


          <el-date-picker v-if="v.zdlb == '3'" v-model="labPat[v.zdmc]" type="datetime" format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" @change="handleFieldChange" size="small" style="width: 100%;" />
        </el-form-item>


        <el-form-item :label="v.zdts" v-if="v.kj == '1' && v.mrts == '年龄'">
          <el-col :span="14" v-if="v.mrts == '年龄'">
            <el-input v-model="labPat[v.zdmc]" @change="handleFieldChange" style="width:100%" size="small" />
          </el-col>
          <el-col :span="10">
            <SelectTable v-model:data="labPat.nldw" :fields="ksdhFields" dictType="AU" label="label" value="value"
              objKey="value" :border="true" size="small" @getDataValue="handleFieldChange" placeholder="" />
          </el-col>
        </el-form-item>

        <el-form-item :label="v.zdts"
          v-if="v.dict && v.kj == '1' && v.mrts != '病人来源' && v.mrts != '年龄单位' && v.mrts != '检验医师' && v.mrts != '核对医师'">
          <SelectTable v-model:data="labPat[v.zdmc]" :fields="ksdhFields" :dictType="v.dict" label="label" value="value"
            objKey="value" :border="true" size="small" @getDataValue="handleFieldChange" placeholder="" />
        </el-form-item>

        <el-form-item :label="v.zdts" v-if="v.mrts == '检验医师' && v.kj == '1'">
          <SelectTable v-model:data="labPat[v.zdmc]" :fields="ysFields" :tableData="userList || []" label="nickName"
            value="userName" objKey="userName" :border="true" size="small" @getDataValue="getJyysData" placeholder="" />
        </el-form-item>
        <el-form-item :label="v.zdts" v-if="v.mrts == '核对医师' && v.kj == '1'">
          <SelectTable v-model:data="labPat[v.zdmc]" :fields="ysFields" :tableData="userList || []" label="nickName"
            value="userName" objKey="userName" :border="true" size="small" @getDataValue="getHdysData" placeholder="" />
        </el-form-item>
      </template>
    </el-form>


    <!-- 医生校验 -->
    <YhVerification ref="formRef" :form-value="form" :labPatKey="labPatKey" @confirm="handleConfirm"
      @cancel="handleCancel" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, toRaw, computed, onMounted, nextTick } from 'vue';
import { changepatcolumn, updateLabPat, checkYsUser } from "@/api/liswork/work/LisWork";
import SelectTable from '@/components/SelectTable/index.vue';
import YhVerification from './yhVerification.vue';

import { PropType } from 'vue';
import emitter from '@/utils/mitt';
import { classCom } from '@/utils/classCom';
import { use } from 'vxe-pc-ui';
const aotuSize = classCom.useAutoSize();
interface LabSysItem {
  kj: string;
  dict: string;
  kybj: string;
  zdlb: string;
  zdmc: string;
  zdts: string;
  xh: number;
  mrts: string;
}
const props = defineProps({
  labSysList: {
    type: Array as PropType<LabSysItem[]>,
    required: true
  },
  labPat: {
    type: Object,
    required: true
  },
  //结果主键
  labPatKey: {
    type: Object,
    default: () => { }
  },
  userList: {
    type: Array as PropType<object[]>,
    default: () => []
  }

});
const lastJgbz = ref();
const sqhValue = ref(''); // 条码号
const sqhRef = ref();
watch(() => props.labPat, (newVal) => {
  // console.log('newVal==>', newVal);
  lastValue.value = JSON.stringify(newVal);
  lastJgbz.value = newVal?.jgbz;
  sqhValue.value = '';
})

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

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

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

const form = ref({
  yhdh: '',
  userName: '',
  mm: '',
  type: 1,
  zdmc: '',
  ybh1: '',
  ybh2: '',
});

const sqhFlag = ref(false);
const handleInputFocus = () => {
  sqhFlag.value = true;
  props.labPat.sqh = sqhValue.value;
  handleFieldChange();
};

// 表单引用
const formRef = ref();

// 处理确定按钮点击
const handleConfirm = async () => {
  form.value.mm = ''
  handleFieldChange()
};

// 处理取消按钮点击
const handleCancel = () => {
  if (form.value.zdmc = 'yhdh') {
    props.labPat.yhdh = JSON.parse(lastValue.value).yhdh
  }
  if (form.value.zdmc = 'hdys') {
    props.labPat.hdys = JSON.parse(lastValue.value).hdys
  }

};

// 医生校验
const getJyysData = (data: any) => {
  if (data.userName == JSON.parse(lastValue.value).yhdh) return
  form.value.yhdh = data.userName;
  form.value.userName = data.nickName;
  form.value.zdmc = 'yhdh';
  nextTick(() => {
    formRef.value?.open()
  })
}
const getHdysData = (data: any) => {
  if (data.userName == JSON.parse(lastValue.value).hdys) return
  form.value.yhdh = data.userName;
  form.value.userName = data.nickName;
  form.value.zdmc = 'hdys';
  nextTick(() => {
    formRef.value?.open()
  })
}


/**
* 通用字段变化处理（失焦、回车触发）
*/
const handleFieldChange = async () => {
  // 将当前labPat转为字符串用于比较
  const currentValue = JSON.stringify(props.labPat);
  // 对比与上一次保存的值是否有变化
  if (currentValue !== lastValue.value) {
    emitter.emit('saveLab');
    // 找出变化的字段
    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 saveLabPat = async (changedField: any) => {
  if (props.labPat.id) {
    updateLabPat({ ...props.labPatKey, ...props.labPat }).then((res: any) => {
      if (res.code == 0) {
        if (sqhFlag.value) {
          sqhValue.value = ''
          sqhRef.value.focus()
        }

        if (res.data) {
          emit('update:labPat', res.data)
          emit("changeStatus", res.data, sqhFlag.value);
        } else {
          emit("changeStatus", props.labPat, sqhFlag.value);
        }
        sqhFlag.value = false
      }
    })
  } else {
    if (!changedField) return
    changepatcolumn({ ...props.labPatKey, column: changedField?.field, value: changedField?.newValue }).then((res: any) => {
      if (res.code == 0) {
        if (sqhFlag.value) {
          sqhValue.value = ''
          sqhRef.value.focus()
        }

        if (res.data) {
          emit('update:labPat', res.data)
          emit("changeStatus", props.labPat, sqhFlag.value);
        } else {
          emit("changeStatus", props.labPat, sqhFlag.value);
        }

        sqhFlag.value = false
      }
    })
  }

};

// 完善字段变化检测方法
const getChangedField = (oldObj: { [key: string]: any }, newObj: { [key: string]: any }) => {
  const oldKeys = Object.keys(oldObj);
  for (const key of oldKeys) {
    const oldVal = oldObj[key];
    const newVal = newObj[key];

    if (oldVal instanceof Date && newVal instanceof Date) {
      if (oldVal.getTime() !== newVal.getTime()) {
        return { field: key, oldValue: oldVal, newValue: newVal };
      }
    } else if (oldVal !== newVal) {
      return { field: key, oldValue: oldVal, newValue: newVal };
    }
  }

  const newKeys = Object.keys(newObj);
  for (const key of newKeys) {
    if (!(key in oldObj)) {
      return { field: key, oldValue: undefined, newValue: newObj[key] };
    }
  }

  return null;
};


const getLableType = (type: string) => {
  switch (type) {
    case '1':
      return '初审';
    case '2':
      return '已审核';
    case '3':
      return '初报';
    case '4':
      return '二报';
    case '5':
      return '已锁定';
    default:
      return '';
  }
}

const getColor = (type: string) => {
  switch (type) {
    case '1':
      return 'cs_color';
    case '2':
      return 'sh_color';
    case '3':
      return 'cb_color';
    case '4':
      return 'eb_color';
    case '5':
      return 'sd_color';
    default:
      return 'default';
  }
}
onMounted(() => {
  // 监听保存病人结果
  emitter.on('saveResult', () => {
    saveLabPat(null)
  })
})





</script>
<style scoped lang="scss">
.labpat_box {
  height: calc(90vh - 4.375rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;

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

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




.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(255, 165, 0, 0.25);
}

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

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

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