mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 03:46:44 +08:00
502 lines
19 KiB
Vue
502 lines
19 KiB
Vue
<template>
|
||
<div class="addAudiences">
|
||
<p class="basicInformation">基本信息</p>
|
||
<el-form label-position="right" label-width="80px" ref="form" :model="form" :rules="rules">
|
||
<el-form-item label="名称:" prop="name">
|
||
<el-input placeholder="请填写名称" v-model="form.name" maxlength="50"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="描述:">
|
||
<el-input placeholder="请填写描述" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" v-model="form.description" maxlength="200"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<p class="basicInformation">人员信息</p>
|
||
<div class="action">
|
||
<el-input style="width: 20%" clearable placeholder="请输入姓名或工号" v-model="searchValue"></el-input>
|
||
<el-button type="primary" class="findBtn" size="medium" @click="queryTableData">搜索</el-button>
|
||
<el-button type="primary" size="medium" @click="tableDataReset">重置</el-button>
|
||
<el-button type="primary" size="medium" @click="openDialog">添加</el-button>
|
||
<el-button type="primary" size="medium" @click="openImportDialog">导入</el-button>
|
||
<el-button type="primary" size="medium" @click="deleteTableData">批量删除</el-button>
|
||
</div>
|
||
<el-table ref="multipleTable" :data="tableDataShow" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" align="center" width="55"> </el-table-column>
|
||
<el-table-column label="姓名" prop="name" align="center" ></el-table-column>
|
||
<el-table-column prop="userNo" label="工号" align="center"></el-table-column>
|
||
<el-table-column prop="departName" label="部门" align="center"></el-table-column>
|
||
<!-- <el-table-column prop="position" label="岗位" align="center"></el-table-column> -->
|
||
</el-table>
|
||
<div class="publish">
|
||
<el-button @click="saveBack" type="primary" size="large">取消</el-button>
|
||
<el-button @click="saveBack(0)" type="primary" size="large">保存</el-button>
|
||
<el-button @click="saveBack(1)" type="primary" size="large">保存并发布</el-button>
|
||
</div>
|
||
<el-dialog title="添加人员" :visible.sync="addUserShow" :close-on-click-modal="false" width="800px" custom-class="g-dialog">
|
||
<el-row style="height: 400px;">
|
||
<el-col :span="6" style="height: 380px;display: block;overflow-y: scroll;">
|
||
<el-tree
|
||
ref="treeRef"
|
||
node-key="id"
|
||
:lazy="true"
|
||
:props="departProps"
|
||
:load="loadNode"
|
||
@node-click="handleDepartNodeClick"
|
||
:expand-on-click-node="false"
|
||
:default-expanded-keys="['-1']">
|
||
</el-tree>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<div class="action">
|
||
<el-input clearable style="width: 30%;margin-left: 10px;" v-model="userQueryForm.keyWord" placeholder="请输入姓名或工号"></el-input>
|
||
<el-button type="primary" size="medium" @click="queryUserData">搜索</el-button>
|
||
<el-button type="primary" class="findBtn" size="medium" @click="reset">重置</el-button>
|
||
</div>
|
||
<el-table ref="userTable" :data="userData" v-loading="userDataLoading" tooltip-effect="dark" @selection-change="userSelectionChange">
|
||
<el-table-column type="selection" align="center" width="55"></el-table-column>
|
||
<el-table-column label="姓名" prop="name" align="center"></el-table-column>
|
||
<el-table-column prop="userNo" label="工号" align="center"></el-table-column>
|
||
<el-table-column prop="departName" label="部门" align="center"></el-table-column>
|
||
<!-- <el-table-column prop="duty" label="岗位" align="center"></el-table-column> -->
|
||
</el-table>
|
||
<div style="text-align: center;margin-top: 20px;">
|
||
<el-pagination layout="prev, pager, next" background :total="userDataPage.total" :current-page.sync="userDataPage.pageIndex"
|
||
:page-size="userDataPage.pageSize" @current-change="userDataCurrentChange"></el-pagination>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="addUserShow= false">取 消</el-button>
|
||
<el-button type="primary" @click="addUserToForm">添加人员</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog center custom-class="g-dialog" title="导入人员数据" :close-on-click-modal="false" :visible.sync="importUserShow">
|
||
<div style="padding: 10px 0px;color: #009ae7; ">注：单个导入文件受众成员请勿超过5000条记录，以员工号为准。必须是本系统人员</div>
|
||
<el-row type="flex" align="middle" justify="start" style="margin-bottom: 10px;">
|
||
文件名称：<el-input style="width: 200px;" disabled v-model="selectFile"></el-input>
|
||
<el-upload
|
||
class="upload-demo"
|
||
ref="upload"
|
||
action="/systemapi/xboe/usergroup/import"
|
||
:headers="{'XBOE-Access-Token':token}"
|
||
accept=".xlsx"
|
||
name="file"
|
||
:on-change="selectFileFun"
|
||
:limit="1"
|
||
:on-exceed="uploadExceed"
|
||
:on-success="uploadSuccess"
|
||
:file-list="fileList"
|
||
:show-file-list="false"
|
||
:auto-upload="false"
|
||
>
|
||
<el-button slot="trigger" style="margin-left: 10px;" size="small" type="primary">选择</el-button>
|
||
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
|
||
</el-upload>
|
||
<el-link style="margin-left:auto" @click="downloadTemplate">下载模板文件</el-link>
|
||
</el-row>
|
||
<el-row>
|
||
<el-table ref="userTable" :max-height="500" :min-height="200" :data="importUserData" tooltip-effect="dark" style="width: 100%;">
|
||
<el-table-column label="姓名" prop="name" align="center" ></el-table-column>
|
||
<el-table-column prop="userNo" label="工号" align="center" ></el-table-column>
|
||
<el-table-column label="检查结果" align="center" >
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.isSuccess" style="color: green;">正确</span>
|
||
<span v-else style="color: red;">错误</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="说明" prop="exception" align="center" ></el-table-column>
|
||
<!-- <el-table-column prop="departName" label="部门" align="center" ></el-table-column>
|
||
<el-table-column prop="duty" label="岗位" align="center"></el-table-column> -->
|
||
</el-table>
|
||
<div v-if="importRepeatUsers" style="color: red;padding: 10px 0px;">重复的工号:{{importRepeatUsers}}</div>
|
||
</el-row>
|
||
<template #footer>
|
||
<el-button @click="importUserShow = false">取 消</el-button>
|
||
<el-button type="primary" @click="addImportUserToForm">确认</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getToken } from '@/utils/token'
|
||
import usergroupApi from "@/api/modules/usergroup";
|
||
import userApi from "@/api/system/user";
|
||
import orgApi from "@/api/system/organiza";
|
||
export default{
|
||
data(){
|
||
return{
|
||
token:getToken(),
|
||
form:{
|
||
id:'',
|
||
name: '',
|
||
gtype: 1,
|
||
description:'',
|
||
userGroupItems:[]
|
||
},
|
||
searchValue:'',
|
||
tableData:[],
|
||
tableDataShow:[],
|
||
oldUserGroupItems:[],
|
||
rules: {
|
||
name: [{ required: true, message: "请输入名称", trigger: "blur" }]
|
||
},
|
||
multipleSelection:[],
|
||
userSelection:[],
|
||
addUserShow:false,
|
||
departData:[],
|
||
departProps: {
|
||
children: 'children',
|
||
label: 'name'
|
||
},
|
||
userData:[],
|
||
userQueryForm:{keyWord:'',departId:''},
|
||
userDataLoading:false,
|
||
userDataPage:{
|
||
total:0,
|
||
pageSize:5,
|
||
pageIndex:1
|
||
},
|
||
importUserShow:false,
|
||
importUserData:[],
|
||
importRepeatUsers:'',
|
||
selectFile:'',
|
||
fileList:[],
|
||
}
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
if (that.$route.query.id) {
|
||
usergroupApi.detail(that.$route.query.id).then((res) => {
|
||
if (res.status == 200) {
|
||
that.form = res.result;
|
||
// that.oldUserGroupItems = JSON.parse(JSON.stringify( res.result.userGroupItems ));
|
||
that.tableData = res.result.userGroupItems;
|
||
that.queryTableData();
|
||
}
|
||
});
|
||
}
|
||
},
|
||
methods:{
|
||
loadNode(node, resolve) {
|
||
var parentId = null;
|
||
if (node.level === 0) {
|
||
resolve([{name:'组织机构树',id:'-1'}]);
|
||
}else{
|
||
if(node.level === 1){
|
||
parentId = '-1';
|
||
}else{
|
||
parentId = node.data.id;
|
||
}
|
||
usergroupApi.userOrgs(parentId).then(res =>{
|
||
if (res.status == 200) {
|
||
if(res.result != null && res.result.length > 0){
|
||
resolve(res.result);
|
||
}else{
|
||
resolve([]);
|
||
}
|
||
}else{
|
||
this.$message.error('查询用户的机构失败');
|
||
}
|
||
});
|
||
}
|
||
},
|
||
handleSelectionChange(val) {
|
||
this.multipleSelection = val;
|
||
},
|
||
openDialog(){
|
||
this.addUserShow = true;
|
||
this.userQueryForm.keyWord = '';
|
||
this.userQueryForm.departId = '';
|
||
// orgApi.treeList({}).then(res => {
|
||
// if (res.status == 200) {
|
||
// this.departData = res.result;
|
||
// }
|
||
// });
|
||
//默认不查询
|
||
//this.loadUserData(this.userDataPage);
|
||
},
|
||
reset() {
|
||
this.userQueryForm.keyWord = '';
|
||
this.userQueryForm.departId = '';
|
||
this.userDataPage.pageIndex = 1;
|
||
this.loadUserData(this.userDataPage, this.userQueryForm);
|
||
},
|
||
userSelectionChange(val) {
|
||
this.userSelection = val;
|
||
},
|
||
queryUserData(){
|
||
this.userDataPage.pageIndex = 1;
|
||
this.loadUserData(this.userDataPage, this.userQueryForm);
|
||
},
|
||
loadUserData(page, params = {}){
|
||
this.userDataLoading = true;
|
||
params.pageIndex = page.pageIndex;
|
||
params.pageSize = page.pageSize;
|
||
userApi.list(Object.assign(params, this.userQueryForm)).then(res => {
|
||
if (res.status == 200) {
|
||
this.userData = res.result.list;
|
||
this.userDataPage.total = res.result.count;
|
||
this.userDataLoading = false;
|
||
}
|
||
})
|
||
},
|
||
userDataCurrentChange(pageIndex){
|
||
this.userDataPage.pageIndex = pageIndex;
|
||
this.loadUserData(this.userDataPage,this.userQueryForm);
|
||
},
|
||
handleDepartNodeClick(data){
|
||
this.userQueryForm.departId = data.id;
|
||
this.loadUserData(this.userDataPage);
|
||
},
|
||
addUserToForm(){
|
||
if(this.userSelection.length == 0){
|
||
this.$message({ type: "error", message: '请先选择人员' ,offset:50});
|
||
return;
|
||
}
|
||
for(let i = 0; i < this.userSelection.length; i++){
|
||
let isAdd = true;
|
||
for(let j = 0; j < this.tableData.length; j++){
|
||
if(this.userSelection[i].id == this.tableData[j].aid){
|
||
isAdd = false;
|
||
break;
|
||
}
|
||
}
|
||
if(isAdd){
|
||
let userItem = {}
|
||
userItem.aid = this.userSelection[i].id;
|
||
userItem.name = this.userSelection[i].name;
|
||
userItem.userNo = this.userSelection[i].userNo;
|
||
userItem.departId = this.userSelection[i].departId;
|
||
userItem.departName = this.userSelection[i].departName;
|
||
userItem.position = this.userSelection[i].duty;
|
||
this.tableData.push(userItem);
|
||
}
|
||
}
|
||
this.queryTableData();
|
||
this.addUserShow = false;
|
||
},
|
||
tableDataReset(){
|
||
this.searchValue = '';
|
||
this.queryTableData();
|
||
// this.tableData = JSON.parse(JSON.stringify( this.oldUserGroupItems ));
|
||
// this.queryTableData();
|
||
},
|
||
queryTableData(){
|
||
if(this.searchValue){
|
||
let tableDataTemp = this.tableData;
|
||
this.tableDataShow = this.handleTableDataShow(tableDataTemp,this.searchValue);
|
||
}else{
|
||
this.tableDataShow = this.tableData;
|
||
}
|
||
},
|
||
// 表格过滤
|
||
handleTableDataShow(tableDataTemp, searchValue) {
|
||
if (!tableDataTemp || tableDataTemp.length === 0) {
|
||
return [];
|
||
}
|
||
const array = [];
|
||
for (let i = 0; i < tableDataTemp.length; i += 1) {
|
||
let match = false;
|
||
if(tableDataTemp[i]['name'] || tableDataTemp[i]['userNo']){
|
||
match |= (tableDataTemp[i]['name'].includes(searchValue) || tableDataTemp[i]['userNo'].includes(searchValue));
|
||
}
|
||
if ( match ) {
|
||
array.push({
|
||
...tableDataTemp[i]
|
||
});
|
||
}
|
||
}
|
||
return array;
|
||
},
|
||
deleteTableData(){
|
||
if(this.multipleSelection.length == 0){
|
||
this.$message({ type: "error", message: '请先选择要删除的数据' ,offset:50});
|
||
}
|
||
for (let i = 0; i < this.multipleSelection.length; i++) {
|
||
for (let j = 0; j < this.tableData.length; j++) {
|
||
if (this.tableData[j].aid === this.multipleSelection[i].aid) {
|
||
this.tableData.splice(j, 1)
|
||
break
|
||
}
|
||
}
|
||
}
|
||
this.queryTableData();
|
||
},
|
||
openImportDialog(){
|
||
this.selectFile = '';
|
||
this.importUserData = [];
|
||
this.importRepeatUsers='';
|
||
this.fileList = [];
|
||
this.importUserShow = true;
|
||
},
|
||
downloadTemplate(){
|
||
let fileName = "受众人员导入模板.xlsx";
|
||
// usergroupApi.downloadTemplate().then(
|
||
// (response) => {
|
||
// let blob = new Blob([response], {
|
||
// type: 'application/octet-stream',
|
||
// })
|
||
// if (window.navigator.msSaveOrOpenBlob) {
|
||
// navigator.msSaveBlob(blob, fileName)
|
||
// } else {
|
||
// var link = document.createElement('a')
|
||
// link.href = window.URL.createObjectURL(blob)
|
||
// link.download = fileName
|
||
// link.click()
|
||
// //释放内存
|
||
// window.URL.revokeObjectURL(link.href)
|
||
// }
|
||
// },
|
||
// (err) => {
|
||
// this.$message({
|
||
// type: 'error',
|
||
// message: '文件下载失败，请重试！',offset:50
|
||
// })
|
||
// }
|
||
// )
|
||
let link = document.createElement('a'); //创建a标签
|
||
link.style.display = 'none'; //使其隐藏
|
||
link.download = this.webBaseUrl+'/template/usergroup_template.xlsx';
|
||
link.setAttribute('target', '_blank');
|
||
link.href = this.webBaseUrl+'/template/usergroup_template.xlsx'; //赋予文件下载地址
|
||
link.setAttribute('download', fileName); //设置下载属性 以及文件名
|
||
document.body.appendChild(link); //a标签插至页面中
|
||
link.click(); //强制触发a标签事件
|
||
document.body.removeChild(link);
|
||
|
||
},
|
||
|
||
|
||
|
||
|
||
selectFileFun(file){
|
||
this.selectFile = file.name;
|
||
},
|
||
uploadExceed(files, fileList) {
|
||
this.$set(fileList[0], 'raw', files[0]);
|
||
this.$set(fileList[0], 'name', files[0].name);
|
||
this.$refs['upload'].clearFiles();//清除文件
|
||
this.$refs['upload'].handleStart(files[0]);//选择文件后的赋值方法
|
||
},
|
||
submitUpload(){
|
||
this.$refs.upload.submit();
|
||
},
|
||
uploadSuccess(res){
|
||
if(res.status == 200){
|
||
this.importUserData = res.result;
|
||
this.importRepeatUsers=res.message;
|
||
}else{
|
||
this.$message({ type: "error", message: res.message ,offset:50});
|
||
}
|
||
},
|
||
addImportUserToForm(){
|
||
if(this.importUserData.length == 0){
|
||
this.$message({ type: "error", message: '请先导入人员' ,offset:50});
|
||
return;
|
||
}
|
||
for(let i = 0; i < this.importUserData.length; i++){
|
||
let udata=this.importUserData[i];
|
||
if(!udata.isSuccess){
|
||
continue;
|
||
}
|
||
let isAdd = true;
|
||
for(let j = 0; j < this.tableData.length; j++){
|
||
if(udata.id == this.tableData[j].aid){
|
||
isAdd = false;
|
||
break;
|
||
}
|
||
}
|
||
if(isAdd){
|
||
let userItem = {}
|
||
userItem.aid = udata.id;
|
||
userItem.name = udata.name;
|
||
userItem.userNo = udata.userNo;
|
||
userItem.departId = udata.departId;
|
||
userItem.departName = udata.departName;
|
||
userItem.position = udata.duty;
|
||
this.tableData.push(userItem);
|
||
}
|
||
}
|
||
this.queryTableData();
|
||
this.importUserShow = false;
|
||
},
|
||
saveBack(status){
|
||
if(status === 1 || status === 0){
|
||
this.form.status = status;
|
||
}else{
|
||
this.$router.push('/manage/ugroups');
|
||
return;
|
||
}
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
this.form.userGroupItems = [];
|
||
if(this.tableData.length > 0){
|
||
for(let i = 0; i < this.tableData.length; i++){
|
||
this.form.userGroupItems.push({aid:this.tableData[i].aid});
|
||
}
|
||
}
|
||
if (this.form.id != null && this.form.id != "") {
|
||
usergroupApi
|
||
.update(this.form)
|
||
.then((res) => {
|
||
if (res.status == 200) {
|
||
this.$message({ type: "success", message: "修改成功",offset:50 });
|
||
this.$router.push('/manage/ugroups');
|
||
}
|
||
})
|
||
.catch((res) => {
|
||
this.$message({ type: "error", message: res.message ,offset:50});
|
||
});
|
||
} else {
|
||
usergroupApi
|
||
.save(this.form)
|
||
.then((res) => {
|
||
if (res.status == 200) {
|
||
this.$message({ type: "success", message: "新增成功" ,offset:50});
|
||
this.$router.push('/manage/ugroups');
|
||
}
|
||
})
|
||
.catch((res) => {
|
||
this.$message({ type: "error", message: res.message ,offset:50});
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .el-tree-node:focus>.el-tree-node__content {
|
||
background-color:#cddef8;
|
||
}
|
||
.addAudiences{
|
||
.basicInformation{
|
||
margin: 0;
|
||
padding: 15px 0;
|
||
border-bottom: 1px solid rgb(219, 219, 219);
|
||
}
|
||
.el-form{
|
||
margin-top:20px;
|
||
}
|
||
.action{
|
||
margin: 20px 0;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
.el-input{
|
||
margin-right: 10px;
|
||
}
|
||
.findBtn{
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
.publish{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
}
|
||
}
|
||
</style>
|