Skip to content

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

修改需求发布新增列表

parent 822b6219
Hide whitespace changes
Inline Side-by-side
Showing with 82 additions and 1566 deletions
config/routes/tranactionRoute/demandPosts.ts
View file @ 49bd3c0f
......@@ -23,16 +23,9 @@ export default [
},
// 待新建需求单 - 列表
{
path: '/memberCenter/tranactionAbility/enquirySubmit/toAddSubmitList',
path: '/memberCenter/tranactionAbility/enquirySubmit/addDemandOrder',
name: 'toAddSubmitList',
component: '@/pages/transaction/enquirySubmit/toAddSubmit'
},
// 待新增需求单-新增
{
path: '/memberCenter/tranactionAbility/enquirySubmit/toAddSubmitList/add',
name: 'addEnquiry',
component: '@/pages/transaction/enquirySubmit/toAddSubmit/detail',
hideInMenu: true,
component: '@/pages/transaction/enquirySubmit/addDemandOrder'
},
// 待新增需求单-新增
{
......@@ -48,13 +41,6 @@ export default [
component: '@/pages/transaction/enquirySubmit/addDemandOrder/addForm',
hideInMenu: true,
},
// 待新增需求单-编辑
{
path: '/memberCenter/tranactionAbility/enquirySubmit/toAddSubmitList/edit',
name: 'editEnquiry',
component: '@/pages/transaction/enquirySubmit/toAddSubmit/detail',
hideInMenu: true,
},
// 待新建需求单 - 查看需求单号
{
path: '/memberCenter/tranactionAbility/enquirySubmit/toAddSubmitList/preview',
......
src/pages/transaction/enquirySubmit/addDemandOrder/components/addGoods.tsx
View file @ 49bd3c0f
......@@ -15,11 +15,10 @@ const layout: any = {
};
export interface faceSetData {
set?: any,
get?: Function,
currentRef: any
}
const AddGoods: React.FC<faceSetData> = (props) => {
const { set, get, currentRef } = props
const { set, currentRef } = props
const [form] = Form.useForm();
const [type, setType] = useState<number>(0);
const btnname: Array<string> = ['添加商品', '选择货品', '导入货品']
......@@ -105,7 +104,6 @@ const AddGoods: React.FC<faceSetData> = (props) => {
settabledata([...newdata]);
setidx(-1);
}
get([...tabledata, data])
handleModal(type);
}
/** 编辑商品 */
......
src/pages/transaction/enquirySubmit/toAddSubmit/index.tsx → src/pages/transaction/enquirySubmit/addDemandOrder/index.tsx
View file @ 49bd3c0f
/*
* @Author: LeeJiancong
* @Date: 2020-08-24 11:39:11
* @LastEditors: LeeJiancong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-09-02 14:40:39
*/
import React, { ReactNode, useRef, useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { history } from 'umi';
import {
Button,
Card,
Space,
Row,
Col,
Dropdown,
Menu,
Popconfirm,
message
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
PlusOutlined, DownOutlined, DeleteOutlined
} from '@ant-design/icons';
import { Card, Row, Col, Space, Button, Dropdown, Menu, message, Popconfirm } from 'antd';
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 { demandQuoteExternalState, demandQuoteInteriorState } from '../../common/tableStatusList'
import statuStyle from '../../common/colorTag'
import moment from 'moment';
import { PublicApi } from '@/services/api';
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 { createFormActions } from '@formily/antd';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { enquierySchema } from '../schema';
import { PublicApi } from '@/services/api';
import { values, action } from 'mobx';
import GeneralExternalState from '@/pages/transaction/common/externalState';
import GeneralInteriorState from '@/pages/transaction/common/interiorState';
import { enquierySchema } from '../schema';
import { timeRange } from '@/utils/index'
import { DeleteOutlined, DownOutlined, PlusOutlined } from '@ant-design/icons';
const formActions = createFormActions();
const fetchData = async (params: any) => {
const res = await PublicApi.getOrderRequisitionFormAwaitList(params);
return res.data
}
const List: React.FC<{}> = () => {
const ref = useRef<any>({})
const [more, setmore] = useState(false)
const AddDemandOrder = () => {
const ref = useRef<any>({});
const [selectRow, setSelectRow] = useState([])
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<number>>([])
const format = (text) => {
return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
}
const handleToDetail = (id) => {
// history.push(`/memberCenter/tranactionAbility/enquirySubmit/viewEnquiryDetail?page_type=${4}&id=${id}`)
history.push(`/memberCenter/tranactionAbility/enquirySubmit/toAddSubmitList/preview?id=${id}`)
}
const columns: ColumnType<any>[] = [
{
title: '需求单号',
key: 'requisitionFormNo',
dataIndex: 'requisitionFormNo',
align: 'center',
render: (text: any, records: any) => <EyePreview type="button" handleClick={() => {
handleToDetail(records.id)
}}>{text}</EyePreview>
dataIndex: 'requisitionFormNo'
},
{
title: '需求摘要',
key: 'details',
dataIndex: 'details',
align: 'left'
},
{
title: '品类',
key: 'category',
dataIndex: 'category',
align: 'left'
dataIndex: 'details'
},
{
title: '交付日期',
key: 'deliveryTime',
dataIndex: 'deliveryTime',
align: 'center',
render: (text: any) => format(text)
},
{
title: '报价截至时间',
title: '报价截止时间',
key: 'quotationAsTime',
dataIndex: 'quotationAsTime',
align: 'center',
render: (text: any) => format(text)
},
{
title: '单据时间',
key: 'voucherTime',
dataIndex: 'voucherTime',
align: 'center',
render: (text: any) => format(text)
},
{
......@@ -121,14 +70,12 @@ const List: React.FC<{}> = () => {
title: '操作',
key: 'options',
dataIndex: 'options',
align: 'center',
render: (_: any, record: any) => {
return (
<>
{
(record.interiorState !== 3 &&
<Button type="link" onClick={() => toEdit(record.id)}>编辑</Button>
<Button type="link" onClick={() => history.push(`/memberCenter/tranactionAbility/enquirySubmit/addDemandOrder/edit?id=${record.id}`)}>编辑</Button>
)
}
{
......@@ -139,79 +86,19 @@ const List: React.FC<{}> = () => {
删除
</Button>
</Popconfirm>
<Popconfirm title="确定要提交吗？" okText="是" cancelText="否" onConfirm={() => handleSubmit(record.id)}>
<Popconfirm title="确定要提交吗？" okText="是" cancelText="否" onConfirm={() => PublicApi.postOrderNewRequisitionFormAudit({ id: record.id }).then(res => {
ref.current.reload()
})}>
<Button type='link'>提交</Button>
</Popconfirm>
</>
}
</>
)
}
},
]
useEffect(() => {
}, [])
const toEdit = (id: number | string) => {
history.push(`/memberCenter/tranactionAbility/enquirySubmit/addDemandOrder/edit?id=${id}`)
}
/**
* @description: 删除
* @param {type}
* @return {type}
*/
const handleDelete = (arr: number[]) => {
if (arr.length > 0) {
PublicApi.postOrderRequisitionFormDeleteAll({ ids: arr }).then(res => {
ref.current.reload()
})
} else {
message.error('请选择要操作的需求单');
}
}
//批量提交
const handleSubmitAll = (ids: number[]) => {
if (ids.length > 0) {
PublicApi.postOrderNewRequisitionFormAuditAll({ ids: ids }).then(res => {
ref.current.reload()
})
} else {
message.error('请选择要操作的需求单');
}
}
//提交审核
const handleSubmit = (id) => {
PublicApi.postOrderNewRequisitionFormAudit({ 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) => {
......@@ -220,21 +107,11 @@ const List: React.FC<{}> = () => {
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/enquirySubmit/addDemandOrder/add')} icon={<PlusOutlined />}>新建</Button>
<Button onClick={() => handleSubmitAll(selectedRowKeys)}>批量提交审核</Button>
<Dropdown.Button
overlay={menu}
trigger={['click']}
icon={<DownOutlined />}
>
更多
</Dropdown.Button>
</Space>
</Col>
</Row>
const fetchData = async (params: any) => {
const res = await PublicApi.getOrderRequisitionFormAwaitList(params);
return res.data
}
const [externalState, setExternalState] = useState<any>([]);
const [interiorState, setInteriorState] = useState<any>([]);
......@@ -261,6 +138,59 @@ const List: React.FC<{}> = () => {
})
}, [])
const menu = (
<Menu onClick={() => handleDelete(selectedRowKeys)}>
<Menu.Item key='1' icon={<DeleteOutlined />}>
批量删除
</Menu.Item>
</Menu>
)
const controllerBtns = <Row>
<Col span={24}>
<Space direction="horizontal" size={16}>
<Button type="primary" onClick={() => history.push('/memberCenter/tranactionAbility/enquirySubmit/addDemandOrder/add')} icon={<PlusOutlined />}>新建</Button>
<Button onClick={() => handleSubmitAll(selectedRowKeys)}>批量提交审核</Button>
<Dropdown.Button
overlay={menu}
trigger={['click']}
icon={<DownOutlined />}
>
更多
</Dropdown.Button>
</Space>
</Col>
</Row>
const handleSubmitAll = (ids) => {
if (ids.length > 0) {
PublicApi.postOrderNewRequisitionFormAuditAll({ ids: ids }).then(res => {
ref.current.reload()
})
} else {
message.error('请选择要操作的需求单');
}
}
const handleDelete = (arr: number[]) => {
if (arr.length > 0) {
PublicApi.postOrderRequisitionFormDeleteAll({ ids: arr }).then(res => {
ref.current.reload()
})
} else {
message.error('请选择要操作的需求单');
}
}
const handleSumbit = (values: any) => {
if (values.voucherTime) {
values.startVoucherTime = timeRange(values.voucherTime).st
values.endVoucherTime = timeRange(values.voucherTime).et
delete values.voucherTime
}
ref.current.reload(values)
}
return (
<PageHeaderWrapper>
<Card>
......@@ -282,13 +212,11 @@ const List: React.FC<{}> = () => {
}}
schema={enquierySchema}
>
</NiceForm>
}
/>
</Card>
</PageHeaderWrapper>
)
);
}
export default List
\ No newline at end of file
export default AddDemandOrder;
\ No newline at end of file
src/pages/transaction/enquirySubmit/toAddSubmit/detail.tsx deleted 100644 → 0
View file @ 822b6219
/*
* @Author: LeeJiancong
* @Date: 2020-08-24 11:39:29
* @LastEditors: LeeJiancong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-09-24 17:53:19
*/
import React, { Component, useState, useEffect } 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, message
} 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 RroductModal from '../components/productModal'
import { PATTERN_MAPS } from '@/constants/regExp'
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable'
import { PageStatus, usePageStatus } from '@/hooks/usePageStatus'
import { externalColumn, interiorColumn } from '../../common/detailFormColumnType'
import statuStyle from '../../common/colorTag'
import { interiorState } from '../../common/tableStatusList'
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'
import EyePreview from '@/components/EyePreview';
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: 12px;
color: #606266;
}
`
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.getMemberManageUpperProviderPage(params)
return res.data
}
const init = {
deliveryTime: ''
}
//用来模拟 系统匹配
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 [initialValues, setinitialValues] = useState<any>({
details: '',
addresId: null,
packRequire: '',
taxes: '',
logistics: '',
offer: '',
paymentType: '',
otherRequire: '',
quotationAsTime: '',
deliveryTime: '',
voucherTime: '',
requisitionFormAddress: []//地市
})
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 [customerCategory, setcustomerCategory] = useState<any>({})
const [selectRow, setSelectRow] = useState([])//需求单用
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 [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 [addres, setaddres] = useState<any>({});
const [memberType, setmemberType] = useState(1);
const [check, setCheck] = useState<any>({}); // 添加商品查看详情
const [view, setView ] = useState<boolean>(false);// 添加商品查看详情
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) {
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) => {
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].join(',');
productList.push(otherItem)
}
})
})
})
params.attributeList = [...productList]
params.current = 1
params.pageSize = 20
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
console.log(data, 10086)
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)
return (
<>{name.length > 0 ? name[0] : text}</>
)
}
})
))
}
// })
if (needotherCoumns) {
setotherList([...da])
}
}
})
}
/**
* @description: 选择品类
* @param {type}
* @return {type}
*/
const onCustomerCategoryChange = (value: any, options: any) => {
console.log(value, options)
let seletCategoryId = value[value.length - 1]
setcategoryId(seletCategoryId)
setseletCategoryNameList(options)
if (id) {
sethaschangeCategory(true)
} else {
sethaschangeCategory(false)
}
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) => {
dockingList[index].state = checked ? 1 : 0
setdockingList([...dockingList])
}} />
}
]
// 添加商品查看详情
const handleCheck = (value: any) => {
console.log(value)
setCheck(value)
setView(true)
setdialogVisible(true);
}
const equiryColumns: ColumnType<any>[] = [
{
title: '商品规格型号',
dataIndex: 'model',
key: 'model',
align: 'left',
render:(text:any, record:any) => <EyePreview type='button' handleClick={() => handleCheck(record)}>{text}</EyePreview>
},
{
title: '品牌',
dataIndex: 'brand',
key: 'brand',
align: 'center'
},
...otherList,
{
title: '单位',
dataIndex: 'purchaseNuit',
key: 'purchaseNuit',
align: 'center'
},
{
title: '采购数量',
dataIndex: 'purchaseQuantity',
key: 'purchaseQuantity',
align: 'center'
},
{
title: '操作',
dataIndex: 'option',
key: 'option',
align: 'center',
render: (text: any, records: any, index: number) => {
return (
<Button type='link' onClick={() => handleDelete(records, index)}>删除</Button>
)
}
}
]
const handleDelete = (value: any, index: number) => {
const data = [...productSource];
data.splice(index, 1)
setproductSource(data);
}
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 [pagination, setPagination] = useState({
current: 1,
pageSize: 10
})
const selectBtn = (
<Button style={{ backgroundColor: '#909399', borderColor: '#909399', color: 'white' }} onClick={handleLink}>
<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.getLogisticsSelectListReceiverAddress().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)//总
setcustomerCategory(data.productCategory)
setAreaParams(data.requisitionFormAddress)
if (data.requisitionFormAddress) {
data.requisitionFormAddress.forEach((v) => {
areaCodeList.push([v.provinceCode, v.cityCode])
})
}
//品类
if (data.productCategory) {
const idx = data.productCategory.ids.length - 1;
setcustomerCategoryId([data.productCategory.ids])
initCreatePro(data.productCategory.ids[idx], false)//生产弹窗
}
//地区
setrequisitionFormAddress(areaCodeList)
setinitialValues(data)
tabForm.resetFields()
//需求单对接列表
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'
})
obj[key] = child[key]
})
});
}
source.push(obj)
})
setotherList([...otherColumnkey])//生成列
setproductSource([...source])
}
})
setCount('3')
}
}, [])
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) => {
console.log(selected)
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) => {
if (v.key == index) {
areaParams.splice(childIndex, 1, item)
} else {
list.push(item)
}
});
}
}
setAreaParams([...areaParams, ...list])
}
const changePlatform = (e: any) => {
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 [parmas, setparms] = useState<any>({
details: '', //摘要
deliveryTime: '', //交付日期
quotationAsTime: '',//报价截止时间
voucherTime: '',//单据时间
defaultAddres: '',//适用地市：1.默认全部省市区 0.选中项
addres: '',//交付地址
addresId: '',//交付地址Id
offer: '',//报价要求
paymentType: '',//付款方式
taxes: '',//税费要求
logistics: '',//物流要求
packRequire: '',//包装要求
otherRequire: '',//其他要求
type: '',//需求对接类型：1.发布至平台 2.系统匹配 3.指定会员
productCategory: {},//商品品类 ,ProductCategoryRequest
requisitionFormAddress: [],//需求单地址列表 ,RequisitionFormAddresRequest
requisitionFormProducts: [],//商品列表 ,RequisitionFormProductRequest
demandDockings: [],//需求对接-系统匹配列表 ,DemandDockingRequest
shopIds: [],//需求对接-发布至平台 ,Long
memberIds: [],//需求对接-指定会员ID列表 ,Long
})
const handleSubmitTabForm = async () => {
const queryParmas = { ...parmas };
const values = await tabForm.validateFields();
queryParmas.addres = addres.children;
queryParmas.addresId = addres.value;
queryParmas.details = values.details;
queryParmas.logistics = values.logistics;
queryParmas.offer = values.offer;
queryParmas.otherRequire = values.otherRequire;
queryParmas.packRequire = values.packRequire;
queryParmas.paymentType = values.paymentType;
queryParmas.taxes = values.taxes;
const productList: any = [];
productSource.forEach((value) => {
const _otherList: any = [];
for (let k in value) {
otherList.forEach(child => {
let otherItem: any = {};
if (k === child.title) {
otherItem[k] = value[k];
_otherList.push(otherItem)
}
})
}
productList.push({
brand: value.brand,
model: value.model,
purchaseNuit: value.purchaseNuit,
purchaseQuantity: value.purchaseQuantity,
productAttributeJson: JSON.stringify([..._otherList])
})
});
queryParmas.requisitionFormProducts = [...productList];
queryParmas.type = platType;
if (values.deliveryTime) {
queryParmas.deliveryTime = moment(values.deliveryTime).valueOf();
};
if (values.quotationAsTime) {
queryParmas.quotationAsTime = moment(values.quotationAsTime).valueOf();
};
if (values.requisitionFormAddress.length > 0) {
queryParmas.defaultAddres = 0
} else {
queryParmas.defaultAddres = 1
}
if (platType === 1) {
queryParmas.shopIds = goodIds;
} else if (platType === 2) {
queryParmas.demandDockings = dockingList
queryParmas.demandDockings = dockingList.filter((v) => v.state === 1).map(v => {
return v.memberId
})
} else if (platType === 3) {
queryParmas.demandDockings = dockingList.filter((v) => v.state === 1).map(v => {
return v.memberId
})
}
const requisitionFormAddress: any = [];
const arr = Array.from(new Set(areaParams));
values.requisitionFormAddress.forEach(item => {
arr.forEach((items: any) => {
if (item[0] === items.provinceCode && item[1] === items.cityCode) {
requisitionFormAddress.push({
province: items.province,
provinceCode: items.provinceCode,
cityCode: items.cityCode,
city: items.city
})
} else if (item[0] === items.provinceCode) {
requisitionFormAddress.push({
provinceCode: items.provinceCode,
province: items.province
})
}
})
})
queryParmas.requisitionFormAddress = requisitionFormAddress;
if (values.customerCategoryId && values.customerCategoryId.length > 0) {
const idx = values.customerCategoryId.length - 1;
if (seletCategoryNameList.length > 0) {
let NameList = seletCategoryNameList.map((item) => { return item.title });
const productCategory: any = {
id: values.customerCategoryId[idx],
key: values.customerCategoryId[idx],
name: NameList.join('-'),
ids: values.customerCategoryId
}
queryParmas.productCategory = productCategory;
} else {
queryParmas.productCategory = customerCategory;
}
}
if (id) {//修改
queryParmas.id = id
PublicApi.postOrderRequisitionFormUpdate(queryParmas).then(res => {
if (res.code === 1000) {
setTimeout(() => {
history.goBack()
}, 1000)
}
})
} else {
PublicApi.postOrderRequisitionFormAdd(queryParmas).then(res => {
if (res.code === 1000) {
setTimeout(() => {
history.goBack()
}, 1000)
}
})
}
}
/**
* @description: 提交 保存弹窗内容到列表 不经过接口
* @param {type}
* @return {type}
*/
const handleSubmit = (values: any) => {
let item = {}
let list = []
//先循环所有 再循环有值的
if (otherList.length > 0) {
otherList.forEach((vitem: any) => {
Object.keys(values).forEach((key) => {
if (vitem.title == key) {
item[key] = values[vitem.title]
} else {
item[key] = values[key]
}
})
})
} else {
Object.keys(values).forEach((key) => {
item[key] = values[key]
})
}
list.push(item)
setproductSource([...productSource, ...list])//新增就要合并
setdialogVisible(false)
setView(false)
}
const onFinish = fieldsValue => {
const values = {
...fieldsValue,
'deliveryTime': fieldsValue['deliveryTime'].format('YYYY-MM-DD'),
'quotationAsTime': fieldsValue['quotationAsTime'].format('YYYY-MM-DD HH:mm')
};
}
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)
setgoodIds([...newValue])
} else {
setgoodIds([...goodIds, id])
}
}
/**
* @description: 会员列表
* @param {type}
* @return {type}
*/
const switchState = (text, record, index) => {
return <Switch defaultChecked={text ? true : false} size="small" onChange={(checked) => {
memberList[index].state = checked
setmemberList([...memberList])
}} />
}
// 用于判断新增点击保存没有添加交易条件就提交
const [count, setCount] = useState<string>('1');
const handleClick = (key: string) => {
if (key === '3') {
setCount(key)
}
}
// select选择地址
const handleChangeSelect = (e: any, option: any) => {
setaddres(option)
}
const disabledDate = (current) => {
return current && current < moment().endOf('day');
}
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' onTabClick={handleClick}>
<TabPane tab="基本信息" key='1' forceRender>
<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
// initialValue={
// initialValues.
// }
name="customerCategoryId"
label="商品品类"
rules={[
{
required: true,
message: '请选择商品品类'
},
]}
>
<Cascader
options={CategoryTreeOne}
fieldNames={{ label: 'title', value: 'id', children: 'children' }}
onChange={(value, selectedOptions) => onCustomerCategoryChange(value, selectedOptions)}
placeholder="请选择品类"
notFoundContent={<Spin size="small" />}
/>
</Form.Item>
<Form.List name="requisitionFormAddress"
>
{(fields: any[], { add, remove }: any) => {
if (!fields.length) {
add()
}
return (
<div>
{fields.map((field, index) => (
<Form.Item
{...(index === 0 ? layout : layoutFormList)}
label={
field.key === 0 && <span>
归属地市&nbsp;
<Tooltip title="设置了归属地市后，此商品可根据地市进行筛选，未设置时默认为所有地市">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
key={index}
>
<Form.Item
{...field}
noStyle
>
<Cascader
options={proviceOptions}
changeOnSelect
onChange={(value, selectedOptions) => onCommodityAreaChange(value, selectedOptions, index)}
placeholder="请选择地区"
fieldNames={{ label: 'name', value: 'code', children: 'areaResponses' }}
style={index === 0 ? { width: '90%' } : { width: '80%' }}
notFoundContent={<Spin size="small" />}
/>
</Form.Item>
<Button size='small' type="primary" onClick={() => add()} icon={<PlusOutlined />} style={{ margin: '0 12px' }} />
{field.key > 0 && (<Button size='small' onClick={() => remove(field.name)} icon={<MinusOutlined />} />)}
</Form.Item>
))}
</div>
)
}}
</Form.List>
{
id &&
<Form.Item
label='需求单号'
>
<>
{
initialValues.requisitionFormNo
}
</>
</Form.Item>
}
<Form.Item
// name='memberName'
label='会员名称'
>
<>{getAuth().name || '未知用户'}</>
</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' forceRender>
<Button style={{ marginBottom: 16, marginTop: 24 }} block icon={<PlusOutlined />} onClick={() => handleOptionBtn(1)} type='dashed'>添加商品</Button>
<Table rowKey={(record, index) => `table-row-key-${index}`} dataSource={productSource} columns={equiryColumns} pagination={pagination} />
</TabPane>
<TabPane tab="交易条件" key='3' forceRender>
<Row>
<Col span={11}>
<Form.Item
initialValue={initialValues.deliveryTime ? moment(initialValues.deliveryTime) : ''}
label="交付日期"
rules={[
{
required: true,
type: 'object'
}
]}
name="deliveryTime"
>
<DatePicker style={{ width: '100%' }}
disabledDate={disabledDate}
/>
</Form.Item>
<Form.Item
initialValue={initialValues.addresId}
label="交付地址"
rules={[
{
required: true
}
]}
name="addresId"
>
<Select placeholder="选择收货地址" onChange={handleChangeSelect}>
{
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%' }}
disabledDate={disabledDate}
/>
</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' forceRender>
<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' forceRender>
<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}
check={check}
view={view}
dialogVisible={dialogVisible}
mode={0}
onOK={(values: any) => handleSubmit(values)}
onCancel={() => {setdialogVisible(false); setView(false)}}
>
</RroductModal>
<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
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