使用formily重写仓位模块

.gitignore

@@ -25,3 +25,4 @@
 config/base.config.json
 
 /src/services/index.ts
+.vscode

config/lingxi.theme.config.ts

+const MAIN_COLOR = '#00B37A'
+const MAIN_FONT_BOLD_COLOR = '#172B4D'
+const MAIN_FONT_TINY_COLOR = '#6B778C'
+
 export default {
-  '@primary-color': '#00B37A',
+  '@primary-color': MAIN_COLOR,
 
   // 公共padding变量
   '@padding-lg': '24px',
@@ -13,4 +17,11 @@ export default {
   '@margin-sm': '12px',
   '@margin-xs': '8px',
   '@margin-xss': '4px',
+
+  // tabs
+  'tabs-card-active-color': MAIN_FONT_BOLD_COLOR,
+  'tabs-highlight-color': MAIN_FONT_BOLD_COLOR,
+  'tabs-hover-color': MAIN_FONT_BOLD_COLOR,
+  'tabs-active-color': MAIN_FONT_BOLD_COLOR,
+  'tabs-card-head-background': '#fff',
 }

package.json

@@ -26,8 +26,8 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@ant-design/pro-layout": "^5.0.16",
-    "@formily/antd": "^1.2.8",
-    "@formily/antd-components": "^1.2.8",
+    "@formily/antd": "^1.2.10",
+    "@formily/antd-components": "^1.2.10",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.0",
     "bizcharts": "^4.0.7",

src/components/NiceForm/components/MultTable.tsx

+import React, { useState } from 'react'
+import { Input, Space, Button, Table } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
+
+const MultTable = (props) => {
+  const { columns } = props.props['x-component-props']
+  const value = props.value || []
+  return (
+    <div style={{width: '100%'}}>
+      <Button block icon={<PlusOutlined/>} type='dashed'>选择指定会员</Button>
+      <Table
+        rowKey='id'
+        columns={columns}
+        dataSource={value}
+      />
+    </div>
+  )
+}
+
+MultTable.defaultProps = {}
+
+MultTable.isFieldComponent = true;
+
+export default MultTable
\ No newline at end of file

src/components/NiceForm/components/Submit.tsx

 import React, { useState } from 'react'
 import { Input, Space, Button } from 'antd'
-import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
-import { useFieldState, FormPath } from '@formily/antd'
-import { FORM_FILTER_PATH } from '@/formSchema/const'
 
 const Submit = (props) => {
   return (

src/components/NiceForm/index.tsx

@@ -9,6 +9,7 @@ import Search from './components/Search';
 import Submit from './components/Submit';
 import Text from './components/Text';
 import CardCheckBox from './components/CardCheckBox';
+import MultTable from './components/MultTable';
 
 export interface NiceFormProps extends IAntdSchemaFormProps {
 }
@@ -23,7 +24,8 @@ const NiceForm:React.FC<NiceFormProps> = (props) => {
     Search,
     Submit,
     Text,
-    CardCheckBox
+    CardCheckBox,
+    MultTable
   }
 
   const defineComponents = Object.assign(customComponents, components)

src/global/styles/reset.less

@@ -30,4 +30,10 @@
       margin-right: 24px;
     }
   }
+
+  // 设置formitem的*号到字段label前
+  .ant-form-item-label > label.ant-form-item-required::before {
+    order: 10;
+    margin-left: -6px;
+  }
 }
\ No newline at end of file

src/layouts/BasicLayout.tsx

@@ -46,8 +46,6 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
     settings,
     location,
   } = props;
-  console.log(props)
-
   const defaultSetting: Settings = {
     navTheme: 'dark',
     // 拂晓蓝

src/pages/repositories/addRepository.tsx

@@ -14,6 +14,11 @@ import { StandardTable } from 'god'
 import { IFormFilter, IButtonFilter } from 'god/dist/src/standard-table/TableController';
 import ReutrnEle from '@/components/ReturnEle';
 import styles from './index.less'
+import NiceForm from '@/components/NiceForm'
+import { repositDetailSchema } from './schema'
+import { createFormActions } from '@formily/antd'
+import EyePreview from '@/components/EyePreview'
+import { findItemAndDelete } from '@/utils'
 
 const {Item}:any = Form
 const { Option } = Select
@@ -92,6 +97,8 @@ const fetchData = (params:any) => {
   })
 }
 
+const addSchemaAction = createFormActions()
+
 const AddRepository:React.FC<{}> = (props) => {
   const ref = useRef({})
   const [form] = Form.useForm()
@@ -274,16 +281,55 @@ const AddRepository:React.FC<{}> = (props) => {
   }
 
   const onNumberChange = (v: any) => {
-    console.log(v)
     setInputSliderValue(v)
   }
 
+  const handleSubmit = (values) => {
+    console.log(values)
+  }
+
+  const handleDeleteTable = (id) => {
+    const value = addSchemaAction.getFieldValue('applyMember')
+    addSchemaAction.setFieldValue('applyMember', findItemAndDelete(value, id))
+  }
+
+  const tableColumns = [
+    { dataIndex: 'id', title: 'ID' },
+    { dataIndex: 'name', title: '会员名称', render: (_, record) => <EyePreview url={`/memberCenter/memberAbility/manage/addMember?id=${record.id}&preview=1`}/> },
+    { dataIndex: 'type', title: '会员类型' },
+    { dataIndex: 'ctl', title: '操作', render: (_, record) => <Button type='link' onClick={() => handleDeleteTable(record.id)}>删除</Button> }
+  ]
+
+  return (
+    <PageHeaderWrapper
+      onBack={() => history.goBack()}
+      backIcon={<ReutrnEle description="返回"/>}
+      title="新建仓位"
+      extra={[
+        <Button key="1" onClick={() => addSchemaAction.submit()} type="primary" icon={<SaveOutlined />}>
+          保存
+        </Button>,
+      ]}
+    >
+      <Card className=''>
+        <NiceForm
+          expressionScope={{
+            tableColumns
+          }}
+          onSubmit={handleSubmit}
+          actions={addSchemaAction}
+          schema={repositDetailSchema}
+        />
+      </Card>
+    </PageHeaderWrapper>
+  )
+
   return (<PageHeaderWrapper
     onBack={() => history.goBack()}
     backIcon={<ReutrnEle description="返回"/>}
     title="新建仓位"
     extra={[
-      <Button key="1" type="primary" icon={<SaveOutlined />}>
+      <Button key="1" onClick={handleSubmit} type="primary" icon={<SaveOutlined />}>
         保存
       </Button>,
     ]}

src/pages/repositories/index.tsx

-import React, { ReactNode, useRef } from 'react'
+import React, { ReactNode, useRef, useState } from 'react'
 import { history } from 'umi'
-import { Button, Popconfirm, Card } from 'antd'
+import { Button, Popconfirm, Card, Row, Col, Dropdown, Input, Select, Space } from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import {
   PlusOutlined,
   PlayCircleOutlined,
   EyeOutlined,
+  DownOutlined,
+  CaretUpOutlined,
+  CaretDownOutlined,
 } from '@ant-design/icons'
 import { StandardTable } from 'god'
 import { ColumnType } from 'antd/lib/table/interface'
 import { IFormFilter, IButtonFilter } from 'god/dist/src/standard-table/TableController'
+import EyePreview from '@/components/EyePreview'
+import StatusSwitch from '@/components/StatusSwitch'
+import NiceForm from '@/components/NiceForm'
+import { createFormActions, FormEffectHooks } from '@formily/antd'
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
+import { FORM_FILTER_PATH } from '@/formSchema/const'
+import { repositSchema } from './schema'
+import { PublicApi } from '@/services/api'
 
-const data = [
-  {
-    key: '1',
-    reposName: '进口头层黄牛皮荔枝纹/红色/XL-渠道商城-所有渠道',
-    producName: '进口头层黄牛皮荔枝纹/红色/XL',
-    pType: '牛皮',
-    brand: '天梭',
-    unit: '吨',
-    amount: '15151',
-    status: 1,
-  },
-  {
-    key: '2',
-    reposName: '进口头层黄牛皮荔枝纹/红色/XL-渠道商城-所有渠道',
-    producName: '进口头层黄牛皮荔枝纹/红色/XL',
-    pType: '牛皮',
-    brand: '卡帝乐',
-    unit: '吨',
-    amount: '15151',
-    status: 0,
-  },
-]
+const formActions = createFormActions()
 
 // 模拟请求
-const fetchData = (params:any) => {
-  return new Promise((resolve, reject) => {
-    const queryResult = data.find(v => v.key === params.keywords)
-    setTimeout(() => {
-      resolve({
-        code: 200,
-        message: '',
-        data: queryResult ? [queryResult] : data
-      })
-    }, 1000)
-  })
+const fetchData = async (params:any) => {
+  const res = await PublicApi.getWarehouseFreightSpaceList(params)
+  return res.data
 }
 
 const Repositories: React.FC<{}> = () => {
-  const ref = useRef({})
+  const ref = useRef<any>({})
 
   const columns: ColumnType<any>[] = [
     {
@@ -63,7 +45,7 @@ const Repositories: React.FC<{}> = () => {
       dataIndex: 'reposName',
       align: 'center',
       key: 'reposName',
-      render: (text:any, record:any) => <span className="commonPickColor" onClick={()=>handleSee(record)}>{text}&nbsp;<EyeOutlined /></span> 
+      render: (text:any, record:any) => <EyePreview url={`/repositories/viewRepository?id=${record.key}&preview=1`}>{text}</EyePreview>
     },
     {
       title: '商品名称',
@@ -100,21 +82,7 @@ const Repositories: React.FC<{}> = () => {
       align: 'center',
       dataIndex: 'status',
       key: 'status',
-      render: (text: any, record:any) => {
-        let component: ReactNode = null
-        component = (
-          <Popconfirm
-            title="确定要执行这个操作?"
-            onConfirm={confirm}
-            onCancel={cancel}
-            okText="是"
-            cancelText="否"
-          >
-            <Button type="link" onClick={()=>handleModify(record)} style={record.status===1?{color:'#00B37A'}:{color:'red'}}>{record.status===1?'有效':'无效'} <PlayCircleOutlined /></Button>
-          </Popconfirm>
-        )
-        return component
-      }
+      render: (text: any, record:any) => <StatusSwitch handleConfirm={()=>handleModify(record)} record={record}/>
     },
     {
       title: '操作',
@@ -124,7 +92,7 @@ const Repositories: React.FC<{}> = () => {
         return (
           <>
           {
-            record.status === 1 ? <Button type='link' onClick={()=>handleAdjust(record)}>库存调拨</Button> : ''
+            record.state === 1 ? <Button type='link' onClick={()=>handleAdjust(record)}>库存调拨</Button> : ''
           }
           </>
         )
@@ -132,75 +100,6 @@ const Repositories: React.FC<{}> = () => {
     }
   ];
 
-  const search: IFormFilter[] = [
-    {
-      type: 'Input',
-      value: 'keywords',
-      col: 4,
-      placeHolder: '商品ID'
-    },
-    {
-      type: 'Input',
-      value: 'name',
-      col: 4,
-      placeHolder: '商品名称'
-    },
-    {
-      type: 'Input',
-      value: 'brand',
-      col: 4,
-      placeHolder: '商品品牌'
-    },
-    {
-      type: 'Input',
-      value: 'type',
-      col: 4,
-      placeHolder: '商品品类'
-    },
-    {
-      type: 'Input',
-      value: 'repository',
-      col: 4,
-      placeHolder: '仓位名称'
-    },
-    {
-      type: 'Select',
-      value: 'status',
-      col: 4,
-      placeHolder: '仓位状态',
-      statusList: [{
-        type: 'Select',
-        label:'所有',
-        value:'0'
-      },{
-        type: 'Select',
-        label:'还不错',
-        value:'1'
-      },{
-        type: 'Select',
-        label:'还可以',
-        value:'2'
-      }]
-    },
-  ]
-
-  const searchBarActions: IButtonFilter[] = [
-    {
-      text: '查询',
-      handler: () => {
-        console.log('查询')
-      }
-    },
-    {
-      type: 'primary',
-      text: '新建',
-      icon: <PlusOutlined />,
-      handler: ()=>{
-        history.push('/repositories/addRepository')
-      }
-    }
-  ]
-
   const handleSee = (record:any) => {
     console.log('see')
     history.push(`/repositories/viewRepository?id=${record.key}`)
@@ -210,10 +109,6 @@ const Repositories: React.FC<{}> = () => {
     console.log('confirm')
   }
 
-  const cancel = () => {
-    console.log('cancel')
-  }
-
   const handleModify = (record: object) => {
     // 通过传入的params字符串判断是修改那种类型的数据
     console.log('执行状态修改', record)
@@ -223,15 +118,37 @@ const Repositories: React.FC<{}> = () => {
     history.push(`/memberCenter/commodityAbility/repositories/adjustRepository?id=${record.key}`)
   }
 
+  const handleToAdd = () => {
+    history.push(`/memberCenter/commodityAbility/repositories/addRepository`)
+  }
+
   return (
     <PageHeaderWrapper>
       <Card>
-        <StandardTable
+      <StandardTable
           columns={columns}
           currentRef={ref}
-          fetchTableData={(params:any) => fetchData(params)}
-          formFilters={search}
-          buttonFilters={searchBarActions}
+          tableProps={{rowKey: "key"}}
+          fetchTableData={(params: any) => fetchData(params)}
+          controlRender={
+            <Row justify='space-between'>
+              <Col>
+                <Space>
+                  <Button type='primary' onClick={handleToAdd} icon={<PlusOutlined />}>新建</Button>
+                </Space>
+              </Col>
+              <Col>
+                <NiceForm
+                  actions={formActions}
+                  onSubmit={values => ref.current.reload(values)}
+                  effects={($, actions) => {
+                    useStateFilterSearchLinkageEffect($, actions, 'search', FORM_FILTER_PATH)
+                  }}
+                  schema={repositSchema}
+                />
+              </Col>
+            </Row>
+          }
         />
       </Card>
     </PageHeaderWrapper>

src/pages/repositories/schema/index.tsx

+import React from 'react'
+import { ISchema } from '@formily/antd';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import EyePreview from '@/components/EyePreview';
+import { Button } from 'antd';
+
+export const repositSchema: ISchema = {
+  type: 'object',
+  properties: {
+    megaLayout: {
+      type: 'object',
+      "x-component": 'mega-layout',
+      properties: {
+        search: {
+          type: 'string',
+          "x-component": 'Search',
+          "x-mega-props": {
+          },
+          "x-component-props": {
+            placeholder: '请输入仓位名称'
+          }
+        },
+        [FORM_FILTER_PATH]: {
+          type: 'object',
+          "x-component": "mega-layout",
+          visible: false,
+          "x-component-props": {
+            inline: true
+          },
+          properties: {
+            productName: {
+              type: 'string',
+              "x-component-props": {
+                placeholder: '商品名称'
+              }
+            },
+            productId: {
+              type: 'string',
+              "x-component-props": {
+                placeholder: '商品ID'
+              }
+            },
+            category: {
+              type: 'string',
+              "x-component-props": {
+                placeholder: '请选择品类'
+              },
+              enum: []
+            },
+            brand: {
+              type: 'string',
+              "x-component-props": {
+                placeholder: '请选择品牌'
+              },
+              enum: []
+            },
+            submit: {
+              "x-component": 'Submit',
+              "x-component-props": {
+                children: '查询'
+              }
+            }
+          },
+        },
+        
+      }
+    }
+  }
+}
+
+export const repositDetailSchema: ISchema = {
+  type: 'object',
+  properties: {
+    REPOSIT_TABS: {
+      type: 'object',
+      "x-component": "tab",
+      "x-component-props": {
+        type: 'card'
+      },
+      properties: {
+        "tab-1": {
+          "type": "object",
+          "x-component": "tabpane",
+          "x-component-props": {
+            "tab": "基本信息"
+          },
+          "properties": {
+            MEGA_LAYOUT1: {
+              type: 'object',
+              "x-component": 'mega-layout',
+              "x-component-props": {
+                labelCol: 4,
+                wrapperCol: 8,
+                labelAlign: 'left'
+              },
+              properties: {
+                name: {
+                  type: 'string',
+                  required: true,
+                  title: '仓位名称',
+                  "x-component-props": {
+                    placeholder: '建议名称：商品名称+商城名称+渠道描述'
+                  }
+                },
+                productName: {
+                  type: 'string',
+                  title: '商品名称',
+                  required: true
+                },
+                warehouseId: {
+                  type: 'string',
+                  title: '仓库名称',
+                  enum: []
+                },
+                itemNo: {
+                  type: 'string',
+                  "x-component": 'Text',
+                  title: '对应货品',
+                  default: '暂无'
+                },
+                inventory: {
+                  type: 'number',
+                  "x-component": "CustomSlider",
+                  required: true,
+                  "x-component-props": {
+                    min: 0,
+                    max: 200
+                  },
+                  title: '分配仓位库存',
+                },
+                inventoryDeductWay: {
+                  type: 'radio',
+                  title: '库存扣减方式',
+                  required: true,
+                  enum: [
+                    {
+                      label: '按仓位随机扣减',
+                      value: 1
+                    },
+                    {
+                      label: '按仓库位置远近扣除',
+                      value: 2
+                    }
+                  ],
+                  default: 1
+                }
+              }
+            }
+          }
+        },
+        "tab-2": {
+          "type": "object",
+          "x-component": "tabpane",
+          "x-component-props": {
+            "tab": "适用商城"
+          },
+          
+          "properties": {
+            MEGA_LAYOUT2: {
+              type: 'object',
+              "x-component": 'mega-layout',
+              "x-component-props": {
+                labelCol: 4,
+                labelAlign: 'left'
+              },
+              properties: {
+                "shopIds": {
+                  "type": "array:number",
+                  "x-component": 'CardCheckBox',
+                  "x-component-props": {
+                    dataSource: [
+                      { logo: '', title: '会员', id: 1 },
+                      { logo: '', title: '小程序', id: 2 },
+                      { logo: '', title: 'H5', id: 3 },
+                      { logo: '', title: '渠道', id: 4 },
+                    ]
+                  },
+                  "title": "适用商城",
+                  required: true,
+                }
+              }
+            }
+          }
+        },
+        "tab-3": {
+          type: 'object',
+          "x-component": 'tabpane',
+          "x-component-props": {
+            "tab": "适用会员"
+          },
+          properties: {
+            MEGA_LAYOUT3: {
+              type: 'object',
+              "x-component": 'mega-layout',
+              "x-component-props": {
+                labelCol: 4,
+                labelAlign: 'left'
+              },
+              properties: {
+                "isAllMemberShare": {
+                  "type": "radio",
+                  enum: [
+                    { label: '所有会员共享(默认)', value: 1 },
+                    { label: '指定会员', value: 0 },
+                  ],
+                  "title": "选择渠道会员",
+                  default: 1,
+                  required: true,
+                },
+                applyMember: {
+                  type: 'array:number',
+                  "x-component": 'MultTable',
+                  "x-component-props": {
+                    columns: "{{tableColumns}}"
+                  },
+                  default: [
+                    { id: 1, name: '名称', type: '类型' },
+                    { id: 2, name: '名称1', type: '类型1' }
+                  ]
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/utils/index.ts

@@ -112,6 +112,20 @@ export function omit(obj: any, arr: string[]) {
   return tempObj
 }
 
+export const findItemAndDelete = (arr: any[], target) => {
+  const newArr = [...arr]
+  if (newArr.length > 0 && isObject(newArr[0])) {
+    return newArr.filter(v => v.id !== target)
+  }
+  const targetIndex = arr.indexOf(target)
+  if (targetIndex === -1) {
+    return newArr
+  } else {
+    newArr.splice(targetIndex, 1)
+    return newArr
+  }
+}
+
 export default {
   isArray,
   isObject,