🚧

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

@@ -0,0 +1,140 @@
+<template>
+    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80">
+        <el-row>
+            <el-col :span="12">
+                <el-form-item label="用户名" prop="userName">
+                    <el-input v-model="formData.userName" placeholder="请输入用户名" :disabled="type === 'edit'"></el-input>
+                </el-form-item>
+            </el-col>
+            <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-row>
+        <el-row>
+            <el-col :span="12">
+                <el-form-item label="角色" prop="role">
+                    <el-select v-model="formData.role" placeholder="请选择角色">
+                        <el-option v-for="item in roleOption" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="邮箱" prop="mailbox">
+                    <el-input v-model="formData.mailbox" placeholder="请输入邮箱"></el-input>
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row>
+            <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="time">
+                    <el-radio-group v-model="formData.enable">
+                        <el-radio :label="true" border>有效</el-radio>
+                        <el-radio :label="false" border>禁用</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </el-col>
+        </el-row>
+
+        <div style="text-align: right;padding-top: 80px;">
+            <el-button class="f18" @click="close">取消</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'
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    type: String
+})
+
+const roleOption = [
+    { label: '普通用户', value: '普通用户' },
+    { label: '中级管理员', value: '中级管理员' },
+    { label: '高级管理员', value: '高级管理员' },
+]
+const rules = reactive({
+    userName: [
+        { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
+    ],
+    name: [
+        { required: true, message: '请输入姓名', trigger: ['blur', 'change'] },
+    ],
+    role: [
+        { required: true, message: '请选择角色', trigger: ['blur', 'change'] },
+    ],
+    phone: [
+        { 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() {
+    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/patients-manage/patients-manage.vue

@@ -1,14 +1,142 @@
 <template>
-    <div>
-        患者管理
+    <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="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="role" label="角色" width="220" align="center" />
+                <el-table-column label="启用" width="120" align="center">
+                    <template #default="scope">
+                        <span @click.stop><el-switch v-model="scope.row.enable" @change="enableChange(scope.row)" /></span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+                    <template #default="scope">
+                        <span @click.stop>
+                            <el-button link icon="RefreshLeft" @click="resetPassword(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-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 { 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 tableRef = ref()
+const patientsFormRef = ref()
+const importDialogRef = ref()
+const isFormDialog = ref(false)
+const formDialogTitle = ref('')
+const queryParams = ref({
+    userName: ''
+} as any)
+const tableData = ref([] as any)
+
+queryData({user: '测试', dept: getDeptData()[0].label})
+
+function queryData (e: any) {
+    tableData.value = []
+    while (tableData.value.length < 10) {
+        tableData.value.push({
+            userName: 'cscs',
+            name: e.userName,
+            phone: '12312345678',
+            role: '高级管理员',
+            enable: true,
+        })
+    }
+}
+
+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 enableChange = (e: any) => {
+
+}
+const resetPassword = (e: any) => {
+    ElMessageBox.confirm('是否确定要重置密码？', '系统提醒', { type: 'warning' }).then(() => {
+        ElMessage.success('重置成功！')
+    }).catch(() => { })
+}
+const editData = (e: any) => {
+    isFormDialog.value = true
+    formDialogTitle.value = '修改'
+    setTimeout(() => {
+        patientsFormRef.value.resetData()
+        patientsFormRef.value.formData = e
+    }, 0)
+}
+const tableRowClick = (row: any) => {
+    tableRef.value.toggleRowSelection(row)
+}
+const paginationChange = (page: number, size: number) => {
+
+}
 </script>
 
 <style lang='scss' scoped>
 
+
 </style>

src/views/patients-manage/surgery-info.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>