<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-model ref="form" :model="model" :rules="validatorRules">
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="msgCategory" label="消息类型">
<a-radio-group v-model="model.msgCategory" :disabled="disableSubmit">
<a-radio value="1">通知公告</a-radio>
<a-radio value="2">系统消息</a-radio>
</a-radio-group>
</a-form-model-item>
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="titile" label="标题">
<a-input placeholder="请输入标题" v-model="model.titile" :readOnly="disableSubmit"/>
</a-form-model-item>
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="msgAbstract" label="摘要">
<a-textarea placeholder="请输入摘要" v-model="model.msgAbstract" />
</a-form-model-item>
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endTime" label="截至日期" class="endTime">
<j-date style="width: 100%" :getCalendarContainer="node => node.parentNode" v-model="model.endTime" placeholder="请选择结束时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss" />
</a-form-model-item>
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="msgType" label="接收用户">
<a-radio-group v-model="model.msgType" :disabled="disableSubmit" @change="chooseMsgType">
<a-radio value="USER">指定用户</a-radio>
<a-radio value="ALL">全体用户</a-radio>
</a-radio-group>
</a-form-model-item>
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="指定用户" v-if="userType">
<j-select-multi-user :returnKeys="returnKeys" placeholder="请选择指定用户" v-model="userIds" :trigger-change="true"></j-select-multi-user>
</a-form-model-item>
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优先级" >
<a-radio-group v-model="model.priority" placeholder="请选择优先级" :disabled="disableSubmit">
<a-radio value="L">低</a-radio>
<a-radio value="M">中</a-radio>
<a-radio value="H">高</a-radio>
</a-radio-group>
</a-form-model-item>
<a-form-model-item :labelCol="labelColX1" :wrapperCol="wrapperColX1" label="内容" class="j-field-content">
<j-editor v-model="model.msgContent" />
</a-form-model-item>
</a-form-model>
</a-spin>
</a-modal>
</template>
<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import JDate from '@/components/jeecg/JDate'
import JEditor from '@/components/jeecg/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: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 },
},
labelColX1: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperColX1: {
xs: { span: 24 },
sm: { span: 18 },
},
confirmLoading: false,
validatorRules:{
titile: [{ required: true, message: '请输入标题!' }],
msgCategory: [{ required: true, message: '请选择消息类型!' }],
msgType:[{ required: true, message: '请选择通告对象类型!' }],
endTime:[{ required: true, message: '请选择结束时间!'} ,{validator: this.endTimeValidate}],
startTime:[{required: true, message: '请选择开始时间!'},{validator: this.startTimeValidate}],
msgAbstract: [{ required: true, message: '请输入摘要!' }],
},
url: {
queryByIds: "/sys/user/queryByIds",
add: "/sys/annountCement/add",
edit: "/sys/annountCement/edit",
},
userType:false,
userIds:"",
selectedUser:[],
disabled:false,
msgContent:"",
userList:[],
returnKeys:['id', 'id'] //用户选择返回字段
}
},
created () {
},
methods: {
add () {
this.edit({});
},
edit (record) {
this.model = {}
this.disable = false;
this.visible = true;
this.getUser(record);
},
getUser(record){
//update-begin---author:wangshuai ---date:20211227 for：[JTC-191]系统通告参考vue3的来改，为单选按钮附默认值------------
record.msgCategory = record.msgCategory?record.msgCategory:"1"
record.msgType = record.msgType?record.msgType:"ALL"
record.priority = record.priority?record.priority:"H"
//update-begin---author:wangshuai ---date:20211227 for：[JTC-191]系统通告参考vue3的来改，为单选按钮附默认值------------
this.model = Object.assign({}, record);
// 指定用户
if(record&&record.msgType === "USER"){
this.userType = true;
//update-begin---author:wangshuai ---date:20220104 for：[JTC-304]指定人员不支持分页勾选,换通用的用户组件------------
this.userIds = record.userIds.substr(0,record.userIds.length-1);
//update-end---author:wangshuai ---date:20220104 for：[JTC-304]指定人员不支持分页勾选,换通用的用户组件------------
}
},
close () {
this.$emit('close');
this.selectedUser = [];
this.visible = false;
this.$refs.form.resetFields();
},
handleOk () {
const that = this;
//当设置指定用户类型，但用户为空时，后台报错
if(this.userType &&!(this.userIds!=null && this.userIds.length >0)){
this.$message.warning('指定用户不能为空！')
return;
}
// 触发表单验证
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
if(!this.model.id){
httpurl+=this.url.add;
method = 'post';
}else{
httpurl+=this.url.edit;
method = 'put';
}
if(this.userType){
//update-begin---author:wangshuai ---date:20220104 for：[JTC-304]指定人员不支持分页勾选,换通用的用户组件------------
this.model.userIds = this.userIds+",";
//update-end---author:wangshuai ---date:20220104 for：[JTC-304]指定人员不支持分页勾选,换通用的用户组件------------
}
httpAction(httpurl,this.model,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();
})
}else{
return false;
}
})
},
handleCancel () {
this.visible = false;
this.$emit('close');
this.$refs.form.resetFields();
this.resetUser();
},
resetUser (){
this.userType = false;
//update-begin---author:wangshuai ---date:20220318 for：[issues/I4X63V]vue有些页面报错，但是在线演示的却没有-----
this.userIds ="";
//update-end---author:wangshuai ---date:20220318 for：[issues/I4X63V]vue有些页面报错，但是在线演示的却没有-----
this.disabled = false;
},
chooseMsgType(e) {
if("USER" == e.target.value) {
this.userType = true;
} else {
this.userType = false;
//update-begin---author:wangshuai ---date:20220318 for：[issues/I4X63V]vue有些页面报错，但是在线演示的却没有-----
this.userIds = "";
//update-end---author:wangshuai ---date:20220318 for：[issues/I4X63V]vue有些页面报错，但是在线演示的却没有-----
}
},
startTimeValidate(rule,value,callback){
let endTime = this.model.endTime
if(!value || !endTime){
callback()
}else if(moment(value).isBefore(endTime)){
callback()
}else{
callback("开始时间需小于结束时间")
}
},
endTimeValidate(rule,value,callback){
let startTime = this.model.startTime;
if(!value || !startTime){
callback()
}else if(moment(startTime).isBefore(value)){
callback()
}else{
callback("结束时间需大于开始时间")
}
},
}
}
</script>
<style scoped>
</style>