Merge branch 'dev' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into dev

.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/EyePreview/index.tsx

+import React from 'react'
+import { Link } from 'umi'
+import { EyeOutlined } from '@ant-design/icons'
+import { Button } from 'antd'
+
+export interface EyePreviewProps {
+  url?: string,
+  type?: 'button' | 'link',
+  handleClick?()
+}
+
+const EyePreview:React.FC<EyePreviewProps> = (props) => {
+  return (
+    props.type === 'link' ?
+    <Link to={props.url || ''}>
+      {props.children} <EyeOutlined />
+    </Link>
+    : 
+    <Button onClick={props.handleClick} type='link'>
+      {props.children} <EyeOutlined />
+    </Button>
+  )
+  
+}
+
+EyePreview.defaultProps = {
+  type: 'link'
+}
+
+export default EyePreview
\ No newline at end of file

src/components/NiceForm/components/CardCheckBox.tsx

+import React from 'react'
+import { Row, Col } from 'antd';
+import styled from 'styled-components'
+import { findItemAndDelete } from '@/utils'
+import cx from 'classnames'
+
+const RowStyleLayout = styled(props => <div {...props} />)`
+  .card-checkbox {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .card-checkbox-item {
+    width: 320px;
+    height: 48px;
+    margin-right: 32px;
+    margin-bottom: 16px;
+    border:1px solid rgba(235,236,240,1);
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .card-checkbox-item.active {
+    border-color: #00B382;
+    position: relative;
+  }
+  .card-checkbox-item.active::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-right: 6px solid #00B382;
+    border-bottom: 6px solid #00B382;
+  }
+  .card-logo {
+    display: block;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
+  .card-logo.default {
+    background: #669EDE;
+    text-align: center;
+    line-height: 32px;
+    color: #fff;
+    font-size: 12px;
+  }
+  .card-checkbox-title {
+    font-size: 14px;
+    color: #42526E;
+  }
+`
+
+const CardCheckBox = (props) => {
+  const { dataSource = [] } = props.props['x-component-props']
+  const value: number[] = props.value || []
+
+  const handleChange = (id) => {
+    if (value.includes(id)) {
+      const newValue = findItemAndDelete(value, id)
+      props.mutators.change(newValue)
+    } else {
+      props.mutators.change([...value, id])
+    }
+  }
+
+  const isChecked = (id) => {
+    return value.includes(id)
+  }
+  return (
+    <RowStyleLayout>
+      <Row className='card-checkbox'>
+        {
+          dataSource.map((v, i) => {
+            return (
+              <Col key={v.id} className={cx('card-checkbox-item', isChecked(v.id) ? 'active' : '')} onClick={() => handleChange(v.id)}>
+                { v.logo ? <img className='card-logo' src={v.logo}/> : <div className='card-logo default'>logo</div> }
+                <span className='card-checkbox-title'>{v.title}</span>
+              </Col>
+            )
+          })
+        }
+      </Row>
+    </RowStyleLayout>
+  )
+}
+
+CardCheckBox.defaultProps = {}
+
+CardCheckBox.isFieldComponent = true;
+
+export default CardCheckBox
\ No newline at end of file

src/components/NiceForm/components/CustomAddArray.tsx

+import React from 'react'
+import styled from 'styled-components'
+import { toArr } from '@formily/shared';
+import { SchemaField, FormPath } from '@formily/antd';
+import { Button } from 'antd';
+
+// 由于自增列表里 无法进行mega布局， 所以只能在该组件下 重写样式
+const RowStyleLayout = styled(props => <div {...props} />)`
+  .ant-btn {
+    margin-right: 16px;
+  }
+  .ant-form-item {
+    display: inline-flex;
+    margin-right: 16px;
+    margin-bottom: 16px;
+  }
+  > .ant-form-item {
+    margin-bottom: 20px;
+    margin-right: 20px;
+  }
+  > .ant-form-item:last-child {
+    margin-right: 0;
+  }
+  .ant-form-item-control {
+    max-width: none;
+  }
+`
+
+// 自增组件
+const CustomAddArray = (props) => {
+  const { value, schema, className, editable, path, mutators } = props
+  const componentProps = schema.getExtendsComponentProps() || {}
+  const onAdd = () => mutators.push(schema.items.getEmptyValue())
+  const onRemove = index => mutators.remove(index)
+
+  return <div>
+    { toArr(value).map((item, index, arr) => {
+      return <RowStyleLayout {...componentProps} key={index}>
+            <SchemaField path={FormPath.parse(path).concat(index)} onlyRenderProperties/>
+            <Button onClick={onAdd.bind(null, index)} type='primary'>+</Button>
+            { index !==  0 && <Button onClick={onRemove.bind(null, index)}>-</Button>}
+      </RowStyleLayout>
+    }) }
+  </div>
+}
+
+CustomAddArray.isFieldComponent = true
+
+export default CustomAddArray

