消息管理

This commit is contained in:
fengachen
2021-09-23 09:59:11 +08:00
parent c764529621
commit eb92919ddc
9 changed files with 2126 additions and 0 deletions
+159
View File
@@ -0,0 +1,159 @@
<template>
<div class="tinymce-editor">
<editor
v-if="!reloading"
v-model="myValue"
:init="init"
:disabled="disabled"
@onClick="onClick">
</editor>
</div>
</template>
<script>
// import tinymce from 'tinymce/tinymce'
// import Editor from '@tinymce/tinymce-vue'
// import 'tinymce/themes/silver/theme'
// import 'tinymce/plugins/image'
// import 'tinymce/plugins/link'
// import 'tinymce/plugins/media'
// import 'tinymce/plugins/table'
// import 'tinymce/plugins/lists'
// import 'tinymce/plugins/contextmenu'
// import 'tinymce/plugins/wordcount'
// import 'tinymce/plugins/colorpicker'
// import 'tinymce/plugins/textcolor'
// import 'tinymce/plugins/fullscreen'
// import 'tinymce/icons/default'
import { uploadAction,getFileAccessHttpUrl } from '@/api/manage'
import { getVmParentByName } from '@/utils/util'
export default {
components: {
// Editor
},
props: {
value: {
type: String,
required:false
},
triggerChange:{
type: Boolean,
default: false,
required:false
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: 'lists image link media table textcolor wordcount contextmenu fullscreen'
},
toolbar: {
type: [String, Array],
default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | fullscreen',
branding:false
}
},
data() {
return {
//初始化配置
init: {
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: '/tinymce/skins/lightgray',
height: 300,
plugins: this.plugins,
toolbar: this.toolbar,
branding: false,
menubar: false,
toolbar_drawer: false,
images_upload_handler: (blobInfo, success) => {
let formData = new FormData()
formData.append('file', blobInfo.blob(), blobInfo.filename())
formData.append('biz', 'jeditor')
formData.append('jeditor','1')
uploadAction(window._CONFIG['domianURL']+'/sys/common/upload', formData).then((res) => {
if (res.success) {
if(res.message == 'local'){
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
success(img)
}else{
let img = getFileAccessHttpUrl(res.message)
success(img)
}
}
})
}
},
myValue: this.value,
reloading: false,
}
},
mounted() {
this.initATabsChangeAutoReload()
},
methods: {
reload() {
this.reloading = true
this.$nextTick(() => this.reloading = false)
},
onClick(e) {
// this.$emit('onClick', e, tinymce)
this.$emit('onClick', e)
},
//可以添加一些自己的自定义事件,如清空内容
clear() {
this.myValue = ''
},
/**
* 自动判断父级是否是 <a-tabs/> 组件,然后添加事件监听,自动触发reload()
*
* 由于 tabs 组件切换会导致 tinymce 无法输入,
* 只有重新加载才能使用(无论是vue版的还是jQuery版tinymce都有这个通病)
*/
initATabsChangeAutoReload() {
// 获取父级
let tabs = getVmParentByName(this, 'ATabs')
let tabPane = getVmParentByName(this, 'ATabPane')
if (tabs && tabPane) {
// 用户自定义的 key
let currentKey = tabPane.$vnode.key
// 添加事件监听
tabs.$on('change', (key) => {
// 切换到自己时执行reload
if (currentKey === key) {
this.reload()
}
})
}else{
//update--begin--autor:wangshuai-----date:20200724------for:富文本编辑器切换tab无法修改------
let tabLayout = getVmParentByName(this, 'TabLayout')
tabLayout.excuteCallback(()=>{
this.reload()
})
//update--begin--autor:wangshuai-----date:20200724------for:文本编辑器切换tab无法修改------
}
},
},
watch: {
value(newValue) {
this.myValue = (newValue == null ? '' : newValue)
},
myValue(newValue) {
if(this.triggerChange){
this.$emit('change', newValue)
}else{
this.$emit('input', newValue)
}
}
}
}
</script>
<style scoped>
</style>
@@ -0,0 +1,238 @@
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="消息标题">
<a-input placeholder="请输入消息标题" v-model="queryParam.esTitle"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="发送内容">
<a-input placeholder="请输入发送内容" v-model="queryParam.esContent"></a-input>
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<a-col :md="6" :sm="8">
<a-form-item label="接收人">
<a-input placeholder="请输入接收人" v-model="queryParam.esReceiver"></a-input>
</a-form-item>
</a-col>
</template>
<a-col :md="6" :sm="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
<a-button type="primary" v-show="show" icon="download" @click="handleExportXls('消息')">导出</a-button>
<a-upload v-show="show" name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
@change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
selectedRowKeys.length }}</a>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<!-- 字符串超长截取省略号显示-->
<span slot="esContent" slot-scope="text">
<j-ellipsis :value="text" :length="10" />
</span>
<span slot="action" slot-scope="text, record">
<a href="javascript:;" @click="handleDetail(record)">详情</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">更多<a-icon type="down"/></a>
<a-menu slot="overlay">
<a-menu-item v-show="show">
<a @click="handleEdit(record)">编辑</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<sysMessage-modal ref="modalForm" @ok="modalFormOk"></sysMessage-modal>
</a-card>
</template>
<script>
import SysMessageModal from './modules/SysMessageModal'
import {JeroListMixin} from '@/mixins/JeroListMixin'
import JEllipsis from '@/components/jero/JEllipsis'
export default {
name: 'SysMessageList',
mixins: [JeroListMixin],
components: {
JEllipsis,
SysMessageModal
},
data() {
return {
description: '消息管理页面',
// 新增修改按钮是否显示
show: false,
// 表头
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
},
{
title: '消息标题',
align: 'center',
dataIndex: 'esTitle'
},
{
title: '发送内容',
align: 'center',
dataIndex: 'esContent',
scopedSlots: {customRender: 'esContent'},
},
{
title: '接收人',
align: 'center',
dataIndex: 'esReceiver'
},
{
title: '发送次数',
align: 'center',
dataIndex: 'esSendNum'
},
{
title: '发送状态',
align: 'center',
dataIndex: 'esSendStatus_dictText'
},
{
title: '发送时间',
align: 'center',
dataIndex: 'esSendTime'
},
{
title: '发送方式',
align: 'center',
dataIndex: 'esType_dictText'
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
scopedSlots: {customRender: 'action'},
}
],
url: {
list: '/sys/message/sysMessage/page',
delete: '/sys/message/sysMessage/delete',
deleteBatch: '/sys/message/sysMessage/deleteBatch',
exportXlsUrl: 'sys/message/sysMessage/exportXls',
importExcelUrl: 'sys/message/sysMessage/importExcel',
},
}
},
computed: {
importExcelUrl: function () {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
}
},
methods: {}
}
</script>
<style lang="less" scoped>
/** Button按钮间距 */
.ant-btn {
margin-left: 3px
}
.ant-card-body .table-operator {
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td {
padding-top: 15px;
padding-bottom: 15px;
}
.anty-row-operator button {
margin: 0 5px
}
.ant-btn-danger {
background-color: #ffffff
}
.ant-modal-cust-warp {
height: 100%
}
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
</style>
@@ -0,0 +1,253 @@
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="模板CODE">
<a-input placeholder="请输入模板CODE" v-model="queryParam.templateCode"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="模板内容">
<a-input placeholder="请输入模板内容" v-model="queryParam.templateContent"></a-input>
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<a-col :md="6" :sm="8">
<a-form-item label="模板标题">
<a-input placeholder="请输入模板标题" v-model="queryParam.templateName"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="模板类型">
<a-input placeholder="请输入模板类型" v-model="queryParam.templateType"></a-input>
</a-form-item>
</a-col>
</template>
<a-col :md="6" :sm="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('消息模板')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
@change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
selectedRowKeys.length }}</a>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<!-- 字符串超长截取省略号显示-->
<span slot="templateContent" slot-scope="text">
<j-ellipsis :value="text" :length="25" />
</span>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
<a-menu slot="overlay">
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
<a-menu-item>
<a @click="handleTest(record)">发送测试</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<sysMessageTemplate-modal ref="modalForm" @ok="modalFormOk"></sysMessageTemplate-modal>
<sysMessageTest-modal ref="testModal"></sysMessageTest-modal>
</a-card>
</template>
<script>
import SysMessageTemplateModal from './modules/SysMessageTemplateModal'
import SysMessageTestModal from './modules/SysMessageTestModal'
import {JeroListMixin} from '@/mixins/JeroListMixin'
import JEllipsis from '@/components/jero/JEllipsis'
export default {
name: 'SysMessageTemplateList',
mixins: [JeroListMixin],
components: {
JEllipsis,
SysMessageTemplateModal,
SysMessageTestModal
},
data() {
return {
description: '消息模板管理页面',
// 表头
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
},
{
title: '模板CODE',
align: 'center',
dataIndex: 'templateCode'
},
{
title: '模板标题',
align: 'center',
dataIndex: 'templateName'
},
{
title: '模板内容',
align: 'center',
dataIndex: 'templateContent',
scopedSlots: {customRender: 'templateContent'},
},
{
title: '模板类型',
align: 'center',
dataIndex: 'templateType',
customRender: function (text) {
if(text=='1') {
return '短信'
}
if(text=='2') {
return '邮件'
}
if(text=='3') {
return '微信'
}
if(text=='4') {
return '系统'
}
}
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
scopedSlots: {customRender: 'action'},
}
],
url: {
list: '/sys/message/sysMessageTemplate/page',
delete: '/sys/message/sysMessageTemplate/delete',
deleteBatch: '/sys/message/sysMessageTemplate/deleteBatch',
exportXlsUrl: 'sys/message/sysMessageTemplate/exportXls',
importExcelUrl: 'sys/message/sysMessageTemplate/importExcel',
},
}
},
computed: {
importExcelUrl: function () {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
}
},
methods: {
handleTest(record){
this.$refs.testModal.open(record)
this.$refs.testModal.title = '发送测试'
}
}
}
</script>
<style lang="less" scoped>
/** Button按钮间距 */
.ant-btn {
margin-left: 3px
}
.ant-card-body .table-operator {
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td {
padding-top: 15px;
padding-bottom: 15px;
}
.anty-row-operator button {
margin: 0 5px
}
.ant-btn-danger {
background-color: #ffffff
}
.ant-modal-cust-warp {
height: 100%
}
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
</style>
@@ -0,0 +1,185 @@
<template>
<a-drawer
:title="title"
:maskClosable="true"
width=650
placement="right"
:closable="true"
@close="close"
:visible="visible"
style="overflow: auto;padding-bottom: 53px;">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="消息标题">
<a-input placeholder="请输入消息标题" v-decorator="['esTitle', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送内容">
<a-input placeholder="请输入发送内容" v-decorator="['esContent', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送所需参数">
<a-input placeholder="请输入发送所需参数Json格式" v-decorator="['esParam', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="接收人">
<a-input placeholder="请输入接收人" v-decorator="['esReceiver', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送方式">
<j-dict-select-tag :triggerChange="true" dictCode="msgType" v-decorator="[ 'esType', {}]" placeholder="请选择发送方式">
</j-dict-select-tag>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送时间">
<a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'esSendTime', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送状态">
<j-dict-select-tag :triggerChange="true" dictCode="msgSendStatus" v-decorator="[ 'esSendStatus', {}]" placeholder="请选择发送状态">
</j-dict-select-tag>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送次数">
<a-input-number v-decorator="[ 'esSendNum', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送失败原因">
<a-input v-decorator="['esResult', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="备注">
<a-input v-decorator="['remark', {}]"/>
</a-form-item>
</a-form>
</a-spin>
<div v-show="!disableSubmit">
<a-button style="margin-right: .8rem" @confirm="handleCancel">取消</a-button>
<a-button @click="handleOk" type="primary" :loading="confirmLoading">提交</a-button>
</div>
</a-drawer>
</template>
<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
export default {
name: 'SysMessageModal',
data() {
return {
title: '操作',
visible: false,
model: {},
labelCol: {
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules: {},
disableSubmit: true,
url: {
add: '/sys/message/sysMessage/add',
edit: '/sys/message/sysMessage/edit',
},
}
},
created() {
},
methods: {
add() {
this.edit({})
},
edit(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'esContent', 'esParam', 'esReceiver', 'esResult', 'esSendNum', 'esSendStatus', 'esTitle', 'esType', 'remark'))
//时间格式化
this.form.setFieldsValue({esSendTime: this.model.esSendTime ? moment(this.model.esSendTime) : null})
})
},
close() {
this.$emit('close')
this.visible = false
},
handleOk() {
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true
let httpurl = ''
let method = ''
if (!this.model.id) {
httpurl += this.url.add
method = 'post'
} else {
httpurl += this.url.edit
method = 'put'
}
let formData = Object.assign(this.model, values)
//时间格式化
formData.esSendTime = formData.esSendTime ? formData.esSendTime.format('YYYY-MM-DD HH:mm:ss') : null
console.log(formData)
httpAction(httpurl, formData, method).then((res) => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
} else {
that.$message.warning(res.message)
}
}).finally(() => {
that.confirmLoading = false
that.close()
})
}
})
},
handleCancel() {
this.close()
},
}
}
</script>
<style scoped>
</style>
@@ -0,0 +1,223 @@
<template>
<a-modal
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
<a-col :span="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板CODE"
style="margin-right: -35px"
>
<a-input
:disabled="disable"
placeholder="请输入模板编码"
v-decorator="['templateCode', validatorRules.templateCode ]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板类型">
<j-dict-select-tag @change="handleChangeTemplateType" :triggerChange="true" dictCode="msgType" v-decorator="['templateType', validatorRules.templateType ]" placeholder="请选择模板类型">
</j-dict-select-tag>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24" >
<a-col :span="24" pull="2">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板标题"
style="margin-left: -15px">
<a-input
placeholder="请输入模板标题"
v-decorator="['templateName', validatorRules.templateName]"
style="width: 122%"
/>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24">
<a-col :span="24" pull="4">
<a-form-item
v-show="!useEditor"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板内容"
style="margin-left: 4px;width: 126%">
<a-textarea placeholder="请输入模板内容" v-decorator="['templateContent', validatorRules.templateContent ]" :autosize="{ minRows: 8, maxRows: 8 }"/>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24">
<a-col :span="24" pull="4">
<a-form-item
v-show="useEditor"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板内容"
style="margin-left: 4px;width: 126%">
<j-editor v-model="templateEditorContent"></j-editor>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import { duplicateCheck } from '@/api/api'
import JEditor from '@/components/jero/JEditor'
export default {
name: 'SysMessageTemplateModal',
components:{
JEditor
},
data() {
return {
title: '操作',
visible: false,
disable: true,
model: {},
labelCol: {
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules: {
templateCode: {rules: [{required: true, message: '请输入模板CODE!' },{validator: this.validateTemplateCode}]},
templateName: {rules: [{required: true, message: '请输入模板标题!'}]},
templateContent: {rules: []},
templateType: {rules: [{required: true, message: '请输入模板类型!'}]},
},
url: {
add: '/sys/message/sysMessageTemplate/add',
edit: '/sys/message/sysMessageTemplate/edit',
},
useEditor:false,
templateEditorContent:''
}
},
created() {
},
methods: {
add() {
this.disable = false
this.edit({})
},
edit(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
this.useEditor = (record.templateType==2 || record.templateType==4)
if(this.useEditor){
this.templateEditorContent=record.templateContent
}else{
this.templateEditorContent=''
}
this.visible = true
this.$nextTick(() => {
if(this.useEditor){
this.form.setFieldsValue(pick(this.model, 'templateCode', 'templateName', 'templateTestJson', 'templateType'))
}else{
this.form.setFieldsValue(pick(this.model, 'templateCode', 'templateContent', 'templateName', 'templateTestJson', 'templateType'))
}
})
},
close() {
this.$emit('close')
this.visible = false
this.disable = true
},
handleOk() {
this.model.templateType = this.templateType
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true
let httpurl = ''
let method = ''
if (!this.model.id) {
httpurl += this.url.add
method = 'post'
} else {
httpurl += this.url.edit
method = 'put'
}
let formData = Object.assign(this.model, values)
//时间格式化
if(this.useEditor){
formData.templateContent=this.templateEditorContent
}
console.log(formData)
httpAction(httpurl, formData, method).then((res) => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
} else {
that.$message.warning(res.message)
}
}).finally(() => {
that.confirmLoading = false
that.close()
})
}
})
},
validateTemplateCode(rule, value, callback){
var params = {
tableName: 'sys_sms_template',
fieldName: 'template_code',
fieldVal: value,
dataId: this.model.id
}
duplicateCheck(params).then((res)=>{
if(res.success){
callback()
}else{
callback(res.message)
}
})
},
handleCancel() {
this.close()
},
handleChangeTemplateType(value){
//如果是邮件类型那么则改变模板内容是富文本编辑器
this.useEditor = (value==2 || value==4)
}
}
}
</script>
<style scoped>
</style>
@@ -0,0 +1,122 @@
<template>
<a-modal
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板标题">
<a-input disabled v-model="templateName"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板内容">
<a-textarea disabled v-model="templateContent" :autosize="{ minRows: 5, maxRows: 8 }"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="测试数据">
<a-textarea placeholder="请输入json格式测试数据" v-model="testData" :autosize="{ minRows: 5, maxRows: 8 }"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="消息类型">
<j-dict-select-tag
v-model="msgType"
placeholder="请选择消息类型"
dictCode="msgType"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="消息接收方">
<a-input placeholder="请输入消息接收方" v-model="receiver"/>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import {httpAction} from '@/api/manage'
export default {
name: 'SysMessageTestModal',
data() {
return {
title: '操作',
visible: false,
model: {},
labelCol: {
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
confirmLoading: false,
url: {
send: '/sys/message/sysMessageTemplate/sendMsg',
},
templateName: '',
templateContent: '',
receiver: '',
msgType: '',
testData: '',
sendParams: {}
}
},
methods: {
open(record) {
this.sendParams.templateCode = record.templateCode
this.templateName = record.templateName
this.templateContent = record.templateContent
this.testData = record.templateTestJson
this.visible = true
},
close() {
this.receiver = ''
this.msgType = ''
this.sendParams = {}
this.visible = false
},
handleOk() {
let httpurl = this.url.send
let method = 'post'
this.sendParams.testData = this.testData
this.sendParams.receiver = this.receiver
this.sendParams.msgType = this.msgType
httpAction(httpurl, this.sendParams, method).then((res) => {
if (res.success) {
this.$message.success(res.message)
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
this.close()
})
},
handleCancel() {
this.close()
},
}
}
</script>
<style scoped>
</style>
+297
View File
@@ -0,0 +1,297 @@
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :span="6">
<a-form-item label="标题">
<a-input placeholder="请输入标题" v-model="queryParam.titile"></a-input>
</a-form-item>
</a-col>
<!--<a-col :span="6">
<a-form-item label="内容">
<a-input placeholder="请输入内容" v-model="queryParam.msgContent"></a-input>
</a-form-item>
</a-col>-->
<a-col :span="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('系统通告')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a v-if="record.sendStatus == 0" @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" v-if="record.sendStatus == 0"/>
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
<a-menu slot="overlay">
<a-menu-item v-if="record.sendStatus != 1">
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
<a-menu-item v-if="record.sendStatus == 0">
<a-popconfirm title="确定发布吗?" @confirm="() => releaseData(record.id)">
<a>发布</a>
</a-popconfirm>
</a-menu-item>
<a-menu-item v-if="record.sendStatus == 1">
<a-popconfirm title="确定撤销吗?" @confirm="() => reovkeData(record.id)">
<a>撤销</a>
</a-popconfirm>
</a-menu-item>
<a-menu-item>
<a @click="handleDetail(record)">查看</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<sysAnnouncement-modal ref="modalForm" @ok="modalFormOk"></sysAnnouncement-modal>
</a-card>
</template>
<script>
import SysAnnouncementModal from './modules/SysAnnouncementModal'
import {doReleaseData, doReovkeData} from '@/api/api'
import {getAction} from '@/api/manage'
import {JeroListMixin} from '@/mixins/JeroListMixin'
export default {
name: 'SysAnnouncementList',
mixins: [JeroListMixin],
components: {
SysAnnouncementModal
},
data() {
return {
description: '系统通告表管理页面',
// 查询条件
queryParam: {},
// 表头
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
},
{
title: '标题',
align: 'center',
dataIndex: 'titile'
},
{
title: '消息类型',
align: 'center',
dataIndex: 'msgCategory',
customRender: function (text) {
if (text == '1') {
return '通知公告'
} else if (text == '2') {
return '系统消息'
} else {
return text
}
}
},
/*{
title: '开始时间',
align: "center",
dataIndex: 'startTime'
},
{
title: '结束时间',
align: "center",
dataIndex: 'endTime'
},*/
{
title: '发布人',
align: 'center',
dataIndex: 'sender'
},
{
title: '优先级',
align: 'center',
dataIndex: 'priority',
customRender: function (text) {
if (text == 'L') {
return '低'
} else if (text == 'M') {
return '中'
} else if (text == 'H') {
return '高'
} else {
return text
}
}
},
{
title: '通告对象',
align: 'center',
dataIndex: 'msgType',
customRender: function (text) {
if (text == 'USER') {
return '指定用户'
} else if (text == 'ALL') {
return '全体用户'
} else {
return text
}
}
},
{
title: '发布状态',
align: 'center',
dataIndex: 'sendStatus',
customRender: function (text) {
if (text == 0) {
return '未发布'
} else if (text == 1) {
return '已发布'
} else if (text == 2) {
return '已撤销'
} else {
return text
}
}
},
{
title: '发布时间',
align: 'center',
dataIndex: 'sendTime'
},
{
title: '撤销时间',
align: 'center',
dataIndex: 'cancelTime'
},
/*{
title: '删除状态(0,正常,1已删除)',
align:"center",
dataIndex: 'delFlag'
},*/
{
title: '操作',
dataIndex: 'action',
align: 'center',
scopedSlots: {customRender: 'action'},
}
],
url: {
list: '/sys/annountCement/page',
delete: '/sys/annountCement/delete',
deleteBatch: '/sys/annountCement/deleteBatch',
releaseDataUrl: '/sys/annountCement/doReleaseData',
reovkeDataUrl: 'sys/annountCement/doReovkeData',
exportXlsUrl: 'sys/annountCement/exportXls',
importExcelUrl: 'sys/annountCement/importExcel',
},
}
},
computed: {
importExcelUrl: function(){
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
}
},
methods: {
//执行发布操作
releaseData: function (id) {
console.log(id)
var that = this
doReleaseData({id: id}).then((res) => {
if (res.success) {
that.$message.success(res.message)
that.loadData(1)
} else {
that.$message.warning(res.message)
}
})
},
//执行撤销操作
reovkeData: function (id) {
var that = this
doReovkeData({id: id}).then((res) => {
if (res.success) {
that.$message.success(res.message)
that.loadData(1)
this.syncHeadNotic(id)
} else {
that.$message.warning(res.message)
}
})
},
syncHeadNotic(anntId){
getAction('sys/annountCement/syncNotic',{anntId:anntId})
},
handleDetail:function(record){
this.$refs.modalForm.edit(record)
this.$refs.modalForm.title='详情'
this.$refs.modalForm.disableSubmit = true
this.$refs.modalForm.disabled = true
},
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
@@ -0,0 +1,290 @@
<template>
<a-modal
:title="title"
:width="1200"
:visible="visible"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :span="6">
<a-form-item label="账号">
<a-input placeholder="请输入账号" v-model="queryParam.username"></a-input>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="性别">
<a-select v-model="queryParam.sex" placeholder="请选择性别">
<a-select-option value="">请选择性别查询</a-select-option>
<a-select-option value="1">男性</a-select-option>
<a-select-option value="2">女性</a-select-option>
</a-select>
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<a-col :span="6">
<a-form-item label="邮箱">
<a-input placeholder="请输入邮箱" v-model="queryParam.email"></a-input>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="手机号码">
<a-input placeholder="请输入手机号码" v-model="queryParam.phone"></a-input>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="状态">
<a-select v-model="queryParam.status" placeholder="请选择状态">
<a-select-option value="">请选择状态</a-select-option>
<a-select-option value="1">正常</a-select-option>
<a-select-option value="2">解冻</a-select-option>
</a-select>
</a-form-item>
</a-col>
</template>
<a-col :span="6" >
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- update-begin author:kangxiaolin date:20190921 for:系统发送通知 用户多选失败 #513 -->
<a-table
ref="table"
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,onSelect:onSelect}"
@change="handleTableChange"
>
<!-- update-end author:kangxiaolin date:20190921 for:系统发送通知 用户多选失败 #513 -->
</a-table>
</a-modal>
</template>
<script>
import { filterObj } from '@/utils/util'
import { getUserList } from '@/api/api'
export default {
name: 'SelectUserListModal',
components: {
},
data () {
return {
title:'选择用户',
queryParam: {},
columns: [{
title: '用户账号',
align:'center',
dataIndex: 'username',
fixed:'left',
width:200
},{
title: '用户名称',
align:'center',
dataIndex: 'realname',
},{
title: '性别',
align:'center',
dataIndex: 'sex',
customRender:function (text) {
if(text==1){
return '男'
}else if(text==2){
return '女'
}else{
return text
}
}
},{
title: '手机号码',
align:'center',
dataIndex: 'phone'
},{
title: '邮箱',
align:'center',
dataIndex: 'email'
},{
title: '状态',
align:'center',
dataIndex: 'status',
customRender:function (text) {
if(text==1){
return '正常'
}else if(text==2){
return '冻结'
}else{
return text
}
}
}],
dataSource:[],
ipagination:{
current: 1,
pageSize: 5,
pageSizeOptions: ['5', '10', '20'],
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' 共' + total + '条'
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
isorter:{
column: 'createTime',
order: 'desc',
},
selectedRowKeys: [],
selectionRows: [],
visible:false,
toggleSearchStatus:false,
}
},
created() {
this.loadData()
},
methods: {
add (selectUser,userIds) {
this.visible = true
this.edit(selectUser,userIds)
},
edit(selectUser,userIds){
//控制台报错
if(userIds&&userIds.length>0){
this.selectedRowKeys = userIds.split(',')
}else{
this.selectedRowKeys = []
}
if(!selectUser){
this.selectionRows=[]
}else{
var that=this
that.selectionRows=[]
selectUser.forEach(function(record,index){
console.log(record)
that.selectionRows.push({id: that.selectedRowKeys[index],realname:record.label})
})
// this.selectionRows = selectUser;
}
},
loadData (arg){
if(arg===1){
this.ipagination.current = 1
}
let params = this.getQueryParams()//查询条件
getUserList(params).then((res)=>{
if(res.success){
this.dataSource = res.result.records
this.ipagination.total = res.result.total
}
})
},
getQueryParams(){
let param = Object.assign({}, this.queryParam,this.isorter)
param.field = this.getQueryField()
//--update-begin----author:scott---date:20190818------for:新建公告时指定特定用户翻页错误SelectUserListModal #379----
// param.current = this.ipagination.current;
// param.pageSize = this.ipagination.pageSize;
param.pageNo = this.ipagination.current
param.pageSize = this.ipagination.pageSize
//--update-end----author:scott---date:20190818------for:新建公告时指定特定用户翻页错误SelectUserListModal #379---
return filterObj(param)
},
getQueryField(){
let str = 'id,'
for(let a = 0;a<this.columns.length;a++){
str+=','+this.columns[a].dataIndex
}
return str
},
//--update-begin----author:kangxiaolin---date:20190921------for:系统发送通知 用户多选失败 #513----
onSelectChange (selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys
},
onSelect(record, selected){
if(selected == true ){
this.selectionRows.push(record)
}else {
this.selectionRows.forEach(function(item,index,arr){
if(item.id == record.id) {
arr.splice(index, 1)
}
})
}
//--update-end----author:kangxiaolin---date:20190921------for:系统发送通知 用户多选失败 #513----
},
searchReset(){
let that = this
Object.keys(that.queryParam).forEach(function(key){
that.queryParam[key] = ''
})
that.loadData(1)
},
handleTableChange(pagination, filters, sorter){
//TODO 筛选
if (Object.keys(sorter).length>0){
this.isorter.column = sorter.field
this.isorter.order = 'ascend'==sorter.order?'asc':'desc'
}
this.ipagination = pagination
this.loadData()
},
handleCancel () {
this.selectionRows = []
this.selectedRowKeys = []
this.visible = false
},
handleOk () {
this.$emit('choseUser',this.selectionRows)
this.handleCancel()
},
searchByquery(){
this.loadData(1)
},
handleToggleSearch(){
this.toggleSearchStatus = !this.toggleSearchStatus
},
}
}
</script>
<style scoped>
.ant-card-body .table-operator{
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td{
padding-top:15px;
padding-bottom:15px;
}
.anty-row-operator button{margin: 0 5px}
.ant-btn-danger{background-color: #ffffff}
.ant-modal-cust-warp{height: 100%}
.ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
.ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
.anty-img-wrap{height:25px;position: relative;}
.anty-img-wrap > img{max-height:100%;}
</style>
@@ -0,0 +1,359 @@
<template>
<a-modal
:title="title"
:width="900"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
:okButtonProps="{ props: {disabled: disabled} }"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row style="width: 100%;">
<a-col :span="24/2">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="标题">
<a-input placeholder="请输入标题" v-decorator="['titile', validatorRules.title]" :readOnly="disableSubmit"/>
</a-form-item>
</a-col>
<a-col :span="24/2">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="消息类型">
<a-select
v-decorator="[ 'msgCategory', validatorRules.msgCategory]"
placeholder="请选择消息类型"
:disabled="disableSubmit"
:getPopupContainer = "(target) => target.parentNode">
<a-select-option value="1">通知公告</a-select-option>
<a-select-option value="2">系统消息</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row style="width: 100%;">
<a-col :span="24/2">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="开始时间:">
<j-date style="width: 100%" :getCalendarContainer="node => node.parentNode" v-decorator="[ 'startTime', validatorRules.startTime]" placeholder="请选择开始时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss" ></j-date>
</a-form-item>
</a-col>
<a-col :span="24/2">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="结束时间"
class="endTime">
<j-date style="width: 100%" :getCalendarContainer="node => node.parentNode" v-decorator="[ 'endTime', validatorRules.endTime]" placeholder="请选择结束时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss"></j-date>
</a-form-item>
</a-col>
</a-row>
<a-row style="width: 100%;">
<a-col :span="24/2">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="优先级">
<a-select
v-decorator="[ 'priority', {}]"
placeholder="请选择优先级"
:disabled="disableSubmit"
:getPopupContainer = "(target) => target.parentNode">
<a-select-option value="L"></a-select-option>
<a-select-option value="M"></a-select-option>
<a-select-option value="H"></a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="24/2">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="通告类型">
<a-select
v-decorator="[ 'msgType', validatorRules.msgType]"
placeholder="请选择通告类型"
:disabled="disableSubmit"
@change="chooseMsgType"
:getPopupContainer = "(target) => target.parentNode">
<a-select-option value="USER">指定用户</a-select-option>
<a-select-option value="ALL">全体用户</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row style="width: 100%;">
<a-col :span="24/2">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="摘要">
<a-textarea placeholder="请输入摘要" v-decorator="['msgAbstract',validatorRules.msgAbstract]" />
</a-form-item>
</a-col>
<a-col :span="24/2">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="指定用户"
v-if="userType">
<a-select
mode="multiple"
placeholder="请选择用户"
:labelInValue=true
v-model="selectedUser"
@dropdownVisibleChange="selectUserIds"
@change="handleChange"
>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row style="width: 100%;">
<a-col :span="24">
<a-form-item
:labelCol="labelColX1"
:wrapperCol="wrapperColX1"
label="内容"
class="j-field-content">
<j-editor v-decorator="[ 'msgContent', {} ]" triggerChange></j-editor>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
<select-user-list-modal ref="UserListModal" @choseUser="choseUser"></select-user-list-modal>
</a-modal>
</template>
<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import JDate from '@/components/jero/JDate'
import JEditor from '@/components/jero/JEditor'
import SelectUserListModal from './SelectUserListModal'
import moment from 'moment'
export default {
components: { JEditor, JDate, SelectUserListModal},
name: 'SysAnnouncementModal',
data () {
return {
title:'操作',
visible: false,
disableSubmit:false,
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 },
},
labelColX1: {
xs: { span: 24 },
sm: { span: 3 },
},
wrapperColX1: {
xs: { span: 24 },
sm: { span: 21 },
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules:{
title:{rules: [{ required: true, message: '请输入标题!' }]},
msgCategory:{rules: [{ required: true, message: '请选择消息类型!' }]},
msgType:{rules: [{ required: true, message: '请选择通告对象类型!' }]},
endTime:{rules:[{ required: true, message: '请选择结束时间!'} ,{validator: this.endTimeValidate}]},
startTime:{rules:[{required: true, message: '请选择开始时间!'},{validator: this.startTimeValidate}]},
msgAbstract:{rules: [{ required: true, message: '请输入摘要!' }]},
},
url: {
queryByIds: '/sys/user/queryByIds',
add: '/sys/annountCement/add',
edit: '/sys/annountCement/edit',
},
userType:false,
userIds:[],
selectedUser:[],
disabled:false,
msgContent:'',
userList:[]
}
},
created () {
},
methods: {
add () {
this.edit({})
},
edit (record) {
this.form.resetFields()
this.model = {}
this.disable = false
this.visible = true
this.getUser(record)
},
getUser(record){
this.model = Object.assign({}, record)
// 指定用户
if(record&&record.msgType === 'USER'){
this.userType = true
this.userIds = record.userIds
getAction(this.url.queryByIds,{userIds:this.userIds}).then((res)=>{
if(res.success){
//update--begin--autor:wangshuai-----date:20200601------for:系统公告选人后,不能删除------
var userList=[]
for(var i=0;i<res.result.length;i++){
var user={}
user.label =res.result[i].realname
user.key=res.result[i].id
userList.push(user)
}
this.selectedUser=userList
//update--begin--autor:wangshuai-----date:20200601------for系统公告选人后不能删除------
this.$refs.UserListModal.edit(res.result,this.userIds)
}
})
}
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model,'endTime','startTime','titile','msgContent','priority','msgCategory','msgType','sendStatus','msgAbstract'))
})
},
close () {
this.$emit('close')
this.selectedUser = []
this.visible = false
},
handleOk () {
const that = this
//当设置指定用户类型,但用户为空时,后台报错
if(this.userType &&!(this.userIds!=null && this.userIds.length >0)){
this.$message.warning('指定用户不能为空!')
return
}
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true
let httpurl = ''
let method = ''
if(!this.model.id){
httpurl+=this.url.add
method = 'post'
}else{
httpurl+=this.url.edit
method = 'put'
}
let formData = Object.assign(this.model, values)
if(this.userType){
formData.userIds = this.userIds
}
console.log(formData)
httpAction(httpurl,formData,method).then((res)=>{
if(res.success){
that.$message.success(res.message)
that.$emit('ok')
that.resetUser()
}else{
that.$message.warning(res.message)
}
}).finally(() => {
that.confirmLoading = false
that.close()
})
}
})
},
handleCancel () {
this.visible = false
this.$emit('close')
this.resetUser()
},
resetUser (){
this.userType = false
this.userIds = []
this.selectedUser = []
this.disabled = false
this.$refs.UserListModal.edit(null,null)
},
selectUserIds() {
this.$refs.UserListModal.add(this.selectedUser,this.userIds)
},
chooseMsgType(value) {
if('USER' == value) {
this.userType = true
} else {
this.userType = false
this.selectedUser = []
this.userIds = []
}
},
// 子modal回调
choseUser:function(userList){
this.selectedUser = []
this.userIds = []
for(var i=0;i<userList.length;i++){
//update--begin--autor:wangshuai-----date:20200601------for系统公告选人后不能删除------
var user={}
user.label =userList[i].realname
user.key=userList[i].id
this.selectedUser.push(user)
//update--end--autor:wangshuai-----date:20200601------for系统公告选人后不能删除------
this.userIds += userList[i].id+','
}
},
startTimeValidate(rule,value,callback){
let endTime = this.form.getFieldValue('endTime')
if(!value || !endTime){
callback()
}else if(moment(value).isBefore(endTime)){
callback()
}else{
callback('开始时间需小于结束时间')
}
},
endTimeValidate(rule,value,callback){
let startTime = this.form.getFieldValue('startTime')
if(!value || !startTime){
callback()
}else if(moment(startTime).isBefore(value)){
callback()
}else{
callback('结束时间需大于开始时间')
}
},
handleChange(userList) {
if (userList) {
this.userIds = []
var users=[]
for (var i = 0; i < userList.length; i++) {
var user={}
user.id=userList[i].key
user.realname=userList[i].label
this.userIds += userList[i].key + ','
users.push(user)
}
}
this.$refs.UserListModal.edit(users,this.userIds)
}
}
}
</script>
<style scoped>
</style>