🎨 添加table功能，优化显示

src/assets/css/global.scss

@@ -178,6 +178,8 @@ body {
 .table-page {
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
     .search-part {
         width: 100%;
         height: 40px;
@@ -208,6 +210,7 @@ body {
     .table-part {
         width: 100%;
         height: calc(100% - 170px);
+        flex-grow: 1;
         margin-top: 10px;
         .el-table {
             color: $text1-color;
@@ -218,7 +221,7 @@ body {
                     font-size: 16px;
                 }
                 th {
-                    background: rgba($main-color, .05);
+                    background: #f2f3f5;
                 }
             }
             .el-table__row.disable {

src/components/page-tabs.vue

@@ -51,12 +51,12 @@ const tabClick = (e: MenuItem) => {
         transition: background .6s;
         &:hover {
             color: $main-color;
-            background: rgba($main-color, .05);
+            background: #f2f3f5;
             transition: background .6s;
         }
         &.active {
             color: $main-color;
-            background: rgba($main-color, .1);
+            background: #f2f3f5;
             font-weight: 600;
             transition: background .6s;
         }

src/components/table-ability.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <el-button v-if="isSearch" icon="Search" @click="searchBtn"></el-button>
+        <el-button v-if="isRefresh" icon="Refresh" @click="refreshBtn" style="margin-left: 10px;"></el-button>
+        <el-button v-if="isDownload" icon="Download" @click="downloadBtn" style="margin-left: 10px;"></el-button>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+const emit = defineEmits(['searchBtn', 'refreshBtn', 'downloadBtn'])
+
+interface Props {
+    isSearch: Boolean
+    isRefresh: Boolean
+    isDownload: Boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+    isSearch: () => true,
+    isRefresh: () => true,
+    isDownload: () => true
+})
+
+const searchBtn = () => {
+    emit('searchBtn')
+}
+const refreshBtn = () => {
+    emit('refreshBtn')
+}
+const downloadBtn = () => {
+    emit('downloadBtn')
+}
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/main.ts

@@ -5,6 +5,7 @@ import router from './router'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus';
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import TableAbility from '@/components/table-ability.vue'
 
 import SliderVerify from 'slider-verify-v3'
 import 'slider-verify-v3/lib/SliderVerify.css'
@@ -26,6 +27,7 @@ app.use(SliderVerify)
 app.use(router)
     .use(ElementPlus) // ElementPlus 全局引入
 
+app.component('TableAbility', TableAbility)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }

src/router/index.ts

@@ -134,7 +134,6 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
     const loginInfo = useLoginStore().getlogin()
     const isLogin = loginInfo.isLogin
-    console.log(from)
     // 普通用户
     const commonUser = [
         '/login',

src/views/index.vue

@@ -102,8 +102,6 @@ switch (userInfo.permissions) {
         break;
 }
 
-
-
 const isShowUserInfoDrawer = ref(false)
 const menuActive = ref('/')
 
@@ -166,6 +164,7 @@ const userCommand = (e: string) => {
     height: 100%;
 
     .head-box {
+        position: relative;
         width: 100%;
         height: 70px;
         padding: 0 24px;
@@ -173,6 +172,7 @@ const userCommand = (e: string) => {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        padding-right: 460px;
 
         .logo-box {
             height: 50px;
@@ -185,6 +185,7 @@ const userCommand = (e: string) => {
         .menu-box {
             display: flex;
             align-items: center;
+            flex-shrink: 0;
 
             .menu-item {
                 cursor: pointer;
@@ -200,13 +201,13 @@ const userCommand = (e: string) => {
                 -webkit-transition: all .5s;
 
                 &:hover {
-                    background: #F5F7FA;
+                    background: #f2f3f5;
                     transition: all .5s;
                     -webkit-transition: all .5s;
                 }
 
                 &.active {
-                    background: rgba($main-color, .1);
+                    background: #f2f3f5;
                     transition: all .5s;
                     -webkit-transition: all .5s;
                 }
@@ -218,8 +219,15 @@ const userCommand = (e: string) => {
         }
 
         .user-box {
+            position: absolute;
+            width: 440px;
+            height: 100%;
+            top: 0;
+            right: 20px;
             display: flex;
+            justify-content: flex-end;
             align-items: center;
+            background: white;
 
             .select-hospital {
                 margin-right: 20px;

src/views/logs-manage/chart/login-chart.vue

@@ -27,7 +27,6 @@ function initChart(chartData: any) {
         tooltip: {
             trigger: 'axis',
             formatter: (params: any) => {
-                console.log(params)
                 return dateFormater('yyyy-MM-dd', params[0].axisValue) + '<br>登录记录：' + params[0].value + '条'
             }
         },

src/views/logs-manage/logs-manage.vue

@@ -4,7 +4,7 @@
         <div style="width: 100%;height: 35%;">
             <LoginChart />
         </div>
-        <div class="search-part ">
+        <div class="search-part" v-show="isSearch">
             <div class="search-cell">
                 <span class="label">类型</span>
                 <el-select v-model="queryParams.type" placeholder="请选择类型">
@@ -21,10 +21,10 @@
         </div>
         <div class="button-part" style="justify-content: space-between;">
             <el-button icon="Delete" @click="removeData()">删除</el-button>
-            <el-button icon="Download" @click="exportData('日志数据', tableData)">下载</el-button>
+            <TableAbility @searchBtn="isSearch = !isSearch" @refreshBtn="queryData({})" @downloadBtn="exportData('日志数据', tableData)"></TableAbility>
         </div>
         <div class="table-part">
-            <el-table ref="tableRef" :data="tableData" height="100%" border show-overflow-tooltip
+            <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" />
@@ -71,6 +71,8 @@ const route = useRoute()
 
 const tableRef = ref()
 const logFormRef = ref()
+const isSearch = ref(true)
+const loading = ref(true)
 const isFormDialog = ref(false)
 const formDialogTitle = ref('')
 const queryParams = ref({} as any)
@@ -79,18 +81,21 @@ const tableData = ref([] as any)
 queryData({ type: '正常' })
 
 function queryData(e: any) {
-    console.log(e)
+    loading.value = true
     tableData.value = []
+    setTimeout(() => {
         while (tableData.value.length < 10) {
             tableData.value.push({
-            type: e.type,
+                type: e.type || '正常',
-            title: e.title,
+                title: e.title || '测试',
                 ip: '127.0.0.1',
                 requestMethod: 'post',
                 requestTime: new Date(),
                 operator: 'admin'
             })
         }
+        loading.value = false
+    }, 200);
 }
 
 const viewData = (e: any) => {

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

@@ -1,12 +1,11 @@
 <template>
     <div class="table-page custom-table-table">
         <h3 class="main-color" style="font-size: 24px;line-height: 1;padding: 28px 0;">消息管理</h3>
-        <div class="search-part ">
+        <div class="search-part " v-show="isSearch">
             <div class="search-cell">
                 <span class="label">消息类型</span>
                 <el-select v-model="queryParams.type" placeholder="请选择消息类型">
-                    <el-option v-for="item in getMessageType()" :key="item.value" :label="item.label"
+                    <el-option v-for="item in getMessageType()" :key="item.value" :label="item.label" :value="item.value" />
-                        :value="item.value" />
                 </el-select>
             </div>
             <div class="search-cell">
@@ -18,9 +17,10 @@
         </div>
         <div class="button-part" style="justify-content: space-between;">
             <el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>
+            <TableAbility :isDownload="false" @searchBtn="isSearch = !isSearch" @refreshBtn="queryData({})"></TableAbility>
         </div>
         <div class="table-part">
-            <el-table ref="tableRef" :data="tableData" height="100%" border show-overflow-tooltip>
+            <el-table ref="tableRef" v-loading="loading" :data="tableData" height="100%" border show-overflow-tooltip>
                 <el-table-column property="type" label="消息类型" width="120" align="center" />
                 <el-table-column property="content" label="消息内容" width="120" align="center" />
                 <el-table-column property="creator" label="创建人" width="120" align="center" />
@@ -45,7 +45,10 @@
             <CommonPagination :total="100" @paginationChange="paginationChange" />
         </div>
     </div>
-    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="40%"><MessageForm ref="messageFormRef" :type="formDialogTitle === '新增消息' ? 'add' : 'edit'" @close="isFormDialog = false" /></el-dialog>
+    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="40%">
+        <MessageForm ref="messageFormRef" :type="formDialogTitle === '新增消息' ? 'add' : 'edit'"
+            @close="isFormDialog = false" />
+    </el-dialog>
 </template>
 
 <script lang='ts' setup>
@@ -63,19 +66,23 @@ const route = useRoute()
 
 const tableRef = ref()
 const messageFormRef = ref()
+const isSearch = ref(true)
+const loading = ref(true)
 const isFormDialog = ref(false)
 const formDialogTitle = ref('')
 const queryParams = ref({} as any)
 const tableData = ref([] as any)
 
-queryData({type: '公告', content: '测试测试测试'})
+queryData({ type: '公告', content: '测试测试测试' })
 
-function queryData (e: any) {
+function queryData(e: any) {
+    loading.value = true
     tableData.value = []
+    setTimeout(() => {
         while (tableData.value.length < 10) {
             tableData.value.push({
-            type: e.type,
+                type: e.type || '公告',
-            content: e.content,
+                content: e.content || '测试测试测试',
                 creator: 'admin',
                 creatTime: new Date(),
                 editor: 'admin',
@@ -87,6 +94,8 @@ function queryData (e: any) {
                 isHot: true,
             })
         }
+        loading.value = false
+    }, 200);
 }
 
 const addData = () => {
@@ -122,19 +131,21 @@ const paginationChange = (page: number, size: number) => {
     .search-part {
         padding: 40px 30px;
         border: 1px solid $border-color;
-        &>.search-cell ~ .search-cell {
+
+        &>.search-cell~.search-cell {
             margin-left: 50px;
         }
+
         .search-cell {
             flex-grow: 1;
         }
+
         &>.el-button {
             margin-left: 100px;
         }
     }
+
     .table-part {
         height: calc(100% - 292px);
     }
-}
+}</style>
-
-</style>

src/views/patients-manage/form/patients-form.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-form ref="formRef" :model="formData" :rules="rules" label-width="60">
+    <el-form ref="formRef" :model="formData" :rules="rules" label-width="60" :disabled="type === 'view'">
         <el-row :gutter="gutter">
             <el-col :span="12">
                 <el-form-item label="姓名" prop="name">
@@ -65,7 +65,7 @@
             </el-col>
             <el-col :span="12">
                 <el-form-item label="过敏史名称" prop="allergyHistoryName" :label-width="rightWidth">
-                    <el-input v-model="formData.medicalHistoryName" placeholder="请输入过敏史"></el-input>
+                    <el-input v-model="formData.allergyHistoryName" placeholder="请输入过敏史"></el-input>
                 </el-form-item>
             </el-col>
         </el-row>
@@ -82,11 +82,11 @@
             </el-col>
         </el-row>
 
-        <div v-if="type !== 'edit'" style="text-align: right;">
+        <div v-if="type === 'add'" style="text-align: right;">
             <el-button class="f18" @click="close">取消</el-button>
             <el-button class="f18" type="primary" @click="saveData">确认</el-button>
         </div>
-        <div v-else style="text-align: right;">
+        <div v-else-if="type === 'edit'" style="text-align: right;">
             <el-button class="f18" @click="saveData">修改</el-button>
             <el-button class="f18" type="primary" @click="saveData">更新</el-button>
         </div>
@@ -148,12 +148,18 @@ function resetData() {
     formRef.value.resetFields()
     formData.value = {
         id: '',
-        userName: '',
         name: '',
-        role: '',
+        code: '',
-        mailbox: '',
+        sex: '',
+        dept: '',
+        bodyHeight: '',
+        isMedicalHistory: '',
+        bodyWeight: '',
+        medicalHistoryName: '',
+        age: '',
+        allergyHistoryName: '',
         phone: '',
-        enable: true,
+        hospitalTime: ''
     }
 }
 const saveData = async () => {

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

@@ -1,6 +1,6 @@
 <template>
     <div class="table-page">
-        <div class="search-part">
+        <div class="search-part" v-show="isSearch">
             <div class="search-cell">
                 <span class="label">患者姓名</span>
                 <el-input v-model="queryParams.name" placeholder="请输入患者姓名"></el-input>
@@ -8,8 +8,7 @@
             <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"
+                    <el-option v-for="item in getDeptData()" :key="item.value" :label="item.label" :value="item.value" />
-                        :value="item.value" />
                 </el-select>
             </div>
             <el-button type="primary" icon="Search" @click="queryData(queryParams)">查询</el-button>
@@ -21,10 +20,11 @@
                 <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>
+            <TableAbility @searchBtn="isSearch = !isSearch" @refreshBtn="queryData({})"
+                @downloadBtn="exportData('患者信息', tableData)"></TableAbility>
         </div>
         <div class="table-part">
-            <el-table ref="tableRef" :data="tableData" height="100%" border show-overflow-tooltip
+            <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" />
@@ -39,8 +39,10 @@
                 <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.userInfo" type="primary" round
-                            <el-button v-if="scope.row.surgeryInfo" type="primary" round @click="viewSurgeryInfo(scope.row)">手术信息</el-button>
+                                @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>
@@ -50,7 +52,10 @@
             <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>
+    <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>
 
@@ -70,6 +75,8 @@ const route = useRoute()
 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({
@@ -78,22 +85,26 @@ const queryParams = ref({
 } as any)
 const tableData = ref([] as any)
 
-queryData({name: '测试', dept: getDeptData()[0].label})
+queryData({ name: '测试', dept: getDeptData()[0].label })
 
-function queryData (e: any) {
+function queryData(e: any) {
+    loading.value = true
     tableData.value = []
+    setTimeout(() => {
         while (tableData.value.length < 10) {
             tableData.value.push({
                 code: '123456', // 住院号
-            name: e.name,
+                name: e.name || '测试',
                 phone: '12312345678',
-            dept: e.dept,
+                dept: e.dept || '测试',
                 doctor: '张医生',
                 userInfo: Boolean(tableData.value.length < 2),
                 surgeryInfo: Boolean(tableData.value.length < 1)
 
             })
         }
+        loading.value = false
+    }, 200);
 }
 
 const addData = () => {
@@ -138,7 +149,4 @@ const paginationChange = (page: number, size: number) => {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang='scss' scoped></style>
-
-
-</style>

src/views/permissions-manage/doctor-manage.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="table-page">
-        <div class="search-part">
+        <div class="search-part" v-show="isSearch">
             <div class="search-cell">
                 <span class="label">用户名</span>
                 <el-input v-model="queryParams.userName" placeholder="请输入用户名"></el-input>
@@ -14,11 +14,12 @@
                 <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>
+            <TableAbility @searchBtn="isSearch = !isSearch" @refreshBtn="queryData({})"
+                @downloadBtn="exportData('医生数据', tableData)"></TableAbility>
         </div>
         <div class="table-part">
-            <el-table ref="tableRef" :data="tableData" height="100%" border show-overflow-tooltip :row-class-name="({row}: any) => !row.enable && 'disable'"
+            <el-table ref="tableRef" v-loading="loading" :data="tableData" height="100%" border show-overflow-tooltip
-                @row-click="tableRowClick">
+                :row-class-name="({ row }: any) => !row.enable && 'disable'" @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="120" align="center" />
@@ -35,9 +36,12 @@
                 <el-table-column label="操作" align="center">
                     <template #default="scope">
                         <span @click.stop>
-                            <el-button link icon="RefreshLeft" @click="resetPassword(scope.row)" :disabled="!scope.row.enable">密码</el-button>
+                            <el-button link icon="RefreshLeft" @click="resetPassword(scope.row)"
-                            <el-button link icon="EditPen" @click="editData(scope.row)" :disabled="!scope.row.enable">修改</el-button>
+                                :disabled="!scope.row.enable">密码</el-button>
-                            <el-button link icon="Delete" @click="removeData(scope.row)" :disabled="!scope.row.enable">删除</el-button>
+                            <el-button link icon="EditPen" @click="editData(scope.row)"
+                                :disabled="!scope.row.enable">修改</el-button>
+                            <el-button link icon="Delete" @click="removeData(scope.row)"
+                                :disabled="!scope.row.enable">删除</el-button>
                         </span>
                     </template>
                 </el-table-column>
@@ -47,7 +51,9 @@
             <CommonPagination :total="100" @paginationChange="paginationChange" />
         </div>
     </div>
-    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="750px"><DoctorForm ref="doctorFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" /></el-dialog>
+    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="750px">
+        <DoctorForm ref="doctorFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" />
+    </el-dialog>
     <ImportDialog ref="importDialogRef" title="用户导入" templateUrl="#" importUrl="#" />
 </template>
 
@@ -62,6 +68,8 @@ import ImportDialog from '@/components/import-dialog.vue'
 const tableRef = ref()
 const doctorFormRef = ref()
 const importDialogRef = ref()
+const isSearch = ref(true)
+const loading = ref(true)
 const isFormDialog = ref(false)
 const formDialogTitle = ref('')
 const queryParams = ref({
@@ -69,19 +77,23 @@ const queryParams = ref({
 } as any)
 const tableData = ref([] as any)
 
-queryData({userName: '测试'})
+queryData({ userName: '测试' })
 
-function queryData (e: any) {
+function queryData(e: any) {
+    loading.value = true
     tableData.value = []
+    setTimeout(() => {
         while (tableData.value.length < 10) {
             tableData.value.push({
                 userName: 'cscs',
-            name: e.userName,
+                name: e.userName || '测试',
                 phone: '12312345678',
                 role: '高级管理员',
                 enable: true,
             })
         }
+        loading.value = false
+    }, 200);
 }
 const addData = () => {
     isFormDialog.value = true
@@ -127,7 +139,4 @@ const paginationChange = (page: number, size: number) => {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang='scss' scoped></style>
-
-
-</style>

src/views/permissions-manage/form/empower-dialog.vue

@@ -5,8 +5,10 @@
             <el-checkbox v-model="toggleExpand" @change="toggleExpandChange">展开 / 折叠</el-checkbox>
             <el-checkbox v-model="toggleSelectAll" @change="toggleSelectAllChange">全选 / 全不选</el-checkbox>
         </template>
+        <div style="min-height: 200px;max-height: 500px;overflow-y: auto;">
             <el-tree ref="treeRef" :key="treeKey" :props="props" :data="treeData" :default-expanded-keys="expandedKey" node-key="id"
                 show-checkbox @check-change="checkChange" />
+        </div>
         <div style="text-align: right;margin-top: 20px;">
             <el-button class="f18" @click="dialogVisible = false">取消</el-button>
             <el-button class="f18" type="primary" @click="updateData">更新</el-button>

src/views/permissions-manage/menu-manage.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="table-page">
-        <div class="search-part">
+        <div class="search-part" v-show="isSearch">
             <div class="search-cell">
                 <span class="label">菜单名称</span>
                 <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称"></el-input>
@@ -13,14 +13,14 @@
                 <el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>
                 <el-button @click="expandTable">展开/折叠</el-button>
             </div>
-            <!-- <el-button icon="Download" @click="exportData('角色数据', tableData)">导出</el-button> -->
+            <TableAbility :isDownload="false" @searchBtn="isSearch = !isSearch" @refreshBtn="initData()"></TableAbility>
         </div>
         <div class="table-part">
             <el-table ref="tableRef" :data="tableData" row-key="id" height="100%" border show-overflow-tooltip
                 @row-click="tableRowClick">
                 <el-table-column property="menuName" label="菜单名称" width="180" align="center" />
                 <el-table-column property="order" label="排序" width="80" align="center" />
-                <el-table-column label="图标" width="80" align="center" >
+                <el-table-column label="图标" width="80" align="center">
                     <template #default="scope"><i class="main-color f20" :class="scope.row.icon"></i></template>
                 </el-table-column>
                 <el-table-column property="route" label="路由" width="260" align="center" />
@@ -39,7 +39,9 @@
             <CommonPagination :total="100" @paginationChange="paginationChange" />
         </div>
     </div>
-    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="30%"><MenuForm ref="doctorFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" /></el-dialog>
+    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="30%">
+        <MenuForm ref="doctorFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" />
+    </el-dialog>
 </template>
 
 <script lang='ts' setup>
@@ -53,6 +55,8 @@ let isExpand = false // 表格展开状态
 
 const tableRef = ref()
 const doctorFormRef = ref()
+const isSearch = ref(true)
+const loading = ref(true)
 const isFormDialog = ref(false)
 const formDialogTitle = ref('')
 const queryParams = ref({
@@ -60,7 +64,13 @@ const queryParams = ref({
 } as any)
 const tableData = ref([] as any)
 
-while (tableData.value.length < 10) {
+initData()
+
+function initData() {
+    loading.value = true
+    tableData.value = []
+    setTimeout(() => {
+        while (tableData.value.length < 10) {
             tableData.value.push({
                 id: tableData.value.length,
                 menuName: '权限管理',
@@ -79,10 +89,15 @@ while (tableData.value.length < 10) {
                     }
                 ]
             })
+        }
+        loading.value = false
+    }, 200);
 }
 
 const queryData = (e: any) => {
+    loading.value = true
     tableData.value = []
+    setTimeout(() => {
         while (tableData.value.length < 10) {
             tableData.value.push({
                 id: tableData.value.length,
@@ -93,6 +108,8 @@ const queryData = (e: any) => {
                 type: '菜单',
             })
         }
+        loading.value = false
+    }, 200);
 }
 const addData = () => {
     isFormDialog.value = true
@@ -131,7 +148,4 @@ const paginationChange = (page: number, size: number) => {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang='scss' scoped></style>
-
-
-</style>

src/views/permissions-manage/role-manage.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="table-page">
-        <div class="search-part">
+        <div class="search-part" v-show="isSearch">
             <div class="search-cell">
                 <span class="label">角色名称</span>
                 <el-input v-model="queryParams.roleName" placeholder="请输入角色名称"></el-input>
@@ -14,10 +14,10 @@
                 <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>
+            <TableAbility @searchBtn="isSearch = !isSearch" @refreshBtn="queryData({})" @downloadBtn="exportData('角色数据', tableData)"></TableAbility>
         </div>
         <div class="table-part">
-            <el-table ref="tableRef" :data="tableData" height="100%" border show-overflow-tooltip
+            <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" />
@@ -26,7 +26,7 @@
                 <el-table-column property="roleRemark" label="角色描述" width="120" align="center" />
                 <el-table-column property="dataPermissions" label="数据权限" width="120" align="center" />
                 <el-table-column label="创建时间" width="220" align="center">
-                    <template #default="scope"><b>{{ scope.row.createdTime }}</b></template>
+                    <template #default="scope">{{ scope.row.createdTime }}</template>
                 </el-table-column>
                 <el-table-column label="操作" align="center">
                     <template #default="scope">
@@ -43,7 +43,9 @@
             <CommonPagination :total="100" @paginationChange="paginationChange" />
         </div>
     </div>
-    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="30%"><RoleForm ref="RoleFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" /></el-dialog>
+    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="30%">
+        <RoleForm ref="RoleFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" />
+    </el-dialog>
     <ImportDialog ref="importDialogRef" title="角色导入" templateUrl="#" importUrl="#" />
     <EmpowerDialog ref="empowerDialogRef" />
 </template>
@@ -62,6 +64,8 @@ const tableRef = ref()
 const RoleFormRef = ref()
 const importDialogRef = ref()
 const empowerDialogRef = ref()
+const isSearch = ref(true)
+const loading = ref(true)
 const isFormDialog = ref(false)
 const formDialogTitle = ref('')
 const queryParams = ref({
@@ -69,19 +73,23 @@ const queryParams = ref({
 } as any)
 const tableData = ref([] as any)
 
-queryData({roleName: '测试'})
+queryData({ roleName: '测试' })
 
-function queryData (e: any) {
+function queryData(e: any) {
+    loading.value = true
     tableData.value = []
+    setTimeout(() => {
         while (tableData.value.length < 10) {
             tableData.value.push({
-            roleName: e.roleName,
+                roleName: e.roleName || '测试',
                 roleMark: 'ROLE_ADMIN',
                 roleRemark: '超级管理员',
                 dataPermissions: '全部',
                 createdTime: dateFormater('yyyy-MM-dd HH:mm:ss'),
             })
         }
+        loading.value = false
+    }, 200);
 }
 const addData = () => {
     isFormDialog.value = true
@@ -124,7 +132,4 @@ const paginationChange = (page: number, size: number) => {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang='scss' scoped></style>
-
-
-</style>

src/views/remote-manage/remote-control.vue

@@ -40,7 +40,7 @@
 							<el-option v-for="item in databaseOptions" :key="item.value" :label="item.label"
 								:value="item.value" />
 						</el-select>
-						<el-button color="#C77000">患者信息</el-button>
+						<el-button color="#C77000" @click="viewPatientInfo">患者信息</el-button>
 						<el-button color="#C77000">已连接</el-button>
 						<el-button color="#C77000">机器人运行正常</el-button>
 					</div>
@@ -126,6 +126,7 @@
 				</span>
 			</template>
 		</el-dialog>
+		<el-dialog v-model="isPatientDialog" title="患者信息" width="40%"><PatientsForm ref="patientsFormRef" type="view" @close="isPatientDialog = false" /></el-dialog>
 	</div>
 </template>
 
@@ -138,6 +139,7 @@ import { dateFormater } from '@/utils/date-util';
 import { post } from "@/axios/index";
 import chartLine from './chart/chart-line.vue';
 import chartEcg from './chart/chart-ecg.vue';
+import PatientsForm from '@/views/patients-manage/form/patients-form.vue'
 import imgLung from '@/assets/imgs/lung.png';
 import imgHeart from '@/assets/imgs/heart.png';
 import imgLungAlarm from '@/assets/imgs/lung_alarm.png';
@@ -170,8 +172,10 @@ const chartDom1 = ref(),
 	chartDom4 = ref(),
 	liveVideo = ref(),
 	msgLog = ref(),
-	unusualMsg = ref();
+	unusualMsg = ref(),
+	patientsFormRef = ref();
 
+const isPatientDialog = ref(false) 
 const database = ref('');
 const databaseOptions = ref([] as { value: string, label: string }[]);
 const messageSum = ref(10);
@@ -415,11 +419,13 @@ function getTableData(e: boolean) {
 }
 function keepFit(designWidth: number, designHeight: number, renderDomId: string) {
 	let width = designWidth || 1920,
-		height = designHeight || 1030;
+		height = designHeight || 1010;
 	let clientHeight = document.documentElement.clientHeight - 50;
 	let clientWidth = document.documentElement.clientWidth;
 	let scale = 1;
-	scale = clientHeight / height;
+	scale = (clientHeight / clientWidth) < (height / width) ? clientHeight / height : clientWidth / width;
+	// scale = clientHeight / height;
+	// scale = clientWidth / width;
 	const renderDom = document.getElementById(renderDomId);
 	if (renderDom) {
 		renderDom.style.height = clientHeight / scale + 'px';
@@ -429,7 +435,7 @@ function keepFit(designWidth: number, designHeight: number, renderDomId: string)
 }
 function initScale() {
 	let w = 1920,
-		h = 1030;
+		h = 1010;
 	keepFit(w, h, 'screenBox');
 	window.addEventListener('resize', () => {
 		keepFit(w, h, 'screenBox');
@@ -443,6 +449,27 @@ const setDatabase = () => {
 	initData();
 	setDatabaseDialog.value = false;
 };
+const viewPatientInfo = () => {
+	isPatientDialog.value = true;
+	setTimeout(() => {
+        patientsFormRef.value.resetData()
+        patientsFormRef.value.formData = JSON.parse(JSON.stringify({
+			id: '',
+			name: '测试',
+			code: 'afasf',
+			sex: '男',
+			dept: '测试',
+			bodyHeight: '170',
+			isMedicalHistory: '无',
+			bodyWeight: '80',
+			medicalHistoryName: '无',
+			age: '22',
+			allergyHistoryName: '无',
+			phone: '123456',
+			hospitalTime: new Date()
+		}))
+    }, 0)
+}
 const backRemote = () => {
 	router.back()
 }
@@ -525,9 +552,9 @@ const tableItemCancel = (e: any) => {
 <style lang="scss" scoped>
 .remote-box {
 	width: 1920px;
-	height: 1020px;
+	height: 1010px;
 	background: #f1f3f5;
-	padding-top: 10px;
+	padding: 10px 0 20px 0;
 	transform-origin: top left;
 	overflow-y: auto;
 	.el-button {
@@ -536,7 +563,6 @@ const tableItemCancel = (e: any) => {
 	.main-box {
 		width: 100%;
 		height: 100%;
-		// min-height: 1080px;
 		background: white;
 		padding: 20px;
 		box-sizing: border-box;
@@ -557,7 +583,7 @@ const tableItemCancel = (e: any) => {
 
 			.chart-line {
 				width: 100%;
-				height: calc(25% - 15px - 12.5px);
+				height: calc(25% - 30px);
 				margin-bottom: 20px;
 				background: #e8f5f8;
 				border-top-left-radius: 20px;
@@ -567,7 +593,7 @@ const tableItemCancel = (e: any) => {
 
 			.chart-ecg {
 				width: 100%;
-				height: calc(25% - 15px - 12.5px);
+				height: calc(25% - 50px);
 				border-left: 1px solid #92b3c1;
 				border-bottom: 1px solid #92b3c1;
 
@@ -689,7 +715,8 @@ const tableItemCancel = (e: any) => {
 		.right-box {
 			width: 670px;
 			height: 100%;
-
+			display: flex;
+			flex-direction: column;
 			.top-btn-box {
 				width: 100%;
 				height: 34px;
@@ -869,6 +896,7 @@ const tableItemCancel = (e: any) => {
 			.table-box {
 				width: 100%;
 				height: calc(100% - 589px);
+				flex-grow: 1;
 
 				:deep(.el-table__inner-wrapper) {
 					.el-table__cell {

src/views/system-manage/hospitals.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="table-page">
-        <div class="search-part">
+        <div class="search-part" v-show="isSearch">
             <div class="search-cell">
                 <span class="label">医院名称</span>
                 <el-input v-model="queryParams.userName" placeholder="请输入医院名称"></el-input>
@@ -13,17 +13,18 @@
                 <el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>
                 <el-button icon="Delete" @click="removeData()">删除</el-button>
             </div>
-            <el-button icon="Download" @click="exportData('医生数据', tableData)">导出</el-button>
+            <TableAbility @searchBtn="isSearch = !isSearch" @refreshBtn="queryData({})"
+                @downloadBtn="exportData('医生数据', tableData)"></TableAbility>
         </div>
         <div class="table-part">
-            <el-table ref="tableRef" :data="tableData" height="100%" border show-overflow-tooltip
+            <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="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>
+                    <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">
@@ -52,7 +53,9 @@
         <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" />
+        <HospitalForm ref="hospitalFormRef"
+            :type="formDialogTitle === '添加' ? 'add' : formDialogTitle === '修改' ? 'edit' : 'view'"
+            @close="isFormDialog = false" />
     </el-drawer>
 </template>
 
@@ -66,6 +69,8 @@ import { dateFormater } from '@/utils/date-util'
 
 const tableRef = ref()
 const hospitalFormRef = ref()
+const isSearch = ref(true)
+const loading = ref(true)
 const isFormDialog = ref(false)
 const formDialogTitle = ref('')
 const queryParams = ref({
@@ -76,10 +81,12 @@ const tableData = ref([] as any)
 queryData({ name: '测试' })
 
 function queryData(e: any) {
+    loading.value = true
     tableData.value = []
+    setTimeout(() => {
         while (tableData.value.length < 10) {
             tableData.value.push({
-            name: e.name,
+                name: e.name || '测试',
                 code: '',
                 admin: {
                     userName: 'admin',
@@ -92,6 +99,8 @@ function queryData(e: any) {
                 state: '正常'
             })
         }
+        loading.value = false
+    }, 200);
 }
 const addData = () => {
     isFormDialog.value = true
@@ -132,5 +141,4 @@ const paginationChange = (page: number, size: number) => {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang='scss' scoped></style>
-</style>

src/views/system-manage/user-list.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="table-page custom-table-page">
-        <div class="search-part">
+        <div class="search-part" v-show="isSearch">
             <div class="search-cell">
                 <span class="label">用户名</span>
                 <el-input v-model="queryParams.userName" placeholder="请输入用户名"></el-input>
@@ -8,9 +8,13 @@
             <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></div>
+            <TableAbility :isDownload="false" @searchBtn="isSearch = !isSearch" @refreshBtn="queryData({})"></TableAbility>
+        </div>
         <div class="table-part">
-            <el-table ref="tableRef" :data="tableData" height="100%" border show-overflow-tooltip :row-class-name="({row}: any) => !row.enable && 'disable'"
+            <el-table ref="tableRef" v-loading="loading" :data="tableData" height="100%" border show-overflow-tooltip
-                @row-click="tableRowClick">
+                :row-class-name="({ row }: any) => !row.enable && 'disable'" @row-click="tableRowClick">
                 <el-table-column type="selection" width="55" />
                 <el-table-column type="index" label="#" width="55" align="center" />
                 <el-table-column property="hospital" label="医院名称" width="200" align="center" />
@@ -28,9 +32,12 @@
                 <el-table-column label="操作" align="center">
                     <template #default="scope">
                         <span @click.stop>
-                            <el-button link icon="RefreshLeft" @click="resetPassword(scope.row)" :disabled="!scope.row.enable">密码</el-button>
+                            <el-button link icon="RefreshLeft" @click="resetPassword(scope.row)"
-                            <el-button link icon="EditPen" @click="editData(scope.row)" :disabled="!scope.row.enable">修改</el-button>
+                                :disabled="!scope.row.enable">密码</el-button>
-                            <el-button link icon="Delete" @click="removeData(scope.row)" :disabled="!scope.row.enable">删除</el-button>
+                            <el-button link icon="EditPen" @click="editData(scope.row)"
+                                :disabled="!scope.row.enable">修改</el-button>
+                            <el-button link icon="Delete" @click="removeData(scope.row)"
+                                :disabled="!scope.row.enable">删除</el-button>
                         </span>
                     </template>
                 </el-table-column>
@@ -40,7 +47,9 @@
             <CommonPagination :total="100" @paginationChange="paginationChange" />
         </div>
     </div>
-    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="750px"><UserForm ref="userFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" /></el-dialog>
+    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="750px">
+        <UserForm ref="userFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" />
+    </el-dialog>
 </template>
 
 <script lang='ts' setup>
@@ -52,6 +61,8 @@ import UserForm from './form/user-form.vue'
 
 const tableRef = ref()
 const userFormRef = ref()
+const isSearch = ref(true)
+const loading = ref(true)
 const isFormDialog = ref(false)
 const formDialogTitle = ref('')
 const queryParams = ref({
@@ -59,20 +70,24 @@ const queryParams = ref({
 } as any)
 const tableData = ref([] as any)
 
-queryData({userName: '测试'})
+queryData({ userName: '测试' })
 
-function queryData (e: any) {
+function queryData(e: any) {
+    loading.value = true
     tableData.value = []
+    setTimeout(() => {
         while (tableData.value.length < 10) {
             tableData.value.push({
                 hospital: '北京朝阳医院',
                 userName: 'cscs',
-            name: e.userName,
+                name: e.userName || '测试',
                 phone: '12312345678',
                 role: '高级管理员',
                 enable: true,
             })
         }
+        loading.value = false
+    }, 200);
 }
 const removeData = (e?: any) => {
     const selectRow = e || tableRef.value.getSelectionRows()
@@ -109,8 +124,7 @@ const paginationChange = (page: number, size: number) => {
 <style lang='scss' scoped>
 .table-page.custom-table-page {
     .table-part {
-        height: calc(100% - 110px);
+        height: calc(100% - 180px);
     }
 }
-
 </style>