src/components/NiceForm/components/CustomSlider.tsx

+import React from 'react'
+import { Slider, Input, Space } from 'antd'
+
+const CustomSlider = (props) => {
+  const value = props.value || 0
+  const max = props.props['x-component-props']?.max || 0
+  return (
+    <div style={{width: '100%'}}>
+      <Slider
+        value={value}
+        onChange={e => props.mutators.change(e)}
+        {...props.props['x-component-props']}></Slider>
+      <Space>
+        <Input type='number' disabled max={max} value={props.value} onChange={e => props.mutators.change(e.target.value)} addonAfter='尺'/>
+        { max && <span>还剩：{max - value}尺</span> }
+      </Space>
+    </div>
+  )
+}
+
+CustomSlider.defaultProps = {}
+
+CustomSlider.isFieldComponent = true;
+
+export default CustomSlider
\ No newline at end of file

src/components/NiceForm/components/CustomStatus.tsx

+import React from 'react'
+import { Space } from 'antd'
+
+const CustomStatus = (props) => {
+  return (
+    <>
+    <Space>
+      <span className={ props.value === 1 ? 'commonStatusValid' : 'commonStatusInvalid' }></span>
+      <span>
+        { props.value === 1 ? '有效' : '无效' }
+      </span>
+    </Space>
+    </>
+  )
+}
+
+export default CustomStatus
\ No newline at end of file

src/components/NiceForm/components/CustomUpload.tsx

+import React from 'react'
+import UploadImage from "@/components/UploadImage"
+
+const CustomUpload = (props) => {
+  const { mutators } = props
+  return <UploadImage
+    imgUrl={props.value}
+    onChange={data => {
+      // 这里能拿到change后的data值
+      mutators.change(data)
+    }}
+  />
+}
+
+CustomUpload.isFieldComponent = true
+
+export default CustomUpload
\ No newline at end of file

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/Search.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'
+
+export interface SearchProps {
+  value: string,
+  mutators: any,
+  props: any
+}
+
+const Search = (props) => {
+  const [state, setState] = useFieldState({
+    filterSearch: false
+  })
+
+  const changeFilterVisible = () => {
+    if (state.filterSearch) {
+      props.form.reset({
+        // 清除FILTER_PARAMS下所有字段
+        selector: `*.${FORM_FILTER_PATH}.*`
+      })
+    }
+    setState({
+      filterSearch: !state.filterSearch
+    })
+  }
+  return (
+    <Space size={20} style={{justifyContent: 'flex-end', width: '100%'}}>
+      <Input.Search
+        value={props.value || ''}
+        onChange={e => props.mutators.change(e.target.value)}
+        onSearch={(_,e) => {
+          e.preventDefault()
+          props.form.submit()
+        }}
+        {...props.props['x-component-props']}
+      />
+      <Button onClick={changeFilterVisible}>高级筛选{state.filterSearch ? <CaretUpOutlined /> : <CaretDownOutlined />}</Button> 
+      <Button onClick={() => props.form.reset()}>重置</Button>     
+    </Space>
+  )
+}
+
+Search.defaultProps = {}
+
+Search.isFieldComponent = true;
+
+export default Search
\ No newline at end of file

src/components/NiceForm/components/Submit.tsx

+import React, { useState } from 'react'
+import { Input, Space, Button } from 'antd'
+
+const Submit = (props) => {
+  return (
+    <Button htmlType='submit' type='primary'>查询</Button>
+  )
+}
+
+Submit.defaultProps = {}
+
+Submit.isFieldComponent = true;
+
+export default Submit
\ No newline at end of file

src/components/NiceForm/components/Text.tsx

+import React from 'react'
+
+const Text = (props) => {
+  return (
+    <span {...props.props['x-component-props']}>{props.value}</span>
+  )
+}
+
+Text.defaultProps = {}
+
+Text.isFieldComponent = true;
+
+export default Text
\ No newline at end of file

src/components/NiceForm/index.tsx

