检验项目维护功能开发

2025-10-28 16:22:44 +08:00 · 2025-10-28 16:22:44 +08:00 · 4f77b2c60e
commit 4f77b2c60e
parent ff6f407079
10 changed files with 502 additions and 47 deletions
--- a/src/api/liswork/labItem/LabItem.ts
+++ b/src/api/liswork/labItem/LabItem.ts
@ -1,11 +1,25 @@
 // @ts-ignore
 import request from '@/utils/request'

-//检验项目，获取数据
+//检验项目界面
+//获取列表数据
 export function queryXmInfoNewService(query: any){
   return request({
      url: '/xminfo/query',
      method: 'get',
      params: query
    })
+}
+
+//获取明细数据
+export function queryXmInfoNewDetailService(xmid: any, yq: any, xmdh: any){
+   return request({
+      url: '/xminfo/queryDetail',
+      method: 'get',
+      params: {
+         xmid,
+         yq,
+         xmdh
+      }
+    })
 }
--- a/src/views/liswork/labItem/index.vue
+++ b/src/views/liswork/labItem/index.vue
@ -3,7 +3,7 @@
    <el-row :gutter="20">
      <el-col :span="14" :xs="24">
         <!--  表单区域-->
-        <el-form inline :model="queryParams" class="mb8">
+        <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="项目类别"
              @getDataValue="getList"/>
@ -49,32 +49,55 @@
        </el-row>
          <!--  表格区域-->
        <CustomTable ref="tableRef" :data="dataList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
-        :config="tableConfig">
+        :config="tableConfig" @row-click="rowChange">
          <template #xmgl ="{ row }">
            {{ formatDict(row.xmgl, 'XMGL') }}
          </template>
-           <template #xmlb ="{ row }">
+          <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">
-        <div class="flex gap-2 mt-4">
-          <el-check-tag :checked="tabCheck === '1'" type="primary" @click="handleTabClick('1')">基本资料</el-check-tag>
-          <el-check-tag :checked="tabCheck === '2'" type="primary" @click="handleTabClick('2')">常用取值</el-check-tag>
-          <el-check-tag :checked="tabCheck === '3'" type="primary" @click="handleTabClick('3')">使用仪器</el-check-tag>
-          <el-check-tag :checked="tabCheck === '4'" type="primary" @click="handleTabClick('4')">知识库</el-check-tag>
-          <el-check-tag :checked="tabCheck === '5'" type="primary" @click="handleTabClick('5')">整体排序</el-check-tag>
-          <el-check-tag :checked="tabCheck === '6'" type="primary" @click="handleTabClick('6')">常见描述</el-check-tag>
-        </div>
+        <tabView :tabList="tabList" v-model:activeTab="activeTab" />
        <div class="tabDiv">
-          <Basic :visible="tabVisible === '1'"/>
-          <CommmonlyValues :visible="tabVisible === '2'"/>
-          <UseInstr :visible="tabVisible === '3'"/>
-          <Knowledge :visible="tabVisible === '4'"/>
-          <Sort :visible="tabVisible === '5'"/>
-          <CommonDescriptions :visible="tabVisible === '6'"/>
+          <template v-if="activeTab === 1">
+            <Basic :visible="true"/>
+          </template>
+          <template v-if="activeTab === 2">
+            <CommmonlyValues :visible="true"/>
+          </template>
+          <template v-if="activeTab === 3">
+            <UseInstr :visible="true"/>
+          </template>
+          <template v-if="activeTab === 4">
+            <Knowledge :visible="true"/>
+          </template>
+          <template v-if="activeTab === 5">
+            <Sort :visible="true"/>
+          </template>
+          <template v-if="activeTab === 6">
+            <CommonDescriptions :visible="true"/>
+          </template>
+          <template v-if="activeTab === 7">
+            <Parameter :visible="true"/>
+          </template>
+          <template v-if="activeTab === 8">
+            <ChannelNumber :visible="true"/>
+          </template>
+          <template v-if="activeTab === 9">
+            <ReferenceValueDetails :visible="true"/>
+          </template>
        </div>
      </el-col>
    </el-row>
