From 0175cda6150656bc74b34c6f6c71edd1e1fc653c Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 04 二月 2021 18:22:54 +0800
Subject: [PATCH] treee, 修复tab切换时树的选中状态.添加区域
---
src/pages/shuohuangMonitorAnalyze/components/taskManage.vue | 329 +++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 271 insertions(+), 58 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
index 9374856..640cc00 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
@@ -31,46 +31,70 @@
<div></div>
<el-button
type="primary"
- @click="searchVideoList"
+ @click="renderVideoTable"
size="mini"
style="margin-right:10px;"
>鎼滅储</el-button>
- <el-checkbox v-model="isShowUndistributedOnly">浠呮樉绀烘湭鍒嗛厤</el-checkbox>
+ <!-- <el-checkbox v-model="isShowUndistributedOnly">浠呮樉绀烘湭鍒嗛厤</el-checkbox> -->
</div>
<div class="video-list">
- <el-collapse v-model="actCollapseName">
- <el-collapse-item :name="trainNo.id" v-for="trainNo in trainNoList" :key="trainNo.id">
- <template slot="title">
- <div>
- <el-checkbox v-model="trainNo.checked" style="padding-right:10px;"></el-checkbox>
- <span>{{trainNo.no}}({{trainNo.videos.length}})</span>
+ <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>
- </template>
- <div 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.name}}</span>
- </div>
- </el-collapse-item>
- </el-collapse>
+ </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="top-right partment" style="max-height: 500px; overflow-y:auto;">
<div class="header">
<div class="title">浜哄憳鍒楄〃</div>
</div>
<div class="body">
<div class="flex-box">
<label>閮ㄩ棬:</label>
- <el-select placeholder="鍏ㄩ儴" size="mini" style="width: 200px;margin-right: 10px;">
- <el-option></el-option>
- </el-select>
- <el-button type="primary" size="mini" @click="searchPerson">鎼滅储</el-button>
+ <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">
- <div class="person" v-for="person in personList" :key="person.id">
- <el-checkbox v-model="person.personChecked">{{person.name}}</el-checkbox>
- </div>
+ <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>
@@ -91,44 +115,79 @@
size="mini"
style="margin-left: 10px;"
>
- <el-button slot="append" icon="el-icon-search" @click="searchTask"></el-button>
+ <el-button slot="append" icon="el-icon-search" @click="renderTaskTable"></el-button>
</el-input>
</div>
</div>
- <div class="body table-area">
+ <div class="table-area">
<div class="actions">
- <el-button type="primary" size="small" @click="distributeTask">鍒嗛厤浠诲姟</el-button>
+ <el-button
+ type="primary"
+ size="small"
+ @click="distributeTask"
+ v-if="taskType==1&&taskVideoChecked.length"
+ >鍒嗛厤浠诲姟</el-button>
</div>
- <el-table class="thbg" :data="taskTableData" ref="elTable">
- <el-table-column type="expand">
- <template slot-scope="props">
- <div class="video-item" v-for="video in props.videos" :key="video.id">{{video.name}}</div>
- </template>
- </el-table-column>
- <el-table-column prop="trainNo" label="鏈鸿溅鍙�"></el-table-column>
+ <el-table
+ class="thbg"
+ :data="taskTableData"
+ ref="elTable"
+ @selection-change="taskTableSelection"
+ v-loading
+ >
+ <el-table-column v-if="taskType==1" 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.videos.length}}</div>
+ <div>{{scope.row.LKGList.length}}</div>
</template>
</el-table-column>
- <el-table-column prop="person" label="鍒嗛厤浜�"></el-table-column>
- <el-table-column prop="time" label="鍒嗛厤鏃堕棿"></el-table-column>
- <el-table-column prop="handle" label="澶勭悊浜�"></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)">鍙栨秷鍒嗛厤/鎸囨淳</span>
- <span @click="toggleCollapse(scope.row)">鏌ョ湅/闅愯棌杞︽</span>
+ <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 {
@@ -167,36 +226,175 @@
}]
},
isShowUndistributedOnly: false,
- trainNoList: [
- { no: 'SS4B115', id: 'SS4B115', videos: [{ id: 'SS4B115', name: 'SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091500.mp4' }, { id: 'SS4B116', name: 'SS4B116_06_B鑺備簩绔徃鏈哄_20201115_091500.mp4' }] },
- { no: 'SS5B115', id: 'SS5B115', videos: [{ id: 'SS5B116', name: 'SS5B116_06_B鑺備簩绔徃鏈哄_20201115_091500.mp4' }] }
- ],
+ trainNoList: [],
+ trainNochecked: [],
+ trainNoCurPage: 1,
+ trainNoPageSize: 8,
+ trainNoPageSizes: [5, 8, 12],
+ trainNoTotal: 0,
videoListSearchWord: '',
actCollapseName: '',
- username: '',
- personList: [
- { name: '寮犱笁', id: 'zs' },
- { name: '鏉庢柉', id: 'ls' }
- ],
+ 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();
+ })
},
- searchVideoList () {
+ selOrg () {
+ this.orgTreeDialogVisible = true;
},
- searchPerson () {
-
- },
- searchTask () {
-
- }
}
}
</script>
@@ -247,10 +445,26 @@
.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 {
@@ -272,7 +486,6 @@
.actions {
text-align: left;
}
-
}
}
}
--
Gitblit v1.8.0