✨ 角色管理

src/assets/css/global.scss

@@ -189,7 +189,12 @@ body {
         height: calc(100% - 170px);
         margin-top: 10px;
         .el-table {
+            color: $main-color;
             .el-table__header {
+                thead {
+                    color: $main-color;
+                    font-size: 16px;
+                }
                 th {
                     background: rgba($main-color, .05);
                 }

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

@@ -27,16 +27,16 @@
                 <el-table-column property="role" label="角色" width="220" align="center" />
                 <el-table-column label="启用" width="120" align="center">
                     <template #default="scope">
-                        <div @click.stop><el-switch v-model="scope.row.enable" @change="enableChange(scope.row)" /></div>
+                        <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">
-                        <div @click.stop>
+                        <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>
-                        </div>
+                        </span>
                     </template>
                 </el-table-column>
             </el-table>
@@ -46,7 +46,7 @@
         </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="#" />
+    <ImportDialog ref="importDialogRef" title="用户导入" templateUrl="#" importUrl="#" />
 </template>
 
 <script lang='ts' setup>
@@ -59,7 +59,7 @@ import ImportDialog from '@/components/import-dialog.vue'
 
 const tableRef = ref()
 const doctorFormRef = ref()
-const ImportDialogRef = ref()
+const importDialogRef = ref()
 const isFormDialog = ref(false)
 const formDialogTitle = ref('')
 const queryParams = ref({
@@ -98,7 +98,7 @@ const addData = () => {
 }
 const importData = () => {
     setTimeout(() => {
-        ImportDialogRef.value.open()
+        importDialogRef.value.open()
     }, 0);
 }
 const removeData = (e?: any) => {

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

@@ -66,19 +66,20 @@ const roleOption = [
 ]
 const rules = reactive({
     userName: [
-        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
     ],
     name: [
-        { required: true, message: '请输入姓名', trigger: 'blur' },
+        { required: true, message: '请输入姓名', trigger: ['blur', 'change'] },
     ],
     role: [
-        { required: true, message: '请选择角色', trigger: 'blur' },
+        { required: true, message: '请选择角色', trigger: ['blur', 'change'] },
     ],
     phone: [
-        { required: true, message: '请输入时间', trigger: 'blur' },
+        { required: true, message: '请输入电话', trigger: ['blur', 'change'] },
     ],
 })
 
+const formRef = ref()
 const formData = ref({
     id: '',
     userName: '',
@@ -112,9 +113,15 @@ function resetData() {
         enable: true,
     }
 }
-const saveData = () => {
-    ElMessage.success('保存成功！')
-    close()
+const saveData = async () => {
+    await formRef.value.validate((valid: any, fields: any) => {
+        if (valid) {
+            ElMessage.success('保存成功！')
+            close()
+        } else {
+            console.log('error submit!', fields)
+        }
+    })
 }
 </script>
 

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

@@ -0,0 +1,120 @@
+<template>
+    <el-dialog v-model="dialogVisible" width="30%">
+        <template #header>
+            <span class="el-dialog__title" style="margin-right: 50px;">授权权限</span>
+            <el-checkbox v-model="toggleExpand" @change="toggleExpandChange">展开 / 折叠</el-checkbox>
+            <el-checkbox v-model="toggleSelectAll" @change="toggleSelectAllChange">全选 / 全不选</el-checkbox>
+        </template>
+        <el-tree ref="treeRef" :key="treeKey" :props="props" :data="treeData" :default-expanded-keys="expandedKey" node-key="id"
+            show-checkbox @check-change="checkChange" />
+        <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>
+        </div>
+    </el-dialog>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const props = {
+    label: 'label',
+    children: 'children'
+}
+let treeIds: Array<string> = []
+let checkDatas: Array<any> = []
+
+const treeRef = ref()
+const treeKey = ref(0)
+const dialogVisible = ref(false)
+const toggleExpand = ref(false)
+const toggleSelectAll = ref(false)
+const treeData = ref()
+const expandedKey = ref<Array<string>>([])
+
+initTree()
+
+defineExpose({
+    open,
+    close,
+    initTree,
+})
+onMounted(() => {
+
+})
+
+function open() {
+    dialogVisible.value = true
+    setTimeout(() => {
+        setTreeChecked(['1-1-1'])
+    }, 0)
+}
+function close() {
+    dialogVisible.value = false
+}
+function initTree() {
+    treeData.value = [
+        {
+            id: '1', label: '权限管理', children: [
+                {
+                    id: '1-1', label: '医生管理', children: [
+                        { id: '1-1-1', label: '医生新增' },
+                        { id: '1-1-2', label: '医生删除' }
+                    ]
+                }
+            ]
+        },
+        {
+            id: '2', label: '患者管理', children: [
+                {
+                    id: '2-1', label: '医生管理', children: [
+                        { id: '2-1-1', label: '医生新增' }
+                    ]
+                }
+            ]
+        }
+    ]
+    treeIds = []
+    // 储存前两级id，全选、展开使用
+    for (let i = 0; i < treeData.value.length; i++) {
+        const levela = treeData.value[i]
+        treeIds.push(levela.id)
+        if (levela.children) {
+            for (let j = 0; j < levela.children.length; j++) {
+                const levelb = levela.children[j];
+                treeIds.push(levelb.id)
+            }
+        }
+    }
+}
+function setTreeChecked(e?: Array<any>) {
+    e && treeRef.value.setCheckedKeys(e)
+}
+
+const toggleExpandChange = (e: boolean) => {
+    if (e) expandedKey.value = JSON.parse(JSON.stringify(treeIds))
+    else {
+        expandedKey.value = []
+        const storeCheck = JSON.parse(JSON.stringify(checkDatas)) // 储存上次更新的值
+        treeKey.value++ // 刷新组件
+        setTimeout(() => {
+            setTreeChecked(storeCheck)
+        })
+        
+    }
+}
+const toggleSelectAllChange = (e: boolean) => {
+    if (!e) treeRef.value.setCheckedNodes(treeIds)
+    else treeRef.value.setCheckedKeys(treeIds)
+}
+const checkChange = () => {
+    checkDatas = treeRef.value.getCheckedKeys()
+}
+const updateData = () => {
+    ElMessage.success('更新成功')
+    close()
+}
+</script>
+
+<style lang='scss' scoped></style>

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

@@ -0,0 +1,106 @@
+<template>
+    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
+        <el-form-item label="角色名称" prop="roleName">
+            <el-input v-model="formData.roleName" placeholder="请输入角色名称"></el-input>
+        </el-form-item>
+        <el-form-item label="角色标识" prop="roleMark">
+            <el-input v-model="formData.roleMark" placeholder="请输入角色标识" :disabled="type === 'edit'"></el-input>
+        </el-form-item>
+        <el-form-item label="角色描述" prop="roleRemark">
+            <el-input v-model="formData.roleRemark" type="textarea" :rows="3" placeholder="请输入角色描述"></el-input>
+        </el-form-item>
+        <el-form-item label="数据权限" prop="dataPermissions">
+            <el-select v-model="formData.dataPermissions" placeholder="请选择角色">
+                <el-option v-for="item in dataPermissionsOption" :key="item.value" :label="item.label"
+                    :value="item.value" />
+            </el-select>
+        </el-form-item>
+
+        <div style="text-align: right;padding-top: 0;">
+            <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 dataPermissionsOption = [
+    { label: '全部', value: '全部' },
+]
+const rules = reactive({
+    roleName: [
+        { required: true, message: '请输入角色名称', trigger: ['blur', 'change'] },
+    ],
+    roleMark: [
+        { required: true, message: '请输入角色标识', trigger: ['blur', 'change'] },
+    ],
+    dataPermissions: [
+        { required: true, message: '请选择数据权限', trigger: ['blur', 'change'] },
+    ]
+})
+
+const formRef = ref()
+const formData = ref({
+    id: '',
+    roleName: '',
+    roleMark: '',
+    roleRemark: '',
+    dataPermissions: '',
+} as any)
+
+
+onMounted(() => {
+    resetData()
+})
+
+defineExpose({
+    formData,
+    resetData,
+})
+function close() {
+    emit('close')
+}
+function resetData() {
+    formData.value = {
+        id: '',
+        roleName: '',
+        roleMark: '',
+        roleRemark: '',
+        dataPermissions: '',
+    }
+}
+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/permissions-manage/role-manage.vue

@@ -1,15 +1,136 @@
 <template>
-    <div>
-        
+    <div class="table-page">
+        <div class="search-part">
+            <div class="search-cell">
+                <span class="label">角色名称</span>
+                <el-input v-model="queryParams.roleName" placeholder="请输入角色名称"></el-input>
+            </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">
+            <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
+                @row-click="tableRowClick">
+                <el-table-column type="selection" width="55" />
+                <el-table-column type="index" label="#" width="55" align="center" />
+                <el-table-column property="roleName" label="角色名称" width="120" align="center" />
+                <el-table-column property="roleMark" label="角色标识" width="180" align="center" />
+                <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>
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+                    <template #default="scope">
+                        <span @click.stop>
+                            <el-button link icon="RefreshLeft" @click="empower(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="30%"><RoleForm ref="RoleFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" /></el-dialog>
+    <ImportDialog ref="importDialogRef" title="角色导入" templateUrl="#" importUrl="#" />
+    <EmpowerDialog ref="empowerDialogRef" />
 </template>
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { dateFormater } from '@/utils/date-util'
+import { tableRemoveRow, exportData } from '@/utils/table-util'
+import CommonPagination from '@/components/common-pagination.vue'
+import RoleForm from './form/role-form.vue'
+import ImportDialog from '@/components/import-dialog.vue'
+import EmpowerDialog from './form/empower-dialog.vue'
 
+const tableRef = ref()
+const RoleFormRef = ref()
+const importDialogRef = ref()
+const empowerDialogRef = ref()
+const isFormDialog = ref(false)
+const formDialogTitle = ref('')
+const queryParams = ref({
+    roleName: ''
+} as any)
+const tableData = ref([] as any)
 
+while (tableData.value.length < 10) {
+    tableData.value.push({
+        roleName: '测试',
+        roleMark: 'ROLE_ADMIN',
+        roleRemark: '超级管理员',
+        dataPermissions: '全部',
+        createdTime: dateFormater('yyyy-MM-dd HH:mm:ss'),
+    })
+}
+
+const queryData = (e: any) => {
+    tableData.value = []
+    while (tableData.value.length < 10) {
+        tableData.value.push({
+            roleName: e.roleName,
+            roleMark: 'ROLE_ADMIN',
+            roleRemark: '超级管理员',
+            dataPermissions: '全部',
+            createdTime: dateFormater('yyyy-MM-dd HH:mm:ss'),
+        })
+    }
+}
+const addData = () => {
+    isFormDialog.value = true
+    formDialogTitle.value = '添加'
+    setTimeout(() => {
+        RoleFormRef.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 empower = (e: any) => {
+    setTimeout(() => {
+        empowerDialogRef.value.open()
+    })
+}
+const editData = (e: any) => {
+    isFormDialog.value = true
+    formDialogTitle.value = '修改'
+    setTimeout(() => {
+        RoleFormRef.value.resetData()
+        RoleFormRef.value.formData = e
+    }, 0)
+}
+const tableRowClick = (row: any) => {
+    tableRef.value.toggleRowSelection(row)
+}
+const paginationChange = (page: number, size: number) => {
+
+}
 </script>
 
 <style lang='scss' scoped>
 
+
 </style>