3.公司里面的弹框

提交数据的弹框

<template>
  <BasicModal  v-bind="$attrs" :width="ModalWidthEnum.COMMON" @register="registerModal" :canFullscreen="false" :title="getTitle" @ok="handleSubmit" >
    <BasicForm
      @register="registerForm"
      :schemas="schedulerModelFormSchema">
    </BasicForm>

    <BasicTable @register="registerTable" >
    </BasicTable>
  </BasicModal>
</template>

<script setup lang="ts">
import {computed, onMounted, reactive, ref, unref} from 'vue';
import {
  schedulerModelColumns,schedulerModelFormSchema
} from './data';
import {useMessage} from '@/hooks/web/useMessage';
import {BasicModal, useModalInner} from '@/components/Modal';
import {useI18n} from "@/hooks/web/useI18n";
import { BasicForm,useForm } from '@/components/Form';
import {BasicTable, useTable} from "@/components/Table";
import {listTransShipmentApi} from "@/api/tms/transShipment/transShipment.api";
import { ModalWidthEnum, shipmentStatusEnum} from "@/enums";
import {
  inTransSchedulerApi,
  sendTransSchedulerApi
} from "@/api/tms/transScheduler/transScheduler.api";
import moment from "moment";
// 定义国际化
const { t } = useI18n();
const emit = defineEmits(['success']);
const {createMessage} = useMessage();
const isUpdate = ref(true);

/** 标题初始化 */
const getTitle = computed(() => (t('public.describe.confirmDelivery')));
const variable = reactive<any>({
  ids: [],
  fatherParam:{},
});

const pageFunction=(params)=>{
  return listTransShipmentApi({schedulerNo:variable.fatherParam.schedulerNo});
}


/** 明细列表 **/
const [registerTable, { reload, getForm,getSelectRows, }] = useTable({
  api: pageFunction,
  striped: true,
  useSearchForm: false,
  rowKey: 'id',
  bordered: true,
  showIndexColumn: true,
  clickToRowSelect: true,
  columns:schedulerModelColumns,
  showTableSetting: false,
  rowSelection: {
    type: 'checkbox',
    onChange: (selectedRowKeys, selectRows) => {
      variable.ids = selectedRowKeys as string[];
    },
  },
});

const [registerForm,
  {
    setFieldsValue: setFieldsValue,
    resetFields: resetFields,
    validate: validate,
    cleanFields:cleanFields,
    clearValidate:clearValidate,
    getFieldsValue:getFieldsValue,
  }] = useForm({
  labelWidth: 120,
  showActionButtonGroup: false,
  actionColOptions: {
    span: 24,
  },
});


const [registerModal, {setModalProps, closeModal,changeOkLoading,changeLoading}] = useModalInner(async (data) => {
  variable.fatherParam=JSON.parse(JSON.stringify(data.fatherParam))
  reload()
  //设置当前时间
  let current=moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
  await setFieldsValue(variable.fatherParam)
  await setFieldsValue({actDeliveryTime:current})

});


/** 提交按钮 */
async function handleSubmit() {
  let rows = getSelectRows()
  if (rows.length < 1) {
    createMessage.error(t('public.prompted.pleaseSelectOneRecord'))
    variable.confirmLoading=false
    return
  }
  let data=JSON.parse(JSON.stringify(rows))
  changeOkLoading(true);
  changeLoading(true);
  let allData=getFieldsValue();
  allData.schedulerDetailList=data
  sendTransSchedulerApi(allData).then(() => {
    createMessage.success(t('public.prompted.successfullySend'))
    closeModal();
  }).finally(() => {
    changeOkLoading(false);
    changeLoading(false);
  })

}
</script>

使用弹框

 <!--弹框 -->
  <XXXModal @register="registerModal" @success="handleModalSuccess"></XXXModal>

引入

在这里插入代码片

注册

const [registerModal, { openModal,closeModal }] = useModal();
  /** 弹框成功事件 **/
const handleModalSuccess=(records)=>{
  
  
  
}

打开弹窗

 openModal(true, {fatherParam:record});

单纯查询的弹框

<template>
  <BasicModal  v-bind="$attrs" :width="ModalWidthEnum.COMMON" @register="registerModal" :canFullscreen="false" :title="getTitle" @ok="handleSubmit" >
    <BasicTable @register="registerTable" >

      <template #form-customerId="{ model, field }">
        <CustomerApiModal v-model:value="model[field]"   />
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script setup lang="ts">
import {computed, onMounted, reactive, ref, unref} from 'vue';
import {

  unSchedulerUnSchedulerModelColumns,
  UnSchedulerModelSearchFormSchema,
} from './data';
import {useMessage} from '@/hooks/web/useMessage';
import {BasicModal, useModalInner} from '@/components/Modal';
import {useI18n} from "@/hooks/web/useI18n";
import {BasicTable, useTable} from "@/components/Table";
import {listTransShipmentApi} from "@/api/tms/transShipment/transShipment.api";
import {
  inTransSchedulerApi,
} from "@/api/tms/transScheduler/transScheduler.api";
import { ModalWidthEnum, shipmentStatusEnum} from "@/enums";
import CustomerApiModal from "@/views/base/customer/CustomerApiModal.vue";
// 定义国际化
const { t } = useI18n();
const emit = defineEmits(['success']);
const {createMessage} = useMessage();
const isUpdate = ref(true);

/** 标题初始化 */
const getTitle = computed(() => (t('public.describe.confirmDelivery')));
const variable = reactive<any>({
  ids: [],
  fatherParam:{},
  shipmentIds:[],
});

const pageFunction=(params)=>{
  return listTransShipmentApi({...params,neIdList:variable.shipmentIds,status:shipmentStatusEnum.COMFIRM});
}


/** 托运单明细列表 **/
const [registerTable, { reload, getForm,getSelectRows }] = useTable({
  api: pageFunction,
  striped: true,
  useSearchForm: true,
  rowKey: 'id',
  bordered: true,
  showIndexColumn: true,
  clickToRowSelect: true,
  columns:unSchedulerUnSchedulerModelColumns,
  formConfig: {
    labelWidth: 120,
    schemas: UnSchedulerModelSearchFormSchema,
  },
  showTableSetting: false,
  rowSelection: {
    type: 'checkbox',
    onChange: (selectedRowKeys, selectRows) => {
      variable.ids = selectedRowKeys as string[];
    },
  },
});



const [registerModal, {setModalProps, closeModal,changeOkLoading,changeLoading}] = useModalInner(async (data) => {
  variable.shipmentIds=data.shipmentIds
  variable.fatherParam=JSON.parse(JSON.stringify(data.fatherParam))
   reload()
});


/** 提交按钮 */
async function handleSubmit() {
  let rows = getSelectRows()
  if (rows.length < 1) {
    createMessage.error(t('public.prompted.pleaseSelectOneRecord'))
    variable.confirmLoading=false
    return
  }

  let data=JSON.parse(JSON.stringify(rows))
  emit("success",data)
}
</script>

使用弹框

 <!--弹框 -->
  <XXXModal @register="registerModal" @success="handleModalSuccess"></XXXModal>

引入

在这里插入代码片

注册

const [registerModal, { openModal,closeModal }] = useModal();
  /** 弹框成功事件 **/
const handleModalSuccess=(records)=>{
  
  
  
}

打开弹窗

 openModal(true, {fatherParam:record});