Inspection/web-screen/client/src/sections/projectBinding/containers/projectBinding.js

import React, { useEffect, useState, useRef, useMemo } from 'react'
import { Spin, Popconfirm, message, Button, Input, Select } from 'antd'
import { connect } from 'react-redux'
import ProTable from '@ant-design/pro-table'
import moment from 'moment'
import RelationModal from '../components/relationModal'
function ProjectBinding(props) {
  const {loading, clientHeight, actions, dispatch, devices,anxinyunProjectLoading,relationLoading } = props
  const { projectBinding, projectRegime } = actions
  const tableRef = useRef()
  const proTableFormRef = useRef()
  const [proejctListOpt, setProjectListOpt] = useState([])//安心云结构物
  const [structureListOpt, setStructureListOpt] = useState([])//巡检结构物
  const [dataSource, setDataSource] = useState([])
  // const [dataCopy,setDataCopy]=useState([])
  const [tableParams, setTableParams] = useState({})
  //  const fetchData =  async () => {
  //     let data={
  //         url:"users/{orgId}/projects",
  //         type:"get"
  //     }
  //     dispatch(projectBinding.getanxinyunProject(data)).then(async res=>{
  //         if(res.success){
  //             const d=res.payload.data?.map(item=>{
  //                 return {
  //                     label:item?.projects[0]?.name,
  //                     value:item?.projects[0]?.id
  //                 }
  //             })
  //             setProjectListOpt(d)
  //             const r2= await dispatch(projectRegime.getProjectList())
  //             const dp=r2.pauseStatemap(item=>{
  //                        return {
  //                            label:item?.name,
  //                            value:item?.id
  //                        }
  //                })
  //                setStructureListOpt(dp)
  //             const r= await dispatch(projectBinding.getRelation())
  //             const list = r?.payload?.data?.rows?.map(item=>{
  //                 return {
  //                     key: item.id,
  //                     anxinyunProject:d?.find(q=>q.value===item.axyProjectId)?.label,
  //                     structName:dp?.find(q=>q.value===item.structureId)?.label
  //                 }
  //             })
  //             setDataSource(list)
  //         }
  //     })

  // }
  //初始化
  useEffect(() => {
    let data = {
        url:'organizations/{orgId}/structures',
    //   url: 'users/{orgId}/projects',
        type: 'get',
    }
    dispatch(projectBinding.getanxinyunProject(data)).then(res => {
      if (res.success) {
        const d = res.payload.data?.map(item => {
          return {
            label: item?.name,
            value: item?.iotaThingId,
          }
        })
        setProjectListOpt(d)
      }
    })
    dispatch(projectRegime.getProjectList()).then(res => {
      if (res.success) {
        const dp = res.payload.data?.rows?.map(item => {
          return {
            label: item?.name,
            value: item?.id,
          }
        })
        setStructureListOpt(dp)
      }
    })
  }, [])
  const queryData = () => {
    dispatch(projectBinding.getRelation()).then(res => {
      if (res.success) {
        const list = res?.payload?.data?.rows?.map(item => {
          return {
            key: item.id,
            anxinyunProject: proejctListOpt?.find(q => q.value === item.axyProjectId)?.value,
            structName: structureListOpt?.find(q => q.value === item.structureId)?.value,
          }
        })
        setDataSource(list)
        // setDataCopy(list)
      }
    })
  }
  useEffect(() => {
    if (proejctListOpt && structureListOpt && proejctListOpt.length && structureListOpt.length) {
      queryData()
    }
  }, [proejctListOpt, structureListOpt])

  const onFinish = async values => {
    const dataToSave = { axyProjectId: values?.anxinyunProject, structrueId: values?.structName, id: values?.id }
    return dispatch(projectBinding.addorEditRelation(dataToSave)).then(res => {
      if (res.success) {
        queryData()
        // tableRef.current.reload()
        return true
      } else {
        return false
      }
    })
  }
  //删除按钮
  const handleDelete = id => {
    dispatch(projectBinding.delRelation(id)).then(res => {
      if (res.success) {
        queryData()
      }
    })
  }

  const filterOption = (input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())

  const columns = [
    {
      title: '安心云结构物',
      dataIndex: 'anxinyunProject',
      ellipsis: true,
      valueType: 'select',
      fieldProps: {
        options: proejctListOpt,
      },
      renderFormItem: () => (
        <Select
          showSearch
        //   style={{paddingLeft:10}}
          allowClear
          placeholder='请选择'
          options={proejctListOpt?.map(item => ({ label: item.label, value: item.value }))}
          filterOption={filterOption}
          optionFilterProp='children'></Select>
      ),
      // fieldProps: {
      //     showSearch: true,
      //     defaultValue: '',
      // },
      // onFilter: (value, record) => record.name.includes(value),
      // search:false
    },
    {
      title: '结构物名称',
      dataIndex: 'structName',
      ellipsis: true,
      valueType: 'select',
      fieldProps: {
        options: structureListOpt,
      },
      renderFormItem: () => (
        <Select
          showSearch
        //   style={{paddingLeft:10}}
          allowClear
          placeholder='请选择'
          options={structureListOpt?.map(item => ({ label: item.label, value: item.value }))}
          filterOption={filterOption}
          optionFilterProp='children'></Select>
      ),
      // fieldProps: {
      //     showSearch: true,
      //     defaultValue: '',
      // },
      // search:false
      valueType: 'select',
      fieldProps: {
        options: structureListOpt,
      },
    },
    {
      title: '操作',
      width: 160,
      key: 'option',
      valueType: 'option',
      render: (text, record) => {
        const options = []
        options.push(
          <RelationModal
            proejctListOpt={proejctListOpt}
            triggerRender={<a>修改映射关系</a>}
            editData={record}
            structureListOpt={structureListOpt}
            title='修改映射关系'
            onFinish={onFinish}
            key='editModel'
          />
        )

        options.push(
          <Popconfirm
            key='del'
            placement='top'
            title='是否确认删除映射关系？'
            onConfirm={() => handleDelete(record.key)}
            okText='是'
            cancelText='否'>
            <a>删除</a>
          </Popconfirm>
        )

        return options
      },
    },
  ]
  // useMemo(()=>{

  // })

  const tableDatas = useMemo(() => {
    const { anxinyunProject, structName } = tableParams
    let rslt = dataSource
    rslt = rslt
      .filter(s => (anxinyunProject ? (s.anxinyunProject ? s.anxinyunProject === anxinyunProject : false) : true))
      ?.filter(s => (structName ? (s.structName ? s.structName === structName : false) : true))
    return rslt
  })

  // const searchHandler=()=>{
  //     const anxinyunProject=proTableFormRef.current.getFieldsValue()?.anxinyunProject
  //     const structName=proTableFormRef.current.getFieldsValue()?.structName
  //     setDataSource(
  //         dataCopy.filter(f =>
  //            (!anxinyunProject || f.anxinyunProject?.includes(anxinyunProject)) &&
  //            (!structName || f?.structName === structName)
  //         )
  //      )

  // }

  return (
    <Spin spinning={anxinyunProjectLoading||relationLoading}>
    <div id='patrol-record' className='global-main'>
      {/* <Spin spinning={loading}> */}
      <div style={{ marginBottom: 19 }}>
        <div className='top' style={{ marginBottom: 19 }}>
          <div className='title'>
            <span className='line'></span>
            <span className='cn'>项目绑定</span>
            <span className='en'>&nbsp;PROJECT</span>
          </div>
          <div></div>
        </div>
      </div>
      <RelationModal
        structureListOpt={structureListOpt}
        proejctListOpt={proejctListOpt}
        triggerRender={<Button type='primary'>新增</Button>}
        title='新增映射关系'
        onFinish={onFinish}
        key='addModel'
      />
      <ProTable
        formRef={proTableFormRef}
        rowKey='id'
        options={false}
        request={async params => {
          setTableParams(params)
          return {
            data: [],
            success: true,
          }
        }}
        actionRef={tableRef}
        columns={columns}
        pagination={{ pageSize: 10, size: 'default', className: 'global-pagination' }}
        dataSource={tableDatas || []}
        search={{
            labelWidth: 100,

        }}
        // search={{
        //     optionRender: ({searchText, resetText}, {form}, dom) => [
        //         <Button type="primary" onClick={searchHandler}>查询</Button>,
        //     ]
        // }}
      ></ProTable>
      {/* </Spin> */}
    </div>
    </Spin>
  )
}

function mapStateToProps(state) {
  const { auth, global, device,anxinyunProject, relation} = state
  return {
    loading: device.isRequesting,
    clientHeight: global.clientHeight,
    actions: global.actions,
    relationLoading:relation.isRequesting,
    anxinyunProjectLoading:anxinyunProject.isRequesting,
  }
}

export default connect(mapStateToProps)(ProjectBinding)