Skip to content

J
jinfa-admin
Commit d076125b authored by Bill's avatar Bill
Browse files
Options

fix: 修改广告管理

parent d75d1caf
Hide whitespace changes
Inline Side-by-side
Showing with 261 additions and 428 deletions
src/pages/content/advertisement/advertisementInfo.tsx
View file @ d076125b
import React, { useState } from 'react';
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import ReutrnEle from '@/components/ReturnEle';
// import { PageHeaderWrapper } from "@ant-design/pro-layout";
// import ReutrnEle from '@/components/ReturnEle';
import { usePageStatus } from '@/hooks/usePageStatus';
import { history, Prompt } from 'umi';
import { Card } from 'antd';
import { SchemaForm, createFormActions, FormButtonGroup, Submit, FormEffectHooks } from '@formily/antd'
import { createFormActions, FormButtonGroup, Submit, FormEffectHooks } from '@formily/antd'
import advertisementInfoSchema from './schema/advertisementInfoSchema';
import { Input, Select, Button } from 'antd';
import { Input, Select, Button, Card } from 'antd';
// import CustomUpload from '@/components/NiceForm/components/CustomUpload';
import { useInitialValues } from '../hooks/useInitialValues';
import CustomUpload from '../components/WrapCustomUpload';
import useCustomValidator from '../hooks/useValidator'
import { sortedList, ADVERTISE_WEB_COLUMN_TYPE, ADVERTISE_APP_COLUMN_TYPE} from '../utils/utils';
// import useCustomValidator from '../hooks/useValidator'
import { ADVERTISE_WEB_COLUMN_TYPE, ADVERTISE_APP_COLUMN_TYPE} from '../utils/utils';
import { getManageContentAdvertGet, postManageContentAdvertAdd, postManageContentAdvertUpdate } from '@/services/ManageV2Api';
import NiceForm from '@/components/NiceForm';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
enum ChannelEnum {
WEB = 1,
......@@ -35,8 +36,8 @@ const APP_COLUMN_TYPE = Object.keys(ADVERTISE_APP_COLUMN_TYPE).map((item) => {
const actions = createFormActions();
const { onFieldValueChange$ } = FormEffectHooks;
const AdvertisementInfo = () => {
useCustomValidator()
const AdvertisementInfo: React.FC = () => {
// useCustomValidator()
const { id, preview } = usePageStatus();
const initialValues = useInitialValues({id:id}, getManageContentAdvertGet);
const [submitLoading, setSubmitLoading ] = useState(false);
......@@ -73,16 +74,15 @@ const AdvertisementInfo = () => {
} else {
options = APP_COLUMN_TYPE
}
console.log(options);
actions.setFieldState('columnType', (state) => {
state.props["x-component-props"]["options"] = options;
state.props["enum"] = options;
if(isActive) {
state.value = "";
}
})
})
}
const handleCancel = () => {
history.push('/content/advertisement')
}
......@@ -90,15 +90,15 @@ const AdvertisementInfo = () => {
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
// backIcon={<ReutrnEle description="返回" />}
title={isAdd ? '新建广告' : isEdit ? '编辑广告' : '查看广告'}
>
<Card>
<SchemaForm
<NiceForm
schema={advertisementInfoSchema}
actions={actions}
components={{
Input, Select, Submit, CustomUpload
Select, Submit, CustomUpload
}}
initialValues={initialValues?.data}
onSubmit={handleSubmit}
......@@ -127,7 +127,7 @@ const AdvertisementInfo = () => {
)
: <></>
}
</SchemaForm>
</NiceForm>
<Prompt when={unsaved && (isAdd || isEdit)} message="内容未保存，确定离开？"></Prompt>
</Card>
</PageHeaderWrapper>
......
src/pages/content/advertisement/index.tsx
View file @ d076125b
import React, { useEffect, useState } from 'react';
import { FilterTable } from '../components/FilterTable';
import { Card, Input, Button, Table, Dropdown, Menu, Select, Space, Popconfirm, Modal } from 'antd';
import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
import { history, Link } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { merge } from 'rxjs';
const { onFormInit$, onFieldValueChange$ } = FormEffectHooks;
const { Search } = Input;
const SchemaButton = createVirtualBox('button', Button);
const SchemaTable = createVirtualBox('SchemaTable', Table);
const SchemaDropDown = createVirtualBox('SchemaDropDown', Dropdown.Button);
const actions = createFormActions();
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import advertisementSchema from './schema';
import CustomSearch from '../components/CustomSearch';
import { tagColorStyle, getTableDataSource, setFormStatus } from '../utils/utils';
import TablePagination from '../components/TablePagination';
import { timeRange } from '@/utils/index';
import { getManageContentAdvertPage, postManageContentAdvertDelete, postManageContentAdvertUpdateStatus } from '@/services/ManageV2Api';
const getData = async (params: any) => {
const res = await getManageContentAdvertPage(params);
return res.data;
};
import { Space, Card, Button, Dropdown, Menu, Popconfirm, message } from 'antd';
import { StandardTable } from '@linkseeks/god';
import NiceForm from '@/components/NiceForm';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { getManageContentAdvertPage, GetManageContentAdvertPageRequest, getManageContentColumnAll, getManageContentInformationPage, postManageContentAdvertDelete, postManageContentAdvertUpdateStatus, postManageContentInformationBatch, postManageContentInformationDelete, postManageContentInformationUpdateStatus } from '@/services/ManageV2Api';
import { createFormActions } from '@formily/antd';
import { history } from 'umi'
import { schema } from './schema';
import { COLUMN_CATEGORY } from '@/constants/const/content';
import EyePreview from '@/components/EyePreview';
import moment from 'moment';
import { PlusOutlined } from '@ant-design/icons';
import { ADVERTISE_APP_COLUMN_TYPE, ADVERTISE_WEB_COLUMN_TYPE } from '../utils/utils';
const ALL_TYPE = Object.assign({}, ADVERTISE_WEB_COLUMN_TYPE, ADVERTISE_APP_COLUMN_TYPE);
const formActions = createFormActions();
/** 待上架 */
const PENDING = 1;
/** 已上架 */
const IS_UP = 2
/** 已下架 */
const IS_DOWN = 3
const STATUS = ["待上架", "已上架", "已下架"]
const AllQuery = () => {
const ref = useRef<any>({});
const columns = [
{ title: 'ID', dataIndex: 'id' },
{
title: '标题',
dataIndex: 'title',
render: (text: string, record: any) => (
<EyePreview
url={`/content/advertisement/detail?id=${record.id}&preview=1`}
>
{text}
</EyePreview>
)
},
{
title: '栏目', dataIndex: 'columnType',
render: (text, record) => {
return (
<div>{ALL_TYPE[text]}</div>
)
},
},
{
title: '发布时间',
dataIndex: 'createTime',
render: (text) => (
moment(text).format('YYYY-MM-DD HH:mm:ss')
)
},
{
title: '状态',
dataIndex: 'status',
render: (value, record) => {
return <a>{STATUS[record.status - 1]}</a>
}
},
{
title: '操作',
render: (value, record) => {
return (
<Space>
<a onClick={() => handleUp(record.id, record.status === IS_UP ? IS_DOWN : IS_UP)}>
{
record.status === PENDING || record.status === IS_DOWN ? '上架' : '下架'
}
</a>
{
record.status === PENDING || record.status === IS_DOWN
? (
<Popconfirm
title="确定删除"
onConfirm={() => handleDelete(record.id)}
okText="确定"
cancelText="取消"
>
<a>删除</a>
</Popconfirm>
)
: null
}
</Space>
)
}
}
];
const Advertisement = () => {
useEffect(() => {
const params = {
current: 1,
pageSize: 10
};
getTableDataSource(actions, params, getData);
}, []);
const handleUp = async (id: number, status: 2 | 3) => {
// 该方法是上下架 所以 enableStatus 无用，随意传
const { code, data } = await postManageContentAdvertUpdateStatus({id, shelfStatus: status, enableStatus: 0})
if (code === 1000) {
formActions.submit();
}
}
const handleDelete = async (id: number) => {
message.loading("正在删除，请稍等...");
const { data, code } = await postManageContentAdvertDelete({id});
if (code === 1000) {
formActions.submit();
}
}
const ControllerBtns = () => (
<Space>
<Button
type="primary"
onClick={() => { history.push('/content/advertisement/add') }}
icon={<PlusOutlined />}
>
新建
</Button>
</Space>
);
const advertisementEffects = () => () => {
onFormInit$().subscribe(() => {
actions.setFieldState('FILTERS', state => {
state.visible = false;
});
});
merge(
onFieldValueChange$('status'),
onFieldValueChange$('time'),
).subscribe(
fieldState => {
if(fieldState.value != null) {
handleSearch({});
}
const handleSearch = (values: GetManageContentAdvertPageRequest) => {
const format = 'YYYY-MM-DD';
const { startTime, endTime, ...rest } = values;
const withTimes = startTime && endTime
? {
startTime: moment(startTime, format).valueOf(),
endTime: moment(endTime, format).valueOf()
}
);
onFieldValueChange$('pagination').subscribe((state) => {
handleSearch({...state.value});
});
};
const handleSearch = async (params) => {
const title = actions.getFieldValue('search');
const status = actions.getFieldValue('status'); // 状态
const time = actions.getFieldValue('time');
const { st, et } = timeRange(time);
: {}
const postData = {
title: title || '',
status: status != 0 ? status : '',
startTime: st || null,
endTime: et || null,
current: 1,
pageSize: 10,
...params,
};
getTableDataSource(actions, postData, getData);
};
const handleDelete = (id) => {
Modal.confirm({
title: '确定要执行这个操作吗',
onOk: () => {
postManageContentAdvertDelete({id: id})
.then((data) => {
const paginationValue = actions.getFieldValue('pagination');
handleSearch({...paginationValue});
});
},
});
};
// 修改状态
const handleUpdateStatus = (id, status) => {
// 该方法是上下架 所以 enableStatus 无用，随意传
postManageContentAdvertUpdateStatus({id: id, shelfStatus: status, enableStatus: 0})
.then((data) => {
const paginationValue = actions.getFieldValue('pagination');
handleSearch({...paginationValue});
});
};
// 重设页码
const resetPagination = (params) => {
const paginationValue = actions.getFieldValue('pagination');
actions.setFieldValue('pagination', {
...paginationValue,
...params
});
};
...withTimes,
...rest,
}
ref.current.reload(postData)
}
const fetchData = async (params: GetManageContentAdvertPageRequest) => {
const { data, code } = await getManageContentAdvertPage(params);
if (code === 1000) {
return data
}
return {
totalCount: 0,
data: []
}
}
return (
<PageHeaderWrapper title="广告管理">
<PageHeaderWrapper
title={'广告管理'}
>
<Card>
<FilterTable
schema={advertisementSchema}
components={{
CustomSearch,
// SchemaFlexRowLayout,
// SchemaFlexColumnLayout,
SchemaDropDown,
Select,
Table,
TablePagination
}}
actions={actions}
expressionScope={{
goToCreate: () => {
history.push(`/content/advertisement/add`);
},
reset: () => {
actions.setFieldValue('search');
actions.setFieldValue('status'); // 状态
actions.setFieldValue('time');
resetPagination({current: 1});
handleSearch({});
},
search: (value) => {
resetPagination({current: 1});
handleSearch({title: value, current: 1 });
},
renderStatus: (text, record) => {
const STATUSMAP = {
"1": "待上架",
"2": "已上架",
"3": "已下架"
};
return (
<span style={{...tagColorStyle[record.status], padding: '3px 5px'}}>
{STATUSMAP[record.status]}
</span>
);
},
toggleFilters: () => {
actions.setFieldState('FILTERS', state => {
const visible = !state.visible;
state.visible = visible;
actions.setFieldState('HIGHT_FILTER_BTN', (state) => {
//@ts-ignore
state.props['x-component-props'].children = (
<div>高级搜索 {visible ? <UpOutlined /> : <DownOutlined /> }</div>
);
});
});
},
renderOperation: (val, record) => {
const status = ["", "上架", "下架", "上架"];
const canModify = [1, 3];
const menu = (
<Menu>
<Menu.Item>
<Link to={`/content/advertisement/detail?id=${record.id}`}>
编辑
</Link>
</Menu.Item>
<Menu.Item onClick={() => handleDelete(record.id)}>
<a>
删除
</a>
</Menu.Item>
</Menu>
);
return (
<Space>
{/* 这里反向操作， 上架的对应的是下架， 待上架，下架对应的是上架 */}
<Popconfirm
title="确定要执行这个操作吗"
onConfirm={() => handleUpdateStatus(record.id, status[record.status] == '上架' ? 2 : 3)}
okText="是"
cancelText="否"
>
<a href="#">{status[record.status]}</a>
</Popconfirm>
{/* // 只有待上架， 已下架架才有 修改和删除 */}
{
canModify.includes(record.status)
? (
<Dropdown overlay={menu}>
<a>
更多 <DownOutlined />
</a>
</Dropdown>
)
: null
}
</Space>
);
},
}}
effects={advertisementEffects()}
>
</FilterTable>
<StandardTable
columns={columns as any}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
controlRender={
<NiceForm
components={{ControllerBtns}}
actions={formActions}
onSubmit={handleSearch}
effects={($, actions) => {
useStateFilterSearchLinkageEffect($, actions, 'title', FORM_FILTER_PATH);
}}
schema={schema}
/>
}
/>
</Card>
</PageHeaderWrapper>
);
};
)
}
export default Advertisement;
export default AllQuery
src/pages/content/advertisement/schema/advertisementInfoSchema.tsx
View file @ d076125b
......@@ -17,7 +17,6 @@ const schema = {
title: {
type: 'string',
title: '标题',
'x-component': 'Input',
'x-component-props': {
placeholder: '最长60个字符，30个汉字'
},
......@@ -35,13 +34,10 @@ const schema = {
channel: {
title: '投放渠道',
type: 'string',
"x-component": 'Select',
'x-component-props': {
options: [
{ label: 'Web', value: 1 },
{ label: 'App', value: 2 },
],
},
enum: [
{ label: 'Web', value: 1 },
{ label: 'App', value: 2 },
],
"x-rules": [{
"required": true,
"message": "请选择投放渠道"
......@@ -50,10 +46,11 @@ const schema = {
columnType: {
title: '栏目',
type: 'string',
'x-component': 'Select',
'x-component-props': {
options: []
},
enum: [],
// 'x-component': 'Select',
// 'x-component-props': {
// options: []
// },
"x-rules": [{
"required": true,
"message": "请选择栏目"
......@@ -62,10 +59,7 @@ const schema = {
sort: {
title: '广告排序',
type: 'string',
'x-component': 'Select',
'x-component-props': {
options: sortListOptions
},
enum: sortListOptions,
"x-rules": [{
"required": true,
"message": "请选择广告排序"
......@@ -74,7 +68,6 @@ const schema = {
link: {
title: '跳转链接',
type: 'string',
'x-component': 'Input',
"x-rules": [
{
limitByte: true, // 自定义校验规则
......
src/pages/content/advertisement/schema/index.tsx
View file @ d076125b
import EyePreview from '@/components/EyePreview';
import { DownOutlined } from '@ant-design/icons';
import { TimeList } from '../../statusList';
import moment from 'moment';
import React from 'react';
import {ADVERTISE_WEB_COLUMN_TYPE, ADVERTISE_APP_COLUMN_TYPE} from '../../utils/utils';
const ALL_TYPE = Object.assign({}, ADVERTISE_WEB_COLUMN_TYPE, ADVERTISE_APP_COLUMN_TYPE);
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { ISchema } from '@formily/antd';
const CustomTimeList = [{label: '全部', value: 0}].concat(TimeList.slice(1));
const columns = [
{title: 'ID', dataIndex: 'id'},
{ title: '标题',
dataIndex: 'title',
render: (text: string, record: any) => (
<EyePreview
url={`/content/advertisement/detail?id=${record.id}&preview=1`}
>
{text}
</EyePreview>
)
},
{
title: '栏目', dataIndex: 'columnType',
render: (text, record) => {
return (
<div>{ALL_TYPE[text]}</div>
)
},
},
{
title: '发布时间',
dataIndex: 'createTime',
render: (text) => (
moment(text).format('YYYY-MM-DD HH:mm:ss')
)
},
{title: '状态', dataIndex: 'status', render: "{{renderStatus}}"},
{title: '操作', render: "{{renderOperation}}"}
];
/**
* 广告管理列表也 schemat
*/
const advertisementSchema = {
type: 'object',
properties: {
layout: {
type: 'object',
// 'x-component': 'mega-layout',
'x-component': 'CustomFlexRowLayout',
'x-component-props': {
justify: 'space-between',
align: 'center'
},
properties: {
'left-layout': {
export const schema: ISchema = {
type: 'object',
properties: {
megaLayout: {
type: 'object',
'x-component': 'mega-layout',
properties: {
topLayout: {
type: 'object',
name: 'left-layout',
'x-component': 'CustomFlexRowLayout',
'x-component': 'Mega-Layout',
'x-component-props': {
justify: 'start',
align: 'center'
grid: true,
},
properties: {
createBtn: {
type: "object",
name: "createBtn",
"x-component": "button",
"x-component-props": {
"onClick": "{{goToCreate}}",
"children": "新建",
"type": 'primary',
style: {
width: '112px',
margin: '0 0 15px 0'
}
}
ctl: {
type: 'object',
// 'x-component': 'Children',
// 'x-component-props': {
// children: '{{controllerBtns}}',
// },
"x-component": 'ControllerBtns'
},
}
title: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '标题',
},
},
},
},
'right-layout': {
type: 'object',
name: 'rigth-layout',
"x-component": 'CustomFlexColumnLayout',
properties: {
controllers: {
type: 'object',
name: 'controllers',
'x-component': 'CustomFlexRowLayout',
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
colStyle: {
marginLeft: 20,
},
},
properties: {
status: {
type: 'string',
enum: [
{label: '全部', value: '0'},
{label: '待上架', value: '1'},
{label: '已上架',value: '2'},
{label: '已下架',value: '3'},
],
'x-component-props': {
justify: 'end',
placeholder: '状态',
allowClear: true,
},
properties: {
search: {
type: 'string',
name: 'name',
'x-component': 'CustomSearch',
'x-component-props': {
placeholder: "请填写标题名称",
"onSearch": "{{search}}",
}
},
'HIGHT_FILTER_BTN': {
type: 'string',
name: 'HIGHT_FILTER_BTN',
'x-component': 'button',
'x-component-props': {
"children": (
<div>高级搜索 <DownOutlined /></div>
),
"onClick": "{{toggleFilters}}",
style: {
margin: '0 15px'
}
}
},
reset: {
type: 'string',
name: 'reset',
"x-component": "button",
"x-component-props": {
"onClick": "{{reset}}",
"children": "重置",
}
},
}
},
'FILTERS': {
type: 'object',
name: 'FILTERS',
'x-component': 'CustomFlexRowLayout',
"[startTime, endTime]": {
type: 'daterange',
'x-component-props': {
placeholder: ["发布开始时间", "发布结束时间"],
allowClear: true,
},
},
submit: {
'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': {
justify: 'end'
children: '查询',
},
properties: {
status: {
name: 'status',
type: 'string',
'x-component': 'Select',
'x-component-props': {
options: [
{label: '状态（全部）', value: '0'},
{label: '待上架', value: '1'},
{label: '已上架',value: '2'},
{label: '已下架',value: '3'},
],
defaultValue: '0',
placeholder: '请选择状态',
style: {
width: '160px',
margin: '0 15px'
}
}
},
time: {
name: 'time',
type: 'string',
'x-component': 'Select',
'x-component-props': {
placeholder: '发布时间（全部）',
options: CustomTimeList,
style: {
width: '160px',
}
}
}
}
}
}
}
}
},
"table": {
"key": "table",
"type": "object",
"name": "table",
"x-component": "Table",
"x-component-props": {
"columns": columns,
"rowKey": "id",
pagination: false,
}
},
},
},
},
},
},
};
pagination: {
type: 'object',
'x-component': "TablePagination",
'x-style': {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end'
},
'x-component-props': {
showQuickJumper: true,
pageSize: 10,
size: 'small'
}
}
}
}
export default advertisementSchema
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment