Merge branch 'master' of http://8.136.197.230:3000/ZheJiangNingBo/pingAnQiYeWeb
xuhaoyun
2 years ago
commit
18489d427b
@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 抄送我的详情 -->
|
||||||
|
<div>
|
||||||
|
<el-tabs v-model="activeName">
|
||||||
|
<el-tab-pane label="表单信息" name="first">
|
||||||
|
<CopyDetailForm
|
||||||
|
ref="CopyDetailForm"
|
||||||
|
:copy_detail="copy_detail"
|
||||||
|
></CopyDetailForm>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="流程图" name="second">
|
||||||
|
<CopyDetailPicture ref="copyDetailPicture"></CopyDetailPicture>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="流转记录" name="third">
|
||||||
|
<CopyDetailRecords
|
||||||
|
ref="copyDetailRecords"
|
||||||
|
:copy_detail="copy_detail"
|
||||||
|
></CopyDetailRecords>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import CopyDetailForm from "./copyDetailForm";
|
||||||
|
import CopyDetailPicture from "./copyDetailPicture";
|
||||||
|
import CopyDetailRecords from "./copyDetailRecords";
|
||||||
|
export default {
|
||||||
|
name: "copyDetail",
|
||||||
|
components: {
|
||||||
|
CopyDetailForm,
|
||||||
|
CopyDetailPicture,
|
||||||
|
CopyDetailRecords,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
copy_detail: {}, // -> 从copy传过来的单条表格详情数据
|
||||||
|
},
|
||||||
|
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: "CopyDetailPicture",
|
||||||
|
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,303 @@
|
|||||||
|
<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: "CopyDetailRecords",
|
||||||
|
props: {
|
||||||
|
copy_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("copy_detail2", this.copy_detail);
|
||||||
|
let param = {
|
||||||
|
definitionId: this.copy_detail.procDefId,
|
||||||
|
deployId: this.copy_detail.deployId,
|
||||||
|
procInsId: this.copy_detail.procInsId,
|
||||||
|
taskId: this.copy_detail.taskId,
|
||||||
|
};
|
||||||
|
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>
|
||||||
Loading…
Reference in new issue