TALL-MUI-4/plugins/p-deliver-check/p-deliver-check.vue

<template>
  <view class="bg-white p-3 rounded-md">
    <!-- 交付物名称 -->
    <view class="flex justify-between" @click="collapsed = !collapsed">
      <text>
        {{ deliverData ? deliverData.deliverName : '' }}
      </text>
      <!-- 展开折叠按钮 -->
      <u-icon :name="collapsed ? 'arrow-up' : 'arrow-down'"></u-icon>
    </view>

    <view v-show="collapsed" class="mt-1">
      <!-- 提交人和时间信息 -->
      <view class="text-gray-400 text-xs">
        <text class="mr-4" v-if="deliverData && deliverData.submitMemberName">{{ deliverData.submitMemberName }}</text>
        <text v-if="deliverData && deliverData.submitTime"> {{ dayjs(+deliverData.submitTime).format('MM-DD HH:mm') }}</text>
      </view>

      <!-- 提交的链接信息 -->
      <view class="break-all text-blue-400 text-xs" v-if="deliverData && deliverData.details && deliverData.details[0]">
        {{ deliverData.details[0] }}
      </view>

      <!-- 审核人 标题 -->
      <view class="text-gray-400 flex justify-between mt-3">
        <text>审核</text>
        <text class="text-blue-400 text-sm" @click="moreRecords">更多记录</text>
      </view>

      <!-- 审核人 列表 -->
      <view v-if="deliverData && deliverData.checkerList">
        <!-- 遍历审核人信息 -->
        <view class="mt-2 text-sm flex justify-between" v-for="item in deliverData.checkerList">
          <view>
            <view class="font-semibold">{{ item.checkerName }}</view>
            <view class="text-xs text-gray-400">{{ item.remark }}</view>
            <view class="text-xs text-gray-400" v-if="+item.checkTime > 0">{{ dayjs(+item.checkTime).format('MM-DD HH:mm') }}</view>
          </view>

          <!-- 不是自己 显示审核状态 -->
          <view v-show="item.isMine !== 1" class="text-xs">
            <text v-if="item.status === 1" class="text-green-600"> 已通过 </text>
            <text v-else-if="item.status === 2" class="text-red-600"> 已驳回 </text>
            <text v-else class="text-gray-400"> 待审核 </text>
          </view>

          <!-- 自己是当前审核人 且未审核状态 -->
          <view v-show="item.isMine === 1 && item.status === null">
            <u-button size="mini" shape="circle" class="mr-4 h-1-4 leading-1-4" type="primary" @click="checkModal.mode = 'RESOLVE'">
              通过
            </u-button>
            <u-button size="mini" shape="circle" class="h-1-4 leading-1-4" type="error" @click="checkModal.mode = 'REJECT'">
              驳回
            </u-button>
          </view>

          <!-- 自己是审核人 且审核过 当前审核人的审核状态并展示得分情况 -->
          <view v-show="item.isMine === 1 && item.status !== null" class="text-xs">
            <view class="mb-1">
              <text v-if="item.status === 1" class="text-green-600"> 已通过 </text>
              <text v-else-if="item.status === 2" class="text-red-600"> 已驳回 </text>
            </view>
            <zwp-ring-timing mode="chart" :value="item.score" active-color="#F59E0B" radius="30" bar-width="4" v-if="item.score !== null">
              <text class="text-yellow-500 font-medium">{{ item.score }}</text>
            </zwp-ring-timing>
          </view>
        </view>
      </view>
    </view>

    <checkFormModal :data="checkModal" @hide="checkModal.mode = 'HIDE'" @submit-end="handleUpdateCheckStatus" />
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import checkFormModal from './check-form-modal.vue';

const props = defineProps({ task: { type: Object, default: () => {} } });
const store = useStore();
const collapsed = ref(false);
const deliverData = ref(null); // 获取到的审核信息

const checkModal = reactive({
  mode: 'HIDE', // HIDE->隐藏 RESOLVE->通过 REJECT->驳回
  deliverRecordId: () => (deliverData.value ? deliverData.value.deliverRecordId : ''), // 交付物记录id
});

// 获取当前审核信息
(async function getDeliverList() {
  try {
    const param = { taskId: props.task.id };
    deliverData.value = await uni.$u.api.getDeliverByTaskId(param);
  } catch (error) {
    console.error('getDeliverList error: ', error);
  }
})();

// 跳转到审核记录页面
function moreRecords() {
  const { deliverRecordId } = store.state.deliver;
  uni.navigateTo({ url: `/pages/checkerList/checkerList?deliverRecordId=${deliverRecordId}` });
}

/**
 *
 * @param {string} mode RESOLVE|REJECT
 */
function handleUpdateCheckStatus(mode) {
  const { checkerList } = deliverData.value;
  const target = checkerList.find(item => item.isMine);
  target.status = mode === 'RESOLVE' ? 1 : 2;
}
</script>