From 96891a145c6d3b92e61bf3d0fcbd63d713574c97 Mon Sep 17 00:00:00 2001
From: ms-dev <dev@mingsoft.net>
Date: Fri, 25 Jan 2019 13:06:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/webapp/WEB-INF/manager/index.ftl | 261 ++++++++++++++++++++++
 src/main/webapp/WEB-INF/manager/login.ftl | 148 ++++++++++++
 2 files changed, 409 insertions(+)
 create mode 100644 src/main/webapp/WEB-INF/manager/index.ftl
 create mode 100644 src/main/webapp/WEB-INF/manager/login.ftl
diff --git a/src/main/webapp/WEB-INF/manager/index.ftl b/src/main/webapp/WEB-INF/manager/index.ftl
new file mode 100644
index 00000000..8194cc12
--- /dev/null
+++ b/src/main/webapp/WEB-INF/manager/index.ftl
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html>
+   <head>
+      <meta charset="UTF-8">
+      <title></title>
+      <meta charset="utf-8">
+      <!--浏览器小图标-->
+      <link rel="icon" href="http://cdn.mingsoft.net/global/static/ms-admin/4.7.0//ms.ico" type="x-icon">
+      <script type="text/javascript" src="https://unpkg.com/vue@2.5.21/dist/vue.min.js"></script>
+      <!--小图标-->
+      <link rel="stylesheet" href="//at.alicdn.com/t/font_847907_mkdvd7gopsg.css">
+      <link rel="stylesheet" href="//at.alicdn.com/t/font_974973_42u7cwycwta.css">
+      <!-- 引入样式 -->
+      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+      <!-- 引入组件库 -->
+      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+      <!--网络请求框架-->
+      <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
+      <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
+      <!--铭飞-->
+      <script src="http://cdn.mingsoft.net/ms/1.0/ms.js"></script>
+      <script src="http://cdn.mingsoft.net/ms/1.0/ms.http.js"></script>
+      <script src="http://cdn.mingsoft.net/ms/1.0/ms.util.js"></script>
+      
+      <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/less/ms.less" type="text/less">
+      <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/css/index.css" type="text/css">
+      <script>
+         ms.base = '${base}';
+      </script>
+   </head>
+   <body>
+      <div id="app">
+         <el-container>
+            <!--头部-->
+            <el-header class="ms-admin-header">
+               <el-aside width="200px" class="ms-admin-logo">
+                  <img :src="ms.base+'/static/ms-admin/4.7.0/images/logo.png'" />
+                  <div>
+                     <img :src="ms.base+'/static/ms-admin/4.7.0/images/version.png'" />
+                     <span>v4.6.3</span>
+                  </div>
+               </el-aside>
+
+               <!--头部menu-->
+               <el-menu class="ms-admin-header-menu" :default-active="0+''" mode="horizontal" >
+                  <el-menu-item 
+                    class="ms-admin-menu-item" 
+                    :index="i+''" 
+                    v-for="(menu,i) in mainParentMenuList" 
+                    :key='i'
+                    @click="openMenu(menu,i)"
+                    v-text="menu.modelTitle"
+                ></el-menu-item>
+                  <el-menu-item class="ms-admin-menu-item" :index="menuList.length+''" @click=''>
+                     <i class="iconfont icon-gengduo" @click.stop.self='shortcutMenu = !shortcutMenu'></i>
+                  </el-menu-item>
+                   <!-- 快捷菜单 -->
+                   <ul class="ms-admin-shortcut-menu" v-show='shortcutMenu'>
+                        <li v-for="(item,index) of parentMenuList" 
+                            :key='index'
+                             v-text='item.modelTitle' 
+                             @click='openMenu(item,index)'
+                             ></li>
+                        <i class="iconfont icon-gengduo" @click.stop.self='shortcutMenu = !shortcutMenu'></i>
+                    </ul>
+               </el-menu>
+
+               <!--头部右侧-->
+               <el-main class="ms-admin-mstore">
+                  <!--登录-->
+                  <el-dropdown trigger="click" class="ms-admin-login" placement="top-start" @visible-change="loginDown = !loginDown">
+                     <span class="el-dropdown-link" :class="{'active':loginDown}">
+                        <img src="http://cdn.mingsoft.net/global/static/ms-admin/4.7.0//msheader.png" />
+                        <span>管理员</span>
+                     </span>
+                     <el-dropdown-menu class="ms-admin-login-down" slot="dropdown">
+                        <el-dropdown-item>修改密码</el-dropdown-item>
+                        <el-dropdown-item>退出</el-dropdown-item>
+                     </el-dropdown-menu>
+                  </el-dropdown>
+                  <!--mstore按钮-->
+                  <div class="ms-admin-mstore-icon">
+                     <i class="iconfont icon-gengduo1"></i>
+                  </div>
+               </el-main>
+
+            </el-header>
+            <el-container class="ms-admin-container">
+               <!--菜单-->
+               <el-aside :class="['ms-admin-menu-aside',{'ms-admin-menu-aside-active':collapseMenu}]">
+                  <el-menu 
+                    :class="['ms-admin-menu',{'ms-admin-menu-active':collapseMenu}]" 
+                    :default-active="menuActive"
+                    :collapse="collapseMenu" 
+                    mode='vertical' 
+                    :collapse-transition='true' 
+                    :unique-opened='true' 
+                    ref='menu'
+                    >
+                     <el-submenu 
+                        :index="i+''" 
+                        v-for="(menu,i) in parentMenuList"
+                        :key='i'
+                        >
+                        <template slot="title">
+                           <i class="iconfont" :class="iconType(menu.modelTitle)"></i>
+                           <span v-text="menu.modelTitle"></span>
+                        </template>
+                        <!-- 子菜单 -->
+                        <el-menu-item 
+                            :index="i+'-'+index" 
+                            v-for="(sub,index) in getSubMenu(menu.modelId)" 
+                            :key='sub.modelModelId'
+                            v-text="sub.modelTitle"
+                            @click.self='open(sub.modelTitle,sub.modelUrl)'
+                        ></el-menu-item>
+                     </el-submenu>
+                     <!-- 收缩按钮 -->
+                     <div :class="['ms-menu-expand',{'ms-menu-expand-active':collapseMenu}]" @click='collapseMenu = !collapseMenu'>
+                        <i class="iconfont icon-shousuo"></i>
+                     </div>
+                  </el-menu>
+               </el-aside>
+               <!--内容-->
+               <el-main class="ms-admin-main">
+                  <!--选项卡-->
+                  <el-tabs 
+                    class="ms-admin-tabs" 
+                    v-model="currentTab" 
+                    type="card" 
+                    closable 
+                    @tab-remove="closeTab"
+                    >
+                     <el-tab-pane 
+                        v-for="(item, index) in editableTabs" 
+                        :key="index" 
+                        :label="item.title" 
+                        :name="item.title"
+                    >
+                        {{item.content}}
+                     </el-tab-pane>
+                  </el-tabs>
+               </el-main>
+            </el-container>
+         </el-container>
+      </div>
+   </body>
+</html>
+
+<script>
+   new Vue({
+      el: "#app",
+      data: {
+        // 预置菜单图标
+        icon:{
+            '消息管理':'icon-xiaoxiguanli',
+            '评论管理':'icon-pinglunguanli',
+            '内容管理':'icon-bianji1',
+            '会员中心':'icon-huiyuan',
+            '自定义管理':'icon-gengduo-2',
+            '权限管理':'icon-UPMSquanxianicon-',
+            '系统管理':'icon-xitong',
+        },
+        menuList:[],//菜单接口数据
+        parentMenuList:[],//一级菜单
+        subMenuList:[],//二级菜单 所有
+        mainParentMenuList:[],//头部菜单显示主要的选项
+        loginDown: false, //登录下拉
+        menuActive: "", //选中菜单
+        editableTabsValue: '',
+        editableTabs: [],//当前打开的tab页面
+        shortcutMenu:false,//快捷菜单显示状态
+        collapseMenu:false,//菜单折叠，false不折叠
+        currentTab:'',//当前激活tab的name
+        tabIndex: 2,
+      },
+      watch:{
+          menuList:function(n,o){
+              var that = this;
+            n && n.forEach(function(item,index){
+                item.modelModelId == 0 ? that.parentMenuList.push(item) : that.subMenuList.push(item)
+            })
+          },
+          parentMenuList:function(n,o){
+             this.mainParentMenuList = n.slice(0,5);
+          },
+      },
+      methods: {
+        // 菜单列表
+        list:function(){
+            var that = this;
+            ms.http.get(ms.base + "/ms/model/list.do")
+                .then((data)=>{
+                    that.menuList = data.rows
+                }, (err) => {
+                    that.$message.error(data.resultMsg);
+                })	
+        },
+        // 菜单打开页面
+        open:function(title,url){
+            var result = '';
+            result = this.editableTabs.some(function (item,index) {return item.title == title})
+            !result ?　this.editableTabs.push({title:title,url:url}) : ""
+            this.currentTab = title;
+            // 处理其他逻辑
+        },
+        // 获取当前菜单的子菜单
+        getSubMenu:function (modelId) {
+            var result = [];
+            var that = this;
+            that.subMenuList && that.subMenuList.forEach(function (item) {
+                item.modelModelId == modelId ? result.push(item) : ''
+            })
+            return result;
+        },
+        // 匹配图标
+        iconType:function (title) {
+            return this.icon[title] || 'icon-xitongpeizhi'
+        },
+         //关闭tab标签页
+         closeTab(targetName) {
+            var that = this;
+            // 关闭的面板是当前激活面板
+            if(that.currentTab == targetName){
+                that.editableTabs.forEach(function (tab,index,arr) {
+                    if(tab.title == targetName){
+                        var nextTab = arr[index + 1] || arr[index - 1];
+                        if(nextTab){
+                            that.currentTab = nextTab.title
+                        }
+                    }
+                })
+            }
+            // 关闭的不是当前面板
+            that.editableTabs = that.editableTabs.filter(function (tab) {
+                return tab.title !== targetName
+            })
+         },
+        //  头部导航打开菜单
+         openMenu:function(menu,index){
+             this.$refs.menu.open(index);
+             var children = [];
+             this.menuList.forEach(function (tab) {
+                 if(tab.modelModelId == menu.modelId){
+                    children.push(tab)
+                 }
+             })
+             this.currentTab = children[0] && children[0].modelTitle;
+             this.open(children[0].modelTitle,children[0].modelUrl);
+             var that = this;
+             setTimeout(function(){
+                that.shortcutMenu = false
+             },50)
+         }
+      },
+      mounted:function(){
+            // 菜单列表
+            this.list();
+      },
+   })
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/manager/login.ftl b/src/main/webapp/WEB-INF/manager/login.ftl
new file mode 100644
index 00000000..793d910b
--- /dev/null
+++ b/src/main/webapp/WEB-INF/manager/login.ftl
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <meta charset="utf-8">
+    <!--浏览器小图标-->
+    <link rel="icon" href="http://cdn.mingsoft.net/global/images/ms.ico" type="x-icon">
+    <script type="text/javascript" src="https://unpkg.com/vue@2.5.21/dist/vue.min.js"></script>
+    <!--小图标-->
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_847907_mkdvd7gopsg.css">
+    <!-- 引入样式 -->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+    <!-- 引入组件库 -->
+    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+    <!--网络请求框架-->
+    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
+    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
+    <!--铭飞-->
+    <script src="http://cdn.mingsoft.net/ms/1.0/ms.js"></script>
+    <script src="http://cdn.mingsoft.net/ms/1.0/ms.http.js"></script>
+    <script src="http://cdn.mingsoft.net/ms/1.0/ms.util.js"></script>
+    <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/less/ms.less">
+    <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/css/login.css">
+    <script>
+        ms.base = "${base}";
+        ms.manager = "${managerPath}";
+    </script>
+</head>
+
+<body>
+    <div id="login" class="login">
+        <el-container class="ms-admin-login-container">
+            <el-main class="ms-admin-login-main">
+                <div class="ms-admin-login-warp">
+                    <img :src="ms.base+'/static/ms-admin/4.7.0/images/login-slogn.png'">
+                    <el-form :model="loginForm" status-icon :rules="loginFormRule" ref="loginForm" label-width="100px" class="ms-admin-login-form">
+                        <h1><span>账户登录 / </span>User login</h1>
+                        <el-form-item prop="name" class="ms-admin-form-item">
+                            <el-input type="text" placeholder='用户名' v-model="loginForm.managerName" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="pass" class="ms-admin-form-item">
+                            <el-input type="password" placeholder='密码' v-model="loginForm.managerPassword" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="code" class="ms-admin-form-item ms-admin-form-item-code">
+                            <el-input type="text" placeholder='验证码' v-model="loginForm.rand_code" autocomplete="off"></el-input>
+                            <img :src="code" class="code-img" @click="code" />
+                            <p><span>看不清?</span><span>换一张</span></p>
+                        </el-form-item>
+                        <el-form-item class="ms-admin-form-item ms-admin-form-item-checkout">
+                            <el-checkbox v-model="rememberPass">记住密码</el-checkbox>
+                        </el-form-item>
+                        <el-form-item class="ms-admin-form-item">
+                            <el-button type="primary" @click="checkLogin" class="ms-admin-login-btn">登录</el-button>
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </el-main>
+        </el-container>
+    </div>
+</body>
+
+</html>
+<script>
+var loginVue = new Vue({
+    el: '#login',
+    data: {
+        loginForm: {
+            managerName: '',
+            managerPassword: "",
+            rand_code: '',
+        },
+        code: ms.base + "/code?t=" + new Date().getTime(),
+        rememberPass: '',
+        loginFormRule: {
+            managerName: [{
+                    required: true,
+                    message: '请输入用户名',
+                    trigger: 'blur'
+                },
+                {
+                    min: 3,
+                    max: 6,
+                    message: '长度在 3 到 5 个字符',
+                    trigger: 'blur'
+                }
+            ],
+            managerPassword: [{
+                    required: true,
+                    message: '请输入密码',
+                    trigger: 'blur'
+                },
+                {
+                    min: 6,
+                    max: 20,
+                    message: '长度在 6 到 20 个字符',
+                    trigger: 'blur'
+                }
+            ],
+            rand_code: [{
+                    required: true,
+                    message: '请填写验证码',
+                    trigger: 'blur'
+                },
+                {
+                    min: 1,
+                    max: 4,
+                    message: '长度在1 到 4 个字符',
+                    trigger: 'blur'
+                }
+            ],
+        }
+    },
+    methods: {
+        // 登录
+        checkLogin: function(form) {
+            var that = this;
+            ms.http.post(ms.base + "/ms/checkLogin.do", form).then(function(data) {
+                if (data.result) {
+                    that.$notify({
+                        title: '成功',
+                        message: '登录成功',
+                        type: 'success'
+                    });
+                    location.href = ms.manager+"/index.do";
+                } else {
+                    that.$notify({
+                        title: '失败',
+                        message: data.resultMsg,
+                        type: 'warning'
+                    });
+                }
+            }, (err) => {
+                that.$message.error(data.resultMsg);
+            })
+        },
+        code: function() {
+            code: ms.base + "/code?t=" + new Date().getTime();
+        },
+
+    },
+    mounted: {
+
+
+    }
+})
+</script>
\ No newline at end of file