+import React from 'react'
+import SchemaForm, { IAntdSchemaFormProps, createFormActions, FormPath, SchemaField } from '@formily/antd'
+import { Button, Space } from 'antd';
+import CustomUpload from './components/CustomUpload';
+import CustomStatus from './components/CustomStatus';
+import CustomAddArray from './components/CustomAddArray';
+import CustomSlider from './components/CustomSlider';
+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 {
+}
+
+const NiceForm:React.FC<NiceFormProps> = (props) => {
+  const { children, components, ...reset } = props
+  const customComponents = {
+    CustomUpload,
+    CustomStatus,
+    CustomAddArray,
+    CustomSlider,
+    Search,
+    Submit,
+    Text,
+    CardCheckBox,
+    MultTable
+  }
+
+  const defineComponents = Object.assign(customComponents, components)
+
+  return (
+    <SchemaForm
+      colon={false}
+      components={defineComponents}
+      {...reset}
+    >
+      {children}
+    </SchemaForm>
+  )
+}
+
+
+NiceForm.defaultProps = {}
+
+export default NiceForm
\ No newline at end of file

src/components/StatusSwitch/index.tsx

+import React from 'react'
+import { Popconfirm, Button } from 'antd'
+import { PlayCircleOutlined } from '@ant-design/icons'
+
+export interface StatusSwitchProps {
+  record: any,
+  handleConfirm?(),
+  handleCancel?()
+}
+
+const StatusSwitch:React.FC<StatusSwitchProps> = (props) => {
+  const { record } = props
+  return (
+    <Popconfirm
+      title="确定要执行这个操作?"
+      onConfirm={props.handleConfirm}
+      onCancel={props.handleCancel}
+      okText="是"
+      cancelText="否"
+    >
+      <Button type="link" style={record.state===1?{color:'#00B37A'}:{color:'red'}}>{record.state===1?'有效':'无效'} <PlayCircleOutlined /></Button>
+    </Popconfirm>
+  )
+}
+
+StatusSwitch.defaultProps = {}
+
+export default StatusSwitch
\ No newline at end of file

src/components/UploadImage/index.less

+.upload_image_wrap {
+  display: flex;
+  align-items: center;
+
+  .size_require {
+    color: #97A0AF;
+  }
+
+  .upload_btn {
+
+    width: 104px;
+    height: 104px;
+    display: flex;
+    margin-right: 24px;
+    align-items: center;
+    justify-content: center;
+    color: #6B778C;
+    flex-direction: column;
+    background: rgba(250, 251, 252, 1);
+    border-radius: 2px;
+    border: 1px solid rgba(223, 225, 230, 1);
+    cursor: pointer;
+    overflow: hidden;
+
+    &.isAdd {
+      border: 1px dashed rgba(223, 225, 230, 1);
+    }
+
+    &>img {
+      height: 100%;
+      width: auto;
+      display: block;
+      margin: 0 auto;
+    }
+
+    &>p {
+      margin-top: 12px;
+    }
+  }
+}
\ No newline at end of file

src/components/UploadImage/index.tsx

+import React, { useState, Fragment, forwardRef } from 'react'
+import { Upload, message } from 'antd'
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
+import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface'
+import cx from 'classnames'
+import styles from './index.less'
+
+interface UploadImagePorpsType {
+  imgUrl: string;
+  size?: string;
+  onChange: Function;
+  disabled?: boolean;
+}
+
+const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
+  const { imgUrl, onChange, size = "386x256", disabled = false } = props
+  const [loading, setLoading] = useState<boolean>(false)
+  const beforeUpload = (file: UploadFile) => {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
+    if (!isJpgOrPng) {
+      message.error('仅支持上传JPEG/JPG/PNG文件!');
+    }
+    const isLt200k = file.size / 1024 < 200;
+    if (!isLt200k) {
+      message.error('上传图片不超过200K!');
+    }
+    return isJpgOrPng && isLt200k;
+  }
+
+  const uploadProps = {
+    name: 'file',
+    action: '/api/file/file/upload',
+    headers: {},
+    data: {
+      fileType: 1
+    },
+    disabled: loading || disabled,
+    showUploadList: false,
+    onChange(info: UploadChangeParam) {
+      if (info.file.status === 'uploading') {
+        setLoading(true)
+        return;
+      }
+      if (info.file.status === 'done') {
+        // 图片回显
+        const { code, data } = info.file.response
+        if (code === 1000) {
+          console.log('upload success')
+          onChange(data)
+        }
+        setLoading(false)
+      }
+    },
+    beforeUpload
+  };
+
+  const uploadButton = (
+    <Fragment>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <p>上传图片</p>
+    </Fragment>
+  );
+
+  return (
+    <div className={styles.upload_image_wrap}>
+      <Upload {...uploadProps}>
+        {<div className={cx(styles.upload_btn, !imgUrl ? styles.isAdd : "")}>
+          {
+            imgUrl ? <img src={imgUrl} /> : uploadButton
+          }
+        </div>}
+      </Upload>
+      <div className={styles.size_require}>
+        <p>支持JPG/PNG/JPEG， <br />最大不超过 200K， <br />尺寸：{size}</p>
+      </div>
+    </div>
+  )
+})
+
+export default UploadImage

