✨ 医生管理，添加xlxs包

package.json

@@ -17,7 +17,8 @@
     "sass": "^1.58.3",
     "slider-verify-v3": "^1.1.11",
     "vue": "^3.2.45",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@types/node": "^18.11.12",

src/assets/css/animastore.css

@@ -963,14 +963,39 @@
 }
 
 .swing_skew_1 {
-    animation: swing_skew_1 1s ease;
+    animation: swing_skew_1 1.5s ease;
     transform-origin: 0% 100%;
 }
 
 @keyframes swing_skew_1 {
     0% {
         opacity: 0;
-        transform: translateX(400px) skew(-45deg)
+        transform: translateX(100%) skew(-45deg)
+    }
+
+    30% {
+        opacity: 1;
+        transform: translateX(0) skew(8deg);
+    }
+
+    50% {
+        transform: translateX(0) skew(-3deg);
+    }
+
+    70% {
+        transform: translateX(0) skew(1deg);
+    }
+}
+
+.swing_skew_2 {
+    animation: swing_skew_2 1.5s ease;
+    transform-origin: 0% 100%;
+}
+
+@keyframes swing_skew_2 {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%) skew(-45deg)
     }
 
     30% {

src/assets/css/custom-element.scss

@@ -33,6 +33,9 @@
     &:focus {
         color: rgba($main-color, .7);
     }
+    &:focus-visible {
+        outline: 0;
+    }
 }
 .el-button.el-button--primary {
     background-color: $main-color;
@@ -61,6 +64,7 @@
 }
 
 .el-dialog {
+    border-radius: 20px;
     .el-dialog__header {
         padding: 30px 30px 0 30px;
         .el-dialog__headerbtn {

src/components/import-dialog.vue

@@ -0,0 +1,67 @@
+<template>
+    <el-dialog v-model="dialogVisible" :title="title" width="30%">
+        <el-upload v-model:file-list="fileList" drag accept=".xls, .xlsx" :auto-upload="false" :limit="1">
+            <div class="el-upload__text">
+                将文件拖到此处，或 <em>点击上传</em>
+            </div>
+            <template #tip>
+                <div class="el-upload__tip">
+                    仅允许导入xls、xlsx格式文件。<span class="main-color" style="cursor: pointer;"
+                        @click="downloadTemplate">下载模板</span>
+                </div>
+            </template>
+        </el-upload>
+
+        <div style="text-align: right;margin-top: 20px;">
+            <el-button class="f18" @click="dialogVisible = false">取消</el-button>
+            <el-button class="f18" type="primary" @click="importData">确认</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import type { UploadProps, UploadUserFile } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const emit = defineEmits(['success', 'error'])
+
+const props = defineProps({
+    title: String,
+    templateUrl: String, // 模板下载地址
+    importUrl: String, // 上传接口地址
+})
+
+const dialogVisible = ref(false)
+const fileList = ref<UploadUserFile[]>([])
+
+defineExpose({
+    open,
+    close
+})
+
+function open() {
+    dialogVisible.value = true
+}
+function close() {
+    dialogVisible.value = false
+}
+
+const downloadTemplate = () => {
+    window.open(props.templateUrl, '_blank')
+}
+const importData = () => {
+    console.log(fileList.value)
+    if(fileList.value.length === 0) {
+        ElMessage.warning('请上传符合格式的xls或xlsx文件')
+        return
+    }
+    ElMessage.success('上传成功')
+    close()
+    emit('success')
+    // emit('error')
+}
+
+</script>
+
+<style lang='scss' scoped></style>

src/utils/table-util.ts

@@ -0,0 +1,50 @@
+import * as XLSX from "xlsx"
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+export const tableRemoveRow = (params: any, callback: (res: boolean) => void) => {
+    if (!params.data) params.data = []
+    if (Array.isArray(params.data)) {
+        if (params.data.length < 1) {
+            ElMessageBox.alert('请至少选择一条数据进行删除', '系统提醒', { type: 'warning' })
+            return callback(false)
+        }
+        ElMessageBox.confirm(
+            params.batchRemoveTip || '是否确认删除选中的' + params.data.length + '条数据？此操作将永久删除',
+            '系统提醒',
+            {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }
+        ).then(() => {
+            ElMessage.success('删除成功！')
+            callback(true)
+        }).catch(() => {
+            callback(false)
+        })
+    } else {
+        ElMessageBox.confirm(
+            params.removeTip || '此操作将永久删除',
+            '系统提醒',
+            {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }
+        ).then(() => {
+            ElMessage.success('删除成功！')
+            callback(true)
+        }).catch(() => {
+            callback(false)
+        })
+    }
+}
+
+export const exportData = (fileName: string, data: Array<any>) => {
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(
+        wb,
+        XLSX.utils.json_to_sheet(data)
+    );
+    XLSX.writeFile(wb, fileName + '.xls'); // 导出Excel
+}

src/views/home/home.vue

@@ -2,7 +2,7 @@
     <div class="home-page">
         <div class="background-box">
             <div class="left-content">
-                <div class="header-box move_4">
+                <div class="header-box swing_skew_1">
                     <div class="header-item =">
                         <span class="main-color f20" style="font-weight: 600;">{{ userInfo.name }}</span>
                         <span class="text2-color f14">{{ userInfo.permissions }}</span>
@@ -18,10 +18,10 @@
                     </div>
                 </div>
                 <div class="echart-box">
-                    <div class="echart-item move_2">
+                    <div class="echart-item swing_skew_2">
                         <NumberChart />
                     </div>
-                    <div class="echart-item move_4">
+                    <div class="echart-item swing_skew_1">
                         <TimeChart />
                     </div>
                 </div>

src/views/home/record-form.vue

@@ -57,7 +57,7 @@ const rules = reactive({
         { required: true, message: '请选择类型', trigger: 'blur' },
     ],
     state: [
-        { required: true, message: '请选中状态', trigger: 'blur' },
+        { required: true, message: '请选择状态', trigger: 'blur' },
     ],
     date: [
         { required: true, message: '请输入日期', trigger: 'blur' },

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

@@ -5,32 +5,38 @@
                 <span class="label">用户名</span>
                 <el-input v-model="queryParams.userName" placeholder="请输入用户名"></el-input>
             </div>
-            <el-button type="primary" icon="Search">查询</el-button>
-            <el-button icon="Refresh">重置</el-button>
+            <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">新增</el-button>
-            <el-button icon="FirstAidKit">导入</el-button>
-            <el-button icon="Delete">删除</el-button>
-            <el-button icon="Download">导出</el-button>
+            <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>
+            <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>
+            <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>
+                    <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"><el-switch v-model="scope.row.enable" /></template>
+                    <template #default="scope">
+                        <div @click.stop><el-switch v-model="scope.row.enable" @change="enableChange(scope.row)" /></div>
+                    </template>
                 </el-table-column>
                 <el-table-column label="操作" align="center">
                     <template #default="scope">
-                        <el-button link icon="RefreshLeft">密码</el-button>
-                        <el-button link icon="EditPen">修改</el-button>
-                        <el-button link icon="Delete">删除</el-button>
+                        <div @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>
+                        </div>
                     </template>
                 </el-table-column>
             </el-table>
@@ -39,15 +45,26 @@
             <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>
+    <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 DoctorForm from './form/doctor-form.vue'
+import ImportDialog from '@/components/import-dialog.vue'
 
+const tableRef = ref()
+const doctorFormRef = ref()
+const ImportDialogRef = ref()
+const isFormDialog = ref(false)
+const formDialogTitle = ref('')
 const queryParams = ref({
     userName: ''
-})
+} as any)
 const tableData = ref([] as any)
 
 while (tableData.value.length < 10) {
@@ -60,9 +77,63 @@ while (tableData.value.length < 10) {
     })
 }
 
+const 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(() => {
+        doctorFormRef.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(() => {
+        doctorFormRef.value.resetData()
+        doctorFormRef.value.formData = e
+    }, 0)
+}
+const tableRowClick = (row: any) => {
+    tableRef.value.toggleRowSelection(row)
+}
 const paginationChange = (page: number, size: number) => {
 
 }
 </script>
 
-<style lang='scss' scoped></style>
+<style lang='scss' scoped>
+
+
+</style>

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

@@ -0,0 +1,133 @@
+<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' },
+    ],
+    name: [
+        { required: true, message: '请输入姓名', trigger: 'blur' },
+    ],
+    role: [
+        { required: true, message: '请选择角色', trigger: 'blur' },
+    ],
+    phone: [
+        { required: true, message: '请输入时间', trigger: 'blur' },
+    ],
+})
+
+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 = () => {
+    ElMessage.success('保存成功！')
+    close()
+}
+</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/permissions-manage/permissions-manage.vue

@@ -30,7 +30,6 @@ const menuData = [
 
 const pageTabsRef = ref()
 const selectMenu = (e: MenuItem) => {
-    console.log(e)
     pageTabsRef.value.setTab(e)
 }
 </script>