perf(pages/usercenter): siteManage perf

src/components/Modal/SiteModa.jsx

+import React from 'react'
+import {
+  Modal
+} from 'antd'
+
+const SiteModal = (props) =>{
+  console.log(props)
+  const defaultCofig = {
+    title:'测试',
+    visible:false,
+  }
+  const config = { ...defaultCofig, ...props}
+  return (
+    <Modal
+      style={{width:"1000px"}}
+      {...config}
+    >
+      {props.children}
+    </Modal>
+  )
+}
+
+export default SiteModal
\ No newline at end of file

src/pages/orgnazation/DefaultComponent.jsx

@@ -182,11 +182,6 @@ const DefaultComponent = ()=> {
   const btnLable = [
     {label:'查找用户',handle:handleSearch ,config:{ type:'primary',danger:true} },
     {label:'用户导入',handle:handleImport,config:{ type:'info',}},
-<<<<<<< Updated upstream
-=======
-    {label:'新建用户',handle:'newHandle'},
-    {label:'批量关联',handle:'relHandle'}
->>>>>>> Stashed changes
   ]
 
   return (
@@ -194,11 +189,7 @@ const DefaultComponent = ()=> {
       <PageContainer>
         <Card>
           <Row>
-<<<<<<< Updated upstream
             <Col span ={1}>
-=======
-            <Col span ={2}>
->>>>>>> Stashed changes
              <div style={{height:"30px",lineHeight:"30px"}}>
               机构选择
              </div>
@@ -220,7 +211,6 @@ const DefaultComponent = ()=> {
             /> */}
             </Col>
           </Row>
-<<<<<<< Updated upstream
           <div style={{marginTop:'20px',textAlign:'center'}}>
             <Space>
               {
@@ -233,20 +223,6 @@ const DefaultComponent = ()=> {
               }
             </Space>
           </div>          
-=======
-        </Card>
-        <Card>
-          <Space>
-            {
-              btnLable && btnLable.map( (item,index) => {
-                const { config} =item
-                return (
-                   <Button key={index}  {...config} onClick ={  ()=>{ item.handle && typeof item.handle === 'function' && item.handle()}}>{item.label}</Button>
-                )
-              })
-            }
-          </Space>
->>>>>>> Stashed changes
           <TestModal
             title='用户选择'
             visible = {modalVisible}

src/pages/orgnazation/ListCard.jsx

-import React, { useState, useEffect, useCallback} from 'react'
-import ListCardItem from './listCardItem'
+import React, { useState, useEffect, useCallback} from 'react';
+import { Spin } from 'antd';
+import ListCardItem from './listCardItem';
 import { get, post } from '../../services';
-import { orgTest} from '../../services/orgnazation/api'
+import { orgTest} from '../../services/orgnazation/api';
+
+const tip ='loading...'
 const ListCard = (props) =>{
-  const { ouid } = props
-  console.log(ouid)
+  const { ouid, searchWord } = props
   const [valueList, setValueList]=useState([])
   const [testList, setTestList] = useState([]) 
+  const [loading, setLoading] = useState(true)
   const { optionsList} = props
   const getValueCallback = useCallback(
     (value,index) => {
       console.log(value,index)
-      console.log(valueList,'valueList1```')
       setValueList(valueList[index]=value)
       console.log(valueList,'valueList')
     },[])
   useEffect(()=>{
+    setLoading(true)
     const defaultConfig ={
       optionsList:[],
       title:'默认组',
@@ -26,11 +29,15 @@ const ListCard = (props) =>{
       _version:9999,
       _dc:new Date().getTime()
     }).then(res =>{
+      setLoading(false)
       const list = []
       res &&  res.map(item =>{
         list.push({...defaultConfig,...item})
       })
       setTestList(list)
+    }).catch(err =>{
+      console.error(err)
+      setLoading(false)  
     })
     //多级嵌套测试
     orgTest().then(res =>{
@@ -38,11 +45,12 @@ const ListCard = (props) =>{
     })
   },[ouid])
   return (
-    <>
+    <> 
         {
+        loading? <Spin size="large" spinning = {loading} tip={tip} style={{position:'absolute',top:'30%',left:'0',right:'0',bottom:'0'}}/> :
          testList && testList.map((item,index) =>{
             return (<ListCardItem {...item} itemid={index} key={index}
-              getValueCallback={getValueCallback}></ListCardItem>)
+              getValueCallback={getValueCallback} searchWord ={ searchWord} {...props}></ListCardItem>)
           })
         }
     </>

src/pages/orgnazation/ListCardItem.less

 
+:global{
+  .spans span{
+    background-color: red !important;
+  }
+}
 .divBox {
   display: flex;
   flex-wrap: wrap;
@@ -13,11 +18,19 @@
   .checkdiv {
     display: flex;
     margin-left: 20px;
-   
     justify-content: space-between;
     .check {
       margin: 10px 0 ;
       flex: 1;
+      .spans {
+        background-color: red !important;
+        span{
+          font-size: 200px;
+          display: none;
+          color: chartreuse !important;
+
+        }
+      }
     } 
   }
 }

src/pages/orgnazation/listCardItem.jsx

@@ -9,12 +9,17 @@ import styles from './ListCardItem.less'
 const CheckGroup = Checkbox.Group;
 
 const ListCardItem = (props) =>{
-  console.log(props)
+  console.log(props.searchWord)
   const [ indeterminate, setIndeterminate ] = useState(false) 
   const [ allChecked, setAllChecked ] = useState(false) //全选状态
   const [ checkList, setCheckList] = useState([]) //复选框列表
-  const { getValueCallback, itemid, userList, OUName } = props
+  const { getValueCallback, itemid, userList, OUName, searchWord } = props
   const defaultList = userList && userList.map( (item,index) =>{
+    // if(!searchWord){
+    //   return
+    // }else{
+    //   if(!item.userName.includes(searchWord))return
+    // }
     item.label = item.userName || item.label 
     item.value = item.userID || item.label 
     return item
@@ -26,7 +31,8 @@ const ListCardItem = (props) =>{
     let arr = []
     if(checked){
       arr =  defaultList.map(item =>{
-        return item.value
+        item.isChecked=checked
+        return item
       })
     }else{
       arr = []
@@ -52,7 +58,14 @@ const ListCardItem = (props) =>{
           >{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} /> }
+         {/* {defaultList && defaultList.length>0 &&  <CheckGroup className = {`${styles.check} ${styles.span}`} onChange = {(e) => { handleChecked(e)}} value={checkList} options = {defaultList} /> } */}
+          <CheckGroup onChange = {(e) => { handleChecked(e)}}>
+            {defaultList && defaultList.length>0 &&
+              defaultList.map( (item, index) =>{ 
+                return item.label.includes(searchWord) && <Checkbox key={index} checked={item.isChecked} className={ item.label.includes(searchWord)&&styles.spans} value={item.value} >{item.label}</Checkbox>
+              })
+            }
+          </CheckGroup>
         </div>
       </div>
     </>

src/pages/userCenter/siteManage/AddModal.jsx

+import React, { useState} from 'react';
+import {
+  Form,
+  Input,
+  notification
+} from 'antd'
+import SiteModal from '@/components/Modal/SiteModa';
+import { addStation } from '@/services/userCenter/siteManage/api';
+const { Item } = Form
+const AddModal = (props) =>{
+  const [form] = Form.useForm();
+  const [formLayout, setFormLayout] = useState('horizontal');
+  const [loading,setLoading] = useState(false)
+  const { confirmModal } =props
+  const onSubmit = () =>{
+    form.validateFields().then(res =>{
+      console.log(res,'res')
+      setLoading(true)
+      addStation({
+        stationName:res.stationName,
+        description:res.description,
+        _version:9999,
+        _dc:new Date().getTime()
+      }).then(res =>{
+        setLoading(false)
+        if(res.success){
+          form.resetFields()
+          notification.success({
+            message: '通知',
+            duration: 3,
+            description: '新增成功',
+          });
+          confirmModal()
+        }else{
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: res.message,
+          });
+        }
+      }).catch(err =>{
+        setLoading(false)
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: err,
+        });
+      })     
+    }).catch(err =>{
+      console.error(err)
+    })
+  }
+  
+  const onFinish = (value)=>{     
+  }
+  return(
+    <SiteModal {...props} title='新增站点' 
+      bodyStyle ={{width:"100%",minHeight:"100px"}}
+      style= {{top:200,borderRadius:"20px",}}
+      width="600px"
+      destroyOnClose={true}
+      cancelText='取消'
+      okText='确认选择'
+      onOk={()=>onSubmit()}
+      confirmLoading={loading}
+    >
+        <Form
+          form={form}
+          layout={formLayout}
+          onFinish={onFinish}
+        >
+          <Item label='站点名称' name='stationName'
+            rules={[
+                {
+                  required: true,
+                  message: '请输入站点名称',
+                },
+              ]}
+          >
+            <Input placeholder='请输入站点名称'></Input>
+          </Item>
+          <Item label='站点类别'>all</Item>
+          <Item label='站点描述'  name='description'>
+            <Input placeholder='请输入站点描述'></Input>
+          </Item>
+        </Form>
+    </SiteModal>
+  )
+}
+
+export default AddModal

src/pages/userCenter/siteManage/DelModal.jsx

+import React, { useState} from 'react';
+import {
+  notification
+} from 'antd'
+import SiteModal from '@/components/Modal/SiteModa';
+import { deleteStation } from '@/services/userCenter/siteManage/api'
+const DelModal = (props) =>{
+  const { confirmModal, stationId } =props
+  const [loading,setLoading] = useState(false)
+  const onSubmit = (props) =>{
+    setLoading(true)
+    deleteStation({
+      stationID: stationId,
+      _version: 9999,
+      _dc: new Date().getTime()
+    }).then(res =>{
+      setLoading(false)
+      if(res.success){
+        notification.success({
+          message: '通知',
+          duration: 3,
+          description: '删除成功',
+        });
+        confirmModal()
+      }else{
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.message,
+        });
+      }
+    }).catch(err =>{
+      setLoading(false)
+      notification.error({
+        message: '提示',
+        duration: 3,
+        description: err
+      });
+    })
+  }
+  return(
+    <SiteModal {...props} title='删除站点' 
+      bodyStyle ={{width:"100%",minHeight:"50px",}}
+      style= {{top:'500px'}}
+      width="400px"
+      destroyOnClose={true}
+      cancelText='取消'
+      okText='确认删除'
+      onOk={()=>onSubmit()}
+      confirmLoading={loading}
+    >
+      是否删除该站点?
+    </SiteModal>
+  )
+}
+
+export default DelModal

src/pages/userCenter/siteManage/EditModal.jsx

+import React, { useState, useEffect, useRef} from 'react';
+import {
+  Form,
+  Input,
+  notification
+} from 'antd'
+import SiteModal from '@/components/Modal/SiteModa';
+import { editStation } from '@/services/userCenter/siteManage/api';
+const { Item } = Form
+const EditModal = (props) =>{
+  const [form] = Form.useForm();
+  const [formLayout, setFormLayout] = useState('horizontal');
+  const [loading,setLoading] = useState(false)
+  const flag = useRef()
+  const { confirmModal, stationObj } =props
+  const onSubmit = () =>{
+    form.validateFields().then(res =>{
+      setLoading(true)
+      flag.current=res
+      editStation({
+        stationName:res.stationName,
+        description:res.description,
+        stationID: stationObj.stationID,
+        _version:9999,
+        _dc:new Date().getTime()
+      }).then(res =>{
+        setLoading(false)
+        if(res.success){
+          form.resetFields()
+          notification.success({
+            message: '通知',
+            duration: 3,
+            description: '编辑成功',
+          });
+          confirmModal()
+        }else{
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: res.message,
+          });
+        }
+      }).catch(err =>{
+        setLoading(false)
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: err,
+        });
+      })     
+    }).catch(err =>{
+      console.error(err)
+    })
+  }
+  useEffect( () =>{
+    form.setFieldsValue({
+      stationName:stationObj.text,
+      description:stationObj.description
+    })
+    return ()=>{
+      console.log(flag.current)
+      form.setFieldsValue(flag.current)
+    }
+  },[stationObj])
+  return(
+    <SiteModal {...props} title='编辑站点' 
+      bodyStyle ={{width:"100%",minHeight:"100px"}}
+      style= {{top:200,borderRadius:"20px",}}
+      width="600px"
+      destroyOnClose={true}
+      cancelText='取消'
+      okText='确认编辑'
+      onOk={()=>onSubmit()}
+      confirmLoading={loading}
+    >
+        <Form
+          form={form}
+          layout={formLayout}
+        >
+          <Item label='站点名称' name='stationName'
+            rules={[
+                {
+                  required: true,
+                  message: '请输入站点名称',
+                },
+              ]}
+          >
+            <Input placeholder='请输入站点名称'></Input>
+          </Item>
+          <Item label='站点类别'>all</Item>
+          <Item label='站点描述'  name='description'>
+            <Input placeholder='请输入站点描述'></Input>
+          </Item>
+        </Form>
+    </SiteModal>
+  )
+}
+
+export default EditModal

src/pages/userCenter/siteManage/SiteManage.jsx

 import React, { useState, useEffect} from 'react';
-import { Row, Col, Tree, Card} from 'antd';
-import { DownOutlined } from '@ant-design/icons';
+import { Row, Col, Tree, Card, Input, Tooltip} from 'antd';
+import { 
+  FileAddTwoTone,
+  EditTwoTone,
+  DeleteTwoTone,
+} from '@ant-design/icons';
 import { PageContainer, GridContent } from '@ant-design/pro-layout';
-import { getOUTree} from '@/services/userCenter/siteManage/api';
+import { getOUTree, getWebModuleTree} from '@/services/userCenter/siteManage/api';
 import ListCard from '@/pages/orgnazation/ListCard';
-import styles from '@/pages/userCenter/siteManage/SiteManage.less'
-
+import styles from '@/pages/userCenter/siteManage/SiteManage.less';
+import AddModal from './AddModal'
+import DelModal from './DelModal'
+import EditModal from './EditModal'
+const { Search } = Input;
+const placeholder = '请输入人员姓名'
 const SiteManage = ()=>{
   const [ treeData, setTreeData ] = useState([])
+  const [ searchWord, setSearchWord] = useState( '')
   const [ ouid, setOuid ] = useState('')
+  const [saveTreeId, setSaveTreeId] = useState('')//保存点击回调的id
+  const [modalVisible, setModalVisible] = useState(false) //新增弹窗
+  const [flag, setFlag] = useState(1)
+  const [ stationId, setStationId] = useState('') //选择的站点
+  const [ stationObj, setStationObj] = useState({}) //选择的站点
+  const [delVisible, setDelVisible] = useState(false) //删除弹窗
+  const [editVisible, setEditVisible] = useState(false) //修改弹窗
+  const now = new Date().getTime()
   //点击树的回调
   const handleTreeSelect = (e) =>{
     console.log(e)
     let id = e[0]
-    setOuid(id)
+    if(id){
+      setSaveTreeId(id)
+      setOuid(id)
+    }else{
+      setOuid(saveTreeId)
+    }
   }
   useEffect(()=>{
-    getOUTree().then(res =>{   
-     let arr = transTree(res)
-      setTreeData(arr)
+    getWebModuleTree({
+      userMode:"super",
+      select:'',
+      _version:9999,
+      _dc:now ,
+      node:-2
+    }).then(res =>{
+      let arr =[]
+      if(res){
+        arr.push( res.find(item =>{
+          return item.id==='Web4StationRoot'
+        }))
+        console.log(arr,'arr')
+      }
+      let arr2 = transTree(arr)
+      setTreeData(arr2)
+    }).catch(err =>{
+      console.error(err)
     })
-  },[])
+    // getOUTree().then(res =>{   
+    //  let arr = transTree(res)
+    //   setTreeData(arr)
+    // }).catch(err =>{
+    //   console.error(err)
+    // })
+  },[flag])
+  const Title = (props) =>{
+    const { text } = props
+   return (
+     <div className={styles.treeTitle}>
+        {text}
+        <div className={styles.titleBox}>
+          <Tooltip title='新增站点'><FileAddTwoTone onClick={()=>{ handleAdd(props)}} /></Tooltip>
+          <Tooltip title='编辑站点'><EditTwoTone onClick={()=>{ handleEdit(props)}} /></Tooltip>
+          <Tooltip title='删除站点'><DeleteTwoTone onClick={()=>{ handleDel(props)}}/></Tooltip>
+        </div>
+     </div>
+   )
+  }
+  const handleAdd = (e) =>{
+    console.log(e)
+    setModalVisible(true)
+  }
+  //站点删除
+  const handleDel = (e) =>{
+    setStationId(e.stationID)
+    setDelVisible(true)
+  }
+  //编辑站点
+  const handleEdit =(e) =>{
+    setStationObj(e)
+    setEditVisible(true)
+  }
+  //树形数据转换
   const transTree = (val) =>{
     let arr = val
    return arr.map( item =>{
-      item.title = item.text
+      item.title = Title(item) || item.text
       item.key = item.id
+      // item.icon = (<img src={user_green} style={{marginBottom:'2px'}}/>)
       let obj = {}
       if(Array.isArray(item.children) && item.children.length > 0){
         transTree(item.children)
@@ -35,6 +107,22 @@ const SiteManage = ()=>{
       }
     })
   }
+  //获取搜索框的值
+  const handleSearch = (value) =>{
+    setSearchWord(value)
+  }
+  const confirmModal = (e) =>{
+    setModalVisible(false)
+    setFlag(flag+1)
+  }
+  const delModal = ()=>{
+    setDelVisible(false)
+    setFlag(flag+1)
+  }
+  const editModal = () =>{
+    setEditVisible(false)
+    setFlag(flag+1)
+  }
   return (
     <PageContainer>
       <GridContent>
@@ -42,21 +130,47 @@ const SiteManage = ()=>{
           <Col lg={6} md={24}>
             <Card className={ styles.cardBox}>
               <Tree 
-                showLine
-                showIcon={<DownOutlined />}
+                showLine={{showLeafIcon:false}}
+                showIcon
                 onSelect={(e)=> handleTreeSelect(e)}
                 treeData={treeData}
-              /> 
+              />
+              <AddModal 
+                visible = {modalVisible}
+                onCancel={() => setModalVisible(false)}
+                confirmModal={confirmModal}              
+              />
+              <DelModal 
+                visible={delVisible} 
+                stationId={stationId} 
+                onCancel={() => setDelVisible(false)} 
+                confirmModal = { delModal}/>
+              <EditModal
+                visible={editVisible} 
+                stationObj={stationObj}
+                onCancel={() => setEditVisible(false)} 
+                confirmModal = { editModal}
+              />
             </Card>
           </Col>
           <Col lg={18} md={24}>
             <Card className={ styles.cardBox}>
-              <ListCard ouid={ouid}></ListCard>
+              <Row  align='middle'>
+                <Col span={1}>搜索</Col>
+                <Col span={ 8}>
+                  <Search 
+                    allowClear
+                    placeholder = {placeholder}
+                    onSearch = { handleSearch}
+                    enterButton
+                  />
+                </Col>
+              </Row>
+              { ouid && <ListCard ouid={ouid} searchWord = { searchWord }></ListCard>}
             </Card>
           </Col>
         </Row>
       </GridContent>
-
     </PageContainer>
   )
 }

src/pages/userCenter/siteManage/SiteManage.less

 .cardBox{
   min-height: calc(100vh - 200px);
+}
+.ant-tree-node-content-wrapper-open{
+  display: flex;
+  align-items: center;
+}
+.treeTitle {
+  display: flex;
+  span {
+      display: none;
+  }
+}
+.treeTitle:hover {
+  span {
+      margin-left: 20px;
+      display: block;
+  }
+}
+.titleBox{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.test{
+  border-radius: 200px;
 }
\ No newline at end of file

src/services/userCenter/siteManage/api.js

@@ -9,3 +9,16 @@ export const getOUTree = params =>
     '/Cityinterface/rest/services/OMS.svc/U_GetOUTree?_version=9999&node=-1',
     params,
   );
+// 获取站点信息
+export const getWebModuleTree = params =>
+  get('/Cityinterface/rest/services/OMS.svc/W4_GetWeb4ModuleTree', params);
+
+// 新增站点
+export const addStation = params =>
+  get('/Cityinterface/rest/services/OMS.svc/W4_AddStation', params);
+// 删除站点
+export const deleteStation = params =>
+  get('/Cityinterface/rest/services/OMS.svc/P_DeleteStation', params);
+// 编辑站点
+export const editStation = params =>
+  get('/Cityinterface/rest/services/OMS.svc/P_EditStation', params);