Element升级

Former-commit-id: c927279ce250dbdd2200b30e6e7a862a86c45cf1

src/main/resources/modules/SpringBoot/java/module/wsys/ent/ResTree.java

@@ -16,8 +16,6 @@ public class ResTree extends Res {
 
     private String value;
 
-    private boolean disabled;
-
     private List<ResTree> children;
 
     public String getLabel() {
@@ -36,14 +34,6 @@ public class ResTree extends Res {
         this.value = value;
     }
 
-    public boolean getDisabled() {
-        return disabled;
-    }
-
-    public void setDisabled(boolean disabled) {
-        this.disabled = disabled;
-    }
-
     public List<ResTree> getChildren() {
         return children;
     }

src/main/resources/modules/SpringBoot/java/module/wsys/mgr/ResManagerImpl.java

@@ -238,7 +238,6 @@ public class ResManagerImpl implements ResManager {
                 tree.setValid(next.getValid());
                 tree.setRowVersion(next.getRowVersion());
                 tree.setLabel(next.getResName());
-                tree.setDisabled(next.getFree());
 
                 allMap.put(tree.getResCode(), tree);
                 iterator.remove();

src/main/resources/modules/SpringBoot/resources/static/css/base.css

@@ -632,6 +632,15 @@ code {
     box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
 }
 
+.el-drawer{/* 修复抽屉无法滚动 */
+    overflow: auto;
+    height: 100%;
+}
+
+.el-drawer .el-drawer__body{/* 修复抽屉内容子类继承height失效维内托 */
+    height: calc(100% - 76px);
+}
+
 /* 带有固定title布局,title保持固定*/
 .wb-layout-title-fix {
     width: 100%;

src/main/resources/modules/SpringBoot/resources/templates/screen/module/wsys/res.ftl

@@ -1,9 +1,5 @@
 <div id="app" v-cloak>
     <el-card class="box-card">
-        <el-tabs :value="'list'">
-            <el-tab-pane label="列表展示" name="list">
-                <span slot="label"><i class="el-icon-s-operation"></i>列表展示</span>
-
         <el-form class="search" :inline="true" :model="vm" ref="vm" label-position="right" label-width="90px">
             <el-form-item label="资源代码" prop="resCode">
                 <el-input v-model="vm.resCode" clearable size="mini" placeholder="请输入资源代码"></el-input>
@@ -33,10 +29,12 @@
                 </el-radio-group>
             </el-form-item>
             <el-form-item label="开始日期" prop="startDate">
-                        <el-date-picker v-model="vm.startDate" clearable size="mini" placeholder="请输入开始日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+                <el-date-picker v-model="vm.startDate" clearable size="mini" placeholder="请输入开始日期" type="datetime"
+                                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
             </el-form-item>
             <el-form-item label="结束日期" prop="endDate">
-                        <el-date-picker v-model="vm.endDate" clearable size="mini" placeholder="请输入结束日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+                <el-date-picker v-model="vm.endDate" clearable size="mini" placeholder="请输入结束日期" type="datetime"
+                                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
             </el-form-item>
             <el-form-item>
                 <el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch">搜索</el-button>
@@ -44,14 +42,15 @@
                 </el-button>
             </el-form-item>
         </el-form>
-
+    </el-card>
-                <el-divider><i class="el-icon-search"></i></el-divider>
+    <el-card class="box-card">
-
         <el-row>
             <el-col :span="12">
                 <el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>
 
                 <el-button type="warning" size="mini" icon="el-icon-download" @click="onExport">导出</el-button>
+
+                <el-button type="warning" size="mini" icon="el-icon-share" @click="treeShow = true">树状</el-button>
             </el-col>
 
             <el-col :span="12">
@@ -76,6 +75,7 @@
         </el-row>
 
         <el-table
+                class="data"
                 @selection-change="onSelectionChange"
                 empty-text="无数据"
                 :stripe="true"
@@ -167,51 +167,6 @@
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="vm.totalCount">
         </el-pagination>
-
-            </el-tab-pane>
-            <el-tab-pane label="树状展示" name="tree">
-                <span slot="label"><i class="el-icon-share"></i>树状展示</span>
-
-                <el-row>
-                    <el-col :span="12">
-                        <el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>
-
-                        <el-button type="warning" size="mini" icon="el-icon-edit" @click="onCreate">前缀修改</el-button>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-button-group style="float: right;">
-                            <el-tooltip effect="dark" content="批量删除" placement="bottom">
-                                <el-button size="mini" icon="el-icon-delete" @click="onBitchDelete"></el-button>
-                            </el-tooltip>
-
-                            <el-tooltip effect="dark" content="刷新" placement="bottom">
-                                <el-button size="mini" icon="el-icon-refresh" @click="onLoadTree"></el-button>
-                            </el-tooltip>
-                        </el-button-group>
-                    </el-col>
-                </el-row>
-
-                <el-tree
-                        style="margin-top: 10px"
-                        :data="treeData"
-                        node-key="resCode"
-                        ref="tree"
-                        show-checkbox
-                        default-expand-all
-                        :filter-node-method="filterTree"
-                        :expand-on-click-node="false">
-                    <div class="tree" slot-scope="{ node, data }">
-                        <span>
-                            <el-link type="success" @click="onTreeCreate(data)">新增</el-link>
-                            <el-link type="danger" @click="onDelete(data)">删除</el-link>
-                            {{ data.resName }}
-                            <span style="color: #409EFF" @click="onTreeEdit(data)">[{{data.resCode}}]</span>
-                            <span style="color: #ff0000" v-if="data.free">[免费]</span>
-                        </span>
-                    </div>
-                </el-tree>
-            </el-tab-pane>
-        </el-tabs>
     </el-card>
 
     <el-dialog
@@ -260,6 +215,53 @@
             <el-button size="mini" type="primary" @click="onSave">保存</el-button>
         </span>
     </el-dialog>
+
+    <el-drawer
+            direction="ltr"
+            :visible.sync="treeShow"
+            :close-on-click-modal="false"
+            :close-on-press-escape="true"
+            :modal-append-to-body="true"
+            :append-to-body="true"
+            @opened="onTreeOpened"
+            size="600px">
+
+        <el-page-header slot="title" @back="treeShow = false" content="资源树状展示"></el-page-header>
+
+        <el-container style="height:100%">
+            <el-header>
+                <el-input
+                        size="mini"
+                        placeholder="输入资源名称、资源代码或资源值"
+                        prefix-icon="el-icon-search"
+                        v-model="treeFilter">
+                </el-input>
+            </el-header>
+
+            <el-main style="height:100%;padding: 0 20px 20px 20px;">
+                <el-tree
+                        :data="treeData"
+                        node-key="resCode"
+                        ref="tree"
+                        show-checkbox
+                        default-expand-all
+                        :filter-node-method="onTreeFilter"
+                        :expand-on-click-node="false">
+                    <div class="tree" slot-scope="{ node, data }">
+                <span>
+                    {{ data.resName }}
+                    <span style="color: #409EFF" @click="onTreeEdit(data)">[{{data.resCode}}]</span>
+                    <span style="color: #ff0000" v-if="data.free">[免费]</span>
+                </span>
+                <span>
+                    <el-link type="success" @click="onTreeCreate(data)">新增</el-link>
+                    <el-link type="danger" @click="onDelete(data)">删除</el-link>
+                </span>
+                    </div>
+                </el-tree>
+            </el-main>
+        </el-container>
+    </el-drawer>
 </div>
 <style>
     .tree {
@@ -327,6 +329,8 @@
                     {required: true, message: '是否有效不能为空', trigger: 'blur'},
                 ],
             },
+            treeShow: false,
+            treeFilter: '',
             treeData: []
         },
         methods: {
@@ -394,15 +398,16 @@
                 this.form.valid = pItem.valid;
                 this.form.rowVersion = pItem.rowVersion;
             },
-            onChange: function (value) {
+            onTreeFilter: function (value, data) {
-                this.$refs.tree.filter(value);
-            },
-            filterTree: function (value, data) {
                 if (!value) return true;
-                return data.comment.indexOf(value) !== -1;
+                return data.resName.indexOf(value) !== -1
+                        || data.resCode.indexOf(value) !== -1
+                        || data.resValue.indexOf(value) !== -1;
             },
-            onLoadTree: function () {
+            onTreeLoad: function () {
-                new Ajax("wsys", "res").method("tree").post({}, function (response) {
+                var vm_ = utils.copy(this.vm);
+                vm_.pageSize = 0;
+                new Ajax("wsys", "res", "tree").post(vm_, function (response) {
                     if (response.errors.length > 0) {
                         nav.e(response.errors[0].message);
                     } else {
@@ -410,90 +415,17 @@
                     }
                 }.bind(this))
             },
-            onSave: function () {
+            onTreeOpened: function () {
-                this.$refs['form'].validate(function (valid) {
+                this.onTreeLoad();
-                    if (valid) {
-                        if (this.form.id) {
-                            new Ajax("wsys", "res").update(this.form, function (response) {
-                                if (response.errors.length > 0) {
-                                    nav.e(response.errors[0].message);
-                                } else {
-                                    this.onFind();
-                                    this.onLoadTree();
-                                    this.$refs['form'].resetFields();
-                                    this.form.formShow = false;
-                                }
-                            }.bind(this))
-                        } else {
-                            new Ajax("wsys", "res").create(this.form, function (response) {
-                                if (response.errors.length > 0) {
-                                    nav.e(response.errors[0].message);
-                                } else {
-                                    this.onFind();
-                                    this.onLoadTree();
-                                    this.$refs['form'].resetFields();
-                                    this.form.formShow = false;
-                                }
-                            }.bind(this))
-                        }
-                    } else {
-                        return false;
-                    }
-                }.bind(this));
-            },
-            onDelete: function (item) {
-                this.$confirm('将删除该项, 是否继续?', '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning'
-                }).then(function () {
-                    new Ajax(this.module, this.target).delete({id: item.id}, function (response) {
-                        if (response.errors.length > 0) {
-                            nav.e(response.errors[0].message);
-                        } else {
-                            nav.s("删除成功");
-                            this.onFind();
-                            this.onLoadTree();
             }
-                    }.bind(this))
-                }.bind(this)).catch(function (action) {
-
-                });
         },
-            onBitchDelete: function () {
+        watch: {
-                if (this.select.length == 0) {
+            treeFilter: function (val) {
-                    nav.w("至少选中一项");
+                this.$refs.tree.filter(val);
-                } else {
-                    this.$confirm('将删除已选择的项, 是否继续?', '提示', {
-                        confirmButtonText: '确定',
-                        cancelButtonText: '取消',
-                        type: 'warning'
-                    }).then(function () {
-                        nav.tipShow("删除中...");
-                        this.select.forAsync(function (item, next) {
-                            new Ajax(this.module, this.target).delete({id: item.id}, function (response) {
-                                if (response.errors.length > 0) {
-                                    nav.e(response.errors[0].message);
-                                } else {
-                                    this.result.remove(item)
-                                }
-                                next();
-                            }.bind(this))
-                        }.bind(this), function () {
-                            nav.tipClose();
-                            nav.s("批量删除成功.")
-                            this.onFind();
-                            this.onLoadTree();
-                        }.bind(this))
-                    }.bind(this)).catch(function (action) {
-
-                    });
-                }
             }
         },
         mounted: function () {
             this.onFind();
-            this.onLoadTree();
         }
     })
 </script>

src/main/resources/modules/SpringBoot/resources/templates/screen/module/wsys/role.ftl

@@ -23,7 +23,7 @@
         </el-form>
     </el-card>
 
-    <el-card class="box-card data">
+    <el-card class="box-card">
         <el-row>
             <el-col :span="12">
                 <el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>
@@ -294,7 +294,7 @@
             },
             doCheck: function (roleId, roleCode, resId, resCode, checked) {
                 // 优先处理当前节点
-                new Ajax("wsys", "roleRes").method("check").post({
+                new Ajax("wsys", "roleRes", "check").post({
                     roleId: roleId,
                     roleCode: roleCode,
                     resId: resId,
@@ -309,14 +309,14 @@
                 }.bind(this));
             },
             onLoadTree: function () {
-                new Ajax("wsys", "res").method("tree").post({}, function (response) {
+                new Ajax("wsys", "res", "tree").post({}, function (response) {
                     if (response.errors.length > 0) {
                         nav.e(response.errors[0].message);
                     } else {
                         this.treeData = response.result;
-                        for (var i = 0; i < response.result.length; i++) {
+                        this.treeData.forTree(function (item) {
-                            this.treeData[i].disabled = this.treeData[i].free;
+                            item.disabled = item.free;
-                        }
+                        });
                     }
                 }.bind(this))
             },

src/main/resources/static/js/base.js

@@ -87,6 +87,33 @@ Array.prototype.forAsync = function (callBack, finish) {
         }
     })(0)
 };
+/**
+ * 数组递归循环
+ * callBack(item,depth) 处理函数接受两个参数
+ * item   循环对象
+ * depth  循环深度数组[0,0,0]长度即为深度
+ */
+Array.prototype.forTreeDepth = function (callBack) {
+    (function loop(data, depth) {
+        if (Array.isArray(data) && data.length > 0) {
+            data.forEach(function (item, i) {
+                var depth_ = depth.slice(0);
+                depth_.push(i);
+                callBack(item, depth_);
+                loop(item.children, depth_);
+            });
+        }
+    })(this, []);
+};
+/**
+ * 数组递归循环
+ * callBack(item) 处理函数
+ */
+Array.prototype.forTree = function (callBack) {
+    this.forTreeDepth(function (item, depth) {
+        callBack(item);
+    })
+};
 /**
  * 自定义Map对象
  */