<template>
|
<div class="tab-task-manage">
|
<div class="top">
|
<div class="top-left partment">
|
<div class="header">
|
<div class="title">视频列表</div>
|
</div>
|
<div class="body">
|
<div class="flex-box">
|
<div>
|
<el-date-picker
|
v-model="videoSearchTime"
|
type="datetimerange"
|
size="mini"
|
:picker-options="pickerOptions"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
align="right"
|
></el-date-picker>
|
</div>
|
<div>
|
<el-input
|
class="keyword-input"
|
v-model="videoListSearchWord"
|
placeholder="请输入机车号，多个用','分隔"
|
size="mini"
|
style="margin: 0 10px;"
|
></el-input>
|
</div>
|
<div></div>
|
<el-button
|
type="primary"
|
@click="renderVideoTable"
|
size="mini"
|
style="margin-right:10px;"
|
>搜索</el-button>
|
<!-- <el-checkbox v-model="isShowUndistributedOnly">仅显示未分配</el-checkbox> -->
|
</div>
|
<div class="video-list">
|
<el-checkbox-group v-model="trainNochecked">
|
<el-collapse v-model="actCollapseName">
|
<el-collapse-item
|
:name="trainNo.no"
|
v-for="trainNo in trainNoList"
|
:key="trainNo.id"
|
>
|
<template slot="title">
|
<div>
|
<el-checkbox
|
:label="trainNo.videos[0]['UniqeID']"
|
style="padding-right:10px;"
|
></el-checkbox>
|
<span>{{trainNo.no}}({{trainNo.videos.length}})</span>
|
</div>
|
</template>
|
<div class="video-detail" v-for="video in trainNo.videos" :key="video.ID">
|
<i class="el-icon-film" style="margin-left: 20px;"></i>
|
<span style="padding-left: 10px;">{{video.VideoName}}</span>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-checkbox-group>
|
<el-pagination
|
@size-change="handleTrainNoSizeChange"
|
@current-change="handleTrainNoCurChange"
|
:current-page.sync="trainNoCurPage"
|
:page-size="trainNoPageSize"
|
:page-sizes="trainNoPageSizes"
|
layout="total,sizes, prev, pager, next"
|
:total="trainNoTotal"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
<div class="top-right partment">
|
<div class="header">
|
<div class="title">人员列表</div>
|
</div>
|
<div class="body">
|
<div class="flex-box">
|
<label>部门:</label>
|
<span class="checked-org" :class="{'null':!checkedOrg.id}">{{checkedOrg.label||'全部'}}</span>
|
<el-button type="primary" size="mini" @click="selOrg">选择部门</el-button>
|
</div>
|
<div class="person-list">
|
<el-checkbox-group v-model="memberChecked" :max="1">
|
<div class="person" v-for="person in personList" :key="person.ID">
|
<el-checkbox :label="person.ID">{{person.Name}}</el-checkbox>
|
</div>
|
</el-checkbox-group>
|
<el-button
|
v-show="memberChecked.length && trainNochecked.length"
|
type="primary"
|
@click="toAddAssignList"
|
size="small"
|
>加入待分配列表</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="devide"></div>
|
<div class="bot">
|
<div class="header">
|
<div class="title">任务列表</div>
|
<div class="header-right flex-box">
|
<el-radio-group v-model="taskType" size="mini">
|
<el-radio-button label="1">待分配</el-radio-button>
|
<el-radio-button label="2">已分配</el-radio-button>
|
</el-radio-group>
|
<el-input
|
class="keyword-input"
|
placeholder="请输入"
|
v-model="keyWordOfTask"
|
size="mini"
|
style="margin-left: 10px;"
|
>
|
<el-button slot="append" icon="el-icon-search" @click="renderTaskTable"></el-button>
|
</el-input>
|
</div>
|
</div>
|
<div class="table-area">
|
<div class="actions">
|
<el-button
|
type="primary"
|
size="small"
|
@click="distributeTask"
|
v-if="taskVideoChecked.length"
|
>分配任务</el-button>
|
</div>
|
<el-table
|
class="thbg"
|
:data="taskTableData"
|
ref="elTable"
|
@selection-change="taskTableSelection"
|
>
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column prop="LocomotiveNumber" label="机车号"></el-table-column>
|
<el-table-column label="视频数量">
|
<template slot-scope="scope">
|
<div>{{scope.row.LKGList.length}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="DistributionUser" label="分配人"></el-table-column>
|
<el-table-column prop="DistributionDate" label="分配时间"></el-table-column>
|
<el-table-column prop="HandlingUsers" label="处理人"></el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<div class="operation">
|
<span @click="cancelDistribute(scope.row)" v-show="taskType==1">取消分配</span>
|
<span @click="cancelDistribute(scope.row)" v-show="taskType==2">取消指派</span>
|
<!-- <span @click="toggleCollapse(scope.row)">查看/隐藏车次</span> -->
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column type="expand">
|
<template slot-scope="scope">
|
<div
|
class="video-item"
|
v-for="video in scope.row.LKGList"
|
:key="video.ID"
|
>{{video.VideoName}}</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<el-dialog :visible="orgTreeDialogVisible">
|
<div>
|
<el-tree
|
:data="organizeData"
|
node-key="id"
|
default-expand-all
|
@node-click="checkOrgNode"
|
:expand-on-click-node="false"
|
:check-on-click-node="true"
|
:highlight-current="true"
|
></el-tree>
|
<div slot="footer" class="btns">
|
<el-button size="small" @click="orgTreeDialogVisible=false">取消</el-button>
|
<el-button size="small" type="primary" @click="searchMemberByOrg">确定</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getOrganizeTree, getMemberByOrg, getVideoListByTrainNumber, addToAssignList, getTaskList, distributeTask, cancelMission } from '@/api/shuohuang';
|
export default {
|
data () {
|
return {
|
taskType: '1',
|
keyWordOfTask: '',
|
videoSearchTime: [],
|
pickerOptions: {
|
shortcuts: [{
|
text: '今天',
|
onClick (picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setHours(0, 0, 0);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '昨天',
|
onClick (picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24);
|
start.setHours(0, 0, 0);
|
end.setTime(end.getTime() - 3600 * 1000 * 24);
|
end.setHours(23, 59, 59);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '近一周',
|
onClick (picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
//start.setHours(0,0,0);
|
picker.$emit('pick', [start, end]);
|
}
|
}]
|
},
|
isShowUndistributedOnly: false,
|
trainNoList: [],
|
trainNochecked: [],
|
trainNoCurPage: 1,
|
trainNoPageSize: 8,
|
trainNoPageSizes: [5, 8, 12],
|
trainNoTotal: 0,
|
videoListSearchWord: '',
|
actCollapseName: '',
|
checkedOrg: {},
|
orgTreeDialogVisible: false,
|
organizeData: [],
|
personList: [],
|
memberChecked: [],
|
taskTableData: [],
|
taskVideoChecked: [],
|
}
|
},
|
mounted () {
|
this.getOrganizeTreeData();
|
this.refreshAll();
|
},
|
watch: {
|
taskType (n, o) {
|
debugger
|
this.renderTaskTable();
|
}
|
},
|
methods: {
|
cancelDistribute (row) {
|
cancelMission({ UniqeID: row.LKGList[0].UniqeID }).then(res => {
|
if (res.success) {
|
this.$notify({
|
type: 'success',
|
message: res.msg
|
});
|
this.refreshAll();
|
}
|
})
|
},
|
refreshAll () {
|
this.trainNochecked = [];
|
this.checkedOrg = {};
|
this.memberChecked = [];
|
this.searchMemberByOrg();
|
this.renderVideoTable();
|
this.renderTaskTable();
|
},
|
taskTableSelection (val) {
|
this.taskVideoChecked = val
|
},
|
renderTaskTable () {
|
let _this = this;
|
let params = {
|
IsPackage: 0,
|
Status: this.taskType
|
};
|
getTaskList(params).then(res => {
|
_this.taskTableData = res.data
|
})
|
},
|
handleTrainNoSizeChange (size) {
|
this.trainNoPageSize = size;
|
this.renderVideoTable();
|
},
|
handleTrainNoCurChange () {
|
this.renderVideoTable();
|
},
|
renderVideoTable () {
|
let _this = this;
|
let params = {
|
KeyWord: this.videoListSearchWord,
|
StartDate: this.videoSearchTime[0],
|
EndDate: this.videoSearchTime[1],
|
PageIndex: this.trainNoCurPage,
|
PageSize: this.trainNoPageSize,
|
Status: 0,
|
IsNeed: 0
|
};
|
getVideoListByTrainNumber(params).then(res => {
|
let arr = [];
|
for (var key in res.data) {
|
let obj = {};
|
obj['no'] = key;
|
obj['videos'] = res.data[key];
|
obj.checked = false;
|
arr.push(obj);
|
}
|
_this.trainNoList = arr;
|
_this.trainNoTotal = res.total;
|
});
|
},
|
toAddAssignList () {
|
let _this = this;
|
let params = {
|
UserID: this.memberChecked[0],
|
UniqeID: this.trainNochecked.join(',')
|
};
|
addToAssignList(params).then(res => {
|
if (res.success) {
|
this.$notify({
|
type: 'success',
|
message: res.msg
|
});
|
_this.refreshAll();
|
}
|
})
|
},
|
searchMemberByOrg () {
|
let _this = this;
|
getMemberByOrg({ DeptID: this.checkedOrg.id || '' }).then(res => {
|
_this.personList = res.data;
|
_this.orgTreeDialogVisible = false;
|
})
|
},
|
deepNodeChildren (node) {
|
if (node.ChildDept && node.ChildDept.length > 0) {
|
return node.ChildDept.map(child => {
|
let childObj = {};
|
childObj.id = child.ID;
|
childObj.label = child.Name;
|
childObj.Status = child.Status;
|
if (child.ChildDept) {
|
childObj.children = this.deepNodeChildren(child)
|
}
|
if (child.UserLst) {
|
childObj.children = this.deepNodeChildren(child)
|
}
|
return childObj;
|
});
|
} else if (node.UserLst && node.UserLst.length > 0) {
|
return node.UserLst.map(child => {
|
let childObj = {};
|
childObj.id = child.ID;
|
childObj.label = child.Name;
|
childObj.Status = child.Status;
|
return childObj;
|
});
|
}
|
},
|
checkOrgNode (a, b, c) {
|
this.checkedOrg = a
|
},
|
getOrganizeTreeData () {
|
let _this = this;
|
getOrganizeTree().then(res => {
|
_this.organizeData = res.data.map(item => {
|
let obj = {};
|
obj.id = item.ID;
|
obj.label = item.Name;
|
obj.Status = item.Status;
|
obj.children = _this.deepNodeChildren(item);
|
return obj
|
})
|
})
|
},
|
distributeTask () {
|
let _this = this;
|
let arr = this.taskVideoChecked.map(train => train['LKGList'][0]['UniqeID'])
|
let params = {
|
UniqeID: arr.join(',')
|
}
|
distributeTask(params).then(res => {
|
_this.renderTaskTable();
|
})
|
},
|
|
selOrg () {
|
this.orgTreeDialogVisible = true;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.tab-task-manage {
|
.partment {
|
border: 1px solid #e8e8e8;
|
border-radius: 3px;
|
.header {
|
background: #fafafa;
|
border-bottom: 1px solid #e8e8e8;
|
}
|
}
|
.header {
|
height: 40px;
|
.title {
|
float: left;
|
padding-left: 20px;
|
height: 40px;
|
line-height: 40px;
|
font-size: 14px;
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
|
}
|
.header-right {
|
float: right;
|
}
|
}
|
.body {
|
padding: 14px 20px 20px;
|
}
|
.flex-box {
|
align-items: center;
|
& > label {
|
padding-right: 8px;
|
}
|
}
|
.keyword-input {
|
width: 260px;
|
}
|
.top {
|
display: flex;
|
padding: 20px;
|
margin-bottom: 10px;
|
.top-left {
|
flex: 1;
|
margin-right: 10px;
|
.video-list {
|
margin-top: 14px;
|
text-align: left;
|
.el-checkbox-group {
|
margin-bottom: 20px;
|
.video-detail {
|
i {
|
//color: #409EFF;
|
}
|
color: #888;
|
}
|
}
|
}
|
}
|
.top-right {
|
width: 360px;
|
.checked-org {
|
flex: 1;
|
text-align: left;
|
&.null {
|
color: #999;
|
}
|
}
|
.person-list {
|
padding-top: 14px;
|
.person {
|
text-align: left;
|
margin-bottom: 10px;
|
padding-bottom: 6px;
|
border-bottom: 1px solid #eee;
|
}
|
}
|
}
|
}
|
.devide {
|
height: 10px;
|
background: #f5f5f5;
|
}
|
.bot {
|
padding: 20px;
|
.table-area {
|
.actions {
|
text-align: left;
|
}
|
}
|
}
|
}
|
</style>
|
