You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
8.6 KiB
280 lines
8.6 KiB
<template>
|
|
<a-modal
|
|
:title="title"
|
|
:width="800"
|
|
:visible="visible"
|
|
:confirmLoading="confirmLoading"
|
|
@ok="handleOk"
|
|
@cancel="handleCancel"
|
|
:okButtonProps="{ props: {disabled: disabled} }"
|
|
cancelText="关闭">
|
|
|
|
<a-spin :spinning="confirmLoading">
|
|
<a-form :form="form">
|
|
|
|
<a-form-item
|
|
:labelCol="labelCol"
|
|
:wrapperCol="wrapperCol"
|
|
label="标题">
|
|
<a-input placeholder="请输入标题" v-decorator="['titile', validatorRules.title]" :readOnly="disableSubmit" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
:labelCol="labelCol"
|
|
:wrapperCol="wrapperCol"
|
|
label="消息类型">
|
|
<a-select
|
|
v-decorator="[ 'msgCategory', validatorRules.msgCategory]"
|
|
placeholder="请选择消息类型"
|
|
:disabled="disableSubmit">
|
|
<a-select-option value="1">通知公告</a-select-option>
|
|
<a-select-option value="2">系统消息</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item
|
|
:labelCol="labelCol"
|
|
:wrapperCol="wrapperCol"
|
|
label="内容">
|
|
<j-editor v-decorator="[ 'msgContent', {} ]" triggerChange></j-editor>
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
:labelCol="labelCol"
|
|
:wrapperCol="wrapperCol"
|
|
label="开始时间">
|
|
<j-date v-decorator="[ 'startTime', validatorRules.startTime]" placeholder="请选择开始时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss"></j-date>
|
|
</a-form-item>
|
|
<a-form-item
|
|
:labelCol="labelCol"
|
|
:wrapperCol="wrapperCol"
|
|
label="结束时间">
|
|
<j-date v-decorator="[ 'endTime', validatorRules.endTime]" placeholder="请选择结束时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss"></j-date>
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
:labelCol="labelCol"
|
|
:wrapperCol="wrapperCol"
|
|
label="优先级">
|
|
<a-select
|
|
v-decorator="[ 'priority', {}]"
|
|
placeholder="请选择优先级"
|
|
:disabled="disableSubmit">
|
|
<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-form-item
|
|
:labelCol="labelCol"
|
|
:wrapperCol="wrapperCol"
|
|
label="通告对象类型">
|
|
<a-select
|
|
v-decorator="[ 'msgType', validatorRules.msgType]"
|
|
placeholder="请选择通告对象类型"
|
|
:disabled="disableSubmit"
|
|
@change="chooseMsgType">
|
|
<a-select-option value="USER">指定用户</a-select-option>
|
|
<a-select-option value="ALL">全体用户</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item
|
|
:labelCol="labelCol"
|
|
:wrapperCol="wrapperCol"
|
|
label="指定用户"
|
|
v-if="userType">
|
|
<a-select
|
|
mode="multiple"
|
|
style="width: 100%"
|
|
placeholder="请选择用户"
|
|
v-model="selectedUser"
|
|
@dropdownVisibleChange="selectUserIds">
|
|
</a-select>
|
|
</a-form-item>
|
|
</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/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: 5 },
|
|
},
|
|
wrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 16 },
|
|
},
|
|
|
|
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:[{validator: this.endTimeValidate}]},
|
|
startTime:{rules:[{validator: this.startTimeValidate}]}
|
|
},
|
|
url: {
|
|
queryByIds: "/sys/user/queryByIds",
|
|
add: "/sys/annountCement/add",
|
|
edit: "/sys/annountCement/edit",
|
|
},
|
|
userType:false,
|
|
userIds:[],
|
|
selectedUser:[],
|
|
disabled:false,
|
|
msgContent:"",
|
|
}
|
|
},
|
|
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){
|
|
for(var i=0;i<res.result.length;i++){
|
|
this.selectedUser.push(res.result[i].realname);
|
|
}
|
|
this.$refs.UserListModal.edit(res.result,this.userIds);
|
|
}
|
|
});
|
|
}
|
|
this.$nextTick(() => {
|
|
this.form.setFieldsValue(pick(this.model,'endTime','startTime','titile','msgContent','sender','priority','msgCategory','msgType','sendStatus','delFlag'))
|
|
});
|
|
},
|
|
close () {
|
|
this.$emit('close');
|
|
this.selectedUser = [];
|
|
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);
|
|
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');
|
|
}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++){
|
|
this.selectedUser.push(userList[i].realname);
|
|
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("结束时间需大于开始时间")
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |