🚧

src/router/index.ts

@@ -110,7 +110,20 @@ const router = createRouter({
                 {
                     path: '/logs-manage',
                     name: '日志管理',
+                    redirect: '/logs-manage/message-manage',
                     component: () => import('@/views/logs-manage/index.vue'),
+                    children: [
+                        {
+                            path: '/logs-manage/message-manage',
+                            name: '消息管理',
+                            component: () => import('@/views/logs-manage/message-manage.vue'),
+                        },
+                        {
+                            path: '/logs-manage/logs-manage',
+                            name: '日志管理',
+                            component: () => import('@/views/logs-manage/logs-manage.vue'),
+                        }
+                    ]
                 }
             ]
         }

src/views/home/index.vue

@@ -2,6 +2,9 @@
     <div class="home-page">
         <div class="background-box">
             <div class="left-content">
+                <div class="message-box swing_skew_1">
+                    
+                </div>
                 <div class="header-box swing_skew_1">
                     <div class="header-item">
                         <span class="main-color f20" style="font-weight: 600;">{{ userInfo.name }}</span>

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

@@ -0,0 +1,184 @@
+<template>
+    <el-form ref="formRef" :model="formData" :rules="rules" label-width="60">
+        <el-row :gutter="gutter">
+            <el-col :span="12">
+                <el-form-item label="姓名" prop="name">
+                    <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="住院号" prop="code" :label-width="rightWidth">
+                    <el-input v-model="formData.code" placeholder="请输入住院号" :disabled="type === 'edit'"></el-input>
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row :gutter="gutter">
+            <el-col :span="12">
+                <el-form-item label="性别" prop="sex">
+                    <el-radio-group v-model="formData.sex">
+                        <el-radio label="男">男</el-radio>
+                        <el-radio label="女">女</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="科室" prop="dept" :label-width="rightWidth">
+                    <el-select v-model="formData.dept" placeholder="请选择科室">
+                        <el-option v-for="item in getDeptData()" :key="item.value" :label="item.label"
+                            :value="item.value" />
+                    </el-select>
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row :gutter="gutter">
+            <el-col :span="12">
+                <el-form-item label="身高" prop="bodyHeight">
+                    <el-input v-model="formData.bodyHeight" placeholder="请输入电话"></el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="有无病史" prop="isMedicalHistory" :label-width="rightWidth">
+                    <el-radio-group v-model="formData.isMedicalHistory">
+                        <el-radio label="无">无</el-radio>
+                        <el-radio label="有">有</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row :gutter="gutter">
+            <el-col :span="12">
+                <el-form-item label="体重" prop="bodyWeight">
+                    <el-input v-model="formData.bodyWeight" placeholder="请输入体重"></el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="病史名称" prop="medicalHistoryName" :label-width="rightWidth">
+                    <el-input v-model="formData.medicalHistoryName" placeholder="请输入病史"></el-input>
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row :gutter="gutter">
+            <el-col :span="12">
+                <el-form-item label="年龄" prop="age">
+                    <el-input v-model="formData.age" placeholder="请输入年龄"></el-input>
+                </el-form-item>
+            </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-form-item>
+            </el-col>
+        </el-row>
+        <el-row :gutter="gutter">
+            <el-col :span="12">
+                <el-form-item label="电话" prop="phone">
+                    <el-input v-model="formData.phone" placeholder="请输入电话"></el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="住院时间" prop="hospitalTime" :label-width="rightWidth">
+                    <el-date-picker v-model="formData.hospitalTime" type="date" placeholder="请输入住院时间" />
+                </el-form-item>
+            </el-col>
+        </el-row>
+
+        <div v-if="type !== 'edit'" 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;">
+            <el-button class="f18" @click="saveData">修改</el-button>
+            <el-button class="f18" type="primary" @click="saveData">更新</el-button>
+        </div>
+    </el-form>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDeptData } from '@/static-data/core'
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    type: String
+})
+
+const gutter = 20
+const rightWidth = 100
+const rules = reactive({
+    name: [
+        { required: true, message: '请输入姓名', trigger: ['blur', 'change'] },
+    ],
+    code: [
+        { required: true, message: '请输入住院号', trigger: ['blur', 'change'] },
+    ],
+    dept: [
+        { required: true, message: '请选择科室', trigger: ['blur', 'change'] },
+    ],
+    hospitalTime: [
+        { required: true, message: '请输入住院时间', trigger: ['blur', 'change'] },
+    ],
+})
+
+const formRef = ref()
+const formData = ref({
+    id: '',
+    userName: '',
+    name: '',
+    role: '',
+    mailbox: '',
+    phone: '',
+    enable: true,
+} as any)
+
+
+onMounted(() => {
+    resetData()
+})
+
+defineExpose({
+    formData,
+    resetData,
+})
+function close() {
+    emit('close')
+}
+function resetData() {
+    formRef.value.resetFields()
+    formData.value = {
+        id: '',
+        userName: '',
+        name: '',
+        role: '',
+        mailbox: '',
+        phone: '',
+        enable: true,
+    }
+}
+const saveData = async () => {
+    await formRef.value.validate((valid: any, fields: any) => {
+        if (valid) {
+            ElMessage.success('保存成功！')
+            close()
+        } else {
+            console.log('error submit!', fields)
+        }
+    })
+}
+</script>
+
+<style lang='scss' scoped>
+:deep(.el-form-item) {
+    .el-form-item__label {
+        display: block;
+        text-align: justify;
+        text-align-last: justify;
+        // padding: 0 10px 0 20px;
+
+        &:before {
+            display: none;
+        }
+    }
+}
+</style>

src/views/logs-manage/index.vue

@@ -1,14 +1,73 @@
 <template>
-    <div>
-        日志
+    <div class="permissions-manage-page">
+        <div class="menu-box">
+            <CommonMenu :menuData="menuData" @selectMenu="selectMenu" />
+        </div>
+        <div class="content-box">
+            <!-- <div class="header-box">
+                <PageTabs ref="pageTabsRef" />
+            </div> -->
+            <div class="main-box">
+                <div class="background-block">
+                    <RouterView />
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import type { MenuItem } from '@/utils/public-interface'
+import CommonMenu from '@/components/common-menu.vue'
+import PageTabs from '@/components/page-tabs.vue'
 
+const menuData = [
+    { name: '消息管理', path: '/logs-manage/message-manage' },
+    { name: '日志管理', path: '/logs-manage/logs-manage' }
+]
+
+const pageTabsRef = ref()
+const selectMenu = (e: MenuItem) => {
+    // pageTabsRef.value.setTab(e)
+}
 </script>
 
 <style lang='scss' scoped>
+.permissions-manage-page {
+    width: 100%;
+    height: 100%;
+    display: flex;
 
-</style>
+    .menu-box {
+        width: 200px;
+        height: 100%;
+        background: white;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    .content-box {
+        width: calc(100% - 200px);
+        height: 100%;
+
+        .header-box {
+            width: 100%;
+            height: 50px;
+        }
+
+        .main-box {
+            width: 100%;
+            // height: calc(100% - 50px);
+            height: 100%;
+            padding: 10px;
+            .background-block {
+                width: 100%;
+                height: 100%;
+                background: white;
+                border-radius: 15px;
+                padding: 20px;
+            }
+        }
+    }
+}</style>

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

@@ -0,0 +1,14 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>

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

@@ -0,0 +1,144 @@
+<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>