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

<template>
  <view class="bg-white rounded-md">
    <view class="p-3 flex justify-between" @click="collapsed = !collapsed">
      <span class="relative p-1">
        <!-- <u-badge :is-dot="true" is-center></u-badge> -->
        {{ checkData ? checkData.deliverName : '' }}
      </span>
      <!-- 展开折叠按钮 -->
      <u-icon :name="collapsed ? 'arrow-up' : 'arrow-down'"></u-icon>
    </view>

    <view class="p-3 pt-0" v-show="collapsed">
      <!-- 提交人和时间信息 -->
      <view class="text-gray-400">
        <!-- <span class="mr-2" v-if="checkData && checkData.submitter">{{ checkData.submitter }}</span> -->
        <span v-if="checkData && checkData.submitTime"> {{ dayjs(+checkData.submitTime).format('MM-DD HH:mm') }}</span>
      </view>
      <!-- 提交的链接信息 -->
      <view class="w-64 break-all text-blue-400 py-2" v-if="checkData && checkData.details && checkData.details[0]">
        {{ checkData.details[0] }}
      </view>
      <!-- 审核人信息 -->
      <view class="text-gray-400 flex justify-between">
        <span>审核</span>
        <span class="text-blue-400" @click="moreRecords">更多记录</span>
      </view>
      <view class="px-2" v-if="checkData && checkData.checkerList">
        <!-- 遍历审核人信息 -->
        <view class="mt-3 text-sm flex justify-between" v-for="item in checkData.checkerList">
          <view>
            <view>{{ item.checkerName }}</view>
            <view class="my-1">{{ item.remark }}</view>
            <view class="my-1" v-if="item.checkTime > 0">{{ dayjs(+item.checkTime).format('MM-DD HH:mm') }}</view>
          </view>

          <!-- 不是自己 -->
          <view v-show="item.isMine !== 1">{{ item.status === null ? '待审核' : item.status === 1 ? '已通过' : '已驳回' }}</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="approvedModal = true">通过</u-button>
            <u-button size="mini" shape="circle" class="h-1-4 leading-1-4" type="error" @click="rebutModal = true">驳回</u-button>
          </view>

          <!-- 自己是审核人 且审核过 当前审核人的审核状态并展示得分情况 -->
          <view v-show="item.isMine === 1 && item.status !== null" class="text-sm">
            <view>
              {{ item.status == '1' ? '已通过' : '已驳回' }}
            </view>
            <view v-if="item.score > 0">
              <u-circle-progress active-color="#FA8C16" :percent="item.score" width="90" border-width="7" class="mt-2">
                <view class="u-progress-content">
                  <view class="progress-dot text-white text-center">{{ item.score }}</view>
                </view>
              </u-circle-progress>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 审核通过的modal -->
    <u-mask :show="approvedModal" @click="approvedModal = false">
      <view class="warp">
        <view class="rect2" @tap.stop>
          <!-- 通过modal的标题 -->
          <view class="text-center my-7 font-semibold"> 审核通过 </view>
          <!-- 评分 -->
          <view class="flex justify-between mx-5">
            <u-number-box v-model="score" size="30" input-width="50" :max="10" :min="0" :step="0.01"></u-number-box>
            <view class="w-32 pt-4">
              <u-slider v-model="score" active-color="#34D399" :max="10" :min="0" :step="0.01"></u-slider>
            </view>
          </view>
          <view>
            <textarea
              class="border-solid border border-gray-300 m-5 w-58 h-16 p-2 rounded-md"
              placeholder="请输入通过建议"
              maxlength="30"
              v-model="adviceRef"
            ></textarea>
            <view class="common-list">
              <view v-for="item in commonWords" class="h-12 leading-12 w-62 mx-5" @click="adviceRef = item">
                {{ item }}
              </view>
            </view>
          </view>
          <view class="flex justify-around h-12 mt-7 justify-self-stretch box-modal-border">
            <view class="leading-12 flex-1 text-center delete-modal-border" @click="approvedModal = false"> 取消 </view>
            <view class="text-blue-700 leading-12 flex-1 text-center" @click="confirmAdvice"> 确定 </view>
          </view>
        </view>
      </view>
    </u-mask>

    <!-- 审批驳回的modal -->
    <u-mask :show="rebutModal" @click="rebutModal = false">
      <view class="warp">
        <view class="rect3" @tap.stop>
          <!-- 通过modal的标题 -->
          <view class="text-center my-6 font-semibold"> 审核驳回 </view>
          <view>
            <textarea
              class="border-solid border border-gray-300 m-5 w-58 h-16 p-2 rounded-md"
              placeholder="请输入通过建议"
              maxlength="30"
              v-model="rebutRef"
            ></textarea>
            <view class="common-list">
              <view v-for="item in rebutWords" class="h-12 leading-12 w-62 mx-5" @click="rebutRef = item">
                {{ item }}
              </view>
            </view>
          </view>
          <view class="flex justify-around h-12 mt-7 justify-self-stretch box-modal-border">
            <view class="leading-12 flex-1 text-center delete-modal-border" @click="rebutModal = false"> 取消 </view>
            <view class="text-blue-700 leading-12 flex-1 text-center" @click="confirmReject"> 确定 </view>
          </view>
        </view>
      </view>
    </u-mask>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';

const props = defineProps({ task: { type: Object, default: () => {} } });
const store = useStore();

const projectId = computed(() => store.getters['project/projectId']);
const collapsed = ref(false);
const checkData = ref(null); // 获取到的审核信息
const approvedModal = ref(false); // 审核通过的modal
const rebutModal = ref(false); // 审核驳回的modal
const score = ref(10); // 分数
const adviceRef = ref(''); // 审核通过的审批语
const rebutRef = ref(''); // 审核驳回的审批语
const commonWords = ['加油，再接再厉！', '很棒！', '不错，很详细！', '加油，再接再厉']; // 审核通过常用的审批语
const rebutWords = ['不详细', '还有需要改进的地方', '驳回审批1', '驳回审批2']; // 审核驳回常用的审批语

// 交付物记录id
const deliverRecordId = computed(() => store.state.deliver.deliverRecordId);

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

// 审核通过发送相关请求
function confirmAdvice() {
  // TODO:发送请求
  // console.log('确定')
  try {
    const param = {
      projectId: projectId.value,
      deliverRecordId: deliverRecordId.value,
      type: 1,
      remark: adviceRef.value,
      score: score.value,
    };
    uni.$u.api.checkDeliver(param);
  } catch (error) {
    console.log('error: ', error);
  }
  approvedModal.value = false;
}

// 审核驳回发送相关请求
function confirmReject() {
  // TODO:发送请求
  try {
    const param = {
      projectId: projectId.value,
      deliverRecordId: deliverRecordId.value,
      type: 2,
      remark: rebutRef.value,
      score: '',
    };
    uni.$u.api.checkDeliver(param);
  } catch (error) {
    console.log('error: ', error);
  }
  rebutModal.value = false;
}

// 跳转到审核记录页面
function moreRecords() {
  uni.navigateTo({ url: '/pages/checkerList/checkerList' });
}
</script>

<style scoped lang="scss">
.progress-dot {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  line-height: 50rpx;
  background-color: #fa8c16;
}
</style>