获取菜单

src/views/system/menu.vue

@@ -32,21 +32,15 @@
                 <span v-if="row.category === 1">菜单</span>
                 <span v-if="row.category === 2">按钮</span>
             </template>
-            <template #isShowButton="{row}">
-                <span v-if="row.isShowButton === 1">是</span>
-                <span v-if="row.isShowButton === 2">否</span>
-            </template>
             <template #action="{row, index}">
                 <el-button size="small" type="primary" @click="eidtMenu(row)">编辑</el-button>
-                <el-button size="small" type="primary" @click="addChildren(row)">新增子项</el-button>
+                <el-button size="small" type="success" @click="addChildren(row)">新增子项</el-button>
             </template>
         </HcTable>
 
         <!--菜单新增编辑-->
-        <HcDialog bgColor="#ffffff" isToBody :show="menuDataModal"
-                  :title="formModel.id?'编辑菜单':'修改菜单'"
-                  @close="menuDataModalClose" widths="70rem"
-                  @save="menuDataModalSave"
+        <HcDialog bgColor="#ffffff" isToBody widths="60rem" :title="formModel.id?'编辑菜单':'修改菜单'"
+                  :show="menuDataModal" @save="menuDataModalSave" @close="menuDataModalClose"
         >
             <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
                 <el-row :gutter="20">
@@ -60,16 +54,13 @@
                         <el-form-item label="菜单编号:" prop="code">
                             <el-input v-model="formModel.code" placeholder="路由中的跳转name"/>
                         </el-form-item>
-                        <el-form-item label="菜单类型:">
-                            <el-radio-group v-model="formModel.category">
-                                <el-radio :label="1">菜单</el-radio>
-                                <el-radio :label="2">按钮</el-radio>
-                            </el-radio-group>
+                        <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 size="large"/>
+                            <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="图标库为 ">
@@ -78,13 +69,13 @@
                                 </template>
                             </el-input>
                         </el-form-item>
-                        <el-form-item label="排序:">
-                            <el-input v-model="formModel.sort" placeholder="菜单的排序，值越大越后"/>
+                        <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.isShowButton">
-                                <el-radio :label="1">是</el-radio>
-                                <el-radio :label="2">否</el-radio>
+                        <el-form-item label="菜单类型:">
+                            <el-radio-group v-model="formModel.category">
+                                <el-radio :label="1">菜单</el-radio>
+                                <el-radio :label="2" class="ml-6">按钮</el-radio>
                             </el-radio-group>
                         </el-form-item>
                     </el-col>
@@ -110,11 +101,11 @@ onActivated(() => {
 const searchForm = ref({name: '', parentId: ''})
 const tableColumn = [
     {key: 'name', name: '菜单名称'},
-    {key: 'code', name: '菜单编号'},
+    {key: 'code', name: '菜单编号', width: 180},
     {key: 'path', name: '路由地址'},
-    {key: 'category', name: '菜单类型'},
-    {key: 'isShowButton', name: '显示按钮', width: 90, align: 'center' },
+    {key: 'category', name: '菜单类型', width: 90, align: 'center'},
     {key: 'sort', name: '排序', width: 80, align: 'center' },
+    {key: 'remark', name: '菜单备注' },
     {key: 'action', name: '操作', width: 165}
 ]
 const tableData = ref([])
@@ -157,9 +148,7 @@ const deleteApi = async (ids) => {
 //菜单数据弹窗
 const menuDataModal = ref(false)
 const formRef = ref(null)
-const formModel = ref({
-    category: 1, isShowButton: 1
-})
+const formModel = ref({category: 1})
 const formRules = {
     name: {required: true, trigger: 'blur', message: "请输入菜单名称"},
     path: {required: true, trigger: 'blur', message: "请输入路由地址"},
@@ -180,7 +169,6 @@ const addMenu = () => {
         isOpen: 1,
         isLayout: 1,
         category: 1,
-        isShowButton: 1,
         parentId: 0
     }
     menuDataModal.value = true
@@ -199,7 +187,6 @@ const addChildren = (row) => {
         isOpen: 1,
         isLayout: 1,
         category: 1,
-        isShowButton: 1,
         parentId: row.id
     }
     menuDataModal.value = true