From 8d94a4a0a987f586a9f7f8826ebb76c19387f207 Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期五, 26 三月 2021 17:19:40 +0800 Subject: [PATCH] 人员任务分配 --- src/pages/shuohuangMonitorAnalyze/components/taskManage.vue | 495 +++++++++++++++++++++++++++++------------------------- 1 files changed, 269 insertions(+), 226 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue index df42df8..1d93278 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue @@ -25,8 +25,8 @@ v-model="keyword1" placeholder="璇疯緭鍏ユ満杞﹀彿" size="small" - style="margin: 0 10px;" - clearable="true" + style="margin: 0 10px" + clearable ></el-input> </div> <div> @@ -35,8 +35,8 @@ v-model="keyword2" placeholder="璇疯緭鍏ヨ溅娆�" size="small" - style="margin: 0 10px;" - clearable="true" + style="margin: 0 10px" + clearable ></el-input> </div> <div> @@ -45,39 +45,41 @@ v-model="keyword3" placeholder="璇疯緭鍏ュ徃鏈哄鍚�" size="small" - style="margin: 0 10px;" - clearable="true" + 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="isShowUndistributedOnly">浠呮樉绀烘湭鍒嗛厤</el-checkbox> --> - <el-checkbox v-model="notAssignedOnly">浠呮樉绀烘湭鍒嗛厤</el-checkbox> + 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" + v-for="(v, vkey, i) in videoPackageList" :key="i" > <template slot="title"> <div> <el-checkbox - :label="i" - style="padding-right:10px;" + :label="vkey" + style="padding-right: 10px" ></el-checkbox> - <span>{{vkey}}({{v.length}})</span> + <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> + <i class="el-icon-film" style="margin-left: 20px"></i> + <span style="padding-left: 10px">{{ + video.VideoName + }}</span> </div> </el-collapse-item> </el-collapse> @@ -96,9 +98,19 @@ </div> <div class="top-right partment"> <div class="header"> - <el-checkbox v-model="isAllCheck" :indeterminate="isIndeterminate" @change="handleCheckAllChange"></el-checkbox> + <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> + <el-input + size="small" + @input="searchName" + v-model="inputName" + placeholder="璇疯緭鍏ュ唴瀹�" + clearable + ></el-input> </div> <div class="body"> <!-- <div class="flex-box"> @@ -107,9 +119,12 @@ <el-button type="primary" size="mini" @click="selOrg">閫夋嫨閮ㄩ棬</el-button> </div> --> <div class="person-list"> - <el-checkbox-group v-model="memberChecked" @change="handleCheckedCitiesChange"> + <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> + <el-checkbox :label="person.ID">{{ person.Name }}</el-checkbox> </div> </el-checkbox-group> <el-button @@ -117,7 +132,8 @@ type="primary" @click="toAddAssignList" size="small" - >鍔犲叆寰呭垎閰嶅垪琛�</el-button> + >鍔犲叆寰呭垎閰嶅垪琛�</el-button + > </div> </div> </div> @@ -127,18 +143,24 @@ <div class="header"> <div class="title">浠诲姟鍒楄〃</div> <div class="header-right flex-box"> - <el-radio-group v-model="taskType" size="mini"> + <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="璇疯緭鍏�" + placeholder="鎼滅储鍏抽敭瀛�" v-model="keyWordOfTask" size="mini" - style="margin-left: 10px;" + style="margin-left: 10px" + @input="reRenderWhenClear" + clearable > - <el-button slot="append" icon="el-icon-search" @click="renderTaskTable"></el-button> + <el-button + slot="append" + icon="el-icon-search" + @click="searchKeyword" + ></el-button> </el-input> </div> </div> @@ -148,31 +170,54 @@ type="primary" size="small" @click="distributeTask" - v-if="taskType==1&&taskVideoChecked.length" - >鍒嗛厤浠诲姟</el-button> + v-if="taskType == 1" + >鍒嗛厤浠诲姟</el-button + > </div> <el-table class="thbg" :data="taskTableData" + v-if="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 + 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.LKGList.length}}</div> + <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 + 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="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> @@ -183,13 +228,15 @@ class="video-item" v-for="video in scope.row.LKGList" :key="video.ID" - >{{video.VideoName}}</div> + > + {{ video.VideoName }} + </div> </template> </el-table-column> </el-table> </div> </div> - <el-dialog :visible="orgTreeDialogVisible"> + <!-- <el-dialog :visible="orgTreeDialogVisible"> <div> <el-tree :data="organizeData" @@ -201,124 +248,109 @@ :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> + <el-button size="small" @click="orgTreeDialogVisible = false" + >鍙栨秷</el-button + > + <el-button size="small" type="primary" @click="searchMemberByOrg" + >纭畾</el-button + > </div> </div> - </el-dialog> + </el-dialog> --> </div> </template> <script> -import { getOrganizeTree, getMemberByOrg, getVideoListBySearch, addToAssignList, getTaskList, distributeTask, cancelMission } from '@/api/shuohuang'; +import { + getOrganizeTree, + getMemberByOrg, + getVideoListBySearch, + addToAssignList, + getTaskList, + distributeTask, + cancelMission, +} from "@/api/shuohuang"; export default { - data () { + data() { return { - isAllCheck:false, - 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]); - } - }] - }, + isAllCheck: false, + taskType: "1", + keyWordOfTask: "", isShowUndistributedOnly: false, videoPackageList: {}, trainNochecked: [], - // trainNoCurPage: 1, - // trainNoPageSize: 8, - // trainNoPageSizes: [5, 8, 12], trainNoTotal: 0, - keyword1: '', - keyword2: '', - keyword3: '', - actCollapseName: '', - checkedOrg: {}, - orgTreeDialogVisible: false, - organizeData: [], + keyword1: "", + keyword2: "", + keyword3: "", + actCollapseName: "", personList: [], memberChecked: [], - taskTableData: [], + taskTableData: null, taskVideoChecked: [], notAssignedOnly: false, - isIndeterminate:false, - inputName:"" - } + isIndeterminate: false, + inputName: "", + }; }, - mounted () { - this.getOrganizeTreeData(); + mounted() { + // this.getOrganizeTreeData(); this.refreshAll(); }, - watch: { - taskType (n, o) { - this.renderTaskTable(); - } - }, methods: { - searchName(val){ - console.log(this.personList ,val); - if (val=="") { - this.searchMemberByOrg() + reRenderWhenClear(val){ + if (val.trim() == "") { + this.renderTaskTable() } - if (val.trim()=="") { - return + }, + searchName(val) { + console.log(this.personList, val); + if (val == "") { + this.searchMemberByOrg(); } - this.personList = this.personList.filter(item=>{ - return item.Name.indexOf(val)>-1 - }) + 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 => { + 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.LKGList.map((x) => x.ID); + cancelMission({ LkgIDs: arr }).then((res) => { if (res.success) { this.$notify({ - type: 'success', - message: res.msg + type: "success", + message: res.msg, }); this.refreshAll(); } - }) + }); }, - 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 = []; @@ -326,121 +358,131 @@ this.renderVideoTable(); this.renderTaskTable(); }, - taskTableSelection (val) { - this.taskVideoChecked = val + taskTableSelection(val) { + let arr = val.map((item) => item.LKGList.map((x) => x.ID)); + this.taskVideoChecked = arr; }, - renderTaskTable () { + renderTaskTable() { let _this = this; - let params = { - IsPackage: 0, - Status: this.taskType - }; - getTaskList(params).then(res => { - _this.taskTableData = res.data - }) + getTaskList({ + Status: this.taskType, + }).then((res) => { + _this.taskTableData = res.data; + }); }, - // handleTrainNoSizeChange (size) { - // this.trainNoPageSize = size; - // this.renderVideoTable(); - // }, - handleTrainNoCurChange () { - this.renderVideoTable(); - }, - renderVideoTable () { + renderVideoTable() { let _this = this; - let params = { + getVideoListBySearch({ 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 + }).then((res) => { + _this.videoPackageList = res.data; _this.trainNoTotal = res.total; }); }, - toAddAssignList () { + toAddAssignList() { let _this = this; - let params = { - UserID: this.memberChecked[0], - UniqeID: this.trainNochecked.join(',') - }; - addToAssignList(params).then(res => { + 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({ + UserID: this.memberChecked, + LkgIDs: arr, + }).then((res) => { if (res.success) { this.$notify({ - type: 'success', - message: res.msg + type: "success", + message: res.msg, }); _this.refreshAll(); } - }) + }); }, - searchMemberByOrg () { + searchMemberByOrg() { let _this = this; - getMemberByOrg({}).then(res => { + getMemberByOrg({}).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 () { + // 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; - 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 => { + distributeTask({ + LkgIDs: this.taskVideoChecked, + }).then((res) => { _this.renderTaskTable(); - }) + }); }, - // selOrg () { // this.orgTreeDialogVisible = true; // }, - } -} + }, +}; </script> <style lang="scss"> @@ -457,11 +499,12 @@ height: 40px; .title { float: left; - padding-left: 20px; height: 40px; + padding-left: 10px; + line-height: 40px; font-size: 14px; - font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC'; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC"; } .header-right { float: right; @@ -491,7 +534,7 @@ text-align: left; .el-checkbox-group { margin-bottom: 20px; - .el-checkbox__label{ + .el-checkbox__label { display: none; } .video-detail { @@ -507,18 +550,18 @@ width: 360px; height: 465px; // overflow-y:auto; - .header{ - .el-input{ - line-height: 41px; - width: 185px; - font-size: 14px; + .header { + .el-input { + line-height: 41px; + width: 185px; + font-size: 14px; } - .el-checkbox{ + .el-checkbox { float: left; padding-left: 20px; height: 40px; line-height: 40px; - font-size: 14px; + font-size: 14px; } } .checked-org { @@ -531,16 +574,16 @@ .person-list { padding-top: 14px; - .el-checkbox-group{ + .el-checkbox-group { height: 330px; - margin-bottom: 8px; - overflow: auto; + margin-bottom: 8px; + overflow: auto; } .person { text-align: left; margin-bottom: 10px; - + padding-bottom: 6px; border-bottom: 1px solid #eee; } -- Gitblit v1.8.0