From 64e44d56228a90973f405874bc6b6b2a11ab1a72 Mon Sep 17 00:00:00 2001
From: yinxr <2273460044@qq.com>
Date: Sat, 26 Jan 2019 17:02:44 +0800
Subject: [PATCH] Signed-off-by: yinxr <2273460044@qq.com>

---
 .../WEB-INF/manager/include/head-file.ftl     |   8 ++
 .../WEB-INF/manager/mweixin/article/index.ftl | 127 ++++++++++++++----
 .../static/ms-admin/4.7.0/less/app.less       |   1 +
 src/main/webapp/static/mweixin/article.less   |  22 +++
 src/main/webapp/static/mweixin/css/app.css    |  99 ++++++++++++++
 .../webapp/static/mweixin/css/article.css     |  28 ++++
 6 files changed, 258 insertions(+), 27 deletions(-)
 create mode 100644 src/main/webapp/static/mweixin/css/app.css

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 b97d3037..f181ec75 100644
--- a/src/main/webapp/WEB-INF/manager/include/head-file.ftl
+++ b/src/main/webapp/WEB-INF/manager/include/head-file.ftl
@@ -16,6 +16,14 @@
     <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>
+
+    <!--jquery-->
+    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
+    <!--百度富文本-->
+    <script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.parse.js"></script>
+    <script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.config.js"></script>
+    <script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.all.js"></script>
+    <script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/lang/zh-cn/zh-cn.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"> -->
diff --git a/src/main/webapp/WEB-INF/manager/mweixin/article/index.ftl b/src/main/webapp/WEB-INF/manager/mweixin/article/index.ftl
index 8005ec7f..575e02e6 100644
--- a/src/main/webapp/WEB-INF/manager/mweixin/article/index.ftl
+++ b/src/main/webapp/WEB-INF/manager/mweixin/article/index.ftl
@@ -3,52 +3,83 @@
 <script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
 <link rel="stylesheet" href="../../../../static/mweixin/css/article.css">
+<!--jquery-->
+<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
+<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.parse.js"></script>
+<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.config.js"></script>
+<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.all.js"></script>
+<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/lang/zh-cn/zh-cn.js"></script>
 <!-- v-if="menuVue.menuActive == '新建图文'" -->
 <div id='article' class="ms-article">
     <el-container>
         <el-aside width="280px">
             <div class="ms-main-article">
-                <img src='https://img03.sogoucdn.com/app/a/100520091/20190125112329'>
+                <img :src='mainArticle.basicPic'>
                 <div class="ms-main-article-mask"></div>
-                <span>国足0-3不敌伊朗被淘汰，赛后还有一个消息</span>
+                <span v-text='mainArticle.basicTitle'></span>
             </div>
-            <draggable v-model="subArticleList" :options="{draggable:'.item'}">
+            <draggable v-model="subArticleList" :options="{draggable:'.ms-article-item'}">
                 <div v-for="(element,index) in subArticleList" :key="index" class="ms-article-item">
-                    <p><span v-text='element.title'></span></p>
-                    <img :src='element.thumbnail'>
+                    <p><span v-text='element.basicTitle'></span></p>
+                    <img :src='element.basicThumbnailsl'>
                 </div>
             </draggable>
-            <el-button size='mini'>添加图文</el-button>
+            <div class="ms-article-footer">
+                <el-button size='medium' icon='el-icon-plus' @click='addArticle'>添加图文</el-button>
+            </div>
         </el-aside>
