feat: 新增物流详情页以及审核流程配置页

config/routes/index.ts

@@ -45,22 +45,6 @@ const memberCenterRoute = {
       path: '/memberCenter',
       redirect: '/memberCenter/home',
     },
-    {
-      path: '/memberCenter/material',
-      name: '物料',
-      routes: [
-        {
-          path: '/memberCenter/material/group',
-          name: '物料组',
-          component: '@/pages/commodity/material/materialGroup',
-        },
-        {
-          path: '/memberCenter/material/props',
-          name: '物料属性',
-          component: '@/pages/commodity/material/materialProps'
-        }
-      ]
-    },
     // {
     //   path: '/memberCenter/shopAbility',
     //   redirect: '/memberCenter/shopAbility/infoManage',

src/pages/commodity/material/common/useGetDetailCommon.tsx

+import StatusTag from '@/components/StatusTag';
+import { findLastIndexFlowState } from '@/utils';
+import { useMemo, useState } from 'react';
+import FileItem from '../components/fileItem';
+
+type Options<T = any> = {
+  initialValue: T
+}
+
+/**
+ * 该hook 作为获取详情页进本信息
+ * @param options 
+ */
+function useGetDetailCommon<T = any>(options: Options<T>) {
+  const { initialValue } = options;
+
+  const anchorHeader = useMemo(() => [
+    {
+      key: 'process',
+      name: '流转记录'
+    },
+    {
+      key: 'basic',
+      name: '基本信息'
+    },
+    {
+      key: 'type',
+      name: '物料分类'
+    },
+    {
+      key: 'type',
+      name: '物料规格'
+    },
+    {
+      key: 'images',
+      name: '物料图片'
+    }
+  ], []);
+
+  const basicInfoList = useMemo(() => {
+    return [
+      {
+        title: '物料编号',
+        value: 'ME31'
+      },
+      {
+        title: '单位',
+        value: 'KG'
+      },
+      {
+        title: '物料名称',
+        value: '生产物料'
+      },
+      {
+        title: '目录价',
+        value: '￥15.50'
+      },
+      {
+        title: '规格型号',
+        value: 'M20型号'
+      },
+      {
+        title: '品牌',
+        value: 'pelle'
+      },
+      {
+        title: '所属物料组',
+        value: '生产物料'
+      },
+      {
+        title: '备注',
+        value: '123123'
+      },
+      {
+        title: '品类',
+        value: (
+          <div>
+            成品皮 -> 牛皮 -> 头层牛皮
+          </div>
+        )
+      },
+      {
+        title: '物料状态',
+        value: (
+          <StatusTag title="已确认" type="primary" />
+        )
+      }
+    ]
+
+  }, [initialValue])
+
+
+  /**
+   * 获取当前工作流
+   */
+   const auditProcess = useMemo(() => {
+    const innerVerifySteps: {
+      step: number,
+      stepName: string,
+      roleName: string,
+      status: 'finish' | 'wait',
+    }[] =  initialValue && initialValue.verifySteps ?
+        initialValue.verifySteps.map(item => ({
+          step: item.step,
+          stepName: item.stepName,
+          roleName: item.roleName,
+          status: initialValue?.currentStep > item.step ? 'finish' : 'wait',
+        })) :
+        []
+
+    const innerVerifyCurrent = findLastIndexFlowState(initialValue?.verifySteps)
+    const outerVerifyCurrent = 0
+    const outerVerifySteps = null
+    return {
+      innerVerifySteps,
+      outerVerifySteps,
+      innerVerifyCurrent,
+      outerVerifyCurrent
+    }
+  }, [initialValue])
+
+
+  /** 附件column */
+  const tableColumn = useMemo(() => { 
+    return [
+      {
+        title: '附件',
+        render: (text, record) => {
+          const value = { name: '设计图纸pdf', url: '' };
+          return (
+            <FileItem value={value} />
+          )
+        }
+      },
+      {
+        title: '备注',
+        dataIndex: 'desc'
+      }
+    ]
+  }, [])
+
+  /** 
+   * 内部单据流转记录
+  */
+
+  const recordColumn = useMemo(() => { 
+    return [
+      {
+        title: '流转记录',
+        dataIndex: 'id'
+      },
+      {
+        title: '操作人',
+        dataIndex: 'operator'
+      },
+      {
+        title: '部门',
+        dataIndex: 'apartment'
+      },
+      {
+        title: '职位',
+        dataIndex: 'pos'
+      },
+      {
+        title: '状态',
+        dataIndex: 'status'
+      },
+      {
+        title: '操作',
+        dataIndex: 'operation'
+      },
+      {
+        title: '操作时间',
+        dataIndex: 'time'
+      },
+      {
+        title: '备注',
+        dataIndex: 'remark'
+      }
+    ]
+  }, [])
+
+  return { anchorHeader: anchorHeader, auditProcess, basicInfoList, tableColumn, recordColumn }
+}
+
+export default useGetDetailCommon
\ No newline at end of file

