|
@@ -6,7 +6,7 @@
|
6
|
6
|
<span>对应案场:</span>
|
7
|
7
|
<div class="flex-item">
|
8
|
8
|
<div style="width:50%">
|
9
|
|
- <el-select v-model="postData.CaseId" placeholder="请选择">
|
|
9
|
+ <el-select v-model="CaseId" placeholder="请选择">
|
10
|
10
|
<el-option
|
11
|
11
|
v-for="item in caseList"
|
12
|
12
|
:key="item.CaseId"
|
|
@@ -23,7 +23,7 @@
|
23
|
23
|
<div style="width:50%">
|
24
|
24
|
<el-input
|
25
|
25
|
placeholder="请输入名称"
|
26
|
|
- v-model="postData.Name"
|
|
26
|
+ v-model="detail.Name"
|
27
|
27
|
clearable>
|
28
|
28
|
</el-input>
|
29
|
29
|
</div>
|
|
@@ -35,7 +35,7 @@
|
35
|
35
|
<div style="width:50%">
|
36
|
36
|
<el-input
|
37
|
37
|
placeholder="请输入标题"
|
38
|
|
- v-model="postData.Title"
|
|
38
|
+ v-model="detail.Title"
|
39
|
39
|
clearable>
|
40
|
40
|
</el-input>
|
41
|
41
|
</div>
|
|
@@ -54,9 +54,6 @@
|
54
|
54
|
:on-exceed="exceed">
|
55
|
55
|
<i class="el-icon-plus"></i>
|
56
|
56
|
</el-upload>
|
57
|
|
- <el-dialog :visible.sync="dialogVisible">
|
58
|
|
- <img width="100%" :src="imgs" alt="">
|
59
|
|
- </el-dialog>
|
60
|
57
|
</div>
|
61
|
58
|
</li>
|
62
|
59
|
<li class="flex-h">
|
|
@@ -72,9 +69,6 @@
|
72
|
69
|
:on-exceed="exceed">
|
73
|
70
|
<i class="el-icon-plus"></i>
|
74
|
71
|
</el-upload>
|
75
|
|
- <el-dialog :visible.sync="dialogVisibleDetail">
|
76
|
|
- <img width="100%" :src="detailimgs" alt="">
|
77
|
|
- </el-dialog>
|
78
|
72
|
</div>
|
79
|
73
|
</li>
|
80
|
74
|
<li class="flex-h">
|
|
@@ -83,7 +77,7 @@
|
83
|
77
|
<div style="width:50%">
|
84
|
78
|
<el-input
|
85
|
79
|
placeholder="请输入专题简介"
|
86
|
|
- v-model="postData.DetailContent"
|
|
80
|
+ v-model="detail.DetailContent"
|
87
|
81
|
type='textarea'
|
88
|
82
|
:autosize="{ minRows: 3, maxRows: 5}"
|
89
|
83
|
clearable>
|
|
@@ -91,12 +85,55 @@
|
91
|
85
|
</div>
|
92
|
86
|
</div>
|
93
|
87
|
</li>
|
|
88
|
+ <li class="flex-h">
|
|
89
|
+ <span>展示课程:</span>
|
|
90
|
+ <div class="flex-item">
|
|
91
|
+ <div style="width:50%" class="radio">
|
|
92
|
+ <el-radio v-model="detail.IsAllCourse" :label='1' >全部课程</el-radio>
|
|
93
|
+ <el-radio v-model="detail.IsAllCourse" :label='0' >指定课程</el-radio>
|
|
94
|
+ </div>
|
|
95
|
+ </div>
|
|
96
|
+ </li>
|
|
97
|
+ <li class="flex-h" v-if="detail.IsAllCourse === 0">
|
|
98
|
+ <el-table
|
|
99
|
+ :data="detail.Courses"
|
|
100
|
+ stripe
|
|
101
|
+ style="width: 100%">
|
|
102
|
+ <el-table-column
|
|
103
|
+ prop="CourseName"
|
|
104
|
+ label="课程名称">
|
|
105
|
+ </el-table-column>
|
|
106
|
+ <el-table-column
|
|
107
|
+ prop="BeginDate"
|
|
108
|
+ label="课程开始时间">
|
|
109
|
+ <template slot-scope="scope">
|
|
110
|
+ <label>{{toolClass.dateFormat(scope.row.BeginDate,'yyyy-MM-dd')}}</label>
|
|
111
|
+ </template>
|
|
112
|
+ </el-table-column>
|
|
113
|
+ <el-table-column
|
|
114
|
+ prop="EndDate"
|
|
115
|
+ label="课程结束时间">
|
|
116
|
+ <template slot-scope="scope">
|
|
117
|
+ <label>{{toolClass.dateFormat(scope.row.EndDate,'yyyy-MM-dd')}}</label>
|
|
118
|
+ </template>
|
|
119
|
+ </el-table-column>
|
|
120
|
+ <el-table-column label="操作" width="450">
|
|
121
|
+ <template slot-scope="scope">
|
|
122
|
+ <el-button
|
|
123
|
+ size="mini"
|
|
124
|
+ type="danger"
|
|
125
|
+ @click="deleteItem(scope.row)">删除</el-button>
|
|
126
|
+ </template>
|
|
127
|
+ </el-table-column>
|
|
128
|
+ </el-table>
|
|
129
|
+ <el-button type="primary" size="mini" @click="addCourse">新增</el-button>
|
|
130
|
+ </li>
|
94
|
131
|
<li class="flex-h">
|
95
|
132
|
<span>是否前台展示:</span>
|
96
|
133
|
<div class="flex-item">
|
97
|
134
|
<div style="width:50%" class="radio">
|
98
|
|
- <el-radio v-model="postData.Status" label='1' >是</el-radio>
|
99
|
|
- <el-radio v-model="postData.Status" label='0' >否</el-radio>
|
|
135
|
+ <el-radio v-model="detail.Status" :label='1' >是</el-radio>
|
|
136
|
+ <el-radio v-model="detail.Status" :label='0' >否</el-radio>
|
100
|
137
|
</div>
|
101
|
138
|
</div>
|
102
|
139
|
</li>
|
|
@@ -106,32 +143,66 @@
|
106
|
143
|
</li>
|
107
|
144
|
</ul>
|
108
|
145
|
</form>
|
|
146
|
+ <el-dialog
|
|
147
|
+ title="选择课程"
|
|
148
|
+ :visible.sync="selCourseVisible"
|
|
149
|
+ width="500px"
|
|
150
|
+ center>
|
|
151
|
+ <div>
|
|
152
|
+ <el-table
|
|
153
|
+ ref="courseTable"
|
|
154
|
+ :data="courses.list"
|
|
155
|
+ tooltip-effect="dark"
|
|
156
|
+ stripe
|
|
157
|
+ @selection-change="handleSelectionChange"
|
|
158
|
+ style="width: 100%">
|
|
159
|
+ <el-table-column
|
|
160
|
+ type="selection"
|
|
161
|
+ width="55">
|
|
162
|
+ </el-table-column>
|
|
163
|
+ <el-table-column
|
|
164
|
+ prop="CourseName"
|
|
165
|
+ label="课程名称">
|
|
166
|
+ </el-table-column>
|
|
167
|
+ <el-table-column
|
|
168
|
+ prop="BeginDate"
|
|
169
|
+ label="课程开始时间">
|
|
170
|
+ <template slot-scope="scope">
|
|
171
|
+ <label>{{toolClass.dateFormat(scope.row.BeginDate,'yyyy-MM-dd')}}</label>
|
|
172
|
+ </template>
|
|
173
|
+ </el-table-column>
|
|
174
|
+ <el-table-column
|
|
175
|
+ prop="EndDate"
|
|
176
|
+ label="课程结束时间">
|
|
177
|
+ <template slot-scope="scope">
|
|
178
|
+ <label>{{toolClass.dateFormat(scope.row.EndDate,'yyyy-MM-dd')}}</label>
|
|
179
|
+ </template>
|
|
180
|
+ </el-table-column>
|
|
181
|
+ </el-table>
|
|
182
|
+ </div>
|
|
183
|
+ <span slot="footer" class="dialog-footer">
|
|
184
|
+ <el-button @click="selCourseVisible = false">取 消</el-button>
|
|
185
|
+ <el-button type="primary" @click="addCourseOk">确 定</el-button>
|
|
186
|
+ </span>
|
|
187
|
+ </el-dialog>
|
109
|
188
|
</div>
|
110
|
189
|
</template>
|
111
|
190
|
|
112
|
191
|
<script>
|
113
|
|
-import { mapState } from 'vuex'
|
|
192
|
+import { createNamespacedHelpers, mapState } from 'vuex'
|
|
193
|
+
|
|
194
|
+const { mapState: mapCaseState, mapActions: mapCaseActions } = createNamespacedHelpers('cmscase')
|
|
195
|
+const { mapState: mapCourseState, mapActions: mapCourseActions } = createNamespacedHelpers('course')
|
|
196
|
+
|
114
|
197
|
export default {
|
115
|
198
|
name: '',
|
116
|
199
|
data () {
|
117
|
200
|
return {
|
118
|
|
- postData: {
|
119
|
|
- CaseId: '',
|
120
|
|
- Name: '',
|
121
|
|
- Title: '',
|
122
|
|
- DetailContent: '',
|
123
|
|
- Status: '1',
|
124
|
|
- imgs: '',
|
125
|
|
- detailimgs: '',
|
126
|
|
- courseids: ''
|
127
|
|
- },
|
|
201
|
+ id: '',
|
128
|
202
|
limit: 1,
|
129
|
|
- dialogVisible: false,
|
130
|
|
- dialogVisibleDetail: false,
|
131
|
|
- imgs: '',
|
132
|
|
- detailimgs: '',
|
133
|
|
- imgsArr: [],
|
134
|
|
- detailimgsArr: []
|
|
203
|
+ imgs: null,
|
|
204
|
+ detailimgs: null,
|
|
205
|
+ selCourseVisible: false,
|
135
|
206
|
}
|
136
|
207
|
},
|
137
|
208
|
components: {},
|
|
@@ -140,105 +211,117 @@ export default {
|
140
|
211
|
caseList: x => x.app.cases.list,
|
141
|
212
|
defaultCaseId: x => x.app.cases.default,
|
142
|
213
|
OrgId: x => x.app.user.OrgId
|
143
|
|
- })
|
144
|
|
- },
|
145
|
|
- methods: {
|
146
|
|
- submit () {
|
147
|
|
- this.postData.OrgId = this.OrgId
|
148
|
|
- this.postData.imgs = ''
|
149
|
|
- this.postData.detailimgs = ''
|
150
|
|
- for (let i = 0; i < this.imgsArr.length; i++) {
|
151
|
|
- this.postData.imgs += this.imgsArr[i].response.result.url + ','
|
152
|
|
- }
|
153
|
|
- if (this.postData.imgs) {
|
154
|
|
- this.postData.imgs = this.postData.imgs.substr(0, this.postData.imgs.length - 1)
|
|
214
|
+ }),
|
|
215
|
+ ...mapCaseState({
|
|
216
|
+ detail: x => x.caseInfo,
|
|
217
|
+ }),
|
|
218
|
+ ...mapCourseState({
|
|
219
|
+ courses: x => x.courseList,
|
|
220
|
+ }),
|
|
221
|
+ CaseId: {
|
|
222
|
+ get () {
|
|
223
|
+ return this.detail.CaseId || this.caseid
|
|
224
|
+ },
|
|
225
|
+ set (val) {
|
|
226
|
+ this.UpdateInfo({...this.detail, CaseId: val})
|
155
|
227
|
}
|
156
|
|
- for (let i = 0; i < this.detailimgsArr.length; i++) {
|
157
|
|
- this.postData.detailimgs += this.detailimgsArr[i].response.result.url + ','
|
|
228
|
+ },
|
|
229
|
+ imgsArr: {
|
|
230
|
+ get () {
|
|
231
|
+ return this.imgs || (this.detail.CmsCaseImgs || []).filter(x => x.ImageType === 'cover').map(x => {
|
|
232
|
+ return {
|
|
233
|
+ url: x.CaseImageUrl,
|
|
234
|
+ response: {
|
|
235
|
+ result: {
|
|
236
|
+ url: x.CaseImageUrl
|
|
237
|
+ }
|
|
238
|
+ }
|
|
239
|
+ }
|
|
240
|
+ })
|
|
241
|
+ },
|
|
242
|
+ set (val) {
|
|
243
|
+ this.imgs = val
|
158
|
244
|
}
|
159
|
|
- if (this.postData.detailimgs) {
|
160
|
|
- this.postData.detailimgs = this.postData.detailimgs.substr(0, this.postData.detailimgs.length - 1)
|
|
245
|
+ },
|
|
246
|
+ detailimgsArr: {
|
|
247
|
+ get () {
|
|
248
|
+ return this.detailimgs || (this.detail.CmsCaseImgs || []).filter(x => x.ImageType === 'detail').map(x => {
|
|
249
|
+ return {
|
|
250
|
+ url: x.CaseImageUrl,
|
|
251
|
+ response: {
|
|
252
|
+ result: {
|
|
253
|
+ url: x.CaseImageUrl
|
|
254
|
+ }
|
|
255
|
+ }
|
|
256
|
+ }
|
|
257
|
+ })
|
|
258
|
+ },
|
|
259
|
+ set (val) {
|
|
260
|
+ this.detailimgs = val
|
161
|
261
|
}
|
162
|
|
- console.log(this.postData)
|
163
|
|
- this.$ajax(this.$api.cms.editCase.url, {
|
164
|
|
- method: this.$api.cms.editCase.method,
|
165
|
|
- urlData: {
|
166
|
|
- id: this.$route.query.id
|
167
|
|
- },
|
168
|
|
- data: this.postData
|
169
|
|
- }).then(res => {
|
170
|
|
- this.$message({
|
171
|
|
- message: '编辑成功',
|
172
|
|
- type: 'success',
|
173
|
|
- duration: 1000
|
|
262
|
+ },
|
|
263
|
+ },
|
|
264
|
+ methods: {
|
|
265
|
+ ...mapCaseActions([
|
|
266
|
+ 'GetCaseInfo',
|
|
267
|
+ 'AddCaseInfo',
|
|
268
|
+ 'SetNull',
|
|
269
|
+ 'UpdateInfo',
|
|
270
|
+ ]),
|
|
271
|
+ ...mapCourseActions([
|
|
272
|
+ 'GetCourseList',
|
|
273
|
+ ]),
|
|
274
|
+ submit () {
|
|
275
|
+ const imgs = this.imgsArr.map(x => x.response.result.url).join(',')
|
|
276
|
+ const detailimgs = this.detailimgsArr.map(x => x.response.result.url).join(',')
|
|
277
|
+ const courseids = this.detail.Courses.map(x => x.CourseId).join(',')
|
|
278
|
+ if (this.id === '') {
|
|
279
|
+ this.detail.OrgId = this.OrgId
|
|
280
|
+ this.AddCaseInfo({...this.detail, imgs, detailimgs, courseids}).then(res => {
|
|
281
|
+ this.afterSave()
|
174
|
282
|
})
|
175
|
|
- setTimeout(() => {
|
176
|
|
- this.$router.push({ name: 'indexCase' })
|
177
|
|
- }, 1000)
|
178
|
|
- }).catch(msg => {
|
179
|
|
-
|
|
283
|
+ } else {
|
|
284
|
+ this.AddCaseInfo({...this.detail, imgs, detailimgs, courseids}).then(res => {
|
|
285
|
+ this.afterSave()
|
|
286
|
+ })
|
|
287
|
+ }
|
|
288
|
+ },
|
|
289
|
+ afterSave () {
|
|
290
|
+ this.$message({
|
|
291
|
+ message: '保存成功',
|
|
292
|
+ type: 'success',
|
|
293
|
+ duration: 1000
|
180
|
294
|
})
|
|
295
|
+ setTimeout(() => {
|
|
296
|
+ this.$router.push({ name: 'indexCase' })
|
|
297
|
+ }, 1000)
|
181
|
298
|
},
|
182
|
299
|
cancel () {
|
183
|
300
|
this.$router.go(-1)
|
184
|
301
|
},
|
185
|
302
|
handlePictureCardPreview (res, file, fileList) {
|
186
|
|
- this.imgs = res.result.url
|
187
|
|
- this.dialogVisible = false
|
188
|
303
|
this.imgsArr = fileList
|
189
|
|
- console.log(this.imgsArr)
|
190
|
304
|
},
|
191
|
305
|
handleRemove (file, fileList) {
|
192
|
306
|
this.imgsArr = fileList
|
193
|
307
|
},
|
194
|
308
|
handlePictureCardPreviewDetail (res, file, fileList) {
|
195
|
|
- this.detailimgs = res.result.url
|
196
|
|
- this.dialogVisibleDetail = false
|
197
|
309
|
this.detailimgsArr = fileList
|
198
|
310
|
},
|
199
|
311
|
handleRemoveDetail (file, fileList) {
|
200
|
312
|
this.detailimgsArr = fileList
|
201
|
313
|
},
|
202
|
314
|
getDetail () {
|
203
|
|
- this.$ajax(this.$api.cms.caseDetail.url, {
|
204
|
|
- method: this.$api.cms.caseDetail.method,
|
205
|
|
- urlData: {
|
206
|
|
- id: this.$route.query.id
|
207
|
|
- }
|
208
|
|
- }).then(res => {
|
209
|
|
- console.log(res)
|
210
|
|
- res.Status += ''
|
211
|
|
- let imgsArr = []
|
212
|
|
- let detailimgsArr = []
|
213
|
|
- for (let i = 0; i < res.CmsCaseImgs.length; i++) {
|
214
|
|
- if (res.CmsCaseImgs[i].ImageType === 'cover') {
|
215
|
|
- let item = {
|
216
|
|
- url: res.CmsCaseImgs[i].CaseImageUrl,
|
217
|
|
- response: {
|
218
|
|
- result: {
|
219
|
|
- url: res.CmsCaseImgs[i].CaseImageUrl
|
220
|
|
- }
|
221
|
|
- }
|
222
|
|
- }
|
223
|
|
- imgsArr.push(item)
|
224
|
|
- } else if (res.CmsCaseImgs[i].ImageType === 'detail') {
|
225
|
|
- let item = {
|
226
|
|
- url: res.CmsCaseImgs[i].CaseImageUrl,
|
227
|
|
- response: {
|
228
|
|
- result: {
|
229
|
|
- url: res.CmsCaseImgs[i].CaseImageUrl
|
230
|
|
- }
|
231
|
|
- }
|
232
|
|
- }
|
233
|
|
- detailimgsArr.push(item)
|
234
|
|
- }
|
235
|
|
- }
|
236
|
|
- this.imgsArr = imgsArr
|
237
|
|
- this.detailimgsArr = detailimgsArr
|
238
|
|
- this.postData = res
|
239
|
|
- }).catch(msg => {
|
240
|
|
-
|
241
|
|
- })
|
|
315
|
+ this.GetCaseInfo({id: this.id})
|
|
316
|
+ },
|
|
317
|
+ toggleSelection (rows) {
|
|
318
|
+ if (rows) {
|
|
319
|
+ rows.map(row => {
|
|
320
|
+ this.$refs.courseTable.toggleRowSelection(row)
|
|
321
|
+ })
|
|
322
|
+ } else {
|
|
323
|
+ this.$refs.courseTable.clearSelection()
|
|
324
|
+ }
|
242
|
325
|
},
|
243
|
326
|
exceed () {
|
244
|
327
|
this.$message({
|
|
@@ -246,10 +329,34 @@ export default {
|
246
|
329
|
type: 'info',
|
247
|
330
|
duration: 1000
|
248
|
331
|
})
|
|
332
|
+ },
|
|
333
|
+ addCourse () {
|
|
334
|
+ this.GetCourseList({caseid: this.CaseId, page: 1, pagesize: 100, callback: this.coursesShow})
|
|
335
|
+ },
|
|
336
|
+ coursesShow () {
|
|
337
|
+ this.selCourseVisible = true
|
|
338
|
+ setTimeout(() => {
|
|
339
|
+ this.toggleSelection(this.detail.Courses)
|
|
340
|
+ }, 30)
|
|
341
|
+ },
|
|
342
|
+ handleSelectionChange (val) {
|
|
343
|
+ this.UpdateInfo({...this.detail, Courses: val})
|
|
344
|
+ },
|
|
345
|
+ addCourseOk () {
|
|
346
|
+ this.selCourseVisible = false
|
|
347
|
+ },
|
|
348
|
+ deleteItem (row) {
|
|
349
|
+ this.UpdateInfo({...this.detail, Courses: this.detail.Courses.filter(x => x.CourseId !== row.CourseId)})
|
249
|
350
|
}
|
250
|
351
|
},
|
251
|
|
- created () {
|
252
|
|
- this.getDetail()
|
|
352
|
+ mounted () {
|
|
353
|
+ const { id } = this.$route.query
|
|
354
|
+ this.id = id
|
|
355
|
+ if (id && id !== '') {
|
|
356
|
+ this.getDetail()
|
|
357
|
+ } else {
|
|
358
|
+ this.SetNull()
|
|
359
|
+ }
|
253
|
360
|
}
|
254
|
361
|
}
|
255
|
362
|
</script>
|