菜单页面增加权限控制按钮

src/theme/element.scss

@@ -20,6 +20,9 @@
 .el-button.el-button--text.el-button--small{
 	padding: 0;
 }
+.el-button.is-text.el-button--small{
+	padding: 0;
+}
 
 /* Input 输入框、InputNumber 计数器
 ------------------------------- */

src/views/system/menu/index.vue

@@ -42,14 +42,31 @@
         </el-table-column>
         <el-table-column prop="isHide" label="显示状态" align="center" width="120">
           <template #default="{row}">
-					{{row.isHide?'隐藏':'显示'}}
+            {{row.isHide?'隐藏':'显示'}}
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="140" align="center" fixed="right">
+        <el-table-column label="操作" width="160" align="center" fixed="right">
           <template #default="scope">
             <el-button v-if="!scope.row.menuType" size="small" type="text" @click="onOpenAddMenu(scope.row)">新增</el-button>
-            <el-button size="small" type="text" @click="onOpenEditMenu(scope.row)">修改</el-button>
-            <el-button size="small" type="text" @click="onTabelRowDel(scope.row)">删除</el-button>
+            <el-button size="small" text type="warning" @click="onOpenEditMenu(scope.row)">修改</el-button>
+            <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">删除</el-button>
+            <el-dropdown v-if="scope.row.menuType" size="small">
+              <el-button type="text" size="small" style="margin-top:1px;margin-left:10px">更多
+                <el-icon>
+                  <ele-ArrowDown />
+                </el-icon>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>按钮权限</el-dropdown-item>
+                  <el-dropdown-item>列表权限</el-dropdown-item>
+                  <el-dropdown-item>数据权限</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+              <!-- <el-dropdown-item @click.native="download(scope.row)" v-has="'btn_download'">
+                  下载代码
+                </el-dropdown-item> -->
+            </el-dropdown>
           </template>
         </el-table-column>
       </el-table>

src/views/system/role/component/editRole.vue

@@ -23,7 +23,7 @@
               <el-input v-model="formData.remark" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
             </el-form-item>
           </el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+          <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
             <el-form-item label="菜单权限">
               <el-row :gutter="35">
                 <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
@@ -36,7 +36,7 @@
                 </el-col>
               </el-row>
             </el-form-item>
-          </el-col>
+          </el-col> -->
         </el-row>
       </el-form>
       <template #footer>
@@ -70,7 +70,7 @@ interface DialogRow {
 	status: number;
 	listOrder: number;
 	remark: string;
-	menuIds: Array<number>;
+	// menuIds: Array<number>;
 }
 interface RoleState {
 	loading: boolean;
@@ -87,6 +87,16 @@ interface RoleState {
 	rules: object;
 }
 
+const baseForm = {
+	id: 0,
+	parentId: -1,
+	name: '',
+	status: 1,
+	listOrder: 0,
+	remark: '',
+	// menuIds: [],
+};
+
 export default defineComponent({
 	name: 'systemEditRole',
 	setup(props, { emit }) {
@@ -96,13 +106,7 @@ export default defineComponent({
 			loading: false,
 			isShowDialog: false,
 			formData: {
-				id: 0,
-				parentId: -1,
-				name: '',
-				status: 1,
-				listOrder: 0,
-				remark: '',
-				menuIds: [],
+				...baseForm,
 			},
 			// 表单校验
 			rules: {
@@ -147,7 +151,7 @@ export default defineComponent({
 			formWrap.validate((valid: boolean) => {
 				if (valid) {
 					state.loading = true;
-					state.formData.menuIds = getMenuAllCheckedKeys();
+					// state.formData.menuIds = getMenuAllCheckedKeys();
 					if (state.formData.id === 0) {
 						//添加
 						addRole(state.formData)
@@ -187,13 +191,7 @@ export default defineComponent({
 			state.menuExpand = false;
 			state.menuNodeAll = false;
 			state.formData = {
-				id: 0,
-				parentId: -1,
-				name: '',
-				status: 1,
-				listOrder: 0,
-				remark: '',
-				menuIds: [],
+				...baseForm
 			};
 		};
 		/** 树权限（展开/折叠）*/

src/views/system/role/index.vue

@@ -40,10 +40,10 @@
         </el-table-column>
         <el-table-column prop="remark" label="角色描述" show-overflow-tooltip></el-table-column>
         <el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
-        <el-table-column label="操作" width="100">
+        <el-table-column label="操作" width="160" align="center">
           <template #default="scope">
             <el-button size="small" type="text" @click="onOpenEditRole(scope.row)">修改</el-button>
-            <el-button size="small" type="text" @click="onRowDel(scope.row)">删除</el-button>
+            <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>