<template>
|
<a-modal
|
:title="title"
|
:width="900"
|
:visible="visible"
|
:confirmLoading="confirmLoading"
|
@ok="handleOk"
|
@cancel="handleCancel"
|
:okButtonProps="{ props: { disabled: disableSubmit } }"
|
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="['title', validatorRules.title]"
|
:readOnly="disableSubmit"
|
:disabled="disableSubmit"
|
/>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24 / 2">
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="消息类型">
|
<j-dict-select-tag v-model="msgCategory" placeholder="请选择消息类型" dictCode="msg_category"/>
|
</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
|
:disabled="disableSubmit"
|
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
|
:disabled="disableSubmit"
|
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
|
:disabled="disableSubmit"
|
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
|
:disabled="disableSubmit"
|
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 :disabled="disableSubmit" 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 '@tievd/cube-block/lib/api/manage'
|
import pick from 'lodash.pick'
|
import { getAction } from '@tievd/cube-block/lib/api/manage'
|
import SelectUserListModal from './SelectUserListModal'
|
import moment from 'moment'
|
|
export default {
|
components: { 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/announcement/add',
|
edit: '/sys/announcement/edit',
|
},
|
userType: false,
|
userIds: [],
|
selectedUser: [],
|
disabled: false,
|
msgContent: '',
|
msgCategory: 2,
|
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',
|
'title',
|
'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)
|
formData.msgCategory = this.msgCategory
|
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>
|
