ljq/TkAstral3D
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(data-center): clear and remount SQL datasource select on type switch

Browse Source
This commit is contained in:
plum 2026-04-16 11:42:35 +08:00
parent fbfaa59b14
commit 9662f41eec
1 changed files with 27 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/editor/src/views/home/dataCenter/DataSetModal.vue
View File

@ -1,12 +1,12 @@
<template>
<n-modal :show="show" @mask-click="handleClose">
<n-card class="w-200 max-w-1200px" :title="t('home.dataCenter.Data set config')">
<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" :disabled="submitLoading">
<n-grid :cols="24" :x-gap="24">
<n-form-item-gi :span="12" :label="t('home.dataCenter.Data set name')" path="name">
<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.dataCenter.Data set group')" path="groupId">
<n-form-item-gi :span="12" :label="t('home.Data set group')" path="groupId">
<n-cascader
v-model:value="model.groupId"
expand-trigger="hover"
@ -19,13 +19,14 @@
value-field="id"
/>
</n-form-item-gi>
<n-form-item-gi :span="12" :label="t('home.dataCenter.Data set type')" path="type">
<n-form-item-gi :span="12" :label="t('home.Data set type')" path="type">
<n-select v-model:value="model.type" :options="setTypes" />
</n-form-item-gi>
<template v-if="model.type === 'API'">
<n-form-item-gi :span="12" :label="t('home.dataCenter.Method')" path="method">
<n-form-item-gi :span="12" :label="t('home.Method')" path="method">
<n-select
:key="'dataset-method-select'"
v-model:value="model.method"
:options="[
{ label: 'GET', value: 'GET' },
@ -33,23 +34,23 @@
]"
/>
</n-form-item-gi>
<n-form-item-gi :span="24" :label="t('home.dataCenter.API interface')" path="api">
<n-form-item-gi :span="24" :label="t('home.API interface')" path="api">
<n-input v-model:value="model.api" type="textarea" />
</n-form-item-gi>
</template>
<template v-else-if="model.type === 'SQL'">
<n-form-item-gi :span="12" :label="t('home.dataCenter.Data sources')" path="dataSourceId">
<n-select v-model:value="model.dataSourceId" :options="dataSourceOptions" />
<n-form-item-gi :span="12" :label="t('home.Data sources')" path="dataSourceId">
<n-select :key="'dataset-datasource-select'" v-model:value="model.dataSourceId" :options="dataSourceOptions" />
</n-form-item-gi>
<n-form-item-gi :span="24" :label="`SQL(${t('home.dataCenter.Query only')})`" path="sql">
<n-form-item-gi :span="24" :label="`SQL(${t('home.Query only')})`" path="sql">
<SQLEditor v-model:value="model.sql as string" />
</n-form-item-gi>
<n-form-item-gi :span="24" label=" ">
<n-blockquote>
{{ t('home.dataCenter["Parameter is passed as:"]') }}
{{ t('home.Parameter is passed as ') }}
'${id}' ,
{{ t('home.dataCenter["For example:"]') }}
{{ t('home.For example:') }}
SELECT * FROM table WHERE id='${id}'
</n-blockquote>
</n-form-item-gi>
@ -123,27 +124,27 @@
const rules = computed(() => {
const baseRules: Record<string, any> = {
name: { required: true, message: t("home.dataCenter.Please enter a name for the dataset"), trigger: ["input", "blur"] },
groupId: createRequiredRule(t("home.dataCenter.Please select a grouping for the dataset"), ["change", "blur"]),
type: { required: true, message: t("home.dataCenter.Please select a dataset type"), trigger: ["change", "blur"] },
name: { required: true, message: t("prompt.Please enter a name for the dataset"), trigger: ["input", "blur"] },
groupId: createRequiredRule("请选择数据集分组", ["change", "blur"]),
type: { required: true, message: "请选择数据集类型", trigger: ["change", "blur"] },
};
const type = props.model?.type;
if (type === "API") {
baseRules.method = {
required: true,
message: t("home.dataCenter.Please select a method"),
message: "请选择请求方式",
trigger: ["change", "blur"],
};
baseRules.api = {
required: true,
message: t("home.dataCenter.Please enter the interface url"),
message: "请输入接口地址",
trigger: ["input", "blur"],
};
} else if (type === "SQL") {
baseRules.dataSourceId = createRequiredRule(t("home.dataCenter.Please select a data source"), ["change", "blur"]);
baseRules.sql = { required: true, message: t("home.dataCenter.Please enter a SQL string"), trigger: ["blur"] };
baseRules.dataSourceId = createRequiredRule("请选择数据源", ["change", "blur"]);
baseRules.sql = { required: true, message: "请输入 SQL 语句", trigger: ["blur"] };
} else if (type === "JSON") {
baseRules.json = { required: true, message: t("home.dataCenter.Please enter the JSON data"), trigger: ["blur"] };
baseRules.json = { required: true, message: "请输入 JSON 数据", trigger: ["blur"] };
}
return baseRules;
});
@ -211,7 +212,7 @@
}
}
function resetFieldsForType(type: string) {
function resetFieldsForType(type: string, prevType?: string) {
if (!props.model) {
return;
}
@ -225,6 +226,9 @@
if (type !== "SQL") {
props.model.dataSourceId = undefined;
props.model.sql = "";
} else if (prevType && prevType !== "SQL") {
props.model.dataSourceId = undefined;
props.model.sql = "";
}
if (type !== "JSON") {
props.model.json = "";
@ -234,11 +238,11 @@
function validateSql(sql: string) {
const trimmed = sql.trim();
if (!/^(SELECT|WITH)\b/i.test(trimmed)) {
window.$message?.error(t("home.dataCenter.SQL must start with SELECT or WITH"));
window.$message?.error("SQL 必须以 SELECT 或 WITH 开头");
return false;
}
if (/[;]|--|\/\*/.test(trimmed)) {
window.$message?.error(t("home.dataCenter.SQL must not include unsafe tokens"));
window.$message?.error("SQL 不允许包含危险语句标记");
return false;
}
return true;
@ -290,7 +294,7 @@
if (!next || next === prev) {
return;
}
resetFieldsForType(next);
resetFieldsForType(next, prev);
formRef.value?.restoreValidation();
}
);