src/formSchema/const/index.ts

+export const FORM_FILTER_PATH = 'FORM_FILTER_PATH'
\ No newline at end of file

src/formSchema/effects/useFilterSearch.ts

+import { useValueLinkageEffect, ISchemaFormActions, ISchemaFormAsyncActions } from "@formily/antd"
+
+/**
+ * @param origin 触发联动的字段路径
+ * @param target 关联的字段路径
+ */
+export const useStateFilterSearchLinkageEffect = (context, actions: ISchemaFormActions | ISchemaFormAsyncActions, origin: string, target: string) => {
+  const { setFieldState, reset } = actions
+  context('onFieldChange', origin).subscribe(state => {
+    setFieldState(target, fieldState => {
+      fieldState.visible = state.filterSearch
+    })
+  })
+}
\ No newline at end of file

src/formSchema/effects/usePublicSelect.ts

+import { createFormActions, FormEffectHooks } from '@formily/antd'
+import { useLinkageUtils } from '@/utils/formEffectUtils'
+
+/**
+ * 定义表单副作用的集合
+ */
+const { onFieldValueChange$ } = FormEffectHooks
+
+export const usePublicSelectEffects = context => {
+  const linkage = useLinkageUtils()
+  onFieldValueChange$('select').subscribe(({ value }) => {
+    linkage.visible(value)
+  })
+}
\ No newline at end of file

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/hooks/usePageStatus.ts

+import { history } from 'umi'
+import { useState } from 'react'
+
+export enum PageStatus {
+  ADD,
+  EDIT,
+  PREVIEW
+}
+
+export const usePageStatus = () => {
+  const { preview, id = '' } = history.location.query
+  // 默认预览状态
+  let pageStatus = PageStatus.PREVIEW
+  if (preview === '1') {
+    pageStatus = PageStatus.PREVIEW
+  } else {
+    if (id) {
+      pageStatus = PageStatus.EDIT
+    } else {
+      pageStatus = PageStatus.ADD
+    }
+  }
+
+  return {
+    pageStatus,
+    id,
+    preview
+  }
+}
\ 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/pages/transaction/stockSellStorage/billsType/index.tsx

 import React, { useState, useEffect, useRef } from 'react';
 import { history } from 'umi';
-import {
-  Tooltip,
-  Input,
-  Select,
-  Button,
-  Card,
-  Dropdown,
-  Menu,
-  Row,
-  Col,
-  Popconfirm,
-} from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Tooltip, Input, Button, Card, Row, Col, Popconfirm } from 'antd';
 import {
   PlusOutlined,
   EyeOutlined,
-  UpOutlined,
-  DeleteOutlined,
-  DownOutlined,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
 } from '@ant-design/icons';
 import { StandardTable } from 'god';
 import { ColumnType } from 'antd/lib/table/interface';
 import style from './index.less';
 
