<template>
|
<div class="tab-task-manage">
|
<div class="top">
|
<div class="top-left">
|
<div class="header">视频列表</div>
|
<div class="body">
|
<!-- <div class="flex-box">
|
<div>
|
<el-input
|
class="keyword-input"
|
v-model="keyword1"
|
placeholder="请输入机车号"
|
size="small"
|
style="margin: 0 10px"
|
clearable
|
></el-input>
|
</div>
|
<div>
|
<el-input
|
class="keyword-input"
|
v-model="keyword2"
|
placeholder="请输入车次"
|
size="small"
|
style="margin: 0 10px"
|
clearable
|
></el-input>
|
</div>
|
<div>
|
<el-input
|
class="keyword-input"
|
v-model="keyword3"
|
placeholder="请输入司机姓名"
|
size="small"
|
style="margin: 0 10px"
|
clearable
|
></el-input>
|
</div>
|
<el-button
|
type="primary"
|
@click="renderVideoTable"
|
size="small"
|
style="margin-right: 10px"
|
>搜索</el-button
|
>
|
<el-checkbox v-model="notAssignedOnly" @change="renderVideoTable"
|
>仅显示未分配</el-checkbox
|
>
|
</div> -->
|
<div class="video-list">
|
<el-checkbox-group v-model="trainNochecked">
|
<el-collapse v-model="actCollapseName">
|
<el-collapse-item
|
:name="vkey"
|
v-for="(v, vkey, i) in videoPackageList"
|
:key="i"
|
>
|
<!-- :style="i%2==1?{background:'#F4F6F9 !important'}:{}" -->
|
<template slot="title">
|
<div>
|
<el-checkbox
|
:label="vkey"
|
style="padding-right: 10px"
|
></el-checkbox>
|
<span>{{ vkey }}({{ v.length }})</span>
|
</div>
|
</template>
|
<div class="video-detail" v-for="video in v" :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>
|
</div>
|
</div>
|
</div>
|
<div class="top-right">
|
<div class="header">
|
<div class="title">
|
<el-checkbox
|
v-model="isAllCheck"
|
:indeterminate="isIndeterminate"
|
@change="handleCheckAllChange"
|
></el-checkbox>
|
<span class="text">人员列表</span>
|
</div>
|
<el-input
|
size="mini"
|
@input="searchName"
|
v-model="inputName"
|
placeholder="按人名搜索"
|
clearable
|
></el-input>
|
</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"
|
@change="handleCheckedCitiesChange"
|
>
|
<div class="person" v-for="person in personList" :key="person.ID">
|
<el-checkbox :label="person.ID">{{ person.Name }}</el-checkbox>
|
</div>
|
</el-checkbox-group>
|
</div>
|
<el-button type="primary" @click="toAddAssignList" size="small"
|
>加入待分配列表</el-button
|
>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="devide"></div> -->
|
<div class="bot-box">
|
<div class="header">
|
<div class="title">任务列表</div>
|
<div class="header-right flex-box">
|
<el-radio-group
|
v-model="taskType"
|
size="mini"
|
@change="renderTaskTable"
|
>
|
<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"
|
@input="reRenderWhenClear"
|
clearable
|
>
|
<el-button
|
slot="append"
|
icon="el-icon-search"
|
@click="searchKeyword"
|
></el-button>
|
</el-input>
|
</div>
|
</div>
|
<div class="table-area">
|
<el-table
|
class="thbg"
|
:data="taskTableData"
|
v-if="taskTableData"
|
ref="elTable"
|
@selection-change="taskTableSelection"
|
v-loading
|
:header-cell-style="{ background: '#7786BC', color: '#fff' }"
|
>
|
<el-table-column
|
v-if="taskType == 1"
|
type="selection"
|
width="55"
|
></el-table-column>
|
<el-table-column prop="Title" label="机车号"></el-table-column>
|
<el-table-column label="视频数量">
|
<template slot-scope="scope">
|
<div>{{ scope.row.VideoList.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"
|
style="color: #eb3131"
|
>取消分配</span
|
>
|
<span
|
@click="cancelAssign(scope.row)"
|
v-show="taskType == 2"
|
style="color: #eb3131"
|
>取消指派</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.VideoList"
|
:key="video.ID"
|
>
|
{{ video.VideoName }}
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="actions">
|
<el-button
|
type="primary"
|
size="small"
|
@click="distributeTask"
|
v-if="taskType == 1"
|
>分配任务</el-button
|
>
|
</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,
|
getVideoListBySearch,
|
addToAssignList,
|
getTaskList,
|
distributeTask,
|
cancelMission,
|
cancelAssign,
|
} from "@/api/shuohuang";
|
export default {
|
data() {
|
return {
|
isAllCheck: false,
|
taskType: "1",
|
keyWordOfTask: "",
|
isShowUndistributedOnly: false,
|
videoPackageList: {},
|
trainNochecked: [],
|
trainNoTotal: 0,
|
keyword1: "",
|
keyword2: "",
|
keyword3: "",
|
actCollapseName: "",
|
personList: [],
|
memberChecked: [],
|
taskTableData: [],
|
taskVideoChecked: [],
|
notAssignedOnly: false,
|
isIndeterminate: false,
|
inputName: "",
|
};
|
},
|
mounted() {
|
// this.getOrganizeTreeData();
|
this.refreshAll();
|
},
|
methods: {
|
reRenderWhenClear(val) {
|
if (val.trim() == "") {
|
this.renderTaskTable();
|
}
|
},
|
searchName(val) {
|
if (val == "") {
|
this.searchMemberByOrg();
|
}
|
if (val.trim() == "") {
|
return;
|
}
|
this.personList = this.personList.filter((item) => {
|
return item.Name.indexOf(val) > -1;
|
});
|
},
|
handleCheckAllChange(val) {
|
let arr = [];
|
this.personList.forEach((item) => {
|
arr.push(item.ID);
|
});
|
this.memberChecked = val ? arr : [];
|
this.isIndeterminate = false;
|
},
|
handleCheckedCitiesChange(value) {
|
let checkedCount = value.length;
|
this.isAllCheck = checkedCount === this.personList.length;
|
this.isIndeterminate =
|
checkedCount > 0 && checkedCount < this.personList.length;
|
},
|
cancelDistribute(row) {
|
let arr = row.VideoList.map((x) => x.ID);
|
cancelMission({ VideoIDs: arr }).then((res) => {
|
if (res.success) {
|
this.$notify({
|
type: "success",
|
message: res.msg,
|
});
|
this.refreshAll();
|
}
|
});
|
},
|
cancelAssign(row) {
|
let arr = row.VideoList.map((x) => x.ID);
|
cancelAssign({ VideoIDs: arr }).then((res) => {
|
if (res.success) {
|
this.$notify({
|
type: "success",
|
message: res.msg,
|
});
|
this.refreshAll();
|
}
|
});
|
},
|
searchKeyword() {
|
const val = this.keyWordOfTask;
|
this.taskTableData = this.taskTableData.filter((item) => {
|
const b1 = item.DistributionUser.indexOf(val) > -1;
|
const b2 = item.HandlingUsers.indexOf(val) > -1;
|
const b3 = item.Title.indexOf(val) > -1;
|
return b1 || b2 || b3;
|
});
|
},
|
refreshAll() {
|
this.trainNochecked = [];
|
this.checkedOrg = {};
|
this.memberChecked = [];
|
this.searchMemberByOrg();
|
this.renderVideoTable();
|
this.renderTaskTable();
|
},
|
taskTableSelection(val) {
|
let arr = val.map((item) => item.VideoList.map((x) => x.ID));
|
this.taskVideoChecked = arr;
|
},
|
renderTaskTable() {
|
let _this = this;
|
getTaskList({
|
Status: this.taskType,
|
}).then((res) => {
|
_this.taskTableData = res.data;
|
});
|
},
|
renderVideoTable() {
|
let _this = this;
|
getVideoListBySearch({
|
CarNumber: this.keyword1,
|
TrainNumber: this.keyword2,
|
DriverName: this.keyword3,
|
notAssignedOnly: this.notAssignedOnly,
|
}).then((res) => {
|
_this.videoPackageList = res.data;
|
_this.trainNoTotal = res.total;
|
});
|
},
|
toAddAssignList() {
|
if (this.memberChecked.length == 0 || this.trainNochecked.length == 0) {
|
this.$message.warning("请先选择视频和处理人");
|
return;
|
}
|
let _this = this;
|
let total = this.trainNochecked.length;
|
let people = this.memberChecked.length;
|
let least = (total / people) | 0;
|
let left = total % people;
|
|
let checkedTrain = [...this.trainNochecked];
|
let pickList = [];
|
for (let i = 0; i < people; i++) {
|
pickList[i] = [];
|
if (i < left) {
|
for (let j = 0; j < least + 1; j++) {
|
pickList[i].push(...this.videoPackageList[checkedTrain[0]]);
|
checkedTrain.shift();
|
}
|
} else {
|
for (let j = 0; j < least; j++) {
|
pickList[i].push(...this.videoPackageList[checkedTrain[0]]);
|
checkedTrain.shift();
|
}
|
}
|
}
|
let arr = pickList.map((a) => {
|
return a.map((item) => item.ID);
|
});
|
addToAssignList({
|
HandlerUserID: this.memberChecked,
|
VideoIDs: arr,
|
}).then((res) => {
|
if (res.success) {
|
this.$notify({
|
type: "success",
|
message: res.msg,
|
});
|
_this.refreshAll();
|
}
|
});
|
},
|
searchMemberByOrg() {
|
let _this = this;
|
getMemberByOrg({}).then((res) => {
|
_this.personList = res.data;
|
// _this.orgTreeDialogVisible = false;
|
});
|
},
|
distributeTask() {
|
let _this = this;
|
distributeTask({
|
VideoIDs: this.taskVideoChecked,
|
distributerID: "",
|
}).then((res) => {
|
_this.renderTaskTable();
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.tab-task-manage {
|
// padding: 0 30px;
|
.el-collapse-item__content {
|
padding: 10px 32px;
|
}
|
button span {
|
color: #fff;
|
}
|
button i {
|
color: #fff;
|
}
|
.partment {
|
border: 1px solid #e8e8e8;
|
border-radius: 3px;
|
.header {
|
background: #fafafa;
|
border-bottom: 1px solid #e8e8e8;
|
}
|
}
|
.header {
|
.header-right {
|
float: right;
|
}
|
}
|
|
.flex-box {
|
align-items: center;
|
& > label {
|
padding-right: 8px;
|
}
|
}
|
.keyword-input {
|
width: 260px;
|
}
|
.top {
|
display: flex;
|
margin-bottom: 20px;
|
.top-left {
|
background: #ffffff;
|
box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
|
border-radius: 10px;
|
margin-right: 20px;
|
min-width: 946px;
|
.header {
|
background-color: #7786bc;
|
border-top-right-radius: inherit;
|
height: 50px;
|
border-top-left-radius: inherit;
|
padding-left: 25px;
|
line-height: 50px;
|
font-size: 14px;
|
color: #ffffff;
|
font-family: Microsoft YaHei;
|
text-align: left;
|
}
|
.video-list {
|
text-align: left;
|
height: 452px;
|
|
overflow: auto;
|
.el-collapse:nth-child(odd) {
|
background: #f4f6f9;
|
}
|
.el-collapse-item__header {
|
display: flex;
|
align-items: center;
|
height: 40px;
|
line-height: 40px;
|
|
color: #425277;
|
cursor: pointer;
|
border-bottom: 1px solid #e6ebf5;
|
font-size: 13px;
|
font-weight: 500;
|
transition: border-bottom-color 0.3s;
|
outline: none;
|
padding-left: 28px;
|
}
|
//
|
.el-checkbox-group {
|
margin-bottom: 20px;
|
.el-checkbox__label {
|
display: none;
|
}
|
.video-detail {
|
i {
|
//color: #409EFF;
|
}
|
color: #888;
|
}
|
}
|
}
|
.video-list::-webkit-scrollbar {
|
width: 8px;
|
}
|
.video-list::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
// box-shadow: 0px 3px 6px rgba(23, 37, 233, 0.43);
|
background-color: #eaecf8;
|
}
|
.video-list::-webkit-scrollbar-track {
|
background-color: #cad5e6;
|
}
|
}
|
.top-right {
|
width: 100%;
|
background: #ffffff;
|
box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
|
border-radius: 10px;
|
|
.header {
|
height: 50px;
|
background: #7786bc;
|
border-radius: 10px 10px 0px 0px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 25px;
|
.title {
|
color: #fff;
|
.text {
|
margin-left: 10px;
|
font-size: 14px;
|
}
|
}
|
.el-input {
|
line-height: 40px;
|
width: 185px;
|
font-size: 14px;
|
}
|
.el-checkbox {
|
height: 40px;
|
line-height: 40px;
|
font-size: 14px;
|
}
|
}
|
.el-button {
|
padding: 9px 22px;
|
font-size: 13px;
|
border-radius: 3px;
|
}
|
.checked-org {
|
flex: 1;
|
text-align: left;
|
&.null {
|
color: #999;
|
}
|
}
|
.person-list {
|
height: 370px;
|
.el-checkbox-group {
|
margin-bottom: 8px;
|
overflow: auto;
|
}
|
.person {
|
text-align: left;
|
height: 40px;
|
border-bottom: 1px solid #eee;
|
display: flex;
|
align-items: center;
|
padding: 0 25px;
|
// color: #425277;
|
.el-checkbox__label {
|
color: #425277;
|
}
|
}
|
}
|
}
|
}
|
.devide {
|
height: 10px;
|
background: #f5f5f5;
|
}
|
.bot-box {
|
background: #ffffff;
|
box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
|
opacity: 1;
|
border-radius: 10px;
|
box-sizing: border-box;
|
padding-bottom: 30px;
|
|
.header {
|
display: flex;
|
height: 60px;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 25px;
|
.title {
|
color: #757fa2;
|
font-size: 14px;
|
}
|
.el-input-group__append,
|
.el-input-group__prepend {
|
background-color: #2d52d7;
|
color: #fff;
|
vertical-align: middle;
|
display: table-cell;
|
position: relative;
|
border: 1px solid #2d52d7;
|
border-radius: 4px;
|
padding: 0 10px;
|
width: 1px;
|
white-space: nowrap;
|
font-size: 17px;
|
}
|
}
|
.table-area {
|
display: flex;
|
margin: 0 auto;
|
padding: 0 25px;
|
box-sizing: border-box;
|
.el-table.thbg {
|
border-radius: 10px 10px 0 0;
|
}
|
.thbg {
|
th {
|
height: 40px;
|
line-height: 40px;
|
}
|
.el-table__header th {
|
padding: 0;
|
height: 50px;
|
}
|
.el-table__expanded-cell {
|
padding-left: 65px;
|
}
|
th.el-table__cell > .cell {
|
color: #fff;
|
}
|
}
|
}
|
.actions {
|
.el-button--small {
|
padding: 9px 38px;
|
font-size: 13px;
|
border-radius: 3px;
|
margin-top: 20px;
|
}
|
}
|
}
|
}
|
</style>
|
