refactor: 【草稿，素材】应用【公众号选择器】组件

src/views/mp/draft/index.vue

@@ -3,31 +3,13 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <el-form
+    <WxAccountSelect @change="(accountId) => accountChanged(accountId)">
-      class="-mb-15px"
+      <template #actions>
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="queryParams.accountId" placeholder="请选择公众号">
-          <el-option
-            v-for="item in accountList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
         <el-button type="primary" plain @click="handleAdd" v-hasPermi="['mp:draft:create']">
           <Icon icon="ep:plus" />新增
         </el-button>
-      </el-form-item>
+      </template>
-    </el-form>
+    </WxAccountSelect>
   </ContentWrap>
 
   <!-- 列表 -->
@@ -35,7 +17,7 @@
     <div class="waterfall" v-loading="loading">
       <template v-for="item in list" :key="item.articleId">
         <div class="waterfall-item" v-if="item.content && item.content.newsItem">
-          <wx-news :articles="item.content.newsItem" />
+          <WxNews :articles="item.content.newsItem" />
           <!-- 操作按钮 -->
           <el-row class="ope-row">
             <el-button
@@ -239,7 +221,7 @@
           </div>
           <!--富文本编辑器组件-->
           <el-row>
-            <wx-editor
+            <WxEditor
               v-model="articlesAdd[isActiveAddNews].content"
               :account-id="uploadData.accountId"
               v-if="hackResetEditor"
@@ -258,14 +240,15 @@
 import WxEditor from '@/views/mp/components/wx-editor/WxEditor.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
 import { getAccessToken } from '@/utils/auth'
-import * as MpAccountApi from '@/api/mp/account'
 import * as MpDraftApi from '@/api/mp/draft'
 import * as MpFreePublishApi from '@/api/mp/freePublish'
-const message = useMessage() // 消息
 // 可以用改本地数据模拟，避免API调用超限
 // import drafts from './mock'
 
+const message = useMessage() // 消息
+
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
@@ -274,8 +257,6 @@ const queryParams = reactive({
   pageSize: 10,
   accountId: undefined
 })
-const queryFormRef = ref() // 搜索的表单
-const accountList = ref([]) // 公众号账号列表
 
 // ========== 文件上传 ==========
 const materialSelectRef = ref()
@@ -298,16 +279,11 @@ const operateMaterial = ref('add')
 const articlesMediaId = ref('')
 const hackResetEditor = ref(false)
 
-/** 初始化 **/
+/** 侦听公众号变化 **/
-onMounted(async () => {
+const accountChanged = (accountId) => {
-  accountList.value = await MpAccountApi.getSimpleAccountList()
+  setAccountId(accountId)
-  // 选中第一个
+  getList()
-  if (accountList.value.length > 0) {
-    // @ts-ignore
-    queryParams.accountId = accountList.value[0].id
 }
-  await getList()
-})
 
 // ======================== 列表查询 ========================
 /** 设置账号编号 */
@@ -341,26 +317,6 @@ const getList = async () => {
   }
 }
 
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  // 默认选中第一个
-  if (queryParams.accountId) {
-    setAccountId(queryParams.accountId)
-  }
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    setAccountId(accountList.value[0].id)
-  }
-  handleQuery()
-}
-
 // ======================== 新增/修改草稿 ========================
 /** 新增按钮操作 */
 const handleAdd = () => {

src/views/mp/material/index.vue

@@ -2,28 +2,7 @@
   <doc-alert title="公众号素材" url="https://doc.iocoder.cn/mp/material/" />
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <el-form
+    <WxAccountSelect @change="(accountId) => accountChange(accountId)" />
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
-          <el-option
-            v-for="item in accountList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
-      </el-form-item>
-    </el-form>
   </ContentWrap>
 
   <ContentWrap>
@@ -111,9 +90,15 @@
               <WxVoicePlayer :url="scope.row.url" />
             </template>
           </el-table-column>
-          <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+          <el-table-column
+            label="上传时间"
+            align="center"
+            prop="createTime"
+            :formatter="dateFormatter"
+            width="180"
+          >
             <template #default="scope">
-              <span>{{ formatDate(scope.row.createTime) }}</span>
+              <span>{{ scope.row.createTime }}</span>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -212,16 +197,22 @@
               <WxVideoPlayer :url="scope.row.url" />
             </template>
           </el-table-column>
-          <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+          <el-table-column
+            label="上传时间"
+            align="center"
+            :formatter="dateFormatter"
+            prop="createTime"
+            width="180"
+          >
             <template #default="scope">
-              <span>{{ formatDate(scope.row.createTime) }}</span>
+              <span>{{ scope.row.createTime }}</span>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" fixed="right">
             <template #default="scope">
-              <el-button type="primary" link plain @click="handleDownload(scope.row)"
+              <el-button type="primary" link plain @click="handleDownload(scope.row)">
-                ><Icon icon="ep:download" />下载</el-button
+                <Icon icon="ep:download" />下载
-              >
+              </el-button>
               <el-button
                 type="primary"
                 link
@@ -249,16 +240,19 @@
 <script setup name="MpMaterial">
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
-import { getSimpleAccountList } from '@/api/mp/account'
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
-import { getMaterialPage, deletePermanentMaterial } from '@/api/mp/material'
+// import * as MpAccountApi from '@/api/mp/account'
-import { getAccessToken } from '@/utils/auth'
+import * as MpMaterialApi from '@/api/mp/material'
-import { formatDate } from '@/utils/formatTime'
+import * as authUtil from '@/utils/auth'
-
+import { dateFormatter } from '@/utils/formatTime'
-const BASE_URL = import.meta.env.VITE_BASE_URL
 
 const message = useMessage()
 
-const queryFormRef = ref()
+const BASE_URL = import.meta.env.VITE_BASE_URL
+const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
+const headers = { Authorization: 'Bearer ' + authUtil.getAccessToken() }
+
+// const queryFormRef = ref()
 const uploadFormRef = ref()
 const uploadVideoRef = ref()
 
@@ -277,8 +271,6 @@ const queryParams = reactive({
   permanent: true
 })
 
-const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
-const headers = { Authorization: 'Bearer ' + getAccessToken() }
 const fileList = ref([])
 const uploadData = reactive({
   type: 'image',
@@ -295,20 +287,11 @@ const uploadRules = reactive({
   introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }]
 })
 
-// 公众号账号列表
+/** 侦听公众号变化 **/
-const accountList = ref([])
+const accountChange = (accountId) => {
-
+  setAccountId(accountId)
-onMounted(() => {
-  getSimpleAccountList().then((data) => {
-    accountList.value = data
-    // 默认选中第一个
-    if (accountList.value.length > 0) {
-      setAccountId(accountList.value[0].id)
-    }
-    // 加载数据
   getList()
-  })
+}
-})
 
 // ======================== 列表查询 ========================
 /** 设置账号编号 */
@@ -318,7 +301,7 @@ const setAccountId = (accountId) => {
 }
 
 /** 查询列表 */
-const getList = () => {
+const getList = async () => {
   // 如果没有选中公众号账号，则进行提示。
   if (!queryParams.accountId) {
     message.error('未选中公众号，无法查询草稿箱')
@@ -326,17 +309,16 @@ const getList = () => {
   }
 
   loading.value = true
-  getMaterialPage({
+  try {
+    const data = await MpMaterialApi.getMaterialPage({
       ...queryParams,
       type: type.value
     })
-    .then((data) => {
     list.value = data.list
     total.value = data.total
-    })
+  } finally {
-    .finally(() => {
     loading.value = false
-    })
+  }
 }
 
 /** 搜索按钮操作 */
@@ -349,31 +331,23 @@ const handleQuery = () => {
   getList()
 }
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    setAccountId(accountList.value[0].id)
-  }
-  handleQuery()
-}
-
 const handleTabChange = (tabName) => {
   // 设置 type
   uploadData.type = tabName
+
+  // 提前情况数据，避免tab切换后显示垃圾数据
+  list.value = []
+  total.value = 0
+
   // 从第一页开始查询
   handleQuery()
 }
 
 // ======================== 文件上传 ========================
 const beforeImageUpload = (file) => {
-  const isType =
+  const isType = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg'].includes(
-    file.type === 'image/jpeg' ||
+    file.type
-    file.type === 'image/png' ||
+  )
-    file.type === 'image/gif' ||
-    file.type === 'image/bmp' ||
-    file.type === 'image/jpg'
   if (!isType) {
     message.error('上传图片格式不对!')
     return false
@@ -388,11 +362,7 @@ const beforeImageUpload = (file) => {
 }
 
 const beforeVoiceUpload = (file) => {
-  const isType =
+  const isType = ['audio/mp3', 'audio/wma', 'audio/wav', 'audio/amr'].includes(file.type)
-    file.type === 'audio/mp3' ||
-    file.type === 'audio/wma' ||
-    file.type === 'audio/wav' ||
-    file.type === 'audio/amr'
   const isLt = file.size / 1024 / 1024 < 2
   if (!isType) {
     message.error('上传语音格式不对!')
@@ -412,11 +382,13 @@ const beforeVideoUpload = (file) => {
     message.error('上传视频格式不对!')
     return false
   }
+
   const isLt = file.size / 1024 / 1024 < 10
   if (!isLt) {
     message.error('上传视频大小不能超过 10M!')
     return false
   }
+
   addMaterialLoading.value = true
   return true
 }
@@ -476,7 +448,7 @@ const resetVideo = () => {
 // ======================== 其它操作 ========================
 const handleDelete = async (item) => {
   await message.confirm('此操作将永久删除该文件, 是否继续?')
-  await deletePermanentMaterial(item.id)
+  await MpMaterialApi.deletePermanentMaterial(item.id)
   message.alertSuccess('删除成功')
 }
 </script>
@@ -487,40 +459,50 @@ const handleDelete = async (item) => {
   width: 100%;
   column-gap: 10px;
   column-count: 5;
-  margin-top: 10px; /* 芋道源码：增加 10px，避免顶着上面 */
+  margin-top: 10px;
+  /* 芋道源码：增加 10px，避免顶着上面 */
 }
+
 .waterfall-item {
   padding: 10px;
   margin-bottom: 10px;
   break-inside: avoid;
   border: 1px solid #eaeaea;
 }
+
 .material-img {
   width: 100%;
 }
+
 p {
   line-height: 30px;
 }
+
 @media (min-width: 992px) and (max-width: 1300px) {
   .waterfall {
     column-count: 3;
   }
+
   p {
     color: red;
   }
 }
+
 @media (min-width: 768px) and (max-width: 991px) {
   .waterfall {
     column-count: 2;
   }
+
   p {
     color: orange;
   }
 }
+
 @media (max-width: 767px) {
   .waterfall {
     column-count: 1;
   }
 }
+
 /*瀑布流样式*/
 </style>