= [
+ // title: '名称',
+ // dataIndex: 'invoiceName',
+ // align: 'center',
+ // width: 180
+ {
+ title: '序号',
+ align: 'center',
+ dataIndex: 'trademarkUserId',
+ render: (_text, _record, index) => (page - 1) * 5 + index + 1, // 显示序号，从1开始
+ },
+ {
+ title: '申请人',
+ align: 'center',
+
+ dataIndex: 'name',
+ // render: (text: string) =>
{text},
+ },
+ // {
+ // title: '证件号',
+ // align: 'center',
+
+ // dataIndex: 'identity',
+ // // render: (text: string) =>
{text},
+ // },
+
+ {
+ title: '申请人类型',
+ dataIndex: 'type',
+ align: 'center',
+ render: (text: string) =>
{text == '1' ? '个人/个体工商户' : '企业'},
+ },
+ {
+ title: '联系人',
+ dataIndex: 'contactName',
+ align: 'center',
+
+ },
+ {
+ title: '联系人电话',
+ dataIndex: 'contactPhone',
+ align: 'center',
+
+ },
+ {
+
+ title: '操作',
+ align: 'center',
+ dataIndex: 'operation',
+ render: (text: string, record: any) => {
+ return (
+
+
+
+
+
+ )
+ }
+ }
+ ];
+ const [page, setPage] = useState(1);
+ const [total, setTotal] = useState(0);
+ const [listLoading, setListLoading] = useState(false);
+ const [selectKeyWords, setSelectKeyWords] = useState('');
+ const [tableData, setTableData] = useState
([])
+ // 获取申请人列表
+ const getTrademarkApplicantList = async (page: number) => {
+ try {
+ setListLoading(true);
+ const res: any = await trademarkApplicantList({
+ page,
+ rows: 5,
+ keywords: selectKeyWords
+ })
+
+ if (res.rows.length <= 0 && page > 1) {
+ getTrademarkApplicantList(page - 1)
+ } else {
+ setTableData(res.rows)
+ setTotal(res.total)
+ setListLoading(false);
+ }
+
+ } catch (error: any) {
+ setListLoading(false)
+ if (error.response) {
+ const data = error.response.data;
+ messageApi.open({
+ type: 'error',
+ content: data.msg ? data.msg : `${data.path}(${data.status})`,
+ });
+ } else {
+ console.error(error)
+ }
+ } finally {
+ setListLoading(false)
+ }
+ }
+ // 加载省份数据
+ useEffect(() => {
+ const loadProvinces = async () => {
+ try {
+ // 假设传入空字符串获取省份列表
+ const res: any = await getCityList('0');
+ const provinces = res.map((province: any) => ({
+ value: province.areaId,
+ label: province.areaName,
+ children: [], // 标记有子节点
+ isLeaf: false,
+ }));
+ setAreaArray(provinces);
+ } catch (error: any) {
+ if (error.response) {
+ const data = error.response.data;
+ messageApi.open({
+ type: 'error',
+ content: data.msg ? data.msg : `${data.path}(${data.status})`,
+ });
+ } else {
+ console.error(error);
+ }
+ }
+ };
+
+ loadProvinces();
+ }, []);
+
+ const [messageApi, contextHolder] = useMessage();
+ // 省市
+ const [areaArray, setAreaArray] = useState([]);
+ // 加载城市列表
+ const loadCityList = async (selectedOptions: Option[]) => {
+ const targetOption = selectedOptions[selectedOptions.length - 1];
+ // console.log('targetOption', targetOption.children);
+ try {
+ const res: any = await getCityList(targetOption.value as string);
+ // console.log('城市列表', res);
+
+ const cities = res.map((city: any) => ({
+ value: city.areaId,
+ label: city.areaName,
+
+ }));
+ targetOption.children = cities;
+ // 更新 areaArray 状态
+ setAreaArray([...areaArray]);
+ } catch (error: any) {
+
+
+ if (error.response) {
+ const data = error.response.data;
+ messageApi.open({
+ type: 'error',
+ content: data.msg ? data.msg : `${data.path}(${data.status})`,
+ });
+ } else {
+ console.error(error)
+ }
+ }
+ };
+ const token = sessionStorage.getItem('token')
// const [form] = Form.useForm();
- const [formA] = Form.useForm(); //
- const onFinishA = (values:any) => {
+ const [formA] = Form.useForm();
+ const [addLoading, setAddLoading] = useState(false)
+ const onFinishA = async (values: any) => {
console.log(values);
-
+ console.log(qualifications);
+ if (trademarkUserId) {
+ alert('编辑')
+ } else {
+ try {
+ setAddLoading(true)
+ const newValues = { ...values };
+ newValues.rangeAddress = newValues.rangeAddress.join(',');
+ await addTrademarkApplicant({
+ type: applicantType,
+ subType: qualifications,
+ // trademarkId: props.trademarkId,
+ nationality: '大陆',
+ ...newValues
+ })
+ getTrademarkApplicantList(1)
+ setPage(1)
+ setAddLoading(false)
+ setAddPeopleModal(false)
+ init()
+ messageApi.open({
+ type: 'success',
+ content: '新增成功',
+ });
+ } catch (error: any) {
+ setAddLoading(false)
+ if (error.response) {
+ const data = error.response.data;
+ messageApi.open({
+ type: 'error',
+ content: data.msg ? data.msg : `${data.path}(${data.status})`,
+ });
+ } else {
+ console.error(error)
+ }
+ } finally {
+ setAddLoading(false)
+ }
+ }
+
+ }
+ const [formB] = Form.useForm();
+ const onFinishB = async (values: any) => {
+ console.log(values);
+ if (trademarkUserId) {
+ alert('编辑')
+ } else {
+ try {
+ setAddLoading(true)
+ const newValues = { ...values };
+ newValues.rangeAddress = newValues.rangeAddress.join(',');
+ await addTrademarkApplicant({
+ type: applicantType,
+ // subType: qualifications,
+ // trademarkId: props.trademarkId,
+ nationality: '大陆',
+ ...newValues
+ })
+
+ getTrademarkApplicantList(1)
+ setPage(1)
+ setAddLoading(false)
+ setAddPeopleModal(false)
+ init()
+ messageApi.open({
+ type: 'success',
+ content: '新增成功',
+ });
+
+ } catch (error: any) {
+ setAddLoading(false)
+ if (error.response) {
+ const data = error.response.data;
+ messageApi.open({
+ type: 'error',
+ content: data.msg ? data.msg : `${data.path}(${data.status})`,
+ });
+ } else {
+ console.error(error)
+ }
+ } finally {
+ setAddLoading(false)
+ }
+ }
+
+
}
const height = window.innerHeight - 350;
const [addPeopleModal, setAddPeopleModal] = useState(false)
-
+ const [deleteModal, setDeleteModal] = useState(false)
const [applicantType, setApplicantType] = useState('1') //申请人类型
const applicantTypeChange = (e: any) => {
setApplicantType(e.target.value)
@@ -22,14 +320,150 @@ export default function EditThree(props: any) {
const qualificationsChange = (e: any) => {
setQualifications(e.target.value)
}
+ const [upLoading, setUpLoading] = useState(false)
+ // 个人身份证图片信息
+ const [personalIdCard, setPersonalIdCard] = useState([])
+ const personalIdCardChange = (info: any) => {
+ console.log(info.file.status);
+
+
+ if (info.file.status === 'uploading') {
+ // setFileList([])
+ setUpLoading(true)
+ return;
+ }
+ if (info.file.status === 'done') {
+ console.log(info);
+
+ setUpLoading(false)
+ // const fileId = info.file.response.data.fileId;
+ // // console.log(downloadUrl(fileId));
+
+ // const url = showImage(fileId, false);
+ console.log(info.file.response.data.fileId);
+
+ setPersonalIdCard([
+ {
+ uid: info.file.response.data.fileId,
+ name: info.file.response.data.fileName,
+ status: 'done',
+ url: showImage(info.file.response.data.fileId, false)
+ }
+ ])
+ // 修改为设置 applicantcard 字段的值
+ formA.setFieldsValue({ identityPhoto: info.file.response.data.fileId });
+ return;
+
+
+ }
+ if (info.file.status === 'error') {
+ formA.setFieldsValue({ identityPhoto: '' });
+ setUpLoading(false)
+ message.error(`上传失败`);
+ return;
+ }
+ }
+ const [upPersonalLicenseLoading, setUpPersonalLicenseLoading] = useState(false)
+ // 个体营业执照
+ const [personalLicense, setPersonalLicense] = useState([])
+ const personalLicenseChange = (info: any) => {
+ if (info.file.status === 'uploading') {
+ // setFileList([])
+ setUpPersonalLicenseLoading(true)
+ return;
+ }
+ if (info.file.status === 'done') {
+ console.log(info);
+
+ setUpPersonalLicenseLoading(false)
+ // const fileId = info.file.response.data.fileId;
+ // // console.log(downloadUrl(fileId));
+
+ // const url = showImage(fileId, false);
+ console.log(info.file.response.data.fileId);
+
+ setPersonalLicense([
+ {
+ uid: info.file.response.data.fileId,
+ name: info.file.response.data.fileName,
+ status: 'done',
+ url: showImage(info.file.response.data.fileId, false)
+ }
+ ])
+ // 修改为设置 applicantcard 字段的值
+ formA.setFieldsValue({ businessLicense: info.file.response.data.fileId });
+ return;
+
+
+ }
+ if (info.file.status === 'error') {
+ setUpPersonalLicenseLoading(false)
+ formA.setFieldsValue({ businessLicense: '' });
+ message.error(`上传失败`);
+ return;
+ }
+ }
+
+ const [upEnterpriseLicenseLoading, setUpEnterpriseLicenseLoading] = useState(false)
+ // 企业营业执照
+ const [enterpriseLicense, setEnterpriseLicense] = useState([])
+ const enterpriseLicenseChange = (info: any) => {
+ if (info.file.status === 'uploading') {
+ // setFileList([])
+ setUpEnterpriseLicenseLoading(true)
+ return;
+ }
+ if (info.file.status === 'done') {
+ console.log(info);
+
+ setUpEnterpriseLicenseLoading(false)
+ // const fileId = info.file.response.data.fileId;
+ // // console.log(downloadUrl(fileId));
+
+ // const url = showImage(fileId, false);
+ console.log(info.file.response.data.fileId);
+
+ setEnterpriseLicense([
+ {
+ uid: info.file.response.data.fileId,
+ name: info.file.response.data.fileName,
+ status: 'done',
+ url: showImage(info.file.response.data.fileId, false)
+ }
+ ])
+ // 修改为设置 applicantcard 字段的值
+ formB.setFieldsValue({ businessLicense: info.file.response.data.fileId });
+ }
+ if (info.file.status === 'error') {
+ setUpEnterpriseLicenseLoading(false)
+ formB.setFieldsValue({ businessLicense: '' });
+
+ message.error(`上传失败`);
+ return;
+ }
+
+ }
+
const handleSubmit = () => {
- // form.submit();
+ // formA.submit();
props.setEditProcess(4);
};
+ //重置新建申请人信息
+ const init = () => {
+ setApplicantType('1')
+ setQualifications('1')
+ formA.resetFields();
+ formB.resetFields();
+ setPersonalIdCard([])
+ setPersonalLicense([])
+ setEnterpriseLicense([])
+ }
return (
+ {contextHolder}
+
+ placeholder="选择申请人"
+ value={applicantData.name}
+ >
+ }}
+ onClick={() => {
+ setPage(1)
+ setSelectPeopleModal(true)
+ getTrademarkApplicantList(1)
+ }}
+ >
{
setAddPeopleModal(true)
+ setDisabled(false)
+ setTrademarkUserId('')
+ setShowBtn(true)
}}>
{
+ if (applicantType == '1') {
+ formA.submit()
+ }
+ if (applicantType == '2') {
+ formB.submit()
+ }
+ }}
+ okText='保存'
+ cancelText='取消'
+ // 点击遮罩禁止关闭
+ maskClosable={false}
onCancel={() => {
setAddPeopleModal(false)
+ init()
}}>
-
-
申请人信息
-
-
- 申请人类型*：
-
-
+
+
-
- 个人个体工商户
- 企业
-
-
-
-
- 营业执照类型为(个体工商户)，请选择:(个人/个体工商户) 营业执照类型为(公司企业)，请选择:(企业)
-
-
- 申请人提交审核后，不支持修改类型:如需修改，请重新创建申请人
-
-
-
-
- 资质类型
*：
+
+
申请人信息
+
+
+ *申请人类型：
+
+
+
+ 个人/个体工商户
+ 企业
+
+
+
+
+ 营业执照类型为(个体工商户)，请选择:(个人/个体工商户) 营业执照类型为(公司企业)，请选择:(企业)
+
+
+ {/* 申请人提交审核后，不支持修改类型:如需修改，请重新创建申请人 */}
-
- 个人
- 体工商户
-
-
-
-
-
+
+
-
+
{ setSelectPeopleModal(false) }}
+ width={1200} >
+
+
+
+
+
+
+ rowSelection={{
+ type: 'radio',
+ selectedRowKeys: [selectedRowKey],
+ onChange: (selectedRowKeys: React.Key[]) => {
+ setSelectedRowKey(selectedRowKeys[0] as string);
+ },
+ }}
+ // 设置分页
+ pagination={{
+ total: total,
+ pageSize: 5,
+ current: page,
+ // 取消设置每显示几条
+ showSizeChanger: false,
+ // 点击分页按钮
+ onChange: (page: number) => {
+ setPage(page);
+ getTrademarkApplicantList(page)
+ }
+ }}
+ columns={columns}
+ dataSource={tableData}
+ onRow={(record) => ({
+ style: {
+ cursor: 'pointer',
+ },
+ onClick: (event) => {
+ // 检查点击的元素是否属于操作列
+ const isOperationColumn = (event.target as HTMLElement).closest('.ant-table-cell-operations');
+ if (!isOperationColumn) {
+ setSelectedRowKey(record.trademarkUserId);
+ }
+
+ }
+ })}
+ rowKey='trademarkUserId'
+ />
+
+
+
+
{ setDeleteModal(false) }}
+ onOk={async () => {
+ try {
+ await deleteTrademarkApplicant(trademarkUserId)
+ getTrademarkApplicantList(page)
+ setDeleteModal(false)
+ } catch (error: any) {
+ if (error.response) {
+ const data = error.response.data;
+ messageApi.open({
+ type: 'error',
+ content: data.msg ? data.msg : `${data.path}(${data.status})`,
+ });
+ } else {
+ console.error(error)
+ }
+ }
+ }}
+ >
+ 删除后无记录?确定删除吗?
+
+
)
}
diff --git a/src/route/TrademarkMall/components/EditThree/edit-three.css b/src/route/TrademarkMall/components/EditThree/edit-three.css
index ceb5c12..45806d0 100644
--- a/src/route/TrademarkMall/components/EditThree/edit-three.css
+++ b/src/route/TrademarkMall/components/EditThree/edit-three.css
@@ -1,8 +1,32 @@
-.addPeopleBox{
+/* 自定义滚动条宽度 */
+/* .editThreeAddPeopleBox {
+ overflow-y: auto;
+ scrollbar-width: thin;
+ scrollbar-color: #888 #f1f1f1;
+}
+.editThreeAddPeopleBox::-webkit-scrollbar {
+ width: 8px;
+}
+.editThreeAddPeopleBox::-webkit-scrollbar-track {
+ background: #f1f1f1;
+}
+
+.editThreeAddPeopleBox::-webkit-scrollbar-thumb {
+ background: #888;
+ border-radius: 4px;
+}
+
+.editThreeAddPeopleBox::-webkit-scrollbar-thumb:hover {
+ background: #555;
+} */
+.editThreeAddPeopleBox{
+ padding-top: 10px;
+}
+.addPeopleBox {
width: 300px;
height: 150px;
border: 1px solid #D9D9D9;
- color:#979797;
+ color: #979797;
display: flex;
flex-direction: column;
align-items: center;
@@ -11,25 +35,80 @@
margin-left: 100px;
margin-top: 20px;
}
-.addPeopleBox:hover{
+
+.addPeopleBox:hover {
border: 1px solid #5892e9;
color: #5892e9;
}
-.addPeopleTitle{
+
+.addPeopleTitle {
font-size: 18px;
font-weight: 700;
+ /* margin-top: 10px; */
}
-.addPeopleItem{
+
+.addPeopleItem {
display: flex;
align-items: center;
+ margin-top: 30px;
}
-.addPeopleItemTitle{
+
+.addPeopleFormItem {
+ /* display: flex; */
+ /* margin-top: 20px; */
+
+
+}
+.addFormItemTitle{
+ margin-bottom: 5px;
+}
+.addPeopleFormItemR{
+ margin-left: 50px;
+}
+
+.addPeopleItemTitle {
font-size: 16px;
/* background-color: skyblue; */
- width: 120px;
+ /* width: 120px; */
text-align: left;
margin-right: 10px;
}
-.redTips{
+.addPeopleItemTitleS{
+ width: 90px;
+}
+
+.redTips {
color: red;
+}
+
+.editThreeUpBox {
+ width: 300px;
+ height: 150px;
+ border: 1px dashed #D9D9D9;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: #979797;
+}
+
+.exampleImg {
+ width: 190px;
+ height: 150px;
+ border: 1px dashed #D9D9D9;
+ border: 1px dashed #D9D9D9;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-left: 20px;
+
+}
+.addressLine{
+ width: 10px;
+ height: 1px;
+ background: rgb(182, 182, 182);
+ margin-left: 5px;
+ margin-right: 5px;
}
\ No newline at end of file
diff --git a/src/static/editThree/individualLicense.png b/src/static/editThree/individualLicense.png
new file mode 100644
index 0000000..780aa4d
Binary files /dev/null and b/src/static/editThree/individualLicense.png differ
diff --git a/src/static/editThree/personCard.png b/src/static/editThree/personCard.png
new file mode 100644
index 0000000..e276baa
Binary files /dev/null and b/src/static/editThree/personCard.png differ
diff --git a/src/static/editThree/personLicense.png b/src/static/editThree/personLicense.png
new file mode 100644
index 0000000..35525a0
Binary files /dev/null and b/src/static/editThree/personLicense.png differ