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="onClose">
    <el-row class="input-text">
      <el-input type="textarea" v-model="formData.jsgs"></el-input>
    </el-row>
    <el-row>
      <el-col :span="12">
        <CustomTable ref="tableRefs" :data="tableData" :columns="columns" :config="tableConfig"
        @row-click="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 CustomTable from '@/components/elTable/index.vue'
import { queryXmInfoNew } from '@/api/liswork/labItem/labItemApi'

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

let visible = ref<boolean>()
const tableData = ref()
const inputText = ref('')
const emit = defineEmits(['update:model-value', 'confirm'])

const columns = ref([
  { prop: 'xmdh', label: '项目代号', align: 'center', visible: true,  width: 100 },
  { prop: 'xmmc', label: '项目名称', align: 'center', visible: true,  width: 180 }
])
// 表格配置
const tableConfig = ref(
  {
    // stripe: true, // 斑马纹
    border: true, // 边框
    height: '350', // 高度
    highlightCurrentRow: true, // 高亮当前行
    fit: true
  }
)

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

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

const onClose = () => {
  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  init = async () => {
  const res = await queryXmInfoNew(props.xmgl);
  tableData.value = res.data
  //inputText.value = props.text
}

onMounted(()=>{
  init();
})

</script>

<style scoped lang="scss">
.input-text {
  margin-bottom: 10px;
}
// .right {
//   margin-left: 2px;
// }
.el-button {
  margin-bottom: 5px;
}
</style>