global-web/src/views/platformBusiness/commissionContract/components/commissionContractModal.vue

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

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

  export default {
    name: "commissionContractModal",
    components:{
      BasicModal,
      commissionContractFormForm
    },
    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});
          isUpdate.value = !!data?.isUpdate;
          formDisabled.value = !data?.showFooter;
          title.value = data?.isUpdate ? (unref(formDisabled) ? '详情' : '编辑') : '新增';
          if (unref(isUpdate)) {
            formComponent.value.edit(data.record)
          }else{
            formComponent.value.add()
          }
      });

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

      function submitSuccess(){
        emit('success');
        closeModal();
      }

      return {
        registerModal,
        title,
        formComponent,
        formDisabled,
        handleSubmit,
        submitSuccess,
        SaleOrderDetailsRef,
      }
    }
  }
</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>