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

<template>
<div class="topForm">
  <el-form ref="formRef" :model="formData" inline label-width="80px" class="mb8" @submit.prevent="handleSubmit">
    <el-form-item label="检索" prop="js">
      <el-input placeholder="项目代号，名称，简拼" v-model="formData.js" style="width: 200px;" @keyup.enter="getList"></el-input>
    </el-form-item>
  </el-form>
</div>
<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">
    <TableRight :data-list="dataListRight"/>
  </el-col>
</el-row>

<Modify v-model="modifyVisible" :title="modifyTitle"/>
</template>

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

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 tableConfig = ref({
  border: true, // 边框
  height: '85vh', // 高度
  highlightCurrentRow: true, // 高亮当前行
  // cellStyle: cellStyleHd
})

const modifyVisible = ref(false)
const modifyTitle = ref('')


//退拽属性
const handleColumnDragEnd = (data: any) => {
  // 更新列配置
  columnsLeft.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 formData = ref({
  js: ''
})

const handleSubmit = (event: any) => {
  event.preventDefault();
}

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

const onDBClick = ()=>{

}

const onAddClick = ()=> {
  modifyVisible.value = true
  modifyTitle.value = '新增'
}

const onDelClick = () => {

}

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

const getList = async () => {
  const data = {pageSize: pagination.value.pageSize, pageNum: pagination.value.currentPage,inputData: formData.value.js }
  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;
}

.topForm {
  margin-top: 10px;
}
</style>