Skip to content

J
jinfa-platform
Commit 566b7ab5 authored by LeeJiancong's avatar LeeJiancong
Browse files
Options

'对接选择需求弹窗，报价明细弹框等功能'

parent 8727a765
Show whitespace changes
Inline Side-by-side
Showing with 2289 additions and 86 deletions
config/routes/tranactionRoute.ts
View file @ 566b7ab5
......@@ -3,7 +3,7 @@
* @Date: 2020-07-31 19:56:22
* @LastEditors: LeeJiancong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-09-10 17:07:48
* @LastEditTime: 2020-09-11 10:17:58
*/
const TranactionRoute = {
......@@ -64,6 +64,12 @@ const TranactionRoute = {
},
]
},
/**
* @description: 需求发布
* @param {type}
* @return {type}
*/
{
path:'/memberCenter/tranactionAbility/enquirySubmit',
name:'enquirySubmit',
......@@ -119,6 +125,12 @@ const TranactionRoute = {
]
},
/**
* @description: 需求报价
* @param {type}
* @return {type}
*/
{
path:'/memberCenter/tranactionAbility/enquiryOffer',
name:'enquiryOffer',
......@@ -137,7 +149,23 @@ const TranactionRoute = {
key:'viewEnquiryDetail',
component: '@/pages/transaction/enquiryOffer/components/detail',
hideInMenu: true,
}
},
//需求新增列表
{
path:'/memberCenter/tranactionAbility/enquiryOffer/toAddSubmitList',
name:'toAddSubmitList',
key:'toAddSubmitList',
component: '@/pages/transaction/enquiryOffer/toAddSubmit'
},
//新增
{
path:'/memberCenter/tranactionAbility/enquiryOffer/addEnquiry',
name:'addEnquiry',
key:'addEnquiry',
component: '@/pages/transaction/enquiryOffer/toAddSubmit/detail',
hideInMenu: true,
},
]
},
......
src/components/ModalTable/index.tsx
View file @ 566b7ab5
......@@ -2,7 +2,7 @@ import React, { ReactText, useRef, useEffect } from 'react'
import {StandardTable} from 'god'
import { IStandardTableProps } from 'god/dist/src/standard-table'
import { Row, Col, Modal } from 'antd'
import { productModalSchema, productModalByMemberSchema, memberModalSchema, inquirySchema, demandSchema } from './schema'
import { productModalSchema, productModalByMemberSchema, memberModalSchema, inquirySchema, demandSchema,enquirySchema } from './schema'
import Search from '../NiceForm/components/Search'
import SearchSelect from '../NiceForm/components/SearchSelect'
import Submit from '../NiceForm/components/Submit'
......@@ -17,7 +17,7 @@ export interface ModalTableProps extends IStandardTableProps<any> {
cancel?(),
visible?: boolean,
resetModal?: object,
modalType?: 'productByDefault' | 'productByMember' | 'memberByDefault' | 'inquiryByDefault' | 'demandByDefault' | 'none'
modalType?: 'productByDefault' | 'productByMember' | 'memberByDefault' | 'inquiryByDefault' | 'demandByDefault' | 'enquiryModel' | 'none'
}
const ModalTable:React.FC<ModalTableProps> = (props) => {
......@@ -50,6 +50,10 @@ const ModalTable:React.FC<ModalTableProps> = (props) => {
return inquirySchema
}
case 'enquiryModel':{
return enquirySchema
}
case 'demandByDefault': {
return demandSchema
}
......
src/components/ModalTable/schema/index.ts
View file @ 566b7ab5
......@@ -200,6 +200,71 @@ export const inquirySchema: ISchema = {
}
}
/**
* @description: 新增报价单 需求单查询
* @param {type}
* @return {type}
*/
export const enquirySchema: ISchema = {
type: 'object',
properties: {
keywords: {
type: 'string',
'x-component': 'ModalSearch',
'x-component-props': {
placeholder: '需求单号/需求单摘要',
align: 'flex-left',
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
style: {
marginRight: 0
}
},
colStyle: {
marginTop: 20,
},
},
properties: {
// @todo 需调整字段名
demandMembers: {
type: 'string',
"x-component": 'SearchSelect',
"x-component-props": {
placeholder: '需求会员（全部）',
className: 'fixed-ant-selected-down', // 该类强制将显示的下拉框出现在select下, 只有这里出现问题, ??
fetchSearch: PublicApi.getProductSelectGetSelectCategory,
style: {
width: 160
}
}
},
"[startVoucherTime,endVoucherTime]": {
type: 'string',
"x-component": "dateSelect",
"x-component-props": {
placeholder: '单据时间（全部）',
}
},
submit: {
"x-component": 'Submit',
"x-mega-props": {
span: 1
},
"x-component-props": {
children: '查询'
}
}
}
}
}
}
export const demandSchema: ISchema = {
type: 'object',
properties: {
......
src/locales/zh-CN/menu.ts
View file @ 566b7ab5
......@@ -2,7 +2,7 @@
* @Author: LeeJiancong
* @Date: 2020-07-13 14:08:50
* @LastEditors: LeeJiancong
* @LastEditTime: 2020-09-10 14:40:36
* @LastEditTime: 2020-09-11 11:21:27
*/
export default {
......@@ -129,6 +129,9 @@ export default {
//需求报价
'menu.tranactionAbility.enquiryOffer': '需求报价',
'menu.tranactionAbility.enquiryOffer.enquirySearch': '需求单查询',
'menu.tranactionAbility.enquiryOffer.toAddSubmitList': '待新增报价单',
'menu.tranactionAbility.enquiryOffer.addEnquiry': '新增报价',
'menu.tranactionAbility.enquiryOffer.viewEnquiryDetail': '报价单详情',
......
src/pages/transaction/enquiryOffer/components/inquiryModalTable/index.tsx 0 → 100644
View file @ 566b7ab5
import React, { useEffect,useState } from 'react'
import ModalTable, { ModalTableProps } from '@/components/ModalTable'
import { PublicApi } from '@/services/api'
import moment from 'moment'
import { ColumnType } from 'antd/lib/table/interface'
import { useModalTable } from '../../model/useModalTable'
import { ISchemaFormActions } from '@formily/antd'
export interface InquiryModalTableProps extends ModalTableProps {
type?: 'radio' | 'checkbox',
schemaAction: ISchemaFormActions,
currentRef?: any,
confirmModal?: Function;
}
/**
* @description: 选择需求单
* @param {type}
* @return {type}
*/
const fetchEqData = async (params: any) => {
const res = await PublicApi.getOrderQuotationRequisitionFormList(params);
return res.data
}
const formTime = (text) => {
return <>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</>
}
/**
* @description: 弹框选择需求单
* @param {type}
* @return {type}
*/
const dialogEqcolumns : ColumnType<any>[] = [
{
title:'需求单号',
key:'requisitionFormNo',
dataIndex:'requisitionFormNo',
align:'center'
},
{
title:'需求单摘要',
key:'details',
dataIndex:'details',
align:'left'
},
{
title:'需求会员',
key:'demandMembers',
dataIndex:'demandMembers',
align:'left'
},
{
title:'单据日期',
key:'voucherTime',
dataIndex:'voucherTime',
align:'center',
render:(text:any)=> formTime(text)
}
]
// 报价单弹窗
const InquiryModalTable:React.FC<InquiryModalTableProps> = (props) => {
const { type = 'radio', schemaAction, confirmModal, currentRef, ...restProps } = props
const { visible, setVisible, rowSelection, rowSelectionCtl } = useModalTable({type})
useEffect(() => {
if (currentRef) {
currentRef.current = {
setVisible,
visible,
rowSelectionCtl
}
}
}, [])
const handleConfirm = async () => {
const item = rowSelectionCtl.selectRow[0]
// if (item) {
// schemaAction.setFieldValue('quotationNo', item.quotationNo)
// const data = await fetchOrderApi.getProductListByQuotationOrderId({
// id: item.id
// })
// schemaAction.setFieldValue('orderProductRequests', data)
// schemaAction.setFieldValue('supplyMembersName', item.memberName || '后端没有返回会员名称')
// }
props.confirmModal(item)
setVisible(false)
}
return (
<ModalTable
modalTitle='选择需求单'
columns={dialogEqcolumns}
visible={visible}
confirm={handleConfirm}
cancel={() => setVisible(false)}
fetchTableData={(params) => fetchEqData(params)}
rowSelection={rowSelection}
modalType='enquiryModel'
tableProps={{
rowKey: 'id'
}}
{...restProps}
/>
)
}
InquiryModalTable.defaultProps = {}
export default InquiryModalTable
\ No newline at end of file
src/pages/transaction/enquiryOffer/components/productModal.tsx
View file @ 566b7ab5
......@@ -3,19 +3,25 @@
* @Date: 2020-08-28 10:07:45
* @LastEditors: LeeJiancong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-09-09 16:39:14
* @LastEditTime: 2020-09-12 11:40:07
*/
import React, { Component, useState, useEffect } from 'react';
import { Modal, Button, Form, Radio, AutoComplete,Tabs, Input, Select,Checkbox } from 'antd'
import { Modal, Button,Space, Form, Radio, AutoComplete, Badge,Tabs, Input, Select, Checkbox } from 'antd'
import { PublicApi } from '@/services/api'
import ModalTable from '@/components/ModalTable'
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable'
import { PageStatus, usePageStatus } from '@/hooks/usePageStatus'
import { ColumnType } from 'antd/lib/table/interface'
import { ISchema } from '@formily/antd'
import { LinkOutlined } from '@ant-design/icons'
const { TabPane } = Tabs
const { Option } = Select
const {TextArea} = Input
const { TextArea } = Input
export interface Params {
sourceData: Array<any>[],
sourceData?: Array<any>[],
id?: any,
mode: number,
mode?: number,
type?: number | string,
dialogVisible: boolean;
onCancel: Function;
......@@ -24,29 +30,135 @@ export interface Params {
dontReceive?: boolean; //默认展示
}
const layout = {
layout: 'vertical',
labelCol: {
span: 4
span: 6
},
wrapperCol: {
span: 20
span: 24
}
}
/**
* @description: 商品列表
* @param {type}
* @return {type}
*/
// const fetchData = async (params) => {
// const res = await PublicApi.getProductCommodityCommonGetCommodityDetailList({ ...params, environment: 1, shopType: 1 })
// return res.data
// }
//数据是真实的 只是模拟
let data = [
{
key:'1',
applyTime: 1599630601413,
brandName: "三星",
code: "P0000D3",
commodityId: 75,
customerCategoryName: "手机1",
goodsId: 23,
id: 419,
isMemberPrice: true,
max: 1999,
min: 1999,
name: "一锤子手机dev/火焰红/8+256g/刘海屏",
priceType: 1,
status: 5,
unitName: "件"
}
]
const fetchData = params => {
return new Promise((resolve, reject) => {
const queryResult = data.find(v => v.key === params.keywords);
setTimeout(() => {
resolve({
code: 200,
message: '',
data: queryResult ? [queryResult] : data,
});
}, 1000);
});
};
const columns: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'commodityId',
align: 'center',
key: 'commodityId',
},
{
title: '商品名称',
dataIndex: 'name',
key: 'name',
align: 'left'
},
{
title: '品类',
dataIndex: 'customerCategoryName',
key: 'customerCategoryName',
align: 'center'
},
{
title: '品牌',
dataIndex: 'brandName',
key: 'brandName',
align: 'center'
}
]
/**
* @description: 保存 提交表单
* @param {type}
* @return {type}
*/
const comfirmDialog: React.FC<Params> = (props) => {
// console.log('数据',props.sourceData)
const [form] = Form.useForm()
const [visible, setsVisible] = useState(false) //state hook写法
const [Curform] = Form.useForm()
const { pageStatus, id } = usePageStatus()
//PageStatus:{0: "ADD", 1: "EDIT", 2: "PREVIEW", ADD: 0, EDIT: 1, PREVIEW: 2}0: "ADD"1: "EDIT"2: "PREVIEW"ADD: 0EDIT: 1PREVIEW: 2} 1
let _title = pageStatus === PageStatus.PREVIEW ? '查看' : id ? '编辑' : '新建'
const headerTitle = (`${_title}报价明细`)
const [commodityAttributedataSource, setcommodityAttributedataSource] = useState<any>({
commodityAttributeList: []
})
const [productRowSelection, productRowCtl] = useRowSelectionTable({ type: 'radio', customKey: 'id' })
const [placeOfOriginList, setplaceOfOriginList] = useState([])//产地
const handleCancel = () => {
}
//选择商品
const handleLink = () => {
setsVisible(true)
}
const handleSelectOk = () => {
console.log('数据', productRowCtl);
const selectRow = productRowCtl.selectRow[0]
let { commodityId, id, goodsId, roleId, name, brandName } = selectRow
Curform.setFieldsValue({
name: name,//商品名称
brand: brandName
})
//查询属性
PublicApi.getProductCommodityGetCommodity({ id: commodityId }).then(res => {
if (res.code === 1000) {
let { data } = res || {}
setcommodityAttributedataSource(data)
}
})
setsVisible(false)
}
const handleSelectCancel = () => {
setsVisible(false)
}
const handletOk = () => {
form.validateFields().then(v => {
Curform.validateFields().then(v => {
console.log('表单', v)
props.onOK(v)
// props.onOK(v)
})
// if(props.type){
// value.type = props.type
......@@ -66,11 +178,37 @@ const comfirmDialog: React.FC<Params> = (props) => {
}
const selectBtn = (
<Button style={{ backgroundColor: '#6B778C', borderColor: '#6B778C', color: 'white' }} onClick={handleLink}>
<LinkOutlined />选择
</Button>
)
const formSearch: ISchema = {
type: 'object',
properties: {
name: {
type: 'string',
"x-component": "Search",
"x-component-props": {
placeholder: '输入关键字搜索'
}
},
roleId: {
type: 'string',
"x-component-props": {
placeholder: '选择会员角色'
},
enum: []
}
}
}
const renderTabPanchildren = (item: any) => {
return (
<>
{
item.attributeList.map((attrItem:any) => {
item.attributeList.map((attrItem: any) => {
const options = attrItem.attributeValueList.map((item: any) => ({
value: item.value
}))
......@@ -150,7 +288,8 @@ const comfirmDialog: React.FC<Params> = (props) => {
<>
<Modal
title={props.mode === 0 ? '新增商品' : '查看商品'}
// title={props.mode === 0 ? '新增报价明细' : '查看报价明细'}
title={headerTitle}
width={800}
visible={props.dialogVisible}
onOk={() => handletOk()}
......@@ -164,7 +303,7 @@ const comfirmDialog: React.FC<Params> = (props) => {
{...layout}
colon={false}
labelAlign="left"
form={form}
form={Curform}
autoComplete="off"
>
......@@ -174,18 +313,42 @@ const comfirmDialog: React.FC<Params> = (props) => {
>
<Tabs.TabPane tab='基本信息' key="tab-1">
<Form.Item
label='规格型号'
label='对应需求单规格型号'
name='model'
required
rules={[
{
required: true
}
]}
>
<Input placeholder='' />
<Select>
<Option value="1">11</Option>
</Select>
</Form.Item>
<Form.Item
label='报价商品名称'
name='name'
rules={[
{
required: true,
message:'请选择商品名称'
}
]}
>
<Input className="input_addonAfter" disabled addonAfter={selectBtn} />
</Form.Item>
<Form.Item
label='商品品牌'
name='brand'
required
rules={[
{
required: true,
message:'请选择商品名称'
}
]}
>
<Input placeholder='' />
<Input disabled placeholder='' />
</Form.Item>
</Tabs.TabPane>
......@@ -196,8 +359,9 @@ const comfirmDialog: React.FC<Params> = (props) => {
* @return {type}
*/
}
{
props.sourceData.length > 0 && props.sourceData.map((attributeItem:any) => <>
props.sourceData.length > 0 && props.sourceData.map((attributeItem: any) => <>
<TabPane tab={attributeItem.name} key={attributeItem.id}>
{
renderTabPanchildren(attributeItem)
......@@ -207,11 +371,30 @@ const comfirmDialog: React.FC<Params> = (props) => {
)
}
<Tabs.TabPane tab='采购数量' key="tab-7">
{
commodityAttributedataSource.commodityAttributeList.length > 0 && commodityAttributedataSource.commodityAttributeList.map((item: any) => <>
<TabPane tab={item.customerAttribute.name} key={item.customerAttribute.id}>
<Space key={item.customerAttribute.id} direction="vertical" size={16}>
{item.customerAttributeValueList.map((child,childIndex) => {
return <Badge text={child.value} key={childIndex} status="default"/>
})}
</Space>
</TabPane>
</>
)
}
<Tabs.TabPane tab='报价明细' key="tab-7">
<Form.Item
label='单位'
name='purchaseNuit'
required
rules={[
{
required: true,
message:"请先选择需求单"
}
]}
>
<Input placeholder='' />
</Form.Item>
......@@ -219,7 +402,23 @@ const comfirmDialog: React.FC<Params> = (props) => {
<Form.Item
label='采购数量'
name='purchaseQuantity'
required
rules={[
{
required: true,
message:"请先选择需求单"
}
]}
>
<Input placeholder='' />
</Form.Item>
<Form.Item
label='报价单价'
name='price'
rules={[
{
required: true
}
]}
>
<Input placeholder='' />
</Form.Item>
......@@ -232,6 +431,24 @@ const comfirmDialog: React.FC<Params> = (props) => {
</Form>
</Modal>
<ModalTable
modalTitle='选择商品'
confirm={handleSelectOk}
cancel={handleSelectCancel}
visible={visible}
columns={columns}
rowSelection={productRowSelection}
fetchTableData={params => fetchData(params)}
formilyProps={{
ctx: {
schema: formSearch
}
}}
tableProps={{
rowKey: 'id'
}}
>
</ModalTable>
</>
)
}
......
src/pages/transaction/enquiryOffer/enquirySearch/index.tsx
View file @ 566b7ab5
......@@ -3,7 +3,7 @@
* @Date: 2020-08-24 11:39:11
* @LastEditors: LeeJiancong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-09-10 17:26:47
* @LastEditTime: 2020-09-12 14:20:26
*/
/**
* @description: 组件描述:
......@@ -46,7 +46,7 @@ import {PageStatus} from '@/hooks/usePageStatus'
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import {searchSelectGetSelectCategoryOptionEffect} from '../../effect/index'
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { enquierySchema,enquierySearchSchema } from '../schema';
import { enquierySearchSchema } from '../schema';
import { PublicApi } from '@/services/api';
import { values, action } from 'mobx';
export interface listParams{
......@@ -131,17 +131,6 @@ const List:React.FC<{listParams}> = (props) => {
onFilter: (value, record) => record.externalState === value,
render: (text: any, reconds) =>
enquirySearchexternalState(text)
},
{
title:'内部状态',
key:'interiorState',
dataIndex:'interiorState',
align:'left',
filters: filterInteriorStateList,
filterMultiple: false,
onFilter: (value, record) => record.interiorState === value,
render:(text:any) =>
enquirySearchInteriorState(text)
}
......
src/pages/transaction/enquiryOffer/model/useModalTable.ts 0 → 100644
View file @ 566b7ab5
import { useState } from 'react'
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable'
export const useModalTable = (options?) => {
const [visible, setVisible] = useState(false)
const [rowSelection, rowSelectionCtl] = useRowSelectionTable(options)
return {
visible,
setVisible,
rowSelection,
rowSelectionCtl
}
}
\ No newline at end of file
src/pages/transaction/enquiryOffer/schema/index.tsx
View file @ 566b7ab5
......@@ -8,7 +8,7 @@ import TranactionRoute from 'config/routes/tranactionRoute'
* @param {type}
* @return {type}
*/
export const enquierySchema: ISchema = {
export const commonEnquieryOfferSchema: ISchema = {
type:'object',
properties:{
megalayout:{
......@@ -25,14 +25,14 @@ export const enquierySchema: ISchema = {
children:"{{controllerBtns}}"
}
},
requisitionFormNo:{
quotationNo:{//报价单号
type:'string',
"x-component":"Search",
"x-mega-props":{
},
"x-component-props":{
placeholder:'搜索'
placeholder:'报价单搜索'
}
}
}
......@@ -59,31 +59,47 @@ export const enquierySchema: ISchema = {
inline: true
},
properties:{
requisitionFormNo:{//需求单号
type:'string',
"x-mega-props":{
},
"x-component-props":{
placeholder:'询价单'
}
},
details:{
type:'string',
"x-component-props":{
placeholder:'需求摘要'
placeholder:'报价摘要'
}
},
category:{
demandMembers:{
type:'string',
'x-component': 'CustomInputSearch',
'x-component-props': {
placeholder: '商品品类',
showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null,
style: { width: '174px', lineHeight: '32px' },
searchValue: null,
dataoption: []
}
// "x-component-props":{
// placeholder:'请选择品类'
// },
// enum:[]
"x-component-props":{
placeholder:'询价会员'
}
},
// category:{
// type:'string',
// 'x-component': 'CustomInputSearch',
// 'x-component-props': {
// placeholder: '商品品类',
// showSearch: true,
// showArrow: true,
// defaultActiveFirstOption: false,
// filterOption: false,
// notFoundContent: null,
// style: { width: '174px', lineHeight: '32px' },
// searchValue: null,
// dataoption: []
// }
// // "x-component-props":{
// // placeholder:'请选择品类'
// // },
// // enum:[]
// },
voucherTime:{
type:'string',
default: 0,
......@@ -158,30 +174,29 @@ export const enquierySearchSchema: ISchema = {
properties:{
demandMembers:{
type:'string',
"x-component":'Search',
"x-component-props":{
placeholder:'需求会员'
placeholder:'询价会员'
}
},
category:{
type:'string',
'x-component': 'CustomInputSearch',
'x-component-props': {
placeholder: '商品品类',
showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null,
style: { width: '174px', lineHeight: '32px' },
searchValue: null,
dataoption: []
}
// "x-component-props":{
// placeholder:'请选择品类'
// category:{
// type:'string',
// 'x-component': 'CustomInputSearch',
// 'x-component-props': {
// placeholder: '商品品类',
// showSearch: true,
// showArrow: true,
// defaultActiveFirstOption: false,
// filterOption: false,
// notFoundContent: null,
// style: { width: '174px', lineHeight: '32px' },
// searchValue: null,
// dataoption: []
// }
// // "x-component-props":{
// // placeholder:'请选择品类'
// // },
// // enum:[]
// },
// enum:[]
},
voucherTime:{
type:'string',
default: 0,
......@@ -206,4 +221,86 @@ export const enquierySearchSchema: ISchema = {
}
}
/**
* @description: 报价单新增编辑-需求单查询
* @param {type}
* @return {type}
*/
export const dialogEqformSearch: ISchema = {
type:'object',
properties:{
megalayout:{
type:'object',
"x-component":'mega-layout',
properties:{
requisitionFormNo:{
type:'string',
"x-component":"Search",
"x-mega-props":{
},
"x-component-props":{
placeholder:'需求单号',
align: 'flex-left',
}
}
}
},
[FORM_FILTER_PATH]:{
type:'object',
"x-component":"flex-layout",
"x-component-props":{
rowStyle:{
justifyContent: 'flex-start',
flexWrap:'nowrap'
},
colStyle:{//改变间隔
marginRight: 20
}
},
properties:{
PRO_LAYOUT:{
type:'object',
"x-component":'mega-layout',
"x-mega-props":{
span: 5
},
"x-component-props":{
inline: true
},
properties:{
details:{
type:'string',
"x-component-props":{
placeholder:'需求摘要'
}
},
demandMembers:{
type:'string',
"x-component-props":{
placeholder:'需求会员'
}
},
voucherTime:{
type:'string',
default: 0,
"x-component-props":{
placeholder:'请选择单据时间'
},
enum: TimeList
},
}
},
sumbit:{
"x-component":'Submit',
"x-mega-props":{
span: 1
},
"x-component-props":{
children:'查询'
}
}
}
}
}
}
\ No newline at end of file
src/pages/transaction/enquiryOffer/toAddSubmit/detail.tsx 0 → 100644
View file @ 566b7ab5
/*
* @Author: LeeJiancong
* @Date: 2020-08-24 11:39:29
* @LastEditors: LeeJiancong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-09-12 15:55:28
*/
import React, { Component, useState, useEffect,useRef } from 'react'
import ReactDOM from 'react-dom'
import {
FormSpy,
SchemaForm,
ISchema,
SchemaMarkupField as Field,
createFormActions,
FormButtonGroup,
registerFormFields,
Submit,
FormProvider,
Reset,
connect,
LifeCycleTypes,
FormEffectHooks,
useFormEffects
} 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, DatePicker,
Form, Spin, Select, Switch, 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 { memberColumn } from '../../common/detailFormColumnType'
import { getAuth } from '@/utils/auth'
import { PublicApi } from '@/services/api'
import { GlobalConfig } from '@/global/config';
import styles from './templateForm.less';
import ReutrnEle from '@/components/ReturnEle'
import ModalTable from '@/components/ModalTable'
import { PATTERN_MAPS } from '@/constants/regExp'
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable'
import { PageStatus, usePageStatus } from '@/hooks/usePageStatus'
import { externalColumn, interiorColumn } from '../../common/detailFormColumnType'
import { interiorState } from '../../common/tableStatusList'
import statuStyle from '../../common/colorTag'
import { dialogEqformSearch} from '../schema'
import RroductModal from '../components/productModal'
import InquiryModalTable from '../components/inquiryModalTable'
import PlatType from '../../components/platType'
import {
GetManageAreaAllResponse
} from '@/services';
import { store } from '@/store'
import colorTag from '@/pages/logistics/colorTag'
import { Effects } from 'bizcharts'
import { check } from 'prettier'
const { TabPane } = Tabs
const { TextArea } = Input
const { Option } = Select
import styled from 'styled-components'
import { findItemAndDelete } from '@/utils'
import cx from 'classnames'
const addSchemaAction = createFormActions()
const RowStyleLayout = styled(props => <div {...props} />)`
.card-checkbox {
margin: 20px 0;
display: flex;
flex-wrap: wrap;
}
.card-checkbox-item {
width: 320px;
height: 48px;
margin-right: 32px;
margin-bottom: 16px;
border:1px solid rgba(235,236,240,1);
padding: 0 16px;
display: flex;
align-items: center;
cursor: pointer;
}
.card-checkbox-item.active {
border-color: #00B382;
position: relative;
}
.card-checkbox-item.active::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border: 6px solid transparent;
border-right: 6px solid #00B382;
border-bottom: 6px solid #00B382;
}
.card-logo {
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 8px;
}
.card-logo.default {
background: #669EDE;
text-align: center;
line-height: 32px;
color: #fff;
font-size: 12px;
}
.card-checkbox-title {
font-size: 14px;
color: #42526E;
}
`
const format = (text) => {
return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
}
const actions = createFormActions()
const layout = {
labelCol: {
span: 4
},
wrapperCol: {
span: 20
}
}
const layoutFormList = {
labelCol: {
span: 4,
},
wrapperCol: {
span: 18,
push: 4
},
}
interface AreaParams {
provinceCode: any;
provinceName: any;
cityCode: any;
cityName: any;
}
const fetchMemberList = async (params) => {
const res = await PublicApi.getMemberManageLowerProviderPage(params)
return res.data
}
/**
* @description: 选择需求单
* @param {type}
* @return {type}
*/
const fetchEqData = async (params: any) => {
const res = await PublicApi.getOrderQuotationRequisitionFormList(params);
return res.data
}
const init = {
deliveryTime: ''
}
/**
* @description: 弹框选择需求单
* @param {type}
* @return {type}
*/
const dialogEqcolumns : ColumnType<any>[] = [
{
title:'需求单号',
key:'requisitionFormNo',
dataIndex:'requisitionFormNo',
align:'center'
},
{
title:'需求单摘要',
key:'details',
dataIndex:'details',
align:'left'
},
{
title:'需求会员',
key:'demandMembers',
dataIndex:'demandMembers',
align:'left'
},
{
title:'单据日期',
key:'voucherTime',
dataIndex:'voucherTime',
align:'center',
render:(text:any)=> format(text)
}
]
//用来模拟 系统匹配
const coList = [
{
id: 1,
memberName:'会员',
levelTag:'青铜',
memberId:1,
state: 1
},
{
id: 2,
memberName:'会员',
levelTag:'青铜',
memberId:2,
state: 1
},
{
id: 3,
memberName:'会员',
levelTag:'青铜',
memberId: 3,
state: 0
}
]
const Detail: React.FC<{}> = () => {
const [tabForm] = Form.useForm()
const { pageStatus, id } = usePageStatus()
//PageStatus:{0: "ADD", 1: "EDIT", 2: "PREVIEW", ADD: 0, EDIT: 1, PREVIEW: 2}0: "ADD"1: "EDIT"2: "PREVIEW"ADD: 0EDIT: 1PREVIEW: 2} 1
let _title = pageStatus === PageStatus.PREVIEW ? '查看' : id ? '编辑' : '新建'
const headerTitle = (`${_title}报价单`)
const inquiryRef = useRef<any>({})
const [initialValues, setinitialValues] = useState<any>({
details: '',
addresId: null,
packRequire: '',
taxes: '',
logistics: '',
offer: '',
paymentType: '',
otherRequire: '',
quotationAsTime: '',
deliveryTime: '',
voucherTime: '',
quotationDeadline:'',//报价截至时间
requisitionFormAddress: []//地市
})
const [requisitionFormId, setrequisitionFormId] = useState(null)//对应需求单号
let [dataInfo, setdataInfo] = useState<any>({
status: '',
shopIds:[],//已勾选的
externalState: 0,
interiorState: 0,
externalRequisitionFormStateResponses: [],
interiorRequisitionFormStateResponses: [],
requisitionFormAddress: []
})
const [goodAllIds, setgoodAllIds] = useState([])
const [goodIds, setgoodIds] = useState<any>([])//选中的
const [sumitGoods, setsumitGoods] = useState([])//已发布的不能再次勾选
const [menberList2, setmenberList2] = useState([])
const [requisitionFormAddress, setrequisitionFormAddress] = useState([])//地市多项回显用
const [customerCategoryId, setcustomerCategoryId] = useState<any>([]) //品类
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<number>>([])//需求单
const [memberRowSelection, memberRowCtl] = useRowSelectionTable({ customKey: 'memberId' })
const [visibleChannelMember, setVisibleChannelMember] = useState(false)
const [categoryId, setcategoryId] = useState(null)//选择的分类id
const [otherList, setotherList] = useState([])//动态tab循环
const [dockingList, setdockingList] = useState([])//需求列表
const [memberList, setmemberList] = useState([])
const [eqList, seteqList] = useState([]) //选择需求单弹窗
const [productSource, setproductSource] = useState([])//商品列表 新增
const [shipperAddressList, setshipperAddressList] = useState([])
const [CategoryTreeOne, setCategoryTreeOne] = useState([])
const [haschangeCategory, sethaschangeCategory] = useState(false)
const [seletCategoryNameList, setseletCategoryNameList] = useState([])
const [provinceList, setProvinceList] = useState([])
const [showCategory, setShowCategory] = useState(null)
const [dialogVisible, setdialogVisible] = useState(false)
const [proviceOptions, setProviceOptions] = useState<GetManageAreaAllResponse>()
const [areaParams, setAreaParams] = useState<any>([])
const [tabData, settabData] = useState<any>({})
const [platType, setplatType] = useState(1) //需求对接类型
const [dialogEqvisble, setdialogEqvisble] = useState(false)
const [selectRow, setSelectRow] = useState([])//需求单弹框用
const [eqRowSelection, eqRowCtl] = useRowSelectionTable({ type:"radio",customKey: 'id' })//选择需求单
const [memberType, setmemberType] = useState(1)
const { ProductStore } = store
const { setAreaOption, productInfoByEdit, getBasicFormParamsByEdit, setAttributeLists, setProductName } = ProductStore
const columnsSetMember: any[] = [
{
title: 'ID',
dataIndex: 'memberId',
align: 'center',
key: 'memberId',
},
{
title: '会员名称',
dataIndex: 'name',
align: 'center',
key: 'name',
},
{
title: '会员类型',
dataIndex: 'memberTypeName',
align: 'center',
key: 'memberTypeName',
},
{
title: '会员角色',
dataIndex: 'roleName',
align: 'center',
key: 'roleName',
},
{
title: '会员等级',
dataIndex: 'levelTag',
align: 'center',
key: 'levelTag',
}
]
const menberList = [
{
memberId: 1,
name: '名称1',
roleName: '角色1',
memberTypeName: '采购商',
levelTag: '青铜'
}
]
const FormSumbit = (values: any) => {
setTimeout(() => {
history.goBack()
}, 1000)
}
const handleLink = () => {
}
/**
* @description: 初始化需求对接表格 需求单
* @param {type}
* @return {type}
*/
const InitMemberList = () => {
let params: any = {}
params.categoryId = categoryId
let codeList = tabForm.getFieldValue('requisitionFormAddress') || []
if (categoryId && otherList.length != 0) {
console.log('codeList', codeList)
params.areaRequestList =
codeList.map((v: any) => {
if (Array.isArray(v)) {
return ({
provinceCode: v[0],
cityCode: v && v.length > 1 ? v[1] : null
})
}
})
let productList = []
productSource.forEach((v) => {
// console.log('v',v)
let item: any = {}
Object.keys(v).forEach(child => {
otherList.forEach((j: any) => {
let otherItem: any = {}
if (child === j.title) {
otherItem['attributeId'] = j.key
otherItem['attributeValue'] = v[child]
productList.push(otherItem)
}
})
})
})
params.attributeList = [...productList]
params.current = 1
params.pageSize = 20
console.log('params', JSON.stringify(params))
PublicApi.postOrderSystemMatchingMemberInitializeList(
params
).then(res => {
if (res.code === 1000) {
let { data } = res.data || {}
setdockingList(data)
}
})
}
}
/**
* @description: 生产商品动态弹窗
* @param {type} seletCategoryId品类id needotherCoumns 需要展示动态列
* @return {type}
*/
const initCreatePro =(seletCategoryId,needotherCoumns:boolean = true) => {
PublicApi.getProductPlatformGetCategoryById({ id: seletCategoryId }).then(res => {
if (res.code === 1000) {
let data = res.data
settabData([data])//转成数组
let da = []
// data.forEach((item: any) => {
if (data.attributeList) {
data.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)
console.log('name', name)
return (
<>{name.length > 0 ? name[0] : text}</>
)
}
})
))
}
// })
if(needotherCoumns){
setotherList([...da])
}
}
})
}
/**
* @description: 选择品类
* @param {type}
* @return {type}
*/
const onCustomerCategoryChange = (value: any, options: any) => {
console.log(3112, value, options)
let seletCategoryId = value[value.length - 1]
setcategoryId(seletCategoryId)
setseletCategoryNameList(options)
if(id){
sethaschangeCategory(true)
}else{
sethaschangeCategory(false)
}
console.log(seletCategoryId, 'seleellele')
initCreatePro(seletCategoryId)
}
/**
* @description: 需求格式
* @param {type}
* @return {type}
*/
const dockingColumn: ColumnType<any>[] = [
{
title: '序号',
dataIndex: 'id',
align: 'center',
key: 'id',
},
{
title: '会员名称',
dataIndex: 'memberName',
key: 'memberName',
align: 'left'
},
{
title: '会员类型',
dataIndex: 'memberTypeName',
key: 'memberTypeName',
align: 'center'
},
{
title: '会员角色',
dataIndex: 'roleName',
key: 'roleName',
align: 'center'
},
{
title: '会员等级',
dataIndex: 'levelTag',
key: 'levelTag',
align: 'center'
},
{
title: '是否归属会员',
dataIndex: 'membershipOrNot',
key: 'membershipOrNot',
align: 'center',
render: (text: any) => (
text == 0 ? '否' : '是'
)
},
{
title: '需求发送状态',
dataIndex: 'state',
key: 'state',
align: 'center',
render:(text:any,records,index) =>
<Switch defaultChecked={text ? true : false} size="small" onChange={(checked) => {
console.log(checked);
dockingList[index].state = checked? 1 : 0
setdockingList([...dockingList])
}} />
}
]
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 formSearch: ISchema = {
type: 'object',
properties: {
name: {
type: 'string',
"x-component": 'Search',
"x-component-props": {
placeholder: '请输入会员名称'
}
}
}
}
const handleCancelAddMember = () => {
setVisibleChannelMember(false)
}
// 会员添加弹窗控制
const handleOkAddMember = () => {
setVisibleChannelMember(false)
memberRowCtl.selectRow.forEach((v) => {
v['state'] = true
})
setmemberList(memberRowCtl.selectRow)
}
//选择需求单
const handleOkAddEq = () => {
setdialogEqvisble(false)
seteqList(eqRowCtl.selectRow)
}
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10
})
//选择需求单操作
const selectBtn = (
<Button style={{ backgroundColor: '#6B778C', borderColor: '#6B778C', color: 'white' }} onClick={() => inquiryRef.current.setVisible(true)}>
<LinkOutlined />选择
</Button>
)
/**
* @description: 操作
* @param {type} 1添加商品 2选择会员
* @return {type}
*/
const handleOptionBtn = (type: any) => {
switch (type) {
case 1:
setdialogVisible(true)
break;
case 2:
setVisibleChannelMember(true)
break;
}
}
useEffect(() => {
let shopList = GlobalConfig.web.shopInfo.filter(v => v.type == 1).map(
v => v
)
setgoodAllIds(shopList)
// setmenberList2(menberList)
PublicApi.getManageAreaByPcodeAll({ pcode: '100000' }).then(res => {
let list = []
res.data.forEach((item: any, index: number) => {
list.push({ label: item.name, value: item.code })
})
setProvinceList(list)
})
PublicApi.getProductPlatformGetCategoryTree({ rootNodeId: null }).then(res => {
if (res.code === 1000) {
let { data } = res
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}
* @return {type}
*/
PublicApi.getManageAreaAll().then(res => {
if (res.code === 1000) {
let arr = [...res.data] //裁去最后一级别
for (let index in arr) {
for (let _index in arr[index].areaResponses) {
let o = arr[index].areaResponses
//@ts-ignore
o[_index].areaResponses = null
}
}
setProviceOptions(arr)
setAreaOption(arr)
}
})
/**
* @description: 获取详情
* @param {type}
* @return {type}
*/
if (id) {
PublicApi.getOrderRequisitionFormDetails({ id: id }).then(res => {
if (res.code === 1000) {
let data = res.data
let areaCodeList = []
let _plattype = data.type ;
setplatType(data.type)
setgoodIds(data.shopIds)
setsumitGoods(data.shopIds)
setdataInfo(data)//总
setAreaParams(data.requisitionFormAddress)
if (data.requisitionFormAddress) {
data.requisitionFormAddress.forEach((v) => {
areaCodeList.push([v.provinceCode, v.cityCode])
})
}
//品类
if (data.productCategory) {
setcustomerCategoryId([data.productCategory.key])
initCreatePro(data.productCategory.key,false)//生产弹窗
}
//地区
setrequisitionFormAddress(areaCodeList)
setinitialValues(data)
tabForm.resetFields()
console.log('platType',platType)
//需求单对接列表
PublicApi.getOrderRequisitionFormDemandDockingList({ id: id }).then(res => {
if (res.code === 1000) {
let { data } = res.data
if(_plattype == 2){//系统匹配
setdockingList(data)
}else if(_plattype == 3){//会员
setmemberList(data)
}
}
})
}
})
//商品列表
PublicApi.getOrderRequisitionFormProductAll({ id: id }).then(res => {
if (res.code === 1000) {
let { data } = res
//商品
let source = []
let otherColumnkey = []//动态列的展示
data.forEach((v)=> {
let obj:any = {}
obj.model = v.model
obj.id = v.id
obj.brand = v.brand
obj.purchaseNuit = v.purchaseNuit
obj.purchaseQuantity = v.purchaseQuantity
if(v.productAttributeJson){
JSON.parse(v.productAttributeJson).forEach(child => {
Object.keys(child).forEach(key => {
//获取列头
otherColumnkey.push({
title: key,
dataIndex: key,
key: key,
align:'center'
})
// console.log('key',key,child,child[key])
obj[key] = child[key]
})
});
}
source.push(obj)
})
console.log([...source])
setotherList([...otherColumnkey])//生成列
setproductSource([...source])
}
})
}
}, [])
const formTime = (text) => {
return <>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</>
}
/**
* @description: 外部流转记录
* @param {type}
* @return {type}
*/
const externalTextState = (text) => {
let name = ''
dataInfo.externalRequisitionFormStateResponses.forEach(element => {
if (element.state === text) {
name = element.operationalProcess
}
})
return <>{name}</>
}
/**
* @description: 内部流转记录
* @param {type}
* @return {type}
*/
const interiorTextState = (text) => {
let name = ''
dataInfo.interiorRequisitionFormStateResponses.forEach(element => {
if (element.state === text) {
name = element.operationalProcess
}
})
return <>{name}</>
}
/**
* @description: 交易类型
* @param {type}
* @return {type}
*/
const handlePlatTypeChange = (e: any) => {
setplatType(e.target.value)
}
/**
* @description: 选择地区
* @param {type}
* @return {type}
*/
const onCommodityAreaChange = (value: any, selected: any, index) => {
let list = []
if (selected.length === 2) {
let item: any = {}
item.province = selected[0].name
item.provinceCode = selected[0].code
item.city = selected[1].name
item.key = index
item.cityCode = selected[1].code
if (areaParams.length == 0) {
list.push(item)
} else {
areaParams.forEach((v, childIndex) => {
console.log('v', v)
if (v.key == index) {
areaParams.splice(childIndex, 1, item)
} else {
list.push(item)
}
});
}
}
setAreaParams([...areaParams, ...list])
console.log('list', [...areaParams, ...list], 'area')
}
const changePlatform = (e: any) => {
console.log('e',e.target.value)
setplatType(e.target.value)
if (e.target.value == 2) {
//调用需求单
InitMemberList()
}
}
const handleMemberTypeChange = (e: any) => {
setmemberType(e.target.value)
}
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => {
setSelectRow(selectedRows);
setSelectedRowKeys(selectedRowKeys);
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
}
}
/**
* @description: TabForm提交 保存
* @param {type}
* @return {type}
*/
const handleSubmitTabForm = () => {
tabForm.validateFields().then(values => {
// console.log('valiue', values)
if(id){
if(!haschangeCategory){
//不做处理
}else{
if (values.customerCategoryId && values.customerCategoryId.length > 0) {
values['productCategory'] = {}
values.productCategory.id = values.customerCategoryId[0]
values.productCategory.key = values.customerCategoryId[0]
let NameList = seletCategoryNameList.map((v) => {
return v.title
})
values.productCategory.name = NameList.join('-')
delete values.customerCategoryId
}
}
}else{
if (values.customerCategoryId && values.customerCategoryId.length > 0) {
values['productCategory'] = {}
values.productCategory.id = values.customerCategoryId[0]
values.productCategory.key = values.customerCategoryId[0]
let NameList = seletCategoryNameList.map((v) => {
return v.title
})
values.productCategory.name = NameList.join('-')
delete values.customerCategoryId
}
}
if (values.deliveryTime) {
values.deliveryTime = moment(values.deliveryTime).format("x")
}
if (values.quotationAsTime) {
values.quotationAsTime = moment(values.quotationAsTime).format("x")
}
values['shopIds'] = goodIds
let productList = []
productSource.forEach((v) => {
let item: any = {}
item.brand = v.brand
item.model = v.model
item.purchaseNuit = v.purchaseNuit
item.purchaseQuantity = v.purchaseQuantity
let _otherList = []
Object.keys(v).forEach(child => {
otherList.forEach(j => {
let otherItem: any = {}
if (child === j.title) {
otherItem[child] = v[child]
_otherList.push(otherItem)
}
})
})
item.productAttributeJson = JSON.stringify([..._otherList])
productList.push(item)
console.log('item', item)
})
// values['voucherTime'] = null
values['memberIds'] = []// memberRowCtl.selectedRowKeys
if (platType == 3) {
values['memberIds'] = memberList.filter((v) => v.state == true).map(v => {
return v.memberId
})
} else if (platType == 2) {
values['memberIds'] = dockingList.filter((v) => v.state === 1).map(v => {
return v.memberId
})
}
values['demandDockings'] = []
values['requisitionFormProducts'] = [...productList]
console.log('productList', productList)
values['type'] = platType
console.log((JSON.stringify(values)))
let bb = tabForm.getFieldValue('requisitionFormAddress')
let objList = []
let arr = Array.from(new Set(areaParams))
bb.forEach(v => {
arr.forEach((item: any) => {
let obj: any = {}
if (v[0] === item.provinceCode && v[1] === item.cityCode) {
obj.provinceCode = item.provinceCode
obj.cityCode = item.cityCode
obj.province = item.province
obj.city = item.city
objList.push(obj)
} else if (v[0] === item.provinceCode) {
obj.provinceCode = item.provinceCode
obj.province = item.province
objList.push(obj)
}
});
})
let requisitionFormAddress = Array.from(new Set(objList)) || []
//省市
if (values.requisitionFormAddress.length > 0) {
values.requisitionFormAddress = [...requisitionFormAddress]
values['defaultAddres'] = 0
} else {
values['defaultAddres'] = 1
}
if (id) {//修改
values['id'] = id
console.log('编辑',values)
return
PublicApi.postOrderRequisitionFormUpdate(values).then(res => {
if (res.code === 1000) {
setTimeout(() => {
history.goBack()
}, 1000)
}
})
} else {
PublicApi.postOrderRequisitionFormAdd(values).then(res => {
if (res.code === 1000) {
setTimeout(() => {
history.goBack()
}, 1000)
}
})
}
})
}
/**
* @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);
}
const isChecked = (id) => {
return goodIds.includes(id)
}
const handleChange = (id) => {
// 如果处于不可编辑状态, 则无法选择(已发布)
if (sumitGoods.includes(id)) {
return false
}
if (goodIds.includes(id)) {
const newValue = findItemAndDelete(goodIds, id)
console.log('new', newValue)
setgoodIds([...newValue])
} else {
setgoodIds([...goodIds, id])
}
}
/**
* @description: 会员列表
* @param {type}
* @return {type}
*/
const switchState = (text, record, index) => {
console.log(66, text, record, index)
return <Switch defaultChecked={text ? true : false} size="small" onChange={(checked) => {
console.log(checked);
memberList[index].state = checked
setmemberList([...memberList])
}} />
}
const confirmModal = (values) => {
console.log(values)
let {id,requisitionFormNo,voucherTime} = values
setrequisitionFormId(id)//需求id
tabForm.setFieldsValue({
requisitionFormNo: requisitionFormNo
})
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={headerTitle}
extra={
<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}
initialValues={{
customerCategoryId: customerCategoryId,
requisitionFormAddress: requisitionFormAddress
}}
>
<Tabs defaultActiveKey='1'>
<TabPane tab="基本信息" key='1'>
<Row>
<Col span={12}>
{/* <Form name="base-form"
{...layout}
colon={false}
labelAlign="left"
autoComplete="off"
> */}
<Form.Item
label="报价单摘要"
initialValue={initialValues.details}
rules={[
{
required: true
}
]}
name="details"
>
<Input placeholder="请输入报价单摘要" maxLength={30} />
</Form.Item>
<Form.Item
label='对应需求单号'
name='requisitionFormNo'
rules={[
{
required: true
}
]}
>
<Input className="input_addonAfter" disabled addonAfter={selectBtn} />
</Form.Item>
{
id &&
<Form.Item
label='报价单号'
>
<>
{
initialValues.requisitionFormNo
}
</>
</Form.Item>
}
<Form.Item
// name='memberName'
label='需求会员'
>
<>{getAuth().name || '未知用户'}</>
</Form.Item>
<Form.Item
label='报价截至时间'
>
<div>
{
initialValues.quotationDeadline ? moment(initialValues.quotationDeadline).format("YYYY-MM-DD HH:mm:ss") : ''
}
</div>
</Form.Item>
<Form.Item
label='单据时间'
>
<div>
{
initialValues.voucherTime ? moment(initialValues.voucherTime).format("YYYY-MM-DD HH:mm:ss") : ''
}
</div>
</Form.Item>
<Form.Item
label='外部状态'
>
{
initialValues.externalState == 1 ? <span style={statuStyle.default}>待提交需求单</span> :
initialValues.externalState == 2 ? <span style={statuStyle.warn}>审核不通过需求单</span> : ''
}
</Form.Item>
{
id &&
<Form.Item
label='内部状态'
>
<>
{interiorState(initialValues.interiorState)}
</>
</Form.Item>
}
{/* </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={productSource} columns={equiryColumns} pagination={pagination} />
</TabPane>
<TabPane tab="交易条件" key='3'>
<Row>
<Col span={11}>
<Form.Item
initialValue={initialValues.deliveryTime ? moment(initialValues.deliveryTime) : ''}
label="交付日期"
rules={[
{
required: true,
type: 'object'
}
]}
name="deliveryTime"
>
<DatePicker style={{ width: '100%' }} />
</Form.Item>
<Form.Item
initialValue={initialValues.addresId}
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="报价截止时间"
initialValue={initialValues.quotationAsTime ? moment(initialValues.quotationAsTime) : ''}
rules={[
{
required: true,
type: 'object'
}
]}
name="quotationAsTime"
>
<DatePicker showTime format="YYYY-MM-DD HH:mm" style={{ width: '100%' }} />
</Form.Item>
<Form.Item
initialValue={initialValues.offer}
label="报价要求"
name="offer"
>
<TextArea placeholder="最长100个字符，50个汉字" maxLength={50} />
</Form.Item>
<Form.Item
initialValue={initialValues.paymentType}
label="付款方式"
name="paymentType"
>
<TextArea placeholder="最长100个字符，50个汉字" maxLength={50} />
</Form.Item>
<Form.Item
initialValue={initialValues.taxes}
label="税费要求"
name="taxes"
>
<TextArea placeholder="最长100个字符，50个汉字" maxLength={50} />
</Form.Item>
</Col>
<Col span={11} push={2}>
<Form.Item
initialValue={initialValues.logistics}
label="物流要求"
name="logistics"
>
<TextArea placeholder="最长100个字符，50个汉字" maxLength={50} />
</Form.Item>
<Form.Item
initialValue={initialValues.packRequire}
label="包装要求"
name="packRequire"
>
<TextArea placeholder="最长100个字符，50个汉字" maxLength={50} />
</Form.Item>
<Form.Item
initialValue={initialValues.otherRequire}
label="其他要求"
name="otherRequire"
>
<TextArea placeholder="最长100个字符，50个汉字" maxLength={50} />
</Form.Item>
</Col>
</Row>
</TabPane>
<TabPane tab="需求对接" key='4'>
<PlatType platType={platType} changePlatform={changePlatform}/>
{
platType == 1 &&
<RowStyleLayout>
<Row className='card-checkbox'>
{
goodAllIds.map((v, i) => {
return (
<Col key={v.id} className={cx('card-checkbox-item', isChecked(v.id) ? 'active' : '')} onClick={() => handleChange(v.id)}>
{v.logoUrl ? <img className='card-logo' src={v.logoUrl} /> : <div className='card-logo default'>logo</div>}
<span className='card-checkbox-title'>{v.name}</span>
</Col>
)
})
}
</Row>
</RowStyleLayout>
}
{
platType == 3 &&
<>
<Button style={{ marginBottom: 16, marginTop: 24 }} block icon={<PlusOutlined />} onClick={() => handleOptionBtn(2)} type='dashed'>选择会员</Button>
<Table rowKey={"id"} dataSource={memberList} columns={memberColumn(switchState)} pagination={pagination} />
</>
}
{
(platType != 1 && platType != 3) &&
<Table rowKey={"id"} dataSource={dockingList} columns={dockingColumn} 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> */}
<Tabs type="card" size="small" defaultActiveKey='1'>
<TabPane tab='外部单据' key="1">
<Table rowKey={'id'} dataSource={dataInfo.externalRequisitionForms || []} columns={externalColumn(formTime, externalTextState)} />
</TabPane>
<TabPane tab='内部单据' key="2">
<Table rowKey={'id'} dataSource={dataInfo.interiorRequisitionForms || []} columns={interiorColumn(formTime, interiorTextState)} />
</TabPane>
</Tabs>
</TabPane>
</Tabs>
</Form>
</Col>
</Row>
<RroductModal
sourceData={tabData}
dialogVisible={dialogVisible}
mode={0}
onOK={(values: any) => handleSubmit(values)}
onCancel={() => setdialogVisible(false)}
>
</RroductModal>
<InquiryModalTable confirmModal={(val) => confirmModal(val)} currentRef={inquiryRef} schemaAction={addSchemaAction}/>
{/* <ModalTable
modalTitle='选择需求单'
confirm={handleOkAddEq}
cancel={() => setdialogEqvisble(false)}
visible={dialogEqvisble}
columns={dialogEqcolumns}
rowSelection={eqRowSelection}
fetchTableData={params => fetchEqData(params)}
formilyProps={
{
ctx: { schema: dialogEqformSearch }
}
}
tableProps={{
rowKey: 'id'
}}
/> */}
<ModalTable
modalTitle='选择会员'
confirm={handleOkAddMember}
cancel={handleCancelAddMember}
visible={visibleChannelMember}
columns={columnsSetMember}
rowSelection={memberRowSelection}
fetchTableData={params => fetchMemberList(params)}
formilyProps={
{
ctx: { schema: formSearch }
}
}
tableProps={{
rowKey: 'memberId'
}}
/>
</Card>
</PageHeaderWrapper>
)
}
export default Detail
src/pages/transaction/enquiryOffer/toAddSubmit/index.tsx 0 → 100644
View file @ 566b7ab5
/*
* @Author: LeeJiancong
* @Date: 2020-08-24 11:39:11
* @LastEditors: LeeJiancong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-09-11 16:59:50
*/
import React, { ReactNode, useRef, useState,useEffect } from 'react';
import { history } from 'umi';
import {
Button,
Card,
Space,
Row,
Col,
Dropdown,
Menu,
Popconfirm
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
PlusOutlined,DownOutlined,DeleteOutlined
} from '@ant-design/icons';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import {
IFormFilter,
IButtonFilter,
} from 'god/dist/src/standard-table/TableController';
import EyePreview from '@/components/EyePreview';
import StatusSwitch from '@/components/StatusSwitch';
import {interiorState} from '../../common/tableStatusList'
import statuStyle from '../../common/colorTag'
import NiceForm from '@/components/NiceForm';
import {timeRange} from '@/utils/index'
import moment from 'moment'
import { createFormActions, FormEffectHooks } from '@formily/antd';
import {PageStatus} from '@/hooks/usePageStatus'
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { commonEnquieryOfferSchema } from '../schema';
import { PublicApi } from '@/services/api';
import { values, action } from 'mobx';
const formActions = createFormActions();
const fetchData = async (params: any) => {
const res = await PublicApi.getOrderQuotationInvoiceList(params);
return res.data
}
const List:React.FC<{}> = () => {
const ref = useRef<any>({})
const [more, setmore] = useState(false)
const [selectRow, setSelectRow] = useState([])
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<number>>([])
const format = (text) => {
return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
}
const columns : ColumnType<any>[] = [
{
title:'报价单号',
key:'quotationNo',
dataIndex:'quotationNo',
align:'center'
},
{
title:'需求单号',
key:'requisitionFormNo',
dataIndex:'requisitionFormNo',
align:'center'
},
{
title:'报价摘要',
key:'quotationSummary',
dataIndex:'quotationSummary',
align:'left'
},
{
title:'需求会员',
key:'demandMembers',
dataIndex:'demandMembers',
align:'left'
},
{
title:'报价截至时间',
key:'quotationAsTime',
dataIndex:'quotationAsTime',
align:'left',
render:(text:any)=> format(text)
},
{
title:'单据日期',
key:'documentsTime',
dataIndex:'documentsTime',
align:'center',
render:(text:any)=> format(text)
},
{
title:'外部状态',
key:'externalState',
dataIndex:'externalState',
align:'center',
render: (text: any, reconds) => {
let component: ReactNode = null
if (text == 3) {
component = <><span style={statuStyle.warn}>审核不通过需求单</span></>
}else if (text == 1) {
component = <><span style={statuStyle.default}>待提交需求单</span></>
}
return component
}
},
{
title:'内部状态',
key:'interiorState',
dataIndex:'interiorState',
align:'center',
render:(text:any) => interiorState(text)
},
{
title:'操作',
key:'options',
dataIndex:'options',
align:'center',
render: (_: any, record: any) => {
return (
<>
{
(record.interiorState !== 3 &&
<Button type="link" onClick={() => toEdit(record.id)}>编辑</Button>
)
}
{
(record.externalState === 1 && record.interiorState === 1) &&
<>
<Popconfirm title="确定要删除吗？" okText="是" cancelText="否" onConfirm={() => handleDelete([record.id])}>
<Button type='link'>
删除
</Button>
</Popconfirm>
<Popconfirm title="确定要提交吗？" okText="是" cancelText="否" onConfirm={() => handleSubmit(record.id)}>
<Button type='link'>提交</Button>
</Popconfirm>
</>
}
</>
)
}
},
]
useEffect(()=> {
},[])
const toEdit = (id:number | string) => {
history.push(`/memberCenter/tranactionAbility/enquirySubmit/addEnquiry?id=${id}`)
}
/**
* @description: 删除
* @param {type}
* @return {type}
*/
const handleDelete = (arr:number[]| string[]) => {
PublicApi.postOrderQuotationDelete({ ids: arr }).then(res => {
ref.current.reload()
})
}
//批量提交
const handleSubmitAll = (ids: number[]) => {
PublicApi.postOrderQuotationSubmitAuditAll({ ids: ids }).then(res => {
ref.current.reload()
})
}
//提交审核
const handleSubmit = (id) => {
PublicApi.postOrderQuotationSubmitAudit({ id: id }).then(res => {
ref.current.reload()
})
}
const handleSumbit = (values:any) => {
if(values.voucherTime){
values.startVoucherTime = timeRange(values.voucherTime).st
values.endVoucherTime = timeRange(values.voucherTime).et
delete values.voucherTime
}
console.log('values',values)
ref.current.reload(values)
}
const menu = (
<Menu onClick={() => handleDelete(selectedRowKeys)}>
<Menu.Item key='1' icon={<DeleteOutlined/>}>
批量删除
</Menu.Item>
</Menu>
)
const handleBatchDel = (e:any) => {
}
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => {
setSelectRow(selectedRows);
setSelectedRowKeys(selectedRowKeys);
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
},
}
const controllerBtns = <Row>
<Col span={24}>
<Space direction="horizontal" size={16}>
<Button type="primary" onClick={() => history.push('/memberCenter/tranactionAbility/enquiryOffer/addEnquiry')} icon={<PlusOutlined/>}>新建</Button>
<Button onClick={() => handleSubmitAll(selectedRowKeys)}>批量提交审核</Button>
<Dropdown.Button
overlay={menu}
trigger={['click']}
icon={<DownOutlined />}
>
更多
</Dropdown.Button>
</Space>
</Col>
</Row>
return (
<PageHeaderWrapper>
<Card>
<StandardTable
currentRef={ref}
columns={columns}
tableProps={{rowKew:'id'}}
fetchTableData={(params: any) => fetchData(params)}
rowSelection={rowSelection}
controlRender={
<NiceForm
actions={formActions}
onSubmit={values => handleSumbit(values)}
effects={($,actions) => {
useStateFilterSearchLinkageEffect($,actions,'quotationNo',FORM_FILTER_PATH)
}}
expressionScope={{
controllerBtns
}}
schema={commonEnquieryOfferSchema}
>
</NiceForm>
}
/>
</Card>
</PageHeaderWrapper>
)
}
export default List
\ No newline at end of file
src/pages/transaction/enquirySubmit/components/productModal.tsx
View file @ 566b7ab5
......@@ -3,7 +3,7 @@
* @Date: 2020-08-28 10:07:45
* @LastEditors: LeeJiancong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-09-09 16:39:14
* @LastEditTime: 2020-09-11 16:51:28
*/
import React, { Component, useState, useEffect } from 'react';
import { Modal, Button, Form, Radio, AutoComplete,Tabs, Input, Select,Checkbox } from 'antd'
......@@ -24,11 +24,12 @@ export interface Params {
dontReceive?: boolean; //默认展示
}
const layout = {
layout: 'vertical',
labelCol: {
span: 4
},
wrapperCol: {
span: 20
span: 24
}
}
......
src/pages/transaction/enquirySubmit/toAddSubmit/detail.tsx
View file @ 566b7ab5
......@@ -3,7 +3,7 @@
* @Date: 2020-08-24 11:39:29
* @LastEditors: LeeJiancong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-09-10 11:12:01
* @LastEditTime: 2020-09-11 11:43:16
*/
import React, { Component, useState, useEffect } from 'react'
import ReactDOM from 'react-dom'
......@@ -1047,7 +1047,7 @@ const Detail: React.FC<{}> = () => {
autoComplete="off"
> */}
<Form.Item
label="报价单摘要"
label="需求单摘要"
initialValue={initialValues.details}
rules={[
{
......@@ -1056,7 +1056,7 @@ const Detail: React.FC<{}> = () => {
]}
name="details"
>
<Input placeholder="请输入报价单摘要" maxLength={30} />
<Input placeholder="请输入需求单摘要" maxLength={30} />
</Form.Item>
<Form.Item
// initialValue={
......
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