Commit 08ed1b6f authored by LeeJiancong's avatar LeeJiancong

新增物流板块

parent c00b230d
import CommodityRoute from './commodityRoute'
import MemberRoute from './memberRoute'
import ShopRoute from './shopRoute'
import LogisticsRoute from './logisticsRoutes'
const routes = [CommodityRoute, MemberRoute, ShopRoute]
const routes = [CommodityRoute, MemberRoute, ShopRoute,LogisticsRoute]
export default routes
\ No newline at end of file
/*
* @Author: Ljc
* @Date: 2020-07-10 16:15:28
* @Last Modified by: ljc
* @Last Modified time: 2020-07-10 16:15:28
*/
const LogisticsRoute = {
path: '/logisticsAbility',
name: 'logisticsAbility',
key: 'logisticsAbility',
icon: 'smile',
routes: [
{
path: '/logisticsAbility/logistics',
name: 'logistics',
key: 'logistics',
routes: [
{
path: '/logisticsAbility/logistics/list/company',
name: 'company',
component: '@/pages/logistics/list/company'
},
{
path: '/logisticsAbility/logistics/list/addCompany',
name: 'addCompany',
component: '@/pages/logistics/list/addCompany',
hideInMenu: true
},
//送货地址
{
path: '/logisticsAbility/logistics/list/deliveryAddress',
name: 'deliveryAddress',
component: '@/pages/logistics/list/deliveryAddress'
},
{
path: '/logisticsAbility/logistics/list/addressForm',
name: 'addressForm',
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'
// }
]
}
]
}
export default LogisticsRoute
\ No newline at end of file
......@@ -23,10 +23,11 @@
"dependencies": {
"@ant-design/icons": "^4.2.1",
"@ant-design/pro-layout": "^5.0.16",
"@formily/antd-components": "^1.2.6",
"@umijs/preset-react": "1.x",
"@umijs/test": "^3.2.0",
"bizcharts": "^4.0.7",
"god": "0.0.28",
"god": "0.1.0",
"lint-staged": "^10.0.7",
"mobx": "^5.15.4",
"mobx-react": "^6.2.2",
......
/*
* @Author: LeeJiancong
* @Date: 2020-07-13 14:08:50
* @LastEditors: LeeJiancong
* @LastEditTime: 2020-07-15 10:43:55
*/
export default {
'menu.welcome': '欢迎',
'menu.home': '首页',
......@@ -47,4 +53,13 @@ export default {
'menu.shopAbility.shopInfoManage': '店铺信息',
'menu.shopAbility.shopTemplate': '店铺装修模板',
//物流能力
'menu.logisticsAbility': '物流',
'menu.logisticsAbility.logistics':'物流管理',
'menu.logisticsAbility.logistics.company':'物流公司管理',
'menu.logisticsAbility.logistics.addCompany':'新建物流公司',
'menu.logisticsAbility.logistics.deliveryAddress':'发货地址管理',
'menu.logisticsAbility.logistics.addressForm':'新建发货地址',
// 'menu.logisticsAbility.logistics.receivingAddress':'收货地址管理',
// 'menu.logisticsAbility.logistics.template':'运费模板管理',
};
\ No newline at end of file
import * as React from 'react';
import { useState,useRef } from 'react';
import { Row, Col, Tooltip, Form, Input, Select, Popconfirm, Button, Card, message, Modal } from 'antd';
import { DeleteOutlined, FormOutlined, PlusCircleOutlined, LoadingOutlined, PlusOutlined, LinkOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {ColumnType} from 'antd/lib/table/interface'
import { StandardTable } from 'god'
import {history} from 'umi'
import ReutrnEle from '@/components/ReturnEle';
export interface companyProps {
}
export interface companyState {
}
interface Item {
key: string;
}
const { TextArea } = Input;
const layout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 },
};
const data = [
{
key: '1',
Name: '山东万达橡胶集团有限公司',
address: '广东省广州市海珠区新港东路1068号'
}]
const columns: ColumnType<any>[]= [
{
title: 'ID',
dataIndex: 'key',
align: 'center',
key: 'key',
},
{
title: '会员名称',
dataIndex: 'Name',
align: 'center'
},
{
title: '公司地址',
dataIndex: 'address',
align: 'center'
}
]
// 模拟请求
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 { Option } = Select;
const defaultValue = 'lucy'
const company : React.FC<{}> = () => {
//hook只能写在函数组件的顶级作用域
const ref = useRef({})
const [menuForm] = Form.useForm();
const [Code,setCode] = useState('')
const [codeDisabled,setCodeDisabled] = useState(false)
const [companyType,setCompanyType] = useState<string>('')
const [visible,setsVisible] = useState(false) //state hook写法
const [selectRow, setSelectRow] = useState<Item[]>([]) // 模态框选择的行数据
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([])
const handleSubmitAllSetting = () => {
menuForm.validateFields().then(values => {
console.log(values, 'menu values')
}).catch(error => {
console.error(error)
})
}
const handleCancel = () => {
history.go(-1)
}
const handleLink = () => {
setsVisible(true)
}
//改变code
const onCodeChange = (e:any) => {
const value = e.target.value
setCode(value)
console.log(value);
}
const onChangeType = (value:any) => {
setCompanyType(value)
if(value == 2){
setCodeDisabled(true)
}else{
setCodeDisabled(false)
}
}
const handleSelectOk = () => {
console.log('数据',selectRow);
let IDS = selectRow.map(v => v.key)
console.log('数据',IDS.join(','));
setCode(IDS.join(','))
setsVisible(false)
}
const handleSelectCancel = () => {
setsVisible(false)
}
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => {
setSelectRow(selectedRows);
setSelectedRowKeys(selectedRowKeys);
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
}
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回"/>}
title="新建物流公司"
>
<Row gutter={[36, 36]}>
<Col span={24}>
<Card>
{
(<Form
form={menuForm}
name="edit_infomation"
layout="horizontal"
labelAlign="left"
{...layout}
>
<Row gutter={24}>
<Col span={18}>
<Form.Item
name='type'
label='合作类型'
rules={[
{
required: true,
message: '合作类型为必须项!',
},
]}
initialValue="1"
>
<Select placeholder="请选择合作类型" value={companyType} onChange={onChangeType}>
<Option value="1">平台物流服务商</Option>
<Option value="2">商户合作物流公司</Option>
</Select>
</Form.Item>
</Col>
<Col span={18}>
<Form.Item
name='Code'
label='物流公司代码/
平台会员ID'
rules={[
{
required: true,
message: '物流公司代码/平台会员ID为必须项!',
}
]}
>
<Row>
<Col span={companyType === '2'? 24 : 21}><Input value={Code} disabled={codeDisabled} maxLength={20} onChange={onCodeChange}/></Col>
{companyType === '2' ?null:
<Col span={3}>
<Button type="primary" icon={<LinkOutlined />} style={{width:'100%',backgroundColor: '#6B778C', borderColor: '#6B778C'}} onClick={handleLink}>
选择
</Button>
</Col>
}
</Row>
</Form.Item>
</Col>
<Col span={18}>
<Form.Item
name='Name'
label='物流公司名称'
rules={[
{
required: true,
message: '输入物流公司名称!',
},
]}
>
<Input maxLength={40} placeholder="输入物流公司名称" />
</Form.Item>
</Col>
<Col span={18}>
<Form.Item
name='remark'
label='备注'
>
<TextArea rows={4} maxLength={60} />
</Form.Item>
</Col>
<Col span={18}>
<Row>
<Col span={6}></Col>
<Col span={18}>
<Button onClick={handleSubmitAllSetting} type="primary" style={{ marginTop: 32, marginBottom: 16, marginRight: 24}}>
保存
</Button>
<Button onClick={handleCancel} style={{ marginTop: 32, marginBottom: 16}}>
取消
</Button>
</Col>
</Row>
</Col>
</Row>
</Form>)
}
</Card>
</Col>
</Row>
<Modal
title="选择平台物流服务商"
width='800px'
visible={visible}
onOk={handleSelectOk}
onCancel={handleSelectCancel}
okText="确认"
cancelText="取消"
>
<Row>
<Col span={10}> <Input.Search placeholder="输入关键字进行搜索" /></Col>
<Col span={14}></Col>
</Row>
<StandardTable
columns={columns}
currentRef={ref}
rowSelection={rowSelection}
fetchTableData={(params:any) => fetchData(params)}
/>
</Modal>
</PageHeaderWrapper>
);
}
export default company;
\ No newline at end of file
/*
* @Date: 2020-07-13 15:01:40
* @LastEditors: LeeJiancong
* @LastEditTime: 2020-07-15 17:41:29
*/
import React, { ReactNode, useRef } from 'react'
import { history } from 'umi'
import { Button, Popconfirm, Card } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
PlusOutlined,
PlayCircleOutlined,
PauseCircleOutlined,
EyeOutlined
} 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'
const data = [
{
key: '1',
attrName: '采购商',
attrGroup: '采购',
displayType: '单选',
required: '平台物流服务商',
status: 1,
},
{
key: '2',
attrName: '供应商',
attrGroup: '供应',
displayType: '双选',
required: '商户合作物流公司',
status: 0,
},
]
// 模拟请求
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 Company: React.FC<{}> = () => {
const ref = useRef({})
const columns: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'key',
align: 'center',
key: 'key',
},
{
title: '物流公司编码/平台会员ID',
align: 'center',
dataIndex: 'required',
key: 'required',
},
{
title: '属性名称',
dataIndex: 'attrName',
align: 'center',
key: 'attrName',
render: (text:any, record:any) => <span className="commonPickColor" onClick={()=>handleSee(record)}>{text}&nbsp;<EyeOutlined /></span>
},
{
title: '合作类型',
align: 'center',
dataIndex: 'required',
key: 'required',
},
{
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: (text:any, record:any) => {
return (
<>
<Button type='link'>启用</Button>
{
record.status === 0 ? <><Button type='link'>编辑</Button><Button type='link'>删除</Button></>:''
}
<Button type='link'>查看</Button>
</>
)
}
}
];
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)}
formilyChilds = {
<>
<Button type="primary" onClick={() => history.push('/logisticsAbility/logistics/list/addCompany')}>
新建 <PlusOutlined />
</Button>
</>
}
/>
</Card>
</PageHeaderWrapper>
)
}
export default Company
/*
* @Author: LeeJiancong
* @Date: 2020-07-15 10:31:55
* @LastEditors: LeeJiancong
* @LastEditTime: 2020-07-15 17:43:48
*/
import React, { Component, useState } from 'react';
import ReactDOM from 'react-dom'
import {
SchemaForm,
SchemaMarkupField as Field,
createFormActions,
FormButtonGroup,
Submit,
Reset
} from '@formily/antd'
import { history } from 'umi'
import { Row, Col, Card, Button, Popconfirm } 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'
interface countryItem {
name: string,
key: string,
icon: string
}
//列表带来的参数
export interface ListProps {
title?: React.ReactNode
}
export interface ListType {
checked: boolean //可选
}
const diaLogForm: React.FC<ListProps> = (props) => {
const [state, setState] = useState({ editable: true })
const [select, setSelect] = useState<countryItem>({
key: 'cn',
name: '简体中文-ZH',
icon: ChinaImg
})
const prefixIcon = () => {
return (
<span><img src={ChinaImg} alt="" /></span>
)
}
const confirm = () => {
console.log('confirm')
history.go(-1)
}
const cancel = () => {
console.log('cancel')
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={props.title}
>
<Card>
<Row>
<Col span={16}>
<SchemaForm editable={state.editable}
initialValues={{
provic: '广东省',
phoneHead: '+86'
}}
components={{
Input, Select, TextArea: Input.TextArea, Switch
}}
>
<FormMegaLayout labelCol={4} labelAlign="left">
<Field
required
title="发货人"
name="user"
maxLength={40}
x-component="Input"
x-component-props={{
placeholder: '请输入收货人'
}}
/>
<FormMegaLayout label='发货地区' grid full autoRow required>
<Field
x-mega-props={{ span: 1 }}
x-component="Select"
enum={selectList}
required
name="provic"
x-component-props={{
placeholder: '-省份/直辖市-'
}}
/>
<Field
x-mega-props={{ span: 1 }}
x-component="Select"
enum={selectList}
required
name="city"
x-component-props={{
placeholder: '-市-'
}}
/>
<Field
x-mega-props={{ span: 1 }}
x-component="Select"
enum={selectList}
required
name="area"
x-component-props={{
placeholder: '-区-'
}}
/>
</FormMegaLayout>
<Field
required
title="详细地址"
name="addressInfo"
maxLength={60}
x-component="TextArea"
x-component-props={{
placeholder: '请输入详细地址'
}}
/>
<Field
title="邮编"
name="code"
maxLength={12}
x-component="Input"
x-component-props={{
placeholder: ''
}}
/>
<FormMegaLayout label='手机号码' grid required full>
<Field
x-mega-props={{ span: 1, prefix: prefixIcon }}
name="phoneHead"
required
x-component="Select"
enum={selectList}
x-component-props={{
placeholder: '+86',
prefix: prefixIcon
}}
/>
<Field
x-mega-props={{ span: 5 }}
name="mobiePhone"
required
x-component="Input"
x-component-props={{
placeholder: '输入你的手机号码'
}}
/>
</FormMegaLayout>
<FormMegaLayout label='电话号码' grid full>
<Field
x-mega-props={{ span: 1 }}
name="phoneHead"
x-component="Input"
x-component-props={{
placeholder: '区号'
}}
/>
<Field
x-mega-props={{ span: 5 }}
name="telphone"
x-component="Input"
x-component-props={{
placeholder: ''
}}
/>
</FormMegaLayout>
<Field
title="是否默认"
name="isDefault"
x-component="Switch"
x-component-props={{
placeholder: ''
}}
/>
</FormMegaLayout>
<FormButtonGroup offset={4}>
<Submit> 保存</Submit>
<Popconfirm
title="未保存,是否确定执行这个操作?"
onConfirm={confirm}
onCancel={cancel}
okText="是"
cancelText="否"
>
<Button>取消</Button>
</Popconfirm>
</FormButtonGroup>
</SchemaForm>
</Col>
</Row>
</Card>
</PageHeaderWrapper>
)
}
diaLogForm.defaultProps = {
title: '新建发货地址'
}
export default diaLogForm
\ No newline at end of file
/*
* @Author: LeeJiancong
* @Date: 2020-07-14 15:07:34
* @LastEditors: LeeJiancong
* @LastEditTime: 2020-07-15 17:12:54
*/
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',
attrName: '采购商',
attrGroup: '采购',
displayType: '单选',
required: '平台物流服务商',
checked: false,
code:252525,
status: 1,
},
{
key: '2',
attrName: '供应商',
attrGroup: '供应',
displayType: '双选',
required: '商户合作物流公司',
checked: true,
code:252524,
status: 0,
},
]
// 模拟请求
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
}
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>
);
};
const AddressList: React.FC<ListProps> = () => {
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: 'key',
align: 'center',
key: 'key',
},
{
title: '发货地址',
align: 'left',
dataIndex: 'required',
key: 'required',
},
{
title: '邮编',
dataIndex: 'code',
align: 'center',
key: 'code'
},
{
title: '手机号码',
align: 'center',
dataIndex: 'required',
key: 'required',
},
{
title: '电话号码',
align: 'center',
dataIndex: 'required',
key: 'required',
},
{
title: '是否默认',
align: 'center',
dataIndex: 'checked',
key: 'checked',
render: (checked:any, record:any) =>
<Switch size='small' defaultChecked={record.checked}
/>,
},
{
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>
</>
)
}
}
];
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" onClick={() => history.push('/logisticsAbility/logistics/list/addressForm')}>
新建 <PlusOutlined />
</Button>
</>
}
/>
</Card>
</PageHeaderWrapper>
)
}
AddressList.defaultProps = {
}
export default AddressList
\ No newline at end of file
import React, { useState } from 'react';
import AddressList from './components/addressList'
const List = () => {
return (
<AddressList/>
)
}
export default List
\ No newline at end of file
declare namespace LogisticsApi {
interface RegisterTypeDTO{
}
}
\ No newline at end of file
import request from '@/utils/request';
/**
* @description 物流公司
* @param
*/
export async function getCompanyList(params: LogisticsApi.RegisterTypeDTO) {
return request('', {
method: 'get',
data: params
})
}
\ 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