4.28 高质量运营
This commit is contained in:
jl-zhoujl2
@ -0,0 +1,252 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Modal, Col, Form, Input, Row, Select, Spin, message, Upload, Button } from 'antd';
|
||||
import BraftText from '@/components/richText/wang';
|
||||
import ExtendUpload from '@/utils/ExtendUpload';
|
||||
import { isEmpty, isNotEmpty } from '@/pages/PartyMemberTopic/utils';
|
||||
import { getSessionUserData, getUserToken } from '@/utils/session';
|
||||
import moment from 'moment';
|
||||
import { saveEventData } from '../service';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
|
||||
const layout = {
|
||||
labelCol: { span: 3 },
|
||||
wrapperCol: { span: 21 },
|
||||
};
|
||||
|
||||
const validateMessages = {
|
||||
required: '请填写此项',
|
||||
};
|
||||
|
||||
const modalHeight = window.innerHeight * 96 / 100;
|
||||
|
||||
interface EventMaintenanceModalProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
onOk: () => void;
|
||||
record: any;
|
||||
}
|
||||
interface VideoUploadProps {
|
||||
value?: string,
|
||||
onChange?: (value: string) => void;
|
||||
disabled: boolean,
|
||||
}
|
||||
/**视频上传 */
|
||||
const VideoUpload: React.FC<VideoUploadProps> = ({ value = null, onChange = () => { }, disabled = true }) => {
|
||||
const uploadProps = {
|
||||
accept: ".mp4",
|
||||
showUploadList: false,
|
||||
beforeUpload: (file: any) => {
|
||||
const formdata = new FormData();
|
||||
const url = "/api/biz-service-ebtp-extend/v1/highqualitymaintain/upload";
|
||||
formdata.append("file", file);
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
body: formdata,
|
||||
headers: {
|
||||
"Authorization": getUserToken() == null ? null : getUserToken(),
|
||||
}
|
||||
}).then(response => { response.json().then(res => onChange(res?.data)) })
|
||||
return false;
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<Upload
|
||||
{...uploadProps}
|
||||
>
|
||||
{!disabled && <Button icon={<UploadOutlined />} style={{ marginRight: 8 }}>上传</Button>}
|
||||
</Upload>
|
||||
{isNotEmpty(value) ? (
|
||||
<div style={{ color: "red" }}>已上传</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const EventMaintenanceModal: React.FC<EventMaintenanceModalProps> = (props) => {
|
||||
const { modalVisible, onCancel, onOk, record } = props;
|
||||
const [form] = Form.useForm();
|
||||
const { Option } = Select;
|
||||
const { TextArea } = Input;
|
||||
const braftRef = useRef<any>(null);
|
||||
//userData
|
||||
const userData = getSessionUserData();
|
||||
//只读 true只读 false编辑
|
||||
const readOnly: boolean = record.editCode == "2";
|
||||
//上传文件id
|
||||
const [imageId, setImageId] = useState<string>('');
|
||||
//富文本正文图片objectId
|
||||
const [contentImageId, setContentImageId] = useState<string>('');
|
||||
//富文本正文
|
||||
const [content, setContent] = useState<string>('');
|
||||
//活动类型选择
|
||||
const [typeSelect, setTypeSelect] = useState<string>('');
|
||||
//loading
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
//保存
|
||||
const onSubmit = () => {
|
||||
if (isNotEmpty(typeSelect) && (typeSelect === "4") && isEmpty(form.getFieldValue("image"))) {
|
||||
message.error("请上传视频");
|
||||
return;
|
||||
}
|
||||
if (isNotEmpty(typeSelect) && (typeSelect === "1" || typeSelect === "2") && isEmpty(form.getFieldValue("image"))) {
|
||||
message.error("请上传主图");
|
||||
return;
|
||||
}
|
||||
if (isEmpty(braftRef.current.getHtml())) {
|
||||
message.error("请编辑正文内容");
|
||||
return;
|
||||
}
|
||||
form.validateFields().then(values => {
|
||||
const data = {
|
||||
banner: null,
|
||||
createBy: null,
|
||||
id: null,
|
||||
image: null,
|
||||
secordTitle: null,
|
||||
sendTime: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
title: null,
|
||||
type: null,
|
||||
...values,
|
||||
content: braftRef.current.getHtml(),
|
||||
contentImageId: braftRef.current.getImageId(),
|
||||
createTime: null,
|
||||
}
|
||||
setLoading(true);
|
||||
saveEventData(data).then(res => {
|
||||
if (res?.code == 200) {
|
||||
message.success('保存成功');
|
||||
onOk();
|
||||
}
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
})
|
||||
})
|
||||
};
|
||||
const onTypeChage = (value: any) => {
|
||||
setTypeSelect(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (record.editCode == "0") {//新建
|
||||
form.setFieldsValue({
|
||||
id: null,
|
||||
createBy: userData?.fullName,
|
||||
createTime: moment().format("YYYY-MM-DD HH:mm:ss"),
|
||||
});
|
||||
} else if (record.editCode == "1" || record.editCode == "2") {//编辑 查看
|
||||
form.setFieldsValue(record);
|
||||
setImageId(record?.image);
|
||||
setContentImageId(record?.contentImageId);
|
||||
setContent(record?.content);
|
||||
onTypeChage(record?.type);
|
||||
}
|
||||
return () => {
|
||||
setImageId('');
|
||||
setContentImageId('');
|
||||
setTypeSelect('');
|
||||
setContent('');
|
||||
setLoading(false);
|
||||
};
|
||||
}, [record?.id])
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title={record.editCode == "0" ? "新建" : record.editCode == "1" ? "编辑" : "查看"}
|
||||
visible={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
onOk={() => onSubmit()}
|
||||
okButtonProps={{ loading: loading, hidden: readOnly }}
|
||||
okText="保存"
|
||||
maskClosable={false}
|
||||
style={{ maxHeight: modalHeight }}
|
||||
bodyStyle={{ maxHeight: modalHeight - 108, overflowY: 'auto', }}
|
||||
centered
|
||||
cancelText="返回"
|
||||
width={'70%'}
|
||||
>
|
||||
<Spin spinning={loading}>
|
||||
<Form
|
||||
{...layout}
|
||||
name="nest-messages"
|
||||
form={form}
|
||||
validateMessages={validateMessages}
|
||||
preserve={false}
|
||||
>
|
||||
<Form.Item name="id" hidden>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="type" label="活动类型" rules={[{ required: !readOnly }]}>
|
||||
<Select style={{ width: 250 }} onChange={onTypeChage} disabled={record.editCode != "0"} placeholder="请选择">
|
||||
<Option value="1">首页</Option>
|
||||
<Option value="2">工作风采</Option>
|
||||
<Option value="3">高质量运营标杆项目</Option>
|
||||
<Option value="4">运营提升小课堂</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="title"
|
||||
label="标题名称"
|
||||
rules={[{ required: !readOnly }, { max: typeSelect == "2" || typeSelect == "" ? 18 : 30, message: `此项不允许超过${typeSelect == "2" || typeSelect == "" ? 18 : 30}个汉字` }]}
|
||||
tooltip={`此项不允许超过${typeSelect == "2" || typeSelect == "" ? 18 : 30}个汉字`}
|
||||
>
|
||||
<Input disabled={readOnly} placeholder={`请填写标题（不超过${typeSelect == "2" || typeSelect == "" ? 18 : 30}个汉字）`} />
|
||||
</Form.Item>
|
||||
{(typeSelect == "2" || typeSelect == "4") && <Form.Item
|
||||
name="secordTitle"
|
||||
label="副标题名称"
|
||||
tooltip="此项不超过120个汉字"
|
||||
>
|
||||
<TextArea autoSize maxLength={120} disabled={readOnly} placeholder="请填写副标题（不超过120个汉字）" />
|
||||
</Form.Item>}
|
||||
{(isNotEmpty(typeSelect) && typeSelect != "3" && typeSelect != "4") && <Form.Item
|
||||
name="image"
|
||||
label="主图"
|
||||
extra="注：为了避免页面进入加载时间过长，照片尽量压缩至500K左右"
|
||||
required={!readOnly}
|
||||
>
|
||||
<ExtendUpload bid={imageId} btnName="上传" maxCount={1} maxSize={0.6} uploadProps={{ name: "file", disabled: readOnly, accept: ".jfif,.pjpeg,.jpeg,.pjp,.jpg,.png,.gif,.bmp,.dib" }} />
|
||||
</Form.Item>}
|
||||
{typeSelect === "4" && <Form.Item
|
||||
name="image"
|
||||
label="视频"
|
||||
extra="注：请选择MP4文件上传"
|
||||
required={!readOnly}
|
||||
>
|
||||
<VideoUpload disabled={readOnly} />
|
||||
</Form.Item>}
|
||||
<Form.Item label="编制人员" style={{ margin: 0 }}>
|
||||
<Row>
|
||||
<Col span={10}>
|
||||
<Form.Item name="createBy">
|
||||
<Input readOnly disabled={readOnly} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12} offset={2}>
|
||||
<Form.Item name="createTime" label="编制日期">
|
||||
<Input readOnly disabled={readOnly} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item name="content" label="正文内容">
|
||||
{readOnly ? (
|
||||
<div style={{ border: '1px solid #c9d8db', padding: '16px', overflowX: 'auto' }}>
|
||||
<div dangerouslySetInnerHTML={{ __html: record?.content }}></div>
|
||||
</div>
|
||||
) : (
|
||||
<BraftText braftRef={braftRef} echo={content} disabled={false} useImage imageId={contentImageId} />
|
||||
)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Spin>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventMaintenanceModal;
|
||||
@ -0,0 +1,240 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import { Button, Card, message, Popconfirm } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { useRef } from 'react';
|
||||
import EventMaintenanceModal from './components/EventMaintenanceModal';
|
||||
import { changeEventStatus, deleteEvent, getEventList } from './service';
|
||||
import { managerAuthority } from '../../utils';
|
||||
|
||||
const EventMaintenance: React.FC<{}> = () => {
|
||||
const actionRef = useRef<ActionType>();
|
||||
//新建 编辑 查看
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
//行数据
|
||||
const [recordData, setRecordData] = useState<any>({});
|
||||
//loading
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
//新建 编辑 查看
|
||||
const editClick = (record: any, code: string) => {
|
||||
record["editCode"] = code; //新建0 编辑1 查看2
|
||||
setRecordData(record);
|
||||
setModalVisible(true);
|
||||
}
|
||||
|
||||
//撤回 发布
|
||||
const changeClick = async (record: any, code: string) => {
|
||||
const params = {
|
||||
id: record.id,
|
||||
status: code,//草稿0 发布1
|
||||
}
|
||||
setLoading(true);
|
||||
await changeEventStatus(params).then(res => {
|
||||
if (res?.code == 200) {
|
||||
message.success("操作成功");
|
||||
actionRef.current?.reload();
|
||||
}
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
})
|
||||
}
|
||||
//删除
|
||||
const deleteClick = async (record: any) => {
|
||||
setLoading(true);
|
||||
await deleteEvent({ id: record.id }).then(res => {
|
||||
if (res?.code == 200) {
|
||||
message.success("删除成功");
|
||||
actionRef.current?.reload();
|
||||
}
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
})
|
||||
}
|
||||
|
||||
//modal关闭
|
||||
const onCancel = () => {
|
||||
setModalVisible(false);
|
||||
setRecordData({});
|
||||
}
|
||||
const onOk = () => {
|
||||
actionRef.current?.reload();
|
||||
return onCancel();
|
||||
}
|
||||
|
||||
const columns: ProColumns<any>[] = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
valueType: 'index',
|
||||
width: 48,
|
||||
},
|
||||
{
|
||||
title: '标题名称',
|
||||
dataIndex: 'title',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
valueType: 'select',
|
||||
valueEnum: {
|
||||
"1": { text: '首页' },
|
||||
"2": { text: '工作风采' },
|
||||
"3": { text: '高质量运营标杆项目' },
|
||||
"4": { text: '运营提升小课堂' },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '发布时间',
|
||||
key: 'sendTime',
|
||||
dataIndex: 'sendTime',
|
||||
valueType: 'dateTime',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
valueEnum: {
|
||||
"0": { text: '草稿' },
|
||||
"1": { text: '发布' },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
dataIndex: 'startTime',
|
||||
valueType: 'dateTime',
|
||||
hideInTable: true,
|
||||
},
|
||||
{
|
||||
title: '结束时间',
|
||||
dataIndex: 'endTime',
|
||||
valueType: 'dateTime',
|
||||
hideInTable: true,
|
||||
},
|
||||
{
|
||||
title: '发布人',
|
||||
dataIndex: 'createBy',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
hideInSearch: true,
|
||||
render: (text, record, _, action) =>
|
||||
record.status == "1" ? [
|
||||
<Button
|
||||
type='text'
|
||||
key="view"
|
||||
onClick={() => editClick(record, "2")}
|
||||
>
|
||||
查看
|
||||
</Button>,
|
||||
<Popconfirm
|
||||
title="撤回后，活动将不再发布，确认撤回？"
|
||||
onConfirm={() => changeClick(record, "0")}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button
|
||||
type='text'
|
||||
key="withdraw"
|
||||
hidden={managerAuthority("ebtp-party-admin")}
|
||||
>
|
||||
撤回
|
||||
</Button>
|
||||
</Popconfirm>,
|
||||
] : [
|
||||
<Button
|
||||
type='text'
|
||||
key="editable"
|
||||
onClick={() => editClick(record, "1")}
|
||||
hidden={managerAuthority("ebtp-party-admin")}
|
||||
>
|
||||
编辑
|
||||
</Button>,
|
||||
<Popconfirm
|
||||
title="此活动将彻底删除，确认删除？"
|
||||
onConfirm={() => deleteClick(record)}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button
|
||||
type='text'
|
||||
key="delete"
|
||||
hidden={managerAuthority("ebtp-party-admin")}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>,
|
||||
<Popconfirm
|
||||
title="活动将发布，确认发布？"
|
||||
onConfirm={() => changeClick(record, "1")}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button
|
||||
type='text'
|
||||
key="release"
|
||||
hidden={managerAuthority("ebtp-party-admin")}
|
||||
>
|
||||
发布
|
||||
</Button>
|
||||
</Popconfirm>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card className="zjl-entrust confirm" bodyStyle={{ padding: '16px 24px 0px', height: window.innerHeight - 105, overflowY: 'auto' }}>
|
||||
<ProTable<any>
|
||||
columns={columns}
|
||||
actionRef={actionRef}
|
||||
loading={loading}
|
||||
request={async (params) => {
|
||||
setLoading(true);
|
||||
return await getEventList(params).then(res => {
|
||||
if (res?.success) {
|
||||
return {
|
||||
data: res?.data.records,
|
||||
success: res?.success,
|
||||
total: res?.data.total
|
||||
};
|
||||
}
|
||||
return {
|
||||
data: [],
|
||||
success: false,
|
||||
total: 0,
|
||||
};
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
})
|
||||
}}
|
||||
rowKey="id"
|
||||
options={false}
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
}}
|
||||
search={{
|
||||
defaultCollapsed: false,//默认展开
|
||||
}}
|
||||
dateFormatter="string"
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
type="primary"
|
||||
onClick={() => editClick({}, "0")}
|
||||
loading={loading}
|
||||
hidden={managerAuthority("ebtp-party-admin")}
|
||||
>
|
||||
新建
|
||||
</Button>
|
||||
]}
|
||||
/>
|
||||
{modalVisible && <EventMaintenanceModal modalVisible={modalVisible} onCancel={onCancel} onOk={onOk} record={recordData} />}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventMaintenance
|
||||
@ -0,0 +1,36 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
//活动维护列表
|
||||
export async function getEventList(data: any) {
|
||||
return request('/api/biz-service-ebtp-extend/v1/highqualitymaintain/styleProject/list', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
...data,
|
||||
pageNo: data.current,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
//发布或撤回维护数据
|
||||
export async function changeEventStatus(params: any) {
|
||||
return request('/api/biz-service-ebtp-extend/v1/highqualitymaintain/styleProject/send', {
|
||||
method: 'GET',
|
||||
params: { ...params },
|
||||
});
|
||||
}
|
||||
|
||||
//删除维护数据
|
||||
export async function deleteEvent(params: any) {
|
||||
return request('/api/biz-service-ebtp-extend/v1/highqualitymaintain/styleProject/delete', {
|
||||
method: 'GET',
|
||||
params: { ...params },
|
||||
});
|
||||
}
|
||||
|
||||
//保存维护数据
|
||||
export async function saveEventData(data: any) {
|
||||
return request('/api/biz-service-ebtp-extend/v1/highqualitymaintain/styleProject/save', {
|
||||
method: 'POST',
|
||||
data: { ...data },
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user