-
+
('mForm');
const dataSources = computed(() => dataSourceService.get('dataSources') || []);
+const disabledDataSource = computed(() => propsService.getDisabledDataSource());
const type = computed((): string => {
let type = props.config.fieldConfig?.type;
diff --git a/packages/editor/src/fields/DataSourceInput.vue b/packages/editor/src/fields/DataSourceInput.vue
index 6be0ba22..457dec5d 100644
--- a/packages/editor/src/fields/DataSourceInput.vue
+++ b/packages/editor/src/fields/DataSourceInput.vue
@@ -1,6 +1,14 @@
+
();
-const { dataSourceService } = useServices();
+const { dataSourceService, propsService } = useServices();
const autocompleteRef = useTemplateRef>('autocomplete');
const isFocused = ref(false);
@@ -81,6 +89,7 @@ const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
const input = computed(() => autocompleteRef.value?.inputRef?.input);
const dataSources = computed(() => dataSourceService.get('dataSources'));
+const disabledDataSource = computed(() => propsService.getDisabledDataSource());
const setDisplayState = () => {
displayState.value = getDisplayField(dataSources.value, state.value);
diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue
index 228d9042..d259d5df 100644
--- a/packages/editor/src/fields/EventSelect.vue
+++ b/packages/editor/src/fields/EventSelect.vue
@@ -85,7 +85,7 @@ const emit = defineEmits<{
change: [v: any, eventData?: ContainerChangeEventData];
}>();
-const { editorService, dataSourceService, eventsService, codeBlockService } = useServices();
+const { editorService, dataSourceService, eventsService, codeBlockService, propsService } = useServices();
// 事件名称下拉框表单配置
const eventNameConfig = computed(() => {
@@ -173,24 +173,39 @@ const actionTypeConfig = computed(() => {
text: '联动类型',
type: 'select',
defaultValue: ActionType.COMP,
- options: () => [
- {
- text: '组件',
- label: '组件',
- value: ActionType.COMP,
- },
- {
- text: '代码',
- label: '代码',
- disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
- value: ActionType.CODE,
- },
- {
- text: '数据源',
- label: '数据源',
- value: ActionType.DATA_SOURCE,
- },
- ],
+ options: () => {
+ const o: {
+ text: string;
+ label: string;
+ value: string;
+ disabled?: boolean;
+ }[] = [
+ {
+ text: '组件',
+ label: '组件',
+ value: ActionType.COMP,
+ },
+ ];
+
+ if (!propsService.getDisabledCodeBlock()) {
+ o.push({
+ text: '代码',
+ label: '代码',
+ disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
+ value: ActionType.CODE,
+ });
+ }
+
+ if (!propsService.getDisabledDataSource()) {
+ o.push({
+ text: '数据源',
+ label: '数据源',
+ value: ActionType.DATA_SOURCE,
+ });
+ }
+
+ return o;
+ },
};
return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
});
diff --git a/packages/editor/src/initService.ts b/packages/editor/src/initService.ts
index ddbdad9b..d7928c29 100644
--- a/packages/editor/src/initService.ts
+++ b/packages/editor/src/initService.ts
@@ -197,6 +197,22 @@ export const initServiceState = (
},
);
+ watch(
+ () => props.disabledCodeBlock,
+ (disabledCodeBlock) => propsService.setDisabledCodeBlock(disabledCodeBlock ?? false),
+ {
+ immediate: true,
+ },
+ );
+
+ watch(
+ () => props.disabledDataSource,
+ (disabledDataSource) => propsService.setDisabledDataSource(disabledDataSource ?? false),
+ {
+ immediate: true,
+ },
+ );
+
onBeforeUnmount(() => {
editorService.resetState();
historyService.resetState();
diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index 34e2e2b8..beb1d334 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -201,7 +201,7 @@ const props = withDefaults(
},
);
-const { depService, uiService } = useServices();
+const { depService, uiService, propsService } = useServices();
const collecting = computed(() => depService.get('collecting'));
const taskLength = computed(() => depService.get('taskLength'));
@@ -283,7 +283,19 @@ const getItemConfig = (data: SideItem): SideComponent => {
return typeof data === 'string' ? map[data] : data;
};
-const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
+const sideBarItems = computed(() =>
+ props.data.items
+ .map((item) => getItemConfig(item))
+ .filter((item) => {
+ if (item.$key === SideItemKey.DATA_SOURCE) {
+ return !propsService.getDisabledDataSource();
+ }
+ if (item.$key === SideItemKey.CODE_BLOCK) {
+ return !propsService.getDisabledCodeBlock();
+ }
+ return true;
+ }),
+);
watch(
sideBarItems,
diff --git a/packages/editor/src/services/props.ts b/packages/editor/src/services/props.ts
index d300d50e..17bb0d24 100644
--- a/packages/editor/src/services/props.ts
+++ b/packages/editor/src/services/props.ts
@@ -57,6 +57,10 @@ class Props extends BaseService {
propsConfigMap: {},
propsValueMap: {},
relateIdMap: {},
+ /** 禁用数据源 */
+ disabledDataSource: false,
+ /** 禁用代码块 */
+ disabledCodeBlock: false,
});
constructor() {
@@ -66,6 +70,22 @@ class Props extends BaseService {
]);
}
+ public setDisabledDataSource(disabled: boolean) {
+ this.state.disabledDataSource = disabled;
+ }
+
+ public setDisabledCodeBlock(disabled: boolean) {
+ this.state.disabledCodeBlock = disabled;
+ }
+
+ public getDisabledDataSource(): boolean {
+ return this.state.disabledDataSource;
+ }
+
+ public getDisabledCodeBlock(): boolean {
+ return this.state.disabledCodeBlock;
+ }
+
public setPropsConfigs(configs: Record) {
Object.keys(configs).forEach((type: string) => {
this.setPropsConfig(toLine(type), configs[type]);
@@ -74,7 +94,11 @@ class Props extends BaseService {
}
public async fillConfig(config: FormConfig, labelWidth?: string) {
- return fillConfig(config, typeof labelWidth !== 'function' ? labelWidth : '80px');
+ return fillConfig(config, {
+ labelWidth: typeof labelWidth !== 'function' ? labelWidth : '80px',
+ disabledDataSource: this.getDisabledDataSource(),
+ disabledCodeBlock: this.getDisabledCodeBlock(),
+ });
}
public async setPropsConfig(type: string, config: FormConfig | PropsFormConfigFunction) {
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 5bde80bb..7e88c9d0 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -188,6 +188,10 @@ export interface PropsState {
propsConfigMap: Record;
propsValueMap: Record>;
relateIdMap: Record;
+ /** 禁用数据源 */
+ disabledDataSource: boolean;
+ /** 禁用代码块 */
+ disabledCodeBlock: boolean;
}
export interface StageOverlayState {
diff --git a/packages/editor/src/utils/props.ts b/packages/editor/src/utils/props.ts
index fcfe47a4..d3622a18 100644
--- a/packages/editor/src/utils/props.ts
+++ b/packages/editor/src/utils/props.ts
@@ -19,7 +19,7 @@
import { NODE_CONDS_KEY } from '@tmagic/core';
import { tMagicMessage } from '@tmagic/design';
-import type { FormConfig, FormState, TabPaneConfig } from '@tmagic/form';
+import type { FormConfig, FormState, TabConfig, TabPaneConfig } from '@tmagic/form';
export const arrayOptions = [
{ text: '包含', value: 'include' },
@@ -165,7 +165,14 @@ export const displayTabConfig: TabPaneConfig = {
* @param config 组件属性配置
* @returns Object
*/
-export const fillConfig = (config: FormConfig = [], labelWidth = '80px'): FormConfig => {
+export const fillConfig = (
+ config: FormConfig = [],
+ {
+ labelWidth = '80px',
+ disabledDataSource = false,
+ disabledCodeBlock = false,
+ }: { labelWidth?: string; disabledDataSource?: boolean; disabledCodeBlock?: boolean } = {},
+): FormConfig => {
const propsConfig: FormConfig = [];
// 组件类型,必须要有
@@ -208,20 +215,34 @@ export const fillConfig = (config: FormConfig = [], labelWidth = '80px'): FormCo
});
}
- return [
- {
- type: 'tab',
- labelWidth,
- items: [
- {
- title: '属性',
- items: [...propsConfig, ...config],
- },
- { ...styleTabConfig },
- { ...eventTabConfig },
- { ...advancedTabConfig },
- { ...displayTabConfig },
- ],
- },
- ];
+ const noCodeAdvancedTabItems = advancedTabConfig.items.filter((item) => item.type !== 'code-select');
+
+ if (noCodeAdvancedTabItems.length > 0 && disabledCodeBlock) {
+ advancedTabConfig.items = noCodeAdvancedTabItems;
+ }
+
+ const tabConfig: TabConfig = {
+ type: 'tab',
+ labelWidth,
+ items: [
+ {
+ title: '属性',
+ items: [...propsConfig, ...config],
+ },
+ { ...styleTabConfig },
+ { ...eventTabConfig },
+ ],
+ };
+
+ if (!disabledCodeBlock) {
+ tabConfig.items.push({ ...advancedTabConfig });
+ } else if (noCodeAdvancedTabItems.length > 0) {
+ tabConfig.items.push({ ...advancedTabConfig });
+ }
+
+ if (!disabledDataSource) {
+ tabConfig.items.push({ ...displayTabConfig });
+ }
+
+ return [tabConfig];
};