feat: 预览代码

README.md

@@ -1,18 +1,20 @@
 # Vue 3 + TypeScript + Vite + element-plus
 
 #### svg 操作栏图标
+
 ```angular2html
 操作按钮组，加上class为 ml-2,如果是单个按钮，则不用调整
 text-icon-color: 按钮颜色，正常/暗黑模式
 text-lg: 按钮大小
 cursor-pointer: 鼠标呈现手指样式
 ```
+
 ```
 # 查看
 <LeIcon class="text-lg text-icon-color" icon-class="icon-processInfo-icons--view-light" />
 
-# 分支按钮 
-<LeIcon class="text-lg ml-2 text-icon-color" icon-class="icon-processInfo-hugeicons--git-merge" /> 
+# 分支按钮
+<LeIcon class="text-lg ml-2 text-icon-color" icon-class="icon-processInfo-hugeicons--git-merge" />
 
 # 编辑
 <LeIcon class="text-lg ml-2 text-icon-color icon-mage--editicon-mage--edit" icon-class="icon-processInfo-mage--edit" />
@@ -36,7 +38,6 @@ cursor-pointer: 鼠标呈现手指样式
 <LeIcon class="text-lg text-icon-color" icon-class="icon-processInfo-navigation" />
 ```
 
-
 ```
 
 <el-button plain :icon="Plus" @click="addHandler" type="primary">新增</el-button>

src/api/codeGenerate/database.ts

@@ -27,9 +27,9 @@ function codePreviewApi(data: any): AxiosPromise {
 /**
  * 代码生成 - 下载代码
  */
-function codeDownloadApi(data: any): AxiosPromise {
+function codeDownloadApi(data: any) {
 	return request({
-		url: api.codeDownload,
+		url: api.codeDownload + `?t=${new Date().getTime()}`,
 		method: 'post',
 		data
 	})

src/views/codeGenerate/database/CodeGenDrawer.vue

@@ -1,93 +1,82 @@
 <!-- views/codeGenerate/database/components/CodeGenDrawer.vue -->
 
 <template>
-  <el-drawer
-    v-model="drawerVisible"
-		class="local-launch_drawer-wrap"
-		:close-on-click-modal="false"
-    :title="title"
-    :size="size"
-    :direction="direction"
-  >
-    <div class="drawer-content">
-      <!-- 在这里添加抽屉的内容 -->
-      <el-form
-        ref="formRef"
-        :model="form"
-        :rules="rules"
-        label-width="120px"
-				label-position="top"
-        class="code-gen-form"
-      >
-        <el-form-item label="数据源" prop="databaseId">
-          <el-select v-model="form.databaseId" placeholder="请选择数据源">
-            <el-option
-							v-for="option in dataSourceOptions"
-							:key="option.id"
-							:label="option.title"
-							:value="option.id"
-						/>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="作者" prop="author">
-          <el-input v-model="form.author" placeholder="请输入作者名称" />
-        </el-form-item>
-
-        <el-form-item label="项目模块" prop="module">
-          <el-input v-model="form.module" placeholder="请输入项目模块" />
-        </el-form-item>
-
-        <el-form-item label="表名" prop="tableName">
-          <el-input v-model="form.tableName" placeholder="请输入表名" />
-        </el-form-item>
-
-        <el-form-item label="模板" prop="templateIds">
-          <el-checkbox-group v-model="form.templateIds">
-            <el-checkbox
-              v-for="template in templateOptions"
-              :key="template.id"
-              :label="template.id"
-            >
-              {{ template.tplName }}
-            </el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <template #footer>
-      <div class="drawer-footer">
-        <el-button @click="closeDrawer">取消</el-button>
-				<el-button @click="previewCode">预览代码</el-button>
-        <el-button type="primary" @click="generateCode">生成代码</el-button>
-      </div>
-    </template>
-  </el-drawer>
+	<div>
+		<el-drawer
+			v-model="drawerVisible"
+			class="local-launch_drawer-wrap"
+			:close-on-click-modal="false"
+			:title="title"
+			:size="size"
+			:direction="direction"
+		>
+			<div class="drawer-content">
+				<!-- 在这里添加抽屉的内容 -->
+				<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="top" class="code-gen-form">
+					<el-form-item label="数据源" prop="databaseId">
+						<el-select v-model="form.databaseId" placeholder="请选择数据源">
+							<el-option v-for="option in dataSourceOptions" :key="option.id" :label="option.title" :value="option.id" />
+						</el-select>
+					</el-form-item>
+
+					<el-form-item label="作者" prop="author">
+						<el-input v-model="form.author" placeholder="请输入作者名称" />
+					</el-form-item>
+
+					<el-form-item label="项目模块" prop="module">
+						<el-input v-model="form.module" placeholder="请输入项目模块" />
+					</el-form-item>
+
+					<el-form-item label="表名" prop="tableName">
+						<el-input v-model="form.tableName" placeholder="请输入表名" />
+					</el-form-item>
+
+					<el-form-item label="模板" prop="templateIds">
+						<el-checkbox-group v-model="form.templateIds">
+							<el-checkbox v-for="template in templateOptions" :key="template.id" :label="template.id">
+								{{ template.tplName }}
+							</el-checkbox>
+						</el-checkbox-group>
+					</el-form-item>
+				</el-form>
+			</div>
+
+			<template #footer>
+				<div class="drawer-footer">
+					<el-button @click="closeDrawer">取消</el-button>
+					<el-button @click="previewCode">预览代码</el-button>
+					<el-button type="primary" @click="generateCode">生成代码</el-button>
+				</div>
+			</template>
+		</el-drawer>
+
+		<ItemDrawer v-if="previewCodeVisible" v-model="previewCodeVisible" v-bind="activeData" @success="updateParams" />
+	</div>
 </template>
 
 <script lang="ts" setup>
+import ItemDrawer from '../template/ItemDrawer.vue'
 import { ref, watch } from 'vue'
 import database from '@/api/codeGenerate/database'
 import { fetchAllTemplates } from '@/api/codeGenerate/template'
 
 const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  title: {
-    type: String,
-    default: '抽屉标题'
-  },
-  size: {
-    type: [String, Number],
-    default: '30%'
-  },
-  direction: {
-    type: String,
-    default: 'rtl'
-  },
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	title: {
+		type: String,
+		default: '抽屉标题'
+	},
+	size: {
+		type: [String, Number],
+		default: '30%'
+	},
+	direction: {
+		type: String,
+		default: 'rtl'
+	},
 	rowData: {
 		type: Object,
 		default: () => ({})
@@ -96,23 +85,30 @@ const props = defineProps({
 
 const formRef = ref()
 const form = ref({
-  databaseId: '',
-  author: '',
-  module: '',
-  tableName: '',
-  templateIds: []
+	databaseId: '',
+	author: '',
+	module: '',
+	tableName: '',
+	templateIds: []
 })
 
 const rules = ref({
-  databaseId: [{ required: true, message: '请选择数据源', trigger: 'change' }],
-  module: [{ required: true, message: '请输入项目模块', trigger: 'blur' }],
-  tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }],
-  templateIds: [{ type: 'array', required: true, message: '请选择至少一个模板', trigger: 'change' }]
+	databaseId: [{ required: true, message: '请选择数据源', trigger: 'change' }],
+	module: [{ required: true, message: '请输入项目模块', trigger: 'blur' }],
+	tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }],
+	templateIds: [{ type: 'array', required: true, message: '请选择至少一个模板', trigger: 'change' }]
 })
 const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])
 
 const drawerVisible = ref(props.modelValue)
 const dataSourceOptions = ref<Array<{ id: string; title: string }>>([])
+	const templateOptions = ref<Array<{ id: string; name: string }>>([])
+const previewCodeVisible = ref(false)
+const activeData = ref<{ record: any; type: 'edit' | 'create' | 'detail'; visible: boolean }>({
+	record: {},
+	type: 'detail',
+	visible: false
+})
 
 const closeDrawer = () => {
 	drawerVisible.value = false
@@ -128,64 +124,74 @@ const getDataBaseOptions = async () => {
 	const data = await database.databaseListSelectOptionsApi()
 	dataSourceOptions.value = data as { id: string; title: string }[]
 	console.log(props.rowData)
-		if (props.rowData) {
+	if (props.rowData) {
 		form.value.databaseId = props.rowData.id
 		console.log(form.value.databaseId)
 	}
 }
-
-const templateOptions = ref<Array<{ id: string; name: string }>>([])
-
 const loadTemplates = async () => {
-  try {
-    const templates = await fetchAllTemplates()
+	try {
+		const templates = await fetchAllTemplates()
 		console.log(templates)
-    templateOptions.value = templates as { id: string; tplName: string }[]
-  } catch (error) {
-    console.error('Failed to fetch templates:', error)
-  }
+		templateOptions.value = templates as { id: string; tplName: string }[]
+	} catch (error) {
+		console.error('Failed to fetch templates:', error)
+	}
 }
 
-watch(() => props.modelValue, (newVal) => {
-  drawerVisible.value = newVal
-})
+watch(
+	() => props.modelValue,
+	newVal => {
+		drawerVisible.value = newVal
+	}
+)
 
-watch(drawerVisible, (newVal) => {
-  emit('update:modelValue', newVal)
+watch(drawerVisible, newVal => {
+	emit('update:modelValue', newVal)
 })
 const previewCode = async () => {
 	await formRef.value.validate()
-	const data = await database.codePreviewApi({...form.value, templateIds: form.value.templateIds})
+	const data = await database.codePreviewApi({ ...form.value, templateIds: form.value.templateIds })
+	previewCodeVisible.value = true
+	openDrawer('detail', data[0])
 	console.log(data)
 	console.log('预览代码')
 }
 
+const openDrawer = (type: 'edit' | 'create' | 'detail', record = {}) => {
+	activeData.value = {
+		type,
+		record,
+		visible: true
+	}
+}
+
 const generateCode = async () => {
 	try {
 		await formRef.value.validate()
-    const response = await database.codeDownloadApi({...form.value, templateIds: form.value.templateIds})
-    const blob = new Blob([response.data], { type: 'application/octet-stream' })
-    const url = window.URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = 'generated_code.zip' // Adjust the file name as needed
-    document.body.appendChild(a)
-    a.click()
-    a.remove()
-    window.URL.revokeObjectURL(url)
-    console.log('文件下载成功')
-  } catch (error) {
-    console.error('文件下载失败:', error)
-  }
+		await database.codeDownloadApi({ ...form.value, templateIds: form.value.templateIds })
+		// const blob = new Blob([response.data], { type: 'application/octet-stream' })
+		// const url = window.URL.createObjectURL(blob)
+		// const a = document.createElement('a')
+		// a.href = url
+		// a.download = 'generated_code.zip' // Adjust the file name as needed
+		// document.body.appendChild(a)
+		// a.click()
+		// a.remove()
+		// window.URL.revokeObjectURL(url)
+		// console.log('文件下载成功')
+	} catch (error) {
+		console.error('文件下载失败:', error)
+	}
 }
 
 getDataBaseOptions()
-	loadTemplates()
+loadTemplates()
 </script>
 
 <style lang="scss">
 .drawer-footer {
-  text-align: right;
+	text-align: right;
 }
 
 .local-launch_drawer-wrap {