lis8.0-vue3/src/views/liswork/components/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>

    <!-- 新增明细-->
    <ProjectDetails ref="itemDictRef" :dialog-title="'选择检验项目'" :tableKey="tablekey" @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 ProjectDetails from '@/components/projectDetails/index.vue'

const props = defineProps({
  // 主键
  queryParams: {
    type: Object,
    default: {}
  },
  tablekey: {
    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,
  deep: true
})

const tableRef = ref();
const itemDictRef = ref(); // DictInput组件引用



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

const openItemDictDialog = () => {
  itemDictRef.value.openDictSelector(); // 确保方法存在再调用
};


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) return ElMessage.error("新增失败：项目编码不能为空");

  const isDuplicate = tableData.value.some((item: any) => item.xmdh === rowData.xmdh);
  if (isDuplicate) return ElMessage.warning(`项目【${rowData.xmmc}】已存在`);

  const newRow = { ...rowData, csjg: "" };
  tableData.value.push(newRow);

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

const handleCsjgEnter = (row: any) => {
  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>