浏览代码

Merge branch 'master' into feat/template

# Conflicts:
#	src/views/codeGenerate/template/index.vue
lanceJiang 8 月之前
父节点
当前提交
1f36ec83f7

+ 29 - 3
src/api/codeGenerate/database.ts

@@ -8,7 +8,31 @@ const api = {
 	update: '/gen/database/update',
 	delete: '/gen/database/delete',
 	listSelectOptions: '/gen/database/list-select-options',
-	get: '/gen/database/get'
+	get: '/gen/database/get',
+	codePreview: '/gen/table/preview', // 预览代码 post请求
+	codeDownload: '/gen/table/download' // 下载代码 post请求
+}
+
+/**
+ * 代码生成 - 预览代码
+ */
+function codePreviewApi(data: any): AxiosPromise {
+	return request({
+		url: api.codePreview,
+		method: 'post',
+		params: data
+	})
+}
+
+/**
+ * 代码生成 - 下载代码
+ */
+function codeDownloadApi(data: any): AxiosPromise {
+	return request({
+		url: api.codeDownload,
+		method: 'post',
+		params: data
+	})
 }
 
 /**
@@ -69,5 +93,7 @@ export default {
 	databaseAddOrEditSaveApi,
 	databaseDeleteApi,
 	databaseListSelectOptionsApi,
-	databaseGetApi
-}
+	databaseGetApi,
+	codePreviewApi,
+	codeDownloadApi
+}

+ 69 - 0
src/api/codeGenerate/template.ts

@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+import { AxiosPromise } from 'axios'
+
+// apiUrl 模板管理
+const api = {
+	page: '/gen/template/page',
+	create: '/gen/template/create',
+	update: '/gen/template/update',
+	delete: '/gen/template/delete'
+	// get: '/gen/template/get'
+}
+
+/**
+ * 模板管理 - 分页列表
+ */
+function templatePageApi(data: any): AxiosPromise {
+	return request({
+		url: api.page,
+		method: 'post',
+		data
+	})
+}
+
+/**
+ * 模板管理 - 创建或更新
+ */
+function templateAddOrEditSaveApi(data: any): AxiosPromise {
+	return request({
+		url: data.id ? api.update : api.create,
+		method: 'post',
+		data
+	})
+}
+
+/**
+ * 模板管理 - 删除
+ */
+function templateDeleteApi(data: any): AxiosPromise {
+	return request({
+		url: api.delete,
+		method: 'post',
+		data
+	})
+}
+
+// /**
+//  * 模板管理 - 查询 ID 信息
+//  */
+// function templateGetApi(id: any): AxiosPromise {
+// 	return request({
+// 		url: `${api.get}?id=${id}`,
+// 		method: 'get'
+// 	})
+// }
+
+export function fetchAllTemplates(): AxiosPromise {
+	return request({
+		method: 'post',
+		url: `/gen/template/list-all` // Adjust URL if needed
+	})
+}
+
+export default {
+	templatePageApi,
+	templateAddOrEditSaveApi,
+	templateDeleteApi,
+	fetchAllTemplates
+	// templateGetApi
+}

+ 1 - 0
src/assets/icons/processInfo/code-gen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m17.09 7.974l.23.23c1.789 1.79 2.684 2.684 2.684 3.796s-.895 2.007-2.684 3.796l-.23.23M13.876 5l-3.751 14M6.91 7.974l-.23.23C4.892 9.994 3.997 10.888 3.997 12s.895 2.007 2.685 3.796l.23.23"/></svg>

+ 43 - 1
src/styles/lance-element-vue.scss

@@ -138,6 +138,48 @@
 		opacity: 0;
 	}
 }
-
+// 公用风格 drawer
+.#{$prefix}drawer {
+	.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;
+	}
+	// loading 固定样式
+	.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) {
+	.#{$prefix}drawer {
+		max-width: 100vw;
+	}
+}
 .#{$prefix}test {}
 /* --------引用 lance-element-ui 根据ui/产品 用于项目的默认样式 End-------- */