-const BillsType: React.FC<{}> = () => {
-  return <div>BillsType</div>;
+const data = [
+  {
+    key: '1',
+    id: '1',
+    no: 'DJ001',
+    name: '进货入库单',
+    direction: 1,
+    status: 1,
+  },
+  {
+    key: '2',
+    id: '2',
+    no: 'DJ002',
+    name: '退货入库单',
+    direction: 2,
+    status: 2,
+  },
+];
+
+const billsType: React.FC<{}> = () => {
+  const ref = useRef({});
+  const [searchName, setSearchName] = useState('');
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      align: 'center',
+      key: 'id',
+    },
+    {
+      title: '单据类型编号',
+      dataIndex: 'no',
+      align: 'center',
+      key: 'no',
+    },
+    {
+      title: '单据名称',
+      dataIndex: 'name',
+      align: 'center',
+      key: 'name',
+      render: (text: any, record: any) => {
+        return (
+          <span className="commonPickColor" onClick={() => history.push('')}>
+            {text}&nbsp;
+            <EyeOutlined />
+          </span>
+        );
+      },
+    },
+    {
+      title: '方向',
+      dataIndex: 'direction',
+      align: 'center',
+      key: 'direction',
+      render: (text: any, record: any) => {
+        return (
+          <span>
+            {text}
+            {record.direction === 1 ? ' +' : ' -'}
+          </span>
+        );
+      },
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      align: 'center',
+      key: 'status',
+      sorter: true,
+      render: (text: any, record: any) => {
+        return (
+          <Popconfirm
+            title="确定要执行这个操作?"
+            onConfirm={() => console.log('...')}
+            onCancel={() => console.log('...')}
+            okText="是"
+            cancelText="否"
+          >
+            <Button
+              type="link"
+              onClick={() => console.log('???')}
+              style={
+                record.status === 1 ? { color: '#00B37A' } : { color: 'red' }
+              }
+            >
+              {record.status === 1 ? (
+                <>
+                  有效 <PlayCircleOutlined />
+                </>
+              ) : (
+                <>
+                  无效 <PauseCircleOutlined />
+                </>
+              )}
+            </Button>
+          </Popconfirm>
+        );
+      },
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      align: 'center',
+      render: (record: any) => (
+        <>
+          <Button type="link" onClick={record => history.push('')}>
+            编辑
+          </Button>
+          <Popconfirm
+            title="确定要执行这个操作?"
+            onConfirm={() => console.log('...')}
+            onCancel={() => console.log('...')}
+            okText="是"
+            cancelText="否"
+          >
+            <Button type="link">删除</Button>
+          </Popconfirm>
+        </>
+      ),
+    },
+  ];
+
+  // 模拟请求
+  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 handleReset = () => {};
+
+  return (
+    <PageHeaderWrapper>
+      <Card>
+        <StandardTable
+          tableProps={{ rowKey: 'id' }}
+          columns={columns}
+          currentRef={ref}
+          fetchTableData={(params: any) => fetchData(params)}
+          controlRender={
+            <Row>
+              <Col span={12}>
+                <Button
+                  type="primary"
+                  onClick={() =>
+                    history.push(
+                      '/memberCenter/memberAbility/manage/addMember?type=add',
+                    )
+                  }
+                >
+                  <PlusOutlined />
+                  新建
+                </Button>
+              </Col>
+              <Col span={12} style={{ textAlign: 'right' }}>
+                <Tooltip
+                  trigger={['focus']}
+                  placement="top"
+                  title={<span>输入单据名称进行搜索</span>}
+                >
+                  <Input.Search
+                    style={{ width: '232px' }}
+                    value={searchName}
+                    placeholder="搜索"
+                    onChange={e => setSearchName(e.target.value)}
+                  />
+                </Tooltip>
+                <Button
+                  style={{ marginLeft: '16px' }}
+                  onClick={() => handleReset()}
+                >
+                  重置
+                </Button>
+              </Col>
+            </Row>
+          }
+        />
+      </Card>
+    </PageHeaderWrapper>
+  );
 };
 
-export default BillsType;
+export default billsType;

src/pages/transaction/stockSellStorage/warehouse/index.tsx

 import React, { useState, useEffect, useRef } from 'react';
 import { history } from 'umi';
-import {
-  Tooltip,
-  Input,
-  Select,
-  Button,
-  Card,
-  Dropdown,
-  Menu,
-  Row,
-  Col,
-  Popconfirm,
-} from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Tooltip, Input, Button, Card, Row, Col, Popconfirm } from 'antd';
 import {
   PlusOutlined,
   EyeOutlined,
-  UpOutlined,
-  DeleteOutlined,
-  DownOutlined,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
 } from '@ant-design/icons';
 import { StandardTable } from 'god';
 import { ColumnType } from 'antd/lib/table/interface';
 import style from './index.less';
 
