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

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 },
});
}
//提意见 提交