瀏覽代碼

轮播图管理

liuyifan 5 年之前
父節點
當前提交
bc16926af4

+ 36 - 0
CallCenterWeb.UI/carouselManagement/addCarousel.html

@@ -0,0 +1,36 @@
1
+<!DOCTYPE html>
2
+<html>
3
+
4
+<head>
5
+    <meta charset="UTF-8">
6
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+    <script src="../Script/Common/huayi.load.js"></script>
8
+    <script src="../Script/Common/huayi.config.js"></script>
9
+    <link rel="stylesheet" href="../css/init.css" />
10
+    <link rel="stylesheet" type="text/css" href="./css/addCarousel.css">
11
+    <title>轮播图管理添加</title>
12
+</head>
13
+
14
+<body class="gray-bg">
15
+    <div class="clearfix wrapper wrapper-content animated fadeInRight">
16
+        <div class="common">
17
+            <table class="customerService">
18
+            	<tbody>
19
+					<tr class="upfile-wrapper">
20
+						<th>上传图片:</th>
21
+                        <td>
22
+                        	<div class="form-group">
23
+                        		<span class="upfile-text"></span>
24
+								<input id="btndr" type="button" class="btns" value="上传" />
25
+								<input type="file" name="upFile" id="upFile" style="display: none;">
26
+							</div>
27
+                        </td>
28
+                    </tr>
29
+                </tbody>
30
+            </table>
31
+        </div>
32
+    </div>
33
+    <script src="./js/addCarousel.js"></script>
34
+</body>
35
+
36
+</html>

+ 63 - 0
CallCenterWeb.UI/carouselManagement/carouselManagement.html

@@ -0,0 +1,63 @@
1
+<!DOCTYPE html>
2
+<html>
3
+<head>
4
+    <meta charset="UTF-8">
5
+    <title>轮播图管理</title>
6
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+    <script src="../Script/Common/huayi.load.js"></script>
8
+	<script src="../Script/Common/huayi.config.js"></script>
9
+	<link href="../css/init.css" rel="stylesheet" />
10
+	<link href="./css/carouselManagement.css" rel="stylesheet" />
11
+</head>
12
+<body class="gray-bg">
13
+    <div class="wrapper wrapper-content animated fadeInRight">
14
+        <div class="daoHang clearfix">
15
+            <div class="dhLeft">
16
+                <sapn><i class="syIcon"></i>位置:<a href="javaScript:;" id="ReIndex">首页</a>&gt;<a href="javaScript:;">轮播图管理</a>&gt;<a href=""class="nowPosition">轮播图管理</a></sapn>
17
+            </div>
18
+            <div class="dhRight">
19
+                <a href="#" title="刷新"><i class="fa fa-refresh"></i></a>
20
+            </div>
21
+        </div>
22
+        <div class="wrapper wrapper-content animated fadeInRight">
23
+            <div class="toolBox">
24
+                <div class="th-bar clearfix">
25
+                    <div class="pull-left">
26
+                        <div class="form-inline">
27
+                            <div class="time-box form-group">
28
+								<span>
29
+									图片名称:
30
+									<input class="form-control" type="text" id="pictureName" placeholder="请输入图片名称" />
31
+								</span>
32
+							</div>
33
+							<button class="btns search">搜索</button>
34
+                        </div>
35
+                    </div>
36
+                    <div class="pull-right">
37
+                        <button class="btns add">添加</button>
38
+                        <button class="btns enable">启用</button>
39
+                        <button class="btns disable">禁用</button>
40
+                        <button class="btns delete">删除</button>
41
+                    </div>
42
+                </div>
43
+            </div>
44
+        </div>
45
+        <div style="width: 100%; padding-left: 20px;">
46
+            <table id="workorderlist" class="market" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
47
+                <thead>
48
+                    <tr>
49
+                    	<th data-field="state" data-checkbox="true" data-align="center"></th>
50
+						<th data-field="roname" data-formatter="formatterRoname" data-align="center">图片名称</th>
51
+						<th data-field="romath" data-align="center">图片地址</th>
52
+						<th data-field="uploadpeo" data-align="center">上传人</th>
53
+						<th data-field="uploaddate" data-align="center">上传时间</th>
54
+						<th data-field="isEnable" data-formatter="formatterIsEnable" data-align="center">是否启用</th>
55
+					</tr>
56
+                </thead>
57
+            </table>
58
+        </div>
59
+    </div>
60
+    
61
+	<script src="./js/carouselManagement.js"></script>
62
+</body>
63
+</html>

