rax-medical/src/views/patients-manage/patients-manage.vue

<template>
  <div class="table-page">
    <div class="search-part" v-show="isSearch">
      <div class="search-cell">
        <span class="label">患者姓名</span>
        <el-input v-model="queryParams.name" placeholder="请输入患者姓名"></el-input>
      </div>
      <div class="search-cell">
        <span class="label">科室名</span>
        <el-select style="min-width: 120px;" v-model="queryParams.dept" placeholder="请选择科室名">
          <el-option v-for="item in deptList" :key="item.label" :label="item.label" :value="item.label"/>
        </el-select>
      </div>
      <el-button type="primary" icon="Search" @click="queryData()">查询</el-button>
      <el-button icon="Refresh" @click="resetSearch">重置</el-button>
    </div>
    <div class="button-part" style="justify-content: space-between;">
      <div>
        <!--                <el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>-->
        <!--                <el-button icon="FirstAidKit" @click="importData">导入</el-button>
                        <el-button icon="Delete" @click="removeData()">删除</el-button>-->
      </div>
      <TableAbility @searchBtn="isSearch = !isSearch" @refreshBtn="queryData()"
                    @downloadBtn="exportMultiData('患者信息', tableData, [])"></TableAbility>
    </div>
    <div class="table-part">
      <el-table ref="tableRef" v-loading="loading" :data="tableData" height="100%" border show-overflow-tooltip
                @row-click="tableRowClick">
        <!--        <el-table-column type="selection" width="55"/>-->
        <el-table-column type="index" label="#" width="55" align="center"/>
        <el-table-column property="住院号" label="住院号" width="120" align="center"/>
        <el-table-column property="姓名" label="姓名" width="120" align="center"/>
        <el-table-column label="手机号" width="220" align="center">
          <template #default="scope">
            <div v-if="scope.row.电话">{{
                scope.row.电话.slice(0, 3) + '****' + scope.row.电话.slice(7)
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column property="科室" label="科室" width="160" align="center"/>
        <!--        <el-table-column property="doctor" label="主诊医生" width="160" align="center"/>-->
        <el-table-column label="手术数据" header-align="center">
          <template #default="scope">
                        <span @click.stop style="padding: 0 50px;">
                            <el-button type="primary" round
                                       @click="viewUserInfo(scope.row)">个人信息</el-button>
                            <el-button type="primary" round
                                       @click="viewSurgeryInfo(scope.row)">手术信息</el-button>
                        </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-part">
      <CommonPagination :total="total" @paginationChange="paginationChange"/>
    </div>
  </div>
  <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="40%">
    <PatientsForm ref="patientsFormRef" @close="isFormDialog = false"/>
  </el-dialog>
  <!--<ImportDialog ref="importDialogRef" title="患者导入" templateUrl="#" importUrl="#" />-->
</template>

<script lang='ts' setup>
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {exportData, exportMultiData, tableRemoveRow} from '@/utils/table-util'
import CommonPagination from '@/components/common-pagination.vue'
import * as patientApi from "@/api/patient";
import PatientsForm from "@/views/patients-manage/form/patients-form.vue";
import {getDictListByType} from "@/api/dict";

const router = useRouter()
const tableRef = ref()
const patientsFormRef = ref()
const importDialogRef = ref()
const isSearch = ref(true)
const loading = ref(true)
const isFormDialog = ref(false)
const formDialogTitle = ref('')
const queryParams = ref({
    name: '',
    dept: ''
} as any)
const tableData = ref([] as any)
let current = 0
let size = 10
const total = ref(0)
const deptList = ref([] as any)

onMounted(() => {
  current = 0
  total.value = 0
  queryParams.value = {
    name: '',
    dept: ''
  }
  getDeptList()
  queryData()
})

function resetSearch() {
  queryParams.value = {
    name: '',
    dept: ''
  }
  queryData()
}

function queryData() {
  loading.value = true
  current = 0
  total.value = 0
  tableData.value = []
  getList()
  loading.value = false
}

function getList() {
  patientApi.getPatientPage({
    limit: size,
    offset: current,
    name: queryParams.value.name,
    dept: queryParams.value.dept
  }).then((res: any) => {
    if (res.code == 0) {
      total.value = res.data.total
      tableData.value = res.data.records
    }
  })
}

/*const addData = () => {
  isFormDialog.value = true
  formDialogTitle.value = '增加患者'
  setTimeout(() => {
    patientsFormRef.value.resetData()
  }, 0)
}*/

const importData = () => {
  setTimeout(() => {
    importDialogRef.value.open()
  }, 0);
}
const removeData = (e?: any) => {
  const selectRow = e || tableRef.value.getSelectionRows()
  tableRemoveRow({data: selectRow}, (res: boolean) => {
    if (res) {
      // console.log('调用删除', selectRow)
    }
  })
}

const viewUserInfo = (e: any) => {
  isFormDialog.value = true
  formDialogTitle.value = '个人信息'
  setTimeout(() => {
    patientsFormRef.value.resetData()
    patientsFormRef.value.formData = JSON.parse(JSON.stringify(e))
  }, 0)
}
const viewSurgeryInfo = (e: any) => {
  router.push({
    path: '/patients-manage/surgery-info',
    query: e
  })
}
const tableRowClick = (row: any) => {
  tableRef.value.toggleRowSelection(row)
}
const paginationChange = (page: number, s: number) => {
  current = page
  size = s
  getList()
}

function getDeptList() {
  deptList.value = []
  getDictListByType("sys_dept").then((res: any) => {
    if (res.code == 0) {
      deptList.value = res.data
    }
  })
}
</script>

<style lang='scss' scoped></style>