BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 3654afedcc36121bee64e8bbcadaa6bf88d8f09c

Authored by YunaiV
1 parent 0499226c

mp：修复 WxMaterialSelect 组件的音乐 tab，无法选择图片素材报错

Inline Side-by-side
Showing 2 changed files with 422 additions and 456 deletions
yudao-ui-admin/src/views/mp/components/wx-reply/main.vue
  View file @3654afe
... ... @@ -137,7 +137,7 @@
137 137 </el-row>
138 138 </div>
139 139 <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%" append-to-body>
140   - <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" :newsType="newsType"></WxMaterialSelect>
  140 + <wx-material-select :objData="objData" @selectMaterial="selectMaterial" :newsType="newsType" />
141 141 </el-dialog>
142 142 </el-row>
143 143 </el-tab-pane>
... ... @@ -158,7 +158,7 @@
158 158 </div>
159 159 </div>
160 160 <el-dialog title="选择图片" :visible.sync="dialogThumbVisible" width="80%" append-to-body>
161   - <wx-material-select :objData="{type:'image'}" @selectMaterial="selectMaterial" />
  161 + <wx-material-select :objData="{type:'image', accountId: objData.accountId}" @selectMaterial="selectMaterial" />
162 162 </el-dialog>
163 163 </el-col>
164 164 <el-col :span="18">
... ... @@ -176,398 +176,369 @@
176 176 </template>
177 177  
178 178 <script>
179   - // import { getPage, getMaterialVideo } from '@/api/wxmp/wxmaterial'
180   - import {getAccessToken} from '@/utils/auth'
181   - import WxNews from '@/views/mp/components/wx-news/main.vue'
182   - import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
183   - import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
184   - import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue';
  179 +import WxNews from '@/views/mp/components/wx-news/main.vue'
  180 +import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
  181 +import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
  182 +import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue';
