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

<template>
  <div class="app-container">
    <div class="topForm">
      <el-form ref="formRef" :model="formData" inline label-width="80px" @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-item>
          <el-button type="primary" @click="onQueryClick">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-button type="primary" @click="onAddClick">新增</el-button>
      <el-button type="danger" @click="onDelClick">删除</el-button>
    </el-row>
    <el-row :gutter="20" class="table-row">
      <el-col :span="17" class="table-col">
        <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" class="table-col">
        <TableRight :data-list="dataListRight" />
      </el-col>
    </el-row>

    <Modify ref="modifyRef" v-model="modifyVisible" :title="modifyTitle" :type="modifyType"
      @close-with-return="closeWithReturn" />
  </div>

</template>

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

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: '100%', // 高度
  highlightCurrentRow: true, // 高亮当前行
  // cellStyle: cellStyleHd
})

const modifyVisible = ref(false)
const modifyTitle = ref('')
const modifyType = ref('')
const modifyRef = ref()
const selectRow: any = ref(null)

//退拽属性
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 closeWithReturn = () => {
  getList()
}

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

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

const onDBClick = (info) => {


}

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

}

const onDelClick = () => {
  if (!selectRow.value) return ElMessage.warning('请先选择要删除的数据！')
  ElMessageBox.confirm('是否要删除选中的数据?', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', }).then(() => {
    delService(selectRow.value.xmid).then((res) => {
      if (res.code == 0) {
        ElMessage.success('删除成功！')
        getList()
        selectRow.value = null
      }
    })
  })
}

const onQueryClick = () => {
  pagination.value.currentPage = 1
  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">
.table-row {
  height: calc(100% - 150px);
  margin-top: 10px;

  .table-col {
    height: 100%;
  }
}
</style>