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"
          type="approval" />
      </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>