src/pages/commodity/material/components/fileItem/index.tsx

+import React from 'react';
+
+interface Iprops {
+  value: {
+    url: string,
+    name: string
+  }
+}
+
+const Files: React.FC<Iprops> & { isFieldComponent: boolean } = (props: Iprops) => {
+  // console.log()
+  const { value } = props
+  return (
+    <a href={value?.url || ''}>{value?.name || ''} </a>
+  )
+
+}
+
+Files.isFieldComponent = true
+
+export default Files;
\ No newline at end of file

src/pages/commodity/material/components/formilyUploadEnclosure/index.tsx

-import { FormPath, ISchema, Schema, SchemaField } from '@formily/antd';
-import { isArr } from '@formily/antd/esm/shared';
-import { Table } from 'antd';
+import UploadFiles from '@/components/UploadFiles/UploadFiles';
+import { PlusOutlined } from '@ant-design/icons';
+import { FormItemShallowProvider, FormPath, ISchema, Schema, SchemaField } from '@formily/antd';
+import { isArr, toArr } from '@formily/antd/esm/shared';
+import { Table, Form } from 'antd';
+import { UploadChangeParam } from 'antd/lib/upload';
 import React from 'react';
 
 interface Iprops {
@@ -20,13 +23,25 @@ interface Iprops {
     },
   },
   mutators: {
-    change: () => void
+    change: (params: any) => void
+    remove: (index: number) => void
   },
 }
 
 
