调整权限弹窗

admin/dashboard/templates/robot_management.html

@@ -91,33 +91,38 @@
     <el-dialog 
         :title="currentGroupName + ' 功能权限管理'" 
         :visible.sync="permissionDialogVisible"
-        width="70%">
+        width="50%"
-        <el-table :data="permissions" style="width: 100%" border>
+        :style="{ maxHeight: '70vh' }"
-            <el-table-column prop="feature_id" label="功能ID" width="80"></el-table-column>
+        custom-class="permission-dialog">
-            <el-table-column prop="feature_description" label="功能描述"></el-table-column>
+        <div class="permission-table-container">
-            <el-table-column label="状态" width="100">
+            <el-table :data="permissions" style="width: 100%" border size="small">
-                <template slot-scope="scope">
+                <el-table-column prop="feature_id" label="功能ID" width="60"></el-table-column>
-                    <el-tag 
+                <el-table-column prop="feature_description" label="功能描述" min-width="200"></el-table-column>
-                        :type="scope.row.status === 'enabled' ? 'success' : 'danger'">
+                <el-table-column label="状态" width="80">
-                        {% raw %}{{ scope.row.status === 'enabled' ? '已启用' : '已关闭' }}{% endraw %}
+                    <template slot-scope="scope">
-                    </el-tag>
+                        <el-tag 
-                </template>
+                            size="small"
-            </el-table-column>
+                            :type="scope.row.status === 'enabled' ? 'success' : 'danger'">
-            <el-table-column label="操作" width="120">
+                            {% raw %}{{ scope.row.status === 'enabled' ? '已启用' : '已关闭' }}{% endraw %}
-                <template slot-scope="scope">
+                        </el-tag>
-                    <el-switch
+                    </template>
-                        v-model="scope.row.statusBool"
+                </el-table-column>
-                        active-color="#13ce66"
+                <el-table-column label="操作" width="80">
-                        inactive-color="#ff4949"
+                    <template slot-scope="scope">
-                        @change="togglePermission(scope.row)">
+                        <el-switch
-                    </el-switch>
+                            v-model="scope.row.statusBool"
-                </template>
+                            active-color="#13ce66"
-            </el-table-column>
+                            inactive-color="#ff4949"
-        </el-table>
+                            @change="togglePermission(scope.row)">
+                        </el-switch>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
         <div slot="footer" class="dialog-footer">
-            <el-button @click="enableAllPermissions" type="success">一键启用全部</el-button>
+            <el-button @click="enableAllPermissions" type="success" size="small">一键启用全部</el-button>
-            <el-button @click="disableAllPermissions" type="danger">一键关闭全部</el-button>
+            <el-button @click="disableAllPermissions" type="danger" size="small">一键关闭全部</el-button>
-            <el-button @click="permissionDialogVisible = false">关闭</el-button>
+            <el-button @click="permissionDialogVisible = false" size="small">关闭</el-button>
         </div>
     </el-dialog>
     
@@ -148,6 +153,16 @@
         </div>
     </el-dialog>
 </div>
+
+<style>
+    .permission-dialog .el-dialog__body {
+        padding: 10px 20px;
+    }
+    .permission-table-container {
+        max-height: calc(70vh - 150px);
+        overflow-y: auto;
+    }
+</style>
 {% endblock %}
 
 {% block scripts %}