Skip to content

A
admin
提交 a38d7f4f 作者: ZhangLingKun
操作

功能：eslint --fix

上级 cde9a40b
正在显示 包含 3617 行增加 和 3012 行删除
src/api/index.ts
import { PointManageAPI } from './modules/pointManageAPI'; import { PointManageAPI } from './modules/pointManageAPI';
import { ActivityManageAPI } from './modules/activityManage'; import { ActivityManageAPI } from './modules/activityManage';
import { CouponManageAPI } from './modules/couponManage' import { CouponManageAPI } from './modules/couponManage';
import { CommonAPI } from "./modules/common"; import { CommonAPI } from './modules/common';
import { MakeManageAPI } from './modules/makeManage' import { MakeManageAPI } from './modules/makeManage';
export { export { PointManageAPI, ActivityManageAPI, CommonAPI, CouponManageAPI, MakeManageAPI };
PointManageAPI,
ActivityManageAPI,
CommonAPI,
CouponManageAPI,
MakeManageAPI
};
src/api/interface/activityManage.ts
// 活动-裂变优惠券下拉类型 // 活动-裂变优惠券下拉类型
import { InterFunction, InterItemFunction } from "~/api/interface"; import { InterFunction, InterItemFunction } from '~/api/interface';
import { SplitCouponItemType } from "~/api/interface/couponManage"; import { SplitCouponItemType } from '~/api/interface/couponManage';
// 裂变优惠券-下拉 // 裂变优惠券-下拉
export type splitCouponDownType = InterFunction< export type splitCouponDownType = InterFunction<{ type: number }, SplitCouponItemType[]>;
{ type: number },
SplitCouponItemType[]
>;
// 活动新增-type // 活动新增-type
export type addActivityItemType = { export type addActivityItemType = {
...@@ -21,7 +18,7 @@ export type addActivityItemType = { ...@@ -21,7 +18,7 @@ export type addActivityItemType = {
show: number; show: number;
startTime: string; startTime: string;
time?: any[]; time?: any[];
redirectPath?: ""; redirectPath?: '';
}; };
export type addActivityType = InterFunction<addActivityItemType, null>; export type addActivityType = InterFunction<addActivityItemType, null>;
// 活动-列表 // 活动-列表
...@@ -41,7 +38,4 @@ export type activityDataType = InterFunction< ...@@ -41,7 +38,4 @@ export type activityDataType = InterFunction<
{ countFinishParticipate: number; countParticipate: number } { countFinishParticipate: number; countParticipate: number }
>; >;
// 活动-编辑 // 活动-编辑
export type activityEditType = InterFunction< export type activityEditType = InterFunction<addActivityItemType & { id: number }, null>;
addActivityItemType & { id: number },
null
>;
src/api/interface/couponManage.ts
import { import { InterFunction, InterItemFunction, InterListFunction } from '~/api/interface';
InterFunction, import { PaginationEntity } from '~/common/interface/PaginationEntity';
InterItemFunction,
InterListFunction,
} from "~/api/interface";
import { PaginationEntity } from "~/common/interface/PaginationEntity";
// 裂变优惠券-表格数据类型 // 裂变优惠券-表格数据类型
export type SplitCouponItemType = { export type SplitCouponItemType = {
...@@ -25,10 +21,7 @@ export type SplitCouponSearchType = { ...@@ -25,10 +21,7 @@ export type SplitCouponSearchType = {
useType?: number; useType?: number;
state?: boolean; state?: boolean;
}; };
export type SplitCouponListType = InterItemFunction< export type SplitCouponListType = InterItemFunction<SplitCouponSearchType, SplitCouponItemType[]>;
SplitCouponSearchType,
SplitCouponItemType[]
>;
// 裂变优惠券-新建-数据类型 // 裂变优惠券-新建-数据类型
// 基本信息 // 基本信息
export type baseInfoType = { export type baseInfoType = {
...@@ -137,13 +130,10 @@ export type couponDetailItemType = { ...@@ -137,13 +130,10 @@ export type couponDetailItemType = {
transferorTime: string; transferorTime: string;
}; };
export type couponDetailType = InterItemFunction< export type couponDetailType = InterItemFunction<couponDetailSearchType, couponDetailItemType[]>;
couponDetailSearchType,
couponDetailItemType[]
>;
export type couponDetailExportType = InterFunction< export type couponDetailExportType = InterFunction<
couponDetailSearchType & Pick<PaginationEntity, "pageNo" | "pageSize">, couponDetailSearchType & Pick<PaginationEntity, 'pageNo' | 'pageSize'>,
any any
>; >;
...@@ -157,10 +147,7 @@ export type ListBrandInfoType = InterListFunction< ...@@ -157,10 +147,7 @@ export type ListBrandInfoType = InterListFunction<
export type CouponSaveType = InterFunction<any, any>; export type CouponSaveType = InterFunction<any, any>;
// 增发优惠券 // 增发优惠券
export type CouponIncreaseType = InterFunction< export type CouponIncreaseType = InterFunction<{ id: number; count: number }, {}>;
{ id: number; count: number },
{}
>;
// 获取优惠券使用数据 // 获取优惠券使用数据
export type CouponGetDataType = InterFunction< export type CouponGetDataType = InterFunction<
......
src/api/interface/makeManage.ts
import { InterFunction, InterItemFunction } from "~/api/interface"; import { InterFunction, InterItemFunction } from '~/api/interface';
// 品牌管理-新增 // 品牌管理-新增
export type MakeAddType = InterFunction<{ brandName: string }, null>; export type MakeAddType = InterFunction<{ brandName: string }, null>;
......
src/api/modules/activityManage.ts
...@@ -5,41 +5,39 @@ import { ...@@ -5,41 +5,39 @@ import {
addActivityType, addActivityType,
endActivityType, endActivityType,
splitCouponDownType, splitCouponDownType,
} from "../interface/activityManage"; } from '../interface/activityManage';
import axios from "../request"; import axios from '../request';
export class ActivityManageAPI { export class ActivityManageAPI {
// 活动-裂变优惠券-下拉 // 活动-裂变优惠券-下拉
static getActivityCouponPullDown: splitCouponDownType = (params) => { static getActivityCouponPullDown: splitCouponDownType = (params) => {
return axios.get("userpay/coupon/back/getActivityCouponPullDown", { return axios.get('userpay/coupon/back/getActivityCouponPullDown', {
params, params,
}); });
}; };
// 活动-新增 // 活动-新增
static createActivity: addActivityType = (data) => { static createActivity: addActivityType = (data) => {
return axios.post("malluser/activity/create", data); return axios.post('malluser/activity/create', data);
}; };
// 活动-编辑 // 活动-编辑
static editActivity: activityEditType = (data) => { static editActivity: activityEditType = (data) => {
return axios.post("malluser/activity/update", data); return axios.post('malluser/activity/update', data);
}; };
// 活动-列表 // 活动-列表
static getActivityList: activeTableItemType = (params) => { static getActivityList: activeTableItemType = (params) => {
return axios.get("malluser/activity/list", { params }); return axios.get('malluser/activity/list', { params });
}; };
// 活动-结束 // 活动-结束
static endActivity: endActivityType = (params) => { static endActivity: endActivityType = (params) => {
return axios.get("malluser/activity/stop", { params }); return axios.get('malluser/activity/stop', { params });
}; };
// 活动-数据 // 活动-数据
static getActivityData: activityDataType = (params) => { static getActivityData: activityDataType = (params) => {
return axios.get("malluser/activity/dataInfo", { params }); return axios.get('malluser/activity/dataInfo', { params });
}; };
} }
src/api/modules/common.ts
import axios from "../request"; import axios from '../request';
// 运营人员 // 运营人员
export interface operateEntity { export interface operateEntity {
...@@ -14,8 +14,8 @@ export interface loginEntity { ...@@ -14,8 +14,8 @@ export interface loginEntity {
} }
export class CommonAPI { export class CommonAPI {
static Login = (data: Pick<loginEntity, "accountNo" | "passWord">): any => { static Login = (data: Pick<loginEntity, 'accountNo' | 'passWord'>): any => {
return axios.post("userservlet/auth/platformLogin", { return axios.post('userservlet/auth/platformLogin', {
...data, ...data,
portType: 1, portType: 1,
}); });
...@@ -23,21 +23,21 @@ export class CommonAPI { ...@@ -23,21 +23,21 @@ export class CommonAPI {
// 上传图片 // 上传图片
static commonUpload = (data: FormData) => { static commonUpload = (data: FormData) => {
return axios.post("ossservlet/upload/osses", data); return axios.post('ossservlet/upload/osses', data);
}; };
// 上传图片 // 上传图片
static fileUpload = (data: FormData) => { static fileUpload = (data: FormData) => {
return axios.post("ossservlet/upload/oss", data); return axios.post('ossservlet/upload/oss', data);
}; };
// 运营人员列表 // 运营人员列表
static operateList(operateName: string) { static operateList(operateName: string) {
return axios.post("orderservlet/ordertask/listOperate", { operateName }); return axios.post('orderservlet/ordertask/listOperate', { operateName });
} }
// 销售人员列表 // 销售人员列表
static getSaleList() { static getSaleList() {
return axios.get("userservlet/useraccount/getSaleList"); return axios.get('userservlet/useraccount/getSaleList');
} }
} }
src/api/modules/couponManage.ts
import axios from "../request"; import axios from '../request';
import { import {
couponDetailExportType, couponDetailExportType,
couponDetailType, couponDetailType,
...@@ -10,55 +10,55 @@ import { ...@@ -10,55 +10,55 @@ import {
ListBrandInfoType, ListBrandInfoType,
SplitCouponAddType, SplitCouponAddType,
SplitCouponListType, SplitCouponListType,
} from "~/api/interface/couponManage"; } from '~/api/interface/couponManage';
export class CouponManageAPI { export class CouponManageAPI {
// 优惠券管理-裂变优惠券列表 // 优惠券管理-裂变优惠券列表
static getPageActivityList: SplitCouponListType = (data) => { static getPageActivityList: SplitCouponListType = (data) => {
return axios.post("userpay/coupon/back/pageActivityList", data); return axios.post('userpay/coupon/back/pageActivityList', data);
}; };
// 优惠券管理-裂变优惠券新建 // 优惠券管理-裂变优惠券新建
static saveActivity: SplitCouponAddType = (data) => { static saveActivity: SplitCouponAddType = (data) => {
return axios.post("userpay/coupon/back/saveActivity", data); return axios.post('userpay/coupon/back/saveActivity', data);
}; };
// 优惠券管理-裂变优惠券新建 // 优惠券管理-裂变优惠券新建
static CouponPageList: CouponPageListType = (data) => { static CouponPageList: CouponPageListType = (data) => {
return axios.post("userpay/coupon/back/pageList", data); return axios.post('userpay/coupon/back/pageList', data);
}; };
// 优惠券明细 // 优惠券明细
static getCouponDetail: couponDetailType = (data) => { static getCouponDetail: couponDetailType = (data) => {
return axios.post("userpay/coupon/back/getUserCouponList", data); return axios.post('userpay/coupon/back/getUserCouponList', data);
}; };
// 优惠券明细-导出 // 优惠券明细-导出
static downloadCouponUserList: couponDetailExportType = (data) => { static downloadCouponUserList: couponDetailExportType = (data) => {
return axios.post("userpay/coupon/back/downloadCouponUserList", data, { return axios.post('userpay/coupon/back/downloadCouponUserList', data, {
responseType: "blob", responseType: 'blob',
}); });
}; };
// 新增优惠券 // 新增优惠券
static CouponSave: CouponSaveType = (data) => { static CouponSave: CouponSaveType = (data) => {
return axios.post("/userpay/coupon/back/save", data, { return axios.post('/userpay/coupon/back/save', data, {
headers: { "Content-Type": "multipart/form-data" }, headers: { 'Content-Type': 'multipart/form-data' },
}); });
}; };
// 增发优惠券 // 增发优惠券
static CouponIncrease: CouponIncreaseType = (params) => { static CouponIncrease: CouponIncreaseType = (params) => {
return axios.post("/userpay/coupon/back/increase", {}, { params }); return axios.post('/userpay/coupon/back/increase', {}, { params });
}; };
// 获取优惠券详情 // 获取优惠券详情
static CouponGetData: CouponGetDataType = (params) => { static CouponGetData: CouponGetDataType = (params) => {
return axios.get("/userpay/coupon/back/getData", { params }); return axios.get('/userpay/coupon/back/getData', { params });
}; };
// 关闭优惠券 // 关闭优惠券
static CouponShutDown: CouponShutDownType = (params) => { static CouponShutDown: CouponShutDownType = (params) => {
return axios.post("/userpay/coupon/back/shutDown", {}, { params }); return axios.post('/userpay/coupon/back/shutDown', {}, { params });
}; };
} }
src/api/modules/makeManage.ts
...@@ -3,27 +3,27 @@ import { ...@@ -3,27 +3,27 @@ import {
MakeDeleteType, MakeDeleteType,
MakeEditType, MakeEditType,
MakeListType, MakeListType,
} from "~/api/interface/makeManage"; } from '~/api/interface/makeManage';
import axios from "../request"; import axios from '../request';
export class MakeManageAPI { export class MakeManageAPI {
// 品牌-新增 // 品牌-新增
static addBrandInfo: MakeAddType = (params) => { static addBrandInfo: MakeAddType = (params) => {
return axios.get("uavgoods/brand/addBrandInfo", { params }); return axios.get('uavgoods/brand/addBrandInfo', { params });
}; };
// 品牌-编辑 // 品牌-编辑
static editBrandInfo: MakeEditType = (params) => { static editBrandInfo: MakeEditType = (params) => {
return axios.get("uavgoods/brand/editBrandInfo", { params }); return axios.get('uavgoods/brand/editBrandInfo', { params });
}; };
// 品牌-列表 // 品牌-列表
static getListBrandInfo: MakeListType = (params) => { static getListBrandInfo: MakeListType = (params) => {
return axios.get("uavgoods/brand/listBrandInfo", { params }); return axios.get('uavgoods/brand/listBrandInfo', { params });
}; };
// 品牌刪除 // 品牌刪除
static deleteBrandInfo: MakeDeleteType = (params) => { static deleteBrandInfo: MakeDeleteType = (params) => {
return axios.get("uavgoods/brand/deleteBrandInfo", { params }); return axios.get('uavgoods/brand/deleteBrandInfo', { params });
}; };
} }
src/assets/style/App.scss
...@@ -24,11 +24,11 @@ ...@@ -24,11 +24,11 @@
} }
.ant-table-row:nth-child(odd) { .ant-table-row:nth-child(odd) {
background: #FCFCFC; background: #fcfcfc;
} }
.ant-table-row:nth-child(odd) > td { .ant-table-row:nth-child(odd) > td {
background: #FCFCFC; background: #fcfcfc;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
......
src/common/hook/optionHook/index.tsx
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react';
import { RoleAPI } from "@/api"; import { RoleAPI } from '@/api';
import { limitEntity } from "@/api/modules/role"; import { limitEntity } from '@/api/modules/role';
function useOptionShow(id: number) { function useOptionShow(id: number) {
// const [show, setShow] = useState<boolean>(false); // const [show, setShow] = useState<boolean>(false);
return JSON.parse(localStorage.getItem("routeList") as string)?.some( return JSON.parse(localStorage.getItem('routeList') as string)?.some(
(v: limitEntity) => v.id === id (v: limitEntity) => v.id === id,
); );
// useEffect(() => { // useEffect(() => {
// RoleAPI.getListCuserMenuInfo().then((res: any) => { // RoleAPI.getListCuserMenuInfo().then((res: any) => {
......
src/components/box/index.tsx
import React from "react"; import React from 'react';
import "./index.scss"; import './index.scss';
interface PropsType { interface PropsType {
children: React.ReactNode; children: React.ReactNode;
} }
const Box: React.FC<PropsType> = ({ children }) => { const Box: React.FC<PropsType> = ({ children }) => {
return <div className="box-wrap">{children}</div>; return <div className='box-wrap'>{children}</div>;
}; };
export default Box; export default Box;
src/components/layout/index.scss
//$page-background: #F6F7FB; //$page-background: #F6F7FB;
$page-background: #F3F6FF ; $page-background: #f3f6ff;
.layout-view { .layout-view {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
.layout-bg{ .layout-bg {
background: $page-background; background: $page-background;
} }
...@@ -47,7 +47,7 @@ $page-background: #F3F6FF ; ...@@ -47,7 +47,7 @@ $page-background: #F3F6FF ;
.ant-menu-dark { .ant-menu-dark {
background: transparent; background: transparent;
} }
.ant-layout-sider-children{ .ant-layout-sider-children {
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
} }
...@@ -76,7 +76,7 @@ $page-background: #F3F6FF ; ...@@ -76,7 +76,7 @@ $page-background: #F3F6FF ;
background-color: #fff; background-color: #fff;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
color: #556DA7; color: #556da7;
} }
.sider-collapsed { .sider-collapsed {
...@@ -98,11 +98,11 @@ $page-background: #F3F6FF ; ...@@ -98,11 +98,11 @@ $page-background: #F3F6FF ;
} }
} }
:where(.css-dev-only-do-not-override-rvhhh3).ant-menu-light.ant-menu-inline .ant-menu-sub.ant-menu-inline { :where(.css-dev-only-do-not-override-rvhhh3).ant-menu-light.ant-menu-inline
.ant-menu-sub.ant-menu-inline {
background: none; background: none;
} }
.layout-logo { .layout-logo {
height: 100%; height: 100%;
//width: 170px; //width: 170px;
...@@ -162,7 +162,7 @@ $page-background: #F3F6FF ; ...@@ -162,7 +162,7 @@ $page-background: #F3F6FF ;
.user-name { .user-name {
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
color: #556DA7 ; color: #556da7;
//color: #F6F7FB; //color: #F6F7FB;
} }
} }
...@@ -171,7 +171,7 @@ $page-background: #F3F6FF ; ...@@ -171,7 +171,7 @@ $page-background: #F3F6FF ;
margin-right: 10px; margin-right: 10px;
width: 24px; width: 24px;
height: 24px; height: 24px;
border:1px solid #ffffff; border: 1px solid #ffffff;
//border:1px solid #1677ff; //border:1px solid #1677ff;
border-radius: 2px; border-radius: 2px;
padding: 0; padding: 0;
......
src/components/layout/title/index.scss
...@@ -11,16 +11,15 @@ ...@@ -11,16 +11,15 @@
.hamburger.is-active { .hamburger.is-active {
transform: rotate(180deg) translateY(3px); transform: rotate(180deg) translateY(3px);
} }
.effective{ .effective {
.ant-btn-default{ .ant-btn-default {
// display: none; // display: none;
background-color: #1677ff !important; background-color: #1677ff !important;
&:hover { &:hover {
background-color: #4893fd !important; background-color: #4893fd !important;
} }
} }
.ant-btn-primary{ .ant-btn-primary {
display: none; display: none;
} }
} }
src/components/search-box/index.scss
...@@ -27,23 +27,26 @@ ...@@ -27,23 +27,26 @@
margin-bottom: 15px; margin-bottom: 15px;
padding-right: 15px; padding-right: 15px;
div, .ant-btn { div,
.ant-btn {
margin-right: 10px; margin-right: 10px;
} }
div:last-child, .ant-btn:last-child { div:last-child,
.ant-btn:last-child {
margin-right: 0 !important; margin-right: 0 !important;
} }
.backButton{ .backButton {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
} }
} }
.search-sufFixBtn{ .search-sufFixBtn {
margin-bottom: 10px; margin-bottom: 10px;
div, .ant-btn { div,
.ant-btn {
margin-right: 10px; margin-right: 10px;
} }
} }
......
src/components/search-box/index.tsx
import { Form, Input, Button, Select, DatePicker } from "antd"; import { Form, Input, Button, Select, DatePicker } from 'antd';
import moment from "dayjs"; import moment from 'dayjs';
import { import { SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons';
SearchOutlined, import React, { useImperativeHandle } from 'react';
ReloadOutlined, import './index.scss';
ExportOutlined,
} from "@ant-design/icons";
import React, { useImperativeHandle } from "react";
import "./index.scss";
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
// 搜索列表的类型 // 搜索列表的类型
export interface searchColumns { export interface searchColumns {
type: "input" | "select" | "rangePicker" | "DatePicker" | "Select"; type: 'input' | 'select' | 'rangePicker' | 'DatePicker' | 'Select';
label?: string; label?: string;
name: string; name: string;
placeholder: string; placeholder: string;
...@@ -27,7 +23,7 @@ export interface searchColumns { ...@@ -27,7 +23,7 @@ export interface searchColumns {
onSelect?: (value: any) => void; onSelect?: (value: any) => void;
disable?: boolean; disable?: boolean;
onChange?: any; onChange?: any;
showTime?: { format: "HH:mm:ss" }; showTime?: { format: 'HH:mm:ss' };
} }
// 组件的类型 // 组件的类型
...@@ -69,18 +65,17 @@ const Index: React.FC<propsType> = (props) => { ...@@ -69,18 +65,17 @@ const Index: React.FC<propsType> = (props) => {
const handleSubmit = (data: any) => { const handleSubmit = (data: any) => {
// console.log("提交数据 --->", data); // console.log("提交数据 --->", data);
if (data.startTime) { if (data.startTime) {
data.startTime = moment(data.startTime).format("YYYY-MM-DD"); data.startTime = moment(data.startTime).format('YYYY-MM-DD');
} else { } else {
data.startTime = undefined; data.startTime = undefined;
} }
Object.keys(data).forEach((k) => { Object.keys(data).forEach((k) => {
const isRangPicker: boolean | undefined = const isRangPicker: boolean | undefined =
props.search && props.search && props.search.some((v) => v.name === k && v.type === 'rangePicker');
props.search.some((v) => v.name === k && v.type === "rangePicker");
if (Array.isArray(data[k]) && isRangPicker) { if (Array.isArray(data[k]) && isRangPicker) {
data[k] = [ data[k] = [
`${moment(data[k][0]).format("YYYY-MM-DD")} 00:00:00`, `${moment(data[k][0]).format('YYYY-MM-DD')} 00:00:00`,
`${moment(data[k][1]).format("YYYY-MM-DD")} 23:59:59`, `${moment(data[k][1]).format('YYYY-MM-DD')} 23:59:59`,
]; ];
} }
}); });
...@@ -94,38 +89,34 @@ const Index: React.FC<propsType> = (props) => { ...@@ -94,38 +89,34 @@ const Index: React.FC<propsType> = (props) => {
props.exportEvent(); props.exportEvent();
}; };
return ( return (
<div className="header"> <div className='header'>
{props?.preFixBtn && ( {props?.preFixBtn && <div className='search-children'>{props?.preFixBtn}</div>}
<div className="search-children">{props?.preFixBtn}</div>
)}
<Form <Form
layout="inline" layout='inline'
form={form} form={form}
initialValues={{ layout: "inline" }} initialValues={{ layout: 'inline' }}
onFinish={handleSubmit} onFinish={handleSubmit}
> >
{props?.child && <div className="search-children">{props?.child}</div>} {props?.child && <div className='search-children'>{props?.child}</div>}
{props?.children && ( {props?.children && <div className='search-children'>{props?.children}</div>}
<div className="search-children">{props?.children}</div>
)}
{props?.search?.map((item: any) => { {props?.search?.map((item: any) => {
return ( return (
<Form.Item <Form.Item
name={item.name} name={item.name}
label={item.label} label={item.label}
key={item.name} key={item.name}
style={{ marginBottom: "10px" }} style={{ marginBottom: '10px' }}
> >
{item.type === "input" ? ( {item.type === 'input' ? (
<Input <Input
placeholder={item.placeholder} placeholder={item.placeholder}
allowClear allowClear
style={{ width: item.width ? `${item.width}px` : "150px" }} style={{ width: item.width ? `${item.width}px` : '150px' }}
maxLength={50} maxLength={50}
/> />
) : item.type === "select" ? ( ) : item.type === 'select' ? (
<Select <Select
style={{ width: item.width ? `${item.width}px` : "200px" }} style={{ width: item.width ? `${item.width}px` : '200px' }}
placeholder={item.placeholder} placeholder={item.placeholder}
allowClear allowClear
> >
...@@ -137,14 +128,14 @@ const Index: React.FC<propsType> = (props) => { ...@@ -137,14 +128,14 @@ const Index: React.FC<propsType> = (props) => {
); );
})} })}
</Select> </Select>
) : item.type === "Select" ? ( ) : item.type === 'Select' ? (
<Select <Select
style={{ width: item.width ? `${item.width}px` : "200px" }} style={{ width: item.width ? `${item.width}px` : '200px' }}
placeholder={item.placeholder} placeholder={item.placeholder}
allowClear allowClear
options={item.options} options={item.options}
/> />
) : item.type === "rangePicker" ? ( ) : item.type === 'rangePicker' ? (
<RangePicker <RangePicker
// showTime={{ // showTime={{
// // hideDisabledOptions: true, // // hideDisabledOptions: true,
...@@ -153,64 +144,48 @@ const Index: React.FC<propsType> = (props) => { ...@@ -153,64 +144,48 @@ const Index: React.FC<propsType> = (props) => {
// moment("23:59:59", "HH:mm:ss"), // moment("23:59:59", "HH:mm:ss"),
// ], // ],
// }} // }}
format="YYYY-MM-DD" format='YYYY-MM-DD'
style={{ width: item.width ? `${item.width}px` : "220px" }} style={{ width: item.width ? `${item.width}px` : '220px' }}
/> />
) : item.type === "DatePicker" ? ( ) : item.type === 'DatePicker' ? (
<DatePicker <DatePicker
showTime={item.showTime} showTime={item.showTime}
style={{ width: item.width ? `${item.width}px` : "180px" }} style={{ width: item.width ? `${item.width}px` : '180px' }}
/> />
) : ( ) : (
"" ''
)} )}
</Form.Item> </Form.Item>
); );
})} })}
{props?.search && props?.search?.length > 0 && ( {props?.search && props?.search?.length > 0 && (
<> <>
<Form.Item style={{ marginBottom: "10px" }}> <Form.Item style={{ marginBottom: '10px' }}>
<Button <Button type='primary' htmlType='submit' icon={<SearchOutlined />}>
type="primary"
htmlType="submit"
icon={<SearchOutlined />}
>
搜索 搜索
</Button> </Button>
</Form.Item> </Form.Item>
<Form.Item style={{ marginBottom: "10px" }}> <Form.Item style={{ marginBottom: '10px' }}>
<Button <Button type='primary' onClick={handleRest} icon={<ReloadOutlined />}>
type="primary"
onClick={handleRest}
icon={<ReloadOutlined />}
>
重置 重置
</Button> </Button>
</Form.Item> </Form.Item>
{!!props.otherChild && ( {!!props.otherChild && (
<Form.Item style={{ marginBottom: "10px" }}> <Form.Item style={{ marginBottom: '10px' }}>{props.otherChild}</Form.Item>
{props.otherChild}
</Form.Item>
)} )}
</> </>
)} )}
{props.isExport ? ( {props.isExport ? (
<Form.Item style={{ marginBottom: "10px" }}> <Form.Item style={{ marginBottom: '10px' }}>
<Button <Button type='primary' onClick={exportClick} icon={<ExportOutlined />}>
type="primary"
onClick={exportClick}
icon={<ExportOutlined />}
>
导出 导出
</Button> </Button>
</Form.Item> </Form.Item>
) : ( ) : (
"" ''
)} )}
</Form> </Form>
{!!props?.sufFixBtn && ( {!!props?.sufFixBtn && <div className='search-sufFixBtn'>{props?.sufFixBtn}</div>}
<div className="search-sufFixBtn">{props?.sufFixBtn}</div>
)}
</div> </div>
); );
}; };
......
src/components/tableBox/index.tsx
import React from "react"; import React from 'react';
interface PropsType { interface PropsType {
children: React.ReactNode; children: React.ReactNode;
...@@ -6,5 +6,5 @@ interface PropsType { ...@@ -6,5 +6,5 @@ interface PropsType {
export const TableBox: React.FC<PropsType> = (props) => { export const TableBox: React.FC<PropsType> = (props) => {
const { children } = props; const { children } = props;
return <div className="table-body-box">{children}</div>; return <div className='table-body-box'>{children}</div>;
}; };
src/pages/activityManage/activityList/components/activityDataModal/index.tsx
import { Modal, Table } from "antd"; import { Modal, Table } from 'antd';
import { FC } from "react"; import { FC } from 'react';
import { ColumnsType } from "antd/es/table"; import { ColumnsType } from 'antd/es/table';
import { PropsType } from "~/common/interface/modal"; import { PropsType } from '~/common/interface/modal';
import { activityDataType } from "~/api/interface/activityManage"; import { activityDataType } from '~/api/interface/activityManage';
// 活动数据-类型 // 活动数据-类型
type dataType = (ReturnType<activityDataType> extends Promise<infer T> type dataType = (ReturnType<activityDataType> extends Promise<infer T> ? T : never)['result'];
? T
: never)["result"];
interface selfProps { interface selfProps {
activityData: dataType | undefined; activityData: dataType | undefined;
} }
const ActivityDataModal: FC< const ActivityDataModal: FC<Pick<PropsType, 'isModalVisible' | 'handleCancel'> & selfProps> = ({
Pick<PropsType, "isModalVisible" | "handleCancel"> & selfProps isModalVisible,
> = ({ isModalVisible, handleCancel, activityData }) => { handleCancel,
activityData,
}) => {
const columns: ColumnsType<dataType> = [ const columns: ColumnsType<dataType> = [
{ {
title: "参与总人数", title: '参与总人数',
dataIndex: "countFinishParticipate", dataIndex: 'countFinishParticipate',
align: "center", align: 'center',
}, },
{ {
title: "参与成功人数", title: '参与成功人数',
dataIndex: "countParticipate", dataIndex: 'countParticipate',
align: "center", align: 'center',
}, },
]; ];
return ( return (
<Modal <Modal open={isModalVisible} title='活动数据' onCancel={() => handleCancel()} footer={null}>
open={isModalVisible}
title="活动数据"
onCancel={() => handleCancel()}
footer={null}
>
{activityData && ( {activityData && (
<Table <Table
columns={columns} columns={columns}
pagination={false} pagination={false}
dataSource={[activityData]} dataSource={[activityData]}
bordered bordered
rowKey="countFinishParticipate" rowKey='countFinishParticipate'
/> />
)} )}
</Modal> </Modal>
......
src/pages/activityManage/activityList/components/addOrEditModal/index.tsx
import { import { FC, ForwardedRef, forwardRef, useState, useImperativeHandle } from 'react';
FC, import { DatePicker, Form, Input, message, Modal, Radio, Select, Upload } from 'antd';
ForwardedRef, import { PlusOutlined } from '@ant-design/icons';
forwardRef, import type { UploadFile } from 'antd/es/upload/interface';
useState, import dayjs from 'dayjs';
useImperativeHandle,
} from "react";
import {
DatePicker,
Form,
Input,
message,
Modal,
Radio,
Select,
Upload,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import type { UploadFile } from "antd/es/upload/interface";
import dayjs from "dayjs";
import { RangePickerProps } from "antd/es/date-picker"; import { RangePickerProps } from 'antd/es/date-picker';
import { PropsType } from "~/common/interface/modal"; import { PropsType } from '~/common/interface/modal';
import { CommonAPI } from "~/api"; import { CommonAPI } from '~/api';
import { SplitCouponItemType } from "~/api/interface/couponManage"; import { SplitCouponItemType } from '~/api/interface/couponManage';
import { addActivityItemType } from "~/api/interface/activityManage"; import { addActivityItemType } from '~/api/interface/activityManage';
import {ActivityManageAPI} from "~/api/modules/activityManage"; import { ActivityManageAPI } from '~/api/modules/activityManage';
interface selfProps { interface selfProps {
couponData: SplitCouponItemType[]; couponData: SplitCouponItemType[];
...@@ -33,17 +18,7 @@ interface selfProps { ...@@ -33,17 +18,7 @@ interface selfProps {
} }
const AddOrEditModal: FC<PropsType & selfProps> = forwardRef( const AddOrEditModal: FC<PropsType & selfProps> = forwardRef(
( ({ isModalVisible, handleOk, handleCancel, couponData, activityTypeChangeEvent, title }, ref) => {
{
isModalVisible,
handleOk,
handleCancel,
couponData,
activityTypeChangeEvent,
title,
},
ref
) => {
const [createActivityForm] = Form.useForm< const [createActivityForm] = Form.useForm<
Exclude< Exclude<
addActivityItemType, addActivityItemType,
...@@ -61,32 +36,21 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef( ...@@ -61,32 +36,21 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef(
const [fileList, setFileList] = useState<UploadFile[]>([]); const [fileList, setFileList] = useState<UploadFile[]>([]);
const handleOkEvent = () => { const handleOkEvent = () => {
createActivityForm.validateFields().then((value: any) => { createActivityForm.validateFields().then((value: any) => {
const splitCouponItem = couponData.find( const splitCouponItem = couponData.find((v) => v.id === value.bindingCouponId);
(v) => v.id === value.bindingCouponId const startTime = `${dayjs(value.time[0]).format('YYYY-MM-DD')} 00:00:00`;
); const endTime = `${dayjs(value.time[1]).format('YYYY-MM-DD')} 23:59:59`;
const startTime = `${dayjs(value.time[0]).format(
"YYYY-MM-DD"
)} 00:00:00`;
const endTime = `${dayjs(value.time[1]).format("YYYY-MM-DD")} 23:59:59`;
delete value.time; delete value.time;
ActivityManageAPI[ ActivityManageAPI[activityId === -1 ? 'createActivity' : 'editActivity']({
activityId === -1 ? "createActivity" : "editActivity"
]({
id: activityId === -1 ? undefined : activityId, id: activityId === -1 ? undefined : activityId,
...value, ...value,
limitNum: Number(value.limitNum), limitNum: Number(value.limitNum),
helpType: helpType: splitCouponItem?.beSharedCoupon?.userTag || splitCouponItem?.userTag,
splitCouponItem?.beSharedCoupon?.userTag || shareNum: currentActivityType === 1 ? splitCouponItem?.peopleNumber : undefined,
splitCouponItem?.userTag,
shareNum:
currentActivityType === 1
? splitCouponItem?.peopleNumber
: undefined,
startTime, startTime,
endTime, endTime,
}).then(({ code }) => { }).then(({ code }) => {
if (code === "200") { if (code === '200') {
message.success(activityId ? "编辑成功" : "新增成功"); message.success(activityId ? '编辑成功' : '新增成功');
createActivityForm.resetFields(); createActivityForm.resetFields();
setFileList([]); setFileList([]);
handleOk(); handleOk();
...@@ -104,24 +68,24 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef( ...@@ -104,24 +68,24 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef(
const reg = /\/(png|jpg|gif|jpeg|webp)$/; const reg = /\/(png|jpg|gif|jpeg|webp)$/;
const isType = reg.test(file.type as string); const isType = reg.test(file.type as string);
if (!isType) { if (!isType) {
message.warning("文件格式错误"); message.warning('文件格式错误');
} }
return isType; return isType;
}; };
const customRequest = (value: any) => { const customRequest = (value: any) => {
const formData = new FormData(); const formData = new FormData();
formData.append("uploadFile", value.file); formData.append('uploadFile', value.file);
CommonAPI.commonUpload(formData).then((res: any) => { CommonAPI.commonUpload(formData).then((res: any) => {
if (res.code === "200") { if (res.code === '200') {
setFileList([ setFileList([
{ {
uid: "uid", uid: 'uid',
name: "image", name: 'image',
url: res.result[0], url: res.result[0],
status: "done", status: 'done',
}, },
]); ]);
createActivityForm.setFieldValue("activityImg", res.result[0]); createActivityForm.setFieldValue('activityImg', res.result[0]);
} }
}); });
}; };
...@@ -129,12 +93,12 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef( ...@@ -129,12 +93,12 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef(
const list = fileList.filter((v: UploadFile) => v.uid !== file.uid); const list = fileList.filter((v: UploadFile) => v.uid !== file.uid);
setFileList(list); setFileList(list);
setTimeout(() => { setTimeout(() => {
createActivityForm.setFieldValue("activityImg", undefined); createActivityForm.setFieldValue('activityImg', undefined);
}); });
}; };
// 活动类型改变 // 活动类型改变
const activityTypeChange = (e: any) => { const activityTypeChange = (e: any) => {
createActivityForm.setFieldValue("bindingCouponId", undefined); createActivityForm.setFieldValue('bindingCouponId', undefined);
setCurrentActivityType(e.target.value); setCurrentActivityType(e.target.value);
activityTypeChangeEvent(e.target.value); activityTypeChangeEvent(e.target.value);
}; };
...@@ -142,7 +106,7 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef( ...@@ -142,7 +106,7 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef(
const negativeNumberValidator = ( const negativeNumberValidator = (
rule: any, rule: any,
value: string, value: string,
callback: (error?: string) => void callback: (error?: string) => void,
) => { ) => {
if (!value) { if (!value) {
return Promise.reject(new Error(`请输入参与次数!`)); return Promise.reject(new Error(`请输入参与次数!`));
...@@ -152,7 +116,7 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef( ...@@ -152,7 +116,7 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef(
return Promise.reject(new Error(`参与次数为非零的正整数!`)); return Promise.reject(new Error(`参与次数为非零的正整数!`));
} }
if (Number(value) > 5) { if (Number(value) > 5) {
return Promise.reject(new Error("参与次数最大值为5!")); return Promise.reject(new Error('参与次数最大值为5!'));
} }
// const bindingCouponId = // const bindingCouponId =
// createActivityForm.getFieldValue("bindingCouponId"); // createActivityForm.getFieldValue("bindingCouponId");
...@@ -167,7 +131,7 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef( ...@@ -167,7 +131,7 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef(
return Promise.resolve(); return Promise.resolve();
}; };
// rangPicker disabledDate // rangPicker disabledDate
const disabledDate: RangePickerProps["disabledDate"] = (currentDate) => { const disabledDate: RangePickerProps['disabledDate'] = (currentDate) => {
// const bindingCouponId = createActivityForm.getFieldValue("bindingCouponId"); // const bindingCouponId = createActivityForm.getFieldValue("bindingCouponId");
// const couponObj = couponData.find((v) => v.id === bindingCouponId); // const couponObj = couponData.find((v) => v.id === bindingCouponId);
// const activityType = createActivityForm.getFieldValue("activityType"); // const activityType = createActivityForm.getFieldValue("activityType");
...@@ -188,7 +152,7 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef( ...@@ -188,7 +152,7 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef(
// ); // );
// } // }
// } // }
return currentDate < dayjs().subtract(1, "day"); return currentDate < dayjs().subtract(1, 'day');
}; };
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
getForm: () => createActivityForm, getForm: () => createActivityForm,
...@@ -200,12 +164,7 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef( ...@@ -200,12 +164,7 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef(
}, },
})); }));
return ( return (
<Modal <Modal open={isModalVisible} onOk={handleOkEvent} onCancel={handleCancelEvent} title={title}>
open={isModalVisible}
onOk={handleOkEvent}
onCancel={handleCancelEvent}
title={title}
>
<Form <Form
labelCol={{ span: 5 }} labelCol={{ span: 5 }}
wrapperCol={{ span: 14 }} wrapperCol={{ span: 14 }}
...@@ -213,48 +172,46 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef( ...@@ -213,48 +172,46 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef(
initialValues={{ show: 1, activityType: 1 }} initialValues={{ show: 1, activityType: 1 }}
> >
<Form.Item <Form.Item
label="活动标题" label='活动标题'
name="activityName" name='activityName'
rules={[{ required: true, message: "请输入活动标题!" }]} rules={[{ required: true, message: '请输入活动标题!' }]}
> >
<Input placeholder="请输入活动标题" maxLength={25} /> <Input placeholder='请输入活动标题' maxLength={25} />
</Form.Item> </Form.Item>
<Form.Item label="活动类型" name="activityType"> <Form.Item label='活动类型' name='activityType'>
<Radio.Group onChange={activityTypeChange}> <Radio.Group onChange={activityTypeChange}>
<Radio value={1}>裂变活动</Radio> <Radio value={1}>裂变活动</Radio>
<Radio value={2}>普通活动</Radio> <Radio value={2}>普通活动</Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item label="活动中心展示" name="show"> <Form.Item label='活动中心展示' name='show'>
<Radio.Group> <Radio.Group>
<Radio value={1}>是</Radio> <Radio value={1}>是</Radio>
<Radio value={0}>否</Radio> <Radio value={0}>否</Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="推广简图" label='推广简图'
name="activityImg" name='activityImg'
rules={[{ required: true, message: "请上传推广简图!" }]} rules={[{ required: true, message: '请上传推广简图!' }]}
> >
<Upload <Upload
listType="picture-card" listType='picture-card'
fileList={fileList} fileList={fileList}
beforeUpload={beforeUpload} beforeUpload={beforeUpload}
customRequest={customRequest} customRequest={customRequest}
onRemove={onRemove} onRemove={onRemove}
accept="image/*" accept='image/*'
> >
{fileList.length < 1 && <PlusOutlined />} {fileList.length < 1 && <PlusOutlined />}
</Upload> </Upload>
</Form.Item> </Form.Item>
<Form.Item label="关联优惠券" name="bindingCouponId"> <Form.Item label='关联优惠券' name='bindingCouponId'>
<Select <Select
placeholder="请选择关联优惠券" placeholder='请选择关联优惠券'
showSearch showSearch
filterOption={(input, option: any) => filterOption={(input, option: any) =>
(option!.children as unknown as string) (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
.toLowerCase()
.includes(input.toLowerCase())
} }
> >
{couponData.map((v) => ( {couponData.map((v) => (
...@@ -266,24 +223,24 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef( ...@@ -266,24 +223,24 @@ const AddOrEditModal: FC<PropsType & selfProps> = forwardRef(
</Form.Item> </Form.Item>
{currentActivityType === 1 && ( {currentActivityType === 1 && (
<Form.Item <Form.Item
label="参与次数" label='参与次数'
name="limitNum" name='limitNum'
rules={[{ required: true, validator: negativeNumberValidator }]} rules={[{ required: true, validator: negativeNumberValidator }]}
> >
<Input placeholder="请输入参与次数" suffix="次" /> <Input placeholder='请输入参与次数' suffix='次' />
</Form.Item> </Form.Item>
)} )}
<Form.Item <Form.Item
label="生效时间" label='生效时间'
rules={[{ required: true, message: "请选择生效时间!" }]} rules={[{ required: true, message: '请选择生效时间!' }]}
name="time" name='time'
> >
<DatePicker.RangePicker disabledDate={disabledDate} /> <DatePicker.RangePicker disabledDate={disabledDate} />
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>
); );
} },
); );
export default AddOrEditModal; export default AddOrEditModal;
src/pages/activityManage/activityList/index.tsx
import { FC, useEffect, useRef, useState } from "react"; import { FC, useEffect, useRef, useState } from 'react';
import { Button, Image, message, Modal, Table } from "antd"; import { Button, Image, message, Modal, Table } from 'antd';
import { ColumnsType } from "antd/es/table"; import { ColumnsType } from 'antd/es/table';
import dayjs from "dayjs"; import dayjs from 'dayjs';
import Box from "~/components/box"; import Box from '~/components/box';
import AddOrEditModal from "./components/addOrEditModal"; import AddOrEditModal from './components/addOrEditModal';
import ActivityDataModal from "./components/activityDataModal"; import ActivityDataModal from './components/activityDataModal';
import { ActivityManageAPI } from "~/api/modules/activityManage"; import { ActivityManageAPI } from '~/api/modules/activityManage';
import { SplitCouponItemType } from "~/api/interface/couponManage"; import { SplitCouponItemType } from '~/api/interface/couponManage';
import { PaginationEntity } from "~/common/interface/PaginationEntity"; import { PaginationEntity } from '~/common/interface/PaginationEntity';
import { import { activityDataType, activityItemType } from '~/api/interface/activityManage';
activityDataType, import useOperate from '~/common/hook/optionHook';
activityItemType,
} from "~/api/interface/activityManage";
import useOperate from "~/common/hook/optionHook";
// 活动数据-类型 // 活动数据-类型
type dataType = (ReturnType<activityDataType> extends Promise<infer T> type dataType = (ReturnType<activityDataType> extends Promise<infer T> ? T : never)['result'];
? T
: never)["result"];
const ActivityList: FC<{}> = () => { const ActivityList: FC<{}> = () => {
const activityRef = useRef(); const activityRef = useRef();
const tableColumns: ColumnsType<activityItemType> = [ const tableColumns: ColumnsType<activityItemType> = [
{ {
title: "ID", title: 'ID',
align: "center", align: 'center',
dataIndex: "id", dataIndex: 'id',
}, },
{ {
title: "活动标题", title: '活动标题',
align: "center", align: 'center',
dataIndex: "activityName", dataIndex: 'activityName',
}, },
{ {
title: "活动类型", title: '活动类型',
align: "center", align: 'center',
dataIndex: "activityType", dataIndex: 'activityType',
render: (text: string, record: activityItemType) => ( render: (text: string, record: activityItemType) => (
<div>{record.activityType === 1 ? "裂变活动" : "普通活动"}</div> <div>{record.activityType === 1 ? '裂变活动' : '普通活动'}</div>
), ),
}, },
{ {
title: "是否展示", title: '是否展示',
align: "center", align: 'center',
render: (text: number, record: activityItemType) => ( render: (text: number, record: activityItemType) => (
<div>{record.show ? "展示" : "隐藏"}</div> <div>{record.show ? '展示' : '隐藏'}</div>
), ),
}, },
{ {
title: "推广简图", title: '推广简图',
align: "center", align: 'center',
render: (text: string, record: activityItemType) => ( render: (text: string, record: activityItemType) => (
<Image src={record.activityImg} width={50} /> <Image src={record.activityImg} width={50} />
), ),
}, },
{ {
title: "关联优惠", title: '关联优惠',
align: "center", align: 'center',
dataIndex: "bindingCouponName", dataIndex: 'bindingCouponName',
}, },
{ {
title: "参与次数", title: '参与次数',
align: "center", align: 'center',
dataIndex: "limitNum", dataIndex: 'limitNum',
}, },
{ {
title: "状态", title: '状态',
align: "center", align: 'center',
render: (text: string, record: activityItemType) => render: (text: string, record: activityItemType) =>
record.activityStatus === 1 ? "进行中" : "已下线", record.activityStatus === 1 ? '进行中' : '已下线',
}, },
{ {
title: "有效期", title: '有效期',
align: "center", align: 'center',
render: (text: string, record: activityItemType) => ( render: (text: string, record: activityItemType) => (
<div> <div>
<div>起：{record.startTime}</div> <div>起：{record.startTime}</div>
...@@ -81,12 +76,12 @@ const ActivityList: FC<{}> = () => { ...@@ -81,12 +76,12 @@ const ActivityList: FC<{}> = () => {
), ),
}, },
{ {
title: "操作", title: '操作',
align: "center", align: 'center',
render: (text: string, record: activityItemType, index: number) => ( render: (text: string, record: activityItemType, index: number) => (
<> <>
<Button <Button
type="link" type='link'
onClick={() => endActivityClick(record)} onClick={() => endActivityClick(record)}
disabled={record.activityStatus !== 1 || !isEndBtnShow} disabled={record.activityStatus !== 1 || !isEndBtnShow}
> >
...@@ -95,11 +90,7 @@ const ActivityList: FC<{}> = () => { ...@@ -95,11 +90,7 @@ const ActivityList: FC<{}> = () => {
{/* <Button type="link" onClick={() => addOrEditActivity(record)}> */} {/* <Button type="link" onClick={() => addOrEditActivity(record)}> */}
{/* 编辑 */} {/* 编辑 */}
{/* </Button> */} {/* </Button> */}
<Button <Button type='link' onClick={() => showActivityData(record)} disabled={!isDataBtnShow}>
type="link"
onClick={() => showActivityData(record)}
disabled={!isDataBtnShow}
>
数据 数据
</Button> </Button>
</> </>
...@@ -116,98 +107,99 @@ const ActivityList: FC<{}> = () => { ...@@ -116,98 +107,99 @@ const ActivityList: FC<{}> = () => {
// 活动数据 // 活动数据
const [activityData, setActivityData] = useState<dataType>(); const [activityData, setActivityData] = useState<dataType>();
const [addOrEditModalShow, setAddOrEditModalShow] = useState<boolean>(false); const [addOrEditModalShow, setAddOrEditModalShow] = useState<boolean>(false);
const [addOrEditModalTitle, setAddOrEditModalTitle] = useState("创建活动"); const [addOrEditModalTitle, setAddOrEditModalTitle] = useState('创建活动');
const [activityDataModalShow, setActivityDataModalShow] = const [activityDataModalShow, setActivityDataModalShow] = useState<boolean>(false);
useState<boolean>(false);
const [couponData, setCouponData] = useState<SplitCouponItemType[]>([]); const [couponData, setCouponData] = useState<SplitCouponItemType[]>([]);
// 按钮权限 // 按钮权限
const isEndBtnShow = useOperate(19150); const isEndBtnShow = useOperate(19150);
const isDataBtnShow = useOperate(19200); const isDataBtnShow = useOperate(19200);
// 活动列表 // 活动列表
const getActivityList = ( const getActivityList = (data: Pick<PaginationEntity, 'pageNo' | 'pageSize'>) => {
data: Pick<PaginationEntity, "pageNo" | "pageSize">
) => {
// setLoading(true); // setLoading(true);
const list:any =[ const list: any = [
{ {
"id": 4, id: 4,
"activityName": "裂变活动测试", activityName: '裂变活动测试',
"activityCode": "AC77674", activityCode: 'AC77674',
"activityImg": "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/87681f78-67db-4603-aaf3-4bdbdb4546d2.jpg", activityImg:
"bindingCouponId": 10000148, 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/87681f78-67db-4603-aaf3-4bdbdb4546d2.jpg',
"bindingCouponName": "裂变优惠券测试", bindingCouponId: 10000148,
"activityStatus": 2, bindingCouponName: '裂变优惠券测试',
"activityType": 1, activityStatus: 2,
"shareNum": 2, activityType: 1,
"startTime": "2023-04-23 00:00:00", shareNum: 2,
"endTime": "2023-04-30 23:59:59", startTime: '2023-04-23 00:00:00',
"limitNum": 1, endTime: '2023-04-30 23:59:59',
"deleted": null, limitNum: 1,
"show": 1, deleted: null,
"redirectPath": null, show: 1,
"couponActivityDTO": null, redirectPath: null,
"couponDTO": null couponActivityDTO: null,
couponDTO: null,
}, },
{ {
"id": 3, id: 3,
"activityName": "裂变活动测试", activityName: '裂变活动测试',
"activityCode": "AC55159", activityCode: 'AC55159',
"activityImg": "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/6e4f318f-3081-43b7-ad6a-79afabd9ddb9.jpg", activityImg:
"bindingCouponId": 10000141, 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/6e4f318f-3081-43b7-ad6a-79afabd9ddb9.jpg',
"bindingCouponName": "测试裂变", bindingCouponId: 10000141,
"activityStatus": 2, bindingCouponName: '测试裂变',
"activityType": 1, activityStatus: 2,
"shareNum": 2, activityType: 1,
"startTime": "2023-04-23 00:00:00", shareNum: 2,
"endTime": "2023-04-30 23:59:59", startTime: '2023-04-23 00:00:00',
"limitNum": 1, endTime: '2023-04-30 23:59:59',
"deleted": null, limitNum: 1,
"show": 1, deleted: null,
"redirectPath": null, show: 1,
"couponActivityDTO": null, redirectPath: null,
"couponDTO": null couponActivityDTO: null,
couponDTO: null,
}, },
{ {
"id": 2, id: 2,
"activityName": "认证裂变", activityName: '认证裂变',
"activityCode": "AC17946", activityCode: 'AC17946',
"activityImg": "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/b22e0f43-fd04-4147-adc6-73d96b76c740.png", activityImg:
"bindingCouponId": null, 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/b22e0f43-fd04-4147-adc6-73d96b76c740.png',
"bindingCouponName": null, bindingCouponId: null,
"activityStatus": 2, bindingCouponName: null,
"activityType": 1, activityStatus: 2,
"shareNum": null, activityType: 1,
"startTime": "2023-04-19 00:00:00", shareNum: null,
"endTime": "2023-12-31 23:59:59", startTime: '2023-04-19 00:00:00',
"limitNum": 1, endTime: '2023-12-31 23:59:59',
"deleted": null, limitNum: 1,
"show": 1, deleted: null,
"redirectPath": null, show: 1,
"couponActivityDTO": null, redirectPath: null,
"couponDTO": null couponActivityDTO: null,
couponDTO: null,
}, },
{ {
"id": 1, id: 1,
"activityName": "测试裂变", activityName: '测试裂变',
"activityCode": "AC01841", activityCode: 'AC01841',
"activityImg": "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/40f09893-01c5-4cc6-a64a-75dac1963791.jpg", activityImg:
"bindingCouponId": 10000141, 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/40f09893-01c5-4cc6-a64a-75dac1963791.jpg',
"bindingCouponName": "测试裂变", bindingCouponId: 10000141,
"activityStatus": 2, bindingCouponName: '测试裂变',
"activityType": 1, activityStatus: 2,
"shareNum": 2, activityType: 1,
"startTime": "2023-04-19 00:00:00", shareNum: 2,
"endTime": "2023-04-19 23:59:59", startTime: '2023-04-19 00:00:00',
"limitNum": 1, endTime: '2023-04-19 23:59:59',
"deleted": null, limitNum: 1,
"show": 1, deleted: null,
"redirectPath": null, show: 1,
"couponActivityDTO": null, redirectPath: null,
"couponDTO": null couponActivityDTO: null,
} couponDTO: null,
] },
setTableData(list) ];
setTableData(list);
ActivityManageAPI.getActivityList(data).then(({ result }) => { ActivityManageAPI.getActivityList(data).then(({ result }) => {
setLoading(false); setLoading(false);
...@@ -228,26 +220,24 @@ const ActivityList: FC<{}> = () => { ...@@ -228,26 +220,24 @@ const ActivityList: FC<{}> = () => {
// 活动结束 // 活动结束
const endActivityClick = (record: activityItemType) => { const endActivityClick = (record: activityItemType) => {
Modal.confirm({ Modal.confirm({
content: "即将停止该活动，关联优惠券会停止发放", content: '即将停止该活动，关联优惠券会停止发放',
onOk: () => { onOk: () => {
ActivityManageAPI.endActivity({ activityId: record.id }).then( ActivityManageAPI.endActivity({ activityId: record.id }).then(({ code }) => {
({ code }) => { if (code === '200') {
if (code === "200") { message.success('操作成功，该活动已结束');
message.success("操作成功，该活动已结束"); getActivityList({
getActivityList({ pageNo: pagination.pageNo,
pageNo: pagination.pageNo, pageSize: pagination.pageSize,
pageSize: pagination.pageSize, });
});
}
} }
); });
}, },
}); });
}; };
// 新增,编辑弹窗 // 新增,编辑弹窗
const addOrEditActivity = (record?: activityItemType) => { const addOrEditActivity = (record?: activityItemType) => {
setAddOrEditModalTitle(record ? "编辑活动" : "创建活动"); setAddOrEditModalTitle(record ? '编辑活动' : '创建活动');
if (record) { if (record) {
const activityForm = (activityRef.current as any)?.getForm(); const activityForm = (activityRef.current as any)?.getForm();
activityForm.setFieldsValue({ activityForm.setFieldsValue({
...@@ -263,10 +253,10 @@ const ActivityList: FC<{}> = () => { ...@@ -263,10 +253,10 @@ const ActivityList: FC<{}> = () => {
const setFileList = (activityRef.current as any)?.setFileList; const setFileList = (activityRef.current as any)?.setFileList;
setFileList([ setFileList([
{ {
uid: "uid", uid: 'uid',
name: "image", name: 'image',
url: record.activityImg, url: record.activityImg,
status: "done", status: 'done',
}, },
]); ]);
} }
...@@ -286,11 +276,9 @@ const ActivityList: FC<{}> = () => { ...@@ -286,11 +276,9 @@ const ActivityList: FC<{}> = () => {
}; };
// 活动数据弹窗 // 活动数据弹窗
const showActivityData = (record: activityItemType) => { const showActivityData = (record: activityItemType) => {
ActivityManageAPI.getActivityData({ activityId: record.id }).then( ActivityManageAPI.getActivityData({ activityId: record.id }).then(({ result }) => {
({ result }) => { setActivityData(result || undefined);
setActivityData(result || undefined); });
}
);
setActivityDataModalShow(true); setActivityDataModalShow(true);
}; };
const activityDataModalCancel = () => { const activityDataModalCancel = () => {
...@@ -309,16 +297,16 @@ const ActivityList: FC<{}> = () => { ...@@ -309,16 +297,16 @@ const ActivityList: FC<{}> = () => {
getActivityList({ pageNo: 1, pageSize: 10 }); getActivityList({ pageNo: 1, pageSize: 10 });
}, []); }, []);
return ( return (
<div className="activity-list"> <div className='activity-list'>
<Box> <Box>
<Button type="primary" onClick={() => addOrEditActivity()}> <Button type='primary' onClick={() => addOrEditActivity()}>
新增 新增
</Button> </Button>
</Box> </Box>
<Table <Table
columns={tableColumns} columns={tableColumns}
bordered bordered
rowKey="id" rowKey='id'
dataSource={tableData} dataSource={tableData}
pagination={{ pagination={{
total: pagination.totalCount, total: pagination.totalCount,
...@@ -326,10 +314,8 @@ const ActivityList: FC<{}> = () => { ...@@ -326,10 +314,8 @@ const ActivityList: FC<{}> = () => {
current: pagination.pageNo, current: pagination.pageNo,
showSizeChanger: true, showSizeChanger: true,
showQuickJumper: true, showQuickJumper: true,
onChange: (page: number, pageSize: number) => onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
paginationChange(page, pageSize), showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
showTotal: (total, range) =>
`当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}} }}
loading={loading} loading={loading}
/> />
......
src/pages/common/login/index.scss
body{ body {
background-color:rgb(245,246,250); background-color: rgb(245, 246, 250);
position: relative; position: relative;
.login-warp{ .login-warp {
width:100%; width: 100%;
height:100%; height: 100%;
padding-top:calc(((100vh - (576px / 5 * 4)) / 2) - 20px); padding-top: calc(((100vh - (576px / 5 * 4)) / 2) - 20px);
}
.login-view {
margin: 0 auto;
width: calc(1200px / 5 * 4);
height: calc(600px / 5 * 4);
background-image: url(../../../assets/image/login.jpg);
background-size: 100% 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0px 20px 30px rgba(112, 158, 254, 0.45);
display: flex;
flex-wrap: wrap;
.login-flex {
flex: 1;
} }
.login-view{ .login-content {
margin:0 auto; text-align: center;
width:calc(1200px / 5 * 4); color: #000;
height:calc(600px / 5 * 4); .login-title {
background-image:url(../../../assets/image/login.jpg); margin-top: 158px;
background-size:100% 100%; font-size: 24px;
border-radius:16px; }
overflow:hidden; .login-text {
box-shadow:0px 20px 30px rgba(112,158,254,0.45); margin-top: 26px;
display:flex; font-size: 20px;
flex-wrap: wrap; }
.login-flex{ .login-detail {
flex:1; margin-top: 44px;
font-size: 13px;
color: rgba(0, 0, 0, 0.5);
}
}
.login-form {
.login-image {
margin: 62px auto 46px;
width: 84px;
height: 84px;
background-image: url(../../../assets/image/logo.png);
background-size: 100%;
border: 4px #fff solid;
border-radius: 50%;
box-shadow: 3px 3px 30px #dddddd;
}
.login-input {
.ant-form-item {
line-height: 54px;
} }
.login-content{ .ant-input-affix-wrapper {
text-align:center; background-color: #fff;
color: #000; border-radius: 22px;
.login-title{ line-height: 30px;
margin-top: 158px; border: none;
font-size: 24px; box-shadow: 3px 3px 30px #dddddd;
}
.login-text{
margin-top: 26px;
font-size: 20px;
}
.login-detail{
margin-top: 44px;
font-size: 13px;
color: rgba(0,0,0,.5);
}
} }
.login-form{ }
.login-image{ .login-password {
margin: 62px auto 46px; margin-bottom: -8px;
width: 84px; }
height: 84px; .login-remember {
background-image:url(../../../assets/image/logo.png); margin-bottom: 0;
background-size:100%; transform: scale(0.8);
border: 4px #fff solid; .ant-checkbox-checked .ant-checkbox-inner {
border-radius:50%; background-color: rgb(102, 122, 255);
box-shadow:3px 3px 30px #dddddd; border-color: rgb(102, 122, 255);
}
.login-input{
.ant-form-item{
line-height: 54px;
}
.ant-input-affix-wrapper{
background-color:#fff;
border-radius:22px;
line-height: 30px;
border: none;
box-shadow:3px 3px 30px #dddddd;
}
}
.login-password{
margin-bottom:-8px;
}
.login-remember{
margin-bottom: 0;
transform: scale(0.8);
.ant-checkbox-checked .ant-checkbox-inner {
background-color: rgb(102,122,255);
border-color: rgb(102,122,255);
}
}
.login-submit{
width:210px;
font-size:13px;
background:rgb(102,122,255);
border:rgb(102,122,255);
box-shadow:3px 3px 30px #dddddd;
}
} }
}
.login-submit {
width: 210px;
font-size: 13px;
background: rgb(102, 122, 255);
border: rgb(102, 122, 255);
box-shadow: 3px 3px 30px #dddddd;
}
} }
}
} }
src/pages/couponManage/couponDetailed/components/dataModal/index.tsx
import { FC } from "react"; import { FC } from 'react';
import { Modal, Descriptions } from "antd"; import { Modal, Descriptions } from 'antd';
import { PropsType } from "~/common/interface/modal"; import { PropsType } from '~/common/interface/modal';
import { couponDetailItemType } from "~/api/interface/couponManage"; import { couponDetailItemType } from '~/api/interface/couponManage';
const contentStyle = { width: "100px" }; const contentStyle = { width: '100px' };
const DataModal: FC< const DataModal: FC<
Pick<PropsType, "isModalVisible" | "handleCancel"> & { Pick<PropsType, 'isModalVisible' | 'handleCancel'> & {
couponDetailItem: couponDetailItemType | undefined; couponDetailItem: couponDetailItemType | undefined;
} }
> = ({ isModalVisible, handleCancel, couponDetailItem }) => { > = ({ isModalVisible, handleCancel, couponDetailItem }) => {
return ( return (
<Modal <Modal
open={isModalVisible} open={isModalVisible}
title="查看详情" title='查看详情'
footer={null} footer={null}
onCancel={() => handleCancel()} onCancel={() => handleCancel()}
width={650} width={650}
> >
<Descriptions bordered size="small"> <Descriptions bordered size='small'>
<Descriptions.Item label="兑换时间" contentStyle={contentStyle}> <Descriptions.Item label='兑换时间' contentStyle={contentStyle}>
{couponDetailItem?.createTime} {couponDetailItem?.createTime}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label="兑换比例" contentStyle={contentStyle}> <Descriptions.Item label='兑换比例' contentStyle={contentStyle}>
{couponDetailItem?.conversionRatio} {couponDetailItem?.conversionRatio}
</Descriptions.Item> </Descriptions.Item>
{(couponDetailItem?.gainType === "presented" || {(couponDetailItem?.gainType === 'presented' ||
couponDetailItem?.gainType === "acquire") && ( couponDetailItem?.gainType === 'acquire') && (
<> <>
<Descriptions.Item label="转赠人UID" contentStyle={contentStyle}> <Descriptions.Item label='转赠人UID' contentStyle={contentStyle}>
{couponDetailItem?.transferorUid} {couponDetailItem?.transferorUid}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label="获赠人UID" contentStyle={contentStyle}> <Descriptions.Item label='获赠人UID' contentStyle={contentStyle}>
{couponDetailItem?.receiveUid} {couponDetailItem?.receiveUid}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label="转赠时间" contentStyle={contentStyle}> <Descriptions.Item label='转赠时间' contentStyle={contentStyle}>
{couponDetailItem?.transferorTime} {couponDetailItem?.transferorTime}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label="获赠时间" contentStyle={contentStyle}> <Descriptions.Item label='获赠时间' contentStyle={contentStyle}>
{couponDetailItem?.createTime} {couponDetailItem?.createTime}
</Descriptions.Item> </Descriptions.Item>
</> </>
......
src/pages/couponManage/couponDetailed/index.tsx
import { Button, Table } from "antd"; import { Button, Table } from 'antd';
import { ColumnsType } from "antd/es/table"; import { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import dayjs from "dayjs"; import dayjs from 'dayjs';
import FileSaver from "file-saver"; import FileSaver from 'file-saver';
import { useNavigate } from "react-router-dom"; import { useNavigate } from 'react-router-dom';
import qs from "query-string"; import qs from 'query-string';
import { ExportOutlined } from "@ant-design/icons"; import { ExportOutlined } from '@ant-design/icons';
import SearchBox, { searchColumns } from "~/components/search-box"; import SearchBox, { searchColumns } from '~/components/search-box';
import { CouponManageAPI } from "~/api"; import { CouponManageAPI } from '~/api';
import { PaginationEntity } from "~/common/interface/PaginationEntity"; import { PaginationEntity } from '~/common/interface/PaginationEntity';
import { import { couponDetailSearchType, couponDetailItemType } from '~/api/interface/couponManage';
couponDetailSearchType, import DataModal from './components/dataModal';
couponDetailItemType, import useOperate from '~/common/hook/optionHook';
} from "~/api/interface/couponManage";
import DataModal from "./components/dataModal";
import useOperate from "~/common/hook/optionHook";
const gainTypeList = [ const gainTypeList = [
{ id: "receive", name: "用户领取" }, { id: 'receive', name: '用户领取' },
{ id: "send", name: "系统发放" }, { id: 'send', name: '系统发放' },
{ id: "presented", name: "赠送" }, { id: 'presented', name: '赠送' },
{ id: "acquire", name: "获赠" }, { id: 'acquire', name: '获赠' },
{ id: "exchange", name: "积分兑换" }, { id: 'exchange', name: '积分兑换' },
]; ];
const stateList = [ const stateList = [
{ id: 0, name: "未使用" }, { id: 0, name: '未使用' },
{ id: 1, name: "已使用" }, { id: 1, name: '已使用' },
{ id: 2, name: "已失效" }, { id: 2, name: '已失效' },
{ id: 3, name: "已转赠" }, { id: 3, name: '已转赠' },
{ id: 4, name: "使用中" }, { id: 4, name: '使用中' },
]; ];
const CouponDetailed = () => { const CouponDetailed = () => {
const history = useNavigate(); const history = useNavigate();
const searchColumns: searchColumns[] = [ const searchColumns: searchColumns[] = [
{ {
type: "input", type: 'input',
name: "uid", name: 'uid',
label: "UID", label: 'UID',
placeholder: "请输入用户UID", placeholder: '请输入用户UID',
}, },
{ {
type: "input", type: 'input',
name: "userPhone", name: 'userPhone',
label: "手机号", label: '手机号',
placeholder: "请输入用户手机号", placeholder: '请输入用户手机号',
}, },
{ {
type: "input", type: 'input',
name: "couponId", name: 'couponId',
label: "优惠券ID", label: '优惠券ID',
placeholder: "请输入优惠券ID", placeholder: '请输入优惠券ID',
}, },
{ {
type: "DatePicker", type: 'DatePicker',
name: "createTime", name: 'createTime',
label: "领取时间", label: '领取时间',
placeholder: "", placeholder: '',
}, },
{ {
type: "DatePicker", type: 'DatePicker',
name: "useTime", name: 'useTime',
label: "使用时间", label: '使用时间',
placeholder: "", placeholder: '',
}, },
{ {
type: "input", type: 'input',
name: "orderNumber", name: 'orderNumber',
label: "订单编号", label: '订单编号',
placeholder: "请输入订单编号", placeholder: '请输入订单编号',
}, },
{ {
type: "select", type: 'select',
name: "gainType", name: 'gainType',
label: "流通方式", label: '流通方式',
placeholder: "请选择流通方式", placeholder: '请选择流通方式',
options: gainTypeList, options: gainTypeList,
}, },
{ {
type: "select", type: 'select',
name: "state", name: 'state',
label: "全部状态", label: '全部状态',
placeholder: "请选择状态", placeholder: '请选择状态',
options: stateList, options: stateList,
}, },
]; ];
const tableColumns: ColumnsType<couponDetailItemType> = [ const tableColumns: ColumnsType<couponDetailItemType> = [
{ {
title: "优惠券ID", title: '优惠券ID',
align: "center", align: 'center',
dataIndex: "couponId", dataIndex: 'couponId',
}, },
{ {
title: "优惠券名称", title: '优惠券名称',
align: "center", align: 'center',
dataIndex: "couponName", dataIndex: 'couponName',
}, },
{ {
title: "用户UID", title: '用户UID',
align: "center", align: 'center',
dataIndex: "uuid", dataIndex: 'uuid',
}, },
{ {
title: "手机号码", title: '手机号码',
align: "center", align: 'center',
dataIndex: "userPhone", dataIndex: 'userPhone',
}, },
{ {
title: "流通方式", title: '流通方式',
align: "center", align: 'center',
render: (text: string, record: couponDetailItemType) => ( render: (text: string, record: couponDetailItemType) => (
<div> <div>{gainTypeList.find((v) => v.id === record.gainType)?.name || ''}</div>
{gainTypeList.find((v) => v.id === record.gainType)?.name || ""}
</div>
), ),
}, },
{ {
title: "领取时间", title: '领取时间',
align: "center", align: 'center',
dataIndex: "createTime", dataIndex: 'createTime',
}, },
{ {
title: "状态", title: '状态',
align: "center", align: 'center',
render: (text: string, record: couponDetailItemType) => ( render: (text: string, record: couponDetailItemType) => (
<div>{stateList.find((v) => v.id === record.status)?.name || ""}</div> <div>{stateList.find((v) => v.id === record.status)?.name || ''}</div>
), ),
}, },
{ {
title: "使用时间", title: '使用时间',
align: "center", align: 'center',
dataIndex: "useTime", dataIndex: 'useTime',
}, },
{ {
title: "订单编号", title: '订单编号',
align: "center", align: 'center',
dataIndex: "orderNo", dataIndex: 'orderNo',
render: (text: string, record: couponDetailItemType) => render: (text: string, record: couponDetailItemType) =>
record.orderNo && ( record.orderNo && (
<Button type="link" onClick={() => toOrderDetail(record)}> <Button type='link' onClick={() => toOrderDetail(record)}>
{record.orderNo} {record.orderNo}
</Button> </Button>
), ),
}, },
{ {
title: "操作", title: '操作',
align: "center", align: 'center',
render: (text: string, record: couponDetailItemType) => ( render: (text: string, record: couponDetailItemType) => (
<Button <Button
type="link" type='link'
onClick={() => showDataModalClick(record)} onClick={() => showDataModalClick(record)}
disabled={!isLookBtn || record.useType !== 1} disabled={!isLookBtn || record.useType !== 1}
> >
...@@ -167,339 +162,338 @@ const CouponDetailed = () => { ...@@ -167,339 +162,338 @@ const CouponDetailed = () => {
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [query, setQuery] = useState<couponDetailSearchType>(); const [query, setQuery] = useState<couponDetailSearchType>();
const [dataModalShow, setDataModalShow] = useState<boolean>(false); const [dataModalShow, setDataModalShow] = useState<boolean>(false);
const [couponDetailItem, setCouponDetailItem] = const [couponDetailItem, setCouponDetailItem] = useState<couponDetailItemType>();
useState<couponDetailItemType>();
// 按钮权限 // 按钮权限
const isExportBtn = useOperate(26301); const isExportBtn = useOperate(26301);
const isLookBtn = useOperate(26302); const isLookBtn = useOperate(26302);
// 获取优惠券明细 // 获取优惠券明细
const getCouponDetail = ( const getCouponDetail = (
data: Pick<PaginationEntity, "pageNo" | "pageSize"> & couponDetailSearchType data: Pick<PaginationEntity, 'pageNo' | 'pageSize'> & couponDetailSearchType,
) => { ) => {
// setLoading(true); // setLoading(true);
setTableData([ setTableData([
{ {
"id": 45, id: 45,
"couponId": 10000147, couponId: 10000147,
"cid": null, cid: null,
"orderNo": null, orderNo: null,
"uid": 5058, uid: 5058,
"uuid": "UID8723232", uuid: 'UID8723232',
"userPhone": "13522927229", userPhone: '13522927229',
"couponName": "科比特品牌优惠券", couponName: '科比特品牌优惠券',
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"couponMoney": null, couponMoney: null,
"minPrice": null, minPrice: null,
"couponDiscount": 5, couponDiscount: 5,
"remainingBalance": null, remainingBalance: null,
"gainType": "send", gainType: 'send',
"status": 0, status: 0,
"createTime": "2023-06-01 21:42:45", createTime: '2023-06-01 21:42:45',
"updateTime": null, updateTime: null,
"startTime": "2023-04-21 00:00:00", startTime: '2023-04-21 00:00:00',
"endTime": "2023-12-31 23:59:59", endTime: '2023-12-31 23:59:59',
"useTime": null, useTime: null,
"primaryKey": "25", primaryKey: '25',
"conversionRatio": null, conversionRatio: null,
"transferorUid": null, transferorUid: null,
"receiveUid": null, receiveUid: null,
"transferorTime": null, transferorTime: null,
"verificationType": false, verificationType: false,
"preferentialLimit": 10000, preferentialLimit: 10000,
"brandIds": null, brandIds: null,
"discountCouponPrice": null discountCouponPrice: null,
}, },
{ {
"id": 44, id: 44,
"couponId": 10000147, couponId: 10000147,
"cid": null, cid: null,
"orderNo": null, orderNo: null,
"uid": 5102, uid: 5102,
"uuid": "UID9585857", uuid: 'UID9585857',
"userPhone": "17507736658", userPhone: '17507736658',
"couponName": "科比特品牌优惠券", couponName: '科比特品牌优惠券',
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"couponMoney": null, couponMoney: null,
"minPrice": null, minPrice: null,
"couponDiscount": 5, couponDiscount: 5,
"remainingBalance": null, remainingBalance: null,
"gainType": "send", gainType: 'send',
"status": 0, status: 0,
"createTime": "2023-05-31 21:01:15", createTime: '2023-05-31 21:01:15',
"updateTime": null, updateTime: null,
"startTime": "2023-04-21 00:00:00", startTime: '2023-04-21 00:00:00',
"endTime": "2023-12-31 23:59:59", endTime: '2023-12-31 23:59:59',
"useTime": null, useTime: null,
"primaryKey": "25", primaryKey: '25',
"conversionRatio": null, conversionRatio: null,
"transferorUid": null, transferorUid: null,
"receiveUid": null, receiveUid: null,
"transferorTime": null, transferorTime: null,
"verificationType": false, verificationType: false,
"preferentialLimit": 10000, preferentialLimit: 10000,
"brandIds": null, brandIds: null,
"discountCouponPrice": null discountCouponPrice: null,
}, },
{ {
"id": 43, id: 43,
"couponId": 10000147, couponId: 10000147,
"cid": null, cid: null,
"orderNo": null, orderNo: null,
"uid": 68, uid: 68,
"uuid": "UID0080718", uuid: 'UID0080718',
"userPhone": "19168592452", userPhone: '19168592452',
"couponName": "科比特品牌优惠券", couponName: '科比特品牌优惠券',
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"couponMoney": null, couponMoney: null,
"minPrice": null, minPrice: null,
"couponDiscount": 5, couponDiscount: 5,
"remainingBalance": null, remainingBalance: null,
"gainType": "send", gainType: 'send',
"status": 0, status: 0,
"createTime": "2023-05-29 19:53:05", createTime: '2023-05-29 19:53:05',
"updateTime": null, updateTime: null,
"startTime": "2023-04-21 00:00:00", startTime: '2023-04-21 00:00:00',
"endTime": "2023-12-31 23:59:59", endTime: '2023-12-31 23:59:59',
"useTime": null, useTime: null,
"primaryKey": "25", primaryKey: '25',
"conversionRatio": null, conversionRatio: null,
"transferorUid": null, transferorUid: null,
"receiveUid": null, receiveUid: null,
"transferorTime": null, transferorTime: null,
"verificationType": false, verificationType: false,
"preferentialLimit": 10000, preferentialLimit: 10000,
"brandIds": null, brandIds: null,
"discountCouponPrice": null discountCouponPrice: null,
}, },
{ {
"id": 42, id: 42,
"couponId": 10000147, couponId: 10000147,
"cid": null, cid: null,
"orderNo": null, orderNo: null,
"uid": 5107, uid: 5107,
"uuid": "UID8562549", uuid: 'UID8562549',
"userPhone": "17891113617", userPhone: '17891113617',
"couponName": "科比特品牌优惠券", couponName: '科比特品牌优惠券',
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"couponMoney": null, couponMoney: null,
"minPrice": null, minPrice: null,
"couponDiscount": 5, couponDiscount: 5,
"remainingBalance": null, remainingBalance: null,
"gainType": "send", gainType: 'send',
"status": 0, status: 0,
"createTime": "2023-05-29 13:23:26", createTime: '2023-05-29 13:23:26',
"updateTime": null, updateTime: null,
"startTime": "2023-04-21 00:00:00", startTime: '2023-04-21 00:00:00',
"endTime": "2023-12-31 23:59:59", endTime: '2023-12-31 23:59:59',
"useTime": null, useTime: null,
"primaryKey": "25", primaryKey: '25',
"conversionRatio": null, conversionRatio: null,
"transferorUid": null, transferorUid: null,
"receiveUid": null, receiveUid: null,
"transferorTime": null, transferorTime: null,
"verificationType": false, verificationType: false,
"preferentialLimit": 10000, preferentialLimit: 10000,
"brandIds": null, brandIds: null,
"discountCouponPrice": null discountCouponPrice: null,
}, },
{ {
"id": 41, id: 41,
"couponId": 10000147, couponId: 10000147,
"cid": null, cid: null,
"orderNo": null, orderNo: null,
"uid": 5103, uid: 5103,
"uuid": "UID6512850", uuid: 'UID6512850',
"userPhone": "15678897088", userPhone: '15678897088',
"couponName": "科比特品牌优惠券", couponName: '科比特品牌优惠券',
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"couponMoney": null, couponMoney: null,
"minPrice": null, minPrice: null,
"couponDiscount": 5, couponDiscount: 5,
"remainingBalance": null, remainingBalance: null,
"gainType": "send", gainType: 'send',
"status": 0, status: 0,
"createTime": "2023-05-29 10:54:11", createTime: '2023-05-29 10:54:11',
"updateTime": null, updateTime: null,
"startTime": "2023-04-21 00:00:00", startTime: '2023-04-21 00:00:00',
"endTime": "2023-12-31 23:59:59", endTime: '2023-12-31 23:59:59',
"useTime": null, useTime: null,
"primaryKey": "25", primaryKey: '25',
"conversionRatio": null, conversionRatio: null,
"transferorUid": null, transferorUid: null,
"receiveUid": null, receiveUid: null,
"transferorTime": null, transferorTime: null,
"verificationType": false, verificationType: false,
"preferentialLimit": 10000, preferentialLimit: 10000,
"brandIds": null, brandIds: null,
"discountCouponPrice": null discountCouponPrice: null,
}, },
{ {
"id": 40, id: 40,
"couponId": 10000147, couponId: 10000147,
"cid": null, cid: null,
"orderNo": null, orderNo: null,
"uid": 5101, uid: 5101,
"uuid": "UID3723715", uuid: 'UID3723715',
"userPhone": "15129481077", userPhone: '15129481077',
"couponName": "科比特品牌优惠券", couponName: '科比特品牌优惠券',
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"couponMoney": null, couponMoney: null,
"minPrice": null, minPrice: null,
"couponDiscount": 5, couponDiscount: 5,
"remainingBalance": null, remainingBalance: null,
"gainType": "send", gainType: 'send',
"status": 0, status: 0,
"createTime": "2023-05-29 10:41:45", createTime: '2023-05-29 10:41:45',
"updateTime": null, updateTime: null,
"startTime": "2023-04-21 00:00:00", startTime: '2023-04-21 00:00:00',
"endTime": "2023-12-31 23:59:59", endTime: '2023-12-31 23:59:59',
"useTime": null, useTime: null,
"primaryKey": "25", primaryKey: '25',
"conversionRatio": null, conversionRatio: null,
"transferorUid": null, transferorUid: null,
"receiveUid": null, receiveUid: null,
"transferorTime": null, transferorTime: null,
"verificationType": false, verificationType: false,
"preferentialLimit": 10000, preferentialLimit: 10000,
"brandIds": null, brandIds: null,
"discountCouponPrice": null discountCouponPrice: null,
}, },
{ {
"id": 39, id: 39,
"couponId": 10000147, couponId: 10000147,
"cid": null, cid: null,
"orderNo": null, orderNo: null,
"uid": 4358, uid: 4358,
"uuid": "UID1649471", uuid: 'UID1649471',
"userPhone": "15991160565", userPhone: '15991160565',
"couponName": "科比特品牌优惠券", couponName: '科比特品牌优惠券',
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"couponMoney": null, couponMoney: null,
"minPrice": null, minPrice: null,
"couponDiscount": 5, couponDiscount: 5,
"remainingBalance": null, remainingBalance: null,
"gainType": "send", gainType: 'send',
"status": 0, status: 0,
"createTime": "2023-05-29 09:06:22", createTime: '2023-05-29 09:06:22',
"updateTime": null, updateTime: null,
"startTime": "2023-04-21 00:00:00", startTime: '2023-04-21 00:00:00',
"endTime": "2023-12-31 23:59:59", endTime: '2023-12-31 23:59:59',
"useTime": null, useTime: null,
"primaryKey": "25", primaryKey: '25',
"conversionRatio": null, conversionRatio: null,
"transferorUid": null, transferorUid: null,
"receiveUid": null, receiveUid: null,
"transferorTime": null, transferorTime: null,
"verificationType": false, verificationType: false,
"preferentialLimit": 10000, preferentialLimit: 10000,
"brandIds": null, brandIds: null,
"discountCouponPrice": null discountCouponPrice: null,
}, },
{ {
"id": 38, id: 38,
"couponId": 10000147, couponId: 10000147,
"cid": null, cid: null,
"orderNo": null, orderNo: null,
"uid": 5083, uid: 5083,
"uuid": "UID4145719", uuid: 'UID4145719',
"userPhone": "18931209999", userPhone: '18931209999',
"couponName": "科比特品牌优惠券", couponName: '科比特品牌优惠券',
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"couponMoney": null, couponMoney: null,
"minPrice": null, minPrice: null,
"couponDiscount": 5, couponDiscount: 5,
"remainingBalance": null, remainingBalance: null,
"gainType": "send", gainType: 'send',
"status": 0, status: 0,
"createTime": "2023-05-27 18:00:48", createTime: '2023-05-27 18:00:48',
"updateTime": null, updateTime: null,
"startTime": "2023-04-21 00:00:00", startTime: '2023-04-21 00:00:00',
"endTime": "2023-12-31 23:59:59", endTime: '2023-12-31 23:59:59',
"useTime": null, useTime: null,
"primaryKey": "25", primaryKey: '25',
"conversionRatio": null, conversionRatio: null,
"transferorUid": null, transferorUid: null,
"receiveUid": null, receiveUid: null,
"transferorTime": null, transferorTime: null,
"verificationType": false, verificationType: false,
"preferentialLimit": 10000, preferentialLimit: 10000,
"brandIds": null, brandIds: null,
"discountCouponPrice": null discountCouponPrice: null,
}, },
{ {
"id": 37, id: 37,
"couponId": 10000147, couponId: 10000147,
"cid": null, cid: null,
"orderNo": null, orderNo: null,
"uid": 2376, uid: 2376,
"uuid": "UID3278532", uuid: 'UID3278532',
"userPhone": "15912163681", userPhone: '15912163681',
"couponName": "科比特品牌优惠券", couponName: '科比特品牌优惠券',
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"couponMoney": null, couponMoney: null,
"minPrice": null, minPrice: null,
"couponDiscount": 5, couponDiscount: 5,
"remainingBalance": null, remainingBalance: null,
"gainType": "send", gainType: 'send',
"status": 0, status: 0,
"createTime": "2023-05-25 16:07:09", createTime: '2023-05-25 16:07:09',
"updateTime": null, updateTime: null,
"startTime": "2023-04-21 00:00:00", startTime: '2023-04-21 00:00:00',
"endTime": "2023-12-31 23:59:59", endTime: '2023-12-31 23:59:59',
"useTime": null, useTime: null,
"primaryKey": "25", primaryKey: '25',
"conversionRatio": null, conversionRatio: null,
"transferorUid": null, transferorUid: null,
"receiveUid": null, receiveUid: null,
"transferorTime": null, transferorTime: null,
"verificationType": false, verificationType: false,
"preferentialLimit": 10000, preferentialLimit: 10000,
"brandIds": null, brandIds: null,
"discountCouponPrice": null discountCouponPrice: null,
}, },
{ {
"id": 35, id: 35,
"couponId": 10000156, couponId: 10000156,
"cid": null, cid: null,
"orderNo": null, orderNo: null,
"uid": 5055, uid: 5055,
"uuid": "UID2886699", uuid: 'UID2886699',
"userPhone": "15185632216", userPhone: '15185632216',
"couponName": "人党的飞飞", couponName: '人党的飞飞',
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"couponMoney": 12, couponMoney: 12,
"minPrice": null, minPrice: null,
"couponDiscount": null, couponDiscount: null,
"remainingBalance": null, remainingBalance: null,
"gainType": "send", gainType: 'send',
"status": 0, status: 0,
"createTime": "2023-05-25 15:34:13", createTime: '2023-05-25 15:34:13',
"updateTime": null, updateTime: null,
"startTime": "2023-05-26 00:00:00", startTime: '2023-05-26 00:00:00',
"endTime": "2023-06-22 23:59:59", endTime: '2023-06-22 23:59:59',
"useTime": null, useTime: null,
"primaryKey": "31", primaryKey: '31',
"conversionRatio": null, conversionRatio: null,
"transferorUid": null, transferorUid: null,
"receiveUid": null, receiveUid: null,
"transferorTime": null, transferorTime: null,
"verificationType": false, verificationType: false,
"preferentialLimit": null, preferentialLimit: null,
"brandIds": null, brandIds: null,
"discountCouponPrice": null discountCouponPrice: null,
} },
]) ]);
CouponManageAPI.getCouponDetail(data).then(({ result }) => { CouponManageAPI.getCouponDetail(data).then(({ result }) => {
const tableData = (result.list || []).map((v) => ({ const tableData = (result.list || []).map((v) => ({
...v, ...v,
...@@ -516,12 +510,8 @@ const CouponDetailed = () => { ...@@ -516,12 +510,8 @@ const CouponDetailed = () => {
}; };
// 数据筛选 // 数据筛选
const searchDataEvents = (data: any) => { const searchDataEvents = (data: any) => {
data.createTime = data.createTime data.createTime = data.createTime ? dayjs(data.createTime).format('YYYY-MM-DD') : undefined;
? dayjs(data.createTime).format("YYYY-MM-DD") data.useTime = data.useTime ? dayjs(data.useTime).format('YYYY-MM-DD') : undefined;
: undefined;
data.useTime = data.useTime
? dayjs(data.useTime).format("YYYY-MM-DD")
: undefined;
setQuery(data); setQuery(data);
getCouponDetail({ pageNo: 1, pageSize: 10, ...data }); getCouponDetail({ pageNo: 1, pageSize: 10, ...data });
}; };
...@@ -533,12 +523,9 @@ const CouponDetailed = () => { ...@@ -533,12 +523,9 @@ const CouponDetailed = () => {
pageSize: pagination.pageSize, pageSize: pagination.pageSize,
}).then((res: any) => { }).then((res: any) => {
const blob = new Blob([res], { const blob = new Blob([res], {
type: "application/vnd.ms-excel", type: 'application/vnd.ms-excel',
}); });
FileSaver.saveAs( FileSaver.saveAs(blob, `优惠券明细数据导出_${new Date().toLocaleString()}`);
blob,
`优惠券明细数据导出_${new Date().toLocaleString()}`
);
}); });
}; };
// 分页 // 分页
...@@ -556,7 +543,7 @@ const CouponDetailed = () => { ...@@ -556,7 +543,7 @@ const CouponDetailed = () => {
// 跳转订单详情 // 跳转订单详情
const toOrderDetail = (record: couponDetailItemType) => { const toOrderDetail = (record: couponDetailItemType) => {
history({ history({
pathname: "/orderManage/list/detail", pathname: '/orderManage/list/detail',
search: qs.stringify({ search: qs.stringify({
id: record.cid, id: record.cid,
}), }),
...@@ -568,14 +555,14 @@ const CouponDetailed = () => { ...@@ -568,14 +555,14 @@ const CouponDetailed = () => {
}, []); }, []);
return ( return (
<div className="coupon-detailed"> <div className='coupon-detailed'>
<SearchBox <SearchBox
search={searchColumns} search={searchColumns}
searchData={searchDataEvents} searchData={searchDataEvents}
otherChild={ otherChild={
<Button <Button
onClick={exportEvent} onClick={exportEvent}
type="primary" type='primary'
icon={<ExportOutlined disabled={!isExportBtn} />} icon={<ExportOutlined disabled={!isExportBtn} />}
> >
导出 导出
...@@ -586,7 +573,7 @@ const CouponDetailed = () => { ...@@ -586,7 +573,7 @@ const CouponDetailed = () => {
columns={tableColumns} columns={tableColumns}
bordered bordered
dataSource={tableData} dataSource={tableData}
rowKey="selfId" rowKey='selfId'
loading={loading} loading={loading}
pagination={{ pagination={{
total: pagination.totalCount, total: pagination.totalCount,
...@@ -594,10 +581,8 @@ const CouponDetailed = () => { ...@@ -594,10 +581,8 @@ const CouponDetailed = () => {
current: pagination.pageNo, current: pagination.pageNo,
showSizeChanger: true, showSizeChanger: true,
showQuickJumper: true, showQuickJumper: true,
onChange: (page: number, pageSize: number) => onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
paginationChange(page, pageSize), showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
showTotal: (total, range) =>
`当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}} }}
/> />
<DataModal <DataModal
......
src/pages/couponManage/couponList/comp/addEditModal/index.tsx
import React, { useState } from "react"; import React, { useState } from 'react';
import { DatePicker, Form, Input, message, Modal, Radio } from "antd"; import { DatePicker, Form, Input, message, Modal, Radio } from 'antd';
import moment from "moment"; import moment from 'moment';
// 传参类型 // 传参类型
interface propType { interface propType {
...@@ -30,7 +30,7 @@ export const AddEditModal: React.FC<propType> = (props: propType) => { ...@@ -30,7 +30,7 @@ export const AddEditModal: React.FC<propType> = (props: propType) => {
form form
.validateFields() .validateFields()
.then((values) => { .then((values) => {
console.log("handleOk -->", values); console.log('handleOk -->', values);
}) })
.catch((err) => { .catch((err) => {
message message
...@@ -41,59 +41,53 @@ export const AddEditModal: React.FC<propType> = (props: propType) => { ...@@ -41,59 +41,53 @@ export const AddEditModal: React.FC<propType> = (props: propType) => {
}); });
}; };
return ( return (
<Modal <Modal open={open} title={title} onCancel={handleCancel} onOk={handleOk} destroyOnClose>
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
>
<Form <Form
name="addForm" name='addForm'
form={form} form={form}
labelAlign="right" labelAlign='right'
// layout="inline" // layout="inline"
> >
<Form.Item <Form.Item
label="规则名称" label='规则名称'
name="ruleName" name='ruleName'
rules={[{ required: true, message: "请输入规则名称" }]} rules={[{ required: true, message: '请输入规则名称' }]}
> >
<Input placeholder="请输入规则名称" maxLength={20} allowClear /> <Input placeholder='请输入规则名称' maxLength={20} allowClear />
</Form.Item> </Form.Item>
<Form.Item label="兑换比例（积分：券额）" required> <Form.Item label='兑换比例（积分：券额）' required>
<Form.Item <Form.Item
name="year" name='year'
rules={[{ required: true, message: "请输入积分比例" }]} rules={[{ required: true, message: '请输入积分比例' }]}
style={{ display: "inline-block", width: "calc(50% - 8px)" }} style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
> >
<Input placeholder="请输入积分比例" /> <Input placeholder='请输入积分比例' />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="month" name='month'
rules={[{ required: true, message: "请输入券额比例" }]} rules={[{ required: true, message: '请输入券额比例' }]}
style={{ style={{
display: "inline-block", display: 'inline-block',
width: "calc(50% - 8px)", width: 'calc(50% - 8px)',
margin: "0 8px", margin: '0 8px',
}} }}
> >
<Input placeholder="请输入券额比例" /> <Input placeholder='请输入券额比例' />
</Form.Item> </Form.Item>
</Form.Item> </Form.Item>
<div style={{ transform: "translateY(-10px)" }}> <div style={{ transform: 'translateY(-10px)' }}>
说明：若兑换比例为1：20，则1积分可兑20元VIP优惠券，且为无门槛优惠券 说明：若兑换比例为1：20，则1积分可兑20元VIP优惠券，且为无门槛优惠券
</div> </div>
<Form.Item <Form.Item
label="生效时间" label='生效时间'
name="ruleSetting" name='ruleSetting'
rules={[{ required: true, message: "请选择生效时间" }]} rules={[{ required: true, message: '请选择生效时间' }]}
initialValue={0} initialValue={0}
> >
<Radio.Group <Radio.Group
options={[ options={[
{ label: "立即生效", value: 0 }, { label: '立即生效', value: 0 },
{ label: "手动设置", value: 1 }, { label: '手动设置', value: 1 },
]} ]}
value={radioValue} value={radioValue}
onChange={({ target: { value } }) => { onChange={({ target: { value } }) => {
...@@ -103,16 +97,16 @@ export const AddEditModal: React.FC<propType> = (props: propType) => { ...@@ -103,16 +97,16 @@ export const AddEditModal: React.FC<propType> = (props: propType) => {
</Form.Item> </Form.Item>
{radioValue === 1 && ( {radioValue === 1 && (
<Form.Item <Form.Item
label="手动设置" label='手动设置'
name="ruleTime" name='ruleTime'
rules={[{ required: radioValue === 1, message: "请设置生效时间" }]} rules={[{ required: radioValue === 1, message: '请设置生效时间' }]}
> >
<DatePicker <DatePicker
placeholder="请输入账号有效期" placeholder='请输入账号有效期'
allowClear allowClear
showTime={{ format: "HH:mm:ss" }} showTime={{ format: 'HH:mm:ss' }}
format="YYYY-MM-DD HH:mm:ss" format='YYYY-MM-DD HH:mm:ss'
style={{ width: "100%" }} style={{ width: '100%' }}
disabledDate={(current) => { disabledDate={(current) => {
// 限制时间不可早于当日 // 限制时间不可早于当日
return current && current <= moment(); return current && current <= moment();
......
src/pages/couponManage/couponList/comp/dataModal/index.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { Descriptions, message, Modal } from "antd"; import { Descriptions, message, Modal } from 'antd';
import { CouponManageAPI } from "~/api"; import { CouponManageAPI } from '~/api';
import { CouponGetDataType } from "~/api/interface/couponManage"; import { CouponGetDataType } from '~/api/interface/couponManage';
// 传参类型 // 传参类型
interface propType { interface propType {
...@@ -12,11 +12,9 @@ interface propType { ...@@ -12,11 +12,9 @@ interface propType {
} }
// 列表的类型 // 列表的类型
type DetailType = (ReturnType<CouponGetDataType> extends Promise<infer T> type DetailType = (ReturnType<CouponGetDataType> extends Promise<infer T> ? T : never)['result'];
? T
: never)["result"];
const contentStyle = { width: "100px" }; const contentStyle = { width: '100px' };
export const DataModal: React.FC<propType> = (props: propType) => { export const DataModal: React.FC<propType> = (props: propType) => {
// 组件默认值 // 组件默认值
...@@ -36,7 +34,7 @@ export const DataModal: React.FC<propType> = (props: propType) => { ...@@ -36,7 +34,7 @@ export const DataModal: React.FC<propType> = (props: propType) => {
const res = await CouponManageAPI.CouponGetData({ const res = await CouponManageAPI.CouponGetData({
id: data.id, id: data.id,
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
setCouponDetail(res.result); setCouponDetail(res.result);
} }
}; };
...@@ -54,23 +52,23 @@ export const DataModal: React.FC<propType> = (props: propType) => { ...@@ -54,23 +52,23 @@ export const DataModal: React.FC<propType> = (props: propType) => {
destroyOnClose destroyOnClose
width={650} width={650}
> >
<Descriptions column={3} bordered size="small"> <Descriptions column={3} bordered size='small'>
<Descriptions.Item contentStyle={contentStyle} label="总发行量"> <Descriptions.Item contentStyle={contentStyle} label='总发行量'>
{couponDetail?.couponTotal} {couponDetail?.couponTotal}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="领取量"> <Descriptions.Item contentStyle={contentStyle} label='领取量'>
{couponDetail?.receiveQuantity} {couponDetail?.receiveQuantity}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="领取率"> <Descriptions.Item contentStyle={contentStyle} label='领取率'>
{couponDetail?.claimRate} {couponDetail?.claimRate}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="使用量"> <Descriptions.Item contentStyle={contentStyle} label='使用量'>
{couponDetail?.usageAmount} {couponDetail?.usageAmount}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="有效使用量"> <Descriptions.Item contentStyle={contentStyle} label='有效使用量'>
{couponDetail?.accountPaid} {couponDetail?.accountPaid}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="有效使用率"> <Descriptions.Item contentStyle={contentStyle} label='有效使用率'>
{couponDetail?.availability} {couponDetail?.availability}
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
......
src/pages/couponManage/couponList/comp/increaseModal/index.tsx
import React, { useEffect } from "react"; import React, { useEffect } from 'react';
import { Form, Input, message, Modal } from "antd"; import { Form, Input, message, Modal } from 'antd';
import { maxLength } from "~/utils/validateUtils"; import { maxLength } from '~/utils/validateUtils';
import { CouponManageAPI } from "~/api"; import { CouponManageAPI } from '~/api';
// 传参类型 // 传参类型
interface propType { interface propType {
...@@ -59,8 +59,8 @@ export const IncreaseModal: React.FC<propType> = (props: propType) => { ...@@ -59,8 +59,8 @@ export const IncreaseModal: React.FC<propType> = (props: propType) => {
id: data.id, id: data.id,
count: Number(values.count), count: Number(values.count),
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
message.success("操作成功").then(); message.success('操作成功').then();
handleCancel(); handleCancel();
} }
}; };
...@@ -82,31 +82,25 @@ export const IncreaseModal: React.FC<propType> = (props: propType) => { ...@@ -82,31 +82,25 @@ export const IncreaseModal: React.FC<propType> = (props: propType) => {
width={400} width={400}
> >
<Form <Form
name="addForm" name='addForm'
form={form} form={form}
labelAlign="right" labelAlign='right'
labelCol={{ span: 8 }} labelCol={{ span: 8 }}
// layout="inline" // layout="inline"
> >
<Form.Item label="当前发行总量" name="lastTotal"> <Form.Item label='当前发行总量' name='lastTotal'>
<Input <Input placeholder='请输入当前发行总量' maxLength={20} allowClear disabled suffix='张' />
placeholder="请输入当前发行总量"
maxLength={20}
allowClear
disabled
suffix="张"
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="新增发行量" label='新增发行量'
name="count" name='count'
rules={[ rules={[
{ required: true, message: "请输入新增发行量" }, { required: true, message: '请输入新增发行量' },
// 增发合计不能超过100000 // 增发合计不能超过100000
{ {
validator: (rule, value) => { validator: (rule, value) => {
if (Number(data.lastTotal) + Number(value) > 100000) { if (Number(data.lastTotal) + Number(value) > 100000) {
return Promise.reject("增发合计不能超过100000"); return Promise.reject('增发合计不能超过100000');
} }
return Promise.resolve(); return Promise.resolve();
}, },
...@@ -114,23 +108,23 @@ export const IncreaseModal: React.FC<propType> = (props: propType) => { ...@@ -114,23 +108,23 @@ export const IncreaseModal: React.FC<propType> = (props: propType) => {
]} ]}
> >
<Input <Input
placeholder="请输入新增发行量" placeholder='请输入新增发行量'
maxLength={20} maxLength={20}
allowClear allowClear
prefix="+" prefix='+'
suffix="张" suffix='张'
type="number" type='number'
onChange={handleIncrease} onChange={handleIncrease}
onInput={maxLength} onInput={maxLength}
/> />
</Form.Item> </Form.Item>
<Form.Item label="更新后总发行量" name="lastTotalBefore"> <Form.Item label='更新后总发行量' name='lastTotalBefore'>
<Input <Input
placeholder="请输入更新后总发行量" placeholder='请输入更新后总发行量'
maxLength={20} maxLength={20}
allowClear allowClear
disabled disabled
suffix="张" suffix='张'
/> />
</Form.Item> </Form.Item>
</Form> </Form>
......
src/pages/couponManage/couponList/detail/index.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import qs from "query-string"; import qs from 'query-string';
import { useNavigate } from "react-router-dom"; import { useNavigate } from 'react-router-dom';
import { import {
Button, Button,
Checkbox, Checkbox,
...@@ -15,29 +15,24 @@ import { ...@@ -15,29 +15,24 @@ import {
Space, Space,
Upload, Upload,
UploadProps, UploadProps,
} from "antd"; } from 'antd';
import { UploadOutlined } from "@ant-design/icons"; import { UploadOutlined } from '@ant-design/icons';
import dayjs from "dayjs"; import dayjs from 'dayjs';
import { CheckboxChangeEvent } from "antd/es/checkbox"; import { CheckboxChangeEvent } from 'antd/es/checkbox';
import saveAs from "file-saver"; import saveAs from 'file-saver';
import { isNull } from "lodash"; import { isNull } from 'lodash';
import { TableDetailView } from "~/components/tableDetailView"; import { TableDetailView } from '~/components/tableDetailView';
import { CommonAPI, CouponManageAPI, MakeManageAPI } from "~/api"; import { CommonAPI, CouponManageAPI, MakeManageAPI } from '~/api';
import { CouponPageListType } from "~/api/interface/couponManage"; import { CouponPageListType } from '~/api/interface/couponManage';
import { import { maxLength, maxLength6, maxLength8, maxNumber } from '~/utils/validateUtils';
maxLength, import { Uploader } from '~/components/uploader';
maxLength6,
maxLength8,
maxNumber,
} from "~/utils/validateUtils";
import { Uploader } from "~/components/uploader";
// 列表的类型 // 列表的类型
type DetailType = (ReturnType<CouponPageListType> extends Promise<infer T> type DetailType = (ReturnType<CouponPageListType> extends Promise<infer T>
? T ? T
: never)["result"]["list"][0]; : never)['result']['list'][0];
export default function CouponDetail (props: { location: { search: string } }){ export default function CouponDetail(props: { location: { search: string } }) {
// 参数解析 // 参数解析
const option: any = qs.parse(props.location.search); const option: any = qs.parse(props.location.search);
// 路由钩子 // 路由钩子
...@@ -61,23 +56,16 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -61,23 +56,16 @@ export default function CouponDetail (props: { location: { search: string } }){
// 优惠券数据 // 优惠券数据
const [couponDetail, setCouponDetail] = useState<DetailType>(); const [couponDetail, setCouponDetail] = useState<DetailType>();
// 品牌列表 // 品牌列表
const [primaryOptions, setPrimaryOptions] = const [primaryOptions, setPrimaryOptions] = useState<{ label: string; value: number }[]>();
useState<{ label: string; value: number }[]>();
// 获取优惠券详情 // 获取优惠券详情
const getCouponDetail = async ({ const getCouponDetail = async ({ id, type }: { id: string; type: number }) => {
id,
type,
}: {
id: string;
type: number;
}) => {
const res = await CouponManageAPI.CouponPageList({ const res = await CouponManageAPI.CouponPageList({
couponId: id, couponId: id,
useType: type, useType: type,
pageNo: 1, pageNo: 1,
pageSize: 1, pageSize: 1,
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
const data = res.result.list[0]; const data = res.result.list[0];
// 优惠券详情 // 优惠券详情
setCouponDetail(data); setCouponDetail(data);
...@@ -87,7 +75,7 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -87,7 +75,7 @@ export default function CouponDetail (props: { location: { search: string } }){
rangeTime: [dayjs(data.useStartTime), dayjs(data.useEndTime)], rangeTime: [dayjs(data.useStartTime), dayjs(data.useEndTime)],
// useStartTime: data.useStartTime && dayjs(data.useStartTime), // useStartTime: data.useStartTime && dayjs(data.useStartTime),
// useEndTime: data.useEndTime && dayjs(data.useEndTime), // useEndTime: data.useEndTime && dayjs(data.useEndTime),
primaryKey: data.primaryKey?.split(",")?.map((i) => Number(i)), primaryKey: data.primaryKey?.split(',')?.map((i) => Number(i)),
}); });
// 设置有效期类型 // 设置有效期类型
setIsFixedTime(data.isFixedTime); setIsFixedTime(data.isFixedTime);
...@@ -117,7 +105,7 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -117,7 +105,7 @@ export default function CouponDetail (props: { location: { search: string } }){
setPrimaryOptions( setPrimaryOptions(
res.result?.list?.map((i) => { res.result?.list?.map((i) => {
return { label: i.brandName, value: i.id }; return { label: i.brandName, value: i.id };
}) }),
); );
}; };
// 有效期状态 // 有效期状态
...@@ -151,9 +139,9 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -151,9 +139,9 @@ export default function CouponDetail (props: { location: { search: string } }){
const handleIsLimited = ({ target: { value } }: RadioChangeEvent) => { const handleIsLimited = ({ target: { value } }: RadioChangeEvent) => {
setIsLimited(value); setIsLimited(value);
if (!value) { if (!value) {
form.setFieldValue("couponTotal", "0"); form.setFieldValue('couponTotal', '0');
} else { } else {
form.setFieldValue("couponTotal", undefined); form.setFieldValue('couponTotal', undefined);
} }
}; };
// 校验数据 // 校验数据
...@@ -167,13 +155,10 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -167,13 +155,10 @@ export default function CouponDetail (props: { location: { search: string } }){
await handleSubmit({ await handleSubmit({
...values, ...values,
// couponDiscount: Number(values.couponDiscount), // couponDiscount: Number(values.couponDiscount),
primaryKey: values.primaryKey.join(","), primaryKey: values.primaryKey.join(','),
useStartTime: useStartTime:
values.rangeTime && values.rangeTime && dayjs(values.rangeTime[0]).format('YYYY-MM-DD 00:00:00'),
dayjs(values.rangeTime[0]).format("YYYY-MM-DD 00:00:00"), useEndTime: values.rangeTime && dayjs(values.rangeTime[1]).format('YYYY-MM-DD 23:59:59'),
useEndTime:
values.rangeTime &&
dayjs(values.rangeTime[1]).format("YYYY-MM-DD 23:59:59"),
useType: option.type, useType: option.type,
}); });
}) })
...@@ -190,13 +175,13 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -190,13 +175,13 @@ export default function CouponDetail (props: { location: { search: string } }){
// console.log("handleSubmit --->", data); // console.log("handleSubmit --->", data);
const formData = new FormData(); const formData = new FormData();
const blob = new Blob([JSON.stringify(data)], { const blob = new Blob([JSON.stringify(data)], {
type: "application/json", type: 'application/json',
}); });
formData.append("couponInfoVO", blob); formData.append('couponInfoVO', blob);
formData.append("file", data.file); formData.append('file', data.file);
const res = await CouponManageAPI.CouponSave(formData); const res = await CouponManageAPI.CouponSave(formData);
if (res && res.code === "200") { if (res && res.code === '200') {
message.success("操作成功", 1).then(() => history(-1)); message.success('操作成功', 1).then(() => history(-1));
} else { } else {
message.error(res.message); message.error(res.message);
} }
...@@ -222,39 +207,34 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -222,39 +207,34 @@ export default function CouponDetail (props: { location: { search: string } }){
}} }}
onOK={handleOk} onOK={handleOk}
> >
<div className="detail-form"> <div className='detail-form'>
<Form <Form
name="addForm" name='addForm'
form={form} form={form}
labelAlign="right" labelAlign='right'
disabled={editDisable} disabled={editDisable}
// labelCol={{ span: 3 }} // labelCol={{ span: 3 }}
> >
<div className="detail-label">基本信息</div> <div className='detail-label'>基本信息</div>
<Form.Item <Form.Item
label="优惠券名称" label='优惠券名称'
name="couponName" name='couponName'
rules={[{ required: true, message: "请输入优惠券名称" }]} rules={[{ required: true, message: '请输入优惠券名称' }]}
> >
<Input <Input placeholder='请输入优惠券名称' maxLength={10} allowClear showCount />
placeholder="请输入优惠券名称"
maxLength={10}
allowClear
showCount
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="isFixedTime" name='isFixedTime'
label="有效期" label='有效期'
rules={[{ required: true, message: "请选择有效期" }]} rules={[{ required: true, message: '请选择有效期' }]}
initialValue={0} initialValue={0}
> >
<Radio.Group <Radio.Group
style={{ marginTop: "2px" }} style={{ marginTop: '2px' }}
options={[ options={[
{ value: 0, label: "起始日期 至 结束日期" }, { value: 0, label: '起始日期 至 结束日期' },
{ value: 1, label: "领取当日起" }, { value: 1, label: '领取当日起' },
{ value: 2, label: "领取次日起" }, { value: 2, label: '领取次日起' },
]} ]}
value={isFixedTime} value={isFixedTime}
onChange={handleFixedTime} onChange={handleFixedTime}
...@@ -262,68 +242,68 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -262,68 +242,68 @@ export default function CouponDetail (props: { location: { search: string } }){
</Form.Item> </Form.Item>
{isFixedTime === 0 && ( {isFixedTime === 0 && (
<Form.Item <Form.Item
label={" "} label={' '}
colon={false} colon={false}
name="rangeTime" name='rangeTime'
rules={[{ required: true, message: "请输入有效期" }]} rules={[{ required: true, message: '请输入有效期' }]}
required required
style={{ style={{
width: "400px", width: '400px',
marginLeft: "55px", marginLeft: '55px',
}} }}
> >
<DatePicker.RangePicker <DatePicker.RangePicker
format="YYYY-MM-DD" format='YYYY-MM-DD'
disabledDate={(current) => { disabledDate={(current) => {
// 限制时间不可早于昨日 // 限制时间不可早于昨日
return current && current < dayjs().subtract(1, "days"); return current && current < dayjs().subtract(1, 'days');
}} }}
/> />
</Form.Item> </Form.Item>
)} )}
{isFixedTime === 1 && ( {isFixedTime === 1 && (
<Form.Item <Form.Item
label={" "} label={' '}
colon={false} colon={false}
name="couponDay" name='couponDay'
rules={[{ required: true, message: "请输入有效期" }]} rules={[{ required: true, message: '请输入有效期' }]}
style={{ width: "200px", marginLeft: "55px" }} style={{ width: '200px', marginLeft: '55px' }}
> >
<Input <Input
placeholder="请输入天数" placeholder='请输入天数'
allowClear allowClear
suffix="天内可用" suffix='天内可用'
type="number" type='number'
onInput={maxLength} onInput={maxLength}
/> />
</Form.Item> </Form.Item>
)} )}
{isFixedTime === 2 && ( {isFixedTime === 2 && (
<Form.Item <Form.Item
label={" "} label={' '}
colon={false} colon={false}
name="couponDay" name='couponDay'
rules={[{ required: true, message: "请输入有效期" }]} rules={[{ required: true, message: '请输入有效期' }]}
style={{ width: "200px", marginLeft: "55px" }} style={{ width: '200px', marginLeft: '55px' }}
> >
<Input <Input
placeholder="请输入天数" placeholder='请输入天数'
maxLength={10} maxLength={10}
allowClear allowClear
suffix="天内可用" suffix='天内可用'
type="number" type='number'
onInput={maxLength} onInput={maxLength}
/> />
</Form.Item> </Form.Item>
)} )}
<Form.Item <Form.Item
name="primaryKey" name='primaryKey'
label="品牌范围" label='品牌范围'
rules={[{ required: true, message: "请选择品牌范围" }]} rules={[{ required: true, message: '请选择品牌范围' }]}
> >
<Select <Select
mode="multiple" mode='multiple'
placeholder="请选择品牌范围" placeholder='请选择品牌范围'
maxLength={50} maxLength={50}
allowClear allowClear
options={primaryOptions} options={primaryOptions}
...@@ -333,18 +313,18 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -333,18 +313,18 @@ export default function CouponDetail (props: { location: { search: string } }){
{/* 说明：一张优惠券最多可以选择50个指定品牌。优惠券一旦创建，指定品牌只能增加，不能删除。 */} {/* 说明：一张优惠券最多可以选择50个指定品牌。优惠券一旦创建，指定品牌只能增加，不能删除。 */}
{/* </div> */} {/* </div> */}
<Form.Item <Form.Item
label="发放方式" label='发放方式'
name="getType" name='getType'
rules={[{ required: true, message: "请选择发放方式" }]} rules={[{ required: true, message: '请选择发放方式' }]}
initialValue={1} initialValue={1}
> >
<Radio.Group <Radio.Group
style={{ marginTop: "4px" }} style={{ marginTop: '4px' }}
options={[ options={[
{ label: "主动领取", value: 1 }, { label: '主动领取', value: 1 },
{ label: "系统发放", value: 2 }, { label: '系统发放', value: 2 },
{ label: "批量导入用户", value: 3 }, { label: '批量导入用户', value: 3 },
{ label: "活动裂变券", value: 4, disabled: true }, { label: '活动裂变券', value: 4, disabled: true },
]} ]}
value={getType} value={getType}
onChange={handleGetType} onChange={handleGetType}
...@@ -352,18 +332,18 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -352,18 +332,18 @@ export default function CouponDetail (props: { location: { search: string } }){
</Form.Item> </Form.Item>
{getType === 2 && ( {getType === 2 && (
<Form.Item <Form.Item
name="userTag" name='userTag'
label="用户标签" label='用户标签'
rules={[{ required: true, message: "请选择用户标签" }]} rules={[{ required: true, message: '请选择用户标签' }]}
> >
<Select <Select
placeholder="请选择用户标签" placeholder='请选择用户标签'
allowClear allowClear
maxLength={50} maxLength={50}
options={[ options={[
{ label: "新用户", value: 1 }, { label: '新用户', value: 1 },
{ label: "实名认证", value: 2 }, { label: '实名认证', value: 2 },
{ label: "企业认证", value: 3 }, { label: '企业认证', value: 3 },
]} ]}
/> />
</Form.Item> </Form.Item>
...@@ -371,77 +351,77 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -371,77 +351,77 @@ export default function CouponDetail (props: { location: { search: string } }){
{getType === 3 && ( {getType === 3 && (
<> <>
<Form.Item <Form.Item
name="fileUrl" name='fileUrl'
label="文件地址" label='文件地址'
rules={[{ required: true, message: "请上传文件" }]} rules={[{ required: true, message: '请上传文件' }]}
wrapperCol={{ span: 6 }} wrapperCol={{ span: 6 }}
hidden hidden
> >
<Input placeholder="请上传文件" /> <Input placeholder='请上传文件' />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="file" name='file'
label="上传模板" label='上传模板'
rules={[{ required: true, message: "请上传模板" }]} rules={[{ required: true, message: '请上传模板' }]}
> >
<Uploader <Uploader
listType="text" listType='text'
fileType={[ fileType={[
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
"application/vnd.ms-excel", 'application/vnd.ms-excel',
]} ]}
fileUpload={false} fileUpload={false}
onChange={(file) => { onChange={(file) => {
// 上传到服务器 // 上传到服务器
const formData = new FormData(); const formData = new FormData();
formData.append("uploadFile", file[0]); formData.append('uploadFile', file[0]);
CommonAPI.fileUpload(formData).then((res: any) => { CommonAPI.fileUpload(formData).then((res: any) => {
if (res && res.code === "200") { if (res && res.code === '200') {
form.setFieldValue("fileUrl", res?.result?.filePath); form.setFieldValue('fileUrl', res?.result?.filePath);
form.setFieldValue("file", file[0]); form.setFieldValue('file', file[0]);
} else { } else {
message.error("文件上传失败").then(); message.error('文件上传失败').then();
} }
}); });
}} }}
// 默认文件列表 // 默认文件列表
defaultFileList={ defaultFileList={
couponDetail?.fileUrl couponDetail?.fileUrl
? [{ url: couponDetail?.file, name: "用户数据.xlsx" }] ? [{ url: couponDetail?.file, name: '用户数据.xlsx' }]
: [] : []
} }
> >
<Button icon={<UploadOutlined />}>上传文件</Button> <Button icon={<UploadOutlined />}>上传文件</Button>
</Uploader> </Uploader>
<Button <Button
type="link" type='link'
onClick={() => { onClick={() => {
// 使用file-save保存文件，文件链接为：https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/doc/coupon-template.xlsx // 使用file-save保存文件，文件链接为：https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/doc/coupon-template.xlsx
saveAs( saveAs(
"https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/doc/coupon-template.xlsx", 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/doc/coupon-template.xlsx',
"导入模板.xlsx" '导入模板.xlsx',
); );
}} }}
style={{ position: "absolute", top: "0px", right: "120px" }} style={{ position: 'absolute', top: '0px', right: '120px' }}
> >
模板下载 模板下载
</Button> </Button>
</Form.Item> </Form.Item>
</> </>
)} )}
<div className="detail-label">面额信息</div> <div className='detail-label'>面额信息</div>
<Form.Item <Form.Item
label="优惠类型" label='优惠类型'
name="couponType" name='couponType'
rules={[{ required: true, message: "请选择优惠类型" }]} rules={[{ required: true, message: '请选择优惠类型' }]}
initialValue={1} initialValue={1}
> >
<Radio.Group <Radio.Group
style={{ marginTop: "4px" }} style={{ marginTop: '4px' }}
options={[ options={[
{ label: "折扣券", value: 1 }, { label: '折扣券', value: 1 },
{ label: "满减券", value: 2 }, { label: '满减券', value: 2 },
{ label: "无门槛", value: 3 }, { label: '无门槛', value: 3 },
]} ]}
value={couponType} value={couponType}
onChange={handleCouponType} onChange={handleCouponType}
...@@ -449,15 +429,12 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -449,15 +429,12 @@ export default function CouponDetail (props: { location: { search: string } }){
</Form.Item> </Form.Item>
{couponType === 1 && ( {couponType === 1 && (
<> <>
<Form.Item <Form.Item label='打折条件' rules={[{ required: true, message: '请选择打折条件' }]}>
label="打折条件"
rules={[{ required: true, message: "请选择打折条件" }]}
>
<Radio.Group <Radio.Group
style={{ marginTop: "4px" }} style={{ marginTop: '4px' }}
options={[ options={[
{ label: "无门槛", value: 1 }, { label: '无门槛', value: 1 },
{ label: "有门槛", value: 2 }, { label: '有门槛', value: 2 },
]} ]}
value={discountRule} value={discountRule}
onChange={handleDiscountRule} onChange={handleDiscountRule}
...@@ -465,109 +442,102 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -465,109 +442,102 @@ export default function CouponDetail (props: { location: { search: string } }){
</Form.Item> </Form.Item>
{discountRule === 2 && ( {discountRule === 2 && (
<Form.Item <Form.Item
name="minPrice" name='minPrice'
label="订单满" label='订单满'
rules={[{ required: true, message: "请输入金额" }]} rules={[{ required: true, message: '请输入金额' }]}
wrapperCol={{ span: 6 }} wrapperCol={{ span: 6 }}
> >
<Input <Input
placeholder="请输入金额" placeholder='请输入金额'
suffix="元" suffix='元'
type="number" type='number'
onInput={maxLength8} onInput={maxLength8}
/> />
</Form.Item> </Form.Item>
)} )}
<Form.Item <Form.Item
name="couponDiscount" name='couponDiscount'
label="打" label='打'
rules={[ rules={[
{ required: true, message: "请输入数字" }, { required: true, message: '请输入数字' },
{ {
pattern: /^10(\.00)?$|^(\d|[1-9])(\.\d{1,2})?$/, pattern: /^10(\.00)?$|^(\d|[1-9])(\.\d{1,2})?$/,
message: "只能输入0.01到10.00的两位小数", message: '只能输入0.01到10.00的两位小数',
}, },
]} ]}
wrapperCol={{ span: 6 }} wrapperCol={{ span: 6 }}
> >
<Input <Input
placeholder="请输入数字" placeholder='请输入数字'
suffix="折" suffix='折'
type="number" type='number'
// onInput={onlyNumber} // onInput={onlyNumber}
/> />
</Form.Item> </Form.Item>
<Checkbox <Checkbox
onChange={handleMaxDiscount} onChange={handleMaxDiscount}
style={{ marginTop: "6px", marginRight: "10px" }} style={{ marginTop: '6px', marginRight: '10px' }}
checked={maxDiscount} checked={maxDiscount}
/> />
<Form.Item <Form.Item
name="preferentialLimit" name='preferentialLimit'
label="最多优惠" label='最多优惠'
rules={[{ required: maxDiscount, message: "请输入金额" }]} rules={[{ required: maxDiscount, message: '请输入金额' }]}
wrapperCol={{ span: 7 }} wrapperCol={{ span: 7 }}
style={{ display: "inline-block", width: "85%" }} style={{ display: 'inline-block', width: '85%' }}
> >
<Input <Input placeholder='请输入金额' suffix='元' type='number' onInput={maxLength8} />
placeholder="请输入金额"
suffix="元"
type="number"
onInput={maxLength8}
/>
</Form.Item> </Form.Item>
<div className="detail-form-tips"> <div className='detail-form-tips'>说明：最多优惠金额不可高于满折后的价格。</div>
说明：最多优惠金额不可高于满折后的价格。
</div>
</> </>
)} )}
{couponType === 2 && ( {couponType === 2 && (
<> <>
<Form.Item style={{ marginLeft: "30px" }}> <Form.Item style={{ marginLeft: '30px' }}>
<Form.Item <Form.Item
name="minPrice" name='minPrice'
label="满" label='满'
colon={false} colon={false}
rules={[{ required: true, message: "请输入金额" }]} rules={[{ required: true, message: '请输入金额' }]}
style={{ style={{
display: "inline-block", display: 'inline-block',
width: "calc(40% - 8px)", width: 'calc(40% - 8px)',
}} }}
> >
<Input <Input
placeholder="请输入金额" placeholder='请输入金额'
suffix="元" suffix='元'
type="number" type='number'
onInput={maxLength8} onInput={maxLength8}
onChange={() => { onChange={() => {
form.validateFields(["couponMoney"]).then(); form.validateFields(['couponMoney']).then();
}} }}
/> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="couponMoney" name='couponMoney'
label="减" label='减'
colon={false} colon={false}
rules={[ rules={[
{ required: true, message: "请输入金额" }, { required: true, message: '请输入金额' },
// 满减金额不能大于原价 // 满减金额不能大于原价
{ {
validator: (_, value) => validator: (_, value) =>
Number(value) > Number(form.getFieldValue("minPrice")) Number(value) > Number(form.getFieldValue('minPrice'))
? Promise.reject("满减金额不能大于原价") ? Promise.reject('满减金额不能大于原价')
: Promise.resolve(), : Promise.resolve(),
}, },
]} ]}
style={{ style={{
display: "inline-block", display: 'inline-block',
width: "calc(40% - 8px)", width: 'calc(40% - 8px)',
margin: "0 8px", margin: '0 8px',
}} }}
> >
<Input <Input
placeholder="请输入金额" placeholder='请输入金额'
suffix="元" suffix='元'
type="number" type='number'
onInput={maxLength8} onInput={maxLength8}
/> />
</Form.Item> </Form.Item>
...@@ -577,93 +547,86 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -577,93 +547,86 @@ export default function CouponDetail (props: { location: { search: string } }){
{couponType === 3 && ( {couponType === 3 && (
<> <>
<Form.Item <Form.Item
name="couponMoney" name='couponMoney'
label="券的面额" label='券的面额'
rules={[ rules={[
{ required: true, message: "请输入面额" }, { required: true, message: '请输入面额' },
{ {
validator: (_, value) => validator: (_, value) =>
Number(value) > 200000 Number(value) > 200000
? Promise.reject("面额不得超过20万元") ? Promise.reject('面额不得超过20万元')
: Promise.resolve(), : Promise.resolve(),
}, },
]} ]}
wrapperCol={{ span: 6 }} wrapperCol={{ span: 6 }}
> >
<Input <Input placeholder='请输入面额' suffix='元' type='number' onInput={maxLength6} />
placeholder="请输入面额"
suffix="元"
type="number"
onInput={maxLength6}
/>
</Form.Item> </Form.Item>
<div className="detail-form-tips"> <div className='detail-form-tips'>说明：请输入整数金额，面额不得超过20万元。</div>
说明：请输入整数金额，面额不得超过20万元。
</div>
<Form.Item <Form.Item
label="核销方式" label='核销方式'
name="verificationType" name='verificationType'
rules={[{ required: true, message: "请选择核销方式" }]} rules={[{ required: true, message: '请选择核销方式' }]}
> >
<Radio.Group <Radio.Group
style={{ marginTop: "4px" }} style={{ marginTop: '4px' }}
options={[ options={[
{ label: "单次核销", value: false }, { label: '单次核销', value: false },
{ label: "多次核销", value: true }, { label: '多次核销', value: true },
]} ]}
/> />
</Form.Item> </Form.Item>
</> </>
)} )}
<Form.Item <Form.Item
label="是否限量" label='是否限量'
name="isLimited" name='isLimited'
rules={[{ required: true, message: "请选择核销方式" }]} rules={[{ required: true, message: '请选择核销方式' }]}
initialValue initialValue
hidden hidden
> >
<Radio.Group <Radio.Group
style={{ marginTop: "4px" }} style={{ marginTop: '4px' }}
options={[ options={[
{ label: "限量", value: true }, { label: '限量', value: true },
{ label: "不限量", value: false }, { label: '不限量', value: false },
]} ]}
value={isLimited} value={isLimited}
onChange={handleIsLimited} onChange={handleIsLimited}
/> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="couponTotal" name='couponTotal'
label="发行量" label='发行量'
rules={[ rules={[
{ required: true, message: "请输入发行量" }, { required: true, message: '请输入发行量' },
{ max: 100000, message: "最大不能超过100000" }, { max: 100000, message: '最大不能超过100000' },
]} ]}
hidden={!isLimited} hidden={!isLimited}
> >
<Input <Input
placeholder="至少1张，不超过10万" placeholder='至少1张，不超过10万'
suffix="张" suffix='张'
type="number" type='number'
onInput={maxNumber} onInput={maxNumber}
/> />
</Form.Item> </Form.Item>
<div className="detail-form-tips" style={{ color: "red" }}> <div className='detail-form-tips' style={{ color: 'red' }}>
说明：优惠券创建后，发行量只能增加不能减少，请谨慎设置。 说明：优惠券创建后，发行量只能增加不能减少，请谨慎设置。
</div> </div>
<Form.Item <Form.Item
name="restrictedAccess" name='restrictedAccess'
label="每人限领" label='每人限领'
rules={[{ required: true, message: "请选择限领张数" }]} rules={[{ required: true, message: '请选择限领张数' }]}
> >
<Select <Select
placeholder="至少1张，不超过10万" placeholder='至少1张，不超过10万'
options={[ options={[
{ label: "1张", value: 1 }, { label: '1张', value: 1 },
{ label: "2张", value: 2 }, { label: '2张', value: 2 },
{ label: "3张", value: 3 }, { label: '3张', value: 3 },
{ label: "4张", value: 4 }, { label: '4张', value: 4 },
{ label: "5张", value: 5 }, { label: '5张', value: 5 },
// { label: "不限", value: 0 }, // { label: "不限", value: 0 },
]} ]}
// onChange={(e) => { // onChange={(e) => {
...@@ -680,4 +643,4 @@ export default function CouponDetail (props: { location: { search: string } }){ ...@@ -680,4 +643,4 @@ export default function CouponDetail (props: { location: { search: string } }){
</TableDetailView> </TableDetailView>
</> </>
); );
}; }
src/pages/couponManage/couponList/index.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { Button, message, Modal, Radio, RadioChangeEvent, Table } from "antd"; import { Button, message, Modal, Radio, RadioChangeEvent, Table } from 'antd';
import { ColumnsType } from "antd/es/table"; import { ColumnsType } from 'antd/es/table';
import { PlusOutlined } from "@ant-design/icons"; import { PlusOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom"; import { useNavigate } from 'react-router-dom';
import moment from "moment"; import moment from 'moment';
import SearchView from "~/components/search-box/index"; import SearchView from '~/components/search-box/index';
import { CouponManageAPI } from "~/api"; import { CouponManageAPI } from '~/api';
import { TableBox } from "~/components/tableBox"; import { TableBox } from '~/components/tableBox';
import { IncreaseModal } from "~/pages/couponManage/couponList/comp/increaseModal"; import { IncreaseModal } from '~/pages/couponManage/couponList/comp/increaseModal';
import { DataModal } from "~/pages/couponManage/couponList/comp/dataModal"; import { DataModal } from '~/pages/couponManage/couponList/comp/dataModal';
import { CouponPageListType } from "~/api/interface/couponManage"; import { CouponPageListType } from '~/api/interface/couponManage';
import useOperate from "~/common/hook/optionHook"; import useOperate from '~/common/hook/optionHook';
// 列表的类型 // 列表的类型
type TableType = (ReturnType<CouponPageListType> extends Promise<infer T> type TableType = (ReturnType<CouponPageListType> extends Promise<infer T>
? T ? T
: never)["result"]["list"]; : never)['result']['list'];
type ReqType = Parameters<CouponPageListType>[0]; type ReqType = Parameters<CouponPageListType>[0];
// 搜索表单的数据 // 搜索表单的数据
let query: ReqType = {}; let query: ReqType = {};
// 规则状态 // 规则状态
const stateOptions = [ const stateOptions = [
// { id: null, name: "全部状态" }, // { id: null, name: "全部状态" },
{ id: true, name: "领取中" }, { id: true, name: '领取中' },
{ id: false, name: "已结束" }, { id: false, name: '已结束' },
]; ];
// 优惠券类型 // 优惠券类型
const couponType = [ const couponType = [
{ label: "打折券", value: 1 }, { label: '打折券', value: 1 },
{ label: "减免券", value: 2 }, { label: '减免券', value: 2 },
{ label: "无门槛", value: 3 }, { label: '无门槛', value: 3 },
]; ];
export default function CouponList () { export default function CouponList() {
const { confirm } = Modal; const { confirm } = Modal;
// 路由操作 // 路由操作
const history = useNavigate(); const history = useNavigate();
...@@ -65,276 +65,276 @@ export default function CouponList () { ...@@ -65,276 +65,276 @@ export default function CouponList () {
// 只需要修改这个地方的接口即可 // 只需要修改这个地方的接口即可
setTableData([ setTableData([
{ {
"id": 10000157, id: 10000157,
"couponName": "2223", couponName: '2223',
"couponMoney": 22, couponMoney: 22,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": null, restrictedAccess: null,
"couponTotal": 13, couponTotal: 13,
"lastTotal": 13, lastTotal: 13,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "32,31", primaryKey: '32,31',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-27 00:00:00", useStartTime: '2023-05-27 00:00:00',
"useEndTime": "2023-06-16 23:59:59", useEndTime: '2023-06-16 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": null, userTag: null,
"couponStatus": true, couponStatus: true,
"isDel": false, isDel: false,
"preferentialLimit": null, preferentialLimit: null,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 17:47:50", createTime: '2023-05-24 17:47:50',
"updateTime": null, updateTime: null,
"fileUrl": null fileUrl: null,
}, },
{ {
"id": 10000158, id: 10000158,
"couponName": "2223", couponName: '2223',
"couponMoney": 22, couponMoney: 22,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": 1, restrictedAccess: 1,
"couponTotal": 12, couponTotal: 12,
"lastTotal": 12, lastTotal: 12,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "32", primaryKey: '32',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-27 00:00:00", useStartTime: '2023-05-27 00:00:00',
"useEndTime": "2023-06-16 23:59:59", useEndTime: '2023-06-16 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": 1, userTag: 1,
"couponStatus": true, couponStatus: true,
"isDel": false, isDel: false,
"preferentialLimit": null, preferentialLimit: null,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 17:47:50", createTime: '2023-05-24 17:47:50',
"updateTime": null, updateTime: null,
"fileUrl": null fileUrl: null,
}, },
{ {
"id": 10000156, id: 10000156,
"couponName": "人党的飞飞", couponName: '人党的飞飞',
"couponMoney": 12, couponMoney: 12,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": 3, restrictedAccess: 3,
"couponTotal": 12, couponTotal: 12,
"lastTotal": 0, lastTotal: 0,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "31", primaryKey: '31',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-26 00:00:00", useStartTime: '2023-05-26 00:00:00',
"useEndTime": "2023-06-22 23:59:59", useEndTime: '2023-06-22 23:59:59',
"couponDay": null, couponDay: null,
"getType": 2, getType: 2,
"userTag": 1, userTag: 1,
"couponStatus": true, couponStatus: true,
"isDel": false, isDel: false,
"preferentialLimit": null, preferentialLimit: null,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 17:05:52", createTime: '2023-05-24 17:05:52',
"updateTime": null, updateTime: null,
"fileUrl": null fileUrl: null,
}, },
{ {
"id": 10000155, id: 10000155,
"couponName": "44444", couponName: '44444',
"couponMoney": 44, couponMoney: 44,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": 3, restrictedAccess: 3,
"couponTotal": 44, couponTotal: 44,
"lastTotal": 44, lastTotal: 44,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "32,24", primaryKey: '32,24',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-24 00:00:00", useStartTime: '2023-05-24 00:00:00',
"useEndTime": "2023-06-19 23:59:59", useEndTime: '2023-06-19 23:59:59',
"couponDay": null, couponDay: null,
"getType": 1, getType: 1,
"userTag": null, userTag: null,
"couponStatus": true, couponStatus: true,
"isDel": false, isDel: false,
"preferentialLimit": null, preferentialLimit: null,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 17:01:11", createTime: '2023-05-24 17:01:11',
"updateTime": null, updateTime: null,
"fileUrl": null fileUrl: null,
}, },
{ {
"id": 10000153, id: 10000153,
"couponName": "列表优惠券测试小嗯嗯", couponName: '列表优惠券测试小嗯嗯',
"couponMoney": 22, couponMoney: 22,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": null, restrictedAccess: null,
"couponTotal": 3, couponTotal: 3,
"lastTotal": 3, lastTotal: 3,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "32,26", primaryKey: '32,26',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-24 00:00:00", useStartTime: '2023-05-24 00:00:00',
"useEndTime": "2023-06-21 23:59:59", useEndTime: '2023-06-21 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": null, userTag: null,
"couponStatus": false, couponStatus: false,
"isDel": false, isDel: false,
"preferentialLimit": null, preferentialLimit: null,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 17:00:06", createTime: '2023-05-24 17:00:06',
"updateTime": null, updateTime: null,
"fileUrl": null fileUrl: null,
}, },
{ {
"id": 10000154, id: 10000154,
"couponName": "列表优惠券测试小嗯嗯", couponName: '列表优惠券测试小嗯嗯',
"couponMoney": 22, couponMoney: 22,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": 1, restrictedAccess: 1,
"couponTotal": 33, couponTotal: 33,
"lastTotal": 33, lastTotal: 33,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "32", primaryKey: '32',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-24 00:00:00", useStartTime: '2023-05-24 00:00:00',
"useEndTime": "2023-06-21 23:59:59", useEndTime: '2023-06-21 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": 1, userTag: 1,
"couponStatus": false, couponStatus: false,
"isDel": false, isDel: false,
"preferentialLimit": null, preferentialLimit: null,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 17:00:06", createTime: '2023-05-24 17:00:06',
"updateTime": null, updateTime: null,
"fileUrl": null fileUrl: null,
}, },
{ {
"id": 10000152, id: 10000152,
"couponName": "444", couponName: '444',
"couponMoney": 444, couponMoney: 444,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": 2, restrictedAccess: 2,
"couponTotal": 444, couponTotal: 444,
"lastTotal": 444, lastTotal: 444,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "32", primaryKey: '32',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-24 00:00:00", useStartTime: '2023-05-24 00:00:00',
"useEndTime": "2023-06-22 23:59:59", useEndTime: '2023-06-22 23:59:59',
"couponDay": null, couponDay: null,
"getType": 2, getType: 2,
"userTag": 1, userTag: 1,
"couponStatus": false, couponStatus: false,
"isDel": false, isDel: false,
"preferentialLimit": null, preferentialLimit: null,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 16:57:44", createTime: '2023-05-24 16:57:44',
"updateTime": null, updateTime: null,
"fileUrl": null fileUrl: null,
}, },
{ {
"id": 10000151, id: 10000151,
"couponName": "iii", couponName: 'iii',
"couponMoney": 12, couponMoney: 12,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": 2, restrictedAccess: 2,
"couponTotal": 12, couponTotal: 12,
"lastTotal": 12, lastTotal: 12,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "32", primaryKey: '32',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-24 00:00:00", useStartTime: '2023-05-24 00:00:00',
"useEndTime": "2023-06-20 23:59:59", useEndTime: '2023-06-20 23:59:59',
"couponDay": null, couponDay: null,
"getType": 1, getType: 1,
"userTag": null, userTag: null,
"couponStatus": false, couponStatus: false,
"isDel": false, isDel: false,
"preferentialLimit": null, preferentialLimit: null,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 16:53:16", createTime: '2023-05-24 16:53:16',
"updateTime": null, updateTime: null,
"fileUrl": null fileUrl: null,
}, },
{ {
"id": 10000150, id: 10000150,
"couponName": "333", couponName: '333',
"couponMoney": 33, couponMoney: 33,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": 2, restrictedAccess: 2,
"couponTotal": 33, couponTotal: 33,
"lastTotal": 33, lastTotal: 33,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "32,31", primaryKey: '32,31',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-24 00:00:00", useStartTime: '2023-05-24 00:00:00',
"useEndTime": "2023-06-20 23:59:59", useEndTime: '2023-06-20 23:59:59',
"couponDay": null, couponDay: null,
"getType": 2, getType: 2,
"userTag": 1, userTag: 1,
"couponStatus": false, couponStatus: false,
"isDel": false, isDel: false,
"preferentialLimit": null, preferentialLimit: null,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 16:46:32", createTime: '2023-05-24 16:46:32',
"updateTime": null, updateTime: null,
"fileUrl": null fileUrl: null,
}, },
{ {
"id": 10000148, id: 10000148,
"couponName": "裂变优惠券测试", couponName: '裂变优惠券测试',
"couponMoney": 1000, couponMoney: 1000,
"couponDiscount": 9, couponDiscount: 9,
"isLimited": true, isLimited: true,
"restrictedAccess": null, restrictedAccess: null,
"couponTotal": 3, couponTotal: 3,
"lastTotal": 3, lastTotal: 3,
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"minPrice": 4000, minPrice: 4000,
"primaryKey": "31", primaryKey: '31',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-04-23 00:00:00", useStartTime: '2023-04-23 00:00:00',
"useEndTime": "2023-04-30 23:59:59", useEndTime: '2023-04-30 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": null, userTag: null,
"couponStatus": false, couponStatus: false,
"isDel": false, isDel: false,
"preferentialLimit": null, preferentialLimit: null,
"verificationType": false, verificationType: false,
"createTime": "2023-04-23 16:10:18", createTime: '2023-04-23 16:10:18',
"updateTime": null, updateTime: null,
"fileUrl": null fileUrl: null,
} },
]) ]);
const res = await CouponManageAPI.CouponPageList({ const res = await CouponManageAPI.CouponPageList({
useType, useType,
pageNo: pagination.current, pageNo: pagination.current,
...@@ -342,7 +342,7 @@ export default function CouponList () { ...@@ -342,7 +342,7 @@ export default function CouponList () {
...value, ...value,
...query, ...query,
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构 const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
// console.log("getTableList --->", list); // console.log("getTableList --->", list);
setPagination({ setPagination({
...@@ -388,14 +388,14 @@ export default function CouponList () { ...@@ -388,14 +388,14 @@ export default function CouponList () {
// 结束优惠券 // 结束优惠券
const handleEnd = (record: TableType[0]) => { const handleEnd = (record: TableType[0]) => {
confirm({ confirm({
title: "提示", title: '提示',
content: "确认结束后，将停止发放该券，已领的优惠券可继续使用", content: '确认结束后，将停止发放该券，已领的优惠券可继续使用',
onOk: async () => { onOk: async () => {
const res = await CouponManageAPI.CouponShutDown({ const res = await CouponManageAPI.CouponShutDown({
id: record.id, id: record.id,
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
message.success("操作成功").then(); message.success('操作成功').then();
paginationChange(pagination.current, pagination.pageSize); paginationChange(pagination.current, pagination.pageSize);
} }
// console.log("删除成功 --->", record); // console.log("删除成功 --->", record);
...@@ -414,16 +414,16 @@ export default function CouponList () { ...@@ -414,16 +414,16 @@ export default function CouponList () {
const handleAdd = (record?: TableType[0]) => { const handleAdd = (record?: TableType[0]) => {
if (record?.id) { if (record?.id) {
history({ history({
pathname: "/couponManage/couponList/detail", pathname: '/couponManage/couponList/detail',
search: `id=${record?.id}&type=${useType}`, search: `id=${record?.id}&type=${useType}`,
}) });
// history.push({ // history.push({
// pathname: "/couponManage/couponList/detail", // pathname: "/couponManage/couponList/detail",
// search: `id=${record?.id}&type=${useType}`, // search: `id=${record?.id}&type=${useType}`,
// }); // });
} else { } else {
history({ history({
pathname: "/couponManage/couponList/detail", pathname: '/couponManage/couponList/detail',
search: `type=${useType}`, search: `type=${useType}`,
}); });
// history.push({ // history.push({
...@@ -436,25 +436,24 @@ export default function CouponList () { ...@@ -436,25 +436,24 @@ export default function CouponList () {
// 表格结构 // 表格结构
const columns: ColumnsType<TableType[0]> = [ const columns: ColumnsType<TableType[0]> = [
{ {
title: "优惠券ID", title: '优惠券ID',
dataIndex: "id", dataIndex: 'id',
align: "center", align: 'center',
}, },
{ {
title: "优惠券名称", title: '优惠券名称',
dataIndex: "couponName", dataIndex: 'couponName',
align: "center", align: 'center',
}, },
{ {
title: "满减规则", title: '满减规则',
align: "center", align: 'center',
render: (value, record) => { render: (value, record) => {
if (record.couponType === 1) if (record.couponType === 1)
return `${record.couponDiscount}折${ return `${record.couponDiscount}折${
couponType.find((i) => i.value === record.couponType)?.label couponType.find((i) => i.value === record.couponType)?.label
}`; }`;
if (record.couponType === 2) if (record.couponType === 2) return `满${record.minPrice}元减${record.couponMoney}元`;
return `满${record.minPrice}元减${record.couponMoney}元`;
if (record.couponType === 3) if (record.couponType === 3)
return `${record.couponMoney}元${ return `${record.couponMoney}元${
couponType.find((i) => i.value === record.couponType)?.label couponType.find((i) => i.value === record.couponType)?.label
...@@ -462,44 +461,39 @@ export default function CouponList () { ...@@ -462,44 +461,39 @@ export default function CouponList () {
}, },
}, },
{ {
title: "有效期", title: '有效期',
align: "center", align: 'center',
width: 280, width: 280,
render: (value, record) => { render: (value, record) => {
if (record.isFixedTime === 0) if (record.isFixedTime === 0) return `${record.useStartTime} 至 ${record.useEndTime}`;
return `${record.useStartTime} 至 ${record.useEndTime}`; if (record.isFixedTime === 1) return `领取成功后${record.couponDay}天内可用`;
if (record.isFixedTime === 1) if (record.isFixedTime === 2) return `领取成功后次日${record.couponDay}天内可用`;
return `领取成功后${record.couponDay}天内可用`;
if (record.isFixedTime === 2)
return `领取成功后次日${record.couponDay}天内可用`;
}, },
}, },
{ {
title: "状态", title: '状态',
align: "center", align: 'center',
render: (value, record) => { render: (value, record) => {
if (!record.couponStatus) return "已结束"; if (!record.couponStatus) return '已结束';
if (record.couponDay) return "领取中"; if (record.couponDay) return '领取中';
// const after = moment(record.useStartTime).isAfter(moment()); // const after = moment(record.useStartTime).isAfter(moment());
const before = moment(record.useEndTime).isBefore(moment()); const before = moment(record.useEndTime).isBefore(moment());
// if (after) return "未开始"; // if (after) return "未开始";
if (before) return "已过期"; if (before) return '已过期';
return "领取中"; return '领取中';
}, },
}, },
{ {
title: "限领", title: '限领',
dataIndex: "restrictedAccess", dataIndex: 'restrictedAccess',
align: "center", align: 'center',
}, },
{ {
title: "剩余/发行量", title: '剩余/发行量',
dataIndex: "proportion", dataIndex: 'proportion',
align: "center", align: 'center',
render: (value, record, index) => render: (value, record, index) =>
record.isLimited record.isLimited ? `${record.lastTotal}/${record.couponTotal}` : '不限量',
? `${record.lastTotal}/${record.couponTotal}`
: "不限量",
}, },
// { // {
// title: "使用量", // title: "使用量",
...@@ -511,31 +505,25 @@ export default function CouponList () { ...@@ -511,31 +505,25 @@ export default function CouponList () {
// : "不限量", // : "不限量",
// }, // },
{ {
title: "创建时间", title: '创建时间',
dataIndex: "createTime", dataIndex: 'createTime',
align: "center", align: 'center',
}, },
{ {
title: "操作", title: '操作',
align: "center", align: 'center',
fixed: "right", fixed: 'right',
width: "180px", width: '180px',
render: (value, record, index) => { render: (value, record, index) => {
const disabled = const disabled =
moment(record.useEndTime).isBefore(moment()) || moment(record.useEndTime).isBefore(moment()) || record.isDel || !record.couponStatus;
record.isDel ||
!record.couponStatus;
return ( return (
<div className="table-body-action"> <div className='table-body-action'>
<Button <Button type='link' onClick={() => handleAdd(record)} disabled={!isLookCouponBtn}>
type="link"
onClick={() => handleAdd(record)}
disabled={!isLookCouponBtn}
>
查看 查看
</Button> </Button>
<Button <Button
type="link" type='link'
onClick={() => { onClick={() => {
setRecordData(JSON.parse(JSON.stringify(record))); setRecordData(JSON.parse(JSON.stringify(record)));
setIncreaseVisible(true); setIncreaseVisible(true);
...@@ -545,7 +533,7 @@ export default function CouponList () { ...@@ -545,7 +533,7 @@ export default function CouponList () {
增发 增发
</Button> </Button>
<Button <Button
type="link" type='link'
onClick={() => { onClick={() => {
setRecordData(JSON.parse(JSON.stringify(record))); setRecordData(JSON.parse(JSON.stringify(record)));
setDataVisible(true); setDataVisible(true);
...@@ -555,7 +543,7 @@ export default function CouponList () { ...@@ -555,7 +543,7 @@ export default function CouponList () {
数据 数据
</Button> </Button>
<Button <Button
type="link" type='link'
onClick={() => handleEnd(record)} onClick={() => handleEnd(record)}
disabled={disabled || !isEndCouponBtn} disabled={disabled || !isEndCouponBtn}
> >
...@@ -577,29 +565,29 @@ export default function CouponList () { ...@@ -577,29 +565,29 @@ export default function CouponList () {
<SearchView <SearchView
search={[ search={[
{ {
label: "规则状态", label: '规则状态',
name: "state", name: 'state',
type: "select", type: 'select',
placeholder: "请选择规则状态", placeholder: '请选择规则状态',
options: stateOptions, options: stateOptions,
}, },
{ {
label: "生效时间", label: '生效时间',
name: "effectTime", name: 'effectTime',
type: "rangePicker", type: 'rangePicker',
placeholder: "请选择生效时间", placeholder: '请选择生效时间',
}, },
{ {
label: "优惠券ID", label: '优惠券ID',
name: "couponId", name: 'couponId',
type: "input", type: 'input',
placeholder: "请输入优惠券ID", placeholder: '请输入优惠券ID',
}, },
{ {
label: "优惠券名称", label: '优惠券名称',
name: "couponName", name: 'couponName',
type: "input", type: 'input',
placeholder: "请输入优惠券名称", placeholder: '请输入优惠券名称',
}, },
]} ]}
searchData={onFinish} searchData={onFinish}
...@@ -607,7 +595,7 @@ export default function CouponList () { ...@@ -607,7 +595,7 @@ export default function CouponList () {
<> <>
<Button <Button
icon={<PlusOutlined />} icon={<PlusOutlined />}
type="primary" type='primary'
onClick={() => { onClick={() => {
handleAdd(); handleAdd();
}} }}
...@@ -615,10 +603,10 @@ export default function CouponList () { ...@@ -615,10 +603,10 @@ export default function CouponList () {
> >
创建品牌券 创建品牌券
</Button> </Button>
<Button icon={<PlusOutlined />} type="primary" disabled> <Button icon={<PlusOutlined />} type='primary' disabled>
创建商品券 创建商品券
</Button> </Button>
<Button icon={<PlusOutlined />} type="primary" disabled> <Button icon={<PlusOutlined />} type='primary' disabled>
创建店铺券 创建店铺券
</Button> </Button>
</> </>
...@@ -630,19 +618,19 @@ export default function CouponList () { ...@@ -630,19 +618,19 @@ export default function CouponList () {
value={useType} value={useType}
options={[ options={[
// { label: "VIP券", value: 1 }, // { label: "VIP券", value: 1 },
{ label: "品牌优惠券", value: 2 }, { label: '品牌优惠券', value: 2 },
{ label: "商品优惠券", value: 3, disabled: true }, { label: '商品优惠券', value: 3, disabled: true },
{ label: "店铺优惠券", value: 4, disabled: true }, { label: '店铺优惠券', value: 4, disabled: true },
{ label: "数据概览", value: 5, disabled: true }, { label: '数据概览', value: 5, disabled: true },
]} ]}
optionType="button" optionType='button'
style={{ marginBottom: "10px" }} style={{ marginBottom: '10px' }}
/> />
<Table <Table
size="small" size='small'
dataSource={tableData} dataSource={tableData}
columns={columns} columns={columns}
rowKey="id" rowKey='id'
scroll={{ x: 1500 }} scroll={{ x: 1500 }}
bordered bordered
pagination={{ pagination={{
...@@ -651,25 +639,23 @@ export default function CouponList () { ...@@ -651,25 +639,23 @@ export default function CouponList () {
current: pagination.current, current: pagination.current,
showSizeChanger: true, showSizeChanger: true,
showQuickJumper: true, showQuickJumper: true,
onChange: (page: number, pageSize: number) => onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
paginationChange(page, pageSize), showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
showTotal: (total, range) =>
`当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}} }}
/> />
</TableBox> </TableBox>
<IncreaseModal <IncreaseModal
open={increaseVisible} open={increaseVisible}
title="增发优惠券" title='增发优惠券'
data={recordData} data={recordData}
closed={handleCloseAll} closed={handleCloseAll}
/> />
<DataModal <DataModal
open={dataVisible} open={dataVisible}
title="优惠券使用数据" title='优惠券使用数据'
data={recordData} data={recordData}
closed={handleCloseAll} closed={handleCloseAll}
/> />
</> </>
); );
}; }
src/pages/couponManage/splitCouponList/addOrEditOrDetail/components/baseInfo/index.tsx
import { FC, forwardRef, useImperativeHandle } from "react"; import { FC, forwardRef, useImperativeHandle } from 'react';
import "./index.scss"; import './index.scss';
import { Form, Input } from "antd"; import { Form, Input } from 'antd';
import { baseInfoType } from "~/api/interface/couponManage"; import { baseInfoType } from '~/api/interface/couponManage';
interface selfPops { interface selfPops {
ref: any; ref: any;
...@@ -16,9 +16,9 @@ const BaseInfo: FC<selfPops> = forwardRef(({ isDetail }, ref) => { ...@@ -16,9 +16,9 @@ const BaseInfo: FC<selfPops> = forwardRef(({ isDetail }, ref) => {
})); }));
return ( return (
<div className="split-coupon-base-info"> <div className='split-coupon-base-info'>
<div className="title">基本信息</div> <div className='title'>基本信息</div>
<div className="base-info-form"> <div className='base-info-form'>
<Form <Form
labelCol={{ span: 2 }} labelCol={{ span: 2 }}
wrapperCol={{ span: 5 }} wrapperCol={{ span: 5 }}
...@@ -26,11 +26,11 @@ const BaseInfo: FC<selfPops> = forwardRef(({ isDetail }, ref) => { ...@@ -26,11 +26,11 @@ const BaseInfo: FC<selfPops> = forwardRef(({ isDetail }, ref) => {
disabled={isDetail} disabled={isDetail}
> >
<Form.Item <Form.Item
label="优惠券名称" label='优惠券名称'
name="couponName" name='couponName'
rules={[{ required: true, message: "请输入优惠券名称" }]} rules={[{ required: true, message: '请输入优惠券名称' }]}
> >
<Input placeholder="请输入优惠券名称" maxLength={10} /> <Input placeholder='请输入优惠券名称' maxLength={10} />
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
......
src/pages/couponManage/splitCouponList/addOrEditOrDetail/components/shareCouponInfo/index.tsx
import { FC, forwardRef, useImperativeHandle, useState } from "react"; import { FC, forwardRef, useImperativeHandle, useState } from 'react';
import { DatePicker, Form, Input, Radio, Select } from "antd"; import { DatePicker, Form, Input, Radio, Select } from 'antd';
import dayjs from "dayjs"; import dayjs from 'dayjs';
import { RangePickerProps } from "antd/es/date-picker"; import { RangePickerProps } from 'antd/es/date-picker';
import { shareCouponType } from "~/api/interface/couponManage"; import { shareCouponType } from '~/api/interface/couponManage';
import { MakeItemEntity } from "~/api/interface/makeManage"; import { MakeItemEntity } from '~/api/interface/makeManage';
import { splitCouponType, splitCouponUseType } from "~/utils/dictionary"; import { splitCouponType, splitCouponUseType } from '~/utils/dictionary';
interface selfProps { interface selfProps {
ref: any; ref: any;
...@@ -12,354 +12,345 @@ interface selfProps { ...@@ -12,354 +12,345 @@ interface selfProps {
isDetail: boolean; isDetail: boolean;
} }
const ShareCouponInfo: FC<selfProps> = forwardRef( const ShareCouponInfo: FC<selfProps> = forwardRef(({ makeList, isDetail }, ref) => {
({ makeList, isDetail }, ref) => { const [shareCouponForm] = Form.useForm<shareCouponType>();
const [shareCouponForm] = Form.useForm<shareCouponType>(); // 优惠券类型
// 优惠券类型 const [couponType, setCouponType] = useState<number>(3);
const [couponType, setCouponType] = useState<number>(3);
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
getForm: () => shareCouponForm, getForm: () => shareCouponForm,
setCouponType: (type: number) => setCouponType(type), setCouponType: (type: number) => setCouponType(type),
})); }));
// 门槛类型选择 // 门槛类型选择
const couponTypeChange = (e: any) => { const couponTypeChange = (e: any) => {
shareCouponForm.setFieldValue( shareCouponForm.setFieldValue('verificationType', e.target.value === 3 ? 0 : undefined);
"verificationType", setCouponType(e.target.value);
e.target.value === 3 ? 0 : undefined shareCouponForm.setFieldValue('minPrice', undefined);
); };
setCouponType(e.target.value);
shareCouponForm.setFieldValue("minPrice", undefined);
};
// 表单规则 // 表单规则
// 钱-基本校验 // 钱-基本校验
const moneyValidator = (value: string) => { const moneyValidator = (value: string) => {
if (Number(value) < 0) { if (Number(value) < 0) {
return Promise.reject(new Error("金额不能为负值!")); return Promise.reject(new Error('金额不能为负值!'));
} }
if (Number(value) > 99999.99) { if (Number(value) > 99999.99) {
return Promise.reject(new Error("金额不能大于99999.99!")); return Promise.reject(new Error('金额不能大于99999.99!'));
} }
if (Number(value) < 0) { if (Number(value) < 0) {
return Promise.reject(new Error("金额不能为负值!")); return Promise.reject(new Error('金额不能为负值!'));
} }
const reg = /^0\.([1-9]|\d[1-9])$|^[0-9]\d{0,8}\.\d{0,2}$|^[0-9]\d{0,8}$/; const reg = /^0\.([1-9]|\d[1-9])$|^[0-9]\d{0,8}\.\d{0,2}$|^[0-9]\d{0,8}$/;
if (!reg.test(value) && value) { if (!reg.test(value) && value) {
return Promise.reject(new Error("金额应为整数,小数且小数保留后两位")); return Promise.reject(new Error('金额应为整数,小数且小数保留后两位'));
} }
return Promise.resolve(); return Promise.resolve();
}; };
// 优惠金额是否超标 // 优惠金额是否超标
const isOverstep = () => { const isOverstep = () => {
const minPrice = shareCouponForm.getFieldValue("minPrice"); const minPrice = shareCouponForm.getFieldValue('minPrice');
const discount = shareCouponForm.getFieldValue("couponDiscount"); const discount = shareCouponForm.getFieldValue('couponDiscount');
const couponMoney = shareCouponForm.getFieldValue("couponMoney"); const couponMoney = shareCouponForm.getFieldValue('couponMoney');
return ( return (
minPrice && minPrice &&
discount && discount &&
couponMoney && couponMoney &&
Number(couponMoney) > Number(minPrice) * Number(discount) * 0.1 Number(couponMoney) > Number(minPrice) * Number(discount) * 0.1
); );
}; };
const couponMoneyValidator = async (rule: any, value: string) => { const couponMoneyValidator = async (rule: any, value: string) => {
if (!value) { if (!value) {
return Promise.reject(new Error("请输入优惠金额")); return Promise.reject(new Error('请输入优惠金额'));
} }
const res: any = await moneyValidator(value); const res: any = await moneyValidator(value);
if (res) { if (res) {
return Promise.reject(res); return Promise.reject(res);
} }
const minPrice = shareCouponForm.getFieldValue("minPrice"); const minPrice = shareCouponForm.getFieldValue('minPrice');
if (couponType === 1) { if (couponType === 1) {
if (isOverstep()) {
return Promise.reject(
new Error("优惠金额超出最高优惠金额，请重新输入")
);
}
if (
shareCouponForm.getFieldValue("couponDiscount") &&
!shareCouponForm.isFieldValidating("couponDiscount")
) {
await shareCouponForm.validateFields(["couponDiscount"]);
}
}
if (couponType !== 3) {
if (minPrice && Number(minPrice) < Number(value)) {
return Promise.reject(new Error("优惠金额应小于减免券金额"));
}
if (minPrice && !shareCouponForm.isFieldValidating("minPrice")) {
await shareCouponForm.validateFields(["minPrice"]);
}
}
return Promise.resolve();
};
const minPriceValidator = async (rule: any, value: string) => {
if (!value) {
return Promise.reject(new Error("请输入满减金额"));
}
const res: any = await moneyValidator(value);
if (res) {
return Promise.reject(res);
}
const couponMoney = shareCouponForm.getFieldValue("couponMoney");
if (couponMoney && Number(couponMoney) > Number(value)) {
return Promise.reject(new Error("满减金额应大于优惠金额!"));
}
if (couponMoney && !shareCouponForm.isFieldValidating("couponMoney")) {
shareCouponForm.validateFields(["couponMoney"]).then().catch();
}
return Promise.resolve();
};
const discountValidator = (rule: any, value: string) => {
if (!value) {
return Promise.reject(new Error(`请输入折扣!`));
}
if (Number(value) <= 0) {
return Promise.reject(new Error("折扣不能小于等于0!"));
}
if (Number(value) >= 10) {
return Promise.reject(new Error("折扣应小于10"));
}
const reg = /^0\.([1-9]|\d[1-9])$|^[0-9]\d{0,8}\.\d{0,2}$|^[0-9]\d{0,8}$/;
if (!reg.test(value)) {
return Promise.reject(new Error("折扣应为整数,小数且小数保留后两位"));
}
if (isOverstep()) { if (isOverstep()) {
return Promise.reject(new Error("优惠金额超出最高优惠金额!")); return Promise.reject(new Error('优惠金额超出最高优惠金额，请重新输入'));
} }
if ( if (
shareCouponForm.getFieldValue("couponMoney") && shareCouponForm.getFieldValue('couponDiscount') &&
!shareCouponForm.isFieldValidating("couponMoney") !shareCouponForm.isFieldValidating('couponDiscount')
) { ) {
shareCouponForm.validateFields(["couponMoney"]).then().catch(); await shareCouponForm.validateFields(['couponDiscount']);
}
return Promise.resolve();
};
const negativeNumberValidator = (
rule: any,
value: string,
callback: (error?: string) => void,
label: string
) => {
if (!value) {
return Promise.reject(new Error(`请输入${label}!`));
} }
const reg = /^[0-9]*$/; }
if (!reg.test(value)) { if (couponType !== 3) {
return Promise.reject(new Error(`${label}为正数!`)); if (minPrice && Number(minPrice) < Number(value)) {
return Promise.reject(new Error('优惠金额应小于减免券金额'));
} }
switch (label) { if (minPrice && !shareCouponForm.isFieldValidating('minPrice')) {
case "发行量": await shareCouponForm.validateFields(['minPrice']);
if (Number(value) < 1 || Number(value) > 100000) {
return Promise.reject(new Error(`${label}至少1张且不超过10万`));
}
break;
case "限领数量":
if (Number(value) > 5) {
return Promise.reject(new Error(`${label}限领数量最大为5`));
}
break;
} }
return Promise.resolve(); }
}; return Promise.resolve();
// 选择时间禁用 };
const disabledDate: RangePickerProps["disabledDate"] = (current) => { const minPriceValidator = async (rule: any, value: string) => {
// Can not select days before today if (!value) {
return current && current < dayjs().subtract(1, "day"); return Promise.reject(new Error('请输入满减金额'));
}; }
return ( const res: any = await moneyValidator(value);
<div className="share-coupon-info"> if (res) {
<div className="title">分享者优惠券</div> return Promise.reject(res);
<div className="share-coupon-form"> }
<Form const couponMoney = shareCouponForm.getFieldValue('couponMoney');
labelCol={{ span: 2 }} if (couponMoney && Number(couponMoney) > Number(value)) {
wrapperCol={{ span: 5 }} return Promise.reject(new Error('满减金额应大于优惠金额!'));
form={shareCouponForm} }
initialValues={{ useType: 2, couponType: 3, verificationType: 0 }} if (couponMoney && !shareCouponForm.isFieldValidating('couponMoney')) {
disabled={isDetail} shareCouponForm.validateFields(['couponMoney']).then().catch();
}
return Promise.resolve();
};
const discountValidator = (rule: any, value: string) => {
if (!value) {
return Promise.reject(new Error(`请输入折扣!`));
}
if (Number(value) <= 0) {
return Promise.reject(new Error('折扣不能小于等于0!'));
}
if (Number(value) >= 10) {
return Promise.reject(new Error('折扣应小于10'));
}
const reg = /^0\.([1-9]|\d[1-9])$|^[0-9]\d{0,8}\.\d{0,2}$|^[0-9]\d{0,8}$/;
if (!reg.test(value)) {
return Promise.reject(new Error('折扣应为整数,小数且小数保留后两位'));
}
if (isOverstep()) {
return Promise.reject(new Error('优惠金额超出最高优惠金额!'));
}
if (
shareCouponForm.getFieldValue('couponMoney') &&
!shareCouponForm.isFieldValidating('couponMoney')
) {
shareCouponForm.validateFields(['couponMoney']).then().catch();
}
return Promise.resolve();
};
const negativeNumberValidator = (
rule: any,
value: string,
callback: (error?: string) => void,
label: string,
) => {
if (!value) {
return Promise.reject(new Error(`请输入${label}!`));
}
const reg = /^[0-9]*$/;
if (!reg.test(value)) {
return Promise.reject(new Error(`${label}为正数!`));
}
switch (label) {
case '发行量':
if (Number(value) < 1 || Number(value) > 100000) {
return Promise.reject(new Error(`${label}至少1张且不超过10万`));
}
break;
case '限领数量':
if (Number(value) > 5) {
return Promise.reject(new Error(`${label}限领数量最大为5`));
}
break;
}
return Promise.resolve();
};
// 选择时间禁用
const disabledDate: RangePickerProps['disabledDate'] = (current) => {
// Can not select days before today
return current && current < dayjs().subtract(1, 'day');
};
return (
<div className='share-coupon-info'>
<div className='title'>分享者优惠券</div>
<div className='share-coupon-form'>
<Form
labelCol={{ span: 2 }}
wrapperCol={{ span: 5 }}
form={shareCouponForm}
initialValues={{ useType: 2, couponType: 3, verificationType: 0 }}
disabled={isDetail}
>
<Form.Item
label='券类型'
name='useType'
rules={[{ required: true, message: '请选择券类型' }]}
> >
<Form.Item <Radio.Group>
label="券类型" {splitCouponUseType.map((v) => (
name="useType" <Radio value={v.val} key={v.val} disabled={v.val !== 2}>
rules={[{ required: true, message: "请选择券类型" }]} {v.label}
> </Radio>
<Radio.Group> ))}
{splitCouponUseType.map((v) => ( </Radio.Group>
<Radio value={v.val} key={v.val} disabled={v.val !== 2}> </Form.Item>
{v.label} <Form.Item
</Radio> label='品牌'
))} name='primaryKey'
</Radio.Group> rules={[{ required: true, message: '请选择品牌' }]}
</Form.Item> >
<Form.Item <Select
label="品牌" placeholder='请选择品牌'
name="primaryKey" mode='multiple'
rules={[{ required: true, message: "请选择品牌" }]} maxTagCount={50}
> filterOption={(input, option) =>
<Select (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
placeholder="请选择品牌" }
mode="multiple"
maxTagCount={50}
filterOption={(input, option) =>
(option!.children as unknown as string)
.toLowerCase()
.includes(input.toLowerCase())
}
>
{makeList.map((v) => (
<Select.Option value={v.id} key={v.id}>
{v.brandName}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label="有效期"
name="time"
rules={[{ required: true, message: "请选择有效期" }]}
> >
<DatePicker.RangePicker disabledDate={disabledDate} /> {makeList.map((v) => (
</Form.Item> <Select.Option value={v.id} key={v.id}>
{v.brandName}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label='有效期'
name='time'
rules={[{ required: true, message: '请选择有效期' }]}
>
<DatePicker.RangePicker disabledDate={disabledDate} />
</Form.Item>
<Form.Item
label='优惠金额'
name='couponMoney'
rules={[
{
required: true,
validator: couponMoneyValidator,
},
]}
>
<Input placeholder='请输入优惠券金额' suffix='元' />
</Form.Item>
<Form.Item
label='使用门槛'
name='couponType'
rules={[{ required: true, message: '请选择使用门槛' }]}
>
<Radio.Group onChange={couponTypeChange}>
{splitCouponType.map((v) => (
<Radio value={v.val} key={v.val}>
{v.label}
</Radio>
))}
</Radio.Group>
</Form.Item>
{couponType !== 3 && (
<Form.Item <Form.Item
label="优惠金额" label='满'
name="couponMoney" style={{ marginLeft: '30px' }}
name='minPrice'
rules={[ rules={[
{ {
required: true, required: true,
validator: couponMoneyValidator, validator: minPriceValidator,
}, },
]} ]}
> >
<Input placeholder="请输入优惠券金额" suffix="元" /> <Input placeholder='请输入金额' suffix='元' />
</Form.Item> </Form.Item>
<Form.Item )}
label="使用门槛" {couponType === 1 && (
name="couponType" <>
rules={[{ required: true, message: "请选择使用门槛" }]}
>
<Radio.Group onChange={couponTypeChange}>
{splitCouponType.map((v) => (
<Radio value={v.val} key={v.val}>
{v.label}
</Radio>
))}
</Radio.Group>
</Form.Item>
{couponType !== 3 && (
<Form.Item <Form.Item
label="满" label='打'
style={{ marginLeft: "30px" }} style={{ marginLeft: '30px' }}
name="minPrice" name='couponDiscount'
rules={[ rules={[
{ {
required: true, required: true,
validator: minPriceValidator, validator: discountValidator,
}, },
]} ]}
> >
<Input placeholder="请输入金额" suffix="元" /> <Input placeholder='请输入折扣' suffix='折' />
</Form.Item>
)}
{couponType === 1 && (
<>
<Form.Item
label="打"
style={{ marginLeft: "30px" }}
name="couponDiscount"
rules={[
{
required: true,
validator: discountValidator,
},
]}
>
<Input placeholder="请输入折扣" suffix="折" />
</Form.Item>
{/* <Form.Item */}
{/* label="最多优惠" */}
{/* style={{ marginLeft: "30px" }} */}
{/* name="preferentialLimit" */}
{/* rules={[ */}
{/* { */}
{/* required: true, */}
{/* validator: (rule, value, callback) => */}
{/* moneyValidator(rule, value, callback, "最多优惠"), */}
{/* }, */}
{/* ]} */}
{/* > */}
{/* <Input placeholder="请输入最多优惠" suffix="元" /> */}
{/* </Form.Item> */}
</>
)}
{couponType === 3 && (
<Form.Item
label="核销方式"
name="verificationType"
rules={[{ required: true, message: "请选择核销方式" }]}
>
<Radio.Group>
<Radio value={0}>单次核销</Radio>
<Radio value={1}>多次核销</Radio>
</Radio.Group>
</Form.Item> </Form.Item>
)} {/* <Form.Item */}
{/* label="最多优惠" */}
<Form.Item {/* style={{ marginLeft: "30px" }} */}
label="发行量" {/* name="preferentialLimit" */}
name="couponTotal" {/* rules={[ */}
rules={[ {/* { */}
{ {/* required: true, */}
required: true, {/* validator: (rule, value, callback) => */}
validator: (rule, value, callback) => {/* moneyValidator(rule, value, callback, "最多优惠"), */}
negativeNumberValidator(rule, value, callback, "发行量"), {/* }, */}
}, {/* ]} */}
]} {/* > */}
> {/* <Input placeholder="请输入最多优惠" suffix="元" /> */}
<Input placeholder="请输入发行量" suffix="张" /> {/* </Form.Item> */}
</Form.Item> </>
{/* <Form.Item */} )}
{/* label="每人限领" */} {couponType === 3 && (
{/* name="restrictedAccess" */}
{/* rules={[ */}
{/* { */}
{/* required: true, */}
{/* validator: (rule, value, callback) => */}
{/* negativeNumberValidator(rule, value, callback, "限领数量"), */}
{/* }, */}
{/* ]} */}
{/* > */}
{/* <Input placeholder="请输入限领数量" suffix="张" /> */}
{/* </Form.Item> */}
<Form.Item <Form.Item
label="分享人数" label='核销方式'
name="peopleNumber" name='verificationType'
rules={[ rules={[{ required: true, message: '请选择核销方式' }]}
{
required: true,
message: "请选择分享人数",
},
]}
> >
<Select placeholder="请输入分享人数"> <Radio.Group>
<Select value={2}>2人</Select> <Radio value={0}>单次核销</Radio>
<Select value={3}>3人</Select> <Radio value={1}>多次核销</Radio>
<Select value={5}>5人</Select> </Radio.Group>
</Select>
</Form.Item>
<Form.Item label="被分享用户标签" name="userTag">
<Select placeholder="请选择标签" allowClear>
<Select.Option value={1}>新人</Select.Option>
<Select.Option value={2}>实名认证</Select.Option>
<Select.Option value={3}>企业认证</Select.Option>
</Select>
</Form.Item> </Form.Item>
</Form> )}
</div>
<Form.Item
label='发行量'
name='couponTotal'
rules={[
{
required: true,
validator: (rule, value, callback) =>
negativeNumberValidator(rule, value, callback, '发行量'),
},
]}
>
<Input placeholder='请输入发行量' suffix='张' />
</Form.Item>
{/* <Form.Item */}
{/* label="每人限领" */}
{/* name="restrictedAccess" */}
{/* rules={[ */}
{/* { */}
{/* required: true, */}
{/* validator: (rule, value, callback) => */}
{/* negativeNumberValidator(rule, value, callback, "限领数量"), */}
{/* }, */}
{/* ]} */}
{/* > */}
{/* <Input placeholder="请输入限领数量" suffix="张" /> */}
{/* </Form.Item> */}
<Form.Item
label='分享人数'
name='peopleNumber'
rules={[
{
required: true,
message: '请选择分享人数',
},
]}
>
<Select placeholder='请输入分享人数'>
<Select value={2}>2人</Select>
<Select value={3}>3人</Select>
<Select value={5}>5人</Select>
</Select>
</Form.Item>
<Form.Item label='被分享用户标签' name='userTag'>
<Select placeholder='请选择标签' allowClear>
<Select.Option value={1}>新人</Select.Option>
<Select.Option value={2}>实名认证</Select.Option>
<Select.Option value={3}>企业认证</Select.Option>
</Select>
</Form.Item>
</Form>
</div> </div>
); </div>
} );
); });
export default ShareCouponInfo; export default ShareCouponInfo;
src/pages/couponManage/splitCouponList/addOrEditOrDetail/components/sharedCouponInfo/index.tsx
import { FC, forwardRef, useImperativeHandle, useState } from "react"; import { FC, forwardRef, useImperativeHandle, useState } from 'react';
import { Col, Form, Input, Radio, Row, Select } from "antd"; import { Col, Form, Input, Radio, Row, Select } from 'antd';
import { MakeItemEntity } from "~/api/interface/makeManage"; import { MakeItemEntity } from '~/api/interface/makeManage';
import { sharedCouponType } from "~/api/interface/couponManage"; import { sharedCouponType } from '~/api/interface/couponManage';
import { splitCouponType, splitCouponUseType } from "~/utils/dictionary"; import { splitCouponType, splitCouponUseType } from '~/utils/dictionary';
interface selfProps { interface selfProps {
ref: any; ref: any;
...@@ -24,51 +24,42 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -24,51 +24,42 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
// 门槛类型选择 // 门槛类型选择
const couponTypeChange = (e: any) => { const couponTypeChange = (e: any) => {
sharedCouponForm.setFieldValue( sharedCouponForm.setFieldValue(
"beSharedVerificationType", 'beSharedVerificationType',
e.target.value === 3 ? 0 : undefined e.target.value === 3 ? 0 : undefined,
); );
sharedCouponForm.setFieldValue("beSharedMinPrice", undefined); sharedCouponForm.setFieldValue('beSharedMinPrice', undefined);
setCouponType(e.target.value); setCouponType(e.target.value);
}; };
// 获取被分享者最低发行量 // 获取被分享者最低发行量
const getMinBeSharedCouponTotal = (): number => { const getMinBeSharedCouponTotal = (): number => {
const shareCouponRefObj = shareCouponRef.current; const shareCouponRefObj = shareCouponRef.current;
const couponTotal = shareCouponRefObj const couponTotal = shareCouponRefObj.getForm().getFieldValue('couponTotal');
.getForm() const peopleNumber = shareCouponRefObj.getForm().getFieldValue('peopleNumber');
.getFieldValue("couponTotal"); return (couponTotal && peopleNumber && Number(couponTotal) * Number(peopleNumber) * 1.5) || 0;
const peopleNumber = shareCouponRefObj
.getForm()
.getFieldValue("peopleNumber");
return (
(couponTotal &&
peopleNumber &&
Number(couponTotal) * Number(peopleNumber) * 1.5) ||
0
);
}; };
// 表单规则 // 表单规则
// 钱-基本校验 // 钱-基本校验
const moneyValidator = (value: string) => { const moneyValidator = (value: string) => {
if (Number(value) < 0) { if (Number(value) < 0) {
return Promise.reject(new Error("金额不能为负值!")); return Promise.reject(new Error('金额不能为负值!'));
} }
if (Number(value) > 99999.99) { if (Number(value) > 99999.99) {
return Promise.reject(new Error("金额不能大于99999.99!")); return Promise.reject(new Error('金额不能大于99999.99!'));
} }
if (Number(value) < 0) { if (Number(value) < 0) {
return Promise.reject(new Error("金额不能为负值!")); return Promise.reject(new Error('金额不能为负值!'));
} }
const reg = /^0\.([1-9]|\d[1-9])$|^[0-9]\d{0,8}\.\d{0,2}$|^[0-9]\d{0,8}$/; const reg = /^0\.([1-9]|\d[1-9])$|^[0-9]\d{0,8}\.\d{0,2}$|^[0-9]\d{0,8}$/;
if (!reg.test(value) && value) { if (!reg.test(value) && value) {
return Promise.reject(new Error("金额应为整数,小数且小数保留后两位")); return Promise.reject(new Error('金额应为整数,小数且小数保留后两位'));
} }
return Promise.resolve(); return Promise.resolve();
}; };
// 优惠金额是否超标 // 优惠金额是否超标
const isOverstep = () => { const isOverstep = () => {
const minPrice = sharedCouponForm.getFieldValue("beSharedMinPrice"); const minPrice = sharedCouponForm.getFieldValue('beSharedMinPrice');
const discount = sharedCouponForm.getFieldValue("beSharedCouponDiscount"); const discount = sharedCouponForm.getFieldValue('beSharedCouponDiscount');
const couponMoney = sharedCouponForm.getFieldValue("beSharedCouponMoney"); const couponMoney = sharedCouponForm.getFieldValue('beSharedCouponMoney');
return ( return (
minPrice && minPrice &&
discount && discount &&
...@@ -78,81 +69,73 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -78,81 +69,73 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
}; };
const couponMoneyValidator = async (rule: any, value: string) => { const couponMoneyValidator = async (rule: any, value: string) => {
if (!value) { if (!value) {
return Promise.reject(new Error("请输入优惠金额")); return Promise.reject(new Error('请输入优惠金额'));
} }
const res: any = await moneyValidator(value); const res: any = await moneyValidator(value);
if (res) { if (res) {
return Promise.reject(res); return Promise.reject(res);
} }
const minPrice = sharedCouponForm.getFieldValue("beSharedMinPrice"); const minPrice = sharedCouponForm.getFieldValue('beSharedMinPrice');
if (couponType === 1) { if (couponType === 1) {
if (isOverstep()) { if (isOverstep()) {
return Promise.reject( return Promise.reject(new Error('优惠金额超出最高优惠金额，请重新输入'));
new Error("优惠金额超出最高优惠金额，请重新输入")
);
} }
if ( if (
sharedCouponForm.getFieldValue("beSharedCouponDiscount") && sharedCouponForm.getFieldValue('beSharedCouponDiscount') &&
!sharedCouponForm.isFieldValidating("beSharedCouponDiscount") !sharedCouponForm.isFieldValidating('beSharedCouponDiscount')
) { ) {
await sharedCouponForm.validateFields(["beSharedCouponDiscount"]); await sharedCouponForm.validateFields(['beSharedCouponDiscount']);
} }
} }
if (couponType !== 3) { if (couponType !== 3) {
if (minPrice && Number(minPrice) < Number(value)) { if (minPrice && Number(minPrice) < Number(value)) {
return Promise.reject(new Error("优惠金额应小于减免券金额")); return Promise.reject(new Error('优惠金额应小于减免券金额'));
} }
if ( if (minPrice && !sharedCouponForm.isFieldValidating('beSharedMinPrice')) {
minPrice && await sharedCouponForm.validateFields(['minPrice']);
!sharedCouponForm.isFieldValidating("beSharedMinPrice")
) {
await sharedCouponForm.validateFields(["minPrice"]);
} }
} }
return Promise.resolve(); return Promise.resolve();
}; };
const minPriceValidator = async (rule: any, value: string) => { const minPriceValidator = async (rule: any, value: string) => {
if (!value) { if (!value) {
return Promise.reject(new Error("请输入满减金额")); return Promise.reject(new Error('请输入满减金额'));
} }
const res: any = await moneyValidator(value); const res: any = await moneyValidator(value);
if (res) { if (res) {
return Promise.reject(res); return Promise.reject(res);
} }
const couponMoney = sharedCouponForm.getFieldValue("beSharedCouponMoney"); const couponMoney = sharedCouponForm.getFieldValue('beSharedCouponMoney');
if (couponMoney && Number(couponMoney) > Number(value)) { if (couponMoney && Number(couponMoney) > Number(value)) {
return Promise.reject(new Error("满减金额应大于优惠金额!")); return Promise.reject(new Error('满减金额应大于优惠金额!'));
} }
if ( if (couponMoney && !sharedCouponForm.isFieldValidating('beSharedCouponMoney')) {
couponMoney && sharedCouponForm.validateFields(['couponMoney']).then().catch();
!sharedCouponForm.isFieldValidating("beSharedCouponMoney")
) {
sharedCouponForm.validateFields(["couponMoney"]).then().catch();
} }
return Promise.resolve(); return Promise.resolve();
}; };
const discountValidator = (rule: any, value: string) => { const discountValidator = (rule: any, value: string) => {
if (value === "") { if (value === '') {
return Promise.reject(new Error(`请输入折扣!`)); return Promise.reject(new Error(`请输入折扣!`));
} }
if (Number(value) <= 0) { if (Number(value) <= 0) {
return Promise.reject(new Error("折扣不能小于等于0!")); return Promise.reject(new Error('折扣不能小于等于0!'));
} }
if (Number(value) >= 10) { if (Number(value) >= 10) {
return Promise.reject(new Error("折扣应小于10")); return Promise.reject(new Error('折扣应小于10'));
} }
const reg = /^0\.([1-9]|\d[1-9])$|^[0-9]\d{0,8}\.\d{0,2}$|^[0-9]\d{0,8}$/; const reg = /^0\.([1-9]|\d[1-9])$|^[0-9]\d{0,8}\.\d{0,2}$|^[0-9]\d{0,8}$/;
if (!reg.test(value)) { if (!reg.test(value)) {
return Promise.reject(new Error("折扣应为整数,小数且小数保留后两位")); return Promise.reject(new Error('折扣应为整数,小数且小数保留后两位'));
} }
if (isOverstep()) { if (isOverstep()) {
return Promise.reject(new Error("优惠金额超出最高优惠金额!")); return Promise.reject(new Error('优惠金额超出最高优惠金额!'));
} }
if ( if (
sharedCouponForm.getFieldValue("beSharedCouponMoney") && sharedCouponForm.getFieldValue('beSharedCouponMoney') &&
!sharedCouponForm.isFieldValidating("beSharedCouponMoney") !sharedCouponForm.isFieldValidating('beSharedCouponMoney')
) { ) {
sharedCouponForm.validateFields(["beSharedCouponMoney"]).then().catch(); sharedCouponForm.validateFields(['beSharedCouponMoney']).then().catch();
} }
return Promise.resolve(); return Promise.resolve();
}; };
...@@ -165,16 +148,14 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -165,16 +148,14 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
return Promise.reject(new Error(`被分享者优惠券发行量为正数!`)); return Promise.reject(new Error(`被分享者优惠券发行量为正数!`));
} }
if (Number(value) < getMinBeSharedCouponTotal()) { if (Number(value) < getMinBeSharedCouponTotal()) {
return Promise.reject( return Promise.reject(new Error('被分享者券发行量大于等于分享者券发行量*分享人数*1.5'));
new Error("被分享者券发行量大于等于分享者券发行量*分享人数*1.5")
);
} }
return Promise.resolve(); return Promise.resolve();
}; };
return ( return (
<div className="shared-coupon-info"> <div className='shared-coupon-info'>
<div className="title">被分享者优惠券</div> <div className='title'>被分享者优惠券</div>
<div className="shared-coupon-form"> <div className='shared-coupon-form'>
<Form <Form
labelCol={{ span: 2 }} labelCol={{ span: 2 }}
wrapperCol={{ span: 5 }} wrapperCol={{ span: 5 }}
...@@ -187,9 +168,9 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -187,9 +168,9 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
disabled={isDetail} disabled={isDetail}
> >
<Form.Item <Form.Item
label="券类型" label='券类型'
name="beSharedUseType" name='beSharedUseType'
rules={[{ required: true, message: "请选择券类型" }]} rules={[{ required: true, message: '请选择券类型' }]}
> >
<Radio.Group> <Radio.Group>
{splitCouponUseType.map((v) => ( {splitCouponUseType.map((v) => (
...@@ -200,13 +181,13 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -200,13 +181,13 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="品牌" label='品牌'
name="beSharedPrimaryKey" name='beSharedPrimaryKey'
rules={[{ required: true, message: "请选择品牌" }]} rules={[{ required: true, message: '请选择品牌' }]}
> >
<Select <Select
placeholder="请选择品牌" placeholder='请选择品牌'
mode="multiple" mode='multiple'
maxTagCount={50} maxTagCount={50}
filterOption={(input, option) => filterOption={(input, option) =>
(option!.children as unknown as string) (option!.children as unknown as string)
...@@ -222,8 +203,8 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -222,8 +203,8 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="优惠金额" label='优惠金额'
name="beSharedCouponMoney" name='beSharedCouponMoney'
rules={[ rules={[
{ {
required: true, required: true,
...@@ -231,12 +212,12 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -231,12 +212,12 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
}, },
]} ]}
> >
<Input placeholder="请输入优惠券金额" suffix="元" /> <Input placeholder='请输入优惠券金额' suffix='元' />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="使用门槛" label='使用门槛'
name="beSharedCouponType" name='beSharedCouponType'
rules={[{ required: true, message: "请选择使用门槛" }]} rules={[{ required: true, message: '请选择使用门槛' }]}
> >
<Radio.Group onChange={couponTypeChange}> <Radio.Group onChange={couponTypeChange}>
{splitCouponType.map((v) => ( {splitCouponType.map((v) => (
...@@ -248,9 +229,9 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -248,9 +229,9 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
</Form.Item> </Form.Item>
{couponType !== 3 && ( {couponType !== 3 && (
<Form.Item <Form.Item
label="满" label='满'
style={{ marginLeft: "30px" }} style={{ marginLeft: '30px' }}
name="beSharedMinPrice" name='beSharedMinPrice'
rules={[ rules={[
{ {
required: true, required: true,
...@@ -258,14 +239,14 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -258,14 +239,14 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
}, },
]} ]}
> >
<Input placeholder="请输入金额" suffix="元" /> <Input placeholder='请输入金额' suffix='元' />
</Form.Item> </Form.Item>
)} )}
{couponType === 1 && ( {couponType === 1 && (
<Form.Item <Form.Item
label="打" label='打'
style={{ marginLeft: "30px" }} style={{ marginLeft: '30px' }}
name="beSharedCouponDiscount" name='beSharedCouponDiscount'
rules={[ rules={[
{ {
required: true, required: true,
...@@ -273,7 +254,7 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -273,7 +254,7 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
}, },
]} ]}
> >
<Input placeholder="请输入折扣" suffix="折" /> <Input placeholder='请输入折扣' suffix='折' />
</Form.Item> </Form.Item>
)} )}
{/* <Form.Item */} {/* <Form.Item */}
...@@ -292,9 +273,9 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -292,9 +273,9 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
{/* </Form.Item> */} {/* </Form.Item> */}
{couponType === 3 && ( {couponType === 3 && (
<Form.Item <Form.Item
label="核销方式" label='核销方式'
name="beSharedVerificationType" name='beSharedVerificationType'
rules={[{ required: true, message: "请选择核销方式" }]} rules={[{ required: true, message: '请选择核销方式' }]}
> >
<Radio.Group> <Radio.Group>
<Radio value={0}>单次核销</Radio> <Radio value={0}>单次核销</Radio>
...@@ -304,8 +285,8 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -304,8 +285,8 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
)} )}
<Form.Item <Form.Item
label="发行量" label='发行量'
name="beSharedCouponTotal" name='beSharedCouponTotal'
rules={[ rules={[
{ {
required: true, required: true,
...@@ -313,19 +294,19 @@ const SharedCouponInfo: FC<selfProps> = forwardRef( ...@@ -313,19 +294,19 @@ const SharedCouponInfo: FC<selfProps> = forwardRef(
}, },
]} ]}
> >
<Input placeholder="请输入发行量" suffix="张" /> <Input placeholder='请输入发行量' suffix='张' />
</Form.Item> </Form.Item>
<Row> <Row>
<Col span={2} /> <Col span={2} />
<Col span={22} style={{ color: "#1677ff" }}> <Col span={22} style={{ color: '#1677ff' }}>
被分享者券发行量大于等于分享者券发行量*分享人数*1.5 被分享者券发行量大于等于分享者券发行量*分享人数*1.5
</Col> </Col>
</Row> </Row>
<Form.Item label="每人限领">1张</Form.Item> <Form.Item label='每人限领'>1张</Form.Item>
</Form> </Form>
</div> </div>
</div> </div>
); );
} },
); );
export default SharedCouponInfo; export default SharedCouponInfo;
src/pages/couponManage/splitCouponList/addOrEditOrDetail/index.scss
.add-or-edit-or-detail-wrap{ .add-or-edit-or-detail-wrap {
min-width: 1200px; min-width: 1200px;
height: 100%; height: 100%;
position: relative; position: relative;
.add-or-edit-or-detail{ .add-or-edit-or-detail {
height: calc(100% - 50px); height: calc(100% - 50px);
overflow-y: auto; overflow-y: auto;
.split-coupon-base-info,.share-coupon-info,.shared-coupon-info{ .split-coupon-base-info,
padding: 10px; .share-coupon-info,
.shared-coupon-info {
padding: 10px;
background-color: #fff; background-color: #fff;
margin-bottom: 20px; margin-bottom: 20px;
.title{ .title {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #000; color: #000;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.ant-form-item{ .ant-form-item {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.footer-operate{ .footer-operate {
position: absolute; position: absolute;
bottom: -15px; bottom: -15px;
left: -10px; left: -10px;
height: 80px; height: 80px;
width: calc(100% + 20px) ; width: calc(100% + 20px);
background-color: #fff; background-color: #fff;
box-shadow: 0 -1px 2px 0 rgba(0,0,0,0.1); box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
button{ button {
width: 100px; width: 100px;
} }
button:first-child{ button:first-child {
margin-right: 150px; margin-right: 150px;
} }
} }
} }
src/pages/couponManage/splitCouponList/addOrEditOrDetail/index.tsx
import { FC, useEffect, useRef, useState } from "react"; import { FC, useEffect, useRef, useState } from 'react';
import "./index.scss"; import './index.scss';
import { Button, message } from "antd"; import { Button, message } from 'antd';
import { useNavigate } from "react-router-dom"; import { useNavigate } from 'react-router-dom';
import dayJs from "dayjs"; import dayJs from 'dayjs';
import qs from "query-string"; import qs from 'query-string';
import BaseInfo from "./components/baseInfo"; import BaseInfo from './components/baseInfo';
import ShareCouponInfo from "./components/shareCouponInfo"; import ShareCouponInfo from './components/shareCouponInfo';
import SharedCouponInfo from "./components/sharedCouponInfo"; import SharedCouponInfo from './components/sharedCouponInfo';
import { MakeManageAPI } from "~/api/modules/makeManage"; import { MakeManageAPI } from '~/api/modules/makeManage';
import { MakeItemEntity } from "~/api/interface/makeManage"; import { MakeItemEntity } from '~/api/interface/makeManage';
import { CouponManageAPI } from "~/api"; import { CouponManageAPI } from '~/api';
const SplitCouponOperate: FC<any> = (props) => { const SplitCouponOperate: FC<any> = (props) => {
const history = useNavigate(); const history = useNavigate();
...@@ -21,13 +21,11 @@ const SplitCouponOperate: FC<any> = (props) => { ...@@ -21,13 +21,11 @@ const SplitCouponOperate: FC<any> = (props) => {
const [makeList, setMakeList] = useState<MakeItemEntity[]>([]); const [makeList, setMakeList] = useState<MakeItemEntity[]>([]);
// 品牌-列表 // 品牌-列表
const getMakeList = () => { const getMakeList = () => {
MakeManageAPI.getListBrandInfo({ pageNo: 1, pageSize: 999999 }).then( MakeManageAPI.getListBrandInfo({ pageNo: 1, pageSize: 999999 }).then(({ result }) => {
({ result }) => { setMakeList(result.list || []);
setMakeList(result.list || []); });
}
);
}; };
const [splitCouponId, setSplitCouponId] = useState<string>(""); const [splitCouponId, setSplitCouponId] = useState<string>('');
// 详情 // 详情
const getSplitCouponDetail = (couponId: string) => { const getSplitCouponDetail = (couponId: string) => {
CouponManageAPI.getPageActivityList({ CouponManageAPI.getPageActivityList({
...@@ -37,22 +35,15 @@ const SplitCouponOperate: FC<any> = (props) => { ...@@ -37,22 +35,15 @@ const SplitCouponOperate: FC<any> = (props) => {
useType: 2, useType: 2,
}).then(({ result }) => { }).then(({ result }) => {
if (result.list[0]) { if (result.list[0]) {
(shareCouponRef.current as any).setCouponType( (shareCouponRef.current as any).setCouponType(result.list[0].couponType);
result.list[0].couponType
);
const { beSharedCoupon } = result.list[0]; const { beSharedCoupon } = result.list[0];
(sharedCouponRef.current as any).setCouponType( (sharedCouponRef.current as any).setCouponType(beSharedCoupon.couponType);
beSharedCoupon.couponType
);
(baseInfoRef.current as any).getForm().setFieldsValue({ (baseInfoRef.current as any).getForm().setFieldsValue({
couponName: result.list[0].couponName, couponName: result.list[0].couponName,
}); });
(shareCouponRef.current as any).getForm().setFieldsValue({ (shareCouponRef.current as any).getForm().setFieldsValue({
primaryKey: (result.list[0].primaryKey as any).split(",").map(Number), primaryKey: (result.list[0].primaryKey as any).split(',').map(Number),
time: [ time: [dayJs(result.list[0].useStartTime), dayJs(result.list[0].useEndTime)],
dayJs(result.list[0].useStartTime),
dayJs(result.list[0].useEndTime),
],
couponMoney: result.list[0].couponMoney, couponMoney: result.list[0].couponMoney,
couponType: result.list[0].couponType, couponType: result.list[0].couponType,
minPrice: result.list[0].minPrice || undefined, minPrice: result.list[0].minPrice || undefined,
...@@ -64,9 +55,7 @@ const SplitCouponOperate: FC<any> = (props) => { ...@@ -64,9 +55,7 @@ const SplitCouponOperate: FC<any> = (props) => {
userTag: beSharedCoupon.userTag || undefined, userTag: beSharedCoupon.userTag || undefined,
}); });
(sharedCouponRef.current as any).getForm().setFieldsValue({ (sharedCouponRef.current as any).getForm().setFieldsValue({
beSharedPrimaryKey: (beSharedCoupon.primaryKey as any) beSharedPrimaryKey: (beSharedCoupon.primaryKey as any).split(',').map(Number),
.split(",")
.map(Number),
beSharedCouponMoney: beSharedCoupon.couponMoney, beSharedCouponMoney: beSharedCoupon.couponMoney,
beSharedCouponType: beSharedCoupon.couponType, beSharedCouponType: beSharedCoupon.couponType,
beSharedMinPrice: beSharedCoupon.minPrice || undefined, beSharedMinPrice: beSharedCoupon.minPrice || undefined,
...@@ -87,22 +76,18 @@ const SplitCouponOperate: FC<any> = (props) => { ...@@ -87,22 +76,18 @@ const SplitCouponOperate: FC<any> = (props) => {
getSharedCouponForm().validateFields(), getSharedCouponForm().validateFields(),
]) ])
.then((values) => { .then((values) => {
values[1].useStartTime = `${dayJs(values[1].time[0]).format( values[1].useStartTime = `${dayJs(values[1].time[0]).format('YYYY-MM-DD')} 00:00:00`;
"YYYY-MM-DD" values[1].useEndTime = `${dayJs(values[1].time[1]).format('YYYY-MM-DD')} 23:59:59`;
)} 00:00:00`; values[1].primaryKey = values[1].primaryKey.join(',');
values[1].useEndTime = `${dayJs(values[1].time[1]).format( values[2].beSharedPrimaryKey = values[2].beSharedPrimaryKey.join(',');
"YYYY-MM-DD"
)} 23:59:59`;
values[1].primaryKey = values[1].primaryKey.join(",");
values[2].beSharedPrimaryKey = values[2].beSharedPrimaryKey.join(",");
delete values[1].time; delete values[1].time;
CouponManageAPI.saveActivity({ CouponManageAPI.saveActivity({
...values[0], ...values[0],
...values[1], ...values[1],
...values[2], ...values[2],
}).then(({ code, message: msg }) => { }).then(({ code, message: msg }) => {
if (code === "200") { if (code === '200') {
message.success("新增成功"); message.success('新增成功');
getBaseInfoForm().resetFields(); getBaseInfoForm().resetFields();
getShareCouponForm().resetFields(); getShareCouponForm().resetFields();
getSharedCouponForm().resetFields(); getSharedCouponForm().resetFields();
...@@ -124,7 +109,7 @@ const SplitCouponOperate: FC<any> = (props) => { ...@@ -124,7 +109,7 @@ const SplitCouponOperate: FC<any> = (props) => {
useEffect(() => { useEffect(() => {
getMakeList(); getMakeList();
if (props.location) { if (props.location) {
const { id: splitCouponId }: any = qs.parse(props.location.search); const { id: splitCouponId }: any = qs.parse(props.location.search);
setSplitCouponId(splitCouponId); setSplitCouponId(splitCouponId);
if (splitCouponId) { if (splitCouponId) {
getSplitCouponDetail(splitCouponId); getSplitCouponDetail(splitCouponId);
...@@ -133,16 +118,12 @@ const SplitCouponOperate: FC<any> = (props) => { ...@@ -133,16 +118,12 @@ const SplitCouponOperate: FC<any> = (props) => {
}, []); }, []);
return ( return (
<div className="add-or-edit-or-detail-wrap"> <div className='add-or-edit-or-detail-wrap'>
<div className="add-or-edit-or-detail"> <div className='add-or-edit-or-detail'>
{/* 基本信息 */} {/* 基本信息 */}
<BaseInfo ref={baseInfoRef} isDetail={!!splitCouponId} /> <BaseInfo ref={baseInfoRef} isDetail={!!splitCouponId} />
{/* 分享者优惠券 */} {/* 分享者优惠券 */}
<ShareCouponInfo <ShareCouponInfo ref={shareCouponRef} makeList={makeList} isDetail={!!splitCouponId} />
ref={shareCouponRef}
makeList={makeList}
isDetail={!!splitCouponId}
/>
{/* 被分享者优惠券 */} {/* 被分享者优惠券 */}
<SharedCouponInfo <SharedCouponInfo
ref={sharedCouponRef} ref={sharedCouponRef}
...@@ -151,10 +132,10 @@ const SplitCouponOperate: FC<any> = (props) => { ...@@ -151,10 +132,10 @@ const SplitCouponOperate: FC<any> = (props) => {
isDetail={!!splitCouponId} isDetail={!!splitCouponId}
/> />
</div> </div>
<div className="footer-operate"> <div className='footer-operate'>
<Button onClick={backRoute}>返回</Button> <Button onClick={backRoute}>返回</Button>
{!splitCouponId && ( {!splitCouponId && (
<Button type="primary" onClick={addSplitCouponSubmit}> <Button type='primary' onClick={addSplitCouponSubmit}>
确定 确定
</Button> </Button>
)} )}
......
src/pages/couponManage/splitCouponList/index.scss
.split-coupon-list{ .split-coupon-list {
.ant-table-thead > tr > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before{ .ant-table-thead
> tr
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not(
[colspan]
)::before {
width: 0; width: 0;
} }
.ant-table-tbody > tr{ .ant-table-tbody > tr {
border-bottom: 1px solid #999; border-bottom: 1px solid #999;
} }
} }
src/pages/couponManage/splitCouponList/index.tsx
import { FC, useEffect, useState } from "react"; import { FC, useEffect, useState } from 'react';
import { Button, Table, Modal, message } from "antd"; import { Button, Table, Modal, message } from 'antd';
import { PlusOutlined } from "@ant-design/icons"; import { PlusOutlined } from '@ant-design/icons';
import { ColumnsType } from "antd/es/table"; import { ColumnsType } from 'antd/es/table';
import { useNavigate } from "react-router-dom"; import { useNavigate } from 'react-router-dom';
import qs from "query-string"; import qs from 'query-string';
import SearchBox, { searchColumns } from "~/components/search-box"; import SearchBox, { searchColumns } from '~/components/search-box';
import { PaginationEntity } from "~/common/interface/PaginationEntity"; import { PaginationEntity } from '~/common/interface/PaginationEntity';
import { import { SplitCouponItemType, SplitCouponSearchType } from '~/api/interface/couponManage';
SplitCouponItemType, import { CouponManageAPI } from '~/api';
SplitCouponSearchType, import { splitCouponType, splitCouponUseType } from '~/utils/dictionary';
} from "~/api/interface/couponManage"; import { DataModal } from '~/pages/couponManage/couponList/comp/dataModal';
import { CouponManageAPI } from "~/api"; import useOperate from '~/common/hook/optionHook';
import { splitCouponType, splitCouponUseType } from "~/utils/dictionary"; import './index.scss';
import { DataModal } from "~/pages/couponManage/couponList/comp/dataModal";
import useOperate from "~/common/hook/optionHook";
import "./index.scss";
const SplitCouponList: FC = () => { const SplitCouponList: FC = () => {
const history = useNavigate(); const history = useNavigate();
const searchData: searchColumns[] = [ const searchData: searchColumns[] = [
{ {
type: "input", type: 'input',
placeholder: "请输入优惠券ID", placeholder: '请输入优惠券ID',
label: "ID", label: 'ID',
name: "couponId", name: 'couponId',
}, },
{ {
type: "input", type: 'input',
placeholder: "请输入优惠券名称", placeholder: '请输入优惠券名称',
label: "名称", label: '名称',
name: "couponName", name: 'couponName',
}, },
// { // {
// type: "input", // type: "input",
...@@ -38,89 +35,89 @@ const SplitCouponList: FC = () => { ...@@ -38,89 +35,89 @@ const SplitCouponList: FC = () => {
// name: "", // name: "",
// }, // },
{ {
type: "select", type: 'select',
placeholder: "请选中状态", placeholder: '请选中状态',
name: "state", name: 'state',
label: "状态", label: '状态',
options: [ options: [
{ {
id: 0, id: 0,
name: "已结束", name: '已结束',
}, },
{ {
id: 1, id: 1,
name: "领取中", name: '领取中',
}, },
], ],
}, },
{ {
type: "rangePicker", type: 'rangePicker',
placeholder: "", placeholder: '',
label: "日期", label: '日期',
name: "time", name: 'time',
}, },
]; ];
const tableColumns: ColumnsType<SplitCouponItemType> = [ const tableColumns: ColumnsType<SplitCouponItemType> = [
{ {
title: "优惠券ID", title: '优惠券ID',
align: "center", align: 'center',
dataIndex: "id", dataIndex: 'id',
onCell: (record: SplitCouponItemType, rowIndex: any) => ({ onCell: (record: SplitCouponItemType, rowIndex: any) => ({
rowSpan: rowIndex % 2 ? 0 : 2, rowSpan: rowIndex % 2 ? 0 : 2,
}), }),
}, },
{ {
title: "优惠券名称", title: '优惠券名称',
align: "center", align: 'center',
dataIndex: "couponName", dataIndex: 'couponName',
}, },
{ {
title: "角色", title: '角色',
align: "center", align: 'center',
dataIndex: "activityRole", dataIndex: 'activityRole',
render: (text: string, record: SplitCouponItemType) => ( render: (text: string, record: SplitCouponItemType) => (
<div>{record.activityRole === "share" ? "分享者" : "被分享者"}</div> <div>{record.activityRole === 'share' ? '分享者' : '被分享者'}</div>
), ),
}, },
{ {
title: "状态", title: '状态',
align: "center", align: 'center',
dataIndex: "couponStatus", dataIndex: 'couponStatus',
render: (text: string, record: SplitCouponItemType) => ( render: (text: string, record: SplitCouponItemType) => (
<div>{record.couponStatus ? "领取中" : "已结束"}</div> <div>{record.couponStatus ? '领取中' : '已结束'}</div>
), ),
}, },
{ {
title: "面额", title: '面额',
align: "center", align: 'center',
dataIndex: "couponMoney", dataIndex: 'couponMoney',
render: (text: string, record: SplitCouponItemType) => ( render: (text: string, record: SplitCouponItemType) => (
<div className="table-self-cell"> <div className='table-self-cell'>
<div>{record.couponMoney.toLocaleString()}</div> <div>{record.couponMoney.toLocaleString()}</div>
</div> </div>
), ),
}, },
{ {
title: "门槛", title: '门槛',
align: "center", align: 'center',
dataIndex: "couponType", dataIndex: 'couponType',
render: (text: string, record: SplitCouponItemType) => ( render: (text: string, record: SplitCouponItemType) => (
<div>{getCouponTypeById(record.couponType)}</div> <div>{getCouponTypeById(record.couponType)}</div>
), ),
}, },
{ {
title: "券类型", title: '券类型',
align: "center", align: 'center',
dataIndex: "useType", dataIndex: 'useType',
render: (text: string, record: SplitCouponItemType) => ( render: (text: string, record: SplitCouponItemType) => (
<div>{getCouponUseTypeById(record.useType)}</div> <div>{getCouponUseTypeById(record.useType)}</div>
), ),
}, },
{ {
title: "有效期", title: '有效期',
align: "center", align: 'center',
width: "15%", width: '15%',
render: (text: string, record: SplitCouponItemType) => ( render: (text: string, record: SplitCouponItemType) => (
<div> <div>
<div>起：{record.useStartTime}</div> <div>起：{record.useStartTime}</div>
...@@ -137,54 +134,40 @@ const SplitCouponList: FC = () => { ...@@ -137,54 +134,40 @@ const SplitCouponList: FC = () => {
// ), // ),
// }, // },
{ {
title: "发行量", title: '发行量',
align: "center", align: 'center',
dataIndex: "couponTotal", dataIndex: 'couponTotal',
render: (text: string, record: SplitCouponItemType) => ( render: (text: string, record: SplitCouponItemType) => <div>{record.couponTotal}</div>,
<div>{record.couponTotal}</div>
),
}, },
{ {
title: "已领取", title: '已领取',
align: "center", align: 'center',
dataIndex: "amountReceived", dataIndex: 'amountReceived',
render: (text: string, record: SplitCouponItemType) => ( render: (text: string, record: SplitCouponItemType) => <div>{record.amountReceived}</div>,
<div>{record.amountReceived}</div>
),
}, },
{ {
title: "操作", title: '操作',
align: "center", align: 'center',
render: (text: string, record: SplitCouponItemType, index: number) => ( render: (text: string, record: SplitCouponItemType, index: number) => (
<> <>
<Button <Button
type="link" type='link'
onClick={() => onClick={() =>
toAddOrDetailSplitCoupon( toAddOrDetailSplitCoupon(
record.activityRole === "share" record.activityRole === 'share' ? record : tableDataSource[index - 1],
? record
: tableDataSource[index - 1]
) )
} }
disabled={!isLookBtn} disabled={!isLookBtn}
> >
查看 查看
</Button> </Button>
<Button <Button type='link' onClick={() => showDataModalClick(record)} disabled={!isDataBtn}>
type="link"
onClick={() => showDataModalClick(record)}
disabled={!isDataBtn}
>
数据 数据
</Button> </Button>
<Button <Button
type="link" type='link'
onClick={() => onClick={() =>
endSplitCoupon( endSplitCoupon(record.activityRole === 'share' ? record : tableDataSource[index - 1])
record.activityRole === "share"
? record
: tableDataSource[index - 1]
)
} }
disabled={!record.couponStatus || !isEndBtn} disabled={!record.couponStatus || !isEndBtn}
> >
...@@ -197,9 +180,7 @@ const SplitCouponList: FC = () => { ...@@ -197,9 +180,7 @@ const SplitCouponList: FC = () => {
// }), // }),
}, },
]; ];
const [tableDataSource, setTableDataSource] = useState<SplitCouponItemType[]>( const [tableDataSource, setTableDataSource] = useState<SplitCouponItemType[]>([]);
[]
);
const [queryData, setQueryData] = useState<SplitCouponSearchType>({ const [queryData, setQueryData] = useState<SplitCouponSearchType>({
useType: 2, useType: 2,
}); });
...@@ -223,7 +204,7 @@ const SplitCouponList: FC = () => { ...@@ -223,7 +204,7 @@ const SplitCouponList: FC = () => {
startTime: (data.time && data.time[0]) || undefined, startTime: (data.time && data.time[0]) || undefined,
endTime: (data.time && data.time[1]) || undefined, endTime: (data.time && data.time[1]) || undefined,
useType: 2, useType: 2,
state: data.state === undefined ? "" : !!data.state, state: data.state === undefined ? '' : !!data.state,
}; };
delete query.time; delete query.time;
setQueryData(query); setQueryData(query);
...@@ -237,239 +218,239 @@ const SplitCouponList: FC = () => { ...@@ -237,239 +218,239 @@ const SplitCouponList: FC = () => {
}; };
// get split coupon // get split coupon
const getSplitCoupon = ( const getSplitCoupon = (
data: SplitCouponSearchType & Pick<PaginationEntity, "pageSize" | "pageNo"> data: SplitCouponSearchType & Pick<PaginationEntity, 'pageSize' | 'pageNo'>,
) => { ) => {
// setLoading(true); // setLoading(true);
setTableDataSource([ setTableDataSource([
{ {
"id": 10000157, id: 10000157,
"couponName": "2223", couponName: '2223',
"couponMoney": 22, couponMoney: 22,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": null, restrictedAccess: null,
"couponTotal": 13, couponTotal: 13,
"lastTotal": 13, lastTotal: 13,
"amountReceived": 0, amountReceived: 0,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "32,31", primaryKey: '32,31',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-27 00:00:00", useStartTime: '2023-05-27 00:00:00',
"useEndTime": "2023-06-16 23:59:59", useEndTime: '2023-06-16 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": null, userTag: null,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 17:47:50", createTime: '2023-05-24 17:47:50',
"updateTime": null, updateTime: null,
"couponStatus": true, couponStatus: true,
"parentId": null, parentId: null,
"peopleNumber": 2, peopleNumber: 2,
"activityRole": "share", activityRole: 'share',
"beSharedCoupon": { beSharedCoupon: {
"id": 10000158, id: 10000158,
"couponName": "2223", couponName: '2223',
"couponMoney": 22, couponMoney: 22,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": 1, restrictedAccess: 1,
"couponTotal": 12, couponTotal: 12,
"lastTotal": 12, lastTotal: 12,
"amountReceived": 0, amountReceived: 0,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "32", primaryKey: '32',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-27 00:00:00", useStartTime: '2023-05-27 00:00:00',
"useEndTime": "2023-06-16 23:59:59", useEndTime: '2023-06-16 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": 1, userTag: 1,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 17:47:50", createTime: '2023-05-24 17:47:50',
"updateTime": null, updateTime: null,
"couponStatus": true, couponStatus: true,
"parentId": 10000157, parentId: 10000157,
"peopleNumber": null, peopleNumber: null,
"activityRole": "beShare", activityRole: 'beShare',
"beSharedCoupon": null beSharedCoupon: null,
} },
}, },
{ {
"id": 10000153, id: 10000153,
"couponName": "列表优惠券测试小嗯嗯", couponName: '列表优惠券测试小嗯嗯',
"couponMoney": 22, couponMoney: 22,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": null, restrictedAccess: null,
"couponTotal": 3, couponTotal: 3,
"lastTotal": 3, lastTotal: 3,
"amountReceived": 0, amountReceived: 0,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "32,26", primaryKey: '32,26',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-24 00:00:00", useStartTime: '2023-05-24 00:00:00',
"useEndTime": "2023-06-21 23:59:59", useEndTime: '2023-06-21 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": null, userTag: null,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 17:00:06", createTime: '2023-05-24 17:00:06',
"updateTime": null, updateTime: null,
"couponStatus": false, couponStatus: false,
"parentId": null, parentId: null,
"peopleNumber": 2, peopleNumber: 2,
"activityRole": "share", activityRole: 'share',
"beSharedCoupon": { beSharedCoupon: {
"id": 10000154, id: 10000154,
"couponName": "列表优惠券测试小嗯嗯", couponName: '列表优惠券测试小嗯嗯',
"couponMoney": 22, couponMoney: 22,
"couponDiscount": null, couponDiscount: null,
"isLimited": true, isLimited: true,
"restrictedAccess": 1, restrictedAccess: 1,
"couponTotal": 33, couponTotal: 33,
"lastTotal": 33, lastTotal: 33,
"amountReceived": 0, amountReceived: 0,
"couponType": 3, couponType: 3,
"useType": 2, useType: 2,
"minPrice": null, minPrice: null,
"primaryKey": "32", primaryKey: '32',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-05-24 00:00:00", useStartTime: '2023-05-24 00:00:00',
"useEndTime": "2023-06-21 23:59:59", useEndTime: '2023-06-21 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": 1, userTag: 1,
"verificationType": false, verificationType: false,
"createTime": "2023-05-24 17:00:06", createTime: '2023-05-24 17:00:06',
"updateTime": null, updateTime: null,
"couponStatus": false, couponStatus: false,
"parentId": 10000153, parentId: 10000153,
"peopleNumber": null, peopleNumber: null,
"activityRole": "beShare", activityRole: 'beShare',
"beSharedCoupon": null beSharedCoupon: null,
} },
}, },
{ {
"id": 10000148, id: 10000148,
"couponName": "裂变优惠券测试", couponName: '裂变优惠券测试',
"couponMoney": 1000, couponMoney: 1000,
"couponDiscount": 9, couponDiscount: 9,
"isLimited": true, isLimited: true,
"restrictedAccess": null, restrictedAccess: null,
"couponTotal": 3, couponTotal: 3,
"lastTotal": 3, lastTotal: 3,
"amountReceived": 0, amountReceived: 0,
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"minPrice": 4000, minPrice: 4000,
"primaryKey": "31", primaryKey: '31',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-04-23 00:00:00", useStartTime: '2023-04-23 00:00:00',
"useEndTime": "2023-04-30 23:59:59", useEndTime: '2023-04-30 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": null, userTag: null,
"verificationType": false, verificationType: false,
"createTime": "2023-04-23 16:10:18", createTime: '2023-04-23 16:10:18',
"updateTime": null, updateTime: null,
"couponStatus": false, couponStatus: false,
"parentId": null, parentId: null,
"peopleNumber": 2, peopleNumber: 2,
"activityRole": "share", activityRole: 'share',
"beSharedCoupon": { beSharedCoupon: {
"id": 10000149, id: 10000149,
"couponName": "裂变优惠券测试", couponName: '裂变优惠券测试',
"couponMoney": 1000, couponMoney: 1000,
"couponDiscount": 9, couponDiscount: 9,
"isLimited": true, isLimited: true,
"restrictedAccess": 1, restrictedAccess: 1,
"couponTotal": 9, couponTotal: 9,
"lastTotal": 8, lastTotal: 8,
"amountReceived": 1, amountReceived: 1,
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"minPrice": 4000, minPrice: 4000,
"primaryKey": "31", primaryKey: '31',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-04-23 00:00:00", useStartTime: '2023-04-23 00:00:00',
"useEndTime": "2023-04-30 23:59:59", useEndTime: '2023-04-30 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": 1, userTag: 1,
"verificationType": false, verificationType: false,
"createTime": "2023-04-23 16:10:18", createTime: '2023-04-23 16:10:18',
"updateTime": null, updateTime: null,
"couponStatus": false, couponStatus: false,
"parentId": 10000148, parentId: 10000148,
"peopleNumber": null, peopleNumber: null,
"activityRole": "beShare", activityRole: 'beShare',
"beSharedCoupon": null beSharedCoupon: null,
} },
}, },
{ {
"id": 10000141, id: 10000141,
"couponName": "测试裂变", couponName: '测试裂变',
"couponMoney": 800, couponMoney: 800,
"couponDiscount": 8, couponDiscount: 8,
"isLimited": false, isLimited: false,
"restrictedAccess": null, restrictedAccess: null,
"couponTotal": 10, couponTotal: 10,
"lastTotal": 11, lastTotal: 11,
"amountReceived": -1, amountReceived: -1,
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"minPrice": 10000, minPrice: 10000,
"primaryKey": "31", primaryKey: '31',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-04-19 00:00:00", useStartTime: '2023-04-19 00:00:00',
"useEndTime": "2023-04-19 23:59:59", useEndTime: '2023-04-19 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": null, userTag: null,
"verificationType": false, verificationType: false,
"createTime": "2023-04-19 13:46:06", createTime: '2023-04-19 13:46:06',
"updateTime": null, updateTime: null,
"couponStatus": false, couponStatus: false,
"parentId": null, parentId: null,
"peopleNumber": 2, peopleNumber: 2,
"activityRole": "share", activityRole: 'share',
"beSharedCoupon": { beSharedCoupon: {
"id": 10000142, id: 10000142,
"couponName": "测试裂变", couponName: '测试裂变',
"couponMoney": 500, couponMoney: 500,
"couponDiscount": 9, couponDiscount: 9,
"isLimited": true, isLimited: true,
"restrictedAccess": 1, restrictedAccess: 1,
"couponTotal": 100, couponTotal: 100,
"lastTotal": 97, lastTotal: 97,
"amountReceived": 3, amountReceived: 3,
"couponType": 1, couponType: 1,
"useType": 2, useType: 2,
"minPrice": 10000, minPrice: 10000,
"primaryKey": "31", primaryKey: '31',
"isFixedTime": 0, isFixedTime: 0,
"useStartTime": "2023-04-19 00:00:00", useStartTime: '2023-04-19 00:00:00',
"useEndTime": "2023-04-19 23:59:59", useEndTime: '2023-04-19 23:59:59',
"couponDay": null, couponDay: null,
"getType": 4, getType: 4,
"userTag": null, userTag: null,
"verificationType": false, verificationType: false,
"createTime": "2023-04-19 13:46:06", createTime: '2023-04-19 13:46:06',
"updateTime": null, updateTime: null,
"couponStatus": false, couponStatus: false,
"parentId": 10000141, parentId: 10000141,
"peopleNumber": null, peopleNumber: null,
"activityRole": "beShare", activityRole: 'beShare',
"beSharedCoupon": null beSharedCoupon: null,
} },
} },
]) ]);
CouponManageAPI.getPageActivityList(data).then(({ result }) => { CouponManageAPI.getPageActivityList(data).then(({ result }) => {
if (result.list) { if (result.list) {
const couponList = result.list.reduce( const couponList = result.list.reduce(
...@@ -480,7 +461,7 @@ const SplitCouponList: FC = () => { ...@@ -480,7 +461,7 @@ const SplitCouponList: FC = () => {
} }
return pre; return pre;
}, },
[] [],
); );
setLoading(false); setLoading(false);
setTableDataSource(couponList); setTableDataSource(couponList);
...@@ -500,20 +481,20 @@ const SplitCouponList: FC = () => { ...@@ -500,20 +481,20 @@ const SplitCouponList: FC = () => {
// 新建 // 新建
const toAddOrDetailSplitCoupon = (record?: SplitCouponItemType) => { const toAddOrDetailSplitCoupon = (record?: SplitCouponItemType) => {
history({ history({
pathname: "/couponManage/addOrEditOrDetail", pathname: '/couponManage/addOrEditOrDetail',
search: record search: record
? qs.stringify({ ? qs.stringify({
id: record.id, id: record.id,
}) })
: "", : '',
}); });
}; };
const getCouponTypeById = (id: number) => { const getCouponTypeById = (id: number) => {
return splitCouponType.find((v) => v.val === id)?.label || ""; return splitCouponType.find((v) => v.val === id)?.label || '';
}; };
const getCouponUseTypeById = (id: number) => { const getCouponUseTypeById = (id: number) => {
return splitCouponUseType.find((v) => v.val === id)?.label || ""; return splitCouponUseType.find((v) => v.val === id)?.label || '';
}; };
// 裂变优惠券数据 // 裂变优惠券数据
const dataModalClose = () => { const dataModalClose = () => {
...@@ -526,11 +507,11 @@ const SplitCouponList: FC = () => { ...@@ -526,11 +507,11 @@ const SplitCouponList: FC = () => {
// 结束 // 结束
const endSplitCoupon = (record: SplitCouponItemType) => { const endSplitCoupon = (record: SplitCouponItemType) => {
Modal.confirm({ Modal.confirm({
content: "确认结束后，将停止发放该券，已领的优惠券可继续使用", content: '确认结束后，将停止发放该券，已领的优惠券可继续使用',
onOk: () => { onOk: () => {
CouponManageAPI.CouponShutDown({ id: record.id }).then(({ code }) => { CouponManageAPI.CouponShutDown({ id: record.id }).then(({ code }) => {
if (code === "200") { if (code === '200') {
message.success("操作成功"); message.success('操作成功');
getSplitCoupon({ getSplitCoupon({
...queryData, ...queryData,
pageNo: pagination.pageNo, pageNo: pagination.pageNo,
...@@ -551,13 +532,13 @@ const SplitCouponList: FC = () => { ...@@ -551,13 +532,13 @@ const SplitCouponList: FC = () => {
}, []); }, []);
return ( return (
<div className="split-coupon-list"> <div className='split-coupon-list'>
<SearchBox <SearchBox
search={searchData} search={searchData}
searchData={searchSubmitEvent} searchData={searchSubmitEvent}
sufFixBtn={ sufFixBtn={
<Button <Button
type="primary" type='primary'
icon={<PlusOutlined />} icon={<PlusOutlined />}
onClick={() => toAddOrDetailSplitCoupon()} onClick={() => toAddOrDetailSplitCoupon()}
// disabled={!isAddBtn} // disabled={!isAddBtn}
...@@ -568,7 +549,7 @@ const SplitCouponList: FC = () => { ...@@ -568,7 +549,7 @@ const SplitCouponList: FC = () => {
/> />
<Table <Table
columns={tableColumns} columns={tableColumns}
rowKey="id" rowKey='id'
dataSource={tableDataSource} dataSource={tableDataSource}
loading={loading} loading={loading}
pagination={{ pagination={{
...@@ -577,17 +558,14 @@ const SplitCouponList: FC = () => { ...@@ -577,17 +558,14 @@ const SplitCouponList: FC = () => {
current: pagination.pageNo, current: pagination.pageNo,
showSizeChanger: false, showSizeChanger: false,
showQuickJumper: true, showQuickJumper: true,
onChange: (page: number, pageSize: number) => onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
paginationChange(page, pageSize),
showTotal: (total, range) => showTotal: (total, range) =>
`当前 ${Math.ceil(range[0] / 2)}-${range[1] / 2} 条记录 / 共 ${ `当前 ${Math.ceil(range[0] / 2)}-${range[1] / 2} 条记录 / 共 ${total / 2} 条数据`,
total / 2
} 条数据`,
}} }}
/> />
{/* 优惠券数据 */} {/* 优惠券数据 */}
<DataModal <DataModal
title="裂变优惠券数据" title='裂变优惠券数据'
open={dataModalShow} open={dataModalShow}
closed={dataModalClose} closed={dataModalClose}
data={splitCouponItem} data={splitCouponItem}
......
src/pages/orderManage/equipmentOrder/comp/detailDelivery/index.tsx 0 → 100644
import React from 'react';
import { Image } from 'antd';
function DetailDelivery() {
return (
<div className={'detail-delivery detail-half'}>
<div className={'detail-title'}>收货信息</div>
<div className={'detail-text'}>收货人：测试</div>
<div className={'detail-text'}>手机号：15889328503</div>
<div className={'detail-text'}>
收货地址：广东省深圳市南山区仙鼓路(南山区万科云城(仙鼓路西50米))
</div>
<div className={'detail-title'}>物流信息</div>
<div className={'detail-text'}>物流单号：YT6732436785799</div>
<div className={'detail-text'}>物流进度：--</div>
<div className={'detail-title'}>验收信息</div>
<div className={'detail-text'}>验收状态：已验收</div>
<div className={'detail-text'}>验收凭证：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
</div>
);
}
export default DetailDelivery;
src/pages/orderManage/equipmentOrder/comp/detailInformation/index.tsx 0 → 100644
import { useState } from 'react';
import { Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
// 表格数据类型
type TableType = any;
function DetailInformation() {
// 表格数据
const [tableData] = useState<TableType>([{ id: 1 }]);
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '单价(元)',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '数量',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单状态',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '实收款',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
];
return (
<div className={'detail-information'}>
<div className={'detail-title'}>订单明细</div>
<div className={'detail-text'}>
<span className={'item'}>订单编号：UD202302181041156087</span>
<span className={'item'}>创建时间：2023-02-18 10:41:16</span>
<span className={'item'}>合同编号：UAV202334741131</span>
</div>
<Table
style={{ margin: '20px auto', width: '90%' }}
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
bordered
pagination={false}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
</div>
);
}
export default DetailInformation;
src/pages/orderManage/equipmentOrder/comp/detailPurchaser/index.tsx 0 → 100644
import React from 'react';
import { Button, Image } from 'antd';
function DetailPurchaser() {
return (
<div className={'detail-purchaser detail-half'}>
<div className={'detail-title'}>买家信息</div>
<div className={'detail-text'}>UID： UID4460817</div>
<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>
<div className={'detail-text'}>备注： 测试单，不用管</div>
<div className={'detail-title'}>合同信息</div>
<div className={'detail-text'}>合同编号： UAV202334741131</div>
<div className={'detail-text'}>合同状态： 已归档</div>
<div className={'detail-text'}>
合同操作：
<Button type={'link'}>平台签署</Button>
<Button type={'link'}>查看</Button>
<Button type={'link'}>下载</Button>
</div>
<div className={'detail-title'}>付款凭证</div>
<div className={'detail-text'}>预付款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>尾款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>全款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
</div>
);
}
export default DetailPurchaser;
src/pages/orderManage/equipmentOrder/detail/index.scss 0 → 100644
.order-detail {
position: relative;
box-sizing: border-box;
.order-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.head-text {
font-size: 13px;
font-weight: 600;
color: #000000;
div {
margin-bottom: 10px;
span {
margin-right: 20px;
}
}
}
}
.detail-wrap {
position: relative;
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 15px;
padding-bottom: 100px;
.detail-information {
margin-top: 10px;
width: 100%;
}
.detail-half {
width: 50%;
}
.detail-title {
font-size: 13px;
font-weight: 600;
color: #000000;
margin-bottom: 15px;
margin-top: 20px;
}
.detail-title:first-child {
margin-top: 0;
}
.detail-text {
margin-bottom: 10px;
.item {
margin-right: 20px;
}
}
.detail-image {
display: flex;
justify-content: flex-start;
margin-left: 56px;
margin-top: -20px;
margin-bottom: 10px;
.image {
width: 68px;
height: 68px;
//margin-right: 10px;
}
.ant-image {
margin-right: 10px;
}
}
}
}
src/pages/orderManage/equipmentOrder/detail/index.tsx 0 → 100644
import { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Button } from 'antd';
import './index.scss';
import DetailDelivery from '~/pages/orderManage/productOrder/comp/detailDelivery';
import DetailPurchaser from '~/pages/orderManage/productOrder/comp/detailPurchaser';
import DetailInformation from '~/pages/orderManage/productOrder/comp/detailInformation';
function EquipmentOrderDetail() {
// 路由钩子
const navigate = useNavigate();
// 参数钩子
const [searchParams] = useSearchParams();
// 接收到的参数
const id = searchParams.get('id');
// 返回上一页
const handleBack = () => {
navigate(-1);
};
// componentDidMount
useEffect(() => {
console.log('拿到的id是 --->', id);
}, [id]);
return (
<div className={'order-detail'}>
<div className={'order-head'}>
<div className='head-text'>
<div>
<span>订单编号：R2023051916330461</span>
<span>合同编号：UAV202334741131</span>
</div>
<div>
<span>当前状态：交易完成</span>
<span>创建时间：2023-02-18 10:41:16</span>
</div>
</div>
<Button type={'primary'} onClick={() => handleBack()}>
返回
</Button>
</div>
<div className={'detail-wrap'}>
<DetailPurchaser />
<DetailDelivery />
<DetailInformation />
</div>
</div>
);
}
export default EquipmentOrderDetail;
src/pages/orderManage/equipmentOrder/index.tsx
import React from 'react'; import { useState } from 'react';
import SearchBox from '~/components/search-box';
import { Button, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import qs from 'query-string';
// 表格数据类型
type TableType = any;
// 订单状态搜索列表
const statusCodeButtonList = [
{ value: -1, label: '全部订单' },
{ value: 0, label: '沟通意向' },
{ value: 1, label: '签约付款' },
{ value: 2, label: '待发货' },
{ value: 3, label: '待收货' },
{ value: 4, label: '已完成' },
{ value: 5, label: '已关闭' },
];
function EquipmentOrderView() { function EquipmentOrderView() {
return <div>EquipmentOrderView</div>; // 路由钩子
const navigate = useNavigate();
// 当前选择的是第几个按钮
const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
// 表格分页配置
const [pagination] = useState({
total: 0,
pageSize: 10,
current: 1,
totalPage: 0,
});
// 表格数据
const [tableData] = useState<TableType>([{ id: 1 }]);
// 订单状态筛选
const statusChangeEvent = (i: number) => {
console.log('订单状态筛选 --->', i);
setStatusCodeButtonIndex(i);
};
// 跳转订单详情
const handleDetail = (record: TableType[0]) => {
console.log('跳转订单详情 --->', record.id);
navigate(`/orderManage/equipmentOrder/detail?${qs.stringify({ id: record.id })}`);
};
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '单价(元)',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '数量',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '买家',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单状态',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '实收款',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '相关运营',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '推荐人',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单交期',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '备注',
dataIndex: 'remark',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
render: (_text, record) => (
<>
<Button type={'link'} onClick={() => handleDetail(record)}>
详情
</Button>
</>
),
},
];
return (
<>
<SearchBox
search={[
{
label: '订单编号',
name: 'keyword',
type: 'input',
placeholder: '请输入订单编号',
},
{
label: '买家账号',
name: 'keyword2',
type: 'input',
placeholder: '请输入用户账号',
},
{
label: '相关销售',
name: 'saleId',
type: 'Select',
placeholder: '请选择相关销售',
options: [],
},
{
label: '时间',
name: 'time',
type: 'rangePicker',
placeholder: '请选择创建时间',
},
]}
searchData={(e: any) => console.log('提交数据 --->', e)}
sufFixBtn={
<>
{statusCodeButtonList?.map((i, j) => {
return (
<Button
key={j}
type={j === statusCodeButtonIndex ? 'primary' : 'default'}
onClick={() => statusChangeEvent(j)}
style={{ marginTop: '5px' }}
>
{i.label}
</Button>
);
})}
</>
}
/>
<Table
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
scroll={{ x: 1200 }}
pagination={{
total: pagination.total,
pageSize: pagination.pageSize,
current: pagination.current,
showSizeChanger: true,
showQuickJumper: true,
// onChange: (page: number, pageSize: number) =>
// paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
</>
);
} }
export default EquipmentOrderView; export default EquipmentOrderView;
src/pages/orderManage/serviceOrder/comp/detailDelivery/index.tsx 0 → 100644
import React from 'react';
import { Image } from 'antd';
function DetailDelivery() {
return (
<div className={'detail-delivery detail-half'}>
<div className={'detail-title'}>收货信息</div>
<div className={'detail-text'}>收货人：测试</div>
<div className={'detail-text'}>手机号：15889328503</div>
<div className={'detail-text'}>
收货地址：广东省深圳市南山区仙鼓路(南山区万科云城(仙鼓路西50米))
</div>
<div className={'detail-title'}>物流信息</div>
<div className={'detail-text'}>物流单号：YT6732436785799</div>
<div className={'detail-text'}>物流进度：--</div>
<div className={'detail-title'}>验收信息</div>
<div className={'detail-text'}>验收状态：已验收</div>
<div className={'detail-text'}>验收凭证：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
</div>
);
}
export default DetailDelivery;
src/pages/orderManage/serviceOrder/comp/detailInformation/index.tsx 0 → 100644
import { useState } from 'react';
import { Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
// 表格数据类型
type TableType = any;
function DetailInformation() {
// 表格数据
const [tableData] = useState<TableType>([{ id: 1 }]);
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '单价(元)',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '数量',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单状态',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '实收款',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
];
return (
<div className={'detail-information'}>
<div className={'detail-title'}>订单明细</div>
<div className={'detail-text'}>
<span className={'item'}>订单编号：UD202302181041156087</span>
<span className={'item'}>创建时间：2023-02-18 10:41:16</span>
<span className={'item'}>合同编号：UAV202334741131</span>
</div>
<Table
style={{ margin: '20px auto', width: '90%' }}
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
bordered
pagination={false}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
</div>
);
}
export default DetailInformation;
src/pages/orderManage/serviceOrder/comp/detailPurchaser/index.tsx 0 → 100644
import React from 'react';
import { Button, Image } from 'antd';
function DetailPurchaser() {
return (
<div className={'detail-purchaser detail-half'}>
<div className={'detail-title'}>买家信息</div>
<div className={'detail-text'}>UID： UID4460817</div>
<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>
<div className={'detail-text'}>备注： 测试单，不用管</div>
<div className={'detail-title'}>合同信息</div>
<div className={'detail-text'}>合同编号： UAV202334741131</div>
<div className={'detail-text'}>合同状态： 已归档</div>
<div className={'detail-text'}>
合同操作：
<Button type={'link'}>平台签署</Button>
<Button type={'link'}>查看</Button>
<Button type={'link'}>下载</Button>
</div>
<div className={'detail-title'}>付款凭证</div>
<div className={'detail-text'}>预付款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>尾款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>全款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
</div>
);
}
export default DetailPurchaser;
src/pages/orderManage/serviceOrder/detail/index.scss 0 → 100644
.order-detail {
position: relative;
box-sizing: border-box;
.order-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.head-text {
font-size: 13px;
font-weight: 600;
color: #000000;
div {
margin-bottom: 10px;
span {
margin-right: 20px;
}
}
}
}
.detail-wrap {
position: relative;
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 15px;
padding-bottom: 100px;
.detail-information {
margin-top: 10px;
width: 100%;
}
.detail-half {
width: 50%;
}
.detail-title {
font-size: 13px;
font-weight: 600;
color: #000000;
margin-bottom: 15px;
margin-top: 20px;
}
.detail-title:first-child {
margin-top: 0;
}
.detail-text {
margin-bottom: 10px;
.item {
margin-right: 20px;
}
}
.detail-image {
display: flex;
justify-content: flex-start;
margin-left: 56px;
margin-top: -20px;
margin-bottom: 10px;
.image {
width: 68px;
height: 68px;
//margin-right: 10px;
}
.ant-image {
margin-right: 10px;
}
}
}
}
src/pages/orderManage/serviceOrder/detail/index.tsx 0 → 100644
import { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Button } from 'antd';
import './index.scss';
import DetailDelivery from '~/pages/orderManage/serviceOrder/comp/detailDelivery';
import DetailPurchaser from '~/pages/orderManage/serviceOrder/comp/detailPurchaser';
import DetailInformation from '~/pages/orderManage/serviceOrder/comp/detailInformation';
function ServiceOrderDetail() {
// 路由钩子
const navigate = useNavigate();
// 参数钩子
const [searchParams] = useSearchParams();
// 接收到的参数
const id = searchParams.get('id');
// 返回上一页
const handleBack = () => {
navigate(-1);
};
// componentDidMount
useEffect(() => {
console.log('拿到的id是 --->', id);
}, [id]);
return (
<div className={'order-detail'}>
<div className={'order-head'}>
<div className='head-text'>
<div>
<span>订单编号：R2023051916330461</span>
<span>合同编号：UAV202334741131</span>
</div>
<div>
<span>当前状态：交易完成</span>
<span>创建时间：2023-02-18 10:41:16</span>
</div>
</div>
<Button type={'primary'} onClick={() => handleBack()}>
返回
</Button>
</div>
<div className={'detail-wrap'}>
<DetailPurchaser />
<DetailDelivery />
<DetailInformation />
</div>
</div>
);
}
export default ServiceOrderDetail;
src/pages/orderManage/serviceOrder/index.tsx
import React from 'react'; import { useState } from 'react';
import SearchBox from '~/components/search-box';
import { Button, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import qs from 'query-string';
// 表格数据类型
type TableType = any;
// 订单状态搜索列表
const statusCodeButtonList = [
{ value: -1, label: '全部订单' },
{ value: 0, label: '沟通意向' },
{ value: 1, label: '签约付款' },
{ value: 2, label: '待发货' },
{ value: 3, label: '待收货' },
{ value: 4, label: '已完成' },
{ value: 5, label: '已关闭' },
];
function ServiceOrderView() { function ServiceOrderView() {
return <div>ServiceOrderView</div>; // 路由钩子
const navigate = useNavigate();
// 当前选择的是第几个按钮
const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
// 表格分页配置
const [pagination] = useState({
total: 0,
pageSize: 10,
current: 1,
totalPage: 0,
});
// 表格数据
const [tableData] = useState<TableType>([{ id: 1 }]);
// 订单状态筛选
const statusChangeEvent = (i: number) => {
console.log('订单状态筛选 --->', i);
setStatusCodeButtonIndex(i);
};
// 跳转订单详情
const handleDetail = (record: TableType[0]) => {
console.log('跳转订单详情 --->', record.id);
navigate(`/orderManage/serviceOrder/detail?${qs.stringify({ id: record.id })}`);
};
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '单价(元)',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '数量',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '买家',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单状态',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '实收款',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '相关运营',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '推荐人',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单交期',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '备注',
dataIndex: 'remark',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
render: (_text, record) => (
<>
<Button type={'link'} onClick={() => handleDetail(record)}>
详情
</Button>
</>
),
},
];
return (
<>
<SearchBox
search={[
{
label: '订单编号',
name: 'keyword',
type: 'input',
placeholder: '请输入订单编号',
},
{
label: '买家账号',
name: 'keyword2',
type: 'input',
placeholder: '请输入用户账号',
},
{
label: '相关销售',
name: 'saleId',
type: 'Select',
placeholder: '请选择相关销售',
options: [],
},
{
label: '时间',
name: 'time',
type: 'rangePicker',
placeholder: '请选择创建时间',
},
]}
searchData={(e: any) => console.log('提交数据 --->', e)}
sufFixBtn={
<>
{statusCodeButtonList?.map((i, j) => {
return (
<Button
key={j}
type={j === statusCodeButtonIndex ? 'primary' : 'default'}
onClick={() => statusChangeEvent(j)}
style={{ marginTop: '5px' }}
>
{i.label}
</Button>
);
})}
</>
}
/>
<Table
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
scroll={{ x: 1200 }}
pagination={{
total: pagination.total,
pageSize: pagination.pageSize,
current: pagination.current,
showSizeChanger: true,
showQuickJumper: true,
// onChange: (page: number, pageSize: number) =>
// paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
</>
);
} }
export default ServiceOrderView; export default ServiceOrderView;
src/pages/pointManage/divideOrder/comp/divideAddEditModal/index.tsx
import { Form, Input, message, Modal, Radio, Select } from "antd"; import { Form, Input, message, Modal, Radio, Select } from 'antd';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { debounce } from "lodash"; import { debounce } from 'lodash';
import { PointManageAPI } from "@/api"; import { PointManageAPI } from '@/api';
// 传参类型 // 传参类型
interface propType { interface propType {
...@@ -60,7 +60,7 @@ const DivideAddEditModal: React.FC<propType> = (props: propType) => { ...@@ -60,7 +60,7 @@ const DivideAddEditModal: React.FC<propType> = (props: propType) => {
pageSize: pagination.pageSize, pageSize: pagination.pageSize,
...value, ...value,
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构 const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
const arr = list?.map((i) => ({ const arr = list?.map((i) => ({
value: i.id, value: i.id,
...@@ -111,17 +111,16 @@ const DivideAddEditModal: React.FC<propType> = (props: propType) => { ...@@ -111,17 +111,16 @@ const DivideAddEditModal: React.FC<propType> = (props: propType) => {
...values, ...values,
orderId: orderData.orderId, orderId: orderData.orderId,
orderNO: orderData.orderNo, orderNO: orderData.orderNo,
uid: mallUserList.find((i) => i.value === values.mallUserId)?.uid || "", uid: mallUserList.find((i) => i.value === values.mallUserId)?.uid || '',
userName: userName: mallUserList.find((i) => i.value === values.mallUserId)?.userName || '',
mallUserList.find((i) => i.value === values.mallUserId)?.userName || "",
ruleType: 1, ruleType: 1,
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
push({ push({
...data, ...data,
...res?.result, ...res?.result,
}); });
message.success(data?.id ? "修改成功" : "添加成功").then(); message.success(data?.id ? '修改成功' : '添加成功').then();
handleCancel(); handleCancel();
} }
}; };
...@@ -139,37 +138,31 @@ const DivideAddEditModal: React.FC<propType> = (props: propType) => { ...@@ -139,37 +138,31 @@ const DivideAddEditModal: React.FC<propType> = (props: propType) => {
setDivideMethod(data.proportionMode); setDivideMethod(data.proportionMode);
}, [open]); }, [open]);
return ( return (
<Modal <Modal open={open} title={title} onCancel={handleCancel} onOk={handleOk} destroyOnClose>
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
>
<Form <Form
name="addForm" name='addForm'
form={form} form={form}
labelAlign="right" labelAlign='right'
labelCol={{ span: 5 }} labelCol={{ span: 5 }}
wrapperCol={{ span: 10 }} wrapperCol={{ span: 10 }}
> >
<Form.Item <Form.Item
label="其它分成对象" label='其它分成对象'
name="proportionObjName" name='proportionObjName'
rules={[{ required: true, message: "请输入其它分成对象" }]} rules={[{ required: true, message: '请输入其它分成对象' }]}
> >
<Input placeholder="请输入其它分成对象" maxLength={20} /> <Input placeholder='请输入其它分成对象' maxLength={20} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="分成方式" label='分成方式'
name="proportionMode" name='proportionMode'
rules={[{ required: true, message: "请选择分成方式" }]} rules={[{ required: true, message: '请选择分成方式' }]}
initialValue={divideMethod} initialValue={divideMethod}
> >
<Radio.Group <Radio.Group
options={[ options={[
{ label: "分成比例", value: 0 }, { label: '分成比例', value: 0 },
{ label: "差价分成", value: 1, disabled: true }, { label: '差价分成', value: 1, disabled: true },
]} ]}
onChange={({ target: { value } }) => setDivideMethod(value)} onChange={({ target: { value } }) => setDivideMethod(value)}
/> />
...@@ -177,44 +170,39 @@ const DivideAddEditModal: React.FC<propType> = (props: propType) => { ...@@ -177,44 +170,39 @@ const DivideAddEditModal: React.FC<propType> = (props: propType) => {
{divideMethod === 0 && ( {divideMethod === 0 && (
<> <>
<Form.Item <Form.Item
label="分成参数" label='分成参数'
name="proportionRate" name='proportionRate'
rules={[ rules={[
{ required: true, message: "请输入分成额度百分比" }, { required: true, message: '请输入分成额度百分比' },
// 只能输入0.1到100.0的一位小数,不能大于100.0 // 只能输入0.1到100.0的一位小数,不能大于100.0
{ {
pattern: /^(100(\.0)?|[1-9]?\d(\.\d)?)$/, pattern: /^(100(\.0)?|[1-9]?\d(\.\d)?)$/,
message: "只能输入0.1到100.0的一位小数", message: '只能输入0.1到100.0的一位小数',
}, },
]} ]}
> >
<Input <Input placeholder='请输入分成额度百分比' maxLength={20} type='number' suffix='%' />
placeholder="请输入分成额度百分比"
maxLength={20}
type="number"
suffix="%"
/>
</Form.Item> </Form.Item>
<div style={{ margin: "0 0 10px 60px" }}> <div style={{ margin: '0 0 10px 60px' }}>
说明：分成比例基数以订单金额减去相关渠道利润的得数为基准 说明：分成比例基数以订单金额减去相关渠道利润的得数为基准
</div> </div>
</> </>
)} )}
<Form.Item <Form.Item
label="分成用户" label='分成用户'
name="mallUserId" name='mallUserId'
rules={[{ required: true, message: "请选择分成用户" }]} rules={[{ required: true, message: '请选择分成用户' }]}
wrapperCol={{ span: 14 }} wrapperCol={{ span: 14 }}
> >
<Select <Select
placeholder="请选择分成用户" placeholder='请选择分成用户'
options={mallUserList} options={mallUserList}
allowClear allowClear
showSearch showSearch
filterOption={(input, option) => filterOption={(input, option) =>
(option?.label ?? "").toLowerCase().includes(input.toLowerCase()) (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
} }
optionFilterProp="label" optionFilterProp='label'
onPopupScroll={handlePopupScroll} onPopupScroll={handlePopupScroll}
/> />
</Form.Item> </Form.Item>
......
src/pages/pointManage/divideOrder/comp/divideSetting/index.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { Button, Form, message, Modal, Select, Table } from "antd"; import { Button, Form, message, Modal, Select, Table } from 'antd';
import { ColumnsType } from "antd/es/table"; import { ColumnsType } from 'antd/es/table';
import { PlusOutlined } from "@ant-design/icons"; import { PlusOutlined } from '@ant-design/icons';
import DivideAddEditModal from "@/pages/pointManage/divideOrder/comp/divideAddEditModal"; import DivideAddEditModal from '@/pages/pointManage/divideOrder/comp/divideAddEditModal';
import { PointManageAPI } from "@/api"; import { PointManageAPI } from '@/api';
import { OrderBonusListByOrderIdType } from "@/api/interface/pointManageType"; import { OrderBonusListByOrderIdType } from '@/api/interface/pointManageType';
// 传参类型 // 传参类型
interface propType { interface propType {
...@@ -15,11 +15,9 @@ interface propType { ...@@ -15,11 +15,9 @@ interface propType {
isEdit: boolean; isEdit: boolean;
} }
// 列表的类型 // 列表的类型
type TableType = (ReturnType<OrderBonusListByOrderIdType> extends Promise< type TableType = (ReturnType<OrderBonusListByOrderIdType> extends Promise<infer T>
infer T
>
? T ? T
: never)["result"]["defaultList"]; : never)['result']['defaultList'];
export const DivideSetting: React.FC<propType> = (props: propType) => { export const DivideSetting: React.FC<propType> = (props: propType) => {
// 组件默认值 // 组件默认值
...@@ -31,9 +29,7 @@ export const DivideSetting: React.FC<propType> = (props: propType) => { ...@@ -31,9 +29,7 @@ export const DivideSetting: React.FC<propType> = (props: propType) => {
// 表单钩子 // 表单钩子
const [form] = Form.useForm(); const [form] = Form.useForm();
// 规则列表 // 规则列表
const [ruleNameList, setRuleNameList] = useState< const [ruleNameList, setRuleNameList] = useState<{ label: string; value: number }[]>([]);
{ label: string; value: number }[]
>([]);
// 默认表格数据 // 默认表格数据
const [defaultTableData, setDefaultTableData] = useState<TableType>([]); const [defaultTableData, setDefaultTableData] = useState<TableType>([]);
// 扩展表格数据 // 扩展表格数据
...@@ -72,14 +68,14 @@ export const DivideSetting: React.FC<propType> = (props: propType) => { ...@@ -72,14 +68,14 @@ export const DivideSetting: React.FC<propType> = (props: propType) => {
// 确定发放积分 // 确定发放积分
const handleConfirm = () => { const handleConfirm = () => {
Modal.confirm({ Modal.confirm({
title: "提示", title: '提示',
content: "确认一键发放积分给相关用户吗？操作不可逆，请谨慎操作", content: '确认一键发放积分给相关用户吗？操作不可逆，请谨慎操作',
onOk: async () => { onOk: async () => {
const res = await PointManageAPI.DistributeMallOrderBonus({ const res = await PointManageAPI.DistributeMallOrderBonus({
orderId: data.orderId, orderId: data.orderId,
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
message.success("发放成功").then(); message.success('发放成功').then();
handleCancel(); handleCancel();
} }
}, },
...@@ -88,24 +84,22 @@ export const DivideSetting: React.FC<propType> = (props: propType) => { ...@@ -88,24 +84,22 @@ export const DivideSetting: React.FC<propType> = (props: propType) => {
// 删除数据 // 删除数据
const handleDelete = (record: any) => { const handleDelete = (record: any) => {
Modal.confirm({ Modal.confirm({
title: "提示", title: '提示',
content: "删除后此数据将会丢失，确定删除吗？", content: '删除后此数据将会丢失，确定删除吗？',
onOk: () => { onOk: () => {
setExtendTableData( setExtendTableData(extendTableData?.filter((i) => i.index !== record.index));
extendTableData?.filter((i) => i.index !== record.index) message.success('操作成功').then();
);
message.success("操作成功").then();
}, },
}); });
}; };
// 获取分成对象列表 // 获取分成对象列表
const getOrderBonusListRule = async () => { const getOrderBonusListRule = async () => {
const res = await PointManageAPI.OrderBonusListRule(); const res = await PointManageAPI.OrderBonusListRule();
if (res && res.code === "200") { if (res && res.code === '200') {
setRuleNameList( setRuleNameList(
res.result?.map((i) => { res.result?.map((i) => {
return { label: i.ruleName, value: i.id }; return { label: i.ruleName, value: i.id };
}) }),
); );
} }
}; };
...@@ -114,14 +108,14 @@ export const DivideSetting: React.FC<propType> = (props: propType) => { ...@@ -114,14 +108,14 @@ export const DivideSetting: React.FC<propType> = (props: propType) => {
const res = await PointManageAPI.OrderBonusListByOrderId({ const res = await PointManageAPI.OrderBonusListByOrderId({
orderId: data?.orderId, orderId: data?.orderId,
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
const { bonusRuleDTO, extendList } = res.result; const { bonusRuleDTO, extendList } = res.result;
// 设置扩展规则数据 // 设置扩展规则数据
setExtendTableData(extendList?.map((i, j) => ({ ...i, index: j }))); setExtendTableData(extendList?.map((i, j) => ({ ...i, index: j })));
// 判断是否有默认规则 // 判断是否有默认规则
if (!bonusRuleDTO?.id) return; if (!bonusRuleDTO?.id) return;
// 设置规则名称回显 // 设置规则名称回显
form.setFieldValue("ruleName", bonusRuleDTO.id); form.setFieldValue('ruleName', bonusRuleDTO.id);
// 获取规则列表 // 获取规则列表
await getOrderBonusBuildMall(bonusRuleDTO.id); await getOrderBonusBuildMall(bonusRuleDTO.id);
} }
...@@ -132,7 +126,7 @@ export const DivideSetting: React.FC<propType> = (props: propType) => { ...@@ -132,7 +126,7 @@ export const DivideSetting: React.FC<propType> = (props: propType) => {
proportionRuleId, proportionRuleId,
orderId: data?.orderId, orderId: data?.orderId,
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
// 强行设置索引 // 强行设置索引
setDefaultTableData(res.result.map((i, j) => ({ ...i, index: j }))); setDefaultTableData(res.result.map((i, j) => ({ ...i, index: j })));
} }
...@@ -147,12 +141,10 @@ export const DivideSetting: React.FC<propType> = (props: propType) => { ...@@ -147,12 +141,10 @@ export const DivideSetting: React.FC<propType> = (props: propType) => {
return val; return val;
} }
return i; return i;
}) }),
); );
} else { } else {
setExtendTableData( setExtendTableData([...extendTableData, val].map((i, j) => ({ ...i, index: j })));
[...extendTableData, val].map((i, j) => ({ ...i, index: j }))
);
} }
}; };
// 提交数据 // 提交数据
...@@ -161,8 +153,8 @@ export const DivideSetting: React.FC<propType> = (props: propType) => { ...@@ -161,8 +153,8 @@ export const DivideSetting: React.FC<propType> = (props: propType) => {
...defaultTableData, ...defaultTableData,
...extendTableData, ...extendTableData,
]); ]);
if (res && res.code === "200") { if (res && res.code === '200') {
message.success("操作成功").then(); message.success('操作成功').then();
handleCancel(); handleCancel();
} }
}; };
...@@ -178,63 +170,61 @@ export const DivideSetting: React.FC<propType> = (props: propType) => { ...@@ -178,63 +170,61 @@ export const DivideSetting: React.FC<propType> = (props: propType) => {
// 通用表格列 // 通用表格列
const defaultColumns: ColumnsType<TableType[0]> = [ const defaultColumns: ColumnsType<TableType[0]> = [
{ {
title: "分成对象", title: '分成对象',
dataIndex: "proportionObjName", dataIndex: 'proportionObjName',
align: "center", align: 'center',
}, },
{ {
title: "分成方式", title: '分成方式',
dataIndex: "proportionMode", dataIndex: 'proportionMode',
align: "center", align: 'center',
render: (text) => (text === 0 ? "比例分成" : "差额分成"), render: (text) => (text === 0 ? '比例分成' : '差额分成'),
}, },
{ {
title: "分成参数", title: '分成参数',
dataIndex: "proportionRate", dataIndex: 'proportionRate',
align: "center", align: 'center',
render: (text, record) => render: (text, record) =>
record.proportionMode === 0 record.proportionMode === 0 ? `${(Number(text) * 100).toFixed(1)}%` || '/' : '/',
? `${(Number(text) * 100).toFixed(1)}%` || "/"
: "/",
}, },
{ {
title: "分成用户名称", title: '分成用户名称',
dataIndex: "userName", dataIndex: 'userName',
align: "center", align: 'center',
}, },
{ {
title: "分成用户UID", title: '分成用户UID',
dataIndex: "uid", dataIndex: 'uid',
align: "center", align: 'center',
}, },
{ {
title: "渠道等级", title: '渠道等级',
dataIndex: "channelName", dataIndex: 'channelName',
align: "center", align: 'center',
render: (text) => text || "无", render: (text) => text || '无',
}, },
{ {
title: "分成积分数额", title: '分成积分数额',
dataIndex: "scoreAmount", dataIndex: 'scoreAmount',
align: "center", align: 'center',
}, },
]; ];
// 扩展表格列 // 扩展表格列
const extendColumns: ColumnsType<TableType[0]> = [ const extendColumns: ColumnsType<TableType[0]> = [
{ {
title: "其它分成对象", title: '其它分成对象',
dataIndex: "proportionObjName", dataIndex: 'proportionObjName',
align: "center", align: 'center',
}, },
...defaultColumns.slice(1, 5), ...defaultColumns.slice(1, 5),
...defaultColumns.slice(6), ...defaultColumns.slice(6),
{ {
title: "操作", title: '操作',
align: "center", align: 'center',
render: (text, record) => ( render: (text, record) => (
<div style={{ display: "flex", justifyContent: "center" }}> <div style={{ display: 'flex', justifyContent: 'center' }}>
<Button <Button
type="link" type='link'
onClick={() => { onClick={() => {
setEditData(record); setEditData(record);
setAddEditVisible(true); setAddEditVisible(true);
...@@ -242,7 +232,7 @@ export const DivideSetting: React.FC<propType> = (props: propType) => { ...@@ -242,7 +232,7 @@ export const DivideSetting: React.FC<propType> = (props: propType) => {
> >
编辑 编辑
</Button> </Button>
<Button type="link" onClick={() => handleDelete(record)}> <Button type='link' onClick={() => handleDelete(record)}>
删除 删除
</Button> </Button>
</div> </div>
...@@ -258,25 +248,25 @@ export const DivideSetting: React.FC<propType> = (props: propType) => { ...@@ -258,25 +248,25 @@ export const DivideSetting: React.FC<propType> = (props: propType) => {
onOk={handleOk} onOk={handleOk}
destroyOnClose destroyOnClose
width={768} width={768}
wrapClassName="divide-setting-modal" wrapClassName='divide-setting-modal'
okText={!isEdit ? "确定" : "确定一键发放积分"} okText={!isEdit ? '确定' : '确定一键发放积分'}
> >
<Form <Form
name="addForm" name='addForm'
form={form} form={form}
labelAlign="right" labelAlign='right'
disabled={isEdit} disabled={isEdit}
// layout="inline" // layout="inline"
> >
<div className="divide-title">一、通用规则</div> <div className='divide-title'>一、通用规则</div>
<Form.Item <Form.Item
label="规则名称" label='规则名称'
name="ruleName" name='ruleName'
rules={[{ required: true, message: "请选择规则名称" }]} rules={[{ required: true, message: '请选择规则名称' }]}
wrapperCol={{ span: 6 }} wrapperCol={{ span: 6 }}
> >
<Select <Select
placeholder="请选择规则名称" placeholder='请选择规则名称'
options={ruleNameList} options={ruleNameList}
allowClear allowClear
onChange={(value) => { onChange={(value) => {
...@@ -289,35 +279,31 @@ export const DivideSetting: React.FC<propType> = (props: propType) => { ...@@ -289,35 +279,31 @@ export const DivideSetting: React.FC<propType> = (props: propType) => {
/> />
</Form.Item> </Form.Item>
<Table <Table
size="small" size='small'
dataSource={defaultTableData} dataSource={defaultTableData}
columns={defaultColumns} columns={defaultColumns}
rowKey="index" rowKey='index'
bordered bordered
style={{ marginBottom: "-40px" }} style={{ marginBottom: '-40px' }}
/> />
<div className="divide-title">二、扩展规则</div> <div className='divide-title'>二、扩展规则</div>
{!isEdit && ( {!isEdit && (
<Button <Button icon={<PlusOutlined />} type='primary' onClick={() => setAddEditVisible(true)}>
icon={<PlusOutlined />}
type="primary"
onClick={() => setAddEditVisible(true)}
>
添加分成对象 添加分成对象
</Button> </Button>
)} )}
<Table <Table
size="small" size='small'
dataSource={extendTableData} dataSource={extendTableData}
columns={!isEdit ? extendColumns : extendColumns.slice(0, -1)} columns={!isEdit ? extendColumns : extendColumns.slice(0, -1)}
rowKey="index" rowKey='index'
bordered bordered
style={{ marginTop: "10px" }} style={{ marginTop: '10px' }}
/> />
</Form> </Form>
</Modal> </Modal>
<DivideAddEditModal <DivideAddEditModal
title={editData ? "编辑分成对象" : "添加分成对象"} title={editData ? '编辑分成对象' : '添加分成对象'}
open={addEditVisible} open={addEditVisible}
data={editData} data={editData}
orderData={data} orderData={data}
......
src/pages/pointManage/divideOrder/index.scss
.divide-setting-modal{ .divide-setting-modal {
.divide-title { .divide-title {
font-size: 14px; font-size: 14px;
margin-bottom: 10px; margin-bottom: 10px;
......
src/pages/pointManage/divideRules/comp/divideAddEditModal/index.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { import { Button, Form, Input, message, Modal, Select, Switch, Table } from 'antd';
Button, import { ColumnsType } from 'antd/es/table';
Form, import { PlusOutlined } from '@ant-design/icons';
Input, import DivideAddEditObject from '../divideAddEditObject';
message, import { AddAndEditBonusRuleType, BonusRuleListQueryType } from '@/api/interface/pointManageType';
Modal, import { PointManageAPI } from '@/api';
Select,
Switch,
Table,
} from "antd";
import { ColumnsType } from "antd/es/table";
import { PlusOutlined } from "@ant-design/icons";
import DivideAddEditObject from "../divideAddEditObject";
import {
AddAndEditBonusRuleType,
BonusRuleListQueryType,
} from "@/api/interface/pointManageType";
import { PointManageAPI } from "@/api";
// 编辑的数据类型 // 编辑的数据类型
type DataType = (ReturnType<BonusRuleListQueryType> extends Promise<infer T> type DataType = (ReturnType<BonusRuleListQueryType> extends Promise<infer T>
? T ? T
: never)["result"]["list"][0]; : never)['result']['list'][0];
type ReqType = Parameters<AddAndEditBonusRuleType>[0]; type ReqType = Parameters<AddAndEditBonusRuleType>[0];
// 传参类型 // 传参类型
interface propType { interface propType {
...@@ -35,22 +23,20 @@ interface propType { ...@@ -35,22 +23,20 @@ interface propType {
export const DivideAddEditModal: React.FC<propType> = (props: propType) => { export const DivideAddEditModal: React.FC<propType> = (props: propType) => {
// 组件默认值 // 组件默认值
DivideAddEditModal.defaultProps = { DivideAddEditModal.defaultProps = {
data: { bonusSet: [], id: undefined, ruleName: "" }, data: { bonusSet: [], id: undefined, ruleName: '' },
}; };
// 参数 // 参数
const { title, open, closed, data, isEdit } = props; const { title, open, closed, data, isEdit } = props;
// 表单钩子 // 表单钩子
const [form] = Form.useForm(); const [form] = Form.useForm();
// 表格数据 // 表格数据
const [tableData, setTableData] = useState<DataType["bonusSet"]>([]); const [tableData, setTableData] = useState<DataType['bonusSet']>([]);
// 需要编辑的数据 // 需要编辑的数据
const [editData, setEditData] = useState<any>(); const [editData, setEditData] = useState<any>();
// 添加编辑弹窗 // 添加编辑弹窗
const [addEditVisible, setAddEditVisible] = useState<boolean>(false); const [addEditVisible, setAddEditVisible] = useState<boolean>(false);
// 分成对象列表 // 分成对象列表
const [propObjCode, setPropObjCode] = useState< const [propObjCode, setPropObjCode] = useState<{ label: string; value: number }[]>([]);
{ label: string; value: number }[]
>([]);
// 关闭弹窗 // 关闭弹窗
const handleCancel = () => { const handleCancel = () => {
form.resetFields(); form.resetFields();
...@@ -59,28 +45,28 @@ export const DivideAddEditModal: React.FC<propType> = (props: propType) => { ...@@ -59,28 +45,28 @@ export const DivideAddEditModal: React.FC<propType> = (props: propType) => {
// 删除数据 // 删除数据
const handleDelete = (record: any) => { const handleDelete = (record: any) => {
Modal.confirm({ Modal.confirm({
title: "提示", title: '提示',
content: "删除后此数据将会丢失，确定删除吗？", content: '删除后此数据将会丢失，确定删除吗？',
onOk: () => { onOk: () => {
// 删除数据 // 删除数据
setTableData(tableData.filter((i) => i.id !== record.id)); setTableData(tableData.filter((i) => i.id !== record.id));
message.success("操作成功").then(); message.success('操作成功').then();
}, },
}); });
}; };
// 获取分成对象列表 // 获取分成对象列表
const getListProportionObject = async () => { const getListProportionObject = async () => {
const res = await PointManageAPI.ListProportionObject(); const res = await PointManageAPI.ListProportionObject();
if (res && res.code === "200") { if (res && res.code === '200') {
setPropObjCode( setPropObjCode(
res.result?.map((i) => { res.result?.map((i) => {
return { label: i.name, value: i.code }; return { label: i.name, value: i.code };
}) }),
); );
} }
}; };
// 追加列表数据 // 追加列表数据
const handlePush = (val: DataType["bonusSet"][0]) => { const handlePush = (val: DataType['bonusSet'][0]) => {
// 原来列表中没有的数据就追加，有的话就替换 // 原来列表中没有的数据就追加，有的话就替换
if (tableData.some((i) => val?.id === i.id)) { if (tableData.some((i) => val?.id === i.id)) {
setTableData( setTableData(
...@@ -89,7 +75,7 @@ export const DivideAddEditModal: React.FC<propType> = (props: propType) => { ...@@ -89,7 +75,7 @@ export const DivideAddEditModal: React.FC<propType> = (props: propType) => {
return val; return val;
} }
return i; return i;
}) }),
); );
} else { } else {
setTableData([...tableData, val]); setTableData([...tableData, val]);
...@@ -120,44 +106,41 @@ export const DivideAddEditModal: React.FC<propType> = (props: propType) => { ...@@ -120,44 +106,41 @@ export const DivideAddEditModal: React.FC<propType> = (props: propType) => {
// 提交数据 // 提交数据
const handleSubmit = async (val: ReqType) => { const handleSubmit = async (val: ReqType) => {
const res = await PointManageAPI.AddAndEditBonusRule(val); const res = await PointManageAPI.AddAndEditBonusRule(val);
if (res && res.code === "200") { if (res && res.code === '200') {
message.success("操作成功").then(); message.success('操作成功').then();
closed(); closed();
} }
}; };
// 通用表格列 // 通用表格列
const defaultColumns: ColumnsType<DataType["bonusSet"][0]> = [ const defaultColumns: ColumnsType<DataType['bonusSet'][0]> = [
{ {
title: "分成对象", title: '分成对象',
dataIndex: "propObjCode", dataIndex: 'propObjCode',
align: "center", align: 'center',
render: (text) => render: (text) => propObjCode.find((i) => i.value === text)?.label || text,
propObjCode.find((i) => i.value === text)?.label || text,
}, },
{ {
title: "分成方式", title: '分成方式',
dataIndex: "proportionMode", dataIndex: 'proportionMode',
align: "center", align: 'center',
render: (text) => (text === 0 ? "比例分成" : "差价分成"), render: (text) => (text === 0 ? '比例分成' : '差价分成'),
}, },
{ {
title: "分成参数", title: '分成参数',
dataIndex: "proportionParam", dataIndex: 'proportionParam',
align: "center", align: 'center',
render: (text, record) => render: (text, record) =>
record.proportionMode === 0 record.proportionMode === 0 ? `${(Number(text) * 100).toFixed(1)}%` || '/' : '/',
? `${(Number(text) * 100).toFixed(1)}%` || "/"
: "/",
}, },
{ {
title: "操作", title: '操作',
dataIndex: "id", dataIndex: 'id',
align: "center", align: 'center',
width: 100, width: 100,
render: (text, record) => ( render: (text, record) => (
<div style={{ display: "flex", justifyContent: "center" }}> <div style={{ display: 'flex', justifyContent: 'center' }}>
<Button <Button
type="link" type='link'
onClick={() => { onClick={() => {
setEditData(record); setEditData(record);
setAddEditVisible(true); setAddEditVisible(true);
...@@ -165,7 +148,7 @@ export const DivideAddEditModal: React.FC<propType> = (props: propType) => { ...@@ -165,7 +148,7 @@ export const DivideAddEditModal: React.FC<propType> = (props: propType) => {
> >
编辑 编辑
</Button> </Button>
<Button type="link" onClick={() => handleDelete(record)}> <Button type='link' onClick={() => handleDelete(record)}>
删除 删除
</Button> </Button>
</div> </div>
...@@ -190,12 +173,12 @@ export const DivideAddEditModal: React.FC<propType> = (props: propType) => { ...@@ -190,12 +173,12 @@ export const DivideAddEditModal: React.FC<propType> = (props: propType) => {
// onOk={handleOk} // onOk={handleOk}
destroyOnClose destroyOnClose
width={768} width={768}
wrapClassName="divide-setting-modal" wrapClassName='divide-setting-modal'
footer={ footer={
!isEdit ? ( !isEdit ? (
<> <>
<Button onClick={handleCancel}>取消</Button> <Button onClick={handleCancel}>取消</Button>
<Button type="primary" onClick={handleOk}> <Button type='primary' onClick={handleOk}>
确定 确定
</Button> </Button>
</> </>
...@@ -203,52 +186,48 @@ export const DivideAddEditModal: React.FC<propType> = (props: propType) => { ...@@ -203,52 +186,48 @@ export const DivideAddEditModal: React.FC<propType> = (props: propType) => {
} }
> >
<Form <Form
name="addForm" name='addForm'
form={form} form={form}
labelAlign="right" labelAlign='right'
disabled={isEdit} disabled={isEdit}
// layout="inline" // layout="inline"
> >
<div className="divide-title">一、基本信息</div> <div className='divide-title'>一、基本信息</div>
<Form.Item <Form.Item
label="规则名称" label='规则名称'
name="ruleName" name='ruleName'
rules={[{ required: true, message: "请输入规则名称" }]} rules={[{ required: true, message: '请输入规则名称' }]}
wrapperCol={{ span: 6 }} wrapperCol={{ span: 6 }}
> >
<Input placeholder="请输入规则名称" maxLength={20} allowClear /> <Input placeholder='请输入规则名称' maxLength={20} allowClear />
</Form.Item> </Form.Item>
<div className="divide-title">二、分成设置</div> <div className='divide-title'>二、分成设置</div>
{!isEdit && ( {!isEdit && (
<Button <Button icon={<PlusOutlined />} type='primary' onClick={() => setAddEditVisible(true)}>
icon={<PlusOutlined />}
type="primary"
onClick={() => setAddEditVisible(true)}
>
添加分成对象 添加分成对象
</Button> </Button>
)} )}
<Table <Table
size="small" size='small'
dataSource={tableData} dataSource={tableData}
columns={!isEdit ? defaultColumns : defaultColumns.slice(0, -1)} columns={!isEdit ? defaultColumns : defaultColumns.slice(0, -1)}
rowKey="id" rowKey='id'
bordered bordered
style={{ margin: "10px 0 -40px 0" }} style={{ margin: '10px 0 -40px 0' }}
/> />
<Form.Item <Form.Item
label="是否默认规则" label='是否默认规则'
name="defaultRule" name='defaultRule'
wrapperCol={{ span: 6 }} wrapperCol={{ span: 6 }}
valuePropName="checked" valuePropName='checked'
initialValue={false} initialValue={false}
> >
<Switch checkedChildren="是" unCheckedChildren="否" /> <Switch checkedChildren='是' unCheckedChildren='否' />
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>
<DivideAddEditObject <DivideAddEditObject
title={editData ? "编辑分成对象" : "添加分成对象"} title={editData ? '编辑分成对象' : '添加分成对象'}
open={addEditVisible} open={addEditVisible}
data={editData} data={editData}
closed={() => { closed={() => {
......
src/pages/pointManage/divideRules/comp/divideAddEditObject/index.tsx
import { Form, Input, message, Modal, Radio, Select } from "antd"; import { Form, Input, message, Modal, Radio, Select } from 'antd';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { BonusRuleListQueryType } from "@/api/interface/pointManageType"; import { BonusRuleListQueryType } from '@/api/interface/pointManageType';
// 编辑的数据类型 // 编辑的数据类型
type DataType = (ReturnType<BonusRuleListQueryType> extends Promise<infer T> type DataType = (ReturnType<BonusRuleListQueryType> extends Promise<infer T>
? T ? T
: never)["result"]["list"][0]; : never)['result']['list'][0];
// 传参类型 // 传参类型
interface propType { interface propType {
...@@ -15,7 +15,7 @@ interface propType { ...@@ -15,7 +15,7 @@ interface propType {
push: any; push: any;
data?: any; data?: any;
state?: { propObjCode?: { label: string; value: number }[] }; state?: { propObjCode?: { label: string; value: number }[] };
selected: DataType["bonusSet"]; selected: DataType['bonusSet'];
} }
const DivideAddEditObject: React.FC<propType> = (props: propType) => { const DivideAddEditObject: React.FC<propType> = (props: propType) => {
...@@ -34,8 +34,8 @@ const DivideAddEditObject: React.FC<propType> = (props: propType) => { ...@@ -34,8 +34,8 @@ const DivideAddEditObject: React.FC<propType> = (props: propType) => {
const [proportionModeList, setProportionModeList] = useState< const [proportionModeList, setProportionModeList] = useState<
{ label: string; value: number; disabled?: true }[] { label: string; value: number; disabled?: true }[]
>([ >([
{ label: "分成比例", value: 0 }, { label: '分成比例', value: 0 },
{ label: "差价分成", value: 1, disabled: true }, { label: '差价分成', value: 1, disabled: true },
]); ]);
// 关闭弹窗 // 关闭弹窗
const handleCancel = () => { const handleCancel = () => {
...@@ -44,11 +44,11 @@ const DivideAddEditObject: React.FC<propType> = (props: propType) => { ...@@ -44,11 +44,11 @@ const DivideAddEditObject: React.FC<propType> = (props: propType) => {
// 重置分成方式 // 重置分成方式
setDivideMethod(proportionModeList[0].value); setDivideMethod(proportionModeList[0].value);
// 重置分成对象 // 重置分成对象
form.setFieldValue("proportionMode", 0); form.setFieldValue('proportionMode', 0);
// 重置分成方式列表 // 重置分成方式列表
setProportionModeList([ setProportionModeList([
{ label: "分成比例", value: 0 }, { label: '分成比例', value: 0 },
{ label: "差价分成", value: 1, disabled: true }, { label: '差价分成', value: 1, disabled: true },
]); ]);
// 关闭弹窗 // 关闭弹窗
closed(); closed();
...@@ -80,24 +80,24 @@ const DivideAddEditObject: React.FC<propType> = (props: propType) => { ...@@ -80,24 +80,24 @@ const DivideAddEditObject: React.FC<propType> = (props: propType) => {
...data, ...data,
...values, ...values,
}); });
message.success(data?.id ? "修改成功" : "添加成功").then(); message.success(data?.id ? '修改成功' : '添加成功').then();
handleCancel(); handleCancel();
}; };
// 分成对象选择渠道监听 // 分成对象选择渠道监听
const handleChange = (e: number) => { const handleChange = (e: number) => {
if (e === 300) { if (e === 300) {
setProportionModeList([ setProportionModeList([
{ label: "分成比例", value: 0, disabled: true }, { label: '分成比例', value: 0, disabled: true },
{ label: "差价分成", value: 1 }, { label: '差价分成', value: 1 },
]); ]);
form.setFieldValue("proportionMode", proportionModeList[1].value); form.setFieldValue('proportionMode', proportionModeList[1].value);
setDivideMethod(proportionModeList[1].value); setDivideMethod(proportionModeList[1].value);
} else { } else {
setProportionModeList([ setProportionModeList([
{ label: "分成比例", value: 0 }, { label: '分成比例', value: 0 },
{ label: "差价分成", value: 1, disabled: true }, { label: '差价分成', value: 1, disabled: true },
]); ]);
form.setFieldValue("proportionMode", proportionModeList[0].value); form.setFieldValue('proportionMode', proportionModeList[0].value);
setDivideMethod(proportionModeList[0].value); setDivideMethod(proportionModeList[0].value);
} }
}; };
...@@ -113,27 +113,21 @@ const DivideAddEditObject: React.FC<propType> = (props: propType) => { ...@@ -113,27 +113,21 @@ const DivideAddEditObject: React.FC<propType> = (props: propType) => {
setDivideMethod(data.proportionMode); setDivideMethod(data.proportionMode);
}, [open]); }, [open]);
return ( return (
<Modal <Modal open={open} title={title} onCancel={handleCancel} onOk={handleOk} destroyOnClose>
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
>
<Form <Form
name="addForm" name='addForm'
form={form} form={form}
labelAlign="right" labelAlign='right'
labelCol={{ span: 5 }} labelCol={{ span: 5 }}
wrapperCol={{ span: 10 }} wrapperCol={{ span: 10 }}
> >
<Form.Item <Form.Item
label="分成对象" label='分成对象'
name="propObjCode" name='propObjCode'
rules={[{ required: true, message: "请选择分成对象" }]} rules={[{ required: true, message: '请选择分成对象' }]}
> >
<Select <Select
placeholder="请选择分成对象" placeholder='请选择分成对象'
options={state?.propObjCode?.map((i) => ({ options={state?.propObjCode?.map((i) => ({
label: i.label, label: i.label,
value: i.value, value: i.value,
...@@ -143,9 +137,9 @@ const DivideAddEditObject: React.FC<propType> = (props: propType) => { ...@@ -143,9 +137,9 @@ const DivideAddEditObject: React.FC<propType> = (props: propType) => {
/> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="分成方式" label='分成方式'
name="proportionMode" name='proportionMode'
rules={[{ required: true, message: "请选择分成方式" }]} rules={[{ required: true, message: '请选择分成方式' }]}
initialValue={divideMethod} initialValue={divideMethod}
> >
<Radio.Group <Radio.Group
...@@ -156,25 +150,20 @@ const DivideAddEditObject: React.FC<propType> = (props: propType) => { ...@@ -156,25 +150,20 @@ const DivideAddEditObject: React.FC<propType> = (props: propType) => {
{divideMethod === 0 && ( {divideMethod === 0 && (
<> <>
<Form.Item <Form.Item
label="分成参数" label='分成参数'
name="proportionParam" name='proportionParam'
rules={[ rules={[
{ required: true, message: "请输入分成额度百分比" }, { required: true, message: '请输入分成额度百分比' },
// 只能输入0.1到100.0的一位小数,不能大于100.0 // 只能输入0.1到100.0的一位小数,不能大于100.0
{ {
pattern: /^(100(\.0)?|[1-9]?\d(\.\d)?)$/, pattern: /^(100(\.0)?|[1-9]?\d(\.\d)?)$/,
message: "只能输入0.1到100.0的一位小数", message: '只能输入0.1到100.0的一位小数',
}, },
]} ]}
> >
<Input <Input placeholder='请输入分成额度百分比' maxLength={10} type='number' suffix='%' />
placeholder="请输入分成额度百分比"
maxLength={10}
type="number"
suffix="%"
/>
</Form.Item> </Form.Item>
<div style={{ margin: "0 0 10px 60px" }}> <div style={{ margin: '0 0 10px 60px' }}>
说明：分成比例基数以订单金额减去相关渠道利润的得数为基准 说明：分成比例基数以订单金额减去相关渠道利润的得数为基准
</div> </div>
</> </>
......
src/pages/pointManage/pointDetail/comp/bankCardModal/index.tsx
import { Descriptions, Modal } from "antd"; import { Descriptions, Modal } from 'antd';
import React from "react"; import React from 'react';
import { GetScoreListType } from "@/api/interface/pointManageType"; import { GetScoreListType } from '@/api/interface/pointManageType';
// 列表的类型 // 列表的类型
type TableType = (ReturnType<GetScoreListType> extends Promise<infer T> type TableType = (ReturnType<GetScoreListType> extends Promise<infer T>
? T ? T
: never)["result"]["list"]; : never)['result']['list'];
// 传参类型 // 传参类型
interface propType { interface propType {
title: string; title: string;
...@@ -32,17 +32,11 @@ const BankCardModal: React.FC<propType> = (props) => { ...@@ -32,17 +32,11 @@ const BankCardModal: React.FC<propType> = (props) => {
footer={null} footer={null}
destroyOnClose destroyOnClose
> >
<Descriptions bordered column={1} size="small"> <Descriptions bordered column={1} size='small'>
<Descriptions.Item label="银行卡号"> <Descriptions.Item label='银行卡号'>{data?.bankCardNumber}</Descriptions.Item>
{data?.bankCardNumber} <Descriptions.Item label='开户银行'>{data?.accountBank}</Descriptions.Item>
</Descriptions.Item> <Descriptions.Item label='支行'>{data?.branch}</Descriptions.Item>
<Descriptions.Item label="开户银行"> <Descriptions.Item label='开户姓名'>{data?.accountName}</Descriptions.Item>
{data?.accountBank}
</Descriptions.Item>
<Descriptions.Item label="支行">{data?.branch}</Descriptions.Item>
<Descriptions.Item label="开户姓名">
{data?.accountName}
</Descriptions.Item>
</Descriptions> </Descriptions>
</Modal> </Modal>
); );
......
src/pages/pointManage/pointList/comp/approveModal/index.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { import { Descriptions, Form, Input, InputNumber, message, Modal, Select, Space } from 'antd';
Descriptions, import { GetUserScoreDetailsType, UserScoreDetailsListType } from '@/api/interface/pointManageType';
Form, import { PointManageAPI } from '@/api';
Input, import { phoneNumber } from '@/utils/validateUtils';
InputNumber,
message,
Modal,
Select,
Space,
} from "antd";
import {
GetUserScoreDetailsType,
UserScoreDetailsListType,
} from "@/api/interface/pointManageType";
import { PointManageAPI } from "@/api";
import { phoneNumber } from "@/utils/validateUtils";
// 列表的类型 // 列表的类型
type TableType = (ReturnType<UserScoreDetailsListType> extends Promise<infer T> type TableType = (ReturnType<UserScoreDetailsListType> extends Promise<infer T>
? T ? T
: never)["result"]["list"]["userScoreList"]; : never)['result']['list']['userScoreList'];
// 传参类型 // 传参类型
interface propType { interface propType {
title: string; title: string;
...@@ -29,9 +17,9 @@ interface propType { ...@@ -29,9 +17,9 @@ interface propType {
} }
// 状态类型 // 状态类型
const statusList = [ const statusList = [
{ value: 0, label: "提现中" }, { value: 0, label: '提现中' },
{ value: 1, label: "提现成功" }, { value: 1, label: '提现成功' },
{ value: 2, label: "提现失败" }, { value: 2, label: '提现失败' },
]; ];
export const ApproveModal: React.FC<propType> = (props) => { export const ApproveModal: React.FC<propType> = (props) => {
...@@ -68,8 +56,8 @@ export const ApproveModal: React.FC<propType> = (props) => { ...@@ -68,8 +56,8 @@ export const ApproveModal: React.FC<propType> = (props) => {
withdrawDetailsId: data?.withdrawId, withdrawDetailsId: data?.withdrawId,
flag: values.flag, flag: values.flag,
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
message.success("操作成功"); message.success('操作成功');
handleCancel(); handleCancel();
} else { } else {
message.warning(res.message); message.warning(res.message);
...@@ -89,25 +77,25 @@ export const ApproveModal: React.FC<propType> = (props) => { ...@@ -89,25 +77,25 @@ export const ApproveModal: React.FC<propType> = (props) => {
width={400} width={400}
> >
<Form <Form
name="addForm" name='addForm'
form={form} form={form}
labelAlign="right" labelAlign='right'
labelCol={{ span: 8 }} labelCol={{ span: 8 }}
// layout="inline" // layout="inline"
> >
<Form.Item label="当前状态"> <Form.Item label='当前状态'>
<div>{transStatus(data?.status as number)}</div> <div>{transStatus(data?.status as number)}</div>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="审批结果" label='审批结果'
name="flag" name='flag'
rules={[{ required: true, message: "请选择审批结果" }]} rules={[{ required: true, message: '请选择审批结果' }]}
> >
<Select <Select
placeholder="请选择审批结果" placeholder='请选择审批结果'
options={[ options={[
{ value: true, label: "通过" }, { value: true, label: '通过' },
{ value: false, label: "不通过" }, { value: false, label: '不通过' },
]} ]}
allowClear allowClear
/> />
......
src/pages/pointManage/pointList/comp/detailModal/index.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { Descriptions, Modal } from "antd"; import { Descriptions, Modal } from 'antd';
import { import { GetUserScoreDetailsType, UserScoreDetailsListType } from '@/api/interface/pointManageType';
GetUserScoreDetailsType, import { PointManageAPI } from '@/api';
UserScoreDetailsListType,
} from "@/api/interface/pointManageType";
import { PointManageAPI } from "@/api";
// 列表的类型 // 列表的类型
type TableType = (ReturnType<UserScoreDetailsListType> extends Promise<infer T> type TableType = (ReturnType<UserScoreDetailsListType> extends Promise<infer T>
? T ? T
: never)["result"]["list"]["userScoreList"]; : never)['result']['list']['userScoreList'];
type DetailType = (ReturnType<GetUserScoreDetailsType> extends Promise<infer T> type DetailType = (ReturnType<GetUserScoreDetailsType> extends Promise<infer T>
? T ? T
: never)["result"]; : never)['result'];
// 传参类型 // 传参类型
interface propType { interface propType {
title: string; title: string;
...@@ -21,12 +18,12 @@ interface propType { ...@@ -21,12 +18,12 @@ interface propType {
data?: TableType[0]; data?: TableType[0];
} }
const contentStyle = { width: "180px" }; const contentStyle = { width: '180px' };
// 状态 // 状态
const statusList = [ const statusList = [
{ value: 0, label: "提现中" }, { value: 0, label: '提现中' },
{ value: 1, label: "提现成功" }, { value: 1, label: '提现成功' },
{ value: 2, label: "提现失败" }, { value: 2, label: '提现失败' },
]; ];
export const DetailModal: React.FC<propType> = (props) => { export const DetailModal: React.FC<propType> = (props) => {
...@@ -50,31 +47,31 @@ export const DetailModal: React.FC<propType> = (props) => { ...@@ -50,31 +47,31 @@ export const DetailModal: React.FC<propType> = (props) => {
const res = await PointManageAPI.GetUserScoreDetails({ const res = await PointManageAPI.GetUserScoreDetails({
id: Number(data?.id), id: Number(data?.id),
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
setDetailData(res.result); setDetailData(res.result);
// console.log(res.result); // console.log(res.result);
} }
}; };
// 获取使用时间 // 获取使用时间
const getUseTime = (record: DetailType) => { const getUseTime = (record: DetailType) => {
if (detailData?.type === "积分提现" && detailData?.status === 0) { if (detailData?.type === '积分提现' && detailData?.status === 0) {
return ""; return '';
} }
if (detailData?.type === "积分提现" && detailData?.status === 2) { if (detailData?.type === '积分提现' && detailData?.status === 2) {
return ""; return '';
} }
if (detailData?.type === "积分提现" && detailData?.status === 1) { if (detailData?.type === '积分提现' && detailData?.status === 1) {
return record?.approvalTime; return record?.approvalTime;
} }
return record?.useTime; return record?.useTime;
}; };
// 获取申请提现时间 // 获取申请提现时间
const getApplyTime = (record: DetailType) => { const getApplyTime = (record: DetailType) => {
if (detailData?.type === "积分提现" && detailData?.status === 0) { if (detailData?.type === '积分提现' && detailData?.status === 0) {
return record?.useTime; return record?.useTime;
} }
if (["积分转赠", "积分兑换"].includes(detailData?.type || "")) { if (['积分转赠', '积分兑换'].includes(detailData?.type || '')) {
return ""; return '';
} }
return record?.useTime; return record?.useTime;
}; };
...@@ -93,38 +90,36 @@ export const DetailModal: React.FC<propType> = (props) => { ...@@ -93,38 +90,36 @@ export const DetailModal: React.FC<propType> = (props) => {
destroyOnClose destroyOnClose
width={650} width={650}
> >
<Descriptions column={2} bordered size="small"> <Descriptions column={2} bordered size='small'>
<Descriptions.Item contentStyle={contentStyle} label="积分数值"> <Descriptions.Item contentStyle={contentStyle} label='积分数值'>
{detailData?.scoreNum && {detailData?.scoreNum &&
(detailData?.scoreNum > 0 (detailData?.scoreNum > 0 ? `+${detailData?.scoreNum}` : detailData?.scoreNum)}
? `+${detailData?.scoreNum}`
: detailData?.scoreNum)}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="流通方式"> <Descriptions.Item contentStyle={contentStyle} label='流通方式'>
{detailData?.type} {detailData?.type}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="订单编号"> <Descriptions.Item contentStyle={contentStyle} label='订单编号'>
{detailData?.orderNo} {detailData?.orderNo}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="兑换比例"> <Descriptions.Item contentStyle={contentStyle} label='兑换比例'>
{detailData?.convertRatio} {detailData?.convertRatio}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="领取时间"> <Descriptions.Item contentStyle={contentStyle} label='领取时间'>
{detailData?.getTime} {detailData?.getTime}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="使用时间"> <Descriptions.Item contentStyle={contentStyle} label='使用时间'>
{detailData && getUseTime(detailData)} {detailData && getUseTime(detailData)}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="状态"> <Descriptions.Item contentStyle={contentStyle} label='状态'>
{transStatus(detailData?.status as number)} {transStatus(detailData?.status as number)}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="申请提现时间"> <Descriptions.Item contentStyle={contentStyle} label='申请提现时间'>
{detailData && getApplyTime(detailData)} {detailData && getApplyTime(detailData)}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="获赠方UID"> <Descriptions.Item contentStyle={contentStyle} label='获赠方UID'>
{detailData?.giveAwayToUid} {detailData?.giveAwayToUid}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item contentStyle={contentStyle} label="转赠方UID"> <Descriptions.Item contentStyle={contentStyle} label='转赠方UID'>
{detailData?.gainFormUid} {detailData?.gainFormUid}
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
......
src/pages/pointManage/pointList/comp/distributionModal/index.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { import { Descriptions, Form, Input, InputNumber, message, Modal, Select, Space } from 'antd';
Descriptions, import { UserScoreDetailsListType } from '@/api/interface/pointManageType';
Form, import { PointManageAPI } from '@/api';
Input, import { maxLength9, noSpaceFront } from '@/utils/validateUtils';
InputNumber,
message,
Modal,
Select,
Space,
} from "antd";
import { UserScoreDetailsListType } from "@/api/interface/pointManageType";
import { PointManageAPI } from "@/api";
import { maxLength9, noSpaceFront } from "@/utils/validateUtils";
// 列表的类型 // 列表的类型
type DetailType = (ReturnType<UserScoreDetailsListType> extends Promise<infer T> type DetailType = (ReturnType<UserScoreDetailsListType> extends Promise<infer T>
? T ? T
: never)["result"]["list"]; : never)['result']['list'];
// 传参类型 // 传参类型
interface propType { interface propType {
title: string; title: string;
...@@ -36,8 +27,7 @@ export const DistributionModal: React.FC<propType> = (props) => { ...@@ -36,8 +27,7 @@ export const DistributionModal: React.FC<propType> = (props) => {
// 流通方式选择 // 流通方式选择
const [circulateId, setCirculateId] = useState<number>(); const [circulateId, setCirculateId] = useState<number>();
// 流通方式列表 // 流通方式列表
const [circulateIdList, setCirculateIdList] = const [circulateIdList, setCirculateIdList] = useState<{ label: string; value: number }[]>();
useState<{ label: string; value: number }[]>();
// 关闭弹窗 // 关闭弹窗
const handleCancel = () => { const handleCancel = () => {
form.resetFields(); form.resetFields();
...@@ -50,17 +40,17 @@ export const DistributionModal: React.FC<propType> = (props) => { ...@@ -50,17 +40,17 @@ export const DistributionModal: React.FC<propType> = (props) => {
.validateFields() .validateFields()
.then(async (values) => { .then(async (values) => {
if (Number(values.score) === 0) { if (Number(values.score) === 0) {
return message.warning("积分数值不能为0"); return message.warning('积分数值不能为0');
} }
if (values.orderNo) { if (values.orderNo) {
// 从订单列表查询订单 // 从订单列表查询订单
const res = await PointManageAPI.GetOrderInfoByOrderNo({ const res = await PointManageAPI.GetOrderInfoByOrderNo({
orderNo: values.orderNo, orderNo: values.orderNo,
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
const { id } = res.result; const { id } = res.result;
if (!id) { if (!id) {
return message.warning("订单编号不存在"); return message.warning('订单编号不存在');
} }
await handleSubmit({ await handleSubmit({
...values, ...values,
...@@ -88,8 +78,8 @@ export const DistributionModal: React.FC<propType> = (props) => { ...@@ -88,8 +78,8 @@ export const DistributionModal: React.FC<propType> = (props) => {
orderId: values.orderId, orderId: values.orderId,
score: Number(`${values.symbol}${values.score}`), score: Number(`${values.symbol}${values.score}`),
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
message.success("操作成功"); message.success('操作成功');
handleCancel(); handleCancel();
} else { } else {
message.warning(res.message); message.warning(res.message);
...@@ -98,13 +88,13 @@ export const DistributionModal: React.FC<propType> = (props) => { ...@@ -98,13 +88,13 @@ export const DistributionModal: React.FC<propType> = (props) => {
// 获取流通数据列表 // 获取流通数据列表
const getListCirculateInfo = async () => { const getListCirculateInfo = async () => {
const res = await PointManageAPI.ListCirculateInfo({}); const res = await PointManageAPI.ListCirculateInfo({});
if (res && res.code === "200") { if (res && res.code === '200') {
setCirculateIdList( setCirculateIdList(
res.result res.result
.map((i) => { .map((i) => {
return { label: i.type, value: i.id }; return { label: i.type, value: i.id };
}) })
.filter((i) => [5, 7].includes(i.value)) .filter((i) => [5, 7].includes(i.value)),
); );
} }
}; };
...@@ -129,40 +119,40 @@ export const DistributionModal: React.FC<propType> = (props) => { ...@@ -129,40 +119,40 @@ export const DistributionModal: React.FC<propType> = (props) => {
width={400} width={400}
> >
<Form <Form
name="addForm" name='addForm'
form={form} form={form}
labelAlign="right" labelAlign='right'
labelCol={{ span: 8 }} labelCol={{ span: 8 }}
// layout="inline" // layout="inline"
> >
<Form.Item label="发放积分数值" required> <Form.Item label='发放积分数值' required>
<Space.Compact style={{ width: "100%" }}> <Space.Compact style={{ width: '100%' }}>
<Form.Item name="symbol" noStyle initialValue="+"> <Form.Item name='symbol' noStyle initialValue='+'>
<Select> <Select>
<Select.Option value="+">+</Select.Option> <Select.Option value='+'>+</Select.Option>
<Select.Option value="-">-</Select.Option> <Select.Option value='-'>-</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="score" name='score'
noStyle noStyle
rules={[{ required: true, message: "请输入发放积分数值" }]} rules={[{ required: true, message: '请输入发放积分数值' }]}
> >
<Input <Input
style={{ width: "250%" }} style={{ width: '250%' }}
placeholder="请输入发放积分数值" placeholder='请输入发放积分数值'
onInput={maxLength9} onInput={maxLength9}
/> />
</Form.Item> </Form.Item>
</Space.Compact> </Space.Compact>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="流通方式" label='流通方式'
name="circulateId" name='circulateId'
rules={[{ required: true, message: "请选择流通方式" }]} rules={[{ required: true, message: '请选择流通方式' }]}
> >
<Select <Select
placeholder="请选择流通方式" placeholder='请选择流通方式'
options={circulateIdList} options={circulateIdList}
allowClear allowClear
value={circulateId} value={circulateId}
...@@ -171,16 +161,11 @@ export const DistributionModal: React.FC<propType> = (props) => { ...@@ -171,16 +161,11 @@ export const DistributionModal: React.FC<propType> = (props) => {
</Form.Item> </Form.Item>
{circulateId === 5 && ( {circulateId === 5 && (
<Form.Item <Form.Item
label="订单编号" label='订单编号'
name="orderNo" name='orderNo'
rules={[{ required: true, message: "请输入订单编号" }]} rules={[{ required: true, message: '请输入订单编号' }]}
> >
<Input <Input placeholder='请输入订单编号' maxLength={20} allowClear onInput={noSpaceFront} />
placeholder="请输入订单编号"
maxLength={20}
allowClear
onInput={noSpaceFront}
/>
</Form.Item> </Form.Item>
)} )}
</Form> </Form>
......
src/pages/pointManage/pointRules/comp/addEditModal/index.tsx
import React, { useState } from "react"; import React, { useState } from 'react';
import { DatePicker, Form, Input, message, Modal, Radio } from "antd"; import { DatePicker, Form, Input, message, Modal, Radio } from 'antd';
import moment from "dayjs"; import moment from 'dayjs';
import { PointManageAPI } from "@/api"; import { PointManageAPI } from '@/api';
import { maxLength8, maxString8 } from "@/utils/validateUtils"; import { maxLength8, maxString8 } from '@/utils/validateUtils';
// 传参类型 // 传参类型
interface propType { interface propType {
...@@ -50,83 +50,69 @@ export const AddEditModal: React.FC<propType> = (props: propType) => { ...@@ -50,83 +50,69 @@ export const AddEditModal: React.FC<propType> = (props: propType) => {
coupon: Number(values.coupon), coupon: Number(values.coupon),
entryIntoForceTime: entryIntoForceTime:
values.ruleSetting === 1 values.ruleSetting === 1
? moment(values.entryIntoForceTime.$d).format("YYYY-MM-DD HH:mm:ss") ? moment(values.entryIntoForceTime.$d).format('YYYY-MM-DD HH:mm:ss')
: undefined, : undefined,
ruleName: values.ruleName, ruleName: values.ruleName,
score: Number(values.score), score: Number(values.score),
}); });
if (res && res.code === "200") { if (res && res.code === '200') {
handleCancel(); handleCancel();
} }
}; };
return ( return (
<Modal <Modal open={open} title={title} onCancel={handleCancel} onOk={handleOk} destroyOnClose>
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
>
<Form <Form
name="addForm" name='addForm'
form={form} form={form}
labelAlign="right" labelAlign='right'
// layout="inline" // layout="inline"
> >
<Form.Item <Form.Item
label="规则名称" label='规则名称'
name="ruleName" name='ruleName'
rules={[{ required: true, message: "请输入规则名称" }]} rules={[{ required: true, message: '请输入规则名称' }]}
> >
<Input placeholder="请输入规则名称" maxLength={15} allowClear /> <Input placeholder='请输入规则名称' maxLength={15} allowClear />
</Form.Item> </Form.Item>
<Form.Item label="兑换比例（积分：券额）" required> <Form.Item label='兑换比例（积分：券额）' required>
<Form.Item <Form.Item
name="score" name='score'
rules={[{ required: true, message: "请输入积分比例" }]} rules={[{ required: true, message: '请输入积分比例' }]}
style={{ display: "inline-block", width: "calc(50% - 8px)" }} style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
> >
<Input <Input placeholder='请输入积分比例' type='number' onInput={maxLength8} />
placeholder="请输入积分比例"
type="number"
onInput={maxLength8}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="coupon" name='coupon'
rules={[ rules={[
{ required: true, message: "请输入券额比例" }, { required: true, message: '请输入券额比例' },
{ {
pattern: /^(\d|[1-9]\d+)(\.\d{1,2})?$/, pattern: /^(\d|[1-9]\d+)(\.\d{1,2})?$/,
message: "只能输入两位小数", message: '只能输入两位小数',
}, },
]} ]}
style={{ style={{
display: "inline-block", display: 'inline-block',
width: "calc(50% - 8px)", width: 'calc(50% - 8px)',
margin: "0 8px", margin: '0 8px',
}} }}
> >
<Input <Input placeholder='请输入券额比例' type='number' onInput={maxString8} />
placeholder="请输入券额比例"
type="number"
onInput={maxString8}
/>
</Form.Item> </Form.Item>
</Form.Item> </Form.Item>
<div style={{ transform: "translateY(-10px)" }}> <div style={{ transform: 'translateY(-10px)' }}>
说明：若兑换比例为1：20，则1积分可兑20元VIP优惠券，且为无门槛优惠券 说明：若兑换比例为1：20，则1积分可兑20元VIP优惠券，且为无门槛优惠券
</div> </div>
<Form.Item <Form.Item
label="生效时间" label='生效时间'
name="ruleSetting" name='ruleSetting'
rules={[{ required: true, message: "请选择生效时间" }]} rules={[{ required: true, message: '请选择生效时间' }]}
initialValue={0} initialValue={0}
> >
<Radio.Group <Radio.Group
options={[ options={[
{ label: "立即生效", value: 0 }, { label: '立即生效', value: 0 },
{ label: "手动设置", value: 1 }, { label: '手动设置', value: 1 },
]} ]}
value={radioValue} value={radioValue}
onChange={({ target: { value } }) => { onChange={({ target: { value } }) => {
...@@ -136,16 +122,16 @@ export const AddEditModal: React.FC<propType> = (props: propType) => { ...@@ -136,16 +122,16 @@ export const AddEditModal: React.FC<propType> = (props: propType) => {
</Form.Item> </Form.Item>
{radioValue === 1 && ( {radioValue === 1 && (
<Form.Item <Form.Item
label="生效时间" label='生效时间'
name="entryIntoForceTime" name='entryIntoForceTime'
rules={[{ required: radioValue === 1, message: "请设置生效时间" }]} rules={[{ required: radioValue === 1, message: '请设置生效时间' }]}
> >
<DatePicker <DatePicker
placeholder="请选择生效时间" placeholder='请选择生效时间'
allowClear allowClear
showTime={{ format: "HH:mm:ss" }} showTime={{ format: 'HH:mm:ss' }}
format="YYYY-MM-DD HH:mm:ss" format='YYYY-MM-DD HH:mm:ss'
style={{ width: "100%" }} style={{ width: '100%' }}
disabledDate={(current) => { disabledDate={(current) => {
// 限制时间不可早于当日 // 限制时间不可早于当日
return current && current <= moment(); return current && current <= moment();
......
src/router/router.tsx
...@@ -2,15 +2,16 @@ import React from 'react'; ...@@ -2,15 +2,16 @@ import React from 'react';
import { Navigate, RouteObject } from 'react-router-dom'; import { Navigate, RouteObject } from 'react-router-dom';
import ErrorPage from '~/pages/common/error'; import ErrorPage from '~/pages/common/error';
import LayoutView from '~/components/layout'; import LayoutView from '~/components/layout';
import { import {
AccountBookOutlined, AccountBookOutlined,
MacCommandOutlined, MacCommandOutlined,
GiftOutlined,PayCircleOutlined, GiftOutlined,
BarsOutlined, PayCircleOutlined,
ShoppingOutlined, BarsOutlined,
ShopOutlined, ShoppingOutlined,
CreditCardOutlined ShopOutlined,
} from '@ant-design/icons'; CreditCardOutlined,
} from '@ant-design/icons';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore // @ts-ignore
import { AgnosticIndexRouteObject } from '@remix-run/router'; import { AgnosticIndexRouteObject } from '@remix-run/router';
...@@ -23,16 +24,20 @@ import DivideOrder from '~/pages/pointManage/divideOrder'; ...@@ -23,16 +24,20 @@ import DivideOrder from '~/pages/pointManage/divideOrder';
import DivideRules from '~/pages/pointManage/divideRules'; import DivideRules from '~/pages/pointManage/divideRules';
import LoginView from '~/pages/common/login'; import LoginView from '~/pages/common/login';
import ProductOrderDetail from '~/pages/orderManage/productOrder/detail'; import ProductOrderDetail from '~/pages/orderManage/productOrder/detail';
import ServiceOrderDetail from '~/pages/orderManage/serviceOrder/detail';
import EquipmentOrderDetail from '~/pages/orderManage/equipmentOrder/detail';
const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList'));//活动管理 const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList')); //活动管理
const ProductOrderView = React.lazy(() => import('src/pages/orderManage/productOrder')); //销售订单 const ProductOrderView = React.lazy(() => import('src/pages/orderManage/productOrder')); //销售订单
const EquipmentOrderView = React.lazy(() => import('src/pages/orderManage/equipmentOrder')); //设备订单 const EquipmentOrderView = React.lazy(() => import('src/pages/orderManage/equipmentOrder')); //设备订单
const ServiceOrderView = React.lazy(() => import('src/pages/orderManage/serviceOrder')); //服务订单 const ServiceOrderView = React.lazy(() => import('src/pages/orderManage/serviceOrder')); //服务订单
const CouponList = React.lazy(() => import('src/pages/couponManage/couponList'));//优惠券管理 const CouponList = React.lazy(() => import('src/pages/couponManage/couponList')); //优惠券管理
const CouponDetail = React.lazy(() => import('src/pages/couponManage/couponList/detail'));//优惠券明细 const CouponDetail = React.lazy(() => import('src/pages/couponManage/couponList/detail')); //优惠券明细
const SplitCouponList = React.lazy(() => import('src/pages/couponManage/splitCouponList'));//裂变优惠券 const SplitCouponList = React.lazy(() => import('src/pages/couponManage/splitCouponList')); //裂变优惠券
const SplitCouponOperate = React.lazy(() => import('src/pages/couponManage/splitCouponList/addOrEditOrDetail'));//裂变优惠券操作 const SplitCouponOperate = React.lazy(
const CouponDetailed = React.lazy(() => import('src/pages/couponManage/couponDetailed'));//优惠券明细 () => import('src/pages/couponManage/splitCouponList/addOrEditOrDetail'),
); //裂变优惠券操作
const CouponDetailed = React.lazy(() => import('src/pages/couponManage/couponDetailed')); //优惠券明细
export interface RouteObjectType { export interface RouteObjectType {
path: AgnosticIndexRouteObject['path']; path: AgnosticIndexRouteObject['path'];
element: any; element: any;
...@@ -121,6 +126,16 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -121,6 +126,16 @@ export const routerList: Array<RouteObjectType> = [
}, },
}, },
{ {
path: '/orderManage/equipmentOrder/detail',
element: withLoadingComponent(<EquipmentOrderDetail />),
meta: {
id: 10020,
title: '租赁订单 / 详情',
icon: <ShopOutlined />,
hidden: true,
},
},
{
path: '/orderManage/serviceOrder', path: '/orderManage/serviceOrder',
element: withLoadingComponent(<ServiceOrderView />), element: withLoadingComponent(<ServiceOrderView />),
meta: { meta: {
...@@ -129,6 +144,16 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -129,6 +144,16 @@ export const routerList: Array<RouteObjectType> = [
icon: <CreditCardOutlined />, icon: <CreditCardOutlined />,
}, },
}, },
{
path: '/orderManage/serviceOrder/detail',
element: withLoadingComponent(<ServiceOrderDetail />),
meta: {
id: 10010,
title: '服务订单 / 详情',
icon: <CreditCardOutlined />,
hidden: true,
},
},
], ],
}, },
{ {
...@@ -152,9 +177,13 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -152,9 +177,13 @@ export const routerList: Array<RouteObjectType> = [
}, },
{ {
path: '/pointManage/pointList/detail', path: '/pointManage/pointList/detail',
element: withLoadingComponent(<PointDetail location={{ element: withLoadingComponent(
search: '' <PointDetail
}} />), location={{
search: '',
}}
/>,
),
meta: { meta: {
id: 25100, id: 25100,
title: '个人积分明细', title: '个人积分明细',
...@@ -173,9 +202,13 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -173,9 +202,13 @@ export const routerList: Array<RouteObjectType> = [
}, },
{ {
path: '/pointManage/pointList/list', path: '/pointManage/pointList/list',
element: withLoadingComponent(<PointDetailList location={{ element: withLoadingComponent(
search: '' <PointDetailList
}} />), location={{
search: '',
}}
/>,
),
meta: { meta: {
id: 25100, id: 25100,
title: '积分明细', title: '积分明细',
...@@ -225,14 +258,18 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -225,14 +258,18 @@ export const routerList: Array<RouteObjectType> = [
}, },
{ {
path: '/couponManage/couponList/detail', path: '/couponManage/couponList/detail',
element: withLoadingComponent(<CouponDetail location={{ element: withLoadingComponent(
search: '' <CouponDetail
}} />), location={{
search: '',
}}
/>,
),
meta: { meta: {
id: 26100, id: 26100,
title: '活动优惠券操作', title: '活动优惠券操作',
icon: <PayCircleOutlined />, icon: <PayCircleOutlined />,
hidden:true, hidden: true,
}, },
}, },
{ {
...@@ -251,7 +288,7 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -251,7 +288,7 @@ export const routerList: Array<RouteObjectType> = [
id: 26200, id: 26200,
title: '裂变优惠券操作', title: '裂变优惠券操作',
icon: <PayCircleOutlined />, icon: <PayCircleOutlined />,
hidden:true, hidden: true,
}, },
}, },
{ {
......
src/store/hook/index.ts
import { useSelector, useDispatch, TypedUseSelectorHook } from "react-redux"; import { useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux';
import type { RootState, AppDispatch } from "../index"; import type { RootState, AppDispatch } from '../index';
export const useAppDispatch = () => useDispatch<AppDispatch>(); export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector; export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
src/store/index.ts
import { configureStore } from "@reduxjs/toolkit"; import { configureStore } from '@reduxjs/toolkit';
import stateSlice from "@/store/slice"; import stateSlice from '@/store/slice';
const store = configureStore({ const store = configureStore({
reducer: { reducer: {
......
src/store/slice/index.ts
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit"; import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
const stateSlice = createSlice({ const stateSlice = createSlice({
name: "ghj", name: 'ghj',
initialState: { initialState: {
num: 1, num: 1,
}, },
......
src/utils/auth.ts
const TOKENKEY = "mmc-token"; const TOKENKEY = 'mmc-token';
const USERKEY = "mmc-custManage"; const USERKEY = 'mmc-custManage';
const getToken = () => { const getToken = () => {
return localStorage.getItem(TOKENKEY); return localStorage.getItem(TOKENKEY);
......
src/utils/dictionary.ts
// 合同状态 // 合同状态
export const signStatusList = [ export const signStatusList = [
{ val: 0, label: "待用户签署合同" }, { val: 0, label: '待用户签署合同' },
{ val: 1, label: "用户签署失败" }, { val: 1, label: '用户签署失败' },
{ val: 2, label: "待平台签署合同" }, { val: 2, label: '待平台签署合同' },
{ val: 3, label: "平台签署失败" }, { val: 3, label: '平台签署失败' },
{ val: 4, label: "平台签署成功" }, { val: 4, label: '平台签署成功' },
{ val: 5, label: "合同归档完成" }, { val: 5, label: '合同归档完成' },
]; ];
// 裂变优惠券门槛 // 裂变优惠券门槛
export const splitCouponType = [ export const splitCouponType = [
{ {
val: 1, val: 1,
label: "有门槛", label: '有门槛',
}, },
{ {
val: 2, val: 2,
label: "减免券", label: '减免券',
}, },
{ {
val: 3, val: 3,
label: "无门槛", label: '无门槛',
}, },
]; ];
// 裂变优惠券使用类型 // 裂变优惠券使用类型
export const splitCouponUseType = [ export const splitCouponUseType = [
{ {
val: 2, val: 2,
label: "品牌券", label: '品牌券',
}, },
{ {
val: 1, val: 1,
label: "商品券", label: '商品券',
}, },
{ {
val: 3, val: 3,
label: "店铺券", label: '店铺券',
}, },
]; ];
src/utils/index.ts
export const base64ToFile = (dataUrl: string, name?: string) => { export const base64ToFile = (dataUrl: string, name?: string) => {
const arr: string[] = dataUrl.split(","); const arr: string[] = dataUrl.split(',');
// const mime = arr[0].match(/:(.*?);/)[1]; // const mime = arr[0].match(/:(.*?);/)[1];
const bstr: string = atob(arr[1]); const bstr: string = atob(arr[1]);
let n = bstr.length; let n = bstr.length;
...@@ -7,7 +7,7 @@ export const base64ToFile = (dataUrl: string, name?: string) => { ...@@ -7,7 +7,7 @@ export const base64ToFile = (dataUrl: string, name?: string) => {
while (n--) { while (n--) {
u8arr[n] = bstr.charCodeAt(n); u8arr[n] = bstr.charCodeAt(n);
} }
return new File([u8arr], `${name}.png`, { type: "image/png" }); return new File([u8arr], `${name}.png`, { type: 'image/png' });
}; };
export const urlToBase64 = (url: string) => { export const urlToBase64 = (url: string) => {
return new Promise((resolve) => { return new Promise((resolve) => {
...@@ -17,17 +17,17 @@ export const urlToBase64 = (url: string) => { ...@@ -17,17 +17,17 @@ export const urlToBase64 = (url: string) => {
// 处理缓存,fix缓存bug,有缓存，浏览器会报错; // 处理缓存,fix缓存bug,有缓存，浏览器会报错;
Img.src = `${url}?${timeStamp}`; Img.src = `${url}?${timeStamp}`;
// 解决控制台跨域报错的问题 // 解决控制台跨域报错的问题
Img.crossOrigin = "Anonymous"; Img.crossOrigin = 'Anonymous';
// 获取后缀 // 获取后缀
const ext = Img.src.substring(Img.src.lastIndexOf(".") + 1).toLowerCase(); const ext = Img.src.substring(Img.src.lastIndexOf('.') + 1).toLowerCase();
Img.onload = () => { Img.onload = () => {
// 要先确保图片完整获取到，这是个异步事件 // 要先确保图片完整获取到，这是个异步事件
const canvas: any = document.createElement("canvas"); // 创建canvas元素 const canvas: any = document.createElement('canvas'); // 创建canvas元素
// 确保canvas的尺寸和图片一样 // 确保canvas的尺寸和图片一样
canvas.width = Img.width; canvas.width = Img.width;
canvas.height = Img.height; canvas.height = Img.height;
// 将图片绘制到canvas中 // 将图片绘制到canvas中
canvas.getContext("2d").drawImage(Img, 0, 0, Img.width, Img.height); canvas.getContext('2d').drawImage(Img, 0, 0, Img.width, Img.height);
// 转换图片为dataURL // 转换图片为dataURL
resolve(canvas.toDataURL(`image/${ext}`)); resolve(canvas.toDataURL(`image/${ext}`));
}; };
......
src/utils/isRoute.ts
// 过滤路由 // 过滤路由
import { limitEntity } from "@/api/modules/role"; import { limitEntity } from '@/api/modules/role';
export const filterRouter = (list: any, routeList: limitEntity[]) => { export const filterRouter = (list: any, routeList: limitEntity[]) => {
return list.reduce((pre: any, cur: any) => { return list.reduce((pre: any, cur: any) => {
...@@ -19,6 +19,6 @@ export const isRoute = (list: any, pathname: string) => { ...@@ -19,6 +19,6 @@ export const isRoute = (list: any, pathname: string) => {
(v: any) => (v: any) =>
v.path === pathname || v.path === pathname ||
(v.alias && pathname.includes(v.alias)) || (v.alias && pathname.includes(v.alias)) ||
(v.children && isRoute(v.children, pathname)) (v.children && isRoute(v.children, pathname)),
); );
}; };
src/utils/money.ts
// 格式化千分位并补零 // 格式化千分位并补零
export const moneyFormat = (num: number) => { export const moneyFormat = (num: number) => {
if (Number(num).toString() !== "NaN") { if (Number(num).toString() !== 'NaN') {
// 添加千分符 // 添加千分符
let _n = Number(num).toLocaleString(); let _n = Number(num).toLocaleString();
if (_n.indexOf(".") !== -1) { if (_n.indexOf('.') !== -1) {
_n += "00"; _n += '00';
} else { } else {
_n += ".00"; _n += '.00';
} }
// 因为有千分符所以，返回数据为字符串格式，无法做运算操作，适合做直接显示使用 // 因为有千分符所以，返回数据为字符串格式，无法做运算操作，适合做直接显示使用
return _n.substring(0, _n.indexOf(".") + 3); return _n.substring(0, _n.indexOf('.') + 3);
} }
}; };
src/utils/order.ts
// 是否允许操作 // 是否允许操作
const isAllowOption = (record: any) => { const isAllowOption = (record: any) => {
const userInfo = JSON.parse(localStorage.getItem("user_info") as string); const userInfo = JSON.parse(localStorage.getItem('user_info') as string);
return ( return (
userInfo.userAccountId === record.operationId || userInfo.userAccountId === record.operationId ||
(userInfo.roleInfo.pmc && (userInfo.roleInfo.pmc && (record.statusCode === 710 || record.statusCode === 500))
(record.statusCode === 710 || record.statusCode === 500))
); );
}; };
// 设置状态 // 设置状态
export const setStatus = (record: any, deliverBtn: boolean) => { export const setStatus = (record: any, deliverBtn: boolean) => {
if (record.statusCode !== 50 && !isAllowOption(record)) { if (record.statusCode !== 50 && !isAllowOption(record)) {
return ""; return '';
} }
// 新版 // 新版
if (record.statusCode === 200) { if (record.statusCode === 200) {
return record.signStatus === 2 ? "合同签署" : ""; return record.signStatus === 2 ? '合同签署' : '';
} }
switch (record.statusCode) { switch (record.statusCode) {
case 50: case 50:
return JSON.parse(localStorage.getItem("user_info") as string).roleInfo return JSON.parse(localStorage.getItem('user_info') as string).roleInfo.admin
.admin ? '分配订单'
? "分配订单" : '';
: "";
case 100: case 100:
return "确认订单"; return '确认订单';
case 300: case 300:
return "确认付款"; return '确认付款';
case 400: case 400:
return "确认库存"; return '确认库存';
case 710: case 710:
case 500: case 500:
return deliverBtn ? "发货" : ""; return deliverBtn ? '发货' : '';
case 660: case 660:
return "确认尾款"; return '确认尾款';
default: default:
return null; return null;
} }
......
src/utils/validateUtils.ts
// 不能输入数字，其他可惜输入 // 不能输入数字，其他可惜输入
export const exceptNumber = (val: any) => { export const exceptNumber = (val: any) => {
val.target.value = val.target.value val.target.value = val.target.value.replace(/1?(\d|([1-9]\d+))(.\d+)?$/g, '').replace(/\s/g, '');
.replace(/1?(\d|([1-9]\d+))(.\d+)?$/g, "")
.replace(/\s/g, "");
}; };
// 只能输入正整数 // 只能输入正整数
export const onlyNumberPositive = (val: any) => { export const onlyNumberPositive = (val: any) => {
// eslint-disable-next-line eqeqeq // eslint-disable-next-line eqeqeq
if (val.target.value == 0) { if (val.target.value == 0) {
val.target.value = val.target.value.replace(/0/g, ""); val.target.value = val.target.value.replace(/0/g, '');
} }
val.target.value = val.target.value.replace(/\D/g, ""); val.target.value = val.target.value.replace(/\D/g, '');
}; };
// 不能输入汉字，其他可输入 // 不能输入汉字，其他可输入
export const exceptChinese = (val: any) => { export const exceptChinese = (val: any) => {
val.target.value = val.target.value val.target.value = val.target.value
.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, "") .replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, '')
.replace(/\s/g, ""); .replace(/\s/g, '');
}; };
// 只能输入字母和中文，不能输入数字和符号 // 只能输入字母和中文，不能输入数字和符号
export const onlyCharacter = (val: any) => { export const onlyCharacter = (val: any) => {
val.target.value = val.target.value val.target.value = val.target.value.replace(/[^a-zA-Z\u4E00-\u9FA5]/g, '').replace(/\s/g, '');
.replace(/[^a-zA-Z\u4E00-\u9FA5]/g, "")
.replace(/\s/g, "");
}; };
// 手机号输入，限制11位 // 手机号输入，限制11位
...@@ -33,13 +29,13 @@ export const phoneNumber = (val: any) => { ...@@ -33,13 +29,13 @@ export const phoneNumber = (val: any) => {
if (val.target.value.length > 11) { if (val.target.value.length > 11) {
val.target.value = val.target.value.slice(0, 11); val.target.value = val.target.value.slice(0, 11);
} else { } else {
val.target.value = val.target.value.replace(/\D/g, ""); val.target.value = val.target.value.replace(/\D/g, '');
} }
}; };
// 开头不能输入空格 // 开头不能输入空格
export const noSpaceFront = (val: any) => { export const noSpaceFront = (val: any) => {
val.target.value = val.target.value.replace(/^\s/g, ""); val.target.value = val.target.value.replace(/^\s/g, '');
}; };
// 数字限制长度 // 数字限制长度
...@@ -47,7 +43,7 @@ export const maxLength = (val: any) => { ...@@ -47,7 +43,7 @@ export const maxLength = (val: any) => {
if (val.target.value.length > 10) { if (val.target.value.length > 10) {
val.target.value = val.target.value.slice(0, 10); val.target.value = val.target.value.slice(0, 10);
} else { } else {
val.target.value = val.target.value.replace(/\D/g, ""); val.target.value = val.target.value.replace(/\D/g, '');
} }
}; };
...@@ -63,7 +59,7 @@ export const maxNumber = (val: any) => { ...@@ -63,7 +59,7 @@ export const maxNumber = (val: any) => {
if (val.target.value > 100000) { if (val.target.value > 100000) {
val.target.value = 100000; val.target.value = 100000;
} else { } else {
val.target.value = val.target.value.replace(/\D/g, ""); val.target.value = val.target.value.replace(/\D/g, '');
} }
}; };
...@@ -79,7 +75,7 @@ export const maxLength8 = (val: any) => { ...@@ -79,7 +75,7 @@ export const maxLength8 = (val: any) => {
if (val.target.value.length > 8) { if (val.target.value.length > 8) {
val.target.value = val.target.value.slice(0, 8); val.target.value = val.target.value.slice(0, 8);
} else { } else {
val.target.value = val.target.value.replace(/\D/g, ""); val.target.value = val.target.value.replace(/\D/g, '');
} }
}; };
...@@ -88,7 +84,7 @@ export const maxLength9 = (val: any) => { ...@@ -88,7 +84,7 @@ export const maxLength9 = (val: any) => {
if (val.target.value.length > 9) { if (val.target.value.length > 9) {
val.target.value = val.target.value.slice(0, 9); val.target.value = val.target.value.slice(0, 9);
} else { } else {
val.target.value = val.target.value.replace(/\D/g, ""); val.target.value = val.target.value.replace(/\D/g, '');
} }
}; };
...@@ -97,7 +93,7 @@ export const maxLength7 = (val: any) => { ...@@ -97,7 +93,7 @@ export const maxLength7 = (val: any) => {
if (val.target.value.length > 7) { if (val.target.value.length > 7) {
val.target.value = val.target.value.slice(0, 7); val.target.value = val.target.value.slice(0, 7);
} else { } else {
val.target.value = val.target.value.replace(/\D/g, ""); val.target.value = val.target.value.replace(/\D/g, '');
} }
}; };
...@@ -106,6 +102,6 @@ export const maxLength6 = (val: any) => { ...@@ -106,6 +102,6 @@ export const maxLength6 = (val: any) => {
if (val.target.value.length > 6) { if (val.target.value.length > 6) {
val.target.value = val.target.value.slice(0, 6); val.target.value = val.target.value.slice(0, 6);
} else { } else {
val.target.value = val.target.value.replace(/\D/g, ""); val.target.value = val.target.value.replace(/\D/g, '');
} }
}; };
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论