|
@@ -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>
|
|
|
|
|
|
- <!– LeTable 组件使用 –>
|
|
|
+ <!-- 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--edit"
|
|
|
- icon-class="icon-processInfo-mage--edit"
|
|
|
- @click="table_edit(row)"
|
|
|
- />
|
|
|
-
|
|
|
- <LeIcon class="text-lg ml-2 text-rose-700 cursor-pointer" icon-class="icon-processInfo-iconoir--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>
|