Commit 81852234 authored by 前端-许佳敏's avatar 前端-许佳敏

拆分仓位页面

parent c8dbdc23
......@@ -26,8 +26,8 @@
"dependencies": {
"@ant-design/icons": "^4.2.1",
"@ant-design/pro-layout": "^5.0.16",
"@formily/antd": "^1.2.10",
"@formily/antd-components": "^1.2.10",
"@formily/antd": "^1.2.11",
"@formily/antd-components": "^1.2.11",
"@umijs/hooks": "^1.9.3",
"@umijs/preset-react": "1.x",
"@umijs/test": "^3.2.0",
......
import React from 'react';
import SchemaForm, {
IAntdSchemaFormProps, createVirtualBox, registerVirtualBox,
IAntdSchemaFormProps, createVirtualBox, registerVirtualBox, Schema, SchemaField, FormButtonGroup, Reset, createControllerBox,
} from '@formily/antd';
import { Button, Space, Row, Col } from 'antd';
import styled from 'styled-components'
......@@ -18,6 +18,7 @@ import CustomRelevance from './components/CustomRelevance';
import Children from './components/Children';
import CircleBox from './components/CircleBox';
import './index.less'
import { Input } from '@formily/antd-components';
export interface NiceFormProps extends IAntdSchemaFormProps {}
......@@ -42,6 +43,37 @@ registerVirtualBox('flex-layout', (_props) => {
</RowLayout>
)
})
registerVirtualBox('empty-layout', (_props) => {
const { children, props } = _props
return (
<div>{children}</div>
)
})
const SchemaFormButtonGroup = createVirtualBox('schemaButtonGroup', FormButtonGroup)
const SchemaButton = createVirtualBox('schemaButton', Button)
const SchemaSubmit = createVirtualBox('schemaSubmit', Submit)
const SchemaReset = createVirtualBox('schemaReset', Reset)
export const FlexBox = createVirtualBox('flexBox', props => <Row {...props}/>)
// 该组件用于schema中嵌套表单, 不过控制台会出现警告
const schemaLayout = createControllerBox("schemaLayout", (_props) => {
const { schema } = _props;
const componentProps = schema.getExtendsComponentProps();
const { properties } = schema.toJSON();
const nestedSchema = new Schema({
type: "object",
properties
});
// const { visible, title, onCancel, footer, ...others } = componentProps;
return (
<NiceForm>
<SchemaField schema={nestedSchema}></SchemaField>
</NiceForm>
);
});
const NiceForm: React.FC<NiceFormProps> = props => {
const { children, components, ...reset } = props;
const customComponents = {
......@@ -57,7 +89,9 @@ const NiceForm: React.FC<NiceFormProps> = props => {
CustomRegistryPhone,
CustomRelevance,
Children,
CircleBox
CircleBox,
SchemaFormButtonGroup,
FlexBox
};
const defineComponents = Object.assign(customComponents, components);
......
import React, { Component } from 'react';
import { Link } from 'umi'
import SchemaForm, { SchemaField, Schema, createControllerBox } from '@formily/antd';
import { Modal } from 'antd';
class Index extends Component<{}, {}> {
render() {
......
......@@ -14,7 +14,7 @@ import ReutrnEle from '@/components/ReturnEle';
import './index.less'
import NiceForm from '@/components/NiceForm'
import { repositDetailSchema } from './schema'
import { createFormActions, ISchema } from '@formily/antd'
import { createFormActions, ISchema, FormEffectHooks } from '@formily/antd'
import EyePreview from '@/components/EyePreview'
import { findItemAndDelete } from '@/utils'
import { PublicApi } from '@/services/api'
......@@ -32,14 +32,6 @@ const fetchProductList = async (params) => {
return res.data
}
const fetchWarehouseAll = async () => {
const { data } = await PublicApi.getWarehouseWarehouseAll()
return data.map(v => ({
value: v.id,
label: v.name
}))
}
const addSchemaAction = createFormActions()
const AddRepository:React.FC<{}> = (props) => {
......@@ -52,6 +44,17 @@ const AddRepository:React.FC<{}> = (props) => {
const initValue = useInitValue(PublicApi.getWarehouseFreightSpaceDetails)
const [visibleChannelMember, setVisibleChannelMember] = useState(false)
const [visibleChannelRroduct, setVisibleChannelRroduct] = useState(false)
// 获取到的所有仓库, 用于选中后获得仓库库存
const repositRef = useRef<any>({})
const fetchWarehouseAll = async () => {
const { data } = await PublicApi.getWarehouseWarehouseAll()
repositRef.current = data
return data.map(v => ({
value: v.id,
label: v.name
}))
}
const [memberRowSelection, memberRowCtl] = useRowSelectionTable()
const [productRowSelection, productRowCtl] = useRowSelectionTable({type: 'radio'})
......@@ -236,6 +239,13 @@ const AddRepository:React.FC<{}> = (props) => {
}}
effects={() => {
useAsyncSelect('warehouseId', fetchWarehouseAll)
FormEffectHooks.onFieldValueChange$('warehouseId').subscribe(state => {
console.log(state.value)
addSchemaAction.setFieldState('inventory', targetState => {
const data = repositRef.current
targetState.props['x-component-props'].max = Array.isArray(data) ? data.find(v => v.id === state.value)?.principal : 200
})
})
}}
onSubmit={handleSubmit}
actions={addSchemaAction}
......
import React, {useState, useRef, useEffect} from 'react'
import { history } from 'umi'
import { Button, Form, Card, Tabs, Input, Radio, Modal, Select, Table, Row, Col, Tooltip, Slider, InputNumber, Avatar, Tag } from 'antd'
import { Button, Form, Card, Modal, Select, Table, Checkbox, Row, Col, Tooltip, Slider, InputNumber, Avatar, Tabs } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
PlusOutlined,
SaveOutlined,
SettingOutlined,
QuestionCircleOutlined
LinkOutlined,
LoadingOutlined,
} from '@ant-design/icons'
import { ColumnType } from 'antd/lib/table/interface';
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 './index.less'
import NiceForm, {FlexBox} from '@/components/NiceForm'
import { repositDetailSchema, repositMoreSchema, repositSchema, repositTabOneSchema, repositInSchema } from './schema'
import { createFormActions, ISchema, FormButtonGroup, Submit, FormEffectHooks, FormProvider, FormSpy } from '@formily/antd'
import EyePreview from '@/components/EyePreview'
import { findItemAndDelete } from '@/utils'
import { PublicApi } from '@/services/api'
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable'
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect'
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus'
import { useInitValue } from '@/formSchema/effects/useInitValue'
import { useSyncValues } from '@/formSchema/effects/useSyncValues'
import { useLinkageUtils } from '@/utils/formEffectUtils'
const {Item}:any = Form
const { Option } = Select
// 定义选择的行数据的类型
interface Item {
key: string;
role: string;
businessType: string;
roleType: string;
memberType: string;
status: string;
const fetchMemberList = async (params) => {
const res = await PublicApi.getMemberMaintenancePage(params)
return res.data
}
const { TabPane } = Tabs
const layout = {
labelCol: {
span: 2,
},
wrapperCol: {
span: 12,
},
const fetchProductList = async (params) => {
const res = await PublicApi.getProductCommodityGetCommodityList(params)
return res.data
}
const layoutStore = {
labelCol: {
span: 3,
},
wrapperCol: {
span: 21,
},
}
const layoutInOut = {
labelCol: {
span: 4,
},
wrapperCol: {
span: 20,
},
}
const data = [
{
key: '1',
role: '采购商',
businessType: '采购',
roleType: '服务消费',
memberType: '企业会员',
},
{
key: '2',
role: '供应商',
businessType: '商品供应',
roleType: '服务提供',
memberType: '企业会员',
},
]
const dataSetMember = [
{
key: '1',
name: '渠道名称',
type: '渠道企业会员',
role: '渠道采购商',
class: '青铜会员',
},
{
key: '2',
name: '渠道名称',
type: '渠道企业会员',
role: '渠道采购商',
class: '铁皮会员',
},
]
const dataRecord = [
{
key: '1',
inRepository: '牛皮仓-渠道商城-所有渠道',
outRepository: '牛皮仓-直销商城-会员渠道',
productName: '进口头层牛皮荔枝纹/天青色/XXXLL',
inAmount: 10232,
outAmount: 981232,
unit: '吨',
time: '1250-51-02 45:23:99',
},
{
key: '2',
inRepository: '牛皮仓-渠道商城-所有渠道',
outRepository: '牛皮仓-直销商城-会员渠道',
productName: '进口头层牛皮荔枝纹/天青色/XXXLL',
inAmount: 10232,
outAmount: 981232,
unit: '吨',
time: '1250-51-02 45:23:99',
}
];
// 模拟请求
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 fetchDepositAllList = async () => {
const { data } = await PublicApi.getWarehouseFreightSpaceAll()
return data.map(v => ({
value: v.id,
label: v.name
}))
}
const AdjustRepository:React.FC<{}> = (props) => {
const ref = useRef({})
const [form] = Form.useForm()
const [reduceType, setReduceType] = useState(0)
const [memberType, setMemberType] = useState(0)
const addSchemaAction = createFormActions()
const repositSchemaAction = createFormActions()
const [visibleChannelMember, setVisibleChannelMember] = useState(false)
const [selectRow, setSelectRow] = useState<Item[]>([]) // 模态框选择的行数据
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([])
const AddRepository:React.FC<{}> = (props) => {
const ref = useRef<any>({})
const {
id,
preview,
pageStatus
} = usePageStatus()
// 获取到的所有仓库, 用于选中后获得仓库库存
const [reposits, setReposits] = useState<any>(null)
const [inputSliderValue, setInputSliderValue] = useState(1)
const [inAmountValue, setInAmountValue] = useState(4000)
const [outAmountValue, setOutAmountValue] = useState(3000)
const fetchWarehouseAll = async () => {
const { data } = await PublicApi.getWarehouseWarehouseAll()
setReposits(data)
return data.map(v => ({
value: v.id,
label: v.name
}))
}
const columns: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'key',
align: 'center',
key: 'key',
},
{
title: '商品名称',
dataIndex: 'role',
align: 'center',
key: 'role',
},
{
title: '品类',
align: 'center',
dataIndex: 'businessType',
key: 'businessType',
},
{
title: '品牌',
align: 'center',
dataIndex: 'roleType',
key: 'roleType',
},
{
title: '单位',
align: 'center',
dataIndex: 'memberType',
key: 'memberType',
},
];
const search: IFormFilter[] = [
{
type: 'Input',
value: 'keywords',
col: 6,
label: '商品名称',
placeHolder: '商品名称'
},
{
type: 'Select',
value: 'class',
col: 6,
placeHolder: '商品品类',
statusList: [{
type:'Select',
label:'还不错',
value:'1'
},{
type:'Select',
label:'还可以',
value:'2'
}]
},
{
type: 'Select',
value: 'brand',
col: 6,
placeHolder: '商品品牌',
statusList: [{
type:'Select',
label:'还不错',
value:'1'
},{
type:'Select',
label:'还可以',
value:'2'
}]
},
]
const initValue = useInitValue(PublicApi.getWarehouseFreightSpaceDetails)
const [visibleChannelMember, setVisibleChannelMember] = useState(false)
const [visibleChannelRroduct, setVisibleChannelRroduct] = useState(false)
const searchBarActions: IButtonFilter[] = [
{
text: '查询',
handler: () => {
console.log('查询')
}
}
]
const [memberRowSelection, memberRowCtl] = useRowSelectionTable()
const [productRowSelection, productRowCtl] = useRowSelectionTable({type: 'radio'})
const columnsSetMember: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'key',
dataIndex: 'memberId',
align: 'center',
key: 'key',
key: 'memberId',
},
{
title: '会员名称',
......@@ -233,522 +88,295 @@ const AdjustRepository:React.FC<{}> = (props) => {
},
{
title: '会员类型',
dataIndex: 'type',
dataIndex: 'memberTypeName',
align: 'center',
key: 'type',
key: 'memberTypeName',
},
{
title: '会员角色',
dataIndex: 'role',
dataIndex: 'roleName',
align: 'center',
key: 'role',
key: 'roleName',
},
{
title: '会员等级',
dataIndex: 'class',
align: 'center',
key: 'class',
},
{
title: <>操作<a style={{color:'#868f9e'}}> <SettingOutlined /></a></>,
dataIndex: 'option',
dataIndex: 'levelTag',
align: 'center',
render: (text:any, record:any) => {
return (
<>
<Button type='link'>删除</Button>
</>
)
}
key: 'levelTag',
}
]
const columnsRecord = [
{
title: 'ID',
dataIndex: 'key',
key: 'key',
},
{
title: '调出/调入仓位',
dataIndex: 'inRepository',
key: 'inRepository',
render: (text: any, record: any) => <>
<p><Tag color="gold">调出仓位 </Tag>{record.outRepository}</p>
<p><Tag color="blue">调入仓位 </Tag>{record.inRepository}</p>
</>
},
const columnsSetProduct: ColumnType<any>[] = [
{
title: '调出商品',
dataIndex: 'productName',
key: 'productName',
title: '商品ID',
dataIndex: 'id',
align: 'center',
key: 'id',
},
{
title: '单位',
key: 'unit',
dataIndex: 'unit',
title: '商品名称',
dataIndex: 'name',
align: 'center',
key: 'name',
},
{
title: '调出库存',
key: 'outAmount',
dataIndex: 'outAmount',
render: (text: any, record: any) => <>
<p>调出库存:{record.outAmount}</p>
<p>调出前库存:{record.outAmount}</p>
</>
title: '品类',
dataIndex: ['customerCategory', 'name'],
align: 'center',
key: 'customerCategory.name',
},
{
title: '调入库存',
key: 'inAmount',
dataIndex: 'inAmount',
render: (text: any, record: any) => <>
<p>调入库存:{record.inAmount}</p>
<p>调入后库存:{record.inAmount}</p>
</>
title: '品牌',
dataIndex: ['brand', 'name'],
align: 'center',
key: 'brand.name',
},
{
title: '调拨时间',
key: 'time',
dataIndex: 'time',
title: '单位',
dataIndex: 'unitName',
align: 'center',
key: 'unitName',
},
];
]
const callback = (key: any) => {
console.log(key)
// 弹出会员
const handleAddMemberBtn = () => {
const checkBoxs = addSchemaAction.getFieldValue('applyMember')
memberRowCtl.setSelectedRowKeys(checkBoxs.map(v => v.memberId))
memberRowCtl.setSelectRow(checkBoxs)
setVisibleChannelMember(true)
}
const handleReduceTypeChange = (v:any) => {
setReduceType(v.target.value)
console.log(v.target.value,'v')
// 弹出商品选择
const handleAddProductBtn = () => {
productRowCtl.setSelectedRowKeys([])
productRowCtl.setSelectRow([])
setVisibleChannelRroduct(true)
}
const handleMemberTypeChange = (v:any) => {
setMemberType(v.target.value)
console.log(v.target.value,'v')
// 会员添加弹窗控制
const handleOkAddMember = () => {
setVisibleChannelMember(false)
addSchemaAction.setFieldValue('applyMember', memberRowCtl.selectRow)
}
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => {
setSelectRow(selectedRows);
setSelectedRowKeys(selectedRowKeys);
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
}
const handleCancelAddMember = () => {
setVisibleChannelMember(false)
}
const handleAddMemberBtn = () => {
setVisibleChannelMember(true)
// 商品添加弹窗控制
const handleOkAddProduct = () => {
setVisibleChannelRroduct(false)
addSchemaAction.setFieldValue('productName', productRowCtl.selectRow[0].name)
addSchemaAction.setFieldValue('category', productRowCtl.selectRow[0].customerCategory.name)
addSchemaAction.setFieldValue('brand', productRowCtl.selectRow[0].brand.name)
addSchemaAction.setFieldValue('unit', productRowCtl.selectRow[0].unitName)
addSchemaAction.setFieldValue('productId', productRowCtl.selectRow[0].id)
}
const handleOkAddMember = () => {
setVisibleChannelMember(false)
console.log('handleOkAddMember')
const handleCancelAddProduct = () => {
setVisibleChannelRroduct(false)
}
const handleCancelAddMember = () => {
setVisibleChannelMember(false)
console.log('handleCancelAddMember')
// 会员选择后的表格
const handleDeleteTable = (id) => {
const value = addSchemaAction.getFieldValue('applyMember')
addSchemaAction.setFieldValue('applyMember', findItemAndDelete(value, id))
}
const onNumberChange = (v: any) => {
console.log(v)
setInputSliderValue(v)
const tableColumns = [
{ dataIndex: 'memberId', title: 'ID', align: 'center' },
{ dataIndex: 'name', align: 'center', title: '会员名称', render: (_, record) => <EyePreview url={`/memberCenter/memberAbility/manage/addMember?id=${record.memberId}&preview=1`}>{_}</EyePreview> },
{ dataIndex: 'memberTypeName', title: '会员类型', align: 'center' },
{ dataIndex: 'ctl', title: '操作', align: 'center', render: (_, record) => <Button type='link' onClick={() => handleDeleteTable(record.id)}>删除</Button> }
]
const tableAddButton = <Button style={{marginBottom: 16}} block icon={<PlusOutlined/>} onClick={handleAddMemberBtn} type='dashed'>选择指定会员</Button>
const formSearch: ISchema = {
type: 'object',
properties: {
name: {
type: 'string',
"x-component": 'Search',
"x-component-props": {
placeholder: '请输入会员名称'
}
}
}
}
const formProduct: ISchema = {
type: 'object',
properties: {
name: {
type: 'string',
"x-component": 'Search',
"x-component-props": {
placeholder: '请输入商品名称'
}
}
}
}
// 商品选择
const onInAmountChange = (v: any) => {
setInAmountValue(v)
const connectProduct = pageStatus !== PageStatus.PREVIEW && <div className='connectBtn' onClick={handleAddProductBtn}><LinkOutlined style={{marginRight: 4}}/>选择</div>
// 仓位设置表单提交
const handleSubmit = async (values) => {
await PublicApi.postWarehouseFreightSpaceAdd(values)
setTimeout(() => {
history.goBack(-1)
}, 1000)
}
const outInAmountChange = (v: any) => {
setOutAmountValue(v)
// 库存调入表单提交
const handleRespotIn = async (values) => {
const params = {}
Object.entries(values).forEach(([key, value]) => {
if (!key.includes('NO_SUBMIT')) {
params[key] = value
}
})
await PublicApi.postWarehouseFreightSpaceAllotFold(params)
}
const transforInBtn = <Row justify='center'>
<Button type='primary' htmlType='submit'>调入</Button>
</Row>
return (<PageHeaderWrapper
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回"/>}
className='addRepository'
title="仓位库存调拨"
extra={[
<Button key="1" type="primary" icon={<SaveOutlined />}>
<Button key="1" onClick={() => addSchemaAction.submit(values => console.log(values)).then(res => console.log(res)).catch(err => console.log(err))} type="primary" icon={<SaveOutlined />}>
保存
</Button>,
]}
>
<Card>
<Tabs onChange={callback} type="card" defaultActiveKey="1">
<TabPane tab="基本信息" key="1">
<Form
{...layout}
form={form}
name="add-repository-basic"
labelAlign="left"
>
<Form.Item
name='repositoryName'
label={
<span>
仓位名称&nbsp;
<Tooltip title="这是一条描述文字!">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '输入仓位名称!',
},
]}
>
<Input placeholder="仓位名称" disabled />
</Form.Item>
<Form.Item
name='productName'
label={
<span>
商品名称&nbsp;
<Tooltip title="这是一条描述文字!">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '输入商品名称!',
},
]}
>
<Input placeholder="商品名称" disabled />
</Form.Item>
<Form.Item
name='mapRespoName'
label='对应仓库名称'
>
<Select defaultValue="guang" disabled>
<Option value="guang">广州成品仓</Option>
<Option value="shi">石河子原料仓</Option>
<Option value="wu">乌苏里半成品仓</Option>
</Select>
</Form.Item>
<Form.Item
name='mapProduName'
label='对应货品'
initialValue="M-112/进口头层牛皮荔枝纹/红色/XL/¥14.50"
>
<Input disabled placeholder="输入属性名称" />
</Form.Item>
<Form.Item
name='distribute'
label='分配仓位库存'
rules={[
{
required: true,
message: '请分配库存!',
},
]}
>
<Row>
<Col span={24}>
<Slider
min={1}
max={10000}
onChange={onNumberChange}
value={inputSliderValue}
/>
</Col>
<Col span={24}>
<Input.Group compact>
<InputNumber
min={1}
max={10000}
value={inputSliderValue}
onChange={onNumberChange}
/>
<Input
style={{
width: 40,
borderLeft: 0,
// borderRight: 0,
pointerEvents: 'none',
<Card className=''>
<FormProvider>
<Tabs type='card' defaultActiveKey='tab1'>
<Tabs.TabPane key='tab1' tab='仓位设置'>
<NiceForm
previewPlaceholder='loading...'
editable={pageStatus !== PageStatus.PREVIEW}
initialValues={initValue}
expressionScope={{
tableColumns,
tableAddButton,
connectProduct
}}
effects={() => {
useAsyncSelect('warehouseId', fetchWarehouseAll)
FormEffectHooks.onFieldValueChange$('warehouseId').subscribe(state => {
console.log(reposits)
addSchemaAction.setFieldState('inventory', targetState => {
targetState.props['x-component-props'].max = reposits ? reposits.principal : 200
})
})
}}
placeholder="尺"
disabled
onSubmit={handleSubmit}
actions={addSchemaAction}
schema={repositTabOneSchema}
/>
<span style={{lineHeight:'32px'}}>&nbsp;&nbsp;&nbsp;&nbsp;还剩:{10000-inputSliderValue}</span>
</Input.Group>
</Col>
</Row>
</Form.Item>
<Form.Item
name="reduceType"
label="库存扣减方式"
rules={[{
required: true,
message: '请选择库存扣减方式'
}]}
initialValue={reduceType}
</Tabs.TabPane>
<Tabs.TabPane key='tab2' tab='库存调入\调拨'>
<Tabs defaultActiveKey='tab2-1' tabPosition='left'>
<Tabs.TabPane tab='库存调入' key="tab2-1" forceRender>
{/* 使用formProvider 共享两个表单中的值 */}
<FormSpy>
{({ form: spyForm }) => {
return (
<NiceForm
schema={repositInSchema}
actions={repositSchemaAction}
onSubmit={handleRespotIn}
effects={($, {setFieldState}) => {
const utils = useLinkageUtils()
useAsyncSelect('freightSpaceId', fetchDepositAllList)
FormEffectHooks.onFormMount$().subscribe(() => {
const name = spyForm.getFieldValue('name')
utils.enum('foldFreightSpaceId', [
{label: name, value: id}
])
utils.value('foldFreightSpaceId', id)
})
}}
expressionScope={{
transforInBtn
}}
>
<Radio.Group onChange={handleReduceTypeChange}>
<Radio value={0}>按仓位随机扣减(默认)</Radio>
<Radio value={1}>按仓库物理地址远近顺序扣减</Radio>
</Radio.Group>
</Form.Item>
</Form>
</TabPane>
<TabPane tab="适用商城" key="2">
<Form
{...layoutStore}
name="add-repository-store"
labelAlign="left"
</NiceForm>
)
}}
</FormSpy>
</Tabs.TabPane>
<Tabs.TabPane tab='库存调出' key="tab2-2" forceRender>2</Tabs.TabPane>
<Tabs.TabPane tab='调拨记录' key="tab2-3">3</Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
</Tabs>
</FormProvider>
</Card>
<Modal
width={704}
title='选择渠道会员'
onOk={handleOkAddMember}
onCancel={handleCancelAddMember}
visible={visibleChannelMember}
>
<Form.Item
name='storeType'
label={
<span>
适用商城&nbsp;
<Tooltip title="这是一条描述文字!">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
<StandardTable
columns={columnsSetMember}
rowSelection={memberRowSelection}
fetchTableData={params => fetchMemberList(params)}
formilyProps={
{
required: true,
message: '请选择适用商城'
ctx: { schema: formSearch }
}
]}
initialValue="f"
>
<Radio.Group className={styles.storeItemRadio} name="storeType" size="large">
<Radio.Button value="c"><Avatar style={{marginBottom:5}}>LOGO</Avatar>&nbsp;WEB-会员商城</Radio.Button>
<Radio.Button value="d"><Avatar style={{marginBottom:5}}>LOGO</Avatar>&nbsp;WEB-渠道商城</Radio.Button>
<Radio.Button value="e"><Avatar style={{marginBottom:5}}>LOGO</Avatar>&nbsp;H5-会员商城</Radio.Button>
<Radio.Button value="f"><Avatar style={{marginBottom:5}}>LOGO</Avatar>&nbsp;H5-渠道商城</Radio.Button>
<Radio.Button value="g"><Avatar style={{marginBottom:5}}>LOGO</Avatar>&nbsp;小程序-会员商城</Radio.Button>
<Radio.Button value="h"><Avatar style={{marginBottom:5}}>LOGO</Avatar>&nbsp;APP-渠道商城</Radio.Button>
</Radio.Group>
</Form.Item>
</Form>
</TabPane>
<TabPane tab="适用会员" key="3">
<Form
{...layout}
form={form}
name="add-repository"
labelAlign="left"
>
<Form.Item
name="memberType"
label="选择渠道会员"
rules={[{
required: true,
message: '请选择渠道会员'
}]}
initialValue={memberType}
>
<Radio.Group onChange={handleMemberTypeChange}>
<Radio value={0}>所有会员共享(默认)</Radio>
<Radio value={1}>指定会员</Radio>
</Radio.Group>
</Form.Item>
</Form>
{
memberType ? <>
<Button onClick={handleAddMemberBtn} style={{width:'100%', marginBottom: 24, backgroundColor: '#fafbfc'}}>
<PlusOutlined /> 选择指定会员
</Button>
<Table dataSource={dataSetMember} columns={columnsSetMember} />
</> : ''
}
</TabPane>
<TabPane tab="库存调入" key="4">
<Form
{...layoutInOut}
form={form}
name="add-repository-in"
labelAlign="left"
>
<Row gutter={[60,0]}>
<Col span={12}>
<Form.Item
name='outRespoName'
label='调出仓位名称'
>
<Select defaultValue="guang">
<Option value="guang">广州成品仓</Option>
<Option value="shi">石河子原料仓</Option>
<Option value="wu">乌苏里半成品仓</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name='inRespoName'
label='调入仓位名称'
>
<Select defaultValue="shi">
<Option value="guang">广州成品仓</Option>
<Option value="shi">石河子原料仓</Option>
<Option value="wu">乌苏里半成品仓</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name='outRespoAmount'
label='当前仓位库存(尺)'
>
<div className={styles.circleAmount}>
<p>20000</p>
</div>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name='inRespoAmount'
label='当前仓位库存(尺)'
>
<div className={styles.circleAmount}>
<p>20000</p>
</div>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label=' '
labelCol={{span:3}}
wrapperCol={{span:18}}
colon={false}
>
<Slider
min={0}
max={10000}
marks={{0:0,2000:2000,4000:4000,6000:6000,8000:8000,10000:10000}}
onChange={onInAmountChange}
value={inAmountValue}
/>
</Form.Item>
<Form.Item wrapperCol={{offset:11}}>
<InputNumber
min={1}
max={10000}
value={inAmountValue}
onChange={onInAmountChange}
style={{fontSize:32, fontWeight:'bold', width:100, textAlign:'center'}}
/>
</Form.Item>
<Form.Item wrapperCol={{offset:11}}>
<Button type="primary" style={{width:112,height:32, margin:'0 autp'}}>调入</Button>
</Form.Item>
</Col>
</Row>
</Form>
</TabPane>
<TabPane tab="库存调出" key="5">
<Form
{...layoutInOut}
form={form}
name="add-repository-out"
labelAlign="left"
>
<Row gutter={[60,0]}>
<Col span={12}>
<Form.Item
name='outRespoName'
label='调出仓位名称'
>
<Select defaultValue="guang">
<Option value="guang">广州成品仓</Option>
<Option value="shi">石河子原料仓</Option>
<Option value="wu">乌苏里半成品仓</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name='inRespoName'
label='调入仓位名称'
>
<Select defaultValue="shi">
<Option value="guang">广州成品仓</Option>
<Option value="shi">石河子原料仓</Option>
<Option value="wu">乌苏里半成品仓</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name='outRespoAmount'
label='当前仓位库存(尺)'
>
<div className={styles.circleAmount}>
<p>20000</p>
</div>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name='inRespoAmount'
label='当前仓位库存(尺)'
>
<div className={styles.circleAmount}>
<p>20000</p>
</div>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label=' '
labelCol={{span:3}}
wrapperCol={{span:18}}
colon={false}
tableProps={{
rowKey: 'memberId'
}}
>
<Slider
min={0}
max={10000}
marks={{0:0,2000:2000,4000:4000,6000:6000,8000:8000,10000:10000}}
onChange={outInAmountChange}
value={outAmountValue}
/>
</Form.Item>
<Form.Item wrapperCol={{offset:11}}>
{/* <span className="inAmount">{outAmountValue}</span> */}
<InputNumber
min={1}
max={10000}
value={outAmountValue}
onChange={onInAmountChange}
style={{fontSize:32, fontWeight:'bold', width:100, textAlign:'center'}}
/>
</Form.Item>
<Form.Item wrapperCol={{offset:11}}>
<Button type="primary" style={{width:112,height:32, margin:'0 autp'}}>调出</Button>
</Form.Item>
</Col>
</Row>
</Form>
</TabPane>
<TabPane tab="调拨记录" key="6">
<Table columns={columnsRecord} dataSource={dataRecord} />
</TabPane>
</Tabs>
</StandardTable>
</Modal>
<Modal
title="选择渠道会员"
visible={visibleChannelMember}
onOk={handleOkAddMember}
onCancel={handleCancelAddMember}
width={704}
title='选择商品'
onOk={handleOkAddProduct}
onCancel={handleCancelAddProduct}
visible={visibleChannelRroduct}
>
<StandardTable
columns={columns}
rowSelection={rowSelection}
currentRef={ref}
fetchTableData={(params:any) => fetchData(params)}
formFilters={search}
buttonFilters={searchBarActions}
/>
columns={columnsSetProduct}
rowSelection={productRowSelection}
fetchTableData={params => fetchProductList(params)}
formilyProps={
{
ctx: { schema: formProduct }
}
}
tableProps={{
rowKey: 'id',
onRow: (record) => ({
onClick: () => {
productRowCtl.setSelectRow([record]);
productRowCtl.setSelectedRowKeys([record.id]);
},
})
}}
>
</StandardTable>
</Modal>
</Card>
</PageHeaderWrapper>)
</PageHeaderWrapper>
)
}
export default AdjustRepository
\ No newline at end of file
export default AddRepository
......@@ -149,7 +149,7 @@ const Repositories: React.FC<{}> = () => {
const handleAdjust = (record: any) => {
history.push(
`/memberCenter/commodityAbility/repositories/adjustRepository?id=${record.key}`,
`/memberCenter/commodityAbility/repositories/adjustRepository?id=${record.id}`,
);
};
......
......@@ -102,7 +102,7 @@ export const repositSchema: ISchema = {
}
}
export const repositDetailSchema: ISchema = {
export const repositMoreSchema: ISchema = {
type: 'object',
properties: {
REPOSIT_TABS: {
......@@ -287,3 +287,464 @@ export const repositDetailSchema: ISchema = {
}
}
}
// 新增仓位
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: '商品名称',
"x-mega-props": {
full: true
},
"x-component-props": {
disabled: true,
addonAfter: "{{connectProduct}}"
},
required: true
},
category: {
type: 'string',
display: false
},
brand: {
type: 'string',
display: false
},
unit: {
type: 'string',
display: false
},
productId: {
type: 'string',
display: false
},
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,
"x-linkages": [
{
type: 'value:visible',
target: 'applyMember',
"condition": "{{!$value}}"
}
]
},
applyMember: {
type: 'array:number',
"x-component": 'MultTable',
"x-component-props": {
rowKey: 'memberId',
columns: "{{tableColumns}}",
prefix: "{{tableAddButton}}"
}
}
}
}
}
}
}
}
}
}
// 仓位设置
export const repositTabOneSchema: ISchema = {
type: 'object',
properties: {
REPOSIT_TABS: {
type: 'object',
"x-component": "tab",
"x-component-props": {
tabPosition: 'left'
},
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: '商品名称',
"x-mega-props": {
full: true
},
"x-component-props": {
disabled: true,
addonAfter: "{{connectProduct}}"
},
required: true
},
category: {
type: 'string',
display: false
},
brand: {
type: 'string',
display: false
},
unit: {
type: 'string',
display: false
},
productId: {
type: 'string',
display: false
},
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,
"x-linkages": [
{
type: 'value:visible',
target: 'applyMember',
"condition": "{{!$value}}"
}
]
},
applyMember: {
type: 'array:number',
"x-component": 'MultTable',
"x-component-props": {
rowKey: 'memberId',
columns: "{{tableColumns}}",
prefix: "{{tableAddButton}}"
}
}
}
}
}
}
}
}
}
}
// 库存调入
export const repositInSchema: ISchema = {
type: 'object',
properties: {
repos_layout: {
type: 'object',
"x-component": 'mega-layout',
"x-component-props": {
grid: true,
autoRow: true,
labelCol: 8,
labelAlign: 'left',
columns: 2
},
properties: {
'freightSpaceId': {
type: 'string',
title: '调出仓位名称',
enum: [],
// required: true,
"x-mega-props": {
span: 1
}
},
'foldFreightSpaceId': {
type: 'string',
title: '调入仓位名称',
enum: [],
"x-component-props": {
disabled: true
},
"x-mega-props": {
span: 1
},
required: true
},
'NO_SUBMIT1': {
type: 'object',
readOnly: true,
title: '当前仓位库存(尺)',
"x-component": 'CircleBox',
default: 20000
},
'NO_SUBMIT2': {
type: 'object',
title: '当前仓位库存(尺)',
"x-component": 'CircleBox',
default: 20000
},
"foldInventory": {
type: 'number',
"x-component": "CustomSlider",
"x-component-props": {
width: '80%',
isNumber: true,
max: 20000,
min: 0,
marks: {
0: 0,
5000: 5000,
10000: 10000,
15000: 15000,
20000: 20000
},
layout: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}
},
"x-mega-props": {
span: 2
}
},
}
},
submit: {
type: 'object',
"x-component": 'Children',
"x-component-props": {
children: "{{transforInBtn}}"
}
}
}
}
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -7,6 +7,7 @@ const tokens = [
'8d14d945507d1f8cd89afe139ca6d111bbad25f702fafe0aec59d3c9cd2e0ffe', // 物流服务
'3a46198c5b97ac7147e5b07ad2dff5ac5c93c1afed47e1911961db87149e6ebf', // 商户会员管理服务
'efe99e20ed1375dc0db3e809e4fc7692f42ecebaf60cd77e65c50ed65d6ba6c4', // 商品服务
'c789e0e56ee8a8cc2fbd85f930eb2928c58fc1014583c6643acf29cff954da49', // 支付服务
]
const genMap = (tokens) => {
return tokens.map(v => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment