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 :model="queryParams" class="mb8" size="small">
           <el-form-item label="项目类别">
              <SelectTable v-model:data="queryParams.xmgl" :fields="xmglFields" :tableData="dictData.XMGL" label="label" value="value" objKey="value"  width="140px" placeholder="项目类别"
              size="small" 
              @getDataValue="getList"/>
           </el-form-item>
          <el-form-item label="细菌标志">
              <SelectTable v-model:data="queryParams.itemclass" :fields="itemclassFields" :tableData="dictData.ITEMCLASS" label="label" value="value" objKey="value"  width="140px" placeholder="细菌标志"
              size="small" 
              @getDataValue="getList"/>
          </el-form-item>
          <el-form-item label="仪器代号">
              <SelectTable v-model:data="queryParams.yq" :fields="yqFields" :tableData="instrOptions" label="yqmc" value="yq" objKey="yq" :border="true" width="140px" placeholder="请选择仪器"
              size="small" 
              @getDataValue="getList"/>
          </el-form-item>
          <el-form-item label="快速查找">
              <el-input clearable placeholder="快速查找" v-model="queryParams.inputcode" prefix-icon="Search" style="width: 150px"
              @change="getList"/>
          </el-form-item>
          <el-form-item label="仪器大类">
            <SelectTable v-model:data="queryParams.yqdl" :fields="yqdlFields" :tableData="dictData.YQDL" label="label" value="value" objKey="value" :border="true" width="140px" placeholder="仪器大类"
            size="small" 
              @getDataValue="getList"/>
          </el-form-item>
          <el-form-item label="项目ID">
            <el-input clearable placeholder="项目ID" prefix-icon="Search" v-model="queryParams.xmid" style="width: 150px"
            @change="getList"/>
          </el-form-item>
          <el-form-item>
            <el-radio-group v-model="queryParams.uflag" fill="primary" size="large" @change="changeStauts">
              <el-radio value="0">在用</el-radio>
              <el-radio value="1">停用</el-radio>
              <el-radio value="">所有</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
           <el-checkbox v-model="queryParams.isMIC" label="隐藏微生物项目" size="large" @change="getList" />
          </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>
          <!--  表格区域-->
        <CustomTable ref="tableRef" :data="dataList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
        :config="tableConfig" @row-click="rowChange">
          <template #xmgl ="{ row }">
            {{ formatDict(row.xmgl, 'XMGL') }}
          </template>
          <template #xmlb ="{ row }">
            {{ xmlbList.find(item => item.value === row.xmlb).label }}
          </template>
          <template #jsxm ="{ row }">
            {{ row.jsxm === 'Y' ? '是' : '否' }}
          </template>
          <template #uflag ="{ row }">
            {{ row.uflag === '0' ? '否' : '是' }}
          </template>
          <template #yqdl ="{ row }">
            {{ formatDict(row.yqdl, 'YQDL')}}
          </template>
        </CustomTable>
      </el-col>
      <!--  右侧区域-->
      <el-col :span="10" :xs="24">
        <tabView :tabList="tabList" v-model:activeTab="activeTab" @update:active-tab="updateActive" />
        <KeepAlive>
          <component class="tabDiv" :is="activeTabN" :dataList="tabDataList" :formData="selectRow"></component>
        </KeepAlive>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRaw, computed } from 'vue';
import Basic from './tab/base/Basic.vue'
import CommonlyValues from '@/views/liswork/labItem/tab/CommonlyValues.vue'
import UseInstr from './tab/UseInstr.vue'
import Knowledge from './tab/Knowledge.vue'
import CommonDescriptions from './tab/CommonDescriptions.vue'
import CustomTable from '@/components/elTable/index.vue'
import Sort from './tab/Sort.vue'
import Parameter from './tab/Parameter.vue';
import ChannelNumber from './tab/ChannelNumber.vue';
import ReferenceValueDetails from './tab/ReferenceValueDetails.vue';
import { queryXmInfoNewService,queryXmInfoNewDetailService } from '@/api/liswork/labItem/labItemApi';
import SelectTable from '@/components/SelectTable/index.vue'
import { getGroupInstrdList } from '@/api/liswork/work/LisWork';
import tabView from '@/components/tabViews/index.vue';
import { LabInstr,XmInfoNew } from '@/types';
import { formatDict,getDictData,dictData } from '@/hooks';

const xmlbList = ref<Array<any>>([
  { label: '数值型', value: '1' },
  { label: '文字型', value: '2' },
  { label: '阴阳性型', value: '3' },
  { label: '数值文字混合型', value: '4' }
])
const dataList = ref<Array<any>>([])
const queryParams = ref({
  xmgl: '', //项目归类
  itemclass: '' , //细菌标志
  yq: '', //仪器代号
  inputcode: '', //快速查找
  yqdl: '', //仪器大类
  xmid: '' , //项目ID
  uflag: '0' , //状态
  isMIC: false || null //是否隐藏微生物项目
})
//字典数据
const tableRef = ref()
const xmglFields = ref([
  { prop: 'value', label: '代号', width: 80, enablePinyinSearch: true },
  { prop: 'label', label: '名称', enablePinyinSearch: true },
])
const itemclassFields = ref([
  { prop: 'value', label: '代号', width: 80, enablePinyinSearch: true },
  { prop: 'label', label: '名称', enablePinyinSearch: true },
])
const instrOptions = ref<LabInstr[]>([])
const tabList = ref([
  { label: '基本资料', value: 'Basic' },
  { label: '常用取值', value: 'CommonlyValues' },
  { label: '使用仪器', value: 'UseInstr' },
  { label: '知识库', value: 'Knowledge' },
  //{ label: '整体排序', value: 'Sort' },
  { label: '常见描述', value: 'CommonDescriptions' },
  // { label: '参数', value: 7 },
  // { label: '通道号', value: 8 },
  { label: '参考值明细', value: 'ReferenceValueDetails' },
]);
const activeTab = ref('Basic')
const activeTabMap = {
  Basic,
  CommonlyValues,
  UseInstr,
  Knowledge,
  Sort,
  CommonDescriptions,
  ReferenceValueDetails
}

