Skip to content

J
jinfa-platform
Commit 349345b4 authored by Bill's avatar Bill
Browse files
Options

完善新建

parent d80432a7
Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 132 deletions
src/pages/handling/assign/add/index.tsx
View file @ 349345b4
import React, { useState } from 'react';
import React, { useState, useCallback, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { SaveOutlined } from '@ant-design/icons';
import { Button, Card, Select, DatePicker } from 'antd';
import { Button, Card, Select, DatePicker, Radio, Table } from 'antd';
import { history } from 'umi';
import ReutrnEle from '@/components/ReturnEle';
import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
......@@ -20,13 +20,23 @@ import {WrapUploadFile} from '../../components/UploadFile';
*/
const formActions = createFormActions();
const enterPriseFormActions = createFormActions();
const ProcessProductActions = createFormActions()
const { onFormInit$, onFieldValueChange$ } = FormEffectHooks
const Add: React.FC<{}> = () => {
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
// 加工企业
const [activeSource, setActiveSource] = useState('加工订单')
// 加工企业 modal 框
const [modalEnterPriseVisible, setEnterPriseModalVisible] = useState<boolean>(false);
// 加工商品
const [modalProducVisible, setModalProductVisible] = useState<boolean>(false);
// 加工商品 modal 框
const [modalProductVisible, setModalProductVisible] = useState<boolean>(false);
// 加工订单 modal 框
const [modalOrderVisible, setModalOrderVisible] = useState<boolean>(false);
//
// const [saveProcessProductRows, setSaveProcessProductionRow] =
/* --------以下是 element-------- */
// 选择加工企业 modal 层
const connectProduct = (
<div>
......@@ -37,19 +47,70 @@ const Add: React.FC<{}> = () => {
</div>
)
const tableAddButton = (
<div>
<Button
onClick={() => setModalProductVisible(true)}
style={{marginBottom: 16}}
block
icon={<PlusOutlined/>}
type='dashed'
>
选择指定会员
</Button>
</div>
)
// 选择弹框 element
const tableAddButton = () => {
return (
<div>
<Button
onClick={handleShowProcessModal}
style={{marginBottom: 16}}
block
icon={<PlusOutlined/>}
type='dashed'
>
选择{activeSource}
</Button>
</div>
)
}
// 通知单明细 -> 通知单来源
const source = () => {
return (
<Radio checked={true}>{activeSource}</Radio>
)
}
// 流转记录
const RadioBtnGroup = () => {
return (
<Radio.Group
options={
[
{ label: '外部流转(0)', value: 1 },
{ label: '内部流转(0)', value: 2 }
]
}
optionType="button"
/>
)
}
/* -------- element end-------- */
/* 逻辑 start */
const formEffects = () => () => {
onFieldValueChange$('source').subscribe((state) => {
if(state.mounted) {
const value = state.value == 1 ? '加工订单' : '加工商品';
setActiveSource(value);
}
})
}
// 选择加工商品弹框控制
const handleShowProcessModal = () => {
const source = formActions.getFieldValue('source');
if(source == 1) {
setModalOrderVisible(true);
} else {
setModalProductVisible(true)
}
}
const processProductSelected = (rows) => {
console.log(rows)
formActions.setFieldValue('Tabs.tab-2.layout.someLists', rows)
}
/** 逻辑 end */
return (
<PageHeaderWrapper
......@@ -72,27 +133,31 @@ const Add: React.FC<{}> = () => {
<NiceForm
schema={addSchema}
actions={formActions}
components={{WrapUploadFile, DatePicker, Select}}
components={{WrapUploadFile, DatePicker, Select, Table}}
expressionScope={{
connectProduct,
tableAddButton
tableAddButton: tableAddButton(),
source: source(),
RadioBtnGroup: RadioBtnGroup()
}}
effects={formEffects()}
/>
{/* 加工企业 Modal 框 */}
<EnterPrise
visible={modalEnterPriseVisible}
cancel={() => setEnterPriseModalVisible(false)}
cancel={() => setEnterPriseModalVisible(false)}
></EnterPrise>
{/* 加工商品Modal框 */}
{/* <ProcessProducts
visible={modalProducVisible}
<ProcessProducts
visible={modalProductVisible}
cancel={() => setModalProductVisible(false)}
></ProcessProducts> */}
actions={ProcessProductActions}
onOk={processProductSelected}
></ProcessProducts>
<ProcessOrder
visible={modalProducVisible}
cancel={() => setModalProductVisible(false)}
visible={modalOrderVisible}
cancel={() => setModalOrderVisible(false)}
>
</ProcessOrder>
</Card>
......
src/pages/handling/components/ModalForTable/BasicForm.tsx
View file @ 349345b4
......@@ -3,8 +3,10 @@ import {
SchemaForm,
registerVirtualBox,
SchemaField,
createControllerBox,
Schema
} from '@formily/antd';
import { Row, Col } from 'antd';
import { Row, Col, Modal } from 'antd';
const renderCol = (schema) => {
const { flexcol = {}, } = schema && schema['x-component-props'] || {};
......
src/pages/handling/components/ModalForTable/SearchForm.tsx
View file @ 349345b4
......@@ -4,12 +4,11 @@ import TablePagination from './TablePagination';
import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
import { UpOutlined, DownOutlined } from '@ant-design/icons'
import { Select, Input, Button, Table } from 'antd';
import { Submit } from '@formily/antd';
const Search = Input.Search;
const { onFormInit$, onFieldValueChange$ } = FormEffectHooks
const actions = createFormActions();
const SearchForm = (props) => {
const { schema, components, actions, effects, expressionScope } = props;
const effectInstance = () => () => {
......@@ -20,26 +19,35 @@ const SearchForm = (props) => {
})
onFieldValueChange$('pagination').subscribe((state) => {
console.log("pagination")
// handleSearch({...state.value})
})
!!effects && effects();
}
const handleSubmit = (value) => {
console.log(value);
props.onSearch(value);
}
return (
<BasicForm
schema={schema}
components={{Select, Input, Button, Search, TablePagination, Table, ...components}}
components={{Select, Input, Button, Search, TablePagination, Table, Submit, ...components}}
actions={actions}
effects={effectInstance()}
onSubmit={handleSubmit}
expressionScope={{
HIGHT_FILTER_BTN: (
<div>高级搜索 <DownOutlined /></div>
),
reset: () => {
actions.reset();
},
search: (value) => {
handleSubmit({search: value})
// handleSubmit();
// console.log(value);
},
toggleFilters: () => {
actions.setFieldState('FILTERS', state => {
......
src/pages/handling/components/ModalForTable/index.tsx
View file @ 349345b4
......@@ -5,5 +5,5 @@ import SearchForm from './SearchForm';
export {
BasicForm,
TablePagination,
SearchForm
SearchForm,
}
\ No newline at end of file
src/pages/handling/components/ProcessOrder/index.tsx
View file @ 349345b4
import React, { useState } from 'react';
import { Modal, Space, Dropdown, Badge, Table } from 'antd';
import { Button, Table, Drawer } from 'antd';
import { PublicApi } from '@/services/api';
import EyePreview from '@/components/EyePreview';
import { BasicForm, TablePagination, SearchForm } from '../ModalForTable'
......@@ -30,46 +30,30 @@ const columns = [
}
]
const columns1 = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => (
<span>
<Badge status="success" />
Finished
</span>
),
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: () => (
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
</Space>
),
},
const expandRowColumn = [
{ title: '商品id', dataIndex: 'id' },
{ title: '商品名称', dataIndex: 'name'},
{ title: '品类', dataIndex: 'type'},
{ title: '品牌', dataIndex: 'brand'},
{ title: '单位', dataIndex: 'unit'},
{ title: '订单数量', dataIndex: 'total' },
{ title: '剩余加工数量', dataIndex: 'rest' },
{ title: '已加工数量', dataIndex: 'hasProcess'}
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
for (let i = 0; i < 3; ++i) {
data.push({
id: i,
name: '进口头层黄牛皮荔枝纹/红色/XL',
type: '牛皮',
brand: 'PELLE',
unit: '尺',
total: '2000',
rest: '1000',
hasProcess: '1000'
});
}
const tableSchema = {
table: {
......@@ -82,7 +66,7 @@ const tableSchema = {
"expandable": "{{expandable}}",
"pagination":false,
// "rowSelection": "{{rowSelection}}",
dataSource: [{id: 1}]
// dataSource: [{id: 1}]
}
},
}
......@@ -94,23 +78,41 @@ const ProcessProducts = ({visible, cancel, ...restProps}) => {
let res = await PublicApi.getMemberAbilityInfoPage(params);
return res.data;
};
const expandable = {
expandedRowRender: record => <Table columns={columns1} dataSource={data} pagination={false} />,
}
const rowSelection = {
onSelect: (record, selectRow, selected) => {
setSelectRow(record);
}
}
const expandable = {
expandedRowRender: record => <Table columns={expandRowColumn} rowKey={"id"} rowSelection={rowSelection} dataSource={data} pagination={false} />,
// defaultExpandAllRows: true
}
const handleSubmit = () => {
cancel();
}
return (
<Modal
<Drawer
title="选择加工订单"
width={704}
width={1200}
visible={visible}
onCancel={cancel}
onClose={cancel}
footer={
<div
style={{
textAlign: 'right',
}}
>
<Button onClick={cancel} style={{ marginRight: 8 }}>
取消
</Button>
<Button onClick={handleSubmit} type="primary">
确定
</Button>
</div>
}
>
<SearchForm
components={{Table}}
......@@ -121,8 +123,7 @@ const ProcessProducts = ({visible, cancel, ...restProps}) => {
expandable: expandable
}}
></SearchForm>
</Modal>
</Drawer>
)
}
......
src/pages/handling/components/ProcessProducts/index.tsx
View file @ 349345b4
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { Modal} from 'antd';
import { PublicApi } from '@/services/api';
import EyePreview from '@/components/EyePreview';
......@@ -6,34 +6,18 @@ import { BasicForm, TablePagination, SearchForm } from '../ModalForTable'
import { createFormActions } from '@formily/antd';
import processProductSchema from '../../schema/processProductSchema';
const actions = createFormActions();
// const actions = createFormActions();
const columns = [
{
title: '会员ID',
dataIndex: 'id'
},
{
title: '会员名称',
dataIndex: 'name'
},
{
title: '会员类型',
dataIndex: 'type'
},
{
title: '会员角色',
dataIndex: 'role'
},
{
title: '会员等级',
dataIndex: 'level'
}
{ title: 'ID', dataIndex: 'id'},
{ title: '商品名称', dataIndex: 'name'},
{ title: '上架商城', dataIndex: 'shop'},
{ title: '品类', dataIndex: 'type'},
{ title: '品牌', dataIndex: 'brand'}
]
const tableSchema = {
table: {
type: "object",
name: "table",
"x-component": "Table",
"x-component-props": {
"columns": columns,
......@@ -44,30 +28,76 @@ const tableSchema = {
},
}
const schema = processProductSchema(tableSchema);
const ProcessProducts = ({visible, cancel, ...restProps}) => {
const [selectRow, setSelectRow] = useState({});
const paginationParams = { current: 1, pageSize: 10};
const ProcessProducts = ({visible, cancel, actions, ...restProps}) => {
const [selectedRow, setSelectedRow] = useState({});
const fetchData = async (params: any) => {
let res = await PublicApi.getMemberAbilityInfoPage(params);
let res = await PublicApi.getManageContentColumnPage(params);
return res.data;
};
const setTableStatus = ({dataSource, totalCount}) => {
actions.setFieldState("table", state => {
//@ts-ignore
state.props["x-component-props"]["loading"] = false;
//@ts-ignore
state.props["x-component-props"]["dataSource"] = dataSource;
})
actions.setFieldState('pagination', state => {
//@ts-ignore
state.props["x-component-props"]["total"] = totalCount;
})
}
useEffect(() => {
if(visible) {
fetchData(paginationParams).then((data) => {
setTableStatus({dataSource:data.data, totalCount: data.totalCount})
})
}
}, [visible])
const handleSearch = (params) => {
const name = actions.getFieldValue('search');
// const status = actions.getFieldValue('status'); // 状态
const postData = {
name: name || '',
current: 1,
pageSize: 10,
}
fetchData(postData).then((data) => {
setTableStatus({dataSource:data.data, totalCount: data.totalCount})
})
}
const rowSelection = {
onSelect: (record, selectRow, selected) => {
setSelectRow(record);
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
setSelectedRow(selectedRows);
},
onSelectAll: (record, selected, changeRows) => {
const res = selected.filter((item) => item && item.id);
setSelectedRow(res);
}
}
const onOk = () => {
restProps.onOk(selectedRow)
cancel();
}
return (
<Modal
title="选择加工商品"
width={704}
visible={visible}
onCancel={cancel}
onOk={onOk}
>
<SearchForm
schema={schema}
actions={actions}
onSearch={handleSearch}
expressionScope={{rowSelection: rowSelection}}
></SearchForm>
......
src/pages/handling/schema/addSchema.tsx
View file @ 349345b4
/*
* @Author: your name
* @Date: 2020-10-12 13:37:06
* @LastEditTime: 2020-10-14 17:05:52
* @LastEditTime: 2020-10-16 16:55:22
* @Description: 新建生产通知单 schema
*/
import React from 'react';
import { Space, Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
// 流转记录
export const historyColumn = [
{ title: '序号', dataIndex: 'id'},
{ title: '操作角色', dataIndex: 'role'},
{ title: '状态', dataIndex: 'status'},
{ title: '操作', dataIndex: 'action'},
{ title: '操作时间', dataIndex: 'time'},
{ title: '审核意见', dataIndex: 'suggest'},
]
// 通知单明细
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
1st menu item
</a>
</Menu.Item>
</Menu>
);
export const noticesDetailColumn = [
{ title: '订单号', dataIndex: 'orderId' },
{ title: 'ID', dataIndex: 'id' },
{ title: '商品名称', dataIndex: 'productName' },
{ title: '品类', dataIndex: 'type' },
{ title: '品牌', dataIndex: 'brand' },
{ title: '单位', dataIndex: 'unit' },
{ title: '订单数量', dataIndex: 'orderTotal' },
{ title: '剩余加工数量', dataIndex: 'restTotal' },
{ title: '加工数量', dataIndex: 'total' },
{ title: '加工单价', dataIndex: 'processUnitPrice' },
{ title: '加工费', dataIndex: 'cost' },
{ title: '交期', dataIndex: 'time' },
{
title: '是否退货',
render: (text, record) => {
return (
<Space>
<a>编辑</a>
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
Hover me <DownOutlined />
</a>
</Dropdown>
</Space>
)
}
},
]
const basicTab = {
'tab-1': {
type: 'object',
......@@ -158,20 +213,11 @@ const detailTab = {
},
properties: {
selectedSource: {
type: 'radio',
title: '选择来源',
required: true,
enum: [
{
label: '加工订单',
value: 1
},
{
label: '加工商品',
value: 2
}
],
default: 1,
title: '通知单来源',
'x-component': 'Children',
'x-component-props': {
children: '{{source}}',
},
},
someLists: {
type: 'array:number',
......@@ -181,7 +227,8 @@ const detailTab = {
'x-component': 'MultTable',
'x-component-props': {
rowKey: 'id',
prefix: "{{tableAddButton}}"
prefix: "{{tableAddButton}}",
columns: noticesDetailColumn
// columns: "{{tableColumns}}",
}
}
......@@ -316,6 +363,36 @@ const historyRecord = {
'x-component-props': {
tab: '流转记录'
},
properties: {
layout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
autoRow: true,
full: true,
columns: 1
},
properties: {
controller: {
type: 'object',
'x-component': 'Children',
'x-component-props': {
children: '{{RadioBtnGroup}}'
}
},
historyTable: {
type: 'object',
'x-component': 'Table',
'x-component-props': {
columns: historyColumn
}
}
}
}
}
}
}
......
src/pages/handling/schema/processProductSchema.tsx
View file @ 349345b4
/*
* @Author: Bill
* @Date: 2020-10-14 18:45:31
* @LastEditTime: 2020-10-14 18:56:00
* @LastEditTime: 2020-10-16 17:39:55
* @desc 选择加工商品schema
* 这里其实就是两个flex 布局加一个table， 通过expressScrope 注入代码
*/
......@@ -18,7 +18,7 @@ const schema = (others) => {
align: 'center'
},
properties: {
'right-layout': {
'flex-layout': {
type: 'object',
name: 'rigth-layout',
"x-component": 'CustomFlexColumnLayout',
......@@ -28,7 +28,7 @@ const schema = (others) => {
name: 'controllers',
'x-component': 'CustomFlexRowLayout',
'x-component-props': {
justify: 'end',
justify: 'start',
},
properties: {
search: {
......@@ -100,7 +100,13 @@ const schema = (others) => {
}
}
},
queryBtn: {
type: 'string',
'x-component': 'Submit',
"x-component-props": {
"children": "查询",
}
}
}
}
}
......
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