<template>
|
<LoadingLayout :loading="state.loading">
|
<AppContainer>
|
<ProTableQueryFilterBar @on-reset="reset">
|
<template #query>
|
<QueryFilterItem>
|
<FieldSelect
|
v-model="extraParamState.page"
|
placeholder="广告页面"
|
:value-enum="EnumAdvertisementPageText"
|
clearable
|
@change="getList()"
|
/>
|
</QueryFilterItem>
|
<QueryFilterItem tip-content="状态">
|
<FieldRadio
|
v-model="extraParamState.status"
|
:value-enum="EnumAdvertisementStatusText"
|
buttonStyle
|
showAllBtn
|
@change="getList()"
|
/>
|
</QueryFilterItem>
|
<QueryFilterItem tip-content="广告时间">
|
<FieldDatePicker
|
v-model="extraParamState.time"
|
type="daterange"
|
range-separator="~"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
clearable
|
@change="getList()"
|
></FieldDatePicker>
|
</QueryFilterItem>
|
<QueryFilterItem>
|
<SearchInput
|
v-model="extraParamState.keyword"
|
style="width: 260px"
|
placeholder="广告名称"
|
@on-click-search="getList"
|
>
|
</SearchInput>
|
</QueryFilterItem>
|
</template>
|
<template #btn>
|
<el-button
|
v-if="checkSubModuleItemShow('pageButton', 'addBtn')"
|
@click="openDialog()"
|
icon="Plus"
|
type="primary"
|
>新增</el-button
|
>
|
</template>
|
</ProTableQueryFilterBar>
|
<ProTableV2 v-bind="proTableProps" :columns="column" :operationBtns="operationBtns">
|
</ProTableV2>
|
</AppContainer>
|
<AddOrEditAdvertisementDialog v-bind="dialogProps"></AddOrEditAdvertisementDialog>
|
<LogDialog v-bind="dialogLogProps"></LogDialog>
|
</LoadingLayout>
|
</template>
|
|
<script setup lang="ts">
|
import {
|
ProTableQueryFilterBar,
|
OperationBtnType,
|
ProTableV2,
|
SearchInput,
|
LoadingLayout,
|
AppContainer,
|
QueryFilterItem,
|
useTable,
|
useFormDialog,
|
FieldDatePicker,
|
FieldSelect,
|
FieldRadio,
|
UploadUserFile,
|
} from '@bole-core/components';
|
import { useAccess } from '@/hooks';
|
import { EnumAdvertisementPageText, EnumAdvertisementStatusText } from '@/constants';
|
import { ModelValueType } from 'element-plus';
|
import { format, convertApi2FormUrlOnlyOne } from '@/utils';
|
import { Message } from '@bole-core/core';
|
import * as advertisementServices from '@/services/api/advertisement';
|
import AddOrEditAdvertisementDialog from './components/AddOrEditAdvertisementDialog.vue';
|
import LogDialog from './components/LogDialog.vue';
|
|
defineOptions({
|
name: 'OperationManageList',
|
});
|
|
const operationBtnMap: Record<string, OperationBtnType> = {
|
editBtn: { emits: { onClick: (role) => openDialog(role) } },
|
takeOnBtn: {
|
emits: { onClick: (role) => setAdvertiseOnShowStatus(role) },
|
extraProps: {
|
hide: (row: API.GetAdvertisementsQueryResultItem) =>
|
row.status === EnumAdvertisementStatus.InProcess,
|
},
|
},
|
takeDownBtn: {
|
emits: { onClick: (role) => setAdvertiseOnShowStatus(role) },
|
props: { type: 'danger' },
|
extraProps: {
|
hide: (row: API.GetAdvertisementsQueryResultItem) =>
|
row.status === EnumAdvertisementStatus.Stopped,
|
},
|
},
|
logBtn: { emits: { onClick: (role) => openLogDialog(role) } },
|
};
|
|
const { checkSubModuleItemShow, column, operationBtns } = useAccess({
|
operationBtnMap,
|
});
|
|
const BaseState = {
|
loading: true,
|
};
|
|
const state = reactive({ ...BaseState });
|
|
onMounted(async () => {
|
await getList();
|
state.loading = false;
|
});
|
|
const {
|
getDataSource: getList,
|
proTableProps,
|
paginationState,
|
extraParamState,
|
reset,
|
} = useTable(
|
async ({ pageIndex, pageSize }, extraParamState) => {
|
try {
|
let params: API.GetAdvertisementsQuery = {
|
pageModel: {
|
rows: pageSize,
|
page: pageIndex,
|
orderInput: extraParamState.orderInput,
|
},
|
keywords: extraParamState.keyword,
|
beginTime: format(extraParamState.time[0], 'YYYY-MM-DD 00:00:00'),
|
endTime: format(extraParamState.time[1], 'YYYY-MM-DD 23:59:59'),
|
page: extraParamState.page,
|
status: extraParamState.status,
|
};
|
let res = await advertisementServices.getAdvertisements(params, {
|
showLoading: !state.loading,
|
});
|
return res;
|
} catch (error) {}
|
},
|
{
|
defaultExtraParams: {
|
keyword: '',
|
page: '' as any as EnumAdvertisementPage,
|
status: '' as any as EnumAdvertisementStatus,
|
time: [] as unknown as ModelValueType,
|
endDate: [] as unknown as ModelValueType,
|
orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }],
|
},
|
columnsRenderProps: {
|
page: { type: 'enum', valueEnum: EnumAdvertisementPageText },
|
status: { type: 'enum', valueEnum: EnumAdvertisementStatusText },
|
url: {
|
type: 'link',
|
text: (row: API.GetAdvertisementsQueryResultItem) => (row.url ? '查看' : ''),
|
},
|
file: { type: 'url' },
|
beginTime: { type: 'date', format: 'YYYY-MM-DD' },
|
endTime: { type: 'date', format: 'YYYY-MM-DD' },
|
},
|
}
|
);
|
|
async function openDialog(row?: API.GetAdvertisementsQueryResultItem) {
|
if (row) {
|
const res = await getAdvertisement(row.id);
|
if (res) {
|
handleEdit({
|
id: res.id,
|
page: res.page,
|
name: res.name,
|
url: res.url,
|
file: res.file ? convertApi2FormUrlOnlyOne(res.file) : [],
|
time: [format(res.beginTime), format(res.endTime)],
|
sort: res.sort,
|
});
|
}
|
} else {
|
handleAdd();
|
}
|
}
|
|
const { dialogProps, handleAdd, handleEdit, editForm, dialogState } = useFormDialog({
|
onConfirm: handleAddOrEdit,
|
defaultFormParams: {
|
title: '新增广告',
|
id: '',
|
page: '' as any as EnumAdvertisementPage,
|
name: '',
|
url: '',
|
file: [] as UploadUserFile[],
|
time: [] as unknown as ModelValueType,
|
sort: 0,
|
},
|
editTitle: '编辑广告',
|
closeAfterConfirm: false,
|
});
|
|
async function handleAddOrEdit() {
|
try {
|
let params: API.SaveAdvertisementCommand = {
|
page: editForm.page,
|
name: editForm.name,
|
url: editForm.url,
|
file: editForm.file?.[0]?.url,
|
beginTime: format(editForm.time[0], 'YYYY-MM-DD 00:00:00'),
|
endTime: format(editForm.time[1], 'YYYY-MM-DD 23:59:59'),
|
sort: editForm.sort,
|
};
|
if (editForm.id) {
|
params.id = editForm.id;
|
}
|
let res = await advertisementServices.saveAdvertisement(params);
|
if (res) {
|
Message.successMessage('操作成功');
|
getList(paginationState.pageIndex);
|
dialogState.dialogVisible = false;
|
}
|
} catch (error) {}
|
}
|
|
const {
|
dialogProps: dialogLogProps,
|
handleAdd: handleLogAdd,
|
editForm: editLogForm,
|
} = useFormDialog({
|
defaultFormParams: {
|
id: '',
|
},
|
});
|
|
function openLogDialog(row: API.GetAdvertisementsQueryResultItem) {
|
handleLogAdd({
|
id: row.id,
|
});
|
}
|
|
async function getAdvertisement(id: string) {
|
try {
|
return await advertisementServices.getAdvertisement({ id: id });
|
} catch (error) {}
|
}
|
|
async function setAdvertiseOnShowStatus(row: API.GetAdvertisementsQueryResultItem) {
|
try {
|
await Message.tipMessage(
|
`确认要${row.status === EnumAdvertisementStatus.InProcess ? '下架' : '上架'}该广告吗？`
|
);
|
let params: API.SetAdvertisementStatusCommand = {
|
ids: [row.id],
|
status:
|
row.status === EnumAdvertisementStatus.InProcess
|
? EnumAdvertisementStatus.Stopped
|
: EnumAdvertisementStatus.InProcess,
|
};
|
let res = await advertisementServices.setAdvertisementStatus(params);
|
if (res) {
|
Message.successMessage('操作成功');
|
getList(paginationState.pageIndex);
|
}
|
} catch (error) {}
|
}
|
</script>
|