const activeTabN = computed(() => activeTabMap[activeTab.value as keyof typeof activeTabMap] || Basic);

//table表格列
const columns = ref([
  { prop: 'xmgl', label: '项目归类', visible: true, align: 'center', slot: 'xmgl', width: 100 },
  { prop: 'xmdh', label: '英文缩写', visible: true, align: 'center'},
  { prop: 'xmmc', label: '名称', visible: true, align: 'center',  width: 200 },
  { prop: 'dyckz', label: '参考值', visible: true, align: 'center',  width: 100 },
  { prop: 'dw', label: '单位', visible: true, align: 'center',  width: 100 },
  { prop: 'xmlb', label: '结果类型', visible: true, align: 'center', slot: 'xmlb',  width: 100 },
  { prop: 'jsxm', label: '计算项目', visible: true, align: 'center', slot: 'jsxm',  width: 100 },
  { prop: 'dyxh', label: '序号', visible: true, align: 'center',  width: 100 },
  { prop: 'xs', label: '调整系数', visible: true, align: 'center',  width: 100 },
  { prop: 'xsws', label: '小数位数', visible: true, align: 'center',  width: 100 },
  { prop: 'xsbs', label: '稀释倍数', visible: true, align: 'center', width: 100 },
  { prop: 'uflag', label: '停用', visible: true, align: 'center', slot: 'uflag',  width: 100 },
  { prop: 'yqdl', label: '仪器大类', visible: true, align: 'center', slot: 'yqdl', width: 100 },
  { prop: 'xmid', label: '项目ID', visible: true, align: 'center', width: 100 },
  { prop: 'knowledge', label: '知识库编码', visible: true, align: 'center', width: 100 },
  { prop: 'val1', label: '外部代码1', visible: true, align: 'center',  width: 100 },
  { prop: 'val2', label: '外部代码2', visible: true, align: 'center',  width: 100 },
  { prop: 'val3', label: '外部代码3', visible: true, align: 'center',  width: 100 },
  { prop: 'yymc', label: '英文名称', visible: true, align: 'center',  width: 100 },
  { prop: 'qccv', label: '允许CA(%)', visible: true, align: 'center', width: 100 },
])

const tableConfig = ref({
  border: true, // 边框
  height: '66vh', // 高度
  highlightCurrentRow: true, // 高亮当前行
  // cellStyle: cellStyleHd
})
//仪器
const yqFields = ref([
  { prop: 'yq', label: '代号', width: 80, enablePinyinSearch: true },
  { prop: 'yqmc', label: '名称', width: 150, enablePinyinSearch: true },
])
//仪器大类
const yqdlFields = ref([
  { prop: 'value', label: '代号', width: 80, enablePinyinSearch: true },
  { prop: 'label', label: '名称', width: 150, enablePinyinSearch: true },
])

//tab页数据
const tabDataList = ref<any>([]);
//选中行数据
const selectRow = ref();
//明细数据
const selectDetailRow = ref()

// 仪器
const getYqConfig = () => {
  getGroupInstrdList()
    .then((res: any) => {
      if (res.code == 0) {
        instrOptions.value = res.data.map((item: any) => ({
          yq: item.yq.trim(),
          yqmc: item.yqmc
        }))
      }
    })
}

//获取表格数据
const getList = () => {
  queryXmInfoNewService(queryParams.value).then((res: any) => {
    dataList.value = res.data;
  })
}

onMounted(async () => {
  getDictData('XMGL','ITEMCLASS', 'YQDL');
  getList()
  getYqConfig();
})


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

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

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

//保存
const handleSave = () => {
  console.log('保存')
}
//退拽属性
const handleColumnDragEnd = (data: any) => {
  // 更新列配置
  columns.value = data.columns;
}

//状态改变
const changeStauts = () => {
  if(!queryParams.value.isMIC){
    queryParams.value.isMIC = null;
  }
 getList();
}

// 选择行变化
const rowChange = async (row: any) => {
  selectRow.value = row;
  const res = await queryXmInfoNewDetailService(row.xmid,row.yq,row.xmdh)
  selectDetailRow.value = res.data
  console.log('明细数据:', res);
  changeActiveTab()
}

//tab变化
const updateActive = () => {
    changeActiveTab()
}


const changeActiveTab = () => {
   switch(activeTab.value){
    case 'Basic':
      tabDataList.value = selectDetailRow.value.xmInfoNewRows[0] || [];
      break;
    case 'CommonlyValues':
      tabDataList.value = selectDetailRow.value.xmValNewRows[0] || [];
      break;
    case 'UseInstr':
      tabDataList.value = selectDetailRow.value.xmInfoVsRows[0] || [];
      break;
    case 'Knowledge':
      //tabDataList.value = res.data.xmInfoVsRows[0];
    case 'Sort':
    case 'CommonDescriptions':
      tabDataList.value = selectDetailRow.value.xmTextresultNewRows[0] || [];
      break;
    case 'ReferenceValueDetails':
      tabDataList.value = selectDetailRow.value.xmRefNewRows[0] || [];
      break;
  }
}

</script>

<style lang="css">
.tabDiv {
  height: 88vh;
  overflow-y: auto;
}
</style>