feat(editor): 代码选择器，数据源方法选择新增不可编辑配置，与disabled区分开

packages/editor/src/fields/CodeSelect.vue

@@ -42,6 +42,10 @@ const codeConfig = computed(() => ({
   title: (mForm: FormState, { model, index }: any) => {
     if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
       if (Array.isArray(model.codeId)) {
+        if (model.codeId.length < 2) {
+          return index;
+        }
+
         const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
         return `${ds?.title} / ${model.codeId[1]}`;
       }
@@ -63,14 +67,31 @@ const codeConfig = computed(() => ({
             { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
           ],
           defaultValue: 'code',
+          onChange: (mForm: FormState, v: HookCodeType, { model }: any) => {
+            if (v === HookCodeType.DATA_SOURCE_METHOD) {
+              model.codeId = [];
+            } else {
+              model.codeId = '';
+            }
+
+            return v;
+          },
         },
         {
-          type: (mForm: FormState, { model }: any) =>
+          type: 'code-select-col',
-            model.codeType === HookCodeType.DATA_SOURCE_METHOD ? 'data-source-method-select' : 'code-select-col',
           name: 'codeId',
           span: 16,
           labelWidth: 0,
-          disabled: () => !services?.codeBlockService.getEditStatus(),
+          display: (mForm: FormState, { model }: any) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+          notEditable: () => !services?.codeBlockService.getEditStatus(),
+        },
+        {
+          type: 'data-source-method-select',
+          name: 'codeId',
+          span: 16,
+          labelWidth: 0,
+          display: (mForm: FormState, { model }: any) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
+          notEditable: () => !services?.dataSourceService.get('editable'),
         },
       ],
     },

packages/editor/src/fields/CodeSelectCol.vue

@@ -10,7 +10,7 @@
         @change="onParamsChangeHandler"
       ></m-form-container>
       <!-- 查看/编辑按钮 -->
-      <Icon v-if="model[name]" class="icon" :icon="!disabled ? Edit : View" @click="editCode(model[name])"></Icon>
+      <Icon v-if="model[name]" class="icon" :icon="!notEditable ? Edit : View" @click="editCode(model[name])"></Icon>
     </div>
 
     <!-- 参数填写框 -->
@@ -27,7 +27,7 @@
     <CodeBlockEditor
       ref="codeBlockEditor"
       v-if="codeConfig"
-      :disabled="disabled"
+      :disabled="notEditable"
       :content="codeConfig"
       @submit="submitCodeBlockHandler"
     ></CodeBlockEditor>
@@ -39,7 +39,7 @@ import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
-import { createValues, FieldProps } from '@tmagic/form';
+import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -52,9 +52,11 @@ defineOptions({
   name: 'MEditorCodeSelectCol',
 });
 
+const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
   disabled: false,
 });
@@ -92,6 +94,7 @@ watch(
 const selectConfig = {
   type: 'select',
   name: props.name,
+  disable: props.disabled,
   options: () => {
     if (codeDsl.value) {
       return map(codeDsl.value, (value, key) => ({

packages/editor/src/fields/DataSourceMethodSelect.vue

@@ -7,7 +7,12 @@
         :model="model"
         @change="onChangeHandler"
       ></m-form-container>
-      <Icon v-if="model[name]" class="icon" :icon="!disabled ? Edit : View" @click="editCodeHandler"></Icon>
+      <Icon
+        v-if="model[name] && isCustomMethod"
+        class="icon"
+        :icon="!notEditable ? Edit : View"
+        @click="editCodeHandler"
+      ></Icon>
     </div>
 
     <CodeParams
@@ -23,7 +28,7 @@
     <CodeBlockEditor
       ref="codeBlockEditor"
       v-if="codeConfig"
-      :disabled="disabled"
+      :disabled="notEditable"
       :content="codeConfig"
       @submit="submitCodeBlockHandler"
     ></CodeBlockEditor>
@@ -34,7 +39,7 @@
 import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { createValues, FieldProps } from '@tmagic/form';
+import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
 import type { CodeBlockContent, Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -47,6 +52,7 @@ defineOptions({
   name: 'MEditorDataSourceMethodSelect',
 });
 
+const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
@@ -56,14 +62,24 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>
   disabled: false,
 });
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
 const dataSources = computed(() => dataSourceService?.get('dataSources'));
 
-const getParamItemsConfig = ([dataSourceId, medthodName]: [Id, string] = ['', '']): CodeParamStatement[] => {
+const isCustomMethod = computed(() => {
+  const [id, name] = props.model[props.name];
+
+  const dataSource = dataSourceService?.getDataSourceById(id);
+
+  return Boolean(dataSource?.methods.find((method) => method.name === name));
+});
+
+const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', '']): CodeParamStatement[] => {
   if (!dataSourceId) return [];
 
   const paramStatements = dataSources.value
     ?.find((item) => item.id === dataSourceId)
-    ?.methods?.find((item) => item.name === medthodName)?.params;
+    ?.methods?.find((item) => item.name === methodName)?.params;
 
   if (!paramStatements) return [];
 
@@ -107,6 +123,7 @@ const cascaderConfig = computed(() => ({
   type: 'cascader',
   name: props.name,
   options: methodsOptions.value,
+  disable: props.disabled,
   onChange: (formState: any, dataSourceMethod: [Id, string]) => {
     setParamsConfig(dataSourceMethod, formState);
 

packages/editor/src/fields/EventSelect.vue

@@ -171,7 +171,7 @@ const codeActionConfig = computed(() => {
     type: 'code-select-col',
     text: '代码块',
     name: 'codeId',
-    disabled: () => !codeBlockService?.getEditStatus(),
+    notEditable: () => !codeBlockService?.getEditStatus(),
     display: (mForm, { model }) => model.actionType === ActionType.CODE,
   };
   return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
@@ -183,6 +183,7 @@ const dataSourceActionConfig = computed(() => {
     type: 'data-source-method-select',
     text: '数据源方法',
     name: 'dataSourceMethod',
+    notEditable: () => !services?.dataSourceService.get('editable'),
     display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
   };
   return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };

packages/editor/src/type.ts

@@ -600,6 +600,7 @@ export interface CodeSelectColConfig {
   text: string;
   labelWidth?: number | string;
   disabled?: boolean | FilterFunction;
+  notEditable?: boolean | FilterFunction;
   display?: boolean | FilterFunction;
 }
 
@@ -618,6 +619,7 @@ export interface DataSourceMethodSelectConfig {
   text: string;
   labelWidth?: number | string;
   disabled?: boolean | FilterFunction;
+  notEditable?: boolean | FilterFunction;
   display?: boolean | FilterFunction;
 }