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"
          :form-disable="detailData.status !== 0"
          type="edit" />
      </view>
      <!-- <view class="work-order-bom-list" v-if="currentTab === 2">
        <report-form-copy 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"
              :disabled="
                detailData.status !== 0 && detailData.auditStatus !== 20
              ">
              {{ t("operation.save") }}
            </button>
          </view>
        </uni-col>
      </uni-row>
    </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 || {});
      }
    })
    .catch(res => {});
};
// 保存
const save = () => {
  reportFormEditRef.value.submitForm();
};

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

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