8 changed files with 268 additions and 15 deletions
@ -0,0 +1,173 @@ |
|||
<template> |
|||
<div class="relative"> |
|||
<div class="text-base text-center font-semibold" style="height: 44px; line-height: 44px; background: rgb(248, 248, 248)"> |
|||
交付物上传记录 |
|||
</div> |
|||
|
|||
<div class="tab-box absolute w-full flex justify-between items-center bg-white"> |
|||
<div |
|||
class="tab-item text-center cursor-pointer" |
|||
v-for="(item, index) in clickList" |
|||
:key="index" |
|||
:class="{ 'tab-curr': item.index === current }" |
|||
@click="changeTabs(item.index)" |
|||
> |
|||
<div class="tab-title px-1 inline-block">{{ item.name }}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 占位 --> |
|||
<div style="height: 44px"></div> |
|||
|
|||
<div id="deliverCon" class="scroll-box"> |
|||
<!-- 提交 --> |
|||
<div class="p-3 text-base scroll-0">当前提交</div> |
|||
|
|||
<div class="px-3"> |
|||
<p-deliver-upload-second |
|||
class="p-3 bg-white rounded-md" |
|||
v-if="deliverData" |
|||
:deliverData="deliverData" |
|||
:task="task" |
|||
@upload-success="getDeliverData" |
|||
></p-deliver-upload-second> |
|||
</div> |
|||
|
|||
<!-- 审核 --> |
|||
<div class="p-3 text-base scroll-1">审核状态</div> |
|||
|
|||
<div class="px-3"> |
|||
<p-deliver-check-second |
|||
v-if="deliverData" |
|||
:deliverData="deliverData" |
|||
:task="task" |
|||
@submit-end="getDeliverData" |
|||
></p-deliver-check-second> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { useStore } from 'vuex'; |
|||
import { ref, onMounted, computed, watch, provide } from 'vue'; |
|||
import { getDeliverByTaskId } from 'apis'; |
|||
import { message } from 'ant-design-vue'; |
|||
import pDeliverUploadSecond from '@/plugins/p-deliver-second/p-deliver-upload-second.vue'; |
|||
import pDeliverCheckSecond from '@/plugins/p-deliver-second/p-deliver-check-second.vue'; |
|||
|
|||
const store = useStore(); |
|||
const detailParams = computed(() => store.state.task.detailParams); // 参数 |
|||
const sessionDetailParams = sessionStorage.getItem('detailParams'); // 参数 |
|||
const clickList = ref([ |
|||
{ |
|||
index: 0, |
|||
name: '提交', |
|||
}, |
|||
{ |
|||
index: 1, |
|||
name: '审核', |
|||
}, |
|||
{ |
|||
index: 2, |
|||
name: '历史记录', |
|||
}, |
|||
]); |
|||
const current = ref(0); // 当前点击的按钮 |
|||
|
|||
const deliverData = ref(null); // 交付物信息 |
|||
const task = ref(null); // 任务信息 |
|||
|
|||
// 设置详情页参数 |
|||
if (sessionDetailParams && !detailParams.value) { |
|||
const params = JSON.parse(sessionDetailParams); |
|||
store.commit('task/setTaskDetailParams', params); |
|||
provide('deliver', params.deliver); |
|||
provide('task', params.task); |
|||
} |
|||
|
|||
if (detailParams.value) { |
|||
deliverData.value = detailParams.value.deliver; |
|||
task.value = detailParams.value.task; |
|||
provide('deliver', deliverData); |
|||
provide('task', task.value); |
|||
} |
|||
|
|||
// 监听参数变化 |
|||
watch(detailParams, () => { |
|||
deliverData.value = detailParams.value.deliver; |
|||
task.value = detailParams.value.task; |
|||
}); |
|||
|
|||
onMounted(() => { |
|||
document.getElementById('deliverCon').addEventListener('scroll', handleScroll, true); |
|||
}); |
|||
|
|||
// 点击改变当前显示内容 |
|||
function changeTabs(index) { |
|||
current.value = index; |
|||
} |
|||
|
|||
// 向上向下滚动 |
|||
function handleScroll(e) { |
|||
// 变量scrollTop是滚动条滚动时，距离顶部的距离 |
|||
const { scrollTop } = e.target; |
|||
// 变量windowHeight是可视区的高度 |
|||
const windowHeight = e.target.clientHeight; |
|||
// 变量scrollHeight是滚动条的总高度 |
|||
const { scrollHeight } = e.target; |
|||
|
|||
console.log('scrollTop', scrollTop); |
|||
} |
|||
|
|||
// 根据任务id获取交付物信息 |
|||
async function getDeliverData() { |
|||
try { |
|||
const { url } = store.state.projects.project; |
|||
const { id: taskId } = task.value; |
|||
if (!taskId) return; |
|||
const param = { param: { taskId } }; |
|||
const data = await getDeliverByTaskId(param, url); |
|||
deliverData.value = data; |
|||
} catch (error) { |
|||
message.info(error); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.tab-box { |
|||
height: 44px; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.tab-box .tab-item { |
|||
width: calc(100% / 3); |
|||
height: 44px; |
|||
line-height: 40px; |
|||
} |
|||
|
|||
.tab-box .tab-curr .tab-title { |
|||
color: #2979ff; |
|||
border-bottom: 3px solid #2979ff; |
|||
} |
|||
|
|||
.time-box { |
|||
width: 120px; |
|||
} |
|||
|
|||
.time-box view { |
|||
height: 15px; |
|||
border-radius: 2px; |
|||
margin: 2px 0; |
|||
} |
|||
|
|||
.time-box .duration-value { |
|||
height: 15px; |
|||
line-height: 15px; |
|||
font-size: 12px; |
|||
top: 0; |
|||
left: 0; |
|||
color: #333; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue