gxwebsoft
dd094f8769
- 使用压缩后的图片 URL 显示广告图片，提升加载性能 - 添加图片预览功能，支持点击查看原图 - 调整图片展示宽度参数，保证视觉效果 - 引入图片压缩工具方法 getCompressedImageUrl 以统一处理图片请求
439 lines
12 KiB
Vue
439 lines
12 KiB
Vue
<template>
|
|
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
|
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
|
<ele-pro-table
|
|
ref="tableRef"
|
|
row-key="adId"
|
|
:columns="columns"
|
|
:datasource="datasource"
|
|
:customRow="customRow"
|
|
tool-class="ele-toolbar-form"
|
|
class="sys-org-table"
|
|
>
|
|
<template #toolbar>
|
|
<search
|
|
@search="reload"
|
|
:selection="selection"
|
|
:navigationList="navigationList"
|
|
:exportLoading="exportLoading"
|
|
@backup="handleExport"
|
|
@restore="openImport"
|
|
@add="openEdit"
|
|
@remove="removeBatch"
|
|
@batchMove="openMove"
|
|
/>
|
|
</template>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'type'">
|
|
<a-tag v-if="record.type == 1" color="pink">轮播</a-tag>
|
|
<a-tag v-if="record.type == 2" color="blue">图片</a-tag>
|
|
<a-tag v-if="record.type == 3" color="cyan">视频</a-tag>
|
|
<a-tag v-if="record.type == 4">文本</a-tag>
|
|
</template>
|
|
<template v-if="column.key === 'name'">
|
|
<div>{{ record.name }}</div>
|
|
<div class="text-gray-400">{{ record.code }}</div>
|
|
</template>
|
|
<template v-if="column.key === 'categoryId'">
|
|
<span class="text-gray-400">{{ record.categoryName }}</span>
|
|
</template>
|
|
<template v-if="column.key === 'comments'">
|
|
<span class="text-gray-400">{{ record.comments }}</span>
|
|
</template>
|
|
<template v-if="column.key === 'images'">
|
|
<div :class="`item ${record.style}`">
|
|
<template
|
|
v-if="record.type != 4"
|
|
v-for="(item, index) in record.imageList"
|
|
:key="index"
|
|
>
|
|
<a-image
|
|
:src="getCompressedImageUrl(item.url, { width: 160, quality: 90 })"
|
|
:preview="{ src: item.url }"
|
|
:width="80"
|
|
/>
|
|
</template>
|
|
<template v-if="record.type == 4">
|
|
{{ record.comments }}
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<template v-if="column.key === 'status'">
|
|
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
|
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
|
</template>
|
|
<template v-if="column.key === 'action'">
|
|
<a-space>
|
|
<a @click="openEdit(record)">修改</a>
|
|
<a-divider type="vertical" />
|
|
<a-popconfirm
|
|
title="确定要删除此记录吗？"
|
|
@confirm="remove(record)"
|
|
>
|
|
<a class="ele-text-danger">删除</a>
|
|
</a-popconfirm>
|
|
</a-space>
|
|
</template>
|
|
</template>
|
|
</ele-pro-table>
|
|
</a-card>
|
|
|
|
<!-- 编辑弹窗 -->
|
|
<CmsAdEdit
|
|
v-model:visible="showEdit"
|
|
:data="current"
|
|
:navigationList="navigationList"
|
|
@done="reload"
|
|
/>
|
|
|
|
<!-- 导入备份弹窗 -->
|
|
<Import v-model:visible="showImport" @done="reload" />
|
|
</a-page-header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { createVNode, ref } from 'vue';
|
|
import { message, Modal } from 'ant-design-vue';
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import { utils, writeFile } from 'xlsx';
|
|
import type { EleProTable } from 'ele-admin-pro';
|
|
import { toTreeData } from 'ele-admin-pro';
|
|
import { useI18n } from 'vue-i18n';
|
|
import type {
|
|
DatasourceFunction,
|
|
ColumnItem
|
|
} from 'ele-admin-pro/es/ele-pro-table/types';
|
|
import Search from './components/search.vue';
|
|
import CmsAdEdit from './components/cmsAdEdit.vue';
|
|
import Import from './components/Import.vue';
|
|
import {
|
|
listCmsAd,
|
|
pageCmsAd,
|
|
removeBatchCmsAd,
|
|
removeCmsAd
|
|
} from '@/api/cms/cmsAd';
|
|
import type { CmsAd, CmsAdParam } from '@/api/cms/cmsAd/model';
|
|
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
|
import { listCmsNavigation } from '@/api/cms/cmsNavigation';
|
|
import { getPageTitle } from '@/utils/common';
|
|
import { getTenantId } from '@/utils/domain';
|
|
import { getCompressedImageUrl } from '@/utils/image';
|
|
|
|
// 表格实例
|
|
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
|
// 国际化
|
|
const { locale } = useI18n();
|
|
// 表格选中数据
|
|
const selection = ref<CmsAd[]>([]);
|
|
// 当前编辑数据
|
|
const current = ref<CmsAd | null>(null);
|
|
// 是否显示编辑弹窗
|
|
const showEdit = ref(false);
|
|
// 是否显示批量移动弹窗
|
|
const showMove = ref(false);
|
|
// 是否显示导入备份弹窗
|
|
const showImport = ref(false);
|
|
// 栏目数据
|
|
const navigationList = ref<CmsNavigation[]>();
|
|
// 加载状态
|
|
const loading = ref(true);
|
|
// 导出状态
|
|
const exportLoading = ref(false);
|
|
// 记录最新搜索条件，供备份导出使用
|
|
const lastWhere = ref<CmsAdParam>({});
|
|
|
|
// 表格数据源
|
|
const datasource: DatasourceFunction = ({
|
|
page,
|
|
limit,
|
|
where,
|
|
orders,
|
|
filters
|
|
}) => {
|
|
if (filters) {
|
|
where.status = filters.status;
|
|
}
|
|
// where.lang = locale.value || undefined;
|
|
return pageCmsAd({
|
|
...where,
|
|
...orders,
|
|
page,
|
|
limit
|
|
});
|
|
};
|
|
|
|
// 表格列配置
|
|
const columns = ref<ColumnItem[]>([
|
|
{
|
|
title: 'ID',
|
|
width: 90,
|
|
dataIndex: 'adId'
|
|
},
|
|
{
|
|
title: '名称',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
ellipsis: true,
|
|
width: 180
|
|
},
|
|
{
|
|
title: '类型',
|
|
dataIndex: 'type',
|
|
key: 'type',
|
|
align: 'center',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '广告图片',
|
|
dataIndex: 'images',
|
|
key: 'images'
|
|
},
|
|
{
|
|
title: '栏目名称',
|
|
dataIndex: 'categoryId',
|
|
key: 'categoryId',
|
|
align: 'center',
|
|
width: 180
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
key: 'status',
|
|
align: 'center',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 120,
|
|
fixed: 'right',
|
|
align: 'center',
|
|
hideInSetting: true
|
|
}
|
|
]);
|
|
|
|
/* 搜索 */
|
|
const reload = (where?: CmsAdParam) => {
|
|
if (where) {
|
|
lastWhere.value = { ...where };
|
|
}
|
|
selection.value = [];
|
|
tableRef?.value?.reload({ where: where });
|
|
};
|
|
|
|
/* 打开编辑弹窗 */
|
|
const openEdit = (row?: CmsAd) => {
|
|
current.value = row ?? null;
|
|
showEdit.value = true;
|
|
};
|
|
|
|
/* 打开批量移动弹窗 */
|
|
const openMove = () => {
|
|
showMove.value = true;
|
|
};
|
|
|
|
/* 打开导入弹窗 */
|
|
const openImport = () => {
|
|
showImport.value = true;
|
|
};
|
|
|
|
/* 备份导出 */
|
|
const handleExport = async () => {
|
|
if (exportLoading.value) {
|
|
return;
|
|
}
|
|
exportLoading.value = true;
|
|
message.loading('正在准备导出数据...', 0);
|
|
|
|
const array: (string | number)[][] = [
|
|
[
|
|
'广告ID',
|
|
'类型',
|
|
'唯一标识',
|
|
'栏目ID',
|
|
'栏目名称',
|
|
'广告位名称',
|
|
'宽',
|
|
'高',
|
|
'样式',
|
|
'图片数据',
|
|
'链接',
|
|
'排序号',
|
|
'备注',
|
|
'状态',
|
|
'语言',
|
|
'租户ID',
|
|
'商户ID'
|
|
]
|
|
];
|
|
|
|
try {
|
|
const where: CmsAdParam = {
|
|
...(lastWhere.value ?? {}),
|
|
lang: locale.value || undefined
|
|
};
|
|
const list = await listCmsAd(where);
|
|
if (!list || list.length === 0) {
|
|
message.destroy();
|
|
message.warning('没有数据可以导出');
|
|
exportLoading.value = false;
|
|
return;
|
|
}
|
|
|
|
list.forEach((d: CmsAd) => {
|
|
const images = Array.isArray(d.imageList)
|
|
? JSON.stringify(d.imageList)
|
|
: typeof d.images === 'string'
|
|
? d.images
|
|
: JSON.stringify(d.images ?? []);
|
|
array.push([
|
|
`${d.adId || ''}`,
|
|
`${d.type ?? ''}`,
|
|
`${d.code || ''}`,
|
|
`${d.categoryId ?? ''}`,
|
|
`${d.categoryName || ''}`,
|
|
`${d.name || ''}`,
|
|
`${d.width || ''}`,
|
|
`${d.height || ''}`,
|
|
`${d.style || ''}`,
|
|
`${images || ''}`,
|
|
`${d.path || ''}`,
|
|
`${d.sortNumber ?? ''}`,
|
|
`${d.comments || ''}`,
|
|
`${d.status ?? ''}`,
|
|
`${d.lang || ''}`,
|
|
`${d.tenantId ?? ''}`,
|
|
`${d.merchantId ?? ''}`
|
|
]);
|
|
});
|
|
|
|
const sheetName = `bak_cms_ad_${getTenantId()}`;
|
|
const workbook = {
|
|
SheetNames: [sheetName],
|
|
Sheets: {}
|
|
} as any;
|
|
const sheet = utils.aoa_to_sheet(array);
|
|
workbook.Sheets[sheetName] = sheet;
|
|
sheet['!cols'] = [
|
|
{ wch: 10 }, // 广告ID
|
|
{ wch: 8 }, // 类型
|
|
{ wch: 24 }, // 唯一标识
|
|
{ wch: 10 }, // 栏目ID
|
|
{ wch: 18 }, // 栏目名称
|
|
{ wch: 24 }, // 广告位名称
|
|
{ wch: 10 }, // 宽
|
|
{ wch: 10 }, // 高
|
|
{ wch: 20 }, // 样式
|
|
{ wch: 60 }, // 图片数据(JSON)
|
|
{ wch: 30 }, // 链接
|
|
{ wch: 10 }, // 排序号
|
|
{ wch: 24 }, // 备注
|
|
{ wch: 8 }, // 状态
|
|
{ wch: 10 }, // 语言
|
|
{ wch: 10 }, // 租户ID
|
|
{ wch: 10 } // 商户ID
|
|
];
|
|
|
|
message.destroy();
|
|
message.loading('正在生成Excel文件...', 0);
|
|
setTimeout(() => {
|
|
writeFile(workbook, `${sheetName}.xlsx`);
|
|
exportLoading.value = false;
|
|
message.destroy();
|
|
message.success(`成功导出 ${list.length} 条记录`);
|
|
}, 600);
|
|
} catch (e: any) {
|
|
exportLoading.value = false;
|
|
message.destroy();
|
|
message.error(e?.message || '导出失败，请重试');
|
|
}
|
|
};
|
|
|
|
/* 删除单个 */
|
|
const remove = (row: CmsAd) => {
|
|
const hide = message.loading('请求中..', 0);
|
|
removeCmsAd(row.adId)
|
|
.then((msg) => {
|
|
hide();
|
|
message.success(msg);
|
|
reload();
|
|
})
|
|
.catch((e) => {
|
|
hide();
|
|
message.error(e.message);
|
|
});
|
|
};
|
|
|
|
/* 批量删除 */
|
|
const removeBatch = () => {
|
|
if (!selection.value.length) {
|
|
message.error('请至少选择一条数据');
|
|
return;
|
|
}
|
|
Modal.confirm({
|
|
title: '提示',
|
|
content: '确定要删除选中的记录吗?',
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
maskClosable: true,
|
|
onOk: () => {
|
|
const hide = message.loading('请求中..', 0);
|
|
removeBatchCmsAd(selection.value.map((d) => d.adId))
|
|
.then((msg) => {
|
|
hide();
|
|
message.success(msg);
|
|
reload();
|
|
})
|
|
.catch((e) => {
|
|
hide();
|
|
message.error(e.message);
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
/* 查询 */
|
|
const query = () => {
|
|
loading.value = true;
|
|
// 加载栏目数据
|
|
if (!navigationList.value) {
|
|
listCmsNavigation({}).then((res) => {
|
|
navigationList.value = toTreeData({
|
|
data: res?.map((d) => {
|
|
d.value = d.navigationId;
|
|
d.label = d.title;
|
|
if (!d.component) {
|
|
d.disabled = true;
|
|
}
|
|
return d;
|
|
}),
|
|
idField: 'navigationId',
|
|
parentIdField: 'parentId'
|
|
});
|
|
});
|
|
}
|
|
};
|
|
|
|
/* 自定义行属性 */
|
|
const customRow = (record: CmsAd) => {
|
|
return {
|
|
// 行点击事件
|
|
onClick: () => {
|
|
// console.log(record);
|
|
},
|
|
// 行双击事件
|
|
onDblclick: () => {
|
|
openEdit(record);
|
|
}
|
|
};
|
|
};
|
|
query();
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'CmsAd'
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped></style>
|