菜单管理

src/views/system/menu.vue

@@ -1,13 +1,201 @@
 <template>
-    <div class="home-styles-box">
-        菜单管理
-    </div>
+        <HcCard actionSize="lg" scrollbar>
+            <template #header>
+                <div class="w-64 ml-3">
+                        <el-input v-model="searchForm.name" size="large" placeholder="请输入菜单名称搜索" clearable />
+                    </div>
+                <div class="ml-3">
+                        <el-button type="primary" @click="searchClick"  size="large">
+                            <HcIcon name="search-2"/>
+                            <span>搜索</span>
+                        </el-button>
+                </div>
+            </template>
+            <template #extra>
+                <div class="ml-2">
+                        <el-button type="primary" @click="addClick"  size="large">
+                            <span>新增</span>
+                        </el-button>
+                </div>
+                <div class="ml-2">
+                        <el-button type="danger" @click="cancelClick"  size="large" :disabled="tableCheckedKeys.length <= 0">
+                            <span>删除</span>
+                        </el-button>
+                </div>
+            </template>
+                <HcTable :column="tableColumn" :datas="tableData" isCheck @selection-change="tableSelectionChange" >
+                    <template #name="{row}">{{ row['name'] }}</template>
+                    <template #text="{row}">{{ row['text'] }}</template>
+                    <template #color="{row}">{{ row['color'] }}</template>
+                    <template #action="{row, index}">
+                        <el-button size="small" type="primary" @click="eidtModal">编辑</el-button>
+                        <el-button size="small" type="primary" @click="eidtModal">新增子项</el-button>
+                    </template>
+                </HcTable>
+
+            <template #action>
+                <HcPages :pages="searchForm" @change="pageChange"></HcPages>
+            </template>
+            <HcDialog :show="addModal" :title="modalTitle+'菜单'" @close="addModalClose"  widths="80rem">
+                <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left"
+                             size="large">
+                        <el-row :gutter="20">
+                            <el-col :span="12">
+                                <el-form-item label="菜单名称">
+                                    <el-input v-model="formModel.name" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="菜单类型">
+                                    <el-radio-group v-model="formModel.type">
+                                        <el-radio :label="3">菜单</el-radio>
+                                        <el-radio :label="6">按钮</el-radio>
+                                    </el-radio-group>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="路由地址">
+                                    <el-input v-model="formModel.idNumber"  placeholder=""/>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="是否显示按钮">
+                                    <el-radio-group v-model="formModel.type">
+                                        <el-radio :label="3">是</el-radio>
+                                        <el-radio :label="6">否</el-radio>
+                                    </el-radio-group>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="上级菜单">
+                                   
+                                        <el-select v-model="formModel.top" class="m-2" placeholder="请选择" size="large" style="width:100%">
+                                            <el-option
+                                            v-for="item in topMenuoptions"
+                                            :key="item.value"
+                                            :label="item.label"
+                                            :value="item.value"
+                                            />
+                                        </el-select>
+                                    
+                                  
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="菜单编号">
+                                    <el-input v-model="formModel.deptId"  placeholder=""/>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="菜单图标">
+                                    <el-input v-model="formModel.deptId"  placeholder=""/>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="排序">
+                                    <el-input v-model="formModel.deptId"  placeholder=""/>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+
+          
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button size="large" @click="addModal = false">
+                        <HcIcon name="close"/>
+                        <span>取消</span>
+                    </el-button>
+                    <el-button :loading="sureSignUserLoading" hc-btn type="primary" @click="sureSignUserClick">
+                        <HcIcon name="check"/>
+                        <span>确定创建</span>
+                    </el-button>
+                </div>
+            </template>
+        </HcDialog>
+         </HcCard>
+
+       
+
+
 </template>
 
 <script setup>
 import {ref, watch} from "vue";
 import {useAppStore} from "~src/store";
 
+const searchForm = ref({
+ name:'',
+    current: 1, size: 20, total: 0
+})
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+const searchClick=()=>{
+
+}
+const tableColumn = [
+    {key: 'name', name: '菜单名称'},
+    {key: 'name', name: '路由地址'},
+    {key: 'name', name: '菜单编号'},
+    {key: 'text', name: '菜单图标'},
+    {key: 'text', name: '菜单类型'},
+    {key: 'text', name: '是否显示按钮'},
+    {key: 'text', name: '排序'},
+    {key: 'text', name: '上级菜单'},
+    {key: 'action', name: '操作', width: 200}
+   
+]
+const tableData = ref([
+    {name: '名称1', text: '文本1', color: 'red'},
+    {name: '名称2', text: '文本2', color: 'blue'},
+    {name: '名称3', text: '文本3', color: '无'}
+])
+const tableCheckedKeys = ref([]);
+const tableSelectionChange = (rows) => {
+    tableCheckedKeys.value = rows
+    if(tableCheckedKeys.value.length>1){
+        window.$message.warning('只能选择一条数据')
+    }
+}
+const modalTitle=ref('新增')
+const addModal=ref(false)
+//弹窗关闭
+const addModalClose = () => {
+    console.log('弹窗关闭')
+   addModal.value = false
+}
+const addClick=()=>{
+    addModal.value = true
+    modalTitle.value='新增'
+}
+const cancelClick=()=>{
+    window?.$messageBox?.alert('您确定要删除该菜单信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
+        showCancelButton: true,
+        confirmButtonText: '确认注销',
+        cancelButtonText: '取消',
+        type: 'warning',
+        callback: (action) => {
+            if (action === 'confirm') {
+                console.log(11111);
+            }
+        }
+    })
+}
+const sureSignUserLoading=ref(false)
+const sureSignUserClick=()=>{
+
+}
+const eidtModal=()=>{
+    modalTitle.value='编辑'
+     addModal.value = true
+}
+const formRef=ref(null)
+const formModel=ref({})
+const formRules=ref({})
+const topMenuoptions=ref([])
 </script>
 
 <style lang="scss" scoped>