-const FormilyUploadEnclosure: React.FC<Iprops> = (props: Iprops) => {
-  const { value, schema, path } = props;
+const FormilyUploadEnclosure: React.FC<Iprops> & { isFieldComponent: boolean } = (props: Iprops) => {
+  const { value, schema, path, editable, mutators } = props;
+  console.log(schema, "value", value);
+
+  const {
+    renderAddition,
+    renderRemove,
+    // renderEmpty,
+    // renderExtraOperations,
+    operationsWidth,
+    operations,
+    ...componentProps
+  } = schema.getExtendsComponentProps() || {}
 
   const renderColumns = (items: Schema) => {
     return items.mapProperties((props, key) => {
@@ -35,14 +50,21 @@ const FormilyUploadEnclosure: React.FC<Iprops> = (props: Iprops) => {
         ...props.getExtendsProps()
       }
       return {
-        title: 'title',
+        title: props.title,
         ...itemProps,
         key,
         dataIndex: key,
         render: (value: any, record: any, index: number) => {
           const newPath = FormPath.parse(path).concat(index, key)
           return (
-            <SchemaField path={newPath} schema={props} />
+            <FormItemShallowProvider
+              key={newPath.toString()}
+              label={undefined}
+              labelCol={undefined}
+              wrapperCol={undefined}
+            >
+              <SchemaField path={newPath} schema={props} />
+            </FormItemShallowProvider>
           )
         }
       }
@@ -58,11 +80,39 @@ const FormilyUploadEnclosure: React.FC<Iprops> = (props: Iprops) => {
       : renderColumns(schema.items)
   }
 
+  if (editable && operations !== false) {
+    columns.push({
+      ...operations,
+      key: 'operations',
+      dataIndex: 'operations',
+      width: operationsWidth || 200,
+      render: (value: any, record: any, index: number) => {
+        return (
+          <Form.Item>
+            <div className="array-item-operator">
+              <a 
+                onClick={() => mutators.remove(index)}
+              >
+                删除
+              </a>
+            </div>
+          </Form.Item>
+           
+        )
+      }
+    })
+  }
+  console.log(toArr(value));
+
   const renderTable = () => {
     return (
       <Table 
+        rowKey={record => {
+          return toArr(value).indexOf(record)
+        }}
+        pagination={false}
         columns={columns}
-        dataSource={[]}
+        dataSource={toArr(value)}
       />
     )
   }
@@ -72,9 +122,12 @@ const FormilyUploadEnclosure: React.FC<Iprops> = (props: Iprops) => {
       {
         renderTable()
       }
+      {renderAddition}
     </div>
   )
 }
 
+FormilyUploadEnclosure.isFieldComponent = true;
+
 export default FormilyUploadEnclosure;
 

src/pages/commodity/material/components/imageList/index.tsx

+import React from 'react';
+
+const ImageList = () => {
+  return (
+    <div 
+      style={{
+        display: 'flex', 
+        flexDirection: 'row', 
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      {
+        [1,2,3,4,5,6,7,8,9].map((key) => {
+          return (
+            <div 
+              key={key}
+              style= {{
+                paddingRight: '16px',
+                marginBottom: '8px'
+              }}
+            >
+              <img
+                style={{
+                  width: '120px', 
+                  height: '120px', 
+                  border: '1px solid #F4F5F7',
+                  borderRadius: '4px',
+                }} 
+                src="https://img0.baidu.com/it/u=1200036887,40760142&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=600" 
+              />
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}
+
+export default ImageList;
\ No newline at end of file

src/pages/commodity/material/materialAuditProcessConfig/add.tsx

+import React from 'react';
+import AnchorPage from '@/components/AnchorPage';
+import NiceForm from '@/components/NiceForm';
+import { createFormActions } from '@formily/antd';
+import { Input, ArrayTable, ArrayCards } from '@formily/antd-components'
+import { addSchema } from './schemas/add';
+import ProcessRadio from './components/processRadio';
+import ApplicableMaterial from './components/applicableMaterials';
+import SelectMaterial from './components/selectMaterial';
+
+const formActions = createFormActions();
+
+/**
+ * 新增物料审核流程规则
+ */
+const Add = () => {
+  const anchorHeader = [
+    {
+      name: '流程规则',
+      key: 'config'
+    },
+    {
+      name: '物料流程',
+      key: 'process',
+    },
+    {
+      name: '适用物料组/物料',
+      key: 'apply'
+    }
+  ]
+  return (
+    <AnchorPage
+      title={"新增物料"}
+      anchors={anchorHeader}
+      // extra={headExtra && headExtra(detailInfo, returnAddress, exchangeAddress)}
+    >
+      <NiceForm
+        schema={addSchema}
+        actions={formActions}
+        components={{
+          ProcessRadio, 
+          ApplicableMaterial,
+          ArrayTable,
+          SelectMaterial
+        }}
+        effects={($, actions) => {
+          // useStateFilterSearchLinkageEffect($, actions, 'name', FORM_FILTER_PATH);
+          // useAsyncSelect('status', fetchStatusOptions);
+        }}
+      />
+    </AnchorPage>
+  )
+}
+
+export default Add;
+

src/pages/commodity/material/materialAuditProcessConfig/components/applicableMaterials/index.less

+.container {
+  display: flex;
+  flex-direction: row;
+
+  .item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px;
+    background: #F5F6F7;
+    border-radius: 4px;
+    padding: 8px 16px;
+    color: #5C626A;
+    cursor: pointer;
+    border: 1px solid transparent;
+  }
+
+  .active {
+    border: 1px solid #00A98F;
+    color: #00A98F;
+  }
+}
\ No newline at end of file

src/pages/commodity/material/materialAuditProcessConfig/components/applicableMaterials/index.tsx

+import { Radio } from 'antd';
+import React from 'react';
+import styles from './index.less'
+import className from 'classnames';
+
+type EnumType = {
+  title: string,
+  id: string | number,
+}
+
+interface Iprops {
+  props: {
+    enum: EnumType[],
+  },
+  value: EnumType,
+  editable: boolean,
+  mutators: {
+    change: (id: number | string) => void
+  },
+}
+
+const ApplicableMaterial: React.FC<Iprops> & { isFieldComponent: boolean } = (props: Iprops) => {
+  const { value, editable, mutators } = props;
+  const options = props.props?.enum || [];
+
+  const handleChange = (_item: EnumType) => {
+    if (!editable) {
+      return;
+    }
+    mutators.change(_item.id)
+  }
+
+  return (
+    <div className={styles.container}>
+      {
+        options.map((_item) => {
+          const isChecked = _item.id === +value
+          return (
+            <div 
+              key={_item.id}
+              className={
+                className(
+                  styles.item, 
+                  { [styles.active]: isChecked }
+                )
+              }
+              onClick={() => handleChange(_item)}
+            >
+              <Radio checked={isChecked} />
+              {_item.title}
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}
+
+ApplicableMaterial.isFieldComponent = true
+
+export default ApplicableMaterial
\ No newline at end of file

src/pages/commodity/material/materialAuditProcessConfig/components/processRadio/index.less

+.panel {
+  position: relative;
+
+  .more {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -24px;
+    cursor: pointer;
+  }
+}
+.container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-right: -16px;  
+  .item {
+    width: 50%;
+    padding-right: 16px;
+    margin-bottom: 8px;
+    // border: 1px solid #00A98F;
+
+    .itemContainer {
+      background: #F5F6F7;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      padding: 16px;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .active {
+      border: 1px solid #00A98F;
+    }
+
+    .section {
+      flex: 1;
+      .info {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    }
+    .description {
+      margin-top: 8px;
+      color: #91959B;
+      font-size: 12px;
+    }
+  }
+}
\ No newline at end of file

src/pages/commodity/material/materialAuditProcessConfig/components/processRadio/index.tsx

+import StatusTag from '@/components/StatusTag';
+import { Radio } from 'antd';
+import React, { useState } from 'react';
+import styles from './index.less';
+import className from 'classnames'
+import { CaretDownOutlined } from '@ant-design/icons';
+
+type EnumType = {
+  name: string,
+  type: string,
+  desc: string,
+  id: string,
+}
+
+interface Iprops {
+  props: {
+    enum: EnumType[],
+  },
+  value: EnumType,
+  editable: boolean,
+  mutators: {
+    change: (_item: EnumType) => void
+  },
+}
+
+/**
+ * 选择物料流程
+ * @returns 
+ */
+const PAGE_SIZE = 6;
+
+const ProcessRadio: React.FC<Iprops> & { isFieldComponent: boolean } = (props: Iprops) => {
+  const { value, editable, mutators } = props;
+  const [page, setPage] = useState<number>(1);
+  const options = props.props?.enum;
+  const dataSource = options.slice(0, page * PAGE_SIZE);
+  const hasMore = dataSource.length < options.length
+
+  const onChange = (_item: EnumType) => {
+    if (!editable) {
+      return;
+    }
+    mutators.change(_item)
+  }
+
+  const handleLoadMore = () => {
+    setPage(page + 1)
+  }
+
+  return (
+    <div className={styles.panel}>
+      <div className={styles.container}>
+        {
+          dataSource.map((_item) => {
+            return (
+              <div 
+                className={styles.item} 
+                key={_item.id}
+              >
+                <div 
+                  className={
+                    className(
+                      styles.itemContainer, 
+                      { [styles.active]: _item.id === value?.id }
+                    )
+                  } 
+                  key={_item.id}
+                  onClick={() => onChange(_item)} 
+                >
+                  {
+                    editable && (
+                      <Radio 
+                        checked={_item.id === value?.id} 
+                      />
+                    )
+                  }
+                  <div className={styles.section}>
+                    <div className={styles.info}>
+                      <span>变更物料-0级</span>
+                      <StatusTag type={'primary'} title="变更启用物料流程" />
+                    </div>
+                    <span className={styles.description}>1.确认物料</span>
+                  </div>
+                </div>
+              </div>
+            )
+          })
+        }
+      </div>
+      {
+        hasMore && (
+          <div className={styles.more} onClick={handleLoadMore}>
+            加载更多
+            <CaretDownOutlined />
+          </div>
+        ) || null
+      }
+      
+    </div>
+
+  )
+
+}
+
+ProcessRadio.isFieldComponent = true
+
+export default ProcessRadio;
\ No newline at end of file

src/pages/commodity/material/materialAuditProcessConfig/components/selectMaterial/index.less

+.plus {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-bottom:  8px;
+  padding: 4px;
+  border: 1px solid #EDEEEF;
+  border-radius: 4px;
+  background-color: #EDEEEF;
+  color: #5C626A;
+  cursor: pointer;
+}
\ No newline at end of file

src/pages/commodity/material/materialAuditProcessConfig/components/selectMaterial/index.tsx

+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import TableModal from '@/pages/member/components/TableModal';
+import { Field } from '@formily/antd';
+import { useToggle } from '@umijs/hooks';
+import { Table } from 'antd';
+import React from 'react';
+import { schema } from './schema'
+import styles from './index.less';
+import { PlusOutlined } from '@ant-design/icons';
+
+/** 
+ * 选择指定物料
+ */
+
+type ValueType = {
+  num: string,
+  name: string, 
+}
+
+interface Iprops {
+  value: ValueType[],
+}
+
+const DEFAULT_RETURN_DATA = {
+  totalCount: 0,
+  data: []
+}
+
+const SelectMaterial: React.FC<Iprops> & { isFieldComponent: boolean} = (props: Iprops) => {
+  const { state: visible, toggle } = useToggle(false)
+  const { value, } = props
+
+  const columns = [
+    { 
+      title: '物料编号',
+      dataIndex: 'num'
+    },
+    { 
+      title: '物料名称',
+      dataIndex: 'name'
+    },
+    { 
+      title: '物料组',
+      dataIndex: 'group'
+    },
+    { 
+      title: '规格型号',
+      dataIndex: 'type'
+    },
+    { 
+      title: '品类',
+      dataIndex: 'category'
+    },
+    { 
+      title: '品牌',
+      dataIndex: 'brand'
+    },
+    { 
+      title: '单位',
+      dataIndex: 'unit'
+    }
+  ]
+  const handleOnOk = () => {
+
+  }
+
+  const handleFetchData = async (params) => {
+    // const { data, code } = await api(params);
+    // if (code === 1000) {
+    //   return data;
+    // }
+    return DEFAULT_RETURN_DATA as any
+  }
+
+  return (
+    <div>
+      <div
+        className={styles.plus} 
+        onClick={() => toggle(true)}
+      >
+        <PlusOutlined />
+        添加
+      </div>
+      
+      <Table
+        columns={columns}
+        dataSource={[]}
+      />
+      <TableModal
+        visible={visible}
+        onClose={() => toggle(false)}
+        title={"选择物料"}
+        columns={columns}
+        schema={schema}
+        onOk={handleOnOk}
+        fetchData={handleFetchData}
+        tableProps={{
+          rowKey: (record) => `${record.subMemberId}_${record.subRoleId}`,
+        }}
+        effects={($, actions) => {
+          useStateFilterSearchLinkageEffect($, actions, 'orderNo', FORM_FILTER_PATH);
+        }}
+        mode={"radio"}
+        value={value}
+      />
+    </div>
+  )
+}
+
+SelectMaterial.isFieldComponent = true
+
+export default SelectMaterial
\ No newline at end of file

src/pages/commodity/material/materialAuditProcessConfig/components/selectMaterial/schema.tsx

+import { FORM_FILTER_PATH } from "@/formSchema/const";
+import { ISchema } from "@formily/antd";
+
+export const schema: ISchema = {
+  type: 'object',
+  properties: {
+    megaLayout: {
+      type: 'object',
+      'x-component': 'mega-layout',
+      properties: {
+        orderNo: {
+          type: 'string',
+          'x-component': 'Search',
+          'x-component-props': {
+            placeholder: '物料编号',
+            align: 'flex-left',
+          },
+        },
+        [FORM_FILTER_PATH]: {
+          type: 'object',
+          'x-component': 'mega-layout',
+          'x-component-props': {
+            inline:true,
+            full: true,
+          },
+          properties: {
+            name: {
+              type: 'string',
+              "x-component-props": {
+                placeholder: '物料名称'
+              }
+            },
+            type: {
+              type: 'string',
+              "x-component-props": {
+                placeholder: '物料规格'
+              }
+            },
+            group: {
+              type: 'string',
+              enum: [],
+              "x-component-props": {
+                placeholder: '物料组',
+                allowClear: true,
+                style: {
+                  width: 150
+                }
+              }
+            },
+            submit: {
+              'x-component': 'Submit',
+              'x-mega-props': {
+                span: 1,
+              },
+              'x-component-props': {
+                children: '提交'
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};

src/pages/commodity/material/materialAuditProcessConfig/schemas/add.tsx

+import { ISchema, Schema } from '@formily/antd'
+
+/**
+ * 新增物料
+ */
+export const addSchema: ISchema = {
+  type: 'object',
+  properties: {
+    basic: {
+      type: 'object',
+      "x-component": 'MellowCard',
+      "x-component-props": {
+        id: 'basic',
+        title: '流程规则'
+      },
+      properties: {
+        layout: {
+          type: 'object',
+          "x-component": 'mega-layout',
+          "x-component-props": {
+            labelAlign: 'left',
+            labelCol: 4,
+            wrapperCol: 19,
+            grid: true,
+            autoRow: true,
+            columns: 2,
+            "responsive": {
+              "lg": 2,
+              "m": 1,
+              "s": 1
+            }
+          },
+          properties: {
+            name: {
+              title: '流程规则名称',
+              type: 'string',
+            },
+          }
+        }
+      }
+    },
+    /** 根据品类动态获取schema */
+    processCard: {
+      type: 'object',
+      "x-component": 'MellowCard',
+      "x-component-props": {
+        id: 'type',
+        title: '物料流程'
+      },
+      properties: {
+        process: {
+          type: 'string',
+          enum: [
+            {
+              key: '1',
+              title: '123',
+              name: '变更物料-0级',
+              type: '1.确认物料',
+              desc: '变更启用物料流程',
+              id: 1,
+            },
+            {
+              key: '2',
+              title: '1234',
+              name: '变更物料-1级',
+              type: '1.确认物料, 2.j1k23j1kl2j',
+              desc: '变更启用物料流程1',
+              id: 2,
+            },
+            {
+              key: '3',
+              title: '12344',
+              name: '变更物料-2级',
+              type: '1.确认物料, 3.j1k23j1kl2j',
+              desc: '变更启用物料流程3',
+              id: 3,
+            },
+            {
+              key: '4',
+              title: 'sdfasdf',
+              name: '变更物料-4级',
+              type: '1.确认物料, 3.j1k23j1kl2j',
+              desc: '变更启用物料流程4',
+              id: 4,
+            },
+            {
+              key: '5',
+              title: 'sdfasdf',
+              name: '变更物料-4级',
+              type: '1.确认物料, 3.j1k23j1kl2j',
+              desc: '变更启用物料流程5',
+              id: 5,
+            }
+          ],
+          'x-component': 'ProcessRadio'
+        }
+      }
+    },
+    applyCard: {
+      type: 'object',
+      "x-component": 'MellowCard',
+      "x-component-props": {
+        id: 'type1',
+        title: '适用物料组/物料'
+      },
+      properties: {
+        applys: {
+          title: '',
+          type: 'string',
+          'x-component': 'ApplicableMaterial',
+          enum: [
+            {
+              title: '所有物料（默认）',
+              id: 1,
+            },
+            {
+              title: '选择部分物料组',
+              id: 2,
+            },
+            {
+              title: '选择部分物料',
+              id: 3,
+            },
+          ] as any,
+          'x-linkages': [
+            {
+              type: 'value:visible',
+              target: 'selectMaterials',
+              condition: '{{ $self.value === 3 }}'
+            },
+          ]
+        },
+        selectMaterials: {
+          title: '',
+          type: 'string',
+          'x-component': 'SelectMaterial',
+        }
+      }
+    }
+  },
+}

src/pages/commodity/material/materialPendingAdd/add.less

@@ -56,4 +56,22 @@
     width: 128px;
     height: 128px;
   }
+}
+
+.addition {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #EDEEEF;
+  border-radius: 4px;
+  padding: 4px;
+  background-color: #EDEEEF;
+  color: #5C626A;
+  margin-top: 12px;
+  cursor: pointer;
+
+  .text {
+    margin-left: 4px;
+  }
 }
\ No newline at end of file

src/pages/commodity/material/materialPendingAdd/add.tsx

@@ -7,8 +7,11 @@ import { addSchema } from './schema/add';
 import FormilyUploadFiles from '@/components/UploadFiles/FormilyUploadFiles';
 import styles from './add.less';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import { UploadFile } from 'antd/lib/upload/interface';
+import { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface';
 import UploadFileTip from '../components/uploadFileTip';
+import FormilyUploadEnclosure from '../components/formilyUploadEnclosure';
+import UploadFiles from '@/components/UploadFiles/UploadFiles';
+import FileItem from '../components/fileItem';
 
 const formActions = createFormActions();
 
@@ -52,6 +55,28 @@ const MaterialAdd = () => {
     )
   }
 
+  const handleChange = (info: UploadChangeParam) => {
+    const currentValue = formActions.getFieldValue('enclosureCard.enclosure')
+ 
+    if (info.file.status === 'done' || info.file.status === 'error') {
+      const result = currentValue.concat({
+        file: { name: info.file.name, url: info.file.response.data },
+        desc: ''
+      })
+      formActions.setFieldValue('enclosureCard.enclosure', result)
+    }
+  }
+
+  const renderAddition = () => (
+    <UploadFiles onChange={handleChange} showFiles={false}>
+      <div className={styles.addition}>
+        <PlusOutlined />
+        <span className={styles.text}>新增附件信息</span>
+      </div>
+    </UploadFiles>
+         
+  )
+
   return (
     <AnchorPage
       title={"新增物料"}
@@ -64,20 +89,21 @@ const MaterialAdd = () => {
         value={{
           files: [
             { name: '哈哈哈', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a616169121x3530104150b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650781674&t=631cc09efec51dd0a0c136ea1f6919c8' },
-            { name: '哈哈哈1', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a616169121x3530104150b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650781674&t=631cc09efec51dd0a0c136ea1f6919c8' },
-            { name: '哈哈哈2', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a616169121x3530104150b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650781674&t=631cc09efec51dd0a0c136ea1f6919c8' },
-            { name: '哈哈哈3', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a616169121x3530104150b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650781674&t=631cc09efec51dd0a0c136ea1f6919c8' },
-            { name: '哈哈哈4', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a616169121x3530104150b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650781674&t=631cc09efec51dd0a0c136ea1f6919c8' },
-            { name: '哈哈哈5', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a616169121x3530104150b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650781674&t=631cc09efec51dd0a0c136ea1f6919c8' },
-            { name: '哈哈哈6', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a616169121x3530104150b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650781674&t=631cc09efec51dd0a0c136ea1f6919c8' },
+          ],
+          enclosure: [
+            { file: { name: '文件名',  url: 'http://gimg2.baidu.com/image_search' } , description: '12312', }
           ]
         }}
         components={{
           Cascader, 
           FormilyUploadFiles,
-          UploadFileTip
+          UploadFileTip,
+          FormilyUploadEnclosure,
+          FileItem,
         }}
         expressionScope={{
+          // renderListTableRemove: renderListTableRemove,
+          renderAddition: renderAddition(),
           uploadContainer: uploadContainer,
           customizeFileItemRender: customizeFileItemRender
         }}

src/pages/commodity/material/materialPendingAdd/schema/add.tsx

@@ -198,9 +198,99 @@ export const addSchema: ISchema = {
         enclosure: {
           type: 'array',
           'x-component': 'FormilyUploadEnclosure',
+          "x-component-props": {
+            // operations: false,
+            renderAddition: '{{renderAddition}}',
+            // renderRemove: '{{renderListTableRemove}}',
+            operations: {
+              title: `操作`
+            },
+          },
           items: {
             properties: {
-
+              file: {
+                title: '文件',
+                type: 'string',
+                "x-component": 'FileItem',
+                "x-component-props": {},
+                editable: false,
+              },
+              description: {
+                title: '备注',
+                type: 'string',
+                "x-rules": [
+                  {
+                    required: true,
+                    message: '请填写备注',
+                  }
+                ]
+              }
+            }
+          }
+        }
+      }
+    },
+    sourceListCard: {
+      type: 'object',
+      "x-component": 'MellowCard',
+      "x-component-props": {
+        id: 'enclosure',
+        title: '货源清单'
+      },
+      properties: {
+        layout: {
+          type: 'object',
+          "x-component": 'mega-layout',
+          "x-component-props": {
+            labelAlign: 'left',
+            labelCol: 4,
+            wrapperCol: 19,
+            grid: true,
+            autoRow: true,
+            columns: 2,
+            "responsive": {
+              "lg": 2,
+              "m": 1,
+              "s": 1
+            }
+          },
+          properties: {
+            supplierName: {
+              title: '供应会员',
+              type: 'string',
+              editable: false,
+            },
+            supplierItemNum: {
+              title: '供应商物料编号',
+              type: 'string'
+            },
+            contact: {
+              title: '联系人',
+              type: 'string',
+            },
+            phone: {
+              title: '联系电话',
+              type: 'string',
+            },
+            manufacturer: {
+              title: '生产厂家',
+              type: 'string',
+            },
+            origin: {
+              title: '产地',
+              type: 'string',
+            },
+            departure: {
+              title: '起运地',
+              type: 'string',
+            },
+            arrivalPeriod: {
+              title: '到货周期',
+              type: 'string',
+            },
+            deliveryMethod: {
+              title: '交付方式',
+              type: 'string'
             }
           }
         }

src/pages/commodity/material/materialQuery/detail.tsx

+import React from 'react';
+import AnchorPage from '@/components/AnchorPage';
+import AuditProcess from '@/components/AuditProcess';
+import MellowCard from '@/components/MellowCard';
+import useGetDetailCommon from '../common/useGetDetailCommon';
+import { Card, Space, Table } from 'antd';
+import CustomizeColumn from '@/components/CustomizeColumn';
+import ImageList from '../components/imageList'
+
+/**
+ * 详情
+ */
+const Detail = () => {
+  const { anchorHeader, auditProcess, basicInfoList, tableColumn, recordColumn } = useGetDetailCommon<null>({initialValue: null})
+
+  return (
+    <AnchorPage
+      title={"物料详情"}
+      anchors={anchorHeader}
+      // extra={headExtra && headExtra(detailInfo, returnAddress, exchangeAddress)}
+    >
+      <AuditProcess
+        {...auditProcess}
+        id="progress"
+      />
+      <Space>
+        <CustomizeColumn 
+          id="detail" 
+          data={basicInfoList} 
+          title={"基本信息"} 
+          column={2} 
+        />
+      </Space>
+      <Space>
+        <CustomizeColumn 
+          id="detail1" 
+          data={basicInfoList} 
+          title={"物料型号"} 
+          column={2} 
+        />
+      </Space>
+      <div style={{marginTop: '16px'}}>
+        <Card title="物料图片" bodyStyle={{paddingTop: '0'}}>
+          <ImageList />
+        </Card>
+      </div>
+      <div style={{marginTop: '16px'}}>
+        <Card title="附件">
+          <Table 
+            columns={tableColumn} 
+            dataSource={[]}
+          />
+        </Card>
+      </div>
+      <div style={{marginTop: '16px'}}>
+        <Card title="附件">
+          <Table 
+            columns={recordColumn} 
+            dataSource={[]}
+          />
+        </Card>
+      </div>
+    </AnchorPage>
+  )
+}
+
+export default Detail;
\ No newline at end of file