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