chore(editor): 重构代码块编辑表单

packages/editor/src/components/CodeParams.vue

@@ -0,0 +1,60 @@
+<template>
+  <MForm
+    ref="form"
+    :config="codeParamsConfig"
+    :init-values="model"
+    :disabled="disabled"
+    :size="size"
+    :watch-props="false"
+    @change="onParamsChangeHandler"
+  ></MForm>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { FormConfig, MForm } from '@tmagic/form';
+
+import type { CodeParamStatement } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorCodeParams',
+});
+
+const props = defineProps<{
+  model: any;
+  size?: 'small' | 'default' | 'large';
+  disabled?: boolean;
+  name: string;
+  paramsConfig: CodeParamStatement[];
+}>();
+
+const emit = defineEmits(['change']);
+
+const form = ref<InstanceType<typeof MForm>>();
+
+const getFormConfig = (items: FormConfig = []) => [
+  {
+    type: 'fieldset',
+    items,
+    legend: '参数',
+    labelWidth: '70px',
+    name: props.name,
+  },
+];
+
+const codeParamsConfig = computed(() => getFormConfig(props.paramsConfig));
+
+/**
+ * 参数值修改更新
+ */
+const onParamsChangeHandler = async () => {
+  try {
+    const value = await form.value?.submitForm(true);
+    console.log(value);
+    emit('change', value);
+  } catch (e) {
+    console.log(e);
+  }
+};
+</script>

packages/editor/src/fields/CodeSelect.vue

@@ -7,18 +7,22 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { computed, inject, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
 import { HookType } from '@tmagic/schema';
 
+import type { Services } from '@editor/type';
+
 defineOptions({
   name: 'MEditorCodeSelect',
 });
 
 const emit = defineEmits(['change']);
 
+const services = inject<Services>('services');
+
 const props = withDefaults(
   defineProps<{
     config: {
@@ -41,7 +45,9 @@ const codeConfig = computed(() => ({
   items: [
     {
       type: 'code-select-col',
+      name: 'codeId',
       labelWidth: 0,
+      disabled: () => !services?.codeBlockService.getEditStatus(),
     },
   ],
 }));

packages/editor/src/fields/CodeSelectCol.vue

@@ -9,57 +9,79 @@
         @change="onParamsChangeHandler"
       ></m-form-container>
       <!-- 查看/编辑按钮 -->
-      <Icon class="icon" :icon="editable ? Edit : View" @click="editCode"></Icon>
+      <Icon v-if="model[name]" class="icon" :icon="!disabled ? Edit : View" @click="editCode"></Icon>
     </div>
     <!-- 参数填写框 -->
-    <m-form-container :config="codeParamsConfig" :model="model" @change="onParamsChangeHandler"></m-form-container>
+    <CodeParams
+      v-if="paramsConfig.length"
+      name="params"
+      :model="model"
+      :size="size"
+      :disabled="disabled"
+      :params-config="paramsConfig"
+      @change="onParamsChangeHandler"
+    ></CodeParams>
   </div>
 </template>
 
 <script lang="ts" setup name="">
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
-import { createValues, FieldsetConfig, FormState } from '@tmagic/form';
-import { Id } from '@tmagic/schema';
+import { createValues } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
 
+import CodeParams from '@editor/components/CodeParams.vue';
 import Icon from '@editor/components/Icon.vue';
-import type { CodeParamStatement, Services } from '@editor/type';
+import type { CodeParamStatement, CodeSelectColConfig, Services } from '@editor/type';
 
 defineOptions({
   name: 'MEditorCodeSelectCol',
 });
 
 const services = inject<Services>('services');
-const mForm = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
 
 const props = withDefaults(
   defineProps<{
-    config: any;
+    config: CodeSelectColConfig;
     model: any;
     prop: string;
     name: string;
+    lastValues?: any;
+    disabled?: boolean;
     size: 'small' | 'default' | 'large';
   }>(),
   {},
 );
+
+/**
+ * 根据代码块id获取代码块参数配置
+ * @param codeId 代码块ID
+ */
+const getParamItemsConfig = (codeId?: Id): CodeParamStatement[] => {
+  if (!codeDsl.value || !codeId) return [];
+
+  const paramStatements = codeDsl.value[codeId]?.params;
+
+  if (isEmpty(paramStatements)) return [];
+
+  return paramStatements.map((paramState: CodeParamStatement) => ({
+    labelWidth: '100px',
+    text: paramState.name,
+    ...paramState,
+  }));
+};
+
 const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
-const editable = computed(() => services?.codeBlockService.getEditStatus());
-const codeParamsConfig = ref<FieldsetConfig>({
-  type: 'fieldset',
-  items: [],
-  legend: '参数',
-  labelWidth: '70px',
-  name: 'params',
-  display: false,
-});
+const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model[props.name]));
+
 const selectConfig = {
   type: 'select',
   text: '代码块',
-  name: 'codeId',
-  labelWidth: '70px',
+  name: props.name,
+  labelWidth: '80px',
   options: () => {
     if (codeDsl.value) {
       return map(codeDsl.value, (value, key) => ({
@@ -72,68 +94,28 @@ const selectConfig = {
   },
   onChange: (formState: any, codeId: Id, { model }: any) => {
     // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
-    model.params = {};
+    paramsConfig.value = getParamItemsConfig(codeId);
+
+    if (paramsConfig.value.length) {
+      model.params = createValues(formState, paramsConfig.value, {}, model.params);
+    } else {
+      model.params = {};
+    }
+
+    return codeId;
   },
 };
 
-/**
- * 根据代码块id获取代码块参数配置
- * @param codeId 代码块ID
- */
-const getParamItemsConfig = (codeId: Id): CodeParamStatement[] => {
-  if (!codeDsl.value) return [];
-  const paramStatements = codeDsl.value[codeId]?.params;
-  if (isEmpty(paramStatements)) return [];
-  return paramStatements.map((paramState: CodeParamStatement) => ({
-    labelWidth: '100px',
-    text: paramState.name,
-    ...paramState,
-  }));
-};
-
-/**
- * 根据代码块id获取参数fieldset表单配置
- * @param codeId 代码块ID
- */
-const getCodeParamsConfig = (codeId: Id) => {
-  const paramsConfig = getParamItemsConfig(codeId);
-  // 如果参数没有填值，则使用createValues补全空值
-  if (!props.model.params || isEmpty(props.model.params)) {
-    props.model.params = {};
-    createValues(mForm, paramsConfig, {}, props.model.params);
-  }
-  codeParamsConfig.value = {
-    type: 'fieldset',
-    items: paramsConfig,
-    legend: '参数',
-    labelWidth: '70px',
-    name: 'params',
-    display: !isEmpty(paramsConfig),
-  };
-};
-
 /**
  * 参数值修改更新
  */
-const onParamsChangeHandler = () => {
+const onParamsChangeHandler = (value: any) => {
+  props.model.params = value.params;
   emit('change', props.model);
 };
 
-// 监听代码块顺序变化以及下拉选择的变化，并更新参数配置
-// TODO onchange在watch之前触发
-watch(
-  () => props.model.codeId,
-  (codeId: Id) => {
-    if (!codeId) return;
-    getCodeParamsConfig(codeId);
-  },
-  {
-    immediate: true,
-  },
-);
-
 // 打开代码编辑框
 const editCode = () => {
-  services?.codeBlockService.setCodeEditorContent(true, props.model.codeId);
+  services?.codeBlockService.setCodeEditorContent(true, props.model[props.name]);
 };
 </script>