lis8.0-vue3/src/views/liswork/labItem/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="14" :xs="24">
         <!--  表单区域-->
        <el-form :inline="true" :model="queryParams" class="mb8">
           <el-form-item label="项目类别" prop="userName">
              <el-input clearable placeholder="项目类别" prefix-icon="Search" style="width: 150px"/>
           </el-form-item>
          <el-form-item label="细菌标志" prop="bacteriaFlag">
              <el-input clearable placeholder="细菌标志" prefix-icon="Search" style="width: 150px"/>
          </el-form-item>
          <el-form-item label="仪器代号" prop="instrumentCode">
              <el-input clearable placeholder="仪器代号" prefix-icon="Search" style="width: 130px"/>
          </el-form-item>
          <el-form-item label="快速查找">
              <el-input clearable placeholder="快速查找" prefix-icon="Search" style="width: 150px"/>
          </el-form-item>
          <el-form-item label="仪器大类">
            <el-input clearable placeholder="仪器大类" prefix-icon="Search" style="width: 150px"/>
          </el-form-item>
          <el-form-item label="项目ID">
            <el-input clearable placeholder="项目ID" prefix-icon="Search" style="width: 150px"/>
          </el-form-item>
          <el-form-item>
            <el-radio-group v-model="status" fill="primary" size="large">
              <el-radio value="1">在用</el-radio>
              <el-radio value="2">停用</el-radio>
              <el-radio value="3">所有</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
           <el-checkbox v-model="isMIC" label="隐藏微生物项目" size="large" />
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
            <el-button type="primary" plain icon="Plus" @click="handleDel">删除</el-button>
            <el-button type="primary" plain icon="Plus" @click="handleDelCorr">删除对应</el-button>
            <el-button type="primary" plain icon="Plus" @click="handleSave">保存</el-button>
          </el-col>
        </el-row>
          <!--  表格区域-->
        <el-table :data="dataList" height="65vh" border >
            <el-table-column label="项目类别" align="center" prop="xmgl">
               <template #default="{ row }">
                {{ formatDict(row.xmgl, 'XMGL') }}
              </template>
            </el-table-column>
            <el-table-column label="英文缩写" align="center" prop="xmdh"></el-table-column>
            <el-table-column label="名称" align="center" prop="xmmc" width="200"></el-table-column>
            <el-table-column label="参考值" align="center" prop="dyckz"></el-table-column>
            <el-table-column label="单位" align="center" prop="dw"></el-table-column>
            <el-table-column label="结果类型" align="center" prop="xmlb"></el-table-column>
            <el-table-column label="计算项目" align="center" prop="jsxm"></el-table-column>
            <el-table-column label="序号" align="center" prop="dyxh"></el-table-column>
            <el-table-column label="调整系数" align="center" prop="xs"></el-table-column>
            <el-table-column label="小数位数" align="center" prop="xsws"></el-table-column>
            <el-table-column label="稀释倍数" align="center" prop="xsbs"></el-table-column>
            <el-table-column label="停用" align="center" prop="uflag"></el-table-column>
            <el-table-column label="仪器大类" align="center" prop="yqdl"></el-table-column>
            <el-table-column label="项目ID" align="center" prop="xmid"></el-table-column>
            <el-table-column label="项目编码" align="center" prop="knowledge"></el-table-column>
            <el-table-column label="外部代码1" align="center" prop="val1"></el-table-column>
            <el-table-column label="外部代码2" align="center" prop="val2"></el-table-column>
            <el-table-column label="外部代码3" align="center" prop="val3"></el-table-column>
            <el-table-column label="英文名称" align="center" prop="yymc" width="200"></el-table-column>
            <el-table-column label="允许CA(%)" align="center" prop="qccv"></el-table-column>
        </el-table>
      </el-col>
      <!--  右侧区域-->
      <el-col :span="10" :xs="24">
        <div class="flex gap-2 mt-4">
          <el-check-tag checked type="primary" @click="handleTabClick('1')">基本资料</el-check-tag>
          <el-check-tag checked type="primary" @click="handleTabClick('2')">常用取值</el-check-tag>
          <el-check-tag checked type="primary" @click="handleTabClick('3')">使用仪器</el-check-tag>
          <el-check-tag checked type="primary" @click="handleTabClick('4')">知识库</el-check-tag>
          <el-check-tag checked type="primary" @click="handleTabClick('5')">整体排序</el-check-tag>
          <el-check-tag checked type="primary" @click="handleTabClick('6')">常见描述</el-check-tag>
        </div>
        <div>
          <Basic :visible="tabVisible === '1'"/>
          <CommmonlyValues :visible="tabVisible === '2'"/>
          <UseInstr :visible="tabVisible === '3'"/>
          <Knowledge :visible="tabVisible === '4'"/>
          <Sort :visible="tabVisible === '5'"/>
          <CommonDescriptions :visible="tabVisible === '6'"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref,toRaw } from 'vue';
import Basic from './tab/basic.vue'
import CommmonlyValues from './tab/commmonlyValues.vue'
import UseInstr from './tab/useInstr.vue'
import Knowledge from './tab/knowledge.vue'
import CommonDescriptions from './tab/commonDescriptions.vue'
import Sort from './tab/sort.vue'
import { queryXmInfoNewService } from '@/api/liswork/labItem/LabItem';
//@ts-ignore
import { comDict } from '@/utils/dict'


interface DictData {
  XMGL?: Array<any>;
  [key: string]: any[] | undefined; // 添加索引签名以支持动态访问
}



const status = ref(1);
const isMIC = ref(false);
const dataList = ref([])
const tabVisible = ref('1')
const queryParams = ref()
//字典数据
const dictData = ref<DictData>({});


onMounted(async () => {
  // 初始化数据
   const dictRefs = await comDict('XMGL');
    // 从 ref 中获取实际数据
  dictData.value = {
    XMGL: toRaw(dictRefs.XMGL.value) || []
  };

  queryXmInfoNewService(queryParams.value).then((res: any) => {
    dataList.value = res.rows;
  })
  
})



// 引入公共组件的字典格式化方法
const formatDict = (v: string, dictType: string) => {
  console.log('传入的值v：', v);
  const dictArray = dictData.value[dictType];
  console.log('对应的字典数组dictArray：', dictArray);
  dictArray?.forEach(item => {
    console.log('数组元素value：', item.value, '类型：', typeof item.value);
  });
  const matchedItem = dictArray?.find((item: any) => item.value == v);
   console.log('匹配到的item：', matchedItem); // 关键：看是否为undefined
   const abc = matchedItem?.label; 
  console.log('字典数据abc', abc);
  return abc;
  
}

//新增
const handleAdd = () => {
  console.log('新增')
}

//删除
const handleDel = () => {
  console.log('删除')
}

//删除对应
const handleDelCorr = () => {
  console.log('删除对应')
}

//保存
const handleSave = () => {
  console.log('保存')
}

//标签切换
const handleTabClick = (tab: string) => {
  tabVisible.value = tab
}

</script>