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

<template>
  <!-- 基本资料 -->
  <div class="basic_info">
    <el-form ref="formRef" :model="basicData" :rules="rules" size="small" class="form-inline" inline
      label-width="6.25rem" label-position="right" :inline-message="false">
      <span class="text-span">基本参数：</span>
      <el-divider style="margin: .3125rem 0;" />
      <el-form-item label="项目类别" prop="xmgl">
        <SelectTable v-model:data="basicData.xmgl" :fields="xmglFields" :tableData="dictData.XMGL" label="label"
          value="value" objKey="value" width="12.5rem" placeholder="" size="small" />
      </el-form-item>
      <el-form-item label="项目ID" prop="xmid">
        <el-input disabled v-model="basicData.xmid" style="width:8.2rem;" />
      </el-form-item>
      <el-form-item prop="uflag">
        <el-checkbox v-model="basicData.uflag" true-value="1" false-value="0">停用</el-checkbox>
      </el-form-item>
      <el-form-item label="英文缩写" prop="xmdh">
        <el-input v-model="basicData.xmdh" @input="xmdhInput" />
      </el-form-item>
      <el-form-item label="单位" prop="dw">
        <SelectTable v-model:data="basicData.dw" :fields="xmglFields" :tableData="dictData.UT" label="label"
          value="label" objKey="label" width="12.5rem" placeholder="" size="small" />
      </el-form-item>
      <el-form-item label="项目名称" prop="xmmc">
        <el-input v-model="basicData.xmmc" @change="xmmcChange" />
      </el-form-item>

      <el-form-item label="结果类别" prop="xmlb">
        <SelectTable v-model:data="basicData.xmlb" :fields="xmglFields" :tableData="xmlbData" label="label"
          value="value" objKey="value" width="12.5rem" placeholder="" size="small" />
      </el-form-item>
      <el-form-item label="阴阳性" prop="mrz">
        <SelectTable v-model:data="basicData.mrz" :fields="xmglFields" :tableData="mrzData" label="label" value="value"
          objKey="value" width="12.5rem" placeholder="" size="small" />
      </el-form-item>
      <el-form-item label="仪器大类" prop="yqdl">
        <SelectTable v-model:data="basicData.yqdl" :fields="xmglFields" :tableData="dictData.YQDL" label="label"
          value="value" objKey="value" width="12.5rem" placeholder="" size="small" />
      </el-form-item>
      <el-form-item label="允许CV(%)" prop="qccv">
        <el-input type="number" v-model="basicData.qccv" />
      </el-form-item>
      <el-form-item label="稀释倍数" prop="xsbs">
        <el-input v-model="basicData.xsbs" />
      </el-form-item>
      <el-form-item label="whonet编码" prop="whocode">
        <el-input v-model="basicData.whocode" />
      </el-form-item>
      <el-form-item label="Gram" prop="germflag">
        <el-input v-model="basicData.germflag" />
      </el-form-item>
      <el-form-item label="英文名称" prop="yymc">
        <el-input v-model="basicData.yymc" />
      </el-form-item>
      <el-form-item label="知识库编码" prop="knowledge">
        <el-input v-model="basicData.knowledge" />
      </el-form-item>
      <el-form-item label="小数保留位数" prop="xsws">
        <SelectTable v-model:data="basicData.xsws" :fields="xmglFields" :tableData="xswsData" label="label"
          value="value" objKey="value" width="12.5rem" placeholder="" size="small" />
      </el-form-item>
      <el-form-item label="打印形式" prop="dylx">
        <SelectTable v-model:data="basicData.dylx" :fields="xmglFields" :tableData="dylxData" label="label"
          value="value" objKey="value" width="12.5rem" placeholder="" size="small" />
      </el-form-item>
      <el-form-item label="总汇表代号" prop="zhbdh">
        <el-input v-model="basicData.zhbdh" />
      </el-form-item>
      <el-form-item label="报告单代号" prop="bgdh">
        <el-input v-model="basicData.bgdh" />
      </el-form-item>
      <el-form-item label="价格" prop="jg">
        <el-input type="number" v-model="basicData.jg" />
      </el-form-item>
      <el-form-item label="助记符" prop="zjf">
        <el-input v-model="basicData.zjf" />
      </el-form-item>
      <el-form-item label="测试方法" prop="csff">
        <SelectTable v-model:data="basicData.csff" :fields="xmglFields" :tableData="dictData.MD" label="label"
          value="value" objKey="value" width="12.5rem" placeholder="" size="small" />
      </el-form-item>
      <el-form-item label="分组打印组号" prop="fzdyxh">
        <el-input type="number" v-model="basicData.fzdyxh" />
      </el-form-item>
      <el-form-item label="细菌项目类别" prop="itemclass">
        <SelectTable v-model:data="basicData.itemclass" :fields="xmglFields" :tableData="dictData.ITEMCLASS"
          label="label" value="value" objKey="value" width="12.5rem" placeholder="" size="small" />
      </el-form-item>
      <span class="text-span">结果参考值计算：</span>
      <el-divider style="margin: .3125rem 0;" />
      <el-form-item label="参考下限" prop="ckxx">
        <el-input v-model="basicData.ckxx" @input="updatedyckz" />
      </el-form-item>
      <el-form-item label="参考上限" prop="cksx">
        <el-input v-model="basicData.cksx" @input="updatedyckz" />
      </el-form-item>
      <el-form-item label="参考值" prop="dyckz">
        <el-input v-model="basicData.dyckz" />
        <el-button type="primary" class="ml5" @click="multiRefClick">多行参考值向导...</el-button>
      </el-form-item>
      <el-form-item label="公式" prop="jsgs">
        <el-input v-model="basicData.jsgs" />
        <el-button v-show="basicData.jsxm === 'Y'" type="primary" class="ml5" @click="calcGuildeClick">向导...</el-button>
      </el-form-item>
      <el-form-item>
        <el-checkbox label="参考值与性别有关" v-model="basicData.ygxb" true-value="Y" false-value="N"></el-checkbox>
        <el-checkbox label="与年龄有关" v-model="basicData.ygnl" true-value="Y" false-value="N"></el-checkbox>
        <el-checkbox label="与标本有关" v-model="basicData.ygbb" true-value="Y" false-value="N"></el-checkbox>
        <el-checkbox label="与生理周期有关" v-model="basicData.ygzq" true-value="Y" false-value="N"></el-checkbox>
        <el-checkbox label="与诊断有关" v-model="basicData.ygzd" true-value="Y" false-value="N"></el-checkbox>
        <el-checkbox label="计算项目" v-model="basicData.jsxm" true-value="Y" false-value="N"></el-checkbox>
      </el-form-item>
      <span class="text-span">医学审核条件：</span>
      <el-divider style="margin: .3125rem 0;" />
      <el-form-item label="项目结果不可能大于" prop="sjx" label-width="8.75rem">
        <el-input v-model="basicData.sjx" style="width:10rem" />
      </el-form-item>
      <el-form-item label="不可能小于" prop="xjx" label-width="7rem">
        <el-input v-model="basicData.xjx" style="width:10rem" />
      </el-form-item>
      <el-form-item label="病人两次检验结果在" prop="jgjg" label-width="8.75rem">
        <el-input v-model="basicData.jgjg" style="width:10rem" />
      </el-form-item>
      <!--计算属性-->
      <el-form-item label="天内不可能相差" prop="jgz" label-width="7rem">
        <el-input v-model="basicData.jgz" style="width:10rem">
          <template #append v-if="basicData.jgbz == '2'">%</template>
        </el-input>
      </el-form-item>
      <!--报警条件-->
      <span class="text-span">报警条件</span>
      <el-divider style="margin: .3125rem 0;" />
      <el-form-item label="危急值">
        <el-input placeholder="上限极值" v-model="basicData.hlimit" /> &nbsp;
        <el-input placeholder="下限极值" v-model="basicData.llimit" />
        <el-button type="primary" class="ml5" @click="conditionClick">特定条件</el-button>
      </el-form-item>
      <el-form-item label="复查">
        <el-input placeholder="上限极值" v-model="basicData.redoxx" />&nbsp;
        <el-input placeholder="下限极值" v-model="basicData.redosx" />
      </el-form-item>
      <span class="text-span">其他参数</span>
      <el-divider style="margin: .3125rem 0;" />
      <el-form-item label="国标编码">
        <SelectTable v-model:data="basicData.val1" :fields="xmglFields" :tableData="dictData.GBDM" label="label"
          value="value" objKey="value" width="12.5rem" placeholder="国标编码" size="small" />
      </el-form-item>
      <el-form-item label="外部代码2">
        <el-input v-model="basicData.val2" />
      </el-form-item>
      <el-form-item label="外部代码3">
        <el-input v-model="basicData.val3" />
      </el-form-item>
      <el-form-item label="外部代码4">
        <el-input v-model="basicData.val4" />
      </el-form-item>
      <el-form-item label="外部代码5">
        <el-input v-model="basicData.val5" />
      </el-form-item>
    </el-form>

    <MultiRef :refData="basicData.dyckz || ''" v-model:dialog-table-visible="mulitDialogTableVisible"
      @closeWithReturn="closeWithReturnMultiRef" />
    <CalcGuilde v-model="calcDialogTableVisible" :form-data="basicData" :text="basicData.jsgs"
      @confirm="handleDialogConfirm" />
    <Condition v-model="conditionTabVisible" :form-data="basicData" />

  </div>
</template>

<script setup lang="ts">
import { formatDict, getDictData, dictData } from '@/hooks';
import MultiRef from './child/MultiRef.vue';
import CalcGuilde from './child/CalcGuilde.vue';
import SelectTable from '@/components/SelectTable/index.vue'
import Condition from './child/Condition.vue';
//@ts-ignore
import { getFirstLetter } from '@/utils/pinyin.js';
import { ElMessage } from 'element-plus';



const modelParam = defineModel<any>();
// 解构basicData 响应数据
const basicData = computed({
  get() {
    return modelParam.value.basicData;
  },
  set(newVal) {
    modelParam.value.basicData = newVal;
  }
});

const formRef = ref();
const mulitDialogTableVisible = ref(false)
const calcDialogTableVisible = ref(false)
const conditionTabVisible = ref(false)
const xmglFields = ref([
  { prop: 'value', label: '代号', width: 80, enablePinyinSearch: true },
  { prop: 'label', label: '名称', enablePinyinSearch: true },
])
const xmlbData = [
  { label: '数值型', value: '1' },
  { label: '文字型', value: '2' },
  { label: '阴阳性型', value: '3' },
  { label: '数值文字混合型', value: '4' },
]
const mrzData = [
  { label: '阴性', value: 'N' },
  { label: '阳性', value: 'P' }
]
const xswsData = [
  { label: '保持原始值', value: '-1' },
  { label: '0 位', value: '0' },
  { label: '1 位', value: '1' },
  { label: '2 位', value: '2' },
  { label: '3 位', value: '3' },
  { label: '4 位', value: '4' },
]
const dylxData = [
  { label: '原始检验结果', value: '1' },
  { label: '>上限,<下限模式', value: '2' },
  { label: '不打印', value: '3' },
]

