From bdb56be6fe3d8172fdf3109a6f84ac7ee83a95d4 Mon Sep 17 00:00:00 2001
From: Anyon <zoujingli@qq.com>
Date: Thu, 24 May 2018 18:10:00 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=9B=B4=E6=96=B0]=E4=BF=AE=E6=94=B9=E5=B9=B6?=
 =?UTF-8?q?=E7=AE=80=E5=8C=96=E5=9B=BE=E6=96=87=E7=BC=96=E8=BE=91ag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 application/wechat/controller/News.php |   6 +-
 application/wechat/view/news/form.html | 384 +++++++++++--------------
 2 files changed, 175 insertions(+), 215 deletions(-)

diff --git a/application/wechat/controller/News.php b/application/wechat/controller/News.php
index a8b3e86d5..1d0c1ee23 100644
--- a/application/wechat/controller/News.php
+++ b/application/wechat/controller/News.php
@@ -14,6 +14,7 @@
 
 namespace app\wechat\controller;
 
+use app\wechat\controller\api\Tools;
 use app\wechat\service\MediaService;
 use controller\BasicAdmin;
 use service\DataService;
@@ -145,7 +146,10 @@ class News extends BasicAdmin
         $id = $this->request->get('id', '');
         if ($this->request->isGet()) {
             empty($id) && $this->error('参数错误，请稍候再试！');
-            return $this->fetch('form', ['title' => '编辑图文', 'vo' => MediaService::getNewsById($id)]);
+            if ($this->request->get('output') === 'json') {
+                ToolsService::success('获取数据成功', MediaService::getNewsById($id));
+            }
+            return $this->fetch('form', ['title' => '编辑图文']);
         }
         $data = $this->request->post();
         $ids = $this->_apply_news_article($data['data']);
diff --git a/application/wechat/view/news/form.html b/application/wechat/view/news/form.html
index a8860bf37..f2e2be00b 100644
--- a/application/wechat/view/news/form.html
+++ b/application/wechat/view/news/form.html
@@ -1,258 +1,214 @@
 {extend name='admin@public/content'}
 
 {block name='content'}
-
-<!--左侧图文列表 开始-->
-<div class="panel panel-default news-left">
-    <div class="panel-heading">图文列表</div>
-    <div class="panel-body news-box">
-        {if empty($vo['articles']) eq false}
-        <!--{foreach $vo.articles as $key=>$value}-->
-        <div class="news-item transition" data-id="{$value.id}" style="background-image:url('{$value.local_url}?imageView2/1/w/338/h/190/interlace/1')">
-            <a class="upload-multiple-close layui-icon hide">&#x1006;</a>
-            <span class="news-title">{$value.title}</span>
+<div id="NewsEditor">
+    <!--左侧图文列表 开始-->
+    <div class="panel panel-default news-left">
+        <div class="panel-heading">图文列表</div>
+        <div class="panel-body news-box">
+            <div ng-if="list.length > 0" ng-repeat="x in list">
+                <div class="news-item transition" ng-click="setItem($index)" style="{{x.style}}" ng-class="x.active?'active':''">
+                    <a class="upload-multiple-close layui-icon hide">&#x1006;</a>
+                    <span class="news-title" ng-bind="x.title"></span>
+                </div>
+                <hr/>
+            </div>
+            <div ng-if="list.length<1" class="news-item transition  news-image">
+                <a class="upload-multiple-close layui-icon hide">&#x1006;</a>
+                <span class="news-title"></span>
+                <hr/>
+            </div>
+            <a class='article-add transition' ng-click="addItem()" data-text-tip="添加图文">
+                <i class="fa fa-plus"></i>
+            </a>
         </div>
-        <hr/>
-        <!--{/foreach}-->
-        {else}
-        <div class="news-item transition active news-image" style="background-image:url('__STATIC__/plugs/uploader/theme/image.png')">
-            <a class="upload-multiple-close layui-icon hide">&#x1006;</a>
-            <span class="news-title"></span>
-        </div>
-        <hr/>
-        {/if}
-        <a href="javascript:void(0)" class='article-add transition' data-text-tip="添加图文">
-            <i class="fa fa-plus"></i>
-        </a>
     </div>
-</div>
-<!--左侧图文列表 结束-->
+    <!--左侧图文列表 结束-->
+    <!--右侧编辑区 开始-->
+    <div class="panel panel-default news-right">
+        <div class="panel-heading">图文内容编辑</div>
+        <div class="panel-body">
+            <form class="form-horizontal" role="form" name="news" onsubmit="return false;">
 
-<!--右侧编辑区 开始-->
-<div class="panel panel-default news-right">
-    <div class="panel-heading">图文内容编辑</div>
-    <div class="panel-body">
-        <form class="form-horizontal" role="form" name="news" onsubmit="return false;">
-
-            <div class="form-group">
-                <div class="col-md-12">
-                    <div class="input-group">
-                        <span class="input-group-addon">文章标题</span>
-                        <input maxlength="64" required title="文章的标题不能为空哦" placeholder="请在这里输入标题" name='title' class="layui-input">
-                        <input type="hidden" name="id">
+                <div class="form-group">
+                    <div class="col-md-12">
+                        <div class="input-group">
+                            <span class="input-group-addon">文章标题</span>
+                            <input maxlength="64" ng-model="item.title" required title="文章的标题不能为空哦" placeholder="请在这里输入标题" name='title' class="layui-input">
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="form-group">
-                <div class="col-md-12">
-                    <div class="input-group">
-                        <span class="input-group-addon">文章作者</span>
-                        <input maxlength="8" required title="文章的作者不能为空哦" placeholder="请输入作者" name='author' class="layui-input">
+                <div class="form-group">
+                    <div class="col-md-12">
+                        <div class="input-group">
+                            <span class="input-group-addon">文章作者</span>
+                            <input maxlength="8" ng-model="item.author" required title="文章的作者不能为空哦" placeholder="请输入作者" name='author' class="layui-input">
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="form-group">
-                <div class="col-md-12">
-                    <div class="form-control border-radius-none" style="height:auto">
-                        <label class="color-desc font-s12 margin-bottom-5">图文封面大图片设置</label>
-                        <div class="row nowrap">
-                            <div class="col-xs-3" style="width:160px">
-                                <div class="upload-image-box transition">
-                                    <input value="__STATIC__/plugs/uploader/theme/image.png" type="hidden" name="local_url">
+                <div class="form-group">
+                    <div class="col-md-12">
+                        <div class="form-control border-radius-none" style="height:auto">
+                            <label class="color-desc font-s12 margin-bottom-5">图文封面大图片设置</label>
+                            <div class="row nowrap">
+                                <div class="col-xs-3" style="width:160px">
+                                    <div class="upload-image-box transition">
+                                        <input ng-model="item.local_url" value="__STATIC__/plugs/uploader/theme/image.png" type="hidden" name="local_url">
+                                    </div>
+                                </div>
+                                <div class="col-xs-6 padding-top-10">
+                                    <button type="button" data-title="上传图片" data-file="one" data-type="jpg,png,jpeg" data-field="local_url" class="layui-btn layui-btn-sm layui-btn-primary">上传图片</button>
+                                    <button type="button" data-title="选择图片" data-iframe='{:url("image")}?field=local_url' class="layui-btn layui-btn-sm layui-btn-primary">选择图片</button>
+                                    <br>
+                                    <label class="think-checkbox notselect margin-top-15">
+                                        <input ng-model="item.show_cover_pic" ng-checked="!!item.show_cover_pic" data-auto-none type="checkbox" value="1" name="show_cover_pic"> 在正文中显示此图片
+                                    </label>
                                 </div>
                             </div>
-                            <div class="col-xs-6 padding-top-10">
-                                <button type="button" data-title="上传图片" data-file="one" data-type="jpg,png,jpeg" data-field="local_url" class="layui-btn layui-btn-sm layui-btn-primary">上传图片</button>
-                                <button type="button" data-title="选择图片" data-iframe='{:url("image")}?field=local_url' class="layui-btn layui-btn-sm layui-btn-primary">选择图片</button>
-                                <br>
-                                <label class="think-checkbox notselect margin-top-15">
-                                    <input data-auto-none type="checkbox" value="1" name="show_cover_pic"> 在正文中显示此图片
-                                </label>
-                            </div>
+                            <p class="help-block margin-top-5 color-desc">封面大图片建议尺寸：900像素 * 500像素</p>
                         </div>
