页面搭建
xielei
parent
bd868c929f
commit
946f0f7c85
|
|
@ -1039,6 +1039,13 @@ const apiurl = {
|
|||
}
|
||||
},
|
||||
|
||||
// 全周期
|
||||
gcdsj:{
|
||||
qzqda:{
|
||||
list:service_fxdd + '/projectEvents/doc/page'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default apiurl
|
||||
|
|
|
|||
|
|
@ -53,12 +53,12 @@ const Page = () => {
|
|||
}, [])
|
||||
return (
|
||||
<div style={{ backgroundColor: '#fff', height: '100%' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center', }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center', padding: 10 }}>
|
||||
{list.map(item => <div className={url == item.img ? stylesCss.active : stylesCss.tabCheck} onClick={() => tabClick(item)}>{item.name}</div>)}
|
||||
</div>
|
||||
<Rnd
|
||||
default={{
|
||||
x: 10,
|
||||
x: 200,
|
||||
y: 60,
|
||||
width: '80%',
|
||||
height: 'calc(100% - 100px)'
|
||||
|
|
|
|||
|
|
@ -1,47 +1,54 @@
|
|||
.tabCheck{
|
||||
border-width: 0px;
|
||||
width: 125px;
|
||||
height: 36px;
|
||||
background: inherit;
|
||||
background-color: rgba(215, 223, 235, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(228, 231, 237, 1);
|
||||
border-radius: 10px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
margin: 10px 0;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-right: 5px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
background: #D7DFEB;
|
||||
border: 1px solid rgba(228, 231, 237, 1);
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
}
|
||||
.active{
|
||||
width: 125px;
|
||||
height: 36px;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(228, 231, 237, 1);
|
||||
border-bottom: 0px;
|
||||
border-radius: 10px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
margin: 10px 0;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-right: 5px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
background: #D7DFEB;
|
||||
border: 1px solid rgba(228, 231, 237, 1);
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
|
||||
color: #409EFF;
|
||||
background: #ffffff;
|
||||
|
||||
|
||||
}
|
||||
|
||||
// .fxdd_hsybjs_toolbar_item{
|
||||
// width: 120px;
|
||||
// height: 40px;
|
||||
// line-height: 40px;
|
||||
// margin-right: 5px;
|
||||
// border-radius: 10px 10px 0 0;
|
||||
// background: #D7DFEB;
|
||||
// border: 1px solid rgba(228, 231, 237, 1);
|
||||
// text-align: center;
|
||||
// font-size: 14px;
|
||||
// font-weight: 500;
|
||||
// color: #333;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// .hsybjs_checked{
|
||||
// color: #409EFF;
|
||||
// background: #ffffff;
|
||||
// }
|
||||
|
|
@ -8,6 +8,7 @@ import apiurl from '../../../../service/apiurl';
|
|||
import usePageTable from '../../../../components/crud/usePageTable2';
|
||||
import { createCrudService } from '../../../../components/crud/_';
|
||||
import {CrudOpRender_text} from '../../../../components/crud/CrudOpRender';
|
||||
import './index.less'
|
||||
|
||||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||
const Page = () => {
|
||||
|
|
@ -43,7 +44,7 @@ const Page = () => {
|
|||
downloadLink.click();
|
||||
}
|
||||
|
||||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.gcdsj.page).find_noCode);
|
||||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gcdsj.qzqda.list).find_noCode);
|
||||
|
||||
|
||||
|
||||
|
|
@ -75,7 +76,7 @@ const viewPdf = (params) => {
|
|||
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||||
<div className='time-line'>
|
||||
<Timeline>
|
||||
{tableProps.dataSource.map((item, index) => (
|
||||
{tableProps.dataSource?.map((item, index) => (
|
||||
<Timeline.Item key={index}>
|
||||
<div className='time-line-item'>
|
||||
<span style={{width:100}}>{item.eventsDate}</span>
|
||||
|
|
@ -85,12 +86,12 @@ const viewPdf = (params) => {
|
|||
<span>附件：</span>
|
||||
<Row gutter={[16]} style={{flex:1}}>
|
||||
{
|
||||
item.files.length > 0 && item.files.map(file => {
|
||||
item.files?.length > 0 && item.files?.map(file => {
|
||||
return (
|
||||
<Col span={12}>
|
||||
<div className="file-item" style={{width:"100%"}}>
|
||||
<div className='file-description'>
|
||||
{file.fileName.indexOf('.docx') > -1 ?
|
||||
{file.fileName?.indexOf('.docx') > -1 ?
|
||||
<div
|
||||
onClick={() => { download(file.fileId) }}
|
||||
style={{ cursor: 'pointer' }}
|
||||
|
|
@ -100,7 +101,7 @@ const viewPdf = (params) => {
|
|||
/>
|
||||
</div>
|
||||
:
|
||||
file.fileName.indexOf('.pdf') > -1 ?
|
||||
file.fileName?.indexOf('.pdf') > -1 ?
|
||||
<div
|
||||
onClick={() => { viewPdf(file?.fileId) }}
|
||||
style={{ cursor: 'pointer' }}
|
||||
|
|
@ -108,7 +109,7 @@ const viewPdf = (params) => {
|
|||
<FilePdfOutlined style={{ fontSize: 40 }} />
|
||||
</div>
|
||||
:
|
||||
file.fileName.indexOf('.zip') > -1 ?
|
||||
file.fileName?.indexOf('.zip') > -1 ?
|
||||
<div
|
||||
onClick={() => { download(file?.fileId) }}
|
||||
style={{ cursor: 'pointer' }}
|
||||
|
|
@ -116,7 +117,7 @@ const viewPdf = (params) => {
|
|||
<FileZipOutlined style={{ fontSize: 40 }} />
|
||||
</div>
|
||||
:
|
||||
file.fileName.indexOf('.xlsx') > -1 ?
|
||||
file.fileName?.indexOf('.xlsx') > -1 ?
|
||||
<div
|
||||
onClick={() => { download(file?.fileId) }}
|
||||
style={{ cursor: 'pointer' }}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,11 @@
|
|||
// align-items: center;
|
||||
column-gap: 20px;
|
||||
.item-right{
|
||||
flex:1
|
||||
flex:1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import React, { useEffect,useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Form, Input, Button, DatePicker } from 'antd';
|
||||
|
||||
import moment from 'moment';
|
||||
const { RangePicker } = DatePicker;
|
||||
const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
|
||||
const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
|
||||
const addBtn = role?.rule?.find(item => item.menuName == "新增");
|
||||
const searchBtn = role?.rule?.find(item => item.menuName == "查询");
|
||||
const [form] = Form.useForm();
|
||||
|
|
@ -17,16 +17,16 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
|
|||
}
|
||||
}
|
||||
delete values.tm
|
||||
setSearchVal({...values, dataSo});
|
||||
setSearchVal({ ...values, dataSo });
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||
<Form.Item label="名称" name="name">
|
||||
<Input allowClear style={{width:'150px'}}/>
|
||||
<Input allowClear style={{ width: '150px' }} />
|
||||
</Form.Item>
|
||||
<Form.Item label="发生日期" name="tm">
|
||||
<RangePicker
|
||||
|
|
@ -38,18 +38,14 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
|
|||
</Form.Item>
|
||||
{searchBtn ? <Form.Item>
|
||||
<Button type="primary" htmlType="submit">查询</Button>
|
||||
</Form.Item> : null }
|
||||
</Form.Item> : null}
|
||||
|
||||
<Form.Item>
|
||||
<Button onClick={() => form.resetFields()}>重置</Button>
|
||||
</Form.Item>
|
||||
{
|
||||
(onSave) ?
|
||||
<Form.Item>
|
||||
<Button onClick={onSave}>新增</Button>
|
||||
</Form.Item>
|
||||
:null
|
||||
}
|
||||
<Form.Item>
|
||||
<Button type="primary" onClick={onSave}>导出</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const Page = () => {
|
|||
<Row>
|
||||
<Col span={2}>
|
||||
<div style={{display:'flex',alignItems:'center'}}>
|
||||
<div style={{width:3,height:12,background:'blue',marginRight:5}}></div>
|
||||
<div style={{width:3,height:12,background:'#259def',marginRight:5}}></div>
|
||||
案卷存档</div>
|
||||
</Col>
|
||||
<Col span={10}>
|
||||
|
|
@ -76,7 +76,7 @@ const Page = () => {
|
|||
<Row>
|
||||
<Col span={2}>
|
||||
<div style={{display:'flex',alignItems:'center'}}>
|
||||
<div style={{width:3,height:12,background:'blue',marginRight:5}}></div>
|
||||
<div style={{width:3,height:12,background:'#259def',marginRight:5}}></div>
|
||||
{item.type}</div>
|
||||
</Col>
|
||||
<Col span={22}>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const Page = () => {
|
|||
<Row>
|
||||
<Col span={2}>
|
||||
<div style={{display:'flex',alignItems:'center'}}>
|
||||
<div style={{width:3,height:12,background:'blue',marginRight:5}}></div>
|
||||
<div style={{width:3,height:12,background:'#259def',marginRight:5}}></div>
|
||||
{item.type}</div>
|
||||
</Col>
|
||||
<Col span={22}>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import dayjs from 'dayjs';
|
||||
import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import { useEffect, useState,useMemo } from 'react';
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
|
||||
const Page = ({title}) => {
|
||||
const Page = ({ title = '标题' }) => {
|
||||
const [echart2, setEchart2] = useState(Object())
|
||||
const [inspectordata, setInspectorData] = useState([{}])
|
||||
const [plandata, setPlanData] = useState(Object())
|
||||
|
|
@ -48,7 +48,7 @@ const Page = ({title}) => {
|
|||
|
||||
|
||||
}
|
||||
},[plandata])
|
||||
}, [plandata])
|
||||
console.log(getPlanOption);
|
||||
|
||||
const onOk = (event, index) => {
|
||||
|
|
@ -60,20 +60,23 @@ const Page = ({title}) => {
|
|||
// getStm(params, index)
|
||||
}
|
||||
}
|
||||
useEffect(()=>{
|
||||
useEffect(() => {
|
||||
let data = [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
]
|
||||
setPlanData(data)
|
||||
]
|
||||
setPlanData(data)
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
<div style={{ fontSize: 20, fontWeight: 'bold' }}>{title}</div>
|
||||
<div style={{ fontSize: 20, fontWeight: 'bold', display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{ width: 5, height: 25, backgroundColor: '#259def', marginRight: 10 }}></div>
|
||||
{title}
|
||||
</div>
|
||||
<DatePicker.RangePicker
|
||||
style={{ width: 220, }}
|
||||
onChange={(e, index) => onOk(e, 2)}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import dayjs from 'dayjs';
|
||||
import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import { useEffect, useState,useMemo } from 'react';
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
|
||||
const Page = ({title}) => {
|
||||
const Page = ({ title = '标题' }) => {
|
||||
const [echart2, setEchart2] = useState(Object())
|
||||
const [inspectordata, setInspectorData] = useState([{}])
|
||||
const [plandata, setPlanData] = useState(Object())
|
||||
|
|
@ -48,7 +48,7 @@ const Page = ({title}) => {
|
|||
|
||||
|
||||
}
|
||||
},[plandata])
|
||||
}, [plandata])
|
||||
console.log(getPlanOption);
|
||||
|
||||
const onOk = (event, index) => {
|
||||
|
|
@ -60,20 +60,23 @@ const Page = ({title}) => {
|
|||
// getStm(params, index)
|
||||
}
|
||||
}
|
||||
useEffect(()=>{
|
||||
useEffect(() => {
|
||||
let data = [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
]
|
||||
setPlanData(data)
|
||||
]
|
||||
setPlanData(data)
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
<div style={{ fontSize: 20, fontWeight: 'bold' }}>{title}</div>
|
||||
<div style={{ fontSize: 20, fontWeight: 'bold', display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{ width: 5, height: 25, backgroundColor: '#259def', marginRight: 10 }}></div>
|
||||
{title}
|
||||
</div>
|
||||
<DatePicker.RangePicker
|
||||
style={{ width: 220, }}
|
||||
onChange={(e, index) => onOk(e, 2)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import Charts from './bincharts'
|
||||
import BarCharts from './barCharts'
|
||||
import LineCharts from './lincharts'
|
||||
import LdCharts from './ldCharts'
|
||||
|
||||
|
||||
const Page = () => {
|
||||
|
||||
|
|
@ -11,7 +13,7 @@ const Page = () => {
|
|||
<Charts />
|
||||
</div>
|
||||
<div style={{width:'33%',backgroundColor:'#ffffff',margin:5,padding:10}}>
|
||||
<Charts />
|
||||
<LdCharts />
|
||||
</div>
|
||||
<div style={{width:'33%',backgroundColor:'#ffffff',margin:5,padding:10}}>
|
||||
<BarCharts />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,136 @@
|
|||
import dayjs from 'dayjs';
|
||||
import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
|
||||
const Page = ({ title = '标题' }) => {
|
||||
const [echart2, setEchart2] = useState(Object())
|
||||
const [inspectordata, setInspectorData] = useState([{}])
|
||||
const [plandata, setPlanData] = useState(Object())
|
||||
const [problemdata, setProblemData] = useState(Object())
|
||||
const getPlanOption = useMemo((name, data) => {
|
||||
// let total = 0
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// total = total + Number(data[i].value)
|
||||
// }
|
||||
return {
|
||||
angleAxis: {
|
||||
type: 'category',
|
||||
data: ['应用服务中心', '技术管理', '综合管理', '进度管理', '质量管理', '安全管理', '其它']
|
||||
},
|
||||
radar: [
|
||||
{
|
||||
indicator: [
|
||||
{ text: '' },
|
||||
{ text: '' },
|
||||
{ text: '' },
|
||||
{ text: '' },
|
||||
{ text: '' },
|
||||
{ text: '' },
|
||||
{ text: '' },
|
||||
],
|
||||
radius: '80%',
|
||||
splitNumber: 12,
|
||||
shape: 'circle',
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: '#fff',
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#d4d4d4'
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
radiusAxis: {
|
||||
min: 0,
|
||||
max: 20,
|
||||
interval: 2,
|
||||
// 刻度
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
//刻度数值
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
// 线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
polar: {},
|
||||
series: [
|
||||
{
|
||||
stack: 'a',
|
||||
type: 'pie',
|
||||
center: ['50%', '50%'],
|
||||
selectedOffset: 0,
|
||||
radius: [0, 140],
|
||||
roseType: 'area',
|
||||
itemStyle: { //去除饼图的指示折线label
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
borderRadius: 8
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: '应用服务中心' },
|
||||
{ value: 32, name: '技术管理' },
|
||||
{ value: 30, name: '综合管理' },
|
||||
{ value: 30, name: '进度管理' },
|
||||
{ value: 28, name: '质量管理' },
|
||||
{ value: 28, name: '安全管理' },
|
||||
{ value: 18, name: '其它' },
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}, [plandata])
|
||||
console.log(getPlanOption);
|
||||
|
||||
const onOk = (event, index) => {
|
||||
if (event !== null) {
|
||||
let params = {
|
||||
stm: dayjs(new Date(event[0])).format('YYYY-MM-DD'),
|
||||
etm: dayjs(new Date(event[1])).format('YYYY-MM-DD'),
|
||||
}
|
||||
// getStm(params, index)
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
let data = [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
]
|
||||
setPlanData(data)
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
<div style={{ fontSize: 20, fontWeight: 'bold', display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{ width: 5, height: 25, backgroundColor: '#259def', marginRight: 10 }}></div>
|
||||
{title}
|
||||
</div>
|
||||
<DatePicker.RangePicker
|
||||
style={{ width: 220, }}
|
||||
onChange={(e, index) => onOk(e, 2)}
|
||||
defaultValue={[dayjs().startOf("year"), dayjs()]}
|
||||
></DatePicker.RangePicker>
|
||||
</div>
|
||||
<ReactECharts
|
||||
ref={(e) => setEchart2(e)}
|
||||
option={getPlanOption}
|
||||
style={{ height: 350 }}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Page
|
||||
|
|
@ -4,7 +4,7 @@ import ReactECharts from 'echarts-for-react';
|
|||
import { useEffect, useState, useMemo } from 'react';
|
||||
import { encode } from 'punycode';
|
||||
|
||||
const Page = ({ title }) => {
|
||||
const Page = ({ title = '标题' }) => {
|
||||
const [echart2, setEchart2] = useState(Object())
|
||||
const [inspectordata, setInspectorData] = useState([{}])
|
||||
const [plandata, setPlanData] = useState([])
|
||||
|
|
@ -41,13 +41,13 @@ const Page = ({ title }) => {
|
|||
type: 'line',
|
||||
datasetIndex: 0,
|
||||
encode: {
|
||||
x: 'name',
|
||||
y: 'value'
|
||||
x: 'name',
|
||||
y: 'value'
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'skyblue'
|
||||
color: 'skyblue'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
|
|
@ -74,7 +74,10 @@ const Page = ({ title }) => {
|
|||
return (
|
||||
<>
|
||||
<div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
<div style={{ fontSize: 20, fontWeight: 'bold' }}>{title}</div>
|
||||
<div style={{ fontSize: 20, fontWeight: 'bold', display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{ width: 5, height: 25, backgroundColor: '#259def', marginRight: 10 }}></div>
|
||||
{title}
|
||||
</div>
|
||||
<DatePicker.RangePicker
|
||||
style={{ width: 220, }}
|
||||
onChange={(e, index) => onOk(e, 2)}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React, { useState,useMemo } from 'react';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Tree, Input } from 'antd';
|
||||
const { Search } = Input;
|
||||
|
||||
const treeData = [
|
||||
const data = [
|
||||
{
|
||||
value: 'parent 1',
|
||||
key: 'parent 1',
|
||||
title: '违反水利工程建设与管理类行为',
|
||||
children: [
|
||||
{
|
||||
|
|
@ -12,33 +12,33 @@ const treeData = [
|
|||
title: '侵占、毁坏水法规定相关设施',
|
||||
children: [
|
||||
{
|
||||
value: 'leaf1',
|
||||
key: 'leaf1',
|
||||
title: '侵占、毁坏水工程及堤防、护岸...',
|
||||
},
|
||||
{
|
||||
value: 'leaf2',
|
||||
key: 'leaf2',
|
||||
title: '毁坏防汛、水文监测、水文地质...',
|
||||
},
|
||||
{
|
||||
value: 'leaf3',
|
||||
key: 'leaf3',
|
||||
title: '在水工程保护范围内，从事影响..',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'parent 1-1',
|
||||
key: 'parent 1-1',
|
||||
title: '破坏大坝管理设施、妨碍大坝',
|
||||
children: [
|
||||
{
|
||||
value: 'leaf3',
|
||||
key: 'leaf4',
|
||||
title: '毁坏大坝及其管理设施',
|
||||
},
|
||||
{
|
||||
value: 'leaf3',
|
||||
key: 'leaf5',
|
||||
title: '危害大坝安全或破坏大坝正常运行',
|
||||
},
|
||||
{
|
||||
value: 'leaf3',
|
||||
key: 'leaf6',
|
||||
title: '在岸区或坝体从事生产活动',
|
||||
},
|
||||
],
|
||||
|
|
@ -46,27 +46,75 @@ const treeData = [
|
|||
],
|
||||
},
|
||||
];
|
||||
let dataList = [];
|
||||
|
||||
const Page = () => {
|
||||
const [value, setValue] = useState();
|
||||
const [expandedKeys, setExpandedKeys] = useState([]);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||
|
||||
const filterTreeNode=useMemo((treeNode)=>{
|
||||
console.log(1111111);
|
||||
|
||||
if (!value) return false;
|
||||
return treeNode?._title?.indexOf(value) > -1;
|
||||
},[value])
|
||||
const onSearch =(e)=>{
|
||||
setValue(e)
|
||||
console.log(e);
|
||||
}
|
||||
const onExpand = (newExpandedKeys) => {
|
||||
setExpandedKeys(newExpandedKeys);
|
||||
setAutoExpandParent(false);
|
||||
|
||||
};
|
||||
const onSearch = (value) => {
|
||||
// const newExpandedKeys = dataList
|
||||
// .map((item) => {
|
||||
// if (item.title.indexOf(value) > -1) {
|
||||
// return getParentKey(item.key, data);
|
||||
// }
|
||||
// return null;
|
||||
// })
|
||||
// .filter((item, i, self) => !!(item && self.indexOf(item) === i));
|
||||
// setExpandedKeys(newExpandedKeys);
|
||||
setSearchValue(value);
|
||||
setAutoExpandParent(true);
|
||||
|
||||
};
|
||||
const treeData = useMemo(() => {
|
||||
const loop = (data) =>
|
||||
data.map((item) => {
|
||||
const strTitle = item.title;
|
||||
const index = strTitle?.indexOf(searchValue);
|
||||
const beforeStr = strTitle.substring(0, index);
|
||||
const afterStr = strTitle.slice(index + searchValue.length);
|
||||
const title =
|
||||
index > -1 ? (
|
||||
<span key={item.key}>
|
||||
{beforeStr}
|
||||
<span className="site-tree-search-value" style={{ color: 'red' }}>{searchValue}</span>
|
||||
{afterStr}
|
||||
</span>
|
||||
) : (
|
||||
<span key={item.key}>{strTitle}</span>
|
||||
);
|
||||
if (item.children) {
|
||||
return { title, key: item.key, children: loop(item.children) };
|
||||
}
|
||||
if (index > -1) {
|
||||
dataList.push(item.key)
|
||||
setExpandedKeys(dataList);
|
||||
}
|
||||
return {
|
||||
title,
|
||||
key: item.key,
|
||||
};
|
||||
});
|
||||
|
||||
return loop(data);
|
||||
}, [searchValue]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{margin:'10px 0'}}><Search onSearch={onSearch}/></div>
|
||||
<div style={{ margin: '10px 0' }}><Search onSearch={onSearch} /></div>
|
||||
<Tree
|
||||
defaultExpandAll={true}
|
||||
blockNode={false}
|
||||
onExpand={onExpand}
|
||||
expandedKeys={expandedKeys}
|
||||
treeData={treeData}
|
||||
filterTreeNode={filterTreeNode}
|
||||
autoExpandParent={autoExpandParent}
|
||||
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue