first commit
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="layout-error">
|
||||
<img src="@/assets/404.png" alt="404" />
|
||||
<div>
|
||||
<el-button type="primary" @click="onBack">返回</el-button>
|
||||
<el-button type="success" @click="onToHome">主页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
const onBack = () => {
|
||||
router.back()
|
||||
}
|
||||
const onToHome = () => {
|
||||
router.replace('/')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout-error {
|
||||
img {
|
||||
width: 800px;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="!dataForm.id ? '新增' : '修改'"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="dataForm"
|
||||
:rules="dataRules"
|
||||
label-width="120px"
|
||||
@keyup.enter="submitHandle()"
|
||||
>
|
||||
<el-form-item label="基类编码" prop="code">
|
||||
<el-input v-model="dataForm.code" placeholder="基类编码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="基类包名" prop="packageName">
|
||||
<el-input v-model="dataForm.packageName" placeholder="基类包名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="基类字段" prop="fields">
|
||||
<el-input
|
||||
v-model="dataForm.fields"
|
||||
placeholder="基类字段，多个字段，用英文逗号分隔"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitHandle()">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus/es'
|
||||
import { useBaseClassApi, useBaseClassSubmitApi } from '@/api/baseClass'
|
||||
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
|
||||
const visible = ref(false)
|
||||
const dataFormRef = ref()
|
||||
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
packageName: '',
|
||||
code: '',
|
||||
fields: '',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const init = (id?: number) => {
|
||||
visible.value = true
|
||||
dataForm.id = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// id 存在则为修改
|
||||
if (id) {
|
||||
getBaseClass(id)
|
||||
}
|
||||
}
|
||||
|
||||
const getBaseClass = (id: number) => {
|
||||
useBaseClassApi(id).then(res => {
|
||||
Object.assign(dataForm, res.data)
|
||||
})
|
||||
}
|
||||
|
||||
const dataRules = ref({
|
||||
packageName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
fields: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
// 表单提交
|
||||
const submitHandle = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
useBaseClassSubmitApi(dataForm).then(() => {
|
||||
ElMessage.success({
|
||||
message: '操作成功',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
|
||||
<el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="state.queryForm.code" placeholder="基类编码"></el-input>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="danger" @click="deleteBatchHandle()">删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="state.dataListLoading"
|
||||
:data="state.dataList"
|
||||
border
|
||||
style="width: 100%"
|
||||
@selection-change="selectionChangeHandle"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="code"
|
||||
label="基类编码"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="packageName"
|
||||
label="基类包名"
|
||||
show-overflow-tooltip
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="fields"
|
||||
label="基类字段"
|
||||
show-overflow-tooltip
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
show-overflow-tooltip
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
|
||||
<el-button type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="state.page"
|
||||
:page-sizes="state.pageSizes"
|
||||
:page-size="state.limit"
|
||||
:total="state.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { IHooksOptions } from '@/hooks/interface'
|
||||
import { useCrud } from '@/hooks'
|
||||
import AddOrUpdate from './add-or-update.vue'
|
||||
|
||||
const state: IHooksOptions = reactive({
|
||||
dataListUrl: '/gen/baseclass/page',
|
||||
deleteUrl: '/gen/baseclass',
|
||||
queryForm: {
|
||||
code: ''
|
||||
}
|
||||
})
|
||||
|
||||
const addOrUpdateRef = ref()
|
||||
const addOrUpdateHandle = (id?: number) => {
|
||||
addOrUpdateRef.value.init(id)
|
||||
}
|
||||
|
||||
const {
|
||||
getDataList,
|
||||
selectionChangeHandle,
|
||||
sizeChangeHandle,
|
||||
currentChangeHandle,
|
||||
deleteBatchHandle
|
||||
} = useCrud(state)
|
||||
</script>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="!dataForm.id ? '新增' : '修改'"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="dataForm"
|
||||
:rules="dataRules"
|
||||
label-width="120px"
|
||||
@keyup.enter="submitHandle()"
|
||||
>
|
||||
<el-form-item label="连接名" prop="connName">
|
||||
<el-input v-model="dataForm.connName" placeholder="连接名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="dbType" label="数据库类型">
|
||||
<el-select v-model="dataForm.dbType" clearable placeholder="数据库类型" style="width: 100%">
|
||||
<el-option value="MySQL" label="MySQL"></el-option>
|
||||
<el-option value="Oracle" label="Oracle"></el-option>
|
||||
<el-option value="PostgreSQL" label="PostgreSQL"></el-option>
|
||||
<el-option value="SQLServer" label="SQLServer"></el-option>
|
||||
<el-option value="DM" label="达梦8"></el-option>
|
||||
<el-option value="KingBase" label="人大金仓"></el-option>
|
||||
<el-option value="Clickhouse" label="Clickhouse"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库URL" prop="connUrl">
|
||||
<el-input v-model="dataForm.connUrl" placeholder="数据库URL"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="dataForm.username" placeholder="用户名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
v-model="dataForm.password"
|
||||
autocomplete="off"
|
||||
type="password"
|
||||
placeholder="密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitHandle()">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus/es'
|
||||
import { useDataSourceApi, useDataSourceSubmitApi } from '@/api/datasource'
|
||||
import { decrypt, encrypt } from '@/utils/tool'
|
||||
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
|
||||
const visible = ref(false)
|
||||
const dataFormRef = ref()
|
||||
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
dbType: '',
|
||||
connName: '',
|
||||
connUrl: '',
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const init = (id?: number) => {
|
||||
visible.value = true
|
||||
dataForm.id = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// id 存在则为修改
|
||||
if (id) {
|
||||
getDataSource(id)
|
||||
}
|
||||
}
|
||||
|
||||
const getDataSource = (id: number) => {
|
||||
useDataSourceApi(id).then(res => {
|
||||
res.data.password = decrypt(res.data.password)
|
||||
Object.assign(dataForm, res.data)
|
||||
})
|
||||
}
|
||||
|
||||
const dataRules = ref({
|
||||
dbType: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
connName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
connUrl: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
username: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
// 表单提交
|
||||
const submitHandle = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
useDataSourceSubmitApi({ ...dataForm, password: encrypt(dataForm.password) }).then(() => {
|
||||
ElMessage.success({
|
||||
message: '操作成功',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
|
||||
<el-form-item>
|
||||
<el-input v-model="state.queryForm.connName" placeholder="连接名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="dbType">
|
||||
<el-select v-model="state.queryForm.dbType" clearable placeholder="数据库类型">
|
||||
<el-option value="MySQL" label="MySQL"></el-option>
|
||||
<el-option value="Oracle" label="Oracle"></el-option>
|
||||
<el-option value="PostgreSQL" label="PostgreSQL"></el-option>
|
||||
<el-option value="SQLServer" label="SQLServer"></el-option>
|
||||
<el-option value="DM" label="达梦8"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="danger" @click="deleteBatchHandle()">删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="state.dataListLoading"
|
||||
:data="state.dataList"
|
||||
border
|
||||
style="width: 100%"
|
||||
@selection-change="selectionChangeHandle"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="connName"
|
||||
label="连接名"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="dbType"
|
||||
label="数据库类型"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="connUrl"
|
||||
label="数据库URL"
|
||||
show-overflow-tooltip
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="username"
|
||||
label="用户名"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column label="密码" header-align="center" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ formatPassword(scope.row.password) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" header-align="center" align="center" width="170">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="datasourceHandle(scope.row.id)">测试</el-button>
|
||||
<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
|
||||
<el-button type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="state.page"
|
||||
:page-sizes="state.pageSizes"
|
||||
:page-size="state.limit"
|
||||
:total="state.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { IHooksOptions } from '@/hooks/interface'
|
||||
import { useDataSourceTestApi } from '@/api/datasource'
|
||||
import { useCrud } from '@/hooks'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import AddOrUpdate from './add-or-update.vue'
|
||||
import { decrypt } from '@/utils/tool'
|
||||
|
||||
const state: IHooksOptions = reactive({
|
||||
dataListUrl: '/gen/datasource/page',
|
||||
deleteUrl: '/gen/datasource',
|
||||
queryForm: {
|
||||
connName: '',
|
||||
dbType: ''
|
||||
}
|
||||
})
|
||||
|
||||
const datasourceHandle = (id: number) => {
|
||||
useDataSourceTestApi(id).then((res: any) => {
|
||||
ElMessage.success(res.data)
|
||||
})
|
||||
}
|
||||
|
||||
const addOrUpdateRef = ref()
|
||||
const addOrUpdateHandle = (id?: number) => {
|
||||
addOrUpdateRef.value.init(id)
|
||||
}
|
||||
|
||||
const {
|
||||
getDataList,
|
||||
selectionChangeHandle,
|
||||
sizeChangeHandle,
|
||||
currentChangeHandle,
|
||||
deleteBatchHandle
|
||||
} = useCrud(state)
|
||||
|
||||
const formatPassword = (str: string): string => {
|
||||
return Array(decrypt(str).length).fill('•').join('')
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="!dataForm.id ? '新增' : '修改'"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="dataForm"
|
||||
:rules="dataRules"
|
||||
label-width="120px"
|
||||
@keyup.enter="submitHandle()"
|
||||
>
|
||||
<el-form-item label="字段类型" prop="columnType">
|
||||
<el-input v-model="dataForm.columnType" placeholder="字段类型"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="属性类型" prop="attrType">
|
||||
<el-input v-model="dataForm.attrType" placeholder="属性类型"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="属性包名" prop="packageName">
|
||||
<el-input v-model="dataForm.packageName" placeholder="属性包名"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitHandle()">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus/es'
|
||||
import { useFieldTypeApi, useFieldTypeSubmitApi } from '@/api/fieldType'
|
||||
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
|
||||
const visible = ref(false)
|
||||
const dataFormRef = ref()
|
||||
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
columnType: '',
|
||||
attrType: '',
|
||||
packageName: '',
|
||||
createDate: ''
|
||||
})
|
||||
|
||||
const init = (id?: number) => {
|
||||
visible.value = true
|
||||
dataForm.id = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// id 存在则为修改
|
||||
if (id) {
|
||||
getFieldType(id)
|
||||
}
|
||||
}
|
||||
|
||||
const getFieldType = (id: number) => {
|
||||
useFieldTypeApi(id).then(res => {
|
||||
Object.assign(dataForm, res.data)
|
||||
})
|
||||
}
|
||||
|
||||
const dataRules = ref({
|
||||
columnType: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
attrType: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
// 表单提交
|
||||
const submitHandle = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
useFieldTypeSubmitApi(dataForm).then(() => {
|
||||
ElMessage.success({
|
||||
message: '操作成功',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
|
||||
<el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="state.queryForm.columnType" placeholder="字段类型"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="state.queryForm.attrType" placeholder="属性类型"></el-input>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="danger" @click="deleteBatchHandle()">删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="state.dataListLoading"
|
||||
:data="state.dataList"
|
||||
border
|
||||
style="width: 100%"
|
||||
@selection-change="selectionChangeHandle"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="columnType"
|
||||
label="字段类型"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="attrType"
|
||||
label="属性类型"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="packageName"
|
||||
label="属性包名"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
|
||||
<el-button type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="state.page"
|
||||
:page-sizes="state.pageSizes"
|
||||
:page-size="state.limit"
|
||||
:total="state.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { IHooksOptions } from '@/hooks/interface'
|
||||
import { useCrud } from '@/hooks'
|
||||
import AddOrUpdate from './add-or-update.vue'
|
||||
|
||||
const state: IHooksOptions = reactive({
|
||||
dataListUrl: '/gen/fieldtype/page',
|
||||
deleteUrl: '/gen/fieldtype',
|
||||
queryForm: {
|
||||
columnType: '',
|
||||
attrType: '',
|
||||
packageName: ''
|
||||
}
|
||||
})
|
||||
|
||||
const addOrUpdateRef = ref()
|
||||
const addOrUpdateHandle = (id?: number) => {
|
||||
addOrUpdateRef.value.init(id)
|
||||
}
|
||||
|
||||
const {
|
||||
getDataList,
|
||||
selectionChangeHandle,
|
||||
sizeChangeHandle,
|
||||
currentChangeHandle,
|
||||
deleteBatchHandle
|
||||
} = useCrud(state)
|
||||
</script>
|
||||
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<el-drawer v-model="visible" title="编辑" :size="1200" :with-header="false">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="属性设置" name="field">
|
||||
<vxe-table
|
||||
ref="fieldTable"
|
||||
border
|
||||
row-key
|
||||
class="sortable-row-gen"
|
||||
:data="fieldList"
|
||||
:checkbox-config="{ checkStrictly: true }"
|
||||
:edit-config="{ trigger: 'click', mode: 'cell' }"
|
||||
>
|
||||
<vxe-column type="seq" width="60"></vxe-column>
|
||||
<vxe-column width="60" title="拖动">
|
||||
<template #default>
|
||||
<span class="drag-btn">
|
||||
<i class="vxe-icon-sort"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template #header>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="按住后可以上下拖动排序"
|
||||
placement="top-start"
|
||||
>
|
||||
<i class="vxe-icon-question-circle-fill"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="name" title="字段名"></vxe-column>
|
||||
<vxe-column
|
||||
field="description"
|
||||
title="说明"
|
||||
:edit-render="{ name: 'input' }"
|
||||
></vxe-column>
|
||||
<vxe-column field="type" title="字段类型"></vxe-column>
|
||||
<!-- <vxe-column field="name" title="属性名" :edit-render="{ name: 'input' }"></vxe-column>
|
||||
<vxe-column field="attrType" title="属性类型">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.attrType">
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</vxe-column> -->
|
||||
<vxe-column field="autoFill" title="自动填充">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.autoFill">
|
||||
<el-option
|
||||
v-for="item in fillList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="primary_key" title="主键">
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.primary_key"></el-checkbox>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="表单配置" name="form">
|
||||
<vxe-table
|
||||
ref="formTable"
|
||||
border
|
||||
row-key
|
||||
:data="fieldList"
|
||||
:checkbox-config="{ checkStrictly: true }"
|
||||
:edit-config="{ trigger: 'click', mode: 'cell' }"
|
||||
>
|
||||
<vxe-column field="name" title="属性名"></vxe-column>
|
||||
<vxe-column field="description" title="说明"></vxe-column>
|
||||
<vxe-column field="editable" title="表单显示">
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.editable"></el-checkbox>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="required" title="表单必填">
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.required"></el-checkbox>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="validations" title="表单效验" :edit-render="{ name: 'input' }">
|
||||
<template #default="{ row }">
|
||||
{{ JSON.stringify(row.validations) }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="display_type" title="表单类型">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.display_type">
|
||||
<el-option
|
||||
v-for="item in display_typeList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column
|
||||
field="formDict"
|
||||
title="表单字典类型"
|
||||
:edit-render="{ name: 'input' }"
|
||||
></vxe-column>
|
||||
</vxe-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="列表配置" name="grid">
|
||||
<vxe-table
|
||||
ref="gridTable"
|
||||
border
|
||||
row-key
|
||||
:data="fieldList"
|
||||
:checkbox-config="{ checkStrictly: true }"
|
||||
:edit-config="{ trigger: 'click', mode: 'cell' }"
|
||||
>
|
||||
<vxe-column field="name" title="属性名"></vxe-column>
|
||||
<vxe-column field="description" title="说明"></vxe-column>
|
||||
<vxe-column field="listable" title="列表显示">
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.listable"></el-checkbox>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="sortable" title="列表排序">
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.sortable"></el-checkbox>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="查询配置" name="query">
|
||||
<vxe-table
|
||||
ref="queryTable"
|
||||
border
|
||||
row-key
|
||||
:data="fieldList"
|
||||
:checkbox-config="{ checkStrictly: true }"
|
||||
:edit-config="{ trigger: 'click', mode: 'cell' }"
|
||||
>
|
||||
<vxe-column field="name" title="属性名"></vxe-column>
|
||||
<vxe-column field="description" title="说明"></vxe-column>
|
||||
<vxe-column field="filterable" title="查询显示">
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.filterable"></el-checkbox>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="filter_operator" title="查询方式">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.filter_operator">
|
||||
<el-option
|
||||
v-for="item in queryList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="display_type" title="查询表单类型">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.display_type">
|
||||
<el-option
|
||||
v-for="item in display_typeList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitHandle()">确定</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, reactive, ref } from 'vue'
|
||||
import { ElMessage, TabsPaneContext } from 'element-plus/es'
|
||||
import Sortable from 'sortablejs'
|
||||
import { useTableFieldSubmitApi } from '@/api/table'
|
||||
import { useTableApi } from '@/api/table'
|
||||
import { useFieldTypeListApi } from '@/api/fieldType'
|
||||
import { VxeTableInstance } from 'vxe-table'
|
||||
|
||||
const activeName = ref()
|
||||
const fieldTable = ref<VxeTableInstance>()
|
||||
const formTable = ref<VxeTableInstance>()
|
||||
const gridTable = ref<VxeTableInstance>()
|
||||
const queryTable = ref<VxeTableInstance>()
|
||||
|
||||
const handleClick = (tab: TabsPaneContext) => {
|
||||
if (tab.paneName !== 'field') {
|
||||
formTable.value?.loadData(fieldList.value)
|
||||
gridTable.value?.loadData(fieldList.value)
|
||||
queryTable.value?.loadData(fieldList.value)
|
||||
}
|
||||
}
|
||||
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
const visible = ref(false)
|
||||
const dataFormRef = ref()
|
||||
|
||||
const sortable = ref() as any
|
||||
|
||||
const typeList = ref([]) as any
|
||||
const tableId = ref()
|
||||
const fieldList = ref([])
|
||||
const fillList = reactive([
|
||||
{ label: 'DEFAULT', value: 'DEFAULT' },
|
||||
{ label: 'INSERT', value: 'INSERT' },
|
||||
{ label: 'UPDATE', value: 'UPDATE' },
|
||||
{ label: 'INSERT_UPDATE', value: 'INSERT_UPDATE' }
|
||||
])
|
||||
|
||||
const queryList = reactive([
|
||||
{ label: '=', value: '=' },
|
||||
{ label: '!=', value: '!=' },
|
||||
{ label: '>', value: '>' },
|
||||
{ label: '>=', value: '>=' },
|
||||
{ label: '<', value: '<' },
|
||||
{ label: '<=', value: '<=' },
|
||||
{ label: 'like', value: 'like' },
|
||||
{ label: 'left like', value: 'left like' },
|
||||
{ label: 'right like', value: 'right like' }
|
||||
])
|
||||
|
||||
const display_typeList = reactive([
|
||||
{ label: '单行文本', value: 'text' },
|
||||
{ label: '多行文本', value: 'textarea' },
|
||||
{ label: '富文本编辑器', value: 'editor' },
|
||||
{ label: '下拉框', value: 'select' },
|
||||
{ label: '单选按钮', value: 'radio' },
|
||||
{ label: '复选框', value: 'checkbox' },
|
||||
{ label: '日期', value: 'date' },
|
||||
{ label: '日期时间', value: 'datetime' }
|
||||
])
|
||||
|
||||
const init = (id: number) => {
|
||||
visible.value = true
|
||||
tableId.value = id
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
activeName.value = 'field'
|
||||
|
||||
rowDrop()
|
||||
getTable(id)
|
||||
getFieldTypeList()
|
||||
}
|
||||
|
||||
const rowDrop = () => {
|
||||
nextTick(() => {
|
||||
const el: any = window.document.querySelector('.body--wrapper>.vxe-table--body tbody')
|
||||
sortable.value = Sortable.create(el, {
|
||||
handle: '.drag-btn',
|
||||
onEnd: (e: any) => {
|
||||
const { newIndex, oldIndex } = e
|
||||
const currRow = fieldList.value.splice(oldIndex, 1)[0]
|
||||
fieldList.value.splice(newIndex, 0, currRow)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getTable = (id: number) => {
|
||||
useTableApi(id).then(res => {
|
||||
fieldList.value = res.data.fields.map(item => {
|
||||
item.autoFill = item.autoFill || 'DEFAULT'
|
||||
return item
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getFieldTypeList = async () => {
|
||||
typeList.value = []
|
||||
|
||||
// 获取数据
|
||||
const { data } = await useFieldTypeListApi()
|
||||
// 设置属性类型值
|
||||
data.forEach((item: any) => typeList.value.push({ label: item, value: item }))
|
||||
// 增加Object类型
|
||||
typeList.value.push({ label: 'Object', value: 'Object' })
|
||||
}
|
||||
|
||||
// 表单提交
|
||||
const submitHandle = () => {
|
||||
useTableFieldSubmitApi(tableId.value, { fields: fieldList.value }).then(() => {
|
||||
ElMessage.success({
|
||||
message: '操作成功',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sortable-row-gen .drag-btn {
|
||||
cursor: move;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sortable-row-gen .vxe-body--row.sortable-ghost,
|
||||
.sortable-row-gen .vxe-body--row.sortable-chosen {
|
||||
background-color: #dfecfb;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" title="生成代码" :close-on-click-modal="false" draggable>
|
||||
<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="表名" prop="tableName">
|
||||
<el-input v-model="dataForm.tableName" disabled placeholder="表名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="说明" prop="tableComment">
|
||||
<el-input v-model="dataForm.tableComment" placeholder="说明"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="类名" prop="className">
|
||||
<el-input v-model="dataForm.className" placeholder="类名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="baseclassId" label="继承">
|
||||
<el-select
|
||||
v-model="dataForm.baseclassId"
|
||||
placeholder="继承"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in baseClassList"
|
||||
:key="item.id"
|
||||
:label="item.code"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="模块名" prop="moduleName">
|
||||
<el-input v-model="dataForm.moduleName" placeholder="模块名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="功能名" prop="functionName">
|
||||
<el-input v-model="dataForm.functionName" placeholder="功能名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="项目包名" prop="packageName">
|
||||
<el-input v-model="dataForm.packageName" placeholder="项目包名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="版本号" prop="version">
|
||||
<el-input v-model="dataForm.version" placeholder="版本号"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="默认作者" prop="author">
|
||||
<el-input v-model="dataForm.author" placeholder="默认作者"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="作者邮箱" prop="email">
|
||||
<el-input v-model="dataForm.email" placeholder="作者邮箱"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="生成方式" prop="generatorType">
|
||||
<el-radio-group v-model="dataForm.generatorType">
|
||||
<el-radio :label="0">zip压缩包</el-radio>
|
||||
<el-radio :label="1">自定义路径</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="表单布局" prop="formLayout">
|
||||
<el-radio-group v-model="dataForm.formLayout">
|
||||
<el-radio :label="1">一列</el-radio>
|
||||
<el-radio :label="2">两列</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item v-if="dataForm.generatorType === 1" label="后端生成路径" prop="backendPath">
|
||||
<el-input v-model="dataForm.backendPath" placeholder="后端生成路径"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dataForm.generatorType === 1" label="前端生成路径" prop="frontendPath">
|
||||
<el-input v-model="dataForm.frontendPath" placeholder="前端生成路径"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitHandle()">保存</el-button>
|
||||
<el-button type="danger" @click="generatorHandle()">生成代码</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus/es'
|
||||
import { useBaseClassListApi } from '@/api/baseClass'
|
||||
import { useGeneratorApi, useDownloadApi } from '@/api/generator'
|
||||
import { useTableApi, useTableSubmitApi } from '@/api/table'
|
||||
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
|
||||
const visible = ref(false)
|
||||
const dataFormRef = ref()
|
||||
const baseClassList = ref<any[]>([])
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
baseclassId: '',
|
||||
generatorType: 0,
|
||||
formLayout: 1,
|
||||
backendPath: '',
|
||||
frontendPath: '',
|
||||
packageName: '',
|
||||
email: '',
|
||||
author: '',
|
||||
version: '',
|
||||
moduleName: '',
|
||||
functionName: '',
|
||||
className: '',
|
||||
tableComment: '',
|
||||
tableName: ''
|
||||
})
|
||||
|
||||
const init = (id: number) => {
|
||||
visible.value = true
|
||||
dataForm.id = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
getBaseClassList()
|
||||
getTable(id)
|
||||
}
|
||||
|
||||
const getBaseClassList = () => {
|
||||
useBaseClassListApi().then(res => {
|
||||
baseClassList.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
const getTable = (id: number) => {
|
||||
useTableApi(id).then(res => {
|
||||
Object.assign(dataForm, res.data)
|
||||
})
|
||||
}
|
||||
|
||||
const dataRules = ref({
|
||||
tableName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
tableComment: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
className: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
packageName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
author: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
moduleName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
functionName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
generatorType: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
formLayout: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
backendPath: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
frontendPath: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
// 保存
|
||||
const submitHandle = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
useTableSubmitApi(dataForm).then(() => {
|
||||
ElMessage.success({
|
||||
message: '操作成功',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 生成代码
|
||||
const generatorHandle = () => {
|
||||
dataFormRef.value.validate(async (valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 先保存
|
||||
await useTableSubmitApi(dataForm)
|
||||
|
||||
// 生成代码，zip压缩包
|
||||
if (dataForm.generatorType === 0) {
|
||||
useDownloadApi([dataForm.id])
|
||||
visible.value = false
|
||||
return
|
||||
}
|
||||
|
||||
// 生成代码，自定义路径
|
||||
useGeneratorApi([dataForm.id]).then(() => {
|
||||
ElMessage.success({
|
||||
message: '操作成功',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.generator-code .el-dialog__body {
|
||||
padding: 15px 30px 0 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" title="导入数据库表" :close-on-click-modal="false" draggable>
|
||||
<el-form ref="dataFormRef" :model="dataForm">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="数据源" prop="datasourceId">
|
||||
<el-select
|
||||
v-model="dataForm.datasourceId"
|
||||
style="width: 100%"
|
||||
placeholder="请选择数据源"
|
||||
@change="getTableList"
|
||||
>
|
||||
<el-option label="默认数据源" value="0"></el-option>
|
||||
<el-option
|
||||
v-for="ds in dataForm.datasourceList"
|
||||
:key="ds.id"
|
||||
:label="ds.connName"
|
||||
:value="ds.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-form-item label="表名" prop="tableName" :label-width="80">
|
||||
<!-- 监听tableName值，如果发生变化，则调用getTableList -->
|
||||
<el-input
|
||||
v-model="dataForm.tableName"
|
||||
placeholder="请输入表名"
|
||||
style="width: 100%"
|
||||
@input="getTableList"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table
|
||||
:data="dataForm.tableList"
|
||||
border
|
||||
style="width: 100%"
|
||||
:max-height="400"
|
||||
@selection-change="selectionChangeHandle"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="60"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="tableName"
|
||||
label="表名"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="tableComment"
|
||||
label="表说明"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitHandle()">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus/es'
|
||||
import { useDataSourceListApi } from '@/api/datasource'
|
||||
import { useTableImportSubmitApi } from '@/api/table'
|
||||
import { useDataSourceTableListApi } from '@/api/datasource'
|
||||
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
|
||||
const visible = ref(false)
|
||||
const dataFormRef = ref()
|
||||
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
tableNameListSelections: [] as any,
|
||||
datasourceId: '',
|
||||
tableName: '',
|
||||
datasourceList: [] as any,
|
||||
tableList: [] as any
|
||||
})
|
||||
|
||||
// 多选
|
||||
const selectionChangeHandle = (selections: any[]) => {
|
||||
dataForm.tableNameListSelections = selections.map((item: any) => item['tableName'])
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
visible.value = true
|
||||
dataForm.id = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
dataForm.tableList = []
|
||||
|
||||
getDataSourceList()
|
||||
}
|
||||
|
||||
const getDataSourceList = () => {
|
||||
useDataSourceListApi().then(res => {
|
||||
dataForm.datasourceList = res.data
|
||||
})
|
||||
}
|
||||
|
||||
const getTableList = () => {
|
||||
useDataSourceTableListApi(dataForm.datasourceId, dataForm.tableName).then(res => {
|
||||
dataForm.tableList = res.data
|
||||
})
|
||||
}
|
||||
|
||||
// 表单提交
|
||||
const submitHandle = () => {
|
||||
const tableNameList = dataForm.tableNameListSelections ? dataForm.tableNameListSelections : []
|
||||
if (tableNameList.length === 0) {
|
||||
ElMessage.warning('请选择记录')
|
||||
return
|
||||
}
|
||||
|
||||
useTableImportSubmitApi(dataForm.datasourceId, { table: tableNameList }).then(() => {
|
||||
ElMessage.success({
|
||||
message: '操作成功',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
|
||||
<el-form-item>
|
||||
<el-input v-model="state.queryForm.name" placeholder="表名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="importHandle()">导入</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="downloadBatchHandle()">生成代码</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="danger" @click="deleteBatchHandle()">删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="state.dataListLoading"
|
||||
:data="state.dataList"
|
||||
border
|
||||
style="width: 100%"
|
||||
@selection-change="selectionChangeHandle"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="表名"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="description"
|
||||
label="表说明"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column prop="template" label="模板名" header-align="center" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.template">
|
||||
<el-option
|
||||
v-for="item in templateList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" header-align="center" align="center" width="300">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="editHandle(scope.row.id)">编辑</el-button>
|
||||
<el-button type="primary" link @click="previewHandle(scope.row.id)">预览</el-button>
|
||||
<el-button type="primary" link @click="generatorHandle(scope.row.id)">生成代码</el-button>
|
||||
<el-button type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
|
||||
<el-button type="primary" link @click="syncHandle(scope.row)">同步</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="state.page"
|
||||
:page-sizes="state.pageSizes"
|
||||
:page-size="state.limit"
|
||||
:total="state.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<import ref="importRef" @refresh-data-list="getDataList"></import>
|
||||
<preview ref="previewRef" @refresh-data-list="getDataList"></preview>
|
||||
<edit ref="editRef" @refresh-data-list="getDataList"></edit>
|
||||
<generator ref="generatorRef" @refresh-data-list="getDataList"></generator>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { IHooksOptions } from '@/hooks/interface'
|
||||
import { useCrud } from '@/hooks'
|
||||
import Import from './import.vue'
|
||||
import Edit from './edit.vue'
|
||||
import Preview from './preview.vue'
|
||||
import Generator from './generator.vue'
|
||||
import { useTableSyncApi } from '@/api/table'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useDownloadApi } from '@/api/generator'
|
||||
|
||||
const state: IHooksOptions = reactive({
|
||||
dataListUrl: '/gen/table/page',
|
||||
deleteUrl: '/gen/table',
|
||||
queryForm: {
|
||||
name: ''
|
||||
}
|
||||
})
|
||||
|
||||
const importRef = ref()
|
||||
const editRef = ref()
|
||||
const previewRef = ref()
|
||||
const generatorRef = ref()
|
||||
|
||||
const importHandle = (id?: number) => {
|
||||
importRef.value.init(id)
|
||||
}
|
||||
|
||||
const editHandle = (id?: number) => {
|
||||
editRef.value.init(id)
|
||||
}
|
||||
const previewHandle = (tableId?: number) => {
|
||||
previewRef.value.init(tableId)
|
||||
}
|
||||
const generatorHandle = (id?: number) => {
|
||||
generatorRef.value.init(id)
|
||||
}
|
||||
|
||||
const downloadBatchHandle = () => {
|
||||
const tableIds = state.dataListSelections ? state.dataListSelections : []
|
||||
|
||||
if (tableIds.length === 0) {
|
||||
ElMessage.warning('请选择生成代码的表')
|
||||
return
|
||||
}
|
||||
|
||||
useDownloadApi(tableIds)
|
||||
}
|
||||
|
||||
const syncHandle = (row: any) => {
|
||||
ElMessageBox.confirm(`确定同步数据表${row.name}吗?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
useTableSyncApi(row.id).then(() => {
|
||||
ElMessage.success('同步成功')
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const templateList = ref([
|
||||
{
|
||||
label: 'relation-demo',
|
||||
value: 'relation-demo'
|
||||
},
|
||||
{
|
||||
label: 'vue-fastapi-admin',
|
||||
value: 'vue-fastapi-admin'
|
||||
}
|
||||
])
|
||||
|
||||
const {
|
||||
getDataList,
|
||||
selectionChangeHandle,
|
||||
sizeChangeHandle,
|
||||
currentChangeHandle,
|
||||
deleteBatchHandle
|
||||
} = useCrud(state)
|
||||
</script>
|
||||
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<!-- 预览界面 -->
|
||||
<el-drawer v-model="preview.visible" title="编辑" :size="1200" :with-header="false">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
style="max-width: 600px; margin-top: 1rem"
|
||||
:data="treeData"
|
||||
:props="{
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<el-tabs v-model="preview.activeName" @tab-click="handleTabClick">
|
||||
<el-tab-pane
|
||||
v-for="(item, key) in preview.data"
|
||||
:key="key"
|
||||
:label="item.fileName"
|
||||
:name="key"
|
||||
>
|
||||
<code-mirror
|
||||
v-model="item.content"
|
||||
height="calc(100vh - 40px - 40px - 15px)"
|
||||
></code-mirror>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted, nextTick } from 'vue'
|
||||
import { ElLoading } from 'element-plus'
|
||||
import { usePreviewApi } from '@/api/generator'
|
||||
import CodeMirror from '@/components/codemirror/CodeMirror.vue'
|
||||
|
||||
const treeRef = ref(null)
|
||||
const preview = reactive({
|
||||
visible: false,
|
||||
title: '代码预览',
|
||||
data: {},
|
||||
activeName: ref(0)
|
||||
})
|
||||
|
||||
const init = async (tableId?: number) => {
|
||||
const loadingInstance = ElLoading.service({ fullscreen: true })
|
||||
try {
|
||||
let resData = await usePreviewApi(tableId)
|
||||
preview.activeName = 0
|
||||
preview.data = resData.data.map((item: previewItem) => {
|
||||
item.fileName = item.path.split('/').slice(-1)[0].split('\\').slice(-1)[0]
|
||||
return item
|
||||
})
|
||||
treeData.value = pathsToElTree(preview.data.map(item => item.path))
|
||||
preview.visible = true
|
||||
await nextTick()
|
||||
expandAllNodes()
|
||||
} finally {
|
||||
loadingInstance.close()
|
||||
}
|
||||
}
|
||||
|
||||
interface TreeNode {
|
||||
id: string
|
||||
label: string
|
||||
path: string
|
||||
children: TreeNode[]
|
||||
}
|
||||
|
||||
interface previewItem {
|
||||
path: string
|
||||
fileName: string
|
||||
content: string
|
||||
}
|
||||
|
||||
const treeData = ref<TreeNode[]>()
|
||||
|
||||
function insertPathIntoTree(
|
||||
tree: TreeNode[],
|
||||
parts: string[],
|
||||
path: string,
|
||||
index: number = 0
|
||||
): void {
|
||||
if (index >= parts.length) {
|
||||
return
|
||||
}
|
||||
const part = parts[index]
|
||||
let node = tree.find(n => n.label === part)
|
||||
if (!node) {
|
||||
node = {
|
||||
id: part,
|
||||
label: part,
|
||||
path: path,
|
||||
children: []
|
||||
}
|
||||
tree.push(node)
|
||||
}
|
||||
insertPathIntoTree(node.children, parts, path, index + 1)
|
||||
}
|
||||
|
||||
function pathsToElTree(paths: string[]): TreeNode[] {
|
||||
const tree: TreeNode[] = []
|
||||
paths.forEach(path => {
|
||||
const parts = path.split(/[\\/]/)
|
||||
insertPathIntoTree(tree, parts, path)
|
||||
})
|
||||
return tree
|
||||
}
|
||||
|
||||
const handleNodeClick = (node: TreeNode) => {
|
||||
const targetTab = preview.data.findIndex(item => item.path === node.path)
|
||||
if (targetTab !== -1) {
|
||||
preview.activeName = targetTab
|
||||
}
|
||||
// 展开两级节点
|
||||
const tree = treeRef.value
|
||||
if (tree) {
|
||||
const store = tree.store
|
||||
const nodeModel = store.getNode(node.id)
|
||||
if (nodeModel) {
|
||||
nodeModel.expanded = true
|
||||
if (nodeModel.childNodes) {
|
||||
nodeModel.childNodes.forEach(child => {
|
||||
child.expanded = true
|
||||
if (child.childNodes) {
|
||||
child.childNodes.forEach(grandChild => {
|
||||
grandChild.expanded = true
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleTabClick = (tab: { label: string }) => {
|
||||
const targetNode = findNodeInTree(treeData.value || [], tab.label)
|
||||
if (targetNode) {
|
||||
// 这里假设 el-tree 有展开节点的方法，具体方法名可能需要根据 el-tree 的实际 API 来调整
|
||||
// 例如：展开节点的方法可能是 expand(node)，这里只是示例
|
||||
// expand(targetNode)
|
||||
}
|
||||
}
|
||||
|
||||
function findNodeInTree(tree: TreeNode[], label: string): TreeNode | null {
|
||||
for (const node of tree) {
|
||||
if (node.label === label) {
|
||||
return node
|
||||
}
|
||||
const childNode = findNodeInTree(node.children, label)
|
||||
if (childNode) {
|
||||
return childNode
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const expandAllNodes = () => {
|
||||
const tree = treeRef.value
|
||||
if (tree) {
|
||||
const store = tree.store
|
||||
const rootNodes = store.root.childNodes
|
||||
const expandNode = node => {
|
||||
node.expanded = true
|
||||
if (node.childNodes) {
|
||||
node.childNodes.forEach(child => {
|
||||
expandNode(child)
|
||||
})
|
||||
}
|
||||
}
|
||||
rootNodes.forEach(rootNode => {
|
||||
expandNode(rootNode)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
expandAllNodes()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="!dataForm.id ? '新增' : '修改'"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="dataForm"
|
||||
:rules="dataRules"
|
||||
label-width="100px"
|
||||
@keyup.enter="submitHandle()"
|
||||
>
|
||||
<el-form-item label="项目名" prop="projectName">
|
||||
<el-input v-model="dataForm.projectName" placeholder="项目名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目标识" prop="projectCode">
|
||||
<el-input v-model="dataForm.projectCode" placeholder="项目标识"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目包名" prop="projectPackage">
|
||||
<el-input v-model="dataForm.projectPackage" placeholder="项目包名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目路径" prop="projectPath">
|
||||
<el-input v-model="dataForm.projectPath" placeholder="项目路径"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitHandle()">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus/es'
|
||||
import { useProjectApi, useProjectSubmitApi } from '@/api/project'
|
||||
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
|
||||
const visible = ref(false)
|
||||
const dataFormRef = ref()
|
||||
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
projectName: '',
|
||||
projectCode: '',
|
||||
projectPackage: '',
|
||||
projectPath: ''
|
||||
})
|
||||
|
||||
const init = (id?: number) => {
|
||||
visible.value = true
|
||||
dataForm.id = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
if (id) {
|
||||
getProject(id)
|
||||
}
|
||||
}
|
||||
|
||||
const getProject = (id: number) => {
|
||||
useProjectApi(id).then(res => {
|
||||
Object.assign(dataForm, res.data)
|
||||
})
|
||||
}
|
||||
|
||||
const dataRules = ref({
|
||||
projectName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
projectCode: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
projectPackage: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
projectPath: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
// 表单提交
|
||||
const submitHandle = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
useProjectSubmitApi(dataForm).then(() => {
|
||||
ElMessage.success({
|
||||
message: '操作成功',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" title="源码下载" :close-on-click-modal="false">
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="dataForm"
|
||||
:rules="dataRules"
|
||||
label-width="100px"
|
||||
@keyup.enter="submitHandle()"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="项目名" prop="projectName">
|
||||
<el-input v-model="dataForm.projectName" placeholder="项目名" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="项目路径" prop="projectPath">
|
||||
<el-input v-model="dataForm.projectPath" placeholder="项目路径" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="项目标识" prop="projectCode">
|
||||
<el-input v-model="dataForm.projectCode" placeholder="项目标识" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="项目包名" prop="projectPackage">
|
||||
<el-input v-model="dataForm.projectPackage" placeholder="项目包名" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider> 变更后的信息 </el-divider>
|
||||
|
||||
<el-form-item label="项目名" prop="modifyProjectName">
|
||||
<el-input v-model="dataForm.modifyProjectName" placeholder="项目名"></el-input>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="项目标识" prop="modifyProjectCode">
|
||||
<el-input v-model="dataForm.modifyProjectCode" placeholder="项目标识"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="项目包名" prop="modifyProjectPackage">
|
||||
<el-input v-model="dataForm.modifyProjectPackage" placeholder="项目包名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="排除文件" prop="exclusions">
|
||||
<el-input v-model="dataForm.exclusions" placeholder="排除文件"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="变更文件" prop="modifySuffix">
|
||||
<el-input v-model="dataForm.modifySuffix" placeholder="变更文件"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitHandle()">下载</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useProjectApi, useProjectSubmitApi, useSourceDownloadApi } from '@/api/project'
|
||||
|
||||
const visible = ref(false)
|
||||
const dataFormRef = ref()
|
||||
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
projectName: '',
|
||||
projectCode: '',
|
||||
projectPackage: '',
|
||||
projectPath: '',
|
||||
modifyProjectName: '',
|
||||
modifyProjectCode: '',
|
||||
modifyProjectPackage: '',
|
||||
exclusions: '',
|
||||
modifySuffix: ''
|
||||
})
|
||||
|
||||
const init = (id?: number) => {
|
||||
visible.value = true
|
||||
dataForm.id = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
if (id) {
|
||||
getProject(id)
|
||||
}
|
||||
}
|
||||
|
||||
const getProject = (id: number) => {
|
||||
useProjectApi(id).then(res => {
|
||||
Object.assign(dataForm, res.data)
|
||||
})
|
||||
}
|
||||
|
||||
const dataRules = ref({
|
||||
modifyProjectName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
modifyProjectCode: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
modifyProjectPackage: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
exclusions: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
modifySuffix: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
// 表单提交
|
||||
const submitHandle = () => {
|
||||
dataFormRef.value.validate(async (valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 先保存
|
||||
await useProjectSubmitApi(dataForm)
|
||||
|
||||
// 源码下载
|
||||
useSourceDownloadApi(dataForm.id)
|
||||
visible.value = false
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
|
||||
<el-form-item>
|
||||
<el-input v-model="state.queryForm.projectName" placeholder="项目名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="danger" @click="deleteBatchHandle()">删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="state.dataListLoading"
|
||||
:data="state.dataList"
|
||||
border
|
||||
style="width: 100%"
|
||||
@selection-change="selectionChangeHandle"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="projectName"
|
||||
label="项目名"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="projectCode"
|
||||
label="项目标识"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="projectPackage"
|
||||
label="项目包名"
|
||||
show-overflow-tooltip
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="projectPath"
|
||||
label="项目路径"
|
||||
show-overflow-tooltip
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" header-align="center" align="center" width="180">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
|
||||
<el-button type="primary" link @click="downloadHandle(scope.row.id)">源码下载</el-button>
|
||||
<el-button type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="state.page"
|
||||
:page-sizes="state.pageSizes"
|
||||
:page-size="state.limit"
|
||||
:total="state.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>
|
||||
<!-- 源码下载 -->
|
||||
<download ref="downloadRef"></download>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCrud } from '@/hooks'
|
||||
import { reactive, ref } from 'vue'
|
||||
import AddOrUpdate from './add-or-update.vue'
|
||||
import Download from './download.vue'
|
||||
import { IHooksOptions } from '@/hooks/interface'
|
||||
|
||||
const state: IHooksOptions = reactive({
|
||||
dataListUrl: '/gen/project/page',
|
||||
deleteUrl: '/gen/project',
|
||||
queryForm: {
|
||||
projectName: ''
|
||||
}
|
||||
})
|
||||
|
||||
const addOrUpdateRef = ref()
|
||||
const addOrUpdateHandle = (id?: number) => {
|
||||
addOrUpdateRef.value.init(id)
|
||||
}
|
||||
|
||||
const downloadRef = ref()
|
||||
const downloadHandle = (id?: number) => {
|
||||
downloadRef.value.init(id)
|
||||
}
|
||||
|
||||
const {
|
||||
getDataList,
|
||||
selectionChangeHandle,
|
||||
sizeChangeHandle,
|
||||
currentChangeHandle,
|
||||
deleteBatchHandle
|
||||
} = useCrud(state)
|
||||
</script>
|
||||
Reference in New Issue
Block a user