<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">模版设置 /</span> -->
|
布控人员
|
</h4>
|
<div class="row">
|
<div class="col-lg-2 col-md-3 pb-2">
|
<!-- 集群按钮 非集群按钮 start -->
|
<div class="d-flex">
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'already'?'active':'']"
|
@click="tableType='already';handleSearch()"
|
>已布控</div>
|
<div class="flex-vertical-center px-3">
|
<span class="text-light">|</span>
|
</div>
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'todo'?'active':'']"
|
@click="tableType='todo';handleSearch()"
|
>待布控</div>
|
</div>
|
<!-- 集群按钮 非集群按钮 end -->
|
</div>
|
<!-- 检索框-->
|
<div class="col-lg-6 col-md-5 row pb-2">
|
<div class="col-2 text-right">
|
<div
|
class="table-switch-btn active"
|
:class="tabType==='list'?'active':''"
|
@click="tabType='list';handleSearch()"
|
v-show="tabType==='table'"
|
title="点击切换列表与视图模式"
|
>
|
<i class="fas fa-th-large"></i>
|
</div>
|
<div
|
class="table-switch-btn active"
|
:class="tabType==='table'?'active':''"
|
@click="tabType='table';handleSearch()"
|
v-show="tabType==='list'"
|
title="点击切换列表与视图模式"
|
>
|
<i class="fas fa-list-ul"></i>
|
</div>
|
</div>
|
<div class="col">
|
<el-input
|
placeholder="布控任务/布控范围"
|
autocomplete="off"
|
width="100%"
|
v-model="searchName"
|
@keyup.enter.native="handleSearch"
|
/>
|
</div>
|
<div class="col-4 clearfix">
|
<div class="float-left">
|
<b-btn variant="primary" class="mr10" @click="handleSearch">搜索</b-btn>
|
</div>
|
<h5 class="float-left mb-0 mt-3">人员数量：{{total}}</h5>
|
</div>
|
</div>
|
<div class="col text-right pb-2">
|
<fButton
|
v-if="tableType==='already'"
|
type="primary"
|
@click.native="handleStopCtrlBatch"
|
authority="ctrl:person:stop"
|
class="pl30 pr30"
|
>停止布控</fButton>
|
<fButton
|
v-else
|
type="primary"
|
@click.native="handleUpLoad"
|
authority="ctrl:person:upLoad"
|
class="pl30 pr30"
|
>导入图片</fButton>
|
<fButton
|
type="secondary"
|
@click.native="handleDelPersonBatch"
|
authority="ctrl:person:del"
|
class="pl30 pr30"
|
>删除此人</fButton>
|
</div>
|
</div>
|
</div>
|
<!-- 布控表格 start -->
|
<div class="px-4" v-if="tabType==='table'">
|
<!-- 已布控 -->
|
<div v-if="tableType === 'already'" class="row">
|
<div :class="isShowSidebar?'col-3':'showSidebarBtn'">
|
<left-list
|
@check-item="checkLeftList"
|
v-show="isShowSidebar"
|
@toggleSidebar="isShowSidebar=!isShowSidebar"
|
/>
|
<!-- toggleSidebar 按钮 -->
|
<span
|
class="fa fa-chevron-right f30 cursor-pointer"
|
@click="isShowSidebar=!isShowSidebar"
|
v-show="!isShowSidebar"
|
></span>
|
</div>
|
<div :class="isShowSidebar?'col-9':'hideSidebar'">
|
<table-already
|
:selectOpts="stateList"
|
:selectVal="state"
|
:tableList="newTableList"
|
:total="total"
|
:activePage="activePage"
|
:pageSize="pageSize"
|
:multipleSelection="checkListIds"
|
@sortChange="handleSortChange"
|
@selectChange="handleSelectionChange"
|
@handleTableCheck="handleTableCheck"
|
@add="handleAddCtrl"
|
@stop="handleStopCtrl"
|
@del="handleDelPerson"
|
@edit="handleEditCtrl"
|
/>
|
</div>
|
</div>
|
<!-- 待布控 -->
|
<table-todo
|
v-if="tableType === 'todo'"
|
:tableList="newTableList"
|
:total="total"
|
:activePage="activePage"
|
:pageSize="pageSize"
|
:multipleSelection="checkListIds"
|
@sortChange="handleSortChange"
|
@handleTableCheck="handleTableCheck"
|
@add="handleAddCtrl"
|
@del="handleDelPerson"
|
@edit="handleEditCtrl"
|
/>
|
</div>
|
<!-- 布控表格 end -->
|
<!-- 布控列表 start -->
|
<list
|
v-else
|
:selectOpts="stateList"
|
:tableType="tableType"
|
:tableList="newTableList"
|
:total="total"
|
:activePage="activePage"
|
:pageSize="pageSize"
|
:multipleSelection="checkListIds"
|
@sortChange="handleSortChange"
|
@selectChange="handleSelectionChange"
|
@handleTableCheck="handleTableCheck"
|
@add="handleAddCtrl"
|
@stop="handleStopCtrl"
|
@del="handleDelPerson"
|
@edit="handleEditCtrl"
|
/>
|
<!-- 布控列表 end -->
|
</b-card>
|
<!-- 布控人员树 -->
|
<add-ctrl-model
|
title="加入布控"
|
:treeData="treeData"
|
ref="addCtrlModel"
|
:item="currentItem"
|
@submit="saveAddCtrl"
|
:isShowFooter="false"
|
/>
|
<!-- 人员编辑 -->
|
<edit-person-model title="编辑人员" ref="editPersonModel" @submit="saveEditPerson"/>
|
<upLoad-model title="导入图片" ref="upLoadModel" @submit="saveUpLoad"/>
|
</div>
|
</template>
|
<script>
|
import {
|
DatePicker,
|
Select,
|
Option,
|
Row,
|
Col,
|
Button,
|
Input,
|
Checkbox
|
} from 'element-ui'
|
import tableAlready from './components/tableAlready'
|
import tableTodo from './components/tableTodo'
|
import leftList from './components/leftList'
|
import addCtrlModel from './components/addCtrlModel'
|
import editPersonModel from './components/editPersonModel'
|
import upLoadModel from './components/upLoadModel'
|
import list from './components/list'
|
import {
|
/* 已布控 */
|
getCtrlUserAlreadyList,
|
stopCtrlAlready,
|
delCtrlUserAlready,
|
addCtrlAlready,
|
/* 待布控 */
|
findTaskPendingUsers as getCtrlUserTodoList,
|
saveCtrlUserPhotos,
|
addCtrlTodo,
|
delCtrlUserTodo
|
} from '@/server/ctrl.js'
|
export default {
|
name: 'CtrlTask',
|
metaInfo: {
|
title: '布控人员'
|
},
|
data() {
|
return {
|
isShowSidebar: true,
|
/* 条件 */
|
searchName: '',
|
tabType: 'table', // table , list
|
tableType: 'already', // already 已处理 todo 待处理
|
/* 表格数据 */
|
taskId: '',
|
orderBy: '', // 根据字段排序 创建时间createTime ,布控任务taskName,操作人createBy
|
sortType: '', // 排序规则（可选：正序asc，倒序desc，传orderBy的话必传此字段）
|
tableList: [],
|
total: 0,
|
pageSize: 10,
|
activePage: 1,
|
checkIds: [],
|
checkListIds: [],
|
state: '',
|
stateList: [
|
{
|
name: '布控状态',
|
value: ''
|
},
|
{
|
name: '未布控',
|
value: '0'
|
},
|
{
|
name: '布控中',
|
value: '1'
|
}
|
],
|
/* 添加布控树 */
|
treeData: [],
|
currentItem: null,
|
addTaskIds: []
|
}
|
},
|
computed: {
|
newTableList() {
|
return this.tableList
|
}
|
},
|
methods: {
|
/* 接口声明 start */
|
/* 已布控 */
|
async getCtrlUserAlreadyList() {
|
const res = await getCtrlUserAlreadyList({
|
isControl: this.state, // 布控状态（0为未布控，1为已布控）
|
taskId: this.taskId, // 布控任务id ''
|
orderBy: this.orderBy, // 根据字段排序 创建时间createTime ,布控任务taskName,操作人createBy
|
sortType: this.sortType, // 排序规则（可选：正序asc，倒序desc，传orderBy的话必传此字段）
|
groupInformation: this.searchName, // 检索关键字
|
start: this.pageSize * (this.activePage - 1),
|
length: this.pageSize
|
})
|
if (res && res.success && res.data) {
|
this.tableList = res.data.list ? res.data.list : []
|
this.total = res.data.total ? res.data.total : 0
|
} else {
|
this.$toast({ type: 'error', message: '已布控，查询失败' })
|
this.tableList = []
|
this.total = 0
|
}
|
},
|
async stopCtrlAlready() {
|
const res = await stopCtrlAlready({
|
ids: this.checkIds
|
})
|
return res
|
},
|
async delCtrlUserAlready() {
|
const list = this.checkIds.map(item => ({ id: item }))
|
const res = await delCtrlUserAlready(list)
|
return res
|
},
|
async addCtrlAlready(json) {
|
const res = await addCtrlAlready(json)
|
return res
|
},
|
|
/* 待布控 */
|
async getCtrlUserTodoList() {
|
const res = await getCtrlUserTodoList({
|
orderBy: this.orderBy, // 根据字段排序 创建时间createTime ,所属底库dbInfos,操作人createBy
|
sortType: this.sortType, // 排序规则（可选：正序asc，倒序desc，传orderBy的话必传此字段）
|
name: this.searchName, // 检索关键字
|
start: this.pageSize * (this.activePage - 1),
|
length: this.pageSize
|
})
|
if (res && res.success && res.data) {
|
let list = res.data.data ? res.data.data : []
|
list.map(item => {
|
item.dbInfo = JSON.parse(item.dbInfos)
|
// this.$set(item, 'dbInfo', JSON.parse(item.dbInfos))
|
return item
|
})
|
this.tableList = list
|
this.total = res.data.total ? res.data.total : 0
|
} else {
|
this.$toast({ type: 'error', message: '待布控，查询失败' })
|
this.tableList = []
|
this.total = 0
|
}
|
},
|
async addCtrlTodo(json) {
|
const res = await addCtrlTodo(json)
|
return res
|
},
|
async delCtrlUserTodo() {
|
const res = await delCtrlUserTodo([...this.checkIds])
|
return res
|
},
|
/* 接口声明 end */
|
/* 左侧菜单 */
|
checkLeftList(data) {
|
this.taskId = data
|
this.handleSearch()
|
},
|
/* 检索事件 */
|
handleSearch() {
|
if (this.tableType === 'already') {
|
this.getCtrlUserAlreadyList()
|
} else {
|
this.getCtrlUserTodoList()
|
}
|
},
|
/* 业务事件处理 */
|
// 排序
|
handleSortChange({ prop = '', order }) {
|
this.orderBy = prop
|
this.sortType = order === 'ascending' ? 'asc' : 'desc'
|
this.handleSearch()
|
},
|
// 布控select 选择
|
handleSelectionChange(val) {
|
this.state = val
|
this.handleSearch()
|
},
|
// 加入布控
|
handleAddCtrl(data) {
|
this.$refs.addCtrlModel.showModel(data)
|
},
|
// 表格 check 事件
|
handleTableCheck(ids) {
|
this.checkListIds = [...ids]
|
},
|
// 停止布控
|
handleStopCtrl({ id }) {
|
this.checkIds = [id]
|
this.stopCtrl(false)
|
},
|
// 批量停止布控
|
handleStopCtrlBatch() {
|
this.checkIds = [...this.checkListIds]
|
this.stopCtrl(true)
|
},
|
stopCtrl(isBatch) {
|
this.$swal(
|
{
|
title: '确定停止布控吗？',
|
text: isBatch
|
? '您所勾选的人员将会停止布控！'
|
: '当前人员将会停止布控！',
|
type: 'warning',
|
showCancelButton: true,
|
confirmButtonColor: '#DD6B55',
|
cancelButtonText: '取消',
|
confirmButtonText: '确定停止！',
|
closeOnConfirm: false
|
},
|
async data => {
|
if (!data) {
|
return false
|
}
|
const res = await this.stopCtrlAlready()
|
if (res && res.success) {
|
this.$swal(
|
'停止布控！',
|
res.msg ? res.msg : '停止布控成功',
|
'success'
|
)
|
// 成功后刷新
|
this.handleSearch()
|
} else {
|
this.$swal(
|
'停止布控！',
|
res.msg ? res.msg : '停止布控失败',
|
'error'
|
)
|
}
|
}
|
)
|
},
|
// 删除此人
|
handleDelPerson({ id }) {
|
this.checkIds = [id]
|
this.delPerson(false)
|
},
|
// 删除此人
|
handleDelPersonBatch() {
|
this.checkIds = [...this.checkListIds]
|
this.delPerson(true)
|
},
|
delPerson(isBatch) {
|
this.$swal(
|
{
|
title: '确定删除布控吗？',
|
text: isBatch
|
? '您所勾选的人员将会删除布控！'
|
: '当前人员将会删除布控！',
|
type: 'warning',
|
showCancelButton: true,
|
confirmButtonColor: '#DD6B55',
|
cancelButtonText: '取消',
|
confirmButtonText: '确定删除！',
|
closeOnConfirm: false
|
},
|
async data => {
|
if (!data) {
|
return false
|
}
|
let res = null
|
if (this.tableType === 'already') {
|
res = await this.delCtrlUserAlready()
|
} else {
|
res = await this.delCtrlUserTodo()
|
}
|
|
if (res && res.success) {
|
this.$swal(
|
'删除布控！',
|
res.msg ? res.msg : '删除布控成功',
|
'success'
|
)
|
// 成功后刷新
|
this.handleSearch()
|
} else {
|
this.$swal(
|
'删除布控！',
|
res.msg ? res.msg : '删除布控失败',
|
'error'
|
)
|
}
|
}
|
)
|
},
|
// 编辑信息
|
handleEditCtrl(data) {
|
this.$refs.editPersonModel.showModel(data)
|
},
|
// 导入图片
|
handleUpLoad() {
|
this.$refs.upLoadModel.showModel()
|
},
|
|
/* 添加布控弹窗 */
|
async saveAddCtrl({ platDbListIds, cluDbListIds, data = {} }) {
|
console.log(platDbListIds, cluDbListIds, 'platDbListIds,cluDbListIds')
|
let res = null
|
if (this.tableType === 'already') {
|
res = await this.addCtrlAlready({
|
...data,
|
taskIds: [...platDbListIds, ...cluDbListIds]
|
})
|
} else {
|
res = await this.addCtrlTodo({
|
...data,
|
taskIds: [...platDbListIds, ...cluDbListIds]
|
})
|
}
|
|
this.$toast({
|
type: res.success ? 'success' : 'error',
|
message: res.msg ? res.msg : ''
|
})
|
if (res && res.success) {
|
this.$refs.addCtrlModel.hideModel()
|
}
|
},
|
// 编辑人员保存后 成功回调函数
|
saveEditPerson() {
|
this.handleSearch()
|
},
|
async saveUpLoad({ checkList, checkListkeys }) {
|
const res = await saveCtrlUserPhotos(checkList)
|
if (res && res.success) {
|
this.$refs.upLoadModel.hideModel()
|
// 成功后刷新
|
this.handleSearch()
|
}
|
this.$toast({
|
type: res.success ? 'success' : 'error',
|
message: res.msg ? res.msg : ''
|
})
|
}
|
},
|
created() {
|
this.handleSearch()
|
},
|
watch: {
|
activePage(newVal, oldVal) {
|
if (newVal !== oldVal) {
|
this.handleSearch()
|
}
|
}
|
},
|
components: {
|
elCheckbox: Checkbox,
|
elSelect: Select,
|
elOption: Option,
|
elInput: Input,
|
elRow: Row,
|
elCol: Col,
|
elDatePicker: DatePicker,
|
elButton: Button,
|
tableAlready,
|
tableTodo,
|
leftList,
|
addCtrlModel,
|
editPersonModel,
|
upLoadModel,
|
list
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.table-type-btns {
|
font-size: 18px;
|
padding: 10px 0px;
|
// font-weight: 900;
|
color: #868686;
|
transition: all 0.5s;
|
cursor: pointer;
|
&:after {
|
content: '';
|
display: block;
|
background: transparent;
|
width: 0%;
|
height: 2px;
|
transition: all 0.5s;
|
}
|
&.active {
|
color: #35bde7;
|
&:after {
|
background: #35bde7;
|
width: 100%;
|
}
|
}
|
}
|
.table-switch-btn {
|
height: 40px;
|
line-height: 30px;
|
font-size: 30px;
|
padding: 5px 8px;
|
color: #ccc;
|
cursor: pointer;
|
&.active {
|
color: #35bde7;
|
}
|
&.active:hover {
|
color: #409eff;
|
}
|
}
|
.showSidebarBtn {
|
width: 35px;
|
padding: 0 10px;
|
}
|
.hideSidebar {
|
width: calc(100% - 55px);
|
}
|
</style>
|
