tall4-pc/src/plugins/p-deliver/p-deliver-check.vue

<template>
  <div>
    <!-- 审核标题 -->
    <div class="flex justify-between items-center" @click="collapsed = !collapsed">
      <div>{{ deliverData ? deliverData.deliverName : '' }}审核状态</div>
      <DownOutlined v-if="!collapsed" />
      <UpOutlined v-else />
    </div>

    <!-- 审核结果 -->
    <div v-show="collapsed">
      <!-- 提交人和时间 -->
      <div class="my-2 flex justify-between items-center">
        <div class="text-gray-400 text-xs">
          <span class="mr-4" v-if="deliverData.submitMemberName">{{ deliverData.submitMemberName }}</span>
          <span v-if="deliverData.submitTime"> {{ dayjs(+deliverData.submitTime).format('MM-DD HH:mm') }}</span>
        </div>

        <span class="text-blue-400 text-xs text-right" @click="openDeliverHistory">历史交付物</span>
      </div>

      <div @click="openLink" class="break-all text-blue-400 text-xs my-1" v-if="deliverData.details && deliverData.details[0]">
        {{ deliverData.details[0] }}
      </div>

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

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

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

          <!-- 自己是当前审核人 且未审核状态 -->
          <div v-show="item.isMine === 1 && (item.status === null || item.status === 0)">
            <a-button size="small" shape="round" class="mr-4 h-1-4 leading-1-4" type="primary" @click="checkModal.mode = 'RESOLVE'">
              通过
            </a-button>
            <a-button size="small" shape="round" class="h-1-4 leading-1-4" type="primary" danger @click="checkModal.mode = 'REJECT'">
              驳回
            </a-button>
          </div>

          <!-- 自己是审核人 且审核过 当前审核人的审核状态并展示得分情况 -->
          <div v-show="item.isMine === 1 && item.status > 0" class="text-xs">
            <div class="mb-1">
              <span v-if="item.status === 1" class="text-green-600"> 已通过 </span>
              <span v-else-if="item.status === 2" class="text-red-600"> 已驳回 </span>
            </div>

            <a-progress v-if="item.score" type="circle" :percent="item.score" strokeColor="#FA8C16" :width="40" :strokeWidth="10">
              <template #format="percent">
                <span
                  class="inline-block text-center text-white text-sm rounded-full"
                  style="background: #fa8c16; width: 24px; height: 24px; line-height: 24px"
                >
                  {{ percent }}
                </span>
              </template>
            </a-progress>
          </div>
        </div>
      </div>
    </div>

    <checkFormModal :data="checkModal" @hide="checkModal.mode = 'HIDE'" @submit-end="$emit('check-success')" />
  </div>
</template>

<script setup>
import { ref, reactive, inject, defineEmits } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
import checkFormModal from './check-form-modal.vue';

const store = useStore();
const deliverData = inject('deliver');
const collapsed = ref(false); // 展开/关闭
defineEmits(['check-success']);

// 交付物链接
function openLink() {
  window.open(deliverData.details[0], '_blank');
}

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

// 历史交付物
function openDeliverHistory() {
  const { deliverId } = deliverData.value;
  store.commit('task/setDeliverId', deliverId); // 设置交付物id
  store.commit('task/setTaskDetailParams', ''); // 设置详情页参数
  store.commit('task/setTaskDetailUrl', ''); // 设置详情页链接
  store.commit('task/setTaskDetailShow', 'deliverHistory'); // 设置内置组件关键字（根据关键字判断显示的详情页）
}

// 审核记录
function openMoreRecords() {
  const { deliverRecordId } = deliverData.value;
  store.commit('task/setDeliverRecordId', deliverRecordId); // 设置交付物记录id
  store.commit('task/setTaskDetailParams', ''); // 设置详情页参数
  store.commit('task/setTaskDetailUrl', ''); // 设置详情页链接
  store.commit('task/setTaskDetailShow', 'auditRecords'); // 设置内置组件关键字（根据关键字判断显示的详情页）
}
</script>

<style scoped>
.ant-progress .ant-progress-inner {
  width: 40px !important;
  height: 40px !important;
}
</style>