!25 Vue3 重构:基础设施 -> 数据源配置功能

Merge pull request !25 from xiaowuye/dev
This commit is contained in:
芋道源码 2023-03-11 09:45:24 +00:00 committed by Gitee
commit 21827d43f1
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
4 changed files with 218 additions and 203 deletions

View File

@ -1,35 +1,35 @@
import request from '@/config/axios' import request from '@/config/axios'
export interface DataSourceConfigVO { export interface DataSourceConfigVO {
id: number id: number | undefined
name: string name: string
url: string url: string
username: string username: string
password: string password: string
createTime: Date createTime?: Date
}
// 查询数据源配置列表
export const getDataSourceConfigListApi = () => {
return request.get({ url: '/infra/data-source-config/list' })
}
// 查询数据源配置详情
export const getDataSourceConfigApi = (id: number) => {
return request.get({ url: '/infra/data-source-config/get?id=' + id })
} }
// 新增数据源配置 // 新增数据源配置
export const createDataSourceConfigApi = (data: DataSourceConfigVO) => { export const createDataSourceConfig = (data: DataSourceConfigVO) => {
return request.post({ url: '/infra/data-source-config/create', data }) return request.post({ url: '/infra/data-source-config/create', data })
} }
// 修改数据源配置 // 修改数据源配置
export const updateDataSourceConfigApi = (data: DataSourceConfigVO) => { export const updateDataSourceConfig = (data: DataSourceConfigVO) => {
return request.put({ url: '/infra/data-source-config/update', data }) return request.put({ url: '/infra/data-source-config/update', data })
} }
// 删除数据源配置 // 删除数据源配置
export const deleteDataSourceConfigApi = (id: number) => { export const deleteDataSourceConfig = (id: number) => {
return request.delete({ url: '/infra/data-source-config/delete?id=' + id }) return request.delete({ url: '/infra/data-source-config/delete?id=' + id })
} }
// 查询数据源配置详情
export const getDataSourceConfig = (id: number) => {
return request.get({ url: '/infra/data-source-config/get?id=' + id })
}
// 查询数据源配置列表
export const getDataSourceConfigList = () => {
return request.get({ url: '/infra/data-source-config/list' })
}

View File

