124 lines
2.8 KiB
Vue
124 lines
2.8 KiB
Vue
<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';
|
|
import { $t } from '@vben/locales';
|
|
|
|
const props = defineProps<{
|
|
list: MpMaterialApi.Material[];
|
|
loading: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
delete: [v: number];
|
|
refresh: [];
|
|
}>();
|
|
|
|
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,
|
|
},
|
|
toolbarConfig: {
|
|
refresh: true,
|
|
},
|
|
showOverflow: 'tooltip',
|
|
proxyConfig: {
|
|
ajax: {
|
|
query: async () => {
|
|
// 数据由父组件管理，触发刷新事件后返回当前数据
|
|
emit('refresh');
|
|
// 返回当前数据，避免覆盖
|
|
return {
|
|
list: Array.isArray(props.list) ? props.list : [],
|
|
total: props.list?.length || 0,
|
|
};
|
|
},
|
|
},
|
|
enabled: true,
|
|
autoLoad: false,
|
|
},
|
|
},
|
|
});
|
|
|
|
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);
|
|
},
|
|
{ immediate: true, 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 #toolbar-tools>
|
|
<slot name="toolbar-tools"></slot>
|
|
</template>
|
|
<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: $t('common.delete'),
|
|
type: 'link',
|
|
danger: true,
|
|
icon: ACTION_ICON.DELETE,
|
|
auth: ['mp:material:delete'],
|
|
popConfirm: {
|
|
title: '确定要删除该图片吗？',
|
|
confirm: () => emit('delete', row.id!),
|
|
},
|
|
},
|
|
]"
|
|
/>
|
|
</template>
|
|
</Grid>
|
|
</template>
|