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

e035eb26 · dhb52 · c33e4de5 · e035eb26 · e035eb26
Commit e035eb26 authored Apr 10, 2023 by dhb52
Show whitespace changes
Inline Side-by-side

Showing with 79 additions and 141 deletions

src/views/mp/draft/index.vue
+14 -58

src/views/mp/material/index.vue
+65 -83

No files found.
--- a/src/views/mp/draft/index.vue
+++ b/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 = () => {

--- a/src/views/mp/material/index.vue
+++ b/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>
@@ -31,7 +10,7 @@
      <!-- tab 1：图片  -->
      <el-tab-pane name="image">
        <template #label>
-          <span><Icon icon="ep:picture" />图片</span>
+          <span> <Icon icon="ep:picture" />图片 </span>
        </template>
        <div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
          <el-upload
@@ -82,7 +61,7 @@
      <!-- tab 2：语音  -->
      <el-tab-pane name="voice">
        <template #label>
-          <span><Icon icon="ep:microphone" />语音</span>
+          <span> <Icon icon="ep:microphone" />语音 </span>
        </template>
        <div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
          <el-upload
@@ -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">
@@ -145,7 +130,7 @@
      <!-- tab 3：视频 -->
      <el-tab-pane name="video">
        <template #label>
-          <span><Icon icon="ep:video-play" /> 视频</span>
+          <span> <Icon icon="ep:video-play" /> 视频 </span>
        </template>
        <div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
          <el-button type="primary" plain @click="handleAddVideo">新建视频</el-button>
@@ -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>