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

<template>
  <!-- 计算项目表达式生成向导 -->
  <el-dialog :model-value="visible" @update:model-value="handleVisibleChange" title="计算项目表达式生成向导" width="600px"
    :close-on-click-modal="false" :draggable="true" @close="onClose" @open="onOpen">
    <el-row class="input-text">
      <el-input type="textarea" v-model="inputText"></el-input>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-input v-model="searchKey" ref="searchInput" size="small" placeholder="快速搜索(支持简拼)" class="mb5" clearable
          @clear="filterDataHandle" @input="filterDataHandle" />
        <VxeTable ref="tableRefs" :data="filterData" :columns="columns" class="mytable-style"
          :scrollYConfig="{ enabled: true, rSize: 30, height: '350', }" @current-change="rowHandle"
          :enableColumnDrag="true" @column-drag-end="handleColumnDragEnd" />
      </el-col>
      <el-col :span="12" class="right">
        <el-button type="" @click="bClickAdd">+ 加</el-button>
        <el-button type="" @click="bClickSub">- 减</el-button>
        <el-button type="" @click="bClickMul">* 乘</el-button>
        <el-button type="" @click="bClickDiv">/ 除</el-button>
        <el-button type="" @click="bClickLeft">(</el-button>
        <el-button type="" @click="bClickRight">)</el-button>
        <el-button type="" @click="bClickPower">^次方</el-button>
        <el-button type="" @click="bClickSex">性别</el-button>
        <el-button type="" @click="bClickAge">年龄</el-button>
        <h4>说明：</h4>
        <h4>1.计算公式中不可包括其他计算项目，若有需要，</h4>
        <h4>一律转换为最原始的计算公式</h4>
        <h4>2.所有项目代号必须使用“[”和“]”括起来</h4>
        <h4>3.表达式可以为一个常数或空字符串</h4>
      </el-col>
    </el-row>
    <!-- 底部按钮（可选） -->
    <template #footer>
      <el-button type="primary" @click="handleOk">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import VxeTable from '@/components/vxeTable/index.vue'
import { queryXmInfoNew } from '@/api/liswork/labItem/labItemApi'
import { getFirstLetter } from '@/utils/pinyin';


const props = defineProps({
  formData: {
    type: Object,
    default: {}
  }
})

let visible = ref<boolean>()
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 emit = defineEmits(['update:model-value', 'confirm'])

const columns = ref([
  { field: 'xmdh', title: '项目代号', align: 'center', resizable: true, width: 100 },
  { field: 'xmmc', title: '项目名称', resizable: true, }
])


//向外暴露数据
defineExpose({ inputText })

watch(
  () => props.formData.jsgs, // 监听的目标：formData.jsgs
  (newVal: any) => {
    inputText.value = newVal // 当新值变化时，更新 inputText
  },
  { immediate: true } // 立即执行一次（确保初始化时也能同步）
)

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



const rowHandle = (row: any) => {
  inputText.value += '[' + row.xmdh + ']'
}

const onClose = () => {
  searchKey.value = ''
  emit('update:model-value', false)
}

const handleOk = () => {
  emit('confirm', inputText.value) // 通知外部执行确认操作
  emit('update:model-value', false) // 确认后关闭
}

const handleCancel = () => {
  emit('update:model-value', false)
}

const handleVisibleChange = (newVisible: boolean) => {
  // 通知父组件：状态变为 newVisible（可能是 true 或 false）
  emit('update:model-value', newVisible)
}

const bClickAdd = () => {
  inputText.value += '+'
}

const bClickSub = () => {
  inputText.value += '-'
}

const bClickMul = () => {
  inputText.value += '*'
}

const bClickDiv = () => {
  inputText.value += '/'
}

const bClickLeft = () => {
  inputText.value += '('
}

const bClickRight = () => {
  inputText.value += ')'
}

const bClickPower = () => {
  inputText.value += '^'
}

const bClickSex = () => {
  inputText.value += '[SEX]'
}

const bClickAge = () => {
  inputText.value += '[AGE]'
}

const onOpen = async () => {
  const res = await queryXmInfoNew(props.formData.xmgl);
  tableData.value = processTableData(res.data)
  filterData.value = [...tableData.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 = [...tableData.value];
    return;
  } else {
    currentIndex.value = 0
  }

  filterData.value = tableData.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]);
  }
};

</script>

<style scoped lang="scss">
.input-text {
  margin-bottom: 10px;
}

// .right {
//   margin-left: 2px;
// }
.el-button {
  margin-bottom: 5px;
}
</style>