+ 24 - 0
CallCenterWeb.UI/carouselManagement/css/addCarousel.css

@@ -0,0 +1,24 @@
1
+ ul li {
2
+    float: initial;
3
+    list-style: none;
4
+}
5
+
6
+.common {
7
+    width: 100%;
8
+    padding: 20px 40px 0 0;
9
+}
10
+
11
+.common table {
12
+    width: 100%;
13
+}
14
+
15
+.common table th {
16
+    text-align: center;
17
+}
18
+
19
+.common table td {
20
+    padding: 6px 0 5px 10px;
21
+    text-align: left;
22
+    color: #717171;
23
+    line-height: 200%;
24
+}

+ 34 - 0
CallCenterWeb.UI/carouselManagement/css/carouselManagement.css

@@ -0,0 +1,34 @@
1
+ul,
2
+li {
3
+    padding: 0;
4
+    margin: 0;
5
+    list-style: none;
6
+}
7
+.image-box {
8
+    display: inline-block;
9
+    margin-right: 15px;
10
+    width: 120px;
11
+    height: 120px;
12
+    line-height: 120px;
13
+    border-radius: 5px;
14
+    border: solid 1px #e8e8e8;
15
+	cursor: pointer;
16
+    text-align: center;
17
+}
18
+
19
+.image-item {
20
+    width: 120px;
21
+    height: 120px;
22
+    background-size: 100% 100%;
23
+}
24
+
25
+.layui-layer-photos .layui-layer-phimg {
26
+    height: 100%;
27
+}
28
+
29
+.layui-layer-photos .layui-layer-phimg img {
30
+    width: auto;  
31
+    height: auto;  
32
+    max-width: 100%;  
33
+    max-height: 100%;     
34
+}

+ 45 - 0
CallCenterWeb.UI/carouselManagement/js/addCarousel.js

@@ -0,0 +1,45 @@
1
+$(document).ready(function () {
2
+
3
+})
4
+
5
+$("#btndr").click(function () {
6
+    $("#upFile").trigger("click");
7
+})
8
+$("#upFile").change(function () {
9
+    upload();
10
+})
11
+
12
+//上传文件
13
+function upload() {
14
+    if (document.getElementById("upFile").files.length > 0) {
15
+        var formData = new FormData();
16
+        formData.append("upFile", document.getElementById("upFile").files[0]);
17
+        formData.append("token", $.cookie("token"));
18
+        $.ajax({
19
+            url: huayi.config.callcenter_url + "Rotation/UploadTX",
20
+            type: "POST",
21
+            data: formData,
22
+            contentType: false,
23
+            processData: false,
24
+            success: function (result) {
25
+                document.getElementById("upFile").outerHTML = document.getElementById("upFile").outerHTML;
26
+                $("#upFile").change(function () {
27
+                    upload();
28
+                });
29
+                var r = $.parseJSON(result);
30
+                if (r.state.toLowerCase() == "success") {
31
+                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
32
+                    parent.layer.close(index); //再执行关闭
33
+                    parent.layer.msg("上传成功");
34
+                    parent.initTable();
35
+                } else {
36
+                	layer.msg("上传失败");
37
+                }
38
+            }
39
+        });
40
+    } else {
41
+        layer.confirm('请上传文件!', {
42
+            btn: ['确定']
43
+        });
44
+    }
45
+}

+ 224 - 0
CallCenterWeb.UI/carouselManagement/js/carouselManagement.js

