<script lang="ts" setup>
|
import type { ScrollActionType } from '@jnpf/ui';
|
|
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';
|
|
import { useGlobSetting } from '@jnpf/hooks';
|
import { createImgPreview, ScrollContainer } from '@jnpf/ui';
|
import { useModal } from '@jnpf/ui/modal';
|
|
import { Timeline, TimelineItem } from 'ant-design-vue';
|
|
import { getDataLogList } from '#/api/onlineDev/visualDev';
|
import { getAuthMediaUrl } from '#/utils/jnpf';
|
|
import ChildLogModal from './modal/ChildLogModal.vue';
|
|
interface State {
|
list: any[];
|
loading: boolean;
|
finish: boolean;
|
listQuery: any;
|
}
|
|
const props = defineProps({
|
modelId: { type: String, default: '' },
|
formDataId: { type: [String, Number], default: '' },
|
});
|
|
const globSetting = useGlobSetting();
|
const apiUrl = ref(globSetting.apiURL);
|
const infiniteBody = ref<Nullable<ScrollActionType>>(null);
|
const state = reactive<State>({
|
list: [],
|
loading: false,
|
finish: false,
|
listQuery: {
|
currentPage: 1,
|
pageSize: 20,
|
sort: 'desc',
|
sidx: '',
|
},
|
});
|
const { list, loading } = toRefs(state);
|
const [registerChildLogModal, { openModal: openChildLogModal }] = useModal();
|
|
function bindScroll() {
|
const bodyRef = infiniteBody.value;
|
const vBody = bodyRef?.getScrollWrap();
|
vBody?.addEventListener('scroll', () => {
|
if (vBody.scrollHeight - vBody.clientHeight - vBody.scrollTop <= 200 && !state.loading && !state.finish) {
|
state.listQuery.currentPage += 1;
|
init();
|
}
|
});
|
}
|
function getNodeStatusColor(type) {
|
return type == 1 ? 'blue' : 'success';
|
}
|
function getTimeLineTagColor(type) {
|
return type == 1 ? '#0177FF' : '#08AF28';
|
}
|
function getNodeStatusContent(type) {
|
return type == 1 ? '编辑' : '新建';
|
}
|
function handlePreview(image) {
|
createImgPreview({ imageList: [getAuthMediaUrl(image)] });
|
}
|
function toDetail(data) {
|
openChildLogModal(true, data);
|
}
|
function init() {
|
if (!props.modelId || !props.formDataId) return;
|
state.loading = true;
|
const query = { ...state.listQuery, modelId: props.modelId, dataId: props.formDataId };
|
getDataLogList(query)
|
.then((res) => {
|
if (res.data.list.length < state.listQuery.pageSize) state.finish = true;
|
const list = res.data.list.map((o) => ({ ...o, dataLog: o.dataLog ? JSON.parse(o.dataLog) : [] }));
|
state.list = [...state.list, ...list];
|
state.loading = false;
|
})
|
.catch(() => {
|
state.loading = false;
|
});
|
}
|
|
onMounted(() => {
|
state.list = [];
|
state.finish = false;
|
init();
|
nextTick(() => {
|
bindScroll();
|
});
|
});
|
</script>
|
<template>
|
<div class="form-extra-log">
|
<ScrollContainer v-loading="loading" ref="infiniteBody" class="form-extra-comment-main">
|
<Timeline class="form-extra-log-list" v-if="list.length">
|
<TimelineItem v-for="(item, index) in list" :key="index">
|
<template #dot>
|
<span class="tag" :style="{ background: getTimeLineTagColor(item.type) }"></span>
|
</template>
|
<span>{{ item.creatorTime }}</span>
|
<div class="time-item-container">
|
<div class="time-item-head">
|
<a-avatar :size="24" :src="apiUrl + item.headIcon" class="head-avatar" />
|
<span class="head-name">{{ item.creatorUserName }}</span>
|
<a-tag :color="getNodeStatusColor(item.type)" :bordered="false" class="head-status">{{ getNodeStatusContent(item.type) }}</a-tag>
|
</div>
|
<div class="time-item-log" v-if="item.type">
|
<div class="time-item-log-total">
|
有
|
<span>{{ item.dataLog.length }}</span>
|
处更改
|
</div>
|
<div class="time-item-log-item" v-for="(log, logIndex) in item.dataLog" :key="logIndex">
|
<div class="time-item-log-item-label">{{ log.fieldName }}：</div>
|
<div class="time-item-log-item-value">
|
<template v-if="log.nameModified">
|
<span class="time-item-log-item-value-modify">已修改</span>
|
</template>
|
<template v-else>
|
<template v-if="log.jnpfKey === 'table'">
|
<span class="time-item-log-item-value-more" @click="toDetail(log)">修改详情</span>
|
</template>
|
<template v-else-if="log.jnpfKey === 'sign'">
|
<span class="time-item-log-item-value-more line-through" v-if="log.oldData" @click="handlePreview(log.oldData)">旧签名</span>
|
<template v-if="log.newData">
|
修改为
|
<span class="time-item-log-item-value-more" @click="handlePreview(log.newData)">新签名</span>
|
</template>
|
</template>
|
<template v-else-if="log.jnpfKey === 'signature'">
|
<span class="time-item-log-item-value-more line-through" v-if="log.oldData" @click="handlePreview(log.oldData)">旧签章</span>
|
<template v-if="log.newData">
|
修改为
|
<span class="time-item-log-item-value-more" @click="handlePreview(log.newData)">新签章</span>
|
</template>
|
</template>
|
<template v-else>
|
<span class="time-item-log-item-value-old" v-if="log.oldData">{{ log.oldData }}</span>
|
<template v-if="log.newData">
|
修改为
|
<span class="time-item-log-item-value-new">{{ log.newData }}</span>
|
</template>
|
</template>
|
</template>
|
</div>
|
</div>
|
</div>
|
</div>
|
</TimelineItem>
|
</Timeline>
|
<jnpf-empty v-if="!list.length" />
|
</ScrollContainer>
|
<ChildLogModal @register="registerChildLogModal" />
|
</div>
|
</template>
|
