lukeyan
2 years ago
parent
337910e683
commit
ebc722bd84
@ -0,0 +1,400 @@
|
||||
<template>
|
||||
<!-- 代办任务 -->
|
||||
<div>
|
||||
<div class="backlog_body">
|
||||
<div class="search_top">
|
||||
<div class="btn">
|
||||
<el-button @click="search_data">搜索</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</div>
|
||||
<el-form :model="search" class="search_top_form">
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="search.backlog_time"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键字">
|
||||
<el-input
|
||||
v-model="search.word"
|
||||
placeholder="请选择关键词"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search_table">
|
||||
<el-table
|
||||
:data="table_data"
|
||||
:header-cell-style="table_header"
|
||||
:cell-style="{ background: 'revert', 'text-align': 'center' }"
|
||||
>
|
||||
<el-table-column prop="procDefName" label="流程名称" width="420">
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column prop="course_type" label="流程类型" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column prop="course_status" label="流程状态" width="220">
|
||||
<template slot-scope="scope">
|
||||
<div :style="{ color: styleChange(scope.row.course_status) }">
|
||||
{{ scope.row.course_status }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="taskName" label="当前节点" width="220">
|
||||
</el-table-column>
|
||||
<el-table-column prop="nextNodeUsers" label="未操作者" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column prop="operation" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="small"
|
||||
class="operation"
|
||||
@click="check_details(scope.row)"
|
||||
>处置
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<div class="table_pagination">
|
||||
<el-pagination
|
||||
:background="true"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[5, 10]"
|
||||
:page-size="pageSize"
|
||||
:current-page="pageNum"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "Backlog",
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
backlog_time: [this.get_today(), this.get_tomorrow()],
|
||||
word: "",
|
||||
},
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: "最近一周",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近一个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近三个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
table_data: [],
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search_data() {
|
||||
let param = {
|
||||
pageSize: this.pageSize,
|
||||
page: this.pageNum,
|
||||
startTime:
|
||||
this.search.course_time == null
|
||||
? ""
|
||||
: this.dateConversion(this.search.course_time[0]),
|
||||
endTime:
|
||||
this.search.course_time == null
|
||||
? ""
|
||||
: this.dateConversion(this.search.course_time[1]),
|
||||
searchKey: this.search.word,
|
||||
};
|
||||
console.log(param);
|
||||
},
|
||||
reset() {
|
||||
this.search.course_status = "";
|
||||
this.search.course_time = [this.get_today(), this.get_tomorrow()];
|
||||
this.search.word = "";
|
||||
},
|
||||
// 获取当前时间
|
||||
get_today() {
|
||||
let date = new Date();
|
||||
let y = date.getFullYear();
|
||||
let m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
let d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
let dateTime =
|
||||
y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
|
||||
return dateTime;
|
||||
},
|
||||
// 获取明天时间
|
||||
get_tomorrow() {
|
||||
let date = new Date();
|
||||
let y = date.getFullYear();
|
||||
let m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
let d = date.getDate() + 1;
|
||||
d = d < 10 ? "0" + d : d;
|
||||
let dateTime =
|
||||
y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
|
||||
return dateTime;
|
||||
},
|
||||
// 处置点击跳转
|
||||
check_details(val) {
|
||||
this.$emit("change_backlog_detail", val); // 通知跳转
|
||||
},
|
||||
// 表头样式
|
||||
table_header({ row, rowIndex }) {
|
||||
console.log(row);
|
||||
console.log(rowIndex);
|
||||
return {
|
||||
"text-align": "center", // 表头文字居中
|
||||
color: "#fff",
|
||||
border: "0.1px solid #3b4f5c",
|
||||
};
|
||||
},
|
||||
// 跟后端返回判断流程状态颜色
|
||||
styleChange(val) {
|
||||
switch (val) {
|
||||
case "进行中":
|
||||
return "#3eba75";
|
||||
// case "yellow":
|
||||
// return "#FDA722";
|
||||
case "处置成功":
|
||||
return "#2eb9ef";
|
||||
case "处置失败":
|
||||
return "#e55b5b";
|
||||
}
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
this.pageNum = 1;
|
||||
this.pageSize = val;
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
this.pageNum = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/.el-table {
|
||||
// width: 96vw;
|
||||
height: 60vh;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 0.1px solid #3f5564;
|
||||
thead {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
border: 0.1px solid #3f5564;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#284f49,
|
||||
#2f6363 5%,
|
||||
#233b38 80%
|
||||
) !important;
|
||||
& th {
|
||||
background-color: transparent;
|
||||
}
|
||||
& tr {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
/deep/.el-table__body-wrapper::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 6px;
|
||||
background-color: #5e666a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
display: none;
|
||||
width: 5px;
|
||||
background-color: #3c4b4a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
/deep/ .el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border: 0.1px solid #3f5564;
|
||||
}
|
||||
/deep/.el-button.operation {
|
||||
background-color: #182527;
|
||||
border: 0px;
|
||||
color: #2fabdc;
|
||||
}
|
||||
|
||||
/deep/.el-button.operation:hover,
|
||||
.el-button.operation:focus {
|
||||
background-color: #182527;
|
||||
border: 0px;
|
||||
color: #2fabdc;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
.backlog_body {
|
||||
height: 72vh;
|
||||
.search_top {
|
||||
width: 96vw;
|
||||
height: 5vh;
|
||||
// border: 0.1px solid #2f6363;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
/deep/.el-form {
|
||||
display: flex;
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
margin-left: 0.5vw;
|
||||
.el-date-editor--daterange.el-input__inner {
|
||||
width: 440px;
|
||||
}
|
||||
}
|
||||
.el-form-item__label {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.el-form-item__content {
|
||||
.el-input__inner {
|
||||
// width: 300px;
|
||||
border-radius: 0px;
|
||||
border: 1px solid #3d505e;
|
||||
// border: 0.5px dashed;
|
||||
background: #283436;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 查询框点击颜色变化 */
|
||||
.el-input__inner:focus,
|
||||
.el-input__inner:hover {
|
||||
border-color: #1b3736;
|
||||
}
|
||||
.el-range-input {
|
||||
color: #fff;
|
||||
background: #283436;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-range-separator {
|
||||
color: #fff;
|
||||
width: 10%;
|
||||
}
|
||||
/deep/.el-input__icon.el-range__close-icon {
|
||||
display: none;
|
||||
}
|
||||
.btn {
|
||||
margin-left: 8px;
|
||||
margin-right: 2px;
|
||||
.el-button {
|
||||
width: 70px;
|
||||
height: 3.7vh !important;
|
||||
border: 1px solid #4a6072;
|
||||
color: #fff;
|
||||
border-radius: 0px !important;
|
||||
background: #323f43;
|
||||
}
|
||||
.el-button:focus,
|
||||
.el-button:hover {
|
||||
color: #34e1b3;
|
||||
border: 2px solid #137868;
|
||||
background: url("~@/assets/companyFile/2121.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table_pagination {
|
||||
width: 96vw;
|
||||
height: 5vh;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
/deep/.el-input--suffix .el-input__inner {
|
||||
color: #fff;
|
||||
border: 0.1px solid #277f79;
|
||||
border-radius: 0px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
width: 5vw;
|
||||
height: 2.6vh;
|
||||
line-height: 2.6vh;
|
||||
}
|
||||
/deep/.el-input__icon {
|
||||
color: #fff;
|
||||
line-height: 2.6vh;
|
||||
height: 2.6vh;
|
||||
}
|
||||
/deep/.el-pagination {
|
||||
margin-top: 1vh;
|
||||
.el-pagination__total {
|
||||
color: #fff;
|
||||
}
|
||||
.el-input__inner {
|
||||
border-radius: 0px;
|
||||
border: 0.1px solid #28847e;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-prev {
|
||||
border-radius: 0px;
|
||||
border: 0.1px solid #28847e;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
border: 0.1px solid #28847e;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.btn-next {
|
||||
border: 0.1px solid #28847e;
|
||||
border-radius: 0px;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
.el-pager {
|
||||
li {
|
||||
border: 0.1px solid #28847e;
|
||||
background: #3c4b4a !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
border: 2px solid #76eae4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<!-- 待办任务详情 -->
|
||||
<div>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="表单信息" name="first">
|
||||
<BacklogDetailForm
|
||||
ref="backlogDetailForm"
|
||||
:backlog_detail="backlog_detail"
|
||||
></BacklogDetailForm>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="流程图" name="second">
|
||||
<BacklogDetailPicture ref="backlogDetailPicture"></BacklogDetailPicture>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="流转记录" name="third">
|
||||
<BacklogDetailRecords
|
||||
ref="backlogDetailRecords"
|
||||
:backlog_detail="backlog_detail"
|
||||
></BacklogDetailRecords>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import BacklogDetailForm from "./backlogDetailForm";
|
||||
import BacklogDetailPicture from "./backlogDetailPicture";
|
||||
import BacklogDetailRecords from "./backlogDetailRecords";
|
||||
export default {
|
||||
name: "BacklogDetail",
|
||||
components: {
|
||||
BacklogDetailForm,
|
||||
BacklogDetailPicture,
|
||||
BacklogDetailRecords,
|
||||
},
|
||||
props: {
|
||||
backlog_detail: {}, // -> 从backlog传过来的单条表格详情数据
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "first",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/.el-tabs__active-bar.is-top {
|
||||
display: none;
|
||||
background: #33cccc;
|
||||
}
|
||||
/deep/.el-tabs__nav-wrap::after {
|
||||
height: 1px;
|
||||
background: #5b748c;
|
||||
}
|
||||
/deep/.el-tabs__item.is-top {
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px;
|
||||
// margin-right: 20px;
|
||||
}
|
||||
/deep/.el-tabs__item.is-top.is-active {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
border-bottom: 4px solid #33cccc;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
#3a5856,
|
||||
#3b746c
|
||||
) !important;
|
||||
}
|
||||
/deep/.el-tabs__item.is-top:focus,
|
||||
.el-tabs__item.is-top:hover {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
border-bottom: 4px solid #33cccc;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
#3a5856,
|
||||
#3b746c
|
||||
) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<!-- 我的流程流程图 -->
|
||||
<div class="picture_body">
|
||||
<!-- 流程图示例 -->
|
||||
<div class="picture_title">
|
||||
<div class="picture_area">
|
||||
<div class="picture_icon_one"></div>
|
||||
<div class="picture_text_one">已经过的节点</div>
|
||||
</div>
|
||||
<div class="picture_area">
|
||||
<div class="picture_icon_two"></div>
|
||||
<div class="picture_text_two">未经过的节点</div>
|
||||
</div>
|
||||
<div class="picture_area">
|
||||
<div class="picture_icon_three"></div>
|
||||
<div class="picture_text_three">当前节点</div>
|
||||
</div>
|
||||
<div class="picture_area">
|
||||
<div class="picture_icon_four"></div>
|
||||
<div class="picture_text_four">已经过的出口</div>
|
||||
</div>
|
||||
<div class="picture_area">
|
||||
<div class="picture_icon_five"></div>
|
||||
<div class="picture_text_five">未经过的出口</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "BacklogDetailPicture",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.picture_body {
|
||||
width: 95.9vw;
|
||||
height: 70vh;
|
||||
// border: 0.1px solid #3f5564;
|
||||
background: url("~@/assets/companyFile/09091.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.picture_title {
|
||||
width: 94vw;
|
||||
height: 6vh;
|
||||
margin-left: 1vw;
|
||||
border-bottom: 0.1px solid #3f5564;
|
||||
display: flex;
|
||||
.picture_area {
|
||||
width: 8vw;
|
||||
height: 4vh;
|
||||
margin-top: 1vh;
|
||||
margin-left: 1vw;
|
||||
// border: 0.1px solid #3f5564;
|
||||
display: flex;
|
||||
.picture_icon_one {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
// border: 0.1px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: #41ffc4;
|
||||
margin-top: 0.9vh;
|
||||
}
|
||||
.picture_text_one {
|
||||
color: #fff;
|
||||
margin-left: 1vw;
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
}
|
||||
.picture_icon_two {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
// border: 0.1px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: #c8c8c8;
|
||||
margin-top: 0.9vh;
|
||||
}
|
||||
.picture_text_two {
|
||||
color: #fff;
|
||||
margin-left: 1vw;
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
}
|
||||
.picture_icon_three {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
// border: 0.1px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: #2fe7ff;
|
||||
margin-top: 0.9vh;
|
||||
}
|
||||
.picture_text_three {
|
||||
color: #fff;
|
||||
margin-left: 1vw;
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
}
|
||||
.picture_icon_four {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
// border: 0.1px solid #fff;
|
||||
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
margin-top: 0.9vh;
|
||||
}
|
||||
.picture_text_four {
|
||||
color: #fff;
|
||||
margin-left: 1vw;
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
}
|
||||
.picture_icon_five {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
// border: 0.1px solid #fff;
|
||||
background: url("~@/assets/companyFile/rightarrow02.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
margin-top: 0.9vh;
|
||||
}
|
||||
.picture_text_five {
|
||||
color: #fff;
|
||||
margin-left: 1vw;
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue