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

lyp

Browse Source
This commit is contained in:
xixi 2024-06-17 16:35:28 +08:00
parent f89d818bc9
commit 2cacb954b1
12 changed files with 1223 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

915
src/components/BelongPeople/BelongPeople.tsx Normal file
View File

@ -0,0 +1,915 @@
// import './proj-edit-step.css';
import { Radio, Cascader, Col, 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 { 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;
}
// 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 BelongPeople(props:any) {
// const nav = useNavigate();
// const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
const [formInfo] = Form.useForm<FieldType>();
const [formBelong] = Form.useForm<BelongPeopleType>();
const [loading] = useState<boolean>(false);
// const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [isNewBelongOpen, setIsNewBelongOpen] = 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 [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
// 设置所属者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)
);
// 表格相关
// 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)
// 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)
// props.setBelongPeopleName(selectedRows[0].name)
props.setBelongPeopleInfo({
authorName:selectedRows[0].name,
authorType:selectedRows[0].type,
authorIdCardType:selectedRows[0].idCardType,
authorIdCard:selectedRows[0].idCardNo,
authorCrcAccount:selectedRows[0].isCrcAccount,
authorId:selectedRows[0].projOwnerId,
authorProvinceCity:selectedRows[0].provinceCity
})
props.setValue(selectedRows[0].name)
},
};
// 所属人表格数据
const [tableBelongData, setTableBelongData] = useState<BelongDataType[]>([])
// const selectedKeys = data.filter(item => item.select).map(item => item.key);
// console.log('selectedKeys:', selectedKeys);
// 是否提供中国版账号
// 所属者id 关键字
const [projOwnerId, setProjOwnerId] = 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 handleOk = () => {
// console.log(belongShow);
// setBelongShow('')
formBelong.validateFields().then(() => {
// 如果验证通过，则执行确认操作
// 这里可以放置你的确认操作逻辑
if (belongTitle === '编辑所属者') {
upProjOwner()
}
if (belongTitle === '创建所属者') {
newProjOwner()
}
// 关闭 弹窗
// setIsNewBelongOpen(false)
// 初始化数据
formBelong.resetFields(); // 重置表单字段为初始值
}).catch(() => {
// 如果验证不通过，可以根据需要处理错误信息
// (errorInfo);
});
belongRowSelection
};
// 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)
// setauthorProvinceCity(data.authorProvinceCity)
// setauthorCrcAccount(data.authorCrcAccount)
// setauthorCrcAccountPassword(data.authorCrcAccountPassword)
// setauthorCrcAccountUsername(data.authorCrcAccountUsername)
// setAuthorId(data.authorId)
// console.log('基本信息', data);
// 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 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 [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 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()
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 - 140}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%', background: 'var(--color-light)' }}>
<div className="form-container" style={{padding:0}} >
<div className="form-body" style={{margin:0}}>
<Form
name="Info"
form={formInfo}
layout="vertical"
labelCol={{ span: 8 }}
wrapperCol={{ span: 24 }}
style={{}}
autoComplete="off"
>
<div style={{ }}>
<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: props.belongPeopleInfo.authorName ? 'none' : 'block' }}>请选择所属者</div>
<div style={{ display: props.belongPeopleInfo.authorName ? 'block' : 'none' }}>
{ props.belongPeopleInfo.authorName}/{ props.belongPeopleInfo.authorType == 'PERSONAL' ? '自然人' : '企业-组织'}/{ props.belongPeopleInfo.authorIdCardType == 'ID_CARD' ? '身份证' : '营业执照'}/{props.belongPeopleInfo.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>
</Form>
</div>
</div>
</div>
{/* 选择创建/编辑/查看所属者弹框 */}
<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 >
<Spin tip="正在提交..." spinning={loading} fullscreen />
</div >
</>
)
}

2
src/components/LoginPage/LoginPage.tsx
View File

