🚧

src/assets/css/global.scss

@@ -27,7 +27,7 @@ body {
     box-sizing: border-box;
 }
 
-[class^='icon-'] {
+[class*='icon-'] {
     font-family: "iconfont" !important;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
@@ -115,6 +115,22 @@ body {
     }
 }
 
+.number-input.el-input {
+    .el-input__wrapper {
+        position: relative;
+        &::after {
+            content: '';
+            position: absolute;
+            width: 30px;
+            top: 1px;
+            right: 11px;
+            bottom: 1px;
+            background: white;
+            z-index: 1;
+        }
+    }
+}
+
 .custom-tabs {
     position: relative;
     width: 100%;
@@ -180,7 +196,7 @@ body {
         margin-top: 20px;
         display: flex;
         align-items: center;
-        &>* ~ * {
+        & .el-button ~ .el-button {
             margin-left: 20px;
         }
     }

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

@@ -0,0 +1,138 @@
+<template>
+    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
+        <el-form-item label="类型" prop="type">
+            <el-radio-group v-model="formData.type" :disabled="type === 'edit'">
+                <el-radio label="菜单" border>菜单</el-radio>
+                <el-radio label="按钮" border>按钮</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item label="上级菜单" prop="fatherMenu">
+            <el-select v-model="formData.fatherMenu" placeholder="请选择上级菜单" clearable>
+                <el-option v-for="item in fatherMenuOption" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </el-form-item>
+        <el-form-item label="菜单名称" prop="menuName">
+            <el-input v-model="formData.menuName" placeholder="请输入菜单名称"></el-input>
+        </el-form-item>
+        <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.menuName" placeholder="请输入菜单名称"></el-input>
+        </el-form-item>
+        <el-form-item label="路由" prop="route">
+            <el-input v-model="formData.route" placeholder="请输入路由"></el-input>
+        </el-form-item>
+        <el-form-item label="排序" prop="order">
+            <el-input class="number-input" v-model="formData.order" type="number" input-style="text-align: center;" @change="numberInputChange">
+                <template #prepend>
+                    <el-button text icon="Minus" :disabled="formData.order <= 1" @click="formData.order--" />
+                </template>
+                <template #append>
+                    <el-button text icon="Plus" @click="formData.order++" />
+                </template>
+            </el-input>
+        </el-form-item>
+        <el-form-item label="是否显示" prop="isShow">
+            <el-radio-group v-model="formData.isShow">
+                <el-radio :label="true" border>是</el-radio>
+                <el-radio :label="false" border>否</el-radio>
+            </el-radio-group>
+        </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>
+
+    <el-dialog v-model="isIconDialog" title="选择图标" width="30%">
+        <div class="iconfont-box">
+            <div class="iconfont-item" v-for="item in iconfont.glyphs" :key="item.font_class">
+                <i :class="'icon-' + item.font_class"></i>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import iconfont from "@/assets/font/iconfont.json";
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    type: String
+})
+
+const fatherMenuOption = [
+    { label: '权限管理', value: '权限管理' },
+    { label: '患者管理', value: '患者管理' },
+]
+const rules = reactive({
+    menuName: [
+        { required: true, message: '请输入菜单名称', trigger: ['blur', 'change'] },
+    ],
+    route: [
+        { required: true, message: '请输入路由地址', trigger: ['blur', 'change'] },
+    ]
+})
+
+const formRef = ref()
+const isIconDialog = ref(false)
+const formData = ref({} as any)
+
+
+onMounted(() => {
+    resetData()
+    console.log(iconfont.glyphs)
+})
+
+defineExpose({
+    formData,
+    resetData,
+})
+function close() {
+    emit('close')
+}
+function resetData() {
+    formData.value = {
+        id: '',
+        type: '菜单',
+        fatherMenu: '',
+        menuName: '',
+        route: '',
+        order: 1,
+        isShow: true
+    }
+}
+
+const numberInputChange = (e: any) => {
+    if(!Number(e)) {
+        formData.value.order = 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;
+        }
+    }
+}
+</style>

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

@@ -1,15 +1,137 @@
 <template>
-    <div>
-        
+    <div class="table-page">
+        <div class="search-part">
+            <div class="search-cell">
+                <span class="label">菜单名称</span>
+                <el-input v-model="queryParams.menuName" 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" style="justify-content: space-between;">
+            <div>
+                <el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>
+                <el-button @click="expandTable">展开/折叠</el-button>
+            </div>
+            <el-button icon="Download" @click="exportData('角色数据', tableData)">导出</el-button>
+        </div>
+        <div class="table-part">
+            <el-table ref="tableRef" :data="tableData" row-key="id" height="100%" border show-overflow-tooltip
+                @row-click="tableRowClick">
+                <el-table-column property="menuName" label="菜单名称" width="120" align="center" />
+                <el-table-column property="order" label="排序" width="80" align="center" />
+                <el-table-column label="图标" width="80" align="center" >
+                    <template #default="scope"><i class="main-color" :class="scope.row.icon"></i></template>
+                </el-table-column>
+                <el-table-column property="route" label="路由" width="180" align="center" />
+                <el-table-column property="type" label="类型" width="180" align="center" />
+                <el-table-column label="操作" align="center">
+                    <template #default="scope">
+                        <span @click.stop>
+                            <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%"><MenuForm ref="doctorFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" /></el-dialog>
 </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 MenuForm from './form/menu-form.vue'
 
+let isExpand = false // 表格展开状态
 
+const tableRef = ref()
+const doctorFormRef = ref()
+const isFormDialog = ref(false)
+const formDialogTitle = ref('')
+const queryParams = ref({
+    menuName: ''
+} as any)
+const tableData = ref([] as any)
+
+while (tableData.value.length < 10) {
+    tableData.value.push({
+        id: tableData.value.length,
+        menuName: '权限管理',
+        order: tableData.value.length + 1,
+        icon: 'icon-shouye-zhihui',
+        route: '/permissions-manage',
+        type: '菜单',
+        children: [
+            {
+                id: tableData.value.length + '-1',
+                menuName: '权限管理',
+                order: tableData.value.length + 1,
+                icon: 'icon-shouye-zhihui',
+                route: '/permissions-manage',
+                type: '菜单',
+            }
+        ]
+    })
+}
+
+const queryData = (e: any) => {
+    tableData.value = []
+    while (tableData.value.length < 10) {
+        tableData.value.push({
+            id: tableData.value.length,
+            menuName: e.menuName,
+            order: tableData.value.length + 1,
+            icon: 'icon-shouye-zhihui',
+            route: '/permissions-manage',
+            type: '菜单',
+        })
+    }
+}
+const addData = () => {
+    isFormDialog.value = true
+    formDialogTitle.value = '添加'
+    setTimeout(() => {
+        doctorFormRef.value.resetData()
+    }, 0)
+}
+const expandTable = () => {
+    isExpand = !isExpand
+    tableData.value.forEach((row: any) => {
+        tableRef.value.toggleRowExpansion(row, isExpand)
+    })
+}
+const removeData = (e?: any) => {
+    const selectRow = e || tableRef.value.getSelectionRows()
+    tableRemoveRow({ data: selectRow }, (res: boolean) => {
+        if (res) {
+            console.log('调用删除', selectRow)
+        }
+    })
+}
+const editData = (e: any) => {
+    isFormDialog.value = true
+    formDialogTitle.value = '修改'
+    setTimeout(() => {
+        doctorFormRef.value.resetData()
+        doctorFormRef.value.formData = e
+    }, 0)
+}
+const tableRowClick = (row: any) => {
+    tableRef.value.toggleRowExpansion(row)
+}
+const paginationChange = (page: number, size: number) => {
+
+}
 </script>
 
 <style lang='scss' scoped>
 
+
 </style>