TALL-MUI-4/plugins/p-delivery-history/p-delivery-history.vue

<template>
  <!-- 交付物 -->
  <view class="mt-3">
    <view v-if="data.lists && data.lists.length">
      <view :key="list.id" v-for="list in data.lists">
        <view class="p-3 mt-3 shadow">
          <view class="text-gray-400 pb-2">
            <span class="mr-4">{{ list.name }}</span>
            <span>{{ $moment(+list.time).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </view>
          <view class="pb-2 flex flex-wrap overflow-hidden" v-if="list.content">
            <a :href="list.content" class="text-blue-500" target="_blank" v-if="CheckUrl(list.content)">{{ list.content }}</a>
            <span v-else>{{ list.content }}</span>
          </view>
          <view :key="checker.checkerId" v-for="checker in list.checkerList" class="mb-2">
            <view class="flex justify-between">
              <view class="font-bold">
                {{ checker.checkerName }}
                <span v-if="checker.isMine">(我)</span>
              </view>
              <view>
                <span class="text-blue-500" v-if="checker.status === 1">通过</span>
                <span class="text-red-500" v-if="checker.status === 2">驳回</span>
                <span class="ml-4" v-if="checker.status !== 0">{{ checker.score }}分</span>
                <span class="text-gray-400" v-if="checker.status === 0 && !checker.isMine">未审核</span>
                <view v-if="checker.status === 0 && checker.isMine">
                  <u-button @click="showScore(checker.checkId, 2)" class="mr-3" plain size="mini" type="error">驳回</u-button>
                  <u-button @click="showScore(checker.checkId, 1)" plain size="mini" type="primary">通过</u-button>
                </view>
              </view>
            </view>
            <view class="text-gray-400 text-xs mt-1">{{ checker.remark }}</view>
          </view>
        </view>
      </view>
    </view>
    <u-empty icon-size="90" mode="history" text="暂未上传交付物" v-else></u-empty>

    <!-- 评分 -->
    <!-- <uni-popup :maskClick="false" background-color="#fff" ref="popup" type="bottom"><PDeliverCheck @closeScore="closeScore" @submit="submit"></PDeliverCheck></uni-popup> -->
  </view>
</template>

<script setup>
import { ref, defineProps, reactive, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
// import UniPopup from '../../components/uni-popup/uni-popup.vue';
import PDeliverCheck from '../p-deliver-check/p-deliver-check.vue';

const props = defineProps({ task: { type: Object, default: null } });

const data = reactive({
  lists: [],
  show: false,
  options: null,
  loading: true, // 是否显示骨架屏组件
});

const store = useStore();
const projectId = computed(() => store.getters['project/projectId']);
const popup = ref(null);

onMounted(() => {
  getDeliverOfTask();
});

async function getDeliverOfTask() {
  try {
    const params = { projectId: projectId.value, taskSubId: props.task.id };
    const res = await uni.$u.api.queryDeliverOfTask(params);
    data.lists = res;
  } catch (error) {
    console.error('p-delivery-history.vue getDeliverOfTask error: ', error);
    uni.$ui.showToast(error.msg || '提交失败');
  }
}

function showScore(checkId, status) {
  // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
  popup.open('bottom');
  data.options = { checkId, status };
}

function closeScore() {
  popup.close('bottom');
}

async function submit(remark, score) {
  try {
    await checkDeliver(remark, score);
    closeScore();
  } catch (error) {
    console.error('error: ', error);
  }
}

/**
     * 检查交付物
     * @param {string} checkId 检查记录id
     * @param {string} projectId 项目id
     * @param {string} remark 评论
     * @param {number} score 分数
     * @param {number} status 检查状态(1-通过,2-驳回)
     */
async function checkDeliver(remark, score) {
  try {
    data.show = true;
    const { checkId, status } = data.options;
    const params = { checkId, projectId: projectId.value, status, remark, score };
    await uni.$u.api.checkDeliver(params);
    uni.$ui.showToast('交付物检查成功');
    data.options = null;
    getDeliverOfTask();
  } catch (error) {
    console.error('p-delivery-history.vue checkDeliver error: ', error);
    uni.$t.ui.showToast('交付物检查失败，请稍后重试');
    data.options = null;
  }
}

// 判断内容是不是链接
function CheckUrl(url) {
  const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(.)+$/;
  if (!reg.test(url)) {
    return false;
  }
  return true;
}
</script>

<style></style>