@ -501,7 +501,7 @@ export default function ProjConfigLoginpage(props: any) {
key={item.loginpageId}
id={item.loginpageId}
title={item.mainTitle}
imgs={item.bgImgs}
imgs={item.previewImgs}
selected={item.loginpageId == selectedLoginpageId}
handleClick={() => {
setSelectedLoginpageId(item.loginpageId);

2
src/components/LoginPageShow/LoginPageShow.tsx
View File

@ -465,7 +465,7 @@ export default function ProjConfigLoginpage(props:any) {
key={item.loginpageId}
id={item.loginpageId}
title={item.mainTitle}
imgs={item.bgImgs}
imgs={item.previewImgs}
selected={item.loginpageId == selectedLoginpageId}
// handleClick={() => {
// setSelectedLoginpageId(item.loginpageId);

6
src/components/card/CardProj.tsx
View File

@ -22,8 +22,10 @@ import useMessage from "antd/es/message/useMessage";
import setImg from '../../static/right/set.png'
import orderImg from '../../static/right/order.png'
import menuImg from '../../static/right/menu.png'
import LoginPage from '../../components/LoginPage/LoginPage.tsx'
import LoginPageShow from '../../components/LoginPageShow/LoginPageShow.tsx'
// import LoginPage from '../../components/LoginPage/LoginPage.tsx'
import LoginPage from '../../route/proj/edit/ProjConfigLoginpage.tsx'
// import LoginPageShow from '../../components/LoginPageShow/LoginPageShow.tsx'
import LoginPageShow from '../../route/proj/edit/ProjConfigLoginpageShow.tsx'
import SoftwareManagement from '../../route/proj/edit/ProjConfigModList.tsx'
import SoftwareManagementShow from '../../route/proj/edit/ProjConfigModListShow.tsx'

68
src/components/card/CardProjType.tsx
View File

@ -8,7 +8,7 @@ import serveImg from '../../static/serve.png'
import useImg from '../../static/use.png'
import leftImg from '../../static/createPro/left.png'
export default function CardProjType(props: ICardProj) {
const height = window.innerHeight - 170;
const [chargeAmount, setChargeAmount] = useState(0);
const [pkg, setPkg] = useState(false);
const [videoDemo, setVideoDemo] = useState(false);
@ -97,29 +97,29 @@ export default function CardProjType(props: ICardProj) {
}
const renderBuyBtn = () => {
return props.buyArray.map((buy, index) => {
return (
<div className="buy-btn" key={`buy_${index}`}>
<div className="price">{buy.label}{(buy.price + chargeAmount) / 100} 元</div>
{/* <hr /> */}
<div className="buy">
<button onClick={() => {
buy.handleClick(props.head, {
pkg: pkg,
videoDemo: videoDemo
});
}}
return props.buyArray.map((buy, index) => {
return (
<div className="buy-btn" key={`buy_${index}`}>
<div className="price">{buy.label}{(buy.price + chargeAmount) / 100} 元</div>
{/* <hr /> */}
<div className="buy">
<button onClick={() => {
buy.handleClick(props.head, {
pkg: pkg,
videoDemo: videoDemo
});
}}
style={{
cursor:props.isClickable==1?'pointer':'not-allowed'
cursor: props.isClickable == 1 ? 'pointer' : 'not-allowed'
}}
disabled={props.isClickable==1?false:true}
>购买</button>
</div>
disabled={props.isClickable == 1 ? false : true}
>购买</button>
</div>
)
})
</div>
)
})
}
@ -177,19 +177,21 @@ export default function CardProjType(props: ICardProj) {
return (
<div className="proj" style={{display:props.isShow == 1?'block':'none'}}>
<div className='projTop'>
{/* <div className="proj-head" style={{ backgroundImage: `url(${ProjCardHeadBg})` }}> */}
<div className="proj-head">
<div>{props.head}</div>
</div>
<div className="proj-body">
<div>{renderLines()}</div>
<div>{renderNew()}</div>
{renderCharge()}
<div className="proj" style={{ display: props.isShow == 1 ? 'block' : 'none', }}>
<div className='projTop'>
{/* <div className="proj-head" style={{ backgroundImage: `url(${ProjCardHeadBg})` }}> */}
<div className="proj-head">
<div>{props.head}</div>
</div>
<div className="proj-body">
<div>{renderLines()}</div>
<div>{renderNew()}</div>
{renderCharge()}
</div>
</div>
<div className="proj-foot">{renderBuyBtn()}</div>
</div>
<div className="proj-foot">{renderBuyBtn()}</div>
</div>
)
}

5
src/layout/Type/statedata.d.ts vendored
View File

@ -6,11 +6,14 @@ interface BelongDataType {
idCardNo: string
idCardType: string
isCrcAccount: number
name: "Lam On Kay"
name: string
nameEn: string
projOwnerId: string
provinceCity: string
type: string
// authorCrcAccount?:srting
// authorId?:string
// authorProvinceCity?:string
}
interface ContactDataType {
csaNo: string

82
src/route/proj/ProjNew.tsx
View File

@ -3,14 +3,17 @@ import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { Button, Flex, Form, Input, message, Modal, Spin, Checkbox } from "antd";
import { useContext, useEffect, useState } from "react";
import { get, post } from "../../util/AjaxUtils.ts";
import {
import {
// IProjCharge,
ProjAdditionalType, ProjChargeType } from "../../interfaces/proj/IProj.ts";
ProjAdditionalType, ProjChargeType
} from "../../interfaces/proj/IProj.ts";
import { GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
import BelongPeople from '../../components/BelongPeople/BelongPeople.tsx'
// const { TextArea } = Input;
type ProjInfo = {
projName: string;
projIntroduction: string;
belongPeople: string
};
export default function ProjNew() {
@ -28,18 +31,39 @@ export default function ProjNew() {
const [projInfo, setProjInfo] = useState<ProjInfo>({
projName: '',
projIntroduction: '',
belongPeople: ''
});
const [form] = Form.useForm<ProjInfo>();
// 所属者弹窗
const [belongModal, setBelongModal] = useState(false)
// const [belongPeopleName ,setBelongPeopleName] = useState('')
// // 暂存一个信息过度
// const [newBelongPeopleName,setNewBelongPeopleName] = useState('')
const [belongPeopleInfo, setBelongPeopleInfo] = useState({
authorName: '',
authorType: '',
authorIdCardType: '',
authorIdCard: '',
authorCrcAccount:'',
authorId:'',
authorProvinceCity:''
})
const setValue = (value:string) => {
form.setFieldsValue({
belongPeople:value
})
}
const [createProjId, setCreateProjId] = useState('');
const oldlistProjChargeAdditional: string[] = [];
const [listProjChargeAdditional, setlistProjChargeAdditional] = useState<string[]>([])
useEffect(() => {
get({
messageApi: messageApi,
url: '/api/proj/charge/get',
onSuccess({ data }) {
console.log(data);
const charge = data as any;
// console.log('创建页price',charge.proj.materialAgent);
@ -107,6 +131,7 @@ export default function ProjNew() {
<div className="proj-form">
<Form
name="basic"
form={form}
layout={'vertical'}
labelCol={{ span: 24 }}
wrapperCol={{ span: 24 }}
@ -115,7 +140,8 @@ export default function ProjNew() {
setIsCreateModalOpen(true);
setProjInfo({
projName: formData.projName,
projIntroduction: formData.projIntroduction
projIntroduction: formData.projIntroduction,
belongPeople: formData.belongPeople
})
}}
autoComplete="off"
@ -126,9 +152,24 @@ export default function ProjNew() {
name="projName"
rules={[{ required: true, message: '请输入系统全称' }]}
>
<Input style={{ background: '#eeeeee', width: '1000px', height: '50px', fontSize: '16px' }} placeholder="请输入系统全称" />
<Input style={{ background: '#eeeeee', width: '800px', height: '50px', fontSize: '16px' }} placeholder="请输入系统全称" />
</Form.Item>
</div>
<div className='formItemOne' style={{ marginTop: 20, position: 'relative' }}>
<div className='formItem-title '>
知识产权所属者*
</div>
<Form.Item<ProjInfo>
name="belongPeople"
rules={[{ required: true, message: '请选择/创建知识产权所属者' }]}
>
<Input style={{ background: '#eeeeee', width: '800px', height: '50px', fontSize: '16px', color: '#3B3B3B' }} placeholder="请选择/创建知识产权所属者" disabled />
</Form.Item>
<div style={{ position: 'absolute', right: 23, fontSize: 16, color: " #1F79FF", cursor: 'pointer' }} onClick={() => {
setBelongModal(true)
}}>选择</div>
</div>
<div className='software-protocol'>
<Form.Item
name="agreement"
@ -141,7 +182,7 @@ export default function ProjNew() {
]}
>
<Checkbox>
我同意平台 <a onClick={()=>{
我同意平台 <a onClick={() => {
window.open('https://www.aimzhu.com/Seda.html')
}}>《软件委托开发协议》</a>
</Checkbox>
@ -193,7 +234,8 @@ export default function ProjNew() {
open={isCreateModalOpen}
onOk={() => {
// console.log('最终',listProjChargeAdditional);
console.log(belongPeopleInfo.authorId);
setIsCreateModalOpen(false);
post<any>({
messageApi,
@ -201,7 +243,15 @@ export default function ProjNew() {
body: {
projName: projInfo.projName,
projChargeType: pathParams.projChargeType,
listProjChargeAdditional: listProjChargeAdditional
listProjChargeAdditional: listProjChargeAdditional,
authorCrcAccount:belongPeopleInfo.authorCrcAccount,
authorId:belongPeopleInfo.authorId,
authorIdCard:belongPeopleInfo.authorIdCard,
authorIdCardType:belongPeopleInfo.authorIdCardType,
authorName:belongPeopleInfo.authorName,
authorProvinceCity:belongPeopleInfo.authorProvinceCity,
authorType:belongPeopleInfo.authorType
},
onBefore() {
setLoading(true);
@ -241,6 +291,20 @@ export default function ProjNew() {
}}>
<div>项目创建成功，开始编辑项目？</div>
</Modal>
<Modal title="选择所属者"
destroyOnClose
open={belongModal}
width={1200}
footer={null}
onCancel={() => {
setBelongModal(false)
}}>
<BelongPeople setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} ></BelongPeople>
</Modal>
<Spin tip="正在提交..." spinning={loading} fullscreen />
</>
)

170
src/route/proj/edit/ProjConfigLoginpage.tsx
View File

@ -12,13 +12,15 @@ import {
Spin,
Upload,
UploadFile,
UploadProps
UploadProps,
Image,
// Pagination
} from "antd";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { DevUserId, get, downloadUrl, put, uploadImageUrl, post } from "../../../util/AjaxUtils.ts";
import { DevUserId, get, downloadUrl, put, uploadImageUrl, post, Axios } from "../../../util/AjaxUtils.ts";
import { Button, Form } from 'antd';
import CardImgSelect, { } from "../../../components/card/CardImgSelect.tsx";
// import CardImgSelect, { } from "../../../components/card/CardImgSelect.tsx";
type FormFieldType = {
loginpageId: string;
@ -46,8 +48,13 @@ export default function ProjConfigLoginpage(props: any) {
const height = window.innerHeight - 200;
const [loginpageArray, setloginpageArray] = useState<any[]>([])
const [selectedLoginpageId, setSelectedLoginpageId] = useState('');
// 若无选择的背景 默认的第一个图片的背景
// const [defaultId, setDefaultId] = useState('')
// 选择页面id和img(初始化用)
const [modalId,setModalId] = useState('')
const [modalImg,setModalImg] = useState('')
const [selectImgs, setSelectImgs] = useState('')
const [projId] = useState(pathParams.projId ? pathParams.projId : props.projId)
// 选择登陆页面弹窗
const [selectImgModal,setSelectImgModal] = useState(false)
const beforeUpload = (file: FileType) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
@ -59,7 +66,7 @@ export default function ProjConfigLoginpage(props: any) {
const preview = () => {
post<any>({
messageApi,
url: `/api/proj/preview/${pathParams.projId}`,
url: `/api/proj/preview/${projId}`,
body: {
// projId: pathParams.projId,
loginpageId: form.getFieldValue('loginpageId'),
@ -85,6 +92,23 @@ export default function ProjConfigLoginpage(props: any) {
setloginpageArray(data)
// setDefaultId(data[0].loginpageId)
// upLoginPage(data[0].loginpageId)
// 当有返回id时获取图片的previewImgs
const newData = data
get<any>({
messageApi,
url: `/api/proj/get/config-loginpage/${projId}`,
onSuccess({ data }) {
if (data.loginpageId) {
// lyp
const imgs = newData.filter((item: { loginpageId: any; }) => item.loginpageId === data.loginpageId)
// ?.previewImgs;
setSelectImgs(imgs[0].previewImgs)
// console.log('lyp',imgs);
}
}
})
}
})
}
@ -99,7 +123,10 @@ export default function ProjConfigLoginpage(props: any) {
// setDefaultId(data[0].loginpageId)
// upLoginPage(data[0].loginpageId)
form.setFieldValue('loginpageId', data[0].loginpageId);
setSelectImgs(data[0].previewImgs)
setSelectedLoginpageId(data[0].loginpageId);
setModalId(data[0].loginpageId)
// 选择页面id
preview()
}
})
@ -126,12 +153,18 @@ export default function ProjConfigLoginpage(props: any) {
getlistLoginpage()
get<any>({
messageApi,
url: `/api/proj/get/config-loginpage/${pathParams.projId}`,
url: `/api/proj/get/config-loginpage/${projId}`,
onSuccess({ data }) {
console.log('寻找被选中id', data);
if (data.loginpageId) {
form.setFieldValue('loginpageId', data.loginpageId);
setSelectedLoginpageId(data.loginpageId);
// lyp
// const imgs = loginpageArray.filter(item => item.loginpageId === data.loginpageId)
// ?.previewImgs;
// setSelectImgs(imgs[0].previewImgs)
setModalId(data.loginpageId)
form.setFieldValue('subTitle', data.subTitle);
form.setFieldValue('copyrightOwner', data.copyrightOwner);
form.setFieldValue('copyrightDate', data.copyrightDate);
@ -171,7 +204,6 @@ export default function ProjConfigLoginpage(props: any) {
}
})
}, [])
return (
@ -185,15 +217,15 @@ export default function ProjConfigLoginpage(props: any) {
{title: '登录界面设置'},
]}
/> */}
<div className="form-container" style={{ height: `${height}px`, overflow: 'hidden', padding: '10px', background: '#EFEFEF', boxSizing: 'border-box' }}>
<div className="form-container" style={{ height: `${height}px`, overflow: 'hidden', padding: '0', background: '#EFEFEF', boxSizing: 'border-box' }}>
<div className="loginpage-body" style={{ height: `${height}px`, overflow: 'auto' }}>
<Row gutter={15}>
<Row >
<Col span={16}>
<div className='loginpage-bodyL' style={{ height: `${height}px`, overflow: 'auto', paddingBottom: '10px', boxSizing: 'border-box' }}>
<iframe srcDoc={iframeSrcDoc} style={{
width: '91%',
height: `613px`,
width: 'calc(100% - 2px)',
height: `90%`,
border: '1px solid var(--color-border)',
// background: 'pink',
marginTop: '18px'
@ -222,7 +254,7 @@ export default function ProjConfigLoginpage(props: any) {
</Col>
<Col span={8}>
<div style={{ height: `${height}px`, overflow: 'auto', }}>
<div style={{ height: `${height}px`, overflow: 'auto',background:'white' }}>
<div className='setloginpage-right' >
<div className='setloginpage-title'>登陆页面设置</div>
<Form
@ -431,7 +463,7 @@ export default function ProjConfigLoginpage(props: any) {
</Upload>
</Form.Item>
</div>
<div className='username-uerpassword'>
{/* <div className='username-uerpassword'> */}
<div className='setloginpage-formitem' >
<div className='setloginpage-formitem-title'>用户名:</div>
@ -443,9 +475,10 @@ export default function ProjConfigLoginpage(props: any) {
>
<Input placeholder="请输入用户名"
style={{
width: '330px',
height: '34px',
background: ' #FFFFFF'
width: '375px',
height: '38px',
background: ' #F8F8F8'
}} />
</Form.Item>
</div>
@ -460,12 +493,13 @@ export default function ProjConfigLoginpage(props: any) {
>
<Input placeholder="请输入密码"
style={{
width: '330px',
height: '34px',
background: ' #FFFFFF'
width: '375px',
height: '38px',
background: ' #F8F8F8'
}} />
</Form.Item>
</div>
{/* </div> */}
</div>
@ -490,28 +524,19 @@ export default function ProjConfigLoginpage(props: any) {
</Form>
<div className='select-loginPage'>
<div className='select-loginPage-title'>选择登陆页面</div>
{/* <div className='select-loginPage-title'>选择登陆页面</div>
<div className='select-loginPage-imgs'>
{
loginpageArray.map((item) => {
return (
// <div>
// <img src={downloadUrl(item.bgImgs)} alt="" />
// </div>
<CardImgSelect
key={item.loginpageId}
id={item.loginpageId}
title={item.mainTitle}
imgs={item.bgImgs}
imgs={item.previewImgs}
selected={item.loginpageId == selectedLoginpageId}
handleClick={() => {
setSelectedLoginpageId(item.loginpageId);
// loginpageArray.forEach(loginpage => {
// loginpage.selected = loginpage.id == item.id;
// })
// setLoginpageArray([
// ...loginpageArray
// ])
console.log('选择的id', item.loginpageId);
form.setFieldValue('loginpageId', item.loginpageId);
preview()
@ -521,8 +546,22 @@ export default function ProjConfigLoginpage(props: any) {
)
})
}
</div> */}
<div style={{ fontSize: 16, width: 140,color: '#5C6065 ', }}>选择登陆页面:
<div style={{fontSize:12,color:'#a8a8a8'}}>(点击图片选择背景)</div>
</div>
<div style={{ width: '100%', height: '100%' }} onClick={() => {
// console.log(selectImgs);
setSelectImgModal(true)
}}>
{/* src={`${Axios.defaults?.baseURL}/route/file/v2/download/true/${previewImgs}`} */}
<img src={downloadUrl(selectImgs)} alt="" width={'93%'} height={'97%'} />
</div>
</div>
</div>
</div>
</Col>
@ -541,7 +580,7 @@ export default function ProjConfigLoginpage(props: any) {
console.log(logoImgArray)
put({
messageApi,
url: `/api/proj/update/config-loginpage/${pathParams.projId}`,
url: `/api/proj/update/config-loginpage/${projId}`,
body: {
logo: logoImgArray.length > 0 ? logoImgArray[0].uid : '',
bgImgs: bgImgArray.length > 0 ? bgImgArray[0].uid : '',
@ -562,10 +601,10 @@ export default function ProjConfigLoginpage(props: any) {
})
// props.closeModal()
// props.closeModal()
setTimeout(()=>{
setTimeout(() => {
// window.location.reload()
props.closeModal()
},500)
}, 500)
},
onFinally() {
@ -578,6 +617,67 @@ export default function ProjConfigLoginpage(props: any) {
}}>
<div>确定提交吗？</div>
</Modal>
{/* 选择页面样式弹窗 */}
<Modal title="选择登录页面"
okText="确定"
cancelText="取消"
destroyOnClose={true}
open={selectImgModal}
width={1070}
style={{ position: 'relative' }}
onOk={() => {
setSelectedLoginpageId(modalId);
form.setFieldValue('loginpageId', modalId)
preview()
setSelectImgs(modalImg)
setSelectImgModal(false)
}}
onCancel={() => {
setModalId(selectedLoginpageId)
setSelectImgModal(false)
}}
>
<div style={{ height: `${height - 80}px`, overflow: 'auto', display: 'flex', justifyContent: 'flex-start', flexWrap: 'wrap', marginTop: 10, }}>
{
loginpageArray.map((item) => {
const imgSrc = `${Axios.defaults?.baseURL}/route/file/v2/download/true/${item.previewImgs}`;
return (
<div key={item.loginpageId} className={item.loginpageId == modalId ? 'page-img-select page-img-selected' : 'page-img-select'}
style={{ marginRight: '10px', marginBottom: '10px' }}
onClick={() => {
setModalId(item.loginpageId)
setModalImg(item.previewImgs)
}}
>
<div className="page-img" >
<Image
src={imgSrc}
preview={false} width={500} height={300} />
</div>
<div className="page-title">
<div className="checkbox"></div>
{/* <div className="text">{props.title ? props.title : '标题'}</div> */}
</div>
</div>
)
})
}
</div>
<div className='pagination'>
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
{/* <Pagination defaultCurrent={1} total={total} defaultPageSize={10} onChange={(page) => {
console.log(page);
setpage(page)
setpageImgArray([])
getPageImgData(page)
}} /> */}
</div>
</Modal>
<Spin tip="正在提交..." spinning={loading} fullscreen />
</>
)

54
src/route/proj/edit/ProjConfigLoginpageShow.tsx
View File

@ -18,7 +18,7 @@ import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { DevUserId, get, downloadUrl, put, uploadImageUrl, post } from "../../../util/AjaxUtils.ts";
import { Form } from 'antd';
import CardImgSelect, { } from "../../../components/card/CardImgSelect.tsx";
// import CardImgSelect, { } from "../../../components/card/CardImgSelect.tsx";
type FormFieldType = {
loginpageId: string;
@ -33,7 +33,7 @@ type FormFieldType = {
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
export default function ProjConfigLoginpage() {
export default function ProjConfigLoginpage(props:any) {
// const nav = useNavigate();
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
@ -44,8 +44,12 @@ export default function ProjConfigLoginpage() {
const [bgImgArray, setBgImgArray] = useState<UploadFile[]>([]);
const [iframeSrcDoc, setIframeSrcDoc] = useState();
const height = window.innerHeight - 200;
const [loginpageArray, setloginpageArray] = useState<any[]>([])
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_loginpageArray, setloginpageArray] = useState<any[]>([])
const [selectedLoginpageId, setSelectedLoginpageId] = useState('');
const [projId] = useState(pathParams.projId ? pathParams.projId : props.projId)
const [selectImgs, setSelectImgs] = useState('')
// 若无选择的背景 默认的第一个图片的背景
// const [defaultId, setDefaultId] = useState('')
const beforeUpload = (file: FileType) => {
@ -59,7 +63,7 @@ export default function ProjConfigLoginpage() {
const preview = () => {
post<any>({
messageApi,
url: `/api/proj/preview/${pathParams.projId}`,
url: `/api/proj/preview/${projId}`,
body: {
// projId: pathParams.projId,
loginpageId: selectedLoginpageId,
@ -85,13 +89,29 @@ export default function ProjConfigLoginpage() {
setloginpageArray(data)
// setDefaultId(data[0].loginpageId)
upLoginPage(data[0].loginpageId)
const newData = data
get<any>({
messageApi,
url: `/api/proj/get/config-loginpage/${projId}`,
onSuccess({ data }) {
if (data.loginpageId) {
// lyp
const imgs = newData.filter((item: { loginpageId: any; }) => item.loginpageId === data.loginpageId)
// ?.previewImgs;
setSelectImgs(imgs[0].previewImgs)
// console.log('lyp',imgs);
}
}
})
}
})
}
const upLoginPage = (id: string) => {
post<any>({
messageApi,
url: `/api/proj/preview/${pathParams.projId}`,
url: `/api/proj/preview/${projId}`,
body: {
// projId: pathParams.projId,
loginpageId: id,
@ -110,7 +130,7 @@ export default function ProjConfigLoginpage() {
getlistLoginpage()
get<any>({
messageApi,
url: `/api/proj/get/config-loginpage/${pathParams.projId}`,
url: `/api/proj/get/config-loginpage/${projId}`,
onSuccess({ data }) {
console.log('寻找被选中id', data);
setSelectedLoginpageId(data.loginpageId);
@ -174,7 +194,7 @@ export default function ProjConfigLoginpage() {
<Row gutter={15}>
<Col span={16}>
<div className='loginpage-bodyL' >
<div className='loginpage-bodyL' style={{ height: `${height}px`, overflow: 'auto', paddingBottom: '10px', boxSizing: 'border-box' }}>
<iframe srcDoc={iframeSrcDoc} style={{
width: '1038px',
height: `613px`,
@ -199,9 +219,9 @@ export default function ProjConfigLoginpage() {
</Col>
<Col span={8}>
<div style={{ height: `${height}px`, overflow: 'auto', }}>
<div style={{ height: `${height}px`, overflow: 'auto',background:'white' }}>
<div className='setloginpage-right' >
<div className='setloginpage-title'>登陆页面设置</div>
<div className='setloginpage-title'>登陆页面查看</div>
<Form
disabled
name="basic"
@ -453,19 +473,17 @@ export default function ProjConfigLoginpage() {
</Form>
<div className='select-loginPage'>
<div className='select-loginPage-title'>选择登陆页面</div>
{/* <div className='select-loginPage-title'>选择登陆页面</div>
{
loginpageArray.map((item) => {
return (
// <div>
// <img src={downloadUrl(item.bgImgs)} alt="" />
// </div>
<CardImgSelect
key={item.loginpageId}
id={item.loginpageId}
title={item.mainTitle}
imgs={item.bgImgs}
imgs={item.previewImgs}
selected={item.loginpageId == selectedLoginpageId}
// handleClick={() => {
// setSelectedLoginpageId(item.loginpageId);
@ -482,7 +500,13 @@ export default function ProjConfigLoginpage() {
/>
)
})
}
} */}
<div style={{ fontSize: 16, width: 140,color: '#5C6065 '}}>查看登陆页面:</div>
<div style={{ width: '100%', height: '100%' }} >
{/* src={`${Axios.defaults?.baseURL}/route/file/v2/download/true/${previewImgs}`} */}
<img src={downloadUrl(selectImgs)} alt="" width={'97%'} height={'97%'} />
</div>
</div>
</div>
</div>

1
src/route/proj/edit/ProjEditStep2.tsx
View File

@ -210,6 +210,7 @@ export default function ProjEditStep2(props: any) {
// 如果验证不通过，可以根据需要处理错误信息
// (errorInfo);
});
belongRowSelection
};
// 联系人人表单信息 点击确定
const contactHandleOk = () => {

13
src/route/proj/edit/proj-config-loginpage.css
View File

@ -12,12 +12,13 @@
align-items: center;
/* height: 975px; */
/* height: 1500px; */
/* border-right: 1px solid rgb(231, 231, 231); */
padding: 0;
}
.loginpage-bodyR {
/* background: white; */
}
.loginpage-bodyL-btn {
@ -102,18 +103,26 @@
background: #F7F8FA;
padding-top: 17px;
margin-left: 17px;
color: #a8a8a8;
}
.select-loginPage {
width: 491px;
/* height: 547px; */
/* width: 491px;
background: #FFFFFF;
box-shadow: 0px 0px 16px 0px rgba(151, 151, 151, 0.18);
border-radius: 3px;
border: 1px solid #F1F1F1;
margin-top: 58px;
padding:24px 0 24px 20px;
box-sizing: border-box; */
padding: 0 21px 0 21px;
box-sizing: border-box;
width: 100%;
height: 200px;
/* background-color: pink; */
margin-top: 20px;
display: flex;
}

6
src/route/proj/proj-new.css
View File

@ -39,7 +39,9 @@
font-size: 18px;
color: #474747;
/* color: #eeeeee; */
width: 83px;
width: 150px;
text-align: right;
/* background-color: red; */
margin-right: 33px;
}
@ -62,6 +64,6 @@
/* background-color: red; */
color: #474747;
margin-top: 12px;
margin-left: 116px;
margin-left: 190px;
}