mp：增加【图片】素材的选择

2025-11-01 02:38:43 +08:00 · 2023-01-12 13:51:46 +08:00
parent 431569fd09
commit 188d880239
23 changed files with 188 additions and 1077 deletions
--- a/yudao-ui-admin/src/views/mp/components/wx-material-select/main.vue
+++ b/yudao-ui-admin/src/views/mp/components/wx-material-select/main.vue
@@ -5,8 +5,8 @@
 <template>
  <!-- 类型：图片 -->
  <div v-if="objData.type === 'image'">
-    <div class="waterfall" v-loading="tableLoading">
-      <div class="waterfall-item" v-for="item in tableData" :key="item.mediaId">
+    <div class="waterfall" v-loading="loading">
+      <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
        <img class="material-img" :src="item.url">
        <p class="item-name">{{item.name}}</p>
        <el-row class="ope-row">
@@ -16,16 +16,14 @@
        </el-row>
      </div>
    </div>
-    <div v-if="tableData.length <= 0 && !tableLoading" class="el-table__empty-block">
+    <!-- 分页组件 -->
+    <div v-if="list.length <= 0 && !loading" class="el-table__empty-block">
      <span class="el-table__empty-text">暂无数据</span>
    </div>
-    <span slot="footer" class="dialog-footer">
-      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="page.currentPage"
-                     :page-sizes="[10, 20]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
-                     :total="page.total" class="pagination" />
-    </span>
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getMaterialPage"/>
  </div>
-  <div v-else-if="objData.repType == 'voice'">
+  <div v-else-if="objData.type == 'voice'">
    <!-- TODO 芋艿：需要翻译 -->
 <!--    <avue-crud ref="crud"-->
 <!--               :page="page"-->
@@ -45,7 +43,7 @@
 <!--      </template>-->
 <!--    </avue-crud>-->
  </div>
-  <div v-else-if="objData.repType == 'video'">
+  <div v-else-if="objData.type == 'video'">
    <!-- TODO 芋艿：需要翻译 -->
    <!--    <avue-crud ref="crud"-->
 <!--               :page="page"-->
@@ -65,16 +63,16 @@
 <!--      </template>-->
 <!--    </avue-crud>-->
  </div>
-  <div v-else-if="objData.repType == 'news'">
-    <div class="waterfall" v-loading="tableLoading">
-      <div class="waterfall-item" v-for="item in tableData" :key="item.mediaId" v-if="item.content && item.content.articles">
+  <div v-else-if="objData.type == 'news'">
+    <div class="waterfall" v-loading="loading">
+      <div class="waterfall-item" v-for="item in list" :key="item.mediaId" v-if="item.content && item.content.articles">
        <WxNews :objData="item.content.articles"></WxNews>
        <el-row class="ope-row">
          <el-button size="mini" type="success" @click="selectMaterial(item)">选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
        </el-row>
      </div>
    </div>
-    <div v-if="tableData.length <=0 && !tableLoading" class="el-table__empty-block">
+    <div v-if="list.length <=0 && !loading" class="el-table__empty-block">
      <span class="el-table__empty-text">暂无数据</span>
    </div>
    <span slot="footer" class="dialog-footer">
@@ -93,12 +91,13 @@
 </template>

 <script>
-  import { getPage, getMaterialVideo } from '@/api/wxmp/wxmaterial'
+
  // import { tableOptionVoice } from '@/const/crud/wxmp/wxmaterial_voice'
  // import { tableOptionVideo } from '@/const/crud/wxmp/wxmaterial_video'
  import WxNews from '@/views/mp/components/wx-news/main.vue';
