移动系统liao
2024-05-09 5d6cb15ac86d9174393cb9d1538d69b567e2c26c
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<title>文章表</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>文章</cite></a>
        <a><cite>编辑文章</cite></a>
    </div>
</div>
<script type="text/html" template lay-type="Post" lay-url="{{ layui.setter.apiUrl }}Api/CoreCmsArticle/GetEdit?id={{ layui.router().search.id }}" lay-done="layui.data.sendParams(d);">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-form coreshop-form layui-form-pane" lay-filter="LAY-app-CoreCmsArticle-editForm" id="LAY-app-CoreCmsArticle-editForm">
                <input type="hidden" name="id" id="id" value="{{d.data.model.id || '' }}" />
                <div class="layui-form-item">
                    <label for="typeId" class="layui-form-label">分类</label>
                    <div class="layui-input-inline layui-inline-4">
                        <select name="typeId" id="typeId" lay-verify="required">
                            <option>请选择</option>
                            {{# layui.each( d.data.categories, function(index, item){ }}
                            <option value="{{ item.id }}" {{item.id===d.data.model.typeId?'selected="selected"':'' }}>{{ item.name }}</option>
                            {{# }); }}
                        </select>
                    </div>
                    <label for="title" class="layui-form-label">标题</label>
                    <div class="layui-input-inline layui-inline-10">
                        <input name="title" id="title" lay-verType="tips" lay-verify="required|verifytitle" class="layui-input" placeholder="请输入标题" lay-reqText="请输入标题" value="{{d.data.model.title || '' }}" />
                    </div>
                </div>
 
                <div class="layui-form-item layui-form-text">
                    <label for="brief" class="layui-form-label">简介</label>
                    <div class="layui-input-block">
                        <textarea name="brief" id="brief" lay-verType="tips" lay-verify="required|verifybrief" lay-reqText="请输入不超过100个字符内容" placeholder="请输入不超过100个字符内容" class="layui-textarea">{{d.data.model.brief || '' }}</textarea>
                    </div>
                </div>
 
                <div class="layui-form-item">
                    <label for="coverImage" class="layui-form-label">封面图</label>
                    <div class="layui-input-inline layui-inline-10">
                        <input name="coverImage" id="coverImage" lay-verType="tips" lay-verify="required" class="layui-input" value="{{d.data.model.coverImage || '' }}" placeholder="请上传封面图" lay-reqText="请上传封面图" />
                    </div>
 
                    <div class="layui-input-inline">
                        <img class="coreshop-upload-img" id="viewImgBoxcoverImage" src="{{d.data.model.coverImage || layui.setter.noImagePicUrl }}">
                        <button type="button" class="layui-btn" id="upBtncoverImage">上传图片</button>
                    </div>
 
                </div>
 
                <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block">
                        <div class="document-editor">
                            <div class="toolbar-container" id="toolbar-container"></div>
                            <div class="content-container">
                                <div id="editor"></div>
                            </div>
                        </div>
                    </div>
                </div>
 
                <div class="layui-form-item">
                    <label for="sort" class="layui-form-label">排序</label>
                    <div class="layui-input-inline layui-inline-2">
                        <input type="number" min="0" max="999999" name="sort" id="sort" lay-verType="tips" lay-verify="required|number" class="layui-input" value="{{d.data.model.sort || '' }}" placeholder="请输入排序" lay-reqText="请输入排序并为数字" />
                    </div>
                    <label for="isPub" class="layui-form-label">是否发布</label>
                    <div class="layui-input-inline layui-inline-2">
                        <input type="checkbox" lay-filter="switch" name="isPub" id="isPub" {{ d.data.model.isPub ? 'checked' : '' }} lay-skin="switch" lay-text="开启|关闭">
                    </div>
                    <label for="isDel" class="layui-form-label">是否删除</label>
                    <div class="layui-input-inline layui-inline-2">
                        <input type="checkbox" lay-filter="switch" name="isDel" id="isDel" {{ d.data.model.isDel ? 'checked' : '' }} lay-skin="switch" lay-text="开启|关闭">
                    </div>
                    <label for="pv" class="layui-form-label">访问量</label>
                    <div class="layui-input-inline layui-inline-2">
                        <input type="number" min="0" max="999999" name="pv" id="pv" lay-verType="tips" lay-verify="required|number" class="layui-input" value="{{d.data.model.pv || '' }}" placeholder="请输入访问量" lay-reqText="请输入访问量并为数字" />
                    </div>
                </div>
 
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <div class="layui-footer">
                            <input type="button" class="layui-btn" lay-submit lay-filter="LAY-app-CoreCmsArticle-editForm-submit" id="LAY-app-CoreCmsArticle-editForm-submit" value="确认编辑">
                            <a href="javascript:history.back(-1);" class="layui-btn layui-btn-primary">返回</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
</script>
 
<script>
 
    var debug = layui.setter.debug;
    layui.data.sendParams = function (d) {
        //开启调试情况下获取接口赋值数据
        if (debug) { console.log(d); }
        layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper', 'cropperImg'],
            function () {
                var $ = layui.$
                    , form = layui.form
                    , admin = layui.admin
                    , laydate = layui.laydate
                    , upload = layui.upload
                    , cropperImg = layui.cropperImg
                    , coreHelper = layui.coreHelper;
 
                //加载编辑器
                var Authorization = layui.data(layui.setter.tableName)[layui.setter.request.tokenName];
                editor = CKEDITOR.replace('editor', {
                    fileTools_requestHeaders: {
                        'Authorization': Authorization
                    }
                });
                editor.setData(d.data.model.contentBody);
               
                //封面图图片上传
                $('#upBtncoverImage').click(function () {
                    cropperImg.cropImg({
                        aspectRatio: 16 / 9,
                        imgSrc: $('#viewImgBoxcoverImage').attr('src'),
                        onCrop: function (data) {
                            var loadIndex = layer.load(2);
                            coreHelper.Post("api/Tools/UploadFilesFByBase64", { base64: data }, function (res) {
                                if (0 === res.code) {
                                    $('#viewImgBoxcoverImage').attr('src', res.data.fileUrl);
                                    $("#coverImage").val(res.data.fileUrl);
                                    layer.msg(res.msg);
                                    layer.close(loadIndex);
                                } else {
                                    layer.close(loadIndex);
                                    layer.msg(res.msg, { icon: 2, anim: 6 });
                                }
                            });
                        }
                    });
                });
 
                form.verify({
 
                    verifytitle: [/^[\S]{0,200}$/, '标题最大只允许输入200位字符,且不能出现空格'],
                    verifybrief: [/^[\S]{0,100}$/, '简介最大只允许输入100位字符,且不能出现空格'],
                    verifycoverImage: [/^[\S]{0,255}$/, '封面图最大只允许输入255位字符,且不能出现空格'],
                });
 
                form.on('submit(LAY-app-CoreCmsArticle-editForm-submit)',
                    function (data) {
                        var field = data.field; //获取提交的字段
 
                        field.isPub = field.isPub == 'on';
                        field.isDel = field.isDel == 'on';
 
                        if (!!!field.typeId) {
                            layer.msg("请选择文章分类", { icon: 5 });
                            return false;
                        }
 
                        field.contentBody = window.editor.getData();
                        if (!!!field.contentBody) {
                            layer.msg('文章详情内容不能为空', { icon: 5 });
                            return false;
                        }
 
                        if (debug) { console.log(field); } //开启调试返回数据
                        //提交 Ajax 成功后,关闭当前弹层并重载表格
                        coreHelper.Post("Api/CoreCmsArticle/DoEdit", field, function (e) {
                            console.log(e)
                            if (e.code === 0) {
                                layer.msg(e.msg, { time: 1000 },
                                    function () {
                                        location.hash = '/content/article/articles/';
                                    });
                            } else {
                                layer.msg(e.msg);
                            }
                        });
                    });
 
                //重载form
                form.render(null, 'LAY-app-CoreCmsArticle-editForm');
 
            })
    };
</script>