Skip to content

C
CivManage
Commit 2771a764 authored by Maofei94's avatar Maofei94
Browse files
Options

feat(pages/orgnazation): 人员选择

parent f208c47f
Show whitespace changes
Inline Side-by-side
Showing with 484 additions and 37 deletions
docs/components/index.md
View file @ 2771a764
......@@ -9,7 +9,6 @@ nav:
import React from 'react'
import BaseTable from '../../src/components/BaseTable'
const searchBar = {}
const BaseTableDemo = () => {
const dataSource = [...Array(50).keys()].map(i => ({
......@@ -34,13 +33,65 @@ const BaseTableDemo = () => {
title: '身高',
dataIndex: 'height',
}]
const searchBar = {
items:[{
label:'姓名',
type:'input',
dataIndex:'name',
formItemProps:{
wrapperCol:{
span:12,
}}
},
{
label:'年龄',
type:'input',
dataIndex:'age',
formItemProps:{
wrapperCol:{
span:12,
}}
},
{
label:'身高',
type:'input',
dataIndex:'height',
formItemProps:{
wrapperCol:{
span:12,
}}
},],
formProps:{
layout:'inline'
},
buttons:[
{
text:'搜索',
type:'primary',
htmlType:'submit'
},
// {
// text:'重置',
// type:'info',
// onClick:handleClick
// }
],
onCommit: () => {
console.log(111)
}
}
const handleClick =() =>{
console.log("click")
}
return (
<BaseTable
// searchBar={searchBar}
searchBar={searchBar}
// operation={operation}
dataSource={dataSource}
columns={columns}
resizable={true}
bordered={true}
// components={components}
// onRequest={onRequest}
// onFilter={onFilter}
......
src/components/BaseForm/index.js
View file @ 2771a764
import React from 'react';
import React, { useEffect } from 'react';
import { Form, Button, Select, Input } from 'antd';
import { useForm, useEffect } from 'antd/lib/form/Form';
import { useForm } from 'antd/lib/form/Form';
export const BaseButtonGroup = props => {
export const renderButtonGroup = props => {
const { buttons, wrapper = false } = props;
const bts = buttons.map(bt => {
const bts = buttons.map((bt, index) => {
const { text, ...rest } = bt;
return <Button {...rest}>{text}</Button>;
return (
<Button {...rest} key={index}>
{text}
</Button>
);
});
if (wrapper) {
const { Comp, props: wrapperProps } = wrapper;
......@@ -53,8 +57,9 @@ const BaseForm = props => {
}, []);
return (
<Form layout="horizontal" size="small" form={form} {...formProps}>
{items.map(item => {
<Form size="small" form={form} {...formProps}>
{items &&
items.map(item => {
const {
label,
dataIndex,
......@@ -76,10 +81,10 @@ const BaseForm = props => {
</Form.Item>
);
})}
<BaseButtonGroup
buttons={buttons}
wrapper={{ Comp: Form.Item, props: buttonGroupProps }}
/>
{renderButtonGroup({
buttons,
wrapper: { Comp: Form.Item, props: buttonGroupProps },
})}
</Form>
);
};
......
src/components/BaseTable/SearchBar/index.js
View file @ 2771a764
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback, useRef } from 'react';
import BaseForm from '../../BaseForm';
const SearchBar = props => {
const { items, buttons, onCommit } = props;
const { items, buttons, onCommit, formProps } = props;
const [form, setForm] = useState(null);
const getForm = f => {
console.log(f);
setForm(f);
};
useEffect(() => {
if (form) {
form.onFinish = values => {
const handleFinish = values => {
console.log(values, 'value');
onCommit(values);
};
useEffect(() => {
if (form) {
console.log(form.getFieldsValue());
}
}, []);
}, [form]);
return (
<BaseForm
items={items}
buttons={buttons}
layout="horizontal"
formProps={{ ...formProps, onFinish: handleFinish }}
getForm={getForm}
/>
);
......
src/components/BaseTable/baseTable.less
View file @ 2771a764
.base-table{
.baseTable{
width: 100%;
height: 100%;
.table{
margin-top: 20px;
}
}
src/components/BaseTable/index.jsx
View file @ 2771a764
......@@ -66,14 +66,22 @@ const renderComponents = (componentOption = {}) => {
};
// 过滤列表数据
const filterData = (datas, searches, searchVal) =>
datas.filter(data =>
searches.some(s => s.filter(data[s.dataIndex], searchVal[s.dataIndex])),
);
const filterData = (datas, searches, searchVal) =>{
return datas.filter( data =>{
return searches.every(item =>{
if(searchVal[item.dataIndex]){
return data[item.dataIndex].includes(searchVal[item.dataIndex])
}else{
return true
}
})
})
}
const BaseTable = props => {
const {
searchBar, // 筛选栏属性{list: [{filter: () => boolean, key, dataIndex, label, type, initialValue?, options?}]}
searchBar, // 筛选栏属性{items: [{filter: () => boolean, key, dataIndex, label, type, initialValue?, options?}]}
operation, // 操作栏属性，可选
dataSource, // 数据源，可选
columns, // 列，必填
......@@ -98,14 +106,14 @@ const BaseTable = props => {
onRequest(page || pagenation, search).then(res => {
console.log(res);
setDataList(
searchBar ? filterData(res.data, searchBar.list, search) : res.data,
searchBar ? filterData(res.data, searchBar.items, search) : res.data,
);
setPageNation(res.pagenation);
setLoading(false);
});
} else {
setDataList(
searchBar ? filterData(dataSource, searchBar.list, search) : dataSource,
searchBar ? filterData(dataSource, searchBar.items, search) : dataSource,
);
setPageNation(page);
}
......@@ -116,19 +124,19 @@ const BaseTable = props => {
};
const handleSearchCommit = value => {
console.log(value);
fetch(pagenation,value)
};
useEffect(() => {
fetch(pagenation);
}, [dataSource]);
return (
<div className={styles.BaseTable}>
{searchBar?.list?.length > 0 && (
<div className={styles.baseTable}>
{searchBar?.items?.length > 0 && (
<SearchBar {...searchBar} onCommit={handleSearchCommit} />
)}
<Table
className={styles.table}
dataSource={dataList}
loading={loading}
components={renderComponents(components)}
......
src/pages/database/InitDataBase.jsx
View file @ 2771a764
......@@ -9,6 +9,7 @@ import {
Tag,
Space,
notification,
Modal
} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'react-redux';
......@@ -34,6 +35,7 @@ const InitDataBase = props => {
});
const [data, setData] = useState([]); //数据库链接记录
const [option, setOption] = useState([]); //下拉列表数据
const [modalVisible, setModalVisible] = useState(false)
console.log(window.location.host);
//获取数据库链接记录
useEffect(() => {
......@@ -80,7 +82,8 @@ const InitDataBase = props => {
console.error(err);
});
}, []);
const testChlick = () => {};
//数据库初始化
const initClick = () => {};
const onValuesChange = (value, b) => {
form.setFieldsValue(value);
};
......@@ -129,6 +132,10 @@ const InitDataBase = props => {
}
form.setFieldsValue(obj);
};
//修改描述
const changeDesc = () => {
setModalVisible(true)
}
const columns = [
{
title: '服务器名或IP地址',
......@@ -160,7 +167,7 @@ const InitDataBase = props => {
dataIndex: 'name',
key: 'name',
render: () => {
return <button>修改描述</button>;
return <button onClick={ ()=>{changeDesc()}}>修改描述</button>;
},
},
{
......@@ -226,7 +233,7 @@ const InitDataBase = props => {
<Space size="large">
<Button onClick={onCheck}>测试连接</Button>
<Button htmlType="submit">保存连接</Button>
<Button htmlType="reset" onClick={testChlick}>
<Button htmlType="reset" onClick={()=>{initClick()}}>
数据库初始化
</Button>
</Space>
......@@ -257,6 +264,15 @@ const InitDataBase = props => {
}}
/>
</Card>
<Modal
title='修改描述链接'
visible={modalVisible}
maskClosable
onOk={() => setModalVisible(false)}
onCancel={() => setModalVisible(false)}
>
<div>测试</div>
</Modal>
</PageContainer>
</>
);
......
src/pages/orgnazation/DefaultComponent.jsx 0 → 100644
View file @ 2771a764
import React,{ useState, useEffect, } from 'react'
import {
Card,
TreeSelect,
Space,
Button,
Table,
Input,
Row,
Col
} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'react-redux';
import TestModal from './ModalComponent';
import ListCard from './ListCard';
import { get, post } from '../../services';
const { Search } = Input
const { TreeNode } = TreeSelect;
const treeData = [
{
title: 'Node1',
value: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-1',
},
{
title: 'Child Node2',
value: '0-0-2',
},
],
},
{
title: 'Node2',
value: '0-1',
},
];
const DefaultComponent = ()=> {
const [treeValue, setTreeValue] = useState(null)//树节点选中的值
const [tableData, setTableData] = useState([]) //table的值
const [selectedRowKeys, setSelectedRowKeys] = useState([]) //table表格checkbox配置
const [modalVisible, setModalVisible] = useState(false) //展示Modal弹窗
const [modalVisible2, setModalVisible2] = useState(false) //展示Modal弹窗
const [testPeoList, setTestPeoList] = useState([]) //测试card数组
//树节点选中的值
const treeChange = (e) =>{
setTreeValue(e)
}
//用户搜索
const handleSearch = ()=>{
console.log('handleSearch')
setModalVisible(true)
}
//导入
const handleImport = () =>{
setModalVisible(true)
}
//搜索框时间
const inputSearch = (e) =>{
console.log(e,'inputSearch')
}
const columns = [
{
title:'用户ID',
dataIndex:"userID",
key:'userID'
},
{
title:'登录名',
dataIndex:'loginName',
key:'loginName'
},
{
title:'用户姓名',
dataIndex:'userName',
key:'userName',
},
{
title:'手机号码',
dataIndex:'phone',
key:'phone'
},
{
title:'钉钉账户',
dataIndex:'ddid',
key:'ddid',
},
{
title:'微信账户',
dataIndex:'wxid',
key:'wxid'
}
]
useEffect( () =>{
get('/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew',{
OUID:24,
_version:9999,
_dc:new Date().getTime()
}).then(res =>{
if(res.success){
setTableData(res.root)
}
console.log(res)
})
const testData =[]
const test2list = []
for( let i=1; i<10 ; i++){
testData.push({
key:i,
ID:i
})
test2list.push({
label:i+"测试",
value:i+"测试",
})
}
console.log(test2list)
setTestPeoList(test2list)
},[])
//table选中框的值
const selectChange = (e) =>{
console.log(e,'e')
setSelectedRowKeys(e)
}
const confirmModal = () =>{
setModalVisible(false)
}
//table复选的配置
const rowSelection ={
selectedRowKeys,
onChange:selectChange,
}
const btnLable = [
{label:'查找用户',handle:handleSearch},
{label:'用户导入',handle:handleImport},
{label:'新建用户',handle:'newHandle'},
{label:'批量关联',handle:'relHandle'}
]
return (
<>
<PageContainer>
<Card>
<Row>
机构选择
<Col span={12}>
<TreeSelect
style={{"width":"50%"}}
treeData={treeData}
value={treeValue}
onChange={ (e) => { treeChange(e)}}
/>
</Col>
<Col span={ 8}>
<Search
placeholder="请输入"
onSearch={(e) =>{inputSearch(e)}}
style={{ width: "50%" }}
enterButton
/>
</Col>
</Row>
</Card>
<Card>
<Space>
{
btnLable && btnLable.map( (item,index) => {
return (
<Button key={index} onClick ={ ()=>{ item.handle && typeof item.handle === 'function' && item.handle()}}>{item.label}</Button>
)
})
}
</Space>
<TestModal
title='测试title'
visible = {modalVisible}
maskClosable
onOk={() => confirmModal()}
onCancel={() => setModalVisible(false)}
bodyStyle ={{width:"100%",height:"100%",}}
style= {{top:20}}
width="1000px"
destroyOnClose={true}
>
<ListCard optionsList ={testPeoList}></ListCard>
</TestModal>
</Card>
<Card>
<div>一般用户的用户列表</div>
<Table
rowSelection={rowSelection}
columns={columns}
dataSource ={tableData}
bordered
rowKey='userID'
></Table>
</Card>
</PageContainer>
</>
)
}
export default connect()(DefaultComponent)
\ No newline at end of file
src/pages/orgnazation/ListCard.jsx 0 → 100644
View file @ 2771a764
import React, { useState, useEffect, useCallback} from 'react'
import ListCardItem from './listCardItem'
import { get, post } from '../../services';
const ListCard = (props) =>{
const [valueList, setValueList]=useState([])
const [testList, setTestList] = useState([])
const { optionsList} = props
// const getValueCallback = (value,index) => {
// console.log(value,index)
// console.log(valueList,'valueList1```')
// setValueList(valueList[index]=value)
// console.log(valueList,'valueList')
// }
const getValueCallback = useCallback(
(value,index) => {
console.log(value,index)
console.log(valueList,'valueList1```')
setValueList(valueList[index]=value)
console.log(valueList,'valueList')
},[])
useEffect(()=>{
const defaultConfig ={
optionsList:[],
title:'默认组',
id:'',
}
get("/Cityinterface/rest/services/OMS.svc/U_GetUserListForBatchOper?OUID=24&_version=9999&_dc=1603781551787").then(res =>{
const list = []
res && res.map(item =>{
list.push({...defaultConfig,...item})
})
setTestList(list)
})
},[])
return (
<>
{
testList && testList.map((item,index) =>{
return (<ListCardItem {...item} itemid={index} key={index}
getValueCallback={getValueCallback}></ListCardItem>)
})
}
</>
)
}
export default ListCard
\ No newline at end of file
src/pages/orgnazation/ListCardItem.less 0 → 100644
View file @ 2771a764
@import '~antd/es/style/themes/default.less';
.test {
display: flex;
flex-wrap: wrap;
border: 1px solid chartreuse;
margin-top: 20px;
}
.checkdiv {
display: flex;
justify-content: space-between;
.check {
flex: 1;
}
}
\ No newline at end of file
src/pages/orgnazation/ModalComponent.jsx 0 → 100644
View file @ 2771a764
import React from 'react'
import {
Modal
} from 'antd'
const CardModal = (props) =>{
console.log(props)
const defaultCofig = {
title:'测试',
visible:false,
}
const config = { ...defaultCofig, ...props}
return (
<Modal
{...config}
style={{width:"1000px"}}
>
{props.children}
</Modal>
)
}
export default CardModal
\ No newline at end of file
src/pages/orgnazation/listCardItem.jsx 0 → 100644
View file @ 2771a764
import React,{ useState ,useEffect} from 'react'
import {
Checkbox,
Row,
Col
} from 'antd';
import styles from './ListCardItem.less'
const CheckGroup = Checkbox.Group;
const ListCardItem = (props) =>{
console.log(props)
const [ indeterminate, setIndeterminate ] = useState(false)
const [ allChecked, setAllChecked ] = useState(false) //全选状态
const [ checkList, setCheckList] = useState([]) //复选框列表
const { getValueCallback, itemid, userList, OUName } = props
const defaultList = userList && userList.map( (item,index) =>{
item.label = item.userName || item.label || index
item.value = item.userID || item.label || index
return item
}) || []
const handleAllChecked = (e) =>{
const { checked } = e.target
setAllChecked(checked)
let arr = []
if(checked){
arr = defaultList.map(item =>{
return item.value
})
}else{
arr = []
}
setCheckList(arr)
setIndeterminate(false)
getValueCallback(arr,itemid)
}
const handleChecked = (e) =>{
setCheckList(e) ;
setAllChecked(e.length === defaultList.length)
setIndeterminate(!!e.length && e.length <defaultList.length)
getValueCallback(e,itemid)
}
return (
<>
<div className ={`${styles.test}`}>
<div style={{width:"100%"}}>
<Checkbox
indeterminate = { indeterminate}
checked={ allChecked}
onChange= { (e) =>{ handleAllChecked(e)}}
>{OUName}</Checkbox>
</div>
<div style={{width:"100%"}} className = {styles.checkdiv}>
{defaultList && defaultList.length>0 && <CheckGroup className = {styles.check} onChange = {(e) => { handleChecked(e)}} value={checkList} options = {defaultList} /> }
</div>
</div>
</>
)
}
export default ListCardItem
\ No newline at end of file
src/routes/config.js
View file @ 2771a764
......@@ -5,6 +5,7 @@ import Welcome from '../pages/Welcome';
import RequestTest from '../pages/testPages/request';
import InitDataBase from '../pages/database/InitDataBase';
import ManagementDataBase from '../pages/database/ManagementDataBase';
import DefaultComponent from '../pages/orgnazation/DefaultComponent';
export default {
routes: [
{
......@@ -39,7 +40,7 @@ export default {
{
path: '/userCenter/orgList',
name: '机构列表',
component: Welcome,
component: DefaultComponent,
},
{
path: '/platformCenter/gis',
......
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