9 changed files with 1169 additions and 354 deletions
-
121src/pages/SystemMgm/MessageMgm/ConfMes/ConfInfoModal/index.jsx
-
22src/pages/SystemMgm/MessageMgm/ConfMes/ConfInfoModal/index.scss
-
280src/pages/SystemMgm/MessageMgm/ConfMes/index.scss
-
105src/pages/SystemMgm/MessageMgm/ConfMes/index2.scss
-
616src/pages/SystemMgm/MessageMgm/ConfMes/loadable.jsx
-
284src/pages/SystemMgm/MessageMgm/ConfMes/loadable2.jsx
-
5src/pages/SystemMgm/OrgnizationMgm/loadable.jsx
-
40src/services/SystemMgm/MsgMgm/index.js
-
2src/services/SystemMgm/index.js
@ -0,0 +1,121 @@ |
|||
import React, {useState, useEffect} from 'react' |
|||
import { Modal, Form, Input, DatePicker, TreeSelect, Button } from 'antd' |
|||
import moment from 'moment' |
|||
import './index.scss' |
|||
|
|||
function ConfInfoModal (props) { |
|||
const { |
|||
visible, |
|||
isEdit=false, |
|||
isDetail=false, |
|||
onCancel, |
|||
userListData=[], |
|||
data={}, |
|||
onOk |
|||
} = props |
|||
|
|||
const [baseForm] = Form.useForm() |
|||
|
|||
const rules = [ |
|||
{ |
|||
required: true, |
|||
message: "此为必填字段", |
|||
}, |
|||
] |
|||
|
|||
const handleSave = () => { |
|||
baseForm.validateFields().then((data) => { |
|||
onOk({...data, push_time: data.push_time.format('YYYY-MM-DD HH:mm:ss'), reciverId: data.reciverId.join(',')}) |
|||
}).catch(err => { |
|||
console.error(err) |
|||
}) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
if (visible) { |
|||
baseForm.setFieldsValue({...data, push_time: moment(data.push_time), reciverId: data.reciverId ? data.reciverId.split(",") : undefined}) |
|||
} else { |
|||
baseForm.resetFields() |
|||
} |
|||
}, [visible]) |
|||
|
|||
return ( |
|||
<Modal |
|||
open={visible} |
|||
onCancel={onCancel} |
|||
footer={null} |
|||
width={600} |
|||
className="yisa-modal modal-conf" |
|||
title={isEdit ? '消息配置' : '消息详情'} |
|||
> |
|||
<div className="conf-form-container"> |
|||
<Form |
|||
form={baseForm} |
|||
labelCol={{ |
|||
span: 4, |
|||
offset: 0 |
|||
}} |
|||
> |
|||
<Form.Item name="infoId" hidden></Form.Item> |
|||
<Form.Item label="消息标题" name="title" rules={isDetail ? undefined : rules}> |
|||
{ |
|||
!isDetail ? ( |
|||
<Input disabled={!isEdit} /> |
|||
) : ( |
|||
<div className="conf-detail-info conf-detail-title">{data.title}</div> |
|||
) |
|||
} |
|||
</Form.Item> |
|||
<Form.Item label="消息内容" name="content" rules={isDetail ? undefined : rules}> |
|||
{ |
|||
!isDetail ? ( |
|||
<Input.TextArea rows={8} disabled={!isEdit} /> |
|||
) : ( |
|||
<div className="conf-detail-info conf-detail-textarea">{data.content}</div> |
|||
) |
|||
} |
|||
</Form.Item> |
|||
<Form.Item label="推送时间" name="push_time" rules={isDetail ? undefined : rules}> |
|||
{ |
|||
!isDetail ? ( |
|||
<DatePicker allowClear={false} showTime disabled={!isEdit} /> |
|||
) : ( |
|||
<div className="conf-detail-info">{data.push_time}</div> |
|||
) |
|||
} |
|||
</Form.Item> |
|||
<Form.Item label="推送人" name="reciverId" rules={isDetail ? undefined : rules}> |
|||
{ |
|||
!isDetail ? ( |
|||
<TreeSelect treeCheckable disabled={!isEdit} treeData={userListData} maxTagCount={5} fieldNames={{label: 'name', value: 'id'}} /> |
|||
) : ( |
|||
<div className="conf-detail-info">{data.reciver}</div> |
|||
) |
|||
} |
|||
</Form.Item> |
|||
</Form> |
|||
</div> |
|||
|
|||
<div className="conf-form-btn"> |
|||
{ |
|||
isDetail ? ( |
|||
<Button onClick={onCancel}>关闭</Button> |
|||
) : ( |
|||
<> |
|||
<Button type="" onClick={onCancel}>取消</Button> |
|||
{ |
|||
(data.infoId) ? ( |
|||
<Button type="primary" onClick={handleSave}>重新配置</Button> |
|||
) : ( |
|||
<Button type="primary" onClick={handleSave}>新增</Button> |
|||
) |
|||
} |
|||
</> |
|||
) |
|||
} |
|||
</div> |
|||
</Modal> |
|||
) |
|||
} |
|||
|
|||
export default ConfInfoModal |
|||
@ -0,0 +1,22 @@ |
|||
.modal-conf { |
|||
.conf-form-btn { |
|||
display: flex; |
|||
justify-content: center; |
|||
button { |
|||
margin: 0 10px; |
|||
&:first-child { |
|||
background: var(--button-default-bg); |
|||
} |
|||
} |
|||
} |
|||
.conf-detail-title { |
|||
font-size: 18px; |
|||
font-weight: 700; |
|||
} |
|||
.conf-detail-textarea { |
|||
min-height: 200px; |
|||
border: 1px solid #666d7d; |
|||
padding: 10px; |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
@ -1,105 +1,223 @@ |
|||
@import "@/assets/css/mixin.scss"; |
|||
$color-container-bg: var(--color-container-bg); |
|||
$color-user-list-bg: var(--color-user-list-bg); |
|||
$color-text: var(--color-text); |
|||
$color-primary: var(--color-primary); |
|||
|
|||
.ltc-box { |
|||
width: 100%; |
|||
.ltc-box-title { |
|||
font-size: 18px; |
|||
font-weight: bolder; |
|||
$color-container-bg : var(--color-container-bg); |
|||
$color-user-list-bg : var(--color-user-list-bg); |
|||
$color-text : var(--color-text); |
|||
$color-primary : var(--color-primary); |
|||
|
|||
.sys-container { |
|||
display: flex; |
|||
padding-top: 10px; |
|||
height: 100%; |
|||
.sys-container-left { |
|||
display: block; |
|||
width: 375px; |
|||
padding: 10px 10px 20px 20px; |
|||
} |
|||
.sys-container-right { |
|||
width: calc(100% - 375px); |
|||
padding-bottom: 15px; |
|||
padding: 20px; |
|||
background: var(--color-user-list-bg); |
|||
border-top-left-radius: 20px; |
|||
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); |
|||
.ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list { |
|||
width: unset; |
|||
} |
|||
.ant-tabs-tab { |
|||
padding: unset; |
|||
} |
|||
|
|||
.sys-content { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.sys-tabs { |
|||
margin-bottom: 10px; |
|||
} |
|||
.sys-wrapper { |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.sys-container { |
|||
.yisa-search { |
|||
width: 100%; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
.text { |
|||
display: inline-block; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 24px; |
|||
|
|||
label { |
|||
color: var(--color-search-list-item-text); |
|||
flex: 0 0 27% !important; |
|||
max-width: 27% !important; |
|||
text-align: right; |
|||
padding-right: 8px; |
|||
} |
|||
.line { |
|||
display: inline-block; |
|||
border: 1px dotted #607092; |
|||
width: inherit; |
|||
margin-bottom: 6px; |
|||
} |
|||
.ltc-icon { |
|||
width: 5px; |
|||
background: #0080db; |
|||
height: 19px; |
|||
display: inline-block; |
|||
margin-right: 10px; |
|||
|
|||
.form-con { |
|||
flex: 1; |
|||
width: 220px; |
|||
} |
|||
.ltc-btn { |
|||
display: inline-block; |
|||
border: 1px solid; |
|||
border-radius: 5px; |
|||
margin: 0 10px; |
|||
width: 60px; |
|||
height: 35px; |
|||
line-height: 35px; |
|||
} |
|||
.form-btn { |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
justify-content: space-between; |
|||
// margin: 40px 0px 0px; |
|||
padding: 0 3px; |
|||
|
|||
.ant-btn+.ant-btn { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.ant-btn span { |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Regular; |
|||
font-weight: 400; |
|||
text-align: center; |
|||
background: #409eff; |
|||
color: #fff; |
|||
font-weight: 100; |
|||
cursor: pointer; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.reset { |
|||
width: 90px; |
|||
height: 36px; |
|||
background: var(--button-default-bg); |
|||
} |
|||
|
|||
.btn-export { |
|||
width: 90px; |
|||
height: 36px; |
|||
} |
|||
.ltc-cancel { |
|||
background: #fff; |
|||
color: #000; |
|||
|
|||
.add-btn { |
|||
width: 90px; |
|||
height: 36px; |
|||
} |
|||
|
|||
.submit { |
|||
width: 90px; |
|||
height: 36px; |
|||
} |
|||
.ltc-box-line { |
|||
border: 1px solid #e7e7e7; |
|||
margin: 8px 0; |
|||
} |
|||
.ltc-box-in { |
|||
margin-left: 20px; |
|||
.ant-descriptions { |
|||
margin-left: 20px; |
|||
.ant-select-selector, |
|||
.ant-picker, |
|||
.ant-input { |
|||
background-color: var(--color-search-list-item-bg) !important; |
|||
box-shadow: none !important; |
|||
color: var(--color-search-list-item-value); |
|||
border-color: var(--color-search-list-item-bd) !important; |
|||
} |
|||
.ant-picker { |
|||
width: 100%; |
|||
} |
|||
.ltc-title { |
|||
margin: auto; |
|||
width: 50%; |
|||
text-align: center; |
|||
.sys-search { |
|||
.title { |
|||
width: 100%; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Bold; |
|||
font-weight: 700; |
|||
text-align: left; |
|||
color: var(--color-text); |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
.form-Wrap { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
} |
|||
.ant-cascader-menu { |
|||
width: 260px; |
|||
} |
|||
|
|||
|
|||
.sys-container-right { |
|||
.export-container { |
|||
margin-bottom: 10px; |
|||
text-align: right; |
|||
} |
|||
.sys-item { |
|||
height: 350px; |
|||
} |
|||
.sys-table-content { |
|||
margin-top: 20px; |
|||
.sys-table { |
|||
flex: 1; |
|||
.ant-table-body { |
|||
@include scrollBar(var(--color-user-list-bg), #3B97FF); |
|||
} |
|||
.ant-table-fixed-header .ant-table-tbody tr:nth-child(2n+1) > td { |
|||
background: unset !important; |
|||
background-color: #3e4557 !important; |
|||
} |
|||
.msg-item { |
|||
text-align: left; |
|||
.msg-title { |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
font-weight: 700; |
|||
} |
|||
.ltc-content { |
|||
margin: auto; |
|||
padding: 20px; |
|||
.ltc-item { |
|||
font-size: 14px; |
|||
margin: 6px 12px 6px 0; |
|||
display: inline-flex; |
|||
//width: 470px; |
|||
.new-item { |
|||
.msg-content { |
|||
display: inline-block; |
|||
width: 120px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
background: rgba(150,161,192,0.24); |
|||
text-align: center; |
|||
span { |
|||
color: red; |
|||
font-size: 16px; |
|||
text-wrap: nowrap; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
max-width: 100%; |
|||
} |
|||
} |
|||
.new-value { |
|||
display: inline-block; |
|||
width: 320px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
text-align: center; |
|||
background: #3E4557; |
|||
box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.12); |
|||
} |
|||
.ltc-item-input { |
|||
display: inline-block; |
|||
width: 200px; |
|||
} |
|||
div { |
|||
width: 150px; |
|||
} |
|||
|
|||
.action-btn { |
|||
// background: #409eff; |
|||
// border: none; |
|||
// width: 50px; |
|||
// border-radius: 4px; |
|||
cursor: pointer; |
|||
} |
|||
.action-wrapper { |
|||
div { |
|||
cursor: pointer; |
|||
margin-top: 5px; |
|||
} |
|||
} |
|||
|
|||
.sys-item { |
|||
color: #fff; |
|||
background: #3e4557; |
|||
border-radius: 4px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 20px; |
|||
&-title { |
|||
height: 18px; |
|||
display: flex; |
|||
align-items: center; |
|||
position: relative; |
|||
text-indent: .5rem; |
|||
font-size: 16px; |
|||
font-weight: 700; |
|||
user-select: none; |
|||
.time { |
|||
font-size: 12px; |
|||
} |
|||
&::before { |
|||
position: absolute; |
|||
content: ""; |
|||
height: 100%; |
|||
width: 4px; |
|||
left: -2px; |
|||
background: var(--color-menu-selected-text-item); |
|||
} |
|||
} |
|||
&-content { |
|||
flex: 1; |
|||
.echarts-for-react { |
|||
height: 100% !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,105 @@ |
|||
@import "@/assets/css/mixin.scss"; |
|||
$color-container-bg: var(--color-container-bg); |
|||
$color-user-list-bg: var(--color-user-list-bg); |
|||
$color-text: var(--color-text); |
|||
$color-primary: var(--color-primary); |
|||
|
|||
.ltc-box { |
|||
width: 100%; |
|||
.ltc-box-title { |
|||
font-size: 18px; |
|||
font-weight: bolder; |
|||
width: 100%; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
.text { |
|||
display: inline-block; |
|||
} |
|||
.line { |
|||
display: inline-block; |
|||
border: 1px dotted #607092; |
|||
width: inherit; |
|||
margin-bottom: 6px; |
|||
} |
|||
.ltc-icon { |
|||
width: 5px; |
|||
background: #0080db; |
|||
height: 19px; |
|||
display: inline-block; |
|||
margin-right: 10px; |
|||
} |
|||
.ltc-btn { |
|||
display: inline-block; |
|||
border: 1px solid; |
|||
border-radius: 5px; |
|||
margin: 0 10px; |
|||
width: 60px; |
|||
height: 35px; |
|||
line-height: 35px; |
|||
text-align: center; |
|||
background: #409eff; |
|||
color: #fff; |
|||
font-weight: 100; |
|||
cursor: pointer; |
|||
} |
|||
.ltc-cancel { |
|||
background: #fff; |
|||
color: #000; |
|||
} |
|||
} |
|||
.ltc-box-line { |
|||
border: 1px solid #e7e7e7; |
|||
margin: 8px 0; |
|||
} |
|||
.ltc-box-in { |
|||
margin-left: 20px; |
|||
.ant-descriptions { |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
.ltc-title { |
|||
margin: auto; |
|||
width: 50%; |
|||
text-align: center; |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
} |
|||
.ltc-content { |
|||
margin: auto; |
|||
padding: 20px; |
|||
.ltc-item { |
|||
font-size: 14px; |
|||
margin: 6px 12px 6px 0; |
|||
display: inline-flex; |
|||
//width: 470px; |
|||
.new-item { |
|||
display: inline-block; |
|||
width: 120px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
background: rgba(150,161,192,0.24); |
|||
text-align: center; |
|||
span { |
|||
color: red; |
|||
} |
|||
} |
|||
.new-value { |
|||
display: inline-block; |
|||
width: 320px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
text-align: center; |
|||
background: #3E4557; |
|||
box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.12); |
|||
} |
|||
.ltc-item-input { |
|||
display: inline-block; |
|||
width: 200px; |
|||
} |
|||
div { |
|||
width: 150px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -1,284 +1,406 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
import { |
|||
message, |
|||
Pagination, |
|||
Table, |
|||
Input, |
|||
Space, |
|||
Modal, |
|||
Button, |
|||
Select, |
|||
Tabs, |
|||
Descriptions, |
|||
Transfer, |
|||
} from "antd"; |
|||
import moment from "moment"; |
|||
import ajax from '@/services' |
|||
import { TableModule } from "@/components"; |
|||
import { dictionary } from "@/config/common.js"; |
|||
import "./index.scss"; |
|||
//import ReactQuill, { Quill } from 'react-quill'; |
|||
//import "react-quill/dist/quill.snow.css"; |
|||
import React, { useState, useRef, useEffect } from "react" |
|||
import { Select, Input, Button, Table, message, Pagination, DatePicker, Cascader, Tooltip, Popover, Modal } from "antd" |
|||
import { DeleteOutlined } from '@ant-design/icons' |
|||
import { ResultFlowResult, QuickMenu } from '@/components' |
|||
import { dictionary } from "@/config/common" |
|||
import ConfInfoModal from './ConfInfoModal' |
|||
import ajax from "@/services" |
|||
import moment from "moment" |
|||
import './index.scss' |
|||
|
|||
function ConfMes() { |
|||
const [resultData, setResultData] = useState([]) |
|||
const [sendData, setSendData] = useState({}) |
|||
const [total, setTotal] = useState(0); |
|||
const [detailVisible, setDetailVisible] = useState(true); |
|||
const [tabKey, setTabKey] = useState("1"); |
|||
// 已选择平台商户 |
|||
const [targetKeys, setTargetKeys] = useState([]); |
|||
// 勾选平台商户 |
|||
const [selectedKeys, setSelectedKeys] = useState([]); |
|||
// 选项在两栏之间转移时的回调 |
|||
const onTransferChange = (nextTargetKeys) => { |
|||
setTargetKeys(nextTargetKeys); |
|||
}; |
|||
function ConfMes(props) { |
|||
const { |
|||
|
|||
// 选中项发生改变时的回调 |
|||
const onTransferSelectChange = (sourceSelectedKeys, targetSelectedKeys) => { |
|||
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]); |
|||
}; |
|||
const columns = [ |
|||
} = props |
|||
|
|||
const [loading, setLoading] = useState(false) |
|||
const defaultFormData = { |
|||
keyword: '', |
|||
// start_time: moment().startOf("day").format('YYYY-MM-DD'), |
|||
// end_time: moment().format('YYYY-MM-DD'), |
|||
start_time: '', |
|||
end_time: '' |
|||
} |
|||
const [formData, setFormData] = useState({ |
|||
...defaultFormData |
|||
}) |
|||
const [pageInfo, setPageInfo] = useState({ |
|||
pn: 1, |
|||
length: 10 |
|||
}) |
|||
const [resultData, setResultDate] = useState({ |
|||
list: [], |
|||
totalRecords: 0 |
|||
}) |
|||
const [infoModalVisible, setInfoModalVisible] = useState(false) |
|||
const [isEdit, setIsEdit] = useState(false) |
|||
const [isDetail, setIsDetail] = useState(false) |
|||
const [activeInfo, setActiveInfo] = useState({}) |
|||
const [userTreeList, setUserTreeList] = useState([]) |
|||
const tableColumns = [ |
|||
{ |
|||
title: "序号", |
|||
dataIndex: "index", |
|||
key: "index", |
|||
align: "center", |
|||
render: (_, record, index) => { |
|||
return index + 1; |
|||
}, |
|||
}, |
|||
{ |
|||
title: "标题", |
|||
dataIndex: "a", |
|||
key: "a", |
|||
align: "center", |
|||
fixed: "right", |
|||
}, |
|||
{ |
|||
title: "操作人", |
|||
dataIndex: "me", |
|||
key: "me", |
|||
align: "center", |
|||
fixed: "right", |
|||
}, |
|||
{ |
|||
title: "所属路段", |
|||
dataIndex: "s", |
|||
key: "s", |
|||
align: "center", |
|||
fixed: "right", |
|||
}, |
|||
{ |
|||
title: "发送时间", |
|||
dataIndex: "d", |
|||
key: "de", |
|||
align: "center", |
|||
fixed: "right", |
|||
width: 60, |
|||
align: 'center', |
|||
render: (text, record, index) => (pageInfo.pn - 1) * pageInfo.length + index + 1 |
|||
}, |
|||
{ |
|||
title: "状态", |
|||
dataIndex: "d", |
|||
key: "r", |
|||
align: "center", |
|||
fixed: "right", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
dataIndex: "operation", |
|||
key: "operation", |
|||
align: "center", |
|||
fixed: "right", |
|||
render: (_, record) => { |
|||
title: "消息详情", |
|||
align: 'center', |
|||
render: (text, record) => { |
|||
return ( |
|||
<Button |
|||
type="primary" |
|||
onClick={() => { |
|||
|
|||
}} |
|||
> |
|||
操作 |
|||
</Button> |
|||
); |
|||
}, |
|||
<div className="msg-item"> |
|||
<div className="msg-title">{record.title}</div> |
|||
<Tooltip title={record.content}> |
|||
<div className="msg-content">{record.content}</div> |
|||
</Tooltip> |
|||
</div> |
|||
) |
|||
} |
|||
}, |
|||
]; |
|||
//检索条件 |
|||
const formSearch = [ |
|||
{ |
|||
name: "status", |
|||
type: "Select", |
|||
label: "状态", |
|||
options: [ |
|||
{ |
|||
label: "全部", |
|||
value: -1, |
|||
title: "接收人", |
|||
width: 200, |
|||
align: 'center', |
|||
dataIndex: "reciver", |
|||
}, |
|||
{ |
|||
label: "已发送", |
|||
value: 0, |
|||
title: "推送时间", |
|||
width: 200, |
|||
align: 'center', |
|||
dataIndex: "push_time", |
|||
}, |
|||
{ |
|||
label: "未发送", |
|||
value: 1, |
|||
}, |
|||
], |
|||
}, |
|||
title: '操作', |
|||
width: 200, |
|||
align: 'center', |
|||
render: (text, record) => { |
|||
return <> |
|||
<Popover content={ |
|||
<div className="action-wrapper"> |
|||
<div onClick={() => { handleDel(record) }}>删除</div> |
|||
<div onClick={() => { handleEdit(record) }}>重新编辑</div> |
|||
<div onClick={() => { handleDetail(record) }}>详情</div> |
|||
</div>}> |
|||
<Button type="primary" className="action-btn">操作</Button> |
|||
</Popover> |
|||
</> |
|||
} |
|||
} |
|||
] |
|||
const paginationProps = { |
|||
className: "pagination-common", |
|||
showQuickJumper: true, |
|||
showSizeChanger: true, |
|||
current: pageInfo.pn, |
|||
total: resultData?.totalRecords, |
|||
pageSize: pageInfo.length, |
|||
pageSizeOptions: Array.from( |
|||
new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) |
|||
), |
|||
onChange: (current, size) => { |
|||
setPageInfo({ |
|||
...pageInfo, |
|||
...{ pn: current, length: size } |
|||
}); |
|||
} |
|||
} |
|||
const toDeftime = (v) => { |
|||
setFormData({ |
|||
...formData, |
|||
start_time: moment(v.startDateTime), |
|||
end_time: moment(v.endDateTime) |
|||
}) |
|||
} |
|||
const ajaxGetListData = () => { |
|||
setLoading(true) |
|||
ajax.getMsgConfList({...formData, ...pageInfo}).then(res => { |
|||
if (res.status == 20000) { |
|||
setResultDate({ |
|||
list: res.data, |
|||
totalRecords: res.totalRecords || 0 |
|||
}) |
|||
} |
|||
setLoading(false) |
|||
}) |
|||
} |
|||
|
|||
]; |
|||
const ajaxGetUserListData = () => { |
|||
ajax.getUserTreeData().then(res => { |
|||
if (res.status == 20000) { |
|||
setUserTreeList(res.data) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
//列表数据 |
|||
function search(e) { |
|||
console.log(e) |
|||
ajax.getConfMesList(e).then((res) => { |
|||
let { status, data, total } = res |
|||
if (status == 20000) { |
|||
if (data.list) { |
|||
setResultData(data.list) |
|||
setTotal(data.total) |
|||
} else { |
|||
setResultData(data) |
|||
setTotal(total) |
|||
const TimeChange = () => { |
|||
let e = formData.date_type; |
|||
let str = "date"; |
|||
let mat = "YYYY-MM-DD"; |
|||
if (e == "year") { |
|||
str = "year"; |
|||
mat = "YYYY"; |
|||
} else if (e == "month") { |
|||
str = "month"; |
|||
mat = "YYYY-MM"; |
|||
} else if (e == "week") { |
|||
str = "week"; |
|||
mat = "YYYY-MM-DD"; |
|||
} |
|||
return { str, mat }; |
|||
} |
|||
|
|||
const ajaxMsgInfoUpdate = (data) => { |
|||
return new Promise((resolve, rejected) => { |
|||
ajax.msgConfUpdate(data).then((res) => { |
|||
if (res.status == 20000) { |
|||
resolve(res.messgae) |
|||
} else { |
|||
setResultData([]) |
|||
message.error(res.message) |
|||
rejected(res.message) |
|||
} |
|||
}).catch((err) => { |
|||
rejected(err) |
|||
}) |
|||
}) |
|||
} |
|||
const textModules = { |
|||
toolbar: { |
|||
container: [ |
|||
[{ 'size': ['small', false, 'large', 'huge'] }], //字体设置 |
|||
// [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //标题字号，不能设置单个字大小 |
|||
['bold', 'italic', 'underline', 'strike'], |
|||
[{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }], |
|||
['link', 'image'], // a链接和图片的显示 |
|||
[{ 'align': [] }], |
|||
[{ |
|||
'background': ['rgb( 0, 0, 0)', 'rgb(230, 0, 0)', 'rgb(255, 153, 0)', |
|||
'rgb(255, 255, 0)', 'rgb( 0, 138, 0)', 'rgb( 0, 102, 204)', |
|||
'rgb(153, 51, 255)', 'rgb(255, 255, 255)', 'rgb(250, 204, 204)', |
|||
'rgb(255, 235, 204)', 'rgb(255, 255, 204)', 'rgb(204, 232, 204)', |
|||
'rgb(204, 224, 245)', 'rgb(235, 214, 255)', 'rgb(187, 187, 187)', |
|||
'rgb(240, 102, 102)', 'rgb(255, 194, 102)', 'rgb(255, 255, 102)', |
|||
'rgb(102, 185, 102)', 'rgb(102, 163, 224)', 'rgb(194, 133, 255)', |
|||
'rgb(136, 136, 136)', 'rgb(161, 0, 0)', 'rgb(178, 107, 0)', |
|||
'rgb(178, 178, 0)', 'rgb( 0, 97, 0)', 'rgb( 0, 71, 178)', |
|||
'rgb(107, 36, 178)', 'rgb( 68, 68, 68)', 'rgb( 92, 0, 0)', |
|||
'rgb(102, 61, 0)', 'rgb(102, 102, 0)', 'rgb( 0, 55, 0)', |
|||
'rgb( 0, 41, 102)', 'rgb( 61, 20, 10)'] |
|||
}], |
|||
[{ |
|||
'color': ['rgb( 0, 0, 0)', 'rgb(230, 0, 0)', 'rgb(255, 153, 0)', |
|||
'rgb(255, 255, 0)', 'rgb( 0, 138, 0)', 'rgb( 0, 102, 204)', |
|||
'rgb(153, 51, 255)', 'rgb(255, 255, 255)', 'rgb(250, 204, 204)', |
|||
'rgb(255, 235, 204)', 'rgb(255, 255, 204)', 'rgb(204, 232, 204)', |
|||
'rgb(204, 224, 245)', 'rgb(235, 214, 255)', 'rgb(187, 187, 187)', |
|||
'rgb(240, 102, 102)', 'rgb(255, 194, 102)', 'rgb(255, 255, 102)', |
|||
'rgb(102, 185, 102)', 'rgb(102, 163, 224)', 'rgb(194, 133, 255)', |
|||
'rgb(136, 136, 136)', 'rgb(161, 0, 0)', 'rgb(178, 107, 0)', |
|||
'rgb(178, 178, 0)', 'rgb( 0, 97, 0)', 'rgb( 0, 71, 178)', |
|||
'rgb(107, 36, 178)', 'rgb( 68, 68, 68)', 'rgb( 92, 0, 0)', |
|||
'rgb(102, 61, 0)', 'rgb(102, 102, 0)', 'rgb( 0, 55, 0)', |
|||
'rgb( 0, 41, 102)', 'rgb( 61, 20, 10)'] |
|||
}], |
|||
['clean'], //清空 |
|||
['emoji'], //emoji表情，设置了才能显示 |
|||
['video2'], //我自定义的视频图标，和插件提供的不一样，所以设置为video2 |
|||
], |
|||
// handlers: { |
|||
// 'image': this.imageHandler.bind(this), //点击图片标志会调用的方法 |
|||
// 'video2': this.showVideoModal.bind(this), |
|||
// }, |
|||
}, |
|||
// ImageExtend: { |
|||
// loading: true, |
|||
// name: 'img', |
|||
// action: RES_URL + "connector?isRelativePath=true", |
|||
// response: res => FILE_URL + res.info.url |
|||
// }, |
|||
ImageDrop: true, |
|||
'emoji-toolbar': true, //是否展示出来 |
|||
"emoji-textarea": false, //我不需要emoji展示在文本框所以设置为false |
|||
"emoji-shortname": true, |
|||
|
|||
const handleInfoUpdate = (data) => { |
|||
ajaxMsgInfoUpdate(data).then(msg => { |
|||
message.success(msg) |
|||
setInfoModalVisible(false) |
|||
handleSearch() |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
} |
|||
|
|||
const handleAdd = () => { |
|||
setIsEdit(true) |
|||
setIsDetail(false) |
|||
setActiveInfo({}) |
|||
setInfoModalVisible(true) |
|||
} |
|||
|
|||
const handleDel = (data) => { |
|||
Modal.confirm({ |
|||
title: '确认删除', |
|||
content: `是否删除此消息？`, |
|||
icon: <DeleteOutlined color="#f40" />, |
|||
onOk: () => { |
|||
ajaxMsgDel(data).then(msg => { |
|||
message.success(msg) |
|||
handleSearch() |
|||
}).catch(err => { |
|||
console.error(err) |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const ajaxMsgDel = (data) => { |
|||
return new Promise((resolved, rejected) => { |
|||
ajax.msgConfDel({infoId: data.infoId}).then(res => { |
|||
if (res.status == 20000) { |
|||
resolved(res.message) |
|||
} |
|||
}).catch(err => { |
|||
rejected(err) |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
const handleEdit = (data) => { |
|||
setIsEdit(true) |
|||
setIsDetail(false) |
|||
setActiveInfo({...data}) |
|||
setInfoModalVisible(true) |
|||
} |
|||
|
|||
const handleDetail = (data) => { |
|||
setIsEdit(false) |
|||
setIsDetail(true) |
|||
setActiveInfo({...data}) |
|||
setInfoModalVisible(true) |
|||
} |
|||
|
|||
const handleInfoModalCancel = () => { |
|||
setInfoModalVisible(false) |
|||
} |
|||
|
|||
const handleReset = () => { |
|||
setFormData({ |
|||
...defaultFormData |
|||
}) |
|||
setPageInfo({ |
|||
pn: 1, |
|||
length: 10 |
|||
}) |
|||
} |
|||
|
|||
const handleSearch = () => { |
|||
ajaxGetListData() |
|||
} |
|||
|
|||
useEffect(() => { |
|||
ajaxGetListData() |
|||
}, [JSON.stringify(pageInfo)]) |
|||
|
|||
useEffect(() => { |
|||
ajaxGetUserListData() |
|||
}, []) |
|||
|
|||
return ( |
|||
<> |
|||
<TableModule |
|||
columns={columns} |
|||
tableData={resultData} |
|||
formSearch={formSearch} |
|||
search={search} |
|||
total={total} |
|||
diyButton={ |
|||
<div className="arrearage-container sys-container"> |
|||
<div className="sys-container-left"> |
|||
<div className="sys-search"> |
|||
<div className="title">查询条件</div> |
|||
<div className="form-Wrap"> |
|||
<div className="yisa-search"> |
|||
<label>消息关键字</label> |
|||
<Input |
|||
value={formData.keyword} |
|||
placeholder="请输入消息关键字" |
|||
onChange={v => setFormData({...formData, keyword: v.target.value})} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>时间范围</label> |
|||
<DatePicker |
|||
format={TimeChange().mat} |
|||
picker={TimeChange().str} |
|||
allowClear={false} |
|||
value={formData.start_time ? moment(formData.start_time) : null} |
|||
onChange={(date, dateString) => { |
|||
if (TimeChange().str == "week") { |
|||
setFormData({ |
|||
...formData, |
|||
start_time: date |
|||
? moment(date).day(1).format("YYYY-MM-DD") |
|||
: null, |
|||
}); |
|||
} else if (TimeChange().str == "day") { |
|||
if (date > moment(formData.end_time)) { |
|||
setFormData({ |
|||
...formData, |
|||
end_time: dateString, |
|||
start_time: formData.end_time, |
|||
}); |
|||
} else { |
|||
setFormData({ |
|||
...formData, |
|||
start_time: dateString, |
|||
}); |
|||
} |
|||
} else { |
|||
setFormData({ ...formData, start_time: dateString }); |
|||
} |
|||
}} |
|||
disabledDate={(current) => current > moment(formData.end_time)} |
|||
/> |
|||
|
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>至</label> |
|||
<DatePicker |
|||
style={{ width: "100%" }} |
|||
format={TimeChange().mat} |
|||
picker={TimeChange().str} |
|||
allowClear={false} |
|||
value={formData.end_time ? moment(formData.end_time) : null} |
|||
onChange={(date, dateString) => { |
|||
if (TimeChange().str == "week") { |
|||
setFormData({ |
|||
...formData, |
|||
end_time: date |
|||
? moment(date).day(7).format("YYYY-MM-DD") |
|||
: null, |
|||
}); |
|||
} else if (TimeChange().str == "day") { |
|||
if (date < moment(formData.start_time)) { |
|||
setFormData({ |
|||
...formData, |
|||
start_time: dateString, |
|||
end_time: formData.start_time, |
|||
}); |
|||
} else { |
|||
setFormData({ |
|||
...formData, |
|||
end_time: dateString, |
|||
}); |
|||
} |
|||
} else { |
|||
setFormData({ ...formData, end_time: dateString }); |
|||
} |
|||
}} |
|||
disabledDate={(current) => |
|||
current < moment(formData.start_time) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<QuickMenu |
|||
dropdownData={[ |
|||
{ text: '昨日', value: 1 }, |
|||
{ text: '近一周', value: 6 }, |
|||
{ text: '近30天', value: 29 }, |
|||
{ text: '近90天', value: 89 }, |
|||
]} |
|||
onChange={(v) => toDeftime(v)} /> |
|||
</div> |
|||
<div className="form-btn"> |
|||
<Button |
|||
className="reset" |
|||
onClick={handleReset} |
|||
> |
|||
重置 |
|||
</Button> |
|||
<Button |
|||
className="add-btn" |
|||
type="primary" |
|||
onClick={() => { setDetailVisible(true) }} |
|||
style={{ width: '100px' }} |
|||
onClick={handleAdd} |
|||
> |
|||
配置消息 |
|||
消息配置 |
|||
</Button> |
|||
} |
|||
isExport={false} //是否显示导出按钮 |
|||
//initFormData={initFormData} |
|||
//pageName={'geomagneticSignalMgm'} |
|||
//exportUrl="" |
|||
/> |
|||
<Modal |
|||
open={detailVisible} |
|||
width={1500} |
|||
title={'配置消息'} |
|||
onCancel={() => { |
|||
setDetailVisible(false); |
|||
}} |
|||
footer={[ |
|||
<Button key="back" onClick={() => { |
|||
setDetailVisible(false); |
|||
}}> |
|||
关闭窗口 |
|||
</Button>]} |
|||
<Button |
|||
className="submit" |
|||
type="primary" |
|||
onClick={handleSearch} |
|||
> |
|||
<div className="ltc-box"> |
|||
<div className="ltc-content"> |
|||
<div className="ltc-item"> |
|||
<div className="new-item"><span>*</span>消息标题:</div> |
|||
<div className="new-value"> |
|||
<Input placeholder="请输入消息标题" onChange={(e) => { console.log(e.target.value) }} /> |
|||
</div> |
|||
查询 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
<div className="ltc-content"> |
|||
<div className="ltc-item"> |
|||
<div className="new-item"><span>*</span>接收人群:</div> |
|||
<Transfer |
|||
dataSource={[]} |
|||
titles={["未选择", "已选择"]} |
|||
targetKeys={targetKeys} |
|||
selectedKeys={selectedKeys} |
|||
onChange={onTransferChange} |
|||
onSelectChange={onTransferSelectChange} |
|||
render={(item) => item.text} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="ltc-content"> |
|||
<div className="ltc-item"> |
|||
<div className="new-item"><span>*</span>消息内容:</div> |
|||
{/* <ReactQuill |
|||
//ref={(el) => { this.reactQuillRef = el }} |
|||
//defaultValue={postRichText} |
|||
key="1" |
|||
id="textDiv1" theme="snow" |
|||
// modules={textModules} |
|||
/> */} |
|||
<div className="sys-container-right"> |
|||
<div className="sys-table-content"> |
|||
<ResultFlowResult |
|||
ajaxLoad={loading} |
|||
resultData={resultData?.list || []} |
|||
> |
|||
<Table |
|||
className='sys-table' |
|||
dataSource={resultData?.list || []} |
|||
columns={tableColumns} |
|||
pagination={false} |
|||
scroll={{y: 640}} |
|||
loading={loading} |
|||
/> |
|||
<Pagination {...paginationProps} className="pagination-common" /> |
|||
</ResultFlowResult> |
|||
</div> |
|||
</div> |
|||
<ConfInfoModal |
|||
data={activeInfo} |
|||
isDetail={isDetail} |
|||
userListData={userTreeList} |
|||
visible={infoModalVisible} |
|||
isEdit={isEdit} |
|||
onCancel={handleInfoModalCancel} |
|||
onOk={handleInfoUpdate} |
|||
/> |
|||
</div> |
|||
</Modal> |
|||
</> |
|||
); |
|||
) |
|||
} |
|||
|
|||
export default ConfMes; |
|||
@ -0,0 +1,284 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
import { |
|||
message, |
|||
Pagination, |
|||
Table, |
|||
Input, |
|||
Space, |
|||
Modal, |
|||
Button, |
|||
Select, |
|||
Tabs, |
|||
Descriptions, |
|||
Transfer, |
|||
} from "antd"; |
|||
import moment from "moment"; |
|||
import ajax from '@/services' |
|||
import { TableModule } from "@/components"; |
|||
import { dictionary } from "@/config/common.js"; |
|||
import "./index.scss"; |
|||
//import ReactQuill, { Quill } from 'react-quill'; |
|||
//import "react-quill/dist/quill.snow.css"; |
|||
|
|||
function ConfMes() { |
|||
const [resultData, setResultData] = useState([]) |
|||
const [sendData, setSendData] = useState({}) |
|||
const [total, setTotal] = useState(0); |
|||
const [detailVisible, setDetailVisible] = useState(true); |
|||
const [tabKey, setTabKey] = useState("1"); |
|||
// 已选择平台商户 |
|||
const [targetKeys, setTargetKeys] = useState([]); |
|||
// 勾选平台商户 |
|||
const [selectedKeys, setSelectedKeys] = useState([]); |
|||
// 选项在两栏之间转移时的回调 |
|||
const onTransferChange = (nextTargetKeys) => { |
|||
setTargetKeys(nextTargetKeys); |
|||
}; |
|||
|
|||
// 选中项发生改变时的回调 |
|||
const onTransferSelectChange = (sourceSelectedKeys, targetSelectedKeys) => { |
|||
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]); |
|||
}; |
|||
const columns = [ |
|||
{ |
|||
title: "序号", |
|||
dataIndex: "index", |
|||
key: "index", |
|||
align: "center", |
|||
render: (_, record, index) => { |
|||
return index + 1; |
|||
}, |
|||
}, |
|||
{ |
|||
title: "标题", |
|||
dataIndex: "a", |
|||
key: "a", |
|||
align: "center", |
|||
fixed: "right", |
|||
}, |
|||
{ |
|||
title: "操作人", |
|||
dataIndex: "me", |
|||
key: "me", |
|||
align: "center", |
|||
fixed: "right", |
|||
}, |
|||
{ |
|||
title: "所属路段", |
|||
dataIndex: "s", |
|||
key: "s", |
|||
align: "center", |
|||
fixed: "right", |
|||
}, |
|||
{ |
|||
title: "发送时间", |
|||
dataIndex: "d", |
|||
key: "de", |
|||
align: "center", |
|||
fixed: "right", |
|||
}, |
|||
{ |
|||
title: "状态", |
|||
dataIndex: "d", |
|||
key: "r", |
|||
align: "center", |
|||
fixed: "right", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
dataIndex: "operation", |
|||
key: "operation", |
|||
align: "center", |
|||
fixed: "right", |
|||
render: (_, record) => { |
|||
return ( |
|||
<Button |
|||
type="primary" |
|||
onClick={() => { |
|||
|
|||
}} |
|||
> |
|||
操作 |
|||
</Button> |
|||
); |
|||
}, |
|||
}, |
|||
]; |
|||
//检索条件 |
|||
const formSearch = [ |
|||
{ |
|||
name: "status", |
|||
type: "Select", |
|||
label: "状态", |
|||
options: [ |
|||
{ |
|||
label: "全部", |
|||
value: -1, |
|||
}, |
|||
{ |
|||
label: "已发送", |
|||
value: 0, |
|||
}, |
|||
{ |
|||
label: "未发送", |
|||
value: 1, |
|||
}, |
|||
], |
|||
}, |
|||
|
|||
]; |
|||
|
|||
//列表数据 |
|||
function search(e) { |
|||
console.log(e) |
|||
ajax.getConfMesList(e).then((res) => { |
|||
let { status, data, total } = res |
|||
if (status == 20000) { |
|||
if (data.list) { |
|||
setResultData(data.list) |
|||
setTotal(data.total) |
|||
} else { |
|||
setResultData(data) |
|||
setTotal(total) |
|||
} |
|||
} else { |
|||
setResultData([]) |
|||
message.error(res.message) |
|||
} |
|||
}) |
|||
} |
|||
const textModules = { |
|||
toolbar: { |
|||
container: [ |
|||
[{ 'size': ['small', false, 'large', 'huge'] }], //字体设置 |
|||
// [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //标题字号，不能设置单个字大小 |
|||
['bold', 'italic', 'underline', 'strike'], |
|||
[{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }], |
|||
['link', 'image'], // a链接和图片的显示 |
|||
[{ 'align': [] }], |
|||
[{ |
|||
'background': ['rgb( 0, 0, 0)', 'rgb(230, 0, 0)', 'rgb(255, 153, 0)', |
|||
'rgb(255, 255, 0)', 'rgb( 0, 138, 0)', 'rgb( 0, 102, 204)', |
|||
'rgb(153, 51, 255)', 'rgb(255, 255, 255)', 'rgb(250, 204, 204)', |
|||
'rgb(255, 235, 204)', 'rgb(255, 255, 204)', 'rgb(204, 232, 204)', |
|||
'rgb(204, 224, 245)', 'rgb(235, 214, 255)', 'rgb(187, 187, 187)', |
|||
'rgb(240, 102, 102)', 'rgb(255, 194, 102)', 'rgb(255, 255, 102)', |
|||
'rgb(102, 185, 102)', 'rgb(102, 163, 224)', 'rgb(194, 133, 255)', |
|||
'rgb(136, 136, 136)', 'rgb(161, 0, 0)', 'rgb(178, 107, 0)', |
|||
'rgb(178, 178, 0)', 'rgb( 0, 97, 0)', 'rgb( 0, 71, 178)', |
|||
'rgb(107, 36, 178)', 'rgb( 68, 68, 68)', 'rgb( 92, 0, 0)', |
|||
'rgb(102, 61, 0)', 'rgb(102, 102, 0)', 'rgb( 0, 55, 0)', |
|||
'rgb( 0, 41, 102)', 'rgb( 61, 20, 10)'] |
|||
}], |
|||
[{ |
|||
'color': ['rgb( 0, 0, 0)', 'rgb(230, 0, 0)', 'rgb(255, 153, 0)', |
|||
'rgb(255, 255, 0)', 'rgb( 0, 138, 0)', 'rgb( 0, 102, 204)', |
|||
'rgb(153, 51, 255)', 'rgb(255, 255, 255)', 'rgb(250, 204, 204)', |
|||
'rgb(255, 235, 204)', 'rgb(255, 255, 204)', 'rgb(204, 232, 204)', |
|||
'rgb(204, 224, 245)', 'rgb(235, 214, 255)', 'rgb(187, 187, 187)', |
|||
'rgb(240, 102, 102)', 'rgb(255, 194, 102)', 'rgb(255, 255, 102)', |
|||
'rgb(102, 185, 102)', 'rgb(102, 163, 224)', 'rgb(194, 133, 255)', |
|||
'rgb(136, 136, 136)', 'rgb(161, 0, 0)', 'rgb(178, 107, 0)', |
|||
'rgb(178, 178, 0)', 'rgb( 0, 97, 0)', 'rgb( 0, 71, 178)', |
|||
'rgb(107, 36, 178)', 'rgb( 68, 68, 68)', 'rgb( 92, 0, 0)', |
|||
'rgb(102, 61, 0)', 'rgb(102, 102, 0)', 'rgb( 0, 55, 0)', |
|||
'rgb( 0, 41, 102)', 'rgb( 61, 20, 10)'] |
|||
}], |
|||
['clean'], //清空 |
|||
['emoji'], //emoji表情，设置了才能显示 |
|||
['video2'], //我自定义的视频图标，和插件提供的不一样，所以设置为video2 |
|||
], |
|||
// handlers: { |
|||
// 'image': this.imageHandler.bind(this), //点击图片标志会调用的方法 |
|||
// 'video2': this.showVideoModal.bind(this), |
|||
// }, |
|||
}, |
|||
// ImageExtend: { |
|||
// loading: true, |
|||
// name: 'img', |
|||
// action: RES_URL + "connector?isRelativePath=true", |
|||
// response: res => FILE_URL + res.info.url |
|||
// }, |
|||
ImageDrop: true, |
|||
'emoji-toolbar': true, //是否展示出来 |
|||
"emoji-textarea": false, //我不需要emoji展示在文本框所以设置为false |
|||
"emoji-shortname": true, |
|||
} |
|||
return ( |
|||
<> |
|||
<TableModule |
|||
columns={columns} |
|||
tableData={resultData} |
|||
formSearch={formSearch} |
|||
search={search} |
|||
total={total} |
|||
diyButton={ |
|||
<Button |
|||
type="primary" |
|||
onClick={() => { setDetailVisible(true) }} |
|||
style={{ width: '100px' }} |
|||
> |
|||
配置消息 |
|||
</Button> |
|||
} |
|||
isExport={false} //是否显示导出按钮 |
|||
//initFormData={initFormData} |
|||
//pageName={'geomagneticSignalMgm'} |
|||
//exportUrl="" |
|||
/> |
|||
<Modal |
|||
open={detailVisible} |
|||
width={1500} |
|||
title={'配置消息'} |
|||
onCancel={() => { |
|||
setDetailVisible(false); |
|||
}} |
|||
footer={[ |
|||
<Button key="back" onClick={() => { |
|||
setDetailVisible(false); |
|||
}}> |
|||
关闭窗口 |
|||
</Button>]} |
|||
> |
|||
<div className="ltc-box"> |
|||
<div className="ltc-content"> |
|||
<div className="ltc-item"> |
|||
<div className="new-item"><span>*</span>消息标题:</div> |
|||
<div className="new-value"> |
|||
<Input placeholder="请输入消息标题" onChange={(e) => { console.log(e.target.value) }} /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="ltc-content"> |
|||
<div className="ltc-item"> |
|||
<div className="new-item"><span>*</span>接收人群:</div> |
|||
<Transfer |
|||
dataSource={[]} |
|||
titles={["未选择", "已选择"]} |
|||
targetKeys={targetKeys} |
|||
selectedKeys={selectedKeys} |
|||
onChange={onTransferChange} |
|||
onSelectChange={onTransferSelectChange} |
|||
render={(item) => item.text} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="ltc-content"> |
|||
<div className="ltc-item"> |
|||
<div className="new-item"><span>*</span>消息内容:</div> |
|||
{/* <ReactQuill |
|||
//ref={(el) => { this.reactQuillRef = el }} |
|||
//defaultValue={postRichText} |
|||
key="1" |
|||
id="textDiv1" theme="snow" |
|||
// modules={textModules} |
|||
/> */} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Modal> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default ConfMes; |
|||
@ -0,0 +1,40 @@ |
|||
import ajax from "@/config/ajax" |
|||
|
|||
const getMsgConfList = (params) => { |
|||
return ajax({ |
|||
url: "/api/msg/conf/list", |
|||
type: "get", |
|||
data: params, |
|||
}) |
|||
}; |
|||
|
|||
const getUserTreeData = (data) => { |
|||
return ajax({ |
|||
url: '/api/v1/admin/user/get_user_tree_list', |
|||
type: 'get' |
|||
}) |
|||
} |
|||
|
|||
const msgConfUpdate = (data) => { |
|||
return ajax({ |
|||
url: "/api/msg/conf/update", |
|||
type: "post", |
|||
data: data, |
|||
}) |
|||
} |
|||
|
|||
const msgConfDel = (data) => { |
|||
return ajax({ |
|||
url: "/api/msg/conf/del", |
|||
type: "post", |
|||
data: data, |
|||
}) |
|||
} |
|||
|
|||
|
|||
export default { |
|||
getMsgConfList, |
|||
getUserTreeData, |
|||
msgConfUpdate, |
|||
msgConfDel |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue