<template>
|
<div>
|
<b-card no-body class="mx-4 mt-4">
|
<div class="px-4 pt-4">
|
<h4 class="font-weight-bold mb-4">
|
<span
|
class="text-muted font-weight-light cursor-pointer"
|
@click="$router.push({path:'/',name:'home'})"
|
>布控任务 /</span>
|
编辑人员
|
</h4>
|
<div class="d-flex title-bar">
|
<h5 class="mb-2 text-danger f16 font-weight-bolder mr-4">{{ctrolObj.taskName}}</h5>
|
<p class="mb-2 f16">
|
<span class="font-weight-bolder">状态：</span>{{ctrolObj.status === 0?'未布控':'布控中'}}
|
</p>
|
<p class="mb-2 f16">
|
<span class="font-weight-bolder">对比阀值：</span>{{ctrolObj.threshold}}
|
</p>
|
<p class="mb-2 f16">
|
<span class="font-weight-bolder">布控时间：</span>{{ctrolObj.startTime}} - {{ctrolObj.endTime}}
|
</p>
|
</div>
|
</div>
|
<div class="mx-4 my-2 px-4 py-4 bg-lighter">
|
<!-- <div class="mx-4 mb-4 pt-2"> -->
|
<el-tabs type="border-card" v-model="tabsType">
|
<el-tab-pane label="添加人员" name="addPerson">
|
<div class="bg-lighter row">
|
<div class="col-6">
|
<div class="py-2 px-4 bg-white">
|
<div class="d-flex">
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'baseDB'?'active':'']"
|
@click="tableType='baseDB'"
|
>从底库中选择</div>
|
<div class="flex-vertical-center px-3"></div>
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'localDB'?'active':'']"
|
@click="tableType='localDB'"
|
>从平台人员库中选择</div>
|
<div class="flex-vertical-center px-3"></div>
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'todo'?'active':'']"
|
@click="tableType='todo'"
|
>从待布控中选择</div>
|
<div class="flex-vertical-center px-3"></div>
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'upLode'?'active':'']"
|
@click="tableType='upLode'"
|
>导入图片</div>
|
</div>
|
<!-- 子 tab 内容区 -->
|
<div class="overflow-auto pr10" style="height: 50vh;">
|
<!-- 从地库选择 start -->
|
<perosn-tree
|
v-show="tableType === 'baseDB'"
|
searchTitle="地库名称/姓名"
|
:data="baseDBTree"
|
@currentNode="baseDBcurrentNode"
|
/>
|
<!-- 从地库选择 end -->
|
<!-- 从平台人员 start -->
|
<perosn-tree
|
ref="personTree"
|
v-show="tableType === 'localDB'"
|
searchTitle="组织机构名称/姓名"
|
:data="localDBTree"
|
@currentNode="localDBcurrentNode"
|
/>
|
<!-- 从平台人员 end -->
|
<!-- 从待布控中选择-->
|
<select-from-ctrol
|
v-show="tableType === 'todo'"
|
:personList="personList"
|
@handleSearch="handleSearch"
|
@handleChange="handleChange"
|
@resetList="resetList"
|
></select-from-ctrol>
|
<!-- 导入图片-->
|
<upload-person v-show="tableType === 'upLode'" @handleChange="selectUpload"></upload-person>
|
</div>
|
</div>
|
</div>
|
<div class="col-6">
|
<div class="py-4 px-4 bg-white overflow-auto" style="height: 55.5vh;">
|
<check-person
|
:alreadyCheckList="alreadyCheckList"
|
:similarList="similarList"
|
:siwperList="siwperList"
|
@delOne="delOne"
|
@uploadPer="uploadPer"
|
></check-person>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="对接其他库" name="other">
|
<!-- 对接其他库 开始 -->
|
<div class="py-4 mt-4">
|
<el-form
|
:model="serverForm"
|
:rules="serverRules"
|
ref="serverForm"
|
label-width="100px"
|
class="serverForm"
|
>
|
<el-form-item label="对接数据库：" prop="server">
|
<el-select v-model="serverForm.server" placeholder="请选择对接数据">
|
<!-- <el-option label="区域一" value="shanghai"></el-option> -->
|
</el-select>
|
</el-form-item>
|
<el-form-item label="库地址：" prop="ip">
|
<el-input v-model="serverForm.ip"></el-input>
|
</el-form-item>
|
<el-form-item label="用户名：" prop="userName">
|
<el-input v-model="serverForm.userName"></el-input>
|
</el-form-item>
|
<el-form-item label="密码：" prop="passWord">
|
<el-input type="password" v-model="serverForm.passWord"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 对接其他库 结束 -->
|
</el-tab-pane>
|
</el-tabs>
|
<!-- <div class="bg-white">
|
|
</div>-->
|
</div>
|
<div class="text-center py-4">
|
<el-button type="primary" @click.native="save()">保存</el-button>
|
<el-button type="info" @click.native="$router.push({path:'/',query:{}})">取消</el-button>
|
</div>
|
</b-card>
|
</div>
|
</template>
|
<script>
|
import {
|
Form,
|
FormItem,
|
Input,
|
Select,
|
Option,
|
Button,
|
Tabs,
|
TabPane
|
} from 'element-ui'
|
import perosnTree from './components/perosnTree'
|
import { getTaskUserTree, findUserFromPlat, findTaskPendingUsers,
|
getCtrlUserAlreadyList, saveTaskUser } from '../../server/ctrl.js'
|
import checkPerson from './components/checkPerson'
|
import selectFromCtrol from './components/selectFromCtrol'
|
import uploadPerson from './components/uploadPerson'
|
export default {
|
name: 'person',
|
metaInfo: {
|
title: '编辑人员'
|
},
|
data() {
|
return {
|
baseDBTree: [],
|
localDBTree: [],
|
tabsType: 'addPerson', // other
|
tableType: 'baseDB', // baseDB localDB todo upLode
|
serverForm: {},
|
serverRules: {
|
userName: [
|
{ required: true, message: '请输入活动名称', trigger: 'blur' },
|
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
]
|
},
|
/** 传到左侧待布控中的数据 */
|
personList: [],
|
/** 右侧已选的人员列表 */
|
alreadyCheckList: [],
|
/** 相似的人员列表 */
|
similarList: [],
|
/** 滑动中的列表 */
|
siwperList: [],
|
/** 接收从布控任务中接收的数据，通过路由传递过来的 */
|
ctrolObj: {}
|
}
|
},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
}
|
},
|
methods: {
|
async getTaskUserTree() {
|
const res = await getTaskUserTree()
|
// console.log(res, 'res')
|
if (res && res.success && res.data) {
|
// let arr = []
|
// this.getTreeNode(res.data, arr)
|
// if (arr.length !== 0) {
|
// arr.forEach(item => {
|
// this.$set(item, 'dataType', 'baseDBTree')
|
// })
|
// }
|
this.baseDBTree = res.data
|
// console.log(this.baseDBTree, 'res this.baseDBTree')
|
}
|
},
|
async findUserFromPlat() {
|
let json = {
|
orgById: this.orgId
|
}
|
let res = await findUserFromPlat(json)
|
if (res && res.success) {
|
// console.log(res, 'findUserFromPlat res')
|
// let arr = []
|
// this.getTreeNode(res.data, arr)
|
// if (arr.length !== 0) {
|
// arr.forEach(item => {
|
// this.$set(item, 'dataType', 'localDBTree')
|
// })
|
// }
|
this.localDBTree = res.data
|
}
|
},
|
/** 查询待布控人员 */
|
async findTaskPendingUsers(data) {
|
let res
|
if (Object.keys(data).length === 0) {
|
res = await findTaskPendingUsers()
|
} else {
|
let {searchName} = data
|
res = await findTaskPendingUsers({
|
name: searchName
|
})
|
}
|
if (res && res.success) {
|
// console.log(res, 'findTaskPendingUsers res')
|
this.personList = res.data.data.map(item => {
|
// userInfo 拼接用户信息
|
if (item.sex > -1) {
|
item.sexName = item.sex ? '男' : '女'
|
}
|
const arr = ['username', 'sexName', 'idCard', 'mobile']
|
let userInfo = ''
|
for (let [index, name] of arr.entries()) {
|
if (item[name]) {
|
userInfo += item[name] + `${index !== arr.length - 1 ? '/' : ''}`
|
}
|
}
|
item.createTime = this.$moment(item.createTime).format('YYYY/MM/DD HH:mm:ss')
|
item.updateTime = this.$moment(item.updateTime).format('YYYY/MM/DD HH:mm:ss')
|
item.userInfo = userInfo
|
this.$set(item, 'isCheck', false)
|
this.$set(item, 'dataType', 'personList')
|
return item
|
})
|
// console.log(this.personList, 'this.personList')
|
this.personList.forEach(item => {
|
if (this.alreadyCheckList && this.alreadyCheckList.length !== 0) {
|
for (let i of this.alreadyCheckList) {
|
if (i.id === item.id) {
|
this.$set(item, 'checked', true)
|
this.$refs.personTree.setCurrentKeyOne(item.id)
|
break
|
} else {
|
this.$set(item, 'checked', false)
|
}
|
}
|
}
|
})
|
}
|
},
|
/** 迭代人员列表，返回纯id得数组 */
|
IteraList(personList, arr) {
|
personList.forEach(item => {
|
arr.push(item.id)
|
})
|
},
|
/** 获取设备树的id */
|
getTreeId(obj, arr) {
|
arr.push(obj.id)
|
if (obj.child && obj.child.length !== 0) {
|
obj.child.forEach((item, index) => {
|
this.getTreeId(item, arr)
|
})
|
}
|
},
|
/** 获取所有节点的集合 */
|
getTreeNode(obj, arr) {
|
arr.push(obj)
|
if (obj.child && obj.child.length !== 0) {
|
obj.child.forEach((item, index) => {
|
this.getTreeNode(item, arr)
|
})
|
}
|
},
|
baseDBcurrentNode(data, node, checkNodes) {
|
// console.log(data, node, checkNodes, 'data, node, checkNodes')
|
/** 首先得去除已勾选得数据，然后添加新勾选得数据 */
|
let ids = []
|
this.IteraList(this.alreadyCheckList, ids)
|
let checkList = checkNodes.filter(item => {
|
this.$set(item, 'dataType', 'baseDBTree')
|
return (!ids.includes(item.id))
|
})
|
// console.log(checkList, '新勾选得人员 checkList')
|
this.alreadyCheckList = [...this.alreadyCheckList, ...checkList]
|
if (checkNodes.length === 0) {
|
if (!node.isCheck) {
|
let arr = []
|
this.getTreeId(node, arr)
|
this.alreadyCheckList = this.alreadyCheckList.filter(item => {
|
return (!arr.includes(item.id))
|
})
|
}
|
} else {
|
for (let j of checkNodes) {
|
if (!j.isCheck) {
|
this.alreadyCheckList = this.alreadyCheckList.filter(item => {
|
return (item.id !== j.id)
|
})
|
}
|
}
|
}
|
},
|
localDBcurrentNode(data, node, checkNodes) {
|
// console.log(data, node, checkNodes, 'data, node, checkNodes')
|
/** 首先得去除已勾选得数据，然后添加新勾选得数据 */
|
let ids = []
|
this.IteraList(this.alreadyCheckList, ids)
|
let checkList = checkNodes.filter(item => {
|
this.$set(item, 'dataType', 'localDBTree')
|
return (!ids.includes(item.id))
|
})
|
// console.log(checkList, '新勾选得人员 checkList')
|
this.alreadyCheckList = [...this.alreadyCheckList, ...checkList]
|
if (checkNodes.length === 0) {
|
if (!node.isCheck) {
|
let arr = []
|
this.getTreeId(node, arr)
|
this.alreadyCheckList = this.alreadyCheckList.filter(item => {
|
return (!arr.includes(item.id))
|
})
|
}
|
} else {
|
for (let j of checkNodes) {
|
if (!j.isCheck) {
|
this.alreadyCheckList = this.alreadyCheckList.filter(item => {
|
return (item.id !== j.id)
|
})
|
}
|
}
|
}
|
},
|
/* 表单提交 start */
|
submitForm(formName) {
|
console.log(this.tabsType, 'this.tabsType')
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
alert('submit!')
|
} else {
|
console.log('error submit!!')
|
return false
|
}
|
})
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields()
|
},
|
/* 表单提交 end */
|
/** 从待布控中选择中的搜索回调 */
|
handleSearch(data) {
|
console.log(data, '从待布控中选择中的搜索回调')
|
this.findTaskPendingUsers(data)
|
},
|
/** 从上传图片选择 */
|
selectUpload(data) {
|
console.log(data, 'selectUpload data')
|
if (data) {
|
if (data.isCheck) {
|
this.alreadyCheckList.push(data)
|
} else {
|
this.alreadyCheckList = this.alreadyCheckList.filter(item => {
|
return (item.id !== data.id)
|
})
|
}
|
}
|
},
|
resetList() {
|
/** 重置待布控列表,重新查询所有 */
|
// this.personList =
|
},
|
handleChange(data) {
|
if (data) {
|
if (data.isCheck) {
|
this.alreadyCheckList.push(data)
|
} else {
|
this.alreadyCheckList = this.alreadyCheckList.filter(item => {
|
return (item.id !== data.id)
|
})
|
}
|
}
|
console.log(this.alreadyCheckList, 'this.alreadyCheckList')
|
},
|
/** 右侧人员列表中的删除单人 */
|
delOne(data) {
|
let {
|
delData,
|
type
|
} = data
|
// console.log(delData, 'delOne', type)
|
if (type === 'alreadyCheckList') {
|
/** 从已选的列表中删除单人 */
|
this.alreadyCheckList = this.alreadyCheckList.filter((item) => {
|
return item.id !== delData.id
|
})
|
}
|
if (type === 'similarList') {
|
/** 从相似列表中删除单人 */
|
this.similarList = this.similarList.filter((item) => {
|
return item.id !== delData.id
|
})
|
}
|
if (type === 'siwperList') {
|
/** 从轮播列表中删除单人 */
|
this.siwperList = this.siwperList.filter((item) => {
|
return item.id !== delData.id
|
})
|
}
|
},
|
/** 右侧相似和轮播中的上传按钮 */
|
uploadPer(data) {
|
let {
|
upOne,
|
type
|
} = data
|
console.log(upOne, 'upOne', type)
|
if (type === 'similarList') {
|
this.alreadyCheckList.push(upOne)
|
/** 从相似列表中删除单人 */
|
this.similarList = this.similarList.filter((item) => {
|
return item.id !== upOne.id
|
})
|
}
|
if (type === 'siwperList') {
|
this.similarList.push(upOne)
|
/** 从轮播列表中删除单人 */
|
this.siwperList = this.siwperList.filter((item) => {
|
return item.id !== upOne.id
|
})
|
}
|
},
|
/** 查询该布控任务中已选的人员 */
|
async findAlreadyCheckedList() {
|
let json = {
|
isControl: '',
|
groupInformation: '',
|
taskId: this.ctrolObj.id,
|
orderBy: '',
|
sortType: '',
|
start: '',
|
length: ''
|
}
|
console.log(json, 'json findAlreadyCheckedList', this.ctrolObj, 'this.ctrolObj')
|
let res = await getCtrlUserAlreadyList({
|
taskId: this.ctrolObj.id
|
})
|
if (res && res.success) {
|
console.log(res, 'findAlreadyCheckedList')
|
this.alreadyCheckList = res.data.list.map(item => {
|
// userInfo 拼接用户信息
|
if (item.sex > -1) {
|
item.sexName = item.sex ? '男' : '女'
|
}
|
const arr = ['username', 'sexName', 'idCard', 'mobile']
|
let userInfo = ''
|
for (let [index, name] of arr.entries()) {
|
if (item[name]) {
|
userInfo += item[name] + `${index !== arr.length - 1 ? '/' : ''}`
|
}
|
}
|
item.createTime = this.$moment(item.createTime).format('YYYY/MM/DD HH:mm:ss')
|
item.updateTime = this.$moment(item.updateTime).format('YYYY/MM/DD HH:mm:ss')
|
item.userInfo = userInfo
|
item.dataType = 'alreadyCheckList'
|
return item
|
})
|
console.log(this.alreadyCheckList, 'this.alreadyCheckList')
|
this.alreadyCheckList.forEach(item => {
|
this.$set(item, 'checked', false)
|
})
|
}
|
},
|
/** 保存 */
|
async save() {
|
if (this.alreadyCheckList && this.alreadyCheckList.length !== 0) {
|
console.log(this.alreadyCheckList, 'this.alreadyCheckList')
|
let res = await saveTaskUser({
|
taskId: this.ctrolObj.id,
|
userList: this.alreadyCheckList
|
})
|
if (res && res.success) {
|
console.log(res, 'res saveTaskUser')
|
this.$toast({
|
type: 'success',
|
message: '保存成功！'
|
})
|
this.$router.push({
|
path: '/'
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '保存失败！'
|
})
|
}
|
}
|
}
|
},
|
created() {
|
if (this.$route.query.rowData) {
|
console.log(this.$route.query.rowData, 'this.$route.query.rowData')
|
this.ctrolObj = this.$route.query.rowData
|
if (Object.keys(this.ctrolObj).length !== 0) {
|
|
}
|
}
|
console.log(this.ctrolObj, 'this.ctrolObj created', this.$route.query.rowData.id, 'this.$route.query.rowData')
|
this.getTaskUserTree()
|
this.findUserFromPlat()
|
/** 查询待布控人员 */
|
this.findTaskPendingUsers({})
|
/** 查询已选人员 */
|
this.findAlreadyCheckedList()
|
},
|
watch: {},
|
components: {
|
elTabs: Tabs,
|
elTabPane: TabPane,
|
elForm: Form,
|
elFormItem: FormItem,
|
elInput: Input,
|
elSelect: Select,
|
elOption: Option,
|
elButton: Button,
|
perosnTree,
|
checkPerson,
|
selectFromCtrol,
|
uploadPerson
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.title-bar {
|
h5,
|
p {
|
line-height: 25px;
|
}
|
p {
|
padding: 0 10px;
|
}
|
}
|
.serverForm {
|
max-width: 600px;
|
margin: 0 auto;
|
}
|
.table-type-btns {
|
font-size: 14px;
|
padding: 10px 0px;
|
// font-weight: 900;
|
color: #868686;
|
transition: all 0.5s;
|
cursor: pointer;
|
&:after {
|
content: '';
|
display: block;
|
background: transparent;
|
width: 0%;
|
height: 1px;
|
transition: all 0.5s;
|
}
|
&.active {
|
color: #35bde7;
|
&:after {
|
background: #35bde7;
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
<style>
|
.el-tabs--border-card {
|
border: 1px solid #f8f8f8;
|
box-shadow: none;
|
}
|
.el-tabs--border-card > .el-tabs__content {
|
padding: 0;
|
}
|
.el-tabs__item {
|
padding: 0 20px;
|
height: 50px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
line-height: 50px;
|
display: inline-block;
|
list-style: none;
|
font-size: 16px;
|
font-weight: 500;
|
color: #303133;
|
position: relative;
|
}
|
|
.el-tabs--border-card
|
> .el-tabs__header
|
.el-tabs__item:not(.is-disabled):hover {
|
color: #35bde7;
|
}
|
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
color: #35bde7;
|
text-decoration: underline;
|
background-color: #fff;
|
border-right-color: #f8f8f8;
|
border-left-color: #f8f8f8;
|
}
|
.el-tabs--border-card > .el-tabs__header {
|
background-color: #f8f8f8;
|
border-bottom: 1px solid #f8f8f8;
|
margin: 0;
|
}
|
</style>
|
