用户列表新增抽屉效果详细信息

ruoyi-admin/src/main/resources/static/ruoyi/css/ry-ui.css

@@ -1008,6 +1008,37 @@ table.rc-table-resizing thead > th > a {
 	padding-bottom:5px
 }
 
+.form-control-plaintext {
+    display: block;
+    width: 100%;
+    padding-top: .286rem;
+    padding-bottom: .286rem;
+    margin-bottom: 0;
+    line-height: 1.57142857;
+    color: #212529;
+    background-color: transparent;
+    border: solid transparent;
+    border-width: 1px 0;
+    font-weight: 500;
+    border-bottom: 1px dashed #ccd5db;
+    min-height: 25px
+}
+
+.form-control-plaintext-no-content {
+    display: block;
+    width: 100%;
+    padding-top: .286rem;
+    padding-bottom: .286rem;
+    margin-bottom: 0;
+    line-height: 1.57142857;
+    color: #ddd !important;
+    background-color: transparent;
+    border: solid transparent;
+    border-width: 1px 0;
+    border-bottom: 1px dashed #ccd5db;
+    min-height: 25px
+}
+
 .main-content {
     background-color: #ffffff;
     color: inherit;

ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js

@@ -989,6 +989,26 @@ var table = {
                 createMenuItem(url, title);
                 closeItem(dataId);
             },
+            // 右侧弹出窗口打开
+            popupRight: function(title, url){
+                var width = 150;
+                if (top.location !== self.location) {
+                    if ($(top.window).outerWidth() < 400) {
+                        width = 50;
+                    }
+                }
+                top.layer.open({
+                    type: 2,
+                    offset: 'r',
+                    anim: 'slideLeft',
+                    move: false,
+                    title: title,
+                    shade: 0.3,
+                    shadeClose: true,
+                    area: [($(window).outerWidth() - width) + 'px', '100%'],
+                    content: url
+                });
+            },
             // 关闭选项卡
             closeTab: function (dataId) {
                 closeItem(dataId);
@@ -1195,6 +1215,12 @@ var table = {
                 }
                 return url;
             },
+            // 右侧弹出详情
+            view: function(id){
+                table.set();
+                var url = table.options.viewUrl.replace("{id}", id);
+                $.modal.popupRight(table.options.modalName + "信息详情", url);
+            },
             // 保存信息 刷新表格
             save: function(url, data, callback) {
                 var config = {