fe_service_ebtp_frontend/src/pages/ElecEvaluation/EvalSiteManage/SitePerson/index.tsx

import React, { useEffect, useRef, useState } from 'react';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { getList, saveSitePerson, delSitePerson, getPlaceList } from './service';
import { Button, Card, Form, message, Spin, Popconfirm } from 'antd';
import SitePersonModal from './components/SitePersonModal';
import { downloadFileObjectId } from '@/utils/DownloadUtils';


const SitePersonList: React.FC<{}> = () => {
  const checkRelationRef = useRef<ActionType>(); //操作数据后刷新列表
  const [isEditModalVisible, setIsEditModalVisible] = useState<boolean>(false) //控制新增或编辑模态框是否显示
  const [form] = Form.useForm();//新增模块form
  // const [editForm] = Form.useForm();//编辑模块form
  //单条数据
  const [editForm, setEditForm] = useState<any>({});
  const [spinning, setSping] = useState<boolean>(false);//加载遮罩
  const [placeList, setPlaceList] = useState<any>([]); //省分公司信息
  //下拉框是否可编辑
  const [placeFormDisabled, setPlaceFormDisabled] = useState<any>(false);
  const [type, setType] = useState<any>('cease');//弹窗类型
  let typename = "新增";


  const columns: any = [
    {
      title: '序号',
      valueType: 'index',
      width: 80,
      search: false,
    },
    // {
    //   title: '评标场所编号',
    //   dataIndex: 'eroomNum',
    // },
    {
      title: '评标场所名称',
      dataIndex: 'eroomName',
      search: false,
    },
    // {
    //   title: '人员类型',
    //   dataIndex: 'bank',
    // },
    {
      title: '人员姓名',
      dataIndex: 'personName',
    },
    {
      title: '身份证号',
      dataIndex: 'identityCard',
      width: 300,
      ellipsis: true,
    },
    {
      title: '人脸照片',
      dataIndex: 'facePicName',
      search: false,
      render: (text: any, record: any) => {
        return (
          <>
            <a onClick={() => downloadFileObjectId(record.facePic)}>{record.facePicName}</a>
          </>
        )
      }
    },
    {
      title: '操作',
      search: false,
      render: (text: any, record: any) => {
        return (
          <>
            <a onClick={() => setFormVals(record)}>编辑</a>
            <Popconfirm placement="topRight" title={"确定删除么？"} onConfirm={async () => { delPerson(record.id); }} okText="确定" cancelText="取消" ><a > 删除 </a></Popconfirm>
          </>
        )
      }
    },
  ]

  const delPerson = (id: any) => { // 删除
    setSping(true);
    delSitePerson(id).then(res => {
      if (res.code == 200) {
        setSping(false);
        message.success('删除成功');
        checkRelationRef.current?.reload();
      } else {
        setSping(false);
        form.resetFields()
      }
    }).finally(() => {
      setSping(false);
    });;
  }

  // 编辑页面赋值
  const setFormVals = (item: any) => {
    typename = "编辑";
    setEditForm(item);
    setType("edit");
    setIsEditModalVisible(true)
    setSping(false);
  }

  // 新增页面
  const insertSitePerson = () => {
    setType("insert");
    setIsEditModalVisible(true)
    setSping(false);
  }


  useEffect(() => {
    //查询当前人员权限下所有评标场所
    getPlaceList().then(res => {
      if (res.code == 200) {
        setPlaceList(res.data)
      }
    });
  }, [])

  return (
    <>
      <Spin spinning={spinning}>
        <Card title="评标场所人员管理">
          
      <ProTable
        actionRef={checkRelationRef}
        columns={columns}
        options={false}
        size='small'
        search={{
          labelWidth: 100,
          // defaultCollapsed: false,//是否展开搜索条件
          optionRender: (searchConfig, formProps, dom) => [
            ...dom.reverse(),
            <Button key="out" type="primary" onClick={() => insertSitePerson()}>
              新增
            </Button>,
          ],
        }}

        request={(params) => {
          let trueParams = {
            ...params,
            pageNo: params.current,
          }
          return new Promise<any>((resolve, reject) => {
            getList(trueParams).then(res => {
              if (res.code === 200) {
                resolve({
                  data: res.data.records,
                  success: res.success,
                  total: res.data.total,
                })
              } else {
                resolve({
                  data: [],
                  success: false,
                  total: 0,
                })
              }
            })
          });
        }}
        pagination={{ defaultPageSize: 10, showSizeChanger: false }}//默认显示条数
      />
        </Card>
        {/* 新增及编辑银行账号Modal */}
        {
          isEditModalVisible ?
            <SitePersonModal
              title={typename+"人员信息"}
              type={type}
              modalVisible={isEditModalVisible}
              formDisabled={placeFormDisabled}
              placeList={placeList}
              values={editForm}
              onSubmit={async (value: any) => {
                await saveSitePerson(value).then((res: any) => {
                  if (res.success === true) {
                    message.success("保存成功！");
                    setIsEditModalVisible(false);
                    setEditForm({});
                    // getSitePerson();
                    checkRelationRef.current?.reload();
                  }
                });
              }}
              onCancel={() => {
                setIsEditModalVisible(!isEditModalVisible);
                setEditForm({});
              }}
            ></SitePersonModal>
            : null
        }

      </Spin>
    </>
  );
}

export default SitePersonList;