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>
      <!-- <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">
              {{ 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>