<template>
|
<div class="notice">
|
<el-dialog
|
v-model="dialogVisible"
|
title="流转记录"
|
width="500px"
|
:before-close="handleClose"
|
:close-on-press-escape="false"
|
:close-on-click-modal="false"
|
>
|
<el-timeline style="max-width: 600px">
|
<el-timeline-item size="large" color="#0bbd87" style="font-size: 16px">
|
<div>创建人：{{state.creatContent}}</div>
|
</el-timeline-item>
|
<el-timeline-item style="font-size: 16px" :color="state.firstPeopleState == 1 ? '#0bbd87' : '#B4B4B4' " size="large">
|
<div>
|
最初签署人：{{state.firstPeopleContent}}
|
<span v-if="state.firstPeopleState == 1" style="color: #1ab394;font-size: 14px;">[已签]</span>
|
<span v-else style="color: #6d737b;font-size: 14px;">[未签]</span>
|
|
</div>
|
</el-timeline-item>
|
<el-timeline-item
|
v-for="(activity, index) in state.activities"
|
:key="index"
|
size="large"
|
style="font-size: 16px"
|
:color="activity.signStatus == 1 || activity.signStatus == 3 ? '#0bbd87' : '#B4B4B4' "
|
>
|
<div style="display: flex;font-size: 16px">
|
<div style="display: flex;flex-direction: column">
|
<span style="font-size: 14px;margin-bottom: 5px;color: #6d737b">由 {{activity.deptName}} {{activity.userName}} 流转</span>
|
<div>
|
<span style="font-size: 16px" >{{activity.signUserName}}（{{activity.signDeptName}}）</span>
|
<span v-if="activity.signStatus == 1" style="color: #1ab394;font-size: 14px;margin-left: 5px">[已签]</span>
|
<span v-else-if="activity.signStatus == 0 || activity.signStatus == null " style="color: #6d737b;font-size: 14px;margin-left: 5px">[未签]</span>
|
<span v-else-if="activity.signStatus == 3 && state.form.itemStatus == 2 " style="color: #1ab394;font-size: 14px;margin-left: 5px">[已归档]</span>
|
</div>
|
</div>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup>
|
import {reactive, ref, toRefs} from 'vue'
|
import { MoreFilled } from '@element-plus/icons-vue'
|
import {ElMessage} from "element-plus";
|
import {listDept} from "@/api/system/dept";
|
import {listUser} from "@/api/system/user";
|
|
const { proxy } = getCurrentInstance();
|
const dialogVisible = ref(false);
|
const title = ref("");
|
const busRef = ref();
|
const length = ref()
|
const emit = defineEmits(["getList"]);
|
|
const state = reactive({
|
form: {
|
id: '',
|
},
|
activities: [],
|
creatContent: '',
|
firstPeopleContent: '',
|
firstPeopleState: null,
|
formRules:{
|
name: [{ required: true, trigger: "blur", message:'' }],
|
},
|
})
|
|
|
const openDialog = async (value) => {
|
console.log('va',value)
|
state.form = JSON.parse(JSON.stringify(value))
|
state.activities = JSON.parse(JSON.stringify(value)).signatureFlows
|
const newArr = []
|
state.activities.forEach(item => {
|
if(item.sort == 1){
|
state.creatContent = item.userName + '（'+ item.deptName + '）'
|
state.firstPeopleContent = item.signUserName + '（'+ item.signDeptName + '）'
|
state.firstPeopleState = item.signStatus
|
}else {
|
newArr.push(item)
|
}
|
})
|
newArr.sort((a,b) => a.sort - b.sort)
|
state.activities = newArr
|
|
// state.activities = [
|
// {
|
// content: '创建人：张三（综合办）',
|
// timestamp: '2018-04-03 20:46',
|
// size: 'large',
|
// state: 1,
|
// },
|
// {
|
// content: '最初签署人：李四',
|
// timestamp: '2018-04-03 20:46',
|
// size: 'large',
|
// state: 1,
|
// },
|
// {
|
// title: '由 XXX 部门 XX 流转',
|
// content: 'XXXX',
|
// timestamp: '2018-04-03 20:46',
|
// size: 'large',
|
// state: 1,
|
// },
|
// {
|
// title: '由 XXX 部门 XX 流转',
|
// content: 'XXXX',
|
// timestamp: '2018-04-03 20:46',
|
// size: 'large',
|
// state: 1,
|
// },
|
// ]
|
dialogVisible.value = true;
|
}
|
|
const handleClose = () => {
|
reset();
|
dialogVisible.value = false;
|
emit("getList")
|
}
|
const reset = () => {
|
state.form = {
|
id: '',
|
name: '',
|
remark: '',
|
}
|
}
|
|
defineExpose({
|
openDialog
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
.notice{
|
:deep(.el-form .el-form-item__label) {
|
font-size: 15px;
|
}
|
:deep(.el-timeline-item__node--large) {
|
left: -8px;
|
top: -5px;
|
width: 25px;
|
height: 25px;
|
}
|
:deep(.el-timeline-item){
|
padding-bottom: 50px;
|
}
|
.file {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
}
|
</style>
|
