pms-app/pages/ruiDu/edit.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" />
      </view>
    </scroll-view>
    <!-- 底部总览 及 操作按钮 -->
    <view class="segmented-footer">
      <uni-row class="flex-row align-center justify-end">
        <uni-col :span="6">
          <view class="footer-btn">
            <button class="mini-btn" type="primary" @click="save">
              {{ t("operation.save") }}
            </button>
          </view>
        </uni-col>
      </uni-row>
    </view>
  </view>
</template>
<script setup>
import { onLoad, onReady, onBackPress } from "@dcloudio/uni-app";
import {
  reactive,
  ref,
  onMounted,
  onBeforeUnmount,
  nextTick,
  getCurrentInstance,
  watch,
} from "vue";
import dayjs from "dayjs";
// -------------------------- 引入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) => {});
};
// 保存
const save = () => {
  reportFormEditRef.value.submitForm();
};


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

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