feat(editor): 对齐 Astral 完成数据中心接口接入与分组选择修复
This commit is contained in:
plum
parent
838939855e
commit
43c2be9525
23
packages/editor/src/http/api/dataSetGroup.ts
Normal file
23
packages/editor/src/http/api/dataSetGroup.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import {request} from "@/http/request";
|
||||
|
||||
export interface DataSetGroupPayload {
|
||||
id?: IDataSet.IGroup["id"];
|
||||
name: string;
|
||||
pid: IDataSet.IGroup["pid"];
|
||||
}
|
||||
|
||||
export function fetchDataSetGroupTree() {
|
||||
return request.get<IDataSet.IGroup[]>(`/data-set-group/tree`);
|
||||
}
|
||||
|
||||
export function fetchCreateDataSetGroup(data: DataSetGroupPayload) {
|
||||
return request.post(`/data-set-group`, data);
|
||||
}
|
||||
|
||||
export function fetchUpdateDataSetGroup(data: DataSetGroupPayload) {
|
||||
return request.put(`/data-set-group`, data);
|
||||
}
|
||||
|
||||
export function fetchDeleteDataSetGroup(id: IDataSet.IGroup["id"]) {
|
||||
return request.delete(`/data-set-group/${id}`, {});
|
||||
}
|
||||
30
packages/editor/src/http/api/dataSource.ts
Normal file
30
packages/editor/src/http/api/dataSource.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import {request} from "@/http/request";
|
||||
|
||||
export interface DataSourcePayload {
|
||||
id?: IDataSource.Item["id"];
|
||||
name: string;
|
||||
type: string;
|
||||
connectionString: string;
|
||||
username?: string;
|
||||
password?: string;
|
||||
}
|
||||
|
||||
export function fetchDataSourceList() {
|
||||
return request.get<IDataSource.Item[]>(`/data-source/list`);
|
||||
}
|
||||
|
||||
export function fetchCreateDataSource(data: DataSourcePayload) {
|
||||
return request.post<IDataSource.Item>(`/data-source`, data);
|
||||
}
|
||||
|
||||
export function fetchUpdateDataSource(data: DataSourcePayload) {
|
||||
return request.put<IDataSource.Item>(`/data-source`, data);
|
||||
}
|
||||
|
||||
export function fetchDeleteDataSource(id: IDataSource.Item["id"]) {
|
||||
return request.delete(`/data-source/${id}`, {});
|
||||
}
|
||||
|
||||
export function fetchTestDataSource(data: DataSourcePayload) {
|
||||
return request.post(`/data-source/test`, data);
|
||||
}
|
||||
@ -21,7 +21,7 @@
|
||||
</n-split> -->
|
||||
|
||||
<n-flex class="h-full w-full">
|
||||
<DataSetGroup class="w-50 min-w-300px max-w-500px" />
|
||||
<DataSetGroup class="w-50 min-w-300px max-w-500px" @select="handleGroupSelect" />
|
||||
|
||||
<n-divider vertical class="!h-full" />
|
||||
|
||||
@ -34,9 +34,9 @@
|
||||
</template>
|
||||
</n-input>
|
||||
|
||||
<n-button type="primary" @click="showDataSetModal = true">{{ t('home.Add data set') }}</n-button>
|
||||
<n-button type="primary" @click="handleAddDataSet">{{ t('home.Add data set') }}</n-button>
|
||||
</div>
|
||||
<n-data-table ref="tableRef" :columns="dataSetColumns" :data="dataSets" :pagination="pagination" />
|
||||
<n-data-table :columns="dataSetColumns" :data="dataSets" :pagination="pagination" :loading="tableLoading" />
|
||||
</div>
|
||||
</n-flex>
|
||||
|
||||
@ -45,29 +45,32 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, h, onMounted, useTemplateRef } from 'vue';
|
||||
import { ref, reactive, h, onMounted } from 'vue';
|
||||
import { NButton, NPopconfirm } from 'naive-ui';
|
||||
import type { DataTableInst } from 'naive-ui';
|
||||
import { Search } from '@vicons/carbon';
|
||||
import { t } from "@/language";
|
||||
import { fetchDataSetDetail, fetchDataSetPage, fetchDeleteDataSet } from "@/http/api/dataSet";
|
||||
import DataSetModal from "./DataSetModal.vue";
|
||||
import DataSetGroup from "./DataSetGroup.vue";
|
||||
|
||||
const tableRef = useTemplateRef<DataTableInst>("tableRef");
|
||||
const dataSets = ref<IDataSet.Item[]>([
|
||||
{
|
||||
id: '',
|
||||
groupId:"1",
|
||||
name: '323324234',
|
||||
type: 'SQL'
|
||||
}
|
||||
])
|
||||
const dataSets = ref<IDataSet.Item[]>([])
|
||||
const tableLoading = ref(false);
|
||||
const showDataSetModal = ref(false)
|
||||
const currentDataSet = reactive<IDataSet.Item>({
|
||||
const searchName = ref("");
|
||||
const selectedGroupId = ref<IDataSet.IGroup["id"] | null>(null);
|
||||
const defaultDataSet: IDataSet.Item = {
|
||||
id: '',
|
||||
groupId:"1",
|
||||
groupId: '',
|
||||
name: '',
|
||||
type: 'SQL'
|
||||
type: 'API',
|
||||
method: 'GET',
|
||||
api: '',
|
||||
dataSource: '',
|
||||
sql: '',
|
||||
json: ''
|
||||
};
|
||||
const currentDataSet = reactive<IDataSet.Item>({
|
||||
...defaultDataSet
|
||||
})
|
||||
const dataSetColumns = [
|
||||
{
|
||||
@ -119,23 +122,75 @@ const dataSetColumns = [
|
||||
}
|
||||
]
|
||||
// 分页配置
|
||||
const pagination = { pageSize: 10 }
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pageCount: 1,
|
||||
"on-update:page": (page: number) => {
|
||||
pagination.page = page;
|
||||
getList();
|
||||
}
|
||||
})
|
||||
|
||||
function getList() { }
|
||||
|
||||
function handleSearch(searchText: string) {
|
||||
tableRef.value?.filter({
|
||||
name: [searchText]
|
||||
})
|
||||
function resetCurrentDataSet(data?: Partial<IDataSet.Item>) {
|
||||
Object.assign(currentDataSet, defaultDataSet, data || {});
|
||||
}
|
||||
|
||||
function editDataSet(item) {
|
||||
Object.assign(currentDataSet, item)
|
||||
async function getList() {
|
||||
tableLoading.value = true;
|
||||
const res = await fetchDataSetPage({
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
name: searchName.value || undefined,
|
||||
groupId: selectedGroupId.value ?? undefined
|
||||
});
|
||||
tableLoading.value = false;
|
||||
dataSets.value = res.data?.items || [];
|
||||
pagination.pageCount = res.data?.pages || 1;
|
||||
if (res.data?.current) {
|
||||
pagination.page = res.data.current;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch(searchText: string) {
|
||||
searchName.value = searchText;
|
||||
pagination.page = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
function handleGroupSelect(group: IDataSet.IGroup | null) {
|
||||
selectedGroupId.value = group?.id ?? null;
|
||||
pagination.page = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
function handleAddDataSet() {
|
||||
resetCurrentDataSet({
|
||||
groupId: selectedGroupId.value ?? ""
|
||||
});
|
||||
showDataSetModal.value = true;
|
||||
}
|
||||
|
||||
async function editDataSet(item) {
|
||||
const res = await fetchDataSetDetail(item.id);
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
const detail = (res.data || item) as any;
|
||||
resetCurrentDataSet({
|
||||
...detail,
|
||||
dataSource: detail.dataSourceId || detail.dataSource || ""
|
||||
});
|
||||
showDataSetModal.value = true
|
||||
}
|
||||
|
||||
function deleteDataSet(item) {
|
||||
dataSets.value = dataSets.value.filter(ds => ds.id !== item.id)
|
||||
async function deleteDataSet(item) {
|
||||
const res = await fetchDeleteDataSet(item.id);
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
window.$message?.success(t("prompt.Success to delete"));
|
||||
getList();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -34,49 +34,20 @@ import { ref, reactive,onMounted } from "vue";
|
||||
import type { DropdownOption, TreeOption, TreeOverrideNodeClickBehaviorReturn } from 'naive-ui';
|
||||
import { Search, Add } from '@vicons/carbon';
|
||||
import { t } from "@/language";
|
||||
import { fetchDataSetGroupTree, fetchDeleteDataSetGroup } from "@/http/api/dataSetGroup";
|
||||
import DataSetGroupModal from "./DataSetGroupModal.vue";
|
||||
|
||||
const pattern = ref("");
|
||||
const data: IDataSet.IGroup[] = [
|
||||
{
|
||||
name: '0',
|
||||
id: '0',
|
||||
children: [
|
||||
{
|
||||
name: '0-0',
|
||||
id: '0-0',
|
||||
children: [
|
||||
{ name: '0-0-0', id: '0-0-0' },
|
||||
{ name: '0-0-1', id: '0-0-1' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '0-1',
|
||||
id: '0-1',
|
||||
children: [
|
||||
{ name: '0-1-0', id: '0-1-0' },
|
||||
{ name: '0-1-1', id: '0-1-1' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '1',
|
||||
id: '1',
|
||||
children: [
|
||||
{
|
||||
name: '1-0',
|
||||
id: '1-0'
|
||||
},
|
||||
{
|
||||
name: '1-1',
|
||||
id: '1-1'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
const emits = defineEmits(["select"]);
|
||||
|
||||
function getTreeData(){}
|
||||
const pattern = ref("");
|
||||
const data = ref<IDataSet.IGroup[]>([]);
|
||||
const selectedGroup = ref<IDataSet.IGroup | null>(null);
|
||||
const activeNode = ref<IDataSet.IGroup | null>(null);
|
||||
|
||||
async function getTreeData(){
|
||||
const res = await fetchDataSetGroupTree();
|
||||
data.value = res.data || [];
|
||||
}
|
||||
|
||||
// 子节点选中，含子节点则展开
|
||||
function handleOverride({ option }): TreeOverrideNodeClickBehaviorReturn {
|
||||
@ -96,7 +67,7 @@ const currentGroup = reactive<IDataSet.IGroup>({
|
||||
|
||||
function handleAddGroup(){
|
||||
currentGroup.id = "";
|
||||
currentGroup.pid = "";
|
||||
currentGroup.pid = selectedGroup.value?.id ?? "";
|
||||
currentGroup.name = "";
|
||||
|
||||
showGroupModal.value = true;
|
||||
@ -107,8 +78,7 @@ const showDropdown = ref(false);
|
||||
const options = ref<DropdownOption[]>([
|
||||
{
|
||||
label: t("home.Delete"),
|
||||
key: 'delete',
|
||||
disabled: true
|
||||
key: 'delete'
|
||||
},
|
||||
{
|
||||
label: t("layout.sider.script.Edit"),
|
||||
@ -120,9 +90,15 @@ const y = ref(0)
|
||||
|
||||
// 绑定节点属性以实现右键菜单
|
||||
function handleNodeProps({ option }: { option: TreeOption }) {
|
||||
const group = option as IDataSet.IGroup;
|
||||
return {
|
||||
onClick() { },
|
||||
onClick() {
|
||||
selectedGroup.value = group;
|
||||
emits("select", group);
|
||||
},
|
||||
onContextmenu(e: MouseEvent): void {
|
||||
activeNode.value = group;
|
||||
selectedGroup.value = group;
|
||||
showDropdown.value = true;
|
||||
x.value = e.clientX;
|
||||
y.value = e.clientY;
|
||||
@ -132,8 +108,34 @@ function handleNodeProps({ option }: { option: TreeOption }) {
|
||||
}
|
||||
}
|
||||
|
||||
function handleDropdownSelect() {
|
||||
async function handleDropdownSelect(key: string) {
|
||||
showDropdown.value = false;
|
||||
if (!activeNode.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (key === "edit") {
|
||||
Object.assign(currentGroup, {
|
||||
id: activeNode.value.id,
|
||||
pid: activeNode.value.pid ?? "",
|
||||
name: activeNode.value.name
|
||||
});
|
||||
showGroupModal.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (key === "delete") {
|
||||
const res = await fetchDeleteDataSetGroup(activeNode.value.id);
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
window.$message?.success(t("prompt.Success to delete"));
|
||||
if (selectedGroup.value?.id === activeNode.value.id) {
|
||||
selectedGroup.value = null;
|
||||
emits("select", null);
|
||||
}
|
||||
getTreeData();
|
||||
}
|
||||
}
|
||||
|
||||
function handleDropdownClickoutside() {
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<n-modal :show="show" @mask-click="handleClose">
|
||||
<n-card class="w-120 max-w-600px" :title="t('home.Data set group config')">
|
||||
<n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="auto">
|
||||
<n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="auto" :disabled="submitLoading">
|
||||
<n-form-item :label="t('home.Parent group')">
|
||||
<n-cascader v-model:value="model.pid" expand-trigger="hover" :options="treeData"
|
||||
check-strategy="child" show-path filterable clearable label-field="name" value-field="id" />
|
||||
check-strategy="all" show-path filterable clearable label-field="name" value-field="id" />
|
||||
</n-form-item>
|
||||
<n-form-item :label="t('home.Group name')" path="name">
|
||||
<n-input v-model:value="model.name" />
|
||||
</n-form-item>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<n-button @click="handleClose" class="mr-2">{{ t("other.Cancel") }}</n-button>
|
||||
<n-button type="primary" @click="saveDataSet">{{ t("other.Ok") }}</n-button>
|
||||
<n-button :disabled="submitLoading" @click="handleClose" class="mr-2">{{ t("other.Cancel") }}</n-button>
|
||||
<n-button type="primary" :loading="submitLoading" @click="saveDataSet">{{ t("other.Ok") }}</n-button>
|
||||
</div>
|
||||
</n-form>
|
||||
</n-card>
|
||||
@ -20,9 +20,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useTemplateRef,computed } from "vue";
|
||||
import { useTemplateRef, ref } from "vue";
|
||||
import type { FormInst } from 'naive-ui'
|
||||
import { t } from "@/language";
|
||||
import { DataSetGroupPayload, fetchCreateDataSetGroup, fetchUpdateDataSetGroup } from "@/http/api/dataSetGroup";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
show: boolean,
|
||||
@ -43,6 +44,7 @@ const formRef = useTemplateRef<FormInst>("formRef");
|
||||
const rules = {
|
||||
name: { required: true, message: t("prompt.Please enter a grouping name for the dataset"), trigger: 'blur' }
|
||||
};
|
||||
const submitLoading = ref(false);
|
||||
|
||||
function handleClose() {
|
||||
emits("update:show", false);
|
||||
@ -51,15 +53,21 @@ function handleClose() {
|
||||
function saveDataSet(e: MouseEvent) {
|
||||
e.preventDefault()
|
||||
|
||||
formRef.value?.validate((errors) => {
|
||||
formRef.value?.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
if (!props.model.id) {
|
||||
// 新增
|
||||
|
||||
} else {
|
||||
// 更新
|
||||
const payload: DataSetGroupPayload = {
|
||||
id: props.model.id || undefined,
|
||||
pid: props.model.pid || "",
|
||||
name: props.model.name?.trim() || ""
|
||||
};
|
||||
|
||||
submitLoading.value = true;
|
||||
const res = props.model.id ? await fetchUpdateDataSetGroup(payload) : await fetchCreateDataSetGroup(payload);
|
||||
submitLoading.value = false;
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
window.$message?.success(props.model.id ? t("prompt.Success to update") : t("prompt.Saved successfully!"));
|
||||
|
||||
// 刷新父页面表格
|
||||
emits("refresh");
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<n-modal :show="show" @mask-click="handleClose">
|
||||
<n-card class="w-200 max-w-1200px" :title="t('home.Data set config')">
|
||||
<n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="auto">
|
||||
<n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="auto" :disabled="submitLoading">
|
||||
<n-grid :cols="24" :x-gap="24">
|
||||
<n-form-item-gi :span="12" :label="t('home.Data set name')" path="name">
|
||||
<n-input v-model:value="model.name" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" :label="t('home.Data set group')">
|
||||
<n-cascader v-model:value="model.groupId" expand-trigger="hover" :options="groupOptions"
|
||||
check-strategy="child" show-path filterable clearable label-field="name" value-field="id" />
|
||||
check-strategy="all" show-path filterable clearable label-field="name" value-field="id" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" :label="t('home.Data set type')">
|
||||
<n-select v-model:value="model.type" :options="setTypes" />
|
||||
@ -51,8 +51,8 @@
|
||||
|
||||
<n-gi :span="24">
|
||||
<div class="flex justify-end mt-4">
|
||||
<n-button @click="handleClose" class="mr-2">{{ t("other.Cancel") }}</n-button>
|
||||
<n-button type="primary" @click="saveDataSet">{{ t("other.Ok") }}</n-button>
|
||||
<n-button :disabled="submitLoading" @click="handleClose" class="mr-2">{{ t("other.Cancel") }}</n-button>
|
||||
<n-button type="primary" :loading="submitLoading" @click="saveDataSet">{{ t("other.Ok") }}</n-button>
|
||||
</div>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
@ -62,9 +62,12 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useTemplateRef } from "vue";
|
||||
import { ref, watch, useTemplateRef } from "vue";
|
||||
import type { FormInst } from 'naive-ui'
|
||||
import { t } from "@/language";
|
||||
import { DataSetPayload, fetchCreateDataSet, fetchUpdateDataSet } from "@/http/api/dataSet";
|
||||
import { fetchDataSetGroupTree } from "@/http/api/dataSetGroup";
|
||||
import { fetchDataSourceList } from "@/http/api/dataSource";
|
||||
import SQLEditor from "@/components/code/SQLEditor.vue";
|
||||
import JSONEditor from "@/components/code/JSONEditor.vue";
|
||||
|
||||
@ -86,13 +89,52 @@ const formRef = useTemplateRef<FormInst>("formRef");
|
||||
const rules = {
|
||||
name: { required: true, message: t("prompt.Please enter a name for the dataset"), trigger: 'blur' }
|
||||
};
|
||||
const groupOptions = [];
|
||||
const groupOptions = ref<IDataSet.IGroup[]>([]);
|
||||
const setTypes = [
|
||||
{ label: 'API', value: 'API' },
|
||||
{ label: 'SQL', value: 'SQL' },
|
||||
{ label: 'JSON', value: 'JSON' },
|
||||
];
|
||||
const dataSourceOptions = [];
|
||||
const dataSourceOptions = ref<{ label: string; value: IDataSource.Item["id"] }[]>([]);
|
||||
const submitLoading = ref(false);
|
||||
|
||||
watch(() => props.show, (show) => {
|
||||
if (!show) {
|
||||
return;
|
||||
}
|
||||
loadOptions();
|
||||
});
|
||||
|
||||
watch(() => props.model.type, (nextType, oldType) => {
|
||||
if (!nextType || nextType === oldType) {
|
||||
return;
|
||||
}
|
||||
if (nextType !== "API") {
|
||||
props.model.method = undefined;
|
||||
props.model.api = "";
|
||||
} else if (!props.model.method) {
|
||||
props.model.method = "GET";
|
||||
}
|
||||
if (nextType !== "SQL") {
|
||||
props.model.dataSource = "";
|
||||
props.model.sql = "";
|
||||
}
|
||||
if (nextType !== "JSON") {
|
||||
props.model.json = "";
|
||||
}
|
||||
});
|
||||
|
||||
async function loadOptions() {
|
||||
const [groupRes, dataSourceRes] = await Promise.all([
|
||||
fetchDataSetGroupTree(),
|
||||
fetchDataSourceList()
|
||||
]);
|
||||
groupOptions.value = groupRes.data || [];
|
||||
dataSourceOptions.value = (dataSourceRes.data || []).map(item => ({
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}));
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
emits("update:show", false);
|
||||
@ -101,16 +143,33 @@ function handleClose() {
|
||||
function saveDataSet(e: MouseEvent) {
|
||||
e.preventDefault()
|
||||
|
||||
formRef.value?.validate((errors) => {
|
||||
formRef.value?.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
if (!props.model.id) {
|
||||
// 新增
|
||||
|
||||
} else {
|
||||
// 更新
|
||||
submitLoading.value = true;
|
||||
const payload: DataSetPayload = {
|
||||
id: props.model.id || undefined,
|
||||
name: props.model.name?.trim() || "",
|
||||
groupId: props.model.groupId,
|
||||
type: props.model.type
|
||||
};
|
||||
|
||||
if (props.model.type === "API") {
|
||||
payload.method = props.model.method;
|
||||
payload.api = props.model.api?.trim();
|
||||
} else if (props.model.type === "SQL") {
|
||||
payload.dataSourceId = props.model.dataSource;
|
||||
payload.sql = props.model.sql?.trim();
|
||||
} else if (props.model.type === "JSON") {
|
||||
payload.json = props.model.json;
|
||||
}
|
||||
|
||||
const res = props.model.id ? await fetchUpdateDataSet(payload) : await fetchCreateDataSet(payload);
|
||||
submitLoading.value = false;
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
window.$message?.success(props.model.id ? t("prompt.Success to update") : t("prompt.Saved successfully!"));
|
||||
|
||||
// 刷新父页面表格
|
||||
emits("refresh");
|
||||
|
||||
|
||||
@ -7,9 +7,9 @@
|
||||
</template>
|
||||
</n-input>
|
||||
|
||||
<n-button type="primary" @click="showDataSourceModal = true">{{ t('home.Add data source') }}</n-button>
|
||||
<n-button type="primary" @click="handleAddDataSource">{{ t('home.Add data source') }}</n-button>
|
||||
</div>
|
||||
<n-data-table ref="tableRef" :columns="dataSourceColumns" :data="dataSources" :pagination="pagination" striped />
|
||||
<n-data-table ref="tableRef" :columns="dataSourceColumns" :data="dataSources" :pagination="pagination" :loading="tableLoading" striped />
|
||||
|
||||
<!-- 数据源模态框 -->
|
||||
<DataSourceModal v-model:show="showDataSourceModal" :model="currentDataSource" @refresh="getList" />
|
||||
@ -21,18 +21,23 @@ import { NButton, NPopconfirm } from 'naive-ui';
|
||||
import type { DataTableInst } from 'naive-ui';
|
||||
import { Search } from '@vicons/carbon';
|
||||
import { t } from "@/language";
|
||||
import { fetchDataSourceList, fetchDeleteDataSource } from "@/http/api/dataSource";
|
||||
import DataSourceModal from "./DataSourceModal.vue";
|
||||
|
||||
const tableRef = useTemplateRef<DataTableInst>("tableRef");
|
||||
const dataSources = ref<IDataSource.Item[]>([])
|
||||
const showDataSourceModal = ref(false)
|
||||
const currentDataSource = reactive({
|
||||
const tableLoading = ref(false);
|
||||
const defaultDataSource = {
|
||||
id: '',
|
||||
name: '',
|
||||
type: 'MySQL',
|
||||
connectionString: '',
|
||||
username: "",
|
||||
password: ""
|
||||
}
|
||||
const currentDataSource = reactive({
|
||||
...defaultDataSource
|
||||
})
|
||||
const dataSourceColumns = [
|
||||
{
|
||||
@ -106,7 +111,21 @@ const dataSourceColumns = [
|
||||
// 分页配置
|
||||
const pagination = { pageSize: 10 }
|
||||
|
||||
function getList() { }
|
||||
async function getList() {
|
||||
tableLoading.value = true;
|
||||
const res = await fetchDataSourceList();
|
||||
tableLoading.value = false;
|
||||
dataSources.value = res.data || [];
|
||||
}
|
||||
|
||||
function resetCurrentDataSource(data?: Partial<IDataSource.Item>) {
|
||||
Object.assign(currentDataSource, defaultDataSource, data || {});
|
||||
}
|
||||
|
||||
function handleAddDataSource() {
|
||||
resetCurrentDataSource();
|
||||
showDataSourceModal.value = true;
|
||||
}
|
||||
|
||||
function handleSearch(searchText: string) {
|
||||
tableRef.value?.filter({
|
||||
@ -115,12 +134,17 @@ function handleSearch(searchText: string) {
|
||||
}
|
||||
|
||||
function editDataSource(item) {
|
||||
Object.assign(currentDataSource, item)
|
||||
resetCurrentDataSource(item)
|
||||
showDataSourceModal.value = true
|
||||
}
|
||||
|
||||
function deleteDataSource(item) {
|
||||
dataSources.value = dataSources.value.filter(ds => ds.id !== item.id)
|
||||
async function deleteDataSource(item) {
|
||||
const res = await fetchDeleteDataSource(item.id);
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
window.$message?.success(t("prompt.Success to delete"));
|
||||
getList();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<n-modal :show="show" @mask-click="handleClose">
|
||||
<n-card class="w-100 max-w-600px" :title="t('home.Data source config')">
|
||||
<n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="auto">
|
||||
<n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="auto" :disabled="testLinkLoading || submitLoading">
|
||||
<n-form-item :label="t('home.Data source name')" path="name">
|
||||
<n-input v-model:value="model.name" :disabled="testLinkLoading" />
|
||||
</n-form-item>
|
||||
@ -22,8 +22,8 @@
|
||||
<n-button type="primary" :loading="testLinkLoading" @click="handleTestLink">{{ t("home.Test the connection") }}</n-button>
|
||||
|
||||
<div>
|
||||
<n-button @click="handleClose" class="mr-2">{{ t("other.Cancel") }}</n-button>
|
||||
<n-button type="primary" @click="saveDataSource">{{ t("other.Ok") }}</n-button>
|
||||
<n-button :disabled="testLinkLoading || submitLoading" @click="handleClose" class="mr-2">{{ t("other.Cancel") }}</n-button>
|
||||
<n-button type="primary" :loading="submitLoading" @click="saveDataSource">{{ t("other.Ok") }}</n-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -33,9 +33,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, useTemplateRef } from "vue";
|
||||
import { ref, computed, useTemplateRef } from "vue";
|
||||
import type { FormInst } from 'naive-ui'
|
||||
import { t } from "@/language";
|
||||
import { DataSourcePayload, fetchCreateDataSource, fetchTestDataSource, fetchUpdateDataSource } from "@/http/api/dataSource";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
show: boolean,
|
||||
@ -65,6 +66,8 @@ const dbTypes = [
|
||||
{ label: 'Oracle', value: 'Oracle' }
|
||||
]
|
||||
const testLinkLoading = ref(false);
|
||||
const submitLoading = ref(false);
|
||||
const isEdit = computed(() => Boolean(props.model.id));
|
||||
|
||||
function handleClose() {
|
||||
emits("update:show", false);
|
||||
@ -72,25 +75,52 @@ function handleClose() {
|
||||
|
||||
function handleTestLink(e: MouseEvent) {
|
||||
e.preventDefault()
|
||||
formRef.value?.validate((errors) => {
|
||||
formRef.value?.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
testLinkLoading.value = true;
|
||||
const res = await fetchTestDataSource(buildPayload(false));
|
||||
testLinkLoading.value = false;
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
window.$message?.success(t("prompt.Operation successful"));
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function buildPayload(includeId: boolean): DataSourcePayload {
|
||||
const payload: DataSourcePayload = {
|
||||
name: props.model.name?.trim() || "",
|
||||
type: props.model.type,
|
||||
connectionString: props.model.connectionString?.trim() || ""
|
||||
};
|
||||
|
||||
if (props.model.username) {
|
||||
payload.username = props.model.username;
|
||||
}
|
||||
if (props.model.password) {
|
||||
payload.password = props.model.password;
|
||||
}
|
||||
if (includeId && props.model.id) {
|
||||
payload.id = props.model.id;
|
||||
}
|
||||
|
||||
return payload;
|
||||
}
|
||||
|
||||
function saveDataSource(e: MouseEvent) {
|
||||
e.preventDefault()
|
||||
|
||||
formRef.value?.validate((errors) => {
|
||||
formRef.value?.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
if (!props.model.id) {
|
||||
// 新增
|
||||
|
||||
} else {
|
||||
// 更新
|
||||
|
||||
submitLoading.value = true;
|
||||
const payload = buildPayload(true);
|
||||
const res = isEdit.value ? await fetchUpdateDataSource(payload) : await fetchCreateDataSource(payload);
|
||||
submitLoading.value = false;
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
window.$message?.success(isEdit.value ? t("prompt.Success to update") : t("prompt.Saved successfully!"));
|
||||
|
||||
// 刷新父页面表格
|
||||
emits("refresh");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user