292 lines
11 KiB
Vue
292 lines
11 KiB
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 }">
|
|
{{ formatDict(row.xmlb, 'XMLB') }}
|
|
</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" />
|
|
<KeepAlive>
|
|
<component :is="activeTabN" :dataList="tabDataList"></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 CommmonlyValues from './tab/CommmonlyValues.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: 'CommmonlyValues' },
|
|
{ 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,
|
|
CommmonlyValues,
|
|
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 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 = (row: any) => {
|
|
queryXmInfoNewDetailService(row.xmid,row.yq,row.xmdh).then((res: any) => {
|
|
switch(activeTab.value){
|
|
case 'Basic':
|
|
tabDataList.value = res.data.xmInfoNewRows[0];
|
|
break;
|
|
case 'CommmonlyValues':
|
|
tabDataList.value = res.data.xmValNewRows[0];
|
|
break;
|
|
case 'UseInstr':
|
|
tabDataList.value = res.data.xmInfoVsRows[0];
|
|
break;
|
|
case 'Knowledge':
|
|
//tabDataList.value = res.data.xmInfoVsRows[0];
|
|
case 'Sort':
|
|
|
|
case 'CommonDescriptions':
|
|
case 'ReferenceValueDetails':
|
|
|
|
}
|
|
console.log('明细数据:', res);
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="css">
|
|
.tabDiv {
|
|
height: 88vh;
|
|
overflow-y: auto;
|
|
}
|
|
</style> |