@veltra/sheet 2.1.1 → 2.2.0

package/dist/components/report/hub-dataset-editor.js

@@ -0,0 +1,394 @@
+import { buildParamDefs } from "../../report/params.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, openBlock, ref, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { UButton, UCodeEditor, UInput, UPopConfirm, USelect, UTable, UTabs, UTag, defineTableColumns } from "@veltra/desktop";
+import { bem } from "@veltra/utils";
+//#region src/components/report/hub-dataset-editor.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "UReportHubDatasetEditor",
+	__name: "hub-dataset-editor",
+	props: {
+		hub: {},
+		datasetId: {}
+	},
+	emits: ["remove"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const cls = bem("report-hub-dataset-editor");
+		const detailTab = ref("schema");
+		const detailTabItems = [{
+			key: "schema",
+			name: "字段 Schema"
+		}, {
+			key: "preview",
+			name: "数据预览"
+		}];
+		const paramTypeOptions = [
+			{
+				label: "文本",
+				value: "text"
+			},
+			{
+				label: "数字",
+				value: "number"
+			},
+			{
+				label: "日期",
+				value: "date"
+			},
+			{
+				label: "日期范围",
+				value: "date-range"
+			},
+			{
+				label: "下拉",
+				value: "select"
+			}
+		];
+		const dataset = computed(() => props.hub.datasets.value.find((item) => item.id === props.datasetId));
+		const describing = ref(false);
+		const describeError = shallowRef("");
+		let describeSeq = 0;
+		const previewing = ref(false);
+		const previewError = shallowRef("");
+		const previewRows = shallowRef([]);
+		const previewFields = shallowRef([]);
+		function resetPreview() {
+			previewing.value = false;
+			previewError.value = "";
+			previewRows.value = [];
+			previewFields.value = [];
+		}
+		const sqlDraft = ref("");
+		let sqlTimer;
+		watch(() => props.datasetId, () => {
+			sqlDraft.value = dataset.value?.sql ?? "";
+			resetPreview();
+			runDescribe();
+		}, { immediate: true });
+		function onSqlChange(value) {
+			sqlDraft.value = value;
+			if (sqlTimer) clearTimeout(sqlTimer);
+			sqlTimer = setTimeout(() => {
+				props.hub.updateDataset(props.datasetId, { sql: value });
+				runDescribe();
+			}, 280);
+		}
+		onBeforeUnmount(() => {
+			if (sqlTimer) clearTimeout(sqlTimer);
+		});
+		async function runDescribe() {
+			const seq = ++describeSeq;
+			if (!sqlDraft.value.trim()) {
+				describeError.value = "";
+				props.hub.updateDataset(props.datasetId, { fields: void 0 });
+				return;
+			}
+			describing.value = true;
+			const result = await props.hub.describeDataset(props.datasetId);
+			if (seq !== describeSeq) return;
+			describing.value = false;
+			describeError.value = result.ok ? "" : result.error.message;
+		}
+		const paramRows = computed(() => {
+			const current = dataset.value;
+			if (!current || !current.sql.trim()) return [];
+			return buildParamDefs(current.sql, current.paramOverrides);
+		});
+		const schemaRows = computed(() => {
+			const current = dataset.value;
+			if (!current) return [];
+			return (current.fields ?? []).map((field) => ({
+				...field,
+				label: current.fieldOverrides?.[field.name]?.label ?? field.label
+			}));
+		});
+		async function runPreview() {
+			previewing.value = true;
+			previewError.value = "";
+			const result = await props.hub.previewDataset(props.datasetId);
+			previewing.value = false;
+			if (result.ok) {
+				previewRows.value = result.data.rows;
+				previewFields.value = result.data.fields;
+			} else {
+				previewRows.value = [];
+				previewError.value = result.error.message;
+			}
+		}
+		watch(detailTab, (tab) => {
+			if (tab === "preview") runPreview();
+		});
+		const paramColumns = defineTableColumns([
+			{
+				key: "id",
+				name: "参数名",
+				minWidth: 100
+			},
+			{
+				key: "label",
+				name: "显示名",
+				minWidth: 120
+			},
+			{
+				key: "type",
+				name: "类型",
+				width: 120
+			},
+			{
+				key: "defaultValue",
+				name: "默认值",
+				minWidth: 140
+			},
+			{
+				key: "options",
+				name: "选项（select）",
+				minWidth: 160
+			}
+		]);
+		const schemaColumns = defineTableColumns([
+			{
+				key: "name",
+				name: "字段名（name）",
+				minWidth: 140
+			},
+			{
+				key: "label",
+				name: "中文描述（label）",
+				minWidth: 160
+			},
+			{
+				key: "type",
+				name: "类型",
+				width: 88
+			}
+		]);
+		const previewColumns = computed(() => defineTableColumns(previewFields.value.map((field) => ({
+			key: field.name,
+			name: field.label,
+			minWidth: field.type === "number" ? 88 : 112
+		}))));
+		function fieldTypeColor(type) {
+			if (type === "number") return "success";
+			if (type === "date") return "warning";
+			return "info";
+		}
+		function formatDefaultValue(value) {
+			if (Array.isArray(value)) return value.join(", ");
+			return String(value ?? "");
+		}
+		function formatOptions(options) {
+			if (!options?.length) return "";
+			return options.map((item) => `${item.label}|${item.value}`).join(",");
+		}
+		function parseOptions(raw) {
+			return raw.split(",").map((part) => part.trim()).filter(Boolean).map((part) => {
+				const [label, value] = part.split("|");
+				const text = (label ?? "").trim();
+				return {
+					label: text,
+					value: (value ?? text).trim()
+				};
+			});
+		}
+		function patchDataset(patch) {
+			props.hub.updateDataset(props.datasetId, patch);
+		}
+		function patchParam(paramId, patch) {
+			const current = dataset.value;
+			if (!current) return;
+			patchDataset({ paramOverrides: {
+				...current.paramOverrides,
+				[paramId]: {
+					...current.paramOverrides?.[paramId],
+					...patch
+				}
+			} });
+		}
+		function patchFieldLabel(fieldName, label) {
+			const current = dataset.value;
+			if (!current) return;
+			patchDataset({ fieldOverrides: {
+				...current.fieldOverrides,
+				[fieldName]: {
+					...current.fieldOverrides?.[fieldName],
+					label
+				}
+			} });
+		}
+		return (_ctx, _cache) => {
+			return dataset.value ? (openBlock(), createElementBlock("section", {
+				key: 0,
+				class: normalizeClass(unref(cls).b)
+			}, [
+				createElementVNode("div", { class: normalizeClass(unref(cls).e("head")) }, [createElementVNode("div", { class: normalizeClass(unref(cls).e("rename")) }, [createElementVNode("span", { class: normalizeClass(unref(cls).e("label")) }, "数据集名称", 2), createVNode(unref(UInput), {
+					"model-value": dataset.value.label,
+					size: "small",
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => patchDataset({ label: String(v ?? "") }))
+				}, null, 8, ["model-value"])], 2), createVNode(unref(UPopConfirm), {
+					title: "确定删除该数据集？",
+					onConfirm: _cache[1] || (_cache[1] = ($event) => emit("remove"))
+				}, {
+					reference: withCtx(() => [createVNode(unref(UButton), {
+						size: "small",
+						type: "danger",
+						plain: ""
+					}, {
+						default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("删除数据集", -1)])]),
+						_: 1
+					})]),
+					_: 1
+				})], 2),
+				createElementVNode("div", { class: normalizeClass(unref(cls).e("sql")) }, [
+					createElementVNode("p", { class: normalizeClass(unref(cls).e("section-title")) }, "SQL 查询", 2),
+					createVNode(unref(UCodeEditor), {
+						modelValue: sqlDraft.value,
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => sqlDraft.value = $event),
+						lang: "sql",
+						langs: ["sql"],
+						"default-lines": 6,
+						onChange: onSqlChange
+					}, null, 8, ["modelValue"]),
+					describeError.value ? (openBlock(), createElementBlock("p", {
+						key: 0,
+						class: normalizeClass(unref(cls).e("sql-error")),
+						role: "alert"
+					}, toDisplayString(describeError.value), 3)) : createCommentVNode("v-if", true)
+				], 2),
+				paramRows.value.length ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("params"))
+				}, [createElementVNode("p", { class: normalizeClass(unref(cls).e("section-title")) }, "查询参数（从 SQL 自动提取）", 2), createVNode(unref(UTable), {
+					class: normalizeClass(unref(cls).e("param-table")),
+					data: paramRows.value,
+					columns: unref(paramColumns),
+					border: "",
+					"text-ellipsis": ""
+				}, {
+					"column:label": withCtx(({ rowData }) => [createVNode(unref(UInput), {
+						"model-value": rowData.label,
+						size: "small",
+						"onUpdate:modelValue": (v) => patchParam(rowData.id, { label: String(v ?? "") })
+					}, null, 8, ["model-value", "onUpdate:modelValue"])]),
+					"column:type": withCtx(({ rowData }) => [createVNode(unref(USelect), {
+						"model-value": rowData.type,
+						size: "small",
+						options: paramTypeOptions,
+						"onUpdate:modelValue": (v) => patchParam(rowData.id, { type: v })
+					}, null, 8, ["model-value", "onUpdate:modelValue"])]),
+					"column:defaultValue": withCtx(({ rowData }) => [rowData.type === "number" ? (openBlock(), createBlock(unref(UInput), {
+						key: 0,
+						"model-value": String(rowData.defaultValue ?? ""),
+						size: "small",
+						type: "number",
+						"onUpdate:modelValue": (v) => patchParam(rowData.id, { defaultValue: Number(v) })
+					}, null, 8, ["model-value", "onUpdate:modelValue"])) : rowData.type === "date" ? (openBlock(), createBlock(unref(UInput), {
+						key: 1,
+						"model-value": String(rowData.defaultValue ?? ""),
+						size: "small",
+						type: "date",
+						"onUpdate:modelValue": (v) => patchParam(rowData.id, { defaultValue: v })
+					}, null, 8, ["model-value", "onUpdate:modelValue"])) : rowData.type === "select" ? (openBlock(), createBlock(unref(USelect), {
+						key: 2,
+						"model-value": String(rowData.defaultValue ?? ""),
+						size: "small",
+						options: rowData.options ?? [],
+						"onUpdate:modelValue": (v) => patchParam(rowData.id, { defaultValue: v })
+					}, null, 8, [
+						"model-value",
+						"options",
+						"onUpdate:modelValue"
+					])) : (openBlock(), createBlock(unref(UInput), {
+						key: 3,
+						"model-value": formatDefaultValue(rowData.defaultValue),
+						size: "small",
+						"onUpdate:modelValue": (v) => patchParam(rowData.id, { defaultValue: v })
+					}, null, 8, ["model-value", "onUpdate:modelValue"]))]),
+					"column:options": withCtx(({ rowData }) => [rowData.type === "select" ? (openBlock(), createBlock(unref(UInput), {
+						key: 0,
+						"model-value": formatOptions(rowData.options),
+						size: "small",
+						placeholder: "华东|华东,华南|华南",
+						"onUpdate:modelValue": (v) => patchParam(rowData.id, { options: parseOptions(String(v ?? "")) })
+					}, null, 8, ["model-value", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(unref(cls).e("muted"))
+					}, "—", 2))]),
+					_: 1
+				}, 8, [
+					"class",
+					"data",
+					"columns"
+				])], 2)) : createCommentVNode("v-if", true),
+				createVNode(unref(UTabs), {
+					modelValue: detailTab.value,
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => detailTab.value = $event),
+					items: detailTabItems,
+					class: normalizeClass(unref(cls).e("tabs"))
+				}, {
+					schema: withCtx(() => [describing.value ? (openBlock(), createElementBlock("p", {
+						key: 0,
+						class: normalizeClass(unref(cls).e("muted"))
+					}, "正在解析字段…", 2)) : (openBlock(), createBlock(unref(UTable), {
+						key: 1,
+						class: normalizeClass(unref(cls).e("schema-table")),
+						data: schemaRows.value,
+						columns: unref(schemaColumns),
+						border: "",
+						"text-ellipsis": ""
+					}, {
+						"column:label": withCtx(({ rowData }) => [createVNode(unref(UInput), {
+							"model-value": rowData.label,
+							size: "small",
+							placeholder: "中文显示名",
+							"onUpdate:modelValue": (v) => patchFieldLabel(rowData.name, String(v ?? ""))
+						}, null, 8, ["model-value", "onUpdate:modelValue"])]),
+						"column:type": withCtx(({ rowData }) => [createVNode(unref(UTag), {
+							size: "small",
+							type: fieldTypeColor(rowData.type)
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(rowData.type), 1)]),
+							_: 2
+						}, 1032, ["type"])]),
+						_: 1
+					}, 8, [
+						"class",
+						"data",
+						"columns"
+					]))]),
+					preview: withCtx(() => [
+						createElementVNode("div", { class: normalizeClass(unref(cls).e("preview-actions")) }, [createVNode(unref(UButton), {
+							size: "small",
+							plain: "",
+							loading: previewing.value,
+							onClick: runPreview
+						}, {
+							default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode(" 刷新预览（按参数默认值取数） ", -1)])]),
+							_: 1
+						}, 8, ["loading"])], 2),
+						createVNode(unref(UTable), {
+							class: normalizeClass(unref(cls).e("preview-table")),
+							data: previewRows.value,
+							columns: previewColumns.value,
+							"show-index": "",
+							border: "",
+							"text-ellipsis": ""
+						}, null, 8, [
+							"class",
+							"data",
+							"columns"
+						]),
+						previewError.value ? (openBlock(), createElementBlock("p", {
+							key: 0,
+							class: normalizeClass(unref(cls).e("preview-error")),
+							role: "alert"
+						}, toDisplayString(previewError.value), 3)) : createCommentVNode("v-if", true)
+					]),
+					_: 1
+				}, 8, ["modelValue", "class"])
+			], 2)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };