qmx_page_admin/src/views/create-order/components/uploadInvoiceModule.vue

<template>
  <div class="uploadInvoiceModule">
    <Dialog
      ref="uploadInvoiceDialog"
      customClass="upload-invoice-dialog"
      title="上传发票"
      :visible.sync="uploadDialogVisible"
      confirm-button-text="确定"
      @confirm="uploadSubmit"
      @cancel="uploadCancel"
      center
      width="60%"
    >
      <uploadInvoiceContent @update="updateStatus" ref="uploadInvoiceContentRef"></uploadInvoiceContent>
    </Dialog>
  </div>
</template>

<script>
import Dialog from '@/components/Dialog'
import uploadInvoiceContent from './uploadInvoiceContent.vue';
export default {
  name: "uploadInvoiceModule",
  components: {
    Dialog,
    uploadInvoiceContent
  },
  data() {
    return {
      uploadDialogVisible: false,
    }
  },
  methods: {
    uploadSubmit() {
      this.$refs.uploadInvoiceContentRef.submitForm('ruleForm')
    },
    uploadCancel() {
      this.uploadDialogVisible = false;
      this.$refs.uploadInvoiceContentRef.resetForm('ruleForm') 
    },
    updateStatus(status) {
      this.uploadDialogVisible = status; 
    }
  }
}
</script>

<style lang="scss" scoped>
.uploadInvoiceModule {
  ::v-deep {
    .upload-invoice-dialog {
      .el-dialog__body {
        max-height: 500px;
        overflow-y: scroll;
      }
    }
  }
}

</style>