system-copyright-react/src/route/proj/edit/ProjEditStep2Show.tsx

1248 lines
63 KiB
TypeScript
Raw Normal View History

2024-03-26 11:54:30 +08:00
import './proj-edit-step.css';
2024-05-28 18:00:42 +08:00
import { Radio, Cascader, Col, DatePicker, message, Modal, Row, Spin, Select, Table, } from "antd";
2024-05-21 11:21:34 +08:00
import { FolderAddOutlined } from '@ant-design/icons';
2024-03-26 11:54:30 +08:00
import locale from 'antd/es/date-picker/locale/zh_CN';
2024-05-28 18:00:42 +08:00
import { useParams } from "react-router-dom";
2024-05-21 11:21:34 +08:00
import { useEffect, useState } from "react";
2024-05-28 18:00:42 +08:00
import { get, put, post, downloadUrl } from "../../../util/AjaxUtils.ts";
2024-05-21 11:21:34 +08:00
import { Button, Form, Input } from 'antd';
import { AxiosResponse } from "axios";
import dayjs, { Dayjs } from 'dayjs';
import type { SearchProps } from 'antd/es/input/Search';
// import type { TableColumnsType } from 'antd';
import { ITree } from "../../../interfaces/dict/IDict.ts";
2024-03-26 11:54:30 +08:00
2024-05-21 11:21:34 +08:00
const { Search } = Input;
const { Column } = Table;
// 基本信息文件类型
2024-03-26 11:54:30 +08:00
type FieldType = {
projSubName: string;
projVersion: string;
projDevCompleteDate: Dayjs;
companyName: string;
companyNameEn: string;
};
2024-05-21 11:21:34 +08:00
// 所属人信息类型
type BelongPeopleType = {
authorName: string;
authorIdCardType: string;
authorIdCard: string;
authorNation: string;
authorProvince: string;
authorEstablishDate: Dayjs;
authorType: string;
nameEn: string;
isCrcAccount: string;
crcAccountPassword: string;
crcAccountUsername: string;
}
type ContactType = {
csaNo: string
gmtCreate: string
gmtModified: string
name: string
phone: string
projContactId: string
email: string
}
// interface DataType {
// key: React.Key;
// name: string;
// age: number;
// address: string;
// select: boolean;
// }
interface Option {
value?: string | number | null;
label: React.ReactNode;
children?: Option[];
isLeaf?: boolean;
id: string;
pId: string;
}
2024-03-26 11:54:30 +08:00
2024-05-21 11:21:34 +08:00
export default function ProjEditStep2() {
2024-05-28 18:00:42 +08:00
// const nav = useNavigate();
2024-03-26 11:54:30 +08:00
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
2024-05-21 11:21:34 +08:00
const [formInfo] = Form.useForm<FieldType>();
const [formBelong] = Form.useForm<BelongPeopleType>();
const [formContact] = Form.useForm<ContactType>()
const [loading, setLoading] = useState<boolean>(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [isNewBelongOpen, setIsNewBelongOpen] = useState(false)
const [isContantOpen, steIsContantOpen] = useState(false)
2024-05-28 18:00:42 +08:00
const height = window.innerHeight - 200;
2024-03-26 11:54:30 +08:00
const dateFormat = 'YYYY年MM月DD日';
2024-05-21 11:21:34 +08:00
// 页面显示的所属者信息
const [authorName, setauthorName] = useState('') //所属人姓名
const [authorIdCardType, setauthorIdCardType] = useState('') //所属人证件类型
const [authorIdCard, setauthorIdCard] = useState('') //所属人证件号
const [authorType, setauthorType] = useState('') //所属人类型
const [authorNameEn, setauthorNameEn] = useState('') //所属人英文名
const [authorProvinceCity, setauthorProvinceCity] = useState('') //所属人省市
const [authorCrcAccount, setauthorCrcAccount] = useState(0) //是否给账号 0 给 1 不给
const [authorCrcAccountPassword, setauthorCrcAccountPassword] = useState('') //密码
const [authorCrcAccountUsername, setauthorCrcAccountUsername] = useState('') //账号
// 从基本信息中获取到的两个表格默认选择的id 所属者id 联系人id
const [authorId, setAuthorId] = useState('') //所属人id
const [applyConcatId, setApplyConcatId] = useState('') //联系人id
const [applyContactCsaNo, setapplyContactCsaNo] = useState('') //客服编号
const [applyContactEmail, setapplyContactEmail] = useState('') //联系人邮箱
const [applyContactName, setapplyContactName] = useState('') //联系人姓名
const [applyContactPhone, setapplyContactPhone] = useState('') //联系人手机
// 设置所属者more你选中的行
// const [selectedRowKeys, setSelectedRowKeys] = useState<BelongDataType[]>([]);
// 所属者搜索关键字
const [keywords, setKeyWords] = useState('')
const [type, setType] = useState('')
// 表格第几行数据
// const [clom, setClom] = useState('')
// 著作人搜索
const belongPeopleSearch: SearchProps['onSearch'] = (value, _e, info) => (
console.log(info?.source, value),
setKeyWords(value),
getSearchProjOwnerList(value, type)
);
// 申请人信息搜索 applicantPeopleSearch
const applicantPeopleSearch: SearchProps['onSearch'] = (value, _e, info) => (
console.log(info?.source, value),
// alert(value),
getSearchProjContactList(value)
);
// 表格相关
// rowSelection object indicates the need for row selection
// 所属者表格选择触发
const belongRowSelection = {
// selectedRowKeys: React.Key[]
onChange: (selectedRowKeys: React.Key[], selectedRows: BelongDataType[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
setauthorName(selectedRows[0].name)
setauthorIdCardType(selectedRows[0].idCardType)
setauthorIdCard(selectedRows[0].idCardNo)
setauthorType(selectedRows[0].type)
setauthorNameEn(selectedRows[0].nameEn)
setauthorProvinceCity(selectedRows[0].provinceCity)
setauthorCrcAccount(selectedRows[0].isCrcAccount)
setauthorCrcAccountPassword(selectedRows[0].crcAccountPassword)
setauthorCrcAccountUsername(selectedRows[0].crcAccountUsername)
setAuthorId(selectedRows[0].projOwnerId)
// setClom(String(selectedRowKeys))
// setbelongselectedKeys(selectedRowKeys)
},
};
// 联系人表格选择触发
const ContantRowSelection = {
// selectedRowKeys: React.Key[]
onChange: (selectedRowKeys: React.Key[], selectedRows: ContactDataType[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
setApplyConcatId(selectedRows[0].projContactId)
setapplyContactCsaNo(selectedRows[0].csaNo)
setapplyContactEmail(selectedRows[0].email)
setapplyContactName(selectedRows[0].name)
setapplyContactPhone(selectedRows[0].phone)
},
};
// 所属人表格数据
const [tableBelongData, setTableBelongData] = useState<BelongDataType[]>([])
// 联系人表格数据
const [tableContactData, setTableContactData] = useState<ContactDataType[]>([])
// const selectedKeys = data.filter(item => item.select).map(item => item.key);
// console.log('selectedKeys:', selectedKeys);
// 是否提供中国版账号
// 所属者id 关键字
2024-05-28 18:00:42 +08:00
const [projOwnerId,] = useState('')
2024-05-21 11:21:34 +08:00
// 联系人id 关键字
2024-05-28 18:00:42 +08:00
const [contactId,] = useState('')
2024-05-21 11:21:34 +08:00
// 所属者弹窗数据
const [belongTitle, setbelongTitle] = useState('')
const [areaArray, setAreaArray] = useState<Option[]>([]);
const listArea = (pId: string) => {
return new Promise<ITree[]>((resolve) => {
get<ITree[]>({
messageApi,
url: '/api/area/list-area-ztree',
config: {
params: {
id: pId
}
},
onSuccess({ data }) {
resolve(data);
}
})
})
}
// 联系热弹窗数据
const [contactTitle, setContactTitle] = useState('')
// 著作人表单信息 点击确定
const handleOk = () => {
formBelong.validateFields().then(() => {
// 如果验证通过,则执行确认操作
// 这里可以放置你的确认操作逻辑
if (belongTitle === '编辑所属者') {
upProjOwner()
}
if (belongTitle === '创建所属者') {
newProjOwner()
}
// 关闭 弹窗
// setIsNewBelongOpen(false)
// 初始化数据
formBelong.resetFields(); // 重置表单字段为初始值
}).catch(() => {
// 如果验证不通过,可以根据需要处理错误信息
// (errorInfo);
});
};
// 联系人人表单信息 点击确定
const contactHandleOk = () => {
// alert('联系热确定')
formContact.validateFields().then(() => {
// 如果验证通过,则执行确认操作
// 这里可以放置你的确认操作逻辑
if (contactTitle === '编辑联系人') {
upContact()
}
if (contactTitle === '创建联系人') {
newContact()
}
// 关闭 弹窗
// setIsNewBelongOpen(false)
// 初始化数据
formContact.resetFields(); // 重置表单字段为初始值
}).catch(() => {
// 如果验证不通过,可以根据需要处理错误信息
// (errorInfo);
});
};
// const [belongselectedKeys,setbelongselectedKeys] = useState(tableBelongData.filter(item => item.projOwnerId === authorId).map(item => item.projOwnerId));
// 获取页面基本信息信息
const getEditstep = () => {
2024-03-26 11:54:30 +08:00
get({
messageApi,
url: `/api/proj/get/edit-step2/${pathParams.projId}`,
2024-05-21 11:21:34 +08:00
onSuccess({ data }: AxiosResponse) {
// 获取默认所属人信息
setauthorName(data.authorName)
setauthorIdCardType(data.authorIdCardType)
setauthorIdCard(data.authorIdCard)
setauthorType(data.authorType)
setauthorNameEn(data.authorNameEn)
setauthorProvinceCity(data.authorProvinceCity)
setauthorCrcAccount(data.authorCrcAccount)
setauthorCrcAccountPassword(data.authorCrcAccountPassword)
setauthorCrcAccountUsername(data.authorCrcAccountUsername)
setAuthorId(data.authorId)
// 默认联系人信息
setApplyConcatId(data.applyContactId)
setapplyContactName(data.applyContactName)
setapplyContactPhone(data.applyContactPhone)
setapplyContactCsaNo(data.applyContactCsaNo)
setapplyContactEmail(data.applyContactEmail)
console.log('基本信息', data);
setAuthorId(data.authorId)
setApplyConcatId(data.applyContactId)
formInfo.setFieldsValue({
2024-03-26 11:54:30 +08:00
projSubName: data.projSubName,
projVersion: data.projVersion,
2024-05-21 11:21:34 +08:00
projDevCompleteDate: data.projDevCompleteDate ? dayjs(data.projDevCompleteDate, 'YYYY-MM-DD') : '',
2024-03-26 11:54:30 +08:00
companyName: data.companyName,
companyNameEn: data.companyNameEn,
})
}
})
2024-05-21 11:21:34 +08:00
}
// 获取所属者表格
const getProjOwnerList = () => {
get({
messageApi,
url: `/api/proj-owner/list/self`,
onSuccess({ data }: AxiosResponse) {
console.log('所属者表格', data);
setTableBelongData(data)
// const selectBelongArray = data.filter(item => item.name === authorName)
// console.log('嘻嘻',selectBelongArray);
// setSelectedRowKeys(selectBelongArray)
2024-05-28 18:00:42 +08:00
2024-05-21 11:21:34 +08:00
}
})
}
// 获取联系人表格
const getProjContactList = () => {
get({
messageApi,
url: `/api/proj-contact/list/self`,
onSuccess({ data }: AxiosResponse) {
console.log('联系人表格', data);
// setTableBelongData(data)
setTableContactData(data)
}
})
}
// 获取所属表格 带搜索
const getSearchProjOwnerList = (keywords: any, type: any) => {
get({
messageApi,
url: `/api/proj-owner/list/self?keywords=${keywords}&type=${type}`,
onSuccess({ data }: AxiosResponse) {
console.log('搜索所属者表格', data);
setTableBelongData(data)
}
})
}
// 获取联系人表格 带搜索
const getSearchProjContactList = (keywords: any) => {
get({
messageApi,
url: `/api/proj-contact/list/self?keywords=${keywords}`,
onSuccess({ data }: AxiosResponse) {
// console.log('联系人表格', data);
// setTableBelongData(data)
setTableContactData(data)
}
})
}
// 编辑所属者
const upProjOwner = () => {
const crcAccountPassword = Number(formBelong.getFieldValue('isCrcAccount')) == 1 ? formBelong.getFieldValue('crcAccountPassword') : ''
const crcAccountUsername = Number(formBelong.getFieldValue('isCrcAccount')) == 1 ? formBelong.getFieldValue('crcAccountUsername') : ''
put({
messageApi,
url: `/api/proj-owner/update/${projOwnerId}`,
body: {
crcAccountPassword: crcAccountPassword,
crcAccountUsername: crcAccountUsername,
idCardNo: formBelong.getFieldValue('authorIdCard'),
idCardType: formBelong.getFieldValue('authorIdCardType'),
isCrcAccount: Number(formBelong.getFieldValue('isCrcAccount')),
name: formBelong.getFieldValue('authorName'),
nameEn: formBelong.getFieldValue('nameEn') || '',
provinceCity: formBelong.getFieldValue('authorProvince').join(','),
type: formBelong.getFieldValue('authorType'),
},
onBefore() {
},
onSuccess() {
// console.log(data);
// alert('编辑成功')
messageApi.open({
type: 'success',
content: '编辑成功'
})
getProjOwnerList()
setIsNewBelongOpen(false)
},
onFinally() {
}
})
}
// 创建所属者
const newProjOwner = () => {
const crcAccountPassword = Number(formBelong.getFieldValue('isCrcAccount')) == 1 ? formBelong.getFieldValue('crcAccountPassword') : ''
const crcAccountUsername = Number(formBelong.getFieldValue('isCrcAccount')) == 1 ? formBelong.getFieldValue('crcAccountUsername') : ''
post({
messageApi,
url: '/api/proj-owner/save',
body: {
crcAccountPassword: crcAccountPassword,
crcAccountUsername: crcAccountUsername,
idCardNo: formBelong.getFieldValue('authorIdCard'),
idCardType: formBelong.getFieldValue('authorIdCardType'),
isCrcAccount: Number(formBelong.getFieldValue('isCrcAccount')),
name: formBelong.getFieldValue('authorName'),
nameEn: formBelong.getFieldValue('nameEn'),
provinceCity: formBelong.getFieldValue('authorProvince').join(','),
type: formBelong.getFieldValue('authorType'),
},
onBefore() {
},
onSuccess() {
messageApi.success('提交成功')
getProjOwnerList()
setIsNewBelongOpen(false)
},
onFinally() {
}
})
}
// 客服二维码
const [imgUrl, setImgUrl] = useState('')
// 点击创建联系热人获取随机客服
const getCas = () => {
get({
messageApi,
url: `/api/csa/get`,
onSuccess({ data }: AxiosResponse) {
console.log('随机客服信息二维码', data.casQrCode);
formContact.setFieldsValue({
csaNo: data.csaNo
});
if (data.casQrCode) {
const imgUrl = downloadUrl(data.casQrCode);
console.log('图片地址', imgUrl);
setImgUrl(imgUrl)
}
}
})
}
// 创建联系人
const newContact = () => {
post({
messageApi,
url: '/api/proj-contact/save',
body: {
csaNo: formContact.getFieldValue('csaNo'),
name: formContact.getFieldValue('name'),
phone: formContact.getFieldValue('phone'),
email: formContact.getFieldValue('email'),
},
onBefore() {
},
onSuccess() {
messageApi.success('提交成功')
getProjContactList()
steIsContantOpen(false)
},
onFinally() {
}
})
}
// 编辑联系人
const upContact = () => {
put({
messageApi,
url: `/api/proj-contact/update/${contactId}`,
body: {
csaNo: formContact.getFieldValue('csaNo'),
name: formContact.getFieldValue('name'),
phone: formContact.getFieldValue('phone'),
email: formContact.getFieldValue('email'),
},
onBefore() {
},
onSuccess() {
// console.log(data);
// alert('编辑成功')
messageApi.open({
type: 'success',
content: '编辑成功'
})
getProjContactList()
steIsContantOpen(false)
},
onFinally() {
}
})
}
useEffect(() => {
getEditstep()
getProjOwnerList()
getProjContactList()
listArea('0').then(data => {
const options: Option[] = data.map(item => {
return {
value: item.name,
label: item.name,
isLeaf: !item.isParent,
id: item.id,
pId: item.pId
}
})
setAreaArray(options);
});
2024-03-26 11:54:30 +08:00
}, [])
return (
<>
2024-05-21 11:21:34 +08:00
<div style={{ marginTop: '17px', height: `${height}px`, overflow: 'auto', background: 'var(--color-light)', position: 'relative' }}>
{contextHolder}
{/* <Breadcrumb
2024-03-26 11:54:30 +08:00
items={[
{title: <Link to={'/'}></Link>},
{title: <Link to={'/proj-create'}></Link>},
2024-04-12 18:18:14 +08:00
{title: <a onClick={() => {nav(-1)}}></a>},
2024-03-26 11:54:30 +08:00
{title: '基本信息'},
]}
2024-05-12 07:45:51 +08:00
/> */}
2024-05-21 11:21:34 +08:00
<div style={{ height: '100%', marginBottom: '40px', background: 'var(--color-light)' }}>
<div className="form-container" >
<div className='Step-title'>
<div className='Step-titlel'></div>
<div className='Step-titler'></div>
</div>
<div className="form-body">
<Form
name="Info"
form={formInfo}
layout="vertical"
labelCol={{ span: 8 }}
wrapperCol={{ span: 24 }}
style={{}}
onFinish={() => {
setIsEditModalOpen(true);
}}
autoComplete="off"
disabled
>
<Row gutter={15}>
<div className='projNameInt'>
<div style={{ display: 'flex' }}>
<div className='projTitle '> :</div>
<Form.Item<FieldType>
// label="项目简称"
name="projSubName"
rules={[{ required: false, message: '请输入项目简称' }]}
>
<Input
style={{ height: '50px', width: '411px', fontSize: '16px' }}
placeholder="请输入项目简称" />
</Form.Item>
</div>
<div style={{ display: 'flex' }}>
<div className='projTitle ' style={{ marginLeft: '112px' }}><span className='redicon'>*</span> :</div>
<Form.Item<FieldType>
// label="开发完成时间"
name="projDevCompleteDate"
rules={[{ required: true, message: '请输入开发完成时间' }]}
>
<DatePicker placeholder="请选择开发完成日期"
format={dateFormat}
locale={locale}
// style={{ width: '100%' }}
style={{ height: '50px', width: '411px', fontSize: '16px' }}
/>
</Form.Item>
</div>
</div>
</Row>
<Row gutter={15}>
<div style={{ display: 'flex' }}>
<div className='projTitle '><span className='redicon'>*</span> :</div>
<Form.Item<FieldType>
// label="项目版本"
name="projVersion"
rules={[{ required: true, message: '请输入项目版本' }]}
>
<Input
style={{ height: '50px', width: '411px', fontSize: '16px' }}
placeholder="请输入项目版本" />
</Form.Item>
</div>
<div style={{ display: 'flex' }}>
<div className='projTitle ' style={{ marginLeft: '112px' }}>:</div>
<Input
readOnly
style={{ height: '50px', width: '411px', fontSize: '16px' }}
value={authorName}
// placeholder="请输入公司名称"
/>
</div>
</Row>
<Row gutter={15}>
<div style={{ display: 'flex' }}>
<div className='projTitle '><span className='redicon'>*</span> :</div>
<Input
readOnly
style={{ height: '50px', width: '411px', fontSize: '16px' }}
value={authorNameEn}
// placeholder="请输入公司英文名称"
/>
</div>
</Row>
<div className='Step-title' style={{ marginTop: '86px' }}>
<div className='Step-titlel'></div>
<div className='Step-titler'></div>
</div>
<div style={{ padding: '22px 15px' }}>
<div style={{ padding: '14px 19px', background: '#F3F3F3', color: '#A3A3A3', fontSize: '14px' }}>
<span style={{ color: '#FDB33E' }}></span>
</div>
<div className='belongPeople-center'>
<Button onClick={() => {
// 先初始化数据
formBelong.resetFields()
setIsNewBelongOpen(true)
setbelongTitle('创建所属者')
}} type="primary" icon={<FolderAddOutlined style={{ fontSize: '18px' }} />} style={{ width: "160px", height: '43px', fontSize: '14px' }}>
</Button>
<div className='belongPeople-search'>
<Search placeholder="请输入持有者名称搜索对应信息模板" onSearch={belongPeopleSearch} style={{ width: '353px', height: '43px' }} />
</div>
<div className='belongPeople-select'>
<Select
style={{ height: '43px', width: '183px', fontSize: '16px' }}
onChange={(value: string) => {
// console.log(`selected ${value}`);
// alert(`selected ${value}`)
// lyp
setType(value)
getSearchProjOwnerList(keywords, value)
}}
options={[
{ value: '', label: '全部类型' },
{ value: 'PERSONAL', label: '自然人' },
{ value: 'ORGANIZATION', label: '企业/组织' },
]}
defaultValue=""
/>
</div>
{/* <div className='belongPeople-select'>
<Select
style={{ height: '43px', width: '183px', fontSize: '16px' }}
onChange={(value: string) => {
console.log(`selected ${value}`);
alert(`selected ${value}`)
}}
options={[
{ value: 'code1', label: '全部状态' },
{ value: 'code2', label: '嘿嘿' },
{ value: 'code3', label: '嘻嘻' },
]}
defaultValue="code1"
/>
</div> */}
</div>
<div className='showInfo'>
<div style={{ marginRight: '22px' }}>:</div>
<div style={{ display: authorName == '' ? 'block' : 'none' }}></div>
<div style={{ display: authorName == '' ? 'none' : 'block' }}>
{authorName}/{authorType == 'PERSONAL' ? '自然人' : '企业-组织'}/{authorIdCardType == 'ID_CARD' ? '身份证' : '营业执照'}/{authorIdCard}
</div>
</div>
<div className='belongPeople-bot'>
{/* 表格 */}
<Table
rowSelection={{
type: 'radio',
...belongRowSelection,
// selectedRowKeys: belongselectedKeys // 设置默认选中的行
}}
dataSource={tableBelongData}
pagination={{
defaultPageSize: 5, // 设置默认一页显示 5 条数据
}}
style={{ textAlign: 'center' }} // 设置表格内容居中显示
rowKey="projOwnerId" // 指定数据项的唯一标识符
>
<Column title="所属者名称" dataIndex="name" />
<Column
title="所属类型"
dataIndex="type"
2024-05-27 21:25:36 +08:00
render={(_text, record: any) => (
2024-05-21 11:21:34 +08:00
record.type === 'PERSONAL' ? '自然人' : '企业/组织'
)}
/>
<Column
title="所属证件类型"
dataIndex="idCardType"
2024-05-27 21:25:36 +08:00
render={(_text, record: any) => (
2024-05-21 11:21:34 +08:00
record.idCardType === 'ID_CARD' ? '身份证' : '营业执照'
)}
/>
<Column title="所属者身份证号" dataIndex="idCardNo" key="belongCardNo" />
{/* <Column title="实名认证状态" dataIndex="address" key="key" /> */}
2024-05-28 18:00:42 +08:00
2024-05-21 11:21:34 +08:00
</Table>
</div>
</div>
<div className='Step-title' style={{ marginTop: '86px' }}>
<div className='Step-titlel'></div>
<div className='Step-titler'></div>
</div>
<div style={{ padding: '22px 15px' }}>
<div style={{ padding: '14px 19px', background: '#F3F3F3', color: '#A3A3A3', fontSize: '14px' }}>
线
</div>
<div className='belongPeople-center'>
<Button onClick={() => {
formContact.resetFields()
getCas()
steIsContantOpen(true)
setContactTitle('创建联系人')
}} type="primary" icon={<FolderAddOutlined style={{ fontSize: '18px' }} />} style={{ width: "160px", height: '43px', fontSize: '14px' }}>
</Button>
<div className='belongPeople-search'>
<Search placeholder="请输入持有者名称搜索对应信息" onSearch={applicantPeopleSearch} style={{ width: '353px', height: '43px' }} />
</div>
</div>
<div className='showInfo'>
<div style={{ marginRight: '22px' }}>:</div>
<div style={{ display: applyContactName == '' ? 'block' : 'none' }}></div>
<div style={{ display: applyContactName == '' ? 'none' : 'block' }}>
{applyContactName}/{applyContactPhone}/{applyContactEmail}
</div>
</div>
<div className='belongPeople-bot'>
{/* 表格 lyp*/}
<Table
rowSelection={{
type: 'radio',
...ContantRowSelection,
// selectedRowKeys: selectedKeys // 设置默认选中的行
}}
dataSource={tableContactData}
pagination={{
defaultPageSize: 5, // 设置默认一页显示 5 条数据
}}
style={{ textAlign: 'center' }} // 设置表格内容居中显示
rowKey="projContactId" // 指定数据项的唯一标识符
>
<Column title="联系人" dataIndex="name" />
<Column title="联系人手机号" dataIndex="phone" />
<Column title="平台专属客服" dataIndex="csaNo" />
{/* <Column title="实名认证状态" dataIndex="address" key="key" /> */}
</Table>
</div>
</div>
<div style={{ height: '200px' }}></div>
</Form>
</div>
</div>
2024-03-26 11:54:30 +08:00
</div>
2024-05-21 11:21:34 +08:00
{/* 总体选择保存的提示 */}
<Modal title="提示"
okText="确定"
cancelText="取消"
open={isEditModalOpen}
onOk={() => {
// 美哟u创建所属者 应该还得判断一下没选中所属者
if (authorName == '') {
// alert('所属者不能为空')
messageApi.open({
type: 'error',
content: '请选择所属者'
})
setIsEditModalOpen(false);
// 没有申请人 应该还得判断一下没选中申请人
} else if (applyContactName == '') {
// alert('申请人不能为空')
messageApi.open({
type: 'error',
content: '请选择申请人'
})
setIsEditModalOpen(false);
}
// else if (selectedKeys.length == 0) {
// messageApi.open({
// type: 'error',
// content: '请选择所属者'
// })
// setIsEditModalOpen(false);
// }
else {
// alert(authorName)
setIsEditModalOpen(false);
put({
messageApi,
url: `/api/proj/update/edit-step2/${pathParams.projId}`,
body: {
projSubName: formInfo.getFieldValue('projSubName'),
projVersion: formInfo.getFieldValue('projVersion'),
projDevCompleteDate: dayjs(formInfo.getFieldValue('projDevCompleteDate')).format(dateFormat),
// companyName: formInfo.getFieldValue('companyName'),
// companyNameEn: formInfo.getFieldValue('companyNameEn'),
authorName,
authorIdCardType,
authorIdCard,
authorType,
authorNameEn,
authorProvinceCity,
authorCrcAccount,
authorCrcAccountPassword,
authorCrcAccountUsername,
authorId,
applyContactId: applyConcatId,
applyContactCsaNo,
applyContactEmail,
applyContactName,
applyContactPhone
},
onBefore() {
setLoading(true);
},
onSuccess() {
messageApi.open({
type: 'success',
content: '编辑成功'
})
},
onFinally() {
setLoading(false);
}
})
}
}}
onCancel={() => {
setIsEditModalOpen(false);
}}>
<div></div>
</Modal>
{/* 选择创建/编辑/查看所属者弹框 */}
<Modal
okText="确认"
// cancelText="取消"
cancelText={belongTitle === '查看所属者' ? '返回' : '取消'}
open={isNewBelongOpen}
// 点击确认上传事件
// onOk={() => {
// }}
onOk={
handleOk
}
width={1280}
// 确认按钮样式
okButtonProps={{ style: { width: '102px', height: '49px', background: '#FFBA00', fontSize: '18px', color: '#FFFFFF', display: belongTitle == '查看所属者' ? 'none' : 'block' } }}
// 返回按钮样式
cancelButtonProps={{ style: { border: 'none', width: '102px', height: '49px', background: '#F3F3F3', fontSize: '18px', color: '#8C8C8C' } }}
onCancel={() => {
setIsNewBelongOpen(false)
}}
>
<div className='belongPeople-Modal'>
<div className='belongPeople-Mtop'>
{belongTitle}
</div>
<div>
<Form
name="belongInfo"
form={formBelong}
layout="vertical"
labelCol={{ span: 8 }}
wrapperCol={{ span: 24 }}
style={{ width: '100%' }}
onFinish={() => {
// setIsNewBelongOpen(true);
}}
autoComplete="off"
>
<Row gutter={15}>
<Col span={24}>
<div className='blongNameInt'>
<div className='blongTitle '></div>
<Form.Item
// label="Radio"
style={{ marginTop: '22px', marginLeft: '24px' }}
name="authorType"
rules={[
{
required: true,
message: '请选择请选择知识产权所属者类型',
}
]}
>
<Radio.Group
disabled={belongTitle == '查看所属者' ? true : false}>
<Radio value="ORGANIZATION" > / </Radio>
<Radio value="PERSONAL"> </Radio>
</Radio.Group>
</Form.Item>
</div>
</Col>
</Row>
<Row gutter={15}>
<Col span={12}>
<div className='blongNameInt blongSmallNamel'>
<div className='blongTitle blongsmallTitle '>:</div>
<Form.Item<BelongPeopleType>
// label="姓名或公司名称"
name="authorName"
rules={[{ required: true, message: '请输入姓名或公司名称' }]}
>
<Input placeholder="请输入姓名或公司名称"
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}
disabled={belongTitle == '查看所属者' ? true : false}
/>
</Form.Item>
</div>
</Col>
<Col span={12}>
<div className='blongNameInt blongSmallNameR'>
<div className='blongTitle blongsmallTitle '>:</div>
<Form.Item<BelongPeopleType>
// label="公司英文名"
name="nameEn"
rules={[{ required: true, message: '请输入公司英文名' }]}
>
<Input placeholder="请输入公司英文名"
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}
disabled={belongTitle == '查看所属者' ? true : false}
/>
</Form.Item>
</div>
</Col>
</Row>
<Row gutter={15}>
<Col span={12}>
<div className='blongNameInt blongSmallNamel'>
<div className='blongTitle blongsmallTitle '>:</div>
<Form.Item<BelongPeopleType>
// label="证件类型"
name="authorIdCardType"
rules={[{ required: true, message: '请选择证件类型' }]}
>
<Select
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}
placeholder="请选择样证件类型"
onChange={(value: string) => {
console.log(`selected ${value}`);
}}
options={[
{ value: 'BUSINESS_LICENSE', label: '营业执照' },
{ value: 'ID_CARD', label: '身份证' },
]}
disabled={belongTitle == '查看所属者' ? true : false}
/>
</Form.Item>
</div>
</Col>
<Col span={12}>
<div className='blongNameInt blongSmallNameR'>
<div className='blongTitle blongsmallTitle '>:</div>
<Form.Item<BelongPeopleType>
// label="证件号"
name="authorIdCard"
rules={[{ required: true, message: '请输入证件号' }]}
>
<Input placeholder="请输入证件号"
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}
disabled={belongTitle == '查看所属者' ? true : false}
/>
</Form.Item>
</div>
</Col>
</Row>
<Row gutter={15}>
<Col span={12}>
<div className='blongNameInt blongSmallNamel'>
<div className='blongTitle blongsmallTitle '>:</div>
<Form.Item<BelongPeopleType>
// label="省市"
name="authorProvince"
rules={[{ required: true, message: '请选择省市' }]}
>
<Cascader options={areaArray}
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}
loadData={(selectedOptions: Option[]) => {
const targetOption = selectedOptions[selectedOptions.length - 1];
listArea(targetOption.id).then(data => {
targetOption.children = data.map(item => {
return {
value: item.name,
label: item.name,
isLeaf: !item.isParent,
id: item.id,
pId: item.pId
}
});
setAreaArray([
...areaArray
])
});
}}
placeholder="请选择省市"
changeOnSelect
disabled={belongTitle == '查看所属者' ? true : false}
/>
</Form.Item>
</div>
</Col>
</Row>
<Row gutter={15}>
<Col span={24}>
<div className='blongNameInt belongText'>
<div className='blongTitle' style={{ marginLeft: '23px' }}></div>
<Form.Item<BelongPeopleType>
// label="是否愿意提供中国版权登记业务平台的账号?"
name="isCrcAccount"
rules={[
{
required: true,
message: '请选择请选择知识产权所属者类型',
}
]}
style={{ marginTop: '22px', marginLeft: '24px' }}
>
<Radio.Group disabled={belongTitle == '查看所属者' ? true : false}>
<Radio value="1"> </Radio>
<Radio value="0"> </Radio>
</Radio.Group>
</Form.Item>
</div>
</Col>
</Row>
<Row gutter={15}>
<Col span={24}>
<div className='belongRedText'>
</div>
</Col>
</Row>
<Row gutter={15}>
<Col span={12}>
<div className='crcAccount'></div>
<Form.Item<BelongPeopleType>
// label="中国版权登记业务平台用户名"
name="crcAccountUsername"
rules={[
({ getFieldValue }) => ({
validator(_, value) {
if (getFieldValue('isCrcAccount') === '1') {
if (!value) {
return Promise.reject('请输入账号');
}
}
return Promise.resolve();
},
}),
]}
>
<Input placeholder=""
style={{ height: '44px', width: '533px', fontSize: '15px', marginTop: '18px' }}
disabled={belongTitle == '查看所属者' ? true : false}
/>
</Form.Item>
</Col>
<Col span={12}>
<div className='crcAccount'></div>
<Form.Item<BelongPeopleType>
// label="中国版权登记业务平台密码"
name="crcAccountPassword"
rules={[
({ getFieldValue }) => ({
validator(_, value) {
if (getFieldValue('isCrcAccount') === '1') {
if (!value) {
return Promise.reject('请输入密码');
}
}
return Promise.resolve();
},
}),
]}
>
<Input placeholder=""
style={{ height: '44px', width: '533px', fontSize: '15px', marginTop: '18px' }}
disabled={belongTitle == '查看所属者' ? true : false}
/>
</Form.Item>
</Col>
</Row>
</Form>
</div>
</div>
</Modal >
{/* 选择创建/编辑/查看联系人弹框 lyp*/}
<Modal
okText="确认"
// cancelText="取消"
cancelText={contactTitle === '查看联系人' ? '返回' : '取消'}
open={isContantOpen}
// 点击确认上传事件
// onOk={() => {
// }}
onOk={
contactHandleOk
}
width={745}
// 确认按钮样式
okButtonProps={{ style: { width: '102px', height: '49px', background: '#FFBA00', fontSize: '18px', color: '#FFFFFF', display: contactTitle == '查看联系人' ? 'none' : 'block' } }}
// 返回按钮样式
cancelButtonProps={{ style: { border: 'none', width: '102px', height: '49px', background: '#F3F3F3', fontSize: '18px', color: '#8C8C8C' } }}
onCancel={() => {
steIsContantOpen(false)
}}
>
<div className='belongPeople-Modal'>
<div className='belongPeople-Mtop'>
{contactTitle}
</div>
<div className='contact-modal-context'>
<div>
<Form
name="contactInfo"
form={formContact}
layout="vertical"
labelCol={{ span: 8 }}
wrapperCol={{ span: 24 }}
style={{ width: '100%', }}
onFinish={() => {
// setIsNewBelongOpen(true);
}}
autoComplete="off"
>
<div className='blongNameInt'>
<div className='blongTitle '>: </div>
<Form.Item<ContactType>
name="name"
rules={[{ required: true, message: '请输入姓名' }]}
>
<Input placeholder="请输入姓名"
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px', marginLeft: '15px' }}
disabled={contactTitle == '查看联系人' ? true : false}
/>
</Form.Item>
</div>
<div className='blongNameInt'>
<div className='blongTitle '>: </div>
<Form.Item<ContactType>
name="phone"
rules={[{ required: true, message: '请输入电话号码' }]}
>
<Input placeholder="请输入电话号码"
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px', marginLeft: '15px' }}
disabled={contactTitle == '查看联系人' ? true : false}
/>
</Form.Item>
</div>
<div className='blongNameInt'>
<div className='blongTitle '>: </div>
<Form.Item<ContactType>
name="email"
rules={[{ required: true, message: '请输入邮箱' },
{ type: 'email', message: '请输入有效的邮箱地址' }
]}
>
<Input placeholder="请输入邮箱"
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px', marginLeft: '15px' }}
disabled={contactTitle == '查看联系人' ? true : false}
/>
</Form.Item>
</div>
<div
style={{ display: 'none' }}
>
<Form.Item<ContactType>
name="csaNo"
>
<Input placeholder="客服编码 需隐藏"
style={{ height: '44px', width: '384px', fontSize: '15px', }}
disabled={contactTitle == '查看联系人' ? true : false}
/>
</Form.Item>
</div>
</Form>
</div>
<div className='cas' style={{
display: contactTitle == '创建联系人' ? 'block' : 'none'
}}>
<div className='cas-title'>
使
</div>
<div className='cas-text'>
</div>
<img src={imgUrl} alt="" width={137} height={138} />
</div>
</div>
</div>
</Modal >
<Spin tip="正在提交..." spinning={loading} fullscreen />
</div >
2024-03-26 11:54:30 +08:00
</>
)
}