合作医院，表单数据深拷贝

src/static-data/core.ts

@@ -17,6 +17,15 @@ export const getDeptData = () => {
     return depts
 }
 
+export const getusers = () => {
+    const user = []
+    while (user.length < 50) {
+        user.push({ name: '管理员' + user.length, code: 'admin' + user.length })
+    }
+    return  user
+}
+
+// 病人名称数据
 export const getPatients = () => {
     const patients = []
     while (patients.length < 10000) {
@@ -24,6 +33,7 @@ export const getPatients = () => {
     }
     return patients
 }
+
 export const getNarcotismWay = () => {
     const narcotismWay = []
     while (narcotismWay.length < 10) {
@@ -32,6 +42,7 @@ export const getNarcotismWay = () => {
     }
     return narcotismWay
 }
+
 export const getFormTypes = () => {
     const types = [
         {name: '生命体征表单'},

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

@@ -121,7 +121,7 @@ const viewUserInfo = (e: any) => {
     formDialogTitle.value = '个人信息'
     setTimeout(() => {
         patientsFormRef.value.resetData()
-        patientsFormRef.value.formData = e
+        patientsFormRef.value.formData = JSON.parse(JSON.stringify(e))
     }, 0)
 }
 const viewSurgeryInfo = (e: any) => {

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

@@ -114,7 +114,7 @@ const editData = (e: any) => {
     formDialogTitle.value = '修改'
     setTimeout(() => {
         doctorFormRef.value.resetData()
-        doctorFormRef.value.formData = e
+        doctorFormRef.value.formData = JSON.parse(JSON.stringify(e))
     }, 0)
 }
 const tableRowClick = (row: any) => {

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

@@ -33,7 +33,7 @@
                 </el-form-item>
             </el-col>
             <el-col :span="12">
-                <el-form-item label="启用" prop="time">
+                <el-form-item label="启用" prop="enable">
                     <el-radio-group v-model="formData.enable">
                         <el-radio :label="true" border>有效</el-radio>
                         <el-radio :label="false" border>禁用</el-radio>

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

@@ -120,7 +120,7 @@ const editData = (e: any) => {
     formDialogTitle.value = '修改'
     setTimeout(() => {
         doctorFormRef.value.resetData()
-        doctorFormRef.value.formData = e
+        doctorFormRef.value.formData = JSON.parse(JSON.stringify(e))
     }, 0)
 }
 const tableRowClick = (row: any) => {

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

@@ -111,7 +111,7 @@ const editData = (e: any) => {
     formDialogTitle.value = '修改'
     setTimeout(() => {
         RoleFormRef.value.resetData()
-        RoleFormRef.value.formData = e
+        RoleFormRef.value.formData = JSON.parse(JSON.stringify(e))
     }, 0)
 }
 const tableRowClick = (row: any) => {

src/views/system-manage/form/doctor-form.vue

@@ -1,141 +0,0 @@
-<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() {
-    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/system-manage/form/hospital-form.vue

@@ -0,0 +1,166 @@
+<template>
+    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100" :disabled="type === 'view'" style="padding: 20px;">
+        <el-row>
+            <el-col :span="12">
+                <el-form-item label="医院名称" prop="name">
+                    <el-input v-model="formData.name" placeholder="请输入医院名称" :disabled="type === 'edit'"></el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="编码" prop="code">
+                    <el-input v-model="formData.code" placeholder="请输入编码"></el-input>
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="12">
+                <el-form-item label="开始时间" prop="startTime">
+                    <el-date-picker v-model="formData.startTime" type="datetime" format="YYYY-MM-DD HH:mm" placeholder="请输入开始时间" />
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="结束时间" prop="endTime">
+                    <el-date-picker v-model="formData.endTime" type="datetime" format="YYYY-MM-DD HH:mm" placeholder="请输入结束时间" />
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="12">
+                <el-form-item label="域名" prop="DNS">
+                    <el-input v-model="formData.DNS" placeholder="请输入域名"></el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="状态" prop="state">
+                    <el-radio-group v-model="formData.state">
+                        <el-radio label="正常" border>正常</el-radio>
+                        <el-radio label="冻结" border>冻结</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-divider border-style="dashed" />
+        <h3 class="main-color f20" style="margin: 10px 0 20px 0;">高级管理员</h3>
+        <el-row>
+            <el-col :span="12">
+                <el-form-item label="用户名" prop="admin.name">
+                    <el-select v-model="formData.admin.name" filterable placeholder="请输入选择姓名"
+                        remote :remote-method="remoteSearchName" @change="selectNameChange">
+                        <el-option v-for="(item, index) in userOption" :key="'name-' + index"
+                            :label="item.name" :value="item.code" />
+                    </el-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+            
+            </el-col>
+        </el-row>
+
+        <div style="position: absolute;bottom: 50px;right: 50px;" v-if="type !== 'view'">
+            <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'
+import { getusers } from '@/static-data/core'
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    type: String
+})
+const users = getusers()
+const rules = reactive({
+    name: [
+        { required: true, message: '请输入医院名称', trigger: ['blur', 'change'] },
+    ],
+})
+
+const formRef = ref()
+const formData = ref({
+    name: '',
+    code: '',
+    admin: {
+        userName: '',
+        name: '',
+        phone: '',
+    },
+    DNS: '',
+    startTime: '',
+    endTime: '',
+    state: ''
+} as any)
+const userOption = ref([] as any)
+
+
+onMounted(() => {
+    resetData()
+})
+
+defineExpose({
+    formData,
+    resetData,
+})
+function close() {
+    emit('close')
+}
+function resetData() {
+    formRef.value.resetFields()
+    formData.value = {
+        name: '',
+        code: '',
+        admin: {
+            userName: '',
+            name: '',
+            phone: '',
+        },
+        DNS: '',
+        startTime: '',
+        endTime: '',
+        state: ''
+    }
+}
+
+const remoteSearchName = (e: any) => {
+    if (e) {
+        userOption.value = users.filter((o: any) => o.name.indexOf(e) !== -1)
+    }
+}
+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;
+        }
+    }
+
+    .el-radio-group {
+        width: 100%;
+        justify-content: space-between;
+        .el-radio {
+            margin: 0;
+        }
+    }
+}
+</style>

src/views/system-manage/hospitals.vue

@@ -18,21 +18,23 @@
                 @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 property="name" label="医院名称" width="200" align="center" />
-                <el-table-column label="手机号" width="220" align="center">
+                <el-table-column property="code" label="编码" width="60" align="center" />
-                    <template #default="scope">{{ scope.row.phone.slice(0, 3) + '****' + scope.row.phone.slice(7)
+                <el-table-column label="高级管理员" width="200" align="center">
-                    }}</template>
+                    <template #default="scope">{{ scope.row.admin?.name}}</template>
                 </el-table-column>
-                <el-table-column property="role" label="角色" width="220" align="center" />
+                <el-table-column property="DNS" label="域名" width="200" align="center" />
-                <el-table-column label="启用" width="120" align="center">
+                <el-table-column label="开始时间" width="200" align="center">
-                    <template #default="scope">
+                    <template #default="scope">{{ dateFormater('yyyy-MM-dd HH:mm', scope.row.startTime) }}</template>
-                        <span @click.stop><el-switch v-model="scope.row.enable" @change="enableChange(scope.row)" /></span>
-                    </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="RefreshLeft" @click="resetPassword(scope.row)">密码</el-button>
+                            <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>
@@ -44,7 +46,12 @@
             <CommonPagination :total="100" @paginationChange="paginationChange" />
         </div>
     </div>
-    <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="40%"><DoctorForm ref="doctorFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" /></el-dialog>
+    <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>
@@ -52,10 +59,11 @@ 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 DoctorForm from './form/doctor-form.vue'
+import HospitalForm from './form/hospital-form.vue'
+import { dateFormater } from '@/utils/date-util'
 
 const tableRef = ref()
-const doctorFormRef = ref()
+const hospitalFormRef = ref()
 const isFormDialog = ref(false)
 const formDialogTitle = ref('')
 const queryParams = ref({
@@ -63,17 +71,23 @@ const queryParams = ref({
 } as any)
 const tableData = ref([] as any)
 
-queryData({userName: '测试'})
+queryData({ name: '测试' })
 
-function queryData (e: any) {
+function queryData(e: any) {
     tableData.value = []
     while (tableData.value.length < 10) {
         tableData.value.push({
-            userName: 'cscs',
+            name: e.name,
-            name: e.userName,
+            code: '',
-            phone: '12312345678',
+            admin: {
-            role: '高级管理员',
+                userName: 'admin',
-            enable: true,
+                name: '管理员',
+                phone: '12345678',
+            },
+            DNS: '***.****.***',
+            startTime: new Date(),
+            endTime: new Date(),
+            state: '正常'
         })
     }
 }
@@ -81,7 +95,7 @@ const addData = () => {
     isFormDialog.value = true
     formDialogTitle.value = '添加'
     setTimeout(() => {
-        doctorFormRef.value.resetData()
+        hospitalFormRef.value.resetData()
     }, 0)
 }
 const removeData = (e?: any) => {
@@ -92,20 +106,20 @@ const removeData = (e?: any) => {
         }
     })
 }
-const enableChange = (e: any) => {
+const viewData = (e: any) => {
-
+    isFormDialog.value = true
-}
+    formDialogTitle.value = '医院信息'
-const resetPassword = (e: any) => {
+    setTimeout(() => {
-    ElMessageBox.confirm('是否确定要重置密码？', '系统提醒', { type: 'warning' }).then(() => {
+        hospitalFormRef.value.resetData()
-        ElMessage.success('重置成功！')
+        hospitalFormRef.value.formData = JSON.parse(JSON.stringify(e))
-    }).catch(() => { })
+    }, 0)
 }
 const editData = (e: any) => {
     isFormDialog.value = true
     formDialogTitle.value = '修改'
     setTimeout(() => {
-        doctorFormRef.value.resetData()
+        hospitalFormRef.value.resetData()
-        doctorFormRef.value.formData = e
+        hospitalFormRef.value.formData = JSON.parse(JSON.stringify(e))
     }, 0)
 }
 const tableRowClick = (row: any) => {
@@ -116,7 +130,4 @@ const paginationChange = (page: number, size: number) => {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang='scss' scoped></style>
-
-
-</style>