geg-gas-web/src/components/common/approStatusModal.vue

<template>
  <div>
    <BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" :showOkBtn="false" :showCancelBtn="false" @visible-change="handleVisibleChange">
        <BasicTable @register="registerTable"></BasicTable>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
    import { ref, computed, unref, nextTick  } from 'vue';
    import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
    import { BasicForm, useForm } from '/@/components/Form/index';
    import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { getLngPngApproRecords} from '/@/api/dayPlan/PngAppro';

    const { t } = useI18n();
    const columns: BasicColumn[] = [
      { dataIndex: 'userName', title: '审批人', align: 'left', sorter: true },
      { dataIndex: 'createDate', title: '审批时间', align: 'left', sorter: true },
      { dataIndex: 'cfmRej', title: '通过/驳回', align: 'left', sorter: true },
      { dataIndex: 'reply', title: '驳回原因', align: 'left', sorter: true },
    ];

    const emit = defineEmits(['success', 'register']);
    const isUpdate = ref(true);
    const id = ref('')
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {

        setModalProps({ confirmLoading: false });

        isUpdate.value = !!data?.isUpdate;
        id.value = data.id
    });

    const [registerTable, {reload}] = useTable({
        title: t('审批状态'),
        api: getLngPngApproRecords,
        columns,
        formConfig: {
          rowProps: {
            gutter: 16,
          },
          schemas: [],

          showResetButton: false,
          showSubmitButton: false
        },
        bordered: true,
        pagination: false,
        canResize: false,
        useSearchForm: false,
        showTableSetting: false,
        immediate: false, // 设置为不立即调用
        beforeFetch: (params) => {
          return (id.value);
        },
    });
     const handleVisibleChange = (visible: boolean) => {
      if (visible) {
        nextTick(() => {
          reload();
        });
      }
    };
    const getTitle = computed(() => (!unref(isUpdate) ? t('审批状态') : t('')));
</script>
<style lang="less" scoped>
  :deep(.ant-table-title) {
    display: none !important;
  }
</style>