514 lines
19 KiB
TypeScript
514 lines
19 KiB
TypeScript
// import React from 'react'
|
||
import { useEffect, useState } from 'react'
|
||
// import './RefunModal.css'
|
||
import { Form, Select, Button, Upload, message, Input, Modal, Table, Empty } from 'antd';
|
||
import type { TableColumnsType } from 'antd';
|
||
const { Search } = Input;
|
||
import { UploadOutlined } from '@ant-design/icons';
|
||
import {
|
||
// DevUserId
|
||
get, post, uploadFileUrl } from "../../util/AjaxUtils.ts";
|
||
// import { getMenuActive } from '../../util/cache.ts'
|
||
import { useDispatch } from 'react-redux'
|
||
const { TextArea } = Input;
|
||
interface DataType {
|
||
key: React.Key;
|
||
projName: string;
|
||
projContext: string;
|
||
gmtCreate: string;
|
||
projId: string
|
||
}
|
||
export default function CorrectionModal(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: 'approvedCount',
|
||
align: 'center',
|
||
width: 130,
|
||
render: (text) => <>{text}</>, // 显示序号，从1开始
|
||
},
|
||
{
|
||
title: '所属者名称',
|
||
dataIndex: 'applyContactName',
|
||
align: 'center',
|
||
|
||
render: (text: string) => <>{text}</>,
|
||
},
|
||
{
|
||
title: '编号',
|
||
dataIndex: 'projContext',
|
||
align: 'center',
|
||
|
||
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
dataIndex: 'gmtCreate',
|
||
align: 'center',
|
||
|
||
},
|
||
];
|
||
|
||
const [messageApi, contextHolder] = message.useMessage();
|
||
// 选择项目得临时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 [projModal, setProjModal] = useState(false)
|
||
// 上传附件
|
||
const [correctionArray, setCorrectionArray] = useState<string[]>([]);
|
||
// const [selectedReason, setSelectedReason] = useState(''); //选择原因
|
||
|
||
// const handleReasonChange = (value: any) => {
|
||
// setSelectedReason(value);
|
||
// };
|
||
// 获取当前选择类型
|
||
// const type = getMenuActive() == 'Correction-PENDING' ? 'PENDING' : getMenuActive() == 'Correction-APPROVED' ? 'APPROVED' : getMenuActive() == 'Correction-REJECTED' ? 'REJECTED' : getMenuActive() == 'Correction-CANCELED' ? 'CANCELED' : ''
|
||
const dispath = useDispatch()
|
||
const [correctionDataArray, setCorrectionDataArray] = useState<any[]>([]) //未补正项目
|
||
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) => {
|
||
dispath({
|
||
type: 'newCorrection',
|
||
val: true
|
||
})
|
||
// console.log('Form values:', values);
|
||
|
||
// console.log(refunArray);
|
||
|
||
// console.log(values);
|
||
post<any>({
|
||
messageApi,
|
||
url: `/api/proj/correction/apply/save`,
|
||
body: {
|
||
projId: projId,
|
||
correctionReason: values.other,
|
||
correctionVoucher: correctionArray.join(','),
|
||
correctionType: values.correctionType
|
||
},
|
||
onBefore() {
|
||
setIsDisabled(true)
|
||
},
|
||
onSuccess() {
|
||
messageApi.success('提交成功')
|
||
setIsDisabled(true)
|
||
setTimeout(() => {
|
||
props.closeModal()
|
||
|
||
}, 500)
|
||
|
||
getData()
|
||
|
||
|
||
|
||
},
|
||
onFinally() {
|
||
setIsDisabled(false)
|
||
}
|
||
})
|
||
};
|
||
const getData = () => {
|
||
get({
|
||
messageApi,
|
||
url: `/api/proj/correction/apply/listpage/self`,
|
||
config: {
|
||
params: {
|
||
page: 1,
|
||
rows: 20,
|
||
applyStatus: ''
|
||
}
|
||
},
|
||
onSuccess(data: any) {
|
||
// console.log('更新');
|
||
|
||
dispath({
|
||
type: 'upCorrectionArray',
|
||
val: data.data.rows
|
||
})
|
||
dispath({
|
||
type: 'upCorrectionTotal',
|
||
val: data.data.total
|
||
})
|
||
|
||
|
||
}
|
||
})
|
||
}
|
||
// 获取未补正项目
|
||
const getCorrectionData = () => {
|
||
get({
|
||
messageApi,
|
||
url: `/api/proj/correction/apply/listpage-proj-unapply/self`,
|
||
config: {
|
||
params: {
|
||
page: page,
|
||
rows: 20,
|
||
keywords
|
||
}
|
||
},
|
||
onBefore() {
|
||
|
||
|
||
},
|
||
onSuccess(data: any) {
|
||
// console.log(data.data.rows);
|
||
// const newArray = (data.data).map((item: { projId: any; projName: any; }) => ({
|
||
// value: item.projId,
|
||
// label: item.projName
|
||
// }))
|
||
setCorrectionDataArray(data.data.rows)
|
||
setTotal(data.data.total)
|
||
|
||
},
|
||
onFinally() {
|
||
|
||
|
||
},
|
||
})
|
||
}
|
||
|
||
useEffect(() => {
|
||
getCorrectionData()
|
||
|
||
|
||
}, [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)
|
||
getCorrectionData()
|
||
}}>
|
||
选择
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='refunModal-item'>
|
||
<div className='refunModal-title'>
|
||
补正种类<span className='refunModal-red'>*</span>
|
||
</div>
|
||
<Form.Item
|
||
name="correctionType"
|
||
// label="退款软著"
|
||
rules={[{ required: true, message: '请选择补正种类' }]}
|
||
>
|
||
<Select
|
||
placeholder="选择类型"
|
||
options={[
|
||
{ value: 'MANUAL', label: '操作手册' },
|
||
{ value: 'CODE', label: '代码' },
|
||
{ value: 'ALL', label: '操作手册+代码' },
|
||
]}
|
||
style={{
|
||
width: 405,
|
||
height: 46,
|
||
}}
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
{/* <div className='refunModal-item'>
|
||
<div className='refunModal-title'>
|
||
退款原因<span className='refunModal-red'>*</span>
|
||
</div>
|
||
<Form.Item
|
||
name="reason"
|
||
// label="退款软著"
|
||
rules={[{ required: true, message: '请选择退款原因' }]}
|
||
>
|
||
<Select
|
||
placeholder="选择退款原因"
|
||
options={[
|
||
{ value: '没钱', label: '没钱' },
|
||
{ value: '不想买', label: '不想买' },
|
||
{ value: '其他', label: '其他' },
|
||
]}
|
||
style={{
|
||
width: 405,
|
||
height: 46,
|
||
}}
|
||
onChange={handleReasonChange}
|
||
/>
|
||
</Form.Item>
|
||
</div> */}
|
||
{/* {selectedReason === '其他' && (
|
||
<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>
|
||
<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>
|
||
<Form.Item
|
||
name="other"
|
||
// label="退款软著"
|
||
rules={[{ required: true, message: '请输入退款原因' }]}
|
||
>
|
||
<TextArea
|
||
// showCount
|
||
// maxLength={100}
|
||
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') {
|
||
correctionArray.push(e.file.response.data.fileId);
|
||
setCorrectionArray(correctionArray);
|
||
}
|
||
if (e.file.status === 'removed') {
|
||
const idArray = correctionArray.filter(item => item != e.file.response.data.fileId);
|
||
setCorrectionArray(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 isPdf = 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={correctionDataArray}
|
||
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>
|
||
)
|
||
}
|