-        <el-main>Main</el-main>
+        <el-main>
+            <div class="ms-main-header">
+                <el-upload class="avatar-uploader" :show-file-list="false">
+                    <img v-if="false" :src="false" class="avatar">
+                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+                <el-form>
+                    <el-form-item label="标题" prop="name">
+                        <el-input size='mini' placeholder="请输入图文标题">
+                            <span slot='suffix' v-text="titleWordNumber+'/64'"></span>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="作者" prop="region">
+                        <el-input size='mini' placeholder="请输入图文作者">
+                            <span slot='suffix' v-text="authorWordNumber+'/8'"></span>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="摘要" prop="region">
+                        <el-input size='mini' type='textarea' placeholder="选填，如果不写会默认抓取正文前54个字">
+                        </el-input>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <div class="ms-main-body">
+                <!-- 百度编辑器 -->
+                <script id="ueditorArticle" type="text/plain" name="articleContent"></script>
+            </div>
+        </el-main>
     </el-container>
 </div>
 <script>
     var articleVue = new Vue({
         el: '#article',
         data: {
+            mainArticle: {
+                basicPic: 'https://img03.sogoucdn.com/app/a/100520091/20190125112329', //主图
+                basicTitle: '国足0-3不敌伊朗被淘汰，赛后还有一个消息', //标题
+            },
             // 文章列表
             subArticleList: [{
-                title: '硬核！年会当着老板面唱，“干活的干不过写PPT的……',
-                desc: '001100',
-                thumbnail:'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
+                basicTitle: '硬核！年会当着老板面唱，“干活的干不过写PPT的……',
+                basicThumbnailsl: 'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
             }, {
-                title: '个问题grew',
-                desc: '001100',
-                thumbnail:'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
+                basicTitle: '知否知否，党组织犯错，处理有多严?',
+                basicThumbnailsl: 'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
             }, {
-                title: '跟他玩过任务',
-                desc: '001100',
-                thumbnail:'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
-            }, {
-                title: '供热外国人',
-                desc: '001100',
-                thumbnail:'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
-            }, {
-                title: '天文台认为',
-                desc: '001100',
-                thumbnail:'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
-            }]
+                basicTitle: '没有奇迹，国足0-3不敌伊朗止步八强!',
+                basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
+            }],
+            titleWordNumber: '', //图文标题剩余字数
+            authorWordNumber: '', //图文作者剩余字数
+            editor: null, //富文本实例
         },
         watch: {
             subArticleList: function (n, o) {
@@ -56,8 +87,50 @@
             }
         },
         methods: {
-            addPeople: function () {
-
+            // 添加文章
+            addArticle: function () {
+                this.subArticleList.push({
+                    basicTitle: '新增文章标题',
+                    basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
+                })
+            }
+        },
+        mounted: function () {
+            let that = this;
+            //富文本加载
+            var URL = window.UEDITOR_HOME_URL || "http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/";
+            if (this.editor == null) {
+                this.editor = UE.getEditor('ueditorArticle', {
+                    toolbars: [
+                        ['fullscreen', 'undo', 'redo', '|', 'bold', 'italic', 'underline',
+                            'strikethrough',
+                            'removeformat', 'blockquote',
+                            '|', 'forecolor', 'backcolor', 'insertorderedlist',
+                            'insertunorderedlist', '|', 'attachment', 'simpleupload', 'link'
+                        ]
+                    ],
+                    imageScaleEnabled: true,
+                    // 服务器统一请求接口路径
+                    serverUrl: URL +
+                        "jsp/msController.jsp?jsonConfig=%7BvideoUrlPrefix:'http://mpm.mingsoft.net/',fileUrlPrefix:'http://mpm.mingsoft.net/',imageUrlPrefix:'http://mpm.mingsoft.net/',imagePathFormat:'/upload/pm/editor/%7Btime%7D',filePathFormat:'/upload/pm/editor/%7Btime%7D',videoPathFormat:'/upload/pm/editor/%7Btime%7D'%7D",
+                    autoHeightEnabled: true,
+                    autoFloatEnabled: true,
+                    scaleEnabled: false,
+                    compressSide: 0,
+                    maxImageSideLength: 2000,
+                    maximumWords: 80000,
+                    zIndex: 10000,
+                    elementPathEnabled: false,
+                    wordCount: false,
+                    initialFrameWidth: 600,
+                    initialFrameHeight: 240,
+                });
+                this.editor.ready(function () {
+                    var a = $("#ueditor_0").contents()[0].activeElement;
+                    $(a).addClass("ms-webkit-scrollbar").before(
+                        "<style>.ms-webkit-scrollbar::-webkit-scrollbar,::-webkit-scrollbar{width:10px;/*滚动条宽度*/height:1.5%;/*滚动条高度*/}/*定义滚动条轨道内阴影+圆角*/.ms-webkit-scrollbar::-webkit-scrollbar-track,::-webkit-scrollbar-track{border-radius:10px;/*滚动条的背景区域的圆角*/background-color:#eeeeee;/*滚动条的背景颜色*/}.ms-task-content::-webkit-scrollbar-track{border-radius:10px;background-color:#FFFFFF;}/*定义滑块内阴影+圆角*/.ms-webkit-scrollbar::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb{border-radius:10px;/*滚动条的圆角*/background-color:#dddddd;/*滚动条的背景颜色*/}</style>"
+                    );
+                });
             }
         }
     })