const rules = ref({
  xmgl: [{ required: true, message: '请输入项目类别', trigger: 'blur' }],
  xmdh: [{ required: true, message: '请输入英文缩写', trigger: 'blur' }],
  xmmc: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  yqdl: [{ required: true, message: '请选择仪器大类', trigger: 'change' }],
  dylx: [{ required: true, message: '请选择仪打印方式', trigger: 'change' }],
})

const updatedyckz = () => {
  basicData.value.dyckz = !basicData.value.ckxx && !basicData.value.cksx ? '' : `${basicData.value.ckxx}--${basicData.value.cksx}`;
}


//多行参考值
const multiRefClick = () => {
  mulitDialogTableVisible.value = true
}

const closeWithReturnMultiRef = (val: string) => {
  basicData.value.dyckz = val;
  mulitDialogTableVisible.value = false;
}

const handleDialogConfirm = (val: string) => {
  basicData.value.jsgs = val;
  calcDialogTableVisible.value = false
}

//计算向导
const calcGuildeClick = () => {
  if (basicData.value.jsxm) {
    calcDialogTableVisible.value = true
  }

}
//危急值特定条件
const conditionClick = () => {
  if (basicData.value.xmid) {
    conditionTabVisible.value = true
  }

}

const xmdhInput = (val: string) => {
  basicData.value.zhbdh = val;
  basicData.value.bgdh = val;
}

const xmmcChange = (val: string) => {
  basicData.value.zjf = getFirstLetter(val);
}

// 暴露验证方法（关键步骤）
defineExpose({
  // 封装表单验证方法，返回 Promise
  validate: () => {
    return new Promise((resolve) => {
      formRef.value?.validate((valid: boolean) => {
        resolve(valid);
      });
    });
  },
  // 可选：暴露清除验证的方法
  clearValidate: () => {
    formRef.value?.clearValidate();
  },
  resetField: () => {
    formRef.value?.resetFields();
  },

});

</script>


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

.form-inline {
  padding: .625rem .625rem 0 .625rem;
  background-color: #f5f7fa;
  height: auto;

  .el-input {
    width: 12.5rem;
  }

  .el-form-item {
    margin-right: 10px;
    margin-bottom: 2px;
  }

  .text-span {
    font-weight: bold;
    font-size: 14px;
    color: #1f6dd3;
    display: block;
  }

  .el-checkbox {
    margin-right: .9375rem;
  }



  :deep(.el-form-item__error) {
    display: none;
  }
}
</style>