Skip to content

J
jinfa-platform
Commit 4dca2c4f authored by 前端-黄佳鑫's avatar 前端-黄佳鑫
Browse files
Options

新增需求发布表单数据获取

parent 6d97b9ca
Hide whitespace changes
Inline Side-by-side
Showing with 224 additions and 67 deletions
src/pages/transaction/enquirySubmit/addDemandOrder/components/Modal/modalAnchor.tsx
View file @ 4dca2c4f
import React, { useState, useEffect } from 'react';
import { UPLOAD_TYPE } from '@/constants'
import { Modal, Anchor, Layout, Menu, Form, Divider, Input, Button, Upload, Select, AutoComplete, Cascader, Spin } from 'antd';
import { Modal, Anchor, Layout, Menu, Form, Divider, Input, Button, Upload, Select, AutoComplete, Cascader, Spin, InputNumber } from 'antd';
import style from '../index.less';
import { LinkOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
......@@ -16,16 +16,19 @@ const { Link } = Anchor;
interface anchorParams {
visible?: boolean,
onOk?: Function,
onCancel?: Function
onCancel?: Function,
fetchdata?: any,
isEdit?: boolean
}
const { Option } = Select;
const ModalAnchor: React.FC<anchorParams> = (props) => {
const { visible, onOk, onCancel } = props;
const { visible, onOk, onCancel, fetchdata, isEdit } = props;
const [form] = Form.useForm();
const [loading, setloading] = useState(false);
const [files, setFiles] = useState([]);
const [categoryById, setCategoryById] = useState<any>({});
const [selected, setselected] = useState<string>('')
const [category, setcategory] = useState<Array<any>>([]);
/**查询品类树 */
const searchCategoryTree = (id: any) => {
......@@ -41,37 +44,89 @@ const ModalAnchor: React.FC<anchorParams> = (props) => {
}
/**查询品类信息--包括品类、属性、属性值 */
const getCategoryById = (val:any) => {
const getCategoryById = (val:any, selectedOptions?:any) => {
const id = val[val.length -1];
if(!isEdit && selectedOptions.length > 0) {
const name = selectedOptions[selectedOptions.length -1];
setselected(name.title)
}
PublicApi.getProductPlatformGetCategoryById({id}).then(res => {
if(res.code === 1000) {
setCategoryById(res.data)
}
})
})
}
useEffect(() => {
form.resetFields();
searchCategoryTree('0')
if(Object.keys(fetchdata).length > 0 && isEdit) {
getCategoryById(fetchdata.ids)
const productAttributeJson = JSON.parse(fetchdata.productAttributeJson);
let obj:any = {}
let newObj: any = {}
productAttributeJson.forEach((item:any) => {
obj = {...obj, ...item}
for(let key in obj) {
newObj = {...newObj, ...{
[`${key}__`]: obj[key].join(',')
}}
}
})
form.setFieldsValue({
model: fetchdata.model,
brand: fetchdata.brand,
unit: fetchdata.unit,
purchaseCount: fetchdata.purchaseCount,
name: fetchdata.name,
category: fetchdata.ids,
goodsNo: fetchdata.goodsNo,
specialExplain: fetchdata.specialExplain,
...newObj
})
}
}, [visible])
const onSubmit = (value:any) => {
form.validateFields().then(res => {
console.log(res, '提交')
const productAttributeJson : Array<any> = [];
for(let key in res) {
if(key.split('__').length > 1) {
const name = key.replace(/__/g, '')
productAttributeJson.push({
[name]: [res[key]]
})
}
}
const data = {
model: res.model,
brand: res.brand,
productAttributeJson: JSON.stringify(productAttributeJson),
unit: res.unit,
purchaseCount: res.purchaseCount,
name: res.name,
category: selected,
goodsNo: res.goodsNo,
ids: res.category,
urls: files,
specialExplain: res.specialExplain,
}
onOk(data)
form.resetFields();
setCategoryById([])
}).catch(error => {
console.log(error)
})
}
const handleSelect = (val:any, option:any, index:number) => {
console.log(val, option)
}
const handleChange = (val:any, index: number) => {
console.log(val)
}
return (
<Modal
title='通过平台属性添加'
width='800px'
maskClosable={false}
destroyOnClose
wrapClassName={style.modal_wrap_className}
bodyStyle={{ padding: '0px' }}
visible={visible}
......@@ -129,14 +184,11 @@ const ModalAnchor: React.FC<anchorParams> = (props) => {
categoryById.attributeList.map((item:any, index:number) => (
<Form.Item
label={item.groupName}
name={item.groupName}
name={`${item.groupName}__`}
key={item.groupId}
rules={[{ required: item.isEmpty, message: `请选择${item.groupName}` }]}
>
<AutoComplete
onSelect={(val, option) => handleSelect(val, option, index)}
onChange={(val) => handleChange(val, index)}
>
<AutoComplete>
{
item.attributeValueList.map((items:any) => (
<AutoComplete.Option value={items.value} key={items.id}>{items.value}</AutoComplete.Option>
......@@ -150,7 +202,7 @@ const ModalAnchor: React.FC<anchorParams> = (props) => {
}
<div id='other_demand'>
<div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />其他要求</div>
<Form.Item label='特殊说明' name='shuoming'><Input.TextArea rows={4} /></Form.Item>
<Form.Item label='特殊说明' name='specialExplain'><Input.TextArea rows={4} /></Form.Item>
<Form.Item label='附件' name='upload'>
<div className={style.upload_data}>
{files.length > 0 && files.map((v, index) => (
......@@ -179,7 +231,7 @@ const ModalAnchor: React.FC<anchorParams> = (props) => {
<div id='procured_amount'>
<div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />采购数量</div>
<Form.Item label='单位' name='unit' rules={[{ required: true, message: '请选择单位' }]}><Input /></Form.Item>
<Form.Item label='采购数量' name='purchaseCount' rules={[{ required: true, message: '请输入采购数量' }]}><Input /></Form.Item>
<Form.Item label='采购数量' name='purchaseCount' rules={[{ required: true, message: '请输入采购数量' }]}><InputNumber min={1} style={{width: '100%'}} /></Form.Item>
</div>
</Form>
</Content>
......
src/pages/transaction/enquirySubmit/addDemandOrder/components/Modal/modalGoods.tsx
View file @ 4dca2c4f
import React, { useState, useEffect } from 'react';
import { UPLOAD_TYPE } from '@/constants'
import { Modal, Anchor, Layout, Menu, Form, Divider, Input, Button, Upload, Cascader, Spin, InputNumber } from 'antd';
import { Modal, Anchor, Layout, Menu, Form, Divider, Input, Button, Upload, Cascader, Spin, InputNumber } from 'antd';
import style from '../index.less';
import { LinkOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
......@@ -19,12 +19,14 @@ const { Link } = Anchor;
interface goodsParams {
visible?: boolean,
onOk?: Function,
onCancel?: Function
onCancel?: Function,
fetchdata?: any,
isEdit?: boolean
}
const ModalGoods: React.FC<goodsParams> = (props) => {
const [form] = Form.useForm();
const { visible, onOk, onCancel } = props;
const { visible, onOk, onCancel, fetchdata, isEdit } = props;
const [loading, setloading] = useState(false);
const [files, setFiles] = useState([]);
const [category, setcategory] = useState<Array<any>>([]);
......@@ -44,11 +46,42 @@ const ModalGoods: React.FC<goodsParams> = (props) => {
})
}
useEffect(() => {
searchCategoryTree('0')
form.resetFields();
RowCtl.setSelectRow([])
RowCtl.setSelectedRowKeys([])
searchCategoryTree('0');
if (Object.keys(fetchdata).length > 0 && isEdit) {
const params: any = {
current: '1',
pageSize: '10',
code: fetchdata.goodsNo
}
PublicApi.getProductGoodsGetGoodsList({ ...params }).then(res => {
const { data } = res
RowCtl.setSelectRow(data.data)
RowCtl.setSelectedRowKeys([data.data[0].id])
})
form.setFieldsValue({
model: fetchdata.model,
brand: fetchdata.brand,
unit: fetchdata.unit,
purchaseCount: fetchdata.purchaseCount,
name: fetchdata.name,
category: fetchdata.category,
goodsNo: fetchdata.goodsNo,
})
}
}, [visible])
/**提交表单 */
const onSubmit = (value: any) => {
form.validateFields().then(res => {
console.log(rowSelection, RowCtl, 10086)
const data = {
...res,
goodsId: goods.id,
goodsName: goods.name
}
onOk(res, goods)
}).catch(error => {
console.log(error)
......@@ -105,7 +138,7 @@ const ModalGoods: React.FC<goodsParams> = (props) => {
setvisibleChannelGoods(false)
const data = RowCtl.selectRow[0]
const fullId = data.customerCategory.fullId
const ids = fullId.replace(/\b(0+)/gi,'').split('.');
const ids = fullId.replace(/\b(0+)/gi, '').split('.');
setGoods(data)
form.setFieldsValue({
goodsNo: data.code,
......@@ -167,7 +200,7 @@ const ModalGoods: React.FC<goodsParams> = (props) => {
<div id='procured_amount'>
<div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />采购数量</div>
<Form.Item label='单位' name='unit' rules={[{ required: true, message: '请选择单位' }]}><Input /></Form.Item>
<Form.Item label='采购数量' name='purchaseCount' rules={[{ required: true, message: '请输入采购数量' }]}><InputNumber min={1} style={{width: '100%'}} /></Form.Item>
<Form.Item label='采购数量' name='purchaseCount' rules={[{ required: true, message: '请输入采购数量' }]}><InputNumber min={1} style={{ width: '100%' }} /></Form.Item>
</div>
<div id='other_demand'>
<div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />其他要求</div>
......
src/pages/transaction/enquirySubmit/addDemandOrder/components/addGoods.tsx
View file @ 4dca2c4f
import React, { useState, ReactNode } from 'react';
import React, { useState, ReactNode, useEffect } from 'react';
import { Form, Radio, Button, Table } from 'antd';
import { ColumnType } from 'antd/lib/table/interface';
import ModalAnchor from './Modal/modalAnchor';
......@@ -14,20 +14,29 @@ const layout: any = {
};
export interface faceSetData {
set?: any,
get?: Function
get?: Function,
currentRef: any
}
const AddGoods: React.FC<faceSetData> = (props) => {
const { set, get } = props
const { set, get, currentRef } = props
const [form] = Form.useForm();
const [type, setType] = useState<number>(0);
const btnname: Array<string> = ['添加商品', '选择货品', '导入货品']
const [visible, setvisible] = useState<Array<boolean>>([false, false, false, false]);
const [tabledata, settabledata] = useState<any>([])
/**存放编辑的商品数据 */
const [editdata, seteditdata] = useState<any>({});
/**是否编辑 */
const [isEdit, setisEdit] = useState<boolean>(false);
/**编辑的下标 */
const [idx, setidx] = useState<number>(-1);
/** 平台属性添加表头 */
const columns: ColumnType<Object>[] = [
{
title: '商品编号',
key: 'id',
dataIndex: 'id',
key: 'goodsNo',
dataIndex: 'goodsNo',
},
{
title: '商品名称',
......@@ -56,14 +65,20 @@ const AddGoods: React.FC<faceSetData> = (props) => {
},
{
title: '操作',
key: '',
dataIndex: '',
key: 'options',
dataIndex: 'options',
render: (text:any, record:any, index:number) =>
<>
<Button type='link' onClick={() => handleEdit(record, index)}>编辑</Button>
<Button type='link'>删除</Button>
</>
}
]
/** 切换添加方式 */
const changeRadio = (e: any) => {
const { value } = e.target;
setType(value)
setType(value);
settabledata([]);
}
/** 按钮的文字 */
const handleText = (num: any) => {
......@@ -80,15 +95,51 @@ const AddGoods: React.FC<faceSetData> = (props) => {
setvisible([...visible])
}
/** 商品添加确定 */
const handleSubmit = (data: any, record:any) => {
console.log(data, record);
const handleSubmit = (data: any, record?:any) => {
if(idx === -1) {
settabledata([...tabledata, data])
} else {
const newdata = [...tabledata]
newdata[idx] = data
settabledata([...newdata]);
setidx(-1);
}
get([...tabledata, data])
handleModal(type);
}
/** 编辑商品 */
const handleEdit = (record:any, index:number) => {
setidx(index);
seteditdata(record)
setisEdit(true)
handleModal(type)
}
useEffect(() => {
currentRef.current = {
get: () => new Promise((resolve: any) => {
form.validateFields().then(res => {
resolve({
state: true,
name: 'addGoods',
data: {
type,
requisitionFormProducts: tabledata,
}
})
}).catch(error => {
console.log(error)
})
})
}
}, [tabledata])
return (
<Form
{...layout}
form={form}
>
<Form.Item label='添加方式' required>
<Form.Item label='添加方式' rules={[{ required: true, message: '请选择添加方式' }]}>
<Radio.Group onChange={changeRadio}>
<Radio value={1}>通过平台属性添加</Radio>
<Radio value={2}>选择货品添加</Radio>
......@@ -97,17 +148,21 @@ const AddGoods: React.FC<faceSetData> = (props) => {
</Form.Item>
{type > 0 &&
<Form.Item noStyle>
<Button onClick={() => handleModal(type)} type='dashed' block style={{ marginBottom: '24px' }}><PlusOutlined />{handleText(type)}</Button>
<Table columns={columns} />
<Button onClick={() => {handleModal(type);setisEdit(false)}} type='dashed' block style={{ marginBottom: '24px' }}><PlusOutlined />{handleText(type)}</Button>
<Table columns={columns} dataSource={tabledata} rowKey={(record, index) => index} />
</Form.Item>
}
<ModalAnchor
visible={visible[type]}
fetchdata={editdata}
isEdit={isEdit}
visible={visible[1]}
onOk={handleSubmit}
onCancel={() => handleModal(type)}
/>
<ModalGoods
visible={visible[type]}
<ModalGoods
fetchdata={editdata}
isEdit={isEdit}
visible={visible[2]}
onOk={handleSubmit}
onCancel={() => handleModal(type)}
/>
......
src/pages/transaction/enquirySubmit/addDemandOrder/components/tradingConditions.tsx
View file @ 4dca2c4f
......@@ -19,15 +19,19 @@ const TradingConditions: React.FC<faceSetData> = (props) => {
const [TradingConditionsForm] = Form.useForm();
const [address, setAddress] = useState([]);
const [selectAddress, setselectAddress] = useState<any>({});
useEffect(() => {
// 获取交付地址
PublicApi.getLogisticsSelectListReceiverAddress().then(res => {
setAddress(res.data)
})
}, [])
useEffect(() => {
currentRef.current = {
get: () => new Promise((resolve: any) => {
TradingConditionsForm.validateFields().then(res => {
console.log(res, selectAddress)
resolve({
state: true,
name: 'tradingConditions',
......@@ -35,14 +39,13 @@ const TradingConditions: React.FC<faceSetData> = (props) => {
deliveryTime: moment(res.deliveryTime).format('x'),
quotationAsTime: moment(res.quotationAsTime).format('x'),
addresId: res.addresId,
addres: selectAddress.fullAddress,
addres: selectAddress.children,
logistics: res.logistics,
offer: res.offer,
otherRequire: res.otherRequire,
packRequire: res.packRequire,
paymentType: res.paymentType,
taxes: res.taxes,
}
})
}).catch(error => {
......@@ -50,14 +53,14 @@ const TradingConditions: React.FC<faceSetData> = (props) => {
})
})
}
}, [])
}, [selectAddress])
const disabledDate = (current) => {
return current && current < moment().endOf('day');
}
const onSelect = (val:any , option:any) => {
const onSelect = (val: any, option: any) => {
console.log(option)
setselectAddress(option)
}
......@@ -70,9 +73,9 @@ const TradingConditions: React.FC<faceSetData> = (props) => {
<Col span={12}>
<Form.Item label='交付日期' name='deliveryTime' rules={[{ required: true, message: '请选择交付日期' }]}>
<DatePicker
style={{width: '100%'}}
style={{ width: '100%' }}
disabledDate={disabledDate}
format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss"
/>
</Form.Item>
<Form.Item label='交付地址' name='addresId' rules={[{ required: true, message: '请选择交付地址' }]}>
......@@ -82,9 +85,12 @@ const TradingConditions: React.FC<faceSetData> = (props) => {
))}
</Select>
</Form.Item>
<Form.Item hidden label='交付地址' name='addres'>
<Input value={selectAddress.children} />
</Form.Item>
<Form.Item label='报价截止时间' name='quotationAsTime' rules={[{ required: true, message: '请选择报价截止时间' }]}>
<DatePicker
style={{width: '100%'}}
style={{ width: '100%' }}
format="YYYY-MM-DD HH:mm:ss"
disabledDate={disabledDate}
/>
......
src/pages/transaction/enquirySubmit/addDemandOrder/index.tsx
View file @ 4dca2c4f
......@@ -12,23 +12,32 @@ import { setUpdata } from './data'; /**set数据给子组件 */
const { TabPane } = Tabs;
const AddDemandOrder: React.FC<{}> = () => {
const [data, setData] = useState<any>(setUpdata);
const [fetchdata, setfetchdata] = useState<any>(setUpdata);
const basic = useRef<any>();
const goods = useRef<any>();
const trading = useRef<any>();
/**get子组件的数据 */
/**提交数据 */
const onSubmit = async () => {
const basicRef = await basic.current.get();
const goodsRef = await goods.current.get();
const tradingRef = await trading.current.get();
if(basicRef.state && tradingRef.state) {
data.details = basicRef.data.details;
data.requisitionFormAddress = basicRef.data.requisitionFormAddress;
console.log(tradingRef)
} else {
if (basicRef.state && tradingRef.state && goodsRef.state) {
const data = {
...basicRef.data,
...tradingRef.data,
...goodsRef.data
}
console.log(data)
} else {
}
}
/**获取商品的属性 */
const getAttribute = (data:any) => {
console.log(data, 10086)
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
......@@ -41,29 +50,31 @@ const AddDemandOrder: React.FC<{}> = () => {
<Tabs type='card'>
<TabPane forceRender tab='基本信息' key='1'>
<BasicInfo
set={data}
set={fetchdata}
currentRef={basic}
/>
</TabPane>
<TabPane forceRender tab='添加商品' key='2'>
<AddGoods
set={data}
<AddGoods
set={fetchdata}
get={getAttribute}
currentRef={goods}
/>
</TabPane>
<TabPane forceRender tab='交易条件' key='3'>
<TradingConditions
set={data}
<TradingConditions
set={fetchdata}
currentRef={trading}
/>
</TabPane>
<TabPane forceRender tab='需求对接' key='4'>
<DemandDbutted
set={data}
<DemandDbutted
set={fetchdata}
/>
</TabPane>
<TabPane forceRender tab='流转记录' key='5'>
<FlowRecord
set={data}
<FlowRecord
set={fetchdata}
/>
</TabPane>
</Tabs>
......
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