<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
|
v-for="(activity, index) in state.activities"
|
:key="index"
|
:icon="activity.icon"
|
:type="activity.type"
|
:color="activity.state == 1 ? '#0bbd87' : '#B4B4B4' "
|
:size="activity.size"
|
>
|
<div style="display: flex;font-size: 16px">
|
<div style="display: flex;flex-direction: column">
|
<span v-if="activity.title" style="font-size: 14px;margin-bottom: 5px;color: #6d737b">{{activity.title}}</span>
|
<div>
|
<span style="font-size: 16px">{{activity.content}}</span>
|
<span v-if="activity.state == 1 && index != 3" style="color: #1ab394;font-size: 14px;margin-left: 5px">[已签]</span>
|
<span v-if="activity.state == 0 && index != 3" style="color: #6d737b;font-size: 14px;margin-left: 5px">[未签]</span>
|
<span v-if="activity.state == 1 && index == 3" 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: [],
|
formRules:{
|
name: [{ required: true, trigger: "blur", message:'' }],
|
},
|
})
|
|
|
const openDialog = async (value) => {
|
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>
|
