Skip to content

dev / mgm-growth-admin-pro

Go to a project
Toggle navigation
Toggle navigation pinning
8a796e68 by joe
Options

管理端增加小程序跳转配置

1 parent 2422e4ef
Inline Side-by-side
Showing 4 changed files with 469 additions and 347 deletions
...@@ -325,7 +325,8 @@ ...@@ -325,7 +325,8 @@
325 "version": "1.0.0", 325 "version": "1.0.0",
326 "resolved": "http://registry.npm.taobao.org/assert-plus/download/assert-plus-1.0.0.tgz", 326 "resolved": "http://registry.npm.taobao.org/assert-plus/download/assert-plus-1.0.0.tgz",
327 "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", 327 "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
328 "dev": true 328 "dev": true,
329 "optional": true
329 }, 330 },
330 "assign-symbols": { 331 "assign-symbols": {
331 "version": "1.0.0", 332 "version": "1.0.0",
...@@ -1972,6 +1973,7 @@ ...@@ -1972,6 +1973,7 @@
1972 "resolved": "http://registry.npm.taobao.org/combined-stream/download/combined-stream-1.0.7.tgz", 1973 "resolved": "http://registry.npm.taobao.org/combined-stream/download/combined-stream-1.0.7.tgz",
1973 "integrity": "sha1-LR0kMXr7ir6V1tLAsHtXgTU52Cg=", 1974 "integrity": "sha1-LR0kMXr7ir6V1tLAsHtXgTU52Cg=",
1974 "dev": true, 1975 "dev": true,
1976 "optional": true,
1975 "requires": { 1977 "requires": {
1976 "delayed-stream": "~1.0.0" 1978 "delayed-stream": "~1.0.0"
1977 } 1979 }
...@@ -2763,7 +2765,8 @@ ...@@ -2763,7 +2765,8 @@
2763 "version": "1.0.0", 2765 "version": "1.0.0",
2764 "resolved": "http://registry.npm.taobao.org/delayed-stream/download/delayed-stream-1.0.0.tgz", 2766 "resolved": "http://registry.npm.taobao.org/delayed-stream/download/delayed-stream-1.0.0.tgz",
2765 "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", 2767 "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
2766 "dev": true 2768 "dev": true,
2769 "optional": true
2767 }, 2770 },
2768 "depd": { 2771 "depd": {
2769 "version": "1.1.2", 2772 "version": "1.1.2",
...@@ -3531,7 +3534,8 @@ ...@@ -3531,7 +3534,8 @@
3531 "version": "1.3.0", 3534 "version": "1.3.0",
3532 "resolved": "http://registry.npm.taobao.org/extsprintf/download/extsprintf-1.3.0.tgz", 3535 "resolved": "http://registry.npm.taobao.org/extsprintf/download/extsprintf-1.3.0.tgz",
3533 "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=", 3536 "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
3534 "dev": true 3537 "dev": true,
3538 "optional": true
3535 }, 3539 },
3536 "fast-deep-equal": { 3540 "fast-deep-equal": {
3537 "version": "1.1.0", 3541 "version": "1.1.0",
...@@ -3870,7 +3874,8 @@ ...@@ -3870,7 +3874,8 @@
3870 "ansi-regex": { 3874 "ansi-regex": {
3871 "version": "2.1.1", 3875 "version": "2.1.1",
3872 "bundled": true, 3876 "bundled": true,
3873 "dev": true 3877 "dev": true,
3878 "optional": true
3874 }, 3879 },
3875 "aproba": { 3880 "aproba": {
3876 "version": "1.2.0", 3881 "version": "1.2.0",
...@@ -3891,12 +3896,14 @@ ...@@ -3891,12 +3896,14 @@
3891 "balanced-match": { 3896 "balanced-match": {
3892 "version": "1.0.0", 3897 "version": "1.0.0",
3893 "bundled": true, 3898 "bundled": true,
3894 "dev": true 3899 "dev": true,
3900 "optional": true
3895 }, 3901 },
3896 "brace-expansion": { 3902 "brace-expansion": {
3897 "version": "1.1.11", 3903 "version": "1.1.11",
3898 "bundled": true, 3904 "bundled": true,
3899 "dev": true, 3905 "dev": true,
3906 "optional": true,
3900 "requires": { 3907 "requires": {
3901 "balanced-match": "^1.0.0", 3908 "balanced-match": "^1.0.0",
3902 "concat-map": "0.0.1" 3909 "concat-map": "0.0.1"
...@@ -3911,17 +3918,20 @@ ...@@ -3911,17 +3918,20 @@
3911 "code-point-at": { 3918 "code-point-at": {
3912 "version": "1.1.0", 3919 "version": "1.1.0",
3913 "bundled": true, 3920 "bundled": true,
3914 "dev": true 3921 "dev": true,
3922 "optional": true
3915 }, 3923 },
3916 "concat-map": { 3924 "concat-map": {
3917 "version": "0.0.1", 3925 "version": "0.0.1",
3918 "bundled": true, 3926 "bundled": true,
3919 "dev": true 3927 "dev": true,
3928 "optional": true
3920 }, 3929 },
3921 "console-control-strings": { 3930 "console-control-strings": {
3922 "version": "1.1.0", 3931 "version": "1.1.0",
3923 "bundled": true, 3932 "bundled": true,
3924 "dev": true 3933 "dev": true,
3934 "optional": true
3925 }, 3935 },
3926 "core-util-is": { 3936 "core-util-is": {
3927 "version": "1.0.2", 3937 "version": "1.0.2",
...@@ -4038,7 +4048,8 @@ ...@@ -4038,7 +4048,8 @@
4038 "inherits": { 4048 "inherits": {
4039 "version": "2.0.3", 4049 "version": "2.0.3",
4040 "bundled": true, 4050 "bundled": true,
4041 "dev": true 4051 "dev": true,
4052 "optional": true
4042 }, 4053 },
4043 "ini": { 4054 "ini": {
4044 "version": "1.3.5", 4055 "version": "1.3.5",
...@@ -4050,6 +4061,7 @@ ...@@ -4050,6 +4061,7 @@
4050 "version": "1.0.0", 4061 "version": "1.0.0",
4051 "bundled": true, 4062 "bundled": true,
4052 "dev": true, 4063 "dev": true,
4064 "optional": true,
4053 "requires": { 4065 "requires": {
4054 "number-is-nan": "^1.0.0" 4066 "number-is-nan": "^1.0.0"
4055 } 4067 }
...@@ -4064,6 +4076,7 @@ ...@@ -4064,6 +4076,7 @@
4064 "version": "3.0.4", 4076 "version": "3.0.4",
4065 "bundled": true, 4077 "bundled": true,
4066 "dev": true, 4078 "dev": true,
4079 "optional": true,
4067 "requires": { 4080 "requires": {
4068 "brace-expansion": "^1.1.7" 4081 "brace-expansion": "^1.1.7"
4069 } 4082 }
...@@ -4071,12 +4084,14 @@ ...@@ -4071,12 +4084,14 @@
4071 "minimist": { 4084 "minimist": {
4072 "version": "0.0.8", 4085 "version": "0.0.8",
4073 "bundled": true, 4086 "bundled": true,
4074 "dev": true 4087 "dev": true,
4088 "optional": true
4075 }, 4089 },
4076 "minipass": { 4090 "minipass": {
4077 "version": "2.2.4", 4091 "version": "2.2.4",
4078 "bundled": true, 4092 "bundled": true,
4079 "dev": true, 4093 "dev": true,
4094 "optional": true,
4080 "requires": { 4095 "requires": {
4081 "safe-buffer": "^5.1.1", 4096 "safe-buffer": "^5.1.1",
4082 "yallist": "^3.0.0" 4097 "yallist": "^3.0.0"
...@@ -4095,6 +4110,7 @@ ...@@ -4095,6 +4110,7 @@
4095 "version": "0.5.1", 4110 "version": "0.5.1",
4096 "bundled": true, 4111 "bundled": true,
4097 "dev": true, 4112 "dev": true,
4113 "optional": true,
4098 "requires": { 4114 "requires": {
4099 "minimist": "0.0.8" 4115 "minimist": "0.0.8"
4100 } 4116 }
...@@ -4175,7 +4191,8 @@ ...@@ -4175,7 +4191,8 @@
4175 "number-is-nan": { 4191 "number-is-nan": {
4176 "version": "1.0.1", 4192 "version": "1.0.1",
4177 "bundled": true, 4193 "bundled": true,
4178 "dev": true 4194 "dev": true,
4195 "optional": true
4179 }, 4196 },
4180 "object-assign": { 4197 "object-assign": {
4181 "version": "4.1.1", 4198 "version": "4.1.1",
...@@ -4187,6 +4204,7 @@ ...@@ -4187,6 +4204,7 @@
4187 "version": "1.4.0", 4204 "version": "1.4.0",
4188 "bundled": true, 4205 "bundled": true,
4189 "dev": true, 4206 "dev": true,
4207 "optional": true,
4190 "requires": { 4208 "requires": {
4191 "wrappy": "1" 4209 "wrappy": "1"
4192 } 4210 }
...@@ -4272,7 +4290,8 @@ ...@@ -4272,7 +4290,8 @@
4272 "safe-buffer": { 4290 "safe-buffer": {
4273 "version": "5.1.1", 4291 "version": "5.1.1",
4274 "bundled": true, 4292 "bundled": true,
4275 "dev": true 4293 "dev": true,
4294 "optional": true
4276 }, 4295 },
4277 "safer-buffer": { 4296 "safer-buffer": {
4278 "version": "2.1.2", 4297 "version": "2.1.2",
...@@ -4308,6 +4327,7 @@ ...@@ -4308,6 +4327,7 @@
4308 "version": "1.0.2", 4327 "version": "1.0.2",
4309 "bundled": true, 4328 "bundled": true,
4310 "dev": true, 4329 "dev": true,
4330 "optional": true,
4311 "requires": { 4331 "requires": {
4312 "code-point-at": "^1.0.0", 4332 "code-point-at": "^1.0.0",
4313 "is-fullwidth-code-point": "^1.0.0", 4333 "is-fullwidth-code-point": "^1.0.0",
...@@ -4327,6 +4347,7 @@ ...@@ -4327,6 +4347,7 @@
4327 "version": "3.0.1", 4347 "version": "3.0.1",
4328 "bundled": true, 4348 "bundled": true,
4329 "dev": true, 4349 "dev": true,
4350 "optional": true,
4330 "requires": { 4351 "requires": {
4331 "ansi-regex": "^2.0.0" 4352 "ansi-regex": "^2.0.0"
4332 } 4353 }
...@@ -4370,12 +4391,14 @@ ...@@ -4370,12 +4391,14 @@
4370 "wrappy": { 4391 "wrappy": {
4371 "version": "1.0.2", 4392 "version": "1.0.2",
4372 "bundled": true, 4393 "bundled": true,
4373 "dev": true 4394 "dev": true,
4395 "optional": true
4374 }, 4396 },
4375 "yallist": { 4397 "yallist": {
4376 "version": "3.0.2", 4398 "version": "3.0.2",
4377 "bundled": true, 4399 "bundled": true,
4378 "dev": true 4400 "dev": true,
4401 "optional": true
4379 } 4402 }
4380 } 4403 }
4381 }, 4404 },
...@@ -5589,7 +5612,8 @@ ...@@ -5589,7 +5612,8 @@
5589 "version": "0.1.1", 5612 "version": "0.1.1",
5590 "resolved": "http://registry.npm.taobao.org/jsbn/download/jsbn-0.1.1.tgz", 5613 "resolved": "http://registry.npm.taobao.org/jsbn/download/jsbn-0.1.1.tgz",
5591 "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=", 5614 "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
5592 "dev": true 5615 "dev": true,
5616 "optional": true
5593 }, 5617 },
5594 "jsesc": { 5618 "jsesc": {
5595 "version": "1.3.0", 5619 "version": "1.3.0",
...@@ -10765,7 +10789,8 @@ ...@@ -10765,7 +10789,8 @@
10765 "version": "0.14.5", 10789 "version": "0.14.5",
10766 "resolved": "http://registry.npm.taobao.org/tweetnacl/download/tweetnacl-0.14.5.tgz", 10790 "resolved": "http://registry.npm.taobao.org/tweetnacl/download/tweetnacl-0.14.5.tgz",
10767 "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", 10791 "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
10768 "dev": true 10792 "dev": true,
10793 "optional": true
10769 }, 10794 },
10770 "type-check": { 10795 "type-check": {
10771 "version": "0.3.2", 10796 "version": "0.3.2",
......
...@@ -189,3 +189,38 @@ export const dashboardExport = params => { ...@@ -189,3 +189,38 @@ export const dashboardExport = params => {
189 console.log("url:", url); 189 console.log("url:", url);
190 window.open(url) 190 window.open(url)
191 }; 191 };
192
193
194 export const request = {
195 post(url, data) {
196 return axios.post(`${base}${url}`, data);
197 },
198 get(url, data) {
199 return axios.get(`${base}${url}`, { params: data });
200 },
201 form(url, params) {
202 let formData = new FormData(); //使用formData对象
203 for (let key in params) {
204 formData.append(key, params[key]);
205 }
206 let requestUrl = url.indexOf("://") >= 0 ? `${url}` : `${base}${url}`;
207 return axios.post(requestUrl, formData, formDataHeaders)
208 },
209 build(url, params) {
210 let fullUrl = `${base}${url}`;
211 let split = "";
212 for (let key in params) {
213 if (split) {
214 split = "&";
215 } else {
216 split = "?"
217 }
218 fullUrl += split + key + "=" + params[key];
219 }
220 return fullUrl;
221 },
222 requestDomain() {
223 return `${base}`
224 }
225 /*test*/
226 };
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -27,6 +27,9 @@ ...@@ -27,6 +27,9 @@
27 style="width: 100%;" 27 style="width: 100%;"
28 > 28 >
29 <el-table-column prop="title" label="标题"></el-table-column> 29 <el-table-column prop="title" label="标题"></el-table-column>
30 <el-table-column label="所属分类">
31 <template slot-scope="scope">{{formatClassify(scope.row)}}</template>
32 </el-table-column>
30 <!-- <el-table-column prop="thumb" label="封面"></el-table-column> --> 33 <!-- <el-table-column prop="thumb" label="封面"></el-table-column> -->
31 <el-table-column label="封面图"> 34 <el-table-column label="封面图">
32 <template slot-scope="scope"> 35 <template slot-scope="scope">
...@@ -161,6 +164,7 @@ export default { ...@@ -161,6 +164,7 @@ export default {
161 classifyDialogList: [], 164 classifyDialogList: [],
162 tagList: [] 165 tagList: []
163 }, 166 },
167 classifyMap: {},
164 listLoading: false, 168 listLoading: false,
165 editLoading: false, 169 editLoading: false,
166 editFormVisible: false, 170 editFormVisible: false,
...@@ -294,6 +298,9 @@ export default { ...@@ -294,6 +298,9 @@ export default {
294 this.$set(this.totalData, 'classifyDialogList', content) 298 this.$set(this.totalData, 'classifyDialogList', content)
295 //深复制 299 //深复制
296 let content2 = Object.assign([], content) 300 let content2 = Object.assign([], content)
301 content2.forEach(element => {
302 this.classifyMap[element.classify] = element.name;
303 });
297 content2.unshift({ 304 content2.unshift({
298 classify: '', 305 classify: '',
299 dispayType: '', 306 dispayType: '',
...@@ -330,6 +337,9 @@ export default { ...@@ -330,6 +337,9 @@ export default {
330 this.reqTagList() 337 this.reqTagList()
331 console.log('editForm:', this.editForm) 338 console.log('editForm:', this.editForm)
332 }, 339 },
340 formatClassify(data) {
341 return this.classifyMap[data.classify];
342 },
333 deleteHandler(index, row) { 343 deleteHandler(index, row) {
334 let data = { 344 let data = {
335 articleCode: row.articleCode 345 articleCode: row.articleCode
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <!--工具条--> 3 <!--工具条-->
4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;"> 4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
5 <el-form> 5 <el-form>
6 <el-form-item> 6 <el-form-item>
7 <div class="tool-wrap fl"> 7 <div class="tool-wrap fl">
8 <el-select 8 <el-select v-model="curClassify" placeholder="请选择" @change="HandleSelectChange">
9 v-model="curClassify" 9 <el-option
10 placeholder="请选择" 10 v-for="(item,index) in totalData.classifyList"
11 @change="HandleSelectChange" 11 :key="index"
12 > 12 :label="item.name"
13 <el-option 13 :value="item.classify"
14 v-for="(item,index) in totalData.classifyList" 14 ></el-option>
15 :key="index" 15 </el-select>
16 :label="item.name" 16 <el-button @click="handleAdd()" v-if="true" type="primary">新增</el-button>
17 :value="item.classify" 17 </div>
18 ></el-option> 18 </el-form-item>
19 </el-select> 19 </el-form>
20 <el-button @click="handleAdd()" v-if="true" type="primary">新增</el-button> 20 </el-col>
21 </div>
22 </el-form-item>
23 </el-form>
24 </el-col>
25 21
26 <!-- 列表 --> 22 <!-- 列表 -->
27 <el-table 23 <el-table
28 :data="totalData.dataList" 24 :data="totalData.dataList"
29 highlight-current-row 25 highlight-current-row
30 v-loading="listLoading" 26 v-loading="listLoading"
31 style="width: 100%;" 27 style="width: 100%;"
32 > 28 >
33 <el-table-column label="缩略图"> 29 <el-table-column label="缩略图">
34 <template slot-scope="scope"> 30 <template slot-scope="scope">
35 <img class="poster" :src="scope.row.bannerPic" alt> 31 <img class="poster" :src="scope.row.bannerPic" alt />
36 </template> 32 </template>
37 </el-table-column> 33 </el-table-column>
38 <el-table-column prop="link" label="跳转链接"></el-table-column> 34 <el-table-column label="所属分类">
35 <template slot-scope="scope">{{formatClassify(scope.row)}}</template>
36 </el-table-column>
37 <el-table-column label="跳转方式">
38 <template slot-scope="scope">{{formatJumpType(scope.row)}}</template>
39 </el-table-column>
39 40
40 <el-table-column label="操作" :width="curClassify ? 300 : 150"> 41 <el-table-column label="跳转路径" min-width="200px">
41 <template slot-scope="scope"> 42 <template slot-scope="scope">
42 <el-button 43 <div v-if="scope.row.linkType == 'minipro'">{{scope.row.miniproAppId}}</div>
43 v-if="curClassify" 44 <div>{{scope.row.link}}</div>
44 size="small" 45 </template>
45 @click="upHandler(scope.$index, scope.row)" 46 </el-table-column>
46 >上移</el-button>
47 <el-button
48 v-if="curClassify"
49 size="small"
50 @click="downHandler(scope.$index, scope.row)"
51 >下移</el-button>
52 <el-button size="small" @click="modifyHandler(scope.$index, scope.row)">修改</el-button>
53 <el-button
54 size="small"
55 type="danger"
56 @click="deleteHandler(scope.$index, scope.row)"
57 >删除</el-button>
58 </template>
59 </el-table-column>
60 </el-table>
61 47
62 <!--编辑界面--> 48 <el-table-column label="操作" :width="curClassify ? 300 : 150">
63 <el-dialog 49 <template slot-scope="scope">
64 :title="dialogTitle" 50 <el-button v-if="curClassify" size="small" @click="upHandler(scope.$index, scope.row)">上移</el-button>
65 :visible.sync="editFormVisible" 51 <el-button
66 :close-on-click-modal="false" 52 v-if="curClassify"
67 > 53 size="small"
68 <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"> 54 @click="downHandler(scope.$index, scope.row)"
69 <el-form-item label="分类" prop="classify"> 55 >下移</el-button>
70 <el-select 56 <el-button size="small" @click="modifyHandler(scope.$index, scope.row)">修改</el-button>
71 v-model="editForm.classify" 57 <el-button size="small" type="danger" @click="deleteHandler(scope.$index, scope.row)">删除</el-button>
72 placeholder="请选择" 58 </template>
73 @change="HandleSelectDialogChange" 59 </el-table-column>
74 > 60 </el-table>
75 <el-option
76 v-for="(item,index) in totalData.classifyDialogList"
77 :key="index"
78 :label="item.name"
79 :value="item.classify"
80 ></el-option>
81 </el-select>
82 </el-form-item>
83 <el-form-item label="头图" prop="pic">
84 <img
85 class="upload-poster-image"
86 v-show="editForm.bannerPic"
87 :src="editForm.bannerPic"
88 alt
89 >
90 <upload-item pid="p1" v-on:upload-success="onUploadSuccess"></upload-item>
91 <!-- <el-input v-model="editForm.pic"></el-input> -->
92 </el-form-item>
93 61
94 <el-form-item label="跳转链接" prop="link"> 62 <!--编辑界面-->
95 <el-input v-model="editForm.link"></el-input> 63 <el-dialog :title="dialogTitle" :visible.sync="editFormVisible" :close-on-click-modal="false">
96 </el-form-item> 64 <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
97 </el-form> 65 <el-form-item label="分类" prop="classify">
98 <div slot="footer" class="dialog-footer"> 66 <el-select
99 <el-button @click.native="editFormVisible = false">取消</el-button> 67 v-model="editForm.classify"
100 <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button> 68 placeholder="请选择"
101 </div> 69 @change="HandleSelectDialogChange"
102 </el-dialog> 70 >
71 <el-option
72 v-for="(item,index) in totalData.classifyDialogList"
73 :key="index"
74 :label="item.name"
75 :value="item.classify"
76 ></el-option>
77 </el-select>
78 </el-form-item>
79 <el-form-item label="头图" prop="pic">
80 <img
81 class="upload-poster-image"
82 v-show="editForm.bannerPic"
83 :src="editForm.bannerPic"
84 alt
85 />
86 <upload-item pid="p1" v-on:upload-success="onUploadSuccess"></upload-item>
87 <!-- <el-input v-model="editForm.pic"></el-input> -->
88 </el-form-item>
103 89
104 <!--分页导航--> 90 <el-form-item label="跳转类型" prop="linkType">
105 <el-col :span="24" class="toolbar fl pagination-wrap"> 91 <el-select v-model="editForm.linkType" placeholder="请选择">
106 <div class="page-tips">总共{{total}}条记录，每页{{pageSize}}条，总共{{pageNum}}页</div> 92 <el-option
107 <el-pagination 93 v-for="(item,index) in jumpTypeList"
108 layout="prev, pager, next" 94 :key="index"
109 @current-change="handleCurrentChange" 95 :label="item.label"
110 :page-size="pageSize" 96 :value="item.value"
111 :total="total" 97 ></el-option>
112 style="float:right;" 98 </el-select>
113 ></el-pagination> 99 </el-form-item>
114 </el-col> 100
115 </div> 101 <el-form-item label="小程序ID" prop="miniproAppId" v-if="editForm.linkType == 'minipro'">
102 <el-input v-model="editForm.miniproAppId"></el-input>
103 </el-form-item>
104
105 <el-form-item label="跳转链接" prop="link" v-if="editForm.linkType != 'none'">
106 <el-input v-model="editForm.link"></el-input>
107 </el-form-item>
108 </el-form>
109 <div slot="footer" class="dialog-footer">
110 <el-button @click.native="editFormVisible = false">取消</el-button>
111 <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
112 </div>
113 </el-dialog>
114
115 <!--分页导航-->
116 <el-col :span="24" class="toolbar fl pagination-wrap">
117 <div class="page-tips">总共{{total}}条记录，每页{{pageSize}}条，总共{{pageNum}}页</div>
118 <el-pagination
119 layout="prev, pager, next"
120 @current-change="handleCurrentChange"
121 :page-size="pageSize"
122 :total="total"
123 style="float:right;"
124 ></el-pagination>
125 </el-col>
126 </div>
116 </template> 127 </template>
117 128
118 <script> 129 <script>
119 import { 130 import {
120 getClassifyList, 131 getClassifyList,
121 getBannerList, 132 getBannerList,
122 saveBanner, 133 saveBanner,
123 deleteBanner, 134 deleteBanner,
124 changeBanner 135 changeBanner,
125 } from '../../api/api.js' 136 request
126 import UploadItem from '../../components/UploadItem' 137 } from "../../api/api.js";
138 import UploadItem from "../../components/UploadItem";
127 139
128 export default { 140 export default {
129 data() { 141 data() {
130 return { 142 return {
131 key: 'value', 143 key: "value",
132 page: 1, 144 page: 1,
133 pageSize: 10, 145 pageSize: 10,
134 total: 0, 146 total: 0,
135 totalData: { 147 totalData: {
136 dataList: [], 148 dataList: [],
137 classifyList: [], 149 classifyList: [],
138 classifyDialogList: [] 150 classifyDialogList: []
139 }, 151 },
140 listLoading: false, 152 classifyMap: {},
141 editLoading: false, 153 jumpType: {},
142 editFormVisible: false, 154 jumpTypeList: [
143 dialogTitle: '编辑', 155 {
144 //编辑界面数据 156 label: "无跳转",
145 editForm: { 157 value: "none"
146 bannerPic: '', 158 },
147 link: '', 159 {
148 classify: '' 160 label: "网页",
149 }, 161 value: "web"
150 editFormRules: { 162 },
151 bannerPic: [ 163 {
152 { 164 label: "小程序",
153 required: true, 165 value: "minipro"
154 message: '请输入头图地址',
155 trigger: 'blur'
156 }
157 ],
158 link: [
159 {
160 required: true,
161 message: '请输入跳转链接',
162 trigger: 'blur'
163 }
164 ],
165 classify: [
166 { required: true, message: '请选择分类', trigger: 'blur' }
167 ]
168 },
169 curClassify: ''
170 } 166 }
167 ],
168 listLoading: false,
169 editLoading: false,
170 editFormVisible: false,
171 dialogTitle: "编辑",
172 //编辑界面数据
173 editForm: {
174 bannerCode: "",
175 bannerPic: "",
176 link: "",
177 classify: "",
178 linkType: "",
179 miniproAppId: ""
180 },
181 editFormRules: {
182 bannerPic: [
183 {
184 required: true,
185 message: "请输入头图地址",
186 trigger: "blur"
187 }
188 ],
189 link: [
190 {
191 required: true,
192 message: "请输入跳转链接",
193 trigger: "blur"
194 }
195 ],
196 miniproAppId: [
197 {
198 required: true,
199 message: "请输入小程序ID",
200 trigger: "blur"
201 }
202 ],
203 classify: [{ required: true, message: "请选择分类", trigger: "blur" }]
204 },
205 curClassify: ""
206 };
207 },
208 computed: {
209 pageNum() {
210 return Math.ceil(this.total / this.pageSize);
211 }
212 },
213 methods: {
214 name() {},
215 onUploadSuccess(evtAny) {
216 let { pid, url } = evtAny;
217 if (pid == "p1") {
218 this.$set(this.editForm, "bannerPic", url);
219 } else if (pid == "v1") {
220 // this.$set(this.editForm, 'vedioUrl', url)
221 }
171 }, 222 },
172 computed: { 223 // 获取列表
173 pageNum() { 224 reqQuery() {
174 return Math.ceil(this.total / this.pageSize) 225 let data = {
175 } 226 page: this.page,
227 size: this.pageSize,
228 classify: this.curClassify
229 };
230 getBannerList(data).then(result => {
231 let { content, code } = result;
232 let { list, total } = content;
233 this.total = total;
234 this.$set(this.totalData, "dataList", list);
235 console.log("this.totalData:", this.totalData.dataList);
236 });
237 },
238 reqGetClassifyList() {
239 let data = {};
240 getClassifyList(data)
241 .then(result => {
242 let { content, code } = result;
243 this.$set(this.totalData, "classifyDialogList", content);
244 //深复制
245 let content2 = Object.assign([], content);
246 content2.forEach(element => {
247 this.classifyMap[element.classify] = element.name;
248 });
249 content2.unshift({
250 classify: "",
251 dispayType: "",
252 name: "全部"
253 });
254 this.$set(this.totalData, "classifyList", content2);
255 this.reqQuery();
256 })
257 .catch(err => {});
258 },
259 upHandler(index, row) {
260 let lastItem = this.totalData.dataList[index - 1];
261 let curItem = this.totalData.dataList[index];
262 this.changeDataHandler(lastItem, curItem);
263 },
264 downHandler(index, row) {
265 let lastItem = this.totalData.dataList[index + 1];
266 let curItem = this.totalData.dataList[index];
267 this.changeDataHandler(lastItem, curItem);
268 },
269 changeDataHandler(lastItem, curItem) {
270 console.log("lastItem:", lastItem);
271 console.log("curItem:", curItem);
272 if (lastItem && curItem) {
273 let data = {
274 lbc: lastItem.bannerCode,
275 rbc: curItem.bannerCode
276 };
277 changeBanner(data)
278 .then(result => {
279 this.$notify({
280 title: "成功",
281 message: "操作成功",
282 type: "success"
283 });
284 this.reqQuery();
285 })
286 .catch(err => {});
287 }
176 }, 288 },
177 methods: {
178 name() {},
179 onUploadSuccess(evtAny) {
180 let { pid, url } = evtAny
181 if (pid == 'p1') {
182 this.$set(this.editForm, 'bannerPic', url)
183 } else if (pid == 'v1') {
184 // this.$set(this.editForm, 'vedioUrl', url)
185 }
186 },
187 // 获取列表
188 reqQuery() {
189 let data = {
190 page: this.page,
191 size: this.pageSize,
192 classify: this.curClassify
193 }
194 getBannerList(data).then(result => {
195 let { content, code } = result
196 let { list, total } = content
197 this.total = total
198 this.$set(this.totalData, 'dataList', list)
199 console.log('this.totalData:', this.totalData.dataList)
200 })
201 },
202 reqGetClassifyList() {
203 let data = {}
204 getClassifyList(data)
205 .then(result => {
206 let { content, code } = result
207 this.$set(this.totalData, 'classifyDialogList', content)
208 //深复制
209 let content2 = Object.assign([], content)
210 content2.unshift({
211 classify: '',
212 dispayType: '',
213 name: '全部'
214 })
215 this.$set(this.totalData, 'classifyList', content2)
216 this.reqQuery()
217 })
218 .catch(err => {})
219 },
220 upHandler(index, row) {
221 let lastItem = this.totalData.dataList[index - 1]
222 let curItem = this.totalData.dataList[index]
223 this.changeDataHandler(lastItem, curItem)
224 },
225 downHandler(index, row) {
226 let lastItem = this.totalData.dataList[index + 1]
227 let curItem = this.totalData.dataList[index]
228 this.changeDataHandler(lastItem, curItem)
229 },
230 changeDataHandler(lastItem, curItem) {
231 console.log('lastItem:', lastItem)
232 console.log('curItem:', curItem)
233 if (lastItem && curItem) {
234 let data = {
235 lbc: lastItem.bannerCode,
236 rbc: curItem.bannerCode
237 }
238 changeBanner(data)
239 .then(result => {
240 this.$notify({
241 title: '成功',
242 message: '操作成功',
243 type: 'success'
244 })
245 this.reqQuery()
246 })
247 .catch(err => {})
248 }
249 },
250 289
251 // 修改 显示修改对话框 290 // 修改 显示修改对话框
252 modifyHandler(index, row) { 291 modifyHandler(index, row) {
253 this.dialogTitle = '修改' 292 this.dialogTitle = "修改";
254 this.editFormVisible = true 293 this.editFormVisible = true;
255 try { 294 try {
256 this.$refs['editForm'].resetFields() 295 this.$refs["editForm"].resetFields();
257 } catch (error) {} 296 } catch (error) {}
258 this.editForm = Object.assign({}, row) 297 this.editForm = Object.assign({}, row);
259 }, 298 },
260 deleteHandler(index, row) { 299 deleteHandler(index, row) {
261 let data = { 300 let data = {
262 bannerCode: row.bannerCode 301 bannerCode: row.bannerCode
263 } 302 };
264 console.log('deleteHandler data:', data) 303 console.log("deleteHandler data:", data);
265 this.$confirm('确认删除吗？', '提示', {}).then(() => { 304 this.$confirm("确认删除吗？", "提示", {}).then(() => {
266 deleteBanner(data) 305 deleteBanner(data)
267 .then(result => { 306 .then(result => {
268 let { code, content } = result 307 let { code, content } = result;
269 if (code == 200) { 308 if (code == 200) {
270 this.$notify({ 309 this.$notify({
271 title: '成功', 310 title: "成功",
272 message: '删除成功', 311 message: "删除成功",
273 type: 'success' 312 type: "success"
274 }) 313 });
275 } else { 314 } else {
276 }
277 this.editFormVisible = false
278 this.reqQuery()
279 })
280 .catch(err => {})
281 })
282 },
283 // 新增
284 handleAdd() {
285 this.editForm = {
286 bannerCode: '',
287 bannerPic: '',
288 link: '',
289 linkType: '',
290 classify: ''
291 } 315 }
292 try { 316 this.editFormVisible = false;
293 this.$refs['editForm'].resetFields() 317 this.reqQuery();
294 } catch (error) {} 318 })
295 this.editFormVisible = true 319 .catch(err => {});
296 this.dialogTitle = '新增' 320 });
297 }, 321 },
298 // 提交 新增/修改 322 // 新增
299 editSubmit() { 323 handleAdd() {
300 let data = this.editForm 324 this.editForm = {
301 this.$refs.editForm.validate(valid => { 325 bannerCode: "",
302 if (valid) { 326 bannerPic: "",
303 this.editLoading = true 327 link: "",
304 saveBanner(data) 328 linkType: "web",
305 .then(result => { 329 classify: "",
306 let { code, content } = result 330 miniproAppId : ""
307 if (code == 200) { 331 };
308 this.$notify({ 332 try {
309 title: '成功', 333 this.$refs["editForm"].resetFields();
310 message: '提交成功', 334 } catch (error) {}
311 type: 'success' 335 this.editFormVisible = true;
312 }) 336 this.dialogTitle = "新增";
313 } else { 337 },
314 } 338 // 提交 新增/修改
315 this.editLoading = false 339 editSubmit() {
316 this.editFormVisible = false 340 let data = this.editForm;
317 this.reqQuery() 341 this.$refs.editForm.validate(valid => {
318 }) 342 if (valid) {
319 .catch(err => {}) 343 this.editLoading = true;
320 } 344 saveBanner(data)
345 .then(result => {
346 let { code, content } = result;
347 if (code == 200) {
348 this.$notify({
349 title: "成功",
350 message: "提交成功",
351 type: "success"
352 });
353 } else {
354 }
355 this.editLoading = false;
356 this.editFormVisible = false;
357 this.reqQuery();
321 }) 358 })
322 }, 359 .catch(err => {});
323 // 点击页数 360 }
324 handleCurrentChange(val) { 361 });
325 this.page = val
326 this.reqQuery()
327 },
328 HandleSelectChange() {
329 this.reqQuery()
330 },
331 // 编辑时选择分类
332 HandleSelectDialogChange() {}
333 }, 362 },
334 363 // 点击页数
335 created() { 364 handleCurrentChange(val) {
336 this.reqGetClassifyList() 365 this.page = val;
366 this.reqQuery();
367 },
368 HandleSelectChange() {
369 this.reqQuery();
337 }, 370 },
338 components: { 371 // 编辑时选择分类
339 UploadItem 372 HandleSelectDialogChange() {},
373 formatClassify(data) {
374 return this.classifyMap[data.classify];
375 },
376 formatJumpType(data) {
377 let type = this.jumpType[data.linkType];
378 if (!type) {
379 type = this.jumpType["web"];
380 }
381 return type;
340 } 382 }
341 } 383 },
384
385 created() {
386 this.jumpTypeList.forEach(element => {
387 this.jumpType[element.value] = element.label;
388 });
389 this.reqGetClassifyList();
390 },
391 components: {
392 UploadItem
393 }
394 };
342 </script> 395 </script>
343 396
344 <style lang="less" scoped> 397 <style lang="less" scoped>
345 .tool-wrap { 398 .tool-wrap {
346 color: #333333; 399 color: #333333;
347 } 400 }
348 401
349 .pagination-wrap { 402 .pagination-wrap {
350 .page-tips { 403 .page-tips {
351 height: 32px; 404 height: 32px;
352 line-height: 32px; 405 line-height: 32px;
353 color: #333333; 406 color: #333333;
354 } 407 }
355 } 408 }
356 409
357 .fl { 410 .fl {
358 display: flex; 411 display: flex;
359 justify-content: space-between; 412 justify-content: space-between;
360 } 413 }
361 414
362 .fle { 415 .fle {
363 display: flex; 416 display: flex;
364 justify-content: flex-end; 417 justify-content: flex-end;
365 } 418 }
366
367 </style> 419 </style>
......