Skip to content

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

修改Filter index.tsx

parent d5bfa0a2
Hide whitespace changes
Inline Side-by-side
Showing with 272 additions and 113 deletions
src/pages/content/columnManagement/columnInfo.tsx
View file @ 5e2e65a3
......@@ -95,9 +95,7 @@ const ColumnInfo = () => {
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
......
src/pages/content/columnManagement/index.tsx
View file @ 5e2e65a3
import React, { useEffect, useState } from 'react';
import { FilterTable, FlexRowLayout } from '../components/FilterTable';
import { Card, Input, Button, Table, Space } from 'antd';
import { Card, Input, Button, Table, Space, Popconfirm } from 'antd';
import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
import { history, Link } from 'umi';
import EyePreview from '@/components/EyePreview';
......@@ -217,7 +217,14 @@ const columnList: React.FC<{}> = () => {
? <Link to={`/content/columnInfo?id=${record.id}`}>编辑</Link>
: null
}
<a onClick={() => handleRemove(record.id)}>删除</a>
<Popconfirm
title="确定要执行这个操作？"
onConfirm={() => handleRemove(record.id)}
okText="是"
cancelText="否"
>
<a>删除</a>
</Popconfirm>
</Space>
)
},
......
src/pages/content/components/FilterTable/index.tsx 0 → 100644
View file @ 5e2e65a3
import FilterTable from './FilterTable';
import CustomTable from './CustomTable';
import { FlexRowLayout, FlexColumnLayout } from './FlexLayout';
export {
FilterTable,
CustomTable,
FlexRowLayout,
FlexColumnLayout
}
\ No newline at end of file
src/pages/content/components/Tags/Tags.less 0 → 100644
View file @ 5e2e65a3
.tagContainer {
.selection {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
.selectionItem {
height: 24px;
font-size: 14px;
padding: 0px 7px;
margin: 0 16px 16px 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: #4279DF;
color: #fff;
border-radius: 4px;
.icon {
margin-left: 4px;
cursor: pointer;
}
}
}
.tips {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #909399;
line-height: 12px;
}
.tags {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
cursor: pointer;
.tagItem {
height: 28px;
padding: 0 6px;
background: #F4F5F7;
border-radius: 4px;
font-size: 14px;
color: #606266;
display: flex;
justify-content: center;
align-items: center;
margin-right: 16px;
}
}
}
\ No newline at end of file
src/pages/content/components/Tags/Tags.tsx 0 → 100644
View file @ 5e2e65a3
import React, { useState } from 'react';
import styles from './Tags.less';
import { CloseCircleOutlined } from '@ant-design/icons';
const Tags = (props) => {
console.log(props);
const [value, setValue] = useState<number[]>([]);
const handleItemSelect = (params) => {
console.log(params);
const { id } = params;
if(value.includes(id)) {
return;
}
setValue((state) => {
const current = state;
const res = [...current, id];
props.mutators.change(res);
return res
})
}
const handleCancel = (params) => {
const { id } = params;
setValue((state) => {
const current = state;
const res = current.filter((item) => item !== id);
props.mutators.change(res);
return res;
})
}
const dataSource = [{label: '政策法规', value: '1'},{label: '政策法规2', value: '2'}]
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>
</div>
<p className={styles.tips}>从下列标签中选择</p>
<div className={styles.tags}>
{
dataSource.map((item) => {
return (
<div className={styles.tagItem} onClick={() => handleItemSelect({id: 1})}>
政策法规
</div>
)
})
}
</div>
</div>
)
}
Tags.isFieldComponent = true
export default Tags;
src/pages/content/components/Tags/index.tsx 0 → 100644
View file @ 5e2e65a3
import CustomTags from './Tags';
export {
CustomTags
}
\ No newline at end of file
src/pages/content/hooks/useAsyncDataSource.tsx
View file @ 5e2e65a3
......@@ -4,14 +4,13 @@ const customEvent$ = createEffectHook('requestAsyncDataSource');
const useAsyncDataSource = (name: string, service: any) => {
const { dispatch, setFieldState } = createFormActions()
console.log("service");
onFormInit$().subscribe(() => {
// 这里需要调用一下loading
service().then(res => {
//请求结束可以dispatch一个自定义事件收尾，方便后续针对该事件做联动
console.log(res);
setFieldState(name, state => {
state.props["x-component-props"]["dataSource"] = res
// @ts-ignore
state.props["x-component-props"]["dataSource"] = res
})
//@ts-ignore
......
src/pages/content/infomation/index.tsx
View file @ 5e2e65a3
......@@ -8,9 +8,9 @@ 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
import { PublicApi } from '@/services/API';
const { onFormInit$ } = FormEffectHooks
const { Search } = Input;
const SchemaButton = createVirtualBox('button', Button);
const SchemaTable = createVirtualBox('SchemaTable', Table);
......@@ -218,61 +218,68 @@ const schema = {
"rowKey": "id",
"pagination": {
showQuickJumper: true,
total: 50,
current: 1,
"onChange": "{{paginationChange}}"
}
size: "small",
"onChange": "{{paginationChange}}",
},
"rowSelection": "{{rowSelection}}"
}
},
}
}
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)
})
const res = await PublicApi.getManageContentInformationPage(params);
return res.data
}
export const createEffects = () => () => {
useAsyncDataSource('table', async () => {
const {data} = await getData({});
return data;
})
}
const Infomation = () => {
const [paginationConfig, setPaginationConfig] = useState({ current: 1, pageSize: 10 })
useEffect(() => {
async function initData() {
const res = await getData({});
actions.setFieldState("table", state => {
//@ts-ignore
state.props["x-component-props"]["dataSource"] = res.data
})
const data = {
current: 1,
pageSize: 10
}
initData();
getTableDataSource(data)
}, [])
// 页码改变时
const paginationChange = (page: number, pageSize: number) => {
setPaginationConfig({current: page, pageSize: pageSize});
const name = actions.getFieldValue('search');
getTableDataSource({name: name, current: page, pageSize: pageSize})
}
// 设置Table 状态
const setTableStatus = (name: string, key: string, value: any) => {
actions.setFieldState(name, state => {
// @ts-ignore
state.props['x-component-props'][key] = value
})
}
// 设置table DataSource
const setTableDataSource = ({ dataSource }) => {
actions.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 (params) => {
setTableStatus("table", "loading", true);
const res = await getData(params);
setTableDataSource({dataSource: res.data})
}
const handleMenuClick = () => {
console.log("批量删除")
}
const infomationEffects = () => () => {
onFormInit$().subscribe(() => {
actions.setFieldState('FILTERS', state => {
state.visible = false;
......@@ -302,9 +309,9 @@ const Infomation = () => {
renderOperation: (val, record) => {
return <Button>编辑</Button>
},
paginationChange: (page, pageSize) => {
console.log(page, pageSize);
},
paginationChange: (page: number, pageSize: number) => {
paginationChange(page, pageSize)
},
batchUpdate: () => {
console.log("batchUpdate")
},
......@@ -317,6 +324,17 @@ const Infomation = () => {
</Menu>
);
},
rowSelection: {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
},
toggleFilters: () => {
actions.setFieldState('FILTERS', state => {
const visible = !state.visible;
......
src/pages/content/infomation/infomationInfo1.tsx
View file @ 5e2e65a3
import React from 'react';
import { SchemaForm,Submit, FormButtonGroup, Reset, createVirtualBox } from '@formily/antd';
import { Card, Select, Input, Checkbox, Upload } from 'antd';
import { Card, Select, Input, Checkbox, Grid } 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';
const { TextArea } = Input;
......@@ -14,12 +16,12 @@ const schema = {
properties: {
layout: {
name: 'layout',
type: 'boject',
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
"labelCol": 3,
"wrapperCol": 10,
"labelAlign": "left"
"labelAlign": "left",
},
properties: {
name: {
......@@ -35,7 +37,7 @@ const schema = {
},
},
column: {
name: 'colum',
name: 'column',
title: '栏目',
'x-component': 'Select',
"x-component-props": {
......@@ -62,53 +64,45 @@ const schema = {
},
},
sort: {
name: 'sort',
type: 'object',
'x-component': 'mega-layout',
"x-component-props": {
"label": "推荐排序",
"wrapperCol": 24,
wrapperCol: 23,
layoutProps: {
"wrapperCol": 12,
},
style: {
marginBottom: '0px'
}
marginBottom: 0
},
addonAfter: "{{isTop}}"
},
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
}
sortNum: {
name: 'sortNum',
type: 'string',
'x-component': 'Select',
'x-component-props': {
style: {
width: '98%'
}
}
}
},
// 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: {
......@@ -117,21 +111,21 @@ const schema = {
type: 'string',
'x-component': 'Input',
},
infomationTags: {
name: 'infomationTags',
title: '咨询标签',
"x-component": 'Input'
"x-component": 'CustomTags'
},
imageUpload: {
type: "object",
title: "卡片上传文件",
name: "imageUpload",
"x-component": "CustomUpload",
"x-component-props": {
size: '无'
}
},
// imageUpload: {
// type: "array",
// title: "卡片上传文件",
// name: "imageUpload",
// "x-component-props": {
// "listType": "card",
// "fileList": []
// },
// "x-component": "upload"
// },
desc: {
type: 'string',
name: 'desc',
......@@ -176,11 +170,15 @@ const InfomationInfo = () => {
<SchemaForm
onSubmit={handleSubmit}
schema={schema}
components={{ Input, Select, Submit, TextArea, Checkbox, FlexRowLayout, }}
components={{ Input, Select, Submit, TextArea, Checkbox, FlexRowLayout, CustomUpload, CustomTags}}
expressionScope={{
isTop: (
<Checkbox>置顶</Checkbox>
),
uploadShowDesc: (
<div>123</div>
)
}}
>
<FormButtonGroup offset={3}>
......
src/pages/content/tagsManagement/index.tsx
View file @ 5e2e65a3
import React, {useState, useEffect} from 'react';
import { Card, Input, Button, Table, Space } from 'antd';
import { Card, Input, Button, Table, Space, Popconfirm } from 'antd';
import { FilterTable, FlexRowLayout } from '../components/FilterTable';
import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
import { history, Link } from 'umi';
......@@ -25,8 +25,8 @@ const columns = [
)
},
{title: '标签说明', dataIndex: 'explain'},
{title: '状态', dataIndex: 'status', render: "{{renderStatus}}"},
{title: '操作', render: "{{renderOperation}}"}
{title: '状态', dataIndex: 'status', render: "{{renderStatus}}", width: 120},
{title: '操作', render: "{{renderOperation}}", width: 150}
];
const schema = {
......@@ -96,7 +96,8 @@ const schema = {
"rowKey": "id",
"pagination": {
showQuickJumper: true,
"onChange": "{{paginationChange}}"
"onChange": "{{paginationChange}}",
size: "small"
}
}
},
......@@ -114,7 +115,6 @@ const Tags = () => {
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
......@@ -125,7 +125,6 @@ const Tags = () => {
}, [])
const handleSearch = async (value) => {
console.log(value);
const res = await getData({
name: value,
current: paginationConfig.current,
......@@ -184,11 +183,9 @@ const Tags = () => {
actions={actions}
expressionScope={{
goToCreate: () => {
// console.log("goToCreate")
history.push(`/content/tagsInfo`)
},
search: (value) => {
console.log(value)
handleSearch(value)
},
renderOperation: (val, record) => {
......@@ -196,10 +193,17 @@ const Tags = () => {
<Space>
{
record.status === 0
? <Link to={`/content/columnInfo?id=${record.id}`}>编辑</Link>
? <Link to={`/content/tagsInfo?id=${record.id}`}>编辑</Link>
: null
}
<a onClick={() => handleRemove(record.id)}>删除</a>
<Popconfirm
title="确定要执行这个操作？"
onConfirm={() => handleRemove(record.id)}
okText="是"
cancelText="否"
>
<a>删除</a>
</Popconfirm>
</Space>
)
},
......
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