feat: 新增请购单增加选择物料货源清单的供应商选择弹窗

src/pages/transaction/purchaseRequisition/increaseRequisition/components/newMemberModalTable/columns/index.ts

+import { getIntl } from "umi"
+import { ColumnType } from 'antd/lib/table/interface';
+
+export const memberColumns: ColumnType<any>[] = [
+  {
+    title: getIntl().formatMessage({ id: 'purchaseRequisition.huiyuanID', defaultMessage: '会员ID' }),
+    key: 'memberId',
+    dataIndex: 'memberId',
+  },
+  {
+    title: getIntl().formatMessage({ id: 'purchaseRequisition.huiyuanmingcheng', defaultMessage: '会员名称' }),
+    key: 'name',
+    dataIndex: 'name',
+  },
+  {
+    title: getIntl().formatMessage({ id: 'purchaseRequisition.gongsileixing', defaultMessage: '公司类型' }),
+    key: 'memberTypeName',
+    dataIndex: 'memberTypeName',
+  },
+  {
+    title: getIntl().formatMessage({ id: 'purchaseRequisition.gongsijuese', defaultMessage: '公司角色' }),
+    key: 'roleName',
+    dataIndex: 'roleName',
+  },
+  {
+    title: getIntl().formatMessage({ id: 'purchaseRequisition.gongsidengji', defaultMessage: '公司等级' }),
+    key: 'levelTag',
+    dataIndex: 'levelTag',
+  },
+]
+
+export const materialSupplyColumns: ColumnType<any>[] = [
+  {
+    title: '采购商物料编号',
+    key: '',
+    dataIndex: '',
+  },
+  {
+    title: '采购商物料摘要',
+    key: '',
+    dataIndex: '',
+  },
+  {
+    title: '规格型号',
+    key: '',
+    dataIndex: '',
+  },
+  {
+    title: '品类',
+    key: '',
+    dataIndex: '',
+  },
+  {
+    title: '品牌',
+    key: '',
+    dataIndex: '',
+  },
+  {
+    title: '单位',
+    key: '',
+    dataIndex: '',
+  },
+  {
+    title: '供应商',
+    key: '',
+    dataIndex: '',
+  },
+  {
+    title: '供应商物料编号',
+    key: '',
+    dataIndex: '',
+  },
+  {
+    title: '供应商物料摘要',
+    key: '',
+    dataIndex: '',
+  },
+  {
+    title: '生产厂家',
+    key: '',
+    dataIndex: '',
+  },
+  {
+    title: '起运地',
+    key: '',
+    dataIndex: '',
+  },
+  ,
+  {
+    title: '到货周期',
+    key: '',
+    dataIndex: '',
+  },
+  ,
+  {
+    title: '交货方式',
+    key: '',
+    dataIndex: '',
+  },
+]

src/pages/transaction/purchaseRequisition/increaseRequisition/components/newMemberModalTable/index.tsx

