pms-app/pages/ruiDu/detail.vue

<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 :report-id="reportId" :report-data="detailData" />
      </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="detail" />
      </view>
    </scroll-view>
  </view>
</template>
<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, getCurrentInstance } from "vue";
// -------------------------- 引入api接口 start--------------------------
import { getRuiDuReportDetail } 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 => {});
};

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

<style lang="scss" scoped>
@import "@/style/work-order-segmented.scss";
.page {
  padding-bottom: 0;
}
.segmented-content {
  height: calc(100% - 45px - 20px);
}
</style>