tsg-web/src/views/fxzb/qxdw/zq/index.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { useSelector } from 'react-redux';
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
import { Table, Card,Modal,Form,Input,Button,Row,Col,message } from 'antd';
import ToolBar from './toolbar';
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
import ModalForm from './form';
import apiurl from '../../../../service/apiurl';
import { getDictService } from '../../../../service/SelectValue'
import usePageTable from '../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../components/crud/_';
import {CrudOpRender_text} from '../../../../components/crud/CrudOpRender';
import { dealValue } from '../../../../utils/tools';
import AdcdTreeSelector from "./AdcdTreeSelector";

const Page = () => {
  const refModal = useRef();
  const [form1] = Form.useForm();
  const [form2] = Form.useForm();
  const [adcd, setAdcd] = useState('422826000000000')
  const [code, setcode] = useState('')
  const [searchVal, setSearchVal] = useState(false)
  const [storeData, setStoreData] = useState([])
  const [storeOpen, setStoreOpen] = useState(false)
  const [addStoreOpen, setAddStoreOpen] = useState(false) 
  const [storeMode, setStoreMode] = useState('add')
  const [storeParams, setStoreParams] = useState({})
  const [isFetch, setIsFetch] = useState(false)

  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
    { title: '队伍名称', key: 'teamName', dataIndex: 'teamName', width: 200, ellipsis: true },
    {
      title: '人员总数', key: 'personCount', dataIndex: 'personCount', width: 140,
    },
    { title: '地址', key: 'address', dataIndex: 'address', width: 140 },
    {
      title: '管理单位', key: 'managementUnit', dataIndex: 'managementUnit', width: 150
    },
    { title: '队伍负责人', key: 'teamLeader', dataIndex: 'teamLeader', width: 150, ellipsis: true },
    { title: '联系电话', key: 'phone', dataIndex: 'phone', width: 150, ellipsis: true },
    { title: '登记日期', key: 'registerDate', dataIndex: 'registerDate', width: 150, ellipsis: true },
    {
      title: '有效期限', key: 'dataSo', dataIndex: 'dataSo', width: 250,
      render: (value, row, index) => {
        return (
          <>
            {row.isValid === 1 ?
              <span style={
                {
                  color: "#67c750",
                  border: "1px solid #b7eb8f",
                  backgroundColor: "#f6ffed",
                  padding: '0 5px',
                  borderRadius: "4px"
                }
              }>有效</span> :
              <span
                style={
                  {
                      color: "#f5222d",
                      border: "1px solid #ffa6a1",
                      backgroundColor: "#fff1f0",
                      padding: '0 5px',
                      borderRadius: "4px"
                  }
                }
              >无效</span>}
              <span style={{paddingLeft:'10px'}}>{row.validStartDate}至{row.validEndDate}</span>
          </>
        )
      }
    },
    {
      title: '操作', key: 'operation', width: 240, fixed: 'right',align: 'center',
      render: (value, row, index) => (<CrudOpRender_text view={true} command={(cmd) => () => command(cmd)(row)} />)
    },
  ];

  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);

  const command = (type) => (params) => {
    if (type === 'view') {
      refModal.current.showView(params);
    }
    
  }

 
  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.fxzb.qsdw.zq.page).find_noCode);
  // const { tableProps, search, refresh } = usePageTable(async(params)=>{

  //   return {
  //     list: [
  //       {
  //         inx:'1',
  //         wzmc:'彩条布',
  //         wzlx:'抢险物料',
  //         gg:'',
  //         dw:'捆',
  //         kcsl:'2',
  //         cfck:'沿河路防汛仓库',
  //         lxr:'周欣',
  //         lxdh:'13909035906'
  //       },
  //       {
  //         inx:'2',
  //         wzmc:'无纺布',
  //         wzlx:'抢险物料',
  //         gg:'规格',
  //         dw:'单位',
  //         kcsl:'库存数量',
  //         cfck:'存放仓库',
  //         lxr:'周欣',
  //         lxdh:'13909035906'
  //       }
  //     ], totalRow: 2
  //   };
  // },options);
 


  const onChangeOpen = (bool,v) => {
    setStoreOpen(bool)
    setcode(v)
  }
  

  /**
   * @description 处理成功的回调
   */
  const successCallback = () => {
    refresh()
    setIsFetch(!isFetch)
  }
 
  
  

  useEffect(()=>{
    const params = {
      search: {
        code:adcd,
        ...searchVal,
        type:1
      }
    };
    search(params)
  }, [adcd, searchVal])
  
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf adcdTreeSelectorBox' style={{height:'calc(100vh - 168px)',width:"233px"}}>
          <AdcdTreeSelector setAdcd={setAdcd} isFetch={isFetch} onChangeOpen={onChangeOpen} hasAlertBox={false}/>
        </div>
        <div className='lf CrudAdcdTreeTableBox'>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              onSave={command('save')} />
          </Card>
          <div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
            <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
          </div>
        </div>

        <BasicCrudModal
          width={1000}
          ref={refModal}
          title=""
          component={ModalForm}
          onCrudSuccess={successCallback}
          // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
        />
      </div>
    </>
  );
}

export default Page;