Commit 5bc7675d authored by 前端-黄佳鑫's avatar 前端-黄佳鑫

修改商品询价新增

parent c5e52d6b
......@@ -12,10 +12,14 @@ import { PublicApi } from '@/services/api'
const { TabPane } = Tabs;
const AddQuotes: React.FC<{}> = () => {
const ref = useRef<any>({})
const [memberList, setmemberList] = useState([]);
const basicInfoRef = useRef<any>({});
const tradingConditionsRef = useRef<any>({});
/************* 页面的一些操作start *************/
const onSumbit = async (params: any) => {
const basicInfo = await basicInfoRef.current.validateFields();
const tradingConditions = await tradingConditionsRef.current.validateFields();
console.log(tradingConditions, basicInfo)
}
const getMemberList = (list: any) => {
setmemberList(list);
......@@ -27,13 +31,14 @@ const AddQuotes: React.FC<{}> = () => {
backIcon={<ReutrnEle description="返回" />}
title='新建报价单'
extra={
<Button type="primary"> 保存</Button>
<Button type="primary" onClick={onSumbit}> 保存</Button>
}
>
<Card>
<Tabs type="card">
<Tabs>
<TabPane tab="基本信息" key="1">
<BasicInfo
<BasicInfo
currentRef={basicInfoRef}
getMemberList={getMemberList}
/>
</TabPane>
......@@ -43,7 +48,9 @@ const AddQuotes: React.FC<{}> = () => {
/>
</TabPane>
<TabPane tab="交易条件" key="3">
<TradingConditions/>
<TradingConditions
currentRef={tradingConditionsRef}
/>
</TabPane>
<TabPane tab="附件" key="4">
<Attached />
......
......@@ -15,12 +15,13 @@ const layout: any = {
};
const { Search } = Input;
interface queryProps {
currentRef?: any,
getMemberList?: Function
}
const BasicInfo: React.FC<queryProps> = (props) => {
const [basicform] = Form.useForm();
const { getMemberList } = props;
const { getMemberList, currentRef } = props;
// 会员添加弹窗控制
const [visibleChannelMember, setVisibleChannelMember] = useState(false);
const [memberList, setmemberList] = useState([]);
......@@ -112,6 +113,36 @@ const BasicInfo: React.FC<queryProps> = (props) => {
},[memberList])
/************* 页面的一些操作start *************/
// 拿到表单数据
const hadnleValidateFields = () => {
return new Promise((resolve) => {
basicform.validateFields().then(values => {
resolve({
state: true,
data: {
details: values.details,
memberName: values.memberName,
}
})
}).catch(errorInfo => {
console.log(errorInfo)
})
})
}
useEffect(() => {
if (currentRef) {
const userAction = {
validateFields: () => hadnleValidateFields()
}
if (currentRef && typeof currentRef === 'function') {
currentRef(userAction);
}
if (currentRef && typeof currentRef !== 'function') {
currentRef.current = userAction;
}
}
},[])
/************* 页面的一些操作end *************/
return (
<>
......
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Button, message, Input,Table } from 'antd';
import { ColumnType } from 'antd/lib/table/interface';
import { PlusOutlined } from '@ant-design/icons';
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
import { ISchema, createAsyncFormActions } from '@formily/antd';
import { ISchema, createAsyncFormActions, ISchemaFormActions, ISchemaFormAsyncActions } from '@formily/antd';
import ModalTable, { ModalTableProps } from '@/components/ModalTable';
import { PublicApi } from '@/services/api';
import { FORM_FILTER_PATH } from '@/formSchema/const';
......@@ -14,11 +14,47 @@ import Search from '@/components/NiceForm/components/Search'
import Submit from '@/components/NiceForm/components/Submit'
interface queryProps extends ModalTableProps {
memberList?: any
memberList?: any,
schemaAction?: ISchemaFormActions | ISchemaFormAsyncActions
}
// 只能输入数字的输入框
const NumericInput = (props) => {
const onChange = (e) => {
const { value } = e.target;
const reg = /^-?\d*(\.\d*)?$/;
if ((!isNaN(value) && reg.test(value)) || value === "" || value === "-") {
props.onChange(value);
}
};
const onBlur = () => {
const { value, onBlur, onChange } = props;
let valueTemp = value;
if (value.charAt(value.length - 1) === "." || value === "-") {
valueTemp = value.slice(0, -1);
}
onChange(valueTemp.replace(/0*(\d+)/, "$1"));
if (onBlur) {
onBlur();
}
};
return (
<Input
{...props}
onChange={onChange}
onBlur={onBlur}
maxLength={25}
/>
);
};
const EnquiryGoods: React.FC<queryProps> = (props) => {
const { memberList, ...restProps } = props
const { memberList, schemaAction, ...restProps } = props
const [value, setValue] = useState<any>('')
const productFormActions = createAsyncFormActions()
const onChange = (value) => {
setValue(value);
};
const columns: ColumnType<any>[] = [{
title: '序号',
dataIndex: 'productId',
......@@ -37,10 +73,13 @@ const EnquiryGoods: React.FC<queryProps> = (props) => {
}, {
title: '采购数量',
dataIndex: 'purchaseQuantity',
render:(text:any, recode: any) => <Input />
render:(text:any, record: any) => (
<NumericInput value={value} onChange={onChange} />
)
}, {
title: '操作',
dataIndex: 'operation',
render:(text:any, record: any) => <Button type='link' onClick={() => handleDelete(record)}>删除</Button>
}]
// 会员添加弹窗控制
const [visibleChannelMember, setVisibleChannelMember] = useState(false);
......@@ -171,72 +210,6 @@ const EnquiryGoods: React.FC<queryProps> = (props) => {
brandName: 'PELLE',
unitName: '个',
},{
commodityId: 6,
name: '进口头层黄牛皮荔枝纹/红色/XXL',
customerCategoryName: '牛皮',
brandName: 'PELLE',
unitName: '个',
},{
commodityId: 7,
name: '进口头层黄牛皮荔枝纹/红色/XXL',
customerCategoryName: '牛皮',
brandName: 'PELLE',
unitName: '个',
},{
commodityId: 8,
name: '进口头层黄牛皮荔枝纹/红色/XXL',
customerCategoryName: '牛皮',
brandName: 'PELLE',
unitName: '个',
},{
commodityId: 9,
name: '进口头层黄牛皮荔枝纹/红色/XXL',
customerCategoryName: '牛皮',
brandName: 'PELLE',
unitName: '个',
},{
commodityId: 10,
name: '进口头层黄牛皮荔枝纹/红色/XXL',
customerCategoryName: '牛皮',
brandName: 'PELLE',
unitName: '个',
},{
commodityId: 11,
name: '进口头层黄牛皮荔枝纹/红色/XXL',
customerCategoryName: '牛皮',
brandName: 'PELLE',
unitName: '个',
},{
commodityId: 12,
name: '进口头层黄牛皮荔枝纹/红色/XXL',
customerCategoryName: '牛皮',
brandName: 'PELLE',
unitName: '个',
},{
commodityId: 13,
name: '进口头层黄牛皮荔枝纹/红色/XXL',
customerCategoryName: '牛皮',
brandName: 'PELLE',
unitName: '个',
},{
commodityId: 14,
name: '进口头层黄牛皮荔枝纹/红色/XXL',
customerCategoryName: '牛皮',
brandName: 'PELLE',
unitName: '个',
},{
commodityId: 15,
name: '进口头层黄牛皮荔枝纹/红色/XXL',
customerCategoryName: '牛皮',
brandName: 'PELLE',
unitName: '个',
}]
const fetchGoodsList = async (params) => {
// const res = await PublicApi.getMemberManageLowerProviderPage(params)
......@@ -253,8 +226,11 @@ const EnquiryGoods: React.FC<queryProps> = (props) => {
});
}
// 选择会员弹框结束
/************* 页面的一些操作start *************/
useEffect(() => {
// 重选会员清掉已选择的商品
setgoodsList([]);
}, [memberList])
// 添加商品
const addGoods = () => {
if(memberList.length > 0 && memberList[0].memberId) {
......@@ -263,13 +239,22 @@ const EnquiryGoods: React.FC<queryProps> = (props) => {
message.error('请选择被询价会员')
}
}
// 删除
const handleDelete = (record) => {
const newData = [...goodsList];
const colIndex = newData.findIndex(v => v.productId === record.productId)
newData.splice(colIndex, 1)
/************* 页面的一些操作end *************/
// 删除选中的项
memberRowCtl.setSelectRow(newData)
memberRowCtl.setSelectedRowKeys(newData.map(v => v.productId))
setgoodsList(newData)
}
return (
<div className={styles.revise_style}>
<Button block type='dashed' onClick={addGoods}><PlusOutlined />添加商品</Button>
<Table style={{marginTop: '16px'}} columns={columns} dataSource={goodsList} pagination={false} />
<Table rowKey={'productId'} style={{marginTop: '16px'}} columns={columns} dataSource={goodsList} pagination={false} />
{/* 选择商品弹框 */}
<ModalTable
modalTitle='选择商品'
......
import React from 'react';
import React, { useEffect } from 'react';
import styles from './index.less';
import { Form, Input, Select, Row, Col, DatePicker } from 'antd';
import moment from 'moment';
import { Form, Input, Select, Row, Col, DatePicker } from 'antd';
interface queryProps {
currentRef?: any
}
const layout: any = {
colon: false,
labelCol: { style: { width: '174px' } },
wrapperCol: { span: 24 },
labelAlign: "left"
};
const TradingConditions: React.FC<{}> = () => {
const TradingConditions: React.FC<queryProps> = (props) => {
const { currentRef } = props;
const [TradingConditionsForm] = Form.useForm();
const hadnleValidateFields = () => {
return new Promise((resolve) => {
TradingConditionsForm.validateFields().then(values => {
resolve({
state: true,
data: {
deliveryTime: moment(values.deliveryTime).unix(),
quotationAsTime: moment(values.quotationAsTime).unix(),
offer: values.offer,
paymentType: values.paymentType,
taxes: values.taxes,
logistics: values.logistics,
packRequire: values.logistics,
otherRequire: values.logistics,
}
})
}).catch(errorInfo => {
console.log(errorInfo)
})
})
}
useEffect(() => {
if (currentRef) {
const userAction = {
validateFields: () => hadnleValidateFields()
}
if (currentRef && typeof currentRef === 'function') {
currentRef(userAction);
}
if (currentRef && typeof currentRef !== 'function') {
currentRef.current = userAction;
}
}
}, [])
return (
<Form
{...layout}
form={TradingConditionsForm}
className={styles.revise_style}
>
<Row gutter={70}>
<Col span={12}>
<Form.Item label='交付日期'>
<Form.Item label='交付日期' name='deliveryTime' rules={[{ required: true, message: '请选择交付日期' }]}>
<DatePicker format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
<Form.Item label='交付地址'>
<Form.Item label='交付地址' name='' rules={[{ required: true, message: '请选择交付地址' }]}>
<Select>
<Select.Option value="demo">Demo</Select.Option>
</Select>
</Form.Item>
<Form.Item label='报价截止时间'>
<Form.Item label='报价截止时间' name='quotationAsTime' rules={[{ required: true, message: '请选择报价截止时间' }]}>
<DatePicker format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
<Form.Item label='报价要求'>
<Form.Item label='报价要求' name='offer'>
<Input.TextArea placeholder='最长100个字符,50个汉字' />
</Form.Item>
<Form.Item label='付款方式'>
<Form.Item label='付款方式' name='paymentType'>
<Input.TextArea placeholder='最长100个字符,50个汉字' />
</Form.Item>
<Form.Item label='税费要求'>
<Form.Item label='税费要求' name='taxes'>
<Input.TextArea placeholder='最长100个字符,50个汉字' />
</Form.Item>
<Form.Item label='物流要求'>
<Form.Item label='物流要求' name='logistics'>
<Input.TextArea placeholder='最长100个字符,50个汉字' />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label='包装要求'>
<Form.Item label='包装要求' name='packRequire'>
<Input.TextArea placeholder='最长100个字符,50个汉字' />
</Form.Item>
<Form.Item label='其他要求'>
<Form.Item label='其他要求' name='otherRequire'>
<Input.TextArea placeholder='最长100个字符,50个汉字' />
</Form.Item>
</Col>
......
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