Commit 6206e6ff authored by 前端-黄佳鑫's avatar 前端-黄佳鑫

新增需求发布需求修改

parent f93466ce
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 style from '../index.less';
import { LinkOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
const layout: any = {
colon: false,
labelCol: { style: { width: '110px' } },
labelAlign: "left"
};
const { Sider, Content } = Layout;
const { Link } = Anchor;
interface anchorParams {
visible?: boolean,
onOk?: Function,
onCancel?: Function
}
const { Option } = Select;
const ModalAnchor: React.FC<anchorParams> = (props) => {
const { visible, onOk, onCancel } = props;
const [form] = Form.useForm();
const [loading, setloading] = useState(false);
const [files, setFiles] = useState([]);
const [categoryById, setCategoryById] = useState<any>({});
const [category, setcategory] = useState<Array<any>>([]);
/**查询品类树 */
const searchCategoryTree = (id: any) => {
return new Promise(resolve => {
PublicApi.getProductPlatformGetCategoryTree({ rootNodeId: id }).then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
}).then((data: any) => {
setcategory(data)
})
}
/**查询品类信息--包括品类、属性、属性值 */
const getCategoryById = (val:any) => {
const id = val[val.length -1];
PublicApi.getProductPlatformGetCategoryById({id}).then(res => {
if(res.code === 1000) {
setCategoryById(res.data)
}
})
}
useEffect(() => {
searchCategoryTree('0')
}, [visible])
const onSubmit = (value:any) => {
form.validateFields().then(res => {
console.log(res, '提交')
}).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'
wrapClassName={style.modal_wrap_className}
bodyStyle={{ padding: '0px' }}
visible={visible}
onCancel={() => onCancel()}
onOk={onSubmit}
>
<Layout>
<Sider width={159} className={style.site_layout_background}>
<Anchor
bounds={0}
targetOffset={120}
affix={false}
>
<Menu
mode='inline'
defaultSelectedKeys={['1']}
>
<Menu.Item key="1"><Link href='#basic_info' title='基本信息' /></Menu.Item>
{
Object.keys(categoryById).length > 0 &&
<Menu.Item key="2"><Link href='#category' title={categoryById.name} /></Menu.Item>
}
<Menu.Item key="3"><Link href='#other_demand' title='其他要求' /></Menu.Item>
<Menu.Item key="4"><Link href='#procured_amount' title='采购数量' /></Menu.Item>
</Menu>
</Anchor>
</Sider>
<Content className={style.site_content_style}>
<Form
form={form}
{...layout}
>
<div id='basic_info'>
<div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />基本信息</div>
<Form.Item label='商品品类' name='category' rules={[{ required: true, message: '请选择商品品类' }]}>
<Cascader
options={category}
fieldNames={{ label: 'title', value: 'id', children: 'children' }}
placeholder="请选择品类"
notFoundContent={<Spin size="small" />}
onChange={getCategoryById}
/>
</Form.Item>
<Form.Item label='商品编号' name='goodsNo' rules={[{ required: true, message: '请输入商品编号' }]}><Input /></Form.Item>
<Form.Item label='商品名称' name='name' rules={[{ required: true, message: '请输入商品名称' }]}><Input /></Form.Item>
<Form.Item label='规格型号' name='model' rules={[{ required: true, message: '请输入规格型号' }]}><Input /></Form.Item>
<Form.Item label='规格品牌' name='brand'><Input /></Form.Item>
</div>
{
Object.keys(categoryById).length > 0 &&
<div id='category'>
<div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />{categoryById.name}</div>
{
categoryById.attributeList.length > 0 &&
categoryById.attributeList.map((item:any, index:number) => (
<Form.Item
label={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)}
>
{
item.attributeValueList.map((items:any) => (
<AutoComplete.Option value={items.value} key={items.id}>{items.value}</AutoComplete.Option>
))
}
</AutoComplete>
</Form.Item>
))
}
</div>
}
<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='upload'>
<div className={style.upload_data}>
{files.length > 0 && files.map((v, index) => (
<div key={index} className={style.upload_item}>
<div className={style.upload_left}>
<LinkOutlined />
<span>{v.name}</span>
</div>
<div className={style.upload_right}>
<DeleteOutlined />
</div>
</div>
))}
</div>
<Upload
action="/api/file/file/upload"
data={{ fileType: UPLOAD_TYPE }}
showUploadList={false}
accept='.doc,.docx,.pdf,.ppt,.pptx,.xls,.xlsx'
>
<Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
<div style={{ marginTop: '8px' }}>一次上传一个文件,每个附件大小不能超过 20M</div>
</Upload>
</Form.Item>
</div>
<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>
</div>
</Form>
</Content>
</Layout>
</Modal>
)
}
export default ModalAnchor;
\ No newline at end of file
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 style from '../index.less';
import { LinkOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
import ModalTable from '@/components/ModalTable';
import { ColumnType } from 'antd/lib/table/interface';
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
const layout: any = {
colon: false,
labelCol: { style: { width: '110px' } },
labelAlign: "left"
};
const { Sider, Content } = Layout;
const { Link } = Anchor;
interface goodsParams {
visible?: boolean,
onOk?: Function,
onCancel?: Function
}
const ModalGoods: React.FC<goodsParams> = (props) => {
const [form] = Form.useForm();
const { visible, onOk, onCancel } = props;
const [loading, setloading] = useState(false);
const [files, setFiles] = useState([]);
const [category, setcategory] = useState<Array<any>>([]);
const [rowSelection, RowCtl] = useRowSelectionTable({ customKey: 'id', type: 'radio' });
const [visibleChannelGoods, setvisibleChannelGoods] = useState<boolean>(false);
const [goods, setGoods] = useState<any>({})
/**查询品类树 */
const searchCategoryTree = (id: any) => {
return new Promise(resolve => {
PublicApi.getProductPlatformGetCategoryTree({ rootNodeId: id }).then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
}).then((data: any) => {
setcategory(data)
})
}
useEffect(() => {
searchCategoryTree('0')
}, [visible])
/**提交表单 */
const onSubmit = (value: any) => {
form.validateFields().then(res => {
onOk(res, goods)
}).catch(error => {
console.log(error)
})
}
/**货品表头 */
const columns: ColumnType<any>[] = [
{
title: '货号',
key: 'code',
dataIndex: 'code'
},
{
title: '货品名称',
key: 'name',
dataIndex: 'name'
},
{
title: '规格型号',
key: 'type',
dataIndex: 'type'
},
{
title: '品类',
key: 'customerCategory',
dataIndex: 'customerCategory',
render: (text: any) => <span>{text.name}</span>
},
{
title: '品牌',
key: 'brand',
dataIndex: 'brand',
render: (text: any) => <span>{text.name}</span>
},
{
title: '单位',
key: 'unitName',
dataIndex: 'unitName'
},
]
/** 获取货品 */
const fetchGoodsData = (params: any) => {
return new Promise(resolve => {
PublicApi.getProductGoodsGetGoodsList(params).then(res => {
const { data } = res
resolve(data)
})
})
}
/** 选择货品 */
const handleConfirm = () => {
setvisibleChannelGoods(false)
const data = RowCtl.selectRow[0]
const fullId = data.customerCategory.fullId
const ids = fullId.replace(/\b(0+)/gi,'').split('.');
setGoods(data)
form.setFieldsValue({
goodsNo: data.code,
name: data.name,
model: data.type,
category: ids.join(',').split(','),
brand: data.brand.name,
unit: data.unitName,
})
}
return (
<>
<Modal
title='通过平台属性添加'
width='800px'
wrapClassName={style.modal_wrap_className}
bodyStyle={{ padding: '0px' }}
visible={visible}
onCancel={() => onCancel()}
onOk={onSubmit}
>
<Layout>
<Sider width={159} className={style.site_layout_background}>
<Anchor
bounds={0}
targetOffset={120}
affix={false}
>
<Menu
mode='inline'
defaultSelectedKeys={['1']}
>
<Menu.Item key="1"><Link href='#basic_info' title='基本信息' /></Menu.Item>
<Menu.Item key="2"><Link href='#procured_amount' title='采购数量' /></Menu.Item>
<Menu.Item key="3"><Link href='#other_demand' title='附件' /></Menu.Item>
</Menu>
</Anchor>
</Sider>
<Content className={style.site_content_style}>
<Form
form={form}
{...layout}
>
<div id='basic_info'>
<div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />基本信息</div>
<Form.Item label='货号' name='goodsNo' rules={[{ required: true, message: '请输入商品编号' }]}><Input.Search enterButton={<><LinkOutlined /> 选择</>} onSearch={() => setvisibleChannelGoods(true)} /></Form.Item>
<Form.Item label='货品名称' name='name' rules={[{ required: true, message: '请输入货品名称' }]}><Input /></Form.Item>
<Form.Item label='规格型号' name='model' rules={[{ required: true, message: '请输入规格型号' }]}><Input /></Form.Item>
<Form.Item label='商品品类' name='category' rules={[{ required: true, message: '请选择商品品类' }]}>
<Cascader
options={category}
fieldNames={{ label: 'title', value: 'id', children: 'children' }}
placeholder="请选择品类"
notFoundContent={<Spin size="small" />}
/>
</Form.Item>
<Form.Item label='货品品牌' name='brand'><Input /></Form.Item>
</div>
<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>
</div>
<div id='other_demand'>
<div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />其他要求</div>
<Form.Item label='附件' name='upload'>
<div className={style.upload_data}>
{files.length > 0 && files.map((v, index) => (
<div key={index} className={style.upload_item}>
<div className={style.upload_left}>
<LinkOutlined />
<span>{v.name}</span>
</div>
<div className={style.upload_right}>
<DeleteOutlined />
</div>
</div>
))}
</div>
<Upload
action="/api/file/file/upload"
data={{ fileType: UPLOAD_TYPE }}
showUploadList={false}
accept='.doc,.docx,.pdf,.ppt,.pptx,.xls,.xlsx'
>
<Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
<div style={{ marginTop: '8px' }}>一次上传一个文件,每个附件大小不能超过 20M</div>
</Upload>
</Form.Item>
</div>
</Form>
</Content>
</Layout>
</Modal>
<ModalTable
width={810}
modalTitle='选择货品'
columns={columns}
rowSelection={rowSelection}
visible={visibleChannelGoods}
confirm={handleConfirm}
cancel={() => setvisibleChannelGoods(false)}
fetchTableData={params => fetchGoodsData(params)}
forceRender={true}
modalType='goodsModalSchema'
tableProps={{
rowKey: 'id',
}}
resetModal={{
destroyOnClose: true
}}
/>
</>
)
}
export default ModalGoods;
\ No newline at end of file
import React from 'react';
import React, { useState, ReactNode } from 'react';
import { Form, Radio, Button, Table } from 'antd';
import { ColumnType } from 'antd/lib/table/interface';
import ModalAnchor from './Modal/modalAnchor';
import ModalGoods from './Modal/modalGoods';
import { PlusOutlined } from '@ant-design/icons';
const layout: any = {
colon: false,
......@@ -8,22 +12,105 @@ const layout: any = {
wrapperCol: { span: 9 },
labelAlign: "left"
};
const AddGoods: React.FC<{}> = () => {
export interface faceSetData {
set?: any,
get?: Function
}
const AddGoods: React.FC<faceSetData> = (props) => {
const { set, get } = props
const [type, setType] = useState<number>(0);
const btnname: Array<string> = ['添加商品', '选择货品', '导入货品']
const [visible, setvisible] = useState<Array<boolean>>([false, false, false, false]);
/** 平台属性添加表头 */
const columns: ColumnType<Object>[] = [
{
title: '商品编号',
key: 'id',
dataIndex: 'id',
},
{
title: '商品名称',
key: 'name',
dataIndex: 'name',
},
{
title: '规格型号',
key: 'model',
dataIndex: 'model',
},
{
title: '品类',
key: 'category',
dataIndex: 'category',
},
{
title: '品牌',
key: 'brand',
dataIndex: 'brand',
},
{
title: '采购数量',
key: 'purchaseCount',
dataIndex: 'purchaseCount',
},
{
title: '操作',
key: '',
dataIndex: '',
}
]
/** 切换添加方式 */
const changeRadio = (e: any) => {
const { value } = e.target;
setType(value)
}
/** 按钮的文字 */
const handleText = (num: any) => {
let text: ReactNode = null;
text = btnname[num - 1];
return text
}
/**
* @name: 操作弹窗
* @arg: 1.通过平台属性添加 2.选择货品添加 3.导入货品生成
* */
const handleModal = (arg: number) => {
visible[arg] = !visible[arg]
setvisible([...visible])
}
/** 商品添加确定 */
const handleSubmit = (data: any, record:any) => {
console.log(data, record);
handleModal(type);
}
return (
<Form
{...layout}
>
<Form.Item label='添加方式' required>
<Radio.Group>
<Radio.Group onChange={changeRadio}>
<Radio value={1}>通过平台属性添加</Radio>
<Radio value={2}>选择货品添加</Radio>
<Radio value={3}>导入货品生成</Radio>
</Radio.Group>
</Form.Item>
<Form.Item noStyle>
<Button type='dashed' block>添加商品</Button>
</Form.Item>
{type > 0 &&
<Form.Item noStyle>
<Button onClick={() => handleModal(type)} type='dashed' block style={{ marginBottom: '24px' }}><PlusOutlined />{handleText(type)}</Button>
<Table columns={columns} />
</Form.Item>
}
<ModalAnchor
visible={visible[type]}
onOk={handleSubmit}
onCancel={() => handleModal(type)}
/>
<ModalGoods
visible={visible[type]}
onOk={handleSubmit}
onCancel={() => handleModal(type)}
/>
</Form>
)
}
......
......@@ -11,9 +11,16 @@ const layout: any = {
labelAlign: "left"
};
export interface faceSetData {
set?: any,
get?: Function,
currentRef?: any
}
const { Option } = Select;
const BasicInfo: React.FC<{}> = () => {
const BasicInfo: React.FC<faceSetData> = (props) => {
const [form] = Form.useForm();
const { set, get, currentRef } = props
const [province, setprovince] = useState<any>([]);// 省列表
const [city, setcity] = useState<any>([]);// 市列表
const [requisitionFormAddress, setrequisitionFormAddress] = useState<any>([{
......@@ -35,20 +42,19 @@ const BasicInfo: React.FC<{}> = () => {
}
// 选择下拉得内容
const handProvince = (val: any, idx: number, num: number) => {
const result = [...requisitionFormAddress];
const cityCode: Array<any> = []
result.forEach((item: any) => {
if (item.cityCode) {
cityCode.push(item.cityCode)
}
})
setcode([...cityCode]);
if (num === 1) {
const result = [...requisitionFormAddress];
province.forEach(item => {
if (item.code === val) {
PublicApi.getManageAreaByPcodeAll({ pcode: val }).then((res: any) => {
if (res.code === 1000) {
res.data.forEach((items: any) => {
const fiterCode = code.filter(value => value === items.code);
if (fiterCode[0] === items.code) {
items.disabled = true
} else {
items.disabled = false
}
})
result[idx].provinceCode = val;
result[idx].province = item.name;
city[idx] = { citydata: res.data }
......@@ -57,48 +63,100 @@ const BasicInfo: React.FC<{}> = () => {
})
}
})
setrequisitionFormAddress(result);
} else {
const result = [...requisitionFormAddress];
city.forEach(item => {
item.citydata.forEach(items => {
if (items.code === val) {
const cityCode = code.find(it => items.code);
if (cityCode !== items.code) {
items.disabled = false
}
result[idx].cityCode = val;
result[idx].city = items.name;
}
})
})
setcode([...code, val]);
setrequisitionFormAddress(result);
setcity([...city])
}
setrequisitionFormAddress(result);
}
// 选择城市的时候下拉就调用方
const onDropdownVisibleChange = () => {
return new Promise(reslove => reslove(code)).then((res: any) => {
city.forEach((item: any) => {
item.citydata.filter(it => {
res.map(items => {
if (items === it.code) {
it.disabled = true
}
})
})
})
setcity([...city])
})
}
// 添加一条地址
const addFormAddress = (idx:number) => {
const addFormAddress = (idx: number) => {
const address: any = {
provinceCode: '',
province: '',
cityCode: '',
city: ''
}
if(requisitionFormAddress[idx].provinceCode && requisitionFormAddress[idx].cityCode) {
if (requisitionFormAddress[idx].provinceCode && requisitionFormAddress[idx].cityCode) {
setrequisitionFormAddress([...requisitionFormAddress, address])
} else {
message.error('请完善适用城市信息')
}
}
// 删除一条地址
const removeFormAddress = (idx: any) => {
if (requisitionFormAddress.length > 1) {
const requisitionFormAddressFilter = requisitionFormAddress.filter((item: any, index: number) => index !== idx);
const cityFilter = city.filter((item: any, index: number) => index !== idx);
form.resetFields();
requisitionFormAddressFilter.forEach((item: any, index: number) => {
const cityCode = code.find(it => item.cityCode);
if (cityCode !== item.cityCode) {
item.disabled = false
}
form.setFieldsValue({
['province_' + index]: item.provinceCode,
['city_' + index]: item.cityCode
});
})
setcity(cityFilter);
setrequisitionFormAddress(requisitionFormAddressFilter);
}
}
useEffect(() => {
manageProvince().then(data => {
setprovince(data)
})
}, [])
useEffect(() => {
currentRef.current = {
get: () => new Promise((resolve: any) => {
form.validateFields().then(res => {
resolve({
state: true,
name: 'basicInfo',
data: {
details: res.details,
requisitionFormAddress,
}
})
}).catch(error => {
console.log(error)
})
})
}
}, [requisitionFormAddress])
return (
<Form
{...layout}
......@@ -106,7 +164,7 @@ const BasicInfo: React.FC<{}> = () => {
>
<Form.Item
label='需求单摘要'
name=''
name='details'
rules={[{ required: true, message: '请输入需求单摘要' }]}
>
<Input />
......@@ -121,6 +179,7 @@ const BasicInfo: React.FC<{}> = () => {
<Col span={12}>
<Form.Item name={`province_${idx}`}>
<Select
onDropdownVisibleChange={onDropdownVisibleChange}
onChange={(value) => {
handProvince(value, idx, 1)
}}
......@@ -136,9 +195,9 @@ const BasicInfo: React.FC<{}> = () => {
<Col span={12}>
<Form.Item
name={`city_${idx}`}
rules={[{ required: item.provinceCode ? true : false, message: '选择三级分类' }]}
>
<Select
onDropdownVisibleChange={onDropdownVisibleChange}
onChange={(value) => {
handProvince(value, idx, 2)
}}
......
import React, { useState } from 'react';
import { Form, Radio, Tooltip, Row, Col, Checkbox, Avatar, Space, Button, Table } from 'antd';
import { QuestionCircleOutlined, PlusOutlined } from '@ant-design/icons';
import style from './index.less';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
const layout: any = {
colon: false,
labelCol: { style: { width: '174px' } },
wrapperCol: { span: 9 },
labelAlign: "left"
};
export interface faceSetData {
set?: any,
get?: Function
}
const DemandDbutted: React.FC<faceSetData> = (props) => {
const { set, get } = props
const [shopId, setShopId] = useState<Number>(0)
// 系统匹配表头
const columns: ColumnType<any>[] = [
{
title: '序号',
key: 'id',
dataIndex: 'id',
},
{
title: '会员名称',
key: 'memberName',
dataIndex: 'memberName',
},
{
title: '会员类型',
key: 'memberTypeName',
dataIndex: 'memberTypeName',
},
{
title: '会员角色',
key: 'roleName',
dataIndex: 'roleName',
},
{
title: '会员等级',
key: 'levelTag',
dataIndex: 'levelTag',
},
{
title: '是否归属会员',
key: 'membershipOrNot',
dataIndex: 'membershipOrNot',
},
{
title: '状态',
key: 'state',
dataIndex: 'state',
},
{
title: '操作',
key: 'options',
dataIndex: 'options',
},
]
// 指定会员表头
const memberColumns: ColumnType<any>[] = [
{
title: '序号',
key: 'memberId',
dataIndex: 'memberId',
},
{
title: '会员名称',
key: 'name',
dataIndex: 'name',
},
{
title: '会员类型',
key: 'memberTypeName',
dataIndex: 'memberTypeName',
},
{
title: '会员角色',
key: 'roleName',
dataIndex: 'roleName',
},
{
title: '会员等级',
key: 'levelTag',
dataIndex: 'levelTag',
}
]
// 选择系统匹配的列表数据
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<any>>([]);
const rowSelection = {
selectedRowKeys,
onChange: setSelectedRowKeys
};
// 切换添加方式
const changeRadio = (e: any) => {
const { value } = e.target;
setShopId(value)
}
// 请求系统匹配列表数据
const fetchSystemMateData = (params:any) => {
}
return (
<Form
{...layout}
>
<Form.Item label='添加方式' required>
<Radio.Group onChange={changeRadio}>
<Radio value={1}><Tooltip placement="topLeft" title={<>需求发布至企业商城求购频道</>}>发布类型<QuestionCircleOutlined style={{ marginLeft: '5px' }} /></Tooltip></Radio>
<Radio value={2}><Tooltip placement="topLeft" title={<>系统通过需求单品类、商品属性、适用地市与平台会员发布的商品品类、商品属性、归属地区进行匹配,推荐满足条件的平台会员</>}>系统匹配<QuestionCircleOutlined style={{ marginLeft: '5px' }} /></Tooltip></Radio>
<Radio value={3}><Tooltip placement="topLeft" title={<>选择与当前会员有归属关系的会员且角色类型为服务提供的会员(供应商),需求只发送给指定会员</>}>指定会员<QuestionCircleOutlined style={{ marginLeft: '5px' }} /></Tooltip></Radio>
</Radio.Group>
</Form.Item>
{shopId === 1 &&
// 发布至平台
<Form.Item label='发布至平台' wrapperCol={{ span: 24 }}>
<Checkbox.Group className={style.checkbox_wrap_style}>
<Row>
<Col span={6}>
<Checkbox value="A">
<Space>
<Avatar>LOGO</Avatar>
<span>名称</span>
</Space>
</Checkbox>
</Col>
</Row>
</Checkbox.Group>
</Form.Item>
}
{
shopId === 2 &&
// 系统匹配
<Form.Item noStyle>
<StandardTable
rowSelection={rowSelection}
columns={columns}
// fetchTableData={(params) => fetchSystemMateData(params)}
/>
</Form.Item>
}
{
shopId === 3 &&
// 指定会员
<Form.Item noStyle>
<Button type='dashed' block style={{ marginBottom: '24px' }}><PlusOutlined />选择会员</Button>
<Table
columns={memberColumns}
/>
</Form.Item>
}
</Form>
)
}
export default DemandDbutted;
\ No newline at end of file
......@@ -4,9 +4,12 @@ import { Radio } from 'antd';
import PolymericTable from '@/components/PolymericTable';
import { EditableColumns } from '@/components/PolymericTable/interface';
import moment from 'moment';
const FlowRecord: React.FC<{}> = () => {
export interface faceSetData {
set?: any,
get?: Function
}
const FlowRecord: React.FC<faceSetData> = (props) => {
const { set, get } = props
const [radio, setRadio] = useState<string>('outer'); //切换单据
const format = (text) => {
return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
......
......@@ -18,3 +18,125 @@
}
}
}
.modal_wrap_className {
.site_layout_background {
background-color: #fff;
border-right: 1px solid #EEF0F3;
}
.site_content_style {
background-color: #fff;
padding: 24px;
height: 600px;
overflow-y: scroll;
.affix_title {
font-size: 14px;
margin-bottom: 24px;
.divider_style {
width: 2px;
height: 16px;
margin: 0px 5px 0px 0px ;
background-color: #00B37A;
}
}
.upload_item {
padding: 5px 8px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #FAFBFC;
.upload_left {
display: flex;
align-items: center;
color: #303133;
:global {
.anticon-file-word {
color: #4279df;
font-size: 20px;
margin-right: 8px;
}
}
}
.upload_right {
color: #00B37A;
cursor: pointer;
:global {
.anticon-delete {
margin-left: 19px;
color: #C0C4CC;
}
}
}
}
}
:global {
.ant-anchor-wrapper {
margin-left: 0 !important;
padding-left: 0 !important;
}
.ant-menu-item {
margin-top: 0 !important;
margin-bottom: 0 !important;
&:after {
left: 0;
border-right: none;
border-left: 2px solid #00B37A;
height: 80%;
margin: auto;
}
.ant-anchor-link {
padding: 0px !important;
line-height: 40px !important;
}
}
.ant-menu-item-selected {
color: #303133;
font-weight: 600;
background-color: transparent !important;
}
}
}
.checkbox_wrap_style {
width: 100%;
:global {
.ant-checkbox-wrapper {
width: 100%;
border: 1px solid #ccc;
padding: 8px 18px;
.ant-checkbox {
display: none;
}
> span {
display: flex;
align-items: center;
padding: 0px 0px;
.checkbox_avatar {
width: 32px;
height: 32px;
margin-right: 8px;
}
}
}
.ant-checkbox-wrapper-checked {
border-color: #00b37a!important;
color: #00b37a;
position: relative;
&:after {
content: "";
position: absolute;
width: 12px;
height: 11px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADKADAAQAAAABAAAACwAAAAChLCZNAAAA6klEQVQoFWNgIAVsruliJkr9/1XMDCZqcxkY/mczEtSwv4GD4euvlQz/GfxAavFr2N3Bz/Dz8yaG///tYAbj1rC1QYLh/+8dQMX6MMW4bdjSoMTA8Gs30BlAGhUwoXKBvM21QBN/H0VWbMovzXDSOgOsFFXD1mo7Bsa/B5U5BSVgBoEUrzaOZMi5shkshAjWLTWgUNgINJlnh1k8AysTEzhEQIpDzy5nOP3xKVgDxNNbqxIY/jHMAYqADRBi5WTYY5HEIMbGzRB4ZilcMUgHI8PWqlKg4i6wdiRCgIWDQYSNi+HOt3dIogwMANgLQif9hMeFAAAAAElFTkSuQmCC);
right: 0;
bottom: 0;
}
}
}
}
\ No newline at end of file
......@@ -9,22 +9,57 @@ const layout: any = {
wrapperCol: { span: 24 },
labelAlign: "left"
};
const TradingConditions: React.FC<{}> = () => {
export interface faceSetData {
set?: any,
get?: Function,
currentRef?: any
}
const TradingConditions: React.FC<faceSetData> = (props) => {
const { set, get, currentRef } = props
const [TradingConditionsForm] = Form.useForm();
const [address, setAddress] = useState([]);
const [selectAddress, setselectAddress] = useState<any>({});
useEffect(() => {
// 获取交付地址
PublicApi.getLogisticsSelectListReceiverAddress().then(res => {
setAddress(res.data)
})
currentRef.current = {
get: () => new Promise((resolve: any) => {
TradingConditionsForm.validateFields().then(res => {
resolve({
state: true,
name: 'tradingConditions',
data: {
deliveryTime: moment(res.deliveryTime).format('x'),
quotationAsTime: moment(res.quotationAsTime).format('x'),
addresId: res.addresId,
addres: selectAddress.fullAddress,
logistics: res.logistics,
offer: res.offer,
otherRequire: res.otherRequire,
packRequire: res.packRequire,
paymentType: res.paymentType,
taxes: res.taxes,
}
})
}).catch(error => {
console.log(error)
})
})
}
}, [])
const disabledDate = (current) => {
return current && current < moment().endOf('day');
}
const onSelect = (val:any , option:any) => {
setselectAddress(option)
}
return (
<Form
......@@ -40,8 +75,8 @@ const TradingConditions: React.FC<{}> = () => {
format="YYYY-MM-DD HH:mm:ss"
/>
</Form.Item>
<Form.Item label='交付地址' name='fullAddressId' rules={[{ required: true, message: '请选择交付地址' }]}>
<Select>
<Form.Item label='交付地址' name='addresId' rules={[{ required: true, message: '请选择交付地址' }]}>
<Select onSelect={onSelect}>
{address.map(v => (
<Select.Option key={v.id} value={v.id}>{v.fullAddress}</Select.Option>
))}
......
export const setUpdata = {
requisitionFormAddress: [], /** 需求单地址列表 ,RequisitionFormAddresRequest */
requisitionFormProducts: [],/** 商品列表 ,RequisitionFormProductRequest */
demandDockings: [],/** 需求对接-系统匹配列表 ,DemandDockingRequest */
shopIds: [],/** 需求对接-发布至平台 ,Long */
memberIds: [],/** 需求对接-指定会员ID列表 ,Long */
details: '',/** 需求摘要 */
deliveryTime: '',/** 交付日期 */
quotationAsTime: '',/** 报价截止时间 */
voucherTime: '',/** 单据时间 */
defaultAddres: null,/** 适用地市:1.默认全部省市区 0.选中项 */
addres: '',/** 交付地址 */
addresId: null,/** 交付地址Id */
offer: '',/** 报价要求 */
paymentType: '',/** 付款方式 */
taxes: '',/** 税费要求 */
logistics: '',/** 物流要求 */
packRequire: '',/** 包装要求 */
otherRequire: '',/** 其他要求 */
type: null,/** 需求对接类型:1.发布至平台 2.系统匹配 3.指定会员 */
}
\ No newline at end of file
import React from 'react';
import React, { useState, useRef } from 'react';
import { history } from 'umi';
import ReutrnEle from '@/components/ReturnEle'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
......@@ -7,33 +7,64 @@ import BasicInfo from './components/basicInfo';
import TradingConditions from './components/tradingConditions'
import FlowRecord from './components/flowRecord';
import AddGoods from './components/addGoods';
import DemandDbutted from './components/demandDbutted';
import { setUpdata } from './data'; /**set数据给子组件 */
const { TabPane } = Tabs;
const AddDemandOrder: React.FC<{}> = () => {
const [data, setData] = useState<any>(setUpdata);
const basic = useRef<any>();
const trading = useRef<any>();
/**get子组件的数据 */
/**提交数据 */
const onSubmit = async () => {
const basicRef = await basic.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 {
}
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
extra={
<Button type="primary"> 保存</Button>
<Button type="primary" onClick={onSubmit}> 保存</Button>
}
>
<Card>
<Tabs type='card'>
<TabPane forceRender tab='基本信息' key='1'>
<BasicInfo />
<BasicInfo
set={data}
currentRef={basic}
/>
</TabPane>
<TabPane forceRender tab='添加商品' key='2'>
<AddGoods />
<AddGoods
set={data}
/>
</TabPane>
<TabPane forceRender tab='交易条件' key='3'>
<TradingConditions />
<TradingConditions
set={data}
currentRef={trading}
/>
</TabPane>
<TabPane forceRender tab='需求对接' key='4'>
<DemandDbutted
set={data}
/>
</TabPane>
<TabPane forceRender tab='流转记录' key='5'>
<FlowRecord />
<FlowRecord
set={data}
/>
</TabPane>
</Tabs>
</Card>
......
......@@ -30,7 +30,7 @@ const Attached: React.FC<parmas> = (props) => {
}
// 上传回调
const handleChange = ({ file }) => {
const arr: any = [];
const arr: any = files;
setloading(true);
if (file.response) {
if (file.response.code === 1000) {
......@@ -41,7 +41,7 @@ const Attached: React.FC<parmas> = (props) => {
setloading(false);
}
}
setFiles([...files, ...arr])
setFiles([...arr])
handleGetEnclosureUrls(arr);
}
// 删除附件
......
......@@ -12,7 +12,7 @@ import moment from 'moment';
const layout: any = {
colon: false,
labelCol: { style: { width: '174px' } },
labelCol: { style: { width: '100px' } },
wrapperCol: { span: 9 },
labelAlign: "left"
};
......
......@@ -19,6 +19,7 @@ export interface parmas {
const Attached: React.FC<parmas> = (props) => {
const { handleGetEnclosureUrls, editData } = props;
const [files, setFiles] = useState<Array<any>>([]);
const [loading, setloading] = useState(false);
/**判断文件类型和大小 */
const beforeDocUpload = (file: UploadFile) => {
const isLt20M = file.size / 1024 / 1024 < 20;
......@@ -30,12 +31,14 @@ const Attached: React.FC<parmas> = (props) => {
// 上传回调
const handleChange = ({ file }) => {
const arr: any = files;
setloading(true);
if (file.response) {
if (file.response.code === 1000) {
arr.push({
name: file.name,
url: file.response.data
})
setloading(false);
}
}
setFiles([...arr])
......@@ -82,7 +85,7 @@ const Attached: React.FC<parmas> = (props) => {
beforeUpload={beforeDocUpload}
onChange={handleChange}
>
<Button icon={<UploadOutlined />}>上传文件</Button>
<Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
<div style={{ marginTop: '8px' }}>一次上传一个文件,每个附件大小不能超过 20M</div>
</Upload>
</Form.Item>
......
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