+ 1 - 1
src/styles/lance-element/formConfig.scss

@@ -25,7 +25,7 @@
 		padding: 10px 24px 0 24px;
 		//box-shadow: 1px 0 0 0 var(--el-input-border-color, var(--el-border-color));
 		//box-shadow: 0 -1px -1px 0 $le-border-color_3;
-		box-shadow: 0 -1px 0 -1px var(--el-border-color-lighter);
+		box-shadow: 0 -1px 0 0 var(--el-border-color-lighter);
 		// 取消
 		.cancel-button {
 			//margin-right: auto;

+ 3 - 26
src/views/approve/launch/ItemDrawer.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-drawer
 		:close-on-click-modal="false"
-		class="local-launch_drawer-wrap"
+		class="le-drawer local-launch_drawer-wrap"
 		:title="record.processName"
 		:model-value="modelValue"
 		size="760px"
@@ -337,30 +337,7 @@ Promise.all([
 </script>
 <style lang="scss">
 .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 {
+	/*.local_loading {
 		position: absolute;
 		left: 0;
 		display: flex;
@@ -370,7 +347,7 @@ Promise.all([
 		height: 100%;
 		z-index: 999;
 		background: rgba(0, 0, 0, 0.05);
-	}
+	}*/
 }
 @media (max-width: 750px) {
 	.local-launch_drawer-wrap {

+ 232 - 0
src/views/codeGenerate/database/CodeGenDrawer.vue

@@ -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>

+ 36 - 5
src/views/codeGenerate/database/index.vue

@@ -14,6 +14,11 @@
 				:columns="activeColumns"
 			>
 				<template #toolLeft>
+					<el-button class="icon-button button-screen" @click="openDrawer">
+						<LeIcon icon-class="icon-processInfo-code-gen" />
+						生成代码
+					</el-button>
+
 					<el-button
 						plain
 						:icon="Plus"
@@ -30,7 +35,11 @@
 							icon-class="icon-processInfo-mage--edit"
 							@click="table_edit(row)"
 						/>
-
+						<LeIcon
+							class="text-lg text-icon-color cursor-pointer icon-mage--edit ml-2"
+							icon-class="icon-processInfo-code-gen"
+							@click="editCodeGen(row)"
+						/>
 						<LeIcon class="text-lg ml-2 text-rose-700 cursor-pointer" icon-class="icon-processInfo-iconoir--trash" @click="table_del(row)" />
 					</div>
 				</template>
@@ -47,6 +56,16 @@
 			:form-options="formOptions"
 			@submit="submitHandler"
 		/>
+
+		<CodeGenDrawer
+			v-if="drawerVisible"
+      v-model="drawerVisible"
+      title="代码生成"
+      size="50%"
+			:row-data="rowData"
+      @confirm="handleConfirm"
+    >
+    </CodeGenDrawer>
 	</div>
 </template>
 <script lang="tsx" setup>
@@ -55,10 +74,14 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete } from '@element-plus/icons-vue'
+import CodeGenDrawer from './CodeGenDrawer.vue'
 
 const visible = ref(false) // 弹窗显示隐藏
 const isCreate = ref(true)
 const activeData = ref({})
+const rowData = ref({})
+const drawerVisible = ref(false)
+
 const formsDialog = [
 	{
 		prop: 'type',
@@ -273,6 +296,12 @@ const table_edit = async row => {
 	visible.value = true
 }
 
+const editCodeGen = async row => {
+	console.log(row, '=====')
+	rowData.value = row
+	openDrawer()
+}
+
 // 弹窗事件
 const submitHandler = async params => {
 	formOptions.value.formConfig.submitLoading = true
@@ -295,13 +324,15 @@ const addHandler = () => {
 	visible.value = true
 }
 
-const getDataBaseOptions = async () => {
-	const { data } = await database.databaseListSelectOptionsApi()
-	console.log(data)
+const openDrawer = () => {
+  drawerVisible.value = true
+}
+
+const handleConfirm = () => {
+  console.log('确认操作')
 }
 
 nextTick(() => {
-	getDataBaseOptions()
 	queryList()
 })
 

+ 122 - 0
src/views/codeGenerate/template/ItemDrawer.vue

@@ -0,0 +1,122 @@
+<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-form ref="formRef" class="le-form-config flex-1" v-bind="formOpts" :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">
+						<el-input v-model="model.tplContent" type="textarea" />
+					</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>
+		<!--		<LeFormConfig v-bind="formOpts"></LeFormConfig>-->
+		<template v-if="type !== 'detail'" #footer>
+			<el-button @click="updateModelValue(false)">{{ $t('le.btn.cancel') }}</el-button>
+			<el-button :loading="loading" type="primary" style="margin-left: 8px" @click="onSubmit">{{ $t('le.btn.confirm') }}</el-button>
+		</template>
+	</el-drawer>
+</template>
+
+<script setup lang="tsx">
+import template from '@/api/codeGenerate/template'
+import { computed, PropType, ref, watch } from 'vue'
+import useStore from '@/store'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	record: {
+		type: Object as PropType<{ [key: string]: any }>,
+		default: () => ({})
+	},
+	type: {
+		type: String as PropType<'edit' | 'create' | 'detail'>,
+		default: 'detail'
+	}
+})
+const emit = defineEmits<{
+	'update:modelValue': [bool: boolean] // 具名元组语法
+	success: any
+}>()
+const getTitle = computed(() => {
+	return { edit: '编辑', detail: '查看', create: '创建' }[props.type] + '模板'
+})
+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 model = ref({
+	tplContent: '',
+	tplName: undefined,
+	outFile: undefined,
+	remark: undefined
+})
+watch(
+	() => props.record,
+	(record: any) => {
+		model.value = Object.keys(record || {}).reduce((res: any, key) => {
+			res[key] = record[key]
+			return res
+		}, {})
+	},
+	{ immediate: true }
+)
+const onSubmit = () => {
+	formRef.value.validate(async (valid: boolean) => {
+		if (valid) {
+			// console.log(model.value, 'model...')
+			loading.value = true
+			await template.templateAddOrEditSaveApi(model.value)
+			ElMessage.success(`${props.type === 'create' ? '新增' : '修改'}成功~`)
+			updateModelValue(false)
+			emit('success')
+		}
+	})
+}
+</script>
+
+<style lang="scss">
+//:deep(.app-mobile) {
+//	.local-row .content {
+//		order: 1;
+//	}
+//}
+//.local-row {}
+.content--mobile {
+	order: 1;
+}
+</style>

+ 58 - 186
src/views/codeGenerate/template/index.vue

@@ -2,9 +2,9 @@
 	<div class="pageWrap bgc">
 		<div class="content-warp flex-column-page-wrap">
 			<!-- 公用搜索组件 -->
-<!--			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"></LeSearchForm>
+			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"></LeSearchForm>
 
-			&lt;!&ndash;  LeTable 组件使用  &ndash;&gt;
+			<!--  LeTable 组件使用  -->
 			<LeTable
 				ref="tableRef"
 				v-model:searchParams="tableOpts.searchParams"
@@ -16,48 +16,34 @@
 				<template #toolLeft>
 					<el-button
 						plain
-						:icon="Plus"
-						@click="addHandler"
+						icon="Plus"
+						@click="openDrawer('create')"
 						type="primary">
 						新增</el-button>
-					<el-button plain :icon="Delete" :disabled="curSelectionRows.length === 0" @click="batch_del" type="danger">删除</el-button>
+					<el-button plain icon="Delete" :disabled="curSelectionRows.length === 0" @click="batch_del" type="danger">删除</el-button>
 				</template>
-
-				<template #actionSlot="{ row }">
-					<div class="flex flex-align-pack-center">
-						<LeIcon
-							class="text-lg text-icon-color cursor-pointer icon-mage&#45;&#45;edit"
-							icon-class="icon-processInfo-mage&#45;&#45;edit"
-							@click="table_edit(row)"
-						/>
-
-						<LeIcon class="text-lg ml-2 text-rose-700 cursor-pointer" icon-class="icon-processInfo-iconoir&#45;&#45;trash" @click="table_del(row)" />
-					</div>
-				</template>
-			</LeTable>-->
-			<MonacoEditor v-model="testCode" :language="language" @editorDidMount="testDid" />
+			</LeTable>
 		</div>
 
+		<ItemDrawer v-if="activeData.visible" v-model="activeData.visible" v-bind="activeData" @success="updateParams"/>
 		<LeFormConfigDialog
-			v-if="visible"
-			ref="dialogUserRef"
-			v-model="visible"
-			:title="`${isCreate ? '新增' : '编辑'}应用`"
-			width="600px"
 			:form-data="activeData"
-			:form-options="formOptions"
-			@submit="submitHandler"
 		/>
 	</div>
 </template>
 <script lang="tsx" setup>
-import database from '@/api/codeGenerate/database'
+import template from '@/api/codeGenerate/template'
 import MonacoEditor from '@/components/MonacoEditor'
 import { computed, nextTick, ref, watch } from 'vue'
-import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
-import { Plus, Delete } from '@element-plus/icons-vue'
-
+import ItemDrawer from './ItemDrawer.vue'
+import { LeTableColumnProps } from '@/components/Table'
+const activeData = ref<{ record: any; type: 'edit' | 'create' | 'detail'; visible: boolean }>({
+	record: {},
+	type: 'detail',
+	visible: false
+})
 
 // start
 const testCode = ref('function hello() {\n  alert(\'Hello world!\');\n}')
@@ -69,109 +55,13 @@ const testDid = (editor) => {
 }
 // end
 
-
-
-const visible = ref(false) // 弹窗显示隐藏
-const isCreate = ref(true)
-const activeData = ref({})
-const formsDialog = [
-	{
-		prop: 'type',
-		label: '类型',
-		itemType: 'select',
-		options: [
-			{ label: 'PostgreSQL', value: 'pgsql' },
-			{ label: 'MySQL', value: 'mysql' },
-			{ label: 'Oracle', value: 'oracle' }
-		],
-		rules: [{ required: true, message: '请选择类型', trigger: 'change' }]
-	},
-	{
-		prop: 'alias',
-		label: '别名',
-		itemType: 'input',
-		rules: [{ required: true, message: '请输入别名', trigger: 'blur' }]
-	},
-	{
-		prop: 'host',
-		label: '主机',
-		itemType: 'input',
-		rules: [{ required: true, message: '请输入主机', trigger: 'blur' }]
-	},
-	{
-		prop: 'port',
-		label: '端口',
-		itemType: 'inputNumber',
-		rules: [{ required: true, message: '请输入端口', trigger: 'blur' }]
-	},
-	{
-		prop: 'database',
-		label: '库名称',
-		itemType: 'input',
-		rules: [{ required: true, message: '请输入库名称', trigger: 'blur' }]
-	},
-	{
-		prop: 'username',
-		label: '用户名',
-		itemType: 'input',
-		rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
-	},
-	{
-		prop: 'password',
-		label: '密码',
-		itemType: 'input',
-		rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
-	}
-]
-// 新增的表单 和 编辑的表单
-const formOptions = computed(() => {
-	return {
-		forms: formsDialog,
-		labelWidth: 120,
-		span: 30,
-		showResetBtn: true,
-		formConfig: {
-			showCancelBtn: true,
-			submitLoading: false
-		}
-	}
-})
-const groupFilterText = ref('')
-const treeRef = ref<InstanceType<typeof ElTree>>()
-
 // 表格搜索条件
 const forms = ref([
 	{
-		prop: 'alias',
-		label: '别名:',
-		itemType: 'input',
-		placeholder: '请输入别名'
-	},
-	{
-		prop: 'database',
-		label: '库名称:',
-		itemType: 'input',
-		placeholder: '请输入库名称'
-	},
-	{
-		prop: 'type',
-		label: '类型:',
-		itemType: 'select',
-		placeholder: '请选择类型',
-		options: [
-			{
-				label: 'PostgreSQL',
-				value: 'pgsql'
-			},
-			{
-				label: 'MySQL',
-				value: 'mysql'
-			},
-			{
-				label: 'Oracle',
-				value: 'oracle'
-			}
-		]
+		prop: 'tplName',
+		label: '模板名称',
+		itemType: 'input'/*,
+		placeholder: '请输入别名'*/
 	}
 ])
 
@@ -180,7 +70,7 @@ const queryList = async () => {
 	const { options, searchParams } = tableOpts
 	options.loading = true
 	try {
-		const { records: list, total } = await database.databasePageApi(searchParams)
+		const { records: list, total } = await template.templatePageApi(searchParams)
 		tableOpts.total = total
 		tableOpts.list = list
 	} catch {
@@ -193,24 +83,32 @@ const queryList = async () => {
 }
 
 // table 参数
-const columns = [
+const columns: LeTableColumnProps[] = [
 	{
-		prop: 'alias',
-		label: '别名'
+		prop: 'tplName',
+		label: '模板名称',
+		minWidth: 120,
+		showOverflowTooltip: true,
+		slots: {
+			default: ({ row }) => {
+				return <span class="le-link" onClick={openDrawer.bind(null, 'detail', row)}>{row.tplName}</span>
+			}
+		}
 	},
 	{
-		prop: 'database',
-		label: '库名称',
-		minWidth: 100
+		prop: 'outFile',
+		label: '输出文件',
+		minWidth: 120
 	},
 	{
-		prop: 'username',
-		label: '用户名'
+		prop: 'remark',
+		label: '模板描述'
 	},
 	{
 		prop: 'createTime',
 		label: '创建时间',
-		minWidth: 150
+		minWidth: 150,
+		align: 'center'
 	},
 	{
 		prop: 'action',
@@ -219,17 +117,23 @@ const columns = [
 		width: 100,
 		fixed: 'right',
 		slots: {
-			default: 'actionSlot'
+			default: ({ row }) => {
+				return <div class="flex flex-align-pack-center">
+					<LeIcon
+						class="text-lg text-icon-color cursor-pointer icon-mage--edit"
+						icon-class="icon-processInfo-mage--edit"
+						onClick={openDrawer.bind(null, 'edit', row)}
+					/>
+					<LeIcon class="text-lg ml-2 text-rose-700 cursor-pointer" icon-class="icon-processInfo-iconoir--trash" onClick={table_del.bind(null, row)} />
+				</div>
+			}
 		}
 	}
 ]
 
-const { searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams } = useTablePage(
+const {searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams} = useTablePage(
 	{
-		options: {
-			showIndex: false,
-			defaultExpandAll: true
-		},
+		options: {},
 		// 需要展示的列
 		columns,
 		// 控制列配置
@@ -244,9 +148,9 @@ const { searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows,
 )
 
 // 删除
-const deleteItem = async ids => {
+const deleteItem = async (ids) => {
 	// try {
-	await database.databaseDeleteApi(ids)
+	await template.templateDeleteApi(ids)
 	ElMessage.success(`删除成功~`)
 	updateParams()
 	// } catch (e) {
@@ -257,7 +161,7 @@ const deleteItem = async ids => {
 
 // 单个删除
 const table_del = (row: any) => {
-	ElMessageBox.confirm(`确认删除「${row.alias}」这条数据?`, '提示', {
+	ElMessageBox.confirm(`确认删除「${row.tplName}」这条数据?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
 		type: 'error'
@@ -279,48 +183,16 @@ const batch_del = () => {
 	})
 }
 
-const table_edit = async row => {
-	isCreate.value = false
-	// 通过databaseGetApi获取
-	await database.databaseGetApi(row.id).then(res => {
-		activeData.value = res
-	})
-	visible.value = true
-}
-
-// 弹窗事件
-const submitHandler = async params => {
-	formOptions.value.formConfig.submitLoading = true
-	try {
-		params.id = activeData.value.id ? activeData.value.id : null
-		await database.databaseAddOrEditSaveApi(params)
-		ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
-		visible.value = false
-		updateParams()
-		formOptions.value.formConfig.submitLoading = false
-	} catch (e) {
-		console.log(e)
-		formOptions.value.formConfig.submitLoading = false
+const openDrawer = (type: 'edit' | 'create' | 'detail', record = {}) => {
+	activeData.value = {
+		type,
+		record,
+		visible: true
 	}
 }
 
-const addHandler = () => {
-	isCreate.value = true
-	activeData.value = {}
-	visible.value = true
-}
-
-const getDataBaseOptions = async () => {
-	const { data } = await database.databaseListSelectOptionsApi()
-	console.log(data)
-}
-
 nextTick(() => {
-	getDataBaseOptions()
 	queryList()
 })
 
-watch(groupFilterText, val => {
-	treeRef.value!.filter(val)
-})
 </script>

+ 4 - 43
src/views/flow/form/designForm.vue

@@ -1,8 +1,8 @@
 <template>
-	<el-drawer v-model="visibleDialog" class="custom-adrawer" size="100%" @close="handleCancel">
+	<el-drawer v-model="visibleDialog" class="le-drawer" size="100%" @close="handleCancel">
 		<template #header>
-			<div class="flex flex-pack-justify flex_align-center">
-				<span>查看详情</span>
+			<div class="flex flex-pack-justify flex_align-center -my-2">
+				<span class="text-[16px]">查看详情</span>
 				<el-button type="primary" @click="saveDesignEv">保存</el-button>
 			</div>
 		</template>
@@ -90,43 +90,4 @@ watch(
 )
 </script>
 
-<style scoped lang="scss">
-.flow-header-box {
-	font-weight: 400;
-	font-size: 14px;
-	border-bottom: 1px solid #e5e6ec;
-	padding: 0 16px;
-	height: 39px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	color: #86909c;
-}
-
-//.custom-adrawer {
-//	&:deep(.el-drawer) {
-//		.el-drawer__header {
-//			background-color: rgb(245, 245, 245);
-//			padding: 0px 20px;
-//			height: 50px;
-//			color: #000000;
-//			margin-bottom: 0px;
-//		}
-//		.el-drawer__title {
-//			font-size: 20px;
-//		}
-//	}
-//}
-:deep(.el-drawer) {
-	.el-drawer__header {
-		background-color: rgb(245, 245, 245);
-		padding: 0px 20px;
-		height: 50px;
-		color: #000000;
-		margin-bottom: 0px;
-	}
-	.el-drawer__title {
-		font-size: 20px;
-	}
-}
-</style>
+<style scoped lang="scss"></style>

+ 1 - 42
src/views/flow/test/businessLaunch.vue

@@ -1,14 +1,13 @@
 <template>
 	<el-drawer
 		:close-on-click-modal="false"
-		class="local-launch_drawer-wrap"
+		class="le-drawer"
 		:title="record.processName"
 		:model-value="modelValue"
 		size="760px"
 		@update:model-value="updateModelValue"
 	>
 		<div v-if="validateForm.loading" v-loading="true" class="local_loading"></div>
-
 		<div class="info-wrap">
 			<el-divider content-position="left">{{ record.processName }}表单</el-divider>
 			<!-- 表单设计 -->
@@ -183,46 +182,6 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss">
-// 和ItemDrawer一样可以公用,待提取
-.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);
-	}
-}
-</style>
-
 <style scoped lang="scss">
 .info-wrap {
 	.form-wrap {