Commit 40f0f6d0 authored by GuanHua's avatar GuanHua
parents eb9d5d8a b5185f2b
......@@ -5,6 +5,7 @@ export interface IBasicFormParam {
brandName: string;
commodityAreaList: string[][];
customerCategoryId: string[];
customerCategoryName: string;
name: string;
sellingPoint: string[];
slogan: string;
......
......@@ -18,6 +18,7 @@ import ProductDescFormCloud from './addProductsItem/productDescFormCloud'
import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
import { PublicApi } from '@/services/api'
import { CommodityType } from './constant';
const { TabPane } = Tabs
......@@ -90,6 +91,7 @@ const AddProducts: React.FC<{}> = (props) => {
title: data.title,
keywords: data.keywords,
description: data.description,
type: data.type,
})
setProductName(data?.name)
setProductPriceType(data?.priceType)
......@@ -169,6 +171,11 @@ const AddProducts: React.FC<{}> = (props) => {
}
}
}
if(productInfoByEdit?.type === CommodityType.UPPER_SUPPORTER_COMMODITY) {
// @ 上游商品 直接去原信息中的品类品牌id
_bacsicForm.customerCategoryId = productInfoByEdit?.customerCategory.fullId.split('.').map(item => Number(item) + '')
_bacsicForm.brandId = productInfoByEdit?.brand.id
}
_bacsicForm.customerCategoryId = _bacsicForm.customerCategoryId[_bacsicForm.customerCategoryId.length - 1]
// 移除描述中的空数组[]
let _productDescription = { ...productDescription }
......
......@@ -13,7 +13,7 @@ import { store } from '@/store'
import { validatorByte } from '@/utils/regExp';
import { GetProductCustomerGetCustomerCategoryTreeResponse } from '@/services/ProductApi';
import { GetManageAreaAllResponse } from '@/services/PassApi';
import { customerCategoryTypeLabel } from '../constant';
import { CommodityType, customerCategoryTypeLabel } from '../constant';
const { Option } = Select
const layout = {
......@@ -198,7 +198,76 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
ref={basicFormRef}
autoComplete="off"
>
<Form.Item
{/* 对来自于上游的商品 品类品牌仅做显示处理 */}
{
productInfoByEdit?.type === CommodityType.UPPER_SUPPORTER_COMMODITY
?
<Form.Item
name="customerCategoryName"
label="商品品类"
rules={[
{
required: true,
message: '请选择商品品类'
},
]}
>
<Input placeholder="请选择品类" disabled={history.location.query?.id} defaultValue={productInfoByEdit.customerCategory.fullName} />
</Form.Item>
:
<Form.Item
name="customerCategoryId"
label="商品品类"
rules={[
{
required: true,
message: '请选择商品品类'
},
]}
>
<Cascader
allowClear={false}
disabled={history.location.query?.id}
options={customerCategoryTree}
fieldNames={{ label: 'title', value: 'id', children: 'children' }}
onChange={onCustomerCategoryChange}
placeholder="请选择品类"
/>
</Form.Item>
}
{
productInfoByEdit?.type === CommodityType.UPPER_SUPPORTER_COMMODITY
?
<Form.Item
name="brandName"
label="商品品牌"
>
<Input placeholder="请选择商品品牌" disabled={!isUpdateAttribute} defaultValue={productInfoByEdit.brand.name} />
</Form.Item>
:
<Form.Item
name="brandId"
label="商品品牌"
>
<Select
disabled={!isUpdateAttribute}
showSearch={true}
showArrow={true}
placeholder="请输入或选择商品品牌"
allowClear
value={brandValue}
defaultActiveFirstOption={false}
filterOption={false}
onSearch={handleBrandSearch}
onChange={handleBrandChange}
onFocus={()=>handleBrandSearch(null)}
style={{ width: '100%' }}
>
{brandData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
</Select>
</Form.Item>
}
{/* <Form.Item
name="customerCategoryId"
label="商品品类"
rules={[
......@@ -237,7 +306,7 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
>
{brandData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
</Select>
</Form.Item>
</Form.Item> */}
<Form.Item
name="name"
label={
......
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { PublicApi } from '@/services/api';
import { ISchema } from '@formily/antd';
import { Badge } from 'antd';
import { ColumnType } from 'antd/lib/table';
import moment from 'moment';
import React, { ReactNode } from 'react'
......@@ -20,6 +20,18 @@ export const productStatusLabel = [
'未上架'
]
/** 商品状态对应的颜色 */
export const productStatusColor = [
'',
'blue',
'cyan',
'orange',
'green',
'green',
'purple',
'gold',
]
/** 品类类型 */
export const customerCategoryTypeLabel = [
'',
......@@ -52,6 +64,25 @@ export const carriageTypeLabel = [
'买家承担运费',
]
/** 商品类型枚举 */
export enum CommodityType {
/** 自营商品 */
SELF_SUPPORT_COMMODITY = 1,
/** 上游商品 */
UPPER_SUPPORTER_COMMODITY = 2,
/** 代销商品 */
AGENT_SALE_COMMODITY = 3,
}
/** 商品的操作文本 */
export const opeartionLabel = [
'',
'提交审核',
'修改商品',
'审核商品'
]
/** 查看商品 审核历史列 */
export const columns: ColumnType<any>[] = [
{
......@@ -69,31 +100,13 @@ export const columns: ColumnType<any>[] = [
title: '状态',
dataIndex: 'status',
key: 'status',
render: (text:any, record:any) => {
let component: ReactNode = null
if(record.status === 4)
component = (<><span className="commonStatusValid"></span>审核通过</>)
else if(record.status === 1)
component = (<><span className="commonStatusInvalid"></span>待提交审核</>)
else if(record.status === 2)
component = (<><span className="commonStatusModify"></span>待审核</>)
else if(record.status === 3)
component = (<><span className="commonStatusStop"></span>审核不通过</>)
return component
}
render: (t, r) => <Badge color={productStatusColor[t]} text={productStatusLabel[t]} />
},
{
title: '操作',
dataIndex: 'operation',
key: 'operation',
render: (text:any, record:any) => {
if(record.operation === 1)
return '提交审核'
else if(record.operation === 2)
return '修改商品'
else if(record.operation === 3)
return '审核商品'
}
render: text => opeartionLabel[text]
},
{
title: '操作时间',
......
import React, { useState, useEffect, useRef, ReactNode } from 'react'
import { history } from 'umi'
import { Button, Form, Card, Modal, Select, Row, Col, Dropdown, Tooltip, Menu, Space, message, Checkbox } from 'antd'
import { Button, Form, Card, Modal, Select, Row, Col, Dropdown, Tooltip, Menu, Space, message, Checkbox, Badge } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
PlusOutlined,
......@@ -27,7 +27,7 @@ import { searchBrandOptionEffect, searchCustomerCategoryOptionEffect } from './e
import EyePreview from '@/components/EyePreview'
import moment from 'moment'
import { GetProductChannelCommodityGetShopResponse } from '@/services/ProductApi'
import { productStatusLabel } from './constant'
import { productStatusColor, productStatusLabel } from './constant'
// 定义选择的行数据的类型
interface Item {
......@@ -146,7 +146,7 @@ const DirectChannel: React.FC<{}> = () => {
title: '商品状态',
dataIndex: 'status',
key: 'id',
render: (text: any, record: any) => <><span className="commonStatusModify"></span>{productStatusLabel[text]}</>
render: (t) => <Badge color={productStatusColor[t]} text={productStatusLabel[t]} />
},
{
title: '操作',
......
import React, { useState, useEffect, useRef, ReactNode } from 'react'
import { Button, Form, Card, Modal, Checkbox, Row, Col, Input, } from 'antd'
import { Button, Form, Card, Modal, Checkbox, Row, Col, Input, Badge, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
PlusOutlined,
......@@ -16,7 +16,7 @@ import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilte
import { searchCustomerCategoryOptionEffect, searchBrandOptionEffect } from './effect'
import { fastSchema } from './schema/productSchema'
import { FORM_FILTER_PATH } from '@/formSchema/const'
import { priceTypeLabel, productStatusLabel, validatorNumberRange } from './constant'
import { priceTypeLabel, productStatusColor, productStatusLabel, validatorNumberRange } from './constant'
const formActions = createFormActions();
......@@ -103,7 +103,7 @@ const FastModifyPrice: React.FC<{}> = () => {
title: '状态',
dataIndex: 'status',
key: 'status',
render: (text: any, record: any) => <><span className="commonStatusModify"></span>{productStatusLabel[text]}</>
render: (text) => <Badge color={productStatusColor[text]} text={productStatusLabel[text]} />
},
{
title: '操作',
......
import React, { useState, useEffect, useRef, useMemo } from 'react'
import { history } from 'umi'
import { Button, Form, Card, Modal, Result, Progress, Select, Tooltip, Checkbox, Row, Col, Dropdown, Menu, Space, message } from 'antd'
import { Button, Form, Card, Modal, Result, Progress, Select, Tooltip, Checkbox, Row, Col, Dropdown, Menu, Space, message, Badge } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
PlusOutlined,
......@@ -28,7 +28,7 @@ import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilte
import { searchBrandOptionEffect, searchCustomerCategoryOptionEffect } from './effect'
import { getAuth } from '@/utils/auth'
import useSetSearchValueInTable from '@/hooks/useSetSearchValueInTable'
import { priceTypeLabel, productStatusLabel } from './constant'
import { priceTypeLabel, productStatusColor, productStatusLabel } from './constant'
import EyePreview from '@/components/EyePreview'
import UpperProductModalTable from './components/upperProductModalTable'
import { Item } from '@/components/ButtonTabs'
......@@ -130,7 +130,8 @@ const Products: React.FC<{}> = () => {
{
title: '供应会员',
dataIndex: 'upperMemberName',
key: 'upperMemberName'
key: 'upperMemberName',
render: t => t ? t : '—'
},
{
title: '价格',
......@@ -163,7 +164,7 @@ const Products: React.FC<{}> = () => {
title: '商品状态',
dataIndex: 'status',
key: 'status',
render: text => <><span className="commonStatusModify"></span>{productStatusLabel[text]}</>
render: t => <Badge color={productStatusColor[t]} text={productStatusLabel[t]} />
},
{
title: '操作',
......
import React, { useState, ReactNode, useEffect } from 'react'
import { history } from 'umi'
import { Steps, Card, Space, Tooltip, Row, Col, Descriptions, Table, Tabs, Tag, Divider } from 'antd'
import { Steps, Card, Space, Tooltip, Row, Col, Descriptions, Table, Tabs, Tag, Divider, Badge } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
QuestionCircleOutlined,
......@@ -15,7 +15,7 @@ import {
GetProductCommodityGetCommodityResponse,
GetProductCommodityGetCommodityCheckRecordResponse,
} from '@/services/ProductApi'
import { carriageTypeLabel, columns, customerCategoryTypeLabel, deliveryTypeLabel, priceTypeLabel, productStatusLabel } from './constant'
import { carriageTypeLabel, columns, customerCategoryTypeLabel, deliveryTypeLabel, priceTypeLabel, productStatusColor, productStatusLabel } from './constant'
interface IAttributeByValue {
groupName: string;
......@@ -112,8 +112,12 @@ const viewProducts: React.FC<{}> = () => {
<Descriptions colon={true} style={{paddingLeft:128}}>
<Descriptions.Item label="商品品牌">{productDetail?.brand?.name}</Descriptions.Item>
<Descriptions.Item label="商品品类">{productDetail?.customerCategory?.fullName}</Descriptions.Item>
<Descriptions.Item label="商品状态"><span className="commonStatusModify"></span>{productStatusLabel[productDetail?.status]}</Descriptions.Item>
<Descriptions.Item label="商品类型"><span className="commonStatusValid"></span>{customerCategoryTypeLabel[productDetail?.customerCategory?.type]}</Descriptions.Item>
<Descriptions.Item label="商品状态">
<Badge color={productStatusColor[productDetail?.status]} text={productStatusLabel[productDetail?.status]} />
</Descriptions.Item>
<Descriptions.Item label="商品类型">
<Badge color={productStatusColor[productDetail?.customerCategory?.type]} text={customerCategoryTypeLabel[productDetail?.customerCategory?.type]} />
</Descriptions.Item>
{
productDetail?.commodityShopList?.length>0 &&
<Descriptions.Item label="上架商城">
......
......@@ -178,7 +178,7 @@ const Details = (props: any) => {
return (
<div>
<EyePreview
url={`/memberCenter/afterService/returnApplication/returnQuery/detail?id=${record.orderId}`}
url={record.orderType === 1 ? `/memberCenter/tranactionAbility/purchaseOrder/orderList/preview?id=${record.orderId}` : `/memberCenter/afterService/returnApplication/returnQuery/detail?id=${record.orderId}`}
>
{text}
</EyePreview>
......
......@@ -120,7 +120,7 @@ const FormList = (props: any) => {
if (res.code === 1000) {
let data = res.data.data.map((item, index) => {
return {
materielId: _filterArr(sourceType, item, ['', 'productId', 'id', '']),
materielId: _filterArr(sourceType, item, ['', 'goodsId', 'id', '']),
code: _filter(sourceType, item, ['', 'number', 'code', 'number']),// 物料编号
name: _filter(sourceType, item, ['', 'name', 'name', 'name']),//物料名称
type: _filter(sourceType, item, ['', 'model', 'type', 'model']),//物料规格
......
......@@ -10,34 +10,6 @@ export interface StatusColorsProps {
color: string,
}
// className映射
const classNameMap = [
"commonStatusStop", // 灰色
"commonStatusInvalid", // 黄色
"commonStatusModify", // 蓝色
"commonStatusValid", // 绿色
"commonStatusStop", // 灰色
"commonStatusInvalid", // 黄色
"commonStatusModify", // 蓝色
"commonStatusValid", // 绿色
"commonStatusStop", // 灰色
"commonStatusInvalid", // 黄色
"commonStatusModify", // 蓝色
"commonStatusValid", // 绿色
"commonStatusStop", // 灰色
"commonStatusInvalid", // 黄色
"commonStatusModify", // 蓝色
"commonStatusValid", // 绿色
"commonStatusStop", // 灰色
"commonStatusInvalid", // 黄色
"commonStatusModify", // 蓝色
"commonStatusValid", // 绿色
]
// 订单内部状态显示
const CustomBadge: React.FC<StatusColorsProps> = (props) => {
// const { status, type } = props
......
......@@ -232,22 +232,6 @@ const AddBrand: React.FC<{}> = () => {
>
<Input disabled={banSomeField} placeholder="输入品牌名称" />
</Form.Item>
{/* <Form.Item
label='审核状态'
name="status"
initialValue={1}
style={{display:'none'}}
>
<span className="commonStatusModify"></span>待提交审核
</Form.Item>
<Form.Item
label='是否有效'
name="isEnable"
initialValue={true}
style={{display:'none'}}
>
<span className="commonStatusValid"></span>有效
</Form.Item> */}
<Form.Item
name="logoUrl"
label={<span>品牌LOGO&nbsp;&nbsp;</span>}
......@@ -261,19 +245,6 @@ const AddBrand: React.FC<{}> = () => {
]}
className={styles.uploadForm}
>
{/* <Upload
disabled={banSomeField}
name="file"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action="/api/file/file/upload"
beforeUpload={beforeLogoUpload}
onChange={handleUploadLogoChange}
data={{ fileType: UPLOAD_TYPE }}
>
{logoUrl ? <img src={logoUrl} alt="avatar" style={{ width: 102, height: 102, objectFit: 'cover' }} /> : uploadLogoButton}
</Upload> */}
<UploadImage
disabled={banSomeField}
listType="picture-card"
......@@ -297,19 +268,6 @@ const AddBrand: React.FC<{}> = () => {
name="proveUrl"
// valuePropName="fileList"
>
{/* <Upload
name="file"
listType="picture-card"
className="avatar-uploader"
action="/api/file/file/upload"
fileList={fileList}
beforeUpload={beforeUpload}
onChange={handleChange}
data={{ fileType: UPLOAD_TYPE }}
showUploadList={{ showPreviewIcon: false }}
>
{fileList.length >= 20 ? null : uploadButton}
</Upload> */}
<UploadImage
listType="picture-card"
fileList={fileList}
......
import React, { ReactNode, useRef, useEffect, useMemo } from 'react'
import { history } from 'umi'
import { Button, Popconfirm, Card, message, Dropdown, Menu, Modal, Space } from 'antd'
import { Button, Popconfirm, Card, message, Dropdown, Menu, Modal, Space, Badge } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
PlusOutlined,
......@@ -20,6 +20,7 @@ import { FORM_FILTER_PATH } from '@/formSchema/const'
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
import Submit from '@/components/NiceForm/components/Submit'
import useSetSearchValueInTable from '@/hooks/useSetSearchValueInTable'
import { productStatusColor, productStatusLabel } from '../commodity/products/constant'
const { confirm } = Modal
......@@ -114,18 +115,7 @@ const Trademark: React.FC<{}> = () => {
title: '审核状态',
dataIndex: 'status',
key: 'status',
render: (text: any, record: any) => {
let component: ReactNode = null
if (record.status === 1)
component = (<><span className="commonStatusInvalid"></span>待提交审核</>)
else if (record.status === 2)
component = (<><span className="commonStatusModify"></span>待审核</>)
else if (record.status === 3)
component = (<><span className="commonStatusStop"></span>审核不通过</>)
else if (record.status === 4)
component = (<><span className="commonStatusValid"></span>审核通过</>)
return component
}
render: (t) => <Badge color={productStatusColor[t]} text={productStatusLabel[t]} />
},
{
title: '操作',
......
This diff is collapsed.
......@@ -26,7 +26,11 @@ export const useOrderDetail = (options: OrderDetailHookProps) => {
const { orderNo } = history.location.query
const { type } = options
const dataRef = useRef<any>([
{ label: '对应报价单号', name: 'quoteNo', span: 8, render: text => <Link to={'/'}>{text}</Link> },
{ label: '对应报价单号', name: 'quoteNo', span: 8, render: (text, record) => <Link
to={type[0] === 's' ? `/memberCenter/tranactionAbility/inquiryOffer/offerSearch/offer/preview?id=${record?.quoteId}` : `/memberCenter/tranactionAbility/confirmOffer/offerSearch/offer/preview?id=${record?.quoteId}`}>
{text}
</Link>
},
{ label: '订单摘要', name: 'digest', span: 8 },
{ label: type[0] === 's' ? '采购会员' : '供应会员', name: type[0] === 's' ? 'buyerMemberName' : 'vendorMemberName', span: 8 },
{ label: '下单模式', name: 'orderModeName', span: 8 },
......
......@@ -4,7 +4,7 @@ import { Popover, Row, Space } from 'antd'
export const AddressPop = (props) => {
const { pickInfo = null, children } = props
return pickInfo && pickInfo.deliverType === 2 ? <Space>
return pickInfo && pickInfo.deliveryType === 2 ? <Space>
<EnvironmentOutlined style={{marginRight: 8}}/>
<Popover content={
<Row>
......
......@@ -18,7 +18,8 @@ export const useProductTable = (ctx: ISchemaFormActions | ISchemaFormAsyncAction
const handleSave = row => {
return new Promise((resolve, reject) => {
const newData = [...ctx.getFieldValue('products')];
const index = newData.findIndex(item => row.productId === item.productId);
// srm订单已productId为唯一key b2b订单以skuId为唯一
const index = newData.findIndex(item => row.skuId ? row.skuId === item.skuId : row.productId === item.productId);
const item = newData[index];
newData.splice(index, 1, {
...item,
......
......@@ -24,12 +24,14 @@ const OrderPayTabs:React.FC<OrderPayTabsProps> = () => {
// 简单流程为24
const processEnum = data.processEnum
const payments = data.payments.sort((a, b) => a.batchNo - b.batchNo)
useEffect(() => {
// 过滤支付信息 取第一个待支付或者未到账的id
if(data?.payments?.length) {
let payments = data.payments.sort((a, b) => a.batchNo - b.batchNo).filter(item => item.showPayment)
if(payments.length) {
ctl.setPayId(payments[0].paymentId)
if(payments.length) {
let payment = payments.filter(item => item.showPayment)
if(payment.length) {
ctl.setPayId(payment[0].paymentId)
}
}
}, [])
......@@ -61,7 +63,7 @@ const OrderPayTabs:React.FC<OrderPayTabsProps> = () => {
// const canCtlData = data.payments.find(v => v.showView) || {} //@todo 需后端提供showView字段支持
const canCtlData = data.payments.find(v => v.vouchers.length) || {}
const canCtlData = payments.find(v => v.vouchers.length) || {}
const urlsDatas = canCtlData.vouchers || []
return (
......@@ -71,9 +73,9 @@ const OrderPayTabs:React.FC<OrderPayTabsProps> = () => {
<MellowCard bordered={false} fullHeight>
<Tabs defaultActiveKey='1'>
{
data.payments.length
payments.length
?
data.payments.map(v => <TabPane key={v.paymentId} tab={<TabHeader dataSource={v}/>}>
payments.map(v => <TabPane key={v.paymentId} tab={<TabHeader dataSource={v}/>}>
<Row>
<Col className={style.fontGray} span={4}>支付环节: </Col>
<Col>{v.payNode}</Col>
......
......@@ -45,8 +45,8 @@ const ProductQuoteLayout: React.FC<ProductQuoteLayoutProps> = (props: any) => {
const columns: ColumnType<any>[] = [
{
title: "商品ID",
key: "productId",
dataIndex: "productId",
key: "commodityId",
dataIndex: "commodityId",
render: (text: any, record: any) => <EyePreview type='button' handleClick={() => handleJump(record)}>{text}</EyePreview>
},
{
......
......@@ -8,115 +8,115 @@ import styles from './index.less';
const { Search } = Input;
interface AddCouponsDrawerProps {
visible: boolean,
onClose?: Function,
onConfirm?: Function,
fetch?: Promise<any>
visible: boolean,
onClose?: Function,
onConfirm?: Function,
fetch?: Promise<any>
}
const AddCouponsDrawer: React.FC<AddCouponsDrawerProps> = (props: any) => {
const { visible, onClose, onConfirm, fetch } = props;
const { visible, onClose, onConfirm, fetch } = props;
const [couponType, setCouponType] = useState<any>('');
const [couponName, setCouponName] = useState<any>('');
const [couponList, setCouponList] = useState<Array<any>>([{id: 1}, {id: 2}]);
// const [checkList, setCheckList] = useState<Array<number>>([]);
const [checkItem, setCheckItem] = useState<any>({});
const [couponType, setCouponType] = useState<any>('');
const [couponName, setCouponName] = useState<any>('');
const [couponList, setCouponList] = useState<Array<any>>([{ id: 1 }, { id: 2 }]);
// const [checkList, setCheckList] = useState<Array<number>>([]);
const [checkItem, setCheckItem] = useState<any>({});
const _onConfirm = () => {
onConfirm && onConfirm(checkItem);
}
const _onConfirm = () => {
onConfirm && onConfirm(checkItem);
}
const _setCouponType = (value: any) => {
setCouponType(value)
}
const _setCouponType = (value: any) => {
setCouponType(value)
}
const _setCouponName = (e: any) => {
setCouponName(e.target.value)
}
const _setCouponName = (e: any) => {
setCouponName(e.target.value)
}
const onSearch = () => {
const _params = {
couponType,
couponName
}
fetch && fetch(_params).then(res => {
if (res.code === 1000) {
setCouponList(res.data);
}
})
const onSearch = () => {
const _params = {
couponType,
couponName
}
fetch && fetch(_params).then(res => {
if (res.code === 1000) {
setCouponList(res.data);
}
})
}
const _reSet = () => {
setCouponType('');
setCouponName('');
onSearch();
}
const _reSet = () => {
setCouponType('');
setCouponName('');
onSearch();
}
const _setCheckList = (item: any) => {
// let _checkList = [...checkList];
// if (isCheck) {
// _checkList.push(id);
// } else {
// const _i = _checkList.indexOf(id);
// _checkList.splice(_i, 1);
// }
setCheckItem(item)
}
const _setCheckList = (item: any) => {
// let _checkList = [...checkList];
// if (isCheck) {
// _checkList.push(id);
// } else {
// const _i = _checkList.indexOf(id);
// _checkList.splice(_i, 1);
// }
setCheckItem(item)
}
useEffect(() => {
// setCheckList([]);
setCheckItem({});
if (visible) {
onSearch();
}
}, [visible])
useEffect(() => {
// setCheckList([]);
setCheckItem({});
if (visible) {
onSearch();
}
}, [visible])
return (
<Drawer
title="选择优惠券"
width={600}
onClose={onClose}
visible={visible}
bodyStyle={{ paddingBottom: 80 }}
footer={
<div style={{ textAlign: 'right', }}>
<Button onClick={onClose} style={{ marginRight: 8 }}>取消</Button>
<Button onClick={_onConfirm} type="primary">确定</Button>
</div>
}
>
<Row gutter={16} style={{ marginBottom: 20 }}>
<Col>
<Select value={couponType} className={styles.customs} style={{ width: 160 }} onChange={_setCouponType}></Select>
</Col>
<Col>
<Search
value={couponName}
className={styles.customs}
placeholder="搜索"
onSearch={onSearch}
style={{ width: 256 }}
onChange={_setCouponName}
allowClear/>
</Col>
<Col>
<Button onClick={_reSet}>重置</Button>
</Col>
</Row>
<Row>
{couponList.map((item: any, index: number) => {
return (
<Col span={22} key={`Col_${index}`} style={{ marginTop: 24 }}>
<Checkbox checked={checkItem?.id === item.id} className={styles.customsCheckbox} onChange={(e) => { _setCheckList(item) }}>
<CouponItem />
</Checkbox>
</Col>
)
})}
</Row>
</Drawer>
);
return (
<Drawer
title="选择优惠券"
width={600}
onClose={onClose}
visible={visible}
bodyStyle={{ paddingBottom: 80 }}
footer={
<div style={{ textAlign: 'right', }}>
<Button onClick={onClose} style={{ marginRight: 8 }}>取消</Button>
<Button onClick={_onConfirm} type="primary">确定</Button>
</div>
}
>
<Row gutter={16} style={{ marginBottom: 20 }}>
<Col>
<Select value={couponType} className={styles.customs} style={{ width: 160 }} onChange={_setCouponType}></Select>
</Col>
<Col>
<Search
value={couponName}
className={styles.customs}
placeholder="搜索"
onSearch={onSearch}
style={{ width: 256 }}
onChange={_setCouponName}
allowClear />
</Col>
<Col>
<Button onClick={_reSet}>重置</Button>
</Col>
</Row>
<Row>
{couponList.map((item: any, index: number) => {
return (
<Col span={22} key={`Col_${index}`} style={{ marginTop: 24 }}>
<Checkbox checked={checkItem?.id === item.id} className={styles.customsCheckbox} onChange={(e) => { _setCheckList(item) }}>
<CouponItem />
</Checkbox>
</Col>
)
})}
</Row>
</Drawer>
);
}
export default AddCouponsDrawer;
......@@ -6,6 +6,7 @@ import { FORM_FILTER_PATH } from '@/formSchema/const';
import { PublicApi } from '@/services/api';
export interface CollocationLayoutProps {
moda?: 'checkbox' | 'radio' ,
/** */
idNotInList?: number[],
/** 适用商城 */
......@@ -19,7 +20,7 @@ export interface CollocationLayoutProps {
}
const CollocationLayout: React.FC<CollocationLayoutProps> = (props: any) => {
const { idNotInList, shopIdList, visible, toggle, onConfirm } = props;
const { moda = 'checkbox', idNotInList, shopIdList, visible, toggle, onConfirm } = props;
/** 选择活动商品columns */
const columns: ColumnType<any>[] = [
{
......@@ -116,7 +117,7 @@ const CollocationLayout: React.FC<CollocationLayoutProps> = (props: any) => {
title="选择活动商品"
fetchData={handleFetchData}
columns={columns}
mode="checkbox"
mode={moda}
tableProps={{
rowKey: 'skuId',
}}
......
import React from 'react';
import { Row, Col, Space } from 'antd';
import { Row, Col } from 'antd';
import moment from 'moment';
import styles from './index.less';
import { isEmpty } from 'lodash';
const CouponItem = (props) => {
const { fieldListData } = props;
const format = (text, fmt?: string) => {
return <>{moment(text).format(fmt || "YYYY-MM-DD")}</>
}
const CouponItem = () => {
return (
<div className={styles.couponItem}>
<Row style={{ height: '100%' }} wrap={false}>
<Col flex='none'>
<div className={styles.couponItemLeft}>
<p>¥<span>10.00</span></p>
<p>满200.00元可用</p>
</div>
</Col>
<Col flex='auto' style={{ overflow: 'hidden' }}>
<div className={styles.couponItemRight}>
<div className={styles.couponItemRight_type}>通用优惠券</div>
<div className={styles.couponItemRight_info}>10元全品类优惠劵</div>
<div className={styles.couponItemRight_date}>2020.08.25-2020.09.25</div>
</div>
</Col>
</Row>
</div>
<>
{!isEmpty(fieldListData) && (
<div className={styles.couponItem}>
<Row style={{ height: '100%' }} wrap={false}>
<Col flex='none'>
<div className={styles.couponItemLeft}>
<p>¥<span>{fieldListData.denomination}</span></p>
<p>{fieldListData.useConditionMoney}元可用</p>
</div>
</Col>
<Col flex='auto' style={{ overflow: 'hidden' }}>
<div className={styles.couponItemRight}>
<div className={styles.couponItemRight_type}>{fieldListData.typeName}</div>
<div className={styles.couponItemRight_info}>{fieldListData.name}</div>
<div className={styles.couponItemRight_date}>{format(fieldListData.effectiveTimeStart)}-{format(fieldListData.effectiveTimeEnd)}</div>
</div>
</Col>
</Row>
</div>
)}
</>
);
}
......
import React, { Fragment } from 'react';
import { Form, Input, Row, Col, Image } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { FormInstance } from 'antd/es/form/Form';
import style from '../../index.less';
import moment from 'moment';
type ListProps = {
/** id */
id?: number,
/** 商品id */
productId?: number,
/** 商品名称 */
productName?: string,
/** 品类 */
category?: string,
/** 品牌 */
brand?: string,
/** 单位 */
unit?: string,
/** 商品价格 */
price?: number,
/** 换购价格 */
swapPrice?: number,
/** 允许换购数量赠送数量搭配数量 */
num: number,
/** 赠品主图 */
productImgUrl?: string
/** 活动商品id */
activityGoodsId?: number,
/** 优惠券id */
couponId?: number,
/** 优惠券名称 */
couponName?: string,
}
type RemindLayoutProps = {
/** 弹窗标题 */
modalTitle?: string,
/** 选择商品按钮名称 */
buttonTitle?: string,
/** 列表标题 */
listTitle?: string
/** 列表label */
label?: { [key: number]: string },
/** 提醒 */
message?: { [key: number]: string },
}
export interface ProductLayoutProps {
/** FormInstance */
form?: FormInstance,
/** message */
remind?: RemindLayoutProps,
/** 最外层标号 */
index: number,
/** list 数据 */
list: ListProps[],
/** 删除某一个 */
onDeletion: (_index: number) => void,
/** 输入数量或者套餐价格 */
onEntry: (name: string, num: number, _index?: number) => void,
}
const ProductLayout: React.FC<ProductLayoutProps> = (props: any) => {
const { form, remind, index, list, onDeletion, onEntry } = props;
const format = (text, fmt?: string) => {
return <>{moment(text).format(fmt || "YYYY-MM-DD")}</>
}
const handleChange = (e, name, _index?) => {
onEntry(name, Number(e.target.value), _index)
}
return (
<Fragment>
{/* 套餐价格 */}
<Form.Item
name={`${remind.type}_${index}`}
label={remind.label[1]}
rules={[{ required: true, message: remind.message[4] }]}
>
<Input addonBefore={remind.type === 'limitValue' && '买'} addonAfter={remind.label[2]} onBlur={(e) => handleChange(e, `${remind.type}`)} />
</Form.Item>
{/* 搭配商品 */}
{list.map((_item: any, _index: number) => (
<div key={`list_${_index + 1}`}>
<div className={style.productLayout_title}>
<span className={style.productLayout_arrow}>
{remind.label[3]}{_index + 1}
</span>
<DeleteOutlined onClick={() => onDeletion(_index)} />
</div>
<div className={style.productLayout_contenxt}>
<Form.Item
label={remind.label[3]}
className={style.productLayout_formItem}
>
{remind.value === 1 && (
<div className={style.productLayout_item}>
<Row gutter={8} wrap={false}>
<Col>
<div className={style.productLayout_item_img}>
<Image width={80} height={80} src={_item.productImgUrl} />
</div>
</Col>
<Col flex='auto'>
<div className={style.productLayout_item_title}>{_item.productName}</div>
<div className={style.productLayout_item_price}>
<span>¥ {_item.price.toFixed(2)}</span>/{_item.unit}
</div>
<div className={style.productLayout_item_info}>品类:{_item.category}</div>
<div className={style.productLayout_item_info}>品牌:{_item.brand}L</div>
</Col>
</Row>
</div>
)}
{remind.value !== 1 && (
<div className={style.couponLayout_contenxt}>
<Row style={{ height: '100%' }} wrap={false}>
<Col flex='none'>
<div className={style.couponLayout_item_left}>
<p>¥<span>{_item.denomination}</span></p>
<p>{_item.useConditionMoney}元可用</p>
</div>
</Col>
<Col flex='auto' style={{ overflow: 'hidden' }}>
<div className={style.couponLayout_item_right}>
<div className={style.couponLayout_item_right_type}>{_item.typeName}</div>
<div className={style.couponLayout_item_right_info}>{_item.name}</div>
<div className={style.couponLayout_item_right_date}>{format(_item.effectiveTimeStart)}-{format(_item.effectiveTimeEnd)}</div>
</div>
</Col>
</Row>
</div>
)}
</Form.Item>
<Form.Item
label={remind.label[4]}
name={`num_${index}_${_index}`}
rules={[{ required: true, message: remind.message[5] }]}
>
<Input addonAfter={_item.unit} onBlur={(e) => handleChange(e, 'num', _index)} />
</Form.Item>
</div>
</div>
))}
</Fragment>
)
}
export default ProductLayout;
......@@ -110,5 +110,101 @@
}
}
}
.couponLayout_contenxt {
position: relative;
height: 100px;
width: 100%;
.couponLayout_item_left {
width: 144px;
height: 100%;
background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 3px, #3899FF 3px);
background-size: 15px 10px;
background-position: 1% 1px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
p {
font-size: 12px;
text-align: center;
color: #fff;
margin: 0;
span {
font-size: 24px;
}
}
&::before {
content: '';
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
box-sizing: border-box;
left: -15px;
top: 37.5px;
z-index: 10;
background-color: #fff;
}
&::after {
background-color: #3899FF;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 10px;
z-index: -1;
}
}
.couponLayout_item_right {
height: 100%;
position: relative;
border: 1px solid #EDEEEF;
border-radius: 0 4px 4px 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
font-size: 12px;
padding-left: 20px;
.couponLayout_item_right_type {
color: #007BFC;
padding: 2px 4px;
background-color: #E9F3FF;
width: fit-content;
}
.couponLayout_item_right_info {
font-size: 14px;
color: #252D37;
}
.couponLayout_item_right_date {
color: #91959B;
}
&::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid #EDEEEF;
box-sizing: border-box;
right: -15px;
top: 37.5px;
z-index: 10;
background-color: #fff;
}
}
}
}
}
import React, { useEffect, useState } from 'react';
import { Drawer, Button, Form, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import CollapseLayout from './components/collapseLayout';
import { isEmpty } from 'lodash';
import ProductLayout from './components/productLayout';
import CouponsLayout from '@/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/couponsLayout';
const layout: any = {
labelCol: { style: { width: "100px" } },
labelAlign: "left",
};
type RemindLayoutProps = {
/** 弹窗标题 */
modalTitle?: string,
/** 选择商品按钮名称 */
buttonTitle?: string,
/** 列表标题 */
listTitle?: string
/** 列表label */
label?: { [key: number]: string },
/** 提醒 */
message?: { [key: number]: string },
}
interface ListModalLayoutProps {
idNotInList?: number[],
/** messges */
remind?: RemindLayoutProps,
/** 数据回显 */
value?: any[],
/** 设置标题 */
title?: string,
/** 显示隐藏 */
visible?: boolean,
/** 适用商城 */
shopIdList?: number[],
/** 关闭 */
onClose?: () => void,
/** 确定 */
onConfirm?: (fields: any[]) => void,
}
interface CouponGroupListProps {
/**分组编号优惠阶梯换购阶梯 */
groupNo?: number,
/** 换购门槛优惠门槛数量或金额 */
limitValue?: number,
/** 明细 */
list?: {
id?: number,
/** 活动商品id */
activityGoodsId?: number,
/** 优惠券id */
couponId: number,
/** 优惠券名称 */
couponName: string,
/** 赠送数量 */
num?: number,
}[]
}
const CouponsListLayout: React.FC<ListModalLayoutProps> = (props: any) => {
const { idNotInList, remind, value, shopIdList, title, visible, onClose, onConfirm } = props;
const [form] = Form.useForm();
const [couponSource, setCouponSource] = useState<CouponGroupListProps[]>([]);
const [tableModalVisible, setTableModalVisible] = useState<boolean>(false);
const [idx, setIdx] = useState<number>(0);
const toggle = (flag: boolean) => {
setTableModalVisible(flag)
};
/** 添加一个 */
const handleAppend = () => {
const CouponGroup: CouponGroupListProps = {
groupNo: 0,
limitValue: 0,
list: []
}
setCouponSource([...couponSource, CouponGroup]);
}
const handleCouponSubmit = (selectRowRecord: any) => {
console.log(selectRowRecord, 10086)
}
const handleClick = () => {
console.log('提交')
}
/** 删除一个 */
const handleDeletion = (index: number) => {
console.log(index)
}
/** 选择搭配优惠券 */
const handleCollocation = (_idx: number) => {
setIdx(_idx);
toggle(true)
}
/** 输入一个价格或者数量 */
const handleEntryNumber = (index: number, name: string, num: number, _index?: number) => {
console.log(index, name, num, _index)
}
/** 删除一个赠送优惠券 */
const handleDeletionColloCation = (index: number, _index: number) => {
console.log(index, _index)
}
return (
<Drawer
width={600}
title={title}
visible={visible}
destroyOnClose
onClose={onClose}
footer={
<div style={{ textAlign: 'right' }}>
<Button onClick={onClose} style={{ marginRight: 8 }}>
取消
</Button>
<Button type="primary" onClick={handleClick}>
提交
</Button>
</div>
}
>
{/* 分组列表 */}
<Form {...layout} form={form}>
{couponSource.map((item: CouponGroupListProps, index: number) => (
<Form.Item
style={{ marginBottom: '0px' }}
name={`dataSource_${index}`}
rules={[{ required: true, message: remind.message[3] }]}
key={`CollapseLayout_${index}`}
>
<CollapseLayout
index={index}
remind={remind}
deletion={handleDeletion}
>
{!isEmpty(item.list) && (
<ProductLayout
form={form}
index={index}
remind={remind}
list={item.list as any}
onDeletion={(_index: number) => handleDeletionColloCation(index, _index)}
onEntry={(name: string, num: number, _index?: number) => handleEntryNumber(index, name, num, _index)}
/>
)}
{/* 选择搭配商品 */}
<Button type="dashed" block icon={<PlusOutlined />} onClick={() => handleCollocation(index)}>
{remind.buttonTitle}
</Button>
</CollapseLayout>
</Form.Item>
))}
</Form>
{/* 添加分组 */}
<Button type="dashed" block icon={<PlusOutlined />} onClick={handleAppend}>添加</Button>
{/* 弹框: 优惠券 */}
<CouponsLayout
visible={tableModalVisible}
onClose={() => toggle(false)}
onSubmit={handleCouponSubmit}
/>
</Drawer>
)
}
export default CouponsListLayout;
import React, { useEffect, useState } from 'react';
import { CaretRightOutlined, DeleteOutlined } from '@ant-design/icons';
import cx from 'classnames';
import style from '../../index.less';
type RemindLayoutProps = {
/** 弹窗标题 */
modalTitle?: string,
/** 选择商品按钮名称 */
buttonTitle?: string,
/** 列表标题 */
listTitle?: string
/** 列表label */
label?: {[key: number]: string},
/** 提醒 */
message?: {[key: number]: string},
}
interface CollapseLayoutProps {
/** message */
remind?: RemindLayoutProps,
/** 组编号优惠阶梯换购阶梯 */
index: number,
/** 删除一个 */
deletion: (e: number) => void,
}
const CollapseLayout: React.FC<CollapseLayoutProps> = (props: any) => {
const { remind, children, index, deletion } = props;
const [isActive, setIsActive] = useState<boolean>(false);
useEffect(() => {
if (index === 0) {
setIsActive(true)
}
}, [index])
return (
<div className={cx(style.collapse, isActive && style.marginBottom)}>
<div className={style.collapse_index}>{index + 1}</div>
<div className={style.collapse_item}>
{/* 头部 */}
<div className={style.collapse_header} onClick={() => setIsActive(!isActive)}>
<CaretRightOutlined rotate={isActive ? 90 : 0} />
<span className={style.collapse_arrow}>{remind.listTitle}</span>
<DeleteOutlined onClick={() => deletion(index)} />
</div>
{/* 内容 */}
{isActive && (<>{children}</>)}
</div>
</div>
)
}
export default CollapseLayout
......@@ -8,9 +8,9 @@ type ListProps = {
/** id */
id?: number,
/** 商品id */
productId: number,
productId?: number,
/** 商品名称 */
productName: string,
productName?: string,
/** 品类 */
category?: string,
/** 品牌 */
......@@ -25,6 +25,12 @@ type ListProps = {
num: number,
/** 赠品主图 */
productImgUrl?: string
/** 活动商品id */
activityGoodsId?: number,
/** 优惠券id */
couponId?: number,
/** 优惠券名称 */
couponName?: string,
}
type RemindLayoutProps = {
......
.marginBottom {
margin-bottom: 16px;
}
.collapse {
display: flex;
flex-direction: row;
.collapse_index {
height: 32px;
width: 32px;
background-color: #FAFBFC;
text-align: center;
line-height: 32px;
margin-right: 4px;
font-size: 14px;
color: #303133;
}
.collapse_item {
flex: 1;
.collapse_header {
padding: 0 8px;
height: 32px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: #FAFBFC;
margin-bottom: 16px;
cursor: pointer;
}
.collapse_arrow {
margin-left: 8px;
color: #252D37;
font-size: 12px;
flex: 1;
}
.productLayout_title {
margin-top: 16px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 16px;
.productLayout_arrow {
flex: 1;
font-size: 12px;
color: #303133;
}
&::before {
content: '';
width: 2px;
height: 12px;
background-color: #00A98F;
margin-right: 6px;
}
}
.productLayout_contenxt {
// display: flex;
// flex-direction: row;
// flex-wrap: nowrap;
margin-bottom: 16px;
.productLayout_formItem {
width: 100%;
.productLayout_item {
border: 1px solid #F7F8FA;
padding: 8px;
cursor: pointer;
position: relative;
&:hover{
border-color: #00B37A;
}
.productLayout_item_img {
height: 80px;
width: 80px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.productLayout_item_title {
font-size: 12px;
color: #252D37;
}
.productLayout_item_price {
color: #91959B;
font-size: 12px;
span{
font-size: 14px;
color: #D32F2F;
}
}
.productLayout_item_info {
font-size: 12px;
color: #91959B;
}
}
}
}
.couponLayout_contenxt {
position: relative;
height: 100px;
width: 100%;
.couponLayout_item_left {
width: 144px;
height: 100%;
background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 3px, #3899FF 3px);
background-size: 15px 10px;
background-position: 1% 1px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
p {
font-size: 12px;
text-align: center;
color: #fff;
margin: 0;
span {
font-size: 24px;
}
}
&::before {
content: '';
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
box-sizing: border-box;
left: -15px;
top: 37.5px;
z-index: 10;
background-color: #fff;
}
&::after {
background-color: #3899FF;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 10px;
z-index: -1;
}
}
.couponLayout_item_right {
height: 100%;
position: relative;
border: 1px solid #EDEEEF;
border-radius: 0 4px 4px 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
font-size: 12px;
padding-left: 20px;
.couponLayout_item_right_type {
color: #007BFC;
padding: 2px 4px;
background-color: #E9F3FF;
width: fit-content;
}
.couponLayout_item_right_info {
font-size: 14px;
color: #252D37;
}
.couponLayout_item_right_date {
color: #91959B;
}
&::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid #EDEEEF;
box-sizing: border-box;
right: -15px;
top: 37.5px;
z-index: 10;
background-color: #fff;
}
}
}
}
}
......@@ -5,6 +5,7 @@ import CollapseLayout from './components/collapseLayout';
import { isArray, isEmpty } from 'lodash';
import ProductLayout from './components/productLayout';
import CollocationLayout from '../collocationLayout';
import CouponsLayout from '@/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/couponsLayout';
const layout: any = {
labelCol: { style: { width: "100px" } },
......@@ -177,7 +178,6 @@ const ListModalLayout: React.FC<ListModalLayoutProps> = (props: any) => {
/** 选择搭配商品 */
const handleCollocation = (_idx: number) => {
const fields = [...dataSource];
form.resetFields()
fields.forEach((item, _index) => {
item.list.forEach((_item, __index) => {
form.setFieldsValue({
......@@ -234,6 +234,7 @@ const ListModalLayout: React.FC<ListModalLayoutProps> = (props: any) => {
})
})
setDataSource(value);
console.log(remind.value)
}, [value])
return (
......@@ -286,8 +287,9 @@ const ListModalLayout: React.FC<ListModalLayoutProps> = (props: any) => {
</Form>
{/* 添加分组 */}
<Button type="dashed" block icon={<PlusOutlined />} onClick={handleAppend}>添加</Button>
{/* 商品弹框 */}
{/* 弹框: -> 商品 */}
<CollocationLayout
moda={remind.name === 'swapValue' ? 'radio' : 'checkbox'}
visible={tableModalVisible}
idNotInList={idNotInList}
shopIdList={shopIdList}
......
......@@ -7,8 +7,8 @@ import { isEmpty } from 'lodash';
import { PublicApi } from '@/services/api';
import { PlusOutlined } from '@ant-design/icons';
import { EditableContext } from '@/pages/transaction/components/detailLayout/components/context';
import ListModalLayout from '../listModalLayout';
import CollocationLayout from '../collocationLayout';
import ListModalLayout from '@/pages/transaction/marketingAbility/components/listModalLayout';
import CollocationLayout from '@/pages/transaction/marketingAbility/components/collocationLayout';
import { remindLayout, RemindLayoutProps } from './remind';
/** 表格头 */
......
export type RemindLayoutProps = {
/** name */
name?: string,
/** 商品类型 */
value?: number,
/** 区分选择商品的类型 */
type?: string,
/** 弹窗标题 */
modalTitle?: string,
/** 选择商品按钮名称 */
......@@ -18,6 +24,7 @@ export const remindLayout = (int, giveType?, giftType?) => {
case 6:
return {
name: 'giveValue',
value: giftType,
type: 'limitValue',
modalTitle: `设置赠品-${give}${gift}`,
buttonTitle: `添加赠送${gift}`,
......@@ -41,6 +48,7 @@ export const remindLayout = (int, giveType?, giftType?) => {
case 13: {
return {
name: 'swapValue',
value: 1,
type: 'limitValue',
modalTitle: `设置换购商品-${give}换购商品`,
buttonTitle: '添加换购商品',
......@@ -65,6 +73,7 @@ export const remindLayout = (int, giveType?, giftType?) => {
case 15:
return {
name: 'groupValue',
value: 1,
type: 'groupPrice',
modalTitle: '设置搭配商品',
buttonTitle: '选择搭配商品',
......
import React, { useEffect, useState } from 'react';
import React, { Fragment, useEffect, useState } from 'react';
import { Form, Button } from 'antd';
import { history } from 'umi';
import { history, Prompt } from 'umi';
import { useEventEmitter } from '@umijs/hooks';
import { SaveOutlined } from '@ant-design/icons';
import PeripheralLayout from '@/pages/transaction/components/detailLayout';
......@@ -145,39 +145,47 @@ const AddedMarketing = () => {
}, [id])
return (
<PeripheralLayout
detail='新增营销活动'
tabLink={[
{ id: 'basicInfoLayout', title: '基本信息' },
{ id: 'rulesLayout', title: '活动规则' },
{ id: 'shopLayout', title: '适用商城' },
{ id: 'activityProductLayout', title: '活动商品' },
{ id: 'partakeUserLayout', title: '参与用户' },
]}
effect={
<Button
loading={loading}
icon={<SaveOutlined />}
type="primary"
onClick={handleSubmit}
>
保存
</Button>
}
hideBreak={true}
components={
<Form
form={form}
{...layout}
>
<BasicInfoLayout form={form} focus$={focus$} />
<RulesLayout form={form} focus$={focus$} />
<ShopLayout onGetShopList={handleGetShopList} onSetShopList={shopList} />
<ProductListLayout activityId={activityId} form={form} focus$={focus$} shopIdList={shopIdList} />
<PartakeUserLayout onGetLevel={handleGetLevel} onSetLevel={memberLevelList} setMemberType={memberType} />
</Form>
}
/>
<Fragment>
<PeripheralLayout
detail='新增营销活动'
tabLink={[
{ id: 'basicInfoLayout', title: '基本信息' },
{ id: 'rulesLayout', title: '活动规则' },
{ id: 'shopLayout', title: '适用商城' },
{ id: 'activityProductLayout', title: '活动商品' },
{ id: 'partakeUserLayout', title: '参与用户' },
]}
effect={
<Button
loading={loading}
icon={<SaveOutlined />}
type="primary"
onClick={handleSubmit}
>
保存
</Button>
}
hideBreak={true}
components={
<Form
form={form}
{...layout}
onValuesChange={() => {
if (!unsaved) {
setUnsaved(true)
}
}}
>
<BasicInfoLayout form={form} focus$={focus$} />
<RulesLayout form={form} focus$={focus$} />
<ShopLayout onGetShopList={handleGetShopList} onSetShopList={shopList} />
<ProductListLayout activityId={activityId} form={form} focus$={focus$} shopIdList={shopIdList} />
<PartakeUserLayout onGetLevel={handleGetLevel} onSetLevel={memberLevelList} setMemberType={memberType} />
</Form>
}
/>
<Prompt when={unsaved} message="您还有未保存的内容,是否确定要离开?" />
</Fragment>
);
}
export default AddedMarketing;
......@@ -87,6 +87,7 @@ const BasicInfoLayout: React.FC<BasicInfoProps> = (props: any) => {
<Form.Item
label="活动类型"
name="activityType"
initialValue={1}
rules={[{ required: true, message: '请输入活动名称' }]}
>
<Select onChange={handleChange}>
......
.customsCheckbox {
display: flex;
align-items: center;
:global {
.ant-checkbox+span {
flex: 1;
margin-left: 20px;
}
}
}
import React, { useEffect, useState } from 'react';
import { Drawer, Space, Form, Select, Input, Button, Row, Col, Checkbox, Empty } from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
import CouponItem from '@/pages/transaction/marketingAbility/components/couponItem';
import styles from './index.less';
interface CouponsLayoutProps {
/** 显示 */
visible?: boolean,
/** 关闭 */
onClose?: () => void,
/** 提交 */
onSubmit?: (e: any) => void,
}
const CouponsLayout: React.FC<CouponsLayoutProps> = (props: any) => {
const { visible, onClose, onSubmit } = props;
const [form] = Form.useForm();
const [state, setState] = useState({
filterSearch: false
})
const [params, setParams] = useState({
current: 1,
pageSize: 10,
})
const [couponList, setCouponList] = useState<any[]>([]);
const [chekedId, setCheckedId] = useState<number[]>([]); // 已选择的优惠券
const [couponsList, setCouponsList] = useState<any[]>([]);
const changeFilterVisible = () => {
setState({
filterSearch: !state.filterSearch,
});
};
// 提交搜索
const handleSubmit = async () => {
await form.validateFields().then(res => {
PublicApi.getMarketingMerchantActivityDetailGoodsCouponSelect({ ...res, ...params }).then(res => {
if (res.code !== 1000) {
return
}
const { data } = res.data
setCouponList(data)
})
})
}
// 重置
const handleResetForm = () => {
form.resetFields();
handleSubmit()
}
useEffect(() => {
if (visible) {
handleSubmit()
}
}, [visible])
const handleOnOk = () => {
onSubmit(couponsList)
}
const renderFooter = () => {
return (
<div style={{ textAlign: 'right' }}>
<Button onClick={onClose} style={{ marginRight: 8 }}>
取消
</Button>
<Button onClick={handleOnOk} type="primary">
提交
</Button>
</div>
)
}
const _setCheckList = (_e, item: any) => {
const ids = [...chekedId]
if (!ids.includes(_e)) {
setCouponsList([...couponsList, item])
setCheckedId([...chekedId, _e])
} else {
setCouponsList(couponsList.filter(_item => _item.couponId !== _e))
setCheckedId(ids.filter(_item => _item !== _e));
}
}
return (
<Drawer
width={630}
title='选择优惠券'
visible={visible}
onClose={onClose}
footer={renderFooter()}
>
<Form
form={form}
onFinish={handleSubmit}
>
{/* 头部搜索 */}
<Space size={20} style={{ marginBottom: '24px' }}>
<Form.Item
name='type'
style={{ marginBottom: 0 }}
>
<Select
style={{ width: '160px' }}
placeholder='优惠劵类型'
options={[
{ label: '通用优惠券', value: 1 },
{ label: '品类优惠券', value: 2 },
{ label: '品牌优惠券', value: 3 },
{ label: '商品优惠券', value: 4 },
]}
/>
</Form.Item>
<Form.Item
name='name'
style={{ marginBottom: 0 }}
>
<Input.Search onSearch={handleSubmit} placeholder='优惠劵名称' />
</Form.Item>
<Button onClick={changeFilterVisible}>高级筛选 <CaretDownOutlined rotate={state.filterSearch ? 180 : 0} /></Button>
<Button onClick={handleResetForm}>重置</Button>
</Space>
{state.filterSearch && (
<Space size={20} style={{ marginBottom: '24px' }}>
<Form.Item
name='id'
style={{ marginBottom: 0 }}
>
<Input style={{ width: '160px' }} placeholder='优惠劵ID' />
</Form.Item>
<Button type='primary' htmlType="submit">查询</Button>
</Space>
)}
{/* 优惠券列表 */}
{couponList.length === 0 ?
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : (
<Row>
{couponList.map((item: any, index: number) => {
return (
<Col span={22} key={`Col_${index}`} style={{ marginBottom: 24 }}>
<Checkbox checked={chekedId.includes(item.id)} value={item.id} className={styles.customsCheckbox} onChange={(_e) => _setCheckList(_e.target.value, item)}>
<CouponItem
fieldListData={item}
/>
</Checkbox>
</Col>
)
})}
</Row>
)}
</Form>
</Drawer>
)
}
export default CouponsLayout;
import { ISchema } from "@formily/antd";
import { FORM_FILTER_PATH } from '@/formSchema/const';
export const schema: ISchema = {
type: 'object',
properties: {
megalayout: {
type: "object",
"x-component": "mega-layout",
"x-component-props": {
inline: true
},
properties: {
type: {
type: 'string',
'x-component-props': {
placeholder: '优惠劵类型',
style: {
width: 160,
},
},
enum: [],
},
name: {
type: 'string',
'x-component': 'Search',
'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: {
activityName: {
type: 'string',
'x-component-props': {
placeholder: '活动名称',
style: {
width: 160,
},
},
},
}
},
sumbit: {
"x-component": "Submit",
"x-mega-props": {
span: 1
},
"x-component-props": {
children: "查询"
}
}
}
}
}
}
......@@ -5,9 +5,9 @@ import { EventEmitter } from '@umijs/hooks/lib/useEventEmitter'
import CardLayout from '../card';
import { PlusOutlined } from '@ant-design/icons';
import { isEmpty } from 'lodash';
import CollocationLayout from '@/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/collocationLayout';
import { PublicApi } from '@/services/api';
import ListModalLayout from '@/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/listModalLayout';
import ListModalLayout from '@/pages/transaction/marketingAbility/components/listModalLayout';
import CollocationLayout from '@/pages/transaction/marketingAbility/components/collocationLayout';
import { remindLayout, RemindLayoutProps } from '@/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/productListLayout/remind';
type optionProps = {
......@@ -187,7 +187,7 @@ const ProductListLayout: React.FC<ProductListProps> = (props: any) => {
onConfirm={handleSelectActiveProducts}
/>
{/* 设置搭配商品 */}
{!isEmpty(remind) && (
{(!isEmpty(remind) && remind.value !== 1) && (
<ListModalLayout
title={remind.modalTitle}
remind={remind}
......
......@@ -47,18 +47,12 @@ const InquiryModalTable:React.FC<InquiryModalTableProps> = (props) => {
id: item.inquiryListId
})
// 将询价报价单的id字段 冗余给商品列表
// schemaAction.setFieldValue('orderProductRequests', data.map((v: any) => {
// v.memberId = item.offerMemberId
// v.memberRoleId = item.offerMemberRoleId
// return v
// }))
let newData = data.map((v: any) => {
v.memberId = item.offerMemberId
v.memberRoleId = item.offerMemberRoleId
return v
})
// 把地址信息冗余给商品字段render
schemaAction.setFieldValue('products', await filterProductDataById([], newData))
schemaAction.setFieldValue('vendorMemberName', item.offerMemberName)
schemaAction.setFieldValue('vendorMemberId', item.offerMemberId)
......
......@@ -87,13 +87,13 @@ export const filterProductDataById = (data, targetData) => {
const { code, data } = await PublicApi.getLogisticsShipperAddressGet({
id: logistics.sendAddress
}, { ttl: 60 * 1000, useCache: true })
logistics.render = {...data, deliverType: logistics.deliveryType}
logistics.render = {...data, deliveryType: logistics.deliveryType}
} else {
logistics.render = DELIVERY_TYPE[logistics.deliveryType]
}
// 配送方式外置, 用于接口字段冗余
next.deliverType = logistics.deliveryType
next.deliveryType = logistics.deliveryType
// id 存在集合中, 采用target中的数据, 否则采用data中的数据
const findResult = data.find(v => v.id === next.id)
......
......@@ -59,6 +59,7 @@ export const procurementRenderField = (data) => {
productId: item.skuId,
productName: item.name,
logistics: item.deliverType,
deliveryType: item.deliverType,
unitPrice: item.price,
purchaseCount: item.quantity,
taxInclusive: item.tax,
......@@ -351,11 +352,10 @@ export const productInfoColumns: any[] = [
// 接口调用
{
title: '配送方式',
dataIndex: 'deliverType',
dataIndex: 'deliveryType',
align: 'center',
key: 'deliverType',
key: 'deliveryType',
render: (t, r) => {
console.log(r, 'rr')
if(t === 1)
return "物流(默认)"
else if(t === 2)
......
......@@ -81,9 +81,9 @@ export const useProductTableChangeForPay = (ctx: ISchemaFormActions | ISchemaFor
if (value && value.length > 0 && !state.loading){ // 添加loading判断避免二次调用
// 请求一次并复制给支付信息
const productItem = value[0]
// if(pageStatus === PageStatus.EDIT) { // 编辑下 支付信息联动实现
if(pageStatus === PageStatus.EDIT) { // 编辑下 支付信息联动实现
// } else if(pageStatus === PageStatus.ADD) { // 新增下 需要支付信息生成支付次数
} else if(pageStatus === PageStatus.ADD) { // 新增下 需要支付信息生成支付次数
const shopId = ctx.getFieldValue('shopId')
const products = value.map(item => ({ productId: item.commodityId, skuId: item.productId }))
if(shopId && products?.length) {
......@@ -108,7 +108,7 @@ export const useProductTableChangeForPay = (ctx: ISchemaFormActions | ISchemaFor
})
}
// }
}
}
// 确认后 需根据商品id请求会员折扣接口, 以及配送方式
......
......@@ -22,7 +22,6 @@ import { useProductTable } from './model/useProductTable'
import styled from 'styled-components'
import { useUpdate } from '@umijs/hooks'
import { PublicApi } from '@/services/api'
import { formatTimeString } from '@/utils'
import { changeRouterTitleByStatus } from '../../_public/order/utils'
import { ReadyAddOrderDetailContext } from '../context'
import { help } from '../../common'
......@@ -138,7 +137,6 @@ const PurchaseOrderDetail:React.FC<PurchaseOrderDetailProps> = (props) => {
// 订单商品
const { productAddButton, productRef, productColumns, productComponents, ...sectionProps } = useProductTable(addSchemaAction)
let timerSignature = null
// 页面进入时, 当前所处的下单模式
useEffect(() => {
if (id) {
......@@ -161,11 +159,6 @@ const PurchaseOrderDetail:React.FC<PurchaseOrderDetailProps> = (props) => {
shopDataRef.current.orderMode = parseInt(modelType)
}
return () => {
clearInterval(timerSignature)
timerSignature = null
}
}, [])
const handleSubmit = async (value) => {
......@@ -218,7 +211,7 @@ const PurchaseOrderDetail:React.FC<PurchaseOrderDetailProps> = (props) => {
setBtnLoading(true)
/** 字段转换 */
// 合同下单 取供应商默认的发货地址
// 取供应商默认的发货地址
const { data: deliveryAddress} = await PublicApi.getLogisticsSelectListMemberShipperAddress({
memberId: params.vendorMemberId,
roleId: params.vendorRoleId
......@@ -282,8 +275,6 @@ const PurchaseOrderDetail:React.FC<PurchaseOrderDetailProps> = (props) => {
}
}
const _params = procurementProcessField(params)
const shops = addSchemaAction.getFieldState('shopId').props.enum || []
......@@ -292,8 +283,6 @@ const PurchaseOrderDetail:React.FC<PurchaseOrderDetailProps> = (props) => {
params.shopEnvironment = shop['environment']
params.shopName = shop['label']
console.log(_params)
if(id) {
fnResult = await PublicApi.postOrderBuyerCreateB2bUpdate({..._params, orderId: id})
} else {
......@@ -411,10 +400,8 @@ const PurchaseOrderDetail:React.FC<PurchaseOrderDetailProps> = (props) => {
<NiceForm
loading={formLoading}
previewPlaceholder=' '
// editable={pageStatus !== PageStatus.PREVIEW}
value={initFormValue}
actions={addSchemaAction}
// schema={mergeAllSchemas[page_type]}
schema={initFormSchema}
onSubmit={handleSubmit}
components={{
......
......@@ -23,46 +23,7 @@ export const sortByKey = (params) => {
export const getUnitPriceTotal = (record) => {
const purchaseCount = Number(record['purchaseCount']) || 0
// fix 当没有传递unitPrice字段时 自动容错, 单价显示为0
// fix 编辑订单取price
record.unitPrice = pageStatus === PageStatus.EDIT ? record.price : record.unitPrice || record.price || 0
if (typeof record.unitPrice === 'number') {
return record.isMemberPrice ?
Number((record.unitPrice * purchaseCount * record.memberPrice).toFixed(2))
:
Number((record.unitPrice * purchaseCount).toFixed(2))
}
if(record.unitPrice) {
record.unitPrice = sortByKey(record.unitPrice)
}
// fix 当没有传递unitPrice字段时 但有price字段时 补全unitPrice字段
if(record.price && JSON.stringify(record.unitPrice) === "{}") {
record.unitPrice = {'0-0': record.price}
}
// fix 当有unitPrice字段时 没有price字段时 补全price字段
if(!record?.price && JSON.stringify(record.unitPrice) !== "{}") {
if(Object.keys(record.unitPrice)[0] === '0-0') record.price = record.unitPrice['0-0']
}
let unitPrice = 0
Object.entries(record.unitPrice).forEach(([key, value]) => {
const [min, max] = key.split('-').map(v => Number(v))
if (min === 0 && max === 0) {
unitPrice = Number(value)
return false
}
if ((purchaseCount >= min && purchaseCount <= max) || (purchaseCount > max)) {
// 处于该区间或者大于该区间
unitPrice = Number(value)
return false
}
})
// 考虑会员折扣
let memberPrice = record.memberPrice
if(record.isMemberPrice) {
return Number((unitPrice * purchaseCount * memberPrice).toFixed(2))
} else {
return Number((unitPrice * purchaseCount).toFixed(2))
}
return Number((record.price * purchaseCount).toFixed(2))
}
/**
......@@ -150,11 +111,10 @@ export const useProductTable = (ctx: ISchemaFormActions | ISchemaFormAsyncAction
}
return new Promise((resolve, reject) => {
const newData = [...ctx.getFieldValue('products')];
const index = newData.findIndex(item => row.id === item.id);
console.log(newData, row)
const index = newData.findIndex(item => row.productId === item.productId);
const item = newData[index];
row['money'] = getUnitPriceTotal(row)
// 通过下单模式判断 是否是手工或者渠道手工下单
let addModel = ctx.getFieldValue("orderMode")
row['productId'] = row.productId
newData.splice(index, 1, {
...item,
......
......@@ -231,7 +231,6 @@ export const payInfo: ISchema = {
}
}
// 交付信息
const submitInfo: ISchema = {
"x-index": 1,
......@@ -249,7 +248,7 @@ const submitInfo: ISchema = {
labelAlign: 'left',
grid: true,
columns: 2,
full: true
// full: true
},
properties: {
FLEX_LAYOUT_LEFT: {
......@@ -264,7 +263,8 @@ const submitInfo: ISchema = {
"x-component-props": {
disabledDate: current => {
return current && current < moment().startOf('day')
}
},
style: { width: 400 }
}
},
}
......@@ -272,11 +272,11 @@ const submitInfo: ISchema = {
deliveryAddresId: {
type: 'string',
"x-component": 'SelectAddress',
"x-mega-props": {
style: {
full: true
}
},
// "x-mega-props": {
// style: {
// full: true
// }
// },
"x-component-props": {
dataSource: [],
times: 0,
......
......@@ -43,8 +43,8 @@ class ProductStore implements IProductModule {
slogan: this.productInfoByEdit?.slogan,
sellingPoint: this.productInfoByEdit?.sellingPoint,
commodityAreaList: this.productInfoByEdit?.commodityAreaList.map(item => [item.provinceCode, item.cityCode]),
customerCategoryId: this.productInfoByEdit?.customerCategory.fullId.split('.').map(item => Number(item) + '')
// customerCategoryId: this.productInfoByEdit?.customerCategory.parentId ? [this.productInfoByEdit?.customerCategory.parentId + '', this.productInfoByEdit?.customerCategory.id + ''] : [this.productInfoByEdit?.customerCategory.id + '']
customerCategoryId: this.productInfoByEdit?.customerCategory.fullId.split('.').map(item => Number(item) + ''),
customerCategoryName: this.productInfoByEdit?.customerCategory.fullName
}
}
......
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