pms-app/pages/ruiyingx/approval.vue

<script setup>
  import { ref } from 'vue';
  import { approvalIotRyDailyReport } from '@/api/ruiying';
  import Form from './components/form.vue';

  const formRef = ref(null);

  const formLoading = ref(false);

  const submitForm = async auditStatus => {
    if (!formRef.value) return;

    try {
      // await formRef.value.formRef.validate();
      const form = formRef.value.form;

      // if (form.nonProductionTime && !form.nptReason) {
      //   uni.showToast({
      //     title: '非生产时间大于 0 时，必须选择非生产时间原因',
      //     icon: 'none',
      //   });
      //   return;
      // }

      formLoading.value = true;

      const { opinion, id } = form;
      const data = { auditStatus, opinion, id };

      await approvalIotRyDailyReport(data);

      formRef.value.loadDetail(form.id);

      uni.showToast({
        title: auditStatus === 20 ? '通过成功' : '拒绝成功',
        icon: 'success',
      });
    } catch (error) {
      console.log('error :>> ', error);
    } finally {
      formLoading.value = false;
    }
  };
</script>

<template>
  <view class="page">
    <scroll-view scroll-y="true" class="segmented-content">
      <Form ref="formRef" type="approval"></Form>
    </scroll-view>
    <view class="segmented-footer">
      <view class="footer-btn">
        <button
          :disabled="formLoading || formRef?.form.auditStatus !== 10"
          :loading="formLoading"
          class="mini-btn"
          type="primary"
          @click="submitForm(20)">
          审批通过
        </button>
        <button
          :disabled="formLoading || formRef?.form.auditStatus !== 10"
          :loading="formLoading"
          class="mini-btn"
          type="warn"
          @click="submitForm(30)">
          审批驳回
        </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;
    align-items: center;
    padding: 0 32px;
    height: 100%;

    gap: 0 32px;

    & > uni-button {
      margin: 0;
    }
  }

  :deep(.mini-btn) {
    height: 38px !important;
    font-size: 16px !important;
  }
</style>