lis8.0-vue3/src/views/liswork/work/reexamination/index.vue

<template>
  <div class="reex_box">
    <div class="mb10">
      <el-button type="primary" plain @click="openItemDictDialog">新增</el-button>
    </div>
    <!-- 结果复查 -->
    <el-table ref="tableRef" :data="tableData" style="width: 100%" border height="77vh" show-overflow-tooltip>
      <el-table-column prop="xmdh" label="检验项目" align="center" width="120" />
      <el-table-column prop="csjg" label="复查前结果" align="center" width="150">
        <template #default="{ row }">
          <el-input v-model="row.csjg" class="full-width-input" @change="handleCsjgEnter(row)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="deleteRedo(row)"> 删除 </el-button>
          <el-button type="primary" link size="small" @click="jhRedo(row)">交换</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增明细 -->
    <ItemInput ref="itemDictRef" v-model="selectedItemValue" :label-value.sync="selectedItemLabel"
      :dict-type="'LAB_ITEM'" :fetch-dict="fetchLabItemDict" :dialog-title="'选择检验项目'" :disabled="false"
      :load-on-mount="false" :table-data.sync="labResuts" class="hidden-dict-input" @select="handleItemSelect" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch, toRefs, onMounted, nextTick } from 'vue'
import { redoResult, queryXmInfo, saveRedo, swapRedo, delRedo } from "@/api/liswork/work/LisWork";
import { ElMessage } from 'element-plus'
// @ts-ignore
import ItemInput from '../components/ItemInput.vue'

const props = defineProps({
  // 主键
  queryParams: {
    type: Object,
    default: {}
  },
})

// 解构 props
const { queryParams } = toRefs(props);
const tableData: any = ref([]);
const getReexamination = () => {
  redoResult(queryParams.value).then((res: any) => {
    if (res.code == 0) {
      tableData.value = res.data || [];
    }
  })
};

watch(() => queryParams.value, () => {
  getReexamination();
}, { immediate: true })

const tableRef = ref();
const itemDictRef = ref(); // DictInput组件引用
const selectedItemValue = ref(""); // 选择的项目编码xmdh
const labResuts = ref([])
const selectedItemLabel = ref(""); // 选择的项目名称xmmc


// 事件定义
const emits = defineEmits(['fetchResults',]);

const openItemDictDialog = () => {
  if (itemDictRef.value && typeof itemDictRef.value.openDictSelector === 'function') {
    itemDictRef.value.openDictSelector(); // 确保方法存在再调用
  } else {
    console.warn("DictInput组件未加载完成或方法未暴露");
  }
};

const fetchLabItemDict = async (dictType: string) => {
  try {
    // 1. 验证必要参数（如当前仪器yq）
    if (!queryParams.value.yq) {
      ElMessage.error("请先选择仪器");
      return [];
    }

    const requestParams = {
      pageNum: 1,
      pageSize: 1000, // 加载足够多的项目
      yq: queryParams.value.yq, // 当前选中的仪器
    };
    const response = await queryXmInfo(requestParams);

    const formattedData = response.data.map((item: any, index: number) => {
      return {
        value: item.xmdh || `未知编码_${index}`, // 确保value存在
        label: item.xmmc || `未知名称_${index}`, // 确保label存在
        dw: item.dw || "",
        refs: item.refs || "",
      };
    });
    return formattedData;
  } catch (error: any) {
    console.error(`[fetchLabItemDict] 加载失败：`, error.message);
    return []; // 失败时返回空数组，避免弹窗报错
  }
};

const handleItemSelect = async (selectedItem: any) => {
  // 1. 构造新增行数据
  const newRow = {
    id: `temp_${Date.now()}_${Math.random().toString(36).substr(2, 8)}`,
    xmdh: selectedItem.value,
    xmmc: selectedItem.label,
    dw: selectedItem.dw || "",
    refs: selectedItem.refs || "",
    jyrq: queryParams.value.jyrq,
    yq: queryParams.value.yq,
    ybh: queryParams.value.ybh,
  };


  addRowFromDict(newRow);
  // ElMessage.success(`已新增项目：${newRow.xmmc}`);
};

const addRowFromDict = async (rowData: any) => {
  if (!rowData?.xmdh) {
    ElMessage.error("项目编码不能为空");
    return;
  }
  // 1. 校验输入数据有效性
  if (!rowData || !rowData.xmdh) {
    ElMessage.error("新增失败：项目编码不能为空");
    return false;
  }

  // 2. 检查是否重复添加同一项目（根据xmdh判断）
  const isDuplicate = tableData.value.some((item: any) => item.xmdh === rowData.xmdh);
  if (isDuplicate) {
    ElMessage.warning(`项目【${rowData.xmmc}】已存在`);
    return;
  }

  // 3. 补全新增行的必要字段（如无则初始化）
  const newRow = { ...rowData, csjg: "" };

  // 4. 添加到表格数据
  tableData.value.push(newRow);

  // 5. 自动聚焦
  nextTick(() => {
    tableRef.value.setCurrentRow(newRow);
    nextTick(() => {
      tableRef.value.setScrollTop(23 * tableRef.value.length)
    })
    nextTick(() => {
      const tableBody = document.querySelector('.el-table__body-wrapper');
      if (tableBody) {
        tableBody.scrollTop = tableBody.scrollHeight;
      }

      // 聚焦到新行的输入框
      const inputs = document.querySelectorAll('.full-width-input .el-input__inner') as NodeListOf<HTMLInputElement>;
      if (inputs.length > 0) {
        inputs[inputs.length - 1]?.focus();
      }
    });
  });

  return true;
};

const handleCsjgEnter = (row: any) => {
  console.log('复查结果修改', row);
  saveRedo(row)
}

const deleteRedo = (row: any) => {
  delRedo(row).then((res: any) => {
    if (res.code == 0) {
      getReexamination();
    }
  })
}
const jhRedo = (row: any) => {
  swapRedo(row).then((res: any) => {
    if (res.code == 0) {
      getReexamination();
      emits('fetchResults')
    }
  })
}
</script>

<style scoped lang="scss">
.reex_box {
  height: 82vh;
  overflow-y: auto;
}
</style>