|
|
@ -1,8 +1,8 @@
|
|
|
|
<script lang="ts" setup>
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import { format } from 'date-fns';
|
|
|
|
import { format } from "date-fns";
|
|
|
|
import { computed } from 'vue';
|
|
|
|
import { computed } from "vue";
|
|
|
|
|
|
|
|
|
|
|
|
defineOptions({ name: 'ListItem' })
|
|
|
|
defineOptions({ name: "ListItem" });
|
|
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
const props = defineProps({
|
|
|
|
selected: {
|
|
|
|
selected: {
|
|
|
@ -13,30 +13,38 @@ const props = defineProps({
|
|
|
|
type: Object as PropType<any>,
|
|
|
|
type: Object as PropType<any>,
|
|
|
|
required: true,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const svgName = computed(() => {
|
|
|
|
const svgName = computed(() => {
|
|
|
|
return props.selected ? 'task-select' : 'task'
|
|
|
|
return props.selected ? "task-select" : "task";
|
|
|
|
})
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="list-item" :class="{ 'list-item-selected': selected }">
|
|
|
|
<div class="list-item" :class="{ 'list-item-selected': selected }">
|
|
|
|
<div class="list-item-header">
|
|
|
|
<div class="list-item-header">
|
|
|
|
<div style="display: flex;">
|
|
|
|
<div style="display: flex">
|
|
|
|
<SvgIcon :name="svgName" size="28" />
|
|
|
|
<SvgIcon :name="svgName" size="28" />
|
|
|
|
<span class="list-item-header-name" :class="{ 'list-item-header-selected': selected }">
|
|
|
|
<span
|
|
|
|
|
|
|
|
class="list-item-header-name"
|
|
|
|
|
|
|
|
:class="{ 'list-item-header-selected': selected }"
|
|
|
|
|
|
|
|
>
|
|
|
|
任务ID:{{ listItem.fromtaskname }}
|
|
|
|
任务ID:{{ listItem.fromtaskname }}
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<SvgIcon v-show="selected" size="14" name="more-ver" />
|
|
|
|
<SvgIcon v-show="selected" size="14" name="more-ver" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<ul class="list-item-detail">
|
|
|
|
<ul class="list-item-detail">
|
|
|
|
<li>审批状态:<span class="list-item-status">{{ listItem.statshisText }}</span></li>
|
|
|
|
<li>
|
|
|
|
|
|
|
|
审批状态:<span class="list-item-status">{{
|
|
|
|
|
|
|
|
listItem.statshisText
|
|
|
|
|
|
|
|
}}</span>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>审批节点:{{ listItem.tasknamehis }}</li>
|
|
|
|
<li>审批节点:{{ listItem.tasknamehis }}</li>
|
|
|
|
<li>提交时间:{{ format(new Date(), 'yyyy-MM-dd HH:mm:ss') }}</li>
|
|
|
|
<li>
|
|
|
|
|
|
|
|
提交时间:{{ format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>提报人:{{ listItem.fromUserName }}</li>
|
|
|
|
<li>提报人:{{ listItem.fromUserName }}</li>
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
<div class="list-item-divider" />
|
|
|
|
<div class="list-item-divider" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -60,7 +68,7 @@ const svgName = computed(() => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&-selected {
|
|
|
|
&-selected {
|
|
|
|
color: #507AFD;
|
|
|
|
color: #507afd;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -74,7 +82,7 @@ const svgName = computed(() => {
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
&:before {
|
|
|
|
content: '';
|
|
|
|
content: "";
|
|
|
|
width: 6px;
|
|
|
|
width: 6px;
|
|
|
|
height: 6px;
|
|
|
|
height: 6px;
|
|
|
|
background: #fe9800;
|
|
|
|
background: #fe9800;
|
|
|
@ -104,7 +112,6 @@ const svgName = computed(() => {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0px;
|
|
|
|
bottom: 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
../types
|
|
|
|
../types
|
|
|
|