<template>
<div v-if="true">
<div class="btn_return fr" @click="goback()" style="margin: 15px;">
<i></i>
<span>返回</span>
<b></b>
</div>
<el-table :data="sumTable" border style="width: 100%">
<el-table-column prop="seq" label="序号" header-align="center" align="center" width="70"></el-table-column>
<el-table-column
prop="nodeName"
header-align="center"
label="任务流描述"
align="center"
width="280"
></el-table-column>
<el-table-column
prop="approveType"
header-align="center"
label="处理要求"
align="center"
width="180"
></el-table-column>
<el-table-column header-align="center" align="left" min-width="280" label="处理人">
<template scope="scope">
<div class="hwidth">
<div class="kwidth">
<div class="swidth">{{ scope.row.showHandlerPerson }}</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="name" header-align="center" label="操作" align="center" width="140">
<template scope="scope">
<el-button type="text" size="mini" @click="openSelect(scope.row)">全球通讯录</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title="选择用户" :visible.sync="dialogVisible" size="large" :before-close="handleClose">
<div>
<div class="fl left">
<div class="left_person">
<div
v-for="item in leftPerson"
:key="item.umNo"
@click="selectLeftThis(item)"
:class="{selected: item.isSelect}"
>{{item.name}}({{item.nwSw}} {{item.umNo}})</div>
</div>
</div>
<div class="fl center">
<el-button type="primary" size="small" @click="handleSelect">>></el-button>
<br>
<br>
<el-button type="primary" size="small" @click="handleDelSelect"><<</el-button>
</div>
<div class="fl right">
<div class="right_person">
<div
v-for="item in rightPerson"
:key="item.umNo"
@click="selectRightThis(item)"
:class="{selected: item.isSelect}"
>{{item.name}}({{item.nwSw}} {{item.umNo}})</div>
</div>
</div>
<div class="c"></div>
<div class="m" style="text-align: center;">
<el-button type="primary" @click="handleSelectPeople">确定</el-button>
</div>
</div>
</el-dialog>
<div class="btn-area" style="text-align: center; margin: 15px">
<el-button type="primary" class="add-submit" @click="submitData">确定</el-button>
</div>
</div>
</template>
<script>
import mock from "../mock/index2.js";
import { getEoaAsync, recordSubmit } from "./tax-eoa.js";
export default {
props: {},
created() {
this.getSumTableData();
// this.initSumTable()
},
computed: {
leftSelectNum: function() {
var num = 0;
this.leftPerson.forEach(function(item) {
if (item.isSelect) {
num++;
}
});
return num;
},
rightSelectNum: function() {
return this.rightPerson.length;
}
},
data() {
return {
loading: false,
sumTable: [],
dialogVisible: false,
leftPerson: [],
rightPerson: [],
nowIndex: 0, //当前打开的表格的行数。
searchtxt: "", //无用
orgSelectedName: "", //无用
chooseReChecker: {}
};
},
methods: {
async getSumTableData() {
// let params = {orgId:"",orgType:'',permissionCode:'',scope:'self'}
const data = await getEoaAsync(this.$route.query);
if (data.responseCode === "0") {
this.loading = true;
var map = data.result[0];
map.approvalChainPostDetailList.map(it => {
var obj = {
seq: it.seqNo,
nodeName: it.postName,
approveType: "顺序批示",
handlerPerson: [],
showHandlerPerson: "",
flowOwner: "",
flowOwnerName: "",
umAccountList: it.umAccountList.map(o => {
return {
um: o.umNo,
umNo: o.umNo,
userName: o.name,
name: o.name,
deptIdDescr: o.nwSw,
nwSw: o.nwSw,
uId: o.uId, //是否要改成uID。
isSelect: o.isSelect
};
})
};
this.sumTable.push(obj);
});
}
},
//选择处理人或修改handlerPerson！
openSelect(row) {
var that = this;
this.dialogVisible = true;
this.nowIndex = row.seq;
this.rightPerson = row.handlerPerson;
var id =
this.rightPerson && this.rightPerson[0] ? this.rightPerson[0].umNo : -1; //如果用户名存在，就是修改。把原值的umNo赋值给id
this.leftPerson = row.umAccountList
.map(function(it) {
that.$set(it, "isSelect", false); //it 是一个对象.
it.uID = it.umNo;
it.userName = it.name;
return it;
})
.filter(function(it) {
return it.umNo != id; //返回不等于原id。就是把其他的传递回去。过滤调修改的id。 这个id就是this.rightPerson[0].umNo。如果是增加就不会过滤掉。
});
},
handleClose() {
this.dialogVisible = false;
},
selectLeftThis(item) {
if (this.rightSelectNum === 0) {
this.leftPerson.forEach(function(item) {
item.isSelect = false;
});
item.isSelect = true;
}
},
selectRightThis(item) {
if (item.isSelect) {
item.isSelect = false;
} else {
item.isSelect = true;
}
},
// 人员选择函数
handleSelect() {
var _selectpeople = [];
var obj = null;
for (var i = 0; i < this.leftPerson.length; i++) {
if (this.leftPerson[i].isSelect === true) {
this.leftPerson[i].isSelect = false;
obj = this.leftPerson[i];
_selectpeople.push(JSON.parse(JSON.stringify(obj)));
this.leftPerson = this.leftPerson.filter(function(item) {
return item !== obj; //这里通过过滤器过滤调推入右边人群的对象。
});
}
}
this.rightPerson = this.rightPerson.concat(_selectpeople);
},
handleDelSelect() {
var obj = null;
var _selectpeople = [];
var uIDs = [];
for (var i = 0; i < this.rightPerson.length; i++) {
if (this.rightPerson[i].isSelect === true) {
this.rightPerson[i].isSelect = false;
obj = this.rightPerson[i];
_selectpeople.push(JSON.parse(JSON.stringify(obj)));
}
}
uIDs = _selectpeople.map(function(item) {
return item.uID;
});
this.leftPerson = this.leftPerson.concat(_selectpeople);
this.rightPerson = this.rightPerson.filter(function(item) {
return uIDs.toString().indexOf(item.uID) === -1; //等于-1，及时不存在。就是过滤选择的。
});
},
handleSelectPeople() {
var that = this;
that.sumTable.forEach(function(item) {
if (item.seq === that.nowIndex) {
item.handlerPerson = that.rightPerson; //把右边框中选择的人赋值给处理人
var _showTxt = "";
var _flowOwnerTxt = "";
var _flowOwnerName = "";
for (var i = 0; i < that.rightPerson.length; i++) {
_showTxt +=
that.rightPerson[i].userName +
"-" +
that.rightPerson[i].uID +
",";
_flowOwnerTxt += that.rightPerson[i].uID + ",";
_flowOwnerName += that.rightPerson[i].userName + ",";
}
if (_showTxt !== "") {
_showTxt = _showTxt.substring(0, _showTxt.length - 1);
}
if (_showTxt !== "") {
_flowOwnerTxt = _flowOwnerTxt.substring(
0,
_flowOwnerTxt.length - 1
);
_flowOwnerName = _flowOwnerName.substring(
0,
_flowOwnerName.length - 1
);
}
item.flowOwner = _flowOwnerTxt;
item.flowOwnerName = _flowOwnerName;
item.showHandlerPerson = _showTxt;
}
});
that.dialogVisible = false;
},
//初始化总表，这个应该没什么用。因为没值。
initSumTable() {
var that = this;
var taskDetailList = that.chooseReChecker.taskDetailList;
for (var i = 0; i < that.sumTable.length; i++) {
for (var h = 0; h < taskDetailList.length; h++) {
if (that.sumTable[i].seq === taskDetailList[h].seq) {
that.nowIndex = that.sumTable[i].seq;
that.rightPerson = taskDetailList[h].rightPerson;
that.handleSelectPeople();
that.sumTable[i].handlerPerson = taskDetailList[h].rightPerson;
}
}
}
},
submitData() {
var str = "";
var that = this;
for (var i = 0; i < that.sumTable.length; i++) {
if (that.sumTable[i].showHandlerPerson === "") {
that.$message({
message: "处理人员不能为空",
type: "warning"
});
return;
}
str += that.sumTable[i].showHandlerPerson.split("-")[0] + "→";
}
str = str.substring(0, str.length - 1);
if (str !== "") {
that.chooseReChecker.reChecker = str;
that.chooseReChecker.taskSendLeader = str;
that.chooseReChecker.yes = true;
that.chooseReChecker.taskDesc = "description";
that.chooseReChecker.taskDetailList = [];
var taskList = [];
for (var i = 0; i < that.sumTable.length; i++) {
that.chooseReChecker.taskDetailList.push({
flowOwner: that.sumTable[i].flowOwner,
flowOwnerName: that.sumTable[i].flowOwnerName,
handType: "30",
seq: that.sumTable[i].seq,
rightPerson: JSON.parse(
JSON.stringify(that.sumTable[i].handlerPerson)
),
});
}
that.sendCheckInfo();
} else {
that.$message({
message: "请选择至少一个人员",
type: "warning"
});
}
},
async sendCheckInfo() {
let params = {
id: this.$route.query.id,//申请号
operation: this.$route.query.operation,
approverForm: {
reChecker: this.chooseReChecker.reChecker,
taskDesc: this.chooseReChecker.taskDesc,
taskDetailList: this.chooseReChecker.taskDetailList,
},
};
const data = await recordSubmit(params);
if (data.responseCode === "0") {
this.$message({
message: "EOA提交成功",
type: "success",
onClose: this.goback()
});
}
},
goback() {
this.$router.go(-1);
}
}
};
</script>
<style>
[v-cloak] {
display: none;
}
.fr {
float: right;
}
.add-area {
padding: 10px 0;
text-align: left;
}
.btn-area {
padding: 15px 0;
text-align: center;
}
.el-input--small .el-input__inner {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.el-select .el-input__inner {
padding-right: 10px;
}
#examine_approve {
text-align: center;
}
.dwidth {
width: 140px !important;
}
.kwidth {
width: 100%;
height: 90px;
margin-top: 2px;
overflow-x: scroll;
}
.hwidth {
width: 100%;
height: 30px;
overflow: hidden;
}
.swidth {
width: 1000px;
}
input {
height: 24px !important;
}
.el-input.is-disabled .el-input__inner {
background: #fff;
color: #000;
}
.fl {
float: left;
}
.left {
width: 400px;
height: 320px;
}
.right {
width: 400px;
height: 320px;
}
.selected {
background: #26a0da !important;
}
.center {
padding-top: 150px;
width: 50px;
}
.top {
width: 100%;
}
.lefttxt {
width: 80%;
}
.righttxt {
width: 90%;
}
.left_person,
.right_person {
margin-top: 20px;
border: solid 1px #ccc;
text-align: left;
height: 86%;
overflow-y: scroll;
}
.left_person div,
.right_person div {
font-size: 12px;
box-sizing: border-box;
padding: 4px 10px;
margin-top: 6px;
}
.left_person div:hover,
.right_person div:hover {
background: #efefef;
}
.m {
margin-top: 43px;
}
.c {
clear: both;
}
.el-dialog {
width: 900px;
}
.el-dialog__body {
padding: 16px 20px 30px 20px;
}
.person-title {
margin: 8px 0px;
color: rgb(61, 47, 31);
}
.ztree {
padding: 5px 10px;
}
.bg {
z-index: 8000;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #333;
opacity: 0.4;
}
.myTree1 {
/*z-index: 9000;*/
position: absolute;
overflow: hidden;
height: 0px;
}
.myTree2 {
z-index: 9000;
position: absolute;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
border: solid 1px #efefef;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
background: #fff;
height: 400px;
border-radius: 5px;
overflow: hidden;
}
.org-select > p {
position: relative;
text-align: center;
}
.org-select > i {
cursor: pointer;
position: absolute;
top: 16px;
right: 20px;
width: 18px;
height: 18px;
z-index: 1000000;
background: url("../../../../static/assets/images/close.png") center;
background-size: 100%;
}
.org-list {
position: absolute;
top: 0px;
height: 100%;
width: 100%;
box-sizing: border-box;
padding-top: 46px;
overflow: auto;
}
.org-list > .or-list-box {
height: 100%;
width: 100%;
box-sizing: border-box;
overflow: auto;
padding: 5px;
}
</style>
