81 lines
1.8 KiB
Vue
81 lines
1.8 KiB
Vue
|
<template>
|
|||
|
|
<div class="geg-flow-history">
|
|||
|
|
<div v-for="(item, index) in items" :class="{ sep: index !== 0 }" class="item">
|
|||
|
|
<template v-if="mode === 'simple'"></template>
|
|||
|
|
<template v-if="mode === 'complex'">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-1">审批人</div>
|
|||
|
|
<div class="col-2">用时：1小时10分</div>
|
|||
|
|
<div class="col-3 agree">{{ item.nodeName }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-1 position">职务</div>
|
|||
|
|
<div class="col-2">2023-03-27 12:00:00</div>
|
|||
|
|
<div class="col-3">{{ item.comment }}</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.geg-flow-history {
|
|||
|
|
.row {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
margin: 6px 0;
|
|||
|
|
line-height: 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.col-1 {
|
|||
|
|
width: 180px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.col-2 {
|
|||
|
|
width: 180px;
|
|||
|
|
color: #5a6875;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.col-3 {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
&.agree {
|
|||
|
|
color: #52c41a;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.position{
|
|||
|
|
color: #90a0af;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
padding: 8px 0;
|
|||
|
|
|
|||
|
|
&.sep {
|
|||
|
|
border-top: 1px solid #e9e9e9;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { defineProps, ref } from 'vue';
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
mode: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'complex'
|
|||
|
|
},
|
|||
|
|
items: Array,
|
|||
|
|
autoHide: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
sort: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'desc'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|