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

<template>
  <div class="labpat_box">
    <div class="flex-between mb5">
      <el-input placeholder="条码号" class="mr10" style="width:100%" />
      <el-button type="primary">打印条码</el-button>
    </div>
    <el-form :model="labPat" label-width="70px" class="compact-form" label-position="right"
      :disabled="lastJgbz != null && lastJgbz != 0">
      <div :class="['sh_box', getColor(lastJgbz)]" v-if="lastJgbz != null && lastJgbz != 0">
        <div>{{ getLableType(lastJgbz) }}</div>
      </div>
      <el-form-item label="病人来源">
        <el-col :span="14">
          <el-select v-model="labPat.brly" placeholder="请选择" style="width: 100%;" filterable size="small"
            @change="handleFieldChange">
            <el-option v-for="item in dictData.PT" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-col>
        <el-col :span="10">
          <el-switch v-model="labPat.jzbz" active-text="急诊" active-color="#FD0101" active-value="1" inactive-value="0"
            @change="handleFieldChange"></el-switch>
        </el-col>
      </el-form-item>
      <el-form-item label="病 历 号">
        <el-input v-model="labPat.brdh" placeholder="请输入病历号" @blur="handleFieldChange" @keyup.enter="handleFieldChange"
          size="small" />
      </el-form-item>
      <el-form-item label="姓 名">
        <el-input v-model="labPat.brxm" placeholder="请输入姓名" @blur="handleFieldChange" @keyup.enter="handleFieldChange"
          size="small" />
      </el-form-item>
      <el-form-item label="性 别">
        <el-select v-model="labPat.brxb" placeholder="请选择" style="width: 100%;" @change="handleFieldChange"
          size="small">
          <el-option v-for="item in dictData.SX" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-row :gutter="5">
          <el-col :span="14">
            <el-input v-model="labPat.nl" placeholder="年龄" @blur="handleFieldChange" @keyup.enter="handleFieldChange"
              style="width:100%" size="small" />
          </el-col>
          <el-col :span="10">
            <el-select v-model="labPat.nldw" placeholder="请选择" style="width: 100%;" filterable size="small"
              @change="handleFieldChange">
              <el-option v-for="item in dictData.AU" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="送检科室">
        <el-select v-model="labPat.ksdh" placeholder="请选择" style="width: 100%;" filterable @change="handleFieldChange"
          size="small">
          <el-option v-for="item in dictData.DP" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="床 号">
        <el-input v-model="labPat.ch" placeholder="请输入床号" @blur="handleFieldChange" @keyup.enter="handleFieldChange"
          size="small" />
      </el-form-item>
      <el-form-item label="样本类型">
        <el-select v-model="labPat.yblx" placeholder="请选择" style="width: 100%;" @change="handleFieldChange" filterable
          size="small">
          <el-option v-for="item in dictData.BT" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="申请医生">
        <el-select v-model="labPat.sjys" placeholder="请选择" style="width: 100%;" @change="handleFieldChange" filterable
          size="small">
          <el-option v-for="item in dictData.SRD" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="上机时间">
        <el-date-picker v-model="labPat.sqsj" type="datetime" placeholder="上机时间" format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss" @blur="handleFieldChange" @keyup.enter="handleFieldChange" size="small"
          style="width: 100%;" />
      </el-form-item>
      <el-form-item label="采样时间">
        <el-date-picker v-model="labPat.cyrq" type="datetime" placeholder="采样时间" format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss" @blur="handleFieldChange" @keyup.enter="handleFieldChange" size="small"
          style="width: 100%;" />
      </el-form-item>
      <el-form-item label="报告时间">
        <el-date-picker v-model="labPat.dysj" type="datetime" placeholder="报告时间" format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss" @blur="handleFieldChange" @keyup.enter="handleFieldChange" size="small"
          style="width: 100%;" />
      </el-form-item>
      <el-form-item label="临床诊断">
        <el-input v-model="labPat.zd" placeholder="请输入临床诊断" @blur="handleFieldChange" @keyup.enter="handleFieldChange"
          size="small" />
      </el-form-item>
      <el-form-item label="备 注">
        <el-input v-model="labPat.bz" placeholder="请输入备注" @blur="handleFieldChange" @keyup.enter="handleFieldChange"
          size="small" />
      </el-form-item>
      <el-form-item label="检验医生">
        <!-- <el-input v-model="labPat.yhdh" placeholder="请输入检验医生" @blur="handleFieldChange" @keyup.enter="handleFieldChange"
          size="small" /> -->

        <el-select v-model="labPat.yhdh" placeholder="请选择" style="width: 100%;" @change="handleFieldChange" filterable
          size="small">
          <el-option v-for="item in dictData.SRD" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="审核医生">
        <!-- <el-input v-model="labPat.hdys" placeholder="请输入审核医生" @blur="handleFieldChange" @keyup.enter="handleFieldChange"
          size="small" /> -->

        <el-select v-model="labPat.hdys" placeholder="请选择" style="width: 100%;" @change="handleFieldChange" filterable
          size="small">
          <el-option v-for="item in dictData.SRD" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-radio-group v-model="labPat.jgbz">
          <el-radio :label="'0'">未审核</el-radio>
          <el-radio :label="'2'">已审核</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, toRaw, computed, onMounted } from 'vue';
import { changepatcolumn, updateLabPat } from "@/api/liswork/work/LisWork";
//@ts-ignore 
import { comDict } from '@/utils/dict'
const loading = ref(true);
const props = defineProps({
  labPat: {
    type: Object,
    required: true
  },
  //结果主键
  labPatKey: {
    type: Object,
    default: () => { }
  },
  dictData: {
    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 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 {
        changepatcolumn({ ...props.labPatKey, column: changedField?.field, value: changedField?.newValue }).then((res: any) => {
        });
      } catch (error) {
        console.error('更新失败:', error);
        // 失败时可以恢复旧值
        emit('update:labPat', oldObj);
        lastValue.value = JSON.stringify(oldObj);
      }
    }
  }
};

// 完善字段变化检测方法
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';
  }
}


/**
 * 字典选择完成处理（弹窗选择后触发）
 */
const handleDictSelect = async () => {
  // 字典选择后直接触发更新

};

// 重置方法
const resetMain = () => {
  const resetData = {
    ...props.labPat,
    brly: '',
    brlyLabel: '',
    ksdh: '',
    ksdhLabel: '',
    brxb: '',
    brxbLabel: '',
    nldw: '',
    nldwLabel: '',
    jzbz: '0',
    jgbz: 0
  };
  emit('update:labPat', resetData);
  lastValue.value = JSON.stringify(resetData);
};

// interface DictData {
//   PT?: Array<any>;
//   AU?: Array<any>;
//   SX?: Array<any>;
//   DP?: Array<any>;
//   BT?: Array<any>;
//   SRD?: Array<any>;
//   [key: string]: any[] | undefined; // 添加索引签名以支持动态访问
// }
// // 字典数据存储
// const dictData = ref<DictData>({});

// onMounted(async () => {
//   // 加载病人来源字典
//   const dictRefs = await comDict('PT', 'AU', 'SX', 'DP', 'BT', 'SRD');

//   // 从 ref 中获取实际数据
//   dictData.value = {
//     PT: toRaw(dictRefs.PT.value) || [],
//     AU: toRaw(dictRefs.AU.value) || [],
//     SX: toRaw(dictRefs.SX.value) || [],
//     DP: toRaw(dictRefs.DP.value) || [],
//     BT: toRaw(dictRefs.BT.value) || [],
//     SRD: toRaw(dictRefs.SRD.value) || [],
//   };
// });

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


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

    // pointer-events: none;

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


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



.flex-between {
  height: 32px;
}



.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: 137px;

  // pointer-events: none;
}

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

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

.cb_color {
  color: rgba(255, 165, 0, 0.44);
}

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

.sd_color {
  color: rgba(128, 128, 128, 0.44);
}

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