lis8.0-vue3/src/views/liswork/labItem/tab/base/child/Condition.vue

<template>
  <!-- 危急值特定判断条件 -->
  <el-dialog title="危急值特定判断条件" width="700px" v-model="visible" :close-on-click-modal="false" :draggable="true"
    @open="onOpen" @close="onClose">
    <el-row class="row-up">
      <div class="top-button">
        <el-button type="primary" @click="bClickAdd">增加</el-button>
        <el-button type="primary" @click="bClickDel">删除</el-button>
        <el-button type="primary" @click="bClickSave">保存</el-button>
      </div>
      <CustomTable ref="tableRefs" :data="tableDataUp" :columns="columnsUp" :config="tableConfigUp"
        @row-click="rowHandleUp" :enableColumnDrag="true" @column-drag-end="handleColumnDragEnd">
        <template #samplecondition="{ row }">
          <el-input v-model="row.samplecondition" class="full-width-input"></el-input>
        </template>
        <template #resultcondition="{ row }">
          <el-input v-model="row.resultcondition" class="full-width-input"></el-input>
        </template>
      </CustomTable>
    </el-row>
    <el-row class="row-down">
      <el-col :span="12">
        <el-input v-model="searchKey" ref="searchInput" size="small" placeholder="快速搜索(支持简拼)" class="mb5" clearable
          @clear="filterDataHandle" @input="filterDataHandle" />
        <CustomVxeTable ref="tableRefs" :data="filterData" :columns="columnsDown" class="mytable-style"
          :scrollYConfig="{ enabled: true, rSize: 30, height: '380', }" @current-change="rowHandleDown"
          :enableColumnDrag="true" @column-drag-end="handleColumnDragEnd" />
      </el-col>
      <el-col :span="12" class="rigth-col">
        <el-button type="primary" @click="bClickDept" size="small">科室</el-button>
        <el-button type="primary" @click="bClickDiag" size="small">诊断</el-button>
        <el-button type="primary" @click="bClickPre" size="small">初报</el-button>
        <el-button type="primary" @click="bClickResult" size="small">结果</el-button>
        <el-button type="primary" @click="bClickSample" size="small">样本状态</el-button>
        <h4>1公式举例：科室诊断条件:[科室] = '血液科' or [诊断] ='白血病' 当前结果判断条件:[结果] &gt; 20 or [结果] &lt;2 or [结果] ='阳性'</h4>
        <h4>2公式举例：科室诊断条件(其他项目代号如):[WBC] = '阳性' or [WBC] &gt; 20 or [WBC] &lt;20 当前结果判断条件: [结果] &gt; 20 or [结果] &lt;2
        </h4>
        <h4>3公式举例：只发一次危急值病人条件:[初报] = 'brdh' and [初报] = 'brxm' 当前结果判断条件:[结果] &gt; 20 or [结果] &lt;2 or [结果] ='阳性'</h4>
        <h4>只要符合科室或诊断条件的，就不会再断默认的危机值标准了</h4>
        <h4>注意科室用中文，结果如果是字符型用单引号引起来</h4>
      </el-col>
    </el-row>
  </el-dialog>

</template>

<script setup lang="ts">
import CustomTable from '@/components/elTable/index.vue'
import CustomVxeTable from '@/components/vxeTable/index.vue'
import { queryXmInfoNew, queryXmAlarmdetailNew, addXmAlarmdetailNew, delXmAlarmdetailNew } from '@/api/liswork/labItem/labItemApi'
import { XmAlarmdetailNew } from '@/types'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getFirstLetter } from '@/utils/pinyin';

const columnsUp = ref([
  { prop: 'seq', label: '序号', align: 'center', visible: true, width: 50 },
  { prop: 'samplecondition', label: '科室或诊断条件', align: 'center', visible: true, slot: 'samplecondition', width: 300 },
  { prop: 'resultcondition', label: '结果判断条件', align: 'center', visible: true, slot: 'resultcondition', width: 300 }
])

const columnsDown = ref([
  { field: 'xmdh', title: '项目代号', align: 'center', width: 100, resizable: true },
  { field: 'xmmc', title: '项目名称', resizable: true }
])
const currentIndex = ref(0)
const searchKey = ref('');
const filterData = ref<{ [key: string]: any; pinyinMap: Record<string, string> }[]>([]);
const tableData = ref()
const inputText = ref('')
const tableRefs = ref()
const tableDataUp = ref<Array<XmAlarmdetailNew>>([])
const tableDataDown = ref<{ [key: string]: any; pinyinMap: Record<string, string> }[]>([])
const selectRowUp = ref<XmAlarmdetailNew>({
  xmid: 0,
  seq: 0,
  samplecondition: '',
  resultcondition: ''
})
const visible = defineModel()
const props = defineProps({
  formData: {
    type: Object,
    default: {}
  }
})

