Commit 41fab5e0 authored by LeeJiancong's avatar LeeJiancong
parents c9aa16b7 0e983dce
......@@ -41,7 +41,43 @@
{
path: '/content/infomationInfo',
name: 'infomationInfo',
component: '@/pages/content/infomation/infomationInfo1',
component: '@/pages/content/infomation/infomationInfo',
hideInMenu: true,
hidePageHeader: true,
},
{
path: '/content/advertisement',
name: 'advertisement',
component: '@/pages/content/advertisement',
},
{
path: '/content/advertisementInfo',
name: 'advertisementInfo',
component: '@/pages/content/advertisement/advertisementInfo',
hideInMenu: true,
hidePageHeader: true,
},
{
path: '/content/announcements',
name: 'announcements',
component: '@/pages/content/announcements'
},
{
path: '/content/announceInfo',
name: 'announceInfo',
component: '@/pages/content/announcements/announceInfo',
hideInMenu: true,
hidePageHeader: true,
},
{
path: '/content/imagesManagement',
name: 'imagesManagement',
component: '@/pages/content/imagesManagement'
},
{
path: '/content/imageInfo',
name: 'imageInfo',
component: '@/pages/content/imagesManagement/imageInfo',
hideInMenu: true,
hidePageHeader: true,
}
......
......@@ -133,6 +133,12 @@ export default {
'menu.content.tagsInfo': '标签详情',
'menu.content.infomations': '资讯管理',
'menu.content.infomationInfo': '咨询详情',
'menu.content.advertisement': '广告管理',
'menu.content.advertisementInfo': '广告详情',
'menu.content.imagesManagement': '图片管理',
'menu.content.imageInfo': '图片详情',
'menu.content.announcements': '公告管理',
'menu.content.announceInfo': '公告详情',
// 评论管理
'menu.comment': '评论管理',
......
import React, { useState } from 'react';
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, Reset } from '@formily/antd'
import advertisementInfoSchema from './schema/advertisementInfoSchema';
import { Input, Select } from 'antd';
// import CustomUpload from '@/components/NiceForm/components/CustomUpload';
import { PublicApi } from '@/services/api';
import { useInitialValues } from '../hooks/useInitialValues';
import CustomUpload from '../components/WrapCustomUpload';
const actions = createFormActions();
const AdvertisementInfo = () => {
const { id, preview } = usePageStatus();
const initialValues = useInitialValues({id:id}, PublicApi.getManageContentAdvertGet);
const [submitLoading, setSubmitLoading ] = useState(false);
const isEdit = id && !preview;
const isAdd = !id && !preview;
const isView = id && preview;
const handleSubmit = (value) => {
console.log(value)
// const { title, columnType, sort, link, imageUrl} = value;
const serviceActions = isAdd
? PublicApi.postManageContentAdvertAdd
: PublicApi.postManageContentAdvertUpdate
let tempData = value;
const postData = isAdd ? tempData : {...tempData, id};
setSubmitLoading(true)
serviceActions(postData).then((data) => {
setSubmitLoading(false);
history.push('/content/advertisement')
})
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={isAdd ? '新建广告' : isEdit ? '编辑广告' : '查看广告'}
>
<Card>
<SchemaForm
schema={advertisementInfoSchema}
actions={actions}
components={{
Input, Select, Submit, CustomUpload
}}
initialValues={initialValues?.data}
onSubmit={handleSubmit}
editable={isAdd || isEdit}
expressionScope={{}}
>
{
isAdd || isEdit
? (
<FormButtonGroup offset={3}>
<Submit loading={submitLoading}>提交</Submit>
<Reset>取消</Reset>
</FormButtonGroup>
)
: <></>
}
</SchemaForm>
</Card>
</PageHeaderWrapper>
)
}
export default AdvertisementInfo
\ No newline at end of file
import React, { useEffect, useState } from 'react';
import { FilterTable, FlexRowLayout, FlexColumnLayout } from '../components/FilterTable';
import { Card, Input, Button, Table, Dropdown, Menu, Select, Space } from 'antd';
import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
import { history, Link } from 'umi';
import { DownOutlined, DeleteOutlined, UpOutlined } from '@ant-design/icons';
import { timeRange } from '@/utils/index';
import { PublicApi } from '@/services/api';
import { tagColorStyle, getTableDataSource } from '../utils/utils';
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 advertisementSchema from './schema';
const getData = async (params: any) => {
const res = await PublicApi.getManageContentAdvertPage(params);
return res.data
}
const Advertisement = () => {
const [paginationConfig, setPaginationConfig] = useState({ current: 1, pageSize: 10 })
useEffect(() => {
const params = {
current: 1,
pageSize: 10
}
getTableDataSource(actions, params, getData);
}, [])
const advertisementEffects = () => () => {
onFormInit$().subscribe(() => {
actions.setFieldState('FILTERS', state => {
state.visible = false;
})
})
onFieldValueChange$('status').subscribe(() => {
handleSearch()
})
onFieldValueChange$('time').subscribe(() => {
handleSearch()
})
}
const handleSearch = async () => {
const title = actions.getFieldValue('search');
const status = actions.getFieldValue('status'); // 状态
const time = actions.getFieldValue('time');
const { st, et } = timeRange(time);
console.log(title);
console.log(st, et)
console.log("status", status, "time", time)
const postData = {
title: title || '',
status: status != 0 ? status : '',
startTime: st,
endTime: et,
current: paginationConfig.current,
pageSize: paginationConfig.pageSize,
}
getTableDataSource(actions, postData, getData);
}
const handleDelete = (id) => {
PublicApi.postManageContentAdvertDelete({id: id})
.then((data) => {
handleSearch()
})
}
// 修改状态
const handleUpdateState = (id, status) => {
// 该方法是上下架 所以 enableStatus 无用,随意传
PublicApi.postManageContentAdvertUpdateStatus({id: id, shelfStatus: status, enableStatus: 0})
.then((data) => {
handleSearch()
});
}
return (
<Card>
<FilterTable
schema={advertisementSchema}
components={{
Search,
FlexRowLayout,
FlexColumnLayout,
SchemaDropDown,
Select,
Table,
}}
actions={actions}
expressionScope={{
goToCreate: () => {
history.push(`/content/advertisementInfo`)
},
reset: () => {
actions.setFieldValue('search');
actions.setFieldValue('status'); // 状态
actions.setFieldValue('time');
handleSearch();
},
search: (value) => {
handleSearch();
},
renderStatus: (text, record) => {
const STATUSMAP = {
"1": "待上架",
"2": "已上架",
"3": "已下架"
}
return (
<span style={{...tagColorStyle[record.status], padding: '3px 5px'}}>
{STATUSMAP[record.status]}
</span>
)
},
paginationChange: (page: number, pageSize: number) => {
// paginationChange(page, pageSize)
},
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>
{
// 只有待上架,已下架才可以修改
canModify.includes(record.status)
? <Menu.Item>
<Link to={`/content/advertisementInfo?id=${record.id}`}>
编辑
</Link>
</Menu.Item>
: null
}
{
// 只有待上架, 已上架才有删除
record.status < 3
? <Menu.Item onClick={() => handleDelete(record.id)}>
<a>
删除
</a>
</Menu.Item>
: null
}
</Menu>
)
return (
<Space>
{/* 这里反向操作, 上架的对应的是下架, 待上架,下架对应的是上架 */}
<a onClick={() => handleUpdateState(record.id, status[record.status] == '上架' ? 2 : 3)}>
{status[record.status]}
</a>
<Dropdown overlay={menu}>
<a>
更多 <DownOutlined />
</a>
</Dropdown>
</Space>
)
},
}}
effects={advertisementEffects()}
>
</FilterTable>
</Card>
)
}
export default Advertisement;
\ No newline at end of file
import { sortedList, ADVERTISE_COLUMN_TYPE } from '../../utils/utils';
const columnType = (() => {
const res = Object.keys(ADVERTISE_COLUMN_TYPE).map((item) => {
return {
label: ADVERTISE_COLUMN_TYPE[item],
value: parseInt(item)
}
})
return res;
})()
const sortListOptions = sortedList(1, 6);
const schema = {
type: 'object',
properties: {
layout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 3,
wrapperCol: 10,
labelAlign: 'left'
},
properties: {
title: {
type: 'string',
title: '标题',
'x-component': 'Input',
'x-component-props': {
placeholder: '最长60个字符,30个汉字'
},
"x-rules": [
{
"required": true,
"message": "最长20个字符,10个汉字"
},
{
limitByte: true, // 自定义校验规则
maxByte: 60,
}
]
},
columnType: {
title: '栏目',
type: 'string',
'x-component': 'Select',
'x-component-props': {
options: columnType
},
"x-rules": [{
"required": true,
"message": "请选择栏目"
}],
},
sort: {
title: '广告排序',
type: 'string',
'x-component': 'Select',
'x-component-props': {
options: sortListOptions
},
"x-rules": [{
"required": true,
"message": "请选择广告排序"
}],
},
link: {
title: '跳转链接',
type: 'string',
'x-component': 'Input',
},
imageUrl: {
type: "object",
title: "广告图片",
name: "imageUrl",
"x-component": "CustomUpload",
"x-component-props": {
size: '无',
fileMaxSize: 300
},
"x-rules": {
"required": true,
"message": "请上传图片"
},
},
}
}
}
}
export default schema
\ No newline at end of file
import EyePreview from '@/components/EyePreview';
import { DownOutlined } from '@ant-design/icons';
import { TimeList } from '@/pages/logistics/statusList';
import moment from 'moment';
import React from 'react';
import {ADVERTISE_COLUMN_TYPE} from '../../utils/utils';
const columns = [
{title: 'ID', dataIndex: 'id'},
{ title: '标题',
dataIndex: 'title',
render: (text: string, record: any) => (
<EyePreview
url={`/content/advertisementInfo?id=${record.id}&preview=1`}
>
{text}
</EyePreview>
)
},
{
title: '栏目', dataIndex: 'columnType',
render: (text, record) => {
return (
<div>{ADVERTISE_COLUMN_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': 'FlexRowLayout',
'x-component-props': {
justify: 'space-between',
align: 'center'
},
properties: {
'left-layout': {
type: 'object',
name: 'left-layout',
'x-component': 'FlexRowLayout',
'x-component-props': {
justify: 'start',
align: 'center'
},
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'
}
}
},
}
},
'right-layout': {
type: 'object',
name: 'rigth-layout',
"x-component": 'FlexColumnLayout',
properties: {
controllers: {
type: 'object',
name: 'controllers',
'x-component': 'FlexRowLayout',
'x-component-props': {
justify: 'end',
},
properties: {
search: {
type: 'string',
name: 'name',
'x-component': 'Search',
'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': 'FlexRowLayout',
'x-component-props': {
justify: 'end'
},
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': {
options: TimeList,
style: {
width: '160px',
}
}
}
}
}
}
}
}
},
"table": {
"key": "table",
"type": "object",
"name": "table",
"x-component": "Table",
"x-component-props": {
"columns": columns,
"rowKey": "id",
"pagination": {
showQuickJumper: true,
size: "small",
"onChange": "{{paginationChange}}",
},
// "rowSelection": "{{rowSelection}}"
}
},
}
}
export default advertisementSchema
\ No newline at end of file
import React, { useState } from 'react';
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, Reset } from '@formily/antd'
import announceInfoSchema from './schema/announceInfoSchema';
import { Input, Select, Checkbox } from 'antd';
import CustomUpload from '@/components/NiceForm/components/CustomUpload';
import CustomEditor from '../components/CustomEditor';
import { PublicApi } from '@/services/api';
import { useInitialValues } from '../hooks/useInitialValues';
import CustomCheckbox from '../components/CustomCheckbox';
const actions = createFormActions();
const AdvertisementInfo = () => {
const { id, preview } = usePageStatus();
const initialValues = useInitialValues({id:id}, PublicApi.getManageContentNoticeGet);
const [submitLoading, setSubmitLoading ] = useState(false);
const isEdit = id && !preview;
const isAdd = !id && !preview;
const isView = id && preview;
const handleSubmit = (value) => {
console.log(value)
return ;
// const { title, columnType, sort, link, imageUrl} = value;
const serviceActions = isAdd
? PublicApi.postManageContentNoticeAdd
: PublicApi.postManageContentNoticeUpdate
let tempData = value;
const postData = isAdd ? tempData : {...tempData, id};
setSubmitLoading(true)
serviceActions(postData).then((data) => {
setSubmitLoading(false);
history.push('/content/announcements')
})
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={isAdd ? '新建公告' : isEdit ? '编辑公告' : '查看公告'}
>
<Card>
<SchemaForm
schema={announceInfoSchema}
actions={actions}
components={{
Input, Select, Submit, CustomUpload, CustomEditor, CustomCheckbox
}}
initialValues={initialValues?.data}
onSubmit={handleSubmit}
editable={isAdd || isEdit}
expressionScope={{
label: (
<div>* 栏目</div>
)
}}
>
{
isAdd || isEdit
? (
<FormButtonGroup offset={3}>
<Submit loading={submitLoading}>提交</Submit>
<Reset>取消</Reset>
</FormButtonGroup>
)
: <></>
}
</SchemaForm>
</Card>
</PageHeaderWrapper>
)
}
export default AdvertisementInfo
\ No newline at end of file
import React, { useEffect, useState } from 'react';
import { FilterTable, FlexRowLayout, FlexColumnLayout } from '../components/FilterTable';
import { Card, Input, Button, Table, Dropdown, Menu, Select, Space } from 'antd';
import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
import { history, Link } from 'umi';
import { DownOutlined, DeleteOutlined, UpOutlined } from '@ant-design/icons';
import { timeRange } from '@/utils/index';
import { PublicApi } from '@/services/api';
import { tagColorStyle } from '../utils/utils';
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 advertisementSchema from './schema';
const Announcements = () => {
const announcementEffects = () => () => {
onFormInit$().subscribe(() => {
actions.setFieldState('FILTERS', state => {
state.visible = false;
})
})
}
return (
<Card>
<FilterTable
schema={advertisementSchema}
components={{
Search,
FlexRowLayout,
FlexColumnLayout,
SchemaDropDown,
Select,
Table,
}}
actions={actions}
expressionScope={{
goToCreate: () => {
history.push(`/content/announceInfo`)
},
reset: () => {
console.log("123")
},
search: (value) => {
console.log("search")
},
renderStatus: (text, record) => {
const STATUSMAP = {
"1": "待上架",
"2": "已上架",
"3": "已下架"
}
return (
<span style={{...tagColorStyle[record.status], padding: '3px 5px'}}>
{STATUSMAP[record.status]}
</span>
)
},
paginationChange: (page: number, pageSize: number) => {
// paginationChange(page, pageSize)
},
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: (text, record) => {
}
}}
effects={announcementEffects()}
>
</FilterTable>
</Card>
)
}
export default Announcements;
\ No newline at end of file
const schema = {
type: 'object',
properties: {
layout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 3,
wrapperCol: 10,
labelAlign: 'left'
},
properties: {
title: {
type: 'string',
title: '标题',
'x-component': 'Input',
'x-component-props': {
placeholder: '最长60个字符,30个汉字'
},
"x-rules": [
{
"required": true,
"message": "最长20个字符,10个汉字"
},
{
limitByte: true, // 自定义校验规则
maxByte: 60,
}
]
},
// columnType: {
// title: '栏目',
// type: 'string',
// 'x-component': 'Select',
// 'x-component-props': {
// options: [
// {label: '会员首页公告',value: 1},
// {label: '注册须知', value: 1}
// ],
// },
// "x-rules": [{
// "required": true,
// "message": "请选择栏目"
// }],
// },
columnTypeLayout: {
type: 'object',
'x-component': 'mega-layout',
"x-component-props": {
"label": "{{label}}",
wrapperCol: 24, //
grid: true,
columns: 6,
autoRow: false,
layoutProps: {
"wrapperCol": 16,
},
style: {
marginBottom: 0
},
},
properties: {
columnType: {
name: 'columnType',
type: 'string',
'x-component': 'Select',
'x-mega-props': {
span: 2
},
'x-component-props': {
style: {
width: '95%'
},
options: [
{label: '会员首页公告',value: 1},
{label: '注册须知', value: 2}
],
},
"x-rules": [{
"required": true,
"message": "请选择栏目"
}],
},
top: {
name: 'top',
type: 'string',
'x-component': 'CustomCheckbox',
'x-mega-props': {
span: 1
},
'x-component-props': {
children: '置顶',
}
}
}
},
contentLayout: {
'x-component': 'mega-layout',
"x-component-props": {
layoutProps: {
"wrapperCol": 21,
},
wrapperCol: 23,
},
properties: {
content: {
type: "string",
name: 'content',
title: '内容',
"x-component": 'CustomEditor',
"x-component-parent-props": {
style: {
border: '1px solid #DCDFE6'
}
},
"x-rules": {
"required": true,
"message": "请输入内容"
},
"x-component-props": {
contentStyle: {
height: 256,
},
// onChange: "{{editorChange}}",
excludeControls: [
'letter-spacing',
'line-height',
'clear',
'headings',
'list-ol',
'list-ul',
'remove-styles',
'superscript',
'subscript',
'hr',
]
},
}
}
}
}
}
}
}
export default schema
\ No newline at end of file
import EyePreview from '@/components/EyePreview';
import { DownOutlined } from '@ant-design/icons';
import { TimeList } from '@/pages/logistics/statusList';
import moment from 'moment';
import React from 'react';
const columns = [
{title: 'ID', dataIndex: 'id'},
{
title: '栏目', dataIndex: 'columnName',
},
{ title: '标题',
dataIndex: 'title',
render: (text: string, record: any) => (
<EyePreview
url={`/content/announceInfo?id=${record.id}&preview=1`}
>
{text}
</EyePreview>
)
},
{
title: '操作时间',
dataIndex: 'createTime',
render: (text) => (
moment(text).format('YYYY-MM-DD HH:mm:ss')
)
},
{title: '状态', dataIndex: 'status', render: "{{renderStatus}}"},
{title: '操作', render: "{{renderOperation}}"}
];
/**
* 公告管理列表也 schemat
*/
const announcementSchema = {
type: 'object',
properties: {
layout: {
type: 'object',
// 'x-component': 'mega-layout',
'x-component': 'FlexRowLayout',
'x-component-props': {
justify: 'space-between',
align: 'center'
},
properties: {
'left-layout': {
type: 'object',
name: 'left-layout',
'x-component': 'FlexRowLayout',
'x-component-props': {
justify: 'start',
align: 'center'
},
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'
}
}
},
}
},
'right-layout': {
type: 'object',
name: 'rigth-layout',
"x-component": 'FlexColumnLayout',
properties: {
controllers: {
type: 'object',
name: 'controllers',
'x-component': 'FlexRowLayout',
'x-component-props': {
justify: 'end',
},
properties: {
search: {
type: 'string',
name: 'name',
'x-component': 'Search',
'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': 'FlexRowLayout',
'x-component-props': {
justify: 'end'
},
properties: {
columnId: {
type: 'string',
'x-component': 'Select',
'x-component-props': {
style: {
width: '160px'
}
}
},
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': {
options: TimeList,
style: {
width: '160px',
}
}
}
}
}
}
}
}
},
"table": {
"key": "table",
"type": "object",
"name": "table",
"x-component": "Table",
"x-component-props": {
"columns": columns,
"rowKey": "id",
"pagination": {
showQuickJumper: true,
size: "small",
"onChange": "{{paginationChange}}",
},
// "rowSelection": "{{rowSelection}}"
}
},
}
}
export default announcementSchema
\ No newline at end of file
......@@ -29,7 +29,7 @@ const schema = {
properties: {
layout: {
name: 'layout',
type: 'boject',
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
"labelCol": 3,
......
import React, { useState, useEffect } from 'react';
import { Checkbox } from 'antd';
const CustomCheckbox = (props) => {
console.log(props);
const initialValue = true
const [state, setState] = useState(initialValue);
const handleChange = (e) => {
props.mutators.change(e.target.checked)
}
return (
<Checkbox onChange={handleChange}>置顶</Checkbox>
)
}
CustomCheckbox.isFieldComponent = true
export default CustomCheckbox
\ No newline at end of file
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import styles from './Tags.less';
import { CloseCircleOutlined } from '@ant-design/icons';
const Tags = (props) => {
const seletedTag = props.props['x-component-props']['seletedTag'] ;
const editable = props.editable;
const [tags, setTags] = useState<number[]>([]);
useEffect(() => {
if(seletedTag instanceof Array) {
setTags(seletedTag);
}
}, [seletedTag])
const handleItemSelect = (params) => {
const { value } = params;
if(tags.includes(value)) {
......@@ -40,25 +48,37 @@ const Tags = (props) => {
return (
<div className={styles.selectionItem} key={item.value}>
<span>{item.label}</span>
<span className={styles.icon} onClick={() => handleCancel(item)}><CloseCircleOutlined /></span>
{
editable
? <span className={styles.icon} onClick={() => handleCancel(item)}><CloseCircleOutlined /></span>
: null
}
</div>
)
})
}
</div>
<p className={styles.tips}>从下列标签中选择</p>
<div className={styles.tags}>
{
dataSource.map((item) => {
return (
<div className={styles.tagItem} key={item.value} onClick={() => handleItemSelect(item)}>
{item.label}
</div>
)
})
}
</div>
{
editable
? <>
<p className={styles.tips}>从下列标签中选择</p>
<div className={styles.tags}>
{
dataSource.map((item) => {
return (
<div className={styles.tagItem} key={item.value} onClick={() => handleItemSelect(item)}>
{item.label}
</div>
)
})
}
</div>
</>
: null
}
</div>
)
}
......
import React from 'react';
import CustomUpload from '@/components/NiceForm/components/CustomUpload';
const WrapCustomUpload = (props) => {
const imgUrl = props.value;
const errors = props.errors;
const editable = props.editable;
return (
<>
{
editable
? <div>
<CustomUpload {...props}></CustomUpload>
{
errors.length > 0
? <p style={{color: '#ff4d4f'}}>{errors.join(",")}</p>
: null
}
</div>
: <div>
<img src={imgUrl} style={{width: '104px', height: '104px'}} />
</div>
}
</>
)
}
WrapCustomUpload.isFieldComponent = true
export default WrapCustomUpload
\ No newline at end of file
import React, { useState } from 'react';
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, Reset } from '@formily/antd'
import imageInfoSchema from './schema/imageInfoSchema';
import { Input, Select } from 'antd';
import CustomUpload from '@/components/NiceForm/components/CustomUpload';
const actions = createFormActions();
const ImageInfo = () => {
const { id, preview } = usePageStatus();
const [submitLoading, setSubmitLoading ] = useState(false);
const [imageUrl, setImageUrl] = useState("");
const isEdit = id && !preview;
const isAdd = !id && !preview;
const isView = id && preview;
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={isAdd ? '新建广告' : isEdit ? '编辑广告' : '查看广告'}
>
<Card>
<SchemaForm
schema={imageInfoSchema}
actions={actions}
components={{
Input, Select, Submit, CustomUpload
}}
expressionScope={{
uploadImage: (values) => {
//http://10.0.0.28:88/group1/M00/00/0B/CgAAHF9rAu2AdfJMAAQ0taO65Rw451.jpg
actions.setFieldState('layout.imageUpload', (state) => {
// @ts-ignore
state.props['x-component-props'].imgUrl = values;
})
setImageUrl(values)
console.log(values)
}
}}
>
{
isAdd || isEdit
? (
<FormButtonGroup offset={3}>
<Submit loading={submitLoading}>提交</Submit>
<Reset>取消</Reset>
</FormButtonGroup>
)
: <></>
}
</SchemaForm>
</Card>
</PageHeaderWrapper>
)
}
export default ImageInfo
\ No newline at end of file
import React, { useEffect, useState } from 'react';
import { FilterTable, FlexRowLayout, FlexColumnLayout } from '../components/FilterTable';
import { Card, Input, Button, Table, Dropdown, Menu, Select, Space } from 'antd';
import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
import { history, Link } from 'umi';
import { PublicApi } from '@/services/api';
import { tagColorStyle } from '../utils/utils';
import ImagementSchema from './schema';
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();
const ImagesManagement = () => {
return (
<Card>
<FilterTable
schema={ImagementSchema}
components={{
Search,
FlexRowLayout,
FlexColumnLayout,
SchemaDropDown,
Select,
Table,
}}
actions={actions}
expressionScope={{
goToCreate: () => {
history.push(`/content/advertisementInfo`)
},
reset: () => {
console.log("123")
},
search: (value) => {
console.log("search")
},
renderStatus: (text, record) => {
const STATUSMAP = {
"1": "待上架",
"2": "已上架",
"3": "已下架"
}
return (
<span style={{...tagColorStyle[record.status], padding: '3px 5px'}}>
{STATUSMAP[record.status]}
</span>
)
},
paginationChange: (page: number, pageSize: number) => {
// paginationChange(page, pageSize)
},
renderOperation: (text, record) => {
}
}}
>
</FilterTable>
</Card>
)
}
export default ImagesManagement;
\ No newline at end of file
/**
* 内容管理 - 图片详情
* 下面就是一个mega-layout 布局
*/
const schema = {
type: 'object',
properties: {
layout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 3,
wrapperCol: 10,
labelAlign: 'left'
},
properties: {
name: {
type: 'string',
title: '图片名称',
'x-component': 'Input',
'x-component-props': {
placeholder: '最长30个字符,15个汉字'
},
"x-rules": [
{
"required": true,
"message": "最长30个字符,15个汉字"
},
{
limitByte: true, // 自定义校验规则
maxByte: 30,
}
]
},
useScene: {
title: '使用场景',
type: 'string',
'x-component': 'Select',
"x-rules": [{
"required": true,
"message": "请选择栏目"
}],
},
position: {
title: '所在位置',
type: 'string',
'x-component': 'Select',
"x-rules": [{
"required": true,
"message": "请选择广告排序"
}],
},
sort: {
title: '图片排序',
type: 'string',
'x-component': 'Select',
"x-rules": [{
"required": true,
"message": "请选择图片排序"
}],
},
imageUpload: {
type: "object",
title: "国家图标",
name: "imageUpload",
"x-component": "CustomUpload",
"x-component-props": {
size: '无',
onChange: "{{uploadImage}}",
fileMaxSize: 300
},
// "x-rules": {
// "required": true,
// "message": "请上传图片"
// },
},
}
}
}
}
export default schema
\ No newline at end of file
import EyePreview from '@/components/EyePreview';
import moment from 'moment';
import React from 'react';
const columns = [
{title: 'ID', dataIndex: 'id'},
{
title: '栏目', dataIndex: 'columnName',
},
{ title: '标题',
dataIndex: 'title',
render: (text: string, record: any) => (
<EyePreview
url={`/content/infomationInfo?id=${record.id}&preview=1`}
>
{text}
</EyePreview>
)
},
{
title: '操作时间',
dataIndex: 'createTime',
render: (text) => (
moment(text).format('YYYY-MM-DD HH:mm:ss')
)
},
{title: '状态', dataIndex: 'status', render: "{{renderStatus}}"},
{title: '操作', render: "{{renderOperation}}"}
];
/**
* 图片管理列表页 schema
*/
const schema = {
type: 'object',
properties: {
layout: {
type: 'object',
// 'x-component': 'mega-layout',
'x-component': 'FlexRowLayout',
'x-component-props': {
justify: 'space-between',
align: 'center'
},
properties: {
'left-layout': {
type: 'object',
name: 'left-layout',
'x-component': 'FlexRowLayout',
'x-component-props': {
justify: 'start',
align: 'center'
},
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'
}
}
},
}
},
'right-layout': {
type: 'object',
name: 'rigth-layout',
"x-component": 'FlexColumnLayout',
properties: {
controllers: {
type: 'object',
name: 'controllers',
'x-component': 'FlexRowLayout',
'x-component-props': {
justify: 'end',
},
properties: {
search: {
type: 'string',
name: 'name',
'x-component': 'Search',
'x-component-props': {
placeholder: "请填写标题名称",
"onSearch": "{{search}}",
}
},
reset: {
type: 'string',
name: 'reset',
"x-component": "button",
"x-component-props": {
"onClick": "{{reset}}",
"children": "重置",
style: {
margin: '0 10px'
}
}
},
}
},
}
}
}
},
"table": {
"key": "table",
"type": "object",
"name": "table",
"x-component": "Table",
"x-component-props": {
"columns": columns,
"rowKey": "id",
"pagination": {
showQuickJumper: true,
size: "small",
"onChange": "{{paginationChange}}",
},
// "rowSelection": "{{rowSelection}}"
}
},
}
}
export default schema
\ No newline at end of file
......@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import { FilterTable, FlexRowLayout, FlexColumnLayout } from '../components/FilterTable';
import { Card, Input, Button, Table, Dropdown, Menu, Select, Space } from 'antd';
import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
import { history } from 'umi';
import { history, Link } from 'umi';
import { DownOutlined, DeleteOutlined, UpOutlined } from '@ant-design/icons';
import { timeRange } from '@/utils/index';
import { PublicApi } from '@/services/api';
......@@ -21,7 +21,6 @@ const tagColorStyle = {
"1": {color: '#606266', background: '#F4F5F7'},
"2": {color: '#00B37A', background: '#EBF7F2'},
"3": {color: '#E63F3B', background: '#FFEBE6'},
}
interface getDataParams {
......@@ -187,7 +186,12 @@ const Infomation = () => {
history.push(`/content/infomationInfo`)
},
reset: () => {
console.log("123")
console.log("123")
actions.setFieldValue('search');
actions.setFieldValue("columns") ; // 栏目
actions.setFieldValue('status'); // 状态
actions.setFieldValue('time');
handleSearch();
},
search: (value) => {
handleSearch();
......@@ -195,17 +199,30 @@ const Infomation = () => {
renderOperation: (val, record) => {
const status = ["", "上架", "下架", "上架"];
const menu = (
<Menu onClick={() => handleDelete(record.id)}>
<Menu>
<Menu.Item>
<a>
删除
</a>
<Link to={`/content/infomationInfo?id=${record.id}`}>
编辑
</Link>
</Menu.Item>
{
// 只有待上架, 上架才有删除
record.status < 3
? <Menu.Item onClick={() => handleDelete(record.id)}>
<a>
删除
</a>
</Menu.Item>
: null
}
</Menu>
)
return (
<Space>
<a onClick={() => handleUpdateState(record.id, status[record.status] == '上架' ? 2 : 3)}>{status[record.status]}</a>
{/* 这里反向操作, 上架的对应的是下架, 待上架,下架对应的是上架 */}
<a onClick={() => handleUpdateState(record.id, status[record.status] == '上架' ? 2 : 3)}>
{status[record.status]}
</a>
<Dropdown overlay={menu}>
<a>
更多 <DownOutlined />
......
import React, { useState } from 'react';
import { Card, Select, Input, Checkbox, Upload, Form, Button} from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import { SchemaForm,Submit, FormButtonGroup, Reset, createVirtualBox, createFormActions } from '@formily/antd';
import { Card, Select, Input, Checkbox, Grid, Button } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ReutrnEle from '@/components/ReturnEle';
import { usePageStatus } from '@/hooks/usePageStatus';
import { history, Prompt } from 'umi';
import { FlexRowLayout } from '../components/FilterTable';
// import CustomUpload from '@/components/NiceForm/components/CustomUpload';
import { CustomTags } from '../components/Tags';
import CustomEditor from '../components/CustomEditor';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
const { TextArea } = Input
import { useInitialValues } from '../hooks/useInitialValues';
import { PublicApi } from '@/services/api';
import infomationInfoSchema from './schema/infomationInfoSchema';
import CustomUpload from '../components/WrapCustomUpload';
const actions = createFormActions();
const { TextArea } = Input;
const InfomationInfo = () => {
const { id, validateId } = usePageStatus();
const uploadButton = (
<div>
{<PlusOutlined />}
<div style={{ marginTop: 8 }}>Upload</div>
</div>
);
const { id, preview } = usePageStatus();
const [isTop, setIsTop] = useState(1);
const [labelIds, setLabelIds] = useState<number[]>([]);
const [submitLoading, setSubmitLoading ] = useState(false);
const initialValues = useInitialValues({id:id}, PublicApi.getManageContentInformationGet);
const isEdit = id && !preview;
const isAdd = !id && !preview;
const isView = id && preview;
// 设置form 的某字段的值
const setFormStatus = (name: string, key: string, value: any) => {
actions.setFieldState(name, state => {
// @ts-ignore
state.props['x-component-props'][key] = value
})
}
useEffect(() => {
async function getColumn() {
const res = await PublicApi.getManageContentColumnAll();
const columns = res.data.map((item) => ({label: item.name, value: item.id}));
setFormStatus("layout.columnId", "options", columns)
}
// if(!preview) {
getColumn()
// }
}, [])
useEffect(() => {
async function getLabels() {
const res = await PublicApi.getManageContentLabelAll();
const labels = res.data.map((item) => ({label: item.name, value: item.id}));
setFormStatus("layout.labelIds", "dataSource", labels)
}
// if(!preview) {
getLabels()
// }
})
useEffect(() => {
const data = initialValues.data || {}
const content = data.content;
if(content) {
const editorState = BraftEditor.createEditorState(content);
actions.setFieldValue('layout.contentLayout.content', editorState);
}
setFormStatus('layout.contentLayout.content', 'readOnly', isView);
setFormStatus('layout.imageUpload', 'imgUrl', data.imageUrl)
setIsTop(data.top);
setLabelIds(data.labelIds)
setFormStatus('layout.labelIds', 'seletedTag', data.labelIds)
}, [initialValues])
const handleSubmit = (value) => {
const content = value.content.toHTML();
const tempPostData = {
...value,
top: isTop,
labelIds: labelIds,
content: content,
}
const serviceActions = isAdd
? PublicApi.postManageContentInformationAdd
: PublicApi.postManageContentInformationUpdate
const postData = isAdd ? tempPostData : {...tempPostData, id: id};
console.log("postData", postData);
setSubmitLoading(true)
serviceActions(postData).then((data) => {
setSubmitLoading(false);
history.push('/content/infomations')
})
}
return (
<div>
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={!id ? '新建咨询' : '编辑咨询'}
title={isAdd ? '新建资讯' : isEdit ? '编辑资讯' : '查看资讯'}
>
<Card>
<Form
labelCol={{ span: 3 }}
wrapperCol={{ span: 10 }}
layout="horizontal"
labelAlign={"left"}
>
<Form.Item label="标签">
<Input />
</Form.Item>
<Form.Item label="栏目">
<Select>
<Select.Option value="demo">Demo</Select.Option>
</Select>
</Form.Item>
<Form.Item label="推荐标签">
<Select>
<Select.Option value="demo">Demo</Select.Option>
</Select>
</Form.Item>
<Form.Item label="推荐排序" wrapperCol={{span: 13}} style={{ marginBottom: 0 }} >
<Form.Item style={{ display: 'inline-block', width: 'calc(77%)' }}>
<Select>
<Select.Option value="demo">Demo</Select.Option>
</Select>
</Form.Item>
<Form.Item name="remember" valuePropName="checked" style={{ display: 'inline-block', width: 'calc(20% - 10px)', margin: '0 10px' }}>
<Checkbox>置顶</Checkbox>
</Form.Item>
</Form.Item>
<Form.Item
name="upload"
label="图片"
valuePropName="fileList"
>
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
{uploadButton}
</Upload>
</Form.Item>
<Form.Item label="摘要">
<TextArea />
</Form.Item>
<Form.Item label="内容" wrapperCol={{span: 24}} >
<div style={{border: '1px solid #DCDFE6'}}>
<BraftEditor contentStyle={{height: 256}}/>
</div>
</Form.Item>
<Form.Item wrapperCol={{ span: 12, offset: 3 }}>
<Button type="primary" htmlType="submit">
保存
</Button>
<Button style={{ margin: '0 8px' }} >
取消
</Button>
</Form.Item>
</Form>
<SchemaForm
initialValues={initialValues?.data}
onSubmit={handleSubmit}
schema={infomationInfoSchema}
editable={isAdd || isEdit}
actions={actions}
components={{
Input, Select, Submit,
TextArea, Checkbox, FlexRowLayout,
CustomUpload, CustomTags, CustomEditor
}}
expressionScope={{
isTop: (
<Checkbox
checked={!!isTop}
onChange={(e) => setIsTop(e.target.checked ? 1 : 0)}
disabled={false}
>
置顶
</Checkbox>
),
tagOnChange: (value) => {
setLabelIds(value);
},
}}
>
{
isAdd || isEdit
? (
<FormButtonGroup offset={3}>
<Submit loading={submitLoading}>提交</Submit>
<Reset>取消</Reset>
</FormButtonGroup>
)
: <></>
}
</SchemaForm>
</Card>
</PageHeaderWrapper>
</div>
)
}
export default InfomationInfo;
\ No newline at end of file
export default InfomationInfo
\ No newline at end of file
import React, { useEffect, useState } from 'react';
import { SchemaForm,Submit, FormButtonGroup, Reset, createVirtualBox, createFormActions } from '@formily/antd';
import { Card, Select, Input, Checkbox, Grid, Button } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ReutrnEle from '@/components/ReturnEle';
import { usePageStatus } from '@/hooks/usePageStatus';
import { history, Prompt } from 'umi';
import { FlexRowLayout } from '../components/FilterTable';
import CustomUpload from '@/components/NiceForm/components/CustomUpload';
import { CustomTags } from '../components/Tags';
import CustomEditor from '../components/CustomEditor';
import BraftEditor from 'braft-editor';
import { useInitialValues } from '../hooks/useInitialValues';
import { PublicApi } from '@/services/api';
import { action } from 'mobx';
const actions = createFormActions();
const { TextArea } = Input;
interface IOption {
value: number|string,
label: number|string
......@@ -64,11 +44,7 @@ const schema = {
name: 'columnId',
title: '栏目',
'x-component': 'Select',
"x-component-props": {
options: [
{label: '今日热点', value: '1'}
],
},
"x-component-props": {},
"x-rules": {
"required": true,
"message": "请选择咨询说明"
......@@ -81,10 +57,10 @@ const schema = {
'x-component': 'Select',
"x-component-props": {
options: [
{label: '头条文章', value: '1'},
{label: '轮播新闻', value: '2'},
{label: '图片新闻', value: '3'},
{label: '推荐阅读', value: '4'}
{label: '头条文章', value: 1},
{label: '轮播新闻', value: 2},
{label: '图片新闻', value: 3},
{label: '推荐阅读', value: 4}
],
},
},
......@@ -131,27 +107,22 @@ const schema = {
"wrapperCol": 12,
},
"onChange": "{{tagOnChange}}",
// dataSource: [
// { label: '政策法规', value: 1 },
// { label: '跨境交易', value: 2 },
// { label: '行业报告', value: 3 }
// ]
}
},
imageUpload: {
imageUrl: {
type: "object",
title: "图片",
name: "imageUpload",
name: "imageUrl",
"x-component": "CustomUpload",
"x-component-props": {
size: '无',
onChange: "{{uploadImage}}",
// onChange: "{{uploadImage}}",
fileMaxSize: 300
},
// "x-rules": {
// "required": true,
// "message": "请上传图片"
// },
"x-rules": {
"required": true,
"message": "请上传图片"
},
},
digest: {
type: 'string',
......@@ -193,7 +164,6 @@ const schema = {
contentStyle: {
height: 256,
},
// onChange: "{{editorChange}}",
excludeControls: [
'letter-spacing',
'line-height',
......@@ -215,132 +185,4 @@ const schema = {
}
}
const InfomationInfo = () => {
const { id, preview } = usePageStatus();
const [isTop, setIsTop] = useState(1);
const [labelIds, setLabelIds] = useState<number[]>([]);
const [imageUrl, setImageUrl] = useState("");
const [submitLoading, setSubmitLoading ] = useState(false);
const initialValues = useInitialValues({id:id}, PublicApi.getManageContentInformationGet);
const isEdit = id && !preview;
const isAdd = !id && !preview;
// 设置form 的某字段的值
const setFormStatus = (name: string, key: string, value: any) => {
actions.setFieldState(name, state => {
// @ts-ignore
state.props['x-component-props'][key] = value
})
}
useEffect(() => {
async function getColumn() {
const res = await PublicApi.getManageContentColumnAll();
const columns = res.data.map((item) => ({label: item.name, value: item.id}));
setFormStatus("layout.columnId", "options", columns)
}
if(!preview) {
getColumn()
}
}, [])
useEffect(() => {
async function getLabels() {
const res = await PublicApi.getManageContentLabelAll();
const labels = res.data.map((item) => ({label: item.name, value: item.id}));
setFormStatus("layout.labelIds", "dataSource", labels)
}
if(!preview) {
getLabels()
}
})
const handleSubmit = (value) => {
console.log(value);
const content = value.content.toHTML();
const tempPostData = {
...value,
top: isTop,
labelIds: labelIds,
content: content,
imageUrl: imageUrl
}
const serviceActions = isAdd
? PublicApi.postManageContentInformationAdd
: PublicApi.postManageContentInformationUpdate
const postData = isAdd ? tempPostData : {...tempPostData, id: id};
setSubmitLoading(true)
serviceActions(postData).then((data) => {
setSubmitLoading(false);
history.push('/content/infomations')
})
}
const handleClick = () => {
const test = {"blocks":[{"key":"1aqu1","text":"Hello World!","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":12,"style":"COLOR-669900"},{"offset":0,"length":12,"style":"FONTSIZE-13"},{"offset":0,"length":12,"style":"LETTERSPACING-0.7"},{"offset":0,"length":12,"style":"BGCOLOR-F9F9F9"},{"offset":6,"length":6,"style":"BOLD"}],"entityRanges":[],"data":{"nodeAttributes":{}}}],"entityMap":{}};
const htmlString = `<p>Hello <b>World!</b></p>`
// 将HTML字符串转换为编辑器所需要的EditorState实例
const editorState = BraftEditor.createEditorState(test)
actions.setFieldState('layout.contentLayout.content', (state) => {
//@ts-ignore
state.props['x-component-props'].value = editorState;
})
}
return (
<div>
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={!id ? '新建咨询' : '编辑咨询'}
>
<Card>
<SchemaForm
initialValues={initialValues?.data}
onSubmit={handleSubmit}
schema={schema}
editable={isAdd || isEdit}
actions={actions}
components={{
Input, Select, Submit,
TextArea, Checkbox, FlexRowLayout,
CustomUpload, CustomTags, CustomEditor
}}
expressionScope={{
isTop: (
<Checkbox onChange={(e) => setIsTop(e.target.checked ? 1 : 0)}>置顶</Checkbox>
),
tagOnChange: (value) => {
setLabelIds(value);
},
uploadImage: (values) => {
//http://10.0.0.28:88/group1/M00/00/0B/CgAAHF9rAu2AdfJMAAQ0taO65Rw451.jpg
actions.setFieldState('layout.imageUpload', (state) => {
// @ts-ignore
state.props['x-component-props'].imgUrl = values;
})
setImageUrl(values)
console.log(values)
}
}}
>
{
isAdd || isEdit
? (
<FormButtonGroup offset={3}>
<Submit loading={submitLoading}>提交</Submit>
<Reset>取消</Reset>
</FormButtonGroup>
)
: <></>
}
</SchemaForm>
</Card>
</PageHeaderWrapper>
</div>
)
}
export default InfomationInfo
\ No newline at end of file
export default schema;
\ No newline at end of file
import { createFormActions } from '@formily/antd';
const tagColorStyle = {
"1": {color: '#606266', background: '#F4F5F7'},
"2": {color: '#00B37A', background: '#EBF7F2'},
"3": {color: '#E63F3B', background: '#FFEBE6'},
}
// 设置Table 状态
const setTableStatus = (ctx, name: string, key: string, value: any) => {
// const actions = createFormActions()
// console.log(actions);
ctx.setFieldState(name, state => {
// @ts-ignore
state.props['x-component-props'][key] = value
})
}
// 设置table DataSource
const setTableDataSource = (ctx, { dataSource }) => {
// const actions = createFormActions()
ctx.setFieldState("table", state => {
//@ts-ignore
state.props["x-component-props"]["loading"] = false;
//@ts-ignore
state.props["x-component-props"]["dataSource"] = dataSource
})
}
// 获取 table DataSource,只是把loading 跟获取数据集合在一起
const getTableDataSource = async (ctx, params, service) => {
setTableStatus(ctx, "table", "loading", true);
const res = await service(params);
setTableDataSource(ctx, {dataSource: res.data})
}
interface IOption {
value: number|string,
label: number|string
}
const sortedList = (start, end) => {
let res: IOption[] = []
for(let i = start; i < end; i++ ) {
let data: IOption = {
label: i,
value: i
}
res.push(data);
}
return res
}
// 内容管理 - 广告栏目
const ADVERTISE_COLUMN_TYPE = {
"1": "会员首页-活动广告1",
"2": "会员首页-活动广告2",
"3": "会员首页-活动广告3"
}
export {
tagColorStyle,
setTableStatus,
setTableDataSource,
getTableDataSource,
sortedList,
ADVERTISE_COLUMN_TYPE
}
\ No newline at end of file
......@@ -17,6 +17,8 @@ import RuleSetting from './components/RuleSetting'
const addSchemaAction = createFormActions()
const AddRule:React.FC<{}> = (props) => {
const [isDisabled, setIsDisabled] = useState<boolean>(false)
const {
id,
preview,
......@@ -25,13 +27,19 @@ const AddRule:React.FC<{}> = (props) => {
// 整体表单提交
const formSubmit = async (values) => {
setIsDisabled(true)
const params = omit(values, ['state'])
console.log(values, params, 'values')
await PublicApi.postOrderTradingRulesBackgroundAdd(params)
setTimeout(() => {
let res: any = {}
if(pageStatus === PageStatus.EDIT){
res = await PublicApi.postOrderTradingRulesBackgroundUpdata(params)
}else if(pageStatus === PageStatus.ADD){
res = await PublicApi.postOrderTradingRulesBackgroundAdd(params)
}
if(res.code === 1000){
setIsDisabled(false)
history.goBack(-1)
}, 1000)
}
}
return (
......@@ -41,7 +49,13 @@ const AddRule:React.FC<{}> = (props) => {
title={pageStatus === PageStatus.PREVIEW ? '查看交易规则' : ( pageStatus === PageStatus.EDIT ? '编辑交易规则' : '新增交易规则' )}
className="addRule"
extra={[
<Button key="1" onClick={() => addSchemaAction.submit()} type="primary" icon={<SaveOutlined />}>
<Button
key="1"
onClick={() => addSchemaAction.submit()}
type="primary"
icon={<SaveOutlined />}
disabled={isDisabled}
>
保存
</Button>,
]}
......
import React, {useState} from 'react'
import React, {useEffect, useState} from 'react'
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus'
import { useInitValue } from '@/formSchema/effects/useInitValue'
import EyePreview from '@/components/EyePreview'
......@@ -35,6 +35,8 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
const { addSchemaAction, schema, formSubmit, onFieldChange = () => {} } = props
const [visibleChannelRroduct, setVisibleChannelRroduct] = useState(false)
const [memberRowSelection, memberRowCtl] = useRowSelectionTable({customKey: 'memberId'})
const [initValue, setInitialValue] = useState({})
const [membersLength, setMembersLength] = useState(0)
const {
id,
......@@ -42,15 +44,8 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
pageStatus
} = usePageStatus()
const initValue = useInitValue(PublicApi.getWarehouseFreightSpaceDetails)
useUnitPreview(initValue, addSchemaAction)
const fetchProductList = async (params) => {
const tradingRulesId = addSchemaAction.getFieldValue('transactionProcesssId')
const res = await PublicApi.getOrderTradingRulesProductList({
...params,
tradingRulesId,
})
const fetchMembersList = async (params) => {
const res = await PublicApi.getMemberManageAllProviderPage(params)
return res.data
}
......@@ -61,11 +56,6 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
}
const handleAddMemberBtn = () => {
// const transactionProcesss = addSchemaAction.getFieldValue('transactionProcesssId')
// if (!transactionProcesss) {
// message.error('请先选择交易流程')
// return false
// }
const checkBoxs = addSchemaAction.getFieldValue('memberIds')
memberRowCtl.setSelectedRowKeys(checkBoxs.map(v => v.productId))
memberRowCtl.setSelectRow(checkBoxs)
......@@ -77,31 +67,31 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
const tableColumns = [
{
dataIndex: 'id',
dataIndex: 'memberId',
title: 'ID',
key: 'id'
key: 'memberId'
},
{
dataIndex: 'name',
dataIndex: 'memberName',
title: '会员名称',
key: 'name',
render: (_, record) => <EyePreview url={`/memberCenter/commodityAbility/commodity/products/viewProducts?id=${record.id}`}>{_}</EyePreview>
key: 'memberName',
// render: (_, record) => <EyePreview url={`/memberCenter/commodityAbility/commodity/products/viewProducts?id=${record.id}`}>{_}</EyePreview>
},
{
dataIndex: 'type',
dataIndex: 'memberTypeName',
title: '会员类型',
key: 'type'
key: 'memberTypeName'
},
{
dataIndex: 'role',
dataIndex: 'roleName',
title: '会员角色',
key: 'role'
key: 'roleName'
},
{
dataIndex: 'class',
dataIndex: 'levelTag',
title: '会员等级',
key: 'class',
render: (text, record) => <LevelBrand level={3} />
key: 'levelTag',
render: (text, record) => <LevelBrand level={record.level} />
},
{
dataIndex: 'ctl',
......@@ -127,9 +117,9 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
const columnsSetProduct: any[] = [
{
dataIndex: 'id',
dataIndex: 'memberId',
title: 'ID',
key: 'id'
key: 'memberId'
},
{
dataIndex: 'name',
......@@ -137,20 +127,20 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
key: 'name'
},
{
dataIndex: 'type',
dataIndex: 'memberTypeName',
title: '会员类型',
key: 'type'
key: 'memberTypeName'
},
{
dataIndex: 'role',
dataIndex: 'roleName',
title: '会员角色',
key: 'role'
key: 'roleName'
},
{
dataIndex: 'class',
dataIndex: 'levelTag',
title: '会员等级',
key: 'class',
render: (text, record) => <LevelBrand level={3} />
key: 'levelTag',
render: (text, record) => <LevelBrand level={record.level} />
},
]
......@@ -228,7 +218,6 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
// 会员弹框筛选select值
const fetchSelectOptions = async () => {
const res = await PublicApi.getMemberManagePageitems()
if (res.code === 1000) {
const { data = {} }: any = res
const {
......@@ -246,6 +235,38 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
return {}
}
useEffect(() => {
async function getInitValue() {
const { data } = await PublicApi.getOrderTradingRulesBackgroundDetails({id: id});
if(data.isTacitlyApprove === 2) {
const res = await getBindingMembers({id: id.toString(), current: '1', pageSize: '10'})
addSchemaAction.setFieldState('memberIds', (state) => {
state.value = res.data
})
setMembersLength(res.totalCount);
}
console.log(data, 'data')
addSchemaAction.setFieldValue('isTacitlyApprove', data.isTacitlyApprove === 1 ? 1 : 2)
setInitialValue(data)
}
if(id != '') {
getInitValue();
}
}, [id])
// 拿到绑定的会员
const getBindingMembers = async ({id = '1', current = '1', pageSize = '10'}) => {
const res = await PublicApi.getOrderTradingRulesBackgroundMember({id, current, pageSize})
return res.data
}
const paginationChange = async (page: number, size: number) => {
if(id !== '') {
const result = await getBindingMembers({id, current: page.toString(), pageSize: size.toString()})
addSchemaAction.setFieldValue('memberIds', result.data)
}
}
return (
<>
<NiceForm
......@@ -255,6 +276,8 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
expressionScope={{
tableColumns,
tableAddButton,
paginationChange,
membersLength
}}
components={{
SelectProcesss,
......@@ -263,7 +286,6 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
FormEffectHooks.onFormInputChange$().subscribe(() => {
onFieldChange()
})
createAddContractTemplateEffect(addSchemaAction)
}}
onSubmit={handleSubmit}
actions={addSchemaAction}
......@@ -278,7 +300,7 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
visible={visibleChannelRroduct}
columns={columnsSetProduct}
rowSelection={memberRowSelection}
fetchTableData={params => fetchProductList(params)}
fetchTableData={params => fetchMembersList(params)}
formilyProps={
{
ctx: {
......@@ -301,13 +323,10 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
}
tableProps={{
rowKey: 'memberId',
// pagination: { position: ['none', 'topRight'], size: 'small', simple: true, disabled: true}
// pagination: false
}}
/>
</>
)
}
......
import React, { useState, useRef, useEffect } from 'react'
import styled from 'styled-components'
import { ISchemaFormProps, ISchemaFieldProps, ISchemaFieldComponentProps, createFormActions, useFieldState } from '@formily/antd'
import { Button, Space, Row, Col, Tag } from 'antd'
import { PlusOutlined, DeleteColumnOutlined, EditOutlined, DeleteOutlined, CaretUpOutlined, CaretDownOutlined, EyeOutlined } from '@ant-design/icons'
import { ISchemaFieldComponentProps, createFormActions, useFieldState } from '@formily/antd'
import { Row, Col, Tag } from 'antd'
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
import cx from 'classnames'
import { PublicApi } from '@/services/api'
import { findItemAndDelete } from '@/utils'
......@@ -63,7 +63,7 @@ const SelectProcesss = (props: ISchemaFieldComponentProps) => {
const value: number[] = props.value || []
useEffect(() => {
PublicApi.getOrderTradingRulesTransactionProcessList().then(res => {
PublicApi.getOrderProcessRuleConfigList().then(res => {
setFieldState({
dataSource: res.data,
showMore
......
......@@ -19,10 +19,9 @@ const TransactionRules: React.FC<{}> = () => {
const ref = useRef<any>({})
const fetchData = (params: any) => {
console.log(params, 'params')
if(!params?.name) delete params.name
return new Promise((resolve, reject) => {
PublicApi.getOrderTradingRulesList(params).then(res => {
PublicApi.getOrderTradingRulesBackgroundList(params).then(res => {
const { data } = res
resolve(data)
})
......@@ -47,11 +46,11 @@ const TransactionRules: React.FC<{}> = () => {
{text}
</EyePreview>
},
{
title: '交易流程名称',
dataIndex: 'transactionProcess',
key: 'transactionProcess',
},
// {
// title: '交易流程名称',
// dataIndex: 'transactionProcess',
// key: 'transactionProcess',
// },
{
title: '操作时间',
dataIndex: 'operationTime',
......@@ -107,7 +106,7 @@ const TransactionRules: React.FC<{}> = () => {
];
const confirm = (record: any) => {
PublicApi.postOrderTradingRulesUpdateState({ id: record.id, state: record.state ? 0 : 1 }).then(res => {
PublicApi.postOrderTradingRulesBackgroundUpdateState({ id: record.id, state: record.state ? 0 : 1 }).then(res => {
ref.current.reload()
})
}
......@@ -117,7 +116,7 @@ const TransactionRules: React.FC<{}> = () => {
}
const handelDelete = (record: any) => {
PublicApi.postOrderTradingRulesDelete({ id: record.id }).then(res => {
PublicApi.postOrderTradingRulesBackgroundDelete({ id: record.id }).then(res => {
if(res.code === 1000)
ref.current.reload()
})
......
......@@ -2,68 +2,67 @@ import React, {useState, useRef, useEffect} from 'react'
import { history } from 'umi'
import { Space, Card, Col, Row, Table } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ReutrnEle from '@/components/ReturnEle';
import ReutrnEle from '@/components/ReturnEle'
import { PublicApi } from '@/services/api'
import EyePreview from '@/components/EyePreview';
import LevelBrand from '@/pages/member/components/LevelBrand';
import EyePreview from '@/components/EyePreview'
import LevelBrand from '@/pages/member/components/LevelBrand'
import { GetOrderTradingRulesBackgroundDetailsResponse, GetOrderTradingRulesBackgroundMemberResponse } from '@/services/OrderApi'
import { StandardTable } from 'god'
const AddRule:React.FC<{}> = (props) => {
const [membersList, setMembersList] = useState<GetOrderTradingRulesBackgroundMemberResponse>()
const [ruleDetails, setRuleDetails] = useState<GetOrderTradingRulesBackgroundDetailsResponse>()
const { id } = history.location.query
useEffect(() => {
// 获取规则详情
PublicApi.getOrderTradingRulesBackgroundDetails({id, current: '1', pageSize: '10'}).then(res => {
const { data } = res
setRuleDetails(data)
})
}, [])
const fetchData = (params) => {
return new Promise((resolve, reject) => {
// 获取绑定的会员列表
PublicApi.getOrderTradingRulesBackgroundMember({id, ...params}).then(res => {
const { data } = res
resolve(data)
})
})
}
const tableColumns = [
{
dataIndex: 'id',
dataIndex: 'memberId',
title: 'ID',
key: 'id'
key: 'memberId'
},
{
dataIndex: 'name',
dataIndex: 'memberName',
title: '会员名称',
key: 'name',
render: (_, record) => <EyePreview url={`/memberCenter/commodityAbility/commodity/products/viewProducts?id=${record.id}`}>{_}</EyePreview>
key: 'memberName',
// render: (_, record) => <EyePreview url={`/memberCenter/commodityAbility/commodity/products/viewProducts?id=${record.id}`}>{_}</EyePreview>
},
{
dataIndex: 'type',
dataIndex: 'memberTypeName',
title: '会员类型',
key: 'type'
key: 'memberTypeName'
},
{
dataIndex: 'role',
dataIndex: 'roleName',
title: '会员角色',
key: 'role'
key: 'roleName'
},
{
dataIndex: 'class',
dataIndex: 'levelTag',
title: '会员等级',
key: 'class',
render: (text, record) => <LevelBrand level={text} />
key: 'levelTag',
render: (text, record) => <LevelBrand level={record.level} />
},
]
const tableData = [
{
id: 2,
name: '土豪会员',
type: '大众会员',
role: '大众',
class: 2
},
{
id: 3,
name: '高级会员',
type: '一般会员',
role: '群众',
class: 4
},
{
id: 2,
name: '底层会员',
type: '一般会员',
role: '底层',
class: 1
}
]
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
......@@ -73,24 +72,45 @@ const AddRule:React.FC<{}> = (props) => {
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="基本信息">
<Row>
<Col span={3}>
<p>交易规则名称:</p>
<Col span={3}>
<p>流程规则名称:</p>
</Col>
<Col span={21}>
<p>B2B区府办鉴定报告</p>
<p>{ruleDetails?.name}</p>
</Col>
<Col span={3}>
<p>交易流程名称</p>
<p>状态</p>
</Col>
<Col span={21}>
<p>通我们的离开过</p>
<p>{ruleDetails?.state ? '有效' : '无效'}</p>
</Col>
{/* <Col span={3}>
<p>交易流程名称:</p>
</Col>
<Col span={21}>
<p>
{
ruleDetails?.transactionProcesss.toString()
}
</p>
</Col> */}
</Row>
</Card>
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="适用会员">
<Table dataSource={tableData} columns={tableColumns} />
<Row>
<Col span={3}>
<p>是否所有会员共用:</p>
</Col>
<Col span={21}>
<p>{ruleDetails?.isTacitlyApprove === 1 ? '是' : '否'}</p>
</Col>
</Row>
<StandardTable
columns={tableColumns}
fetchTableData={(params: any) => fetchData(params)}
/>
</Card>
</Space>
</PageHeaderWrapper>
......
import React from 'react'
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { GlobalConfig } from '@/global/config';
import { PublicApi } from '@/services/api';
import { SHOP_TYPES } from '@/constants';
import { padRequiredMessage } from '@/utils';
......@@ -65,78 +61,14 @@ export const ruleDetailSchema: ISchema = padRequiredMessage({
"x-rules": [
{
required: true,
message: '请选择收货方式'
message: '请选择流程配置'
}
],
// required: true,
// "x-component": 'SearchSelect',
// "x-component-props": {
// placeholder: '请选择交易流程',
// className: 'fixed-ant-selected-down',
// fetchSearch: PublicApi.getOrderTradingRulesTransactionProcessList,
// }
},
// MEGA_LAYOUT1_1: {
// type: 'object',
// 'x-component': 'mega-layout',
// 'x-component-props': {
// label: '电子合同',
// wrapperCol: 24,
// },
// properties: {
// isElectronicContract: {
// type: 'string',
// "x-component-props": {
// children: "使用电子合同"
// },
// "x-component": "checkboxsingle",
// default: false
// },
// contractTemplateId: {
// type: 'string',
// required: true,
// enum: [],
// "x-component-props": {
// placeholder: '请选择电子合同模板'
// },
// visible: false
// }
// }
// }
}
}
}
},
// "tab-2": {
// "type": "object",
// "x-component": "tabpane",
// "x-component-props": {
// "tab": "适用商城"
// },
// "properties": {
// MEGA_LAYOUT2: {
// type: 'object',
// "x-component": 'mega-layout',
// "x-component-props": {
// labelCol: 4,
// labelAlign: 'left'
// },
// properties: {
// "shopIds": {
// "type": "array:number",
// "x-component": 'CardCheckBox',
// "x-component-props": {
// dataSource: GlobalConfig.web.shopInfo
// },
// "title": "适用商城",
// required: true,
// }
// }
// }
// }
// },
"tab-2": {
type: 'object',
"x-component": 'tabpane',
......
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