From 4476dfa3367ca1616aca16d7cb04737b18424258 Mon Sep 17 00:00:00 2001
From: fengyuan_yang <1976974459@qq.com>
Date: Tue, 31 Mar 2026 10:10:37 +0800
Subject: [PATCH] =?UTF-8?q?2026-03-31=20=E8=A7=92=E8=89=B2=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=E3=80=90=E6=9D=83=E9=99=90=E6=8E=88?=
 =?UTF-8?q?=E6=9D=83=E3=80=91=E5=AF=B9=E8=AF=9D=E6=A1=86=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/sys/role-add-or-update.vue | 162 +++++++++++--------
 1 file changed, 95 insertions(+), 67 deletions(-)

diff --git a/src/views/modules/sys/role-add-or-update.vue b/src/views/modules/sys/role-add-or-update.vue
index c1d57fb..28debad 100644
--- a/src/views/modules/sys/role-add-or-update.vue
+++ b/src/views/modules/sys/role-add-or-update.vue
@@ -1,52 +1,59 @@
 <template>
-  <el-dialog class="sl-menu-item" width="900px" :title="!dataForm.id ? buttons.add :buttons.edit " :close-on-click-modal="false" :visible.sync="visible">
+  <el-dialog class="sl-menu-item custom-role-dialog" width="900px" :title="!dataForm.id ? buttons.add :buttons.edit " :close-on-click-modal="false" :visible.sync="visible">
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-      <el-row>
-        <el-col :span="12">
-          <el-form-item :label="buttons.roleName||'角色名称'" prop="roleName">
-            <el-input style="width: 100%" v-model="dataForm.roleName"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item :label="buttons.remark||'备注'" prop="remark">
-            <el-input style="width: 100%" v-model="dataForm.remark" placeholder="备注"></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-form-item size="mini" :label="buttons.authorize||'授权'">
-        <el-row>
-          <el-col :span="24">
-            <el-input
-              placeholder="输入关键字进行过滤"
-              v-model="filterText"
-              clearable
-              style="margin-bottom: 10px; width: 100%;">
-            </el-input>
+      <div class="form-section">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="buttons.roleName||'角色名称'" prop="roleName">
+              <el-input style="width: 100%" v-model="dataForm.roleName" placeholder="请输入角色名称"></el-input>
+            </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
-          <el-col class="down-tree" :span="24">
-            <el-tree
-              :data="menuList"
-              :props="menuListTreeProps"
-              node-key="menuId"
-              ref="menuListTree"
-              :default-expand-all="false"
-              :filter-node-method="filterNode"
-              @check="handleTreeCheck"
-              show-checkbox>
-              <span class="custom-tree-node" slot-scope="{ node, data }" style="display: flex; align-items: center; width: 100%;">
-                <span style="margin-right: 20px; white-space: nowrap;">{{ node.label }}</span>
-                <span v-if="data.buttonList && data.buttonList.length > 0" style="flex: 1; overflow-x: auto;">
-                  <el-checkbox-group v-model="data.checkedButtons" @change="handleButtonChange(data)" @click.native.stop style="display: inline-block;">
-                    <el-checkbox v-for="btn in data.buttonList" :key="btn.menuId" :label="Number(btn.menuId)">{{ btn.name }}</el-checkbox>
-                  </el-checkbox-group>
-                </span>
-              </span>
-            </el-tree>
+          <el-col :span="12">
+            <el-form-item :label="buttons.remark||'备注'" prop="remark">
+              <el-input style="width: 100%" v-model="dataForm.remark" placeholder="请输入备注信息"></el-input>
+            </el-form-item>
           </el-col>
         </el-row>
-      </el-form-item>
+      </div>
+
+      <div class="auth-section">
+        <el-form-item size="mini" :label="buttons.authorize||'权限授权'">
+          <el-row>
+            <el-col :span="24">
+              <el-input
+                placeholder="输入菜单或按钮名称进行过滤"
+                v-model="filterText"
+                clearable
+                prefix-icon="el-icon-search"
+                @keyup.enter.native.stop
+                class="filter-input">
+              </el-input>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col class="down-tree" :span="24">
+              <el-tree
+                :data="menuList"
+                :props="menuListTreeProps"
+                node-key="menuId"
+                ref="menuListTree"
+                :default-expand-all="false"
+                :filter-node-method="filterNode"
+                @check="handleTreeCheck"
+                show-checkbox>
+                <span class="custom-tree-node" slot-scope="{ node, data }" style="display: flex; align-items: center; width: 100%;">
+                  <span style="margin-right: 20px; white-space: nowrap;">{{ node.label }}</span>
+                  <span v-if="data.buttonList && data.buttonList.length > 0" style="flex: 1; overflow-x: auto;">
+                    <el-checkbox-group v-model="data.checkedButtons" @change="handleButtonChange(data)" @click.native.stop style="display: inline-block;">
+                      <el-checkbox v-for="btn in data.buttonList" :key="btn.menuId" :label="Number(btn.menuId)">{{ btn.name }}</el-checkbox>
+                    </el-checkbox-group>
+                  </span>
+                </span>
+              </el-tree>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </div>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">{{ buttons.close || '关闭' }}</el-button>
@@ -119,7 +126,7 @@ export default {
         if (node.children && node.children.length > 0) {
           let normalChildren = []
           for (let child of node.children) {
-            if (child.specificType === 'button' || child.type === 2) {
+            if (child.type === 2) {
               node.buttonList.push(child)
             } else {
               normalChildren.push(child)
@@ -273,30 +280,51 @@ export default {
 </script>
 <style lang="scss">
 
-.down-tree {
-  height: 400px;
-  display: block;
-  overflow-y: auto;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  padding: 10px;
-  background-color: #fff;
-}
-
-.custom-tree-node {
-  .el-checkbox {
-    margin-right: 15px;
+.custom-role-dialog {
+  .el-dialog__body {
+    padding: 20px 30px;
   }
-  .el-checkbox__label {
-    padding-left: 5px;
+  .form-section {
+    margin-bottom: 10px;
+  }
+  .auth-section {
+    border-top: 1px solid #ebeef5;
+    padding-top: 20px;
+  }
+  .filter-input {
+    margin-bottom: 15px;
+  }
+  .down-tree {
+    height: 400px;
+    display: block;
+    overflow-y: auto;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    padding: 10px;
+    background-color: #fafafa;
+  }
+  .el-tree {
+    background-color: transparent;
+  }
+  .custom-tree-node {
+    .el-checkbox {
+      margin-right: 15px;
+    }
+    .el-checkbox__label {
+      padding-left: 5px;
+      color: #606266;
+    }
   }
-}
 
-/* 优化树形节点高度和样式 */
-.el-tree-node__content {
-  height: auto;
-  min-height: 36px;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  /* 优化树形节点高度和样式 */
+  .el-tree-node__content {
+    height: auto;
+    min-height: 36px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+  .el-tree-node__content:hover {
+    background-color: #f0f7ff;
+  }
 }
 </style>