Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into devbra

Browse Source
This commit is contained in:
lyp 2025-05-21 09:42:29 +08:00
commit 153b4a963b
6 changed files with 465 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

293
src/components/PackageModal/PackageModal.tsx Normal file
View File

@ -0,0 +1,293 @@
import { useState, useEffect, useContext } from 'react'
import { Table, Spin, message, Modal } from 'antd';
import {
get,
} from "../../util/AjaxUtils.ts";
import { getPackageDetail } from '../../request/api.ts'
import { GlobalContext } from "../../context/GlobalContext.ts";
import type {
TableColumnsType,
} from 'antd';
export default function PackageModal() {
interface DataType {
usericId: string;
icPriceMaterial: number;
icPriceAll: number;
createTime: string;
packageOrderId: string;
}
interface DetailType {
orderTitle: string; //项目名称
description: string; //描述
gmtCreate: string; //创建时间
mode: number;//类型 1退回 2使用
}
const [messageApi, contextHolder] = message.useMessage();
const [packList, setPackList] = useState<any[]>([]) //服务包列表
const [packPage, setPackPage] = useState(1) //服务包分页
const [packTotal, setPackTotal] = useState(0) //服务包总数
const [packDetailModal, setPackDetailModal] = useState(false) //服务包详情
const [detailPage, setDetailPage] = useState(1) //服务包详情分页
const [detailTotal, setDetailTotal] = useState(0) //服务包详情总数
const [detailList, setDetailList] = useState<any[]>([]) //服务包详情列表
// const [packageOrderId, setPackageOrderId] = useState('') //服务包id
const [packloading, setPackloading] = useState(false)
// 获取我得服务包信息
const getPickList = (page: number, packageType: string) => {
get<any>({
messageApi,
url: `/api/proj/servicepkg/packageorder/listpage/self`,
config: {
params: {
page: page,
rows: 10,
packageType: packageType
}
},
onBefore() {
setPackloading(true)
},
onSuccess({ data }) {
setPackList(data.rows)
setPackTotal(data.total)
},
onFinally() {
setPackloading(false)
}
})
}
const globalContext = useContext(GlobalContext);
const [packageOrderId, setPackageOrderId] = useState('') //服务包id
// 获取服务包详情
const packageDetail = async (packageOrderId: string, page: number) => {
const res: any = await getPackageDetail(globalContext.user.userId, packageOrderId, { page: page, rows: 10 })
console.log(res);
setDetailList(res.rows)
setDetailTotal(res.total)
}
useEffect(() => {
getPickList(packPage, '')
}, [packPage])
useEffect(() => {
packageDetail(packageOrderId, detailPage)
}, [detailPage])
const packColumns: TableColumnsType<DataType> = [
{
title: '序号',
dataIndex: 'index',
key: 'packageOrderId',
align: 'center',
render: (_text, _record, index) => (packPage - 1) * 10 + index + 1, // 显示序号，从1开始
},
{
title: '套餐名称',
dataIndex: 'packageName',
key: 'packageOrderId',
// 居中显示
align: 'center',
},
// packageType
{
title: '套餐类型',
dataIndex: 'packageInfoAppDTO',
key: 'packageOrderId',
// 居中显示
align: 'center',
render: (text) => {
return <div>{text.packageType == "ALL" ? '全托管' : '写材料'} </div>
}
},
// {
// title: '套餐类型',
// dataIndex: 'packageInfoAppDTO',
// key: 'packageOrderId',
// // 居中显示
// align: 'center',
// render: (text) => {
// return <div>{text} </div>
// }
// },
{
title: '价格',
dataIndex: 'packageTotalMoney',
key: 'packageOrderId',
// 居中显示
align: 'center',
render: (text) => {
return <div>{text / 100}元</div>
}
},
{
title: '剩余次数',
dataIndex: 'packageTotalSurplusCount',
align: 'center',
key: 'packageOrderId',
render: (text: number) => {
return <div>{text} </div>
}
},
{
title: '总次数',
dataIndex: 'packageTotalCount',
align: 'center',
key: 'packageOrderId',
render: (text: any) => {
return <div>{text} </div>
}
},
{
title: '下单时间',
align: 'center',
dataIndex: 'gmtCreate',
key: 'packageOrderId',
// render: (text: string) => {
// return <div title={text} style={{ width: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{text}</div>
// }
},
{
title: '操作',
align: 'center',
dataIndex: 'operate',
key: 'packageOrderId',
render: (_value, record) => {
return <a onClick={() => {
// console.log(record);
setPackDetailModal(true)
packageDetail(record.packageOrderId, 1)
setPackageOrderId(record.packageOrderId)
setDetailPage(1)
}}>查看详情</a>
}
},
];
const detailColums: TableColumnsType<DetailType> = [
{
title: '序号',
dataIndex: 'index',
key: 'packageOrderItemId',
align: 'center',
width: 100,
render: (_text, _record, index) => (detailPage - 1) * 10 + index + 1, // 显示序号，从1开始
},
{
title: '项目名称',
dataIndex: 'orderTitle',
key: 'packageOrderItemId',
align: 'center',
width: 150,
ellipsis: {
showTitle: true,
},
},
{
title: '类型',
dataIndex: 'mode',
key: 'packageOrderItemId',
align: 'center',
width: 120,
render: (text) => {
return <span>
{text == 1 ? '退回' : '使用'}
</span>
}
},
{
title: '创建时间',
dataIndex: 'gmtCreate',
key: 'packageOrderItemId',
align: 'center',
width: 200,
},
{
title: '使用数量',
dataIndex: 'itemUseCount',
key: 'packageOrderItemId',
align: 'center',
width: 100,
},
{
title: '剩余数量',
dataIndex: 'itemCount',
key: 'packageOrderItemId',
align: 'center',
width: 100,
},
{
title: '描述',
dataIndex: 'description',
key: 'packageOrderItemId',
align: 'center',
width: 400,
ellipsis: {
showTitle: true,
},
},
]
return (
<Spin tip="加载中..." spinning={packloading} >
{contextHolder}
<Table
columns={packColumns}
dataSource={packList}
pagination={{
defaultPageSize: 10, // 设置默认一页显示 5 条数据,
current: packPage,
total: packTotal,
onChange: (page: number) => {
setPackPage(page);
getPickList(page, '')
// console.log(page);
}
}}
rowKey="packageOrderId"
/>
<Modal title="套餐包使用详情"
centered
footer={null}
destroyOnClose
open={packDetailModal}
width={1200}
onCancel={() => {
setPackDetailModal(false)
}}>
<Table
columns={detailColums}
dataSource={detailList}
pagination={{
defaultPageSize: 10, // 设置默认一页显示 5 条数据,
current: detailPage,
total: detailTotal,
onChange: (page: number) => {
setDetailPage(page);
packageDetail(packageOrderId, page)
// console.log(page);
}
}}
rowKey="packageOrderItemId"
/>
</Modal>
</Spin>
)
}

