Skip to content

A
admin
提交 7cd00694 作者: ZhangLingKun
操作

功能：加盟入驻地图选点

上级 eda241f0
正在显示 包含 679 行增加 和 106 行删除
index.html
...@@ -9,5 +9,10 @@ ...@@ -9,5 +9,10 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
<script type="text/javascript" >
window._AMapSecurityConfig = {
securityJsCode:'a9cd5c6e4eb563b65884efc14759d6a1',
}
</script>
</body> </body>
</html> </html>
package.json
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"buildDev": "vite build --mode development", "build:dev": "vite build --mode development",
"build:tsc": "tsc && vite build", "build:tsc": "tsc && vite build",
"preview": "vite preview", "preview": "vite preview",
"lint": "npx eslint src", "lint": "npx eslint src",
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
"format": "npm run prettier:fix && npm run lint:fix" "format": "npm run prettier:fix && npm run lint:fix"
}, },
"dependencies": { "dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@ant-design/icons": "^5.0.1", "@ant-design/icons": "^5.0.1",
"@reduxjs/toolkit": "^1.9.2", "@reduxjs/toolkit": "^1.9.2",
"@wangeditor/editor": "^5.1.23", "@wangeditor/editor": "^5.1.23",
...@@ -31,6 +32,7 @@ ...@@ -31,6 +32,7 @@
"match-sorter": "^6.3.1", "match-sorter": "^6.3.1",
"moment": "^2.29.4", "moment": "^2.29.4",
"pinyin-pro": "^3.14.0", "pinyin-pro": "^3.14.0",
"prop-types": "^15.8.1",
"qs": "^6.10.3", "qs": "^6.10.3",
"query-string": "^8.1.0", "query-string": "^8.1.0",
"react": "^18.1.0", "react": "^18.1.0",
...@@ -66,4 +68,4 @@ ...@@ -66,4 +68,4 @@
"vite": "^4.3.9", "vite": "^4.3.9",
"vite-tsconfig-paths": "^3.5.0" "vite-tsconfig-paths": "^3.5.0"
} }
} }
\ No newline at end of file
src/api/interface/customManageType.ts
...@@ -107,6 +107,7 @@ export type listUserApplyTag = InterListFunction< ...@@ -107,6 +107,7 @@ export type listUserApplyTag = InterListFunction<
{ {
applyStatus?: number; applyStatus?: number;
cooperationTagId?: number; cooperationTagId?: number;
companyName?: string;
endTime?: string; endTime?: string;
startTime?: string; startTime?: string;
}, },
...@@ -115,11 +116,17 @@ export type listUserApplyTag = InterListFunction< ...@@ -115,11 +116,17 @@ export type listUserApplyTag = InterListFunction<
applyPhone: string; applyPhone: string;
applyTime: string; applyTime: string;
approvalStatus: number; approvalStatus: number;
attachmentList: null; attachmentList: Array<{
type: number;
url: string;
}>;
companyName: string;
content: string;
cooperationTagId: number; cooperationTagId: number;
cooperationTagName: string; cooperationTagName: string;
id: number; id: number;
remark: string; remark: string;
score: number;
userAccountId: number; userAccountId: number;
} }
>; >;
...@@ -158,3 +165,33 @@ export type deleteApplyTag = InterFunction< ...@@ -158,3 +165,33 @@ export type deleteApplyTag = InterFunction<
}, },
NonNullable<unknown> NonNullable<unknown>
>; >;
// 后台-编辑详情信息
export type editUserApplyTagDetails = InterFunction<
{
id: number;
},
{
address: string;
content: string;
cooperationTagId: number;
id: number;
lat: number;
lon: number;
name: string;
score: number;
}
>;
// 后台-编辑服务商信息
export type editUserApplyTag = InterFunction<
{
address?: string;
content?: string;
cooperationTagId?: number;
id: number;
lat?: number;
lon?: number;
name?: string;
score?: number;
},
NonNullable<unknown>
>;
src/api/modules/customManage.ts
...@@ -7,6 +7,8 @@ import { ...@@ -7,6 +7,8 @@ import {
CompanyListTag, CompanyListTag,
cooperationListTag, cooperationListTag,
deleteApplyTag, deleteApplyTag,
editUserApplyTag,
editUserApplyTagDetails,
listAppUserType, listAppUserType,
listUserApplyTag, listUserApplyTag,
userAccountUpdateType, userAccountUpdateType,
...@@ -43,4 +45,10 @@ export class CustomManageAPI { ...@@ -43,4 +45,10 @@ export class CustomManageAPI {
// 强制删除 // 强制删除
static deleteApplyTag: deleteApplyTag = (params) => static deleteApplyTag: deleteApplyTag = (params) =>
axios.get('/userapp/cooperation/deleteApplyTag', { params }); axios.get('/userapp/cooperation/deleteApplyTag', { params });
// 后台-编辑详情信息
static editUserApplyTagDetails: editUserApplyTagDetails = (params) =>
axios.get('/userapp/cooperation/editUserApplyTagDetails', { params });
// 后台-编辑服务商信息
static editUserApplyTag: editUserApplyTag = (params) =>
axios.post('/userapp/cooperation/editUserApplyTag', params);
} }
src/assets/style/App.scss
...@@ -51,3 +51,12 @@ ...@@ -51,3 +51,12 @@
-moz-border-radius: 2em; -moz-border-radius: 2em;
border-radius: 2em; border-radius: 2em;
} }
.ant-input-disabled{
color: rgba(0, 0, 0, 0.68) !important;
}
.ant-select-disabled{
.ant-select-selection-item{
color: rgba(0, 0, 0, 0.68) !important;
}
}
src/components/select-map/index.tsx 0 → 100644
import { FC, useEffect, useRef, useState } from 'react';
import { Select, Input, Modal } from 'antd';
import MapComponent from '~/components/select-map/map';
import { debounce } from 'lodash';
// 传参类型
interface propType {
title?: string;
open: boolean;
closed: any;
submit: any;
}
const SelectMapModal: FC<propType> = (props) => {
SelectMapModal.defaultProps = {
title: '选择地点',
};
// 参数
const { title, open, closed, submit } = props;
// 子组件事件
const childRef = useRef<{
onSearch: (e: string) => void;
addMarker: (e: { lat: number; lng: number }) => void;
clearMarker: () => void;
}>(null);
// 位置信息
const [position, setPosition] = useState<{ lat: number; lon: number; address: string }>();
// 搜索地点
const [addressList, setAddressList] = useState<{ label: string; value: number; data: any }[]>();
// 取消事件
const handleCancel = () => {
setPosition(undefined);
setAddressList([]);
closed();
};
// 确认事件
const handleOk = () => {
submit(position);
};
// 搜索地点
const handleSearch = (e: string) => {
if (e) {
childRef.current?.onSearch(e);
} else {
setAddressList([]);
}
};
// 防抖
const handleSearchDebounced = debounce(handleSearch, 500);
// 选择了地址
const handleSearchAddress = (e: number) => {
if (e) {
// console.log(addressList?.[e].data);
// eslint-disable-next-line no-unsafe-optional-chaining
const { lat, lng } = addressList?.[e].data.location;
childRef.current?.addMarker({ lat, lng });
setPosition({
lat: lat,
lon: lng,
address: `${addressList?.[e].data.name}`,
});
} else {
childRef.current?.clearMarker();
setPosition(undefined);
}
};
// componentDidMount
useEffect(() => {
if (!open) return;
}, [open]);
return (
<Modal open={open} title={title} onCancel={handleCancel} onOk={handleOk} destroyOnClose>
<div
style={{
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
marginBottom: '10px',
}}
>
<div style={{ width: '60px' }}>搜索地点：</div>
<Select
showSearch
placeholder={'请输入地点'}
optionFilterProp='children'
style={{ width: '80%', marginRight: '20px' }}
allowClear
onSearch={handleSearchDebounced}
filterOption={(input, option) =>
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
}
options={addressList}
onChange={handleSearchAddress}
/>
</div>
<MapComponent
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
ref={childRef}
onSelectAddress={(e) => {
setPosition({
lat: e.lat,
lon: e.lng,
address: e.formattedAddress,
});
}}
onSearchAddress={(e) => {
setAddressList(e.map((i, j) => ({ label: i.name, value: j, data: i })));
}}
></MapComponent>
<div
style={{
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: '10px',
marginBottom: '20px',
}}
>
<div style={{ width: '60px' }}>选择地点：</div>
<Input
value={position?.address}
placeholder={'请选择地点'}
maxLength={25}
allowClear
style={{ width: '80%', marginRight: '20px' }}
disabled
/>
</div>
</Modal>
);
};
export default SelectMapModal;
src/components/select-map/map.tsx 0 → 100644
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import AMapLoader from '@amap/amap-jsapi-loader';
import { Component } from 'react';
interface MapComponentProps {
onSelectAddress: (e: {
adcode: string;
building: string;
buildingType: string;
city: string;
citycode: string;
district: string;
formattedAddress: string;
neighborhood: string;
neighborhoodType: string;
province: string;
street: string;
streetNumber: string;
towncode: string;
township: string;
lat: number;
lng: number;
}) => void;
onSearchAddress: (
e: {
id: string;
name: string;
district: string;
adcode: string;
location: Array<number>;
address: string;
typecode: string;
}[],
) => void;
}
class MapComponent extends Component<MapComponentProps> {
constructor(props) {
super(props);
this.map = {};
this.autoComplete = {};
}
// dom渲染成功后进行map对象的创建
componentDidMount() {
AMapLoader.load({
key: '7a3a24e85672c06ab466d790fb5d38a3', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
this.map = new AMap.Map('container', {
// 设置地图容器id
viewMode: '3D', // 是否为3D地图模式
zoom: 10, // 初始化地图级别
// center: [105.602725, 37.076636], // 初始化地图中心点位置
});
AMap.plugin(
['AMap.ToolBar', 'AMap.AutoComplete', 'AMap.Scale', 'AMap.Geocoder', 'AMap.Marker'],
() => {
// 缩放
const scale = new AMap.Scale();
this.map.addControl(scale);
// 工具栏
const toolbar = new AMap.ToolBar();
this.map.addControl(toolbar);
// 位置搜索
const autoOptions = {
//city 限定城市，默认全国
city: '全国',
};
// 实例化AutoComplete
this.autoComplete = new AMap.AutoComplete(autoOptions);
},
);
this.map.on('click', (e) => {
this.map.clearMap();
const { lat, lng } = e.lnglat;
// 新建marker实例
const marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: '选择的位置',
});
// 添加marker
this.map.add(marker);
// 获取地理信息
const geocoder = new AMap.Geocoder({
city: '全国',
});
// console.log('点击 --->', e);
geocoder.getAddress([lng, lat], (status, result) => {
if (status === 'complete' && result.info === 'OK') {
// result为对应的地理位置详细信息
const { formattedAddress, addressComponent } = result.regeocode;
// console.log('点击选择-->', status, result);
this.props.onSelectAddress({
lat,
lng,
formattedAddress,
...addressComponent,
});
}
});
});
})
.catch((e) => {
console.log(e);
});
}
componentWillUnmount() {
this.map.destroy();
}
// 搜索数据
onSearch(keyword: string) {
// 根据关键字进行搜索
this.autoComplete.search(keyword, (status, result) => {
// 搜索成功时，result即是对应的匹配数据
if (status === 'complete' && result.info === 'OK') {
this.props.onSearchAddress(result.tips);
}
});
}
// 添加点标记
addMarker(e: { lat: number; lng: number }) {
const { lat, lng } = e;
this.map.clearMap();
// 新建marker实例
const marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: '选择的位置',
});
// 添加marker
this.map.add(marker);
// 设置中心点
this.map.setCenter([lng, lat]);
}
// 清除地图上的点标记
clearMarker() {
this.map.clearMap();
}
render() {
// 初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
return <div id='container' className='map' style={{ height: '400px' }}></div>;
}
}
// 导出地图组建类
export default MapComponent;
src/pages/customManage/customIdentity/comp/addEditModal/index.tsx
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { Button, message, Modal } from 'antd';
import { InterDataType, InterListType, InterReqType } from '~/api/interface';
import { CustomManageAPI } from '~/api';
import { import {
applyTagDetails, editUserApplyTag,
approvalApplyTag, editUserApplyTagDetails,
listUserApplyTag, listUserApplyTag,
} from '~/api/interface/customManageType'; } from '~/api/interface/customManageType';
import './index.scss'; import { InterDataType, InterListType, InterReqType } from '~/api/interface';
import { PlusOutlined } from '@ant-design/icons'; import { Button, Form, Input, message, Modal, Rate, Select, Space } from 'antd';
import { Uploader } from '~/components/uploader'; import { CustomManageAPI } from '~/api';
import SelectMapModal from '~/components/select-map';
// 列表的类型 // 数据类型
type DataType = InterDataType<applyTagDetails>; type DataType = InterDataType<editUserApplyTagDetails>;
// 列表的类型 // 列表的类型
type TableType = InterListType<listUserApplyTag>; type TableType = InterListType<listUserApplyTag>;
// 请求的表单类型 // 请求的表单类型
type ReqType = InterReqType<approvalApplyTag>; type ReqType = InterReqType<editUserApplyTag>;
// 传参类型 // 传参类型
interface propType { interface propType {
title: string; title: string;
...@@ -26,111 +24,151 @@ interface propType { ...@@ -26,111 +24,151 @@ interface propType {
} }
const AddEditModal: FC<propType> = (props) => { const AddEditModal: FC<propType> = (props) => {
AddEditModal.defaultProps = {
data: undefined,
};
// 参数 // 参数
const { title, open, closed, data } = props; const { title, open, closed, data } = props;
const [applyTagDetail, setApplyTagDetail] = useState<DataType>(); // 表单数据
const [form] = Form.useForm<ReqType>();
// 详情数据
const [detail, setDetail] = useState<DataType>();
// 是否选择地址弹窗
const [openAddress, setOpenAddress] = useState<boolean>(false);
// 加盟列表
const [cooperationList, setCooperationList] = useState<{ label: string; value: number }[]>([]);
// 选择的地址
const [address, setAddress] = useState<{ lat: number; lon: number; address: string }>();
// 关闭弹窗 // 关闭弹窗
const handleCancel = () => { const handleCancel = () => {
form.resetFields();
closed(); closed();
}; };
// 点击事件 // 获取审批详情
const handleOk = async (status: boolean) => { const getApplyTagDetails = async () => {
await handleSubmit({ id: Number(data?.id), status }); const res = await CustomManageAPI.editUserApplyTagDetails({
id: Number(data?.id),
});
if (res && res.code === '200') {
form.setFieldsValue({
...res.result,
name: res.result.name || data?.companyName,
});
setDetail(res.result);
// console.log('获取审批详情 -->', res.result);
}
};
// 获取加盟列表
const getCooperationList = async () => {
const res = await CustomManageAPI.cooperationListTag({});
if (res && res.code === '200') {
const list = res.result || [];
setCooperationList(list.map((i) => ({ label: i.tagName, value: i.id })));
}
};
// 确认事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
}; };
// 提交事件 // 提交事件
const handleSubmit = async (values: ReqType) => { const handleSubmit = async (values: ReqType) => {
const res = await CustomManageAPI.approvalApplyTag(values); const res = await CustomManageAPI.editUserApplyTag({
id: Number(data?.id),
...values,
...address,
});
if (res && res.code === '200') { if (res && res.code === '200') {
message.success('操作成功'); message.success('操作成功');
handleCancel(); handleCancel();
} }
}; };
// 获取审批详情
const getApplyTagDetails = async () => {
const res = await CustomManageAPI.applyTagDetails({
id: data?.id,
userAccountId: data?.userAccountId,
});
if (res && res.code === '200') {
const { result } = res;
setApplyTagDetail(result);
}
};
// componentDidMount // componentDidMount
useEffect(() => { useEffect(() => {
if (!open) return; if (!open) return;
getCooperationList().then();
if (!data) return; if (!data) return;
getApplyTagDetails().then(); getApplyTagDetails().then();
// console.log('data --->', data); // console.log('data --->', data);
}, [open]); }, [open]);
return ( return (
<Modal open={open} title={title} onCancel={handleCancel} destroyOnClose footer={null}> <>
<div className='apply-detail'> <Modal open={open} title={title} onCancel={handleCancel} onOk={handleOk} destroyOnClose>
<div className='detail-text'>确定通过用户提交的加盟申请成为加盟商吗？</div> <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 16 }}>
<div className='detail-action'> <Form.Item
<Button type={'default'} onClick={() => handleOk(false)}> label='网点名称'
驳回 name='name'
</Button> rules={[{ required: true, message: '请输入网点名称' }]}
<Button type={'primary'} onClick={() => handleOk(true)}> >
通过 <Input placeholder={'请输入企业名称'} maxLength={25} allowClear />
</Button> </Form.Item>
</div> <Form.Item
<div className='detail-title'>企业认证信息</div> label='加盟类型'
<div className='detail-item'> name='cooperationTagId'
<div className='item-label'>企业名称:</div> rules={[{ required: true, message: '请选择加盟类型' }]}
<div className='item-value'>{applyTagDetail?.companyName || '无'}</div> >
</div> <Select placeholder='请选择加盟类型' allowClear options={cooperationList} disabled />
<div className='detail-item'> </Form.Item>
<div className='item-label'>社会信用代码:</div> <Form.Item
<div className='item-value'>{applyTagDetail?.creditCode || '无'}</div> label='网点地址'
</div> name='address'
<div className='detail-item'> rules={[{ required: true, message: '请选择网点地址' }]}
<div className='item-label'>工商营业执照:</div> >
<div className='item-value'> <Space.Compact style={{ width: '100%' }}>
<Uploader <Input
listType={'picture-card'} placeholder='请选择网点地址'
fileUpload maxLength={50}
fileLength={1} allowClear
fileSize={10} disabled
fileType={['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']} value={form.getFieldValue('address') || detail?.address}
defaultFileList={ />
applyTagDetail?.licenseImg ? [{ url: applyTagDetail?.licenseImg }] : [] <Button
} type='primary'
disabled={true} onClick={() => {
> setOpenAddress(true);
<PlusOutlined /> }}
</Uploader> >
</div> 选择位置
</div> </Button>
<div className='detail-item'> </Space.Compact>
<div className='item-label'>附件信息:</div> </Form.Item>
<div className='item-value'> <Form.Item
<Uploader label='服务资质'
listType={'picture-card'} name='content'
fileUpload rules={[{ required: true, message: '请输入服务资质' }]}
fileLength={1} >
fileSize={10} <Input.TextArea placeholder={'请输入服务资质'} maxLength={140} allowClear showCount />
fileType={['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']} </Form.Item>
defaultFileList={ <Form.Item
applyTagDetail?.attachmentList?.length label='服务评分'
? applyTagDetail?.attachmentList.map((i) => ({ url: i.url })) name='score'
: [] initialValue={5}
} rules={[{ required: true, message: '请选择服务评分' }]}
disabled={true} >
> <Rate allowClear />
<PlusOutlined /> </Form.Item>
</Uploader> </Form>
</div> </Modal>
</div> <SelectMapModal
<div className='detail-item'> title={'选择位置'}
<div className='item-label'>备注:</div> open={openAddress}
<div className='item-value'>{applyTagDetail?.remark || '无'}</div> closed={() => {
</div> setOpenAddress(false);
</div> }}
</Modal> submit={(e: { lat: number; lon: number; address: string }) => {
form.setFieldValue('address', e.address);
setAddress(e);
setOpenAddress(false);
}}
/>
</>
); );
}; };
......
src/pages/customManage/customIdentity/comp/approvalModal/index.tsx 0 → 100644
import { FC, useEffect, useState } from 'react';
import { Button, message, Modal } from 'antd';
import { InterDataType, InterListType, InterReqType } from '~/api/interface';
import { CustomManageAPI } from '~/api';
import {
applyTagDetails,
approvalApplyTag,
listUserApplyTag,
} from '~/api/interface/customManageType';
import './index.scss';
import { PlusOutlined } from '@ant-design/icons';
import { Uploader } from '~/components/uploader';
// 列表的类型
type DataType = InterDataType<applyTagDetails>;
// 列表的类型
type TableType = InterListType<listUserApplyTag>;
// 请求的表单类型
type ReqType = InterReqType<approvalApplyTag>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
}
const ApprovalModal: FC<propType> = (props) => {
ApprovalModal.defaultProps = {
data: undefined,
};
// 参数
const { title, open, closed, data } = props;
const [applyTagDetail, setApplyTagDetail] = useState<DataType>();
// 关闭弹窗
const handleCancel = () => {
closed();
};
// 点击事件
const handleOk = async (status: boolean) => {
await handleSubmit({ id: Number(data?.id), status });
};
// 提交事件
const handleSubmit = async (values: ReqType) => {
const res = await CustomManageAPI.approvalApplyTag(values);
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
};
// 获取审批详情
const getApplyTagDetails = async () => {
const res = await CustomManageAPI.applyTagDetails({
id: data?.id,
userAccountId: data?.userAccountId,
});
if (res && res.code === '200') {
const { result } = res;
setApplyTagDetail(result);
}
};
// componentDidMount
useEffect(() => {
if (!open) return;
if (!data) return;
getApplyTagDetails().then();
// console.log('data --->', data);
}, [open]);
return (
<Modal open={open} title={title} onCancel={handleCancel} destroyOnClose footer={null}>
<div className='apply-detail'>
<div className='detail-text'>确定通过用户提交的加盟申请成为加盟商吗？</div>
<div className='detail-action'>
<Button type={'default'} onClick={() => handleOk(false)}>
驳回
</Button>
<Button type={'primary'} onClick={() => handleOk(true)}>
通过
</Button>
</div>
<div className='detail-title'>企业认证信息</div>
<div className='detail-item'>
<div className='item-label'>企业名称:</div>
<div className='item-value'>{applyTagDetail?.companyName || '无'}</div>
</div>
<div className='detail-item'>
<div className='item-label'>社会信用代码:</div>
<div className='item-value'>{applyTagDetail?.creditCode || '无'}</div>
</div>
<div className='detail-item'>
<div className='item-label'>工商营业执照:</div>
<div className='item-value'>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={1}
fileSize={10}
fileType={['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']}
defaultFileList={
applyTagDetail?.licenseImg ? [{ url: applyTagDetail?.licenseImg }] : []
}
disabled={true}
>
<PlusOutlined />
</Uploader>
</div>
</div>
<div className='detail-item'>
<div className='item-label'>附件信息:</div>
<div className='item-value'>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={1}
fileSize={10}
fileType={['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']}
defaultFileList={
applyTagDetail?.attachmentList?.length
? applyTagDetail?.attachmentList.map((i) => ({ url: i.url }))
: []
}
disabled={true}
>
<PlusOutlined />
</Uploader>
</div>
</div>
<div className='detail-item'>
<div className='item-label'>备注:</div>
<div className='item-value'>{applyTagDetail?.remark || '无'}</div>
</div>
</div>
</Modal>
);
};
export default ApprovalModal;
src/pages/customManage/customIdentity/index.tsx
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import SearchBox from '~/components/search-box'; import SearchBox from '~/components/search-box';
import { CustomManageAPI } from '~/api'; import { CustomManageAPI } from '~/api';
import { Button, message, Modal, Table } from 'antd'; import { Button, message, Modal, Rate, Table } from 'antd';
import { ColumnsType } from 'antd/es/table'; import { ColumnsType } from 'antd/es/table';
import { InterListType, InterReqListType } from '~/api/interface'; import { InterListType, InterReqListType } from '~/api/interface';
import { listUserApplyTag } from '~/api/interface/customManageType'; import { listUserApplyTag } from '~/api/interface/customManageType';
import AddEditModal from './comp/addEditModal'; import ApprovalModal from './comp/approvalModal';
import AddEditModal from '~/pages/customManage/customIdentity/comp/addEditModal';
// 列表类型 // 列表类型
type TableType = InterListType<listUserApplyTag>; type TableType = InterListType<listUserApplyTag>;
...@@ -24,8 +25,10 @@ const CustomIdentityView = () => { ...@@ -24,8 +25,10 @@ const CustomIdentityView = () => {
const { confirm } = Modal; const { confirm } = Modal;
// 加盟列表 // 加盟列表
const [cooperationList, setCooperationList] = useState<{ label: string; value: number }[]>([]); const [cooperationList, setCooperationList] = useState<{ label: string; value: number }[]>([]);
// 新增弹窗 // 新增编辑弹窗
const [addModalVisible, setAddModalVisible] = useState<boolean>(false); const [addModalVisible, setAddModalVisible] = useState<boolean>(false);
// 审批弹窗
const [approvalModalVisible, setApprovalModalVisible] = useState<boolean>(false);
// 需要编辑的数据 // 需要编辑的数据
const [editData, setEditData] = useState<TableType[0]>(); const [editData, setEditData] = useState<TableType[0]>();
// 表格数据 // 表格数据
...@@ -112,6 +115,13 @@ const CustomIdentityView = () => { ...@@ -112,6 +115,13 @@ const CustomIdentityView = () => {
render: (text) => cooperationList.find((i) => i.value === text)?.label || text, render: (text) => cooperationList.find((i) => i.value === text)?.label || text,
}, },
{ {
title: '企业认证名称',
dataIndex: 'companyName',
align: 'center',
width: '200px',
ellipsis: true,
},
{
title: '联系人', title: '联系人',
dataIndex: 'applyName', dataIndex: 'applyName',
align: 'center', align: 'center',
...@@ -122,6 +132,19 @@ const CustomIdentityView = () => { ...@@ -122,6 +132,19 @@ const CustomIdentityView = () => {
align: 'center', align: 'center',
}, },
{ {
title: '服务资质',
dataIndex: 'content',
align: 'center',
width: '200px',
ellipsis: true,
},
{
title: '服务评价',
dataIndex: 'score',
align: 'center',
render: (text) => text && <Rate disabled defaultValue={Number(text)} />,
},
{
title: '申请时间', title: '申请时间',
dataIndex: 'applyTime', dataIndex: 'applyTime',
align: 'center', align: 'center',
...@@ -137,21 +160,31 @@ const CustomIdentityView = () => { ...@@ -137,21 +160,31 @@ const CustomIdentityView = () => {
dataIndex: 'action', dataIndex: 'action',
align: 'center', align: 'center',
fixed: 'right', fixed: 'right',
width: '120px', width: '150px',
render: (_text, record) => ( render: (_text, record) => (
<> <>
<Button <Button
type={'link'} type={'link'}
onClick={() => { onClick={() => {
setAddModalVisible(true); setApprovalModalVisible(true);
setEditData(JSON.parse(JSON.stringify(record))); setEditData(JSON.parse(JSON.stringify(record)));
}} }}
disabled={record.approvalStatus !== 0} disabled={record.approvalStatus !== 0}
> >
审批 审批
</Button> </Button>
<Button
type={'link'}
onClick={() => {
setAddModalVisible(true);
setEditData(JSON.parse(JSON.stringify(record)));
}}
disabled={[0, 2].includes(record.approvalStatus)}
>
编辑
</Button>
<Button type={'link'} danger onClick={() => handleDelete(record)}> <Button type={'link'} danger onClick={() => handleDelete(record)}>
强制删除 删除
</Button> </Button>
</> </>
), ),
...@@ -162,6 +195,12 @@ const CustomIdentityView = () => { ...@@ -162,6 +195,12 @@ const CustomIdentityView = () => {
<SearchBox <SearchBox
search={[ search={[
{ {
name: 'companyName',
label: '企业名称',
type: 'input',
placeholder: '请输入企业名称',
},
{
name: 'cooperationTagId', name: 'cooperationTagId',
label: '申请加盟类型', label: '申请加盟类型',
type: 'Select', type: 'Select',
...@@ -189,7 +228,7 @@ const CustomIdentityView = () => { ...@@ -189,7 +228,7 @@ const CustomIdentityView = () => {
dataSource={tableData} dataSource={tableData}
columns={columns} columns={columns}
rowKey='id' rowKey='id'
// scroll={{ x: 1500 }} scroll={{ x: 1200 }}
bordered bordered
pagination={{ pagination={{
total: pagination.total, total: pagination.total,
...@@ -201,9 +240,21 @@ const CustomIdentityView = () => { ...@@ -201,9 +240,21 @@ const CustomIdentityView = () => {
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`, showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}} }}
/> />
{/*审批弹窗*/}
<ApprovalModal
open={approvalModalVisible}
title={editData?.id ? '审批' : '新增'}
data={editData}
closed={() => {
setApprovalModalVisible(false);
setEditData(undefined);
paginationChange(pagination.current, pagination.pageSize);
}}
/>
{/*编辑弹窗*/}
<AddEditModal <AddEditModal
open={addModalVisible} open={addModalVisible}
title={editData?.id ? '审批' : '新增'} title={editData?.id ? '编辑' : '新增'}
data={editData} data={editData}
closed={() => { closed={() => {
setAddModalVisible(false); setAddModalVisible(false);
......
src/pages/customManage/customMoney/comp/ChangeModal/index.tsx
/* eslint-disable */
// @ts-nocheck
import { useState } from 'react'; import { useState } from 'react';
import { Form, Input, message, Modal, Upload, UploadProps } from 'antd'; import { Form, Input, message, Modal, Upload, UploadProps } from 'antd';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
......
src/pages/resourceManage/materielManage/comp/addEditModal/index.tsx
...@@ -234,6 +234,8 @@ const AddEditModal: React.FC<propType> = (props) => { ...@@ -234,6 +234,8 @@ const AddEditModal: React.FC<propType> = (props) => {
wrapperCol={{ span: 20 }} wrapperCol={{ span: 20 }}
> >
<RichText <RichText
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
value={form.getFieldValue('textContent')} value={form.getFieldValue('textContent')}
onChange={(e) => form.setFieldValue('textContent', e)} onChange={(e) => form.setFieldValue('textContent', e)}
height={250} height={250}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论