增加表单控件选择项目名称编号，修改表单设计布局

src/components/AuditForm/FormContent.js

@@ -1,16 +1,20 @@
 import { Form } from 'antd';
 import React, { useState } from 'react';
-import { ArrowUpOutlined, ArrowDownOutlined, DeleteOutlined } from '@ant-design/icons';
+import {
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons';
 
 function FormContent(props) {
   const { list, onChange, onSelect } = props;
   const [currentItem, setCurrentItem] = useState(null);
-  const handleDelete = index => {
+  const handleDelete = (index) => {
     let _list = [...list];
     _list.splice(index, 1);
     onChange(_list);
   };
-  const handleUp = index => {
+  const handleUp = (index) => {
     let _list = [...list];
     // 跟上一位置换位置
     const temp = _list[index - 1];
@@ -18,19 +22,19 @@ function FormContent(props) {
     _list[index] = temp;
     onChange(_list);
   };
-  const handleDown = index => {
+  const handleDown = (index) => {
     let _list = [...list];
     const temp = _list[index + 1];
     _list[index + 1] = _list[index];
     _list[index] = temp;
     onChange(_list);
   };
-  const handleSelect = index => {
+  const handleSelect = (index) => {
     setCurrentItem(index);
     onSelect(index);
   };
   return (
-    <div style={{ width: 300 }}>
+    <div style={{ width: 500, height: 636, overflow: 'auto' }}>
       {list.map((item, index) => {
         const btns = (
           <>
@@ -79,10 +83,26 @@ function FormItem(props) {
       }}
       onClick={onClick}
     >
-      <div style={{ fontSzie: 24, color: '#000', fontWeight: 'bold', position: 'relative' }}>
+      <div
+        style={{
+          fontSzie: 24,
+          color: '#000',
+          fontWeight: 'bold',
+          position: 'relative',
+        }}
+      >
         {required && <i style={{ color: 'red' }}>*</i>}
         {label}
-        <div style={{ position: 'absolute', right: 0, top: 0, padding: '5px 10px' }}>{btns}</div>
+        <div
+          style={{
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            padding: '5px 10px',
+          }}
+        >
+          {btns}
+        </div>
       </div>
       <div style={{ color: '#999', fontSize: 16 }}>{placeholder}</div>
     </div>

src/components/AuditForm/ItemAttribute.js

@@ -27,6 +27,9 @@ function ItemAttribute(props) {
       case 'DepartmentField':
         FormContent = <DepartmentField {...formProps} />;
         break;
+      case 'ProjectField':
+        FormContent = <ProjectField {...formProps} />;
+        break;
       case 'TextField':
         FormContent = <TextField {...formProps} />;
         break;
@@ -64,8 +67,8 @@ function ItemAttribute(props) {
         // position: 'absolute',
         // top: 0,
         // right: 0,
-        width: 300,
-        height: '100%',
+        width: 500,
+        height: 636,
         overflowY: 'auto',
       }}
     >
@@ -85,8 +88,8 @@ function InnerContactField(props) {
   return (
     <Form
       form={form}
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
       autoComplete="off"
       initialValues={item.props}
       onFinish={onFinish}
@@ -118,8 +121,8 @@ function DepartmentField(props) {
   return (
     <Form
       form={form}
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
       autoComplete="off"
       initialValues={item.props}
       onFinish={onFinish}
@@ -145,6 +148,31 @@ function DepartmentField(props) {
     </Form>
   );
 }
+function ProjectField(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();
@@ -155,8 +183,8 @@ function TextField(props) {
   return (
     <Form
       form={form}
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
       onFinish={onFinish}
       autoComplete="off"
       initialValues={item.props}
@@ -181,8 +209,8 @@ function DDAttachment(props) {
   return (
     <Form
       form={form}
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
       onFinish={onFinish}
       autoComplete="off"
       initialValues={item.props}
@@ -208,8 +236,8 @@ function TextNote(props) {
   return (
     <Form
       form={form}
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
       onFinish={onFinish}
       autoComplete="off"
       initialValues={item.props}
@@ -229,8 +257,8 @@ function DDDateField(props) {
   return (
     <Form
       form={form}
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
       onFinish={onFinish}
       autoComplete="off"
       initialValues={item.props}
@@ -251,8 +279,8 @@ function TextareaField(props) {
   return (
     <Form
       form={form}
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
       autoComplete="off"
       initialValues={item.props}
       onFinish={onFinish}
@@ -290,8 +318,8 @@ function DDSelectField(props) {
   return (
     <Form
       form={form}
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
       autoComplete="off"
       initialValues={item.props}
       onFinish={handleFinish}
@@ -331,8 +359,8 @@ function DDMultiSelectField(props) {
   return (
     <Form
       form={form}
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
       autoComplete="off"
       initialValues={item.props}
       onFinish={handleFinish}
@@ -440,8 +468,8 @@ function NumberField(props) {
   return (
     <Form
       form={form}
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
       autoComplete="off"
       initialValues={item.props}
       onFinish={onFinish}

src/components/AuditForm/constant.js

@@ -9,6 +9,7 @@ import {
   InsertRowAboveOutlined,
   FolderAddOutlined,
   FontColorsOutlined,
+  ProjectOutlined,
 } from '@ant-design/icons';
 
 export const COMPONENT_LIST = [
@@ -19,7 +20,7 @@ export const COMPONENT_LIST = [
       label: '联系人',
       placeholder: '请选择联系人',
       required: false,
-      choice: '0'
+      choice: '0',
     },
   },
   {
@@ -29,7 +30,17 @@ export const COMPONENT_LIST = [
       label: '选择部门',
       placeholder: '请选择部门',
       required: false,
-      choice: '0'
+      choice: '0',
+    },
+  },
+  {
+    componentName: 'ProjectField',
+    icon: <ProjectOutlined />,
+    props: {
+      label: '选择项目',
+      placeholder: '请选择项目',
+      required: false,
+      // choice: '0',
     },
   },
   {
@@ -77,7 +88,7 @@ export const COMPONENT_LIST = [
       label: '数字输入框',
       placeholder: '请输入',
       required: false,
-      unit: ''
+      unit: '',
     },
   },
   {
@@ -87,7 +98,7 @@ export const COMPONENT_LIST = [
       label: '日历控件',
       placeholder: '请选择日期',
       required: false,
-      unit: ''
+      unit: '',
     },
   },
   {

src/components/AuditForm/index.js

@@ -52,7 +52,7 @@ function AuditForm(props) {
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'flex-start',
-          width: 800,
+          width: 1200,
           marginTop: 20,
         }}
       >

src/components/DDComponents/ProjectField/index.js

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+import { Select } from 'antd';
+import { useModel } from '@umijs/max';
+
+const { Option } = Select;
+
+function DDProjectField(props) {
+  const { value, disabled = false, onChange } = props;
+  const { projectList, loading, run } = useModel('projectList');
+  useEffect(() => {
+    run();
+  }, []);
+  return (
+    <Select
+      showSearch
+      loading={loading}
+      style={{ width: '100%' }}
+      disabled={disabled}
+      defaultValue={value ? Number(value) : undefined}
+      onChange={(value) => {
+        console.log(value);
+        onChange(String(value));
+      }}
+      filterOption={(input, option) =>
+        option.children.join('').toLowerCase().includes(input.toLowerCase())
+      }
+      options={projectList.map((item) => {
+        return {
+          label: `${item.project_name}(${item.project_full_code})`,
+          value: item.id,
+        };
+      })}
+    ></Select>
+  );
+}
+
+export default DDProjectField;

src/components/DDComponents/index.js

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

src/components/PageContent/index.js

@@ -9,7 +9,7 @@ export default (props) => {
     <div>
       <PageContainer header={{ title: null }} {...props}>
         <ProCard
-          style={{ minHeight: 'calc(100vh - 170px)', overflowY: 'auto' }}
+          style={{ minHeight: 'calc(100vh - 320px)', overflowY: 'auto' }}
         >
           {props.children}
         </ProCard>

src/models/projectList.ts

@@ -0,0 +1,16 @@
+import { useRequest } from '@umijs/max';
+import { queryApproval } from '@/services/boom';
+
+const projectList = () => {
+  const { data, loading, run } = useRequest(queryApproval, {
+    manual: true,
+    cacheKey: 'queryApproval',
+  });
+
+  return {
+    projectList: data?.list || [],
+    loading,
+    run,
+  };
+};
+export default projectList;

src/pages/Flow/components/FormAndFilesNode.js

@@ -5,6 +5,7 @@ import { useModel } from 'umi';
 import AttachmentTable from '@/components/AttachmentTable';
 import InnerContactField from '@/components/DDComponents/InnerContactField';
 import DepartmentField from '@/components/DDComponents/DepartmentField';
+import ProjectField from '@/components/DDComponents/ProjectField';
 
 const FormAndFilesNode = (props) => {
   const { formData, fileList } = props;
@@ -15,6 +16,8 @@ const FormAndFilesNode = (props) => {
         return <InnerContactField value={value} disabled={true} />;
       case 'DepartmentField':
         return <DepartmentField value={value} disabled={true} />;
+      case 'ProjectField':
+        return <ProjectField value={value} disabled={true} />;
       default:
         return (
           <div

src/services/boom.js

@@ -235,6 +235,11 @@ export async function applyRepeal(params) {
   return request(`/api/v1/oa/repeal/${params.id}`);
 }
 
+// 查询立项 id=&pageSize=&currentPage=&user_id=
+export async function queryApproval(data) {
+  return request(`/api/v2/approval/record?${stringify(data)}`);
+}
+
 // /**
 //   project_id
 //   version_id	大版本id