liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

7.7 党建专题7.4需求

Browse Source
This commit is contained in:
jl-zhoujl2
2022-07-07 15:46:34 +08:00
parent fc9e58fd1e
commit 65e2cd0001
12 changed files with 466 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/topic/topic_fist.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

5
src/pages/PartyMemberTopic/ActivityStyle/index.tsx
View File

@ -22,8 +22,7 @@ const PersonInfor: React.FC<{}> = () => {
setLoading(true);
getGracefulList({ param: value }).then(async res => {
if (res?.code == 200) {
const data = await getImageUrl(res?.data, 'image', topic_activity_default);
setGracefulList(data);
setGracefulList(res?.data);
setPage(1);
}
}).finally(() => {
@ -89,7 +88,7 @@ const PersonInfor: React.FC<{}> = () => {
renderItem={item => (
<List.Item>
<div className="list-pic">
<img src={item.imageUrl} />
<img src={getImageUrl(item.filePath, topic_activity_default)} />
<p className="tit"><span onClick={() => clickTitle(item)}>{item.title}</span></p>
<p className="detail">{item.secordTitle}</p>
<span className="time"><img src={time_icon} />{item.createTime}</span>

139
src/pages/PartyMemberTopic/Home/index.less
View File

@ -80,7 +80,7 @@
.left-activity-marquee {
height: 103px;
width: 940px;
padding-left: 45px;
padding-left: 25px;
.left-activity-scroll {
height: 103px;
@ -89,12 +89,12 @@
align-items: center;
.left-activity-scroll-content {
font-size: 18px;
font-size: 17px;
color: #fff;
margin-right: 20px;
.left-activity-scroll-end {
margin-top: 4px;
margin-top: 2px;
}
}
@ -119,6 +119,14 @@
font-size: 28px;
}
.left-card-fist {
vertical-align: text-bottom;
position: relative;
top: 3px;
margin-right: 6px;
}
.left-card-flag {
vertical-align: text-bottom;
position: relative;
@ -362,6 +370,27 @@
background: #fff;
padding: 16px 24px 28px;
.bottom-select {
margin-bottom: 24px;
.bottom-select-label {
margin-right: 6px;
font-size: 14px;
font-weight: bold;
}
.ant-tag-checkable-checked {
background-color: #da3232;
}
}
.bottom-select .bottom-select-tag {
font-size: 14px;
padding: 0 9px;
line-height: 27px;
margin-right: 6px;
}
.left-card-top {
display: flex;
justify-content: space-between;
@ -515,13 +544,11 @@
padding: 0 20px;
.bottom-modal-headertext {
font-size: 20px;
font-size: 21px;
font-family: '黑体';
color: #fff;
width: 100%;
text-align: center;
position: relative;
right: 20px;
margin-left: 8px;
}
}
}
@ -534,49 +561,81 @@
}
.topic-home-modal .ant-modal-content .ant-modal-body .bottom-modal-body {
display: flex;
flex-direction: column;
align-items: center;
// display: flex;
// flex-direction: column;
// align-items: center;
.radio-group {
width: 300px;
margin-bottom: 12px;
// .radio-group {
// width: 300px;
// margin-bottom: 12px;
.radio-content {
font-size: 17.16px;
font-family: '黑体';
color: #939393;
margin-left: 16px;
}
// .radio-content {
// font-size: 17.16px;
// font-family: '黑体';
// color: #939393;
// margin-left: 16px;
// }
// }
// .bottom-modal-textarea {
// resize: none;
// border-radius: 8px;
// }
// .bottom-modal-submit {
// display: flex;
// justify-content: space-between;
// align-items: center;
// margin-top: 8px;
// width: 100%;
// .submit-text {
// color: #939393;
// }
// .submit-cancelbutton {
// border-radius: 8px;
// border-color: #d44026;
// color: #d44026;
// }
// .submit-button {
// border-radius: 8px;
// background: #d44026;
// margin-left: 8px;
// border-color: #d44026;
// }
// }
.ant-form-item {
margin-bottom: 16px;
}
.bottom-modal-textarea {
.ant-form-item textarea {
resize: none;
border-radius: 8px;
}
.ant-form-item-label>label {
font-size: 17px;
font-family: '黑体';
color: #939393;
}
.radio-content {
font-size: 17px;
font-family: '黑体';
color: #939393;
}
.ant-input {
color: #333333;
}
.bottom-modal-submit {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
width: 100%;
.submit-text {
color: #939393;
}
.submit-cancelbutton {
border-radius: 8px;
border-color: #d44026;
color: #d44026;
}
text-align: center;
.submit-button {
border-radius: 8px;
background: #d44026;
margin-left: 8px;
border-color: #d44026;
background: #da3232;
border-color: #da3232;
}
}
}

284
src/pages/PartyMemberTopic/Home/index.tsx
View File

@ -1,11 +1,12 @@
import React, { useEffect, useRef, useState } from 'react';
import './index.less';
import { Button, Carousel, Col, Divider, Input, List, message, Modal, Radio, RadioChangeEvent, Row, Spin, Tooltip } from 'antd';
import { Button, Carousel, Col, Divider, Form, Input, List, message, Modal, Radio, Row, Space, Spin, Tag, Tooltip } from 'antd';
import * as echarts from 'echarts';
import Marquee from 'react-fast-marquee';
import topic_header from '@/assets/topic/topic_header.jpg'
import topic_activity_logo from '@/assets/topic/topic_activity_logo.png'
import topic_red_flag from '@/assets/topic/topic_red_flag.png'
import topic_fist from '@/assets/topic/topic_fist.png'
import topic_other from '@/assets/topic/topic_other.png'
import topic_project_picture from '@/assets/topic/topic_project_picture.jpg'
import topic_bottom_button from '@/assets/topic/topic_bottom_button.png'
@ -24,7 +25,16 @@ import topic_interview from '@/assets/topic/topic_interview.png'
import topic_assure from '@/assets/topic/topic_assure.png'
import topic_difficult from '@/assets/topic/topic_difficult.png'
import { getHomeActivity, getHomeBanner, getHomeContact, getHomeGraceful, getHomeProject, getHomeRight, submitAdvice } from './service';
import { formatTime, getImageUrl, isEmpty, isNotEmpty } from '../utils';
import { chunk, formatTime, getImageUrl } from '../utils';
import ExtendUpload from '@/utils/ExtendUpload';
import { getSessionUserData } from '@/utils/session';
const tagsData = ['集团总部', '北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '山东', '河南', '上海', '江苏', '浙江', '安徽', '福建', '江西', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '数字科技', '联通在线', '智网科技', '支付公司', '财务公司', '融资租赁', '时科（北京）信息'];
const formItemLayout = {
labelCol: { span: 5 },
wrapperCol: { span: 17 },
};
//卡片头
const LeftCardTop = (props: any) => {
@ -32,8 +42,9 @@ const LeftCardTop = (props: any) => {
<>
<div className='left-card-top'>
<div>
{props.code == "2" && <img src={topic_fist} className='left-card-fist' />}
<span className='left-card-title'>{props.title}</span>
<img src={topic_red_flag} className='left-card-flag' />
{props.code != "2" && <img src={topic_red_flag} className='left-card-flag' />}
</div>
{props.url && <div onClick={() => window.open(props.url)}>
<span className='left-card-other'>更多</span>
@ -153,39 +164,20 @@ const BottomCardContent = (props: any) => {
//活动联系人-我要提意见Modal
const CommentModal = (props: any) => {
const { TextArea } = Input;
const [form] = Form.useForm();
const [modalLoading, setModalLoading] = useState<boolean>(false);
const textRef = useRef<any>(null);
const radioRef = useRef<any>(null);
const onRadioChange = (e: RadioChangeEvent) => {
radioRef.current = e.target.value;
};
const onTextChange = (e: any) => {
textRef.current = e.target.value;
};
const onCancel = () => {
props.closeModal();
textRef.current = null;
radioRef.current = null;
}
const onSubmit = async () => {
if (isEmpty(radioRef.current)) {
message.info("请选择意见类型");
return;
}
if (isEmpty(textRef.current)) {
message.info("请先输入意见内容");
return;
}
const onSubmit = () => {
form.submit();
}
const onFinish = async (values: any) => {
setModalLoading(true);
const params = {
contactName: props.data?.contactName,
contactId: props.data?.contactId,
suggestionType: radioRef.current,
suggestionContent: textRef.current,
...values,
}
await submitAdvice(params).then(res => {
if (res?.code == 200) {
@ -195,7 +187,14 @@ const CommentModal = (props: any) => {
}).finally(() => {
setModalLoading(false);
})
}
};
useEffect(() => {
form.setFieldsValue({
...props.data,
name: props.userData?.fullName,
company: props.userData?.organizationName,
})
}, [props.data?.id])
return (
<Modal
@ -215,37 +214,101 @@ const CommentModal = (props: any) => {
footer={null}
centered
maskStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.3)' }}
width={450}
width={800}
>
<Spin spinning={modalLoading}>
<div className='bottom-modal-body'>
<div className='radio-group'>
<Radio.Group onChange={onRadioChange} defaultValue={""}>
<Radio value="网络运营" className="radio-content">网络运营</Radio>
<Radio value="IT" className="radio-content">IT</Radio>
<Radio value="市场" className="radio-content">市场</Radio>
<Radio value="综合行政" className="radio-content">综合行政</Radio>
<Radio value="其他" className="radio-content">其他</Radio>
</Radio.Group>
</div>
<TextArea
rows={11}
className='bottom-modal-textarea'
maxLength={50}
defaultValue={''}
onChange={onTextChange}
placeholder="在这里输入我要提出的意见（最多输入50字）"
/>
<Form
{...formItemLayout}
form={form}
name="register"
className='modal-form'
onFinish={onFinish}
preserve={false}
>
<Form.Item
name="contactName"
hidden
>
<Input />
</Form.Item><Form.Item
name="contactId"
hidden
>
<Input />
</Form.Item>
<Form.Item
name="suggestionType"
label="意见类型"
rules={[{ required: true, message: '请选择意见类型！', whitespace: true }]}
>
<Radio.Group>
<Radio value="网络运营" className="radio-content">网络运营</Radio>
<Radio value="IT" className="radio-content">IT</Radio>
<Radio value="市场" className="radio-content">市场</Radio>
<Radio value="综合行政" className="radio-content">综合行政</Radio>
<Radio value="其他" className="radio-content">其他</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
name="suggestionContent"
label="意见内容"
rules={[{ required: true, message: '请填写意见内容！', whitespace: true }]}
>
<TextArea
rows={4}
maxLength={50}
placeholder="在这里输入我要提出的意见（最多输入50字）"
/>
</Form.Item>
<Form.Item
name="attachmentImage"
label="附件"
>
<ExtendUpload bid={''} btnName="上传" maxCount={1} maxSize={30} uploadProps={{ name: "file", disabled: false, accept: ".png,.jpg,.jpeg,.rar,.zip,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.pdf" }} />
</Form.Item>
<Form.Item
name="instructions"
label="补充信息"
>
<TextArea
rows={3}
maxLength={30}
placeholder="在这里输入我要补充的信息（最多输入30字）"
/>
</Form.Item>
<Form.Item
label="填写人员"
>
<Row>
<Col span={4}>
<Form.Item
name="name"
>
<Input readOnly />
</Form.Item>
</Col>
<Col span={19} offset={1}>
<Form.Item
name="company"
label="所在公司"
>
<Input readOnly />
</Form.Item>
</Col>
</Row>
</Form.Item>
</Form>
<div className='bottom-modal-submit'>
<span className='submit-text'>提交给{props.data?.contactDepartment}的{props.data?.contactName}</span>
<div>
<Button className='submit-cancelbutton' onClick={onCancel}>
取消
</Button>
<Space>
<Button type='primary' className='submit-button' onClick={onSubmit}>
提交
</Button>
</div>
<Button onClick={onCancel}>
取消
</Button>
</Space>
</div>
</div>
</Spin>
@ -264,8 +327,6 @@ const Home: React.FC<{}> = () => {
const [projectList, setProjectList] = useState<any[]>([]);
//right data
const [rightList, setRightList] = useState<any[]>([]);
//right data
const [rightGraphList, setRightGraphList] = useState<any[]>([]);
//right local data
const [contactData, setContactData] = useState<any[]>([]);
//right total data
@ -274,6 +335,12 @@ const Home: React.FC<{}> = () => {
const [adviceVisible, setAdviceVisible] = useState<boolean>(false);
//bottom advice modal data
const [adviceItemData, setAdviceItemData] = useState<Object>({});
//bottom tags select
const [selectedTag, setSelectedTag] = useState<string>('');
//user data
const userData = getSessionUserData();
const { CheckableTag } = Tag;
const openModal = (item: any) => {
setAdviceItemData(item);
@ -289,8 +356,7 @@ const Home: React.FC<{}> = () => {
const getBannerList = () => {
getHomeBanner().then(async res => {
if (res?.code == 200) {
const data = await getImageUrl(res?.data, 'titleImage', topic_banner_default);
setBannerList(data);
setBannerList(res?.data);
}
})
}
@ -299,7 +365,8 @@ const Home: React.FC<{}> = () => {
const getActivityList = () => {
getHomeActivity().then(res => {
if (res?.code == 200) {
setActivityList(res?.data);
const data = chunk(res?.data, 3);
setActivityList(data);
}
})
}
@ -308,13 +375,8 @@ const Home: React.FC<{}> = () => {
const getGracefulList = () => {
getHomeGraceful().then(async res => {
if (res?.code == 200) {
let data: any[] = [];
if (res?.data.length > 6) {
data = await getImageUrl(res?.data.slice(0, 6), 'image', topic_activity_default);
} else {
data = await getImageUrl(res?.data, 'image', topic_activity_default);
}
setGracefulList(data);
const arrayData = chunk(res?.data, 6);//分组
setGracefulList(arrayData);
}
})
}
@ -348,8 +410,8 @@ const Home: React.FC<{}> = () => {
}
//get contact
const getContactList = () => {
getHomeContact().then(res => {
const getContactList = (param: string) => {
getHomeContact({ param }).then(res => {
if (res?.code == 200) {
const data = Object.entries(res?.data);
if (data.length > 3) {
@ -382,6 +444,11 @@ const Home: React.FC<{}> = () => {
setContactData([...totalContactData.current.slice(0, 3)]);
}
}
const handleChange = (tag: string, checked: boolean) => {
const nextSelectedTag = checked ? tag : '';
getContactList(nextSelectedTag);
setSelectedTag(nextSelectedTag);
};
useEffect(() => {
getBannerList();
@ -389,7 +456,7 @@ const Home: React.FC<{}> = () => {
getActivityList();
getProjectList();
getRightList();
getContactList();
getContactList('');
}, [])
return (
@ -403,7 +470,7 @@ const Home: React.FC<{}> = () => {
<Carousel className='left-carousel' autoplay>
{bannerList?.length > 0 && bannerList.map(item => (
<div key={item.id}>
<div className='carousel-content' style={{ backgroundImage: `url(${item.imageUrl})` }} onClick={() => newsDetailClick(item)}>
<div className='carousel-content' style={{ backgroundImage: `url(${getImageUrl(item.filePath, topic_banner_default)})` }} onClick={() => newsDetailClick(item)}>
<div className='carousel-textbg'>
<div className='carousel-text'>
<span className='carousel-text-content'>{item.imageWord}</span>
@ -417,20 +484,22 @@ const Home: React.FC<{}> = () => {
<div className='left-activity'>
<img src={topic_activity_logo} />
<div className='left-activity-marquee'>
<Marquee pauseOnHover gradient={false}>
<Marquee pauseOnHover gradient={false} speed={60}>
<div className='left-activity-scroll'>
{activityList.length > 0 && activityList.map((item, index) => (
index % 2 == 0 && <div className='left-activity-scroll-content' key={index}>
<div>
<span className='left-activity-scroll-name'>{item.name}：</span>
<span>{item.text}</span>
</div>
{(index != activityList.length - 1) && (
<div className='left-activity-scroll-end'>
<span className='left-activity-scroll-name'>{activityList[index + 1]?.name}：</span>
<span>{activityList[index + 1]?.text}</span>
</div>
)}
<div className='left-activity-scroll-content' key={index}>
{item[0] && (<div>
<span className='left-activity-scroll-name'>{item[0].name}：</span>
<span>{item[0].text}</span>
</div>)}
{item[1] && (<div className='left-activity-scroll-end'>
<span className='left-activity-scroll-name'>{item[1].name}：</span>
<span>{item[1].text}</span>
</div>)}
{item[2] && (<div className='left-activity-scroll-end'>
<span className='left-activity-scroll-name'>{item[2].name}：</span>
<span>{item[2].text}</span>
</div>)}
</div>
))}
</div>
@ -439,23 +508,27 @@ const Home: React.FC<{}> = () => {
</div>
<div className='left-card'>
<div className='left-graceful'>
<LeftCardTop title="活动风采" url="/partyMemberTopic/activityStyle" />
<div>
<Row gutter={[20, 31]}>
{gracefulList?.length > 0 && gracefulList.map((item, index) => (
<Col span={8} key={index}>
<div className='left-graceful-bg' style={{ backgroundImage: `url(${item.imageUrl})` }} onClick={() => newsDetailClick(item)}>
<div className='left-graceful-textbg'>
<span className='left-graceful-text'>{item.title}</span>
</div>
</div>
</Col>
))}
</Row>
</div>
<LeftCardTop title="活动风采" code="1" url="/partyMemberTopic/activityStyle" />
<Carousel autoplay autoplaySpeed={5000} effect="fade" dots={false}>
{gracefulList?.length > 0 && gracefulList.map((array, index) => (
<div key={index}>
<Row gutter={[20, 31]}>
{array.map((item: any, index: any) => (
<Col span={8} key={index}>
<div className='left-graceful-bg' style={{ backgroundImage: `url(${getImageUrl(item.filePath, topic_activity_default)})` }} onClick={() => newsDetailClick(item)}>
<div className='left-graceful-textbg'>
<span className='left-graceful-text'>{item.title}</span>
</div>
</div>
</Col>
))}
</Row>
</div>
))}
</Carousel>
</div>
<div className='left-project'>
<LeftCardTop title="攻坚克难项目" url="/partyMemberTopic/overDifficult" />
<LeftCardTop title="攻坚克难项目" code="2" url="/partyMemberTopic/overDifficult" />
<div className='left-project-content'>
<img src={topic_project_picture} />
<div className='left-project-content-list'>
@ -519,7 +592,20 @@ const Home: React.FC<{}> = () => {
</div>
</div>
<div className='bottom-global'>
<LeftCardTop title="我要提意见" />
<LeftCardTop title="我要提意见" code="3" />
<div className='bottom-select'>
<span className='bottom-select-label'>按省分查询：</span>
{tagsData.map(tag => (
<CheckableTag
className='bottom-select-tag'
key={tag}
checked={selectedTag === tag}
onChange={checked => handleChange(tag, checked)}
>
{tag}
</CheckableTag>
))}
</div>
{contactData.length > 0 && contactData.map(([name, value], index) => (
<div key={index}>
<div className='bottom-title'>{name}</div>
@ -541,7 +627,7 @@ const Home: React.FC<{}> = () => {
</div>
)}
</div>
<CommentModal visible={adviceVisible} closeModal={() => closeModal()} data={adviceItemData} />
<CommentModal visible={adviceVisible} closeModal={() => closeModal()} data={adviceItemData} userData={userData} />
</div>
</div>
);

7
src/pages/PartyMemberTopic/Home/service.ts
View File

@ -32,8 +32,11 @@ export async function getHomeRight() {
}
//活动联系人
export async function getHomeContact() {
return request('/api/biz-service-ebtp-extend/v1/eventpartybranch/eventContact/group');
export async function getHomeContact(data: any) {
return request('/api/biz-service-ebtp-extend/v1/eventpartybranch/eventContact/group', {
method: 'POST',
data: { ...data },
});
}
//提意见 提交

15
src/pages/PartyMemberTopic/PartyBranch/index.tsx
View File

@ -38,8 +38,13 @@ const PartyBranch: React.FC<{}> = () => {
history.push({ pathname: "/partyMemberTopic/personInfor", state: params });
}
//onclick
const clickCard = (data: any) => {
//click left
const clickLeft = (data: any) => {
history.push({ pathname: "/partyMemberTopic/partyBranches", state: data });
}
//click right
const clickRight = (data: any) => {
history.push({ pathname: "/partyMemberTopic/personInfor", state: data });
}
@ -86,21 +91,21 @@ const PartyBranch: React.FC<{}> = () => {
dataSource={branchData}
renderItem={(item: any) => (
<List.Item>
<div className="wrapper" onClick={() => clickCard(item)}>
<div>
<div className="pic-bg">{item.branchName}</div>
<div className="mess">
{/* <div className="mess-left">党员数量</div>
<div className="mess-right">
<span>{item.count}</span>人
</div> */}
<div className="mess-left">
<div className="mess-left" onClick={() => clickLeft(item)}>
<span>{item.branchCount}</span>个
<div>
<img src={branch} />
<span>党支部数</span>
</div>
</div>
<div className="mess-right">
<div className="mess-right" onClick={() => clickRight(item)}>
<span>{item.count}</span>人
<div>
<img src={person} />

94
src/pages/PartyMemberTopic/PartyBranches/index.tsx Normal file
View File

@ -0,0 +1,94 @@
import React, { useEffect, useState } from 'react';
import '../Style/ld_style.less';
import { Input, List, Spin } from 'antd';
import { getBranchesList } from './service';
import person from '@/assets/topic/person.png'
import { history } from 'umi';
const { Search } = Input;
const PartyBranches: React.FC<{}> = (props: any) => {
//branches list
const [branchesData, setBranchesData] = useState<any[]>([]);
//loading
const [loading, setLoading] = useState<boolean>(false);
//get branches list
const getBranchesData = (belongBranchName: string) => {
setLoading(true);
getBranchesList({ branchName: props.location.state?.branchName || '', param: belongBranchName }).then(res => {
if (res?.code == 200) {
setBranchesData(res?.data);
}
}).finally(() => {
setLoading(false);
})
}
//to home
const toHome = () => {
history.push("/partyMemberTopic/home");
}
//goback lastpage
const toGoBack = () => {
window.history.go(-1);
}
//onclick card
const onCardClick = (data: any) => {
history.push({ pathname: "/partyMemberTopic/personInfor", state: data });
}
useEffect(() => {
getBranchesData('');
}, [])
return (
<div className="page-container">
<div className="top-banner">
<div className="back-home">
<span onClick={() => toHome()}>返回首页</span>
<span onClick={() => toGoBack()}>上一页</span>
</div>
</div>
<Spin spinning={loading}>
<div className="search">
<span className="text"><span>党支部名录</span>(当前共{branchesData.length}条)</span>
<div className="search-box">
<Search
placeholder="党支部名称"
allowClear
enterButton="搜索"
style={{ width: 322 }}
onSearch={getBranchesData}
/>
</div>
</div>
<div className="mess-box mess-detail">
<List
grid={{ gutter: 16, column: 4 }}
dataSource={branchesData}
renderItem={item => (
<List.Item>
<div className="wrapper" onClick={() => onCardClick(item)}>
<div className="top-bg">
<div className="branch-title">
<span>{item.belongBranchName}</span>
</div>
</div>
<div className="mess-content mess-content-branches">
<div className="mess-right">
<span>{item.count}</span>人
<div>
<img src={person} />
<span>党员数量</span>
</div>
</div>
</div>
</div>
</List.Item>
)}
/>
</div>
</Spin>
</div>
)
}
export default PartyBranches;

9
src/pages/PartyMemberTopic/PartyBranches/service.ts Normal file
View File

@ -0,0 +1,9 @@
import request from '@/utils/request';
//党支部列表
export async function getBranchesList(data: any) {
return request('/api/biz-service-ebtp-extend/v1/eventpartybranch/provinceBranch/list', {
method: 'POST',
data: { ...data }
});
}

9
src/pages/PartyMemberTopic/PersonInfor/index.tsx
View File

@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import '../Style/ld_style.less';
import { Input, List, Spin } from 'antd';
import { getMemberList, memberListSearch } from './service';
import { isNotEmpty } from '../utils';
import { isEmpty, isNotEmpty } from '../utils';
import emblem from '@/assets/topic/emblem.png'
import { history } from 'umi';
@ -32,6 +32,9 @@ const PersonInfor: React.FC<{}> = (props: any) => {
if (isNotEmpty(props.location.state?.branchCode)) {
params['belongBranch'] = props.location.state?.branchCode;
}
if (isNotEmpty(props.location.state?.belongBranchName)) {
params['belongBranchName'] = props.location.state?.belongBranchName;
}
setLoading(true);
memberListSearch(params).then(res => {
if (res?.code == 200) {
@ -50,7 +53,7 @@ const PersonInfor: React.FC<{}> = (props: any) => {
window.history.go(-1);
}
useEffect(() => {
if (isNotEmpty(props.location.state?.branchCode)) {//有党支部
if (isNotEmpty(props.location.state?.branchCode) && isEmpty(props.location.state?.belongBranchName)) {//有省代码，无党支部
getMemberData(props.location.state?.branchCode);
} else {
onSearch(props.location.state?.param);
@ -85,7 +88,7 @@ const PersonInfor: React.FC<{}> = (props: any) => {
dataSource={memberData}
renderItem={item => (
<List.Item>
<div className="wrapper">
<div>
<div className="top-bg">
<div className="tit">{item.branchName}</div>
<div className="text-r">

34
src/pages/PartyMemberTopic/Style/ld_style.less
View File

@ -8,7 +8,7 @@
position: relative;
width: 100%;
height: 318px;
background: url("../../../assets/topic/bannerListPic.jpg") no-repeat;
background: url("~@/assets/topic/bannerListPic.jpg") no-repeat;
background-size: 100% 100%;
.back-home {
@ -36,7 +36,7 @@
}
.member-top-banner {
background: url("../../../assets/topic/bannerListPic_member.jpg") no-repeat;
background: url("~@/assets/topic/bannerListPic_member.jpg") no-repeat;
}
.search {
@ -67,7 +67,7 @@
.static-box {
position: relative;
height: 145px;
background: url("../../../assets/topic/static-bg.png") no-repeat;
background: url("~@/assets/topic/static-bg.png") no-repeat;
background-size: 100% 100%;
div {
@ -117,7 +117,7 @@
.pic-bg {
height: 80px;
background: url("../../../assets/topic/card-bg.png") no-repeat;
background: url("~@/assets/topic/card-bg.png") no-repeat;
background-size: cover;
color: #fff;
font-size: 24px;
@ -140,10 +140,19 @@
padding: 24px;
}
.mess-content-branches {
display: flex;
justify-content: center;
}
.mess-left {
font-size: 20px;
color: #959595;
text-align: center;
width: 126px;
height: 97.99px;
border-radius: 8px;
cursor: pointer;
}
.mess-left span {
@ -169,6 +178,10 @@
font-size: 20px;
color: #959595;
text-align: center;
width: 126px;
height: 97.99px;
border-radius: 8px;
cursor: pointer;
}
.mess-right span {
@ -203,7 +216,7 @@
}
.top-bg {
background: url("../../../assets/topic/person-bg.jpg") no-repeat;
background: url("~@/assets/topic/person-bg.jpg") no-repeat;
background-size: cover;
height: 88px;
@ -233,6 +246,17 @@
color: #ffd03f;
font-size: 14px;
}
.branch-title {
color: #fff;
font-size: 24px;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
padding: 0 18px;
height: 100%;
}
}
.mess {

38
src/pages/PartyMemberTopic/utils.ts
View File

@ -1,26 +1,17 @@
import { getFilelist } from "@/services/download_";
import { pictureDisplayPath } from "@/utils/DownloadUtils";
import moment from "moment";
/**
* 传入list数据，插入图片展示路径 imageUrl
* @param data 数组
* @param paramName 字段名
* 图片路径拼接
* @param filePath 图片路径
* @param defaultImg 默认图片
* @returns
*/
export const getImageUrl = async (data: any[], paramName: string, defaultImg: React.ImgHTMLAttributes<HTMLImageElement>) => {
for (const ite of data) {
await getFilelist([ite[paramName]])
.then(response => {//获取主图
if (response?.success && response?.data?.length > 0) {
const returnUrl = window.location.origin + pictureDisplayPath + '?filePath=' + response?.data[0].filePath;
ite["imageUrl"] = returnUrl;
}
})
.catch(error => {
ite["imageUrl"] = defaultImg;
})
export const getImageUrl = (filePath: string | undefined | null, defaultImg: React.ImgHTMLAttributes<HTMLImageElement>) => {
let returnUrl: any = defaultImg;
if (isNotEmpty(filePath)) {
returnUrl = `${window.location.origin}${pictureDisplayPath}?filePath=${filePath}`;
}
return data;
return returnUrl;
}
/**
* 时间格式化
@ -52,4 +43,17 @@ export function isEmpty(value: any) {
*/
export function isNotEmpty(value: any) {
return value !== null && value !== void 0 && value !== '';
}
/**
* 数组分组
* @param arr 原数组
* @param size 拆分块长度
* @returns
*/
export function chunk(arr: any[], size: number) {
var result = [];
for (var i = 0, len = arr.length; i < len; i += size) {
result.push(arr.slice(i, i + size));
}
return result;
}