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

yudao-ui-admin/src/views/mp/components/wx-reply/main.vue

@@ -137,7 +137,7 @@
           </el-row>
         </div>
         <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%" append-to-body>
-          <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" :newsType="newsType"></WxMaterialSelect>
+          <wx-material-select :objData="objData" @selectMaterial="selectMaterial" :newsType="newsType" />
         </el-dialog>
       </el-row>
     </el-tab-pane>
@@ -158,7 +158,7 @@
             </div>
           </div>
           <el-dialog title="选择图片" :visible.sync="dialogThumbVisible" width="80%" append-to-body>
-            <wx-material-select :objData="{type:'image'}" @selectMaterial="selectMaterial" />
+            <wx-material-select :objData="{type:'image', accountId: objData.accountId}" @selectMaterial="selectMaterial" />
           </el-dialog>
         </el-col>
         <el-col :span="18">
@@ -176,398 +176,369 @@
 </template>
 
 <script>
-  // import { getPage, getMaterialVideo } from '@/api/wxmp/wxmaterial'
-  import {getAccessToken} from '@/utils/auth'
-  import WxNews from '@/views/mp/components/wx-news/main.vue'
-  import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
-  import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
-  import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue';
+import WxNews from '@/views/mp/components/wx-news/main.vue'
+import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
+import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
+import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue';
 
