rax-medical/src/views/system-manage/hospitals.vue

<template>
    <div class="table-page">
        <div class="search-part">
            <div class="search-cell">
                <span class="label">医院名称</span>
                <el-input v-model="queryParams.userName" placeholder="请输入医院名称"></el-input>
            </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">
            <el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>
            <el-button icon="Delete" @click="removeData()">删除</el-button>
            <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="name" label="医院名称" width="200" align="center" />
                <el-table-column property="code" label="编码" width="60" align="center" />
                <el-table-column label="高级管理员" width="200" align="center">
                    <template #default="scope">{{ scope.row.admin?.name}}</template>
                </el-table-column>
                <el-table-column property="DNS" label="域名" width="200" align="center" />
                <el-table-column label="开始时间" width="200" align="center">
                    <template #default="scope">{{ dateFormater('yyyy-MM-dd HH:mm', scope.row.startTime) }}</template>
                </el-table-column>
                <el-table-column label="结束时间" width="200" align="center">
                    <template #default="scope">{{ dateFormater('yyyy-MM-dd HH:mm', scope.row.endTime) }}</template>
                </el-table-column>
                <el-table-column property="state" label="状态" width="60" align="center" />
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <span @click.stop>
                            <el-button link icon="View" @click="viewData(scope.row)">医院信息</el-button>
                            <el-button link icon="EditPen" @click="editData(scope.row)">修改</el-button>
                            <el-button link icon="Delete" @click="removeData(scope.row)">删除</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-part">
            <CommonPagination :total="100" @paginationChange="paginationChange" />
        </div>
    </div>
    <el-drawer v-model="isFormDialog" size="660px">
        <template #header>
            <h3 class="main-color f20" style="padding: 20px 20px 0 20px;">{{ formDialogTitle }}</h3>
        </template>
        <HospitalForm ref="hospitalFormRef" :type="formDialogTitle === '添加' ? 'add' : formDialogTitle === '修改' ? 'edit' : 'view'" @close="isFormDialog = false" />
    </el-drawer>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { tableRemoveRow, exportData } from '@/utils/table-util'
import CommonPagination from '@/components/common-pagination.vue'
import HospitalForm from './form/hospital-form.vue'
import { dateFormater } from '@/utils/date-util'

const tableRef = ref()
const hospitalFormRef = ref()
const isFormDialog = ref(false)
const formDialogTitle = ref('')
const queryParams = ref({
    userName: ''
} as any)
const tableData = ref([] as any)

queryData({ name: '测试' })

function queryData(e: any) {
    tableData.value = []
    while (tableData.value.length < 10) {
        tableData.value.push({
            name: e.name,
            code: '',
            admin: {
                userName: 'admin',
                name: '管理员',
                phone: '12345678',
            },
            DNS: '***.****.***',
            startTime: new Date(),
            endTime: new Date(),
            state: '正常'
        })
    }
}
const addData = () => {
    isFormDialog.value = true
    formDialogTitle.value = '添加'
    setTimeout(() => {
        hospitalFormRef.value.resetData()
    }, 0)
}
const removeData = (e?: any) => {
    const selectRow = e || tableRef.value.getSelectionRows()
    tableRemoveRow({ data: selectRow }, (res: boolean) => {
        if (res) {
            console.log('调用删除', selectRow)
        }
    })
}
const viewData = (e: any) => {
    isFormDialog.value = true
    formDialogTitle.value = '医院信息'
    setTimeout(() => {
        hospitalFormRef.value.resetData()
        hospitalFormRef.value.formData = JSON.parse(JSON.stringify(e))
    }, 0)
}
const editData = (e: any) => {
    isFormDialog.value = true
    formDialogTitle.value = '修改'
    setTimeout(() => {
        hospitalFormRef.value.resetData()
        hospitalFormRef.value.formData = JSON.parse(JSON.stringify(e))
    }, 0)
}
const tableRowClick = (row: any) => {
    tableRef.value.toggleRowSelection(row)
}
const paginationChange = (page: number, size: number) => {

}
</script>

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