tall-mui-3-project/src/plugins/p-delivery-history/p-delivery-history.vue

<template>
  <!-- 交付物 -->
  <view class="mt-3">
    <view v-if="lists && lists.length">
      <view :key="list.id" v-for="list in 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">
            <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 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>
import { mapGetters } from 'vuex';
import UniPopup from '../../components/uni-popup/uni-popup.vue';
import PDeliverCheck from '../p-deliver-check/p-deliver-check.vue';

export default {
  name: 'p-delivery-history',
  props: { task: { type: Object, default: null } },
  components: { PDeliverCheck, UniPopup },
  data() {
    return {
      lists: [],
      show: false,
      options: null,
      loading: true, // 是否显示骨架屏组件
    };
  },

  computed: mapGetters('project', ['projectId']),

  mounted() {
    this.getDeliverOfTask();
  },

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

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

    closeScore() {
      this.$refs.popup.close('bottom');
    },

    async submit(remark, score) {
      try {
        await this.checkDeliver(remark, score);
        this.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 checkDeliver(remark, score) {
      try {
        this.show = true;
        const { projectId, options } = this;
        const { checkId, status } = options;
        const params = { checkId, projectId, status, remark, score };
        await this.$u.api.checkDeliver(params);
        this.$t.ui.showToast('交付物检查成功');
        this.options = null;
        this.getDeliverOfTask();
      } catch (error) {
        console.error('p-delivery-history.vue checkDeliver error: ', error);
        this.$t.ui.showToast('交付物检查失败，请稍后重试');
        this.options = null;
      }
    },

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

<style></style>