菜单管理页面

src/views/system/menu.vue

@@ -1,11 +1,223 @@
+<!--  -->
 <template>
-    <div>菜单管理</div>
+    <div class="hc-layout-box menu-page">
+        <hc-card :scrollbar="false" action-size="lg">
+            <template #header>
+                <el-button color="#20C98B" type="primary" @click="addMenu">
+                    <hc-icon name="add" class="text-white" />
+                    <span class="text-white">新增</span>
+                </el-button>
+            
+                <el-button color="#FF6C6C" :disabled="tableCheckedKeys.length === 0" @click="rowDelClick">
+                    <hc-icon name="delete-bin-2" class="text-white" />
+                    <span class="text-white">删除</span>
+                </el-button>
+            </template>
+            <template #extra>
+                <el-input v-model="searchForm.queryValue" placeholder="请输入菜单名称搜索" clearable />
+                <el-button color=" #4b4b4b" type="primary" class="ml-2">
+                    <hc-icon name="search" class="text-white" />
+                    <span class="text-white">搜索</span>
+                </el-button>
+            </template>
+            <hc-table 
+                is-check
+                :column="tableColumn"
+                :datas="tableData" 
+                :header-row-style="tableHeaderRowStyle"
+            
+                @selection-change="tableSelectionChange"
+            >
+                <template #action="{ row }">
+                    <el-link type="success" @click="eidtMenu(row)">   <hc-icon name="edit" />编辑</el-link>
+                    <el-link type="success" @click="addChildren(row)">   <hc-icon name="edit" />新增子项</el-link>
+                    <el-link type="success" @click="copyChildren(row)">  <hc-icon name="file-copy" />复制</el-link>
+                </template>
+            </hc-table>
+            <template #action>
+                <HcPages :pages="searchForm" @change="pageChange" />
+            </template>
+        </hc-card>
+    </div>
+    <!-- 菜单新增编辑 -->
+    <hc-dialog
+        v-model="menuDataModal" bg-color="#ffffff" is-to-body widths="60rem"
+        :title="isCopy ? '复制菜单数据' : formModel.id ? '编辑菜单' : '修改菜单'" @save="menuDataModalSave" @close="menuDataModalClose"
+    >
+        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="菜单名称:" prop="name">
+                        <el-input v-model="formModel.name" placeholder="六字以内的名称" />
+                    </el-form-item>
+                    <el-form-item label="路由地址:" prop="path">
+                        <el-input v-model="formModel.path" placeholder="url上显示的地址" />
+                    </el-form-item>
+                    <el-form-item label="菜单编号:" prop="code">
+                        <el-input v-model="formModel.code" placeholder="路由中的跳转name" />
+                    </el-form-item>
+                    <el-form-item label="菜单备注:">
+                        <el-input v-model="formModel.remark" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="上级菜单:">
+                        <el-cascader v-model="formModel.parentId" :options="tableData" :props="topMenuoptions" clearable />
+                    </el-form-item>
+                    <el-form-item label="菜单图标:">
+                        <el-input v-model="formModel.source" placeholder="图标库为 ">
+                            <template #append>
+                                <a href="https://remixicon.cn/" target="_blank">图标库</a>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="菜单排序:">
+                        <el-input-number v-model="formModel.sort" :min="1" :max="10" controls-position="right" />
+                    </el-form-item>
+                    <el-form-item label="菜单类型:">
+                        <el-radio-group v-model="formModel.category">
+                            <el-radio :value="1">
+                                菜单
+                            </el-radio>
+                            <el-radio :value="2" class="ml-6">
+                                按钮
+                            </el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+    </hc-dialog>
 </template>
