首页图表开发

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

@@ -1,10 +1,6 @@
 <#-- since 2017-01-01-->
 <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="deptCode">
                 <el-input v-model="vm.deptCode" clearable size="mini" placeholder="请输入部门代码"></el-input>
@@ -47,6 +43,8 @@
                 <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">
@@ -159,48 +157,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-input v-model="treeKeyword" clearable size="mini" placeholder="请输入资源内容" @change="onChange"
-                                  style="width: 200px;"></el-input>
-                    </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="id"
-                        ref="tree"
-                        accordion
-                        show-checkbox
-                        :filter-node-method="filterTree"
-                        :expand-on-click-node="false">
-                    <div class="tree" slot-scope="{ node, data }">
-                        <span>
-                            <el-button type="text" size="mini" icon="el-icon-plus"
-                                       @click="onTreeCreate(data)"></el-button>
-                            {{ data.label }}<span style="color: #409EFF"
-                                                  @click="onTreeEdit(data)">[{{data.value}}]</span>
-                        </span>
-                    </div>
-                </el-tree>
-            </el-tab-pane>
-        </el-tabs>
     </el-card>
 
     <el-dialog
@@ -237,6 +193,50 @@
             <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="id"
+                        ref="tree"
+                        accordion
+                        show-checkbox
+                        :filter-node-method="onTreeFilter"
+                        :expand-on-click-node="false">
+                    <div class="tree" slot-scope="{ node, data }">
+                        <span>
+                            <el-button type="text" size="mini" icon="el-icon-plus"
+                                       @click="onTreeCreate(data)"></el-button>
+                            {{ data.label }}<span style="color: #409EFF"
+                                                  @click="onTreeEdit(data)">[{{data.value}}]</span>
+                        </span>
+                    </div>
+                </el-tree>
+            </el-main>
+        </el-container>
+    </el-drawer>
 </div>
 <style>
     .tree {
@@ -296,9 +296,10 @@
                 ],
                 valid: [
                     {required: true, message: '是否有效不能为空', trigger: 'blur'},
-                ],
+                ]
             },
-            treeKeyword: '',
+            treeShow: false,
+            treeFilter: '',
             treeData: []
         },
         methods: {
@@ -358,14 +359,11 @@
                 this.form.valid = item.valid;
                 this.form.rowVersion = item.rowVersion;
             },
-            onChange: function (value) {
-                this.$refs.tree.filter(value);
-            },
-            filterTree: function (value, data) {
+            onTreeFilter: function (value, data) {
                 if (!value) return true;
                 return data.deptName.indexOf(value) !== -1;
             },
-            onLoadTree: function () {
+            onTreeLoad: function () {
                 new Ajax("wsys", "dept").method("tree").post({}, function (response) {
                     if (response.errors.length > 0) {
                         nav.e(response.errors[0].message);
@@ -374,46 +372,17 @@
                     }
                 }.bind(this))
             },
-            onSave: function () {
-                this.$refs['form'].validate(function (valid) {
-                    if (valid) {
-                        if (this.form.id) {
-                            new Ajax("wsys", "dept").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", "dept").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;
+            onTreeOpened: function () {
+                this.onTreeLoad();
             }
-                            }.bind(this))
-                        }
-                    } else {
-                        return false;
-                    }
-                }.bind(this));
-            },
         },
         watch: {
-            treeKeyword: function (val) {
+            treeFilter: function (val) {
                 this.$refs.tree.filter(val);
             }
         },
         mounted: function () {
             this.onFind();
-            this.onLoadTree();
         }
     })
 </script>