OA审批表单添加供应商控件

src/components/AuditForm/ItemAttribute.js

@@ -30,6 +30,9 @@ function ItemAttribute(props) {
       case 'ProjectField':
         FormContent = <ProjectField {...formProps} />;
         break;
+      case 'ManufacturerField':
+        FormContent = <ManufacturerField {...formProps} />;
+        break;
       case 'TextField':
         FormContent = <TextField {...formProps} />;
         break;
@@ -173,6 +176,31 @@ function ProjectField(props) {
     </Form>
   );
 }
+function ManufacturerField(props) {
+  const { item, btns, onFinish } = props;
+  const [form] = Form.useForm();
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
+      autoComplete="off"
+      initialValues={item.props}
+      onFinish={onFinish}
+    >
+      <Form.Item label="标题" name="label">
+        <Input />
+      </Form.Item>
+      <Form.Item label="提示文字" name="placeholder">
+        <Input />
+      </Form.Item>
+      <Form.Item label="必填" name="required" valuePropName="checked">
+        <Switch />
+      </Form.Item>
+      {btns}
+    </Form>
+  );
+}
 function TextField(props) {
   const { item, btns, onFinish } = props;
   const [form] = Form.useForm();

src/components/AuditForm/constant.js

@@ -10,6 +10,7 @@ import {
   FolderAddOutlined,
   FontColorsOutlined,
   ProjectOutlined,
+  SolutionOutlined,
 } from '@ant-design/icons';
 
 export const COMPONENT_LIST = [
@@ -43,6 +44,16 @@ export const COMPONENT_LIST = [
       // choice: '0',
     },
   },
+  {
+    componentName: 'ManufacturerField',
+    icon: <SolutionOutlined />,
+    props: {
+      label: '选择供应商',
+      placeholder: '请选择供应商',
+      required: false,
+      // choice: '0',
+    },
+  },
   {
     componentName: 'TextField',
     icon: <ItalicOutlined />,

src/components/DDComponents/ManufacturerField/index.js

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import { Select } from 'antd';
+import { useModel, useRequest } from '@umijs/max';
+import { querySupplierList } from '@/services/contract';
+
+const { Option } = Select;
+
+function ManufacturerField(props) {
+  const {
+    initialState: { user },
+  } = useModel('@@initialState');
+  const { value, disabled = false, onChange } = props;
+  //供应商列表
+  const {
+    data: option = [],
+    loading,
+    run,
+  } = useRequest((data) => querySupplierList(data), {
+    manual: true,
+    formatResult: (res) => {
+      return res?.data?.list
+        ? res?.data.list.map((item) => {
+            return { label: item.name, value: item.id };
+          })
+        : [];
+    },
+  });
+  useEffect(() => {
+    run({
+      project_id: 1,
+      is_super: user?.IsSuper,
+      created_by: user?.CName,
+      page_size: 99999,
+    });
+  }, []);
+  return (
+    <Select
+      showSearch
+      loading={loading}
+      style={{ width: '100%' }}
+      disabled={disabled}
+      defaultValue={value ? Number(value) : undefined}
+      onChange={(value) => {
+        onChange(String(value));
+      }}
+      filterOption={(input, option) =>
+        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+      }
+      options={option}
+    ></Select>
+  );
+}
+
+export default ManufacturerField;

src/components/DDComponents/index.js

@@ -4,6 +4,7 @@ import PhoneField from './PhoneField';
 import InnerContactField from './InnerContactField';
 import DepartmentField from './DepartmentField';
 import ProjectField from './ProjectField';
+import ManufacturerField from './ManufacturerField';
 import DDMultiSelectField from './DDMultiSelectField';
 import NumberField from './NumberField';
 import DDPhotoField from './DDPhotoField';
@@ -107,6 +108,9 @@ export default function DDComponents(props) {
     case 'ProjectField':
       component = <ProjectField onChange={onChange} />;
       break;
+    case 'ManufacturerField':
+      component = <ManufacturerField onChange={onChange} />;
+      break;
     case 'RelateField': //关联审批单
       component = '关联审批单控件未渲染!';
       break;

src/pages/ContractManager/component/Modal.jsx

@@ -109,6 +109,7 @@ const ContractModal = (props) => {
         project_id: 1,
         is_super: user?.IsSuper,
         created_by: user?.CName,
+        page_size: 99999,
       },
     ],
     formatResult: (res) => {