-  export default {
-    name: "wxReplySelect",
-    components: {
-      WxNews,
-      WxMaterialSelect,
-      WxVoicePlayer,
-      WxVideoPlayer
+import { getAccessToken } from '@/utils/auth'
+
+export default {
+  name: "wxReplySelect",
+  components: {
+    WxNews,
+    WxMaterialSelect,
+    WxVoicePlayer,
+    WxVideoPlayer
+  },
+  props: {
+    objData: { // 消息对象。
+      type: Object, // 设置为 Object 的原因，方便属性的传递
+      required: true,
     },
-    props: {
-      objData: { // 消息对象。
-        type: Object, // 设置为 Object 的原因，方便属性的传递
-        required: true,
-      },
-      newsType:{ // 图文类型：1、已发布图文；2、草稿箱图文
-        type: String,
-        default: "1"
-      },
+    newsType:{ // 图文类型：1、已发布图文；2、草稿箱图文
+      type: String,
+      default: "1"
     },
-    data() {
-      return {
-        tempPlayerObj: {
-          type: '2'
-        },
-        tableData: [],
-        page: {
-          total: 0, // 总页数
-          currentPage: 1, // 当前页数
-          pageSize: 20, // 每页显示多少条
-          ascs:[],//升序字段
-          descs:[]//降序字段
-        },
-        tableLoading: false,
+  },
+  data() {
+    return {
+      tempPlayerObj: {
+        type: '2'
+      },
 
-        tempObj: new Map().set( // 临时缓存，切换消息类型的 tab 的时候，可以保存对应的数据；
-            this.objData.type, // 消息类型
-            Object.assign({}, this.objData)), // 消息内容
+      tempObj: new Map().set( // 临时缓存，切换消息类型的 tab 的时候，可以保存对应的数据；
+          this.objData.type, // 消息类型
+          Object.assign({}, this.objData)), // 消息内容
 
-        // ========== 素材选择的弹窗，是否可见 ==========
-        dialogNewsVisible: false, // 图文
-        dialogImageVisible: false, // 图片
-        dialogVoiceVisible: false, // 语音
-        dialogVideoVisible: false, // 视频
-        dialogThumbVisible: false, // 缩略图
+      // ========== 素材选择的弹窗，是否可见 ==========
+      dialogNewsVisible: false, // 图文
+      dialogImageVisible: false, // 图片
+      dialogVoiceVisible: false, // 语音
+      dialogVideoVisible: false, // 视频
+      dialogThumbVisible: false, // 缩略图
 
-        // ========== 文件上传（图片、语音、视频） ==========
-        fileList: [], // 文件列表
-        uploadData: {
-          "accountId": undefined,
-          "type": this.objData.type,
-          "title":'',
-          "introduction":''
-        },
-        actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/mp/material/upload-temporary',
-        headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
+      // ========== 文件上传（图片、语音、视频） ==========
+      fileList: [], // 文件列表
+      uploadData: {
+        "accountId": undefined,
+        "type": this.objData.type,
+        "title":'',
+        "introduction":''
+      },
+      actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/mp/material/upload-temporary',
+      headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
+    }
+  },
+  methods:{
+    beforeThumbImageUpload(file){
+      const isType = file.type === 'image/jpeg'
+          || file.type === 'image/png'
+          || file.type === 'image/gif'
+          || file.type === 'image/bmp'
+          || file.type === 'image/jpg';
+      if (!isType) {
+        this.$message.error('上传图片格式不对!');
+        return false;
+      }
+      const isLt = file.size / 1024 / 1024 < 2;
+      if (!isLt) {
+        this.$message.error('上传图片大小不能超过 2M!');
+        return false;
       }
+      this.uploadData.accountId = this.objData.accountId;
+      return true;
     },
-    methods:{
-      beforeThumbImageUpload(file){
-        const isType = file.type === 'image/jpeg'
-            || file.type === 'image/png'
-            || file.type === 'image/gif'
-            || file.type === 'image/bmp'
-            || file.type === 'image/jpg';
-        if (!isType) {
-          this.$message.error('上传图片格式不对!');
-          return false;
-        }
-        const isLt = file.size / 1024 / 1024 < 2;
-        if (!isLt) {
-          this.$message.error('上传图片大小不能超过 2M!');
-          return false;
-        }
-        this.uploadData.accountId = this.objData.accountId;
-        return true;
-      },
-      beforeVoiceUpload(file){
-        this.tableLoading = true
-        // 校验格式
-        const isType = file.type === 'audio/mp3'
-            || file.type === 'audio/mpeg'
-            || file.type === 'audio/wma'
-            || file.type === 'audio/wav'
-            || file.type === 'audio/amr';
-        if (!isType) {
-          this.$message.error('上传语音格式不对!' + file.type);
-          return false;
-        }
-        // 校验大小
-        const isLt = file.size / 1024 / 1024 < 2;
-        if (!isLt) {
-          this.$message.error('上传语音大小不能超过 2M!');
-          return false;
-        }
-        this.uploadData.accountId = this.objData.accountId;
-        return true;
-      },
-      beforeImageUpload(file) {
-        // 校验格式
-        const isType = file.type === 'image/jpeg'
-            || file.type === 'image/png'
-            || file.type === 'image/gif'
-            || file.type === 'image/bmp'
-            || file.type === 'image/jpg';
-        if (!isType) {
-          this.$message.error('上传图片格式不对!');
-          return false;
-        }
-        // 校验大小
-        const isLt = file.size / 1024 / 1024 < 2;
-        if (!isLt) {
-          this.$message.error('上传图片大小不能超过 2M!');
-          return false;
-        }
-        this.uploadData.accountId = this.objData.accountId;
-        return true;
-      },
-      beforeVideoUpload(file){
-        // 校验格式
-        const isType = file.type === 'video/mp4';
-        if (!isType) {
-          this.$message.error('上传视频格式不对!');
-          return false;
-        }
-        // 校验大小
-        const isLt = file.size / 1024 / 1024 < 10;
-        if (!isLt) {
-          this.$message.error('上传视频大小不能超过 10M!');
-          return false;
-        }
-        this.uploadData.accountId = this.objData.accountId;
-        return true;
-      },
-      handleUploadSuccess(response, file, fileList) {
-        if (response.code !== 0) {
-          this.$message.error('上传出错：' + response.msg)
-          return false;
-        }
+    beforeVoiceUpload(file){
+      // 校验格式
+      const isType = file.type === 'audio/mp3'
+          || file.type === 'audio/mpeg'
+          || file.type === 'audio/wma'
+          || file.type === 'audio/wav'
+          || file.type === 'audio/amr';
+      if (!isType) {
+        this.$message.error('上传语音格式不对!' + file.type);
+        return false;
+      }
+      // 校验大小
+      const isLt = file.size / 1024 / 1024 < 2;
+      if (!isLt) {
+        this.$message.error('上传语音大小不能超过 2M!');
+        return false;
+      }
+      this.uploadData.accountId = this.objData.accountId;
+      return true;
+    },
+    beforeImageUpload(file) {
+      // 校验格式
+      const isType = file.type === 'image/jpeg'
+          || file.type === 'image/png'
+          || file.type === 'image/gif'
+          || file.type === 'image/bmp'
+          || file.type === 'image/jpg';
+      if (!isType) {
+        this.$message.error('上传图片格式不对!');
+        return false;
+      }
+      // 校验大小
+      const isLt = file.size / 1024 / 1024 < 2;
+      if (!isLt) {
+        this.$message.error('上传图片大小不能超过 2M!');
+        return false;
+      }
+      this.uploadData.accountId = this.objData.accountId;
+      return true;
+    },
+    beforeVideoUpload(file){
+      // 校验格式
+      const isType = file.type === 'video/mp4';
+      if (!isType) {
+        this.$message.error('上传视频格式不对!');
+        return false;
+      }
+      // 校验大小
+      const isLt = file.size / 1024 / 1024 < 10;
+      if (!isLt) {
+        this.$message.error('上传视频大小不能超过 10M!');
+        return false;
+      }
+      this.uploadData.accountId = this.objData.accountId;
+      return true;
+    },
+    handleUploadSuccess(response, file, fileList) {
+      if (response.code !== 0) {
+        this.$message.error('上传出错：' + response.msg)
+        return false;
+      }
 
-        // 清空上传时的各种数据
-        this.fileList = []
-        this.uploadData.title = ''
-        this.uploadData.introduction = ''
+      // 清空上传时的各种数据
+      this.fileList = []
+      this.uploadData.title = ''
+      this.uploadData.introduction = ''
 
-        // 上传好的文件，本质是个素材，所以可以进行选中
-        let item = response.data
-        this.selectMaterial(item)
-      },
-      /**
-       * 切换消息类型的 tab
-       *
-       * @param tab tab
-       */
-      handleClick(tab) {
-        // 设置后续文件上传的文件类型
-        this.uploadData.type = this.objData.type;
-        if (this.uploadData.type === 'music') { // 【音乐】上传的是缩略图
-          this.uploadData.type = 'thumb';
-        }
+      // 上传好的文件，本质是个素材，所以可以进行选中
+      let item = response.data
+      this.selectMaterial(item)
+    },
+    /**
+     * 切换消息类型的 tab
+     *
+     * @param tab tab
+     */
+    handleClick(tab) {
+      // 设置后续文件上传的文件类型
+      this.uploadData.type = this.objData.type;
+      if (this.uploadData.type === 'music') { // 【音乐】上传的是缩略图
+        this.uploadData.type = 'thumb';
+      }
 
-        // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData
-        let tempObjItem = this.tempObj.get(this.objData.type)
-        if (tempObjItem) {
-          this.objData.content = tempObjItem.content ? tempObjItem.content : null
-          this.objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
-          this.objData.url = tempObjItem.url ? tempObjItem.url : null
-          this.objData.name = tempObjItem.url ? tempObjItem.name : null
-          this.objData.title = tempObjItem.title ? tempObjItem.title : null
-          this.objData.description = tempObjItem.description ? tempObjItem.description : null
-          return;
-        }
-        // 如果获取不到，需要把 objData 复原
-        // 必须使用 $set 赋值，不然 input 无法输入内容
-        this.$set(this.objData, 'content', '');
-        this.$set(this.objData, 'title', '');
-        this.$set(this.objData, 'description', '');
-      },
-      /**
-       * 选择素材，将设置设置到 objData 变量
-       *
-       * @param item 素材
-       */
-      selectMaterial(item) {
-        // 选择好素材，所以隐藏弹窗
-        this.closeMaterial();
+      // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData
+      let tempObjItem = this.tempObj.get(this.objData.type)
+      if (tempObjItem) {
+        this.objData.content = tempObjItem.content ? tempObjItem.content : null
+        this.objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
+        this.objData.url = tempObjItem.url ? tempObjItem.url : null
+        this.objData.name = tempObjItem.url ? tempObjItem.name : null
+        this.objData.title = tempObjItem.title ? tempObjItem.title : null
+        this.objData.description = tempObjItem.description ? tempObjItem.description : null
+        return;
+      }
+      // 如果获取不到，需要把 objData 复原
+      // 必须使用 $set 赋值，不然 input 无法输入内容
+      this.$set(this.objData, 'content', '');
+      this.$set(this.objData, 'title', '');
+      this.$set(this.objData, 'description', '');
+    },
+    /**
+     * 选择素材，将设置设置到 objData 变量
+     *
+     * @param item 素材
+     */
+    selectMaterial(item) {
+      // 选择好素材，所以隐藏弹窗
+      this.closeMaterial();
 
-        // 创建 tempObjItem 对象，并设置对应的值
-        let tempObjItem = {}
-        tempObjItem.type = this.objData.type;
-        if (this.objData.type === 'news') {
-          tempObjItem.articles = item.content.newsItem
-          this.objData.articles = item.content.newsItem
-        } else if (this.objData.type === 'music') { // 音乐需要特殊处理，因为选择的是图片的缩略图
-          tempObjItem.thumbMediaId = item.mediaId
-          this.objData.thumbMediaId = item.mediaId
-          tempObjItem.thumbMediaUrl = item.url
-          this.objData.thumbMediaUrl = item.url
-          // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉
-          tempObjItem.title = this.objData.title || ''
-          tempObjItem.introduction = this.objData.introduction  || ''
-          tempObjItem.musicUrl = this.objData.musicUrl  || ''
-          tempObjItem.hqMusicUrl = this.objData.hqMusicUrl  || ''
-        } else if (this.objData.type === 'image'
-            || this.objData.type === 'voice') {
-          tempObjItem.mediaId = item.mediaId
-          this.objData.mediaId = item.mediaId
-          tempObjItem.url = item.url;
-          this.objData.url = item.url;
-          tempObjItem.name = item.name
-          this.objData.name = item.name
-        } else if (this.objData.type === 'video') {
-          tempObjItem.mediaId = item.mediaId
-          this.objData.mediaId = item.mediaId
-          tempObjItem.url = item.url;
-          this.objData.url = item.url;
-          tempObjItem.name = item.name
-          this.objData.name = item.name
-          // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
-          if (item.title) {
-            this.objData.title = item.title || ''
-            tempObjItem.title = item.title || ''
-          }
-          if (item.introduction) {
-            this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
-            tempObjItem.description = item.introduction || ''
-          }
-        } else if (this.objData.type === 'text') {
-          this.objData.content = item.content || ''
+      // 创建 tempObjItem 对象，并设置对应的值
+      let tempObjItem = {}
+      tempObjItem.type = this.objData.type;
+      if (this.objData.type === 'news') {
+        tempObjItem.articles = item.content.newsItem
+        this.objData.articles = item.content.newsItem
+      } else if (this.objData.type === 'music') { // 音乐需要特殊处理，因为选择的是图片的缩略图
+        tempObjItem.thumbMediaId = item.mediaId
+        this.objData.thumbMediaId = item.mediaId
+        tempObjItem.thumbMediaUrl = item.url
+        this.objData.thumbMediaUrl = item.url
+        // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉
+        tempObjItem.title = this.objData.title || ''
+        tempObjItem.introduction = this.objData.introduction  || ''
+        tempObjItem.musicUrl = this.objData.musicUrl  || ''
+        tempObjItem.hqMusicUrl = this.objData.hqMusicUrl  || ''
+      } else if (this.objData.type === 'image'
+          || this.objData.type === 'voice') {
+        tempObjItem.mediaId = item.mediaId
+        this.objData.mediaId = item.mediaId
+        tempObjItem.url = item.url;
+        this.objData.url = item.url;
+        tempObjItem.name = item.name
+        this.objData.name = item.name
+      } else if (this.objData.type === 'video') {
+        tempObjItem.mediaId = item.mediaId
+        this.objData.mediaId = item.mediaId
+        tempObjItem.url = item.url;
+        this.objData.url = item.url;
+        tempObjItem.name = item.name
+        this.objData.name = item.name
+        // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
+        if (item.title) {
+          this.objData.title = item.title || ''
+          tempObjItem.title = item.title || ''
         }
-        // 最终设置到临时缓存
-        this.tempObj.set(this.objData.type, tempObjItem)
-      },
-      openMaterial() {
-        if (this.objData.type === 'news') {
-          this.dialogNewsVisible = true
-        } else if(this.objData.type === 'image') {
-          this.dialogImageVisible = true
-        } else if(this.objData.type === 'voice') {
-          this.dialogVoiceVisible = true
-        } else if(this.objData.type === 'video') {
-          this.dialogVideoVisible = true
-        } else if(this.objData.type === 'music') {
-          this.dialogThumbVisible = true
-        }
-      },
-      closeMaterial() {
-        this.dialogNewsVisible = false
-        this.dialogImageVisible = false
-        this.dialogVoiceVisible = false
-        this.dialogVideoVisible = false
-        this.dialogThumbVisible = false
-      },
-      deleteObj() {
-        if (this.objData.type === 'news') {
-          this.$delete(this.objData, 'articles');
-        } else if(this.objData.type === 'image') {
-          this.objData.mediaId = null
-          this.objData.url = null
-          this.objData.name = null
-        } else if(this.objData.type === 'voice') {
-          this.objData.mediaId = null
-          this.objData.url = null
-          this.objData.name = null
-        } else if(this.objData.type === 'video') {
-          this.objData.mediaId = null
-          this.objData.url = null
-          this.objData.name = null
-          this.objData.title = null
-          this.objData.description = null
-        } else if(this.objData.type === 'music') {
-          this.objData.thumbMediaId = null
-          this.objData.thumbMediaUrl = null
-          this.objData.title = null
-          this.objData.description = null
-          this.objData.musicUrl = null
-          this.objData.hqMusicUrl = null
-        } else if(this.objData.type === 'text') {
-          this.objData.content = null
+        if (item.introduction) {
+          this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
+          tempObjItem.description = item.introduction || ''
         }
-        // 覆盖缓存
-        this.tempObj.set(this.objData.type, Object.assign({}, this.objData));
-      },
-      getPage(page, params) {
-        this.tableLoading = true
-        // getPage(Object.assign({
-        //   current: page.currentPage,
-        //   size: page.pageSize,
-        //   type:this.objData.type
-        // }, params)).then(response => {
-        //   this.tableData = response.data.items
-        //   this.page.total = response.data.totalCount
-        //   this.page.currentPage = page.currentPage
-        //   this.page.pageSize = page.pageSize
-        //   this.tableLoading = false
-        // })
-      },
-      sizeChange(val) {
-        this.page.currentPage = 1
-        this.page.pageSize = val
-        this.getPage(this.page)
-      },
-      /**
-       * 输入时，缓存每次 objData 到 tempObj 中
-       *
-       * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式
-       */
-      inputContent(str) {
-        // 覆盖缓存
-        this.tempObj.set(this.objData.type, Object.assign({}, this.objData));
+      } else if (this.objData.type === 'text') {
+        this.objData.content = item.content || ''
+      }
+      // 最终设置到临时缓存
+      this.tempObj.set(this.objData.type, tempObjItem)
+    },
+    openMaterial() {
+      if (this.objData.type === 'news') {
+        this.dialogNewsVisible = true
+      } else if(this.objData.type === 'image') {
+        this.dialogImageVisible = true
+      } else if(this.objData.type === 'voice') {
+        this.dialogVoiceVisible = true
+      } else if(this.objData.type === 'video') {
+        this.dialogVideoVisible = true
+      } else if(this.objData.type === 'music') {
+        this.dialogThumbVisible = true
+      }
+    },
+    closeMaterial() {
+      this.dialogNewsVisible = false
+      this.dialogImageVisible = false
+      this.dialogVoiceVisible = false
+      this.dialogVideoVisible = false
+      this.dialogThumbVisible = false
+    },
+    deleteObj() {
+      if (this.objData.type === 'news') {
+        this.$delete(this.objData, 'articles');
+      } else if(this.objData.type === 'image') {
+        this.objData.mediaId = null
+        this.objData.url = null
+        this.objData.name = null
+      } else if(this.objData.type === 'voice') {
+        this.objData.mediaId = null
+        this.objData.url = null
+        this.objData.name = null
+      } else if(this.objData.type === 'video') {
+        this.objData.mediaId = null
+        this.objData.url = null
+        this.objData.name = null
+        this.objData.title = null
+        this.objData.description = null
+      } else if(this.objData.type === 'music') {
+        this.objData.thumbMediaId = null
+        this.objData.thumbMediaUrl = null
+        this.objData.title = null
+        this.objData.description = null
+        this.objData.musicUrl = null
+        this.objData.hqMusicUrl = null
+      } else if(this.objData.type === 'text') {
+        this.objData.content = null
       }
+      // 覆盖缓存
+      this.tempObj.set(this.objData.type, Object.assign({}, this.objData));
+    },
+    /**
+     * 输入时，缓存每次 objData 到 tempObj 中
+     *
+     * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式
+     */
+    inputContent(str) {
+      // 覆盖缓存
+      this.tempObj.set(this.objData.type, Object.assign({}, this.objData));
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-  .public-account-management{
-    .el-input{
-      width: 70%;
-      margin-right: 2%;
-    }
-  }
-  .pagination{
-    text-align: right;
-    margin-right: 25px;
-  }
-  .select-item{
-    width: 280px;
-    padding: 10px;
-    margin: 0 auto 10px auto;
-    border: 1px solid #eaeaea;
-  }
-  .select-item2{
-    padding: 10px;
-    margin: 0 auto 10px auto;
-    border: 1px solid #eaeaea;
-  }
-  .ope-row{
-    padding-top: 10px;
-    text-align: center;
-  }
-  .item-name{
-    font-size: 12px;
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-    text-align: center;
-  }
-  .el-form-item__content{
-    line-height:unset!important;
-  }
-  .col-select{
-    border: 1px solid rgb(234, 234, 234);
-    padding: 50px 0px;
-    height: 160px;
-    width: 49.5%;
-  }
-  .col-select2{
-    border: 1px solid rgb(234, 234, 234);
-    padding: 50px 0px;
-    height: 160px;
-  }
-  .col-add{
-    border: 1px solid rgb(234, 234, 234);
-    padding: 50px 0px;
-    height: 160px;
-    width: 49.5%;
-    float: right
-  }
-  .avatar-uploader-icon {
-    border: 1px solid #d9d9d9;
-    font-size: 28px;
-    color: #8c939d;
-    width: 100px!important;
-    height: 100px!important;
-    line-height: 100px!important;
-    text-align: center;
-  }
-  .material-img {
-    width: 100%;
-  }
-  .thumb-div{
-    display: inline-block;
-    text-align: center;
-  }
-  .item-infos{
-    width: 30%;
-    margin: auto
+.public-account-management{
+  .el-input{
+    width: 70%;
+    margin-right: 2%;
   }
+}
+.pagination{
+  text-align: right;
+  margin-right: 25px;
+}
+.select-item{
+  width: 280px;
+  padding: 10px;
+  margin: 0 auto 10px auto;
+  border: 1px solid #eaeaea;
+}
+.select-item2{
+  padding: 10px;
+  margin: 0 auto 10px auto;
+  border: 1px solid #eaeaea;
+}
+.ope-row{
+  padding-top: 10px;
+  text-align: center;
+}
+.item-name{
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+.el-form-item__content{
+  line-height:unset!important;
+}
+.col-select{
+  border: 1px solid rgb(234, 234, 234);
+  padding: 50px 0px;
+  height: 160px;
+  width: 49.5%;
+}
+.col-select2{
+  border: 1px solid rgb(234, 234, 234);
+  padding: 50px 0px;
+  height: 160px;
+}
+.col-add{
+  border: 1px solid rgb(234, 234, 234);
+  padding: 50px 0px;
+  height: 160px;
+  width: 49.5%;
+  float: right
+}
+.avatar-uploader-icon {
+  border: 1px solid #d9d9d9;
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px!important;
+  height: 100px!important;
+  line-height: 100px!important;
+  text-align: center;
+}
+.material-img {
+  width: 100%;
+}
+.thumb-div{
+  display: inline-block;
+  text-align: center;
+}
+.item-infos{
+  width: 30%;
+  margin: auto
+}
 </style>

yudao-ui-admin/src/views/mp/menu/index.vue

@@ -73,68 +73,68 @@ SOFTWARE.
       <!--右边配置-->
       <div v-if="showRightFlag" class="right">
           <div class="configure_page">
-              <div class="delete_btn">
-                  <el-button size="mini"  type="danger" icon="el-icon-delete" @click="deleteMenu(tempObj)">删除当前菜单</el-button>
+            <div class="delete_btn">
+                <el-button size="mini"  type="danger" icon="el-icon-delete" @click="deleteMenu(tempObj)">删除当前菜单</el-button>
+            </div>
+            <div>
+                <span>菜单名称：</span>
+                <el-input class="input_width" v-model="tempObj.name" placeholder="请输入菜单名称" :maxlength="nameMaxLength" clearable />
+            </div>
+            <div v-if="showConfigureContent">
+              <div class="menu_content">
+                <span>菜单标识：</span>
+                <el-input class="input_width" v-model="tempObj.menuKey" placeholder="请输入菜单 KEY" clearable />
               </div>
-              <div>
-                  <span>菜单名称：</span>
-                  <el-input class="input_width" v-model="tempObj.name" placeholder="请输入菜单名称" :maxlength="nameMaxLength" clearable />
+              <div class="menu_content">
+                <span>菜单内容：</span>
+                <el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option">
+                    <el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value" />
+                </el-select>
               </div>
-              <div v-if="showConfigureContent">
-                <div class="menu_content">
-                  <span>菜单标识：</span>
-                  <el-input class="input_width" v-model="tempObj.menuKey" placeholder="请输入菜单 KEY" clearable />
+              <div class="configur_content" v-if="tempObj.type === 'view'">
+                <span>跳转链接：</span>
+                <el-input class="input_width" v-model="tempObj.url" placeholder="请输入链接" clearable />
+              </div>
+              <div class="configur_content" v-if="tempObj.type === 'miniprogram'">
+                <div class="applet">
+                  <span>小程序的 appid ：</span>
+                  <el-input class="input_width" v-model="tempObj.miniProgramAppId" placeholder="请输入小程序的appid" clearable />
                 </div>
-                <div class="menu_content">
-                  <span>菜单内容：</span>
-                  <el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option">
-                      <el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value" />
-                  </el-select>
+                <div class="applet">
+                  <span>小程序的页面路径：</span>
+                  <el-input class="input_width" v-model="tempObj.miniProgramPagePath"
+                            placeholder="请输入小程序的页面路径，如：pages/index" clearable />
                 </div>
-                <div class="configur_content" v-if="tempObj.type === 'view'">
-                  <span>跳转链接：</span>
-                  <el-input class="input_width" v-model="tempObj.url" placeholder="请输入链接" clearable />
+                <div class="applet">
+                  <span>小程序的备用网页：</span>
+                  <el-input class="input_width" v-model="tempObj.url" placeholder="不支持小程序的老版本客户端将打开本网页" clearable />
                 </div>
-                <div class="configur_content" v-if="tempObj.type === 'miniprogram'">
-                  <div class="applet">
-                    <span>小程序的 appid ：</span>
-                    <el-input class="input_width" v-model="tempObj.miniProgramAppId" placeholder="请输入小程序的appid" clearable />
-                  </div>
-                  <div class="applet">
-                    <span>小程序的页面路径：</span>
-                    <el-input class="input_width" v-model="tempObj.miniProgramPagePath"
-                              placeholder="请输入小程序的页面路径，如：pages/index" clearable />
-                  </div>
-                  <div class="applet">
-                    <span>小程序的备用网页：</span>
-                    <el-input class="input_width" v-model="tempObj.url" placeholder="不支持小程序的老版本客户端将打开本网页" clearable />
+                <p class="blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
+              </div>
+              <div class="configur_content" v-if="tempObj.type === 'article_view_limited'">
+                <el-row>
+                  <div class="select-item" v-if="tempObj && tempObj.content && tempObj.content.articles">
+                    <WxNews :objData="tempObj.content.articles"></WxNews>
+                    <el-row class="ope-row">
+                        <el-button type="danger" icon="el-icon-delete" circle @click="deleteTempObj" />
+                    </el-row>
                   </div>
-                  <p class="blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
-                </div>
-                <div class="configur_content" v-if="tempObj.type === 'article_view_limited'">
+                  <div v-if="!tempObj.content || !tempObj.content.articles">
                     <el-row>
-                        <div class="select-item" v-if="tempObj && tempObj.content && tempObj.content.articles">
-                            <WxNews :objData="tempObj.content.articles"></WxNews>
-                            <el-row class="ope-row">
-                                <el-button type="danger" icon="el-icon-delete" circle @click="deleteTempObj"></el-button>
-                            </el-row>
-                        </div>
-                        <div v-if="!tempObj.content || !tempObj.content.articles">
-                            <el-row>
-                                <el-col :span="24" style="text-align: center">
-                                    <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
-                                </el-col>
-                            </el-row>
-                        </div>
-                        <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%">
-                            <WxMaterialSelect :objData="{repType:'news'}" @selectMaterial="selectMaterial"></WxMaterialSelect>
-                        </el-dialog>
+                      <el-col :span="24" style="text-align: center">
+                        <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
+                      </el-col>
                     </el-row>
-                </div>
-                <div class="configur_content" v-if="tempObj.type === 'click' || tempObj.type === 'scancode_waitmsg'">
-                    <wx-reply-select :objData="tempObj.reply" v-if="hackResetWxReplySelect" />
-                </div>
-            </div>
+                  </div>
+                  <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%">
+                    <WxMaterialSelect :objData="{repType:'news'}" @selectMaterial="selectMaterial"></WxMaterialSelect>
+                  </el-dialog>
+                </el-row>
+              </div>
+              <div class="configur_content" v-if="tempObj.type === 'click' || tempObj.type === 'scancode_waitmsg'">
+                <wx-reply-select :objData="tempObj.reply" v-if="hackResetWxReplySelect" />
+              </div>
+          </div>
         </div>
       </div>
       <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
@@ -183,12 +183,10 @@ export default {
       nameMaxLength: 0, // 菜单名称最大长度；1 级是 4 字符；2 级是 7 字符；
       showConfigureContent: true, // 是否展示配置内容；如果有子菜单，就不显示配置内容
       hackResetWxReplySelect: false, // 重置 WxReplySelect 组件
-
       tempObj: {}, // 右边临时变量，作为中间值牵引关系
       tempSelfObj: { // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数
       },
-      visible2: false, //素材内容  "选择素材"按钮弹框显示隐藏
-      tableData:[], //素材内容弹框数据,
+      dialogNewsVisible: false, // 跳转图文时的素材选择弹窗
       menuOptions: [{
         value: 'view',
         label: '跳转网页'
@@ -220,7 +218,6 @@ export default {
           value: 'location_select',
           label: '选择地理位置'
       }],
-      dialogNewsVisible: false,
 
       // 公众号账号列表
       accounts: [],
@@ -357,13 +354,13 @@ export default {
       if (!item.children || item.children.length <= 0) {
         this.$set( item, 'children',[])
         this.$delete( item, 'type')
+        this.$delete( item, 'menuKey')
         this.$delete( item, 'miniProgramAppId')
         this.$delete( item, 'miniProgramPagePath')
         this.$delete( item, 'url')
         this.$delete( item, 'reply')
         // TODO 芋艿：需要搞的属性弄下
 
-        this.$delete( item, 'key')
         this.$delete( item, 'article_id')
         this.$delete( item, 'textContent')
         this.showConfigureContent = false
@@ -470,31 +467,29 @@ export default {
       }
       return result;
     },
-
-    // TODO 芋艿：未归类
-
-    deleteTempObj(){
+    // ======================== 菜单编辑（素材选择） ========================
+    openMaterial() {
+      this.dialogNewsVisible = true
+    },
+    selectMaterial(item){
+      if(item.content.articles.length>1){
+        this.$alert('您选择的是多图文，将默认跳转第一篇', '提示', {
+          confirmButtonText: '确定'
+        })
+      }
+      this.dialogNewsVisible = false
+      this.tempObj.article_id = item.articleId
+      this.tempObj.mediaName = item.name
+      this.tempObj.url = item.url
+      item.mediaType = this.tempObj.mediaType
+      item.content.articles = item.content.articles.slice(0,1)
+      this.tempObj.content = item.content
+    },
+    deleteTempObj() {
         this.$delete(this.tempObj,'repName')
         this.$delete(this.tempObj,'repUrl')
         this.$delete(this.tempObj,'content')
     },
-    openMaterial(){
-        this.dialogNewsVisible = true
-    },
-    selectMaterial(item){
-        if(item.content.articles.length>1){
-            this.$alert('您选择的是多图文，将默认跳转第一篇', '提示', {
-                confirmButtonText: '确定'
-            })
-        }
-        this.dialogNewsVisible = false
-        this.tempObj.article_id = item.articleId
-        this.tempObj.mediaName = item.name
-        this.tempObj.url = item.url
-        item.mediaType = this.tempObj.mediaType
-        item.content.articles = item.content.articles.slice(0,1)
-        this.tempObj.content = item.content
-    },
   },
 }
 </script>