@ -90,11 +113,15 @@ 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 { queryXmInfoNewService } from '@/api/liswork/labItem/LabItem';
+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/LabItem';
 //@ts-ignore
 import { comDict } from '@/utils/dict'
 import SelectTable from '@/components/SelectTable/index.vue'
 import { getGroupInstrdList } from '@/api/liswork/work/LisWork';
+import tabView from '@/components/tabViews/index.vue';


 interface DictData {
@ -127,7 +154,6 @@ const queryParams = ref({
 //字典数据
 const dictData = ref<DictData>({});
 const tableRef = ref()
-const tabCheck = ref('1');
 const xmglFields = ref([
  { prop: 'value', label: '代号', width: 80, enablePinyinSearch: true },
  { prop: 'label', label: '名称', enablePinyinSearch: true },
@ -137,6 +163,18 @@ const itemclassFields = ref([
  { prop: 'label', label: '名称', enablePinyinSearch: true },
 ])
 const instrOptions = ref<{ yq: string; yqmc: string }[]>([])
+const tabList = ref([
+  { label: '基本资料', value: 1 },
+  { label: '常用取值', value: 2 },
+  { label: '使用仪器', value: 3 },
+  { label: '知识库', value: 4 },
+  { label: '整体排序', value: 5 },
+  { label: '常见描述', value: 6 },
+  { label: '参数', value: 7 },
+  { label: '通道号', value: 8 },
+  { label: '参考值明细', value: 9 },
+]);
+const activeTab = ref(1)

 //table表格列
 const columns = ref([
@ -146,13 +184,13 @@ const columns = ref([
  { 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',  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',  width: 100 },
-  { prop: 'yqdl', 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 },
@ -180,11 +218,6 @@ const yqdlFields = ref([
 ])
 const yqdlList = ref<Array<any>>()

-// 仪器选择变化
-const yqHandleChange = (val: any) => {
-  queryParams.value.yq = val;
-}
-
 // 仪器
 const getYqConfig = () => {
  getGroupInstrdList()
@ -245,13 +278,6 @@ const handleDelCorr = () => {
 const handleSave = () => {
  console.log('保存')
 }
-
-//标签切换
-const handleTabClick = (tab: string) => {
-  tabCheck.value = tab;
-  tabVisible.value = tab
-}
-
 //退拽属性
 const handleColumnDragEnd = (data: any) => {
  // 更新列配置
@ -266,6 +292,13 @@ const changeStauts = () => {
 getList();
 }

+// 选择行变化
+const rowChange = (row: any) => {
+  queryXmInfoNewDetailService(row.xmid,row.yq,row.xmdh).then((res: any) => {
+    console.log('明细数据:', res);
+  })
+}
+
 </script>

 <style lang="css">
--- a/src/views/liswork/labItem/tab/channelNumber.vue
+++ b/src/views/liswork/labItem/tab/channelNumber.vue
@ -0,0 +1,49 @@
+<!--通道号-->
+<template>
+<div v-show="visible">
+  <el-row>
+      <span>说明：“通道号”又称“接口代号”，是指仪器向电脑传送结果时项目的标识符,接口代号对于一个仪器不可重复。</span>
+    </el-row>
+  <div class="modifyClass">
+    <el-button type="primary" @click="">增加</el-button>
+    <el-button type="primary" @click="">删除</el-button>
+  </div>
+  <CustomTable ref="tableRef" :data="dataList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd"
+        :config="tableConfig"/>
+</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import CustomTable from '@/components/elTable/index.vue'
+
+const props = defineProps({
+  // 是否显示
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false
+  }
+});
+
+const tableRef = ref<any>(null);
+const dataList = ref();
+const columns = ref([
+  { prop: 'tdh', label: '通道号', visible: true, align: 'center', width: 100 },
+  { prop: 'yq', label: '仪器', visible: true, align: 'center', width: 200 },
+  { prop: 'xmdh', label: '英文缩写', visible: true, align: 'center', width: 200 }
+]);
+const tableConfig = ref({
+  border: true, // 边框
+  height: '76vh', // 高度
+  highlightCurrentRow: true, // 高亮当前行
+  // cellStyle: cellStyleHd
+})
+
+
+//退拽属性
+const handleColumnDragEnd = (data: any) => {
+  // 更新列配置
+  columns.value = data.columns;
+}
+</script>
--- a/src/views/liswork/labItem/tab/commmonlyValues.vue
+++ b/src/views/liswork/labItem/tab/commmonlyValues.vue
@ -1,17 +1,49 @@
 <!-- 常用取值 -->
 <template>
-<div v-show="visible">常用取值内容</div>
+<div v-show="visible">
+  <div class="modifyClass">
+    <el-button type="primary" @click="">增加</el-button>
+    <el-button type="primary" @click="">删除</el-button>
+  </div>
+  <CustomTable ref="tableRef" :data="dataList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
+        :config="tableConfig"/>
+</div>
 </template>

 <script setup lang="ts">
-
+import CustomTable from '@/components/elTable/index.vue'
+import { ref } from 'vue';

 const props = defineProps({
-  // 定义一个名为 'exampleProp' 的字符串类型的 prop
+  // 是否显示
  visible: {
    type: Boolean,
    required: true,
    default: false
  }
 });
+
+const tableRef = ref<any>(null);
+const dataList = ref();
+const columns = ref([
+  { prop: 'qz', label: '取值', visible: true, align: 'center', width: 200 },
+  { prop: 'srm', label: '快速输入码', visible: true, align: 'center', width: 100 },
+  { prop: 'jgbz', label: '结果标志', visible: true, align: 'center', width: 100 }
+]);
+const tableConfig = ref({
+  border: true, // 边框
+  height: '80vh', // 高度
+  highlightCurrentRow: true, // 高亮当前行
+  // cellStyle: cellStyleHd
+})
+
+
+//退拽属性
+const handleColumnDragEnd = (data: any) => {
+  // 更新列配置
+  columns.value = data.columns;
+}
+
+
+
 </script>
--- a/src/views/liswork/labItem/tab/commonDescriptions.vue
+++ b/src/views/liswork/labItem/tab/commonDescriptions.vue
@ -1,18 +1,46 @@
 <template>
 <!-- 常见描述 -->
- <div v-show="visible">常见描述内容</div>
+ <div v-show="visible">
+  <div class="modifyClass">
+    <el-button type="primary" @click="">增加</el-button>
+    <el-button type="primary" @click="">删除</el-button>
+  </div>
+  <CustomTable ref="tableRef" :data="dataList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
+        :config="tableConfig"/>
+  </div>
 </template>


 <script setup lang="ts">
+import CustomTable from '@/components/elTable/index.vue'
+import { ref } from 'vue';


 const props = defineProps({
-  // 定义一个名为 'exampleProp' 的字符串类型的 prop
+  // 是否显示
  visible: {
    type: Boolean,
    required: true,
    default: false
  }
 });
+
+const tableRef = ref<any>(null);
+const dataList = ref();
+const columns = ref([
+  { prop: 'textresult', label: '文字描述', visible: true, align: 'center', width: 500 },
+]);
+const tableConfig = ref({
+  border: true, // 边框
+  height: '80vh', // 高度
+  highlightCurrentRow: true, // 高亮当前行
+  // cellStyle: cellStyleHd
+})
+
+
+//退拽属性
+const handleColumnDragEnd = (data: any) => {
+  // 更新列配置
+  columns.value = data.columns;
+}
 </script>
--- a/src/views/liswork/labItem/tab/knowledge.vue
+++ b/src/views/liswork/labItem/tab/knowledge.vue
@ -1,18 +1,46 @@
 <template>
 <!-- 知识库 -->
- <div v-show="visible">知识库内容</div>
+ <div v-show="visible">
+    <CustomTable ref="tableRef" :data="dataList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
+        :config="tableConfig"/>
+ </div>
 </template>


 <script setup lang="ts">
+import CustomTable from '@/components/elTable/index.vue'
 import { ref } from 'vue';

 const props = defineProps({
-  // 定义一个名为 'exampleProp' 的字符串类型的 prop
+  // 是否显示
  visible: {
    type: Boolean,
    required: true,
    default: false
  }
 });
+
+
+const tableRef = ref<any>(null);
+const dataList = ref();
+const columns = ref([
+  { prop: 'reserve', label: '类别', visible: true, align: 'center', width: 200 },
+  { prop: 'textresult', label: '描述', visible: true, align: 'center', width: 100 },
+  { prop: 'yxjs', label: '医学解释', visible: true, align: 'center', width: 100 },
+  { prop: 'cjyy', label: '常见原因,', visible: true, align: 'center', width: 100 },
+  { prop: 'zd', label: '指导,', visible: true, align: 'center', width: 100 },
+]);
+const tableConfig = ref({
+  border: true, // 边框
+  height: '87vh', // 高度
+  highlightCurrentRow: true, // 高亮当前行
+  // cellStyle: cellStyleHd
+})
+
+
+//退拽属性
+const handleColumnDragEnd = (data: any) => {
+  // 更新列配置
+  columns.value = data.columns;
+}
 </script>
--- a/src/views/liswork/labItem/tab/parameter.vue
+++ b/src/views/liswork/labItem/tab/parameter.vue
@ -0,0 +1,141 @@
+<template>
+<!-- 参数设置 -->
+ <div v-show="visible">
+  <el-form ref="form" :model="formData" :rules="rules" label-width="80px" size="small" class="form-inline" inline>
+    <el-row>
+      <span>说明：公式中阴阳对照请用NC,PC表示</span>
+    </el-row>
+    <el-form-item label="测试波长" prop="csbc">
+      <el-input placeholder="测试波长" v-model="formData.csbc"></el-input>
+    </el-form-item>
+    <el-form-item label="参考波长" prop="ckbc">
+      <el-input placeholder="参考波长" v-model="formData.ckbc"></el-input>
+      <el-button type="primary" @click="">滤光片波长对照表...</el-button>
+    </el-form-item>
+    <el-form-item label="阳性判断公式" prop="yxgs" label-width="100px">
+      <el-input placeholder="阳性判断公式" v-model="formData.yxgs" style="width: 400px;"></el-input>
+    </el-form-item>
+    <el-form-item label="上灰区" prop="shq">
+      <el-input placeholder="上灰区" v-model="formData.shq"></el-input>%
+    </el-form-item>
+    <el-form-item label="下灰区" prop="xhq">
+      <el-input placeholder="下灰区" v-model="formData.xhq"></el-input>%
+    </el-form-item>
+    <el-form-item label="阴性对照下限" prop="negxx" label-width="100px">
+      <el-input placeholder="阴性对照下限" v-model="formData.negxx" style="width: 100px;"></el-input>
+    </el-form-item>
+    <el-form-item label="阳性对照下限" prop="posxx" label-width="100px">
+      <el-input placeholder="阳性对照下限" v-model="formData.posxx"></el-input>
+    </el-form-item>
+    <el-form-item label="阴性对照上限" prop="negsx" label-width="100px">
+      <el-input placeholder="阴性对照上限" v-model="formData.negsx" style="width: 100px;"></el-input>
+    </el-form-item>
+    <el-form-item label="阳性对照上限" prop="possx" label-width="100px">
+      <el-input placeholder="阳性对照上限" v-model="formData.possx"></el-input>
+    </el-form-item>
+
+    <el-divider></el-divider>
+    <el-form-item label="项目性质" prop="xmxz">
+      <el-radio-group v-model="formData.xmxz">
+        <el-radio value="1">定性</el-radio>
+        <el-radio value="2">定量</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="移动模式" prop="ydfs">
+      <el-radio-group v-model="formData.ydfs">
+        <el-radio value="1">连续</el-radio>
+        <el-radio value="2">步进</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="测试模式" prop="csms">
+      <el-radio-group v-model="formData.csms">
+        <el-radio value="1">终点法</el-radio>
+        <el-radio value="2">两点法</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="振板频率" prop="zbpl">
+      <el-radio-group v-model="formData.zbpl">
+        <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 label="空白形式" prop="kbms">
+      <el-radio-group v-model="formData.kbms">
+        <el-radio value="1">空气</el-radio>
+        <el-radio value="2">试剂</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="振板时间" prop="zbsj">
+      <el-input placeholder="振板时间" v-model="formData.zbsj"></el-input>秒
+    </el-form-item>
+
+    <el-divider></el-divider>
+    <el-form-item label="默认模板" prop="mrmb">
+      <el-input placeholder="默认模板" v-model="formData.mrmb"></el-input>
+    </el-form-item>
+    <el-form-item label="默认试剂" prop="mrsjph">
+      <el-input placeholder="默认试剂" v-model="formData.mrsjph"></el-input>
+      <el-button type="primary" @click="">试剂维护</el-button>
+    </el-form-item>
+
+  </el-form>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const formData = ref({
+  csbc: '',
+  ckbc: '',
+  yxgs: '',
+  shq: '',
+  xhq: '',
+  negxx: '',
+  posxx: '',
+  negsx: '',
+  possx: '',
+  xmxz: '',
+  ydfs: '',
+  csms: '',
+  zbpl: '',
+  kbms: '',
+  zbsj: '',
+  mrmb: '',
+  mrsjph: ''
+});
+
+const rules = ref({
+  // name: [
+  //   { required: true, message: '请输入姓名', trigger: 'blur' }
+  // ],
+  // sex: [
+  //   { required: true, message: '请选择性别', trigger: 'change' }
+  // ]
+});
+
+const props = defineProps({
+  // 是否显示
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.form-inline {
+  padding: 10px;
+  background-color: #f5f7fa;
+  height: auto;
+  .el-input {
+    width: 150px;
+  }
+  .el-form-item {
+    margin-right: 10px;
+    margin-bottom: 2px;
+  }
+}
+</style>
--- a/src/views/liswork/labItem/tab/referenceValueDetails.vue
+++ b/src/views/liswork/labItem/tab/referenceValueDetails.vue
@ -0,0 +1,70 @@
+<template>
+<!--参考值明细-->
+<div v-show="visible">
+  <div class="modifyClass">
+    <el-button type="primary" @click="">增加</el-button>
+    <el-button type="primary" @click="">删除</el-button>
+  </div>
+  <CustomTable ref="tableRef" :data="dataList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
+        :config="tableConfig"/> 
+  <el-row>
+    仪器特定参考值:
+  </el-row>
+  <div class="modifyClass">
+    <el-button type="primary" @click="">增加</el-button>
+    <el-button type="primary" @click="">删除</el-button>
+  </div>
+   <CustomTable ref="tableRef" :data="dataList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
+        :config="tableConfig"/>
+</div>
+</template>
+
+<script setup lang="ts">
+import CustomTable from '@/components/elTable/index.vue'
+import { ref } from 'vue';
+
+const props = defineProps({
+  // 是否显示
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false
+  }
+});
+
+
+
+const tableRef = ref<any>(null);
+const dataList = ref();
+const yqDataList = ref();
+const columns = ref([
+  { prop: 'xb', label: '性别', visible: true, align: 'center', width: 200 },
+  { prop: 'cp_nl1', label: '年龄下限', visible: true, align: 'center', width: 100 },
+  { prop: 'cp_nldw1', label: '年龄单位', visible: true, align: 'center', width: 100 },
+  { prop: 'cp_nl2', label: '年龄上限', visible: true, align: 'center', width: 100 },
+  { prop: 'cp_nldw2', label: '年龄单位', visible: true, align: 'center', width: 100 },
+  { prop: 'bblx', label: '标本类型', visible: true, align: 'center', width: 100 },
+  { prop: 'slzq', label: '生理周期', visible: true, align: 'center', width: 100 },
+  { prop: 'zd', label: '诊断', visible: true, align: 'center', width: 100 },
+  { prop: 'ckxx', label: '参考下限', visible: true, align: 'center', width: 100 },
+  { prop: 'cksx', label: '参考上限', visible: true, align: 'center', width: 100 },
+  { prop: 'alterxx', label: '危急值下限', visible: true, align: 'center', width: 100 },
+  { prop: 'altersx', label: '危急值上限', visible: true, align: 'center', width: 100 },
+  { prop: 'dyck', label: '参考值', visible: true, align: 'center', width: 100 },
+]);
+const tableConfig = ref({
+  border: true, // 边框
+  height: '35vh', // 高度
+  highlightCurrentRow: true, // 高亮当前行
+  // cellStyle: cellStyleHd
+})
+
+
+//退拽属性
+const handleColumnDragEnd = (data: any) => {
+  // 更新列配置
+  columns.value = data.columns;
+}
+
+
+</script>
--- a/src/views/liswork/labItem/tab/sort.vue
+++ b/src/views/liswork/labItem/tab/sort.vue
@ -1,18 +1,53 @@
 <template>
 <!-- 整体排序 -->
- <div v-show="visible">整体排序内容</div>
+ <div v-show="visible">
+  <div class="modifyClass">
+    <el-button type="primary" @click="">首位</el-button>
+    <el-button type="primary" @click="">↑上移</el-button>
+    <el-button type="primary" @click="">↓下移</el-button>
+    <el-button type="primary" @click="">末位</el-button>
+  </div>
+  <CustomTable ref="tableRef" :data="dataList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
+        :config="tableConfig"/>
+  </div>
 </template>


 <script setup lang="ts">
+import CustomTable from '@/components/elTable/index.vue'
 import { ref } from 'vue';

 const props = defineProps({
-  // 定义一个名为 'exampleProp' 的布尔类型的 prop
+  // 是否显示
  visible: {
    type: Boolean,
    required: true,
    default: false
  }
 });
+
+
+const tableRef = ref<any>(null);
+const dataList = ref();
+const columns = ref([
+  { prop: 'xmgl', label: '项目类别', visible: true, align: 'center', width: 200 },
+  { prop: 'xmid', label: '项目ID', visible: true, align: 'center', width: 100 },
+  { prop: 'xmdh', label: '英文缩写', visible: true, align: 'center', width: 100 },
+  { prop: 'xmmc', label: '项目名称,', visible: true, align: 'center', width: 100 },
+  { prop: 'dyxh', label: '整体排序,', visible: true, align: 'center', width: 100 },
+  { prop: 'fzdyxh', label: '分组打印序号,', visible: true, align: 'center', width: 100 },
+]);
+const tableConfig = ref({
+  border: true, // 边框
+  height: '80vh', // 高度
+  highlightCurrentRow: true, // 高亮当前行
+  // cellStyle: cellStyleHd
+})
+
+
+//退拽属性
+const handleColumnDragEnd = (data: any) => {
+  // 更新列配置
+  columns.value = data.columns;
+}
 </script>
--- a/src/views/liswork/labItem/tab/useInstr.vue
+++ b/src/views/liswork/labItem/tab/useInstr.vue
@ -1,18 +1,43 @@
 <template>
 <!-- 使用仪器 -->
- <div v-show="visible">使用仪器内容</div>
+<div v-show="visible">
+  <CustomTable ref="tableRef" :data="dataList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd"
+        :config="tableConfig"/>
+</div>
 </template>


 <script setup lang="ts">
-
+import CustomTable from '@/components/elTable/index.vue'
+import { ref } from 'vue';

 const props = defineProps({
-  // 定义一个名为 'exampleProp' 的字符串类型的 prop
+  // 是否显示
  visible: {
    type: Boolean,
    required: true,
    default: false
  }
 });
+
+const tableRef = ref<any>(null);
+const dataList = ref();
+const columns = ref([
+  { prop: 'yq', label: '仪器', visible: true, align: 'center', width: 200 },
+  { prop: 'xs', label: '调整系数', visible: true, align: 'center', width: 100 },
+  { prop: 'zkxm', label: '质控', visible: true, align: 'center', width: 100 }
+]);
+const tableConfig = ref({
+  border: true, // 边框
+  height: '85vh', // 高度
+  highlightCurrentRow: true, // 高亮当前行
+  // cellStyle: cellStyleHd
+})
+
+
+//退拽属性
+const handleColumnDragEnd = (data: any) => {
+  // 更新列配置
+  columns.value = data.columns;
+}
 </script>