@ -1,52 +0,0 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// 国际化
const { t } = useI18n()
// 表单校验
export const rules = reactive({
name: [required],
url: [required],
username: [required],
password: [required]
})
// 新增 + 修改
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
action: true,
columns: [
{
title: '数据源名称',
field: 'name'
},
{
title: '数据源连接',
field: 'url',
form: {
component: 'Input',
componentProps: {
type: 'textarea',
rows: 4
},
colProps: {
span: 24
}
}
},
{
title: '用户名',
field: 'username'
},
{
title: '密码',
field: 'password',
isTable: false
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

View File

@ -0,0 +1,114 @@
<template>
<Dialog :title="modelTitle" v-model="modelVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="数据源名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入参数名称" />
</el-form-item>
<el-form-item label="数据源连接" prop="url">
<el-input v-model="formData.url" placeholder="请输入数据源连接" />
</el-form-item>
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="formData.password" placeholder="请输入密码" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="modelVisible = false"> </el-button>
</div>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
import { DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
import { isNullOrUnDef } from '@/utils/is'
import { omit } from 'lodash-es'
const { t } = useI18n() //
const message = useMessage() //
const modelVisible = ref(false) //
const modelTitle = ref('') //
const formLoading = ref(false) // 12
const formType = ref('') // create - update -
const formData = ref<DataSourceConfigVO>({
id: undefined,
name: '',
url: '',
username: '',
password: ''
})
const formRules = reactive({
name: [{ required: true, message: '数据源名称不能为空', trigger: 'blur' }],
url: [{ required: true, message: '数据源连接不能为空', trigger: 'blur' }],
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
})
const formRef = ref() // Ref
/** 打开弹窗 */
const openModal = async (type: string, id?: number) => {
modelVisible.value = true
modelTitle.value = t('action.' + type)
formType.value = type
resetForm()
//
if (!isNullOrUnDef(id)) {
formLoading.value = true
try {
formData.value = await DataSourceConfigApi.getDataSourceConfig(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ openModal }) // openModal
/** 提交表单 */
const emit = defineEmits(['success']) // success
const submitForm = async () => {
//
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
//
formLoading.value = true
try {
const data = omit(unref(formData), 'createTime')
if (formType.value === 'create') {
await DataSourceConfigApi.createDataSourceConfig(data)
message.success(t('common.createSuccess'))
} else {
await DataSourceConfigApi.updateDataSourceConfig(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
//
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: '',
url: '',
username: '',
password: ''
}
formRef.value?.resetFields()
}
</script>

View File

@ -1,145 +1,98 @@
<template> <template>
<ContentWrap> <content-wrap>
<!-- 列表 --> <!-- 搜索工作栏 -->
<XTable @register="registerTable"> <el-form :inline="true" label-width="68px">
<template #toolbar_buttons> <el-form-item>
<XButton <el-button
type="primary" type="primary"
preIcon="ep:zoom-in" @click="openModal('create')"
:title="t('action.add')"
v-hasPermi="['infra:data-source-config:create']" v-hasPermi="['infra:data-source-config:create']"
@click="handleCreate()" >
/> <Icon icon="ep:plus" class="mr-5px" /> 新增
</template> </el-button>
<template #actionbtns_default="{ row }"> </el-form-item>
<!-- 操作修改 --> </el-form>
<XTextButton
preIcon="ep:edit" <!-- 列表 -->
:title="t('action.edit')" <el-table v-loading="loading" :data="list" align="center">
v-hasPermi="['infra:data-source-config:update']" <el-table-column label="主键编号" align="center" prop="id" />
@click="handleUpdate(row.id)" <el-table-column label="数据源名称" align="center" prop="name" />
/> <el-table-column label="数据源连接" align="center" prop="url" :show-overflow-tooltip="true" />
<!-- 操作详情 --> <el-table-column label="用户名" align="center" prop="username" />
<XTextButton <el-table-column
preIcon="ep:view" label="创建时间"
:title="t('action.detail')" align="center"
v-hasPermi="['infra:data-source-config:query']" prop="createTime"
@click="handleDetail(row.id)" width="180"
/> :formatter="dateFormatter"
<!-- 操作删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['infra:data-source-config:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
ref="formRef"
/>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
/>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮保存 -->
<XButton
v-if="['create', 'update'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="loading"
@click="submitForm()"
/> />
<!-- 按钮关闭 --> <el-table-column label="操作" align="center">
<XButton :loading="loading" :title="t('dialog.close')" @click="dialogVisible = false" /> <template #default="scope">
</template> <el-button
</XModal> link
type="primary"
@click="openModal('update', scope.row.id)"
v-hasPermi="['infra:data-source-config:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['infra:data-source-config:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</content-wrap>
<!-- 表单弹窗添加/修改 -->
<data-source-config-form ref="modalRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="DataSourceConfig"> <script setup lang="ts" name="DataSourceConfig">
import type { FormExpose } from '@/components/Form' import { dateFormatter } from '@/utils/formatTime'
// import import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
import * as DataSourceConfiggApi from '@/api/infra/dataSourceConfig' import DataSourceConfigForm from './form.vue'
import { rules, allSchemas } from './dataSourceConfig.data'
const { t } = useI18n() //
const message = useMessage() // const message = useMessage() //
// const { t } = useI18n() //
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas, const loading = ref(true) //
isList: true, const list = ref([]) //
getListApi: DataSourceConfiggApi.getDataSourceConfigListApi,
deleteApi: DataSourceConfiggApi.deleteDataSourceConfigApi /** 查询参数列表 */
const getList = async () => {
loading.value = true
try {
list.value = await DataSourceConfigApi.getDataSourceConfigList()
} finally {
loading.value = false
}
}
/** 添加/修改操作 */
const modalRef = ref()
const openModal = (type: string, id?: number) => {
modalRef.value.openModal(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
//
await message.delConfirm()
//
await DataSourceConfigApi.deleteDataSourceConfig(id)
message.success(t('common.delSuccess'))
//
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
}) })
// ========== CRUD ==========
const loading = ref(false) //
const actionType = ref('') //
const dialogVisible = ref(false) //
const dialogTitle = ref('edit') //
const formRef = ref<FormExpose>() // Ref
const detailData = ref() // Ref
//
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
//
const handleCreate = () => {
setDialogTile('create')
}
//
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
//
const res = await DataSourceConfiggApi.getDataSourceConfigApi(rowId)
unref(formRef)?.setValues(res)
}
//
const handleDetail = async (rowId: number) => {
//
const res = await DataSourceConfiggApi.getDataSourceConfigApi(rowId)
detailData.value = res
setDialogTile('detail')
}
//
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
loading.value = true
//
try {
const data = unref(formRef)?.formModel as DataSourceConfiggApi.DataSourceConfigVO
if (actionType.value === 'create') {
await DataSourceConfiggApi.createDataSourceConfigApi(data)
message.success(t('common.createSuccess'))
} else {
await DataSourceConfiggApi.updateDataSourceConfigApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
loading.value = false
//
await reload()
}
}
})
}
</script> </script>