From a993dc104d6b2bcb2c236b138667e54c588f2260 Mon Sep 17 00:00:00 2001
From: wangbing <Wb295490665>
Date: Thu, 19 Nov 2020 11:05:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=9B=BE=E8=A1=A8=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/screen/module/wsys/dept.ftl     | 429 ++++++++----------
 1 file changed, 199 insertions(+), 230 deletions(-)

diff --git a/src/main/resources/modules/SpringBoot/resources/templates/screen/module/wsys/dept.ftl b/src/main/resources/modules/SpringBoot/resources/templates/screen/module/wsys/dept.ftl
index 4b412526..68325d9e 100644
--- a/src/main/resources/modules/SpringBoot/resources/templates/screen/module/wsys/dept.ftl
+++ b/src/main/resources/modules/SpringBoot/resources/templates/screen/module/wsys/dept.ftl
@@ -1,206 +1,162 @@
 <#-- 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>
-                    </el-form-item>
-                    <el-form-item label="部门名称" prop="deptName">
-                        <el-input v-model="vm.deptName" clearable size="mini" placeholder="请输入部门名称"></el-input>
-                    </el-form-item>
-                    <el-form-item label="部门别名" prop="deptAlias">
-                        <el-input v-model="vm.deptAlias" clearable size="mini" placeholder="请输入部门别名"></el-input>
-                    </el-form-item>
-                    <el-form-item label="上级代码" prop="supCode">
-                        <el-input v-model="vm.supCode" clearable size="mini" placeholder="请输入上级代码"></el-input>
-                    </el-form-item>
-                    <el-form-item label="上级名称" prop="supName">
-                        <el-input v-model="vm.supName" clearable size="mini" placeholder="请输入上级名称"></el-input>
-                    </el-form-item>
-                    <el-form-item label="是否有效" prop="valid">
-                        <el-radio-group v-model="vm.valid" clearable size="mini">
-                            <el-radio :label="true">是</el-radio>
-                            <el-radio :label="false">否</el-radio>
-                        </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-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-form-item>
-                    <el-form-item>
-                        <el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch">搜索</el-button>
-                        <el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="onReset('vm')">重置
-                        </el-button>
-                    </el-form-item>
-                </el-form>
-
-                <el-divider><i class="el-icon-search"></i></el-divider>
-
-                <el-row>
-                    <el-col :span="12">
-                        <el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>
+        <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>
+            </el-form-item>
+            <el-form-item label="部门名称" prop="deptName">
+                <el-input v-model="vm.deptName" clearable size="mini" placeholder="请输入部门名称"></el-input>
+            </el-form-item>
+            <el-form-item label="部门别名" prop="deptAlias">
+                <el-input v-model="vm.deptAlias" clearable size="mini" placeholder="请输入部门别名"></el-input>
+            </el-form-item>
+            <el-form-item label="上级代码" prop="supCode">
+                <el-input v-model="vm.supCode" clearable size="mini" placeholder="请输入上级代码"></el-input>
+            </el-form-item>
+            <el-form-item label="上级名称" prop="supName">
+                <el-input v-model="vm.supName" clearable size="mini" placeholder="请输入上级名称"></el-input>
+            </el-form-item>
+            <el-form-item label="是否有效" prop="valid">
+                <el-radio-group v-model="vm.valid" clearable size="mini">
+                    <el-radio :label="true">是</el-radio>
+                    <el-radio :label="false">否</el-radio>
+                </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-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-form-item>
+            <el-form-item>
+                <el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch">搜索</el-button>
+                <el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="onReset('vm')">重置
+                </el-button>
+            </el-form-item>
+        </el-form>
 
-                        <el-button type="warning" size="mini" icon="el-icon-download" @click="onExport">导出</el-button>
-                    </el-col>
+        <el-divider><i class="el-icon-search"></i></el-divider>
 
-                    <el-col :span="12">
-                        <el-button-group style="float: right;">
-                            <el-tooltip effect="dark" content="Excel模板下载" placement="bottom">
-                                <el-button size="mini" icon="el-icon-date" @click="onTemplate"></el-button>
-                            </el-tooltip>
+        <el-row>
+            <el-col :span="12">
+                <el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>
 
-                            <el-tooltip effect="dark" content="Excel导入" placement="bottom">
-                                <el-button size="mini" icon="el-icon-upload2" @click="onImport"></el-button>
-                            </el-tooltip>
+                <el-button type="warning" size="mini" icon="el-icon-download" @click="onExport">导出</el-button>
 
-                            <el-tooltip effect="dark" content="批量删除" placement="bottom">
-                                <el-button size="mini" icon="el-icon-delete" @click="onBitchDelete"></el-button>
-                            </el-tooltip>
+                <el-button type="warning" size="mini" icon="el-icon-share" @click="treeShow = true">树状</el-button>
+            </el-col>
 
-                            <el-tooltip effect="dark" content="刷新" placement="bottom">
-                                <el-button size="mini" icon="el-icon-refresh" @click="onFind"></el-button>
-                            </el-tooltip>
-                        </el-button-group>
-                    </el-col>
-                </el-row>
+            <el-col :span="12">
+                <el-button-group style="float: right;">
+                    <el-tooltip effect="dark" content="Excel模板下载" placement="bottom">
+                        <el-button size="mini" icon="el-icon-date" @click="onTemplate"></el-button>
+                    </el-tooltip>
 
