global-web/src/views/purchase/purchaseOrder/components/PurchaseOrderFormModal.vue

<template>
  <div ref="SaleOrderDetailsRef">
    <BasicModal v-bind="$attrs" @register="registerModal" :title="title" width="95%"  @ok="handleSubmit" :getContainer ='()=>$refs.SaleOrderDetailsRef'>
      <PurchaseOrderFormForm ref="formComponent" :formDisabled="formDisabled" :formBpm="false" @success="submitSuccess"></PurchaseOrderFormForm>
    </BasicModal>
  </div>
</template>

<script lang="ts">
  import { ref, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import PurchaseOrderFormForm from './PurchaseOrderFormForm.vue';

  export default {
    name: "SaleOrderFormModal",
    components:{
      BasicModal,
      PurchaseOrderFormForm
    },
    emits:['register','success'],
    setup(_p, {emit}){
      const formComponent = ref()
      const isUpdate = ref(true);
      const formDisabled = ref(false);
      const title = ref('')
      var SaleOrderDetailsRef = ref()
      //表单赋值
      const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        setModalProps({confirmLoading: false,showCancelBtn:data?.showFooter,showOkBtn:data?.showFooter});
        if(!data.isCopy){
          isUpdate.value = !!data?.isUpdate;
          formDisabled.value = !data?.showFooter;
          title.value = data?.isUpdate ? (unref(formDisabled) ? '详情' : '编辑') : '新增';
          title.value = data.isRevise?'修订':title.value;
          if (unref(isUpdate)) {
            formComponent.value.edit(data.record)
          }else{
            formComponent.value.add()
          }
        }else{
          isUpdate.value = !!data?.isUpdate;
          formDisabled.value = !data?.showFooter;
          title.value = '新增'
          formComponent.value.copy(data.data,data.mainId)
        }
      });

      function handleSubmit() {
        formComponent.value.submitForm();
      }

      function submitSuccess(){
        emit('success');
        closeModal();
      }
      function getVersionDetail(record){
        setModalProps({open: true,showOkBtn:false});
        title.value ='详情'
        formDisabled.value = true
        setTimeout(()=>{
          formComponent.value.VersionDetail(record)
        },100)
      }

      return {
        registerModal,
        title,
        formComponent,
        formDisabled,
        handleSubmit,
        submitSuccess,
        SaleOrderDetailsRef,
        getVersionDetail
      }
    }
  }
</script>
<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
  /deep/.ant-modal {
    // width: 520px;
    padding-bottom: 0;
    margin-top: -10px;
    height: 100%;
}
</style>