现场人员管理

src/pages/SitePerson/index.tsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ProTable, { ActionType } from '@ant-design/pro-table';
+import { getList, saveSitePerson, delAccount } from './service';
+import { Button, Card, Form, message, Spin, Popconfirm } from 'antd';
+import { getSessionUserData } from '@/utils/session';
+import SitePersonModal from './components/SitePersonModal';
+
+
+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 [accountList, setAccountList] = useState<any>([]); //账号信息
+  //是否可以新增
+  const [insertDisabled, setInsertDisabled] = useState<any>(true);
+  const [type, setType] = useState<any>('cease');//弹窗类型
+  const organizationId = getSessionUserData().organizationId;
+  let typename = "新增";
+
+
+  const columns: any = [
+    {
+      title: '序号',
+      valueType: 'index',
+      width: 80,
+    },
+    // {
+    //   title: '评标场所编号',
+    //   dataIndex: 'eroomNum',
+    // },
+    {
+      title: '评标场所名称',
+      dataIndex: 'eroomName',
+    },
+    // {
+    //   title: '人员类型',
+    //   dataIndex: 'bank',
+    // },
+    {
+      title: '人员姓名',
+      dataIndex: 'personName',
+    },
+    {
+      title: '身份证号',
+      dataIndex: 'identityCard',
+      width: 300,
+      ellipsis: true,
+    },
+    {
+      title: '人脸照片',
+      dataIndex: 'facePic',
+    },
+    {
+      title: '操作',
+      search: false,
+      render: (text: any, record: any) => {
+        return (
+          <>
+            <a onClick={() => setFormVals(record)}>编辑</a>
+            <Popconfirm placement="topRight" title={"确定删除么？"} onConfirm={async () => { delSitePerson(record.id); }} okText="确定" cancelText="取消" ><a > 删除 </a></Popconfirm>
+          </>
+        )
+      }
+    },
+  ]
+
+  const delSitePerson = (id: any) => { // 删除
+    setSping(true);
+    delAccount(id).then(res => {
+      if (res.code == 200) {
+        setSping(false);
+        message.success('删除成功');
+        setAccountList(null)
+        setInsertDisabled(false)
+      } 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);
+  }
+
+  // 获取页面数据
+  const getSitePerson = () => {
+    getList(organizationId).then(res => {
+      if (res.code === 200) {
+        if (res.data.length == 0) {
+          setInsertDisabled(false)
+        }
+        setAccountList(res.data)
+      } else {
+        setAccountList(null)
+      }
+    })
+  }
+
+  useEffect(() => {
+    // getSitePerson();
+  }, [])
+
+
+  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}
+              values={editForm}
+              onSubmit={async (value: any) => {
+                await saveSitePerson(value).then((res: any) => {
+                  if (res.success === true) {
+                    message.success("保存成功！");
+                    setInsertDisabled(true)
+                    setIsEditModalVisible(false);
+                    setEditForm({});
+                    getSitePerson();
+                    checkRelationRef.current?.reload();
+                  }
+                });
+              }}
+              onCancel={() => {
+                setIsEditModalVisible(!isEditModalVisible);
+                setEditForm({});
+              }}
+            ></SitePersonModal>
+            : null
+        }
+
+      </Spin>
+    </>
+  );
+}
+
+export default SitePersonList;