-                        <p class="help-block margin-top-5 color-desc">封面大图片建议尺寸：900像素 * 500像素</p>
                     </div>
                 </div>
-            </div>
 
-            <div class="form-group">
-                <div class="col-md-12"><textarea name='content'></textarea></div>
-            </div>
+                <div class="form-group">
+                    <div class="col-md-12"><textarea ng-model="item.content" name='content'></textarea></div>
+                </div>
 
-            <div class="form-group">
-                <div class="col-md-12">
-                    <label class="color-desc">摘要选填，如果不填写会默认抓取正文前54个字</label>
-                    <textarea name="digest" class="layui-textarea" style="height:80px;resize:none"></textarea>
-                </div>
-            </div>
-            <div class="form-group">
-                <div class="col-md-12">
-                    <label class="color-desc">原文链接<b>选填</b>，填写之后在图文左下方会出现此链接</label>
-                    <input maxlength="200" name='content_source_url' class="layui-input">
-                </div>
-            </div>
-            <div class="form-actions">
-                <div class="row">
-                    <div class="col-md-offset-4 col-md-9">
-                        <button data-submit type="button" class="layui-btn">保存图文</button>
+                <div class="form-group">
+                    <div class="col-md-12">
+                        <label class="color-desc">摘要选填，如果不填写会默认抓取正文前54个字</label>
+                        <textarea ng-model="item.digest" name="digest" class="layui-textarea" style="height:80px;line-height:18px;resize:none"></textarea>
                     </div>
                 </div>
-            </div>
-        </form>
+                <div class="form-group">
+                    <div class="col-md-12">
+                        <label class="color-desc">原文链接<b>选填</b>，填写之后在图文左下方会出现此链接</label>
+                        <input ng-model="item.content_source_url" maxlength="200" name='content_source_url' class="layui-input">
+                    </div>
+                </div>
+                <div class="form-actions">
+                    <div class="row">
+                        <div class="col-md-offset-4 col-md-9">
+                            <button ng-click="submit()" type="button" class="layui-btn">保存图文</button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
     </div>
+    <!--右侧编辑区 结束-->
 </div>
-<!--右侧编辑区 结束-->
-
 {/block}
 
 
 {block name='script'}
-<textarea class="hide" id="newsdata">{$vo.articles|default=[]|json_encode=256|raw}</textarea>
 <script>