-  import {getPage as getPageNews} from '@/api/wxmp/wxfreepublish'
-  import {getPage as getPageNewsDraft} from '@/api/wxmp/wxdraft'
+  import { getMaterialPage } from "@/api/mp/material";
+  // import {getPage as getPageNews} from '@/api/wxmp/wxfreepublish'
+  // import {getPage as getPageNewsDraft} from '@/api/wxmp/wxdraft'

  export default {
    name: "wxMaterialSelect",
@@ -118,14 +117,16 @@
    },
    data() {
      return {
-        tableLoading: false,
-        tableData: [],
-        page: {
-          total: 0, // 总页数
-          currentPage: 1, // 当前页数
-          pageSize: 20, // 每页显示多少条
-          ascs:[],//升序字段
-          descs:[]//降序字段
+        // 遮罩层
+        loading: false,
+        // 总条数
+        total: 0,
+        // 数据列表
+        list: [],
+        // 查询参数
+        queryParams: {
+          pageNo: 1,
+          pageSize: 10,
        },
        // tableOptionVoice: tableOptionVoice,
        // tableOptionVideo: tableOptionVideo,
@@ -139,8 +140,8 @@
        this.$emit('selectMaterial', item)
      },
      getPage(page, params) {
-        this.tableLoading = true
-        if(this.objData.repType == 'news'){
+        this.loading = true
+        if(this.objData.type == 'news'){ // 【图文】
          if(this.newsType == '1'){
            getPageNews(Object.assign({
              current: page.currentPage,
@@ -152,11 +153,11 @@
                item.mediaId = item.articleId
                item.content.articles = item.content.newsItem
              })
-              this.tableData = tableData
+              this.list = tableData
              this.page.total = response.data.totalCount
              this.page.currentPage = page.currentPage
              this.page.pageSize = page.pageSize
-              this.tableLoading = false
+              this.loading = false
            })
          }else if(this.newsType == '2'){
            getPageNewsDraft(Object.assign({
@@ -169,28 +170,28 @@
                item.mediaId = item.mediaId
                item.content.articles = item.content.newsItem
              })
-              this.tableData = tableData
+              this.list = tableData
              this.page.total = response.data.totalCount
              this.page.currentPage = page.currentPage
              this.page.pageSize = page.pageSize
-              this.tableLoading = false
+              this.loading = false
            })
          }
-        }else{
-          getPage(Object.assign({
-            current: page.currentPage,
-            size: page.pageSize,
-            appId:this.appId,
-            type:this.objData.repType
-          }, 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
-          })
+        } else { // 【素材】
+          this.getMaterialPage();
        }
      },
+      getMaterialPage() {
+        getMaterialPage({
+          ...this.queryParams,
+          type: this.objData.type
+        }).then(response => {
+          this.list = response.data.list
+          this.total = response.data.total
+        }).finally(() => {
+          this.loading = false
+        })
+      },
      sizeChange(val) {
        this.page.currentPage = 1
        this.page.pageSize = val
--- a/yudao-ui-admin/src/views/mp/components/wx-msg/main.vue
+++ b/yudao-ui-admin/src/views/mp/components/wx-msg/main.vue
@@ -81,21 +81,21 @@
      </div>
    </div>
    <div class="msg-send" v-loading="sendLoading">
-      <wx-reply-select :objData="objData" />
+      <wx-reply-select ref="replySelect" :objData="objData" />
      <el-button type="success" size="small" class="send-but" @click="sendMsg">发送(S)</el-button>
    </div>
  </div>
 </template>

 <script>
-import {getMessagePage, sendMessage} from '@/api/mp/message'
+import { getMessagePage, sendMessage } from '@/api/mp/message'
  import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
  import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue';
  import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
  import WxNews from '@/views/mp/components/wx-news/main.vue';
  import WxLocation from '@/views/mp/components/wx-location/main.vue';
  import WxMusic from '@/views/mp/components/wx-music/main.vue';
-import {getUser} from "@/api/mp/user";
+import { getUser } from "@/api/mp/user";

  export default {
    name: "wxMsg",
@@ -176,6 +176,7 @@ import {getUser} from "@/api/mp/user";
          this.tableData = [...this.tableData , ...[response.data] ]
          this.scrollToBottom()
          // 重置 objData 状态
+          this.$refs['replySelect'].deleteObj(); // 重置，避免 tab 的数据未清理
          this.objData = {
            type: 'text',
            content: '',
--- a/yudao-ui-admin/src/views/mp/components/wx-reply/main.vue
+++ b/yudao-ui-admin/src/views/mp/components/wx-reply/main.vue
@@ -29,7 +29,9 @@
          <el-row style="text-align: center">
            <!-- 选择素材 -->
            <el-col :span="12" class="col-select">
-              <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
+              <el-button type="success" @click="openMaterial">
+                素材库选择<i class="el-icon-circle-check el-icon--right"></i>
+              </el-button>
            </el-col>
            <!-- 文件上传 -->
            <el-col :span="12" class="col-add">
@@ -43,7 +45,7 @@
        </div>
        <!-- 点击选择素材，会打开下面的弹窗 -->
        <el-dialog title="选择图片" :visible.sync="dialogImageVisible" width="90%" append-to-body>
-          <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial"></WxMaterialSelect>
+          <wx-material-select :obj-data="objData" @selectMaterial="selectMaterial" />
        </el-dialog>
      </el-row>
    </el-tab-pane>
@@ -155,16 +157,16 @@

 <script>
  // import { getPage, getMaterialVideo } from '@/api/wxmp/wxmaterial'
-  import WxNews from '@/views/mp/components/wx-news/main.vue'
-  // import WxMaterialSelect from '@/components/wx-material-select/main.vue'
-  import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
  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';

  export default {
    name: "wxReplySelect",
    components: {
      WxNews,
-      // WxMaterialSelect,
+      WxMaterialSelect,
      WxVoicePlayer
    },
    props: {
@@ -403,8 +405,7 @@
          // TODO 芋艿，待实现
        } else if(this.objData.type === 'image'
            || this.objData.type === 'voice') {
-          this.$delete(this.objData, 'url')
-          this.$delete(this.objData, 'mediaId')
+          this.selectMaterial({}) // 选择一个空的素材
        }  else if(this.objData.type === 'video') {
          // TODO 芋艿，待实现
        }