12-23-上传master

src/pages/CommonInfo/Supplier/CommonContact/components/NewContact.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect } from 'react';
+import { Form, Input, Modal, Spin } from 'antd';
+
+interface NewContactProps {
+  modalVisible: boolean;
+  onCancel: () => void;
+  onSubmit: (values: any) => void;
+  title: string;
+  values: any;
+  loading: any;
+  }
+
+const layout = {
+  labelCol: { span: 7 },
+  wrapperCol: { span: 12 },
+};
+
+const validateMessages = {
+  required: '请填写${label}',
+  types: {
+    email: '输入的${label}不正确',
+  },
+};
+
+const NewContact: React.FC<NewContactProps> = (props) => {
+  const { modalVisible, onCancel, onSubmit , title , values ,loading } = props;
+  const [form] = Form.useForm();
+  
+  useEffect(() => {
+    if( JSON.stringify(values) != "{}") {
+      form.setFieldsValue({
+        id:values.id,
+        contactName:values.contactName,
+        contactTelephone:values.contactTelephone,
+        contactAddress:values.contactAddress,
+        contactEmail:values.contactEmail,
+        fixedLine:values.fixedLine,
+        contactFax:values.contactFax,
+      })
+    } 
+  }, [values,modalVisible])
+  const onOk = () => {
+    form.submit();
+  };
+
+  const onFinish = (values: any) => {
+    onSubmit(values)
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title={title}
+      visible={modalVisible}
+      onCancel={onCancel}
+      onOk={onOk}
+      okText="保存"
+      cancelText="取消"
+      width={800}
+    >
+      <Spin spinning={loading} delay={300}>
+      <Form
+        {...layout}
+        name="nest-messages"
+        form={form}
+        onFinish={onFinish}
+        validateMessages={validateMessages}
+        preserve={false}
+      >
+        <Form.Item name="contactName" label="联系人姓名" rules={[{ required: true }]}>
+          <Input placeholder="请填写联系人姓名"/>
+        </Form.Item>
+        <Form.Item
+          name="contactTelephone"
+          label="手机号码"
+          rules={[
+            { required: true },
+            {
+              pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
+              message: '输入的手机号码不正确',
+            },
+          ]}
+        >
+          <Input placeholder="请填写手机号码"/>
+        </Form.Item>
+        <Form.Item name="contactAddress" label="地址" rules={[{ required: true }]}>
+          <Input placeholder="请填写地址信息"/>
+        </Form.Item>
+        <Form.Item name="contactEmail" label="电子邮箱" rules={[{ required: true, type: 'email' }]}>
+          <Input placeholder="请填写电子邮箱"/>
+        </Form.Item>
+        <Form.Item
+          name="fixedLine"
+          label="固定电话"
+          rules={[
+            { required: true },
+            {
+              pattern: /^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/,
+              message: '输入的固定电话不正确',
+            },
+          ]}
+        >
+          <Input placeholder="请填写固定电话"/>
+        </Form.Item>
+        <Form.Item name="contactFax" label="传真" rules={[{ required: true },{
+              pattern: /^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/,
+              message: '输入的传真不正确',
+            },]}>
+          <Input placeholder="请填写传真"/>
+        </Form.Item>
+        <Form.Item name="id" label="id" hidden>
+          <Input />
+        </Form.Item>
+      </Form>
+      </Spin>
+    </Modal>
+  );
+};
+
+export default NewContact;

src/pages/CommonInfo/Supplier/CommonContact/index.tsx

@@ -0,0 +1,188 @@
+import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
+import { Button, Card, message, Popconfirm } from 'antd';
+import React, { useState } from 'react';
+import { useRef } from 'react';
+import NewContact from './components/NewContact';
+import { deleteContact, getContactList } from './service';
+import { handleAdd, handleUpdate } from './utils';
+/**
+ * 供应商信息管理-常用联系人管理
+ */
+
+const CommonContact: React.FC<{}> = () => {
+  //表格控制
+  const actionRef = useRef<ActionType>();
+  //新建&修改联系人弹窗控制
+  const [contactVisible, setContactVisible] = useState<boolean>(false);
+  //存储行数据
+  const [contactLineData, setContactLineData] = useState<any>({});
+  //存储修改和删除弹窗标题
+  const [contactModalTitle, setContactModalTitle] = useState<any>('');
+    //弹窗的访问遮罩
+    const [spinLoading, setSpinLoading] = useState<boolean>(false);
+  const columns: ProColumns<any>[] = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      key: 'key',
+      width: 80,
+    },
+    {
+      title: '联系人姓名',
+      dataIndex: 'contactName',
+      key: 'contactName',
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'contactTelephone',
+      key: 'contactTelephone',
+    },
+    {
+      title: '地址',
+      dataIndex: 'contactAddress',
+      key: 'contactAddress',
+    },
+    {
+      title: '电子邮箱',
+      dataIndex: 'contactEmail',
+      key: 'contactEmail',
+    },
+    {
+      title: '固定电话',
+      dataIndex: 'fixedLine',
+      key: 'fixedLine',
+    },
+    {
+      title: '传真',
+      dataIndex: 'contactFax',
+      key: 'contactFax',
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      render: (_, record) => [
+        <a
+          key="editable"
+          onClick={() => {
+            setContactLineData(record);
+            setContactModalTitle('编辑联系人信息');
+            setContactVisible(true);
+          }}
+        >
+          编辑
+        </a>,
+        <Popconfirm
+          title="确定要删除吗？"
+          onConfirm={() => toDelete(record)}
+          okText="确定"
+          cancelText="取消"
+          key="del"
+        >
+          <a key="view">删除</a>
+        </Popconfirm>,
+      ],
+    },
+  ];
+
+  const toDelete = async (value: any) => {
+    if (value != undefined) {
+      const success = await deleteContact(value.id);
+      if (success) {
+        message.success('删除成功');
+        if (actionRef.current) {
+          actionRef.current.reload();
+        }
+      } else {
+        message.success('删除失败');
+      }
+    }
+  };
+
+  return (
+    <Card bodyStyle={{ padding: '12px 12px' }}>
+      <Button
+        type="primary"
+        style={{ float: 'right', marginBottom: 10, zIndex: 99 }}
+        onClick={() => {
+          setContactModalTitle('新建联系人信息');
+          setContactVisible(true);
+        }}
+      >
+        新建联系人信息
+      </Button>
+
+      <ProTable<any>
+        columns={columns}
+        actionRef={actionRef}
+        search={false}
+        options={false}
+        params={{
+          companyId: '9527',
+        }}
+        //调用分页方法
+        request={ async (params: any) => {
+          let value = {
+            data: [],
+            success: false,
+            total: 0,
+            pageSize: 10,
+            current: 1,
+          }
+          await getContactList(params).then(res => {
+            value.data = res.data.records
+            value.success = res.success
+            value.total = res.data.total
+            value.pageSize = res.data.size
+            value.current = res.data.current
+            value.data.forEach((element: any,index: any) => {
+              if(res.data.current == 1) {
+                element.key = index + 1
+              } else {
+                element.key = res.data.size*(res.data.current - 1) + index + 1
+              }
+              
+            });
+          });
+          return value;
+        }}
+        rowKey="id"
+        pagination={{
+          pageSize: 10,
+        }}
+        dateFormatter="string"
+      />
+      <NewContact
+        title={contactModalTitle}
+        onCancel={() => {
+          setContactLineData({})
+          setContactVisible(false)
+        }}
+        onSubmit={async (value) => {
+          setSpinLoading(true)
+          let param = {
+            ...value,
+            companyId: '9527',
+          };
+          let success;
+          if (value.id == undefined || value.id == "") {
+            success = await handleAdd(param);
+          } else {
+            success = await handleUpdate(param);
+          }
+          if (success) {
+            setSpinLoading(false)
+            setContactLineData({});
+            setContactVisible(false);
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        modalVisible={contactVisible}
+        values={contactLineData}
+        loading={spinLoading}
+      />
+    </Card>
+  );
+};
+export default CommonContact;

src/pages/CommonInfo/Supplier/CommonContact/service.ts

@@ -0,0 +1,53 @@
+import { request } from 'umi';
+
+/**
+ * 新增操作
+ * @param params
+ */
+export async function addContact(params: any) {
+  return request('/api/biz-service-ebtp-tender/v1/bizsuppliercontact/insert', {
+    method: 'POST',
+    data: params,
+  });
+}
+
+/**
+ * 修改操作
+ * @param params
+ */
+export async function updateContact(params: any) {
+  return request('/api/biz-service-ebtp-tender/v1/bizsuppliercontact/update', {
+    method: 'PUT',
+    data: params,
+  });
+}
+
+/**
+ * 删除
+ * @param params
+ */
+export async function deleteContact(params: any) {
+  return request(`/api/biz-service-ebtp-tender/v1/bizsuppliercontact/${params}`, {
+    method: 'DELETE',
+  });
+}
+
+/**
+ * 获取列表
+ * @param params
+ */
+export async function getContactList(params: any) {
+  return request(
+    `/api/biz-service-ebtp-tender/v1/bizsuppliercontact/getSupplierContactByParam`,
+    {
+      method: 'POST',
+      data:{
+        companyId:params.companyId,
+        basePageRequest:{
+          pageNo:params.current,
+          pageSize:params.pageSize
+        }
+      }
+    },
+  );
+}

src/pages/CommonInfo/Supplier/CommonContact/utils.ts

@@ -0,0 +1,33 @@
+import { message } from 'antd';
+import { addContact, updateContact } from './service';
+/**
+ * 编辑操作
+ * @param fields
+ */
+
+export const handleUpdate = async (fields: any) => {
+  try {
+    await updateContact({ ...fields });
+    message.success('编辑成功');
+    return true;
+  } catch (error) {
+    message.error('编辑失败');
+    return false;
+  }
+};
+
+/**
+ * 新增操作
+ * @param fields
+ */
+
+export const handleAdd = async (fields: any) => {
+  try {
+    await addContact({ ...fields });
+    message.success('新建成功');
+    return true;
+  } catch (error) {
+    message.error('新建失败');
+    return false;
+  }
+};