供应商更新个人主体

src/pages/ManufacturerMng/ManufacturerList.js

@@ -18,10 +18,11 @@ function ManufacturerList(props) {
     projectId = 1,
     data,
   } = props;
-  const { initialState: { user }  } = useModel('@@initialState');
+  const { initialState: { user } } = useModel('@@initialState');
   const [visible, setVisible] = useState(false);
   const [curItem, setCurItem] = useState(null);
   const [formDisabled, setFormDisabled] = useState(false);
+  const [typeDisabled, setTypeDisabled] = useState(false);
   const [total, setTotal] = useState(0);
   const [formData, setFormData] = useState({ start_time: "", end_time: "", project_id: projectId * 1, is_super: user?.IsSuper || false, page: 1, page_size: pageSize });
   const queryMfrListRequest = useRequest(queryMfrList, {
@@ -63,49 +64,59 @@ function ManufacturerList(props) {
   }, [queryMfrListRequest.loading, saveMfrRequest.loading, queryCreaterListRequest.loading, editMfrRequest.loading]);
   const columns = [
     {
-      title: '供应商名称',
+      title: '供应商（自然人）名称',
       dataIndex: 'name',
     },
     {
-      title: '税号',
-      dataIndex: 'tax_code',
+      title: '主体类型',
+      render: record => {
+        if (record.type == 1) return '供应商'
+        if (record.type == 4) return '自然人'
+      },
+      width: '6%'
     },
     {
-      title: '地址',
-      dataIndex: 'address'
-      // render: (record) => {
-      //   return moment(record.lab_time).format('YYYY-MM-DD')
-      // }
-
+      title: '证件类型',
+      render: record => {
+        if (record.type == 1) return '身份证'
+        if (record.type == 2) return '护照'
+      },
+      width: '6%'
+    },
+    {
+      title: '证件号',
+      dataIndex: 'id_card',
+      width: '12%'
     },
     {
       title: '联系人',
-      dataIndex: 'contact',
+      render: record => record.contact || '-',
+      width: '6%'
     },
     {
       title: '联系方式',
-      dataIndex: 'phone_number'
+      render: record => record.phone_number || '-',
+      width: '10%'
       // render: (record) => {
       //   return moment(record.create_time).format('YYYY-MM-DD')
       // }
     },
-    {
-      title: '开户银行',
-      dataIndex: 'bank_account',
-    },
     {
       title: '银行账号',
-      dataIndex: 'bank_account',
+      dataIndex: 'bank_number',
+      width: '12%'
     },
     {
       title: '创建人',
       dataIndex: 'created_by',
+      width: '6%'
     },
     {
       title: '创建时间',
       render: (record) => {
         return dayjs(record.created_on).format('YYYY-MM-DD')
-      }
+      },
+      width: '8%'
     },
     {
       title: '操作',
@@ -115,6 +126,7 @@ function ManufacturerList(props) {
             <a style={{ color: "#4096ff" }} onClick={() => {
               setCurItem(record);
               setFormDisabled(false);
+              setTypeDisabled(true);
               setVisible(true);
             }}>编辑</a>
           </>
@@ -134,6 +146,7 @@ function ManufacturerList(props) {
           </>
         </Fragment>
       ),
+      width: '12%'
     },
   ];
   const onCancel = () => {
@@ -169,7 +182,8 @@ function ManufacturerList(props) {
       page: 1,
       is_super: user?.IsSuper || false,
       created_by: formData.created_by || '',
-      name: formData.name || ''
+      name: formData.name || '',
+      type: formData.type * 1 || undefined
     }
     queryList(value);
   }
@@ -200,6 +214,9 @@ function ManufacturerList(props) {
   const onChange = name => {
     setFormData({ ...formData, created_by: name })
   }
+  const onTypeChange = type => {
+    setFormData({ ...formData, type: type })
+  }
   const onPaginationChange = pagination => {
     var tempFormData = { ...formData, page: pagination.current }
     setFormData(tempFormData)
@@ -221,11 +238,16 @@ function ManufacturerList(props) {
             </Form.Item>
           </div>
           {
-            user?.IsSuper && <div style={{ margin: '0 24px' }}>
-              <Form.Item label="创建人:">
+            user?.IsSuper && <div>
+              <Form.Item label="主体类型:">
                 <Select
-                  onChange={onChange}
-                  options={queryCreaterListRequest?.data?.list || []}
+                  onChange={onTypeChange}
+                  options={
+                    [
+                      { value: 1, label: '供应商' },
+                      { value: 4, label: '自然人' },
+                    ]
+                  }
                   style={{ width: 180 }}
                   allowClear
                 />
@@ -233,10 +255,22 @@ function ManufacturerList(props) {
             </div>
           }
           <div style={{ margin: '0 24px' }}>
-            <Form.Item style={{ margin: '0px 24 0 24px' }} label="供应商名称:">
+            <Form.Item label="名称:">
               <Input placeholder="请输入供应商名称" onChange={e => { onInputChange(e) }} />
             </Form.Item>
           </div>
+          {
+            user?.IsSuper && <div>
+              <Form.Item label="创建人:">
+                <Select
+                  onChange={onChange}
+                  options={queryCreaterListRequest?.data?.list || []}
+                  style={{ width: 180 }}
+                  allowClear
+                />
+              </Form.Item>
+            </div>
+          }
           <div style={{ display: 'flex' }}>
             <Form.Item>
               <Button style={{ marginLeft: 24 }} type="primary" onClick={() => { handleSearch() }}>
@@ -245,7 +279,8 @@ function ManufacturerList(props) {
             </Form.Item>
             <Button style={{ marginLeft: 10 }} loading={loading} type="primary" onClick={() => {
               setCurItem(null);
-              setVisible(true)
+              setVisible(true);
+              setTypeDisabled(false);
             }}>
               新增
             </Button>
@@ -270,6 +305,7 @@ function ManufacturerList(props) {
         onOk={onOk}
         item={curItem}
         disabled={formDisabled}
+        typeDisabled={typeDisabled}
       ></FirmModal>
     </>
   )

src/pages/ManufacturerMng/ManufacturerModal.js

@@ -1,5 +1,5 @@
 import React, { Fragment, useState, useEffect, useRef, useMemo } from 'react';
-import { Table, Icon, message, Spin, Button, Form, DatePicker, Row, Col, Modal, Input, Upload } from 'antd';
+import { Table, Icon, message, Spin, Button, Form, DatePicker, Row, Col, Modal, Input, Upload, Select } from 'antd';
 import dayjs from 'dayjs';
 import { getToken, GetTokenFromUrl } from '@/utils/utils';
 const { RangePicker } = DatePicker;
@@ -11,9 +11,12 @@ function FirmModal(props) {
     visible,
     item = null,
     disabled = true,
-    form
+    form,
+    typeDisabled
   } = props;
   const [formRef] = Form.useForm();
+  const [type, setType] = useState(item?.type || 1);
+  console.log(type);
   const handleOnOk = async () => {
     formRef
       .validateFields()
@@ -39,6 +42,11 @@ function FirmModal(props) {
     formRef.resetFields();
     onCancel?.()
   }
+  const handleType = value => {
+    formRef.resetFields();
+    formRef.setFieldValue('type', value);
+    setType(value);
+  }
   const token = getToken() || GetTokenFromUrl();
   const uploadProps = {
     name: 'files',
@@ -60,7 +68,10 @@ function FirmModal(props) {
   };
   useEffect(() => {
     formRef.resetFields();
-  }, [item]);
+    if (visible)
+      setType(item?.type || 1)
+  }, [visible]);
+
   return <Modal
     maskClosable={false}
     open={visible}
@@ -78,6 +89,7 @@ function FirmModal(props) {
         // layout="inline"
         labelCol={{ span: 4 }}
         wrapperCol={{ span: 20 }}
+        preserve={false}
         initialValues={{
           name: item?.name || '',
           tax_code: item?.tax_code || '',
@@ -85,91 +97,113 @@ function FirmModal(props) {
           phone_number: item?.phone_number || '',
           bank_account: item?.bank_account || '',
           bank_number: item?.bank_number || '',
-          address: item?.address || ''
+          address: item?.address || '',
+          type: item?.type || 1,
+          id_type: item?.id_type || '',
+          id_card: item?.id_card || ''
         }}
       >
         <Row gutter={[48, 24]}>
           <Col span={12}>
-            <Form.Item style={{ width: '100%' }} label="供应商名称:" name='name' rules={
+            <Form.Item style={{ width: '100%' }} label="主体类型:" name='type' rules={
               [
                 {
                   required: true,
-                  message: '请输入供应商名称',
+                  message: '请选择主体类型',
                 }]}>
-              <Input disabled={disabled} placeholder="请输入供应商名称" />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item style={{ width: '100%' }} label="税号:" name="tax_code" rules={[
-              {
-                required: true,
-                message: '请输入税号',
-              },
-            ]}>
-              <Input disabled={disabled} placeholder="请输入税号" />
-            </Form.Item>
-          </Col>
-        </Row>
-        <Row gutter={[48, 24]}>
-          <Col span={12}>
-            <Form.Item style={{ width: '100%' }} label="联系人:" name="contact" rules={
-              [
-                {
-                  required: true,
-                  message: '请输入联系人',
-                },
-              ]
-            }>
-              <Input disabled={disabled} placeholder="请输入联系人" />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item style={{ width: '100%' }} label="联系电话:" name="phone_number" rules={[
-              {
-                required: true,
-                message: '请输入联系电话',
-              },
-            ]}>
-              <Input disabled={disabled} placeholder="请输入联系电话" />
-            </Form.Item>
-          </Col>
-        </Row>
-        <Row gutter={[48, 24]}>
-          <Col span={12}>
-            <Form.Item style={{ width: '100%' }} label="开户银行:" name='bank_account' rules={[
-              {
-                required: true,
-                message: '请输入开户银行',
-              },
-            ]}>
-              <Input disabled={disabled} placeholder="请输入开户银行" />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item style={{ width: '100%' }} label="银行账号:" name='bank_number' rules={[
-              {
-                required: true,
-                message: '请输入银行账号',
-              },
-            ]}>
-              <Input disabled={disabled} placeholder="请输入银行账号" />
-            </Form.Item>
-          </Col>
-        </Row>
-        <Row>
-          <Col span={24}>
-            <Form.Item labelCol={{ span: 2 }}
-              wrapperCol={{ span: 22 }} style={{ width: '100%' }} label="地址:" name='address' rules={[
-                {
-                  required: true,
-                  message: '请输入地址',
-                },
-              ]}>
-              <Input disabled={disabled} placeholder="请输入地址" />
+              <Select disabled={disabled || typeDisabled} options={[
+                { value: 1, label: '供应商' },
+                { value: 4, label: '自然人' },
+              ]} placeholder="请选择主体类型" onChange={handleType}>
+              </Select>
             </Form.Item>
           </Col>
         </Row>
-        {/* <Row gutter={[48, 24]}>
+        {
+          type === 1 &&
+          <>
+            <Row gutter={[48, 24]}>
+              <Col span={12}>
+                <Form.Item style={{ width: '100%' }} label="名称:" name='name' rules={
+                  [
+                    {
+                      required: true,
+                      message: '请输入供应商名称',
+                    }]}>
+                  <Input disabled={disabled} placeholder="请输入供应商名称" />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item style={{ width: '100%' }} label="税号:" name="tax_code" rules={[
+                  {
+                    required: true,
+                    message: '请输入税号',
+                  },
+                ]}>
+                  <Input disabled={disabled} placeholder="请输入税号" />
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={[48, 24]}>
+              <Col span={12}>
+                <Form.Item style={{ width: '100%' }} label="联系人:" name="contact" rules={
+                  [
+                    {
+                      required: true,
+                      message: '请输入联系人',
+                    },
+                  ]
+                }>
+                  <Input disabled={disabled} placeholder="请输入联系人" />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item style={{ width: '100%' }} label="联系电话:" name="phone_number" rules={[
+                  {
+                    required: true,
+                    message: '请输入联系电话',
+                  },
+                ]}>
+                  <Input disabled={disabled} placeholder="请输入联系电话" />
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={[48, 24]}>
+              <Col span={12}>
+                <Form.Item style={{ width: '100%' }} label="开户银行:" name='bank_account' rules={[
+                  {
+                    required: true,
+                    message: '请输入开户银行',
+                  },
+                ]}>
+                  <Input disabled={disabled} placeholder="请输入开户银行" />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item style={{ width: '100%' }} label="银行账号:" name='bank_number' rules={[
+                  {
+                    required: true,
+                    message: '请输入银行账号',
+                  },
+                ]}>
+                  <Input disabled={disabled} placeholder="请输入银行账号" />
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <Form.Item labelCol={{ span: 2 }}
+                  wrapperCol={{ span: 22 }} style={{ width: '100%' }} label="地址:" name='address' rules={[
+                    {
+                      required: true,
+                      message: '请输入地址',
+                    },
+                  ]}>
+                  <Input disabled={disabled} placeholder="请输入地址" />
+                </Form.Item>
+              </Col>
+            </Row>
+            {/* <Row gutter={[48, 24]}>
           <Col span={12}>
             <div style={{ display: 'flex', alignItems: 'center' }}>
               <div style={{
@@ -229,6 +263,56 @@ function FirmModal(props) {
             </div>
           </Col>
         </Row> */}
+          </>
+        }
+        {
+          type === 4 && <>
+            <Row gutter={[48, 24]}>
+              <Col span={12}>
+                <Form.Item style={{ width: '100%' }} label="姓名:" name='name' rules={
+                  [
+                    {
+                      required: true,
+                      message: '请输入姓名',
+                    }]}>
+                  <Input disabled={disabled} placeholder="请输入姓名" />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item style={{ width: '100%' }} label="证件类型:" name='id_type' rules={
+                  [
+                    {
+                      required: true,
+                      message: '请选择证件类型',
+                    }]}>
+                  <Select disabled={disabled} placeholder="请选择证件类型">
+                    <Option value={1}>身份证</Option>
+                    <Option value={2}>护照</Option>
+                  </Select>
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={[48, 24]}>
+              <Col span={12}>
+                <Form.Item style={{ width: '100%' }} label="证件号:" name="id_card" rules={
+                  [
+                    {
+                      required: true,
+                      message: '请输入证件号',
+                    },
+                  ]
+                }>
+                  <Input disabled={disabled} placeholder="请输入证件号" />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item style={{ width: '100%' }} label="银行账号:" name='bank_number'>
+                  <Input disabled={disabled} placeholder="请输入银行账号" />
+                </Form.Item>
+              </Col>
+            </Row>
+          </>
+        }
       </Form>
     </div>
   </Modal>