411 lines
14 KiB
TypeScript
411 lines
14 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import './RefunModal.css'
|
||
import { Form, Button, Upload, message, Input, Modal, Table, Empty } from 'antd';
|
||
import type { TableColumnsType } from 'antd';
|
||
import { UploadOutlined } from '@ant-design/icons';
|
||
import { get, post, uploadFileUrl } from "../../util/AjaxUtils.ts";
|
||
// import { getMenuActive } from '../../util/cache.ts'
|
||
import { useDispatch } from 'react-redux'
|
||
const { Search } = Input;
|
||
const { TextArea } = Input;
|
||
interface DataType {
|
||
key: React.Key;
|
||
projName: string;
|
||
projContext: string;
|
||
gmtCreate: string;
|
||
projId: string,
|
||
applyContactName: string;
|
||
}
|
||
|
||
export default function RefunModal(props: any) {
|
||
const token = sessionStorage.getItem('token')
|
||
const columns: TableColumnsType<DataType> = [
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'index',
|
||
align: 'center',
|
||
width: 80,
|
||
render: (_text, _record, index) => (page - 1) * 20 + index + 1, // 显示序号，从1开始
|
||
},
|
||
{
|
||
title: '项目名称',
|
||
dataIndex: 'projName',
|
||
align: 'center',
|
||
|
||
render: (text: string) => <>{text}</>,
|
||
},
|
||
{
|
||
title: '所属者名称',
|
||
dataIndex: 'applyContactName',
|
||
align: 'center',
|
||
|
||
render: (text: string) => <>{text}</>,
|
||
},
|
||
{
|
||
title: '编号',
|
||
dataIndex: 'projContext',
|
||
align: 'center',
|
||
|
||
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
dataIndex: 'gmtCreate',
|
||
align: 'center',
|
||
|
||
},
|
||
];
|
||
|
||
|
||
const [messageApi, contextHolder] = message.useMessage();
|
||
// 上传附件
|
||
const [refunArray, setRefunArray] = useState<string[]>([]);
|
||
// const [selectedReason, setSelectedReason] = useState(''); //选择原因
|
||
|
||
// const handleReasonChange = (value: any) => {
|
||
// setSelectedReason(value);
|
||
// };
|
||
// 获取当前选择类型
|
||
// const type = getMenuActive()
|
||
const dispath = useDispatch()
|
||
// 选择项目得临时name
|
||
const [newprojName, setnewprojName] = useState('')
|
||
// 选择项目得name
|
||
const [projName, setProjName] = useState('')
|
||
// 选择得项目临时id
|
||
const [newprojId, setnewProjId] = useState('')
|
||
// 选择 项目的id
|
||
const [projId, setProjId] = useState('')
|
||
//默认选择得项目
|
||
const [selectedRowKeys, setselectedRowKeys] = useState<string[]>([])
|
||
// 分页
|
||
const [page, setPage] = useState(1)
|
||
const [total, setTotal] = useState(0)
|
||
// 搜索关键字
|
||
const [keywords, setKeywords] = useState('')
|
||
const [refunDataArray, setRefunDataArray] = useState<any[]>([]) //未退款项目数组
|
||
// 选择项目弹窗
|
||
const [projModal, setProjModal] = useState(false)
|
||
const [isDisabled, setIsDisabled] = useState(false) //提交按钮是否禁用
|
||
const [form] = Form.useForm<any>();
|
||
|
||
// 关键字搜索
|
||
const handleSearch = (value: string) => {
|
||
setKeywords(value)
|
||
}
|
||
const handleChange = (e: any) => {
|
||
if (e.target.value == '') {
|
||
setKeywords('')
|
||
}
|
||
}
|
||
// 提交表单
|
||
const onFinish = (values: any) => {
|
||
// console.log('Form values:', values);
|
||
dispath({
|
||
type: 'newRefun',
|
||
val: true
|
||
})
|
||
post<any>({
|
||
messageApi,
|
||
url: `/api/proj/refund/apply/save`,
|
||
body: {
|
||
projId: projId,
|
||
refundReason: values.other,
|
||
refundVoucher: refunArray.join(',')
|
||
},
|
||
onBefore() {
|
||
setIsDisabled(true)
|
||
},
|
||
onSuccess() {
|
||
messageApi.success('提交成功')
|
||
setIsDisabled(true)
|
||
setTimeout(() => {
|
||
props.closeModal()
|
||
}, 500)
|
||
|
||
getData()
|
||
|
||
},
|
||
onFinally() {
|
||
setIsDisabled(false)
|
||
}
|
||
})
|
||
};
|
||
const getData = () => {
|
||
get({
|
||
messageApi,
|
||
url: `/api/proj/refund/apply/listpage/self`,
|
||
config: {
|
||
params: {
|
||
page: 1,
|
||
rows: 20,
|
||
applyStatus: ''
|
||
}
|
||
},
|
||
onSuccess(data: any) {
|
||
dispath({
|
||
type: 'upRefunArray',
|
||
val: data.data.rows
|
||
})
|
||
dispath({
|
||
type: 'upRefunTotal',
|
||
val: data.data.total
|
||
})
|
||
}
|
||
})
|
||
}
|
||
// 获取未退款项目
|
||
const getRefunData = () => {
|
||
get({
|
||
messageApi,
|
||
url: `/api/proj/refund/apply/listpage-proj-unapply/self`,
|
||
config: {
|
||
params: {
|
||
page: page,
|
||
rows: 20,
|
||
keywords
|
||
}
|
||
},
|
||
onBefore() {
|
||
|
||
|
||
},
|
||
onSuccess(data: any) {
|
||
setRefunDataArray(data.data.rows)
|
||
setTotal(data.data.total)
|
||
},
|
||
onFinally() {
|
||
|
||
|
||
},
|
||
})
|
||
}
|
||
useEffect(() => {
|
||
getRefunData()
|
||
}, [page, keywords])
|
||
return (
|
||
<div className='refunModal'>
|
||
{contextHolder}
|
||
<Form
|
||
name="Form"
|
||
form={form}
|
||
onFinish={onFinish}
|
||
initialValues={{ softWare: '' }}
|
||
style={{ maxWidth: 600 }}
|
||
>
|
||
<div className='refunModal-item'>
|
||
<div className='refunModal-title'>
|
||
退款软著<span className='refunModal-red'>*</span>
|
||
</div>
|
||
<div className='refunInput'>
|
||
|
||
<Form.Item
|
||
name="title"
|
||
rules={[{ required: true, message: '请选择一个软著!' }]}
|
||
>
|
||
<Input style={{
|
||
width: 405,
|
||
height: 46,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
placeholder="选择需要退款的软著"
|
||
disabled
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
<div className='refunInput-button' onClick={() => {
|
||
setProjModal(true)
|
||
setKeywords('')
|
||
setPage(1)
|
||
getRefunData()
|
||
}}>
|
||
选择
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div className='refunModal-item'>
|
||
<div className='refunModal-title'>
|
||
退款原因<span className='refunModal-red'>*</span>
|
||
</div>
|
||
<Form.Item
|
||
name="other"
|
||
rules={[{ required: true, message: '请输入退款原因' }]}
|
||
>
|
||
<TextArea
|
||
placeholder="输入退款原因"
|
||
style={{ height: 120, resize: 'none', width: 405 }}
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
<div className='refunModal-item'>
|
||
<div className='refunModal-title'>
|
||
退款凭证<span className='refunModal-red'>*</span>
|
||
</div>
|
||
<div style={{ width: 405, }}>
|
||
<Form.Item
|
||
name="img"
|
||
// label="退款软著"
|
||
valuePropName="fileList"
|
||
getValueFromEvent={(e: any) => {
|
||
if (e.file.status === 'done') {
|
||
// console.log(e);
|
||
|
||
refunArray.push(e.file.response.data.fileId);
|
||
setRefunArray(refunArray);
|
||
|
||
}
|
||
if (e.file.status === 'removed') {
|
||
const idArray = refunArray.filter(item => item != e.file.response.data.fileId);
|
||
setRefunArray(idArray);
|
||
}
|
||
return e.fileList;
|
||
}}
|
||
rules={[{ required: true, message: '请上传补正通知书' }]}
|
||
>
|
||
<Upload
|
||
name="file"
|
||
action={uploadFileUrl()}
|
||
// headers={{ 'X-USER-ID': DevUserId }}
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
beforeUpload={(file) => {
|
||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf';
|
||
// const isPng = file.type == 'application/pdf'
|
||
if (!isJpgOrPng) {
|
||
message.error('只能上传 JPG/PNG/PDF 格式文件!');
|
||
return Upload.LIST_IGNORE; // 不允许上传非
|
||
}
|
||
return isJpgOrPng;
|
||
}}
|
||
// listType="picture-card"
|
||
>
|
||
|
||
<Button icon={<UploadOutlined />} style={{ marginTop: 2 }}>上传补正通知书</Button>
|
||
</Upload>
|
||
</Form.Item>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
color: '#FF0000',
|
||
marginLeft: 10
|
||
}}
|
||
>*上传完整的补正通知书或者完整的补正通知书的截图，要求右上方的流水号和右下方的补正通知书的日期都得完整显示</div>
|
||
<Form.Item>
|
||
<div className='refunModal-btn'>
|
||
<Button type="primary" htmlType="submit" style={{
|
||
width: 273,
|
||
height: 52
|
||
}}
|
||
disabled={isDisabled}
|
||
>
|
||
提交申请
|
||
</Button>
|
||
</div>
|
||
</Form.Item>
|
||
</Form>
|
||
|
||
<Modal title="选择退款项目"
|
||
destroyOnClose
|
||
okText="确认"
|
||
cancelText="取消"
|
||
|
||
open={projModal}
|
||
|
||
onOk={
|
||
|
||
() => {
|
||
if (newprojId) {
|
||
setProjName(newprojName)
|
||
setProjId(newprojId)
|
||
setProjModal(false)
|
||
setselectedRowKeys([newprojId])
|
||
form.setFieldsValue({
|
||
title: newprojName
|
||
});
|
||
} else {
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: '请选择要退款项目'
|
||
})
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
width={1220}
|
||
onCancel={() => {
|
||
setselectedRowKeys([projId])
|
||
setnewProjId(projId)
|
||
setnewprojName(projName)
|
||
setProjModal(false)
|
||
|
||
|
||
}}>
|
||
<Search placeholder="输入项目名称"
|
||
onSearch={handleSearch}
|
||
onChange={handleChange}
|
||
style={{
|
||
width: '200px',
|
||
height: '31px',
|
||
marginBottom: 15
|
||
}}
|
||
allowClear
|
||
/>
|
||
<Table
|
||
rowSelection={{
|
||
selectedRowKeys: selectedRowKeys,
|
||
type: 'radio',
|
||
// ...rowSelection,
|
||
onChange: (_selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
|
||
console.log('selectedRows: ', selectedRows);
|
||
setselectedRowKeys([selectedRows[0].projId])
|
||
setnewProjId(selectedRows[0].projId)
|
||
setnewprojName(selectedRows[0].projName)
|
||
|
||
},
|
||
}}
|
||
columns={columns}
|
||
dataSource={refunDataArray}
|
||
rowKey={'projId'}
|
||
pagination={
|
||
{
|
||
pageSize: 20,
|
||
total: total,
|
||
onChange: (currentPage) => {
|
||
setPage(currentPage);
|
||
},
|
||
showSizeChanger: false,
|
||
current: page
|
||
|
||
}
|
||
|
||
}
|
||
locale={{
|
||
emptyText: <Empty
|
||
description="暂无数据"
|
||
/>,
|
||
}}
|
||
scroll={{ y: 500 }}
|
||
onRow={(record: DataType) => {
|
||
return {
|
||
onClick: (event: React.MouseEvent<HTMLTableRowElement>) => {
|
||
// 阻止默认的行点击事件，以避免选中行时触发其他操作
|
||
event.stopPropagation();
|
||
// 更新选中的行
|
||
setselectedRowKeys([record.projId]);
|
||
setnewProjId(record.projId);
|
||
setnewprojName(record.projName);
|
||
},
|
||
};
|
||
}}
|
||
|
||
/>
|
||
|
||
</Modal>
|
||
</div>
|
||
)
|
||
}
|