Skip to content

J
jinfa-platform
Commit 9ce79b83 authored by LeeJiancong's avatar LeeJiancong
Browse files
Options

'需求发布列表和保存校验等前期处理'

parent c548386d
Hide whitespace changes
Inline Side-by-side
Showing with 659 additions and 67 deletions
src/pages/transaction/enquirySubmit/components/productModal.tsx 0 → 100644
View file @ 9ce79b83
/*
* @Author: LeeJiancong
* @Date: 2020-08-28 10:07:45
* @LastEditors: LeeJiancong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-08-29 10:16:45
*/
import React, { Component, useState, useEffect } from 'react';
import { Modal, Button, Form, Radio, Tabs, Input, Select,Checkbox } from 'antd'
import { PublicApi } from '@/services/api'
const { TabPane } = Tabs
const { Option } = Select
const {TextArea} = Input
export interface Params {
sourceData: Array<any>[],
id?: any,
mode: number,
type?: number | string,
dialogVisible: boolean;
onCancel: Function;
onOK?: Function;
initialValues?: any;
dontReceive?: boolean; //默认展示
}
const layout = {
labelCol: {
span: 4
},
wrapperCol: {
span: 20
}
}
/**
* @description: 保存 提交表单
* @param {type}
* @return {type}
*/
const comfirmDialog: React.FC<Params> = (props) => {
console.log('数据',props.sourceData)
const [form] = Form.useForm()
const [placeOfOriginList, setplaceOfOriginList] = useState([])//产地
const handleCancel = () => {
}
const handletOk = () => {
form.validateFields().then(v => {
console.log('表单', v)
props.onOK(v)
})
// if(props.type){
// value.type = props.type
// }
// console.log('列表',value)
}
useEffect(() => {
return () => {
}
}, [])
const onChange = (value, attrItem) => {
}
const renderTabPanchildren = (item: any) => {
console.log('子项',item)
return (
<>
{
item.attributeList.map((attrItem:any) => {
return (
<>
{
attrItem.type === 1 &&
<Form.Item
name={attrItem.name}
label={attrItem.name}
rules={attrItem.isEmpty && [{
required: true,
message: '此项为必填项'
}]}
>
<Select
placeholder="请选择"
allowClear
onChange={(v)=>onChange(v, attrItem)}
>
{
attrItem.attributeValueList && attrItem.attributeValueList.map((item: any) => (
<Option key={item.id} value={item.id}>{item.value}</Option>
))
}
</Select>
</Form.Item>
}
{
attrItem.type === 2 &&
<Form.Item
label={attrItem.name}
name={attrItem.id}
rules={attrItem.isEmpty && [{
required: true,
message: '此项为必填项'
}]}
>
{/* <Checkbox.Group onChange={(v)=>onChange(v, attrItem)}>
{
attrItem.customerAttributeValueList.length && attrItem.customerAttributeValueList.map((item: any, index: string) => (
<Checkbox key={item.id} value={item.id}>{item.value}</Checkbox>
))
}
</Checkbox.Group> */}
</Form.Item>
}
{
attrItem.type === 3 &&
<Form.Item
name={attrItem.id}
label={attrItem.name}
rules={attrItem.isEmpty && [{
required: true,
message: '此项为必填项'
}]}
>
{/* <TextArea onChange={(v)=>onChange(v, attrItem)} maxLength={100} placeholder="最多输入100个字符" rows={4} /> */}
</Form.Item>
}
</>
)
})
}
</>
)
}
return (
<>
<Modal
title={props.mode === 0 ? '新增商品' : '查看商品'}
width={800}
visible={props.dialogVisible}
onOk={() => handletOk()}
onCancel={() => props.onCancel()}
destroyOnClose
afterClose={() => { }}
okText={`确定`}
cancelText='取消'
>
<Form
{...layout}
colon={false}
labelAlign="left"
form={form}
autoComplete="off"
>
<Tabs defaultActiveKey='tab1'
tabPosition="left"
>
<Tabs.TabPane tab='基本信息' key="tab-1">
<Form.Item
label='规格型号'
name='model'
required
>
<Input placeholder='' />
</Form.Item>
<Form.Item
label='商品品牌'
name='brand'
required
>
<Input placeholder='' />
</Form.Item>
</Tabs.TabPane>
{
/**
* @description: 动态循环
* @param {type}
* @return {type}
*/
}
{
props.sourceData.length > 0 && props.sourceData.map((attributeItem:any) => <>
<TabPane tab={attributeItem.name} key={attributeItem.id}>
{
renderTabPanchildren(attributeItem)
}
</TabPane>
</>
)
}
<Tabs.TabPane tab='采购数量' key="tab-7">
<Form.Item
label='单位'
name='purchaseNuit'
required
>
<Input placeholder='' />
</Form.Item>
<Form.Item
label='采购数量'
name='purchaseQuantity'
required
>
<Input placeholder='' />
</Form.Item>
</Tabs.TabPane>
</Tabs>
</Form>
</Modal>
</>
)
}
comfirmDialog.defaultProps = {
dontReceive: true,
type: 1 //1.支付宝 2.支付宝转账到银行卡参数配置 3.微信
}
export default comfirmDialog
\ No newline at end of file
src/pages/transaction/enquirySubmit/toSubmit/detail.tsx
View file @ 9ce79b83
......@@ -17,10 +17,13 @@ import {
} from '@formily/antd'
import { history } from 'umi'
import { LinkOutlined, PlusOutlined, QuestionCircleOutlined, MinusOutlined, MinusCircleOutlined } from '@ant-design/icons'
import { Row, Col, Card, Button, Table, Popconfirm,Radio, Form, Spin, Select, Cascader, Tabs, Input, Tooltip, Space } from 'antd';
import { Row, Col, Card, Button, Table, Popconfirm, Radio,DatePicker,
Form, Spin, Select, Cascader, Tabs, Input, Tooltip, Space } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import moment from 'moment'
import { ColumnType } from 'antd/lib/table/interface'
import {equiryColumns,dockingList} from './detailFormColumnType'
import { dockingList } from './detailFormColumnType'
import { getAuth} from '@/utils/auth'
// import {
// MegaLayout, Input, Switch, Select, FormMegaLayout, FormTab,
// Radio, ArrayTable, ArrayCards, Transfer
......@@ -28,8 +31,8 @@ import {equiryColumns,dockingList} from './detailFormColumnType'
import { PublicApi } from '@/services/api'
import styles from './templateForm.less';
import ReutrnEle from '@/components/ReturnEle'
import RroductModal from '../components/productModal'
import { PATTERN_MAPS } from '@/constants/regExp'
import { Effects } from 'bizcharts'
import {
GetProductCustomerGetCustomerCategoryTreeResponse,
GetManageAreaAllResponse
......@@ -37,6 +40,7 @@ import {
import { store } from '@/store'
const { TabPane } = Tabs
const {TextArea} = Input
const { Option } = Select
const actions = createFormActions()
const layout = {
......@@ -65,13 +69,21 @@ interface AreaParams {
}
const Detail: React.FC<{}> = () => {
const headerTitle = '需求单'
const [tabForm] = Form.useForm()
const [otherList, setotherList] = useState([])
const [productSource, setproductSource] = useState([])//商品列表 新增
const [shipperAddressList, setshipperAddressList] = useState([])
const [CategoryTreeOne, setCategoryTreeOne] = useState([])
const [provinceList, setProvinceList] = useState([])
const [showCategory, setShowCategory] = useState(null)
const [dialogVisible, setdialogVisible] = useState(false)
const [customerCategoryTree, setCustomerCategoryTree] = useState<GetProductCustomerGetCustomerCategoryTreeResponse>()
const [proviceOptions, setProviceOptions] = useState<GetManageAreaAllResponse>()
const [areaParams, setAreaParams] = useState<AreaParams>()
const [tabData, settabData] = useState<any>({})
const [platType, setplatType] = useState(1) //需求对接类型
const [memberType, setmemberType] = useState(1)
const { ProductStore } = store
const { setAreaOption, productInfoByEdit, getBasicFormParamsByEdit, setAttributeLists, setProductName } = ProductStore
......@@ -83,18 +95,154 @@ const Detail: React.FC<{}> = () => {
const handleLink = () => {
}
/**
* @description: 选择品类
* @param {type}
* @return {type}
*/
const onCustomerCategoryChange = (value: any) => {
let seletCategoryId = value[1] || value[0]
console.log(seletCategoryId, 'seleellele')
if (seletCategoryId) {
PublicApi.getProductCustomerGetCustomerCategoryById({ id: seletCategoryId }).then(res => {
const { data } = res
})
}
else
setShowCategory(null)
// if (seletCategoryId) {
// PublicApi.getProductPlatformGetCategoryById({ id: seletCategoryId }).then(res => {
// if(res.code === 1000){
// let {data} = res
let data = [
{
id: '1',
name: '外观尺寸',
attributeList: [
{
id: '2',
type: 1,
name: '面料',
attributeValueList: [
{
id: 1,
value: '涤沦'
},
{
id: 2,
value: '面料'
}
]
},
{
id: '3',
type: 1,
name: '颜色',
attributeValueList: [
{
id: 1,
value: '红色'
},
{
id: 2,
value: '白色'
}
]
},
]
},
{
id: '5',
name: '工艺',
attributeList: [
{
id: '4',
type: 1,
name: '化学处理',
attributeValueList: [
{
id: 5,
value: '化学1'
},
{
id: 6,
value: '化学2'
}
]
},
{
id: '5',
type: 1,
name: '表皮处理',
attributeValueList: [
{
id: 1,
value: '表皮1'
},
{
id: 2,
value: '表皮2'
}
]
},
]
},
]
settabData(data)
let da = []
data.forEach((item: any) => {
if (item.attributeList) {
item.attributeList.forEach((v: any) => (
da.push({
title: v.name,//表头
dataIndex: v.name,//字段值
key: v.id,//key
align: 'center',
render:(text:any) => {
const name = v.attributeValueList.filter(v=> v.id == text).map(v=> v.value)
return (
<>{name}</>
)
}
})
))
}
})
setotherList([...da])
// }
// })
// }
// else
// setShowCategory(null)
}
const equiryColumns: ColumnType<any>[] = [
{
title: '商品规格型号',
dataIndex: 'model',
key: 'model',
align: 'left'
},
{
title: '品牌',
dataIndex: 'brand',
key: 'brand',
align: 'center'
},
...otherList,
{
title: '单位',
dataIndex: 'purchaseNuit',
key: 'purchaseNuit',
align: 'center'
},
{
title: '采购数量',
dataIndex: 'purchaseQuantity',
key: 'purchaseQuantity',
align: 'center'
}
]
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10
......@@ -105,8 +253,17 @@ const Detail: React.FC<{}> = () => {
</Button>
)
/**
* @description: 操作
* @param {type} 1添加商品
* @return {type}
*/
const handleOptionBtn = (type: any) => {
switch (type) {
case 1:
setdialogVisible(true)
break;
}
}
useEffect(() => {
PublicApi.getProductCustomerGetCustomerCategoryTree().then(res => {
......@@ -115,7 +272,21 @@ const Detail: React.FC<{}> = () => {
setCategoryTreeOne(data)
}
})
/**
* @description: 收货地址
* @param {type}
* @return {type}
*/
PublicApi.getLogisticsSelectListShipperAddress().then(res => {
let list = []
res.data.forEach(item => {
list.push({value:item.id,label:item.fullAddress})
})
setshipperAddressList(list)
})
/**
* @description: 省市区
* @param {type}
......@@ -142,7 +313,7 @@ const Detail: React.FC<{}> = () => {
* @param {type}
* @return {type}
*/
const handlePlatTypeChange = (e:any) => {
const handlePlatTypeChange = (e: any) => {
setplatType(e.target.value)
}
/**
......@@ -166,34 +337,129 @@ const Detail: React.FC<{}> = () => {
setAreaParams(areaParams)
console.log(value, selected, areaParams, 'area')
}
const changePlatform = (e:any) => {
const changePlatform = (e: any) => {
setplatType(e.target.value)
}
const handleMemberTypeChange = (e: any) => {
setmemberType(e.target.value)
}
/**
* @description: TabForm提交 保存
* @param {type}
* @return {type}
*/
const handleSubmitTabForm = () => {
tabForm.validateFields().then(values => {
console.log('valiue',values)
if(values.productCategory){
values['productCategory'] = {}
values.productCategory.id = values.productCategory
}
if(values.deliveryTime){
values.deliveryTime = moment(values.deliveryTime).format("YYYY-MM-DD")
}
if(values.quotationAsTime){
values.quotationAsTime = moment(values.quotationAsTime).format("YYYY-MM-DD HH:mm")
}
//省市
if(values.requisitionFormAddress){
values.requisitionFormAddress =
values.requisitionFormAddress.map((v:any) => ({
provinceCode: v[0],
cityCode: v[1]
}))
values['defaultAddres']= 0
}else{
values['defaultAddres']= 1
}
console.log('时间',values)
})
}
/**
* @description: 提交 保存弹窗内容到列表 不经过接口
* @param {type}
* @return {type}
*/
const handleSubmit = (values: any) => {
console.log('弹窗内容', values)
let item = {}
// Object.keys(values).forEach((key) => {
// item[key] = values[key]
// })
let list = []
console.log('item', item)
//先循环所有 再循环有值的
otherList.forEach((vitem:any) => {
Object.keys(values).forEach((key) => {
console.log('key',key)
if(vitem.title == key){
console.log('vitem.title:',vitem.title)
console.log('value',values[vitem.title] )
item[key] = values[vitem.title]
}else{
item[key] = values[key]
}
})
})
list.push(item)
console.log('list', list)
setproductSource([...productSource, ...list])//新增就要合并
setdialogVisible(false)
}
const onFinish = fieldsValue => {
console.log('11',fieldsValue)
const values = {
...fieldsValue,
'deliveryTime': fieldsValue['deliveryTime'].format('YYYY-MM-DD'),
'quotationAsTime': fieldsValue['quotationAsTime'].format('YYYY-MM-DD HH:mm')
};
console.log('Received values of form: ', values);
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={headerTitle}
extra={
<Button type="primary" onClick={() => actions.submit()}> 保存</Button>
<Button type="primary" onClick={ handleSubmitTabForm}> 保存</Button>
}
>
<Card>
<Row >
<Col span={24}>
<Form name="base-form"
{...layout}
form={tabForm}
colon={false}
labelAlign="left"
autoComplete="off"
onFinish = {onFinish}
>
<Tabs defaultActiveKey='1'>
<TabPane tab="基本信息" key='1'>
<Row>
<Col span={12}>
<Form name="base-form"
{/* <Form name="base-form"
{...layout}
colon={false}
labelAlign="left"
autoComplete="off"
>
> */}
<Form.Item
label="报价单摘要"
required
rules={[
{
required: true
}
]}
name="details"
>
<Input placeholder="请输入报价单摘要" maxLength={30} />
......@@ -327,7 +593,7 @@ const Detail: React.FC<{}> = () => {
}}
</Form.List> */}
<Form.List name="commodityAreaList">
<Form.List name="requisitionFormAddress">
{(fields: any[], { add, remove }: any) => {
if (!fields.length) {
add()
......@@ -370,52 +636,134 @@ const Detail: React.FC<{}> = () => {
}}
</Form.List>
<Form.Item
name=''
name="requisitionFormNo"
label='需求单号'
>
</Form.Item>
<Form.Item
name='name'
// name='memberName'
label='会员名称'
>
<>{getAuth().name || '未知用户'}</>
</Form.Item>
<Form.Item
name='voucherTime'
// name='voucherTime'
label='单据时间'
>
</Form.Item>
<Form.Item
name=''
label='外部状态'
// name="externalState"
>
</Form.Item>
<Form.Item
name=''
// name="interiorState"
label='内部状态'
>
</Form.Item>
</Form>
{/* </Form> */}
</Col>
</Row>
</TabPane>
<TabPane tab="添加商品" key='2'>
<Button style={{ marginBottom: 16, marginTop: 24 }} block icon={<PlusOutlined />} onClick={() => handleOptionBtn(1)} type='dashed'>添加商品</Button>
<Table dataSource={[]} columns={equiryColumns} pagination={pagination} />
<Table dataSource={productSource} columns={equiryColumns} pagination={pagination} />
</TabPane>
<TabPane tab="交易条件" key='3'>
<Row>
<Col span={11}>
<Form.Item
label="交付日期"
rules={[
{
required: true,
type: 'object'
}
]}
name="deliveryTime"
>
<DatePicker style={{width:'100%'}} />
</Form.Item>
<Form.Item
label="交付地址"
rules={[
{
required: true
}
]}
name="addresId"
>
<Select placeholder="选择收货地址">
{
shipperAddressList.map((v:any) => {
return <Option key={v.value} value={v.value}>{v.label}</Option>
})
}
</Select>
</Form.Item>
<Form.Item
label="报价截止时间"
rules={[
{
required: true,
type: 'object'
}
]}
name="quotationAsTime"
>
<DatePicker showTime format="YYYY-MM-DD HH:mm" style={{width:'100%'}}/>
</Form.Item>
<Form.Item
label="报价要求"
name="offer"
>
<TextArea placeholder="最长100个字符，50个汉字" maxLength={50} />
</Form.Item>
<Form.Item
label="付款方式"
name="paymentType"
>
<TextArea placeholder="最长100个字符，50个汉字" maxLength={50} />
</Form.Item>
<Form.Item
label="税费要求"
name="taxes"
>
<TextArea placeholder="最长100个字符，50个汉字" maxLength={50} />
</Form.Item>
</Col>
<Col span={11} push={2}>
<Form.Item
label="物流要求"
name="logistics"
>
<TextArea placeholder="最长100个字符，50个汉字" maxLength={50} />
</Form.Item>
<Form.Item
label="包装要求"
name="packRequire"
>
<TextArea placeholder="最长100个字符，50个汉字" maxLength={50} />
</Form.Item>
<Form.Item
label="其他要求"
name="otherRequire"
>
<TextArea placeholder="最长100个字符，50个汉字" maxLength={50} />
</Form.Item>
</Col>
</Row>
</TabPane>
<TabPane tab="需求对接" key='4'>
<Space size={16}>
<Radio.Group value={platType} onChange={(e) => changePlatform(e)}>
<Radio value={1}>
<Radio.Group value={platType} onChange={(e) => changePlatform(e)}>
<Radio value={1}>
发布至平台
<Tooltip title="需求发布至企业商城求购频">
<QuestionCircleOutlined />
......@@ -425,39 +773,52 @@ const Detail: React.FC<{}> = () => {
系统匹配
<Tooltip title="系统通过需求单品类、商品属性、适用地市与平台会员发布的商品品类、
商品属性、归属地区进行匹配，推荐满足条件的平台会员">
<QuestionCircleOutlined />
</Tooltip>
<QuestionCircleOutlined />
</Tooltip>
</Radio>
<Radio value={3}>
指定会员
<Tooltip title="选择与当前会员有归属关系的会员且角色类型为服务提供的会员（供应商），
需求只发送给指定会员">
<QuestionCircleOutlined />
</Tooltip>
<QuestionCircleOutlined />
</Tooltip>
</Radio>
</Radio.Group>
</Space>
{
platType == 3 &&
platType == 3 &&
<Button style={{ marginBottom: 16, marginTop: 24 }} block icon={<PlusOutlined />} onClick={() => handleOptionBtn(2)} type='dashed'>选择会员</Button>
}
{
platType != 1 &&
<Table dataSource={[]} columns={dockingList} pagination={pagination} />
<Table dataSource={[]} columns={dockingList} pagination={pagination} />
}
</TabPane>
<TabPane tab="流转记录" key='5'>
<Radio.Group value={memberType} optionType="button" buttonStyle="solid" onChange={(e) => handleMemberTypeChange(e)}>
<Radio value={0}>外部单据(0)</Radio>
<Radio value={1}>内部单据</Radio>
</Radio.Group>
</TabPane>
</Tabs>
</Form>
</Col>
</Row>
<RroductModal
sourceData={tabData}
dialogVisible={dialogVisible}
mode={0}
onOK={(values: any) => handleSubmit(values)}
onCancel={() => setdialogVisible(false)}
>
</RroductModal>
</Card>
</PageHeaderWrapper>
......
src/pages/transaction/enquirySubmit/toSubmit/detailFormColumnType.ts
View file @ 9ce79b83
......@@ -3,7 +3,7 @@
* @Date: 2020-08-27 16:27:53
* @LastEditors: LeeJiancong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-08-27 16:34:59
* @LastEditTime: 2020-08-29 14:29:40
*/
import { ColumnType } from 'antd/lib/table/interface'
export const equiryColumns: ColumnType<any>[] = [
......@@ -69,52 +69,49 @@ export const equiryColumns: ColumnType<any>[] = [
export const dockingList: ColumnType<any>[] = [
{
title: '序号',
dataIndex: 'memberId',
dataIndex: 'id',
align: 'center',
key: 'memberId',
key: 'id',
},
{
title: '公司名称',
dataIndex: 'name',
key: 'name',
title: '会员名称',
dataIndex: 'memberName',
key: 'memberName',
align: 'left'
},
{
title: '公司地址',
dataIndex: 'roleName',
key: 'roleName',
align: 'center'
},
{
title: '成立日期',
dataIndex: 'roleName',
key: 'roleName',
title: '会员类型',
dataIndex: 'memberTypeName',
key: 'memberTypeName',
align: 'center'
},
{
title: '公司规模',
title: '会员角色',
dataIndex: 'roleName',
key: 'roleName',
align: 'center'
},
{
title: '诚信度',
dataIndex: 'roleName',
key: 'roleName',
title: '会员等级',
dataIndex: 'levelTag',
key: 'levelTag',
align: 'center'
},
{
title: '是否归属会员',
dataIndex: 'roleName',
key: 'roleName',
align: 'center'
dataIndex: 'membershipOrNot',
key: 'membershipOrNot',
align: 'center',
render:(text:any) => (
text == 0 ?'否':'是'
)
},
{
title: '状态',
dataIndex: 'levelTag',
key: 'levelTag',
dataIndex: 'state',
key: 'state',
align: 'center'
},
{
......
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