refactor: codegen

2022-11-23 13:59:13 +08:00
parent b1a2dfb09b
commit 7ff6db9ac7
8 changed files with 227 additions and 281 deletions
--- a/yudao-ui-admin-vue3/src/views/infra/codegen/components/BasicInfoForm.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/codegen/components/BasicInfoForm.vue
@@ -1,11 +1,13 @@
+<template>
+  <Form :rules="rules" @register="register" />
+</template>
 <script setup lang="ts">
 import { PropType, reactive, watch } from 'vue'
 import { required } from '@/utils/formRules'
-import { CodegenTableVO } from '@/api/infra/codegen/types'
-import { Form } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
+import { Form } from '@/components/Form'
 import { FormSchema } from '@/types/form'
-
+import { CodegenTableVO } from '@/api/infra/codegen/types'
 const props = defineProps({
  basicInfo: {
    type: Object as PropType<Nullable<CodegenTableVO>>,
@@ -85,6 +87,3 @@ defineExpose({
  getFormData: methods.getFormData
 })
 </script>
-<template>
-  <Form :rules="rules" @register="register" />
-</template>
--- a/yudao-ui-admin-vue3/src/views/infra/codegen/components/CloumInfoForm.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/codegen/components/CloumInfoForm.vue
@@ -1,28 +1,3 @@
-<script setup lang="ts">
-import { onMounted, PropType, ref } from 'vue'
-import { ElInput, ElSelect, ElOption } from 'element-plus'
-import { CodegenColumnVO } from '@/api/infra/codegen/types'
-import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type'
-import { DictTypeVO } from '@/api/system/dict/types'
-const props = defineProps({
-  info: {
-    type: Array as unknown as PropType<CodegenColumnVO[]>,
-    default: () => null
-  }
-})
-/** 查询字典下拉列表 */
-const dictOptions = ref<DictTypeVO[]>()
-const getDictOptions = async () => {
-  const res = await listSimpleDictTypeApi()
-  dictOptions.value = res
-}
-onMounted(async () => {
-  await getDictOptions()
-})
-defineExpose({
-  info: props.info
-})
-</script>
 <template>
  <vxe-table ref="dragTable" :data="info" stripe :column-config="{ resizable: true }">
    <vxe-column title="字段列名" field="columnName" fixed="left" width="80" />
@@ -123,3 +98,29 @@ defineExpose({
    </vxe-column>
  </vxe-table>
 </template>
+<script setup lang="ts">
+import { onMounted, PropType, ref } from 'vue'
+import { ElInput, ElSelect, ElOption } from 'element-plus'
+import { DictTypeVO } from '@/api/system/dict/types'
+import { CodegenColumnVO } from '@/api/infra/codegen/types'
+import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type'
+
+const props = defineProps({
+  info: {
+    type: Array as unknown as PropType<CodegenColumnVO[]>,
+    default: () => null
+  }
+})
+/** 查询字典下拉列表 */
+const dictOptions = ref<DictTypeVO[]>()
+const getDictOptions = async () => {
+  const res = await listSimpleDictTypeApi()
+  dictOptions.value = res
+}
+onMounted(async () => {
+  await getDictOptions()
+})
+defineExpose({
+  info: props.info
+})
+</script>
--- a/yudao-ui-admin-vue3/src/views/infra/codegen/components/GenInfoForm.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/codegen/components/GenInfoForm.vue
@@ -1,10 +1,12 @@
+<template>
+  <Form :rules="rules" @register="register" />
+</template>
 <script setup lang="ts">
 import { onMounted, PropType, reactive, ref, watch } from 'vue'
-import { required } from '@/utils/formRules'
 import { Form } from '@/components/Form'
-import { handleTree } from '@/utils/tree'
-import { ElTreeSelect } from 'element-plus'
 import { useForm } from '@/hooks/web/useForm'
+import { required } from '@/utils/formRules'
+import { handleTree } from '@/utils/tree'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { listSimpleMenusApi } from '@/api/system/menu'
 import { CodegenTableVO } from '@/api/infra/codegen/types'
@@ -32,7 +34,6 @@ const rules = reactive({
 })
 const templateTypeOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)
 const sceneOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)
-const treeRef = ref<InstanceType<typeof ElTreeSelect>>()
 const menuOptions = ref<any>([]) // 树形结构
 const getTree = async () => {
  const res = await listSimpleMenusApi()
@@ -100,8 +101,12 @@ const schema = reactive<FormSchema[]>([
  {
    label: '上级菜单',
    field: 'parentMenuId',
+    component: 'TreeSelect',
    componentProps: {
-      optionsSlot: true
+      data: menuOptions,
+      props: menuProps,
+      checkStrictly: true,
+      nodeKey: 'id'
    },
    labelMessage: '分配到指定菜单下，例如 系统管理',
    colProps: {
@@ -112,12 +117,6 @@ const schema = reactive<FormSchema[]>([
 const { register, methods, elFormRef } = useForm({
  schema
 })
-const parentMenuId = ref<number>()
-//子组件像父组件传值
-const emit = defineEmits(['menu'])
-const handleNodeClick = () => {
-  emit('menu', parentMenuId.value)
-}

 // ========== 初始化 ==========
 onMounted(async () => {
@@ -140,18 +139,3 @@ defineExpose({
  getFormData: methods.getFormData
 })
 </script>
-<template>
-  <Form :rules="rules" @register="register">
-    <template #parentMenuId>
-      <el-tree-select
-        v-model="parentMenuId"
-        ref="treeRef"
-        node-key="id"
-        :props="menuProps"
-        :data="menuOptions"
-        check-strictly
-        @change="handleNodeClick"
-      />
-    </template>
-  </Form>
-</template>
--- a/yudao-ui-admin-vue3/src/views/infra/codegen/components/ImportTable.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/codegen/components/ImportTable.vue
@@ -48,16 +48,16 @@
    </template>
  </XModal>
 </template>
-
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
-import { getSchemaTableListApi, createCodegenListApi } from '@/api/infra/codegen'
-import { ElForm, ElFormItem, ElInput, ElSelect, ElOption } from 'element-plus'
-import { getDataSourceConfigListApi, DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
-import type { DatabaseTableVO } from '@/api/infra/codegen/types'
 import { VxeTableInstance } from 'vxe-table'
+import { ElForm, ElFormItem, ElInput, ElSelect, ElOption } from 'element-plus'
+import type { DatabaseTableVO } from '@/api/infra/codegen/types'
+import { getSchemaTableListApi, createCodegenListApi } from '@/api/infra/codegen'
+import { getDataSourceConfigListApi, DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const emit = defineEmits(['ok'])
--- a/yudao-ui-admin-vue3/src/views/infra/codegen/components/Preview.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/codegen/components/Preview.vue
@@ -1,12 +1,47 @@
+<template>
+  <XModal title="预览" v-model="preview.open">
+    <div class="flex">
+      <el-card class="w-1/4" :gutter="12" shadow="hover">
+        <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
+          <el-tree
+            ref="treeRef"
+            node-key="id"
+            :data="preview.fileTree"
+            :expand-on-click-node="false"
+            default-expanded-keys="[0]"
+            highlight-current
+            @node-click="handleNodeClick"
+          />
+        </el-scrollbar>
+      </el-card>
+      <el-card class="w-3/4" style="margin-left: 10px" :gutter="12" shadow="hover">
+        <el-tabs v-model="preview.activeName">
+          <el-tab-pane
+            v-for="item in previewCodegen"
+            :label="item.filePath.substring(item.filePath.lastIndexOf('/') + 1)"
+            :name="item.filePath"
+            :key="item.filePath"
+          >
+            <XTextButton style="float: right" :title="t('common.copy')" @click="copy(item.code)" />
+            <pre>{{ item.code }}</pre>
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </div>
+  </XModal>
+</template>
 <script setup lang="ts">
 import { reactive, ref, unref } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { ElCard, ElTree, ElTabs, ElTabPane } from 'element-plus'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
 import { handleTree2 } from '@/utils/tree'
-import { ElCard, ElTree, ElTabs, ElTabPane, ElMessage } from 'element-plus'
 import { previewCodegenApi } from '@/api/infra/codegen'
 import { CodegenTableVO, CodegenPreviewVO } from '@/api/infra/codegen/types'
-import { useI18n } from '@/hooks/web/useI18n'
-import { useClipboard } from '@vueuse/core'
-const { t } = useI18n()
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
 // ======== 显示页面 ========
 const preview = reactive({
  open: false,
@@ -101,11 +136,11 @@ const handleFiles = (datas: CodegenPreviewVO[]) => {
 const copy = async (text: string) => {
  const { copy, copied, isSupported } = useClipboard({ source: text })
  if (!isSupported) {
-    ElMessage.error(t('common.copyError'))
+    message.error(t('common.copyError'))
  } else {
    await copy()
    if (unref(copied)) {
-      ElMessage.success(t('common.copySuccess'))
+      message.success(t('common.copySuccess'))
    }
  }
 }
@@ -113,38 +148,3 @@ defineExpose({
  show
 })
 </script>
-<template>
-  <XModal title="预览" v-model="preview.open">
-    <div class="flex">
-      <el-card class="w-1/4" :gutter="12" shadow="hover">
-        <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
-          <el-tree
-            ref="treeRef"
-            node-key="id"
-            :data="preview.fileTree"
-            :expand-on-click-node="false"
-            default-expand-all
-            highlight-current
-            @node-click="handleNodeClick"
-          />
-        </el-scrollbar>
-      </el-card>
-      <el-card class="w-3/4" style="margin-left: 10px" :gutter="12" shadow="hover">
-        <el-tabs v-model="preview.activeName">
-          <el-tab-pane
-            v-for="item in previewCodegen"
-            :label="item.filePath.substring(item.filePath.lastIndexOf('/') + 1)"
-            :name="item.filePath"
-            :key="item.filePath"
-          >
-            <el-button link style="float: right" @click="copy(item.code)">
-              {{ t('common.copy') }}
-            </el-button>
-            <pre>{{ item.code }}</pre>
-            <!-- <pre><code class="language-html" v-html="highlightedCode(item)"></code></pre> -->
-          </el-tab-pane>
-        </el-tabs>
-      </el-card>
-    </div>
-  </XModal>
-</template>