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

<template>
<el-row>
  <el-button type="primary" @click="onQueryClick">查询</el-button>
  <el-button type="primary" @click="onAddClick">新增</el-button>
  <el-button type="primary" @click="onDelClick">删除</el-button>
</el-row>
<el-row>
  <el-col :span="17">
    <CustomTable ref="tableRefLeft" :data="dataListLeft" :columns="columnsLeft" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd"
          :config="tableConfig" @row-dblclick="onDBClick" @row-click="onClick" :pagination="pagination" @size-change="sizeChange" @page-change="currentChange">
      <template #xsbz="{row}">
        <el-checkbox :model-value="row.xsbz === '1'"/>   
      </template>
    </CustomTable>
  </el-col>
  <el-col :span="7">
    <CustomTable ref="tableRefRight" :data="dataListRight" :columns="columnsRight" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd"
          :config="tableConfig">
    </CustomTable>
  </el-col>
</el-row>
</template>

<script setup lang="ts">
import CustomTable from '@/components/elTable/index.vue'
import {queryService,queryDetailService} from '@/api/liswork/xmKnowledge/xmKnowledgeApi'

const dataListLeft = ref([]);
const dataListRight = ref([]);
const columnsLeft = ref([
  { 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: 200 },
  { prop: 'xsbz', label: '显示标志', visible: true, align: 'center', slot: 'xsbz', width: 100 },
  { prop: 'xmlb', label: '类别', visible: true, align: 'center', width: 100 },
  { prop: 'xmz', label: '所属组', visible: true, align: 'center', width: 100 },
  { prop: 'dw', label: '单位', visible: true, align: 'center', width: 100 },
  { prop: 'cksx', label: '参考上限', visible: true, align: 'center', width: 100 },
  { prop: 'ckxx', label: '参考下限', visible: true, align: 'center', width: 100 },
  { prop: 'dyckz', label: '打印参考值', visible: true, align: 'center', width: 100 },
  { prop: 'dyxh', label: '打印序号', visible: true, align: 'center', width: 100 },
  { prop: 'jsgs', label: '计算公式', visible: true, align: 'center', width: 100 },
  { prop: 'lcyy', label: '临床意义', visible: true, align: 'center', width: 100 },
  { prop: 'zjf', label: '助记符', visible: true, align: 'center', width: 100 },
  { prop: 'bz', label: '备注', visible: true, align: 'center', width: 100 },
]);
const columnsRight = ref([
  { prop: 'reserve', label: '类别', visible: true, align: 'center', width: 50 },
  { prop: 'textresult', label: '说明', visible: true, align: 'center', width: 200 },
  { prop: 'zd', label: '指导建议', visible: true, align: 'center', width: 100 },
])
const tableConfig = ref({
  border: true, // 边框
  height: '85vh', // 高度
  highlightCurrentRow: true, // 高亮当前行
  // cellStyle: cellStyleHd
})

//退拽属性
const handleColumnDragEnd = (data: any) => {
  // 更新列配置
  columnsLeft.value = data.columns;
  columnsRight.value = data.columns;
}

const pagination = ref({
  show: true,
  total: 0,
  pageSize: 20,
  currentPage: 1,
})

const currentChange = (page: { currentPage: number, pageSize: number }) => {
  //queryParams.value.pageNum = page.currentPage
  pagination.value.currentPage = page.currentPage
  getList()
}
const sizeChange = (page: { currentPage: number, pageSize: number }) => {
  //queryParams.value.pageSize = page.pageSize
  pagination.value.pageSize = page.pageSize
  getList()
}

const onClick = async (row:any) => {
  const res = await queryDetailService(row.xmdh);
  dataListRight.value = res.data
}

const onDBClick = ()=>{

}

const onAddClick = ()=> {

}

const onDelClick = () => {

}

const onQueryClick = () => {
  getList()
}

const getList = async () => {
  const data = {pageSize: pagination.value.pageSize, pageNum: pagination.value.currentPage }
  const res = await queryService(data);
  dataListLeft.value = res.rows
  pagination.value.total = res.total

  dataListRight.value = []
  
}


onMounted(()=>{
  getList()
})

</script>

<style scoped lang="scss">
.el-row {
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>