137 lines
4.2 KiB
Vue
137 lines
4.2 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form size="small" :inline="true" label-width="100px">
|
|
<el-form-item label="消息发送对象" prop="quotCode">
|
|
<el-select v-model="noticeEventType" placeholder="请选择" clearable>
|
|
<el-option
|
|
v-for="dict in dict.type.notice_event_user"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
@click.native="selectEvent(dict.value)"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="open" size="mini" :disabled="this.noticeEventType==''">选择人员</el-button>
|
|
<!--<el-button :disabled="this.noticeEventType==''" @click="saveNoticeEventUser">保 存</el-button>-->
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="mt10">
|
|
<el-row :gutter="20">
|
|
<el-col v-for="(item, index) in selectedPeoples" :key="index" :span="8">
|
|
<el-card class="mb20">
|
|
<div class="clearfix">
|
|
<span>{{ item.nickName }}</span>
|
|
<el-button style="float: right; padding: 3px 0" type="text" @click="delNoticeEventUser(item)">删除</el-button>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<PeopleSelect ref="peopleSelect" :type="'multiple'" :isCheck="true" :open="peopleOpen" @cancel="peopleOpen=false" @submit="submitPeople"></PeopleSelect>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { listNoticeEventUser,saveNoticeEventUser,delNoticeEventUser } from "@/api/system/notice";
|
|
|
|
/** 导入选人组件 */
|
|
import PeopleSelect from "@/views/components/Tools/PeopleSelect/index.vue";
|
|
|
|
export default {
|
|
name: "noticeUserSelect",
|
|
dicts: ['notice_event_user'],
|
|
components:{
|
|
// 注册组件
|
|
'PeopleSelect': PeopleSelect
|
|
},
|
|
data() {
|
|
return {
|
|
noticeEventType: '',
|
|
|
|
//是否打开选人组件，默认不打开
|
|
peopleOpen:false,
|
|
|
|
selectedPeoples:[]
|
|
};
|
|
},
|
|
created() {
|
|
},
|
|
|
|
methods: {
|
|
//消息发送对象选择
|
|
selectEvent(type){
|
|
this.noticeEventType = type;
|
|
|
|
let params = {};
|
|
params.noticeEventType = type;
|
|
listNoticeEventUser(params).then(response => {
|
|
this.selectedPeoples = response;
|
|
});
|
|
},
|
|
//保存
|
|
saveNoticeEventUser(){
|
|
let dataArr = [];
|
|
let noticeEventType = this.noticeEventType;
|
|
this.selectedPeoples.forEach(function(item){
|
|
let data = {};
|
|
data.noticeEventType = noticeEventType;
|
|
data.userName = item.userName;
|
|
data.nickName = item.nickName;
|
|
dataArr.push(data);
|
|
})
|
|
|
|
console.log(dataArr)
|
|
saveNoticeEventUser(dataArr).then(response => {
|
|
this.$modal.msgSuccess("保存成功");
|
|
this.selectEvent(noticeEventType)
|
|
});
|
|
},
|
|
|
|
//删除
|
|
delNoticeEventUser(item){
|
|
let data = {};
|
|
let noticeEventType = this.noticeEventType;
|
|
data.noticeEventType = noticeEventType;
|
|
data.userName = item.userName;
|
|
delNoticeEventUser(data).then(response => {
|
|
this.$modal.msgSuccess("删除成功");
|
|
this.selectEvent(noticeEventType)
|
|
});
|
|
},
|
|
|
|
//打开选人弹窗
|
|
open(){
|
|
this.peopleOpen=true;
|
|
},
|
|
//选择人的确定按钮事件 submitPeople(nikeNamelist)方法传参一个默认接收用户昵称数组 submitPeople(peopleList,nikeNamelist)方法传参两个则是接收用户昵称数组和用户账号数组
|
|
submitPeople(peopleList,nickNameList){
|
|
console.log(peopleList);
|
|
console.log(nickNameList);
|
|
this.selectedPeoples = this.selectedPeoples.concat(nickNameList)
|
|
this.selectedPeoples = this.unique(this.selectedPeoples)
|
|
this.peopleOpen=false;
|
|
|
|
this.saveNoticeEventUser();
|
|
},
|
|
|
|
//数组去重
|
|
unique(arr) {
|
|
const res = new Map();
|
|
return arr.filter((arr) => !res.has(arr.userName) && res.set(arr.userName, 1));
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.peopleDeleteBtn {
|
|
width:20px;
|
|
height:20px;
|
|
background: url("~@/assets/peopleSelect/delete2.png") no-repeat;
|
|
background-size:100% 100%;
|
|
transition: .2s;
|
|
}
|
|
</style>
|