From a827dbadd7dcc86067cb71d36a62abbf3418a91f Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 03 十一月 2021 17:38:26 +0800
Subject: [PATCH] hyj change shuohuang
---
src/pages/shuohuangMonitorAnalyze/components/taskManage.vue | 286 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 187 insertions(+), 99 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
index a3d85f7..9bdd6ff 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
@@ -1,24 +1,10 @@
<template>
<div class="tab-task-manage">
<div class="top">
- <div class="top-left partment">
- <div class="header">
- <div class="title">瑙嗛鍒楄〃</div>
- </div>
+ <div class="top-left">
+ <div class="header">瑙嗛鍒楄〃</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 class="flex-box">
<div>
<el-input
class="keyword-input"
@@ -56,8 +42,10 @@
style="margin-right: 10px"
>鎼滅储</el-button
>
- <el-checkbox v-model="notAssignedOnly" @change="renderVideoTable">浠呮樉绀烘湭鍒嗛厤</el-checkbox>
- </div>
+ <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">
@@ -66,6 +54,7 @@
v-for="(v, vkey, i) in videoPackageList"
:key="i"
>
+ <!-- :style="i%2==1?{background:'#F4F6F9 !important'}:{}" -->
<template slot="title">
<div>
<el-checkbox
@@ -84,31 +73,24 @@
</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">
<div class="header">
- <el-checkbox
- v-model="isAllCheck"
- :indeterminate="isIndeterminate"
- @change="handleCheckAllChange"
- ></el-checkbox>
- <div class="title">浜哄憳鍒楄〃</div>
+ <div class="title">
+ <el-checkbox
+ v-model="isAllCheck"
+ :indeterminate="isIndeterminate"
+ @change="handleCheckAllChange"
+ ></el-checkbox>
+ <span class="text">浜哄憳鍒楄〃</span>
+ </div>
<el-input
- size="small"
+ size="mini"
@input="searchName"
v-model="inputName"
- placeholder="璇疯緭鍏ュ唴瀹�"
+ placeholder="鎸変汉鍚嶆悳绱�"
clearable
></el-input>
</div>
@@ -127,23 +109,23 @@
<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>
+ <el-button type="primary" @click="toAddAssignList" size="small"
+ >鍔犲叆寰呭垎閰嶅垪琛�</el-button
+ >
</div>
</div>
</div>
- <div class="devide"></div>
- <div class="bot">
+ <!-- <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-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>
@@ -165,15 +147,6 @@
</div>
</div>
<div class="table-area">
- <div class="actions">
- <el-button
- type="primary"
- size="small"
- @click="distributeTask"
- v-if="taskType == 1"
- >鍒嗛厤浠诲姟</el-button
- >
- </div>
<el-table
class="thbg"
:data="taskTableData"
@@ -181,6 +154,7 @@
ref="elTable"
@selection-change="taskTableSelection"
v-loading
+ :header-cell-style="{ background: '#7786BC', color: '#fff' }"
>
<el-table-column
v-if="taskType == 1"
@@ -211,11 +185,13 @@
<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> -->
@@ -234,6 +210,15 @@
</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">
@@ -268,7 +253,8 @@
addToAssignList,
getTaskList,
distributeTask,
- cancelMission,cancelAssign,
+ cancelMission,
+ cancelAssign,
} from "@/api/shuohuang";
export default {
data() {
@@ -298,9 +284,9 @@
this.refreshAll();
},
methods: {
- reRenderWhenClear(val){
+ reRenderWhenClear(val) {
if (val.trim() == "") {
- this.renderTaskTable()
+ this.renderTaskTable();
}
},
searchName(val) {
@@ -329,7 +315,7 @@
checkedCount > 0 && checkedCount < this.personList.length;
},
cancelDistribute(row) {
- let arr = row.VideoList.map(x => x.ID);
+ let arr = row.VideoList.map((x) => x.ID);
cancelMission({ VideoIDs: arr }).then((res) => {
if (res.success) {
this.$notify({
@@ -341,7 +327,7 @@
});
},
cancelAssign(row) {
- let arr = row.VideoList.map(x => x.ID);
+ let arr = row.VideoList.map((x) => x.ID);
cancelAssign({ VideoIDs: arr }).then((res) => {
if (res.success) {
this.$notify({
@@ -353,7 +339,7 @@
});
},
searchKeyword() {
- const val = this.keyWordOfTask
+ const val = this.keyWordOfTask;
this.taskTableData = this.taskTableData.filter((item) => {
const b1 = item.DistributionUser.indexOf(val) > -1;
const b2 = item.HandlingUsers.indexOf(val) > -1;
@@ -394,6 +380,10 @@
});
},
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;
@@ -443,7 +433,7 @@
let _this = this;
distributeTask({
VideoIDs: this.taskVideoChecked,
- distributerID: ""
+ distributerID: "",
}).then((res) => {
_this.renderTaskTable();
});
@@ -454,6 +444,8 @@
<style lang="scss">
.tab-task-manage {
+ padding: 0 30px;
+
.partment {
border: 1px solid #e8e8e8;
border-radius: 3px;
@@ -463,22 +455,12 @@
}
}
.header {
- height: 40px;
- .title {
- float: left;
- height: 40px;
- padding-left: 10px;
-
- line-height: 40px;
- font-size: 14px;
- font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
- }
.header-right {
float: right;
}
}
.body {
- padding: 14px 20px 20px;
+ // padding: 14px 20px 20px;
}
.flex-box {
align-items: center;
@@ -491,16 +473,49 @@
}
.top {
display: flex;
- padding: 20px;
- margin-bottom: 10px;
+ margin-bottom: 20px;
.top-left {
- flex: 1;
- margin-right: 10px;
- .video-list {
- margin-top: 14px;
+ 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;
- height: 420px;
- overflow: auto;
+ }
+ .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 {
@@ -516,22 +531,41 @@
}
}
.top-right {
- width: 360px;
- height: 465px;
- // overflow-y:auto;
+ 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: 41px;
+ line-height: 40px;
width: 185px;
font-size: 14px;
}
.el-checkbox {
- float: left;
- padding-left: 20px;
height: 40px;
line-height: 40px;
font-size: 14px;
}
+ }
+ .el-button {
+ padding: 9px 22px;
+ font-size: 13px;
+ border-radius: 3px;
}
.checked-org {
flex: 1;
@@ -541,20 +575,22 @@
}
}
.person-list {
- padding-top: 14px;
-
+ height: 370px;
.el-checkbox-group {
- height: 330px;
-
margin-bottom: 8px;
overflow: auto;
}
.person {
text-align: left;
- margin-bottom: 10px;
-
- padding-bottom: 6px;
+ height: 40px;
border-bottom: 1px solid #eee;
+ display: flex;
+ align-items: center;
+ padding: 0 25px;
+ // color: #425277;
+ .el-checkbox__label {
+ color: #425277;
+ }
}
}
}
@@ -563,11 +599,63 @@
height: 10px;
background: #f5f5f5;
}
- .bot {
- padding: 20px;
+ .bot-box {
+ height: 450px;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ opacity: 1;
+ border-radius: 10px;
+ box-sizing: border-box;
+ .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 {
- .actions {
- text-align: left;
+ 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;
+ }
+ }
+ }
+ .actions {
+ .el-button--small {
+ padding: 9px 38px;
+ font-size: 13px;
+ border-radius: 3px;
+ margin-top: 20px;
}
}
}
--
Gitblit v1.8.0