fix: todo修复
This commit is contained in:
hw
@@ -1,9 +1,12 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MpAccountApi } from '#/api/mp/account';
|
||||
|
||||
import { markRaw } from 'vue';
|
||||
import { getSimpleAccountList } from '#/api/mp/account';
|
||||
|
||||
import { WxAccountSelect } from '#/views/mp/modules/wx-account-select';
|
||||
/** 关联数据 */
|
||||
let accountList: MpAccountApi.AccountSimple[] = [];
|
||||
getSimpleAccountList().then((data) => (accountList = data));
|
||||
|
||||
/** 获取表格列配置 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
@@ -18,7 +21,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
field: 'updateTime',
|
||||
title: '更新时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
formatter: 'formatDateTime', // TODO @YunaiV 接口返回数据不对，需要乘1000
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@@ -30,13 +33,21 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
}
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
// TODO @hw：这里的公众号选择，要改参考 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/tag/data.ts；相关联的代码还简单点~
|
||||
// DONE @hw：这里的公众号选择，要改参考 /apps/web-antd/src/views/mp/tag/data.ts；相关联的代码还简单点~
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'accountId',
|
||||
label: '公众号',
|
||||
component: markRaw(WxAccountSelect),
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
options: accountList.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
})),
|
||||
placeholder: '请选择公众号',
|
||||
},
|
||||
defaultValue: accountList[0]?.id,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Article } from './components/types';
|
||||
import type { Article } from './modules/types';
|
||||
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { nextTick, onMounted, provide, ref, watch } from 'vue';
|
||||
|
||||
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
@@ -12,13 +10,16 @@ import { message } from 'ant-design-vue';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import * as MpDraftApi from '#/api/mp/draft';
|
||||
import * as MpFreePublishApi from '#/api/mp/freePublish';
|
||||
import { createEmptyNewsItem } from '#/views/mp/draft/components/types';
|
||||
// DONE @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
|
||||
import { submitFreePublish } from '#/api/mp/freePublish';
|
||||
import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
|
||||
|
||||
import DraftTableCell from './components/draft-table.vue';
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
import DraftTableCell from './modules/draft-table.vue';
|
||||
import Form from './modules/form.vue';
|
||||
|
||||
// DONE @hw：参考 tag/index.vue 放到 formValues.accountId;
|
||||
// DONE @hw：看看这个 watch、provide 能不能简化掉；
|
||||
defineOptions({ name: 'MpDraft' });
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
@@ -26,120 +27,16 @@ const [FormModal, formModalApi] = useVbenModal({
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
// TODO @hw：下面的方法，放到这个前面，和别的保持一致；
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
submitOnChange: true,
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
// 更新 accountId
|
||||
if (formValues?.accountId) {
|
||||
accountId.value = formValues.accountId;
|
||||
}
|
||||
const drafts = await MpDraftApi.getDraftPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
// 处理 API 返回的数据，兼容不同的数据结构
|
||||
// TODO @wx：看 yudao-ui-admin-vue3/src/views/mp/draft/index.vue 项目里，转换没这么复杂。。。是不是这里有办法简化下？
|
||||
const formattedList: Article[] = drafts.list.map((draft: any) => {
|
||||
// 如果已经是 content.newsItem 格式，直接使用
|
||||
if (draft.content?.newsItem) {
|
||||
const newsItem = draft.content.newsItem.map((item: any) => ({
|
||||
...item,
|
||||
picUrl: item.thumbUrl || item.picUrl,
|
||||
}));
|
||||
return {
|
||||
mediaId: draft.mediaId,
|
||||
content: {
|
||||
newsItem,
|
||||
},
|
||||
updateTime:
|
||||
draft.updateTime ||
|
||||
(draft.createTime
|
||||
? new Date(draft.createTime).getTime()
|
||||
: Date.now()),
|
||||
};
|
||||
}
|
||||
// 如果是 articles 格式，转换为 content.newsItem 格式
|
||||
if (draft.articles) {
|
||||
const newsItem = draft.articles.map((article: any) => ({
|
||||
...article,
|
||||
thumbUrl: article.thumbUrl || article.thumbMediaId,
|
||||
picUrl: article.thumbUrl || article.thumbMediaId,
|
||||
}));
|
||||
return {
|
||||
mediaId: draft.mediaId,
|
||||
content: {
|
||||
newsItem,
|
||||
},
|
||||
updateTime:
|
||||
draft.updateTime ||
|
||||
(draft.createTime
|
||||
? new Date(draft.createTime).getTime()
|
||||
: Date.now()),
|
||||
};
|
||||
}
|
||||
// 默认返回空结构
|
||||
return {
|
||||
mediaId: draft.mediaId || '',
|
||||
content: {
|
||||
newsItem: [],
|
||||
},
|
||||
updateTime: draft.updateTime || Date.now(),
|
||||
};
|
||||
});
|
||||
return {
|
||||
page: {
|
||||
total: drafts.total,
|
||||
},
|
||||
result: formattedList,
|
||||
};
|
||||
},
|
||||
},
|
||||
autoLoad: false,
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'mediaId',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<Article>,
|
||||
});
|
||||
|
||||
// 提供 accountId 给子组件
|
||||
// TODO @hw：参考 tag/index.vue 放到 formValues.accountId;
|
||||
const accountId = ref<number>(-1);
|
||||
|
||||
// 监听表单提交，更新 accountId
|
||||
// TODO @hw：看看这个 watch、provide 能不能简化掉；
|
||||
watch(
|
||||
() => gridApi.formApi?.getLatestSubmissionValues?.()?.accountId,
|
||||
(newAccountId) => {
|
||||
if (newAccountId !== undefined) {
|
||||
accountId.value = newAccountId;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
provide('accountId', accountId);
|
||||
/** 刷新表格 */
|
||||
function handleRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
async function handleCreate() {
|
||||
const formValues = await gridApi.formApi.getValues();
|
||||
const accountId = formValues.accountId;
|
||||
if (!accountId || accountId === -1) {
|
||||
if (!accountId) {
|
||||
message.warning('请先选择公众号');
|
||||
return;
|
||||
}
|
||||
@@ -156,7 +53,7 @@ async function handleCreate() {
|
||||
async function handleEdit(row: Article) {
|
||||
const formValues = await gridApi.formApi.getValues();
|
||||
const accountId = formValues.accountId;
|
||||
if (!accountId || accountId === -1) {
|
||||
if (!accountId) {
|
||||
message.warning('请先选择公众号');
|
||||
return;
|
||||
}
|
||||
@@ -165,7 +62,7 @@ async function handleEdit(row: Article) {
|
||||
isCreating: false,
|
||||
accountId,
|
||||
mediaId: row.mediaId,
|
||||
newsList: structuredClone(row.content.newsItem),
|
||||
newsList: row.content.newsItem,
|
||||
})
|
||||
.open();
|
||||
}
|
||||
@@ -174,8 +71,8 @@ async function handleEdit(row: Article) {
|
||||
async function handlePublish(row: Article) {
|
||||
const formValues = await gridApi.formApi.getValues();
|
||||
const accountId = formValues.accountId;
|
||||
// TODO @hw：看看能不能去掉 -1 的判断哈？
|
||||
if (!accountId || accountId === -1) {
|
||||
// DONE @hw：看看能不能去掉 -1 的判断哈？
|
||||
if (!accountId) {
|
||||
message.warning('请先选择公众号');
|
||||
return;
|
||||
}
|
||||
@@ -188,11 +85,10 @@ async function handlePublish(row: Article) {
|
||||
content: '发布中...',
|
||||
duration: 0,
|
||||
});
|
||||
// TODO @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
|
||||
try {
|
||||
await MpFreePublishApi.submitFreePublish(accountId, row.mediaId);
|
||||
await submitFreePublish(accountId, row.mediaId);
|
||||
message.success('发布成功');
|
||||
await gridApi.query();
|
||||
handleRefresh();
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
@@ -202,7 +98,7 @@ async function handlePublish(row: Article) {
|
||||
async function handleDelete(row: Article) {
|
||||
const formValues = await gridApi.formApi.getValues();
|
||||
const accountId = formValues.accountId;
|
||||
if (!accountId || accountId === -1) {
|
||||
if (!accountId) {
|
||||
message.warning('请先选择公众号');
|
||||
return;
|
||||
}
|
||||
@@ -214,39 +110,67 @@ async function handleDelete(row: Article) {
|
||||
try {
|
||||
await MpDraftApi.deleteDraft(accountId, row.mediaId);
|
||||
message.success('删除成功');
|
||||
await gridApi.query();
|
||||
handleRefresh();
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
// TODO @hw：看看能不能参考 tag/index.vue 简化下
|
||||
// 页面挂载后，等待表单初始化完成再加载数据
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
if (gridApi.formApi) {
|
||||
const formValues = await gridApi.formApi.getValues();
|
||||
if (formValues.accountId) {
|
||||
accountId.value = formValues.accountId;
|
||||
gridApi.formApi.setLatestSubmissionValues(formValues);
|
||||
await gridApi.query();
|
||||
}
|
||||
}
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
submitOnChange: true,
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
const drafts = await MpDraftApi.getDraftPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
// 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
|
||||
drafts.list.forEach((draft: any) => {
|
||||
const newsList = draft.content?.newsItem;
|
||||
if (newsList) {
|
||||
newsList.forEach((item: any) => {
|
||||
item.picUrl = item.thumbUrl || item.picUrl;
|
||||
});
|
||||
}
|
||||
});
|
||||
return {
|
||||
list: drafts.list as unknown as Article[],
|
||||
total: drafts.total,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'mediaId',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<Article>,
|
||||
});
|
||||
|
||||
// DONE @hw：看看能不能参考 tag/index.vue 简化下
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
|
||||
<template #doc>
|
||||
<DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
|
||||
</template>
|
||||
|
||||
<!-- TODO @hw：参考别的模块 @success 调用 refresh 方法； -->
|
||||
<FormModal
|
||||
@success="
|
||||
() => {
|
||||
gridApi.query();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<!-- DONE @hw：参考别的模块 @success 调用 refresh 方法； -->
|
||||
<FormModal @success="handleRefresh" />
|
||||
|
||||
<Grid table-title="草稿列表">
|
||||
<template #toolbar-tools>
|
||||
|
||||
@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
|
||||
import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
|
||||
|
||||
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
||||
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
|
||||
import { MaterialSelect } from '#/views/mp/modules';
|
||||
|
||||
const props = defineProps<{
|
||||
isFirst: boolean;
|
||||
@@ -33,8 +33,9 @@ const newsItem = computed<NewsItem>({
|
||||
},
|
||||
});
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const accountId = inject<number>('accountId');
|
||||
const showImageDialog = ref(false);
|
||||
|
||||
const fileList = ref<UploadFile[]>([]);
|
||||
interface UploadData {
|
||||
@@ -46,26 +47,31 @@ const uploadData: UploadData = reactive({
|
||||
accountId: accountId!,
|
||||
});
|
||||
|
||||
/** 素材选择完成事件*/
|
||||
function handleOpenDialog() {
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
/** 素材选择完成事件 */
|
||||
function onMaterialSelected(item: any) {
|
||||
showImageDialog.value = false;
|
||||
dialogVisible.value = false;
|
||||
newsItem.value.thumbMediaId = item.mediaId;
|
||||
newsItem.value.thumbUrl = item.url;
|
||||
}
|
||||
// TODO @hw：注释都补充下哈；
|
||||
// DONE @hw：注释都补充下哈；
|
||||
/** 上传前校验 */
|
||||
const onBeforeUpload = (file: UploadFile) =>
|
||||
useBeforeUpload(UploadType.Image, 2)(file as any);
|
||||
|
||||
// TODO @hw：注释都补充下哈；
|
||||
// DONE @hw：注释都补充下哈；
|
||||
/** 上传错误处理 */
|
||||
function onUploadChange(info: any) {
|
||||
if (info.file.status === 'done') {
|
||||
onUploadSuccess(info.file.response || info.file);
|
||||
} else if (info.file.status === 'error') {
|
||||
if (info.file.status === 'error') {
|
||||
onUploadError(info.file.error || new Error('上传失败'));
|
||||
}
|
||||
}
|
||||
|
||||
// TODO @hw：注释都补充下哈；
|
||||
// DONE @hw：注释都补充下哈；
|
||||
/** 上传成功处理 */
|
||||
function onUploadSuccess(res: any) {
|
||||
if (res.code !== 0) {
|
||||
message.error(`上传出错：${res.msg}`);
|
||||
@@ -79,7 +85,8 @@ function onUploadSuccess(res: any) {
|
||||
newsItem.value.thumbUrl = res.data.url;
|
||||
}
|
||||
|
||||
// TODO @hw：注释都补充下哈；
|
||||
// DONE @hw：注释都补充下哈；
|
||||
/** 上传失败处理 */
|
||||
function onUploadError(err: Error) {
|
||||
message.error(`上传失败: ${err.message}`);
|
||||
}
|
||||
@@ -88,21 +95,22 @@ function onUploadError(err: Error) {
|
||||
<template>
|
||||
<div>
|
||||
<p>封面:</p>
|
||||
<!-- TODO @hw：我貌似上传不成功。不确定是不是我这边的问题；；；可以微信沟通下哈。 -->
|
||||
<div class="thumb-div">
|
||||
<!-- DONE @hw：我貌似上传不成功。不确定是不是我这边的问题；；；可以微信沟通下哈。 -->
|
||||
<!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
|
||||
<div class="flex w-full flex-col items-center justify-center text-center">
|
||||
<Image
|
||||
v-if="newsItem.thumbUrl"
|
||||
style="width: 300px; max-height: 300px"
|
||||
class="max-h-[300px] w-[300px]"
|
||||
:src="newsItem.thumbUrl"
|
||||
:preview="false"
|
||||
/>
|
||||
<IconifyIcon
|
||||
v-else
|
||||
icon="lucide:plus"
|
||||
class="avatar-uploader-icon"
|
||||
:class="isFirst ? 'avatar' : 'avatar1'"
|
||||
class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
|
||||
:class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
|
||||
/>
|
||||
<div class="thumb-but">
|
||||
<div class="m-[5px]">
|
||||
<div class="flex items-center justify-center">
|
||||
<Upload
|
||||
:action="UPLOAD_URL"
|
||||
@@ -110,35 +118,35 @@ function onUploadError(err: Error) {
|
||||
:file-list="fileList"
|
||||
:data="{ ...uploadData }"
|
||||
:before-upload="onBeforeUpload"
|
||||
@success="onUploadSuccess"
|
||||
@change="onUploadChange"
|
||||
>
|
||||
<template #default>
|
||||
<Button size="small" type="primary">本地上传</Button>
|
||||
</template>
|
||||
</Upload>
|
||||
<!-- TODO @hw：tindwind -->
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="showImageDialog = true"
|
||||
style="margin-left: 5px"
|
||||
class="ml-[5px]"
|
||||
@click="handleOpenDialog"
|
||||
>
|
||||
素材库选择
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="upload-tip">
|
||||
<div class="ml-[5px] mt-[5px] text-xs text-[#999]">
|
||||
支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 -->
|
||||
<!-- DONE @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 -->
|
||||
<Modal
|
||||
title="选择图片"
|
||||
v-model:open="showImageDialog"
|
||||
width="80%"
|
||||
destroy-on-close
|
||||
v-model:open="dialogVisible"
|
||||
title="图片选择"
|
||||
width="65%"
|
||||
:footer="null"
|
||||
>
|
||||
<WxMaterialSelect
|
||||
<MaterialSelect
|
||||
type="image"
|
||||
:account-id="accountId!"
|
||||
@select-material="onMaterialSelected"
|
||||
@@ -147,47 +155,3 @@ function onUploadError(err: Error) {
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
|
||||
.upload-tip {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.thumb-div {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.avatar-uploader-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
font-size: 28px;
|
||||
line-height: 120px;
|
||||
color: #8c939d;
|
||||
text-align: center;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 230px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.avatar1 {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.thumb-but {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Article } from './types';
|
||||
|
||||
import { WxNews } from '#/views/mp/modules/wx-news';
|
||||
import { News } from '#/views/mp/modules';
|
||||
|
||||
defineOptions({ name: 'DraftTableCell' });
|
||||
|
||||
@@ -13,7 +13,7 @@ const props = defineProps<{
|
||||
<template>
|
||||
<div class="p-2.5">
|
||||
<div v-if="props.row.content && props.row.content.newsItem">
|
||||
<WxNews :articles="props.row.content.newsItem" />
|
||||
<News :articles="props.row.content.newsItem" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,35 +1,38 @@
|
||||
<script lang="ts" setup>
|
||||
import type { NewsItem } from '../components/types';
|
||||
import type { NewsItem } from './types';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
import { computed, provide, ref } from 'vue';
|
||||
|
||||
import { confirm, useVbenModal } from '@vben/common-ui';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { message, Spin } from 'ant-design-vue';
|
||||
|
||||
import { createDraft, updateDraft } from '#/api/mp/draft';
|
||||
|
||||
import NewsForm from '../components/news-form.vue';
|
||||
import NewsForm from './news-form.vue';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
// DONE @hw：是不是通过 id 字段判断是否为新增？类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue
|
||||
const formData = ref<{
|
||||
accountId: number;
|
||||
// TODO @hw：是不是通过 id 字段判断是否为新增？类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue
|
||||
isCreating: boolean;
|
||||
mediaId?: string;
|
||||
newsList?: NewsItem[];
|
||||
}>();
|
||||
const newsList = ref<NewsItem[]>([]);
|
||||
// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
|
||||
// DONE @hw：不需要 isSave，通过 modal 去 lock 就好啦。
|
||||
const isSubmitting = ref(false);
|
||||
// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
|
||||
const isSaved = ref(false);
|
||||
|
||||
const getTitle = computed(() => {
|
||||
return formData.value?.isCreating ? '新建图文' : '修改图文';
|
||||
return formData.value?.mediaId ? '修改图文' : '新建图文';
|
||||
});
|
||||
|
||||
// 提供 accountId 给子组件
|
||||
provide(
|
||||
'accountId',
|
||||
computed(() => formData.value?.accountId),
|
||||
);
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
if (!formData.value) {
|
||||
@@ -39,18 +42,17 @@ const [Modal, modalApi] = useVbenModal({
|
||||
isSubmitting.value = true;
|
||||
modalApi.lock();
|
||||
try {
|
||||
if (formData.value.isCreating) {
|
||||
await createDraft(formData.value.accountId, newsList.value);
|
||||
message.success('新增成功');
|
||||
} else if (formData.value.mediaId) {
|
||||
if (formData.value.mediaId) {
|
||||
await updateDraft(
|
||||
formData.value.accountId,
|
||||
formData.value.mediaId,
|
||||
newsList.value,
|
||||
);
|
||||
message.success('更新成功');
|
||||
} else {
|
||||
await createDraft(formData.value.accountId, newsList.value);
|
||||
message.success('新增成功');
|
||||
}
|
||||
isSaved.value = true;
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
} finally {
|
||||
@@ -58,26 +60,12 @@ const [Modal, modalApi] = useVbenModal({
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
async onBeforeClose() {
|
||||
// 如果已经成功保存，直接关闭，不显示提示
|
||||
if (isSaved.value) {
|
||||
return true;
|
||||
}
|
||||
try {
|
||||
await confirm('修改内容可能还未保存，确定关闭吗?');
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
newsList.value = [];
|
||||
isSaved.value = false;
|
||||
return;
|
||||
}
|
||||
isSaved.value = false;
|
||||
const data = modalApi.getData<{
|
||||
accountId: number;
|
||||
isCreating: boolean;
|
||||
@@ -87,7 +75,11 @@ const [Modal, modalApi] = useVbenModal({
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
formData.value = data;
|
||||
formData.value = {
|
||||
accountId: data.accountId,
|
||||
mediaId: data.mediaId,
|
||||
newsList: data.newsList,
|
||||
};
|
||||
newsList.value = data.newsList || [];
|
||||
},
|
||||
});
|
||||
@@ -99,7 +91,7 @@ const [Modal, modalApi] = useVbenModal({
|
||||
<NewsForm
|
||||
v-if="formData"
|
||||
v-model="newsList"
|
||||
:is-creating="formData.isCreating"
|
||||
:is-creating="!formData.mediaId"
|
||||
/>
|
||||
</Spin>
|
||||
</Modal>
|
||||
|
||||
@@ -44,8 +44,8 @@ const activeNewsItem = computed(() => {
|
||||
return item;
|
||||
});
|
||||
|
||||
// TODO @hw：注释使用 /** */
|
||||
// 将图文向下移动
|
||||
// DONE @hw：注释使用 /** */
|
||||
/** 将图文向下移动 */
|
||||
function moveDownNews(index: number) {
|
||||
const current = newsList.value[index];
|
||||
const next = newsList.value[index + 1];
|
||||
@@ -56,7 +56,7 @@ function moveDownNews(index: number) {
|
||||
}
|
||||
}
|
||||
|
||||
// 将图文向上移动
|
||||
/** 将图文向上移动 */
|
||||
function moveUpNews(index: number) {
|
||||
const current = newsList.value[index];
|
||||
const prev = newsList.value[index - 1];
|
||||
@@ -67,7 +67,7 @@ function moveUpNews(index: number) {
|
||||
}
|
||||
}
|
||||
|
||||
// 删除指定 index 的图文
|
||||
/** 删除指定 index 的图文 */
|
||||
async function removeNews(index: number) {
|
||||
await confirm('确定删除该图文吗?');
|
||||
newsList.value.splice(index, 1);
|
||||
@@ -76,7 +76,7 @@ async function removeNews(index: number) {
|
||||
}
|
||||
}
|
||||
|
||||
// 添加一个图文
|
||||
/** 添加一个图文 */
|
||||
function plusNews() {
|
||||
newsList.value.push(createEmptyNewsItem());
|
||||
activeNewsIndex.value = newsList.value.length - 1;
|
||||
@@ -86,19 +86,29 @@ function plusNews() {
|
||||
<template>
|
||||
<Layout>
|
||||
<Layout.Sider width="40%" theme="light">
|
||||
<div class="select-item">
|
||||
<!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
|
||||
<div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
|
||||
<div v-for="(news, index) in newsList" :key="index">
|
||||
<div
|
||||
class="news-main father"
|
||||
class="group relative mx-auto h-[120px] w-full cursor-pointer bg-white"
|
||||
v-if="index === 0"
|
||||
:class="{ activeAddNews: activeNewsIndex === index }"
|
||||
:class="{
|
||||
'border-[5px] border-[#2bb673]': activeNewsIndex === index,
|
||||
}"
|
||||
@click="activeNewsIndex = index"
|
||||
>
|
||||
<div class="news-content">
|
||||
<img class="material-img" :src="news.thumbUrl" />
|
||||
<div class="news-content-title">{{ news.title }}</div>
|
||||
<div class="relative h-[120px] w-full bg-[#acadae]">
|
||||
<img class="h-full w-full" :src="news.thumbUrl" />
|
||||
<div
|
||||
class="absolute bottom-0 left-0 inline-block h-[25px] w-[98%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-[15px] text-white opacity-65"
|
||||
>
|
||||
{{ news.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="child" v-if="newsList.length > 1">
|
||||
<div
|
||||
class="relative -bottom-[25px] hidden text-center group-hover:block"
|
||||
v-if="newsList.length > 1"
|
||||
>
|
||||
<Button
|
||||
type="default"
|
||||
shape="circle"
|
||||
@@ -120,18 +130,22 @@ function plusNews() {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="news-main-item father"
|
||||
class="group relative mx-auto w-full cursor-pointer border-t border-[#eaeaea] bg-white py-[5px]"
|
||||
v-if="index > 0"
|
||||
:class="{ activeAddNews: activeNewsIndex === index }"
|
||||
:class="{
|
||||
'border-[5px] border-[#2bb673]': activeNewsIndex === index,
|
||||
}"
|
||||
@click="activeNewsIndex = index"
|
||||
>
|
||||
<div class="news-content-item">
|
||||
<div class="news-content-item-title">{{ news.title }}</div>
|
||||
<div class="news-content-item-img">
|
||||
<img class="material-img" :src="news.thumbUrl" width="100%" />
|
||||
<div class="relative -ml-[3px]">
|
||||
<div class="inline-block w-[70%] text-xs">{{ news.title }}</div>
|
||||
<div class="inline-block w-[25%] bg-[#acadae]">
|
||||
<img class="h-full w-full" :src="news.thumbUrl" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="child">
|
||||
<div
|
||||
class="relative -bottom-[25px] hidden text-center group-hover:block"
|
||||
>
|
||||
<Button
|
||||
v-if="newsList.length > index + 1"
|
||||
shape="circle"
|
||||
@@ -163,7 +177,10 @@ function plusNews() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Row justify="center" class="ope-row">
|
||||
<Row
|
||||
justify="center"
|
||||
class="mt-[5px] border-t border-[#eaeaea] pt-[5px] text-center"
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
shape="circle"
|
||||
@@ -175,7 +192,7 @@ function plusNews() {
|
||||
</Row>
|
||||
</div>
|
||||
</Layout.Sider>
|
||||
<Layout.Content :style="{ backgroundColor: '#fff' }">
|
||||
<Layout.Content class="bg-white">
|
||||
<div v-if="newsList.length > 0 && activeNewsItem">
|
||||
<!-- 标题、作者、原文地址 -->
|
||||
<Row :gutter="20">
|
||||
@@ -185,13 +202,13 @@ function plusNews() {
|
||||
placeholder="请输入标题（必填）"
|
||||
/>
|
||||
</Col>
|
||||
<Col :span="24" style="margin-top: 5px">
|
||||
<Col :span="24" class="mt-[5px]">
|
||||
<Input
|
||||
v-model:value="activeNewsItem.author"
|
||||
placeholder="请输入作者"
|
||||
/>
|
||||
</Col>
|
||||
<Col :span="24" style="margin-top: 5px">
|
||||
<Col :span="24" class="mt-[5px]">
|
||||
<Input
|
||||
v-model:value="activeNewsItem.contentSourceUrl"
|
||||
placeholder="请输入原文地址"
|
||||
@@ -212,7 +229,7 @@ function plusNews() {
|
||||
:rows="8"
|
||||
v-model:value="activeNewsItem.digest"
|
||||
placeholder="请输入摘要"
|
||||
class="digest"
|
||||
class="inline-block w-full align-top"
|
||||
:maxlength="120"
|
||||
:show-count="true"
|
||||
/>
|
||||
@@ -230,14 +247,6 @@ function plusNews() {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
|
||||
.ope-row {
|
||||
padding-top: 5px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
:deep(.ant-row) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -245,94 +254,4 @@ function plusNews() {
|
||||
:deep(.ant-row:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.digest {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* 新增图文 */
|
||||
.news-main {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background-color: #acadae;
|
||||
}
|
||||
|
||||
.news-content-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 98%;
|
||||
height: 25px;
|
||||
padding: 1%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
background-color: black;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.news-main-item {
|
||||
width: 100%;
|
||||
padding: 5px 0;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.news-content-item {
|
||||
position: relative;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.news-content-item-title {
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.news-content-item-img {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
background-color: #acadae;
|
||||
}
|
||||
|
||||
.select-item {
|
||||
width: 60%;
|
||||
padding: 10px;
|
||||
margin: 0 auto 10px;
|
||||
border: 1px solid #eaeaea;
|
||||
|
||||
.activeAddNews {
|
||||
border: 5px solid #2bb673;
|
||||
}
|
||||
}
|
||||
|
||||
.father .child {
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.father:hover .child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.material-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,4 @@
|
||||
// TODO @hw：要不把 components 里的部分，拿到 modules 里。
|
||||
// DONE @hw：要不把 components 里的部分，拿到 modules 里。
|
||||
interface NewsItem {
|
||||
title: string;
|
||||
thumbMediaId: string;
|
||||
Reference in New Issue
Block a user