Skip to content

J
jinfa-admin
Commit 40f75c73 authored by 前端-许佳敏's avatar 前端-许佳敏
Browse files
Options

feat: 内容管理,图片管理

parent 8082a402
Hide whitespace changes
Inline Side-by-side
Showing with 1211 additions and 0 deletions
src/pages/content/announcements/announceInfo.tsx 0 → 100644
View file @ 40f75c73
import React, { useState, useEffect } 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, Button } from 'antd';
import { SchemaForm, createFormActions, FormButtonGroup, Submit } from '@formily/antd'
import announceInfoSchema from './schema/announceInfoSchema';
import { Input, Select } from 'antd';
import CustomUpload from '@/components/NiceForm/components/CustomUpload';
import CustomEditor from '../components/CustomEditor';
import { useInitialValues } from '../hooks/useInitialValues';
import CustomCheckbox from '../components/CustomCheckbox';
import BraftEditor from 'braft-editor';
import { setFormStatus } from '../utils/utils';
import useCustomValidator from '../hooks/useValidator'
import { getManageContentNoticeGet, postManageContentNoticeAdd, postManageContentNoticeUpdate } from '@/services/ManageV2Api';
const actions = createFormActions();
const AdvertisementInfo = () => {
useCustomValidator();
const { id, preview } = usePageStatus();
const initialValues: any = useInitialValues({id:id}, getManageContentNoticeGet);
const [submitLoading, setSubmitLoading ] = useState(false);
const [unsaved, setUnsaved] = useState(true);
const isEdit = id && !preview;
const isAdd = !id && !preview;
const isView = id && preview;
useEffect(() => {
const data = initialValues?.data || {}
const content = data?.content;
if(content) {
const editorState = BraftEditor.createEditorState(content);
actions.setFieldValue('layout.contentLayout.content', editorState);
}
setFormStatus(actions, 'layout.contentLayout.content', 'readOnly', isView);
}, [initialValues])
const handleSubmit = (value) => {
console.log(value)
const {content, top, ...rest} = value;
const editorContent = content.toHTML();
// const { title, columnType, sort, link, imageUrl} = value;
const serviceActions = isAdd
? postManageContentNoticeAdd
: postManageContentNoticeUpdate
let tempData = {...rest, content: editorContent, top: top ? 1 : 0};
const postData = isAdd ? tempData : {...tempData, id};
setSubmitLoading(true)
setUnsaved(false)
serviceActions(postData).then((data) => {
setSubmitLoading(false);
if(data.code === 1000) {
history.push('/content/announcements')
}
})
}
const handleCancel = () => {
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>
{
isAdd || isEdit
? <span style={{color: '#ff4d4f'}}>* </span>
: null
}
栏目
</div>
)
}}
>
{
isAdd || isEdit
? (
<FormButtonGroup offset={3}>
<Submit loading={submitLoading}>提交</Submit>
<Button onClick={handleCancel}>取消</Button>
</FormButtonGroup>
)
: <></>
}
</SchemaForm>
<Prompt when={unsaved && (isAdd || isEdit)} message="您还有未保存的内容，是否确定要离开？"></Prompt>
</Card>
</PageHeaderWrapper>
)
}
export default AdvertisementInfo
src/pages/content/announcements/index.tsx 0 → 100644
View file @ 40f75c73
import React, { useEffect, useState } from 'react';
import { FilterTable, SchemaFlexRowLayout, SchemaFlexColumnLayout } 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, DeleteOutlined, UpOutlined } from '@ant-design/icons';
import { timeRange } from '@/utils/index';
import { tagColorStyle, getTableDataSource } from '../utils/utils';
import { merge } from 'rxjs'
import TablePagination from '../components/TablePagination';
import CustomSearch from '../components/CustomSearch';
const { onFormInit$, onFieldValueChange$, onFieldChange$ } = 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';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getManageContentNoticePage, postManageContentNoticeDelete, postManageContentNoticeUpdateStatus } from '@/services/ManageV2Api';
const getData = async (params: any) => {
const res = await getManageContentNoticePage(params);
return res.data
}
const Announcements = () => {
useEffect(() => {
const params = {
current: 1,
pageSize: 10
}
getTableDataSource(actions, params, getData);
}, [])
const announcementEffects = () => () => {
onFormInit$().subscribe(() => {
actions.setFieldState('FILTERS', state => {
state.visible = false;
})
})
merge(
onFieldValueChange$('columnType'),
onFieldValueChange$('status'),
onFieldValueChange$('time'),
).subscribe(
fieldState => {
if(fieldState.active && fieldState.value != null) {
handleSearch({})
}
}
)
// 页码发生改变
onFieldValueChange$('pagination').subscribe((state) => {
handleSearch({...state.value})
})
}
const handleSearch = async (params) => {
const title = actions.getFieldValue('search');
const columnType = actions.getFieldValue('columnType');
const status = actions.getFieldValue('status'); // 状态
const time = actions.getFieldValue('time');
const { st, et } = timeRange(time);
const postData = {
title: title || '',
columnType: columnType != 0 ? columnType : '',
status: status != 0 ? status : '',
startTime: st,
endTime: et,
current: 1,
pageSize: 10,
...params
}
getTableDataSource(actions, postData, getData);
}
const handleDelete = (id) => {
Modal.confirm({
title: '确定要执行这个操作？',
onOk: () => {
postManageContentNoticeDelete({id: id})
.then((data) => {
const paginationValue = actions.getFieldValue('pagination');
handleSearch({...paginationValue})
})
}
})
}
// 修改状态
const handleUpdateStatus = (id, status) => {
// 该方法是上下架 所以 enableStatus 无用，随意传
postManageContentNoticeUpdateStatus({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
})
}
return (
<PageHeaderWrapper title="公告管理">
<Card>
<FilterTable
schema={advertisementSchema}
components={{
CustomSearch,
// SchemaFlexRowLayout,
// SchemaFlexColumnLayout,
SchemaDropDown,
Select,
Table,
TablePagination
}}
actions={actions}
expressionScope={{
goToCreate: () => {
history.push(`/content/announcements/add`)
},
reset: () => {
actions.setFieldValue('search');
actions.setFieldValue('columnType');
actions.setFieldValue('status'); // 状态
actions.setFieldValue('time');
resetPagination({current: 1})
handleSearch({current: 1})
},
search: (value) => {
resetPagination({current: 1})
handleSearch({title: value, current: 1 });
},
// eslint-disable-next-line react/display-name
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>
)
})
});
},
// eslint-disable-next-line react/display-name
renderOperation: (val, record) => {
const status = ["", "上架", "下架", "上架"];
const canModify = [1, 3]
const menu = (
<Menu>
<Menu.Item>
<Link to={`/content/announcements/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={announcementEffects()}
>
</FilterTable>
</Card>
</PageHeaderWrapper>
)
}
export default Announcements;
src/pages/content/announcements/schema/announceInfoSchema.tsx 0 → 100644
View file @ 40f75c73
import { ANNOUNCE_COLUMN_TYPE, transfer2Options } from '../../utils/utils';
const columnsList = transfer2Options(ANNOUNCE_COLUMN_TYPE);
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": "最长60个字符，30个汉字"
},
{
limitByte: true, // 自定义校验规则
maxByte: 60,
}
]
},
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: columnsList,
},
"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',
],
media: {
// 如果要允许上传视频的话，需要重写uploadFn, https://www.yuque.com/braft-editor/be/gz44tn
accepts: {
video: false,
audio: false,
}
}
},
}
}
}
}
}
}
}
export default schema
src/pages/content/announcements/schema/index.tsx 0 → 100644
View file @ 40f75c73
import EyePreview from '@/components/EyePreview';
import { DownOutlined } from '@ant-design/icons';
import { TimeList } from '../../statusList';
import moment from 'moment';
import React from 'react';
import { ANNOUNCE_COLUMN_TYPE, transfer2Options } from '../../utils/utils';
const ALL = [{label: '栏目（全部）', value: 0}]
const COLUMNSOPTIONS = ALL.concat(transfer2Options(ANNOUNCE_COLUMN_TYPE));
const columns = [
{title: 'ID', dataIndex: 'id'},
{
title: '栏目', dataIndex: 'columnType',
render: (text, record) => {
return (
<div>{ANNOUNCE_COLUMN_TYPE[text]}</div>
)
}
},
{ title: '标题',
dataIndex: 'title',
render: (text: string, record: any) => (
<EyePreview
url={`/content/announcements/detail?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': 'CustomFlexRowLayout',
'x-component-props': {
justify: 'space-between',
align: 'center'
},
properties: {
'left-layout': {
type: 'object',
name: 'left-layout',
'x-component': 'CustomFlexRowLayout',
'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": 'CustomFlexColumnLayout',
properties: {
controllers: {
type: 'object',
name: 'controllers',
'x-component': 'CustomFlexRowLayout',
'x-component-props': {
justify: 'end',
},
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',
'x-component-props': {
justify: 'end'
},
properties: {
columnType: {
type: 'string',
'x-component': 'Select',
'x-component-props': {
style: {
width: '160px'
},
options: COLUMNSOPTIONS,
defaultValue: 0,
}
},
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: TimeList,
style: {
width: '160px',
}
}
}
}
}
}
}
}
},
"table": {
"key": "table",
"type": "object",
"name": "table",
"x-component": "Table",
"x-component-props": {
"columns": columns,
"rowKey": "id",
pagination: false,
// "pagination": {
// showQuickJumper: true,
// size: "small",
// "onChange": "{{paginationChange}}",
// },
// "rowSelection": "{{rowSelection}}"
}
},
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 announcementSchema
src/pages/content/imagesManagement/imageInfo.tsx 0 → 100644
View file @ 40f75c73
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, Button } from 'antd';
import { SchemaForm, createFormActions, FormButtonGroup, FormEffectHooks, Submit, Reset } from '@formily/antd'
import imageInfoSchema from './schema/imageInfoSchema';
import { Input, Select } from 'antd';
import CustomUpload from '../components/WrapCustomUpload';
import { useInitialValues } from '../hooks/useInitialValues';
import useCustomValidator from '../hooks/useValidator'
import { setFormStatus, SCENE, POSITION, transfer2Options, } from '../utils/utils';
import { getManageContentImageGet, postManageContentImageAdd, postManageContentImageUpdate } from '@/services/ManageV2Api';
const { onFieldValueChange$ } = FormEffectHooks
const actions = createFormActions();
// 暂时写死， 所在位置跟使用场景相关联，当选择Web时去除所有App
const WEB_OPTION = transfer2Options(POSITION).filter((item) => !item.label.includes("APP"))
const APP_OPTION = transfer2Options(POSITION).filter((item) => item.label.includes("APP"))
const ImageInfo = () => {
useCustomValidator();
const { id, preview } = usePageStatus();
const initialValues: any = useInitialValues({id:id}, getManageContentImageGet);
const [submitLoading, setSubmitLoading ] = useState(false);
const [unsaved, setUnsaved] = useState(true);
const isEdit = id && !preview;
const isAdd = !id && !preview;
const isView = id && preview;
const handleSubmit = (value) => {
const serviceActions = isAdd
? postManageContentImageAdd
: postManageContentImageUpdate
let tempData = value;
const postData = isAdd ? tempData : {...tempData, id};
setSubmitLoading(true)
setUnsaved(false)
serviceActions(postData).then((data) => {
setSubmitLoading(false);
if(data.code === 1000) {
history.push('/content/imagesManagement')
}
})
}
const handleCancel = () => {
history.push('/content/imagesManagement')
}
const ImageInfoEffects = () => () => {
onFieldValueChange$('layout.useScene').subscribe((state) => {
if(state.initialValue != state.value) {
actions.setFieldValue('layout.position', null)
setFormStatus(
actions,
'layout.position',
'options',
state.value == 1 ? WEB_OPTION : APP_OPTION
)
}
})
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={isAdd ? '新建图片' : isEdit ? '编辑图片' : '查看图片'}
>
<Card>
<SchemaForm
schema={imageInfoSchema}
actions={actions}
components={{
Input, Select, Submit, CustomUpload
}}
initialValues={initialValues?.data}
onSubmit={handleSubmit}
editable={isAdd || isEdit}
expressionScope={{
label: (
<div>
{
isAdd || isEdit
? <span style={{color: '#ff4d4f'}}>* </span>
: null
}
图片
</div>
)
}}
effects={ImageInfoEffects()}
>
{
isAdd || isEdit
? (
<FormButtonGroup offset={3}>
<Submit loading={submitLoading}>提交</Submit>
<Button onClick={handleCancel}>取消</Button>
</FormButtonGroup>
)
: <></>
}
</SchemaForm>
</Card>
<Prompt when={unsaved && (isAdd || isEdit)} message="您还有未保存的内容，是否确定要离开？" />
</PageHeaderWrapper>
)
}
export default ImageInfo
src/pages/content/imagesManagement/index.tsx 0 → 100644
View file @ 40f75c73
import React, { useEffect, useState } from 'react';
import { FilterTable, SchemaFlexRowLayout, SchemaFlexColumnLayout } from '../components/FilterTable';
import { Card, Input, Button, Table, Dropdown, Select, Space, Popconfirm } from 'antd';
import { createVirtualBox, createFormActions, FormEffectHooks } from '@formily/antd';
import { history, Link } from 'umi';
import { getTableDataSource } from '../utils/utils';
import ImagementSchema from './schema';
import StatusSwitch from '@/components/StatusSwitch';
import TablePagination from '../components/TablePagination';
import CustomSearch from '../components/CustomSearch'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getManageContentImagePage, postManageContentImageDelete, postManageContentImageUpdateStatus } from '@/services/ManageV2Api';
// const { Search } = Input;
const { onFieldValueChange$ } = FormEffectHooks
const SchemaButton = createVirtualBox('button', Button);
// const SchemaTable = createVirtualBox('SchemaTable', Table);
const SchemaDropDown = createVirtualBox('SchemaDropDown', Dropdown.Button);
const actions = createFormActions();
const getData = async (params: any) => {
const res = await getManageContentImagePage(params);
return res.data
}
const ImagesManagement = () => {
useEffect(() => {
const params = {
current: 1,
pageSize: 10
}
getTableDataSource(actions, params, getData);
}, [])
const ImagesManagementEffects = () => () => {
onFieldValueChange$('pagination').subscribe((state) => {
handleSearch({...state.value})
})
}
const handleSearch = async (params) => {
const title = actions.getFieldValue('search');
const postData = {
name: title || '',
current: 1,
pageSize: 10,
...params,
}
getTableDataSource(actions, postData, getData);
}
const handleDelete = (id) => {
postManageContentImageDelete({id: id})
.then((data) => {
const paginationValue = actions.getFieldValue('pagination');
handleSearch({...paginationValue})
})
}
// 修改状态
const handleUpdateStatus = (id, status) => {
const postData = {id: id, enableStatus: status, shelfStatus: 0};
postManageContentImageUpdateStatus(postData)
.then((data) => {
const paginationValue = actions.getFieldValue('pagination');
handleSearch({...paginationValue})
});
}
// 重设页码
const resetPagination = (params) => {
const paginationValue = actions.getFieldValue('pagination');
actions.setFieldValue('pagination', {
...paginationValue,
...params
})
}
return (
<PageHeaderWrapper title="图片管理">
<Card>
<FilterTable
schema={ImagementSchema}
components={{
CustomSearch,
// SchemaFlexRowLayout,
// SchemaFlexColumnLayout,
SchemaDropDown,
Select,
Table,
TablePagination,
SchemaButton
}}
effects={ImagesManagementEffects()}
actions={actions}
expressionScope={{
goToCreate: () => {
history.push(`/content/imagesManagement/add`)
},
reset: () => {
actions.setFieldValue("search");
resetPagination({current: 1})
handleSearch({name: null, current: 1})
},
search: (value) => {
resetPagination({current: 1})
handleSearch({name: value, current: 1 });
},
renderStatus: (text, record) => {
return (
<StatusSwitch
handleConfirm={() => handleUpdateStatus(record.id, record.status ^ 1)}
record={record}
fieldNames="status"
/>
)
},
renderOperation: (val, record) => {
return (
<Space>
{/* // 只有 无效 才有 修改和删除 */}
{
record.status == 0
? (
<>
<Link to={`/content/imagesManagement/detail?id=${record.id}`}>编辑</Link>
<Popconfirm
title="确定要执行这个操作吗"
onConfirm={() => handleDelete(record.id)}
okText="是"
cancelText="否"
>
<a href="#">删除</a>
</Popconfirm>
</>
)
: null
}
</Space>
)
},
}}
>
</FilterTable>
</Card>
</PageHeaderWrapper>
)
}
export default ImagesManagement;
src/pages/content/imagesManagement/schema/imageInfoSchema.tsx 0 → 100644
View file @ 40f75c73
import { SCENE, POSITION, transfer2Options, sortedList } from '../../utils/utils';
const SCENEOPTIONS = transfer2Options(SCENE);
const POSITIONOPTIONS = transfer2Options(POSITION);
const SORTLISTOPTIONS = sortedList(1, 11);
/**
* 内容管理 - 图片详情
* 下面就是一个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-component-props': {
options: SCENEOPTIONS
},
"x-rules": [{
"required": true,
"message": "请选择栏目"
}],
},
position: {
title: '所在位置',
type: 'string',
'x-component': 'Select',
'x-component-props': {
options: POSITIONOPTIONS
},
"x-rules": [{
"required": true,
"message": "请选择广告排序"
}],
},
sort: {
title: '图片排序',
type: 'string',
'x-component': 'Select',
'x-component-props': {
options: SORTLISTOPTIONS
},
"x-rules": [{
"required": true,
"message": "请选择图片排序"
}],
},
imageUrl: {
type: "object",
title: "{{label}}",
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
src/pages/content/imagesManagement/schema/index.tsx 0 → 100644
View file @ 40f75c73
import EyePreview from '@/components/EyePreview';
import React from 'react';
import { SCENE, POSITION } from '../../utils/utils'
const columns = [
{title: 'ID', dataIndex: 'id'},
{
title: '图片名称',
dataIndex: 'name',
render: (text: string, record: any) => (
<EyePreview
url={`/content/imagesManagement/detail?id=${record.id}&preview=1`}
>
{text}
</EyePreview>
)},
{
title: '使用场景',
dataIndex: 'useScene',
render: (text, record) => {
return (
<div>{SCENE[text]}</div>
)
}
},
{
title: '所在位置',
dataIndex: 'position',
render: (text, record) => {
return (
<div>{POSITION[text]}</div>
)
}
},
{title: '状态', dataIndex: 'status', render: "{{renderStatus}}"},
{title: '操作', render: "{{renderOperation}}"}
];
/**
* 图片管理列表页 schema
*/
const schema = {
type: 'object',
properties: {
layout: {
type: 'object',
// 'x-component': 'mega-layout',
'x-component': 'CustomFlexRowLayout',
'x-component-props': {
justify: 'space-between',
align: 'center'
},
properties: {
'left-layout': {
type: 'object',
name: 'left-layout',
'x-component': 'CustomFlexRowLayout',
'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": 'CustomFlexColumnLayout',
properties: {
controllers: {
type: 'object',
name: 'controllers',
'x-component': 'CustomFlexRowLayout',
'x-component-props': {
justify: 'end',
},
properties: {
search: {
type: 'string',
name: 'name',
'x-component': 'CustomSearch',
'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": false
// "rowSelection": "{{rowSelection}}"
}
},
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 schema
\ No newline at end of file
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