TALL-MUI-4/pages/submitLog/submitLog.vue

<template>
  <theme class="min-h-full">
    <!-- 标题栏 -->
    <Title :titleName="deliverName" />

    <view class="tab-box fixed w-full flex justify-between items-center bg-white">
      <view class="tab-item text-center" :class="{'tab-curr': current === 0}" @click="changeTabs(0)">
        <view class="tab-title px-1 inline-block">提交</view>
      </view>
      <view class="tab-item text-center" :class="{'tab-curr': current === 1}" @click="changeTabs(1)">
        <view class="tab-title px-1 inline-block">审核</view>
      </view>
      <view class="tab-item text-center" :class="{'tab-curr': current === 2}" @click="changeTabs(2)">
        <view class="tab-title px-1 inline-block">历史记录</view>
      </view>
    </view>

    <view style="height: 44px;"></view>

    <!-- 提交 -->
    <view class="p-3 text-base">当前提交</view>

    <view class="px-3">
      <p-deliver-upload-second class="pb-2" v-if="deliverData" :deliverData="deliverData" :task="task" :url="url" @upload-success="getDeliverData" @edit-success="getDeliverData"></p-deliver-upload-second>
    </view>

    <!-- 审核 -->
    <view class="p-3 text-base">审核状态</view>

    <view class="px-3">
      <p-deliver-check-second-detail v-if="deliverData" :deliverData="deliverData" :task="task" :url="url" @submit-end="getDeliverData"></p-deliver-check-second-detail>
    </view>

    <!-- 历史记录 -->
    <view class="p-3 text-base">历史记录</view>

    <view class="px-3" v-if="listRef && listRef.length">
      <view class="bg-white mb-3 rounded-md p-3 text-gray-400" v-for="item in listRef">
        <!-- 插件名称和提交时间显示 -->
        <view class="flex justify-between mb-2">
          <view class="text-gray-800">{{ deliverName }}</view>
          <view class="ml-1 text-xs w-24 text-right">{{ dayjs(+item.submitTime).format('MM-DD HH:mm') }}</view>
        </view>
        <!-- 提交的链接 -->
        <DeliverLink v-if="item.details[0]" :link="item.details[0]" />
        <!-- 该插件物的审核人 -->
        <view class="mb-1 mt-3">审核人</view>
        <view class="flex justify-between mb-2" v-for="checkItem in item.checkerList">
          <view>
            <view class="mb-1 text-gray-800 font-semibold">
              {{ checkItem.checkerName }}
            </view>
            <view class="mb-1 text-xs">
              {{ checkItem.remark }}
            </view>
            <view class="mb-1 text-xs" v-if="+checkItem.checkTime > 0">
              {{ dayjs(+checkItem.checkTime).format('MM-DD HH:mm') }}
            </view>
          </view>

          <view class="text-center text-xs">
            <view v-if="checkItem.status == null" class="text-gray-400">待审核</view>
            <view v-else-if="checkItem.status === 1">
              <view class="text-green-600 mb-1">已通过</view>

              <zwp-ring-timing mode="chart" :value="checkItem.score" active-color="#F59E0B" :radius="30" :bar-width="4">
                <text class="text-yellow-500 font-medium">{{ checkItem.score }}</text>
              </zwp-ring-timing>
            </view>
            <view class="text-red-600" v-else>已驳回</view>
          </view>
        </view>
      </view>
    </view>

    <u-empty text="暂无记录" mode="history" style="padding-top: 120rpx" v-else></u-empty>
  </theme>
</template>

<script setup>
import { ref, provide } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import dayjs from 'dayjs';

const listRef = ref([]);
const deliverName = ref('');
const deliverData = ref(null);
const task = ref(null);
const checkers = ref(null);
const clickList = [
  {
    name: '提交'
  },
  {
    name: '审核'
  },
  {
    name: '历史记录'
  }
];
const current = ref(0);
const url = ref(null);

onLoad(options => {
  deliverData.value = JSON.parse(options.deliverData);
  provide('deliver', deliverData.value);
  task.value = JSON.parse(options.task);
  provide('task', task.value);
  checkers.value = options.checkers;
  url.value = options.url;

  // 根据交付物id获取上传记录
  (async function getHistory() {
    try {
      const param = { deliverId: options.deliverId };
      const data = await uni.$u.api.getDeliverHistory(param, options.url);
      deliverName.value = data.deliverName;
      listRef.value = data.deliverRecordList;
    } catch (error) {
      console.log('error: ', error);
      uni.$ui.showToast('获取交付物历史失败');
    }
  })();
});

function changeTabs(index) {
  current.value = index;
}

// 根据任务id获取交付物信息
async function getDeliverData() {

  try {
    const { id: taskId } = task.value;
    if (!taskId) return;
    const param = { taskId };
    const data = await uni.$u.api.getDeliverByTaskId(param, url.value);
    deliverData.value = data;
    
    getHistory();
  } catch (error) {
    console.log('error: ', error);
  }
}
</script>

<style scoped lang="scss">
  .tab-box {
    height: 44px;
    z-index: 999;

    .tab-item {
      width: calc(100% / 3);
      height: 44px;
      line-height: 40px;
    }

    .tab-curr {
      .tab-title {
        color: #2979ff;
        border-bottom: 3px solid #2979ff;
      }
    }
  }
</style>