+import React, { useEffect, useRef, useState } from 'react';
+import { useIntl } from 'umi'
+import { Button, Tabs, Drawer } from 'antd';
+import { ISchemaFormActions, ISchemaFormAsyncActions } from '@formily/antd';
+import TableLayout from './table';
+import { fetchOrderApi } from '../../apis';
+import { materialSupplyColumns, memberColumns } from './columns';
+import { materialSupplySchema } from './schema';
+import { memberModalSchema } from '@/components/ModalTable/schema';
+
+export interface MemberModalTableProps {
+  schemaAction: ISchemaFormActions | ISchemaFormAsyncActions,
+  currentRef?: any,
+  confirmModal?(),
+  productRef?: any,
+  setLik: any,
+  mode?: 'checkbox' | 'radio',
+  customizeRadio?: boolean,
+  customKey?: string,
+  /** 搜索的schema */
+  schema?: any,
+  /** schema搜索第一个的name */
+  effects?: string,
+  /** 是否可选 */
+  ctl?: boolean,
+  rowSelection?: any
+}
+
+type drawerType = {
+  width?: number | string
+  title?: string
+}
+
+const NewMemberModalTable: React.FC<MemberModalTableProps> = (props: MemberModalTableProps) => {
+  const intl = useIntl();
+  const { schemaAction, currentRef, confirmModal, productRef, setLik } = props;
+  const ref = useRef<any>({})
+  const [visible, setVisible] = useState<boolean>(false);
+  const [drawer, setDrawer] = useState<drawerType>({
+    width: 900,
+    title: intl.formatMessage({ id: 'purchaseRequisition.xuanzegongyinghui', defaultMessage: '选择供应会员' })
+  })
+
+  const handleConfirm = () => {
+    const rowItem = ref.current.RowCtl.selectRow[0]
+    console.log(rowItem, 'row')
+    if (rowItem) {
+      schemaAction.setFieldValue('vendorRoleId', rowItem.roleId)
+      schemaAction.setFieldValue('vendorMemberId', rowItem.memberId)
+      schemaAction.setFieldValue('vendorMemberName', rowItem.name)
+    }
+    confirmModal && confirmModal()
+    setLik(rowItem)
+    setVisible(false)
+  }
+
+
+  const renderFooter = () => {
+    return (
+      <div style={{ textAlign: 'right' }} onClick={() => setVisible(false)}>
+        <Button style={{ marginRight: 8 }}>
+          {intl.formatMessage({ id: 'transaction_components.quxiao' })}
+        </Button>
+        <Button type="primary" onClick={handleConfirm}>
+          {intl.formatMessage({ id: 'transaction_components.tijiao' })}
+        </Button>
+      </div>
+    )
+  }
+
+  const otherProps = { footer: renderFooter() }
+
+  useEffect(() => {
+    if (currentRef) {
+      currentRef.current = {
+        setVisible,
+        visible,
+      }
+    }
+  }, [])
+
+  const handleChange = (e) => {
+    const params: drawerType = {}
+    switch (e) {
+      case '1':
+        params.title = intl.formatMessage({ id: 'purchaseRequisition.xuanzegongyinghui', defaultMessage: '选择供应会员' });
+        params.width = 900
+
+        break;
+      case '2':
+        params.title = '选择物料货源清单的供应商';
+        params.width = 1000
+        break;
+    }
+    console.log(params, typeof e)
+    setDrawer({ ...params })
+  }
+
+  return (
+    <Drawer
+      destroyOnClose
+      placement="right"
+      title={drawer?.title}
+      visible={visible}
+      onClose={() => setVisible(false)}
+      onCancel={() => setVisible(false)}
+      width={drawer?.width}
+      {...otherProps}
+    >
+      <Tabs onChange={handleChange}>
+        <Tabs.TabPane tab='供应会员' key={1}>
+          <TableLayout
+            currRef={ref}
+            customKey='memberId'
+            effects='name'
+            columns={memberColumns}
+            schema={memberModalSchema}
+            fetchdata={(params) => fetchOrderApi.getMemberListByMemberName({ ...params })}
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab='物料货源清单的供应商' key={2}>
+          <TableLayout
+            currRef={ref}
+            customKey='memberId'
+            effects='name'
+            columns={materialSupplyColumns}
+            scroll={{ x: '100vw' }}
+            schema={materialSupplySchema}
+            fetchdata={(params) => fetchOrderApi.getMemberListByMemberName({ ...params })}
+          />
+        </Tabs.TabPane>
+      </Tabs>
+    </Drawer>
+  )
+}
+export default NewMemberModalTable;

src/pages/transaction/purchaseRequisition/increaseRequisition/components/newMemberModalTable/schema/index.ts

+import { getIntl } from "umi"
+import { FORM_FILTER_PATH } from "@/formSchema/const";
+
+export const materialSupplySchema = {
+  type: "object",
+  properties: {
+    megalayout: {
+      type: "object",
+      "x-component": "flex-layout",
+      "x-component-props": {
+        rowStyle: {
+          justifyContent: 'space-between'
+        }
+      },
+      properties: {
+        name: {
+          type: 'string',
+          'x-component': 'Search',
+          'x-component-props': {
+            placeholder: `物料名称`,
+            align: "flex-left",
+          },
+        },
+      }
+    },
+    [FORM_FILTER_PATH]: {
+      type: "object",
+      "x-component": "flex-layout",
+      "x-component-props": {
+        rowStyle: {
+          justifyContent: "flex-start",
+          flexWrap: "nowrap"
+        },
+        colStyle: {//改变间隔
+          marginRight: 20
+        }
+      },
+      properties: {
+        PRO_LAYOUT: {
+          type: "object",
+          "x-component": "mega-layout",
+          "x-mega-props": {
+            span: 5
+          },
+          "x-component-props": {
+            inline: true
+          },
+          properties: {
+            type: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: `规格型号`,
+                style: {
+                  width: 160,
+                },
+              },
+            },
+            customerCategoryId: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: `品类`,
+                style: {
+                  width: 160,
+                },
+              },
+              enum: [],
+            },
+            brandId: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: `品牌`,
+                style: {
+                  width: 160,
+                },
+              },
+              enum: [],
+            },
+          }
+        },
+        sumbit: {
+          "x-component": "Submit",
+          "x-mega-props": {
+            span: 1
+          },
+          "x-component-props": {
+            children: `${getIntl().formatMessage({ id: 'selfManagement.theQuery' })}`
+          }
+        }
+      }
+    }
+  }
+}

src/pages/transaction/purchaseRequisition/increaseRequisition/components/newMemberModalTable/table.tsx

