feat: 代码预览

src/views/codeGenerate/database/CodeGenDrawer.vue

@@ -50,13 +50,12 @@
 			</template>
 		</el-drawer>
 
-		<ItemDrawer v-if="previewCodeVisible" v-model="previewCodeVisible" v-bind="activeData" @success="updateParams" />
+		<PreviewCodeDrawer v-if="previewCodeVisible" v-model="previewCodeVisible" :records="records" @success="updateParams" />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import axios from 'axios';
-import ItemDrawer from '../template/ItemDrawer.vue'
+import PreviewCodeDrawer from './PreviewCodeDrawer.vue'
 import { ref, watch } from 'vue'
 import database from '@/api/codeGenerate/database'
 import { fetchAllTemplates } from '@/api/codeGenerate/template'
@@ -105,11 +104,7 @@ 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 records = ref([])
 
 const closeDrawer = () => {
 	drawerVisible.value = false
@@ -154,19 +149,11 @@ const previewCode = async () => {
 	await formRef.value.validate()
 	const data = await database.codePreviewApi({ ...form.value, templateIds: form.value.templateIds })
 	previewCodeVisible.value = true
-	openDrawer('detail', data[0])
+	records.value = data as Array<any>
 	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()

src/views/codeGenerate/database/PreviewCodeDrawer.vue

@@ -0,0 +1,131 @@
+<template>
+	<el-drawer class="le-drawer" size="100%" :title="getTitle" :model-value="modelValue" @update:model-value="updateModelValue">
+		<div v-if="loading" v-loading="true" class="local_loading"></div>
+		<el-tabs v-model="activeIdx" type="card" class="local_tabs">
+			<el-tab-pane v-for="(record, i) of records" :key="i" :label="record.tplName" :value="i" />
+		</el-tabs>
+		<el-form ref="formRef" class="le-form-config flex-1" v-bind="formOpts" :disabled="disabled" :model="model">
+			<!--			:class="app.isMobile ? '' : 'h-full'"-->
+			<el-row class="local-row" :gutter="16">
+				<el-col :span="18" :xs="24" class="content" :class="app.isMobile ? 'content--mobile' : ''">
+					<el-form-item label="文件内容" prop="tplContent">
+						<MonacoEditor v-model="model.tplContent" height="calc(100vh - 200px)" :disabled="disabled" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="6" :xs="24">
+					<el-form-item label="模板名称" prop="tplName">
+						<el-input v-model="model.tplName" placeholder="请输入模板名称" />
+					</el-form-item>
+					<el-form-item label="输出文件" prop="outFile">
+						<el-input v-model="model.outFile" placeholder="请输入输出文件" />
+					</el-form-item>
+					<el-form-item label="模板描述" prop="remark">
+						<el-input v-model="model.remark" placeholder="请输入模板描述" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+	</el-drawer>
+</template>
+
+<script setup lang="tsx">
+import template from '@/api/codeGenerate/template'
+import MonacoEditor from '@/components/MonacoEditor'
+import { computed, PropType, ref, watch } from 'vue'
+import useStore from '@/store'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	records: {
+		type: Object as PropType<{ [key: string]: any }[]>,
+		default: () => ({})
+	}
+})
+const emit = defineEmits<{
+	'update:modelValue': [bool: boolean] // 具名元组语法
+	success: any
+}>()
+const getTitle = computed(() => {
+	return '代码预览'
+})
+const updateModelValue = (bool: boolean) => emit('update:modelValue', bool)
+const { app } = useStore()
+const loading = ref(false)
+const formRef = ref()
+const formOpts = ref({
+	// model: {},
+	labelPosition: 'top',
+	rules: {
+		tplName: [
+			{
+				required: true,
+				message: '模板名称不能为空'
+			}
+		],
+		outFile: [
+			{
+				required: true,
+				message: '输出文件不能为空'
+			}
+		]
+	}
+})
+const disabled = true
+const model = ref({
+	tplContent: '',
+	tplName: undefined,
+	outFile: undefined,
+	remark: undefined
+})
+const activeIdx = ref('-1')
+const switchRecord = (i: string/*number string*/) => {
+	const record = props.records?.[i]
+	if (record) {
+		activeIdx.value = i
+		model.value = Object.keys(record || {}).reduce((res: any, key) => {
+			res[key] = record[key]
+			return res
+		}, {})
+	} else {
+		activeIdx.value = '-1'
+	}
+}
+watch(
+	() => props.records,
+	(records: any) => {
+		switchRecord('0')
+	},
+	{ immediate: true }
+)
+
+watch(activeIdx, (idx: string) => {
+	if (props.records?.length) {
+		switchRecord(idx)
+	} else {
+		switchRecord('-1')
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.content--mobile {
+	order: 1;
+}
+.local_tabs {
+	border-bottom: 0;
+	/*&:deep(.el-tabs__content) {
+		//margin-bottom: -1px;
+		padding: 0;
+	}*/
+	&:deep(.el-tabs__header) {
+		margin-bottom: 6px;
+		/*.el-tabs__item.is-active {
+			border-bottom-color: var(--el-border-color);
+		}*/
+	}
+}
+</style>

src/views/codeGenerate/template/ItemDrawer.vue

@@ -110,7 +110,7 @@ const onSubmit = () => {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 //:deep(.app-mobile) {
 //	.local-row .content {
 //		order: 1;