Merge branch 'master' of http://8.136.197.230:3000/ZheJiangNingBo/pingAnQiYeWeb
xuhaoyun
1 year ago
commit
abdb629143
|
After Width: | Height: | Size: 341 KiB |
@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<!-- 请选择抄送部门 -->
|
||||
<el-dialog
|
||||
class="dialog"
|
||||
title="请选择抄送部门"
|
||||
:visible.sync="visible"
|
||||
:close-on-click-modal="false"
|
||||
width="600px"
|
||||
@close="close"
|
||||
>
|
||||
<div class="tree_title">宁波市公安局镇海分局</div>
|
||||
<div class="tree_body">
|
||||
<div class="tree_input">
|
||||
<el-input
|
||||
v-model="section_search"
|
||||
placeholder="请输入部门名称查询"
|
||||
></el-input>
|
||||
<div class="section_btn" @click="handle_click()">
|
||||
<i class="el-icon-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 部门树 -->
|
||||
<div class="section_tree">
|
||||
<el-tree
|
||||
ref="company_tree"
|
||||
:data="tree_data"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expand-all="defaultExpandAll"
|
||||
:default-checked-keys="default_keys"
|
||||
@check="handle_check"
|
||||
>
|
||||
<span
|
||||
slot-scope="{ node }"
|
||||
:title="node.label"
|
||||
class="el-tree-node__label node-label"
|
||||
>
|
||||
{{ node.label }}
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_btn" slot="footer">
|
||||
<el-button @click="close">取 消</el-button>
|
||||
<el-button @click="enter">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { get_backlog_company_tree } from "@/api/closeLoopDispose";
|
||||
export default {
|
||||
name: "backlogDetailDialog",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
section_search: "",
|
||||
tree_data: [],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "name",
|
||||
},
|
||||
defaultExpandAll: true, // 控制公司树默认展开
|
||||
company_list: [],
|
||||
default_keys: [], // 控制选中部门二次打开回显展示
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.visible = true;
|
||||
this.handle_click();
|
||||
console.log("this.company_list", this.company_list);
|
||||
// 非首次打开弹窗时保持上次选中部门的回显
|
||||
if (this.company_list != []) {
|
||||
this.default_keys = this.company_list.map((item) => item.id);
|
||||
console.log('this.default_keys',this.default_keys);
|
||||
}
|
||||
},
|
||||
handle_click() {
|
||||
let param = {
|
||||
deptName: this.section_search,
|
||||
};
|
||||
get_backlog_company_tree(param).then((res) => {
|
||||
this.tree_data = res.data;
|
||||
});
|
||||
},
|
||||
handle_check(data, checkedData) {
|
||||
console.log("data", data);
|
||||
console.log("checkedData", checkedData);
|
||||
this.company_list = checkedData.checkedNodes; // 获取选中公司的数组
|
||||
},
|
||||
// 确定关闭弹窗
|
||||
enter() {
|
||||
this.$emit("push_data", this.company_list);
|
||||
this.visible = false;
|
||||
},
|
||||
close() {
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/.el-dialog {
|
||||
.el-dialog__title {
|
||||
color: #fff;
|
||||
font-size: 19px;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
background-image: url("~@/assets/companyFile/dialogBack.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 800px;
|
||||
/* 关闭弹窗叉号 */
|
||||
.el-dialog__headerbtn {
|
||||
.el-dialog__close {
|
||||
color: #e55b5b;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.tree_title {
|
||||
color: #fff;
|
||||
margin-top: 3vh;
|
||||
font-size: 19px;
|
||||
// border: 1px solid #4a6072;
|
||||
}
|
||||
.tree_body {
|
||||
margin-top: 1vh;
|
||||
height: 600px;
|
||||
border: 1px solid #4a6072;
|
||||
background: url("~@/assets/companyFile/09091.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.tree_input {
|
||||
display: flex;
|
||||
border: 0.1px solid #5b748c;
|
||||
margin-left: 8px;
|
||||
margin-top: 10px;
|
||||
width: 550px;
|
||||
.el-input__inner {
|
||||
// margin-left: 8px;
|
||||
// margin-top: 10px;
|
||||
width: 500px;
|
||||
border-radius: 0px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #fff;
|
||||
border: 0.1px solid #5b748c;
|
||||
}
|
||||
/* 查询框点击颜色变化 */
|
||||
.el-input__inner:focus,
|
||||
.el-input__inner:hover {
|
||||
border-color: #5b748c;
|
||||
}
|
||||
.section_btn {
|
||||
width: 50px;
|
||||
border-radius: 0px;
|
||||
background: #0e3936;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
border: 0.1px solid #5b748c;
|
||||
cursor: pointer;
|
||||
.el-icon-search {
|
||||
color: #fff;
|
||||
padding: 12% 0;
|
||||
}
|
||||
}
|
||||
.section_btn:focus,
|
||||
.section_btn:hover {
|
||||
/* 放大镜点击特效 */
|
||||
background: #126a58;
|
||||
}
|
||||
}
|
||||
}
|
||||
.section_tree {
|
||||
margin-top: 1vh;
|
||||
margin-left: 8px;
|
||||
width: 550px;
|
||||
// border: 0.1px solid #5b748c;
|
||||
height: 49vh;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
// .section_tree::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// width: 6px;
|
||||
// background-color: #5e666a;
|
||||
// border-radius: 4px;
|
||||
// }
|
||||
// .section_tree::-webkit-scrollbar-thumb {
|
||||
// display: none;
|
||||
// width: 5px;
|
||||
// background-color: #3c4b4a;
|
||||
// border-radius: 4px;
|
||||
// }
|
||||
}
|
||||
.el-button {
|
||||
width: 120px;
|
||||
border: 1px solid #4a6072;
|
||||
color: #fff;
|
||||
border-radius: 0px !important;
|
||||
background: #323f43;
|
||||
}
|
||||
.el-button:focus,
|
||||
.el-button:hover {
|
||||
color: #34e1b3;
|
||||
background: url("~@/assets/companyFile/btn05.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
.el-tree {
|
||||
/* 树形数据过长添加滚动条 */
|
||||
height: 49vh;
|
||||
overflow: auto;
|
||||
// box-shadow: 5px 5px 10px #126a58;
|
||||
border-radius: 0px;
|
||||
// background: #293738;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 0.1px solid #485f6c;
|
||||
color: #fff !important;
|
||||
.el-tree-node__content {
|
||||
height: 50px;
|
||||
}
|
||||
.el-tree-node__label.node-label {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
}
|
||||
/* 去掉树形数据前面的三角形 */
|
||||
.el-icon-caret-right:before {
|
||||
content: "";
|
||||
}
|
||||
.node-label {
|
||||
/* 树形数据横向过长添加展开 */
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* hover节点时的背景颜色 */
|
||||
.el-tree-node__content:hover {
|
||||
background: #495461;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
/* 节点选中的背景颜色 */
|
||||
.el-tree-node:focus > .el-tree-node__content {
|
||||
background: #495461;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
// 没有展开且有子节点
|
||||
.el-tree.el-icon-caret-right:before {
|
||||
background: url("~@/assets/companyFile/add.png") no-repeat;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
font-size: 23px;
|
||||
background-size: 23px;
|
||||
}
|
||||
// 已经展开且有子节点
|
||||
.el-tree.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
|
||||
background: url("~@/assets/companyFile/add.png") no-repeat;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
font-size: 23px;
|
||||
background-size: 23px;
|
||||
}
|
||||
// 没有子节点 minus
|
||||
.el-tree.el-tree-node__expand-icon.is-leaf::before {
|
||||
background: url("~@/assets/companyFile/minus.png") no-repeat;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
font-size: 23px;
|
||||
background-size: 23px;
|
||||
}
|
||||
}
|
||||
.el-tree::-webkit-scrollbar {
|
||||
width: 9px;
|
||||
background-color: #5e666a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.el-tree::-webkit-scrollbar-thumb {
|
||||
width: 8px;
|
||||
background-color: #3c4b4a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
</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="processType" 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: "BacklogDetailRecords",
|
||||
props: {
|
||||
backlog_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("backlog_detail2", this.backlog_detail);
|
||||
let param = {
|
||||
definitionId: this.backlog_detail.procDefId,
|
||||
deployId: this.backlog_detail.deployId,
|
||||
procInsId: this.backlog_detail.procInsId,
|
||||
taskId: this.backlog_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