+import React, { useEffect, useRef } from 'react';
+import NiceForm from '@/components/NiceForm';
+import StandardTable from '@/components/StandardTable';
+import { createFormActions, FormEffectHooks } from '@formily/antd';
+import { ColumnType } from 'antd/lib/table/interface';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import { searchSelectGetSelectCategoryOptionEffect } from '@/pages/transaction/effect/index';
+import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
+import { isEmpty } from 'lodash';
+
+
+export interface TableProps {
+  /** 接口 */
+  fetchdata?(queryParams?: any): Promise<any>;
+  /** 列表表头 */
+  columns: ColumnType<any>[],
+  tableProps?: {
+    rowKey: string | ((record) => any)
+  },
+  mode?: 'checkbox' | 'radio',
+  customizeRadio?: boolean,
+  customKey?: string,
+  /** 搜索的schema */
+  schema?: any,
+  /** schema搜索第一个的name */
+  effects?: string,
+  /** 是否可选 */
+  ctl?: boolean,
+  currRef?: any,
+  scroll?: {
+    x?: string | number | true
+    y?: string | number
+  }
+}
+
+const formActions = createFormActions();
+
+const TableLayout: React.FC<TableProps> = (props: TableProps) => {
+  const selfRef = useRef<any>({})
+  const { fetchdata, columns, tableProps, mode, customizeRadio, customKey, schema, effects, ctl, currRef, scroll } = props;
+  const [rowSelection, RowCtl] = useRowSelectionTable({ type: customizeRadio && mode === 'radio' ? 'checkbox' : mode, customKey: customKey });
+
+  const search = (values: any) => {
+    selfRef.current.reload(values)
+  }
+
+  useEffect(() => {
+    if (currRef) {
+      currRef.current = {
+        RowCtl,
+        rowSelection
+      }
+    }
+  }, [RowCtl, rowSelection])
+
+  return (
+    <StandardTable
+      currentRef={selfRef}
+      columns={columns}
+      tableProps={tableProps}
+      rowSelection={ctl && {
+        ...rowSelection,
+        hideSelectAll: customizeRadio,
+      }}
+      scroll={!isEmpty(scroll) && scroll}
+      fetchTableData={(params: any) => fetchdata(params)}
+      controlRender={
+        <NiceForm
+          actions={formActions}
+          onSubmit={values => search(values)}
+          effects={($, actions) => {
+            useStateFilterSearchLinkageEffect($, actions, effects, FORM_FILTER_PATH)
+            FormEffectHooks.onFieldChange$('category').subscribe(state => {
+              searchSelectGetSelectCategoryOptionEffect(actions, 'category')
+            })
+          }}
+          schema={schema}
+        >
+        </NiceForm>
+      }
+    />
+  )
+}
+
+TableLayout.defaultProps = {
+  mode: 'radio',
+  ctl: true,
+  customizeRadio: false,
+  tableProps: {
+    rowKey: 'memberId'
+  },
+}
+
+export default TableLayout;

src/pages/transaction/purchaseRequisition/increaseRequisition/index.tsx

 import React, { useRef, useState, useEffect } from 'react'
 import { history, useIntl } from 'umi'
 import { usePageStatus } from '@/hooks/usePageStatus'
-import { Button, Col, message, Radio, Row, Select, Upload } from 'antd'
+import { Button, Col, Drawer, message, Radio, Row, Select, Upload } from 'antd'
 import { createFormActions, registerVirtualBox, useFormSpy } from '@formily/antd'
 import { SaveOutlined, LinkOutlined, UploadOutlined } from '@ant-design/icons'
 import NiceForm from '@/components/NiceForm'
@@ -13,7 +13,7 @@ import { help } from '../../common'
 import { useMaterialTable } from './model/useMaterialTable'
 import MaterialModalTable from './components/materialModalTable'
 import DepartmentModalTable from './components/departmentModalTable'
-import MemberModalTable from './components/memberModalTable'
+// import MemberModalTable from './components/memberModalTable'
 import RequisitionerTable from './components/requisitionerTable'
 import styled from 'styled-components'
 import FormDetailHeader from '@/components/FormDetailHeader'
@@ -27,6 +27,7 @@ import styles from './index.less'
 import { getAuth } from '@/utils/auth'
 import AuthButton from '@/components/AuthButton'
 import RadioNode from './components/RadioNode'
+import NewMemberModalTable from './components/newMemberModalTable'
 
 
 const addSchemaAction = createFormActions()
@@ -493,10 +494,9 @@ const IncreaseRequisition: React.FC<{}> = () => {
     {/* 选择采购物料 */}
     <MaterialModalTable confirmModal={confirmModal} row={rowvendorMemberInfoRef.current} currentRef={materialRef} schemaAction={addSchemaAction} sectionProps={surplusProps} />
     {/* 选择供应会员 */}
-    <MemberModalTable currentRef={memberRef} schemaAction={addSchemaAction} setLik={setLik} />
+    <NewMemberModalTable currentRef={memberRef} schemaAction={addSchemaAction} setLik={setLik} />
     {/* 请购人选择会员 */}
     <RequisitionerTable currentRef={RequisRef} schemaAction={addSchemaAction} />
-
     {/* </PageHeaderWrapper> */}
   </div>)
 }