+const data = [
+  {
+    key: '1',
+    id: '1',
+    name: '广州成品仓',
+    address: '广东省广州市海珠区新港东路1068号中洲中心北塔6楼',
+    person: '蒯美政',
+    phoneMobile: '185 2929 5432',
+    status: 1,
+  },
+  {
+    key: '2',
+    id: '2',
+    name: '广州成品仓',
+    address: '广东省广州市海珠区新港东路1068号中洲中心北塔6楼',
+    person: '蒯美政',
+    phoneMobile: '185 2929 5432',
+    status: 2,
+  },
+];
+
 const WareHouse: React.FC<{}> = () => {
-  return <div>warehouse</div>;
+  const ref = useRef({});
+  const [searchName, setSearchName] = useState('');
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      align: 'center',
+      key: 'id',
+    },
+    {
+      title: '仓库名称',
+      dataIndex: 'name',
+      align: 'center',
+      key: 'name',
+      render: (text: any, record: any) => {
+        return (
+          <span className="commonPickColor" onClick={() => history.push('')}>
+            {text}&nbsp;
+            <EyeOutlined />
+          </span>
+        );
+      },
+    },
+    {
+      title: '仓库地址',
+      dataIndex: 'address',
+      align: 'center',
+      key: 'address',
+    },
+    {
+      title: '仓库负责人',
+      dataIndex: 'person',
+      align: 'center',
+      key: 'person',
+    },
+    {
+      title: '联系电话',
+      dataIndex: 'phoneMobile',
+      align: 'center',
+      key: 'phoneMobile',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      align: 'center',
+      key: 'status',
+      sorter: true,
+      render: (text: any, record: any) => {
+        return (
+          <Popconfirm
+            title="确定要执行这个操作?"
+            onConfirm={() => console.log('...')}
+            onCancel={() => console.log('...')}
+            okText="是"
+            cancelText="否"
+          >
+            <Button
+              type="link"
+              onClick={() => console.log('???')}
+              style={
+                record.status === 1 ? { color: '#00B37A' } : { color: 'red' }
+              }
+            >
+              {record.status === 1 ? (
+                <>
+                  有效 <PlayCircleOutlined />
+                </>
+              ) : (
+                <>
+                  无效 <PauseCircleOutlined />
+                </>
+              )}
+            </Button>
+          </Popconfirm>
+        );
+      },
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      align: 'center',
+      render: (record: any) => (
+        <>
+          <Button type="link" onClick={record => history.push('')}>
+            编辑
+          </Button>
+          <Popconfirm
+            title="确定要执行这个操作?"
+            onConfirm={() => console.log('...')}
+            onCancel={() => console.log('...')}
+            okText="是"
+            cancelText="否"
+          >
+            <Button type="link">删除</Button>
+          </Popconfirm>
+        </>
+      ),
+    },
+  ];
+
+  // 模拟请求
+  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 handleReset = () => {};
+
+  return (
+    <PageHeaderWrapper>
+      <Card>
+        <StandardTable
+          tableProps={{ rowKey: 'id' }}
+          columns={columns}
+          currentRef={ref}
+          fetchTableData={(params: any) => fetchData(params)}
+          controlRender={
+            <Row>
+              <Col span={12}>
+                <Button
+                  type="primary"
+                  onClick={() =>
+                    history.push(
+                      '/memberCenter/memberAbility/manage/addMember?type=add',
+                    )
+                  }
+                >
+                  <PlusOutlined />
+                  新建
+                </Button>
+              </Col>
+              <Col span={12} style={{ textAlign: 'right' }}>
+                <Tooltip
+                  trigger={['focus']}
+                  placement="top"
+                  title={<span>输入仓库名称进行搜索</span>}
+                >
+                  <Input.Search
+                    style={{ width: '232px' }}
+                    value={searchName}
+                    placeholder="搜索"
+                    onChange={e => setSearchName(e.target.value)}
+                  />
+                </Tooltip>
+                <Button
+                  style={{ marginLeft: '16px' }}
+                  onClick={() => handleReset()}
+                >
+                  重置
+                </Button>
+              </Col>
+            </Row>
+          }
+        />
+      </Card>
+    </PageHeaderWrapper>
+  );
 };
 
 export default WareHouse;

src/utils/formEffectUtils.ts

+import { createFormActions, FormPath } from '@formily/antd'
+
+export const useLinkageUtils = () => {
+  const { setFieldState } = createFormActions()
+  const linkage = (key, defaultValue?) => (path, value?) =>
+    setFieldState(path, state => {
+      FormPath.setIn(state, key, value !== undefined ? value : defaultValue)
+    })
+  return {
+    hide: linkage('visible', false),
+    show: linkage('visible', true),
+    visible: linkage('visible'),
+    enum: linkage('props.enum', []),
+    loading: linkage('loading', true),
+    loaded: linkage('loading', false),
+    value: linkage('value')
+  }
+}

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,