185 183  
186   - export default {
187   - name: "wxReplySelect",
188   - components: {
189   - WxNews,
190   - WxMaterialSelect,
191   - WxVoicePlayer,
192   - WxVideoPlayer
  184 +import { getAccessToken } from '@/utils/auth'
  185 +
  186 +export default {
  187 + name: "wxReplySelect",
  188 + components: {
  189 + WxNews,
  190 + WxMaterialSelect,
  191 + WxVoicePlayer,
  192 + WxVideoPlayer
  193 + },
  194 + props: {
  195 + objData: { // 消息对象。
  196 + type: Object, // 设置为 Object 的原因，方便属性的传递
  197 + required: true,
193 198 },
194   - props: {
195   - objData: { // 消息对象。
196   - type: Object, // 设置为 Object 的原因，方便属性的传递
197   - required: true,
198   - },
199   - newsType:{ // 图文类型：1、已发布图文；2、草稿箱图文
200   - type: String,
201   - default: "1"
202   - },
  199 + newsType:{ // 图文类型：1、已发布图文；2、草稿箱图文
  200 + type: String,
  201 + default: "1"
203 202 },
204   - data() {
205   - return {
206   - tempPlayerObj: {
207   - type: '2'
208   - },
209   - tableData: [],
210   - page: {
211   - total: 0, // 总页数
212   - currentPage: 1, // 当前页数
213   - pageSize: 20, // 每页显示多少条
214   - ascs:[],//升序字段
215   - descs:[]//降序字段
216   - },
217   - tableLoading: false,
  203 + },
  204 + data() {
  205 + return {
  206 + tempPlayerObj: {
  207 + type: '2'
  208 + },
218 209  
219   - tempObj: new Map().set( // 临时缓存，切换消息类型的 tab 的时候，可以保存对应的数据；
220   - this.objData.type, // 消息类型
221   - Object.assign({}, this.objData)), // 消息内容
  210 + tempObj: new Map().set( // 临时缓存，切换消息类型的 tab 的时候，可以保存对应的数据；
  211 + this.objData.type, // 消息类型
  212 + Object.assign({}, this.objData)), // 消息内容
222 213  
223   - // ========== 素材选择的弹窗，是否可见 ==========
224   - dialogNewsVisible: false, // 图文
225   - dialogImageVisible: false, // 图片
226   - dialogVoiceVisible: false, // 语音
227   - dialogVideoVisible: false, // 视频
228   - dialogThumbVisible: false, // 缩略图
  214 + // ========== 素材选择的弹窗，是否可见 ==========
  215 + dialogNewsVisible: false, // 图文
  216 + dialogImageVisible: false, // 图片
  217 + dialogVoiceVisible: false, // 语音
  218 + dialogVideoVisible: false, // 视频
  219 + dialogThumbVisible: false, // 缩略图
229 220  
230   - // ========== 文件上传（图片、语音、视频） ==========
231   - fileList: [], // 文件列表
232   - uploadData: {
233   - "accountId": undefined,
234   - "type": this.objData.type,
235   - "title":'',
236   - "introduction":''
237   - },
238   - actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/mp/material/upload-temporary',
239   - headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
  221 + // ========== 文件上传（图片、语音、视频） ==========
  222 + fileList: [], // 文件列表
  223 + uploadData: {
  224 + "accountId": undefined,
  225 + "type": this.objData.type,
  226 + "title":'',
  227 + "introduction":''
  228 + },
  229 + actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/mp/material/upload-temporary',
  230 + headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
  231 + }
  232 + },
  233 + methods:{
  234 + beforeThumbImageUpload(file){
  235 + const isType = file.type === 'image/jpeg'
  236 + || file.type === 'image/png'
  237 + || file.type === 'image/gif'
  238 + || file.type === 'image/bmp'
  239 + || file.type === 'image/jpg';
  240 + if (!isType) {
  241 + this.$message.error('上传图片格式不对!');
  242 + return false;
  243 + }
  244 + const isLt = file.size / 1024 / 1024 < 2;
  245 + if (!isLt) {
  246 + this.$message.error('上传图片大小不能超过 2M!');
  247 + return false;
240 248 }
  249 + this.uploadData.accountId = this.objData.accountId;
  250 + return true;
241 251 },
242   - methods:{
243   - beforeThumbImageUpload(file){
244   - const isType = file.type === 'image/jpeg'
245   - || file.type === 'image/png'
246   - || file.type === 'image/gif'
247   - || file.type === 'image/bmp'
248   - || file.type === 'image/jpg';
249   - if (!isType) {
250   - this.$message.error('上传图片格式不对!');
251   - return false;
252   - }
253   - const isLt = file.size / 1024 / 1024 < 2;
254   - if (!isLt) {
255   - this.$message.error('上传图片大小不能超过 2M!');
256   - return false;
257   - }
258   - this.uploadData.accountId = this.objData.accountId;
259   - return true;
260   - },
261   - beforeVoiceUpload(file){
262   - this.tableLoading = true
263   - // 校验格式
264   - const isType = file.type === 'audio/mp3'
265   - || file.type === 'audio/mpeg'
266   - || file.type === 'audio/wma'
267   - || file.type === 'audio/wav'
268   - || file.type === 'audio/amr';
269   - if (!isType) {
270   - this.$message.error('上传语音格式不对!' + file.type);
271   - return false;
272   - }
273   - // 校验大小
274   - const isLt = file.size / 1024 / 1024 < 2;
275   - if (!isLt) {
276   - this.$message.error('上传语音大小不能超过 2M!');
277   - return false;
278   - }
279   - this.uploadData.accountId = this.objData.accountId;
280   - return true;
281   - },
282   - beforeImageUpload(file) {
283   - // 校验格式
284   - const isType = file.type === 'image/jpeg'
285   - || file.type === 'image/png'
286   - || file.type === 'image/gif'
287   - || file.type === 'image/bmp'
288   - || file.type === 'image/jpg';
289   - if (!isType) {
290   - this.$message.error('上传图片格式不对!');
291   - return false;
292   - }
293   - // 校验大小
294   - const isLt = file.size / 1024 / 1024 < 2;
295   - if (!isLt) {
296   - this.$message.error('上传图片大小不能超过 2M!');
297   - return false;
298   - }
299   - this.uploadData.accountId = this.objData.accountId;
300   - return true;
301   - },
302   - beforeVideoUpload(file){
303   - // 校验格式
304   - const isType = file.type === 'video/mp4';
305   - if (!isType) {
306   - this.$message.error('上传视频格式不对!');
307   - return false;
308   - }
309   - // 校验大小
310   - const isLt = file.size / 1024 / 1024 < 10;
311   - if (!isLt) {
312   - this.$message.error('上传视频大小不能超过 10M!');
313   - return false;
314   - }
315   - this.uploadData.accountId = this.objData.accountId;
316   - return true;
317   - },
318   - handleUploadSuccess(response, file, fileList) {
319   - if (response.code !== 0) {
320   - this.$message.error('上传出错：' + response.msg)
321   - return false;
322   - }
  252 + beforeVoiceUpload(file){
  253 + // 校验格式
  254 + const isType = file.type === 'audio/mp3'
  255 + || file.type === 'audio/mpeg'
  256 + || file.type === 'audio/wma'
  257 + || file.type === 'audio/wav'
  258 + || file.type === 'audio/amr';
  259 + if (!isType) {
  260 + this.$message.error('上传语音格式不对!' + file.type);
  261 + return false;
  262 + }
  263 + // 校验大小
  264 + const isLt = file.size / 1024 / 1024 < 2;
  265 + if (!isLt) {
  266 + this.$message.error('上传语音大小不能超过 2M!');
  267 + return false;
  268 + }
  269 + this.uploadData.accountId = this.objData.accountId;
  270 + return true;
  271 + },
  272 + beforeImageUpload(file) {
  273 + // 校验格式
  274 + const isType = file.type === 'image/jpeg'
  275 + || file.type === 'image/png'
  276 + || file.type === 'image/gif'
  277 + || file.type === 'image/bmp'
  278 + || file.type === 'image/jpg';
  279 + if (!isType) {
  280 + this.$message.error('上传图片格式不对!');
  281 + return false;
  282 + }
  283 + // 校验大小
  284 + const isLt = file.size / 1024 / 1024 < 2;
  285 + if (!isLt) {
  286 + this.$message.error('上传图片大小不能超过 2M!');
  287 + return false;
  288 + }
  289 + this.uploadData.accountId = this.objData.accountId;
  290 + return true;
  291 + },
  292 + beforeVideoUpload(file){
  293 + // 校验格式
  294 + const isType = file.type === 'video/mp4';
  295 + if (!isType) {
  296 + this.$message.error('上传视频格式不对!');
  297 + return false;
  298 + }
  299 + // 校验大小
  300 + const isLt = file.size / 1024 / 1024 < 10;
  301 + if (!isLt) {
  302 + this.$message.error('上传视频大小不能超过 10M!');
  303 + return false;
  304 + }
  305 + this.uploadData.accountId = this.objData.accountId;
  306 + return true;
  307 + },
  308 + handleUploadSuccess(response, file, fileList) {
  309 + if (response.code !== 0) {
  310 + this.$message.error('上传出错：' + response.msg)
  311 + return false;
  312 + }
323 313  
324   - // 清空上传时的各种数据
325   - this.fileList = []
326   - this.uploadData.title = ''
327   - this.uploadData.introduction = ''
  314 + // 清空上传时的各种数据
  315 + this.fileList = []
  316 + this.uploadData.title = ''
  317 + this.uploadData.introduction = ''
328 318  
329   - // 上传好的文件，本质是个素材，所以可以进行选中
330   - let item = response.data
331   - this.selectMaterial(item)
332   - },
333   - /**
334   - * 切换消息类型的 tab
335   - *
336   - * @param tab tab
337   - */
338   - handleClick(tab) {
339   - // 设置后续文件上传的文件类型
340   - this.uploadData.type = this.objData.type;
341   - if (this.uploadData.type === 'music') { // 【音乐】上传的是缩略图
342   - this.uploadData.type = 'thumb';
343   - }
  319 + // 上传好的文件，本质是个素材，所以可以进行选中
  320 + let item = response.data
  321 + this.selectMaterial(item)
  322 + },
  323 + /**
  324 + * 切换消息类型的 tab
  325 + *
  326 + * @param tab tab
  327 + */
  328 + handleClick(tab) {
  329 + // 设置后续文件上传的文件类型
  330 + this.uploadData.type = this.objData.type;
  331 + if (this.uploadData.type === 'music') { // 【音乐】上传的是缩略图
  332 + this.uploadData.type = 'thumb';
  333 + }
344 334  
345   - // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData
346   - let tempObjItem = this.tempObj.get(this.objData.type)
347   - if (tempObjItem) {
348   - this.objData.content = tempObjItem.content ? tempObjItem.content : null
349   - this.objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
350   - this.objData.url = tempObjItem.url ? tempObjItem.url : null
351   - this.objData.name = tempObjItem.url ? tempObjItem.name : null
352   - this.objData.title = tempObjItem.title ? tempObjItem.title : null
353   - this.objData.description = tempObjItem.description ? tempObjItem.description : null
354   - return;
355   - }
356   - // 如果获取不到，需要把 objData 复原
357   - // 必须使用 $set 赋值，不然 input 无法输入内容
358   - this.$set(this.objData, 'content', '');
359   - this.$set(this.objData, 'title', '');
360   - this.$set(this.objData, 'description', '');
361   - },
362   - /**
363   - * 选择素材，将设置设置到 objData 变量
364   - *
365   - * @param item 素材
366   - */
367   - selectMaterial(item) {
368   - // 选择好素材，所以隐藏弹窗
369   - this.closeMaterial();
  335 + // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData
  336 + let tempObjItem = this.tempObj.get(this.objData.type)
  337 + if (tempObjItem) {
  338 + this.objData.content = tempObjItem.content ? tempObjItem.content : null
  339 + this.objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
  340 + this.objData.url = tempObjItem.url ? tempObjItem.url : null
  341 + this.objData.name = tempObjItem.url ? tempObjItem.name : null
  342 + this.objData.title = tempObjItem.title ? tempObjItem.title : null
  343 + this.objData.description = tempObjItem.description ? tempObjItem.description : null
  344 + return;
  345 + }
  346 + // 如果获取不到，需要把 objData 复原
  347 + // 必须使用 $set 赋值，不然 input 无法输入内容
  348 + this.$set(this.objData, 'content', '');
  349 + this.$set(this.objData, 'title', '');
  350 + this.$set(this.objData, 'description', '');
  351 + },
  352 + /**
  353 + * 选择素材，将设置设置到 objData 变量
  354 + *
  355 + * @param item 素材
  356 + */
  357 + selectMaterial(item) {
  358 + // 选择好素材，所以隐藏弹窗
  359 + this.closeMaterial();
370 360  
371   - // 创建 tempObjItem 对象，并设置对应的值
372   - let tempObjItem = {}
373   - tempObjItem.type = this.objData.type;
374   - if (this.objData.type === 'news') {
375   - tempObjItem.articles = item.content.newsItem
376   - this.objData.articles = item.content.newsItem
377   - } else if (this.objData.type === 'music') { // 音乐需要特殊处理，因为选择的是图片的缩略图
378   - tempObjItem.thumbMediaId = item.mediaId
379   - this.objData.thumbMediaId = item.mediaId
380   - tempObjItem.thumbMediaUrl = item.url
381   - this.objData.thumbMediaUrl = item.url
382   - // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉
383   - tempObjItem.title = this.objData.title || ''
384   - tempObjItem.introduction = this.objData.introduction || ''
385   - tempObjItem.musicUrl = this.objData.musicUrl || ''
386   - tempObjItem.hqMusicUrl = this.objData.hqMusicUrl || ''
387   - } else if (this.objData.type === 'image'
388   - || this.objData.type === 'voice') {
389   - tempObjItem.mediaId = item.mediaId
390   - this.objData.mediaId = item.mediaId
391   - tempObjItem.url = item.url;
392   - this.objData.url = item.url;
393   - tempObjItem.name = item.name
394   - this.objData.name = item.name
395   - } else if (this.objData.type === 'video') {
396   - tempObjItem.mediaId = item.mediaId
397   - this.objData.mediaId = item.mediaId
398   - tempObjItem.url = item.url;
399   - this.objData.url = item.url;
400   - tempObjItem.name = item.name
401   - this.objData.name = item.name
402   - // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
403   - if (item.title) {
404   - this.objData.title = item.title || ''
405   - tempObjItem.title = item.title || ''
406   - }
407   - if (item.introduction) {
408   - this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
409   - tempObjItem.description = item.introduction || ''
410   - }
411   - } else if (this.objData.type === 'text') {
412   - this.objData.content = item.content || ''
  361 + // 创建 tempObjItem 对象，并设置对应的值
  362 + let tempObjItem = {}
  363 + tempObjItem.type = this.objData.type;
  364 + if (this.objData.type === 'news') {
  365 + tempObjItem.articles = item.content.newsItem
  366 + this.objData.articles = item.content.newsItem
  367 + } else if (this.objData.type === 'music') { // 音乐需要特殊处理，因为选择的是图片的缩略图
  368 + tempObjItem.thumbMediaId = item.mediaId
  369 + this.objData.thumbMediaId = item.mediaId
  370 + tempObjItem.thumbMediaUrl = item.url
  371 + this.objData.thumbMediaUrl = item.url
  372 + // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉
  373 + tempObjItem.title = this.objData.title || ''
  374 + tempObjItem.introduction = this.objData.introduction || ''
  375 + tempObjItem.musicUrl = this.objData.musicUrl || ''
  376 + tempObjItem.hqMusicUrl = this.objData.hqMusicUrl || ''
  377 + } else if (this.objData.type === 'image'
  378 + || this.objData.type === 'voice') {
  379 + tempObjItem.mediaId = item.mediaId
  380 + this.objData.mediaId = item.mediaId
  381 + tempObjItem.url = item.url;
  382 + this.objData.url = item.url;
  383 + tempObjItem.name = item.name
  384 + this.objData.name = item.name
  385 + } else if (this.objData.type === 'video') {
  386 + tempObjItem.mediaId = item.mediaId
  387 + this.objData.mediaId = item.mediaId
  388 + tempObjItem.url = item.url;
  389 + this.objData.url = item.url;
  390 + tempObjItem.name = item.name
  391 + this.objData.name = item.name
  392 + // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
  393 + if (item.title) {
  394 + this.objData.title = item.title || ''
  395 + tempObjItem.title = item.title || ''
413 396 }
414   - // 最终设置到临时缓存
415   - this.tempObj.set(this.objData.type, tempObjItem)
416   - },
417   - openMaterial() {
418   - if (this.objData.type === 'news') {
419   - this.dialogNewsVisible = true
420   - } else if(this.objData.type === 'image') {
421   - this.dialogImageVisible = true
422   - } else if(this.objData.type === 'voice') {
423   - this.dialogVoiceVisible = true
424   - } else if(this.objData.type === 'video') {
425   - this.dialogVideoVisible = true
426   - } else if(this.objData.type === 'music') {
427   - this.dialogThumbVisible = true
428   - }
429   - },
430   - closeMaterial() {
431   - this.dialogNewsVisible = false
432   - this.dialogImageVisible = false
433   - this.dialogVoiceVisible = false
434   - this.dialogVideoVisible = false
435   - this.dialogThumbVisible = false
436   - },
437   - deleteObj() {
438   - if (this.objData.type === 'news') {
439   - this.$delete(this.objData, 'articles');
440   - } else if(this.objData.type === 'image') {
441   - this.objData.mediaId = null
442   - this.objData.url = null
443   - this.objData.name = null
444   - } else if(this.objData.type === 'voice') {
445   - this.objData.mediaId = null
446   - this.objData.url = null
447   - this.objData.name = null
448   - } else if(this.objData.type === 'video') {
449   - this.objData.mediaId = null
450   - this.objData.url = null
451   - this.objData.name = null
452   - this.objData.title = null
453   - this.objData.description = null
454   - } else if(this.objData.type === 'music') {
455   - this.objData.thumbMediaId = null
456   - this.objData.thumbMediaUrl = null
457   - this.objData.title = null
458   - this.objData.description = null
459   - this.objData.musicUrl = null
460   - this.objData.hqMusicUrl = null
461   - } else if(this.objData.type === 'text') {
462   - this.objData.content = null
  397 + if (item.introduction) {
  398 + this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
  399 + tempObjItem.description = item.introduction || ''
463 400 }
464   - // 覆盖缓存
465   - this.tempObj.set(this.objData.type, Object.assign({}, this.objData));
466   - },
467   - getPage(page, params) {
468   - this.tableLoading = true
469   - // getPage(Object.assign({
470   - // current: page.currentPage,
471   - // size: page.pageSize,
472   - // type:this.objData.type
473   - // }, params)).then(response => {
474   - // this.tableData = response.data.items
475   - // this.page.total = response.data.totalCount
476   - // this.page.currentPage = page.currentPage
477   - // this.page.pageSize = page.pageSize
478   - // this.tableLoading = false
479   - // })
480   - },
481   - sizeChange(val) {
482   - this.page.currentPage = 1
483   - this.page.pageSize = val
484   - this.getPage(this.page)
485   - },
486   - /**
487   - * 输入时，缓存每次 objData 到 tempObj 中
488   - *
489   - * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式
490   - */
491   - inputContent(str) {
492   - // 覆盖缓存
493   - this.tempObj.set(this.objData.type, Object.assign({}, this.objData));
  401 + } else if (this.objData.type === 'text') {
  402 + this.objData.content = item.content || ''
  403 + }
  404 + // 最终设置到临时缓存
  405 + this.tempObj.set(this.objData.type, tempObjItem)
  406 + },
  407 + openMaterial() {
  408 + if (this.objData.type === 'news') {
  409 + this.dialogNewsVisible = true
  410 + } else if(this.objData.type === 'image') {
  411 + this.dialogImageVisible = true
  412 + } else if(this.objData.type === 'voice') {
  413 + this.dialogVoiceVisible = true
  414 + } else if(this.objData.type === 'video') {
  415 + this.dialogVideoVisible = true
  416 + } else if(this.objData.type === 'music') {
  417 + this.dialogThumbVisible = true
  418 + }
  419 + },
  420 + closeMaterial() {
  421 + this.dialogNewsVisible = false
  422 + this.dialogImageVisible = false
  423 + this.dialogVoiceVisible = false
  424 + this.dialogVideoVisible = false
  425 + this.dialogThumbVisible = false
  426 + },
  427 + deleteObj() {
  428 + if (this.objData.type === 'news') {
  429 + this.$delete(this.objData, 'articles');
  430 + } else if(this.objData.type === 'image') {
  431 + this.objData.mediaId = null
  432 + this.objData.url = null
  433 + this.objData.name = null
  434 + } else if(this.objData.type === 'voice') {
  435 + this.objData.mediaId = null
  436 + this.objData.url = null
  437 + this.objData.name = null
  438 + } else if(this.objData.type === 'video') {
  439 + this.objData.mediaId = null
  440 + this.objData.url = null
  441 + this.objData.name = null
  442 + this.objData.title = null
  443 + this.objData.description = null
  444 + } else if(this.objData.type === 'music') {
  445 + this.objData.thumbMediaId = null
  446 + this.objData.thumbMediaUrl = null
  447 + this.objData.title = null
  448 + this.objData.description = null
  449 + this.objData.musicUrl = null
  450 + this.objData.hqMusicUrl = null
  451 + } else if(this.objData.type === 'text') {
  452 + this.objData.content = null
494 453 }
  454 + // 覆盖缓存
  455 + this.tempObj.set(this.objData.type, Object.assign({}, this.objData));
  456 + },
  457 + /**
  458 + * 输入时，缓存每次 objData 到 tempObj 中
  459 + *
  460 + * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式
  461 + */
  462 + inputContent(str) {
  463 + // 覆盖缓存
  464 + this.tempObj.set(this.objData.type, Object.assign({}, this.objData));
495 465 }
496   - };
  466 + }
  467 +};
497 468 </script>
498 469  
499 470 <style lang="scss" scoped>
500   - .public-account-management{
501   - .el-input{
502   - width: 70%;
503   - margin-right: 2%;
504   - }
505   - }
506   - .pagination{
507   - text-align: right;
508   - margin-right: 25px;
509   - }
510   - .select-item{
511   - width: 280px;
512   - padding: 10px;
513   - margin: 0 auto 10px auto;
514   - border: 1px solid #eaeaea;
515   - }
516   - .select-item2{
517   - padding: 10px;
518   - margin: 0 auto 10px auto;
519   - border: 1px solid #eaeaea;
520   - }
521   - .ope-row{
522   - padding-top: 10px;
523   - text-align: center;
524   - }
525   - .item-name{
526   - font-size: 12px;
527   - overflow: hidden;
528   - text-overflow:ellipsis;
529   - white-space: nowrap;
530   - text-align: center;
531   - }
532   - .el-form-item__content{
533   - line-height:unset!important;
534   - }
535   - .col-select{
536   - border: 1px solid rgb(234, 234, 234);
537   - padding: 50px 0px;
538   - height: 160px;
539   - width: 49.5%;
540   - }
541   - .col-select2{
542   - border: 1px solid rgb(234, 234, 234);
543   - padding: 50px 0px;
544   - height: 160px;
545   - }
546   - .col-add{
547   - border: 1px solid rgb(234, 234, 234);
548   - padding: 50px 0px;
549   - height: 160px;
550   - width: 49.5%;
551   - float: right
552   - }
553   - .avatar-uploader-icon {
554   - border: 1px solid #d9d9d9;
555   - font-size: 28px;
556   - color: #8c939d;
557   - width: 100px!important;
558   - height: 100px!important;
559   - line-height: 100px!important;
560   - text-align: center;
561   - }
562   - .material-img {
563   - width: 100%;
564   - }
565   - .thumb-div{
566   - display: inline-block;
567   - text-align: center;
568   - }
569   - .item-infos{
570   - width: 30%;
571   - margin: auto
  471 +.public-account-management{
  472 + .el-input{
  473 + width: 70%;
  474 + margin-right: 2%;
572 475 }
  476 +}
  477 +.pagination{
  478 + text-align: right;
  479 + margin-right: 25px;
  480 +}
  481 +.select-item{
  482 + width: 280px;
  483 + padding: 10px;
  484 + margin: 0 auto 10px auto;
  485 + border: 1px solid #eaeaea;
  486 +}
  487 +.select-item2{
  488 + padding: 10px;
  489 + margin: 0 auto 10px auto;
  490 + border: 1px solid #eaeaea;
  491 +}
  492 +.ope-row{
  493 + padding-top: 10px;
  494 + text-align: center;
  495 +}
  496 +.item-name{
  497 + font-size: 12px;
  498 + overflow: hidden;
  499 + text-overflow:ellipsis;
  500 + white-space: nowrap;
  501 + text-align: center;
  502 +}
  503 +.el-form-item__content{
  504 + line-height:unset!important;
  505 +}
  506 +.col-select{
  507 + border: 1px solid rgb(234, 234, 234);
  508 + padding: 50px 0px;
  509 + height: 160px;
  510 + width: 49.5%;
  511 +}
  512 +.col-select2{
  513 + border: 1px solid rgb(234, 234, 234);
  514 + padding: 50px 0px;
  515 + height: 160px;
  516 +}
  517 +.col-add{
  518 + border: 1px solid rgb(234, 234, 234);
  519 + padding: 50px 0px;
  520 + height: 160px;
  521 + width: 49.5%;
  522 + float: right
  523 +}
  524 +.avatar-uploader-icon {
  525 + border: 1px solid #d9d9d9;
  526 + font-size: 28px;
  527 + color: #8c939d;
  528 + width: 100px!important;
  529 + height: 100px!important;
  530 + line-height: 100px!important;
  531 + text-align: center;
  532 +}
  533 +.material-img {
  534 + width: 100%;
  535 +}
  536 +.thumb-div{
  537 + display: inline-block;
  538 + text-align: center;
  539 +}
  540 +.item-infos{
  541 + width: 30%;
  542 + margin: auto
  543 +}
573 544 </style>
... ...
yudao-ui-admin/src/views/mp/menu/index.vue
  View file @3654afe
... ... @@ -73,68 +73,68 @@ SOFTWARE.
73 73 <!--右边配置-->
74 74 <div v-if="showRightFlag" class="right">
75 75 <div class="configure_page">
76   - <div class="delete_btn">
77   - <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteMenu(tempObj)">删除当前菜单</el-button>
  76 + <div class="delete_btn">
  77 + <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteMenu(tempObj)">删除当前菜单</el-button>
  78 + </div>
  79 + <div>
  80 + <span>菜单名称：</span>
  81 + <el-input class="input_width" v-model="tempObj.name" placeholder="请输入菜单名称" :maxlength="nameMaxLength" clearable />
  82 + </div>
  83 + <div v-if="showConfigureContent">
  84 + <div class="menu_content">
  85 + <span>菜单标识：</span>
  86 + <el-input class="input_width" v-model="tempObj.menuKey" placeholder="请输入菜单 KEY" clearable />
78 87 </div>
79   - <div>
80   - <span>菜单名称：</span>
81   - <el-input class="input_width" v-model="tempObj.name" placeholder="请输入菜单名称" :maxlength="nameMaxLength" clearable />
  88 + <div class="menu_content">
  89 + <span>菜单内容：</span>
  90 + <el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option">
  91 + <el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value" />
  92 + </el-select>
82 93 </div>
83   - <div v-if="showConfigureContent">
84   - <div class="menu_content">
85   - <span>菜单标识：</span>
86   - <el-input class="input_width" v-model="tempObj.menuKey" placeholder="请输入菜单 KEY" clearable />
  94 + <div class="configur_content" v-if="tempObj.type === 'view'">
  95 + <span>跳转链接：</span>
  96 + <el-input class="input_width" v-model="tempObj.url" placeholder="请输入链接" clearable />
  97 + </div>
  98 + <div class="configur_content" v-if="tempObj.type === 'miniprogram'">
  99 + <div class="applet">
  100 + <span>小程序的 appid ：</span>
  101 + <el-input class="input_width" v-model="tempObj.miniProgramAppId" placeholder="请输入小程序的appid" clearable />
87 102 </div>
88   - <div class="menu_content">
89   - <span>菜单内容：</span>
90   - <el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option">
91   - <el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value" />
92   - </el-select>
  103 + <div class="applet">
  104 + <span>小程序的页面路径：</span>
  105 + <el-input class="input_width" v-model="tempObj.miniProgramPagePath"
  106 + placeholder="请输入小程序的页面路径，如：pages/index" clearable />
93 107 </div>
94   - <div class="configur_content" v-if="tempObj.type === 'view'">
95   - <span>跳转链接：</span>
96   - <el-input class="input_width" v-model="tempObj.url" placeholder="请输入链接" clearable />
  108 + <div class="applet">
  109 + <span>小程序的备用网页：</span>
  110 + <el-input class="input_width" v-model="tempObj.url" placeholder="不支持小程序的老版本客户端将打开本网页" clearable />
97 111 </div>
98   - <div class="configur_content" v-if="tempObj.type === 'miniprogram'">
99   - <div class="applet">
100   - <span>小程序的 appid ：</span>
101   - <el-input class="input_width" v-model="tempObj.miniProgramAppId" placeholder="请输入小程序的appid" clearable />
102   - </div>
103   - <div class="applet">
104   - <span>小程序的页面路径：</span>
105   - <el-input class="input_width" v-model="tempObj.miniProgramPagePath"
106   - placeholder="请输入小程序的页面路径，如：pages/index" clearable />
107   - </div>
108   - <div class="applet">
109   - <span>小程序的备用网页：</span>
110   - <el-input class="input_width" v-model="tempObj.url" placeholder="不支持小程序的老版本客户端将打开本网页" clearable />
  112 + <p class="blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
  113 + </div>
  114 + <div class="configur_content" v-if="tempObj.type === 'article_view_limited'">
  115 + <el-row>
  116 + <div class="select-item" v-if="tempObj && tempObj.content && tempObj.content.articles">
  117 + <WxNews :objData="tempObj.content.articles"></WxNews>
  118 + <el-row class="ope-row">
  119 + <el-button type="danger" icon="el-icon-delete" circle @click="deleteTempObj" />
  120 + </el-row>
111 121 </div>
112   - <p class="blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
113   - </div>
114   - <div class="configur_content" v-if="tempObj.type === 'article_view_limited'">
  122 + <div v-if="!tempObj.content || !tempObj.content.articles">
115 123 <el-row>
116   - <div class="select-item" v-if="tempObj && tempObj.content && tempObj.content.articles">
117   - <WxNews :objData="tempObj.content.articles"></WxNews>
118   - <el-row class="ope-row">
119   - <el-button type="danger" icon="el-icon-delete" circle @click="deleteTempObj"></el-button>
120   - </el-row>
121   - </div>
122   - <div v-if="!tempObj.content || !tempObj.content.articles">
123   - <el-row>
124   - <el-col :span="24" style="text-align: center">
125   - <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
126   - </el-col>
127   - </el-row>
128   - </div>
129   - <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%">
130   - <WxMaterialSelect :objData="{repType:'news'}" @selectMaterial="selectMaterial"></WxMaterialSelect>
131   - </el-dialog>
  124 + <el-col :span="24" style="text-align: center">
  125 + <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
  126 + </el-col>
132 127 </el-row>
133   - </div>
134   - <div class="configur_content" v-if="tempObj.type === 'click' || tempObj.type === 'scancode_waitmsg'">
135   - <wx-reply-select :objData="tempObj.reply" v-if="hackResetWxReplySelect" />
136   - </div>
137   - </div>
  128 + </div>
  129 + <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%">
  130 + <WxMaterialSelect :objData="{repType:'news'}" @selectMaterial="selectMaterial"></WxMaterialSelect>
  131 + </el-dialog>
  132 + </el-row>
  133 + </div>
  134 + <div class="configur_content" v-if="tempObj.type === 'click' || tempObj.type === 'scancode_waitmsg'">
  135 + <wx-reply-select :objData="tempObj.reply" v-if="hackResetWxReplySelect" />
  136 + </div>
  137 + </div>
138 138 </div>
139 139 </div>
140 140 <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
... ... @@ -183,12 +183,10 @@ export default {
183 183 nameMaxLength: 0, // 菜单名称最大长度；1 级是 4 字符；2 级是 7 字符；
184 184 showConfigureContent: true, // 是否展示配置内容；如果有子菜单，就不显示配置内容
185 185 hackResetWxReplySelect: false, // 重置 WxReplySelect 组件
186   -
187 186 tempObj: {}, // 右边临时变量，作为中间值牵引关系
188 187 tempSelfObj: { // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数
189 188 },
190   - visible2: false, //素材内容 "选择素材"按钮弹框显示隐藏
191   - tableData:[], //素材内容弹框数据,
  189 + dialogNewsVisible: false, // 跳转图文时的素材选择弹窗
192 190 menuOptions: [{
193 191 value: 'view',
194 192 label: '跳转网页'
... ... @@ -220,7 +218,6 @@ export default {
220 218 value: 'location_select',
221 219 label: '选择地理位置'
222 220 }],
223   - dialogNewsVisible: false,
224 221  
225 222 // 公众号账号列表
226 223 accounts: [],
... ... @@ -357,13 +354,13 @@ export default {
357 354 if (!item.children || item.children.length <= 0) {
358 355 this.$set( item, 'children',[])
359 356 this.$delete( item, 'type')
  357 + this.$delete( item, 'menuKey')
360 358 this.$delete( item, 'miniProgramAppId')
361 359 this.$delete( item, 'miniProgramPagePath')
362 360 this.$delete( item, 'url')
363 361 this.$delete( item, 'reply')
364 362 // TODO 芋艿：需要搞的属性弄下
365 363  
366   - this.$delete( item, 'key')
367 364 this.$delete( item, 'article_id')
368 365 this.$delete( item, 'textContent')
369 366 this.showConfigureContent = false
... ... @@ -470,31 +467,29 @@ export default {
470 467 }
471 468 return result;
472 469 },
473   -
474   - // TODO 芋艿：未归类
475   -
476   - deleteTempObj(){
  470 + // ======================== 菜单编辑（素材选择） ========================
  471 + openMaterial() {
  472 + this.dialogNewsVisible = true
  473 + },
  474 + selectMaterial(item){
  475 + if(item.content.articles.length>1){
  476 + this.$alert('您选择的是多图文，将默认跳转第一篇', '提示', {
  477 + confirmButtonText: '确定'
  478 + })
  479 + }
  480 + this.dialogNewsVisible = false
  481 + this.tempObj.article_id = item.articleId
  482 + this.tempObj.mediaName = item.name
  483 + this.tempObj.url = item.url
  484 + item.mediaType = this.tempObj.mediaType
  485 + item.content.articles = item.content.articles.slice(0,1)
  486 + this.tempObj.content = item.content
  487 + },
  488 + deleteTempObj() {
477 489 this.$delete(this.tempObj,'repName')
478 490 this.$delete(this.tempObj,'repUrl')
479 491 this.$delete(this.tempObj,'content')
480 492 },
481   - openMaterial(){
482   - this.dialogNewsVisible = true
483   - },
484   - selectMaterial(item){
485   - if(item.content.articles.length>1){
486   - this.$alert('您选择的是多图文，将默认跳转第一篇', '提示', {
487   - confirmButtonText: '确定'
488   - })
489   - }
490   - this.dialogNewsVisible = false
491   - this.tempObj.article_id = item.articleId
492   - this.tempObj.mediaName = item.name
493   - this.tempObj.url = item.url
494   - item.mediaType = this.tempObj.mediaType
495   - item.content.articles = item.content.articles.slice(0,1)
496   - this.tempObj.content = item.content
497   - },
498 493 },
499 494 }
500 495 </script>
... ...