Skip to content

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

修改模板布局

parent 88bbcb19
Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 78 deletions
src/pages/logistics/list/components/addressForm.tsx
View file @ 234831be
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: LeeJiancong * @Author: LeeJiancong
* @Date: 2020-07-15 10:31:55 * @Date: 2020-07-15 10:31:55
* @LastEditors: LeeJiancong * @LastEditors: LeeJiancong
* @LastEditTime: 2020-07-17 18:04:19 * @LastEditTime: 2020-07-17 20:27:43
*/ */
import React, { Component, useState,useEffect } from 'react'; import React, { Component, useState,useEffect } from 'react';
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
...@@ -22,17 +22,12 @@ import { PageHeaderWrapper } from '@ant-design/pro-layout' ...@@ -22,17 +22,12 @@ import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { MegaLayout, Input, Switch, Select, FormMegaLayout } from '@formily/antd-components' import { MegaLayout, Input, Switch, Select, FormMegaLayout } from '@formily/antd-components'
import ReutrnEle from '@/components/ReturnEle' import ReutrnEle from '@/components/ReturnEle'
import 'antd/dist/antd.css' 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 ChinaImg from '../../../../../mockStatic/china.png'
import gou from '../../../../../mockStatic/gou.png' import gou from '../../../../../mockStatic/gou.png'
import japenImg from '../../../../../mockStatic/japen.png' import japenImg from '../../../../../mockStatic/japen.png'
import korenImg from '../../../../../mockStatic/koren.png' import korenImg from '../../../../../mockStatic/koren.png'
import us from '../../../../../mockStatic/us.png' import us from '../../../../../mockStatic/us.png'
import { Effects } from 'bizcharts';
const _width:number = 24 const _width:number = 24
const _height:number = 17 const _height:number = 17
...@@ -76,6 +71,7 @@ const dropdownRender = () => { ...@@ -76,6 +71,7 @@ const dropdownRender = () => {
// registerFormFields({ prefixSelect: connect()(CustomSelect) }) // registerFormFields({ prefixSelect: connect()(CustomSelect) })
const diaLogForm: React.FC<ListProps> = (props) => { const diaLogForm: React.FC<ListProps> = (props) => {
const type:string = history.location.query.addType const type:string = history.location.query.addType
const [Options,setOptions] = useState([])
const [state, setState] = useState({ editable: true }) const [state, setState] = useState({ editable: true })
const [headerTitle,setHeaderTitle] = useState('') const [headerTitle,setHeaderTitle] = useState('')
const [select, setSelect] = useState<countryItem>({ const [select, setSelect] = useState<countryItem>({
...@@ -99,12 +95,7 @@ const diaLogForm: React.FC<ListProps> = (props) => { ...@@ -99,12 +95,7 @@ const diaLogForm: React.FC<ListProps> = (props) => {
const handleChangeSelect = () => { const handleChangeSelect = () => {
} }
useEffect(() => {
history.location.query.addType == '1'? setHeaderTitle('新建发货地址') : setHeaderTitle('新建收货地址')
return () => {
}
}, [])
const List:any = [ChinaImg,gou,japenImg,korenImg,us] const List:any = [ChinaImg,gou,japenImg,korenImg,us]
const selectList: any = [ const selectList: any = [
{ label: <><img src={ChinaImg} key='1' style={{width: _width, height: 17}}/> +86</>, value: '1' }, { label: <><img src={ChinaImg} key='1' style={{width: _width, height: 17}}/> +86</>, value: '1' },
...@@ -113,11 +104,19 @@ const diaLogForm: React.FC<ListProps> = (props) => { ...@@ -113,11 +104,19 @@ const diaLogForm: React.FC<ListProps> = (props) => {
{ label: <><img src={korenImg} key='4' style={{width: _width, height: 17}}/> +86</>, value: '4' }, { 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' } { label: <><img src={us} key='5' style={{width: _width, height: 17}}/> +86</>, value: '5' }
] ]
// List.map((item:any,key:number) => { let _Options:any = []
// let li = <><img src={item} key={key} style={{width: _width, height: 17}}/> +86</> List.forEach((item:any,index:number) => {
let tem = <><img src={item} key={'item' + index} style={{width: _width, height: _height}}/> +86</>
// }) _Options.push({label:tem,value:index+1})
})
useEffect(() => {
history.location.query.addType == '1'? setHeaderTitle('新建发货地址') : setHeaderTitle('新建收货地址')
setOptions(_Options)
return () => {
}
},[])
return ( return (
<PageHeaderWrapper <PageHeaderWrapper
...@@ -131,7 +130,7 @@ const diaLogForm: React.FC<ListProps> = (props) => { ...@@ -131,7 +130,7 @@ const diaLogForm: React.FC<ListProps> = (props) => {
<SchemaForm editable={state.editable} <SchemaForm editable={state.editable}
initialValues={{ initialValues={{
provic: '广东省', provic: '广东省',
phoneHead: '1' phoneHead: 1
}} }}
components={{ components={{
...@@ -206,7 +205,7 @@ const diaLogForm: React.FC<ListProps> = (props) => { ...@@ -206,7 +205,7 @@ const diaLogForm: React.FC<ListProps> = (props) => {
name="phoneHead" name="phoneHead"
required required
x-component="Select" x-component="Select"
enum={selectList} enum={Options}
x-component-props={{ x-component-props={{
placeholder: '+86' placeholder: '+86'
}} }}
......
src/pages/logistics/list/components/templateForm.tsx
View file @ 234831be
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: LeeJiancong * @Author: LeeJiancong
* @Date: 2020-07-15 10:31:55 * @Date: 2020-07-15 10:31:55
* @LastEditors: LeeJiancong * @LastEditors: LeeJiancong
* @LastEditTime: 2020-07-17 17:57:40 * @LastEditTime: 2020-07-18 11:21:19
*/ */
import React, { Component, useState, useEffect } from 'react'; import React, { Component, useState, useEffect } from 'react';
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
...@@ -115,7 +115,7 @@ const diaLogForm: React.FC<ListProps> = (props) => { ...@@ -115,7 +115,7 @@ const diaLogForm: React.FC<ListProps> = (props) => {
// useFormEffects(($,setFieldState ) => { // useFormEffects(($,setFieldState ) => {
// }) // })
const List: any = [ChinaImg, gou, japenImg, korenImg, us] const List: string[] = [ChinaImg, gou, japenImg, korenImg, us]
const selectList: any = [ const selectList: any = [
{ label: <><img src={ChinaImg} key='1' style={{ width: _width, height: 17 }} /> +86</>, value: '1' }, { 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={gou} key='2' style={{ width: _width, height: 17 }} /> +86</>, value: '2' },
...@@ -145,7 +145,7 @@ const diaLogForm: React.FC<ListProps> = (props) => { ...@@ -145,7 +145,7 @@ const diaLogForm: React.FC<ListProps> = (props) => {
} }
> >
<Card> <Card>
<Row> <Row >
<Col span={24}> <Col span={24}>
<SchemaForm editable={state.editable} <SchemaForm editable={state.editable}
actions={actions}//要传递 actions={actions}//要传递
...@@ -163,10 +163,9 @@ const diaLogForm: React.FC<ListProps> = (props) => { ...@@ -163,10 +163,9 @@ const diaLogForm: React.FC<ListProps> = (props) => {
RadioGroup: Radio.Group, ArrayTable, ArrayCards, Transfer RadioGroup: Radio.Group, ArrayTable, ArrayCards, Transfer
}} }}
> >
<FormTab name="tabs" defaultActiveKey={'tab-1'}>
<FormTab name="tabs" defaultActiveKey={'tab-2'}>
<FormTab.TabPane name="tab-1" tab="基本信息"> <FormTab.TabPane name="tab-1" tab="基本信息">
<FormMegaLayout layoutProps={{ wrapperCol: 12 }} labelCol={4} labelAlign="left"> <FormMegaLayout wrapperWidth={570} labelCol={2} labelAlign="left">
<Field <Field
required required
title="模板名称" title="模板名称"
...@@ -195,55 +194,86 @@ const diaLogForm: React.FC<ListProps> = (props) => { ...@@ -195,55 +194,86 @@ const diaLogForm: React.FC<ListProps> = (props) => {
{ label: '快递', value: '1' } { label: '快递', value: '1' }
]} ]}
/> />
<FormMegaLayout label='默认运费' grid full required> </FormMegaLayout>
<FormMegaLayout> <FormMegaLayout label="默认运费" required labelCol={2} wrapperWidth={570} labelAlign="left">
<FormMegaLayout addonAfter=""> <FormMegaLayout inline>
<Field <Field
name="weight" name="weight"
required required
x-component="Input"
x-component-props={{ x-props={{
placeholder: '', style:{
addonAfter: "KG" width: 160,
}} marginLeft:51
/> }
</FormMegaLayout> }}
<FormMegaLayout addonBefore="每增加" addonAfter="增加运费"> x-component="Input"
<Field x-component-props={{
name="incrementWeight"
required
x-component="Input"
x-component-props={{
placeholder: '',
addonAfter: "KG"
}}
/>
</FormMegaLayout>
</FormMegaLayout>
<FormMegaLayout >
<Field
name="price"
required
x-component="Input"
x-component-props={{
placeholder: '',
addonAfter: "元"
}}
/>
<FormMegaLayout>
<Field
name="incrementPrice"
required
x-component="Input"
x-component-props={{
placeholder: '',
addonAfter: "元"
}} placeholder: '',
/> addonAfter: "KG"
</FormMegaLayout> }}
</FormMegaLayout> x-mega-props={{
addonBefore: ' ',
addonAfter: '内,'
}}
/>
<Field
name="price"
required
x-props={{
style:{
width: 160,
marginLeft: 40
}
}}
x-component="Input"
x-component-props={{
placeholder: '',
addonAfter: "元"
}}
/>
</FormMegaLayout> </FormMegaLayout>
<FormMegaLayout inline>
<Field
name="incrementWeight"
required
x-props={{
style:{
width: 160,
marginLeft: 10
}
}}
x-component="Input"
x-component-props={{
placeholder: '',
addonAfter: "KG"
}}
x-mega-props={{
addonBefore: '每增加',
addonAfter: '增加运费'
}}
/>
<Field
name="incrementPrice"
required
x-props={{
style:{
width: 160
}
}}
x-component="Input"
x-component-props={{
placeholder: '',
addonAfter: "元"
}}
/>
</FormMegaLayout>
</FormMegaLayout>
<FormMegaLayout wrapperWidth={570} labelCol={2} labelAlign="left">
<Field <Field
title="运费说明" title="运费说明"
name="explain" name="explain"
...@@ -263,7 +293,6 @@ const diaLogForm: React.FC<ListProps> = (props) => { ...@@ -263,7 +293,6 @@ const diaLogForm: React.FC<ListProps> = (props) => {
type="array" type="array"
x-component="ArrayTable" x-component="ArrayTable"
x-component-props={{ x-component-props={{
// align:'center',
operationsWidth: 200, operationsWidth: 200,
operations: { operations: {
title: '操作' title: '操作'
...@@ -306,12 +335,22 @@ const diaLogForm: React.FC<ListProps> = (props) => { ...@@ -306,12 +335,22 @@ const diaLogForm: React.FC<ListProps> = (props) => {
}} }}
/> />
<Field name="weight" <Field name="weight"
x-component="Input" type="number" title="首件(件/KG)" x-component="Input" type="number" title="首件(件/KG)"
// rules={
// {
// whitespace: true,
// min: 5,
// max: 10,
// validator:(value:any) => {
// return value.indexOf('asd') > -1 ? '文本里不能包含asd' : ''
// }
// }
// }
x-component-props={{ x-component-props={{
onChange: (e: any) => { onChange: (e: any) => {
console.log(e.target.value) console.log(e.target.value)
} },
// rules:(value:any) => { // rules:(value:any) => {
// return new Promise(resolve => { // return new Promise(resolve => {
// setTimeout(() => { // setTimeout(() => {
...@@ -319,8 +358,8 @@ const diaLogForm: React.FC<ListProps> = (props) => { ...@@ -319,8 +358,8 @@ const diaLogForm: React.FC<ListProps> = (props) => {
// }, 1000) // }, 1000)
// }) // })
// } // }
// rules: [{ // rules: [{
// required: true, // required: true,
// message: '请输入内容!', // message: '请输入内容!',
......
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