39
src/components/balance/BalanceHead.tsx
View File

@ -5,8 +5,11 @@ import { Modal } from 'antd';
import moneyImg from '@theme/img/head/money.png' import moneyImg from '@theme/img/head/money.png'
import CapitalModal from '../CapitalModal/CapitalModal.tsx'; import CapitalModal from '../CapitalModal/CapitalModal.tsx';
import RecordModal from '../RecordModal/RecordModal.tsx' import RecordModal from '../RecordModal/RecordModal.tsx'
import PackageModal from '../PackageModal/PackageModal.tsx'
import capitalImg from '../../static/capita.png' import capitalImg from '../../static/capita.png'
import recordImg from '../../static/record.png' import recordImg from '../../static/record.png'
import packImg from '../../static/packimg.png'
export default function BalanceHead() { export default function BalanceHead() {
const globalContext = useContext(GlobalContext); const globalContext = useContext(GlobalContext);
// const [isLoading, setIsLoading] = useState(false) // const [isLoading, setIsLoading] = useState(false)
@ -16,6 +19,8 @@ export default function BalanceHead() {
// 分账记录弹窗 // 分账记录弹窗
const [recordModal, setRecordModal] = useState(false) const [recordModal, setRecordModal] = useState(false)
// 套餐包使用详情弹窗
const [packageModal, setPackageModal] = useState(false)
return ( return (
<div className="head-item balance-head"> <div className="head-item balance-head">
<div className="label"> <div className="label">
@ -50,7 +55,7 @@ export default function BalanceHead() {
width: 68, width: 68,
height: 1, height: 1,
background: '#EAEAEA', background: '#EAEAEA',
marginLeft: 18 // marginLeft: 0
}}></div> }}></div>
<div className='moneyModal-title' onClick={() => { <div className='moneyModal-title' onClick={() => {
setRecordModal(true) setRecordModal(true)
@ -62,6 +67,22 @@ export default function BalanceHead() {
分账记录 分账记录
</div> </div>
</div> </div>
<div style={{
width: 68,
height: 1,
background: '#EAEAEA',
// marginLeft: 18
}}></div>
<div className='moneyModal-title' onClick={() => {
setPackageModal(true)
}}>
<img src={packImg} style={{ marginTop: 1 }} width={20} height={20} alt="" />
<div style={{
marginLeft: 5,
}}>
套餐包使用
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -82,6 +103,7 @@ export default function BalanceHead() {
}}>分账记录</div> }}>分账记录</div>
</Modal> */} </Modal> */}
<Modal title="资金流水" <Modal title="资金流水"
centered
footer={null} footer={null}
destroyOnClose destroyOnClose
open={capitalModal} open={capitalModal}
@ -95,6 +117,7 @@ export default function BalanceHead() {
</Modal> </Modal>
<Modal title="分账记录" <Modal title="分账记录"
centered
footer={null} footer={null}
destroyOnClose destroyOnClose
open={recordModal} open={recordModal}
@ -107,6 +130,20 @@ export default function BalanceHead() {
<RecordModal></RecordModal> <RecordModal></RecordModal>
</Modal> </Modal>
<Modal title="套餐包使用明细"
centered
footer={null}
destroyOnClose
open={packageModal}
width={1200}
onCancel={() => {
setPackageModal(false)
}}>
<PackageModal></PackageModal>
</Modal>
</div > </div >
) )
} }

11
src/components/balance/balance-head.css
View File

@ -28,8 +28,8 @@
display: none; display: none;
background-color: #ffffff; background-color: #ffffff;
position: absolute; position: absolute;
width: 120px; /* width: 120px; */
height: 100px; /* height: 100px; */
left: -50px; left: -50px;
top: 40px; top: 40px;
/* border: 1px solid red; */ /* border: 1px solid red; */
@ -40,8 +40,8 @@
} }
.moneyModal-box { .moneyModal-box {
width: 120px; /* width: 120px; */
height: 100px; /* height: 100px; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
@ -70,6 +70,9 @@
font-size: 16px; font-size: 16px;
color: #333333; color: #333333;
font-weight: 400; font-weight: 400;
padding:15px 20px ;
/* background-color: pink; */
width: 120px;
} }
.transparentBox{ .transparentBox{
background-color: transparent; background-color: transparent;

243
src/layout/head/Head.tsx
View File

@ -19,7 +19,9 @@ import BalanceHead from '../../components/balance/BalanceHead.tsx';
import RechargeHead from '../../components/recharge/RechargeHead.tsx'; import RechargeHead from '../../components/recharge/RechargeHead.tsx';
import { import {
// Empty, // Empty,
Dropdown, MenuProps, message, Modal, Space, Spin, Input, Table, Form, Button Dropdown, MenuProps, message, Modal, Space, Spin, Input,
// Table,
Form, Button
// Form, Button, InputNumber // Form, Button, InputNumber
} from "antd"; } from "antd";
// import { // import {
@ -30,16 +32,16 @@ import titleB from '../../static/Phone/titleB.png'
import line from '../../static/Phone/line.png' import line from '../../static/Phone/line.png'
import pack from '@theme/img/pack.png' import pack from '@theme/img/pack.png'
import PackAgeModal from '../../components/PackageModal/PackageModal.tsx'
// import pack from '@theme/pack.png' // import pack from '@theme/pack.png'
// import type { TableProps, FormProps } from 'antd'; // import type { TableProps, FormProps } from 'antd';
interface DataType { // interface DataType {
usericId: string; // usericId: string;
icPriceMaterial: number; // icPriceMaterial: number;
icPriceAll: number; // icPriceAll: number;
createTime: string; // createTime: string;
} // }
// interface icDataType { // interface icDataType {
// contactName: string;//联系人姓名 // contactName: string;//联系人姓名
// contactPhone: string;//联系人电话 // contactPhone: string;//联系人电话
@ -150,9 +152,9 @@ import ContactPeople from '../../components/ContactPeople/ContactPeople.tsx'
import inv from '../../static/inv.png' import inv from '../../static/inv.png'
import MyOrder from '../../components/myOrder/MyOrder.tsx' import MyOrder from '../../components/myOrder/MyOrder.tsx'
import NoticeModal from '../../components/NoticeModal/NoticeModal.tsx'; import NoticeModal from '../../components/NoticeModal/NoticeModal.tsx';
import type { // import type {
TableColumnsType, // TableColumnsType,
} from 'antd'; // } from 'antd';
// import { log } from 'console'; // import { log } from 'console';
// import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx' // import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx'
export default function Head() { export default function Head() {
@ -328,38 +330,38 @@ export default function Head() {
const [packloading, setPackloading] = useState(false) // const [packloading, setPackloading] = useState(false)
const [packList, setPackList] = useState<any[]>([]) //服务包列表 // const [packList, setPackList] = useState<any[]>([]) //服务包列表
const [packPage, setPackPage] = useState(1) //服务包分页 // const [packPage, setPackPage] = useState(1) //服务包分页
const [packTotal, setPackTotal] = useState(0) //服务包总数 // const [packTotal, setPackTotal] = useState(0) //服务包总数
// const [packageType, setPackageType] = useState('') // const [packageType, setPackageType] = useState('')
// 获取我得服务包信息 // 获取我得服务包信息
const getPickList = (page: number, packageType: string) => { // const getPickList = (page: number, packageType: string) => {
get<any>({ // get<any>({
messageApi, // messageApi,
url: `/api/proj/servicepkg/packageorder/listpage/self`, // url: `/api/proj/servicepkg/packageorder/listpage/self`,
config: { // config: {
params: { // params: {
page: page, // page: page,
rows: 10, // rows: 10,
packageType: packageType // packageType: packageType
} // }
}, // },
onBefore() { // onBefore() {
setPackloading(true) // setPackloading(true)
}, // },
onSuccess({ data }) { // onSuccess({ data }) {
setPackList(data.rows) // setPackList(data.rows)
setPackTotal(data.total) // setPackTotal(data.total)
}, // },
onFinally() { // onFinally() {
setPackloading(false) // setPackloading(false)
} // }
}) // })
} // }
// useEffect(() => { // useEffect(() => {
// console.log('路径',currentUrl); // console.log('路径',currentUrl);
@ -888,81 +890,81 @@ export default function Head() {
applyContactPhone: '', applyContactPhone: '',
applyContactCompany: '' applyContactCompany: ''
}) })
const packColumns: TableColumnsType<DataType> = [ // const packColumns: TableColumnsType<DataType> = [
{ // {
title: '序号', // title: '序号',
dataIndex: 'index', // dataIndex: 'index',
key: 'packageOrderId', // key: 'packageOrderId',
align: 'center', // align: 'center',
render: (_text, _record, index) => (packPage - 1) * 10 + index + 1, // 显示序号，从1开始 // render: (_text, _record, index) => (packPage - 1) * 10 + index + 1, // 显示序号，从1开始
}, // },
{ // {
title: '套餐名称', // title: '套餐名称',
dataIndex: 'packageName', // dataIndex: 'packageName',
key: 'packageOrderId', // key: 'packageOrderId',
// 居中显示 // // 居中显示
align: 'center', // align: 'center',
}, // },
// packageType // // packageType
{ // {
title: '套餐类型', // title: '套餐类型',
dataIndex: 'packageInfoAppDTO', // dataIndex: 'packageInfoAppDTO',
key: 'packageOrderId', // key: 'packageOrderId',
// 居中显示 // // 居中显示
align: 'center', // align: 'center',
render: (text) => { // render: (text) => {
return <div>{text.packageType == "ALL" ? '全托管' : '写材料'} </div> // return <div>{text.packageType == "ALL" ? '全托管' : '写材料'} </div>
} // }
}, // },
// { // // {
// title: '套餐类型', // // title: '套餐类型',
// dataIndex: 'packageInfoAppDTO', // // dataIndex: 'packageInfoAppDTO',
// key: 'packageOrderId', // // key: 'packageOrderId',
// // 居中显示 // // // 居中显示
// align: 'center', // // align: 'center',
// render: (text) => { // // render: (text) => {
// return <div>{text} </div> // // return <div>{text} </div>
// } // // }
// }, // // },
{ // {
title: '价格', // title: '价格',
dataIndex: 'packageTotalMoney', // dataIndex: 'packageTotalMoney',
key: 'packageOrderId', // key: 'packageOrderId',
// 居中显示 // // 居中显示
align: 'center', // align: 'center',
render: (text) => { // render: (text) => {
return <div>{text / 100}元</div> // return <div>{text / 100}元</div>
} // }
}, // },
{ // {
title: '剩余次数', // title: '剩余次数',
dataIndex: 'packageTotalSurplusCount', // dataIndex: 'packageTotalSurplusCount',
align: 'center', // align: 'center',
key: 'packageOrderId', // key: 'packageOrderId',
render: (text: number) => { // render: (text: number) => {
return <div>{text} </div> // return <div>{text} </div>
} // }
}, // },
{ // {
title: '总次数', // title: '总次数',
dataIndex: 'packageTotalCount', // dataIndex: 'packageTotalCount',
align: 'center', // align: 'center',
key: 'packageOrderId', // key: 'packageOrderId',
render: (text: any) => { // render: (text: any) => {
return <div>{text} </div> // return <div>{text} </div>
} // }
}, // },
{ // {
title: '下单时间', // title: '下单时间',
align: 'center', // align: 'center',
dataIndex: 'gmtCreate', // dataIndex: 'gmtCreate',
key: 'packageOrderId', // key: 'packageOrderId',
// render: (text: string) => { // // render: (text: string) => {
// return <div title={text} style={{ width: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{text}</div> // // return <div title={text} style={{ width: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{text}</div>
// } // // }
}, // },
]; // ];
// 优惠券弹窗 // 优惠券弹窗
// const [couponModal, setCouponModal] = useState(false) // const [couponModal, setCouponModal] = useState(false)
// const [belongArray,setBelongArray] = useState([]) // const [belongArray,setBelongArray] = useState([])
@ -1237,8 +1239,8 @@ export default function Head() {
onClick: () => { onClick: () => {
// setCouponModal(true) // setCouponModal(true)
setPackageModal(true) setPackageModal(true)
setPackPage(1); // setPackPage(1);
getPickList(1, '') // getPickList(1, '')
// setPackageType('') // setPackageType('')
} }
}, },
@ -1363,8 +1365,8 @@ export default function Head() {
}} }}
onClick={() => { onClick={() => {
setPackageModal(true) setPackageModal(true)
setPackPage(1); // setPackPage(1);
getPickList(1, '') // getPickList(1, '')
}} }}
> >
<img src={pack} width={19} height={19} alt="" /> <img src={pack} width={19} height={19} alt="" />
@ -1642,13 +1644,14 @@ export default function Head() {
destroyOnClose destroyOnClose
centered centered
open={packageModal} open={packageModal}
width={1000} width={1200}
footer={null} footer={null}
onCancel={() => { onCancel={() => {
setPackageModal(false) setPackageModal(false)
setPackPage(1); // setPackPage(1);
}}> }}>
<Spin tip="加载中..." spinning={packloading} > <PackAgeModal></PackAgeModal>
{/* <Spin tip="加载中..." spinning={packloading} >
<Table <Table
columns={packColumns} columns={packColumns}
dataSource={packList} dataSource={packList}
@ -1664,7 +1667,7 @@ export default function Head() {
}} }}
rowKey="packageOrderId" rowKey="packageOrderId"
/> />
</Spin> </Spin> */}
</Modal> </Modal>
<Modal title="邀请码" <Modal title="邀请码"
destroyOnClose destroyOnClose

4
src/request/api.ts
View File

@ -31,6 +31,10 @@ export const getInvoiceInfoByinvoiceRechargeId = (invoiceRechargeId: string) =>
// 修改开票信息 // 修改开票信息
export const updateInvoiceInfoByinvoiceRechargeId = (invoiceRechargeId: string, params: any) => request.put(`/operator-plugin/api/invoicerecharge/update/${invoiceRechargeId}`, params) export const updateInvoiceInfoByinvoiceRechargeId = (invoiceRechargeId: string, params: any) => request.put(`/operator-plugin/api/invoicerecharge/update/${invoiceRechargeId}`, params)
// 获取套餐包使用详情
export const getPackageDetail = (userId:string,packageOrderId:string,params:any) => request.get(`/operator-plugin/app/packageorderitem/listpagerelease/${userId}?packageOrderId=${packageOrderId}`, { params })
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

BIN
src/static/packimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB