refactor: codegen

yudao-ui-admin-vue3/src/views/infra/codegen/EditTable.vue

@@ -1,13 +1,34 @@
+<template>
+  <ContentDetailWrap title="代码生成" @back="push('/infra/codegen')">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基本信息" name="basicInfo">
+        <BasicInfoForm ref="basicInfoRef" :basicInfo="tableCurrentRow" />
+      </el-tab-pane>
+      <el-tab-pane label="字段信息" name="cloum">
+        <CloumInfoForm ref="cloumInfoRef" :info="cloumCurrentRow" />
+      </el-tab-pane>
+      <el-tab-pane label="生成信息" name="genInfo">
+        <GenInfoForm ref="genInfoRef" :genInfo="tableCurrentRow" />
+      </el-tab-pane>
+    </el-tabs>
+    <template #right>
+      <XButton type="primary" :title="t('action.save')" :loading="loading" @click="submitForm()" />
+    </template>
+  </ContentDetailWrap>
+</template>
 <script setup lang="ts">
 import { ref, unref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElTabs, ElTabPane } from 'element-plus'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
 import { ContentDetailWrap } from '@/components/ContentDetailWrap'
 import { BasicInfoForm, CloumInfoForm, GenInfoForm } from './components'
-import { ElTabs, ElTabPane, ElMessage } from 'element-plus'
 import { getCodegenTableApi, updateCodegenTableApi } from '@/api/infra/codegen'
-import { useRouter, useRoute } from 'vue-router'
-import { useI18n } from '@/hooks/web/useI18n'
 import { CodegenTableVO, CodegenColumnVO, CodegenUpdateReqVO } from '@/api/infra/codegen/types'
-const { t } = useI18n()
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
 const { push } = useRouter()
 const { query } = useRoute()
 const tableCurrentRow = ref<CodegenTableVO>()
@@ -26,10 +47,6 @@ const activeName = ref('cloum')
 const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
 const genInfoRef = ref<ComponentRef<typeof GenInfoForm>>()
 const cloumInfoRef = ref(null)
-const parentMenuId = ref<number>()
-const menu = (id: number) => {
-  parentMenuId.value = id
-}
 const submitForm = async () => {
   const basicInfo = unref(basicInfoRef)
   const genInfo = unref(genInfoRef)
@@ -38,17 +55,12 @@ const submitForm = async () => {
   if (basicForm && genForm) {
     const basicInfoData = (await basicInfo?.getFormData()) as CodegenTableVO
     const genInfoData = (await genInfo?.getFormData()) as CodegenTableVO
-    if (parentMenuId.value) {
-      genInfoData.parentMenuId = parentMenuId.value
-    } else {
-      genInfoData.parentMenuId = 0
-    }
     const genTable: CodegenUpdateReqVO = {
       table: Object.assign({}, basicInfoData, genInfoData),
       columns: cloumCurrentRow.value
     }
     await updateCodegenTableApi(genTable)
-    ElMessage.success(t('common.updateSuccess'))
+    message.success(t('common.updateSuccess'))
     push('/infra/codegen')
   }
 }
@@ -56,21 +68,3 @@ onMounted(() => {
   getList()
 })
 </script>
-<template>
-  <ContentDetailWrap title="代码生成" @back="push('/infra/codegen')">
-    <el-tabs v-model="activeName">
-      <el-tab-pane label="基本信息" name="basicInfo">
-        <BasicInfoForm ref="basicInfoRef" :basicInfo="tableCurrentRow" />
-      </el-tab-pane>
-      <el-tab-pane label="字段信息" name="cloum">
-        <CloumInfoForm ref="cloumInfoRef" :info="cloumCurrentRow" />
-      </el-tab-pane>
-      <el-tab-pane label="生成信息" name="genInfo">
-        <GenInfoForm ref="genInfoRef" :genInfo="tableCurrentRow" @menu="menu" />
-      </el-tab-pane>
-    </el-tabs>
-    <template #right>
-      <XButton type="primary" :title="t('action.save')" :loading="loading" @click="submitForm()" />
-    </template>
-  </ContentDetailWrap>
-</template>

yudao-ui-admin-vue3/src/views/infra/codegen/codegen.data.ts

@@ -1,7 +1,7 @@
 import { reactive } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { required } from '@/utils/formRules'
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
 const { t } = useI18n() // 国际化
 
 // 表单校验
@@ -12,54 +12,45 @@ export const rules = reactive({
 })
 
 // CrudSchema
-const crudSchemas = reactive<CrudSchema[]>([
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: 'seq',
+  action: true,
+  actionWidth: '400px',
+  columns: [
     {
-    label: t('common.index'),
+      title: '表名称',
-    field: 'id',
-    type: 'index',
-    isForm: false,
-    isDetail: false
-  },
-  {
-    label: '表名称',
       field: 'tableName',
       isSearch: true
     },
     {
-    label: '表描述',
+      title: '表描述',
       field: 'tableComment',
       isSearch: true
     },
     {
-    label: '实体',
+      title: '实体',
       field: 'className',
       isSearch: true
     },
     {
-    label: t('common.createTime'),
+      title: t('common.createTime'),
       field: 'createTime',
+      formatter: 'formatDate',
       isForm: false,
       search: {
         show: true,
-      component: 'DatePicker',
+        itemRender: {
-      componentProps: {
+          name: 'XDataTimePicker'
-        type: 'datetimerange',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
         }
       }
     },
     {
-    label: t('common.updateTime'),
+      title: t('common.updateTime'),
       field: 'updateTime',
+      formatter: 'formatDate',
       isForm: false
-  },
-  {
-    label: t('table.action'),
-    field: 'action',
-    width: '350px',
-    isForm: false,
-    isDetail: false
     }
-])
+  ]
-export const { allSchemas } = useCrudSchemas(crudSchemas)
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

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>

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>

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>

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'])

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>

yudao-ui-admin-vue3/src/views/infra/codegen/index.vue

@@ -1,24 +1,77 @@
+<template>
+  <ContentWrap>
+    <!-- 列表 -->
+    <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
+      <template #toolbar_buttons>
+        <XButton
+          type="primary"
+          preIcon="ep:zoom-in"
+          :title="t('action.import')"
+          v-hasPermi="['infra:codegen:create']"
+          @click="openImportTable()"
+        />
+      </template>
+      <template #actionbtns_default="{ row }">
+        <XTextButton
+          preIcon="ep:view"
+          :title="t('action.preview')"
+          v-hasPermi="['infra:codegen:query']"
+          @click="handlePreview(row.id)"
+        />
+        <XTextButton
+          preIcon="ep:edit"
+          :title="t('action.edit')"
+          v-hasPermi="['infra:codegen:update']"
+          @click="handleUpdate(row.id)"
+        />
+        <XTextButton
+          preIcon="ep:delete"
+          :title="t('action.del')"
+          v-hasPermi="['infra:codegen:delete']"
+          @click="handleDelete(row.id)"
+        />
+        <XTextButton
+          preIcon="ep:refresh"
+          :title="t('action.sync')"
+          v-hasPermi="['infra:codegen:update']"
+          @click="handleSynchDb(row.id)"
+        />
+        <XTextButton
+          preIcon="ep:download"
+          :title="t('action.generate')"
+          v-hasPermi="['infra:codegen:download']"
+          @click="handleGenTable(row.id)"
+        />
+      </template>
+    </vxe-grid>
+  </ContentWrap>
+  <ImportTable ref="importRef" @ok="handleQuery()" />
+  <Preview ref="previewRef" />
+</template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import dayjs from 'dayjs'
+import { useRouter } from 'vue-router'
+import { VxeGridInstance } from 'vxe-table'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+import { useVxeGrid } from '@/hooks/web/useVxeGrid'
+import download from '@/utils/download'
 import * as CodegenApi from '@/api/infra/codegen'
-import { useTable } from '@/hooks/web/useTable'
 import { CodegenTableVO } from '@/api/infra/codegen/types'
 import { allSchemas } from './codegen.data'
-import { useI18n } from '@/hooks/web/useI18n'
 import { ImportTable, Preview } from './components'
-import download from '@/utils/download'
+
-import { useRouter } from 'vue-router'
-import { useMessage } from '@/hooks/web/useMessage'
-const message = useMessage()
 const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
 const { push } = useRouter()
-// ========== 列表相关 ==========
+// 列表相关的变量
-const { register, tableObject, methods } = useTable<CodegenTableVO>({
+const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
+const { gridOptions, getList, deleteData } = useVxeGrid<CodegenTableVO>({
+  allSchemas: allSchemas,
   getListApi: CodegenApi.getCodegenTablePageApi,
-  delListApi: CodegenApi.deleteCodegenTableApi
+  deleteApi: CodegenApi.deleteCodegenTableApi
 })
-const { getList, setSearchParams, delList } = methods
+
 // 导入操作
 const importRef = ref()
 const openImportTable = () => {
@@ -30,8 +83,8 @@ const handlePreview = (row: CodegenTableVO) => {
   previewRef.value.show(row)
 }
 // 编辑操作
-const handleEditTable = (row: CodegenTableVO) => {
+const handleUpdate = (rowId: number) => {
-  push('/codegen/edit?id=' + row.id)
+  push('/codegen/edit?id=' + rowId)
 }
 // 同步操作
 const handleSynchDb = (row: CodegenTableVO) => {
@@ -49,88 +102,12 @@ const handleGenTable = async (row: CodegenTableVO) => {
   const res = await CodegenApi.downloadCodegenApi(row.id)
   download.zip(res, 'codegen-' + row.className + '.zip')
 }
-// 查询操作
+// 删除操作
-const handleQuery = () => {
+const handleDelete = async (rowId: number) => {
-  getList()
+  await deleteData(xGrid, rowId)
+}
+// 查询操作
+const handleQuery = async () => {
+  await getList(xGrid)
 }
-// ========== 初始化 ==========
-getList()
 </script>
-<template>
-  <!-- 搜索工作区 -->
-  <ContentWrap>
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
-  <ContentWrap>
-    <!-- 操作工具栏 -->
-    <div class="mb-10px">
-      <el-button type="primary" v-hasPermi="['infra:codegen:create']" @click="openImportTable">
-        <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.import') }}
-      </el-button>
-    </div>
-    <!-- 列表 -->
-    <Table
-      :columns="allSchemas.tableColumns"
-      :selection="false"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      @register="register"
-    >
-      <template #createTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #updateTime="{ row }">
-        <span>{{ dayjs(row.updateTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #action="{ row }">
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['infra:codegen:preview']"
-          @click="handlePreview(row)"
-        >
-          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.preview') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['infra:codegen:update']"
-          @click="handleEditTable(row)"
-        >
-          <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['infra:codegen:delete']"
-          @click="delList(row.id, false)"
-        >
-          <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['infra:codegen:update']"
-          @click="handleSynchDb(row)"
-        >
-          <Icon icon="ep:refresh" class="mr-1px" /> {{ t('action.sync') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['infra:codegen:download']"
-          @click="handleGenTable(row)"
-        >
-          <Icon icon="ep:download" class="mr-1px" /> {{ t('action.generate') }}
-        </el-button>
-      </template>
-    </Table>
-  </ContentWrap>
-  <ImportTable ref="importRef" @ok="handleQuery" />
-  <Preview ref="previewRef" />
-</template>