geg-gas-web/src/views/form/design/index.vue

<template>
  <PageWrapper dense contentFullHeight fixed-height contentClass="flex">
    <a-tabs v-model:activeKey="activeKey" class="custom-tab white">
        <a-tab-pane key="1" tab="零代码表单">
            <ZeroCodeTypeTabPane ref="zeroCodeTypeTabPaneRef" :dicId="dicId"/>
        </a-tab-pane>
        <a-tab-pane key="2" tab="生成器表单">
            <GeneratorTypeTabPane ref="generatorTypeTabPaneRef"/>
        </a-tab-pane>
    </a-tabs>

    <DesignModal @register="registerDesignModal" @success="reload" />
    <HistoryModal @register="registerHistoryModal" />
    <CategoryModal title="表单" :dicId="dicId" @register="registerCategoryModal" @success="fetch" />
    <PreviewModal @register="registerPreviewModal" />
    <DataFirstModal
      v-if="state.isShowDataFirst"
      @register="registerDataFirst"
      @success="handleSuccess"
      @close="handleClose('isShowDataFirst')"
    />
    <CodeFirstModal
      v-if="state.isShowCodeFirst"
      @register="registerCodeFirst"
      @success="handleSuccess"
      @close="handleClose('isShowCodeFirst')"
    />
    <SimpleTemplateModal
      v-if="state.isShowSimpleTemplate"
      @register="registerSimpleTemplate"
      @success="handleSuccess"
      @close="handleClose('isShowSimpleTemplate')"
    />
    <CodeGeneratorModal
      v-if="state.isShowCodeGenerator"
      @register="registerCodeGenerator"
      @close="handleClose('isShowCodeGenerator')"
    />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { h, onMounted, ref, createVNode, reactive, computed,provide } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useModal } from '/@/components/Modal';
  import DesignModal from './components/DesignModal.vue';
  import HistoryModal from './components/HistoryModal.vue';
  import { CategoryModal } from '/@/components/CategoryModal';
  import PreviewModal from './components/PreviewModal.vue';
  import DataFirstModal from './components/components/DataFirstModal.vue';
  import CodeFirstModal from './components/components/CodeFirstModal.vue';
  import SimpleTemplateModal from './components/components/SimpleTemplateModal.vue';
  import CodeGeneratorModal from './components/CodeGeneratorModal.vue';
  import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import ZeroCodeTypeTabPane  from './tabpanes/ZeroCodeTypeTabPane.vue';
  import GeneratorTypeTabPane  from './tabpanes/GeneratorTypeTabPane.vue';
      
  const { t } = useI18n();

  const dicId = '1419276800524424444';
  const activeKey = ref('1');
  const zeroCodeTypeTabPaneRef=ref();
  const generatorTypeTabPaneRef=ref();
  const state = reactive({
    isShowDataFirst: true,
    isShowCodeFirst: true,
    isShowSimpleTemplate: true,
    isShowCodeGenerator: true,
  });
 
  const { notification } = useMessage();
  const formType=ref();

  const [registerDesignModal, { openModal: openDesignModal }] = useModal();
  const [registerHistoryModal, { openModal: openHistoryModal }] = useModal();
  const [registerCategoryModal, { openModal: openCategoryModal }] = useModal();
  const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
  const [registerDataFirst, { openModal: openDataFirstModal }] = useModal();
  const [registerCodeFirst, { openModal: openCodeFirstModal }] = useModal();
  const [registerSimpleTemplate, { openModal: openSimpleTemplateModal }] = useModal();
  const [registerCodeGenerator, { openModal: openCodeGeneratorModal }] = useModal();

  provide('openDesignModal', openDesignModal);
  provide('openHistoryModal', openHistoryModal);
  provide('openCategoryModal', openCategoryModal);
  provide('openPreviewModal', openPreviewModal);
  provide('openDataFirstModal', openDataFirstModal);
  provide('openCodeFirstModal', openCodeFirstModal);
  provide('openSimpleTemplateModal', openSimpleTemplateModal);
  provide('openCodeGeneratorModal', openCodeGeneratorModal);

  provide<number>('formType', formType);
  provide('noticeInfo', noticeInfo);

  function handleSuccess() {
      if(activeKey.value=='1'){
          zeroCodeTypeTabPaneRef.value.reload();
      }else if(activeKey.value=='2'){
          generatorTypeTabPaneRef.value.reload();
      }

  }

  function handleClose(modal) {
    state[modal] = !state[modal];
    setTimeout(() => {
      state[modal] = !state[modal];
    }, 100);
  }

  function noticeInfo(info: string) {
      notification.warning({
          message: t('提示'),
          description: t(`请先选择要{notice}的数据项`, { notice: info }),
      }); //提示消息
  }

</script>
<style lang="less" scoped>
  .toolbar-defined {
    :deep(.ant-btn) {
      margin-left: 8px;
    }
  }

   :deep(.custom-tab.white){
     background-color:white!important;
   }
  :deep(.ant-tabs-nav){
      padding:0px 10px!important;
   }

  // :deep(.ant-col-15) {
  //   flex: 0 0 calc(100% - 185px);
  //   max-width: initial;
  // }

  // :deep(.ant-table-wrapper .ant-table-title) {
  //   padding-bottom: 0 !important;
  // }

  // :deep(.ant-table-container) {
  //   height: calc(100% - 110px);
  // }
</style>