system-copyright-react/src/route/proj/edit/ProjEditStep2.tsx
2024-06-11 17:45:40 +08:00

1535 lines
82 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import './proj-edit-step.css';
import { Radio, Cascader, Col, DatePicker, Flex, message, Modal, Row, Spin, Table, Space, Select } from "antd";
import { FolderAddOutlined } from '@ant-design/icons';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { get, put, post, del, downloadUrl } from "../../../util/AjaxUtils.ts";
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";
const { Search } = Input;
const { Column } = Table;
// 基本信息文件类型
type FieldType = {
projSubName: string;
projVersion: string;
projDevCompleteDate: Dayjs;
companyName: string;
companyNameEn: string;
projName: string
};
// 所属人信息类型
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
company: 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;
}
export default function ProjEditStep2(props: any) {
// const nav = useNavigate();
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
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)
const height = window.innerHeight - 200;
const dateFormat = 'YYYY年MM月DD日';
// 页面显示的所属者信息
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('') //联系人手机
const [applyContactCompany, setapplyContactCompany] = 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)
setapplyContactCompany(selectedRows[0].company)
},
};
// 所属人表格数据
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 关键字
const [projOwnerId, setProjOwnerId] = useState('')
// 联系人id 关键字
const [contactId, setContactId] = useState('')
// 所属者弹窗数据
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 = () => {
// console.log(belongShow);
// setBelongShow('')
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 = () => {
get({
messageApi,
url: `/api/proj/get/edit-step2/${pathParams.projId}`,
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)
setapplyContactCompany(data.applyContactCompany)
setapplyContactCsaNo(data.applyContactCsaNo)
setapplyContactEmail(data.applyContactEmail)
console.log('基本信息', data);
setAuthorId(data.authorId)
setApplyConcatId(data.applyContactId)
formInfo.setFieldsValue({
projName: data.projName,
projSubName: data.projSubName,
projVersion: data.projVersion,
projDevCompleteDate: data.projDevCompleteDate ? dayjs(data.projDevCompleteDate, 'YYYY-MM-DD') : '',
companyName: data.companyName,
companyNameEn: data.companyNameEn,
})
}
})
}
// 获取所属者表格
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)
}
})
}
// 获取联系人表格
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 [belongShow, setBelongShow] = useState('ORGANIZATION')
// 编辑所属者
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'),
idCardType: belongShow == 'PERSONAL' ? 'ID_CARD' : 'BUSINESS_LICENSE',
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'),
idCardType: belongShow == 'PERSONAL' ? 'ID_CARD' : 'BUSINESS_LICENSE',
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'),
company: formContact.getFieldValue('company')
},
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'),
company: formContact.getFieldValue('company')
},
onBefore() {
},
onSuccess() {
// console.log(data);
// alert('编辑成功')
messageApi.open({
type: 'success',
content: '编辑成功'
})
getProjContactList()
steIsContantOpen(false)
},
onFinally() {
}
})
}
const typeChange = (data: any) => {
// console.log(data.target.value);
setBelongShow(data.target.value)
}
const [CrcAccountShow, setCrcAccountShow] = useState('0')
const isCrcAccountChange = (data: any) => {
// console.log(data.target.value);
setCrcAccountShow(data.target.value)
}
useEffect(() => {
getEditstep()
getProjOwnerList()
getProjContactList()
listArea('0').then(data => {
console.log('省市1', data);
// data.slice(0, 2).map
const options: Option[] = data.map(item => {
return {
value: item.name,
label: item.name,
isLeaf: !item.isParent,
id: item.id,
pId: item.pId
}
})
setAreaArray(options);
// console.log('省市2', options);
});
}, [])
return (
<>
<div style={{ height: `${height}px`, overflow: 'auto', background: 'var(--color-light)', position: 'relative' }}>
{contextHolder}
{/* <Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>},
{title: <a onClick={() => {nav(-1)}}>编辑项目</a>},
{title: '基本信息'},
]}
/> */}
<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"
>
<Row gutter={15}>
<div className='projNameInt'>
<div style={{ display: 'flex' }}>
<div className='projTitle '> :</div>
<Form.Item
// label="项目简称"
name="projName"
rules={[{ required: false, message: '' }]}
>
<Input
style={{ height: '50px', width: '411px', fontSize: '16px' }}
readOnly
// value={}
/>
</Form.Item>
</div>
<div style={{ display: 'flex' }}>
<div className='projTitle ' style={{ marginLeft: '112px' }}> :</div>
<Form.Item<FieldType>
// label="项目简称"
name="projSubName"
rules={[{ required: false, message: '请输入项目简称' }]}
>
<Input
style={{ height: '50px', width: '411px', fontSize: '16px' }}
placeholder="请输入项目简称" />
</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' }}><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 style={{ display: 'none' }}>
<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: 'none' }}>
<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: '30px' }}>
<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' }}>
<a onClick={() => {
window.open('https://www.aimzhu.com/Rnsystem.html')
}} style={{ color: '#FDB33E' }}></a>
</div>
<div className='belongPeople-center'>
<Button onClick={() => {
// lyp
setBelongShow('ORGANIZATION')
setCrcAccountShow('0')
// 先初始化数据
formBelong.resetFields()
setIsNewBelongOpen(true)
setbelongTitle('创建所属者')
formBelong.setFieldsValue({
// 是否提供平台账号
isCrcAccount: '0',
// 个人/企业
authorType: 'ORGANIZATION',
})
}} 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"
render={(_text, record: any) => (
record.type === 'PERSONAL' ? '自然人' : '企业/组织'
)}
/>
<Column
title="所属证件类型"
dataIndex="idCardType"
render={(_text, record: any) => (
record.idCardType === 'ID_CARD' ? '身份证' : '营业执照'
)}
/>
<Column title="所属者身份证号" dataIndex="idCardNo" key="belongCardNo" />
{/* <Column title="实名认证状态" dataIndex="address" key="key" /> */}
<Column
title="操作"
render={(text, record: any) => (
<Space size="middle">
<a onClick={() => {
// alert(record.projOwnerId);
console.log('text:', text);
console.log('record:', record);
setProjOwnerId(record.projOwnerId)
setbelongTitle('编辑所属者')
setBelongShow(record.type)
setIsNewBelongOpen(true)
// 发起请求给formBelong 表单赋值
setCrcAccountShow(record.isCrcAccount == 1 ? '1' : '0')
formBelong.setFieldsValue({
// 公司名
authorName: record.name,
// 公司英文名
nameEn: record.nameEn,
// 证件类型
authorIdCardType: record.idCardType ? record.idCardType : 'BUSINESS_LICENSE',
// 证件号
authorIdCard: record.idCardNo,
// 国籍
// authorNation: '中国',
// 地区
authorProvince: record.provinceCity ? record.provinceCity.split(',') : '',
// 成立日期
// authorEstablishDate: record.gmtCreate ? dayjs(record.gmtCreate, 'YYYY-MM-DD') : '',
// 是否提供平台账号
isCrcAccount: record.isCrcAccount == 1 ? '1' : '0',
// 个人/企业
authorType: record.type,
// 密码
crcAccountPassword: record.crcAccountPassword,
// 账号
crcAccountUsername: record.crcAccountUsername
})
}}> </a>
<span style={{ color: '#3472EE' }}>|</span>
<a onClick={() => {
// alert(record.projOwnerId);
del({
messageApi,
url: `/api/proj-owner/remove/${record.projOwnerId}`,
onSuccess() {
messageApi.success('删除成功');
getProjOwnerList()
}
})
}}></a>
<span style={{ color: '#3472EE' }}>|</span>
<a onClick={() => {
setbelongTitle('查看所属者')
setIsNewBelongOpen(true)
// 发起请求给formBelong 表单赋值
formBelong.setFieldsValue({
// 公司名
authorName: record.name,
// 公司英文名
nameEn: record.nameEn,
// 证件类型
authorIdCardType: record.idCardType ? record.idCardType : 'BUSINESS_LICENSE',
// 证件号
authorIdCard: record.idCardNo,
// 国籍
// authorNation: '中国',
// 地区
authorProvince: record.provinceCity ? record.provinceCity.split(',') : '',
// 成立日期
// authorEstablishDate: record.gmtCreate ? dayjs(record.gmtCreate, 'YYYY-MM-DD') : '',
// 是否提供平台账号
isCrcAccount: record.isCrcAccount == 1 ? '1' : '0',
// 个人/企业
authorType: record.type,
// 密码
crcAccountPassword: record.crcAccountPassword,
// 账号
crcAccountUsername: record.crcAccountUsername
})
}}></a>
</Space>
)}
/>
</Table>
</div>
</div>
<div className='Step-title' style={{ marginTop: '30px' }}>
<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 ? '/' + 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="company"
render={(text) => (text !== '' ? text : '一')}
/>
{/* <Column title="实名认证状态" dataIndex="address" key="key" /> */}
<Column
title="操作"
render={(text, record: any) => (
<Space size="middle">
<a onClick={() => {
// alert(record.projOwnerId);
console.log('text:', text);
console.log('record:', record);
setContactId(record.projContactId)
setContactTitle('编辑联系人')
steIsContantOpen(true)
// formContact 表单赋值
formContact.setFieldsValue({
csaNo: record.csaNo,
name: record.name,
phone: record.phone,
email: record.email,
company: record.company
})
}}> </a>
<span style={{ color: '#3472EE' }}>|</span>
<a onClick={() => {
// alert(record.projOwnerId);
del({
messageApi,
url: `/api/proj-contact/remove/${record.projContactId}`,
onSuccess() {
messageApi.success('删除成功');
getProjContactList()
}
})
}}></a>
<span style={{ color: '#3472EE' }}>|</span>
<a onClick={() => {
setContactTitle('查看联系人')
steIsContantOpen(true)
formContact.setFieldsValue({
csaNo: record.csaNo,
name: record.name,
phone: record.phone,
email: record.email
})
}}></a>
</Space>
)}
/>
</Table>
</div>
</div>
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'flex-end', paddingRight: '15px' }}>
<Form.Item wrapperCol={{ span: 24 }}>
<Flex align="center" justify="center" gap="large">
<Button type="default" htmlType="button" onClick={() => {
props.closeModal()
// alert('发挥')
}}
// style={{ height: '49px', width: '104px', color: '#4B4B4B', background: '#D1D1D1', fontSize: '16px' }}
size='large'
>
</Button>
<Button type="primary"
htmlType="submit"
// style={{ height: '49px', width: '104px', color: '#FDFDF2', background: '#1564ED', fontSize: '16px' }}
style={{ marginLeft: "-10px" }}
size='large'
onClick={() => {
formInfo.validateFields().then(() => {
// 如果验证通过,则执行确认操作
// 这里可以放置你的确认操作逻辑
setIsEditModalOpen(true)
}).catch(() => {
// 如果验证不通过,可以根据需要处理错误信息
messageApi.open({
type: 'error',
content: '带*的内容为必填'
})
});
}}
>
</Button>
</Flex>
</Form.Item>
</div>
{/* <div style={{ height: '200px' }}></div> */}
</Form>
</div>
</div>
</div>
{/* 总体选择保存的提示 */}
<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,
applyContactCompany
},
onBefore() {
setLoading(true);
},
onSuccess() {
// props.closeModal()
messageApi.open({
type: 'success',
content: '编辑成功'
})
// props.closeModal()
setTimeout(() => {
// window.location.reload()
props.closeModal()
}, 500)
},
onFinally() {
setLoading(false);
}
})
}
}}
onCancel={() => {
setIsEditModalOpen(false);
}}>
<div></div>
</Modal>
{/* 选择创建/编辑/查看所属者弹框 */}
<Modal
okText="确认"
// cancelText="取消"
cancelText={belongTitle === '查看所属者' ? '返回' : '取消'}
open={isNewBelongOpen}
// 点击确认上传事件
// onOk={() => {
// }}
onOk={
handleOk
}
width={1280}
// 确认按钮样式
okButtonProps={{ size: 'large', style: { display: belongTitle == '查看所属者' ? 'none' : 'block' } }}
// 返回按钮样式
cancelButtonProps={{ size: 'large' }}
onCancel={() => {
setIsNewBelongOpen(false)
// setBelongShow('')
}}
>
<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
// value={null}
value={"ORGANIZATION"}
onChange={typeChange}
disabled={belongTitle == '查看所属者' ? true : false}>
<Radio value="ORGANIZATION" > / </Radio>
<Radio value="PERSONAL"> </Radio>
</Radio.Group>
</Form.Item>
</div>
</Col>
</Row>
{/* lyp */}
{/* {if(formBelong.getFieldValue('authorType')=='ORGANIZATION'){
return(
)
}else{
return
}} */}
{belongShow == '' ? <></> : <> <Row gutter={15}>
<Col span={12}>
<div className='blongNameInt blongSmallNamel'>
{/* <div className='blongTitle blongsmallTitle '>姓名或公司名称:</div> */}
<div className='blongTitle blongsmallTitle '>{belongShow == 'PERSONAL' ? '姓名' : '公司名称'}</div>
<Form.Item<BelongPeopleType>
// label="姓名或公司名称"
name="authorName"
rules={[{ required: true, message: belongShow == 'PERSONAL' ? '请输入姓名' : '请输入公司名称' }]}
>
<Input placeholder={belongShow == 'PERSONAL' ? '请输入姓名' : '请输入公司名称'}
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 '>{belongShow == 'PERSONAL' ? '英文名' : '公司英文名称'}</div>
<Form.Item<BelongPeopleType>
// label="公司英文名"
name="nameEn"
// rules={[{ required: true, message: belongShow == 'PERSONAL' ? '请输入英文名' : '请输入公司英文名称' }]}
>
<Input placeholder={belongShow == 'ORGANIZATION' ? '请输入公司英文名称' : '请输入英文名'}
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}
disabled={belongTitle == '查看所属者' ? true : false}
/>
</Form.Item>
</div>
</Col>
</Row>
<Row gutter={15}>
<div className='blongNameInt blongSmallNamel' style={{ display: 'none' }}>
<div className='blongTitle blongsmallTitle '>:</div>
<Form.Item<BelongPeopleType>
name="authorIdCardType"
>
<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 span={12}>
<div className='blongNameInt blongSmallNamel'>
<div className='blongTitle blongsmallTitle '>{belongShow == 'PERSONAL' ? '身份证号' : '营业执照号'}:</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];
// console.log(targetOption.id);
listArea(targetOption.id).then(data => {
targetOption.children = data.map(item => {
return {
value: item.name,
label: item.name,
isLeaf: true, //二级判断这个 以前不是 以前是 !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
// value={'1'}
onChange={isCrcAccountChange}
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 style={{ display: CrcAccountShow == '0' ? 'none' : 'block' }}>
<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>
</div>
</Col>
<Col span={12}>
<div style={{ display: CrcAccountShow == '0' ? 'none' : 'block' }}>
<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>
</div>
</Col>
</Row>
</Form>
</div>
</div>
</Modal >
{/* 选择创建/编辑/查看联系人弹框 lyp*/}
<Modal
okText="确认"
// cancelText="取消"
cancelText={contactTitle === '查看联系人' ? '返回' : '取消'}
open={isContantOpen}
// 点击确认上传事件
// onOk={() => {
// }}
onOk={
contactHandleOk
}
width={745}
// 确认按钮样式
okButtonProps={{ size: 'large', style: { display: contactTitle == '查看联系人' ? 'none' : 'block' } }}
// 返回按钮样式
cancelButtonProps={{ size: 'large', style: {} }}
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 ' style={{ width: 65, marginRight: '15px' }}>: </div>
<Form.Item<ContactType>
name="name"
rules={[{ required: true, message: '请输入姓名' }]}
>
<Input placeholder="请输入姓名"
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}
disabled={contactTitle == '查看联系人' ? true : false}
/>
</Form.Item>
</div>
<div className='blongNameInt'>
<div className='blongTitle ' style={{ width: 65, marginRight: '15px' }}>: </div>
<Form.Item<ContactType>
name="phone"
rules={[{ required: true, message: '请输入电话号码' }]}
>
<Input placeholder="请输入电话号码"
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}
disabled={contactTitle == '查看联系人' ? true : false}
/>
</Form.Item>
</div>
<div className='blongNameInt'>
<div className='blongTitle ' style={{ width: 65, marginRight: '15px' }}>: </div>
<Form.Item<ContactType>
name="company"
rules={[{ required: false, message: '请输入所属公司' }]}
>
<Input placeholder="请输入所属公司"
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}
disabled={contactTitle == '查看联系人' ? true : false}
/>
</Form.Item>
</div>
<div className='blongNameInt'>
<div className='blongTitle ' style={{ width: 65, marginRight: '15px' }}>: </div>
<Form.Item<ContactType>
name="email"
rules={[{ required: false, message: '请输入邮箱' },
{ type: 'email', message: '请输入有效的邮箱地址' }
]}
>
<Input placeholder="请输入邮箱"
style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}
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 >
</>
)
}