Skip to content

Commit f7fe794

Browse files
YunaiVYunaiV
committed
REVIEW 公众号的草稿箱
1 parent d0f8b5e commit f7fe794

File tree

2 files changed

+70
-83
lines changed

2 files changed

+70
-83
lines changed

‎src/views/mp/components/wx-material-select/main.vue

Lines changed: 24 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,14 @@
1313
<img class="material-img" :src="item.url" />
1414
<p class="item-name">{{ item.name }}</p>
1515
<el-row class="ope-row">
16-
<el-button type="success" @click="selectMaterialFun(item)"
17-
>选择 <Icon icon="ep:circle-check" />
16+
<el-button type="success" @click="selectMaterialFun(item)">
17+
选择 <Icon icon="ep:circle-check" />
1818
</el-button>
1919
</el-row>
2020
</div>
2121
</div>
2222
<!-- 分页组件 -->
23-
<pagination
24-
v-show="total > 0"
23+
<Pagination
2524
:total="total"
2625
v-model:page="queryParams.pageNo"
2726
v-model:limit="queryParams.pageSize"
@@ -39,27 +38,23 @@
3938
<WxVoicePlayer :url="scope.row.url" />
4039
</template>
4140
</el-table-column>
42-
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
43-
<template #default="scope">
44-
<span>{{ formatDate(scope.row.createTime) }}</span>
45-
</template>
46-
</el-table-column>
4741
<el-table-column
48-
label="操作"
42+
label="上传时间"
4943
align="center"
50-
fixed="right"
51-
class-name="small-padding fixed-width"
52-
>
44+
prop="createTime"
45+
width="180"
46+
:formatter="dateFormatter"
47+
/>
48+
<el-table-column label="操作" align="center" fixed="right">
5349
<template #default="scope">
54-
<el-button type="text" @click="selectMaterialFun(scope.row)"
55-
>选择<Icon icon="ep:plus" />
50+
<el-button type="text" @click="selectMaterialFun(scope.row)">
51+
选择<Icon icon="ep:plus" />
5652
</el-button>
5753
</template>
5854
</el-table-column>
5955
</el-table>
6056
<!-- 分页组件 -->
61-
<pagination
62-
v-show="total > 0"
57+
<Pagination
6358
:total="total"
6459
v-model:page="queryParams.pageNo"
6560
v-model:limit="queryParams.pageSize"
@@ -79,27 +74,28 @@
7974
<WxVideoPlayer :url="scope.row.url" />
8075
</template>
8176
</el-table-column>
82-
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
83-
<template #default="scope">
84-
<span>{{ formatDate(scope.row.createTime) }}</span>
85-
</template>
86-
</el-table-column>
77+
<el-table-column
78+
label="上传时间"
79+
align="center"
80+
prop="createTime"
81+
width="180"
82+
:formatter="dateFormatter"
83+
/>
8784
<el-table-column
8885
label="操作"
8986
align="center"
9087
fixed="right"
9188
class-name="small-padding fixed-width"
9289
>
9390
<template #default="scope">
94-
<el-button type="text" @click="selectMaterialFun(scope.row)"
95-
>选择<Icon icon="akar-icons:circle-plus" />
91+
<el-button type="text" @click="selectMaterialFun(scope.row)">
92+
选择<Icon icon="akar-icons:circle-plus" />
9693
</el-button>
9794
</template>
9895
</el-table-column>
9996
</el-table>
10097
<!-- 分页组件 -->
101-
<pagination
102-
v-show="total > 0"
98+
<Pagination
10399
:total="total"
104100
v-model:page="queryParams.pageNo"
105101
v-model:limit="queryParams.pageSize"
@@ -121,8 +117,7 @@
121117
</div>
122118
</div>
123119
<!-- 分页组件 -->
124-
<pagination
125-
v-show="total > 0"
120+
<Pagination
126121
:total="total"
127122
v-model:page="queryParams.pageNo"
128123
v-model:limit="queryParams.pageSize"
@@ -139,7 +134,7 @@ import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
139134
import { getMaterialPage } from '@/api/mp/material'
140135
import { getFreePublishPage } from '@/api/mp/freePublish'
141136
import { getDraftPage } from '@/api/mp/draft'
142-
import { dateFormatter, formatDate } from '@/utils/formatTime'
137+
import { dateFormatter } from '@/utils/formatTime'
143138
import { defineComponent, PropType } from 'vue'
144139
145140
export default defineComponent({
@@ -244,7 +239,6 @@ export default defineComponent({
244239
getMaterialPageFun,
245240
getPage,
246241
formatDate,
247-
newsTypeRef,
248242
queryParams,
249243
objDataRef,
250244
list,
@@ -254,7 +248,6 @@ export default defineComponent({
254248
}
255249
})
256250
</script>
257-
258251
<style lang="scss" scoped>
259252
/*瀑布流样式*/
260253
.waterfall {

‎src/views/mp/draft/index.vue

Lines changed: 46 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,37 @@
11
<template>
2-
<div class="app-container">
3-
<doc-alert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
4-
5-
<!-- 搜索工作栏 -->
6-
<el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="68px">
2+
<doc-alert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
3+
4+
<!-- 搜索工作栏 -->
5+
<ContentWrap>
6+
<el-form
7+
class="-mb-15px"
8+
:model="queryParams"
9+
ref="queryFormRef"
10+
:inline="true"
11+
label-width="68px"
12+
>
713
<el-form-item label="公众号" prop="accountId">
814
<el-select v-model="queryParams.accountId" placeholder="请选择公众号">
915
<el-option
1016
v-for="item in accountList"
11-
:key="parseInt(item.id)"
17+
:key="item.id"
1218
:label="item.name"
13-
:value="parseInt(item.id)"
19+
:value="item.id"
1420
/>
1521
</el-select>
1622
</el-form-item>
1723
<el-form-item>
18-
<el-button type="primary" @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
24+
<el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
1925
<el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
26+
<el-button type="primary" plain @click="handleAdd" v-hasPermi="['mp:draft:create']">
27+
<Icon icon="ep:plus" />新增
28+
</el-button>
2029
</el-form-item>
2130
</el-form>
31+
</ContentWrap>
2232

23-
<!-- 操作工具栏 -->
24-
<el-row :gutter="10" class="mb8">
25-
<el-col :span="1.5">
26-
<el-button
27-
type="primary"
28-
plain
29-
size="small"
30-
@click="handleAdd"
31-
v-hasPermi="['mp:draft:create']"
32-
><Icon icon="ep:plus" />新增
33-
</el-button>
34-
</el-col>
35-
</el-row>
36-
37-
<!-- 列表 -->
33+
<!-- 列表 -->
34+
<ContentWrap>
3835
<div class="waterfall" v-loading="loading">
3936
<template v-for="item in list" :key="item.articleId">
4037
<div class="waterfall-item" v-if="item.content && item.content.newsItem">
@@ -46,35 +43,40 @@
4643
circle
4744
@click="handlePublish(item)"
4845
v-hasPermi="['mp:free-publish:submit']"
49-
><Icon icon="fa:upload"
50-
/></el-button>
46+
>
47+
<Icon icon="fa:upload" />
48+
</el-button>
5149
<el-button
5250
type="primary"
5351
circle
5452
@click="handleUpdate(item)"
5553
v-hasPermi="['mp:draft:update']"
56-
><Icon icon="ep:edit"
57-
/></el-button>
54+
>
55+
<Icon icon="ep:edit" />
56+
</el-button>
5857
<el-button
5958
type="danger"
6059
circle
6160
@click="handleDelete(item)"
6261
v-hasPermi="['mp:draft:delete']"
63-
><Icon icon="ep:delete"
64-
/></el-button>
62+
>
63+
<Icon icon="ep:delete" />
64+
</el-button>
6565
</el-row>
6666
</div>
6767
</template>
6868
</div>
6969
<!-- 分页记录 -->
70-
<pagination
71-
v-show="total > 0"
70+
<Pagination
7271
:total="total"
7372
v-model:page="queryParams.pageNo"
7473
v-model:limit="queryParams.pageSize"
7574
@pagination="getList"
7675
/>
76+
</ContentWrap>
7777

78+
<!-- TODO @Dhb52：迁移成独立路由 -->
79+
<div class="app-container">
7880
<!-- 添加或修改草稿对话框 -->
7981
<Teleport to="body">
8082
<el-dialog
@@ -254,40 +256,32 @@
254256
</Teleport>
255257
</div>
256258
</template>
257-
258259
<script setup name="MpDraft">
259-
import { ref, onMounted, reactive, nextTick } from 'vue'
260260
import WxEditor from '@/views/mp/components/wx-editor/WxEditor.vue'
261261
import WxNews from '@/views/mp/components/wx-news/main.vue'
262262
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
263263
import { getAccessToken } from '@/utils/auth'
264264
import { createDraft, deleteDraft, getDraftPage, updateDraft } from '@/api/mp/draft'
265265
import { getSimpleAccountList } from '@/api/mp/account'
266266
import { submitFreePublish } from '@/api/mp/freePublish'
267+
const message = useMessage() // 消息
267268
// 可以用改本地数据模拟，避免API调用超限
268269
// import drafts from './mock'
269270
270-
const BASE_URL = import.meta.env.VITE_BASE_URL
271-
272-
const message = useMessage()
273-
274-
const materialSelectRef = ref()
275-
const queryFormRef = ref()
276-
277-
// 遮罩层
278-
const loading = ref(false)
279-
// 显示搜索条件
280-
// 总条数
281-
const total = ref(0)
282-
// 数据列表
283-
const list = ref([])
271+
const loading = ref(true) // 列表的加载中
272+
const total = ref(0) // 列表的总页数
273+
const list = ref([]) // 列表的数据
284274
const queryParams = reactive({
285275
pageNo: 1,
286276
pageSize: 10,
287277
accountId: undefined
288278
})
279+
const queryFormRef = ref() // 搜索的表单
280+
const accountList = ref([]) // 公众号账号列表
289281
290282
// ========== 文件上传 ==========
283+
const materialSelectRef = ref()
284+
const BASE_URL = import.meta.env.VITE_BASE_URL
291285
const actionUrl = ref(BASE_URL + '/admin-api/mp/material/upload-permanent') // 上传永久素材的地址
292286
const headers = ref({ Authorization: 'Bearer ' + getAccessToken() }) // 设置上传的请求头部
293287
const fileList = ref([])
@@ -305,9 +299,8 @@ const dialogImageVisible = ref(false)
305299
const operateMaterial = ref('add')
306300
const articlesMediaId = ref('')
307301
const hackResetEditor = ref(false)
308-
// 公众号账号列表
309-
const accountList = ref([])
310302
303+
/** 初始化 **/
311304
onMounted(async () => {
312305
accountList.value = await getSimpleAccountList()
313306
// 选中第一个
@@ -393,6 +386,7 @@ const handleUpdate = (item) => {
393386
394387
/** 提交按钮 */
395388
const submitForm = () => {
389+
// TODO @Dhb52: 参考别的模块写法，改成 await 方式
396390
addMaterialLoading.value = true
397391
if (operateMaterial.value === 'add') {
398392
createDraft(queryParams.accountId, articlesAdd.value)
@@ -560,23 +554,23 @@ const handlePublish = async (item) => {
560554
try {
561555
await message.confirm(content)
562556
await submitFreePublish(accountId, mediaId)
563-
getList()
564557
message.notifySuccess('发布成功')
558+
await getList()
565559
} catch {}
566560
}
567561
562+
/** 删除按钮操作 */
568563
const handleDelete = async (item) => {
569564
const accountId = queryParams.accountId
570565
const mediaId = item.mediaId
571566
try {
572567
await message.confirm('此操作将永久删除该草稿, 是否继续?')
573568
await deleteDraft(accountId, mediaId)
574-
getList()
575569
message.notifySuccess('删除成功')
570+
await getList()
576571
} catch {}
577572
}
578573
</script>
579-
580574
<style lang="scss" scoped>
581575
.pagination {
582576
float: right;

0 commit comments

Comments
 (0)