pms-app/pages/ruiDu/approval.vue

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import { ref, getCurrentInstance } from 'vue';
  // -------------------------- 引入api接口 start--------------------------
  import { getRuiDuReportDetail, approveRdDailyReport } from '@/api/ruiDu.js';
  // -------------------------- 引入api接口 end--------------------------
  // --------------------------引入组件----------------------------------
  import reportInfo from './compontents/report-info.vue';
  import reportForm from './compontents/report-form.vue';
  // --------------------------引用全局变量$t-------------------------------
  const { appContext } = getCurrentInstance();
  const t = appContext.config.globalProperties.$t;
  // ----------------------------选项卡----------------------------------
  // 选项卡标题
  const tabTitles = ref([t('ruiDu.taskInfo'), t('ruiDu.reportInfo')]);
  const currentTab = ref(0);
  const styleType = ref('text');
  const activeColor = ref('#004098');
  const onClickTabItem = e => {
    currentTab.value = e.currentIndex;
  };
  // --------------------------页面变量----------------------------------
  // 报告ID
  const reportId = ref('');
  // 报告详情数据
  const detailData = ref({});
  // 表单组件ref
  const reportFormEditRef = ref(null);
  // --------------------------生命周期函数----------------------------------
  onLoad(option => {
    // 页面加载
    reportId.value = option.id; // 获取页面参数
    // 获取日报详情
    getReportDetail();
  });
  // -------------------------- 页面方法 --------------------------
  // 获取日报详情
  const getReportDetail = () => {
    getRuiDuReportDetail({ id: reportId.value })
      .then(res => {
        if (res.code === 0) {
          detailData.value = Object.assign(detailData.value, res.data || {});
          console.log('🚀 ~ getReportDetail ~ detailData.value:', detailData.value);
        }
      })
      .catch(res => {});
  };

  const infoRef = ref(null);

  const loading = ref(false);

  const handleApproval = async type => {
    loading.value = true;

    try {
      const data = {
        attachments: detailData.value.attachments || [],
        opinion: infoRef.value.approvalOpinion,
        auditStatus: type === 'pass' ? 20 : 30,
        companyId: detailData.value.companyId,
        costCenter: detailData.value.costCenter || '',
        dynamicFields: detailData.value.dynamicFields || {},
        deptId: detailData.value.deptId,
        deviceIds: detailData.value.deviceIds,
        startTime: `${detailData.value.startTime[0].toString().padStart(2, '0')}:${detailData.value.startTime[1]
          .toString()
          .padStart(2, '0')}`,
        endTime: `${detailData.value.endTime[0].toString().padStart(2, '0')}:${detailData.value.endTime[1]
          .toString()
          .padStart(2, '0')}`,
        externalRental: detailData.value.externalRental,
        faultDowntime: detailData.value.faultDowntime || '',
        malfunction: detailData.value.malfunction,
        nextPlan: detailData.value.nextPlan,
        id: detailData.value.id,
        ...(detailData.value.platformId ? { platformId: detailData.value.platformId } : {}),
        platformWell: detailData.value.platformWell,
        productionStatus: detailData.value.productionStatus,
        projectDepartment: detailData.value.projectDepartment || '',
        rdStatus: detailData.value.rdStatus,
        techniqueIds: detailData.value.techniqueIds,
        taskId: detailData.value.taskId,
        timeRange: ['1970-01-01T00:00:00.008Z', '1970-01-01T00:00:00.008Z'],
      };

      await approveRdDailyReport(data);

      uni.showToast({
        title: type === 'pass' ? '审批通过' : '审批驳回',
        icon: 'success',
      });

      uni.reLaunch({ url: '/pages/home/index' });
    } catch (error) {
      console.log('🚀 ~ handleApproval ~ error:', error);
      uni.showToast({ title: t('operation.failed'), icon: 'none' });
    } finally {
      loading.value = false;
    }
  };

  // -------------------------- 页面方法 end --------------------------
</script>

<template>
  <view class="page ridu-edit-page">
    <view class="segmented-header">
      <uni-segmented-control
        :current="currentTab"
        :values="tabTitles"
        :style-type="styleType"
        :active-color="activeColor"
        @clickItem="onClickTabItem" />
    </view>
    <scroll-view scroll-y="true" class="segmented-content">
      <!-- 工单信息 -->
      <view class="work-order-info" v-show="currentTab === 0">
        <report-info
          ref="infoRef"
          :report-id="reportId"
          :report-data="detailData"
          approval
          :form-disable="detailData.auditStatus !== 10" />
      </view>
      <!-- 保养项列表 -->
      <view class="work-order-bom-list" v-show="currentTab === 1">
        <report-form ref="reportFormEditRef" :report-id="reportId" :report-data="detailData" :form-disable="true" />
      </view>
    </scroll-view>

    <view class="segmented-footer" v-if="detailData.auditStatus === 10">
      <view class="footer-btn">
        <button :disabled="loading" :loading="loading" class="mini-btn" type="primary" @click="handleApproval('pass')">
          审批通过
        </button>
        <button :disabled="loading" :loading="loading" class="mini-btn" type="warn" @click="handleApproval('reject')">
          审批驳回
        </button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/style/work-order-segmented.scss';
  .page {
    padding-bottom: 0;
  }

  .footer-btn {
    display: flex;
    justify-content: flex-end;
    padding: 0 32px;

    gap: 0 32px;

    & > uni-button {
      margin: 0;
    }
  }
</style>