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.
396 lines
11 KiB
396 lines
11 KiB
<template>
|
|
<div class="m-transfer-box">
|
|
<el-dialog
|
|
v-if="visible"
|
|
:close-on-click-modal="false"
|
|
:show-close="true"
|
|
:title="'人员名单'"
|
|
:visible.sync="dialogVisible"
|
|
width="800px"
|
|
@close="closeDialog"
|
|
>
|
|
<div class="m-transfer-content">
|
|
<div class="m-transfer-content-left">
|
|
<h2>未分配<span class="m-number">{{ noSelectData.length }}</span></h2>
|
|
<el-form
|
|
ref="queryForm" :inline="true" :model="noSelectParams" class="m-search-form" label-width="80px"
|
|
size="small" @submit.native.prevent
|
|
>
|
|
<template>
|
|
<el-form-item label="排班分组" prop="groupingId">
|
|
<el-select v-model="noSelectParams.groupingId" placeholder="请选择">
|
|
<el-option
|
|
v-for="dict in groupData"
|
|
:key="dict.id"
|
|
:label="dict.name"
|
|
:value="dict.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="姓名" prop="userName">
|
|
<el-input
|
|
v-model="noSelectParams.userName"
|
|
clearable
|
|
placeholder="请输入姓名"
|
|
/>
|
|
</el-form-item>
|
|
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQueryUn">搜 索</el-button>
|
|
|
|
</template>
|
|
</el-form>
|
|
<el-table :data="noSelectData" @selection-change="noSelectChange">
|
|
<el-table-column align="center" type="selection" width="55"/>
|
|
<el-table-column align="center" label="部门名称" prop="deptName"/>
|
|
<el-table-column align="center" label="姓名" prop="userName"/>
|
|
</el-table>
|
|
</div>
|
|
<div class="m-transfer-content-middle">
|
|
<el-button type="primary" @click="addSelected">添 加 ></el-button>
|
|
<el-button @click="removeSelected">< 移 除</el-button>
|
|
</div>
|
|
<div class="m-transfer-content-right">
|
|
<h2>已分配<span class="m-number">{{ selectedData.length }}</span></h2>
|
|
<el-form
|
|
ref="queryForms" :inline="true" :model="selectedParams" class="m-search-form" label-width="80px"
|
|
size="small" @submit.native.prevent
|
|
>
|
|
|
|
<el-form-item label="姓名" prop="userName">
|
|
<el-input
|
|
v-model="selectedParams.userName"
|
|
clearable
|
|
placeholder="请输入姓名"
|
|
@keyup.enter.native.stop="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜 索</el-button>
|
|
|
|
</el-form>
|
|
<el-table :data="selectedData" @selection-change="selectedChange">
|
|
<el-table-column align="center" type="selection" width="55"/>
|
|
<el-table-column align="center" label="部门名称" prop="deptName"/>
|
|
<el-table-column align="center" label="姓名" prop="userName"/>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div v-if="groupType == 6" slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="closeDialog">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
addDistributedGroupingUsers,
|
|
removeDistributedGroupingUsers,
|
|
getUndistributedGroupingUsers,
|
|
getDistributedGroupingUsers, getGroupingWatchmen
|
|
} from "@/api/emergencycommand/info";
|
|
import TreeSelect from "@riophae/vue-treeselect";
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
import {
|
|
addPerson,
|
|
getTaskDistributedGroupingUsers,
|
|
getTaskUndistributedGroupingUsers,
|
|
removePerson
|
|
} from "@/api/patrol/patrolTask";
|
|
|
|
|
|
export default {
|
|
components: {TreeSelect},
|
|
name: "Transfer",
|
|
props: {
|
|
//显示隐藏
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
//未分配
|
|
noSelect: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
//已分配
|
|
selected: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
//左侧选中的分组id
|
|
groupId: {
|
|
default: null
|
|
},
|
|
//部门筛选下拉框
|
|
deptOptions: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
//区别类型
|
|
groupType: {
|
|
default: null
|
|
},
|
|
//负责人和处理人类别区分
|
|
type: {
|
|
default: null
|
|
},
|
|
},
|
|
watch: {
|
|
visible: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(val) {
|
|
this.dialogVisible = val
|
|
}
|
|
},
|
|
noSelect: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(val) {
|
|
this.noSelectData = val
|
|
}
|
|
},
|
|
selected: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(val) {
|
|
this.selectedData = val
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dialogVisible: false,//显示隐藏
|
|
noSelectData: [],//未分配人
|
|
selectedData: [],//已分配人员
|
|
addPublicArr: [],//未分配选中时的人
|
|
removePublicArr: [],//已分配选中时的人
|
|
userList: [],//type=值守人员管理时要返回的list
|
|
ids: [],//type=值守人员管理时要删除的id集
|
|
noSelectParams: {//未分配人员检索条件
|
|
groupingId: null,
|
|
deptId: null,
|
|
userName: null
|
|
},
|
|
selectedParams: {//已分配人员检索条件
|
|
groupingId: null,
|
|
userName: null
|
|
},
|
|
groupData: []//分组下拉数据
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getGroupingWatchmen()
|
|
},
|
|
methods: {
|
|
resetForms() {
|
|
this.noSelectParams = {
|
|
deptId: null,
|
|
groupingId: null,
|
|
userName: null
|
|
}
|
|
this.selectedParams = {
|
|
userName: null
|
|
}
|
|
this.resetForm("queryForm");
|
|
this.resetForm("queryForms");
|
|
},
|
|
// 弹窗确定按钮
|
|
submitForm() {
|
|
if (this.groupType == 6) {
|
|
if (this.type == 1) {
|
|
if (Object.keys(this.selectedData).length > 1) {
|
|
this.$message.warning('只能选择一个人员')
|
|
return
|
|
} else {
|
|
this.$emit('update:selectedPersonName', this.selectedData[0].userName)
|
|
this.$emit('update:selectedPerson', this.selectedData[0].userId)
|
|
this.dialogVisible = false
|
|
this.$emit('update:close', this.dialogVisible)
|
|
this.selectedData = []
|
|
}
|
|
} else if (this.type == 2) {
|
|
let handleList = []
|
|
let emptyArr = []
|
|
if (this.selectedData != undefined && this.selectedData.length > 0) {
|
|
this.selectedData.forEach(item => {
|
|
handleList.push(item.userId)
|
|
emptyArr.push(item.userName)
|
|
})
|
|
let nameList = emptyArr.join(',')
|
|
this.$emit('update:nameList', nameList)
|
|
this.$emit('update:selectedProcessedPerson', handleList)
|
|
this.dialogVisible = false
|
|
this.$emit('update:close', this.dialogVisible)
|
|
this.selectedData = []
|
|
}
|
|
}
|
|
} else {
|
|
this.dialogVisible = false
|
|
this.$emit('update:close', this.dialogVisible)
|
|
}
|
|
},
|
|
//控制显示隐藏
|
|
closeDialog() {
|
|
this.dialogVisible = false
|
|
this.$emit('update:close', this.dialogVisible)
|
|
|
|
this.resetForms()
|
|
},
|
|
//未选中列表触发
|
|
noSelectChange(val) {
|
|
this.addPublicArr = val
|
|
},
|
|
//已选中列表触发
|
|
selectedChange(val) {
|
|
this.removePublicArr = val
|
|
},
|
|
//添加到已分配
|
|
addSelected() {
|
|
if (this.addPublicArr !== undefined && this.addPublicArr.length > 0) {
|
|
this.addPublicArr.forEach(item => {
|
|
this.selectedData.push(item)
|
|
this.userList.push(item.userId)
|
|
})
|
|
this.noSelectData = this.noSelectData.filter(v=>!this.addPublicArr.includes(v))
|
|
if (this.groupType == 4) {
|
|
this.$nextTick(() => {
|
|
let params = {
|
|
groupingId: this.groupId,
|
|
userList: this.userList
|
|
}
|
|
addDistributedGroupingUsers(params).then(val => {
|
|
this.userList = []
|
|
})
|
|
this.$nextTick(() => {
|
|
this.addPublicArr = []
|
|
})
|
|
})
|
|
} else if (this.groupType == 8) {
|
|
this.$nextTick(() => {
|
|
let params = {
|
|
taskId: this.groupId.toString(),
|
|
userId: this.userList
|
|
}
|
|
console.log(params)
|
|
addPerson(params).then(val => {
|
|
this.$message.success('分配成功')
|
|
this.userList = []
|
|
})
|
|
this.$nextTick(() => {
|
|
this.addPublicArr = []
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
//移除已分配
|
|
removeSelected() {
|
|
if (this.removePublicArr !== undefined && this.removePublicArr.length > 0) {
|
|
this.removePublicArr.forEach(item => {
|
|
this.noSelectData.push(item)
|
|
this.ids.push(item.id)
|
|
})
|
|
this.selectedData = this.selectedData.filter(v=>!this.removePublicArr.includes(v))
|
|
|
|
if (this.groupType == 4) {
|
|
this.$nextTick(() => {
|
|
let ids = this.ids.join(',')
|
|
removeDistributedGroupingUsers(ids).then(val => {
|
|
this.ids = []
|
|
})
|
|
this.$nextTick(() => {
|
|
this.removePublicArr = []
|
|
})
|
|
})
|
|
} else if (this.groupType == 8) {
|
|
this.$nextTick(() => {
|
|
let params = this.ids.join(',')
|
|
removePerson(params).then(val => {
|
|
this.$message.success('移除成功')
|
|
this.ids = []
|
|
})
|
|
this.$nextTick(() => {
|
|
this.removePublicArr = []
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
//未分配检索
|
|
handleQueryUn() {
|
|
let params = {
|
|
patrolTaskId: this.groupId,
|
|
groupingId: this.noSelectParams.groupingId,
|
|
userName: this.noSelectParams.userName
|
|
}
|
|
getTaskUndistributedGroupingUsers(params).then(val => {
|
|
this.noSelectData = val.data
|
|
})
|
|
},
|
|
//已分配检索
|
|
handleQuery() {
|
|
let params1 = {
|
|
patrolTaskId: this.groupId,
|
|
userName: this.selectedParams.userName
|
|
}
|
|
getTaskDistributedGroupingUsers(params1).then(val => {
|
|
this.selectedData = val.data
|
|
})
|
|
},
|
|
//排班分组
|
|
getGroupingWatchmen() {
|
|
getGroupingWatchmen().then(response => {
|
|
this.$nextTick(() => {
|
|
this.groupData = response.data
|
|
this.noSelectParams.groupingId = response.data[0].id
|
|
})
|
|
});
|
|
},
|
|
send(val) {
|
|
console.log(val)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.m-transfer-content {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
height: fit-content;
|
|
|
|
.m-transfer-content-left, .m-transfer-content-right {
|
|
width: 40%;
|
|
}
|
|
|
|
.m-transfer-content-middle {
|
|
width: 10%;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
padding-top: 10vh;
|
|
|
|
.el-button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.m-number {
|
|
color: #d73d3d;
|
|
}
|
|
|
|
.m-search-form {
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
}
|
|
|
|
::v-deep .m-tree-select .vue-treeselect__control {
|
|
width: unset !important;
|
|
}
|
|
|
|
.p-tree-box {
|
|
display: flex;
|
|
}
|
|
</style>
|
|
|