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>
      <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"
                :disabled="v.kybj == '0'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-checkbox v-model="labPat.jzbz" true-value="1" :disabled="v.kybj == '0'" class="check_box"> 急诊
            </el-checkbox>
          </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"
            :disabled="v.kybj == '0'" />


          <el-date-picker v-if="v.zdlb == '3'" v-model="labPat[v.zdmc]" type="datetime" :disabled="v.kybj == '0'"
            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">
            <!-- <el-select v-model="labPat.nldw" style="width: 100%;" filterable size="small" @change="handleFieldChange"
              placeholder="">
              <el-option v-for="item in dictData.AU" :key="item.value" :label="item.label" :value="item.value" />
            </el-select> -->
            <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.kj == '1' && v.mrts == '性别'">
          <el-select v-model="labPat[v.zdmc]" style="width: 100%;" @change="handleFieldChange" size="small"
            placeholder="" :disabled="v.kybj == '0'">
            <el-option v-for="item in dictData[v.dict]" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </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="ksdhFields" :tableData="dictData[v.dict] || []"
            label="label" value="value" objKey="value" :border="true" size="small" @getDataValue="handleFieldChange"
            :disabled="v.kybj == '0'" 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="handleFieldChange"
            :disabled="v.kybj == '0'" 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="handleFieldChange"
            :disabled="v.kybj == '0'" placeholder="" />
        </el-form-item>
      </template>
    </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";
import SelectTable from '@/components/SelectTable/index.vue';
// @ts-ignore
import { listUser } from '@/api/system/user.js'
import { PropType } from 'vue';

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: () => { }
  },
  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', 'getLabList']);
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 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 {
        if (props.labPat.id) {
          updateLabPat({ ...props.labPatKey, column: changedField?.field, value: changedField?.newValue }).then((res: any) => {
            if (res.code == 0) {
              emit('getLabList', newObj);
            }
          })
        } else {
          changepatcolumn({ ...props.labPatKey, column: changedField?.field, value: changedField?.newValue })
        }

      } 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 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 - 95px);
  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;
    }

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