fix: resolve todo
This commit is contained in:
dylanmay
@@ -1,90 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useAccess } from '@vben/access';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Button, Spin } from 'ant-design-vue';
|
||||
|
||||
// TODO @dylan：vue 组件名小写 + 中划线
|
||||
|
||||
const props = defineProps<{
|
||||
list: any[];
|
||||
loading: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
delete: [v: number];
|
||||
}>();
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Spin :spinning="props.loading">
|
||||
<div class="waterfall">
|
||||
<div v-for="item in props.list" :key="item.id" class="waterfall-item">
|
||||
<a :href="item.url" target="_blank">
|
||||
<!-- TODO @dylan：要不用 Image 组件？ -->
|
||||
<img :src="item.url" class="material-img" />
|
||||
<div class="item-name">{{ item.name }}</div>
|
||||
</a>
|
||||
<div class="flex justify-center">
|
||||
<Button
|
||||
v-if="hasAccessByCodes(['mp:material:delete'])"
|
||||
danger
|
||||
shape="circle"
|
||||
type="primary"
|
||||
@click="emit('delete', item.id)"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:trash-2" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
|
||||
@media (width >= 992px) and (width <= 1300px) {
|
||||
.waterfall {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) and (width <= 991px) {
|
||||
.waterfall {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 767px) {
|
||||
.waterfall {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.waterfall {
|
||||
column-gap: 10px;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
column-count: 5;
|
||||
}
|
||||
|
||||
.waterfall-item {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eaeaea;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.material-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,144 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { watch } from 'vue';
|
||||
|
||||
import { useAccess } from '@vben/access';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { formatDate2, openWindow } from '@vben/utils';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { WxVideoPlayer } from '#/views/mp/components';
|
||||
|
||||
// TODO @dylan：vue 组件名小写 + 中划线
|
||||
|
||||
const props = defineProps<{
|
||||
list: any[];
|
||||
loading: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
delete: [v: number];
|
||||
}>();
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
|
||||
// TODO @dylan：这里有个告警哈；
|
||||
// TODO @dylan：放到 data.ts 里；
|
||||
const columns: VxeTableGridOptions<any>['columns'] = [
|
||||
{
|
||||
field: 'mediaId',
|
||||
title: '编号',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '文件名',
|
||||
align: 'center',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'title',
|
||||
title: '标题',
|
||||
align: 'center',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'introduction',
|
||||
title: '介绍',
|
||||
align: 'center',
|
||||
minWidth: 220,
|
||||
},
|
||||
// TODO @dylan：视频的样式，有点奇怪。
|
||||
{
|
||||
field: 'video',
|
||||
title: '视频',
|
||||
align: 'center',
|
||||
width: 220,
|
||||
slots: { default: 'video' },
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '上传时间',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
slots: { default: 'createTime' },
|
||||
},
|
||||
{
|
||||
field: 'actions',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 180,
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
border: true,
|
||||
columns,
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
showOverflow: 'tooltip',
|
||||
} as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.list,
|
||||
(list: any[]) => {
|
||||
const data = Array.isArray(list) ? list : [];
|
||||
if (gridApi.grid?.loadData) {
|
||||
gridApi.grid.loadData(data);
|
||||
} else {
|
||||
gridApi.setGridOptions({ data });
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.loading,
|
||||
(loading: boolean) => {
|
||||
gridApi.setLoading(loading);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid class="mt-4">
|
||||
<template #video="{ row }">
|
||||
<WxVideoPlayer v-if="row.url" :url="row.url" />
|
||||
</template>
|
||||
<!-- TODO @dylan：应该 data.ts 里 formatDate 就好了。别的模块有的哈。 -->
|
||||
<template #createTime="{ row }">
|
||||
{{ formatDate2(row.createTime) }}
|
||||
</template>
|
||||
<!-- TODO @dylan：用 tableaction 哈：yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/index.vue -->
|
||||
<template #actions="{ row }">
|
||||
<Button type="link" @click="openWindow(row.url)">
|
||||
<IconifyIcon icon="lucide:download" />
|
||||
下载
|
||||
</Button>
|
||||
<Button
|
||||
v-if="hasAccessByCodes(['mp:material:delete'])"
|
||||
danger
|
||||
type="link"
|
||||
@click="emit('delete', row.id)"
|
||||
>
|
||||
<IconifyIcon icon="lucide:trash-2" />
|
||||
删除
|
||||
</Button>
|
||||
</template>
|
||||
</Grid>
|
||||
</template>
|
||||
@@ -1,133 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { watch } from 'vue';
|
||||
|
||||
import { useAccess } from '@vben/access';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { formatDate2, openWindow } from '@vben/utils';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { WxVoicePlayer } from '#/views/mp/components';
|
||||
|
||||
// TODO @dylan：vue 组件名小写 + 中划线
|
||||
|
||||
// TODO @dylan：组件内，尽量用 modules 哈。只有对外共享，才用 components
|
||||
|
||||
const props = defineProps<{
|
||||
list: any[];
|
||||
loading: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
delete: [v: number];
|
||||
}>();
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
|
||||
// TODO @dylan：这里有个告警哈；
|
||||
// TODO @dylan：放到 data.ts 里；
|
||||
const columns: VxeTableGridOptions<any>['columns'] = [
|
||||
{
|
||||
field: 'mediaId',
|
||||
title: '编号',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '文件名',
|
||||
align: 'center',
|
||||
minWidth: 200,
|
||||
},
|
||||
// TODO @dylan：语音的样式，有点奇怪。
|
||||
{
|
||||
field: 'voice',
|
||||
title: '语音',
|
||||
align: 'center',
|
||||
width: 220,
|
||||
slots: { default: 'voice' },
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '上传时间',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
slots: { default: 'createTime' },
|
||||
},
|
||||
{
|
||||
field: 'actions',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 160,
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
border: true,
|
||||
columns,
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
showOverflow: 'tooltip',
|
||||
} as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.list,
|
||||
(list: any[]) => {
|
||||
const data = Array.isArray(list) ? list : [];
|
||||
if (gridApi.grid?.loadData) {
|
||||
gridApi.grid.loadData(data);
|
||||
} else {
|
||||
gridApi.setGridOptions({ data });
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.loading,
|
||||
(loading: boolean) => {
|
||||
gridApi.setLoading(loading);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid class="mt-4">
|
||||
<template #voice="{ row }">
|
||||
<WxVoicePlayer v-if="row.url" :url="row.url" />
|
||||
</template>
|
||||
<!-- TODO @dylan：应该 data.ts 里 formatDate 就好了。别的模块有的哈。 -->
|
||||
<template #createTime="{ row }">
|
||||
{{ formatDate2(row.createTime) }}
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<Button type="link" @click="openWindow(row.url)">
|
||||
<IconifyIcon icon="lucide:download" />
|
||||
下载
|
||||
</Button>
|
||||
<Button
|
||||
v-if="hasAccessByCodes(['mp:material:delete'])"
|
||||
danger
|
||||
type="link"
|
||||
@click="emit('delete', row.id)"
|
||||
>
|
||||
<IconifyIcon icon="lucide:trash-2" />
|
||||
删除
|
||||
</Button>
|
||||
</template>
|
||||
</Grid>
|
||||
</template>
|
||||
133
apps/web-antd/src/views/mp/material/components/data.ts
Normal file
133
apps/web-antd/src/views/mp/material/components/data.ts
Normal file
@@ -0,0 +1,133 @@
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MpMaterialApi } from '#/api/mp/material';
|
||||
|
||||
/** 视频表格列配置 */
|
||||
export function useVideoGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'mediaId',
|
||||
title: '编号',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '文件名',
|
||||
align: 'center',
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
field: 'title',
|
||||
title: '标题',
|
||||
align: 'center',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'introduction',
|
||||
title: '介绍',
|
||||
align: 'center',
|
||||
minWidth: 220,
|
||||
},
|
||||
{
|
||||
field: 'video',
|
||||
title: '视频',
|
||||
align: 'center',
|
||||
width: 220,
|
||||
slots: { default: 'video' },
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '上传时间',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'actions',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 180,
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 语音表格列配置 */
|
||||
export function useVoiceGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'mediaId',
|
||||
title: '编号',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '文件名',
|
||||
align: 'center',
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
field: 'voice',
|
||||
title: '语音',
|
||||
align: 'center',
|
||||
width: 220,
|
||||
slots: { default: 'voice' },
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '上传时间',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'actions',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 160,
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 图片表格列配置 */
|
||||
export function useImageGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'mediaId',
|
||||
title: '编号',
|
||||
align: 'center',
|
||||
width: 400,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '文件名',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
field: 'url',
|
||||
title: '图片',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
slots: { default: 'image' },
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '上传时间',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'actions',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
100
apps/web-antd/src/views/mp/material/components/image-table.vue
Normal file
100
apps/web-antd/src/views/mp/material/components/image-table.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<script lang="ts" setup>
|
||||
import type { MpMaterialApi } from '#/api/mp/material';
|
||||
|
||||
import { nextTick, onMounted, watch } from 'vue';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
|
||||
import { useImageGridColumns } from './data';
|
||||
|
||||
const props = defineProps<{
|
||||
list: MpMaterialApi.Material[];
|
||||
loading: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
delete: [v: number];
|
||||
}>();
|
||||
|
||||
const columns = useImageGridColumns();
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid<MpMaterialApi.Material>({
|
||||
gridOptions: {
|
||||
border: true,
|
||||
columns,
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
height: 220,
|
||||
},
|
||||
showOverflow: 'tooltip',
|
||||
},
|
||||
});
|
||||
|
||||
function updateGridData(data: MpMaterialApi.Material[]) {
|
||||
if (gridApi.grid?.loadData) {
|
||||
gridApi.grid.loadData(data);
|
||||
} else {
|
||||
gridApi.setGridOptions({ data });
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.list,
|
||||
async (list: MpMaterialApi.Material[]) => {
|
||||
const data = Array.isArray(list) ? list : [];
|
||||
await nextTick();
|
||||
updateGridData(data);
|
||||
},
|
||||
{ flush: 'post' },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.loading,
|
||||
(loading: boolean) => {
|
||||
gridApi.setLoading(loading);
|
||||
},
|
||||
);
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
updateGridData(Array.isArray(props.list) ? props.list : []);
|
||||
gridApi.setLoading(props.loading);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid class="image-table-grid mt-4 pb-0">
|
||||
<template #image="{ row }">
|
||||
<div class="flex items-center justify-center" style="height: 192px">
|
||||
<img
|
||||
:src="row.url"
|
||||
class="object-contain"
|
||||
style="display: block; max-width: 100%; max-height: 192px"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '删除',
|
||||
type: 'link',
|
||||
danger: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['mp:material:delete'],
|
||||
popConfirm: {
|
||||
title: '确定要删除该图片吗？',
|
||||
confirm: () => emit('delete', row.id!),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</template>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MpMaterialApi } from '#/api/mp/material';
|
||||
|
||||
import { watch } from 'vue';
|
||||
|
||||
import { openWindow } from '@vben/utils';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { WxVideoPlayer } from '#/views/mp/components';
|
||||
|
||||
import { useVideoGridColumns } from './data';
|
||||
|
||||
const props = defineProps<{
|
||||
list: MpMaterialApi.Material[];
|
||||
loading: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
delete: [v: number];
|
||||
}>();
|
||||
|
||||
const columns = useVideoGridColumns();
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
border: true,
|
||||
columns,
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
showOverflow: 'tooltip',
|
||||
} as VxeTableGridOptions<MpMaterialApi.Material>,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.list,
|
||||
(list: MpMaterialApi.Material[]) => {
|
||||
const data = Array.isArray(list) ? list : [];
|
||||
if (gridApi.grid?.loadData) {
|
||||
gridApi.grid.loadData(data);
|
||||
} else {
|
||||
gridApi.setGridOptions({ data });
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.loading,
|
||||
(loading: boolean) => {
|
||||
gridApi.setLoading(loading);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid class="mt-4">
|
||||
<template #video="{ row }">
|
||||
<WxVideoPlayer v-if="row.url" :url="row.url" />
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '下载',
|
||||
type: 'link',
|
||||
icon: ACTION_ICON.DOWNLOAD,
|
||||
onClick: () => openWindow(row.url),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
type: 'link',
|
||||
danger: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['mp:material:delete'],
|
||||
popConfirm: {
|
||||
title: '确定要删除该视频吗？',
|
||||
confirm: () => emit('delete', row.id!),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</template>
|
||||
@@ -0,0 +1,93 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MpMaterialApi } from '#/api/mp/material';
|
||||
|
||||
import { watch } from 'vue';
|
||||
|
||||
import { openWindow } from '@vben/utils';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { WxVoicePlayer } from '#/views/mp/components';
|
||||
|
||||
import { useVoiceGridColumns } from './data';
|
||||
// TODO @dylan：组件内，尽量用 modules 哈。只有对外共享，才用 components
|
||||
|
||||
const props = defineProps<{
|
||||
list: MpMaterialApi.Material[];
|
||||
loading: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
delete: [v: number];
|
||||
}>();
|
||||
|
||||
const columns = useVoiceGridColumns();
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
border: true,
|
||||
columns,
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
showOverflow: 'tooltip',
|
||||
} as VxeTableGridOptions<MpMaterialApi.Material>,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.list,
|
||||
(list: MpMaterialApi.Material[]) => {
|
||||
const data = Array.isArray(list) ? list : [];
|
||||
if (gridApi.grid?.loadData) {
|
||||
gridApi.grid.loadData(data);
|
||||
} else {
|
||||
gridApi.setGridOptions({ data });
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.loading,
|
||||
(loading: boolean) => {
|
||||
gridApi.setLoading(loading);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid class="mt-4">
|
||||
<template #voice="{ row }">
|
||||
<WxVoicePlayer v-if="row.url" :url="row.url" />
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '下载',
|
||||
type: 'link',
|
||||
icon: ACTION_ICON.DOWNLOAD,
|
||||
onClick: () => openWindow(row.url),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
type: 'link',
|
||||
danger: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['mp:material:delete'],
|
||||
popConfirm: {
|
||||
title: '确定要删除该语音吗？',
|
||||
confirm: () => emit('delete', row.id!),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</template>
|
||||
@@ -2,29 +2,20 @@
|
||||
import { provide, reactive, ref } from 'vue';
|
||||
|
||||
import { useAccess } from '@vben/access';
|
||||
import { DocAlert, Page } from '@vben/common-ui';
|
||||
import { confirm, DocAlert, Page } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
// TODO @dlyan、可以先 antd 迁移完，在搞 ele；避免搞两遍；
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Form,
|
||||
message,
|
||||
Modal,
|
||||
Pagination,
|
||||
Tabs,
|
||||
} from 'ant-design-vue';
|
||||
import { Button, Card, Form, message, Pagination, Tabs } from 'ant-design-vue';
|
||||
|
||||
import { deletePermanentMaterial, getMaterialPage } from '#/api/mp/material';
|
||||
import { WxAccountSelect } from '#/views/mp/components';
|
||||
|
||||
import ImageTable from './components/ImageTable.vue';
|
||||
import ImageTable from './components/image-table.vue';
|
||||
import { UploadType } from './components/upload';
|
||||
import UploadFile from './components/UploadFile.vue';
|
||||
import UploadVideo from './components/UploadVideo.vue';
|
||||
import VideoTable from './components/VideoTable.vue';
|
||||
import VoiceTable from './components/VoiceTable.vue';
|
||||
import VideoTable from './components/video-table.vue';
|
||||
import VoiceTable from './components/voice-table.vue';
|
||||
|
||||
defineOptions({ name: 'MpMaterial' });
|
||||
|
||||
@@ -86,16 +77,18 @@ function onTabChange() {
|
||||
|
||||
/** 处理删除操作 */
|
||||
async function handleDelete(id: number) {
|
||||
// TODO @dylan：参考别的模块的 dylan 哈；
|
||||
Modal.confirm({
|
||||
content: '此操作将永久删除该文件, 是否继续?',
|
||||
title: '提示',
|
||||
async onOk() {
|
||||
await deletePermanentMaterial(id);
|
||||
message.success('删除成功');
|
||||
await getList();
|
||||
},
|
||||
await confirm('此操作将永久删除该文件, 是否继续?');
|
||||
const hideLoading = message.loading({
|
||||
content: '正在删除...',
|
||||
duration: 0,
|
||||
});
|
||||
try {
|
||||
await deletePermanentMaterial(id);
|
||||
message.success('删除成功');
|
||||
await getList();
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -114,11 +107,9 @@ async function handleDelete(id: number) {
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
<Card :bordered="false" class="mt-4 h-[88%]">
|
||||
<Card :bordered="false" class="mt-4 h-auto">
|
||||
<Tabs v-model:active-key="type" @change="onTabChange">
|
||||
<!-- tab 1：图片 -->
|
||||
<!-- TODO @dylan：要不这里，也改成 grid 视图；然后操作按钮，都改成右上角； -->
|
||||
<!-- TODO @dylan：图片展示时，就编号、文件名、图片、上传时间、操作； -->
|
||||
<Tabs.TabPane :key="UploadType.Image">
|
||||
<template #tab>
|
||||
<span class="flex items-center">
|
||||
|
||||
Reference in New Issue
Block a user