-                <el-table
-                        class="data"
-                        @selection-change="onSelectionChange"
-                        empty-text="无数据"
-                        :stripe="true"
-                        :data="result"
-                        size="mini">
-                    <el-table-column
-                            align="center"
-                            width="45"
-                            type="selection">
-                    </el-table-column>
-                    <el-table-column
-                            align="center"
-                            width="140"
-                            prop="id"
-                            label="主键">
-                    </el-table-column>
-                    <el-table-column
-                            align="center"
-                            min-width="80"
-                            prop="valid"
-                            label="是否有效">
-                        <template slot-scope="scope">
-                            <el-tag size="mini" effect="dark" type="success" v-if="scope.row.valid">有效</el-tag>
-                            <el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.valid">无效</el-tag>
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                            align="center"
-                            min-width="100"
-                            prop="deptCode"
-                            label="部门代码">
-                    </el-table-column>
-                    <el-table-column
-                            align="center"
-                            min-width="150"
-                            prop="deptName"
-                            label="部门名称">
-                    </el-table-column>
-                    <el-table-column
-                            align="center"
-                            min-width="150"
-                            prop="deptAlias"
-                            label="部门别名">
-                    </el-table-column>
-                    <el-table-column
-                            align="center"
-                            min-width="100"
-                            prop="supCode"
-                            label="上级代码">
-                    </el-table-column>
-                    <el-table-column
-                            align="center"
-                            min-width="150"
-                            prop="supName"
-                            label="上级名称">
-                    </el-table-column>
-                    <el-table-column
-                            align="center"
-                            min-width="140"
-                            prop="createTime"
-                            label="创建时间">
-                    </el-table-column>
-                    <el-table-column
-                            align="center"
-                            width="120"
-                            fixed="right"
-                            label="操作">
-                        <template slot-scope="scope">
-                            <wb-table-ops :arg="scope.row">
-                                <wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
-                                <wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
-                            </wb-table-ops>
-                        </template>
-                    </el-table-column>
-                </el-table>
+                    <el-tooltip effect="dark" content="Excel导入" placement="bottom">
+                        <el-button size="mini" icon="el-icon-upload2" @click="onImport"></el-button>
+                    </el-tooltip>
 
-                <el-pagination
-                        background
-                        v-if="vm.totalCount > vm.pageSize"
-                        style="margin-top: 10px"
-                        @current-change="onPageChange"
-                        @size-change="onPageSizeChange"
-                        :current-page="vm.pageNumber"
-                        :page-size="vm.pageSize"
-                        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-tooltip effect="dark" content="批量删除" placement="bottom">
+                        <el-button size="mini" icon="el-icon-delete" @click="onBitchDelete"></el-button>
+                    </el-tooltip>
 
-                <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="onFind"></el-button>
+                    </el-tooltip>
+                </el-button-group>
+            </el-col>
+        </el-row>
 
-                            <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-table
+                class="data"
+                @selection-change="onSelectionChange"
+                empty-text="无数据"
+                :stripe="true"
+                :data="result"
+                size="mini">
+            <el-table-column
+                    align="center"
+                    width="45"
+                    type="selection">
+            </el-table-column>
+            <el-table-column
+                    align="center"
+                    width="140"
+                    prop="id"
+                    label="主键">
+            </el-table-column>
+            <el-table-column
+                    align="center"
+                    min-width="80"
+                    prop="valid"
+                    label="是否有效">
+                <template slot-scope="scope">
+                    <el-tag size="mini" effect="dark" type="success" v-if="scope.row.valid">有效</el-tag>
+                    <el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.valid">无效</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column
+                    align="center"
+                    min-width="100"
+                    prop="deptCode"
+                    label="部门代码">
+            </el-table-column>
+            <el-table-column
+                    align="center"
+                    min-width="150"
+                    prop="deptName"
+                    label="部门名称">
+            </el-table-column>
+            <el-table-column
+                    align="center"
+                    min-width="150"
+                    prop="deptAlias"
+                    label="部门别名">
+            </el-table-column>
+            <el-table-column
+                    align="center"
+                    min-width="100"
+                    prop="supCode"
+                    label="上级代码">
+            </el-table-column>
+            <el-table-column
+                    align="center"
+                    min-width="150"
+                    prop="supName"
+                    label="上级名称">
+            </el-table-column>
+            <el-table-column
+                    align="center"
+                    min-width="140"
+                    prop="createTime"
+                    label="创建时间">
+            </el-table-column>
+            <el-table-column
+                    align="center"
+                    width="120"
+                    fixed="right"
+                    label="操作">
+                <template slot-scope="scope">
+                    <wb-table-ops :arg="scope.row">
+                        <wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
+                        <wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
+                    </wb-table-ops>
+                </template>
+            </el-table-column>
+        </el-table>
 
-                <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-pagination
+                background
+                v-if="vm.totalCount > vm.pageSize"
+                style="margin-top: 10px"
+                @current-change="onPageChange"
+                @size-change="onPageSizeChange"
+                :current-page="vm.pageNumber"
+                :page-size="vm.pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="vm.totalCount">
+        </el-pagination>
     </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;
-                                }
-                            }.bind(this))
-                        }
-                    } else {
-                        return false;
-                    }
-                }.bind(this));
-            },
+            onTreeOpened: function () {
+                this.onTreeLoad();
+            }
         },
         watch: {
-            treeKeyword: function (val) {
+            treeFilter: function (val) {
                 this.$refs.tree.filter(val);
             }
         },
         mounted: function () {
             this.onFind();
-            this.onLoadTree();
         }
     })
 </script>