// 表格配置
const tableConfigUp = ref(
  {
    // stripe: true, // 斑马纹
    border: true, // 边框
    height: '200', // 高度
    highlightCurrentRow: true, // 高亮当前行
    fit: true
  }
)



//序号最大值
const maxXh = computed(() => {
  return tableDataUp.value.length > 0 ? Math.max(...tableDataUp.value.map((item: { seq: number }) => item.seq)) : 0;
});


const handleColumnDragEnd = (newColumns: any) => {
  columnsUp.value = newColumns.columns
  columnsDown.value = newColumns.columns
}

const rowHandleUp = (row: any) => {
  selectRowUp.value = row
}

const rowHandleDown = (row: any) => {
  if (selectRowUp.value) {
    selectRowUp.value.samplecondition += `[${row.xmdh}]`
  }
}


const onOpen = async () => {
  const res = await queryXmAlarmdetailNew(props.formData.xmid);
  tableDataUp.value = res.data;
  if (!tableDataDown.value.length) {
    let res = await queryXmInfoNew(props.formData.xmgl);
    tableDataDown.value = processTableData(res.data)
    filterData.value = [...tableDataDown.value]
  }
}

// 预处理数据：生成拼音信息
const processTableData = (data: object[]) => {
  return data.map((item: any) => {
    const pinyinMap: Record<string, string> = {};
    // 处理label字段拼音
    if (item.xmmc) {
      pinyinMap.xmmc = getFirstLetter(item.xmmc).toLowerCase();
    }
    if (item.xmdh) {
      pinyinMap.xmdh = getFirstLetter(item.xmdh).toLowerCase();
    }

    return { ...item, pinyinMap };
  });
};

// 搜索过滤逻辑
const filterDataHandle = () => {
  const key = searchKey.value.trim().toLowerCase();

  if (!key) {
    // 空搜索时显示全部预处理数据
    filterData.value = [...tableDataDown.value];
    return;
  } else {
    currentIndex.value = 0
  }

  filterData.value = tableDataDown.value.filter((item: any) => {
    // 1. 原文本匹配
    const matchLabel = item.xmmc?.toString().toLowerCase().includes(key);
    const matchValue = item.xmdh?.toString().toLowerCase().includes(key);

    // 2. 拼音匹配
    const matchLabelPinyin = item.pinyinMap.xmmc?.includes(key);
    const matchValuePinyin = item.pinyinMap.xmdh?.includes(key);

    return matchLabel || matchValue || matchLabelPinyin || matchValuePinyin;
  });

  if (filterData.value.length > 0) {
    tableRefs.value.setCurrentRow(filterData.value[0]);
  }
};


const onClose = () => {
  searchKey.value = ''
  tableDataUp.value = []
  selectRowUp.value = { xmid: 0, seq: 0, samplecondition: '', resultcondition: '' }
}

const bClickAdd = () => {
  const newData: XmAlarmdetailNew = {
    xmid: props.formData.xmid,
    seq: maxXh.value + 1,
    samplecondition: '',
    resultcondition: ''
  }
  tableDataUp.value.push(newData);
}

const bClickDel = () => {
  if (!selectRowUp.value.xmid) return ElMessage.warning('请选择要删除的行！')
  ElMessageBox.confirm('是否要删除选中的数据?', '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      const xmid = selectRowUp.value.xmid
      const seq = selectRowUp.value.seq
      delXmAlarmdetailNew(xmid, seq).then((res: any) => {
        if (res.code == 0) {
          onOpen()
          ElMessage.success('删除成功！')
        }
      })
    })
}

const bClickSave = () => {
  const flag = tableDataUp.value.every((item: XmAlarmdetailNew) => item.samplecondition && item.resultcondition)
  if (!flag) return ElMessage.warning('请检查填写科室或诊断条件和结果判断条件！')
  addXmAlarmdetailNew(tableDataUp.value).then((res: any) => {
    if (res.code == 0) {
      onOpen()
      ElMessage.success('保存成功！')
    }
  })

}

const bClickDept = () => {
  if (selectRowUp.value) {
    selectRowUp.value.samplecondition += '[科室]'
  }
}

const bClickDiag = () => {
  if (selectRowUp.value) {
    selectRowUp.value.samplecondition += '[诊断]'
  }
}

const bClickPre = () => {
  if (selectRowUp.value) {
    selectRowUp.value.samplecondition += '[初报]'
  }
}

//结果
const bClickResult = () => {
  if (selectRowUp.value) {
    selectRowUp.value.resultcondition += '[结果]'
  }

}

const bClickSample = () => {
  if (selectRowUp.value) {
    selectRowUp.value.samplecondition += '[样本状态]'
  }
}
</script>

<style scoped lang="scss">
.row-up {
  margin-bottom: 5px;
}

.top-button {
  margin-bottom: 5px;
}

.row-down {
  .rigth-col {
    padding-left: 10px;
  }
}
</style>