diff --git a/src/main/webapp/static/ms-admin/4.7.0/less/app.less b/src/main/webapp/static/ms-admin/4.7.0/less/app.less
index eb866cad..054e00e6 100644
--- a/src/main/webapp/static/ms-admin/4.7.0/less/app.less
+++ b/src/main/webapp/static/ms-admin/4.7.0/less/app.less
@@ -3,6 +3,7 @@
 html,
 body {
     min-height: 100vh;
+    width: 100%;
     background-color: @backgroundColor;
     margin: 0;
     display: flex;
diff --git a/src/main/webapp/static/mweixin/article.less b/src/main/webapp/static/mweixin/article.less
index 62f43225..5a414a17 100644
--- a/src/main/webapp/static/mweixin/article.less
+++ b/src/main/webapp/static/mweixin/article.less
@@ -1,10 +1,13 @@
 // 新建图文
 @import "../ms-admin/4.7.0/less/app.less";
 .ms-article{
+    .ms-flex();
+    width: 100%;
     .el-container{
         // 侧边
         .el-aside{
             padding:14px;
+            background: #fff;
             // 主文章
             .ms-main-article{
                 position: relative;
@@ -46,7 +49,26 @@
                 img{
                     .ms-width-height(50px);
                 }
+                &:hover{
+                    cursor: pointer;
+                }
             }
+            // 尾部
+            .ms-article-footer{
+                background: #fff;
+                padding-top:20px;
+                .el-button{
+                    width: 100%;
+                    background: rgb(242, 242, 246);
+                    i,span{
+                    .ms-font(@auxiliarySize,@auxiliaryColor);
+                    }
+                }
+            }
+        }
+        // 内容区域
+        .el-main{
+            flex:1
         }
     }
 }
\ No newline at end of file
diff --git a/src/main/webapp/static/mweixin/css/app.css b/src/main/webapp/static/mweixin/css/app.css
new file mode 100644
index 00000000..cd9672c0
--- /dev/null
+++ b/src/main/webapp/static/mweixin/css/app.css
@@ -0,0 +1,99 @@
+/*
+*这里的值严格按照UI设计图标注值来进行设置
+*/
+/*
+*颜色
+*/
+/*
+*页面的边距
+*/
+/*
+*字体
+*/
+/*
+*头像
+*/
+/*
+ * 按钮
+ */
+/*
+*对常见的多行样式进行了方法封装，方便调用，加快开发效率
+*/
+html,
+body {
+  min-height: 100vh;
+  width: 100%;
+  background-color: #eee;
+  margin: 0;
+  display: flex;
+  font-weight: initial !important;
+  font-size: 14px !important;
+  color: #333 !important;
+}
+html *,
+body * {
+  text-decoration: none !important;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  box-sizing: border-box;
+}
+.ms-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+.ms-align-center {
+  display: flex;
+  align-items: center;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  font-weight: initial;
+  font-size: 12px;
+  color: #999;
+  resize: none;
+}
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+/*定义滚动条轨道 内阴影+圆角*/
+*::-webkit-scrollbar-track {
+  border-radius: 10px;
+  /*滚动条的背景区域的圆角*/
+  background-color: #eee;
+  /*滚动条的背景颜色*/
+}
+/*定义滑块 内阴影+圆角*/
+*::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  /*滚动条的圆角*/
+  background-color: #ddd;
+  /*滚动条的背景颜色*/
+}
+.ms-container {
+  margin: 12px;
+  height: 100%;
+  padding: 14px 14px 0 14px;
+  background: #fff;
+}
+.ms-header {
+  padding: 10px;
+  margin: 0;
+  border-bottom: 1px solid #ddd;
+  background: #fff;
+  height: 50px;
+}
+.ms-pagination {
+  padding: 20px 0;
+  text-align: right;
+}
+.ms-fr {
+  float: right;
+}
+.ms-tr {
+  text-align: right;
+}
+.el-button + .el-button {
+  margin-left: 0;
+}
diff --git a/src/main/webapp/static/mweixin/css/article.css b/src/main/webapp/static/mweixin/css/article.css
index f48a8f76..b20b4704 100644
--- a/src/main/webapp/static/mweixin/css/article.css
+++ b/src/main/webapp/static/mweixin/css/article.css
@@ -22,8 +22,10 @@
 html,
 body {
   min-height: 100vh;
+  width: 100%;
   background-color: #eee;
   margin: 0;
+  display: flex;
   font-weight: initial !important;
   font-size: 14px !important;
   color: #333 !important;
@@ -95,8 +97,14 @@ textarea::-webkit-input-placeholder {
 .el-button + .el-button {
   margin-left: 0;
 }
+.ms-article {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
 .ms-article .el-container .el-aside {
   padding: 14px;
+  background: #fff;
 }
 .ms-article .el-container .el-aside .ms-main-article {
   position: relative;
@@ -152,3 +160,23 @@ textarea::-webkit-input-placeholder {
   width: 50px;
   height: 50px;
 }
+.ms-article .el-container .el-aside .ms-article-item:hover {
+  cursor: pointer;
+}
+.ms-article .el-container .el-aside .ms-article-footer {
+  background: #fff;
+  padding-top: 20px;
+}
+.ms-article .el-container .el-aside .ms-article-footer .el-button {
+  width: 100%;
+  background: #f2f2f6;
+}
+.ms-article .el-container .el-aside .ms-article-footer .el-button i,
+.ms-article .el-container .el-aside .ms-article-footer .el-button span {
+  font-weight: initial;
+  font-size: 12px;
+  color: #999;
+}
+.ms-article .el-container .el-main {
+  flex: 1;
+}