-    require(['ckeditor'], function () {
+    require(['angular', 'ckeditor'], function () {
 
-        var editDdata = JSON.parse(document.getElementById('newsdata').innerHTML);
+        var $form = $('form[name="news"]');
+        var editor = window.createEditor('[name="content"]');
 
-        for (var i in editDdata) {
-            $('.news-item').eq(i).data('item', editDdata[i]);
-        }
+        var app = angular.module("NewsEditor", []).run(callback);
+        angular.bootstrap(document.getElementById(app.name), [app.name]);
 
-        /*! 实例富文本编辑器  */
-        var editor, $item, $body = $('body'), $form = $('form[name="news"]');
+        function callback($rootScope) {
+            $rootScope.list = [];
+            $rootScope.item = {};
 
-        /*! 默认编辑第一篇图文 */
-        editor = window.createEditor('[name="content"]');
-        $form.vali();
-
-        /*! 上传图片 */
-        $body.on('change', '.upload-image-box input', function () {
-            $('.news-item.active').css('background-image', 'url(' + this.value + ')');
-            $(this).parent('.upload-image-box').css('background-image', 'url(' + this.value + ')');
-        });
-
-        /*! 数据提交 */
-        $form.find('button[data-submit]').on('click', function () {
-            var data = [];
-            $form.submit();
-            if (!syncEditor($('.news-item.active'))) {
-                editor.setData('文章内容不能留空，请输入内容！');
-                return false;
-            }
-            $('.news-item').map(function () {
-                var item = $(this).data('item');
-                item.content = item.content || '文章内容不能留空，请输入内容！';
-                data.push(item);
+            $.form.load('{:request()->url()}', {output: 'json'}, 'get', function (ret) {
+                return $rootScope.$apply(function () {
+                    apply((ret.data || {articles: []}).articles || []);
+                }), false;
             });
-            $.form.load('{:request()->url()}', {data: data}, "post");
-        });
 
-        /*! 输入标题显示 */
-        $form.find('[name="title"]').on('keyup', function () {
-            if ($item) {
-                $item.find('.news-title').html(this.value).show();
-            }
-        });
-
-        /*! 同步编辑器 */
-        function syncEditor($pItem) {
-            // 处理上一个编辑器
-            if ($form && $pItem && $pItem.size() > 0) {
-                var data = {};
-                data.id = $form.find('[name=id]').val();
-                data.title = $form.find('[name=title]').val();
-                data.local_url = $form.find('[name=local_url]').val();
-                data.content = editor.getData() || '';
-                data.author = $form.find('[name=author]').val();
-                data.digest = $form.find('[name=digest]').val();
-                data.show_cover_pic = $form.find('[name="show_cover_pic"]').get(0).checked ? 1 : 0;
-                data.content_source_url = $form.find('[name="content_source_url"]').val();
-                $form.find('[name=local_url]').trigger('change');
-                $pItem.data('item', data), $form.submit();
-                if ($form.find('input.validate-error').size() > 0 || data.content.length < 1) {
-                    ((data.content || '').length < 1) && editor.setData('文章内容不能留空，请输入内容！');
-                    $pItem.addClass('active').siblings().removeClass('active');
-                    return false;
+            function apply(data) {
+                if (data.length < 1) {
+                    data.push({
+                        title: '新建图文',
+                        local_url: '__STATIC__/plugs/uploader/theme/image.png',
+                        style: "background-image:url('__STATIC__/plugs/uploader/theme/image.png?imageView2/1/w/338/h/190/interlace/1')"
+                    });
                 }
+                for (var i in data) {
+                    data[i].style = "background-image:url('" + data[i].local_url + "?imageView2/1/w/338/h/190/interlace/1')";
+                }
+                $rootScope.list = data;
+                $rootScope.item = $rootScope.list[0];
+                $rootScope.setItemValue('active', true);
+                setTimeout(function () {
+                    editor.setData($rootScope.item.content);
+                }, 100);
+                $form.vali();
             }
-            return true;
-        }
 
-        /*! 显示编辑器 */
-        function showEditor() {
-            // 读取对象数据
-            $item = $('.news-item.active');
-            this.get = function () {
-                var data = $item.data('item') || {};
-                data.id = data.id || 0;
-                data.title = data.title || '';
-                data.local_url = data.local_url || '__STATIC__/plugs/uploader/theme/image.png';
-                data.content = data.content || '';
-                data.author = data.author || '';
-                data.digest = data.digest || '';
-                data.content_source_url = data.content_source_url || '';
-                data.show_cover_pic = data.show_cover_pic || 0;
-                return data;
+            $rootScope.setItem = function (index) {
+                $form.vali();
+                if ($form.find('.validate-error').size() > 0) {
+                    return 0;
+                }
+                if (editor.getData().length < 1) {
+                    return $.msg.tips('请输入文章内容');
+                }
+                for (var i in $rootScope.list) {
+                    if (parseInt(i) !== parseInt(index)) {
+                        $rootScope.list[i].active = false;
+                        continue;
+                    }
+                    $rootScope.item.content = editor.getData();
+                    $rootScope.item = $rootScope.list[i];
+                    editor.setData($rootScope.item.content);
+                    $rootScope.setItemValue('active', true);
+                }
             };
-            // 重置表单
-            $form.get(0).reset();
-            // 获取当前数据
-            var data = this.get();
-            for (var i in data) {
-                if (i !== 'content' && i !== 'show_cover_pic') {
-                    $form.find('[name="' + i + '"]').val(data[i]).trigger('change');
+
+            $rootScope.setItemValue = function (name, value) {
+                $rootScope.item[name] = value;
+                var localUrl = $rootScope.item.local_url;
+                $('[name="local_url"]').parent().css('background-image', 'url(' + localUrl + ')');
+                $rootScope.item.style = "background-image:url('" + localUrl + "?imageView2/1/w/338/h/190/interlace/1')";
+            };
+
+            $rootScope.addItem = function () {
+                if ($rootScope.list.length > 7) {
+                    return $.msg.tips('最多允许增加7篇文章哦！');
                 }
-            }
-            if (parseInt(data.show_cover_pic) === 1) {
-                $form.find('[name="show_cover_pic"]').get(0).checked = true;
-            }
+                $rootScope.list.push({
+                    title: '新建图文',
+                    local_url: '__STATIC__/plugs/uploader/theme/image.png',
+                    style: "background-image:url('__STATIC__/plugs/uploader/theme/image.png?imageView2/1/w/338/h/190/interlace/1')"
+                });
+            };
 
-            editor.setData(htmldecode(data.content));
-
-            function htmldecode(string) {
-                var div = document.createElement('div');
-                div.innerHTML = string;
-                return div.innerText || div.textContent;
-            }
+            $rootScope.submit = function () {
+                $form.vali();
+                if ($form.find('.validate-error').size() > 0) {
+                    return $.msg.tips('表单验证不成功，请输入需要的内容！');
+                }
+                $rootScope.item.content = editor.getData();
+                var data = [];
+                for (var i in $rootScope.list) {
+                    data.push({
+                        id: $rootScope.list[i].id,
+                        title: $rootScope.list[i].title,
+                        author: $rootScope.list[i].author,
+                        digest: $rootScope.list[i].digest,
+                        content: $rootScope.list[i].content,
+                        local_url: $rootScope.list[i].local_url,
+                        show_cover_pic: $rootScope.list[i].show_cover_pic ? 1 : 0,
+                        content_source_url: $rootScope.list[i].content_source_url,
+                    })
+                }
+                $.form.load('{:request()->url()}', {data: data}, "post");
+            };
+            $('body').off('change', '[name="local_url"]').on('change', '[name="local_url"]', function () {
+                var value = this.value;
+                $rootScope.$apply(function () {
+                    $rootScope.setItemValue('local_url', value);
+                });
+            });
         }
-
-        /*! 添加新图文 */
-        $body.off('click', '.news-box .article-add').on('click', '.news-box .article-add', function () {
-            var $html = $('<div class="news-item transition" style="background-image:url(__STATIC__/plugs/uploader/theme/image.png)"><a class="upload-multiple-close layui-icon hide">&#x1006;</a><span class="news-title"></span></div><hr />');
-            $html.insertBefore(this).trigger('click');
-            $('.news-item').size() >= 7 && $(this).hide();
-        });
-
-        /*! 列表选择 */
-        $body.off('click', '.news-item').on('click', '.news-item', function () {
-            if (syncEditor($('.news-item.active'))) {
-                $(this).addClass('active').siblings().removeClass('active');
-                showEditor($item);
-            }
-        });
-
-        /*! 隐藏删除按钮 */
-        $body.off('mouseleave').on('mouseleave', '.news-item', function () {
-            $(this).find('.upload-multiple-close').addClass('hide');
-        });
-
-        /*! 显示删除按钮 */
-        $body.off('mouseenter', '.news-item').on('mouseenter', '.news-item', function () {
-            $('.upload-multiple-close').addClass('hide');
-            $(this).find('.upload-multiple-close').removeClass('hide');
-        });
-
-        /*! 删除操作图文 */
-        $body.off('click', '.upload-multiple-close').on('click', '.upload-multiple-close', function () {
-            var $box = $(this).parents('.news-item');
-            $box.add($box.next('hr')).remove();
-            $('.news-item').size() < 7 && $('.news-box .article-add').show();
-        });
-
-        /*! 默认显示第一个 */
-        $('.news-box .news-item:first').trigger('click');
-
     });
 </script>
 {/block}