From c141197a5687dda0256cb8939f73aada040c9ba9 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 24 三月 2021 19:23:53 +0800
Subject: [PATCH] 育英项目以图搜图修改

---
 src/pages/shuohuangMonitorAnalyze/components/taskManage.vue |  346 ++++++++++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 280 insertions(+), 66 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
index c519390..df42df8 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
@@ -7,7 +7,7 @@
         </div>
         <div class="body">
           <div class="flex-box">
-            <div>
+            <!-- <div>
               <el-date-picker
                 v-model="videoSearchTime"
                 type="datetimerange"
@@ -18,57 +18,106 @@
                 end-placeholder="缁撴潫鏃ユ湡"
                 align="right"
               ></el-date-picker>
+            </div> -->
+            <div>
+              <el-input
+                class="keyword-input"
+                v-model="keyword1"
+                placeholder="璇疯緭鍏ユ満杞﹀彿"
+                size="small"
+                style="margin: 0 10px;"
+                clearable="true"
+              ></el-input>
             </div>
             <div>
               <el-input
                 class="keyword-input"
-                v-model="videoListSearchWord"
-                placeholder="璇疯緭鍏ユ満杞﹀彿锛屽涓敤','鍒嗛殧"
-                size="mini"
+                v-model="keyword2"
+                placeholder="璇疯緭鍏ヨ溅娆�"
+                size="small"
                 style="margin: 0 10px;"
+                clearable="true"
               ></el-input>
             </div>
-            <div></div>
+            <div>
+              <el-input
+                class="keyword-input"
+                v-model="keyword3"
+                placeholder="璇疯緭鍏ュ徃鏈哄鍚�"
+                size="small"
+                style="margin: 0 10px;"
+                clearable="true"
+              ></el-input>
+            </div>
             <el-button
               type="primary"
-              @click="searchVideoList"
-              size="mini"
+              @click="renderVideoTable"
+              size="small"
               style="margin-right:10px;"
             >鎼滅储</el-button>
-            <el-checkbox v-model="isShowUndistributedOnly">浠呮樉绀烘湭鍒嗛厤</el-checkbox>
+            <!-- <el-checkbox v-model="isShowUndistributedOnly">浠呮樉绀烘湭鍒嗛厤</el-checkbox> -->
+            <el-checkbox v-model="notAssignedOnly">浠呮樉绀烘湭鍒嗛厤</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="vkey"
+                  v-for="(v,vkey,i) in videoPackageList"
+                  :key="i"
+                >
+                  <template slot="title">
+                    <div>
+                      <el-checkbox
+                        :label="i"
+                        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>
-                </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="header">
+         <el-checkbox v-model="isAllCheck" :indeterminate="isIndeterminate"  @change="handleCheckAllChange"></el-checkbox>
           <div class="title">浜哄憳鍒楄〃</div>
+          <el-input size="small" @input="searchName" v-model="inputName" placeholder="璇疯緭鍏ュ唴瀹�" clearable="true"></el-input>
         </div>
         <div class="body">
-          <div class="flex-box">
+          <!-- <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> -->
           <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" @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>
+            <el-button
+              v-show="memberChecked.length && trainNochecked.length"
+              type="primary"
+              @click="toAddAssignList"
+              size="small"
+            >鍔犲叆寰呭垎閰嶅垪琛�</el-button>
           </div>
         </div>
       </div>
@@ -89,35 +138,52 @@
             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>
@@ -144,13 +210,14 @@
 </template>
 
 <script>
-import { getOrganizeTree } from '@/api/shuohuang';
+import { getOrganizeTree, getMemberByOrg, getVideoListBySearch, addToAssignList, getTaskList, distributeTask, cancelMission } from '@/api/shuohuang';
 export default {
   data () {
     return {
+      isAllCheck:false,
       taskType: '1',
       keyWordOfTask: '',
-      videoSearchTime: [],
+      // videoSearchTime: [],
       pickerOptions: {
         shortcuts: [{
           text: '浠婂ぉ',
@@ -183,30 +250,139 @@
         }]
       },
       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' }] }
-      ],
-      videoListSearchWord: '',
+      videoPackageList: {},
+      trainNochecked: [],
+      // trainNoCurPage: 1,
+      // trainNoPageSize: 8,
+      // trainNoPageSizes: [5, 8, 12],
+      trainNoTotal: 0,
+      keyword1: '',
+      keyword2: '',
+      keyword3: '',
       actCollapseName: '',
       checkedOrg: {},
       orgTreeDialogVisible: false,
       organizeData: [],
-
-      personList: [
-        { name: '寮犱笁', id: 'zs' },
-        { name: '鏉庢柉', id: 'ls' }
-      ],
+      personList: [],
+      memberChecked: [],
       taskTableData: [],
+      taskVideoChecked: [],
+      notAssignedOnly: false,
+      isIndeterminate:false,
+      inputName:""
     }
   },
   mounted () {
     this.getOrganizeTreeData();
+    this.refreshAll();
+  },
+  watch: {
+    taskType (n, o) {
+      this.renderTaskTable();
+    }
   },
   methods: {
-    searchMemberByOrg(){
-      debugger
-      
+    searchName(val){
+      console.log(this.personList ,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) {
+      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 = {
+        CarNumber: this.keyword1,
+        TrainNumber: this.keyword2,
+        DriverName: this.keyword3,
+        // PageIndex: this.trainNoCurPage,
+        // PageSize: this.trainNoPageSize,
+        notAssignedOnly: this.notAssignedOnly,
+      };
+      getVideoListBySearch(params).then(res => {
+        _this.videoPackageList = res.data
+        _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({}).then(res => {
+        _this.personList = res.data;
+        // _this.orgTreeDialogVisible = false;
+      })
     },
     deepNodeChildren (node) {
       if (node.ChildDept && node.ChildDept.length > 0) {
@@ -250,17 +426,19 @@
       })
     },
     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;
-    },
-    searchTask () {
-
-    }
+    // selOrg () {
+    //   this.orgTreeDialogVisible = true;
+    // },
   }
 }
 </script>
@@ -311,10 +489,38 @@
       .video-list {
         margin-top: 14px;
         text-align: left;
+        .el-checkbox-group {
+          margin-bottom: 20px;
+          .el-checkbox__label{
+            display: none;
+          }
+          .video-detail {
+            i {
+              //color: #409EFF;
+            }
+            color: #888;
+          }
+        }
       }
     }
     .top-right {
       width: 360px;
+      height: 465px;
+      // overflow-y:auto;
+      .header{
+        .el-input{
+              line-height: 41px;
+            width: 185px;
+            font-size: 14px;
+        }
+        .el-checkbox{
+          float: left;
+          padding-left: 20px;
+          height: 40px;
+          line-height: 40px;
+          font-size: 14px;  
+        }
+      }
       .checked-org {
         flex: 1;
         text-align: left;
@@ -324,9 +530,17 @@
       }
       .person-list {
         padding-top: 14px;
+
+        .el-checkbox-group{
+          height: 330px;
+
+        margin-bottom: 8px;
+        overflow: auto;
+        }
         .person {
           text-align: left;
           margin-bottom: 10px;
+          
           padding-bottom: 6px;
           border-bottom: 1px solid #eee;
         }

--
Gitblit v1.8.0