Skip to content

J
jinfa-platform
Commit ab695af8 authored by LeeJiancong's avatar LeeJiancong
Browse files
Options

新增物流模板

parent 08ed1b6f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 460 additions and 70 deletions
config/routes/logisticsRoutes.ts
View file @ ab695af8
......@@ -38,16 +38,22 @@ const LogisticsRoute = {
component: '@/pages/logistics/list/components/addressForm',
hideInMenu: true
},
// {
// path: '/logisticsAbility/logistics/list/receivingAddress',
// name: 'receivingAddress',
// component: '@/pages/logistics/list/receivingAddress'
// },
// {
// path: '/logisticsAbility/logistics/list/template',
// name: 'template',
// component: '@/pages/logistics/list/template'
// }
{
path: '/logisticsAbility/logistics/list/receivingAddress',
name: 'receivingAddress',
component: '@/pages/logistics/list/receivingAddress'
},
{
path: '/logisticsAbility/logistics/list/template',
name: 'template',
component: '@/pages/logistics/list/template'
},
{
path: '/logisticsAbility/logistics/list/templateForm',
name: 'templateForm',
component: '@/pages/logistics/list/components/templateForm',
hideInMenu: true
}
]
}
......
src/locales/zh-CN/menu.ts
View file @ ab695af8
......@@ -2,7 +2,7 @@
* @Author: LeeJiancong
* @Date: 2020-07-13 14:08:50
* @LastEditors: LeeJiancong
* @LastEditTime: 2020-07-15 10:43:55
* @LastEditTime: 2020-07-16 19:53:21
*/
export default {
'menu.welcome': '欢迎',
......@@ -60,6 +60,7 @@ export default {
'menu.logisticsAbility.logistics.addCompany':'新建物流公司',
'menu.logisticsAbility.logistics.deliveryAddress':'发货地址管理',
'menu.logisticsAbility.logistics.addressForm':'新建发货地址',
// 'menu.logisticsAbility.logistics.receivingAddress':'收货地址管理',
// 'menu.logisticsAbility.logistics.template':'运费模板管理',
'menu.logisticsAbility.logistics.receivingAddress':'收货地址管理',
'menu.logisticsAbility.logistics.template':'运费模板管理',
'menu.logisticsAbility.logistics.templateForm':'新建运费模板',
};
\ No newline at end of file
src/pages/logistics/list/company.tsx
View file @ ab695af8
/*
* @Date: 2020-07-13 15:01:40
* @LastEditors: LeeJiancong
* @LastEditTime: 2020-07-15 17:41:29
* @LastEditTime: 2020-07-17 15:13:08
*/
import React, { ReactNode, useRef } from 'react'
......@@ -77,8 +77,13 @@ const Company: React.FC<{}> = () => {
{
title: '合作类型',
align: 'center',
dataIndex: 'required',
key: 'required',
dataIndex: 'cooperateType',
key: 'cooperateType',
render: (value:any,recode: any) =>
<>
{value == 1? '平台物流服务商':'商户合作物流公司'}
</>
},
{
title: '状态',
......@@ -97,7 +102,6 @@ const Company: React.FC<{}> = () => {
>
<Button type="link" onClick={()=>handleModify(record)} style={record.status===1?{color:'#00B37A'}:{color:'red'}}>{record.status===1?'有效':'无效'}
{record.status===1?<PlayCircleOutlined />:<PauseCircleOutlined/>}
</Button>
</Popconfirm>
)
......
src/pages/logistics/list/components/addressForm.tsx
View file @ ab695af8
......@@ -2,35 +2,34 @@
* @Author: LeeJiancong
* @Date: 2020-07-15 10:31:55
* @LastEditors: LeeJiancong
* @LastEditTime: 2020-07-15 17:43:48
* @LastEditTime: 2020-07-16 18:09:37
*/
import React, { Component, useState } from 'react';
import React, { Component, useState,useEffect } from 'react';
import ReactDOM from 'react-dom'
import {
SchemaForm,
SchemaMarkupField as Field,
createFormActions,
FormButtonGroup,
registerFormFields,
Submit,
Reset
Reset,
connect
} from '@formily/antd'
import { history } from 'umi'
import { Row, Col, Card, Button, Popconfirm } from 'antd';
import { Row, Col, Card, Button, Popconfirm, Select as ISelect } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { MegaLayout, Input, Switch, Select, FormMegaLayout } from '@formily/antd-components'
import ReutrnEle from '@/components/ReturnEle'
import 'antd/dist/antd.css'
let selectList: any = [
{ label: '+86', value: '1' },
{ label: 'Two', value: '2' },
{ label: 'Three', value: '3' },
{ label: 'Four', value: '4' }
];
import ChinaImg from '../../../../../mockStatic/china.png'
import gou from '../../../../../mockStatic/gou.png'
import japenImg from '../../../../../mockStatic/japen.png'
import korenImg from '../../../../../mockStatic/koren.png'
import us from '../../../../../mockStatic/us.png'
const _width:number = 24
const _height:number = 17
interface countryItem {
name: string,
key: string,
......@@ -44,8 +43,35 @@ export interface ListType {
checked: boolean //可选
}
/**
* @description: 自定义formilyjs 有图标的select组件
* @param {type}
* @return:
*/
const { Option } = ISelect;
const children: any = [];
for (let i = 10; i < 36; i++) {
children.push(<Option value={i} key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
const dropdownRender = () => {
return (
<div>12</div>
)
}
// const CustomSelect = (props: any) => {
// return (
// <ISelect showArrow style={{ width: '100%' }} dropdownRender={dropdownRender}
// placeholder="Tags Mode" onChange={value => props.onChange(value)}>
// {/* {children} */}
// </ISelect>
// )
// }
// registerFormFields({ prefixSelect: connect()(CustomSelect) })
const diaLogForm: React.FC<ListProps> = (props) => {
const type:string = history.location.query.addType
const [state, setState] = useState({ editable: true })
const [headerTitle,setHeaderTitle] = useState('')
const [select, setSelect] = useState<countryItem>({
key: 'cn',
name: '简体中文-ZH',
......@@ -64,12 +90,34 @@ const diaLogForm: React.FC<ListProps> = (props) => {
const cancel = () => {
console.log('cancel')
}
const handleChangeSelect = () => {
}
useEffect(() => {
history.location.query.addType == '1'? setHeaderTitle('新建发货地址') : setHeaderTitle('新建收货地址')
return () => {
}
}, [])
const List:any = [ChinaImg,gou,japenImg,korenImg,us]
const selectList: any = [
{ label: <><img src={ChinaImg} key='1' style={{width: _width, height: 17}}/> +86</>, value: '1' },
{ label: <><img src={gou} key='2' style={{width: _width, height: 17}}/> +86</>, value: '2' },
{ label: <><img src={japenImg} key='3' style={{width: _width, height: 17}}/> +86</>, value: '3' },
{ label: <><img src={korenImg} key='4' style={{width: _width, height: 17}}/> +86</>, value: '4' },
{ label: <><img src={us} key='5' style={{width: _width, height: 17}}/> +86</>, value: '5' }
]
// List.map((item:any,key:number) => {
// let li = <><img src={item} key={key} style={{width: _width, height: 17}}/> +86</>
// })
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={props.title}
title={headerTitle}
>
<Card>
<Row>
......@@ -77,7 +125,7 @@ const diaLogForm: React.FC<ListProps> = (props) => {
<SchemaForm editable={state.editable}
initialValues={{
provic: '广东省',
phoneHead: '+86'
phoneHead: '1'
}}
components={{
......@@ -148,16 +196,22 @@ const diaLogForm: React.FC<ListProps> = (props) => {
/>
<FormMegaLayout label='手机号码' grid required full>
<Field
x-mega-props={{ span: 1, prefix: prefixIcon }}
x-mega-props={{ span: 1 }}
name="phoneHead"
required
x-component="Select"
enum={selectList}
x-component-props={{
placeholder: '+86',
prefix: prefixIcon
placeholder: '+86'
}}
/>
{/* <Field
name="phoneHead2"
x-component="prefixSelect"
/> */}
{/* <ISelect mode="tags" style={{ width: '100%' }} placeholder="Tags Mode" onChange={handleChangeSelect}>
{children}
</ISelect>, */}
<Field
x-mega-props={{ span: 5 }}
name="mobiePhone"
......@@ -217,6 +271,6 @@ const diaLogForm: React.FC<ListProps> = (props) => {
)
}
diaLogForm.defaultProps = {
title: '新建发货地址'
title: '新建发货地址12'
}
export default diaLogForm
\ No newline at end of file
src/pages/logistics/list/components/addressList.tsx
View file @ ab695af8
......@@ -2,7 +2,7 @@
* @Author: LeeJiancong
* @Date: 2020-07-14 15:07:34
* @LastEditors: LeeJiancong
* @LastEditTime: 2020-07-15 17:12:54
* @LastEditTime: 2020-07-16 19:43:48
*/
import React, { Component, ReactNode,useRef,useState } from 'react'
import { history } from 'umi'
......@@ -22,23 +22,25 @@ import { IFormFilter, IButtonFilter } from 'god/dist/src/standard-table/TableCon
const data = [
{
key: '1',
attrName: '采购商',
attrGroup: '采购',
displayType: '单选',
shipperName: '采购商',
phone: '18819276235',
tel: '02020',
required: '平台物流服务商',
checked: false,
isDefault: 0,
code:252525,
status: 1,
address:'地址'
},
{
key: '2',
attrName: '供应商',
attrGroup: '供应',
displayType: '双选',
required: '商户合作物流公司',
checked: true,
code:252524,
shipperName: '采购商',
phone: '18819276235',
tel: '02020',
required: '平台物流服务商',
isDefault: 0,
code:252525,
status: 0,
address:'地址32'
},
]
......@@ -46,14 +48,15 @@ const data = [
// 模拟请求
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)
resolve(data)
// const queryResult = data.find(v => v.key === params.keywords)
// setTimeout(() => {
// resolve({
// code: 200,
// message: '',
// data: queryResult ? [queryResult] : data
// })
// }, 1000)
})
}
// const fetchData = (param: any) => {
......@@ -62,15 +65,17 @@ const fetchData = (params:any) => {
// ...param
// }
// getUserInfoList(reqParam).then(res => {
// resolve(res)
// resolve(res.data)
// })
// })
// }
interface Item{
key: string
}
//父页面传递来的参数
export interface ListProps{
title?:React.ReactNode
title?:React.ReactNode,
type: string
}
export interface ListType {
checked: boolean //可选
......@@ -118,7 +123,13 @@ const EditableCell : React.FC<EditableCellProps> = ({
</td>
);
};
const AddressList: React.FC<ListProps> = () => {
/**
* @description:
* @param {type}
* @return:
*/
const AddressList: React.FC<ListProps> = (props) => {
console.log(props)
const ref = useRef({})
const [form] = Form.useForm();
const [table, setTable] = useState([])
......@@ -131,15 +142,20 @@ const AddressList: React.FC<ListProps> = () => {
const columns: ColumnType<any>[] = [
{
title: '发货人姓名',
dataIndex: 'key',
dataIndex: 'shipperName',
align: 'center',
key: 'key',
key: 'shipperName',
},
{
title: '发货地址',
align: 'left',
dataIndex: 'required',
key: 'required',
dataIndex: 'address',
key: 'address',
render: (_:any, record:any) =>(
<>
{record.address}
</>
)
},
{
title: '邮编',
......@@ -150,22 +166,22 @@ const AddressList: React.FC<ListProps> = () => {
{
title: '手机号码',
align: 'center',
dataIndex: 'required',
key: 'required',
dataIndex: 'phone',
key: 'phone',
},
{
title: '电话号码',
align: 'center',
dataIndex: 'required',
key: 'required',
dataIndex: 'tel',
key: 'tel',
},
{
title: '是否默认',
align: 'center',
dataIndex: 'checked',
key: 'checked',
render: (checked:any, record:any) =>
<Switch size='small' defaultChecked={record.checked}
dataIndex: 'isDefault',
key: 'isDefault',
render: (_:any, record:any) =>
<Switch size='small' defaultChecked={record.isDefault== 0? false: true}
/>,
},
......@@ -194,6 +210,14 @@ const AddressList: React.FC<ListProps> = () => {
}
];
//生命周期
// useEffect(() => {
// effect
// return () => {
// cleanup
// }
// }, [input])
const onDefaultChange = (id:any,checked: boolean) => {
console.log(id,checked)
columns.forEach((v,index) => {
......@@ -250,8 +274,8 @@ const AddressList: React.FC<ListProps> = () => {
rowClassName="editable-row"
formilyChilds = {
<>
<Button type="primary" onClick={() => history.push('/logisticsAbility/logistics/list/addressForm')}>
新建 <PlusOutlined />
<Button type="primary" icon={<PlusOutlined />} onClick={() => history.push(`/logisticsAbility/logistics/list/addressForm?addType=${props.type}`)}>
新建
</Button>
</>
}
......
src/pages/logistics/list/components/templateForm.tsx 0 → 100644
View file @ ab695af8
This diff is collapsed.
src/pages/logistics/list/deliveryAddress.tsx
View file @ ab695af8
......@@ -2,7 +2,7 @@ import React, { useState } from 'react';
import AddressList from './components/addressList'
const List = () => {
return (
<AddressList/>
<AddressList title='发货地址管理' type='1'/>
)
}
export default List
\ No newline at end of file
src/pages/logistics/list/receivingAddress.tsx
View file @ ab695af8
import React, { useState } from 'react';
import AddressList from './components/addressList'
const List = () => {
return (
<AddressList title='收货地址管理' type='2'/>
)
}
export default List
\ No newline at end of file
src/pages/logistics/list/template.tsx
View file @ ab695af8
/*
* @Author: LeeJiancong
* @Date: 2020-07-14 15:07:34
* @LastEditors: LeeJiancong
* @LastEditTime: 2020-07-16 19:54:11
*/
import React, { Component, ReactNode,useRef,useState } from 'react'
import { history } from 'umi'
import { Modal,Card ,Button, Form,InputNumber, Radio, Popconfirm,Switch, Input } from 'antd';
import {
PlayCircleOutlined,
PauseCircleOutlined,
PlusOutlined,
EyeOutlined,
PlusCircleOutlined
} from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {StandardTable} from 'god'
import { ColumnType } from 'antd/lib/table/interface'
import { IFormFilter, IButtonFilter } from 'god/dist/src/standard-table/TableController'
const data = [
{
key: '1',
name: '采购商',
pricingMode: '计价方式',
transportMode: '运费方式',
explain: '运费说明',
code:252525,
status: 1
},
{
key: '2',
name: '采购商',
pricingMode: '计价方式',
transportMode: '运费方式',
explain: '运费说明',
code:252525,
status: 2
}
]
// 模拟请求
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 = (param: any) => {
// return new Promise((resolve) => {
// let reqParam = {
// ...param
// }
// getUserInfoList(reqParam).then(res => {
// resolve(res)
// })
// })
// }
interface Item{
key: string
}
//父页面传递来的参数
export interface ListProps{
title?:React.ReactNode,
type: string
}
export interface ListType {
checked: boolean //可选
}
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
editing: boolean;
dataIndex: string;
title: any;
inputType: 'number' | 'text';
record: Item;
index: number;
children: React.ReactNode;
}
const EditableCell : React.FC<EditableCellProps> = ({
editing,
dataIndex,
title,
inputType,
record,
index,
children,
...restProps
}) => {
const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
return (
<td {...restProps}>
{editing ? (
<Form.Item
name={dataIndex}
style={{ margin: 0 }}
rules={[
{
required: true,
message: `Please Input ${title}!`,
},
]}
>
{inputNode}
</Form.Item>
) : (
children
)}
</td>
);
};
/**
* @description:
* @param {type}
* @return:
*/
const Template: React.FC<ListProps> = (props) => {
console.log(props)
const ref = useRef({})
const [form] = Form.useForm();
const [table, setTable] = useState([])
const [editingKey, setEditingKey] = useState('');
const edit = (record: Item) => {
setEditingKey(record.key);
form.setFieldsValue({ code: '', ...record });
console.log(record.key)
};
const columns: ColumnType<any>[] = [
{
title: '模板名称',
dataIndex: 'name',
align: 'center',
key: 'name',
},
{
title: '计价方式',
align: 'left',
dataIndex: 'pricingMode',
key: 'pricingMode',
},
{
title: '运送方式',
dataIndex: 'transportMode',
align: 'center',
key: 'transportMode'
},
{
title: '运费说明',
align: 'center',
dataIndex: 'explain',
key: 'explain',
},
{
title: '状态',
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?'有效':'无效'}
{record.status===1?<PlayCircleOutlined />:<PauseCircleOutlined/>}
</Button>
</Popconfirm>
)
return component
}
},
{
title: '操作',
dataIndex: 'option',
align: 'center',
render: (_:any, record:any) => {
return (
<>
<Button type='link'>启用</Button>
{
record.status === 0 ?
<><Button type="link" onClick={() => edit(record)}>编辑</Button>
<Popconfirm title="确定要删除吗？" okText="是" cancelText="否" onConfirm={handleDelete}>
<Button type='link'>
删除
</Button>
</Popconfirm>
</>:''
}
<Button type='link'>查看</Button>
</>
)
}
}
];
//生命周期
// useEffect(() => {
// effect
// return () => {
// cleanup
// }
// }, [input])
const onDefaultChange = (id:any,checked: boolean) => {
console.log(id,checked)
columns.forEach((v,index) => {
})
}
const handleDelete = () => {
console.log('delete')
}
const search: IFormFilter[] = [
{
type: 'Input',
value: 'keywords',
col: 4,
placeHolder: '输入属性名称'
}
]
const searchBarActions: IButtonFilter[] = [
{
type: 'primary',
text: '新建',
icon: <PlusOutlined />,
handler: ()=>{
history.push('/logisticsAbility/logistics/list/addCompany')
}
}
]
const handleSee = (record:any) => {
console.log('see')
}
const confirm = () => {
console.log('confirm')
}
const cancel = () => {
console.log('cancel')
}
const handleModify = (record: object) => {
// 通过传入的params字符串判断是修改那种类型的数据
console.log('执行状态修改', record)
}
return (
<PageHeaderWrapper>
<Card>
<StandardTable
columns={columns}
currentRef={ref}
fetchTableData={(params:any) => fetchData(params)}
rowClassName="editable-row"
formilyChilds = {
<>
<Button type="primary" icon={<PlusOutlined />} onClick={() => history.push(`/logisticsAbility/logistics/list/templateForm?addType=${props.type}`)}>
新建
</Button>
</>
}
/>
</Card>
</PageHeaderWrapper>
)
}
Template.defaultProps = {
}
export default Template
\ No newline at end of file
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