<script lang="ts" setup>
|
import { ref } from 'vue';
|
|
import { useGlobSetting } from '@jnpf/hooks';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
import { formatToDateTime } from '@jnpf/utils';
|
|
import { getCirculateList } from '#/api/workFlow/task';
|
|
const [registerModal] = useModalInner(init);
|
const globSetting = useGlobSetting();
|
const apiUrl = ref(globSetting.apiURL);
|
const list = ref<any[]>([]);
|
const loading = ref<boolean>(false);
|
|
function init(data) {
|
loading.value = true;
|
list.value = [];
|
getCirculateList(data.taskId, data.nodeId).then((res) => {
|
list.value = res.data || [];
|
loading.value = false;
|
});
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="抄送人员" :width="400" :footer="null" destroy-on-close class="circulateUser-modal">
|
<div class="circulateUser-body">
|
<div v-for="item in list" :key="item">
|
<div class="circulate-item circulate-item-user">
|
<div class="circulate-item-main">
|
<a-avatar :size="36" :src="apiUrl + item.headIcon" class="circulate-item-headIcon" />
|
<div class="circulate-item-text">
|
<p class="name">{{ item.userName }}</p>
|
<p class="time">{{ formatToDateTime(item.creatorTime) }}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</BasicModal>
|
</template>
|
<style lang="scss">
|
.circulateUser-modal {
|
.ant-modal-body > .scrollbar {
|
padding: 20px;
|
}
|
|
.circulateUser-body {
|
font-size: 14px;
|
border-radius: var(--radius);
|
|
.circulate-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
padding: 0 12px;
|
|
&.circulate-item-user {
|
&:last-child {
|
.selected-item-main {
|
border-bottom-color: transparent;
|
}
|
}
|
|
.circulate-item-main {
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
width: 100%;
|
height: 50px;
|
border-bottom: 1px solid var(--border-color-base1);
|
}
|
|
.circulate-item-headIcon {
|
flex-shrink: 0;
|
}
|
|
.circulate-item-text {
|
flex: 1;
|
min-width: 0;
|
margin-left: 16px;
|
|
.name {
|
height: 20px;
|
margin-bottom: 2px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 14px;
|
line-height: 20px;
|
white-space: nowrap;
|
}
|
|
.time {
|
height: 17px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 12px;
|
line-height: 17px;
|
color: #999;
|
white-space: nowrap;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
