From 2ca68f84b5105124eac08d610e9071c717368a9c Mon Sep 17 00:00:00 2001
From: yinxr <2273460044@qq.com>
Date: Fri, 25 Jan 2019 16:25:20 +0800
Subject: [PATCH] Signed-off-by: yinxr <2273460044@qq.com>

---
 .../WEB-INF/manager/include/head-file.ftl     |  1 +
 .../WEB-INF/manager/mweixin/custom-menu.ftl   | 64 ++++++-----------
 .../webapp/static/mweixin/css/custom-menu.css | 66 ++++++++++++++---
 .../webapp/static/mweixin/custom-menu.less    | 70 ++++++++++++++++---
 4 files changed, 139 insertions(+), 62 deletions(-)

diff --git a/src/main/webapp/WEB-INF/manager/include/head-file.ftl b/src/main/webapp/WEB-INF/manager/include/head-file.ftl
index 7ee27272..7a4e0efa 100644
--- a/src/main/webapp/WEB-INF/manager/include/head-file.ftl
+++ b/src/main/webapp/WEB-INF/manager/include/head-file.ftl
@@ -18,6 +18,7 @@
     <script src="http://cdn.mingsoft.net/ms/1.0/ms.util.js"></script>
     
     <!-- <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/css/login.css"> -->
+    <!-- <link rel="stylesheet" href="${base}/static/mweixin/css/custom-menu.css"> -->
 
     <link rel="stylesheet" href="../../../static/ms-admin/4.7.0/css/login.css">
     <link rel="stylesheet" href="../../../static/mweixin/css/custom-menu.css">
diff --git a/src/main/webapp/WEB-INF/manager/mweixin/custom-menu.ftl b/src/main/webapp/WEB-INF/manager/mweixin/custom-menu.ftl
index 35f8cccd..a0b475f3 100644
--- a/src/main/webapp/WEB-INF/manager/mweixin/custom-menu.ftl
+++ b/src/main/webapp/WEB-INF/manager/mweixin/custom-menu.ftl
@@ -16,14 +16,10 @@
                     <el-footer>
                         <el-button icon="el-icon-date"></el-button>
                         <div class="ms-create-menu">
-                            <el-dropdown placement='top' :hide-on-click='false'>
-                                <el-button type="primary">新建菜单</el-button>
-                                <el-dropdown-menu slot="dropdown">
-                                    <el-dropdown-item>
-                                        <el-button type="text" icon='el-icon-plus'></el-button>
-                                    </el-dropdown-item>
-                                </el-dropdown-menu>
-                            </el-dropdown>
+                            <div class="ms-create-sub-menu">
+                                <el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button>
+                                <el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button>
+                            </div>
                             <el-button icon="el-icon-plus"></el-button>
                         </div>
                     </el-footer>
@@ -38,27 +34,14 @@
                             <el-input v-model="customMenuForm.name" size='mini'></el-input>
                             <span>菜单名称字数不多于5个汉字或10个字母</span>
                         </el-form-item>
-                        <el-form-item label="菜单内容" prop='content'>
-                            <el-input v-model="customMenuForm.content"></el-input>
-                            <el-tabs v-model="activeName" @tab-click="handleClick">
-                                <el-tab-pane label="图片" name="first">
+                        <el-form-item label="菜单内容"  class="ms-custom-menu-content">
+                            <el-tabs v-model="activeName" @tab-click="">
+                                <el-tab-pane label="图片" name="picture">
                                     <span slot="label"><i class="el-icon-picture"></i>图片</span>
-                                    <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
-                                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
-                                        <i class="el-icon-plus"></i>
-                                    </el-upload>
-                                    <el-dialog :visible.sync="dialogVisible">
-                                        <img width="100%" :src="dialogImageUrl" alt="">
-                                    </el-dialog>
-                                    <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
-                                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
-                                        <i class="el-icon-plus"></i>
-                                    </el-upload>
-                                    <el-dialog :visible.sync="dialogVisible">
-                                        <img width="100%" :src="dialogImageUrl" alt="">
-                                    </el-dialog>
+                                    <div @click="open('store')"><i class="el-icon-picture-outline"></i><span>从素材库选择</span></div>
+                                    <div @click="open('new')"><i class="el-icon-plus"></i><span>新建图片</span></div>
                                 </el-tab-pane>
-                                <el-tab-pane label="图文管理" name="second">
+                                <el-tab-pane label="图文管理" name="article">
                                     <span slot="label"><i class="el-icon-picture"></i>图文管理</span>
                                 </el-tab-pane>
                             </el-tabs>
@@ -77,38 +60,31 @@
         data: {
             customMenuForm: {
                 name: '',
-                content: "",
             },
             customMenuFormRules: {
                 name: [{
                         required: true,
                         message: '请输入菜单名称',
-                        trigger: 'blur'
+                        trigger: ['blur','change']
                     },
                     {
                         min: 1,
                         max: 5,
                         message: '长度在 1 到 5 个字符',
-                        trigger: 'blur'
+                        trigger: ['blur','change']
                     }
                 ],
-                // content:[{ required: true, message: '请输入菜单名称', trigger: 'blur' },
-                //      { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }]
             },
-            dialogImageUrl: '',
-            dialogVisible: false,
-            activeName: 'first'
+            addSubMenuShow:false,//子菜单添加弹窗
+            activeName: 'picture'
         },
         methods: {
-            handleRemove(file, fileList) {
-                console.log(file, fileList);
-            },
-            handlePictureCardPreview(file) {
-                this.dialogImageUrl = file.url;
-                this.dialogVisible = true;
-            },
-            handleClick(tab, event) {
-                console.log(tab, event);
+            open:function(type){
+                if(type == 'store'){
+                    // 素材库
+                }else{
+                    // 新建图片
+                }
             }
         }
 
diff --git a/src/main/webapp/static/mweixin/css/custom-menu.css b/src/main/webapp/static/mweixin/css/custom-menu.css
index d58577d8..47c54f7a 100644
--- a/src/main/webapp/static/mweixin/css/custom-menu.css
+++ b/src/main/webapp/static/mweixin/css/custom-menu.css
@@ -151,26 +151,32 @@ textarea::-webkit-input-placeholder {
   display: flex;
   justify-content: space-between;
 }
-.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button,
-.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-dropdown {
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button {
   flex: 1;
   border: none !important;
   background: transparent !important;
 }
-.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button span,
-.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-dropdown span {
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button span {
   color: #333;
 }
-.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-dropdown {
-  flex: .5;
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu {
+  flex: 1;
+  position: relative;
+}
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu > .el-button:first-child {
+  width: 100%;
 }
-.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-dropdown > .el-button {
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu > .el-button:last-child {
+  position: absolute;
+  top: -60px;
+  left: 0;
+  border: 1px solid #ddd !important;
   width: 100%;
 }
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button--default {
   border-left: 1px solid #ddd !important;
   padding: 0 !important;
-  flex: .5;
+  flex: 1;
 }
 .ms-custom-menu .ms-custom-container .el-main {
   padding: 0 20px;
@@ -191,3 +197,47 @@ textarea::-webkit-input-placeholder {
   font-size: 12px;
   color: #999;
 }
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs {
+  border: 1px solid #ddd;
+}
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tabs__header {
+  background: #f2f2f6;
+  border-radius: 4px 4px 0 0 !important;
+  margin: 0 !important;
+}
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tabs__header .el-tabs__nav-scroll {
+  padding: 0 20px;
+}
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tabs__header .el-tabs__nav-scroll i {
+  margin-right: 8px;
+}
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane {
+  padding: 20px;
+  width: 100%;
+  height: 220px;
+  display: flex;
+  justify-content: space-between;
+}
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane > div {
+  flex: 1;
+  border: 1px dashed #ddd;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane > div i {
+  font-weight: bolder;
+  font-size: 20px;
+  color: #0099ff;
+}
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane > div span {
+  margin-top: 8px;
+  line-height: 1;
+}
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane > div:hover {
+  cursor: pointer;
+}
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane > div:last-child {
+  margin-left: 20px;
+}
diff --git a/src/main/webapp/static/mweixin/custom-menu.less b/src/main/webapp/static/mweixin/custom-menu.less
index 26fa2892..a13136f6 100644
--- a/src/main/webapp/static/mweixin/custom-menu.less
+++ b/src/main/webapp/static/mweixin/custom-menu.less
@@ -44,8 +44,8 @@
                     .ms-create-menu{
                         flex: 1;
                         font-size: 0;
-                      .ms-flex(space-between);
-                      .el-button,.el-dropdown{
+                        .ms-flex(space-between);
+                      .el-button{
                           flex: 1;
                           border: none !important;
                           background: transparent !important;
@@ -53,17 +53,25 @@
                               color:#333;
                           }
                       }
-                      .el-dropdown{
-                        flex: .5;
-                        >.el-button{
-                            width: 100%;
-                        }
+                      .ms-create-sub-menu{
+                            flex: 1;
+                          position: relative;
+                          >.el-button:first-child{
+                              width:100%;
+                          }
+                          >.el-button:last-child{
+                              position: absolute;
+                              top: -60px;
+                              left: 0;
+                              border: 1px solid @borderColor !important;
+                              width: 100%;
+                          }
                       }
-                    //  添加菜单
+                        // 添加菜单
                       .el-button--default{
                           border-left: 1px solid @borderColor !important;
                           padding:0 !important;
-                          flex: .5;
+                          flex: 1;
                       }
                     }
                 }
@@ -88,7 +96,49 @@
                             .ms-font(@auxiliarySize,@auxiliaryColor);
                         }
                     }
-
+                }
+                // 菜单内容
+                .ms-custom-menu-content{
+                    .el-tabs{
+                        border: 1px solid @borderColor;
+                        .el-tabs__header{
+                            background: #f2f2f6;
+                            border-radius:4px 4px 0 0 !important;
+                            margin: 0 !important;
+                            .el-tabs__nav-scroll{
+                                padding: 0 20px;
+                                i{
+                                    margin-right: 8px;
+                                }
+                            }
+                        }
+                        .el-tab-pane{
+                            padding: 20px;
+                            .ms-width-height(100%,220px);
+                            .ms-flex();
+                            // 素材库
+                            >div{
+                                flex: 1;
+                                border: 1px dashed @borderColor;
+                                .ms-flex(center);
+                                align-items: center;
+                                flex-direction: column;
+                                i{
+                                    .ms-font(20px,@themeColor,bolder);
+                                }
+                                span{
+                                    margin-top:8px;
+                                    line-height: 1;
+                                }
+                                &:hover{
+                                    cursor: pointer;
+                                }
+                            }
+                            >div:last-child{
+                                margin-left:20px;
+                            }
+                        }
+                    }
                 }
             }
         }