@@ -0,0 +1,224 @@
1
+$(document).ready(function () {
2
+    initTable();
3
+	//添加
4
+	$(".add").on("click", function(){
5
+		btnAdd();
6
+    })
7
+    //搜索
8
+    $(".search").on("click", function() {
9
+        initTable();
10
+    })
11
+})
12
+
13
+//列表
14
+function initTable() {
15
+    //先销毁表格
16
+    $('#workorderlist').bootstrapTable('destroy');
17
+    //初始化表格,动态从服务器加载数据
18
+    $("#workorderlist").bootstrapTable({
19
+        method: "get",  //使用get请求到服务器获取数据
20
+        url: huayi.config.callcenter_url + "Rotation/Getlist", //获取数据的Servlet地址
21
+        contentType: 'application/x-www-form-urlencoded',
22
+        striped: true,  //表格显示条纹
23
+        pagination: true, //启动分页
24
+        pageSize: 10,  //每页显示的记录数
25
+        pageNumber: 1, //当前第几页
26
+        pageList: [10, 20, 50, 100],  //记录数可选列表
27
+        search: false,  //是否启用查询
28
+        showColumns: false,  //显示下拉框勾选要显示的列
29
+        showRefresh: false,  //显示刷新按钮
30
+        sidePagination: "server", //表示服务端请求
31
+        //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
32
+        //设置为limit可以获取limit, offset, search, sort, order
33
+        queryParamsType: "undefined",
34
+        queryParams: function queryParams(params) { //设置查询参数
35
+			var param = {
36
+				token: $.cookie("token"),
37
+				name: $("#pictureName").val().replace(/\ +/g,""), //模糊搜索
38
+				pageindex: params.pageNumber, //页码
39
+				pagesize: params.pageSize, //条数
40
+			};
41
+			return param;
42
+        },
43
+        responseHandler: function (res) {
44
+            return {
45
+                "total": res.data.total,
46
+                "rows": res.data.modelList,
47
+            }
48
+        },
49
+        onLoadSuccess: function () {  //加载成功时执行
50
+            //layer.msg("加载成功");
51
+        },
52
+        onLoadError: function () {  //加载失败时执行
53
+            //layer.msg("加载数据失败", { time: 1500, icon: 2 });
54
+        }
55
+    });
56
+}
57
+
58
+//添加
59
+function btnAdd () {
60
+	layer.open({
61
+		type: 2,
62
+		title: '添加',
63
+		maxmin: true, //开启最大化最小化按钮
64
+		area: ['30%', '40%'],
65
+		content: "./addCarousel.html?",
66
+	});
67
+}
68
+
69
+//删除
70
+$('.delete').click(function () {
71
+    var ids = $.map($("#workorderlist").bootstrapTable('getSelections'), function (row) {
72
+        return row.id;
73
+    });
74
+    var delid = ids.join(",");
75
+    if (ids.length <= 0) {
76
+        layer.confirm('请选择要删除的行!', {
77
+            btn: ['确定']
78
+        });
79
+        return;
80
+    } else {
81
+        var laye = layer.confirm('您确定要删除吗?', {
82
+            btn: ['确定', '取消'] //可以无限个按钮
83
+        }, function () {
84
+            //按钮【按钮一】的回调
85
+            $.ajax({
86
+                type: "post",
87
+                url: huayi.config.callcenter_url + "Rotation/SCRotion",
88
+                async: true,
89
+                dataType: "json",
90
+                data: {
91
+                    token: $.cookie("token"),
92
+                    ids: delid
93
+                },
94
+                success: function (data) {
95
+                    if (data.state.toLowerCase() == 'success') {
96
+                        layer.msg("删除成功!");
97
+                        $("#workorderlist").bootstrapTable('refresh');
98
+                    }
99
+                }
100
+            });
101
+        }, function (index) {
102
+            //按钮【按钮二】的回调
103
+            layer.close(laye)
104
+        });
105
+    }
106
+})
107
+
108
+//启用
109
+$('.enable').click(function() {
110
+    var ids = $.map($("#workorderlist").bootstrapTable('getSelections'), function (row) {
111
+        return row.id;
112
+    });
113
+    var formatId = ids.join(',')
114
+    if (ids.length <= 0) {
115
+        layer.confirm('请选择要启用的行!', {
116
+            btn: ['确定']
117
+        });
118
+        return;
119
+    } else {
120
+        var laye = layer.confirm('您确定要启用吗?', {
121
+            btn: ['确定', '取消'] //可以无限个按钮
122
+        }, function () {
123
+            //按钮【按钮一】的回调
124
+            $.ajax({
125
+                type: "post",
126
+                url: huayi.config.callcenter_url + "Rotation/poenRotion",
127
+                async: true,
128
+                dataType: "json",
129
+                data: {
130
+                    token: $.cookie("token"),
131
+                    ids: formatId,
132
+                },
133
+                success: function (data) {
134
+                    if (data.state.toLowerCase() == 'success') {
135
+                        layer.msg("启用成功!");
136
+                        $("#workorderlist").bootstrapTable('refresh');
137
+                    }
138
+                }
139
+            });
140
+        }, function (index) {
141
+            //按钮【按钮二】的回调
142
+            layer.close(laye)
143
+        });
144
+    }
145
+})
146
+
147
+//禁用
148
+$('.disable').click(function() {
149
+    var ids = $.map($("#workorderlist").bootstrapTable('getSelections'), function (row) {
150
+        return row.id;
151
+    });
152
+    var formatId = ids.join(',')
153
+    if (ids.length <= 0) {
154
+        layer.confirm('请选择要禁用的行!', {
155
+            btn: ['确定']
156
+        });
157
+        return;
158
+    } else {
159
+        var laye = layer.confirm('您确定要禁用吗?', {
160
+            btn: ['确定', '取消'] //可以无限个按钮
161
+        }, function () {
162
+            //按钮【按钮一】的回调
163
+            $.ajax({
164
+                type: "post",
165
+                url: huayi.config.callcenter_url + "Rotation/Deldter",
166
+                async: true,
167
+                dataType: "json",
168
+                data: {
169
+                    token: $.cookie("token"),
170
+                    ids: formatId,
171
+                },
172
+                success: function (data) {
173
+                    if (data.state.toLowerCase() == 'success') {
174
+                        layer.msg("禁用成功!");
175
+                        $("#workorderlist").bootstrapTable('refresh');
176
+                    }
177
+                }
178
+            });
179
+        }, function (index) {
180
+            //按钮【按钮二】的回调
181
+            layer.close(laye)
182
+        });
183
+    }
184
+})
185
+
186
+function formatterIsEnable(val, row) {
187
+    if (val == 0) {
188
+		return "启用";
189
+	} else if (val == 1) {
190
+		return "禁用";
191
+	} else {
192
+        return "-"
193
+    }
194
+}
195
+
196
+function formatterRoname(val, row) {
197
+    return '<div class="" ><a index="' + val + '"onclick="showPictures(\''+ row.id + '\',\'' + row.roname + '\',\'' + row.romath + '\')">' + val + '</a></div>';
198
+}
199
+
200
+function showPictures(id, name, path) {
201
+    layer.photos({
202
+        photos: {
203
+            "title": "", //相册标题
204
+            "id": "", //相册id
205
+            "start": 0, //初始显示的图片序号,默认0
206
+            "data": [   //相册包含的图片,数组格式
207
+                {
208
+                    "alt": name,
209
+                    "pid": id, //图片id
210
+                    "src": path, //原图地址
211
+                    "thumb": "" //缩略图地址
212
+                }
213
+            ]
214
+        },
215
+        anim: 5, //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
216
+        title: '查看图片',
217
+        move: '.layui-layer-title',
218
+        shadeClose: false,
219
+        closeBtn: 1,
220
+        area: ['60%', '95%'],
221
+        tab: function(pic, layero){
222
+        }
223
+    });
224
+}

+ 0 - 1
CallCenterWeb.UI/js/WorkOrder/WorkOrderDealWith.js

@@ -35,7 +35,6 @@ function upload() {
35 35
         var formData = new FormData();
36 36
         formData.append("upFile", document.getElementById("upFile").files[0]);
37 37
         formData.append("token", $.cookie("token"));
38
-        console.log("formData",formData)
39 38
         $.ajax({
40 39
             url: huayi.config.callcenter_url + "WorkOrder/UploadFile",
41 40
             type: "POST",