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
-
314src/pages/SystemMgm/MessageMgm/ConfMes/index.scss
-
105src/pages/SystemMgm/MessageMgm/ConfMes/index2.scss
-
630src/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"; |
@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; |
|
||||
|
$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%; |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.form-con { |
||||
|
flex: 1; |
||||
|
width: 220px; |
||||
|
} |
||||
|
} |
||||
|
.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; |
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; |
|
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.reset { |
||||
|
width: 90px; |
||||
|
height: 36px; |
||||
|
background: var(--button-default-bg); |
||||
|
} |
||||
|
|
||||
|
.btn-export { |
||||
|
width: 90px; |
||||
|
height: 36px; |
||||
|
} |
||||
|
|
||||
|
.add-btn { |
||||
|
width: 90px; |
||||
|
height: 36px; |
||||
|
} |
||||
|
|
||||
|
.submit { |
||||
|
width: 90px; |
||||
|
height: 36px; |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
.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; |
|
||||
|
.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%; |
||||
|
} |
||||
|
.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: 700; |
||||
|
} |
||||
|
.msg-content { |
||||
|
display: inline-block; |
||||
|
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: "序号", |
title: "序号", |
||||
dataIndex: "index", |
|
||||
key: "index", |
|
||||
align: "center", |
|
||||
render: (_, record, index) => { |
|
||||
return index + 1; |
|
||||
}, |
|
||||
|
width: 60, |
||||
|
align: 'center', |
||||
|
render: (text, record, index) => (pageInfo.pn - 1) * pageInfo.length + 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: "消息详情", |
||||
|
align: 'center', |
||||
|
render: (text, record) => { |
||||
|
return ( |
||||
|
<div className="msg-item"> |
||||
|
<div className="msg-title">{record.title}</div> |
||||
|
<Tooltip title={record.content}> |
||||
|
<div className="msg-content">{record.content}</div> |
||||
|
</Tooltip> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
}, |
}, |
||||
{ |
{ |
||||
title: "发送时间", |
|
||||
dataIndex: "d", |
|
||||
key: "de", |
|
||||
align: "center", |
|
||||
fixed: "right", |
|
||||
|
title: "接收人", |
||||
|
width: 200, |
||||
|
align: 'center', |
||||
|
dataIndex: "reciver", |
||||
}, |
}, |
||||
{ |
{ |
||||
title: "状态", |
|
||||
dataIndex: "d", |
|
||||
key: "r", |
|
||||
align: "center", |
|
||||
fixed: "right", |
|
||||
|
title: "推送时间", |
||||
|
width: 200, |
||||
|
align: 'center', |
||||
|
dataIndex: "push_time", |
||||
}, |
}, |
||||
{ |
{ |
||||
title: "操作", |
|
||||
dataIndex: "operation", |
|
||||
key: "operation", |
|
||||
align: "center", |
|
||||
fixed: "right", |
|
||||
render: (_, record) => { |
|
||||
return ( |
|
||||
<Button |
|
||||
type="primary" |
|
||||
onClick={() => { |
|
||||
|
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) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
}} |
|
||||
> |
|
||||
操作 |
|
||||
</Button> |
|
||||
); |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
//检索条件 |
|
||||
const formSearch = [ |
|
||||
{ |
|
||||
name: "status", |
|
||||
type: "Select", |
|
||||
label: "状态", |
|
||||
options: [ |
|
||||
{ |
|
||||
label: "全部", |
|
||||
value: -1, |
|
||||
}, |
|
||||
{ |
|
||||
label: "已发送", |
|
||||
value: 0, |
|
||||
}, |
|
||||
{ |
|
||||
label: "未发送", |
|
||||
value: 1, |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
|
const ajaxGetUserListData = () => { |
||||
|
ajax.getUserTreeData().then(res => { |
||||
|
if (res.status == 20000) { |
||||
|
setUserTreeList(res.data) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
]; |
|
||||
|
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 }; |
||||
|
} |
||||
|
|
||||
//列表数据 |
|
||||
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) |
|
||||
|
const ajaxMsgInfoUpdate = (data) => { |
||||
|
return new Promise((resolve, rejected) => { |
||||
|
ajax.msgConfUpdate(data).then((res) => { |
||||
|
if (res.status == 20000) { |
||||
|
resolve(res.messgae) |
||||
} else { |
} else { |
||||
setResultData(data) |
|
||||
setTotal(total) |
|
||||
|
rejected(res.message) |
||||
} |
} |
||||
} else { |
|
||||
setResultData([]) |
|
||||
message.error(res.message) |
|
||||
|
}).catch((err) => { |
||||
|
rejected(err) |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
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 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> |
|
||||
|
|
||||
|
const ajaxMsgDel = (data) => { |
||||
|
return new Promise((resolved, rejected) => { |
||||
|
ajax.msgConfDel({infoId: data.infoId}).then(res => { |
||||
|
if (res.status == 20000) { |
||||
|
resolved(res.message) |
||||
} |
} |
||||
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> |
|
||||
|
}).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 ( |
||||
|
<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> |
||||
</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 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> |
||||
</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="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={handleAdd} |
||||
|
> |
||||
|
消息配置 |
||||
|
</Button> |
||||
|
<Button |
||||
|
className="submit" |
||||
|
type="primary" |
||||
|
onClick={handleSearch} |
||||
|
> |
||||
|
查询 |
||||
|
</Button> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</Modal> |
|
||||
</> |
|
||||
); |
|
||||
|
</div> |
||||
|
<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> |
||||
|
) |
||||
} |
} |
||||
|
|
||||
export default ConfMes; |
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