dev-v2
parent
d38d15a570
commit
318808512d
@ -0,0 +1,242 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import { Button, message, Popconfirm, Switch } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { Access, useAccess } from 'umi';
|
||||
import UpdateForm from './components/UpdateForm';
|
||||
import { addOrUpdateScreenAdvertisementUsingPost, changeAdStateUsingGet, getScreenAdPageUsingPost, removeAdUsingPost } from '@/services/pop-b2b2c/pbcScreenAdvertisementController';
|
||||
|
||||
/**
|
||||
* 查询表格
|
||||
* @param param0
|
||||
*/
|
||||
const fetchData = async (params: API.PbcScreenAdvertisement) => {
|
||||
const msg = await getScreenAdPageUsingPost(params);
|
||||
return {
|
||||
data: msg.data?.records,
|
||||
total: msg.data?.total,
|
||||
success: msg.retcode,
|
||||
} as any;
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新节点
|
||||
* @param fields
|
||||
*/
|
||||
const handleUpdate = async (fields: API.PbcScreenAdvertisement) => {
|
||||
const hide = message.loading('正在保存');
|
||||
|
||||
try {
|
||||
const msg = await addOrUpdateScreenAdvertisementUsingPost(fields);
|
||||
hide();
|
||||
if (msg.retcode) {
|
||||
message.success(!fields.pbcId ? '添加成功' : '保存成功');
|
||||
return true;
|
||||
}
|
||||
message.error(msg.retmsg);
|
||||
return false;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error(!fields.pbcId ? '添加失败' : '保存失败');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const handleUpdateState = async (id: number, state: number) => {
|
||||
const hide = message.loading('正在保存');
|
||||
if (!id) return false;
|
||||
try {
|
||||
const msg = await changeAdStateUsingGet({ pbcId: id, pbcBusinessState: state });
|
||||
hide();
|
||||
if (msg.retcode) {
|
||||
message.success(!id ? '新增成功！' : '保存成功！');
|
||||
return true;
|
||||
}
|
||||
message.error(msg.retmsg);
|
||||
return false;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error(!id ? '新增失败，请重试！' : '保存失败，请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 删除节点
|
||||
* @param id
|
||||
*/
|
||||
const handleRemove = async (id?: number) => {
|
||||
const hide = message.loading('正在删除');
|
||||
if (!id) return false;
|
||||
|
||||
try {
|
||||
const msg = await removeAdUsingPost({
|
||||
pbcId: id,
|
||||
});
|
||||
hide();
|
||||
if (msg.retcode) {
|
||||
message.success('删除成功，即将刷新');
|
||||
} else {
|
||||
message.error(msg.retmsg ?? '删除失败，请重试');
|
||||
}
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('删除失败，请重试');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
const TableList: React.FC<{}> = () => {
|
||||
const access: any = useAccess();
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
|
||||
|
||||
const columns: ProColumns<API.PbcScreenAdvertisement>[] = [
|
||||
{
|
||||
title: '标题',
|
||||
dataIndex: 'pbcTitle',
|
||||
},
|
||||
{
|
||||
title: '预览',
|
||||
dataIndex: 'pbcAdvertisement',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'pbcCreateAt',
|
||||
valueType: 'dateTime',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
valueType: 'option',
|
||||
render: (text, record) => (
|
||||
<span>
|
||||
<Access key="config" accessible={access.roleSave}>
|
||||
<Switch
|
||||
checked={record.pbcBusinessState === 1}
|
||||
onChange={async (value) => {
|
||||
const success = await handleUpdateState(record.pbcId || 0, value ? 1 : 0);
|
||||
|
||||
if (success) {
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Access>
|
||||
<Access key="config" accessible={access.roleSave}>
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
</Access>
|
||||
<Access key="remove" accessible={access.roleDelete}>
|
||||
<Popconfirm
|
||||
title="确定删除该开屏广告?"
|
||||
onConfirm={async () => {
|
||||
const success = await handleRemove(record.pbcId);
|
||||
if (success) {
|
||||
actionRef.current?.reload();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button type="link" danger>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Access>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '',
|
||||
breadcrumb: {},
|
||||
}}
|
||||
>
|
||||
<ProTable<API.PbcScreenAdvertisement>
|
||||
columns={columns}
|
||||
actionRef={actionRef}
|
||||
request={fetchData}
|
||||
rowKey="pbcId"
|
||||
size="small"
|
||||
bordered
|
||||
search={{
|
||||
labelWidth: 'auto',
|
||||
span: 6,
|
||||
optionRender: ({ searchText }, { form }) => {
|
||||
return [
|
||||
<Button
|
||||
key="button"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
form?.submit();
|
||||
}}
|
||||
>
|
||||
{searchText}
|
||||
</Button>,
|
||||
<Access key="add" accessible={access.roleSave}>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues({ id: undefined });
|
||||
}}
|
||||
>
|
||||
新增
|
||||
</Button>
|
||||
</Access>,
|
||||
];
|
||||
},
|
||||
}}
|
||||
pagination={{
|
||||
defaultPageSize: 20,
|
||||
showSizeChanger: true,
|
||||
}}
|
||||
scroll={{
|
||||
y: 'calc(100vh - 320px)',
|
||||
}}
|
||||
dateFormatter="string"
|
||||
options={false}
|
||||
toolBarRender={() => []}
|
||||
/>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value: any) => {
|
||||
const success = await handleUpdate(value);
|
||||
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
actionRef.current?.reload();
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
message.destroy();
|
||||
handleUpdateModalVisible(false);
|
||||
}}
|
||||
afterClose={() => {
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableList;
|
||||
@ -0,0 +1,133 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { DrawerForm, ProFormInstance, ProFormText, ProFormUploadButton } from '@ant-design/pro-components';
|
||||
import { message } from 'antd';
|
||||
import Upload, { RcFile } from 'antd/es/upload';
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.PbcScreenAdvertisement>;
|
||||
export type UpdateFormProps = {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
afterClose: () => void;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.PbcScreenAdvertisement>;
|
||||
};
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
const formRef = useRef<ProFormInstance>();
|
||||
return (
|
||||
<DrawerForm
|
||||
width={640}
|
||||
requiredMark={false}
|
||||
title={props.values.pbcId ? '编辑' : '新增'}
|
||||
open={props.updateModalVisible}
|
||||
formRef={formRef}
|
||||
onFinish={(value: any) => {
|
||||
let pbcAdvertisement = ""
|
||||
if (value.pbcAdvertisement && value.pbcAdvertisement.length > 0) {
|
||||
if (value.pbcAdvertisement[0].uid === '-1') {
|
||||
pbcAdvertisement = value.pbcAdvertisement[0].url || '';
|
||||
}
|
||||
if (
|
||||
value.pbcAdvertisement[0].response &&
|
||||
value.pbcAdvertisement[0].response.retcode
|
||||
) {
|
||||
pbcAdvertisement = value.pbcAdvertisement[0].response.data;
|
||||
}
|
||||
}
|
||||
return props.onSubmit({ ...value, pbcAdvertisement, pbcId: props.values.pbcId })
|
||||
}}
|
||||
drawerProps={{
|
||||
destroyOnClose: true,
|
||||
afterOpenChange: (visible) => {
|
||||
if (!visible) props.afterClose();
|
||||
}
|
||||
}}
|
||||
|
||||
initialValues={{
|
||||
pbcTitle: props.values.pbcTitle,
|
||||
pbcAdvertisement: props.values.pbcAdvertisement ? [{
|
||||
uid: '-1',
|
||||
name: props.values.pbcAdvertisement.substring(props.values.pbcAdvertisement.lastIndexOf('/')),
|
||||
status: 'done',
|
||||
url: props.values.pbcAdvertisement,
|
||||
}] : []
|
||||
}}
|
||||
onOpenChange={(visible) => {
|
||||
formRef.current?.resetFields();
|
||||
if (!visible) {
|
||||
props.onCancel();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ProFormText
|
||||
placeholder={'请输入标题'}
|
||||
label="标题"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '标题为必填项',
|
||||
},
|
||||
]}
|
||||
width="md"
|
||||
name="pbcTitle"
|
||||
/>
|
||||
<ProFormUploadButton
|
||||
label="开屏广告图片/视频"
|
||||
name="pbcAdvertisement"
|
||||
max={1}
|
||||
fieldProps={{
|
||||
name: 'file',
|
||||
accept: 'image/*,video/mp4',
|
||||
multiple: true,
|
||||
headers: {
|
||||
authorization: localStorage.getItem('token') ?? '',
|
||||
},
|
||||
onChange: (info: any) => {
|
||||
switch (info.file.status) {
|
||||
case 'done':
|
||||
if (info.file.response.retcode === 0) {
|
||||
message.error(info.file.response.retmsg);
|
||||
formRef.current?.setFieldValue('pbcAdvertisement', [])
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
action: process.env.BASE_URL + '/oss/imgUpload',
|
||||
beforeUpload(file: RcFile) {
|
||||
console.log(file)
|
||||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||||
const isLt30M = file.size / 1024 / 1024 < 30;
|
||||
const isVideo = file.type === 'video/mp4'
|
||||
if (!isVideo && !isLt10M) {
|
||||
message.error('图片大小不能超过10MB!');
|
||||
} else if (isVideo && !isLt30M) {
|
||||
message.error('视频大小不能超过30MB!');
|
||||
}
|
||||
return (!isVideo && isLt10M) || (isVideo && isLt30M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
onPreview: async (file) => {
|
||||
if (file.uid === '-1') {
|
||||
window.open(file.url);
|
||||
}
|
||||
if (file.response && file.response.retcode) {
|
||||
window.open(file.response.data);
|
||||
}
|
||||
},
|
||||
listType: 'picture-card',
|
||||
}}
|
||||
rules={[
|
||||
{ required: true, message: '请上传开屏广告图片/视频' },
|
||||
]}
|
||||
/>
|
||||
</DrawerForm>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateForm;
|
||||
@ -0,0 +1,16 @@
|
||||
.permissionForm {
|
||||
// background-color: sienna;
|
||||
// :global(.ant-form-item) {
|
||||
// margin-bottom: 1px;
|
||||
// }
|
||||
:global {
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
.ant-form-item-control-wrapper {
|
||||
.ant-form-item-control {
|
||||
line-height: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,243 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import { Button, message, Popconfirm, Switch } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { Access, useAccess } from 'umi';
|
||||
import UpdateForm from './components/UpdateForm';
|
||||
import { addOrUpdateScreenAdvertisementUsingPost, changeAdStateUsingGet, getScreenAdPageUsingPost, removeAdUsingPost } from '@/services/pop-b2b2c/pbcScreenAdvertisementController';
|
||||
|
||||
/**
|
||||
* 查询表格
|
||||
* @param param0
|
||||
*/
|
||||
const fetchData = async (params: API.PbcScreenAdvertisement) => {
|
||||
const msg = await getScreenAdPageUsingPost(params);
|
||||
return {
|
||||
data: msg.data?.records,
|
||||
total: msg.data?.total,
|
||||
success: msg.retcode,
|
||||
} as any;
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新节点
|
||||
* @param fields
|
||||
*/
|
||||
const handleUpdate = async (fields: API.PbcScreenAdvertisement) => {
|
||||
const hide = message.loading('正在保存');
|
||||
|
||||
try {
|
||||
const msg = await addOrUpdateScreenAdvertisementUsingPost(fields);
|
||||
hide();
|
||||
if (msg.retcode) {
|
||||
message.success(!fields.pbcId ? '添加成功' : '保存成功');
|
||||
return true;
|
||||
}
|
||||
message.error(msg.retmsg);
|
||||
return false;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error(!fields.pbcId ? '添加失败' : '保存失败');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const handleUpdateState = async (id: number, state: number) => {
|
||||
const hide = message.loading('正在保存');
|
||||
if (!id) return false;
|
||||
try {
|
||||
const msg = await changeAdStateUsingGet({ pbcId: id, pbcBusinessState: state });
|
||||
hide();
|
||||
if (msg.retcode) {
|
||||
message.success(!id ? '新增成功！' : '保存成功！');
|
||||
return true;
|
||||
}
|
||||
message.error(msg.retmsg);
|
||||
return false;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error(!id ? '新增失败，请重试！' : '保存失败，请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 删除节点
|
||||
* @param id
|
||||
*/
|
||||
const handleRemove = async (id?: number) => {
|
||||
const hide = message.loading('正在删除');
|
||||
if (!id) return false;
|
||||
|
||||
try {
|
||||
const msg = await removeAdUsingPost({
|
||||
pbcId: id,
|
||||
});
|
||||
hide();
|
||||
if (msg.retcode) {
|
||||
message.success('删除成功，即将刷新');
|
||||
} else {
|
||||
message.error(msg.retmsg ?? '删除失败，请重试');
|
||||
}
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('删除失败，请重试');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
const TableList: React.FC<{}> = () => {
|
||||
const access: any = useAccess();
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
|
||||
|
||||
const columns: ProColumns<API.PbcScreenAdvertisement>[] = [
|
||||
{
|
||||
title: '标题',
|
||||
dataIndex: 'pbcTitle',
|
||||
},
|
||||
{
|
||||
title: '预览',
|
||||
dataIndex: 'pbcAdvertisement',
|
||||
search: false
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'pbcCreateAt',
|
||||
valueType: 'dateTime',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
valueType: 'option',
|
||||
render: (text, record) => (
|
||||
<span>
|
||||
<Access key="config" accessible={access.roleSave}>
|
||||
<Switch
|
||||
checked={record.pbcBusinessState === 1}
|
||||
onChange={async (value) => {
|
||||
const success = await handleUpdateState(record.pbcId || 0, value ? 1 : 0);
|
||||
|
||||
if (success) {
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Access>
|
||||
<Access key="config" accessible={access.roleSave}>
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
</Access>
|
||||
<Access key="remove" accessible={access.roleDelete}>
|
||||
<Popconfirm
|
||||
title="确定删除该开屏广告?"
|
||||
onConfirm={async () => {
|
||||
const success = await handleRemove(record.pbcId);
|
||||
if (success) {
|
||||
actionRef.current?.reload();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button type="link" danger>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Access>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '',
|
||||
breadcrumb: {},
|
||||
}}
|
||||
>
|
||||
<ProTable<API.PbcScreenAdvertisement>
|
||||
columns={columns}
|
||||
actionRef={actionRef}
|
||||
request={fetchData}
|
||||
rowKey="pbcId"
|
||||
size="small"
|
||||
bordered
|
||||
search={{
|
||||
labelWidth: 'auto',
|
||||
span: 6,
|
||||
optionRender: ({ searchText }, { form }) => {
|
||||
return [
|
||||
<Button
|
||||
key="button"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
form?.submit();
|
||||
}}
|
||||
>
|
||||
{searchText}
|
||||
</Button>,
|
||||
<Access key="add" accessible={access.roleSave}>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues({ id: undefined });
|
||||
}}
|
||||
>
|
||||
新增
|
||||
</Button>
|
||||
</Access>,
|
||||
];
|
||||
},
|
||||
}}
|
||||
pagination={{
|
||||
defaultPageSize: 20,
|
||||
showSizeChanger: true,
|
||||
}}
|
||||
scroll={{
|
||||
y: 'calc(100vh - 320px)',
|
||||
}}
|
||||
dateFormatter="string"
|
||||
options={false}
|
||||
toolBarRender={() => []}
|
||||
/>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value: any) => {
|
||||
const success = await handleUpdate(value);
|
||||
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
actionRef.current?.reload();
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
message.destroy();
|
||||
handleUpdateModalVisible(false);
|
||||
}}
|
||||
afterClose={() => {
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableList;
|
||||
Loading…
Reference in New Issue