Skip to content

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

标签栏目完成

parent 84484fd6
Hide whitespace changes
Inline Side-by-side
Showing with 1045 additions and 138 deletions
config/routes/contentRoute.ts
View file @ 2dd0902c
......@@ -37,6 +37,13 @@
path: '/content/infomations',
name: 'infomations',
component: '@/pages/content/infomation'
},
{
path: '/content/infomationInfo',
name: 'infomationInfo',
component: '@/pages/content/infomation/infomationInfo',
hideInMenu: true,
hidePageHeader: true,
}
]
}
......
src/locales/zh-CN/menu.ts
View file @ 2dd0902c
......@@ -123,6 +123,7 @@ export default {
'menu.content.columnInfo': '栏目详情',
'menu.content.tagsManagement': '标签管理',
'menu.content.tagsInfo': '标签详情',
'menu.content.infomations': '资讯管理'
'menu.content.infomations': '资讯管理',
'menu.content.infomationInfo': '咨询详情'
}
// export default utils.transformDataPre(data, 'menu')
src/pages/content/columnManagement/columnInfo.tsx
View file @ 2dd0902c
import React from 'react';
import React, { useState, useEffect } from 'react';
import { SchemaForm,Submit, FormButtonGroup, Reset } from '@formily/antd';
import { Card, Select, Input, 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 { PublicApi } from '@/services/api';
interface IOption {
value: number|string,
label: number|string
}
const sortedList = (() => {
let res: IOption[] = []
for(let i = 1; i <= 30; i++ ) {
let data: IOption = {
label: i,
value: i
}
res.push(data);
}
return res
})()
const schema = {
type: 'object',
......@@ -23,11 +41,20 @@ const schema = {
name: 'name',
title: '栏目名称',
'x-component': 'Input',
"required": true,
"x-rules": {
"required": true,
"message": "请填写栏目名称"
'x-component-props': {
maxLength: 20
},
"required": true,
"x-rules": [
{
"required": true,
"message": "最长20个字符，10个汉字"
},
{
limitByte: true, // 自定义校验规则
maxByte: 20,
}
]
},
sort: {
name: 'sort',
......@@ -38,17 +65,52 @@ const schema = {
"required": true,
"message": "请选择栏目排序"
},
"x-component-props": {
options: sortedList
}
},
}
}
}
}
const useInitialValues = (id) => {
const [state, setState] = useState({})
useEffect(() => {
if(id) {
PublicApi.getManageContentColumnGet({id: id})
.then((data) => {
setState(data);
})
}
}, [id])
return state
}
const ColumnInfo = () => {
const { id, validateId } = usePageStatus();
const { id, preview } = usePageStatus();
const [ submitLoading, setSubmitLoading ] = useState(false);
const initialValues = useInitialValues(id);
const isEdit = id && !preview;
const isAdd = !id && !preview;
console.log(initialValues)
const handleSubmit = (value) => {
console.log(value)
const { id, name, sort} = value;
const serviceActions = isAdd
? PublicApi.postManageContentColumnAdd
: PublicApi.postManageContentColumnUpdate
const postData = {id, name, sort};
setSubmitLoading(true)
serviceActions(postData).then((data) => {
setSubmitLoading(false);
history.push('/content/columnsManagement')
})
}
return (
<div>
<PageHeaderWrapper
......@@ -58,14 +120,23 @@ const ColumnInfo = () => {
>
<Card>
<SchemaForm
initialValues={initialValues?.data}
onSubmit={handleSubmit}
editable={isAdd || isEdit}
schema={schema}
components={{ Input, Select, Submit }}
>
<FormButtonGroup offset={3}>
<Submit>提交</Submit>
<Reset>取消</Reset>
</FormButtonGroup>
{
isAdd || isEdit
? (
<FormButtonGroup offset={3}>
<Submit loading={submitLoading}>提交</Submit>
<Reset>取消</Reset>
</FormButtonGroup>
)
: <></>
}
</SchemaForm>
</Card>
</PageHeaderWrapper>
......
src/pages/content/columnManagement/index.tsx
View file @ 2dd0902c
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { FilterTable, FlexRowLayout } from '../components/FilterTable';
import { Card, Input, Button, Table, } from 'antd';
import { Card, Input, Button, Table, Space } from 'antd';
import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
import { history } from 'umi';
import { history, Link } from 'umi';
import EyePreview from '@/components/EyePreview';
import { useAsyncDataSource } from '../hooks/useAsyncDataSource';
import { PublicApi } from '@/services/api';
import StatusSwitch from '@/components/StatusSwitch';
const { Search } = Input;
const SchemaButton = createVirtualBox('button', Button);
......@@ -24,14 +25,17 @@ const columns = [
title: '栏目名称', dataIndex: 'name',
render: (text: string, record: any) => (
<EyePreview
url={`/content/columnInfo?id=${record.id}`}
url={`/content/columnInfo?id=${record.id}&preview=1`}
>
{text}
</EyePreview>
)
},
{title: '栏目排序', dataIndex: 'sort'},
{title: '状态', dataIndex: 'status'},
{
title: '状态', dataIndex: 'status',
render: "{{renderStatus}}"
},
{title: '操作', render: "{{renderOperation}}"}
];
......@@ -66,10 +70,11 @@ const schema = {
properties: {
search: {
type: 'string',
name: 'name',
name: 'search',
'x-component': 'Search',
'x-component-props': {
placeholder: "请填写栏目名称"
placeholder: "请填写栏目名称",
"onSearch": "{{search}}",
}
},
searchBtn: {
......@@ -77,7 +82,7 @@ const schema = {
name: 'searchBtn',
"x-component": "button",
"x-component-props": {
"onClick": "{{search}}",
"onClick": "{{reset}}",
"children": "重置",
style: {
marginLeft: '15px'
......@@ -95,13 +100,10 @@ const schema = {
"name": "table",
"x-component": "SchemaTable",
"x-component-props": {
"dataSource": [],
"columns": columns,
"rowKey": "id",
"pagination": {
showQuickJumper: true,
total: 50,
current: 1,
"onChange": "{{paginationChange}}"
}
}
......@@ -110,34 +112,89 @@ const schema = {
}
const getData = async (params) => {
let temp: any[] = [];
for(let i = 0; i < 50; i++) {
const data = {
id: i,
name: `今日热点 - ${i}`,
sort: i,
status: `有效- ${i}`,
const res = await PublicApi.getManageContentColumnPage(params)
return res.data
}
const columnList: React.FC<{}> = () => {
const [paginationConfig, setPaginationConfig] = useState({ current: 1, pageSize: 10 })
useEffect(() => {
async function initData() {
const res = await getData({name: '', current: 1, pageSize: 10});
console.log(res);
actions.setFieldState("table", state => {
//@ts-ignore
state.props["x-component-props"]["dataSource"] = res.data
})
}
initData();
}, [])
const handleModify = (value) => {
const { id, status } = value;
const postData = {
id: id,
enableStatus: (status ^ 1),
}
temp.push(data)
//@ts-ignore
PublicApi.postManageContentColumnUpdateStatus(postData).
then((data) => {
actions.setFieldState("table", state => {
//@ts-ignore
let dataSource = state.props["x-component-props"]["dataSource"];
const index = dataSource.findIndex((item) => item.id === value.id);
dataSource[index] = {
...dataSource[index],
status: (status ^ 1)
}
//@ts-ignore
state.props["x-component-props"]["dataSource"] = [...dataSource]
})
})
}
// 栏目删除
const handleRemove = (id: number) => {
///manage/contentColumn/delete
PublicApi.postManageContentColumnDelete({id: id})
.then(async (data) => {
const name = actions.getFieldValue('search');
const res = await getData({
name: name,
current: paginationConfig.current,
pageSize: paginationConfig.pageSize
});
setTableDataSource({dataSource: res.data});
})
}
const data = {
data: temp
};
return new Promise((resolve) => {
setTimeout(() => {
resolve(data)
}, 3000)
})
}
export const createEffects = () => () => {
useAsyncDataSource('table', async () => {
const {data} = await getData({});
return data;
})
}
// 页码改变时
const paginationChange = async (page: number, pageSize: number) => {
setPaginationConfig({current: page, pageSize: pageSize});
const name = actions.getFieldValue('search');
const res = await getData({name: name, current: page, pageSize: pageSize});
setTableDataSource({dataSource: res.data});
}
// 设置table DataSource
const setTableDataSource = ({ dataSource }) => {
actions.setFieldState("table", state => {
//@ts-ignore
state.props["x-component-props"]["dataSource"] = dataSource
})
}
const handleSearch = async (value) => {
const res = await getData({
name: value,
current: paginationConfig.current,
pageSize: paginationConfig.pageSize
});
setTableDataSource({dataSource: res.data})
}
const columnList: React.FC<{}> = () => {
return (
<Card>
<FilterTable
......@@ -149,17 +206,39 @@ const columnList: React.FC<{}> = () => {
// console.log("goToCreate")
history.push(`/content/columnInfo`)
},
search: () => {
console.log("123")
search: (value) => {
handleSearch(value)
},
renderOperation: (val, record) => {
return <Button>编辑</Button>
return (
<Space>
{
record.status === 0
? <Link to={`/content/columnInfo?id=${record.id}`}>编辑</Link>
: null
}
<a onClick={() => handleRemove(record.id)}>删除</a>
</Space>
)
},
renderStatus: (text, record) => {
return (
<StatusSwitch
handleConfirm={() => handleModify(record)}
record={record}
fieldNames="status"
/>
)
},
reset: () => {
actions.setFieldValue('search', '');
handleSearch('');
},
paginationChange: (page, pageSize) => {
console.log(page, pageSize);
paginationChange: (page: number, pageSize: number) => {
paginationChange(page, pageSize)
}
}}
effects={createEffects()}
// effects={createEffects()}
/>
</Card>
)
......
src/pages/content/components/FilterTable/CustomTable.tsx
View file @ 2dd0902c
import React from 'react';
import { Table } from 'antd';
import {
SchemaField,
SchemaForm,
Schema,
FormSlot,
SchemaMarkupField as Field,
FormButtonGroup,
createFormActions,
createVirtualBox,
createControllerBox,
Submit,
Reset
} from '@formily/antd';
const SchemaTable = createVirtualBox('SchemaTable', Table);
const CustomTable = (props) => {
const { column, dataSource, ...rest } = props;
return (
<div>
<SchemaTable
<Table
column={column}
dataSource={dataSource}
{...rest}
></SchemaTable>
></Table>
</div>
)
}
......
src/pages/content/components/FilterTable/FlexLayout.tsx
View file @ 2dd0902c
......@@ -3,16 +3,17 @@ import { Row, Col } from 'antd';
import { SchemaField } from "@formily/antd";
const renderCol = (schema, isLast) => {
const { flexcol = {} } = schema['x-component-props'];
return <Col {...flexcol} key={schema.path}>
const { flexcol = {}, } = schema && schema['x-component-props'] || {};
const flexProps = schema['x-flex-props'] || {}
return <Col {...flexcol} {...flexProps} key={schema.path}>
<SchemaField schema={schema.toJSON()} path={schema.path}/>
</Col>
}
const FlexRowLayout = (props) => {
const childProperties = props.schema.getOrderProperties()
const { justify = "start" } = props.props['x-component-props'] || {}
const { justify = "start", align = "top" } = props.props['x-component-props'] || {}
return (
<Row justify={justify}>
<Row justify={justify} align={align}>
{
childProperties.map((v, i, arr) => renderCol(v.schema, arr.length - 1 === i))
}
......@@ -23,6 +24,33 @@ const FlexRowLayout = (props) => {
FlexRowLayout.isVirtualFieldComponent = true
const FlexColumnLayoutStyle = {
'display': 'flex',
'flexDirection': 'column'
}
const FlexColumnLayout = (props) => {
const childProperties = props.schema.getOrderProperties()
const { style } = props.props['x-component-props'] || {};
return (
<div style={{...FlexColumnLayoutStyle, ...style}}>
{
childProperties.map((v) => {
const { flexCol = {} } = v.schema && v.schema['x-component-props'] || {};
return (
<div {...flexCol} key={v.schema.path}>
<SchemaField schema={v.schema.toJSON()} path={v.schema.path}/>
</div>
)
})
}
</div>
)
}
FlexColumnLayout.isVirtualFieldComponent = true
export {
FlexRowLayout
FlexRowLayout,
FlexColumnLayout
}
\ No newline at end of file
src/pages/content/components/FilterTable/Index.tsx
View file @ 2dd0902c
import FilterTable from './FilterTable';
import CustomTable from './CustomTable';
import { FlexRowLayout } from './FlexLayout';
import { FlexRowLayout, FlexColumnLayout } from './FlexLayout';
export {
FilterTable,
CustomTable,
FlexRowLayout
FlexRowLayout,
FlexColumnLayout
}
\ No newline at end of file
src/pages/content/hooks/useAsyncDataSource.tsx
View file @ 2dd0902c
......@@ -4,6 +4,7 @@ const customEvent$ = createEffectHook('requestAsyncDataSource');
const useAsyncDataSource = (name: string, service: any) => {
const { dispatch, setFieldState } = createFormActions()
console.log("service");
onFormInit$().subscribe(() => {
// 这里需要调用一下loading
service().then(res => {
......
src/pages/content/hooks/useInitialValues.tsx 0 → 100644
View file @ 2dd0902c
import React, { useEffect, useState } from 'react';
const useInitialValues = (params, service) => {
const [state, setState] = useState({})
useEffect(() => {
if(params.id) {
service(params).then((data) => {
setState(data);
})
}
}, [params.id])
return state
}
export {
useInitialValues
}
\ No newline at end of file
src/pages/content/infomation/index.tsx
View file @ 2dd0902c
import React from 'react';
import { Card } from 'antd';
import React, { useEffect, useState } from 'react';
import { FilterTable, FlexRowLayout, FlexColumnLayout } from '../components/FilterTable';
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 { action } from 'mobx';
const { onFormInit$ } = FormEffectHooks
const { Search } = Input;
const SchemaButton = createVirtualBox('button', Button);
const SchemaTable = createVirtualBox('SchemaTable', Table);
const SchemaDropDown = createVirtualBox('SchemaDropDown', Dropdown.Button);
const actions = createFormActions();
interface getDataParams {
current: number,
pageSize: number,
id: number,
name?: string
}
const columns = [
{title: 'ID', dataIndex: 'id'},
{
title: '栏目名称', dataIndex: 'name',
render: (text: string, record: any) => (
<EyePreview
url={`/content/columnInfo?id=${record.id}`}
>
{text}
</EyePreview>
)
},
{title: '栏目排序', dataIndex: 'sort'},
{title: '状态', dataIndex: 'status'},
{title: '操作', render: "{{renderOperation}}"}
];
/**
* 这等于是一个flex 布局
* flexRow, FlewColumn 布局的高级搜索
*/
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'
}
}
},
batchUpdate: {
type: 'object',
name: 'batchUpdata',
'x-component': 'button',
'x-component-props': {
"onClick": "{{batchUpdate}}",
"children": "批量上下架",
style: {
margin: '0 15px'
}
}
},
more: {
type: 'object',
name: 'more',
'x-component': 'SchemaDropDown',
'x-component-props': {
overlay: "{{menu}}",
children: '更多',
icon: <DownOutlined />
}
}
}
},
'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: "请填写栏目名称"
}
},
'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": "{{search}}",
"children": "重置",
}
},
}
},
'FILTERS': {
type: 'object',
name: 'FILTERS',
'x-component': 'FlexRowLayout',
'x-component-props': {
justify: 'end'
},
properties: {
columns: {
name: 'columns',
type: 'string',
'x-component': 'Select',
'x-component-props': {
options: [{
label: '栏目1',
value: '1'
}],
placeholder: '请选择栏目',
style: {
width: '160px'
}
}
},
status: {
name: 'status',
type: 'string',
'x-component': 'Select',
'x-component-props': {
options: [
{label: '全部', value: '0'},
{label: '有效', value: '1'},
{label: '无效',value: '2'}
],
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,
total: 50,
current: 1,
"onChange": "{{paginationChange}}"
}
}
},
}
}
const getData = async (params: any) => {
let temp: any[] = [];
for(let i = 0; i < 50; i++) {
const data = {
id: i,
name: `今日热点 - ${i}`,
sort: i,
status: `有效- ${i}`,
}
temp.push(data)
}
const data = {
data: temp
};
return new Promise((resolve) => {
setTimeout(() => {
resolve(data)
}, 1000)
})
}
export const createEffects = () => () => {
useAsyncDataSource('table', async () => {
const {data} = await getData({});
return data;
})
}
const Infomation = () => {
useEffect(() => {
async function initData() {
const res = await getData({});
actions.setFieldState("table", state => {
//@ts-ignore
state.props["x-component-props"]["dataSource"] = res.data
})
}
initData();
}, [])
const handleMenuClick = () => {
console.log("批量删除")
}
const infomationEffects = () => () => {
onFormInit$().subscribe(() => {
actions.setFieldState('FILTERS', state => {
state.visible = false;
})
})
}
return (
<Card>
资讯
<FilterTable
schema={schema}
components={{
Search,
FlexRowLayout,
SchemaDropDown,
FlexColumnLayout,
Select,
Table,
}}
actions={actions}
expressionScope={{
goToCreate: () => {
history.push(`/content/infomationInfo`)
},
search: () => {
console.log("123")
},
renderOperation: (val, record) => {
return <Button>编辑</Button>
},
paginationChange: (page, pageSize) => {
console.log(page, pageSize);
},
batchUpdate: () => {
console.log("batchUpdate")
},
menu: () => {
return (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1" icon={<DeleteOutlined />}>
批量删除
</Menu.Item>
</Menu>
);
},
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>
)
})
});
},
}}
effects={infomationEffects()}
/>
</Card>
)
}
......
src/pages/content/infomation/infomationInfo.tsx 0 → 100644
View file @ 2dd0902c
import React, { useState } from 'react';
import { Card, Select, Input, Checkbox, Upload, Form, Button} from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ReutrnEle from '@/components/ReturnEle';
import { usePageStatus } from '@/hooks/usePageStatus';
import { history, Prompt } from 'umi';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
const { TextArea } = Input
const InfomationInfo = () => {
const { id, validateId } = usePageStatus();
const uploadButton = (
<div>
{<PlusOutlined />}
<div style={{ marginTop: 8 }}>Upload</div>
</div>
);
return (
<div>
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={!id ? '新建咨询' : '编辑咨询'}
>
<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>
</Card>
</PageHeaderWrapper>
</div>
)
}
export default InfomationInfo;
\ No newline at end of file
src/pages/content/infomation/infomationInfo1.tsx 0 → 100644
View file @ 2dd0902c
import React from 'react';
import { SchemaForm,Submit, FormButtonGroup, Reset, createVirtualBox } from '@formily/antd';
import { Card, Select, Input, Checkbox, Upload } 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';
const { TextArea } = Input;
const schema = {
type: 'object',
properties: {
layout: {
name: 'layout',
type: 'boject',
'x-component': 'mega-layout',
'x-component-props': {
"labelCol": 3,
"wrapperCol": 10,
"labelAlign": "left"
},
properties: {
name: {
name: 'name',
title: '标题',
'x-component': 'Input',
'x-component-props': {
placeholder: '30个字符，15个汉字'
},
"x-rules": {
"required": true,
"message": "最长30个字符，15个汉字"
},
},
column: {
name: 'colum',
title: '栏目',
'x-component': 'Select',
"x-component-props": {
options: [
{label: '今日热点', value: '1'}
],
defaultValue: '1'
},
"x-rules": {
"required": true,
"message": "请选择咨询说明"
},
},
recommendedTag: {
name: 'recommendedTag',
title: '推荐标签',
type: 'string',
'x-component': 'Select',
"x-component-props": {
options: [
{label: '推荐阅读', value: '1'}
],
defaultValue: '1'
},
},
sort: {
name: 'sort',
type: 'object',
'x-component': 'mega-layout',
"x-component-props": {
"label": "推荐排序",
"wrapperCol": 24,
style: {
marginBottom: '0px'
}
},
properties: {
layout: {
type: 'object',
name: 'layout',
"x-component": 'FlexRowLayout',
"x-component-props": {
justify: 'start',
},
properties: {
sortNum: {
"x-flex-props": {
flex: 1,
style: {
margin: '0 10px 0 0 '
}
},
name: 'sortNum',
type: 'string',
'x-component': 'Select',
'x-component-props': {
options: [
{label: '推荐阅读', value: '1'}
],
defaultValue: '1',
}
},
isTop: {
name: 'isTop',
type: 'string',
"x-component": 'Checkbox',
"x-component-props": {
children: '置顶',
checked: true
}
}
}
}
}
},
view: {
name: 'view',
title: '浏览数',
type: 'string',
'x-component': 'Input',
},
infomationTags: {
name: 'infomationTags',
title: '咨询标签',
"x-component": 'Input'
},
// imageUpload: {
// type: "array",
// title: "卡片上传文件",
// name: "imageUpload",
// "x-component-props": {
// "listType": "card",
// "fileList": []
// },
// "x-component": "upload"
// },
desc: {
type: 'string',
name: 'desc',
title: '摘要',
"x-component": 'TextArea',
"x-component-props": {
placeholder: "最长300个字符，150个汉字",
},
"x-rules": {
"required": true,
"message": "最长300个字符，150个汉字"
},
},
content: {
type: "string",
name: 'content',
title: '内容',
"x-component": 'TextArea',
"x-rules": {
"required": true,
"message": "最长300个字符，150个汉字"
},
}
}
}
}
}
const InfomationInfo = () => {
const { id, validateId } = usePageStatus();
const handleSubmit = (value) => {
console.log(value)
}
return (
<div>
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={!id ? '新建咨询' : '编辑咨询'}
>
<Card>
<SchemaForm
onSubmit={handleSubmit}
schema={schema}
components={{ Input, Select, Submit, TextArea, Checkbox, FlexRowLayout, }}
expressionScope={{
isTop: (
<Checkbox>置顶</Checkbox>
)
}}
>
<FormButtonGroup offset={3}>
<Submit>提交</Submit>
<Reset>取消</Reset>
</FormButtonGroup>
</SchemaForm>
</Card>
</PageHeaderWrapper>
</div>
)
}
export default InfomationInfo
\ No newline at end of file
src/pages/content/tagsManagement/index.tsx
View file @ 2dd0902c
import React from 'react';
import { Card, Input, Button, Table, } from 'antd';
import React, {useState, useEffect} from 'react';
import { Card, Input, Button, Table, Space } from 'antd';
import { FilterTable, FlexRowLayout } from '../components/FilterTable';
import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
import { history } from 'umi';
import { history, Link } from 'umi';
import EyePreview from '@/components/EyePreview';
import { useAsyncDataSource } from '../hooks/useAsyncDataSource';
import { PublicApi } from '@/services/api';
import StatusSwitch from '@/components/StatusSwitch';
const { Search } = Input;
const SchemaButton = createVirtualBox('button', Button);
......@@ -17,14 +18,14 @@ const columns = [
title: '标签名称', dataIndex: 'name',
render: (text: string, record: any) => (
<EyePreview
url={`/content/tagsInfo?id=${record.id}`}
url={`/content/tagsInfo?id=${record.id}&preview=1`}
>
{text}
</EyePreview>
)
},
{title: '标签说明', dataIndex: 'desc'},
{title: '状态', dataIndex: 'status'},
{title: '标签说明', dataIndex: 'explain'},
{title: '状态', dataIndex: 'status', render: "{{renderStatus}}"},
{title: '操作', render: "{{renderOperation}}"}
];
......@@ -59,7 +60,7 @@ const schema = {
properties: {
search: {
type: 'string',
name: 'name',
name: 'search',
'x-component': 'Search',
'x-component-props': {
placeholder: "请填写栏目名称",
......@@ -72,7 +73,7 @@ const schema = {
name: 'searchBtn',
"x-component": "button",
"x-component-props": {
"onClick": "{{search}}",
"onClick": "{{reset}}",
"children": "重置",
style: {
marginLeft: '15px'
......@@ -95,8 +96,6 @@ const schema = {
"rowKey": "id",
"pagination": {
showQuickJumper: true,
total: 50,
current: 1,
"onChange": "{{paginationChange}}"
}
}
......@@ -105,62 +104,123 @@ const schema = {
}
const getData = async (params) => {
let temp: any[] = [];
for(let i = 0; i < 50; i++) {
const data = {
id: i,
name: `今日热点 - ${i}`,
sort: i,
status: `有效- ${i}`,
}
temp.push(data)
}
const data = {
data: temp
};
return new Promise((resolve) => {
setTimeout(() => {
resolve(data)
}, 1000)
})
const res = await PublicApi.getManageContentLabelPage(params)
return res.data
}
export const createEffects = () => () => {
useAsyncDataSource('table', async () => {
const {data} = await getData({});
return data;
})
}
const Tags = () => {
const [paginationConfig, setPaginationConfig] = useState({ current: 1, pageSize: 10 })
const handleSearch = (value) => {
console.log(value)
}
useEffect(() => {
async function initData() {
const res = await getData({name: '', current: 1, pageSize: 10});
console.log(res);
actions.setFieldState("table", state => {
//@ts-ignore
state.props["x-component-props"]["dataSource"] = res.data
})
}
initData();
}, [])
const Tags = () => {
const handleSearch = async (value) => {
console.log(value);
const res = await getData({
name: value,
current: paginationConfig.current,
pageSize: paginationConfig.pageSize
});
setTableDataSource({dataSource: res.data})
}
// 修改状态
const handleModify = (value) => {
const { id, status } = value;
const postData = {
id: id,
enableStatus: (status ^ 1),
}
//@ts-ignore
PublicApi.postManageContentLabelUpdateStatus(postData).
then((data) => {
const name = actions.getFieldValue('search');
handleSearch(name)
})
}
// 栏目删除
const handleRemove = (id: number) => {
///manage/contentColumn/delete
PublicApi.postManageContentLabelDelete({id: id})
.then(async (data) => {
const name = actions.getFieldValue('search');
handleSearch(name)
})
}
// 设置table DataSource
const setTableDataSource = ({ dataSource }) => {
actions.setFieldState("table", state => {
//@ts-ignore
state.props["x-component-props"]["dataSource"] = dataSource
})
}
// 页码改变时
const paginationChange = async (page: number, pageSize: number) => {
setPaginationConfig({current: page, pageSize: pageSize});
const name = actions.getFieldValue('search');
const res = await getData({name: name, current: page, pageSize: pageSize});
setTableDataSource({dataSource: res.data});
}
return (
<div>
<Card>
<FilterTable
onSubmit={handleSearch}
// onSubmit={handleSearch}
schema={schema}
components={{Search, FlexRowLayout}}
actions={actions}
expressionScope={{
goToCreate: () => {
// console.log("goToCreate")
history.push(`/content/tagInfo`)
},
search: (value) => {
console.log(value)
history.push(`/content/tagsInfo`)
},
search: (value) => {
console.log(value)
handleSearch(value)
},
renderOperation: (val, record) => {
return <Button>编辑</Button>
},
paginationChange: (page, pageSize) => {
console.log(page, pageSize);
}
return (
<Space>
{
record.status === 0
? <Link to={`/content/columnInfo?id=${record.id}`}>编辑</Link>
: null
}
<a onClick={() => handleRemove(record.id)}>删除</a>
</Space>
)
},
renderStatus: (text, record) => {
return (
<StatusSwitch
handleConfirm={() => handleModify(record)}
record={record}
fieldNames="status"
/>
)
},
reset: () => {
actions.setFieldValue('search', '');
handleSearch('');
},
paginationChange: (page: number, pageSize: number) => {
paginationChange(page, pageSize)
}
}}
effects={createEffects()}
// effects={createEffects()}
/>
</Card>
</div>
......
src/pages/content/tagsManagement/tagsInfo.tsx
View file @ 2dd0902c
import React from 'react';
import React, { useState, useEffect } from 'react';
import { SchemaForm,Submit, FormButtonGroup, Reset } from '@formily/antd';
import { Card, Select, Input, 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 { useInitialValues } from '../hooks/useInitialValues';
import { PublicApi } from '@/services/api';
const { TextArea } = Input;
const schema = {
......@@ -30,8 +32,8 @@ const schema = {
"message": "请填写标签名称"
},
},
sort: {
name: 'desc',
explain: {
name: 'explain',
title: '标签说明',
'x-component': 'TextArea',
"required": true,
......@@ -45,10 +47,28 @@ const schema = {
}
}
const TagInfo = () => {
const { id, validateId } = usePageStatus();
const { id, preview } = usePageStatus();
const [ submitLoading, setSubmitLoading ] = useState(false);
const initialValues = useInitialValues({id:id}, PublicApi.getManageContentLabelGet);
const isEdit = id && !preview;
const isAdd = !id && !preview;
const handleSubmit = (value) => {
console.log(value)
const { id, name, explain} = value;
const serviceActions = isAdd
? PublicApi.postManageContentLabelAdd
: PublicApi.postManageContentLabelUpdate
let tempData = {name, explain};
const postData = isAdd ? {...tempData, id: 0} : {...tempData, id};
setSubmitLoading(true)
serviceActions(postData).then((data) => {
setSubmitLoading(false);
history.push('/content/tagsManagement')
})
}
return (
<div>
......@@ -59,14 +79,22 @@ const TagInfo = () => {
>
<Card>
<SchemaForm
initialValues={initialValues?.data}
onSubmit={handleSubmit}
editable={isAdd || isEdit}
schema={schema}
components={{ Input, Select, Submit, TextArea }}
>
<FormButtonGroup offset={3}>
<Submit>提交</Submit>
<Reset>取消</Reset>
</FormButtonGroup>
{
isAdd || isEdit
? (
<FormButtonGroup offset={3}>
<Submit loading={submitLoading}>提交</Submit>
<Reset>取消</Reset>
</FormButtonGroup>
)
: <></>
}
</SchemaForm>
</Card>
</PageHeaderWrapper>
......
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