@gct-paas/core-web 0.1.6-dev.5 → 0.1.6-dev.7

package/es/modules/relationship-diagram-config/components/diagram-config-item/diagram-config-item.mjs

@@ -0,0 +1,98 @@
+import { useRootController } from "../../hooks/index.mjs";
+import './diagram-config-item.css';/* empty css                          */
+import { createVNode, defineComponent, ref, resolveComponent, watch } from "vue";
+import { clone } from "lodash-es";
+import { FIELD_TYPE, t, useNamespace } from "@gct-paas/core";
+//#region src/modules/relationship-diagram-config/components/diagram-config-item/diagram-config-item.tsx
+/**
+* 节点容器
+*/
+var DiagramConfigItem = /* @__PURE__ */ defineComponent({
+	name: "DiagramConfigItem",
+	props: {
+		i: {
+			type: Number,
+			required: true
+		},
+		isEnd: {
+			type: Boolean,
+			required: true
+		},
+		data: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("diagram-config-item");
+		const select = ref(props.data.value || null);
+		watch(props.data, () => {
+			select.value = props.data.value || null;
+		});
+		const types = [
+			FIELD_TYPE.REF,
+			FIELD_TYPE.REF_MULTI,
+			FIELD_TYPE.RDO_REF,
+			FIELD_TYPE.MASTERSLAVE
+		];
+		const c = useRootController();
+		const model = ref({});
+		const options = ref([]);
+		const onChange = (val, data) => {
+			const updateData = clone(props.data);
+			if (updateData.value) c.node.cache.clear(updateData);
+			if (data) Object.assign(updateData, {
+				modelCategory: model.value.modelCategory ?? "entity",
+				value: val,
+				label: data.label,
+				id_: data.id
+			});
+			else Object.assign(updateData, {
+				modelCategory: null,
+				value: null,
+				label: null,
+				id_: null
+			});
+			c.node.update(updateData);
+			if (val) c.node.cache.reset(updateData);
+			if (!c.link.getBySource(props.data.id) && data) c.node.create({ modelKey: data.refModelKey });
+		};
+		const load = async () => {
+			model.value = await c.getModel(props.data.modelKey);
+			if (model.value.fieldMetaList) model.value.fieldMetaList.filter((item) => types.includes(item.type)).forEach((item) => {
+				options.value.push({
+					id: item.id,
+					label: item.name,
+					value: item.key,
+					refModelKey: item.bindInfo
+				});
+			});
+		};
+		load();
+		return {
+			ns,
+			c,
+			select,
+			model,
+			options,
+			onChange
+		};
+	},
+	render() {
+		return createVNode("div", { "class": this.ns.b() }, [createVNode("div", { "class": this.ns.b("title") }, [createVNode("span", null, [this.model.name])]), createVNode("div", { "class": [this.ns.b("content")] }, [this.isEnd ? createVNode("div", { "class": this.ns.e("end") }, [createVNode("div", { "class": this.ns.em("end", "line") }, null), createVNode("div", { "class": this.ns.em("end", "label") }, [t("sys.pageDesigner.end")])]) : this.data.noSelectField !== true ? createVNode(resolveComponent("a-select"), {
+			"class": [
+				this.ns.b("select"),
+				this.ns.is("select", !!this.select),
+				"handle-select"
+			],
+			"value": this.select,
+			"onUpdate:value": ($event) => this.select = $event,
+			"options": this.options,
+			"placeholder": t("sys.pageDesigner.dataLinkage.selectPlaceholder"),
+			"allowClear": true,
+			"onChange": this.onChange
+		}, null) : null])]);
+	}
+});
+//#endregion
+export { DiagramConfigItem, DiagramConfigItem as default };

package/es/modules/relationship-diagram-config/components/diagram-config-item-container/diagram-config-item-container.css

@@ -0,0 +1,71 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-diagram-config-item-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 178px;
+  height: 84px;
+}

package/es/modules/relationship-diagram-config/components/diagram-config-item-container/diagram-config-item-container.d.ts

