yuxiang
3 years ago
commit
e5695256fb
@ -1,6 +1,6 @@
|
||||
export default {
|
||||
// eslint-disable-next-line quotes
|
||||
appkey: "2428212a7f52c661655aa6370e8ed817", // 请输入自己的appkey
|
||||
appkey: "e1dcbdb294e2e8e1215d87e56e23d5bb", // 请输入自己的appkey
|
||||
// eslint-disable-next-line quotes
|
||||
appSecret: "fcb5e539e78f", // 请输入自己的appSecret
|
||||
appSecret: "2310dba4d70a", // 请输入自己的appSecret
|
||||
};
|
||||
|
||||
@ -1,84 +1,239 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :destroy-on-close="true" v-if="dialogVisibleNone" :close-on-click-modal="false" :title="dialogTitle" width="60%"
|
||||
:visible.sync="dialogVisible" @close="dialogClose"
|
||||
append-to-body>
|
||||
<div v-for="(item,index) in processList" style="margin:10px 10px 60px 10px;">
|
||||
<div>
|
||||
<div>{{ item.flowName }}</div>
|
||||
<div>---------------------</div>
|
||||
<div>
|
||||
<span style="padding:10px;">{{ item.flowProcessSectionPersonTypeName }}</span>
|
||||
<el-dialog
|
||||
:destroy-on-close="true"
|
||||
v-if="dialogVisibleNone"
|
||||
:close-on-click-modal="false"
|
||||
:title="dialogTitle"
|
||||
width="60%"
|
||||
:visible.sync="dialogVisible"
|
||||
@close="dialogClose"
|
||||
append-to-body
|
||||
>
|
||||
<div class="time-line">
|
||||
<el-timeline
|
||||
id="listDom"
|
||||
:reverse="reverse"
|
||||
style="padding: 0; margin-left: 2px"
|
||||
>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in processList"
|
||||
:key="index"
|
||||
:size="large"
|
||||
color="#B9DEC5"
|
||||
>
|
||||
<el-row>
|
||||
<div class="time-card">
|
||||
<div class="time-top">
|
||||
<div class="time-title">{{ activity.flowName }}</div>
|
||||
</div>
|
||||
<div class="time-bottom">
|
||||
<div
|
||||
class="time-item"
|
||||
v-for="(item, index) in toArray(
|
||||
activity.flowProcessSectionPersonTypeName
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
<span class="title">{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="Save" >保 存</el-button>
|
||||
<el-button @click="dialogClose">关 闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- <div
|
||||
v-for="(item, index) in processList"
|
||||
style="margin: 10px 10px 60px 10px"
|
||||
>
|
||||
<div>
|
||||
<div>{{ item.flowName }}</div>
|
||||
<div>---------------------</div>
|
||||
<div>
|
||||
<span style="padding: 10px">{{
|
||||
item.flowProcessSectionPersonTypeName
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="Save">保 存</el-button>
|
||||
<el-button @click="dialogClose">关 闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { listDocFlowNodeList } from "@/api/attendance/doctree";
|
||||
import { listDocFlowNodeList } from "@/api/attendance/doctree";
|
||||
export default {
|
||||
name: "processConfigDialog",
|
||||
props: {
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
name: "processConfigDialog",
|
||||
props: {
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
dialogTitle: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
dialogDocTreeId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisibleNone: true,
|
||||
processList: [],
|
||||
};
|
||||
},
|
||||
dialogTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
watch: {
|
||||
dialogVisible: function (val) {
|
||||
this.$emit("update:dialogVisible", val);
|
||||
if (val) {
|
||||
this.$nextTick(() => {
|
||||
this.loadDocInfo();
|
||||
this.dialogVisibleNone = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
dialogDocTreeId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
created() {},
|
||||
methods: {
|
||||
toArray(data) {
|
||||
return data.split(",");
|
||||
},
|
||||
Save() {},
|
||||
dialogClose() {
|
||||
this.$emit("update:dialogVisible", false);
|
||||
this.dialogVisibleNone = false;
|
||||
},
|
||||
loadDocInfo() {
|
||||
if (this.dialogDocTreeId != null) {
|
||||
listDocFlowNodeList({ projectDocTreeId: this.dialogDocTreeId }).then(
|
||||
(response) => {
|
||||
this.processList = response.rows;
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 16vh !important;
|
||||
}
|
||||
::v-deep .el-dialog__body {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
::v-deep .el-dialog__footer {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
::v-deep .el-timeline-item__tail {
|
||||
border-left: 2px solid #b9dec5;
|
||||
}
|
||||
|
||||
::v-deep .el-timeline-item__node {
|
||||
background-image: url("../../../assets/images/bozhou/icon-point.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.time-line {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 500px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 1px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
// border-radius: 10px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background: #a0c6a8;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisibleNone:true,
|
||||
processList:[],
|
||||
&::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
// border-radius: 10px;
|
||||
background: #ededed;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dialogVisible: function(val) {
|
||||
this.$emit('update:dialogVisible', val)
|
||||
if (val) {
|
||||
this.$nextTick(() => {
|
||||
this.loadDocInfo();
|
||||
this.dialogVisibleNone=true;
|
||||
})
|
||||
}
|
||||
|
||||
.time-date {
|
||||
font-size: 16px;
|
||||
font-family: "AlibabaPuHuiTiR";
|
||||
color: #2ea957;
|
||||
}
|
||||
.time-name {
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
font-family: "AlibabaPuHuiTiR";
|
||||
color: #404d44;
|
||||
}
|
||||
.time-card {
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
padding: 16px 20px;
|
||||
position: relative;
|
||||
margin-right: 14px;
|
||||
.time-top {
|
||||
position: relative;
|
||||
|
||||
.time-title {
|
||||
font-size: 14px;
|
||||
font-family: "AlibabaPuHuiTiB";
|
||||
font-weight: bold;
|
||||
color: #404d44;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
}
|
||||
.time-tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 55;
|
||||
width: 61px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
Save(){
|
||||
.time-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 54;
|
||||
width: 61px;
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
dialogClose() {
|
||||
this.$emit('update:dialogVisible', false);
|
||||
this.dialogVisibleNone = false;
|
||||
},
|
||||
loadDocInfo() {
|
||||
if(this.dialogDocTreeId!=null){
|
||||
listDocFlowNodeList({projectDocTreeId:this.dialogDocTreeId}).then((response) => {
|
||||
this.processList = response.rows;
|
||||
});
|
||||
.time-bottom {
|
||||
padding-top: 17px;
|
||||
|
||||
display: flex;
|
||||
.time-item {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: #84caaf;
|
||||
border-radius: 50%;
|
||||
margin: 0 10px;
|
||||
padding: 5px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 16vh !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue