Skip to content

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

修改infomation 小写

parent d0881aeb
Hide whitespace changes
Inline Side-by-side
Showing with 176 additions and 73 deletions
src/components/UploadImage/index.tsx
View file @ eabcbe1d
import React, { useState, Fragment, forwardRef } from 'react'
import { Upload, message, Button } from 'antd'
import { LoadingOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons'
import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface'
import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface';
import { UPLOAD_TYPE } from '@/constants/index';
import cx from 'classnames'
import styles from './index.less'
......@@ -35,7 +36,7 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
action: '/api/file/file/upload',
headers: {},
data: {
fileType: 1
fileType: UPLOAD_TYPE
},
disabled: loading || disabled,
showUploadList: false,
......
src/pages/content/components/CustomEditor/index.tsx 0 → 100644
View file @ eabcbe1d
import React from 'react';
import 'braft-editor/dist/index.css';
import BraftEditor from 'braft-editor';
// const SchemaEditor = createVirtualBox('SchemaEditor', BraftEditor);
const CustomEditor = (props) => {
const editorProps = props.props['x-component-props'];
const parentProps = props.props['x-component-parent-props'];
return (
<div {...parentProps}>
<BraftEditor {...editorProps} />
</div>
)
}
CustomEditor.isFieldComponent = true;
export default CustomEditor
\ No newline at end of file
src/pages/content/components/Tags/Tags.less
View file @ eabcbe1d
......@@ -39,7 +39,7 @@
flex-direction: row;
flex-wrap: nowrap;
cursor: pointer;
user-select: none;
.tagItem {
height: 28px;
padding: 0 6px;
......
src/pages/content/components/Tags/Tags.tsx
View file @ eabcbe1d
......@@ -3,49 +3,56 @@ import styles from './Tags.less';
import { CloseCircleOutlined } from '@ant-design/icons';
const Tags = (props) => {
console.log(props);
const [value, setValue] = useState<number[]>([]);
const [tags, setTags] = useState<number[]>([]);
const handleItemSelect = (params) => {
console.log(params);
const { id } = params;
if(value.includes(id)) {
const { value } = params;
if(tags.includes(value)) {
return;
}
setValue((state) => {
const onChange = props.props['x-component-props']['onChange'];
setTags((state) => {
const current = state;
const res = [...current, id];
props.mutators.change(res);
const res = [...current, value];
!!onChange && onChange(res);
return res
})
}
const handleCancel = (params) => {
const { id } = params;
setValue((state) => {
const { value } = params;
const onChange = props.props['x-component-props']['onChange'];
setTags((state) => {
const current = state;
const res = current.filter((item) => item !== id);
props.mutators.change(res);
const res = current.filter((item) => item !== value);
!!onChange && onChange(res);
return res;
})
}
const dataSource = [{label: '政策法规', value: '1'},{label: '政策法规2', value: '2'}]
const dataSource = props.props['x-component-props']['dataSource'];
const selected = dataSource.filter((item) => tags.includes(item.value) )
return (
<div className={styles.tagContainer}>
<div className={styles.selection}>
<div className={styles.selectionItem}>
<span>政策法规</span>
<span className={styles.icon} onClick={() => handleCancel({id: 1})}><CloseCircleOutlined /></span>
</div>
{
selected.map((item) => {
return (
<div className={styles.selectionItem} key={item.value}>
<span>{item.label}</span>
<span className={styles.icon} onClick={() => handleCancel(item)}><CloseCircleOutlined /></span>
</div>
)
})
}
</div>
<p className={styles.tips}>从下列标签中选择</p>
<div className={styles.tags}>
{
dataSource.map((item) => {
return (
<div className={styles.tagItem} onClick={() => handleItemSelect({id: 1})}>
政策法规
<div className={styles.tagItem} key={item.value} onClick={() => handleItemSelect(item)}>
{item.label}
</div>
)
})
......
src/pages/content/infomation/index.tsx
View file @ eabcbe1d
......@@ -4,14 +4,14 @@ import { Card, Input, Button, Table, Dropdown, Menu, Select } from 'antd';
import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
import { history } from 'umi';
import EyePreview from '@/components/EyePreview';
import { useAsyncDataSource } from '../hooks/useAsyncDataSource';
import { DownOutlined, DeleteOutlined, UpOutlined } from '@ant-design/icons';
import { timeRange } from '@/utils/index';
import { TimeList } from '@/pages/logistics/statusList';
import { PublicApi } from '@/services/API';
import { PublicApi } from '@/services/api';
const { onFormInit$ } = FormEffectHooks
const { Search } = Input;
const SchemaButton = createVirtualBox('button', Button);
const SchemaTable = createVirtualBox('SchemaTable', Table);
const SchemaDropDown = createVirtualBox('SchemaDropDown', Dropdown.Button);
......
src/pages/content/infomation/infomationInfo1.tsx
View file @ eabcbe1d
import React from 'react';
import { SchemaForm,Submit, FormButtonGroup, Reset, createVirtualBox } from '@formily/antd';
import { Card, Select, Input, Checkbox, Grid } from 'antd';
import React, { 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';
......@@ -8,9 +8,30 @@ 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 { action } from 'mobx';
const actions = createFormActions();
const { TextArea } = Input;
interface IOption {
value: number|string,
label: number|string
}
const sortedList = (() => {
let res: IOption[] = []
for(let i = 1; i <= 10; i++ ) {
let data: IOption = {
label: i,
value: i
}
res.push(data);
}
return res
})()
const schema = {
type: 'object',
properties: {
......@@ -36,15 +57,14 @@ const schema = {
"message": "最长30个字符，15个汉字"
},
},
column: {
name: 'column',
columnId: {
name: 'columnId',
title: '栏目',
'x-component': 'Select',
"x-component-props": {
options: [
{label: '今日热点', value: '1'}
],
defaultValue: '1'
},
"x-rules": {
"required": true,
......@@ -58,12 +78,14 @@ const schema = {
'x-component': 'Select',
"x-component-props": {
options: [
{label: '推荐阅读', value: '1'}
{label: '头条文章', value: '1'},
{label: '轮播新闻', value: '2'},
{label: '图片新闻', value: '3'},
{label: '推荐阅读', value: '4'}
],
defaultValue: '1'
},
},
sort: {
sortLayout: {
type: 'object',
'x-component': 'mega-layout',
"x-component-props": {
......@@ -78,31 +100,17 @@ const schema = {
addonAfter: "{{isTop}}"
},
properties: {
sortNum: {
name: 'sortNum',
sort: {
name: 'sort',
type: 'string',
'x-component': 'Select',
'x-component-props': {
style: {
width: '98%'
}
},
options: sortedList
}
},
// isTop: {
// name: 'isTop',
// type: 'string',
// "x-component": 'Checkbox',
// 'x-mega-props': {
// style: {
// display: 'inline-block',
// width: 'calc(20% - 10px)'
// }
// },
// "x-component-props": {
// children: '置顶',
// checked: true
// }
// }
}
},
view: {
......@@ -111,24 +119,36 @@ const schema = {
type: 'string',
'x-component': 'Input',
},
infomationTags: {
name: 'infomationTags',
labelIds: {
name: 'labelIds',
title: '咨询标签',
"x-component": 'CustomTags'
"x-component": 'CustomTags',
"x-component-props": {
layoutProps: {
"wrapperCol": 12,
},
"onChange": "{{tagOnChange}}",
dataSource: [
{ label: '政策法规', value: 1 },
{ label: '跨境交易', value: 2 },
{ label: '行业报告', value: 3 }
]
}
},
imageUpload: {
type: "object",
title: "卡片上传文件",
title: "图片",
name: "imageUpload",
"x-component": "CustomUpload",
"x-component-props": {
size: '无'
size: '无',
onChange: "{{uploadImage}}",
fileMaxSize: 300
}
},
desc: {
digest: {
type: 'string',
name: 'desc',
name: 'digest',
title: '摘要',
"x-component": 'TextArea',
"x-component-props": {
......@@ -139,15 +159,45 @@ const schema = {
"message": "最长300个字符，150个汉字"
},
},
content: {
type: "string",
name: 'content',
title: '内容',
"x-component": 'TextArea',
"x-rules": {
"required": true,
"message": "最长300个字符，150个汉字"
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-component-props": {
contentStyle: {
height: 256,
},
onChange: "{{editorChange}}",
excludeControls: [
'letter-spacing',
'line-height',
'clear',
'headings',
'list-ol',
'list-ul',
'remove-styles',
'superscript',
'subscript',
'hr',
]
},
}
}
}
}
}
......@@ -156,9 +206,18 @@ const schema = {
const InfomationInfo = () => {
const { id, validateId } = usePageStatus();
const [isTop, setIsTop] = useState(1);
const [labelIds, setLabelIds] = useState<number[]>([]);
const handleSubmit = (value) => {
console.log(isTop)
console.log(labelIds);
console.log(value)
}
const handleClick = () => {
const test = {"blocks":[{"key":"63n0e","text":"TEST","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}};
}
return (
<div>
<PageHeaderWrapper
......@@ -170,15 +229,30 @@ const InfomationInfo = () => {
<SchemaForm
onSubmit={handleSubmit}
schema={schema}
components={{ Input, Select, Submit, TextArea, Checkbox, FlexRowLayout, CustomUpload, CustomTags}}
actions={actions}
components={{
Input, Select, Submit,
TextArea, Checkbox, FlexRowLayout,
CustomUpload, CustomTags, CustomEditor
}}
expressionScope={{
isTop: (
<Checkbox>置顶</Checkbox>
<Checkbox onChange={(e) => setIsTop(e.target.checked ? 1 : 0)}>置顶</Checkbox>
),
uploadShowDesc: (
<div>123</div>
)
tagOnChange: (value) => {
setLabelIds(value);
},
editorChange: (editorState) => {
console.log(editorState.toRAW())
},
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;
})
console.log(values)
}
}}
>
<FormButtonGroup offset={3}>
......@@ -186,6 +260,7 @@ const InfomationInfo = () => {
<Reset>取消</Reset>
</FormButtonGroup>
</SchemaForm>
{/* <Button onClick={}></Button> */}
</Card>
</PageHeaderWrapper>
</div>
......
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