rax-medical/src/views/logs-manage/message-manage.vue

<template>
    <div class="table-page">
        <div class="search-part">
            <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 v-model="queryParams.dept" placeholder="请选择科室名">
                    <el-option v-for="item in getDeptData()" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
            <el-button type="primary" icon="Search" @click="queryData(queryParams)">查询</el-button>
            <el-button icon="Refresh" @click="queryParams = {}">重置</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>
            <el-button icon="Download" @click="exportData('患者信息', tableData)">下载</el-button>
        </div>
        <div class="table-part">
            <el-table ref="tableRef" :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="code" label="住院号" width="120" align="center" />
                <el-table-column property="name" label="姓名" width="120" align="center" />
                <el-table-column label="手机号" width="220" align="center">
                    <template #default="scope">{{ scope.row.phone.slice(0, 3) + '****' + scope.row.phone.slice(7)
                    }}</template>
                </el-table-column>
                <el-table-column property="dept" 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 v-if="scope.row.userInfo" type="primary" round @click="viewUserInfo(scope.row)">个人信息</el-button>
                            <el-button v-if="scope.row.surgeryInfo" type="primary" round @click="viewSurgeryInfo(scope.row)">手术信息</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-part">
            <CommonPagination :total="100" @paginationChange="paginationChange" />
        </div>
    </div>
    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="40%"><PatientsForm ref="patientsFormRef" :type="formDialogTitle === '增加患者' ? 'add' : 'edit'" @close="isFormDialog = false" /></el-dialog>
    <ImportDialog ref="importDialogRef" title="患者导入" templateUrl="#" importUrl="#" />
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { tableRemoveRow, exportData } from '@/utils/table-util'
import CommonPagination from '@/components/common-pagination.vue'
import PatientsForm from './form/patients-form.vue'
import ImportDialog from '@/components/import-dialog.vue'
import { getDeptData } from '@/static-data/core'

const router = useRouter()
const route = useRoute()

const tableRef = ref()
const patientsFormRef = ref()
const importDialogRef = ref()
const isFormDialog = ref(false)
const formDialogTitle = ref('')
const queryParams = ref({
    name: '',
    dept: ''
} as any)
const tableData = ref([] as any)

queryData({name: '测试', dept: getDeptData()[0].label})

function queryData (e: any) {
    tableData.value = []
    while (tableData.value.length < 10) {
        tableData.value.push({
            code: '123456', // 住院号
            name: e.name,
            phone: '12312345678',
            dept: e.dept,
            doctor: '张医生',
            userInfo: Boolean(tableData.value.length < 2),
            surgeryInfo: Boolean(tableData.value.length < 1)
            
        })
    }
}

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, size: number) => {

}
</script>

<style lang='scss' scoped>


</style>