|
|
@@ -0,0 +1,232 @@
|
|
|
+<!-- 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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+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'
|
|
|
+ },
|
|
|
+ rowData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({})
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const formRef = ref()
|
|
|
+const form = ref({
|
|
|
+ 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' }]
|
|
|
+})
|
|
|
+const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])
|
|
|
+
|
|
|
+const drawerVisible = ref(props.modelValue)
|
|
|
+const dataSourceOptions = ref<Array<{ id: string; title: string }>>([])
|
|
|
+
|
|
|
+const closeDrawer = () => {
|
|
|
+ drawerVisible.value = false
|
|
|
+ emit('cancel')
|
|
|
+}
|
|
|
+
|
|
|
+const confirmDrawer = () => {
|
|
|
+ drawerVisible.value = false
|
|
|
+ emit('confirm')
|
|
|
+}
|
|
|
+
|
|
|
+const getDataBaseOptions = async () => {
|
|
|
+ const data = await database.databaseListSelectOptionsApi()
|
|
|
+ dataSourceOptions.value = data as { id: string; title: string }[]
|
|
|
+ console.log(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()
|
|
|
+ console.log(templates)
|
|
|
+ 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(drawerVisible, (newVal) => {
|
|
|
+ emit('update:modelValue', newVal)
|
|
|
+})
|
|
|
+const previewCode = async () => {
|
|
|
+ await formRef.value.validate()
|
|
|
+ const data = await database.codePreviewApi({...form.value, templateIds: form.value.templateIds.join(',')})
|
|
|
+ console.log(data)
|
|
|
+ console.log('预览代码')
|
|
|
+}
|
|
|
+
|
|
|
+const generateCode = async () => {
|
|
|
+ try {
|
|
|
+ await formRef.value.validate()
|
|
|
+ const response = await database.codeDownloadApi({...form.value, templateIds: form.value.templateIds.join(',')})
|
|
|
+ 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()
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.drawer-footer {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.local-launch_drawer-wrap {
|
|
|
+ .el-drawer__header {
|
|
|
+ display: flex;
|
|
|
+ padding: 16px 24px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: var(--el-color-info-light-9);
|
|
|
+ text-align: left;
|
|
|
+ /* margin-right: 0; */
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .el-drawer__close-btn {
|
|
|
+ padding: 0;
|
|
|
+ margin-right: -12px;
|
|
|
+ }
|
|
|
+ .el-drawer__body {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .el-drawer__footer {
|
|
|
+ border-top: 1px solid var(--el-border-color-lighter);
|
|
|
+ padding: 12px 24px;
|
|
|
+ }
|
|
|
+ .local_loading {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 999;
|
|
|
+ background: rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+}
|
|
|
+@media (max-width: 750px) {
|
|
|
+ .local-launch_drawer-wrap {
|
|
|
+ width: 90vw !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
luoyali
