You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
483 lines
17 KiB
TypeScript
483 lines
17 KiB
TypeScript
import Constants from '@/constants';
|
|
import {
|
|
adminChangeBusinessInfoUsingPost,
|
|
getPbcBusinessByIdUsingPost,
|
|
} from '@/services/pop-b2b2c/pbcBusinessController';
|
|
import { CheckCircleOutlined, InfoCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
|
|
import {
|
|
ProCard,
|
|
ProConfigProvider,
|
|
ProDescriptions,
|
|
ProFormUploadButton,
|
|
} from '@ant-design/pro-components';
|
|
import { PageContainer } from '@ant-design/pro-layout';
|
|
import { useAccess, useParams, useSearchParams } from '@umijs/max';
|
|
import { Button, Image, message, Tag } from 'antd';
|
|
import { RcFile } from 'antd/es/upload';
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
const Detail: React.FC<any> = () => {
|
|
const params = useParams();
|
|
const [searchParams] = useSearchParams();
|
|
const access: any = useAccess();
|
|
const isEdit = searchParams.get('isEdit') === '1';
|
|
|
|
const [info, setInfo] = useState<API.PbcBusiness>({});
|
|
|
|
const getInfo = () => {
|
|
if (params.id) {
|
|
getPbcBusinessByIdUsingPost({ pbcId: parseInt(params.id) }).then((res) => {
|
|
if (res.retcode && res.data) {
|
|
setInfo(res.data);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
getInfo();
|
|
}, []);
|
|
|
|
return (
|
|
<PageContainer
|
|
header={{
|
|
title: '',
|
|
}}
|
|
footer={[
|
|
<Button
|
|
key="back"
|
|
onClick={() => {
|
|
history.back();
|
|
}}
|
|
>
|
|
返回
|
|
</Button>,
|
|
]}
|
|
>
|
|
<ProCard style={{ marginBottom: 12 }}>
|
|
<ProConfigProvider
|
|
valueTypeMap={{
|
|
upload: {
|
|
render: (text) => {
|
|
return text.length > 0 ? text.map((e: any) =>
|
|
<Image width={200} src={e.url}></Image>
|
|
) : (
|
|
<span></span>
|
|
);
|
|
},
|
|
renderFormItem: (text, props) => {
|
|
return (
|
|
<ProFormUploadButton
|
|
{...props}
|
|
{...props?.fieldProps}
|
|
icon={<PlusCircleOutlined style={{ fontSize: 30 }} />}
|
|
title={<div style={{ marginTop: 10, fontSize: 12 }}>点击上传图片</div>}
|
|
fieldProps={{
|
|
name: 'file',
|
|
accept: 'image/*',
|
|
listType: 'picture-card',
|
|
headers: {
|
|
authorization: localStorage.getItem('token') ?? '',
|
|
},
|
|
beforeUpload(file: RcFile) {
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isLt2M) {
|
|
message.error('图片大小不能超过2MB!');
|
|
}
|
|
return isLt2M;
|
|
},
|
|
onPreview: async (file) => {
|
|
console.log(file);
|
|
if (file.uid === '-1') {
|
|
window.open(file.url);
|
|
}
|
|
if (file.response && file.response.retcode) {
|
|
window.open(file.response.data);
|
|
}
|
|
},
|
|
}}
|
|
action={'/oss/imgUpload'}
|
|
onChange={(a: any) => {
|
|
props?.fieldProps.onChange(a.fileList);
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
}}
|
|
hashed={false}
|
|
>
|
|
<ProDescriptions
|
|
editable={
|
|
access.businessSave && isEdit
|
|
? {
|
|
onSave: async (key, record: any, originRow) => {
|
|
let pbcState = record.pbcState;
|
|
let pbcBusinessLogo = "";
|
|
let pbcBusinessImage = [];
|
|
let pbcBusinessPosterUrl = [];
|
|
if (key === 'pbcState') {
|
|
pbcState = record[key] ? 1 : 2;
|
|
}
|
|
if (
|
|
key === 'pbcBusinessLogo' &&
|
|
record[key] &&
|
|
record[key].length > 0
|
|
) {
|
|
if (record[key][0].uid === '-1') {
|
|
pbcBusinessLogo = record[key][0].url;
|
|
}
|
|
if (record[key][0].response && record[key][0].response.retcode) {
|
|
pbcBusinessLogo = record[key][0].response.data;
|
|
}
|
|
}
|
|
if (
|
|
key === 'pbcBusinessImage' &&
|
|
record[key] &&
|
|
record[key].length > 0
|
|
) {
|
|
for (let i = 0; i < record[key].length; i++) {
|
|
const element = record[key][i];
|
|
if (element.uid === '-1') {
|
|
pbcBusinessImage.push(element.url)
|
|
}
|
|
if (element.response && element.response.retcode) {
|
|
pbcBusinessImage.push(element.response.data)
|
|
}
|
|
}
|
|
}
|
|
if (
|
|
key === 'pbcBusinessPosterUrl' &&
|
|
record[key] &&
|
|
record[key].length > 0
|
|
) {
|
|
for (let i = 0; i < record[key].length; i++) {
|
|
const element = record[key][i];
|
|
if (element.uid === '-1') {
|
|
pbcBusinessPosterUrl.push(element.url)
|
|
}
|
|
if (element.response && element.response.retcode) {
|
|
pbcBusinessPosterUrl.push(element.response.data)
|
|
}
|
|
}
|
|
}
|
|
//@ts-ignore
|
|
await adminChangeBusinessInfoUsingPost({
|
|
pbcId: info.pbcId,
|
|
[key]: record[key],
|
|
pbcState: key === 'pbcState' ? pbcState : undefined,
|
|
pbcBusinessLogo: key === 'pbcBusinessLogo' ? pbcBusinessLogo : undefined,
|
|
pbcBusinessImage: key === 'pbcBusinessImage' ? pbcBusinessImage.join(',') : undefined,
|
|
pbcBusinessPosterUrl: key === 'pbcBusinessPosterUrl' ? pbcBusinessPosterUrl.join(',') : undefined,
|
|
})
|
|
.then((res) => {
|
|
if (res.retcode) {
|
|
getInfo();
|
|
message.success('修改成功');
|
|
return record;
|
|
} else {
|
|
message.error('修改失败');
|
|
return originRow;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
return originRow;
|
|
});
|
|
},
|
|
}
|
|
: undefined
|
|
}
|
|
bordered
|
|
title={
|
|
<>
|
|
<span style={{ marginRight: 20 }}>基本信息</span>
|
|
{info.pbcBusinessState === 1 ? (
|
|
<Tag icon={<CheckCircleOutlined />} color="success">
|
|
已认证
|
|
</Tag>
|
|
) : (
|
|
<Tag icon={<InfoCircleOutlined />} color="default">
|
|
未认证
|
|
</Tag>
|
|
)}
|
|
</>
|
|
}
|
|
dataSource={{
|
|
pbcBusinessName: info.pbcBusinessName,
|
|
pbcBusinessType: info.pbcBusinessType,
|
|
pbcState: info.pbcState,
|
|
pbcBusinessContact: info.pbcBusinessContact,
|
|
pbcBusinessContactMobile: info.pbcBusinessContactMobile,
|
|
pbcBusinessLevel: info.pbcBusinessLevel,
|
|
pbcBusinessIntroduction: info.pbcBusinessIntroduction,
|
|
pbcBusinessLogo: info.pbcBusinessLogo ? [
|
|
{
|
|
uid: '-1',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: info.pbcBusinessLogo,
|
|
},
|
|
]
|
|
: [],
|
|
pbcBusinessImage: info.pbcBusinessImage ? info.pbcBusinessImage.split(',').map((e, index) => {
|
|
return {
|
|
uid: '-' + (index+1),
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: e,
|
|
}
|
|
}) : [],
|
|
pbcBusinessPosterUrl: info.pbcBusinessPosterUrl ? info.pbcBusinessPosterUrl.split(',').map((e, index) => {
|
|
return {
|
|
uid: '-' + (index+1),
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: e,
|
|
}
|
|
}) : [],
|
|
}}
|
|
columns={[
|
|
{
|
|
title: '商户名称',
|
|
key: 'pbcBusinessName',
|
|
dataIndex: 'pbcBusinessName',
|
|
},
|
|
{
|
|
title: '商户类别',
|
|
key: 'pbcBusinessType',
|
|
dataIndex: 'pbcBusinessType',
|
|
valueEnum: Constants.pbcBusinessType
|
|
},
|
|
{
|
|
title: '商户状态',
|
|
key: 'pbcState',
|
|
dataIndex: 'pbcState',
|
|
valueType: "switch",
|
|
fieldProps:{ checkedChildren: '启用', unCheckedChildren: '禁用' }
|
|
},
|
|
{
|
|
title: '联系人',
|
|
key: 'pbcBusinessContact',
|
|
dataIndex: 'pbcBusinessContact',
|
|
},
|
|
{
|
|
title: '手机号',
|
|
key: 'pbcBusinessContactMobile',
|
|
dataIndex: 'pbcBusinessContactMobile',
|
|
},
|
|
{
|
|
title: '商户等级',
|
|
key: 'pbcBusinessLevel',
|
|
dataIndex: 'pbcBusinessLevel',
|
|
valueType: "select",
|
|
fieldProps: { options: ['1级', '2级', '3级', '4级', '5级'] }
|
|
},
|
|
{
|
|
title: '商户简介',
|
|
key: 'pbcBusinessIntroduction',
|
|
valueType: 'textarea',
|
|
span: 3,
|
|
dataIndex: 'pbcBusinessIntroduction'
|
|
},
|
|
{
|
|
title: '商户LOGO',
|
|
key: 'pbcBusinessLogo',
|
|
dataIndex: 'pbcBusinessLogo',
|
|
span: 3,
|
|
valueType: 'upload',
|
|
fieldProps: {
|
|
max: 1
|
|
}
|
|
},
|
|
{
|
|
title: '商户图片',
|
|
key: 'pbcBusinessImage',
|
|
dataIndex: 'pbcBusinessImage',
|
|
span: 3,
|
|
valueType: 'upload',
|
|
},
|
|
{
|
|
title: '商户海报',
|
|
key: 'pbcBusinessPosterUrl',
|
|
dataIndex: 'pbcBusinessPosterUrl',
|
|
span: 3,
|
|
valueType: 'upload',
|
|
},
|
|
]}
|
|
column={3}
|
|
></ProDescriptions>
|
|
</ProConfigProvider>
|
|
</ProCard>
|
|
<ProCard style={{ marginBottom: 12 }}>
|
|
<ProConfigProvider
|
|
valueTypeMap={{
|
|
upload: {
|
|
render: (text) => {
|
|
return text.length > 0 ? (
|
|
<Image width={200} src={text[0].url}></Image>
|
|
) : (
|
|
<span></span>
|
|
);
|
|
},
|
|
renderFormItem: (text, props) => {
|
|
return (
|
|
<ProFormUploadButton
|
|
{...props}
|
|
{...props?.fieldProps}
|
|
icon={<PlusCircleOutlined style={{ fontSize: 30 }} />}
|
|
title={<div style={{ marginTop: 10, fontSize: 12 }}>点击上传图片</div>}
|
|
max={1}
|
|
fieldProps={{
|
|
name: 'file',
|
|
accept: 'image/*',
|
|
listType: 'picture-card',
|
|
headers: {
|
|
authorization: localStorage.getItem('token') ?? '',
|
|
},
|
|
beforeUpload(file: RcFile) {
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isLt2M) {
|
|
message.error('图片大小不能超过2MB!');
|
|
}
|
|
return isLt2M;
|
|
},
|
|
onPreview: async (file) => {
|
|
console.log(file);
|
|
if (file.uid === '-1') {
|
|
window.open(file.url);
|
|
}
|
|
if (file.response && file.response.retcode) {
|
|
window.open(file.response.data);
|
|
}
|
|
},
|
|
}}
|
|
action={process.env.BASE_URL + '/oss/imgUpload'}
|
|
onChange={(a: any) => {
|
|
props?.fieldProps.onChange(a.fileList);
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
}}
|
|
hashed={false}
|
|
>
|
|
<ProDescriptions
|
|
dataSource={{
|
|
pbcBusinessHead: info.pbcBusinessHead,
|
|
pbcBusinessHeadUserNo: info.pbcBusinessHeadUserNo,
|
|
pbcBusinessStartDate: info.pbcBusinessStartDate,
|
|
pbcBusinessBank: info.pbcBusinessBank,
|
|
pbcBusinessAccountName: info.pbcBusinessAccountName,
|
|
pbcBusinessAccount: info.pbcBusinessAccount,
|
|
pbcBusinessMainCategory: info.pbcBusinessMainCategory,
|
|
pbcBusinessLicenseUrl: info.pbcBusinessLicenseUrl
|
|
? [
|
|
{
|
|
uid: '-1',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: info.pbcBusinessLicenseUrl,
|
|
},
|
|
]
|
|
: [],
|
|
}}
|
|
editable={
|
|
access.businessSave && isEdit
|
|
? {
|
|
onSave: async (key, record: any, originRow) => {
|
|
let pbcBusinessLicenseUrl = "";
|
|
if (
|
|
key === 'pbcBusinessLicenseUrl' &&
|
|
record[key] &&
|
|
record[key].length > 0
|
|
) {
|
|
if (record[key][0].uid === '-1') {
|
|
pbcBusinessLicenseUrl = record[key][0].url;
|
|
}
|
|
if (record[key][0].response && record[key][0].response.retcode) {
|
|
pbcBusinessLicenseUrl = record[key][0].response.data;
|
|
}
|
|
}
|
|
//@ts-ignore
|
|
await adminChangeBusinessInfoUsingPost({
|
|
pbcId: info.pbcId,
|
|
[key]: record[key],
|
|
pbcBusinessLicenseUrl:
|
|
key === 'pbcBusinessLicenseUrl' ? pbcBusinessLicenseUrl : undefined,
|
|
})
|
|
.then((res) => {
|
|
if (res.retcode) {
|
|
getInfo();
|
|
message.success('修改成功');
|
|
return record;
|
|
} else {
|
|
message.error('修改失败');
|
|
return originRow;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
return originRow;
|
|
});
|
|
},
|
|
}
|
|
: undefined
|
|
}
|
|
columns={[
|
|
{
|
|
title: '法人',
|
|
key: 'pbcBusinessHead',
|
|
dataIndex: 'pbcBusinessHead',
|
|
},
|
|
{
|
|
title: '法人身份证号',
|
|
key: 'pbcBusinessHeadUserNo',
|
|
dataIndex: 'pbcBusinessHeadUserNo',
|
|
},
|
|
{
|
|
title: '公司成立时间',
|
|
key: 'pbcBusinessStartDate',
|
|
valueType: 'date',
|
|
dataIndex: 'pbcBusinessStartDate',
|
|
},
|
|
{
|
|
title: '开户行',
|
|
key: 'pbcBusinessBank',
|
|
dataIndex: 'pbcBusinessBank',
|
|
},
|
|
{
|
|
title: '商户账户名称',
|
|
key: 'pbcBusinessAccountName',
|
|
dataIndex: 'pbcBusinessAccountName',
|
|
},
|
|
{
|
|
title: '收款账号',
|
|
key: 'pbcBusinessAccount',
|
|
dataIndex: 'pbcBusinessAccount',
|
|
},
|
|
{
|
|
title: '经营范围',
|
|
key: 'pbcBusinessMainCategory',
|
|
valueType: 'textarea',
|
|
span: 3,
|
|
dataIndex: 'pbcBusinessMainCategory',
|
|
},
|
|
{
|
|
title: '营业执照',
|
|
key: 'pbcBusinessLicenseUrl',
|
|
dataIndex: 'pbcBusinessLicenseUrl',
|
|
span: 3,
|
|
valueType: 'upload',
|
|
},
|
|
]}
|
|
bordered
|
|
title="工商信息"
|
|
></ProDescriptions>
|
|
</ProConfigProvider>
|
|
</ProCard>
|
|
</PageContainer>
|
|
);
|
|
};
|
|
|
|
export default Detail;
|