commit
957cee37ba
@ -0,0 +1,433 @@
|
||||
<template>
|
||||
<!-- 已办任务 -->
|
||||
<div>
|
||||
<div class="complete_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-select
|
||||
v-model="search.complete_status"
|
||||
@change="change_complete"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in complete_list"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="search.complete_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="240">
|
||||
</el-table-column>
|
||||
<el-table-column prop="course_type" label="流程类型" width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="build_person" label="创建者" width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="build_unit" label="创建单位" width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="course_status" label="流程状态" width="200">
|
||||
<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="当前节点">
|
||||
</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: "Complete",
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
complete_status: "",
|
||||
procStatus: "0", // 表格查询待定入参
|
||||
complete_time: [this.get_today(), this.get_tomorrow()],
|
||||
word: "",
|
||||
},
|
||||
complete_list: [
|
||||
{ label: "待审核", value: "1" },
|
||||
{ label: "通过", value: "2" },
|
||||
{ label: "驳回", value: "3" },
|
||||
{ label: "处置中", value: "4" },
|
||||
],
|
||||
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: {
|
||||
change_complete(val) {
|
||||
this.search.procStatus = this.complete_list.find(
|
||||
(item) => item.label === val
|
||||
).value;
|
||||
},
|
||||
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,
|
||||
procStatus: this.search.procStatus,
|
||||
};
|
||||
console.log(param);
|
||||
},
|
||||
reset() {
|
||||
this.search.procStatus = "0";
|
||||
this.search.complete_status = "";
|
||||
this.search.complete_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_complete_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);
|
||||
}
|
||||
.complete_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,80 @@
|
||||
<template>
|
||||
<!-- 我的流程详情 -->
|
||||
<div>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="表单信息" name="first">
|
||||
<CompleteDetailForm :complete_detail="complete_detail" ref="completeDetailForm"></CompleteDetailForm>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="流程图" name="second">
|
||||
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="流转记录" name="third">
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CompleteDetailForm from "./completeDetailForm"
|
||||
export default {
|
||||
name: "CompleteDetail",
|
||||
components:{
|
||||
CompleteDetailForm,
|
||||
},
|
||||
props:{
|
||||
complete_detail:{}, // -> 从complete传过来的单条表格详情数据
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "first",
|
||||
};
|
||||
},
|
||||
methods:{},
|
||||
};
|
||||
</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: "CompleteDetailPicture",
|
||||
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>
|
||||
@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<!-- 流程记录 -->
|
||||
<div class="record_body">
|
||||
<div class="all_step">
|
||||
<div class="record_step" v-for="item in record_list" :key="item.taskId">
|
||||
<!-- 侧边进度图标 -->
|
||||
<div class="step">
|
||||
<div class="step_icon">
|
||||
<!-- assigneeId为空的时候为待选图标,为数值的时候为确定图标 -->
|
||||
<i v-if="item.assigneeId != ''" class="el-icon-success"></i>
|
||||
<i v-else class="el-icon-time"></i>
|
||||
</div>
|
||||
<!-- 进度线 -->
|
||||
<div class="step_line"></div>
|
||||
</div>
|
||||
<div class="step_table">
|
||||
<div class="step_table_top">
|
||||
<div class="step_table_top_name">{{ item.taskName }}</div>
|
||||
<div class="step_table_top_opeartion">
|
||||
<div class="opeartion_num">
|
||||
<div class="opeartion_num_text">操作者总计:</div>
|
||||
<div class="opeartion_num_val">{{ item.doTotal }}</div>
|
||||
</div>
|
||||
<div class="opeartion_num">
|
||||
<div class="opeartion_num_text">已操作:</div>
|
||||
<div class="opeartion_num_val">
|
||||
{{ item.finishTotal }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="opeartion_num">
|
||||
<div class="opeartion_num_text">未操作:</div>
|
||||
<div class="not_opeartion_num_val">
|
||||
{{ item.todoTotal }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
height="250"
|
||||
:data="item.historyTaskList"
|
||||
:header-cell-style="table_header"
|
||||
:cell-style="{ background: 'revert', 'text-align': 'center' }"
|
||||
>
|
||||
<el-table-column prop="assigneeName" label="实际办理" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column prop="candidate" label="候选办理" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="操作状态" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column prop="finishTime" label="接收时间" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
label="操作时间"
|
||||
width="280"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="duration" label="耗时"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { get_my_course_record } from "@/api/closeLoopDispose";
|
||||
export default {
|
||||
name: "CompleteDetailRecords",
|
||||
props: {
|
||||
complete_detail: {},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
record_list: [
|
||||
// {
|
||||
// id: "1",
|
||||
// name: "卫健部门",
|
||||
// opeartion_num: "2",
|
||||
// have_opeartion_num: "1",
|
||||
// not_opeartion_num: "1",
|
||||
// table_list: [
|
||||
// {
|
||||
// change: "吴沁",
|
||||
// under_change: "治安大队",
|
||||
// type: "已操作",
|
||||
// load_time: "2023-06-06 12:53:30",
|
||||
// time: "2023-06-06 12:53:30",
|
||||
// use_time: "2秒",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// id: "2",
|
||||
// },
|
||||
// {
|
||||
// id: "3",
|
||||
// name: "发布人",
|
||||
// },
|
||||
],
|
||||
src: require("../../../assets/companyFile/loadtrue.png"),
|
||||
icon_show: true, // 控制图标显示隐藏
|
||||
step_line_show: true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log("complete_detail2", this.complete_detail);
|
||||
let param = {
|
||||
definitionId: this.complete_detail.procDefId,
|
||||
deployId: this.complete_detail.deployId,
|
||||
procInsId: this.complete_detail.procInsId,
|
||||
taskId: this.complete_detail.taskId,
|
||||
};
|
||||
console.log(param);
|
||||
// get_my_course_record(param).then((res) => {
|
||||
// this.record_list = res.data.wfDetailVo.recordList;
|
||||
// console.log("this.record_list", this.record_list);
|
||||
// // for(let i = 0; i < this.record_list.length;i++) {
|
||||
// // if ( i + 1 == this.record_list.length ) {
|
||||
// // this.step_line_show = false
|
||||
// // } else {
|
||||
// // this.step_line_show = true
|
||||
// // }
|
||||
// // console.log('i + 1', i + 1);
|
||||
// // console.log('this.record_list', this.record_list.length);
|
||||
// // }
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
// 表头样式
|
||||
table_header({ row, rowIndex }) {
|
||||
console.log(row);
|
||||
console.log(rowIndex);
|
||||
return {
|
||||
"text-align": "center", // 表头文字居中
|
||||
color: "#fff",
|
||||
border: "0.1px solid #3b4f5c",
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='less' scoped>
|
||||
.record_body {
|
||||
width: 95.9vw;
|
||||
height: 70vh;
|
||||
background: url("~@/assets/companyFile/09091.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.record_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 6px;
|
||||
background-color: #5e666a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.record_body::-webkit-scrollbar-thumb {
|
||||
display: none;
|
||||
width: 5px;
|
||||
background-color: #3c4b4a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.all_step {
|
||||
margin-top: 1vh;
|
||||
}
|
||||
/* 不固定高度，给自由展示空间 */
|
||||
.record_step {
|
||||
width: 94vw;
|
||||
height: 31vh;
|
||||
margin-left: 1vw;
|
||||
// border: 0.1px solid #3f5564;
|
||||
display: flex;
|
||||
.step {
|
||||
width: 30px;
|
||||
// margin-top: 10%;
|
||||
margin-left: 1vw;
|
||||
height: 100%;
|
||||
// border: 0.1px solid #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.step_icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
// border: 0.1px solid #fff;
|
||||
border-radius: 50%;
|
||||
.el-icon-success {
|
||||
font-size: 30px;
|
||||
color: #41ffc4;
|
||||
}
|
||||
.el-icon-time {
|
||||
font-size: 30px;
|
||||
color: #38eafc;
|
||||
}
|
||||
}
|
||||
.step_line {
|
||||
flex-grow: 1;
|
||||
width: 2px;
|
||||
background: #56808f;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.step_table {
|
||||
margin-left: 1vw;
|
||||
// border: 0.1px solid #fff;
|
||||
width: 90vw;
|
||||
// height: 30vh;
|
||||
.step_table_top {
|
||||
// border: 0.1px solid #fff;
|
||||
width: 90vw;
|
||||
height: 5vh;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.step_table_top_name {
|
||||
width: 10vw;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
font-size: 19px;
|
||||
line-height: 3.5vh;
|
||||
height: 5vh;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
.step_table_top_opeartion {
|
||||
width: 21vw;
|
||||
height: 5vh;
|
||||
// border: 0.1px solid #fff;
|
||||
display: flex;
|
||||
.opeartion_num {
|
||||
width: 7vw;
|
||||
height: 5vh;
|
||||
display: flex;
|
||||
.opeartion_num_text {
|
||||
width: 4vw;
|
||||
height: 5vh;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 5vh;
|
||||
text-align: center;
|
||||
}
|
||||
.opeartion_num_val {
|
||||
width: 3vw;
|
||||
height: 5vh;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 5vh;
|
||||
text-align: center;
|
||||
}
|
||||
.not_opeartion_num_val {
|
||||
width: 3vw;
|
||||
height: 5vh;
|
||||
color: #e75c5d;
|
||||
font-size: 16px;
|
||||
line-height: 5vh;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-table {
|
||||
// width: 96vw;
|
||||
height: 25vh;
|
||||
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 td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border: 0.1px solid #3f5564;
|
||||
}
|
||||
/deep/.el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background-color: #5e666a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
width: 5px;
|
||||
background-color: #3c4b4a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,432 @@
|
||||
<template>
|
||||
<!-- 抄送我的 -->
|
||||
<div>
|
||||
<div class="copy_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-select
|
||||
v-model="search.copy_status"
|
||||
@change="change_complete"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in copy_list"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="search.copy_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="240">
|
||||
</el-table-column>
|
||||
<el-table-column prop="course_type" label="流程类型" width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="build_person" label="创建者" width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="build_unit" label="创建单位" width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="course_status" label="流程状态" width="200">
|
||||
<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="当前节点"> </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: "Complete",
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
copy_status: "",
|
||||
procStatus: "0", // 表格查询待定入参
|
||||
copy_time: [this.get_today(), this.get_tomorrow()],
|
||||
word: "",
|
||||
},
|
||||
copy_list: [
|
||||
{ label: "待审核", value: "1" },
|
||||
{ label: "通过", value: "2" },
|
||||
{ label: "驳回", value: "3" },
|
||||
{ label: "处置中", value: "4" },
|
||||
],
|
||||
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: {
|
||||
change_copy(val) {
|
||||
this.search.procStatus = this.copy_list.find(
|
||||
(item) => item.label === val
|
||||
).value;
|
||||
},
|
||||
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,
|
||||
procStatus: this.search.procStatus,
|
||||
};
|
||||
console.log(param);
|
||||
},
|
||||
reset() {
|
||||
this.search.procStatus = "0";
|
||||
this.search.copy_status = "";
|
||||
this.search.copy_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_copy_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);
|
||||
}
|
||||
.copy_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>
|
||||
Loading…
Reference in new issue