geg-gas-web/src/views/generator/dev/components/CodeFirstModal.vue

// 界面优先
<template>
  <BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="form-modal">
    <template #title>
      <div class="step-form-form">
        <a href="https://fcdma.gdyditc.com/" target="_blank">
          <DesignLogo />
        </a>
        <span>•</span>
        <span>{{ t('代码生成器 - 界面优先') }}</span>
        <a-steps :current="current" size="mini">
          <a-step :title="t('表单设计')" />
          <a-step :title="t('表单事件')" />
          <a-step :title="t('结构配置')" />
          <a-step :title="t('界面设计')" />
          <a-step :title="t('代码预览')" />
          <a-step :title="t('菜单设置')" />
        </a-steps>
        <div class="btn-box">
          <ajax-error-icon />
          <a-button @click="handleStepPrev" v-show="current !== 0">{{ t('上一步') }}</a-button>
          <a-button type="primary" @click="handleSaveDraft" v-show="current > 3">{{
            t('保存草稿')
          }}</a-button>
          <a-button type="primary" @click="handleStepNext" v-show="current < 5">
            {{ t('下一步') }}
          </a-button>
          <a-dropdown placement="bottom" :arrow="{ pointAtCenter: true }">
              <a-button type="primary"  v-show="current === 5">
                {{ t('完成') }}
              </a-button>
              <template #overlay>
                <a-menu>
                    <a-menu-item>
                        <a href="javascript:;" @click="handleCodeGenerator('packAndDownload')">打包下载</a>
                    </a-menu-item>
                    <a-menu-item>
                        <a href="javascript:;" @click="handleCodeGenerator('genCodeToProject')">生成到项目中</a>
                    </a-menu-item>
                </a-menu>
              </template>
          </a-dropdown>
          <a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
        </div>
      </div>
    </template>
    <div class="step-container">
      <FormDesignStep ref="formDesignStepRef" v-show="current === 0" />
      <FormEventStep ref="formEventStepRef" v-show="current === 1" />
      <StructureConfigStep
        ref="structureConfigStepRef"
        :isUpdate="isUpdate"
        v-show="current === 2"
        @validate-table="handleStepNext"
      />
      <ViewDesignStep ref="viewDesignStepRef" :isUpdate="isUpdate" v-show="current === 3" />
      <PreviewCodeStep ref="previewCodeStepRef" v-show="current === 4" />
      <MenuConfigStep ref="menuConfigStepRef" v-show="current === 5" />
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, reactive, provide, Ref, defineAsyncComponent, watch, onUnmounted } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { GeneratorConfig } from '/@/model/generator/generatorConfig';
  import { TableInfo, noHaveTableAndField } from '/@/components/Designer';
  import {
    codeFirstGeneratorCode,
    getCodeTemplateInfo,
    saveDraftGeneratorCode,
    updateDraftGeneratorCode,
    downloadCodes,
  } from '/@/api/system/generator';
  import { FormProps } from '/@/components/Form';
  import { buildOption } from '/@/utils/helper/designHelper';
  import { buildCode } from '/@/utils/helper/generatorHelper';
  import { GeneratorModel, SaveDraftGeneratorModel } from '/@/api/system/generator/model';
  import { useUserStore } from '/@/store/modules/user';
  import * as antd from '/@/components/Designer/src/types';
  import { random } from 'lodash-es';
  import { LoadingBox } from '/@/components/ModalPanel/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { FormEventColumnConfig } from '/@/model/generator/formEventConfig';
  import { MenuConfig } from '/@/model/generator/menuConfig';
  import { FormJson } from '/@/model/generator/codeGenerator';
  import DesignLogo from '/@/components/ModalPanel/src/DesignLogo.vue';
  import AjaxErrorIcon from '/@/components/SecondDev/AjaxErrorIcon.vue';
  import useGlobalFlag from '/@/hooks/core/useGlobalFlag';
  import { downloadByData } from '/@/utils/file/download';
  import { dateUtil } from '/@/utils/dateUtil';

  const { t } = useI18n();
  const StructureConfigStep = defineAsyncComponent({
    loader: () => import('/@/components/CreateCodeStep/src/StructureConfigStep.vue'),
    loadingComponent: LoadingBox,
  });
  const FormDesignStep = defineAsyncComponent({
    loader: () => import('/@/components/CreateCodeStep/src/FormDesignStep.vue'),
    loadingComponent: LoadingBox,
  });
  const FormEventStep = defineAsyncComponent({
    loader: () => import('/@/components/CreateCodeStep/src/FormEventStep.vue'),
    loadingComponent: LoadingBox,
  });
  const ViewDesignStep = defineAsyncComponent({
    loader: () => import('/@/components/CreateCodeStep/src/ViewDesignStep.vue'),
    loadingComponent: LoadingBox,
  });
  const MenuConfigStep = defineAsyncComponent({
    loader: () => import('/@/components/CreateCodeStep/src/MenuConfigStep.vue'),
    loadingComponent: LoadingBox,
  });
  const PreviewCodeStep = defineAsyncComponent({
    loader: () => import('./PreviewCodeStep.vue'),
    loadingComponent: LoadingBox,
  });

  const globalFlag = useGlobalFlag();
  const { isEditorOpen } = globalFlag;
  const userStore = useUserStore();
  const templateId = ref();
  const current = ref(0);
  const isUpdate = ref(false);
  const formDesignStepRef = ref();
  const formEventStepRef = ref();
  const structureConfigStepRef = ref();
  const viewDesignStepRef = ref();
  const previewCodeStepRef = ref();
  const menuConfigStepRef = ref();
  const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm))); //FormDesignStep -> designer和StructureConfigStep页面使用
  const mainTableName = ref('table_' + random(10000, 99999));
  const emit = defineEmits(['close', 'register', 'success']);
  watch(current, () => {
    isEditorOpen.value = current.value === 0;
  });

  onUnmounted(() => {
    isEditorOpen.value = false;
  });

  const tableInfo = ref<TableInfo[]>([]);
  let generatorConfig = reactive<GeneratorConfig>({
    databaseId: '', //数据库id
    listConfig: {
      isLeftMenu: false,
      queryConfigs: [],
      leftMenuConfig: {
        // isTree: false,
        datasourceType: 'static',
        listFieldName: undefined,
        apiConfig: {},
        dictionaryItemId: undefined,
        menuName: '',
        parentIcon: '',
        childIcon: '',
        staticData: [],
      },
      columnConfigs: [],
      buttonConfigs: [],
      defaultOrder: true,
      isPage: true,
    },
    tableStructureConfigs: [],
    formJson: {} as FormJson,
    menuConfig: {} as MenuConfig,
    outputConfig: {
      creator: userStore.getUserInfo.name,
      isMenu: true,
      type: 1,
    },
    formEventConfig: {} as FormEventColumnConfig,
    isDataAuth: false,
    dataAuthList: [],
  });

  provide<GeneratorConfig>('generatorConfig', generatorConfig);
  provide<Ref<TableInfo[]>>('tableInfo', tableInfo);
  provide<Ref<number>>('current', current); //当前步骤
  provide<string>('designType', 'code');
  provide('widgetForm', widgetForm);
  provide<Ref<string>>('mainTableName', mainTableName);
  provide<Ref<boolean>>('isFieldUpper', ref(false));

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    isUpdate.value = data.isUpdate || false;
    templateId.value = data.isUpdate ? data.id : '';
    if (data.isUpdate) {
      let res = await getCodeTemplateInfo(data.id);
      if (res.content) {
        let content = JSON.parse(res.content);
        const {
          databaseId,
          listConfig,
          formJson,
          tableStructureConfigs,
          menuConfig,
          outputConfig,
          formEventConfig,
        } = content;
        generatorConfig.databaseId = databaseId;
        generatorConfig.listConfig = listConfig;
        formJson.list = formJson.list.filter((x) => x.type !== 'hiddenComponent');
        generatorConfig.formJson = formJson;
        generatorConfig.tableStructureConfigs = tableStructureConfigs;
        generatorConfig.menuConfig = menuConfig;
        generatorConfig.outputConfig = outputConfig;
        generatorConfig.formEventConfig = formEventConfig || ({} as FormEventColumnConfig);
        widgetForm.value = formJson;
        getMainTableFirst(formJson.list);
      }
    }
    setModalProps({
      confirmLoading: false,
      canFullscreen: false,
      defaultFullscreen: true,
      maskClosable: false,
      draggable: false,
      showOkBtn: false,
      showCancelBtn: false,
      footer: null,
      closable: false,
    });
  });

  //上一步
  function handleStepPrev() {
    current.value--;
  }
  //下一步
  async function handleStepNext() {
    const isOk = await stepValidate[current.value]();
    if (!isOk) {
      return;
    }
    current.value++;

   if (current.value === 5) {
      menuConfigStepRef.value.initStep();;
   }
  }

  async function handleSaveDraft() {
    menuConfigStepRef.value.getFormData();
    const data = generatorConfig as GeneratorModel;
    data.frontCode = buildCode(
      generatorConfig,
      tableInfo.value,
      buildOption(generatorConfig.formJson) as FormProps,
    );

    const params: SaveDraftGeneratorModel = {
      name: generatorConfig!.outputConfig!.className!,
      type: 1, // 0-数据优先 1-界面优先 2-简易模板
      content: JSON.stringify(data),
      remark: generatorConfig!.outputConfig!.comment!,
    };

    if (templateId.value) {
      params.id = templateId.value;
      await updateDraftGeneratorCode(params);
    } else {
      await saveDraftGeneratorCode(params);
    }
    handleClose();
    emit('success');
  }
  async function handleCodeGenerator(actionType:String) {
    const isOk = await stepValidate[5]();
    if (
      generatorConfig.formJson?.hiddenComponent &&
      generatorConfig.formJson?.hiddenComponent.length
    ) {
      generatorConfig.formJson.list.push(...generatorConfig.formJson.hiddenComponent);
    }

    if (!isOk) {
      return;
    }
    const data = generatorConfig as GeneratorModel;
    data.frontCode = buildCode(
      generatorConfig,
      tableInfo.value,
      buildOption(generatorConfig.formJson) as FormProps,
    );
    if (templateId.value) data.id = templateId.value;

    // await appGeneratorCode(
    //   buildAppCode(generatorConfig, buildAppFormProps(generatorConfig.formJson)),
    // );
    data.actionType=actionType;
    const result =await codeFirstGeneratorCode(data);
    if(data.actionType=="packAndDownload"&&result){
          const fileName=data.outputConfig.className+'_'+dateUtil(new Date()).format('YYYY-MM-DD_HH_mm_ss');
          const res = await downloadCodes({uuid:result});
          downloadByData(
              res.data,
              fileName+".zip"
          );
    }
    handleClose();
    emit('success');
  }

  const stepValidate = {
    //数据表配置 验证
    0: () => formDesignStepRef.value.validateStep(),
    1: () => formEventStepRef.value.validateStep(),
    2: () => structureConfigStepRef.value.validateStep(),
    3: () => viewDesignStepRef.value.validateStep(),
    4: () => previewCodeStepRef.value.validateStep(),
    5: () => menuConfigStepRef.value.validateStep(),
  };

  const handleClose = () => {
    closeModal();
    emit('close');
  };

  function getMainTableFirst(list) {
    list.some((x) => {
      if (['tab', 'grid', 'card'].includes(x.type)) {
        for (const child of x.layout!) {
          return getMainTableFirst(child.list);
        }
      } else if (x.type == 'table-layout') {
        for (const child of x.layout!) {
          for (const el of child.list) {
            return getMainTableFirst(el.children);
          }
        }
      } else {
        if (
          x.type !== 'form' &&
          x.type !== 'one-for-one' &&
          !noHaveTableAndField.includes(x.type)
        ) {
          mainTableName.value = x.bindTable;
          return true;
        }
      }
    });
  }
</script>
<style lang="less" scoped>
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
  @keyframes rotationReverse {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(-360deg);
    }
  }

  :deep(.ant-steps-item-process) {
    .ant-steps-item-icon {
      border: 2px solid #fff;
      line-height: 30px;
      animation: rotation 4s linear infinite;
      position: relative;

      &::before {
        border: 2px dashed #1890ff;
        content: '';
        width: 36px;
        height: 36px;
        display: block;
        border-radius: 50%;
        position: absolute;
        left: -4px;
        top: -4px;
      }

      .ant-steps-icon {
        display: inline-block;
        animation: rotationReverse 4s linear infinite;
      }
    }
  }

  .step-form-content {
    padding: 24px;
    background-color: @component-background;
  }

  .step-form-form {
    display: flex;
    align-items: center;
    font-weight: 400;

    a {
      margin-left: -16px;
    }

    span {
      font-size: 16px;
      margin: 0 20px 0 -5px;
      white-space: nowrap;
    }

    :deep(.ant-steps) {
      width: calc(100% - 750px);
    }

    :deep(.ant-steps-item-container) {
      padding: 3px 0 3px 3px;
    }

    .btn-box {
      position: absolute;
      right: 10px;

      :deep(.ant-btn) {
        margin-right: 10px;
      }
    }
  }

  .step-container {
    height: 100%;
  }

  .step1 {
    padding: 0 14px;
    box-sizing: border-box;
  }
</style>