@@ -0,0 +1,28 @@
+export declare const DiagramConfigItemContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    i: {
+        type: NumberConstructor;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    calcPosStyle: () => {
+        top: string;
+        left: string;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("mounted" | "unmounted")[], "mounted" | "unmounted", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    i: {
+        type: NumberConstructor;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    onMounted?: ((...args: any[]) => any) | undefined;
+    onUnmounted?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/modules/relationship-diagram-config/components/diagram-config-item-container/diagram-config-item-container.mjs

@@ -0,0 +1,53 @@
+import './diagram-config-item-container.css';/* empty css                                    */
+import { createVNode, defineComponent, onMounted, onUnmounted } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/modules/relationship-diagram-config/components/diagram-config-item-container/diagram-config-item-container.tsx
+var DiagramConfigItemContainer = /* @__PURE__ */ defineComponent({
+	name: "DiagramConfigItemContainer",
+	props: {
+		i: {
+			type: Number,
+			required: true
+		},
+		id: {
+			type: String,
+			required: true
+		}
+	},
+	emits: ["mounted", "unmounted"],
+	setup(props, { emit }) {
+		const ns = useNamespace("diagram-config-item-container");
+		const calcPosStyle = () => {
+			const topI = Math.floor(props.i / 3);
+			const leftI = props.i % 3;
+			if (topI % 2 !== 1) return {
+				top: 24 * (topI + 1) + 84 * topI + "px",
+				left: 46 * (leftI + 1) + 178 * leftI - 25 + "px"
+			};
+			else return {
+				top: 24 * (topI + 1) + 84 * topI + "px",
+				left: 46 * (3 - leftI) + 178 * (2 - leftI) - 25 + "px"
+			};
+		};
+		onMounted(() => {
+			emit("mounted");
+		});
+		onUnmounted(() => {
+			emit("unmounted");
+		});
+		return {
+			ns,
+			calcPosStyle
+		};
+	},
+	render() {
+		const slots = this.$slots.default?.();
+		return createVNode("div", {
+			"id": this.id,
+			"class": this.ns.b(),
+			"style": this.calcPosStyle()
+		}, [slots]);
+	}
+});
+//#endregion
+export { DiagramConfigItemContainer };

package/es/modules/relationship-diagram-config/components/diagram-config-item-info/diagram-config-item-info.d.ts

@@ -0,0 +1,27 @@
+import { PropType } from 'vue';
+import { IRelationshipDiagramNode } from '../../interface';
+/**
+ * 节点容器
+ */
+export declare const DiagramConfigItemInfo: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    i: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IRelationshipDiagramNode>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    i: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IRelationshipDiagramNode>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default DiagramConfigItemInfo;

package/es/modules/relationship-diagram-config/components/diagram-config-item-info/diagram-config-item-info.mjs

@@ -0,0 +1,2 @@
+import "vue";
+import "@gct-paas/core";

package/es/modules/relationship-diagram-config/components/diagram-config-item-reverse/diagram-config-item-reverse.css

@@ -0,0 +1,107 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-diagram-config-item-reverse {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #E8EBF0;
+  border-radius: 4px;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06);
+}
+.gct-diagram-config-item-reverse__title {
+  height: 32px;
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #212528;
+}
+.gct-diagram-config-item-reverse__title .ant-select {
+  min-width: 100px;
+}
+
+.gct-diagram-config-item-reverse__select {
+  height: 50px;
+  padding: 7px 12px;
+}
+.gct-diagram-config-item-reverse__select .ant-select {
+  width: 152px;
+}
+.gct-diagram-config-item-reverse__select .ant-select .ant-select-selector {
+  background-color: #F7F8FA;
+}
+.gct-diagram-config-item-reverse__select .ant-select .ant-select-selector .ant-select-selection-placeholder {
+  color: #C3C3C3;
+}
+.gct-diagram-config-item-reverse__select.is-select .ant-select-selector {
+  border-color: #3168EC !important;
+}
+
+.gct-diagram-config-item-reverse__model-select {
+  padding: 4.5px 8px;
+  background-color: #F7F8FA;
+}
+.gct-diagram-config-item-reverse__model-select .ant-select .ant-select-selector {
+  background-color: transparent;
+  border: 0;
+}

package/es/modules/relationship-diagram-config/components/diagram-config-item-reverse/diagram-config-item-reverse.d.ts

@@ -0,0 +1,34 @@
+import { PropType } from 'vue';
+import { IRelationshipDiagramNode } from '../../interface';
+/**
+ * 节点容器
+ */
+export declare const DiagramConfigItemReverse: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    i: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IRelationshipDiagramNode>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    modelSelect: import('vue').Ref<string | null, string | null>;
+    select: import('vue').Ref<string | null, string | null>;
+    modelOptions: import('vue').Ref<IData[], IData[]>;
+    options: import('vue').Ref<IData[], IData[]>;
+    onModelChange: (value: string | null, _: IObject) => void;
+    onChange: (value: string | null, _: IObject) => void;
+    onModelFocus: () => Promise<void>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    i: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IRelationshipDiagramNode>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default DiagramConfigItemReverse;

package/es/modules/relationship-diagram-config/components/diagram-config-item-reverse/diagram-config-item-reverse.mjs

@@ -0,0 +1,198 @@
+import { LinkType, NodeType } from "../../constant/index.mjs";
+import { useRootController } from "../../hooks/index.mjs";
+import './diagram-config-item-reverse.css';/* empty css                                  */
+import { createVNode, defineComponent, ref, resolveComponent, watch } from "vue";
+import { clone } from "lodash-es";
+import { t, useNamespace } from "@gct-paas/core";
+//#region src/modules/relationship-diagram-config/components/diagram-config-item-reverse/diagram-config-item-reverse.tsx
+/**
+* 节点容器
+*/
+var DiagramConfigItemReverse = /* @__PURE__ */ defineComponent({
+	name: "DiagramConfigItemReverse",
+	props: {
+		i: {
+			type: Number,
+			required: true
+		},
+		data: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("diagram-config-item-reverse");
+		const c = useRootController();
+		const models = ref([]);
+		const modelSelect = ref(props.data.modelKey || null);
+		const select = ref(props.data.value || null);
+		const modelOptions = ref([]);
+		const options = ref([]);
+		watch(props.data, () => {
+			modelSelect.value = props.data.modelKey || null;
+			select.value = props.data.value || null;
+			redrawConnect();
+		});
+		const onModelChange = (value, _) => {
+			options.value = [];
+			modelSelect.value = value;
+			select.value = null;
+			const cloneData = clone(props.data);
+			c.node.cache.reverseClear(cloneData);
+			c.node.update(Object.assign(cloneData, {
+				modelKey: value ?? null,
+				modelCategory: _ ? _.data.modelCategory ?? "entity" : "entity",
+				value: null,
+				label: null
+			}));
+			if (value) c.node.cache.reverseReset(cloneData);
+			options.value = [];
+			fillFieldsOptions(_);
+			updateBeforeState();
+			updateAfterState();
+			redrawConnect();
+		};
+		const fillFieldsOptions = (_) => {
+			if (_) {
+				const data = _.data;
+				if (data.fieldMetaList) options.value = data.fieldMetaList.map((item) => {
+					return {
+						label: item.name,
+						value: item.key,
+						data: item
+					};
+				});
+			}
+		};
+		const onChange = (value, _) => {
+			select.value = value;
+			const cloneData = clone(props.data);
+			if (cloneData.value) c.node.cache.clear(cloneData);
+			if (value) c.node.update(Object.assign(cloneData, {
+				value,
+				label: _.label
+			}));
+			else c.node.update(Object.assign(cloneData, {
+				value: null,
+				label: null
+			}));
+			if (value) c.node.cache.reset(cloneData);
+			updateBeforeState();
+			updateAfterState();
+			redrawConnect();
+		};
+		/**
+		* 更新后一个节点的状态
+		*
+		* @author zhanghanrui
+		* @date 2024-06-28 15:06:19
+		*/
+		const updateAfterState = async () => {
+			if (select.value) {
+				if (c.link.getByTarget(props.data.id)) return;
+				const items = await c.getModelList(modelSelect.value, select.value);
+				if (items && items.length > 0) c.node.create({
+					type: NodeType.REVERSE,
+					reverse: true
+				}, {
+					type: LinkType.VIRTUAL,
+					reverse: true,
+					dashed: true
+				});
+			}
+		};
+		/**
+		* 更新前一个节点的状态
+		*
+		* @author zhanghanrui
+		* @date 2024-06-28 14:06:53
+		*/
+		const updateBeforeState = () => {
+			const link = c.link.getBySource(props.data.id);
+			if (link) {
+				const node = c.node.get(link.target, 0, true);
+				if (node && node.type === NodeType.DEFAULT) if (select.value) c.node.update(Object.assign(node, {
+					value: null,
+					label: null,
+					noSelectField: true
+				}));
+				else c.node.update(Object.assign(node, {
+					value: null,
+					label: null,
+					noSelectField: false
+				}));
+			}
+		};
+		const redrawConnect = () => {
+			const link = c.link.getBySource(props.data.id);
+			if (link) {
+				const l = clone(link);
+				if (select.value) l.type = LinkType.DEFAULT;
+				else l.type = LinkType.VIRTUAL;
+				c.link.update(l);
+				const node = c.node.get(link.target);
+				if (node) c.node.update({
+					...node,
+					noSelectField: true
+				});
+			}
+		};
+		const onModelFocus = async () => {
+			const link = c.link.getBySource(props.data.id);
+			if (link) {
+				const targetNode = c.node.get(link.target);
+				if (targetNode) {
+					models.value = await c.getModelList(targetNode.modelKey, targetNode.value);
+					modelOptions.value = models.value.map((item) => {
+						return {
+							value: item.key,
+							label: item.name,
+							data: item
+						};
+					});
+				}
+			}
+		};
+		const load = async () => {
+			if (props.data.modelKey) {
+				await onModelFocus();
+				const opt = modelOptions.value.find((item) => {
+					return item.value === props.data.modelKey;
+				});
+				if (opt) fillFieldsOptions(opt);
+			}
+		};
+		load();
+		return {
+			ns,
+			modelSelect,
+			select,
+			modelOptions,
+			options,
+			onModelChange,
+			onChange,
+			onModelFocus
+		};
+	},
+	render() {
+		return createVNode("div", { "class": this.ns.b() }, [createVNode("div", { "class": [this.ns.e("title"), this.ns.e("model-select")] }, [createVNode(resolveComponent("a-select"), {
+			"size": "small",
+			"allowClear": true,
+			"placeholder": t("sys.pageDesigner.selectModel"),
+			"value": this.modelSelect,
+			"options": this.modelOptions,
+			"onChange": (val, o) => this.onModelChange(val, o),
+			"onFocus": () => this.onModelFocus()
+		}, null)]), createVNode("div", { "class": [this.ns.e("select")] }, [createVNode(resolveComponent("a-select"), {
+			"class": "handle-select",
+			"allowClear": true,
+			"placeholder": t("sys.pageDesigner.dataLinkage.selectPlaceholder"),
+			"value": this.select,
+			"options": this.options,
+			"onChange": (val, o) => this.onChange(val, o),
+			"disabled": !this.modelSelect
+		}, null)])]);
+	}
+});
+//#endregion
+export { DiagramConfigItemReverse, DiagramConfigItemReverse as default };

package/es/modules/relationship-diagram-config/components/diagram-config-item-virtual/diagram-config-item-virtual.css

@@ -0,0 +1,68 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-diagram-config-item-virtual {
+  width: 100%;
+  height: 100%;
+}