+   
+   <script setup>
+   import { ref, watch } from 'vue'
+   import { HcDelMsg } from 'hc-vue3-ui'
+   import config from '~src/config/index'
+   const tableColumn = [
+   { key: 'name', name: '菜单名称', minWidth: 260 },
+    { key: 'code', name: '菜单编号', width: 240 },
+    { key: 'path', name: '路由地址', minWidth: 220 },
+    { key: 'category', name: '菜单类型', width: 90, align: 'center' },
+    { key: 'sort', name: '排序', width: 80, align: 'center' },
+    { key: 'remark', name: '备注', minWidth: 200 },
+    { key: 'action', name: '操作', width: 240, align: 'center', fixed:'right' },
+   ]
+   const tableData = ref([
+       { key1: 'admin', key2: 'xxx', key3: '超级管理员' },
+       { key1: '13028304756', key2: 'aaa', key3: '角色' },
+   ])
+   //设置表头行的样式
+   const tableHeaderRowStyle = ({ row, rowIndex }) => {
+       // --el-table-header-bg-color 是表格,表头行的背景色
+       return '--el-table-header-bg-color: #4b4b4b;  color: white;'
+   }
 
-<script setup>
 
-</script>
 
-<style scoped lang="scss">
 
+const tableCheckedKeys = ref([])
+ //多选事件
+const tableSelectionChange = (rows) => {
+    tableCheckedKeys.value = rows
+}
+//搜索表单
+const searchForm = ref({
+    queryValue: null, current: 1, size: 20, total: 0,
+})
+const getTableData = ()=>{
+    
+}
+//分页被点击
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+//菜单数据弹窗
+const isCopy = ref(false)
+const menuDataModal = ref(false)
+const formRef = ref(null)
+const formModel = ref({ category: 1 })
+const formRules = {
+    name: { required: true, trigger: 'blur', message: '请输入菜单名称' },
+    path: { required: true, trigger: 'blur', message: '请输入路由地址' },
+    code: { required: true, trigger: 'blur', message: '请输入菜单编号' },
+}
+const topMenuoptions = {
+    checkStrictly: true,
+    emitPath: false,
+    value: 'id',
+    label: 'name',
+}
+//编辑菜单
+const eidtMenu = (row) => {
+    formModel.value = {
+        ...row,
+        children: null,
+    }
+    isCopy.value = false
+    menuDataModal.value = true
+}
+//新增菜单
+const addMenu = () => {
+    formModel.value = {
+        sysId: config.sysId,
+        isOpen: 1,
+        isLayout: 1,
+        category: 1,
+        parentId: 0,
+        sort: 1,
+    }
+    isCopy.value = false
+    menuDataModal.value = true
+}
+const copyChildren = (row) => {
+    formModel.value = {
+        ...row,
+        children: null,
+        id: '',
+    }
+    isCopy.value = true
+    menuDataModal.value = true
+}
+const rowDelClick = ()=>{
+    HcDelMsg( async ( resolve) => {
+            // await removeContractTreeNode()
+            resolve() //关闭弹窗的回调
+    })
+}
+//新增子级菜单
+const addChildren = (row) => {
+    formModel.value = {
+        sysId: config.sysId,
+        isOpen: 1,
+        isLayout: 1,
+        category: 1,
+        parentId: row.id,
+        sort: 1,
+    }
+    isCopy.value = false
+    menuDataModal.value = true
+}
+const menuDataModalSave = ()=>{
+
+}
+const menuDataModalClose = ()=>{
+
+}
+</script>
+
+ <style lang='scss' scoped>
+.hc-layout-box{
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
 </style>
+
+<style>
+.menu-page .el-table {
+   color:black
+}
+</style>

src/views/system/role.vue

@@ -135,34 +135,9 @@ const rowDelClick = ()=>{
             resolve() //关闭弹窗的回调
     })
 }
-const refreshPassword = async (_, resolve) => {
-    //这里可以写一些操作
-    resolve() //这个一定要存在，否则不会关闭弹窗
-}
-const exportClick = async (_, resolve) => {
-    //这里可以写一些操作
-    resolve() //这个一定要存在，否则不会关闭弹窗
-}
-const roleOptions = ref([ {
-    value: 'Option1',
-    label: 'Option1',
-  },
-  {
-    value: 'Option2',
-    label: 'Option2',
-  },
-  {
-    value: 'Option3',
-    label: 'Option3',
-  },
-  {
-    value: 'Option4',
-    label: 'Option4',
-  },
-  {
-    value: 'Option5',
-    label: 'Option5',
-  }])
+
+
+
 
   const treeRef = ref(null)