feat: 修改code_block结构,组件代码关系绑定改为table,绑定关系更新未完成

Tencent · Nov 10, 2022 · c4293f1 · c4293f1
1 parent 60c572e
commit c4293f1
Show file tree

Hide file tree

Showing 11 changed files with 268 additions and 172 deletions.
diff --git a/packages/core/src/Node.ts b/packages/core/src/Node.ts
@@ -21,6 +21,7 @@ import { EventEmitter } from 'events';
 import { isEmpty } from 'lodash-es';
 
 import type { EventItemConfig, MComponent, MContainer, MPage } from '@tmagic/schema';
+import { HookType } from '@tmagic/schema';
 
 import type App from './App';
 import type Page from './Page';
@@ -85,10 +86,11 @@ class Node extends EventEmitter {
   }
 
   private async runCodeBlock(hook: string) {
-    if (!Array.isArray(this.data[hook]) || !this.app.codeDsl || isEmpty(this.app?.codeDsl)) return;
-    for (const codeId of this.data[hook]) {
+    if (this.data[hook]?.hookType !== HookType.CODE || !this.app.codeDsl || isEmpty(this.app?.codeDsl)) return;
+    for (const item of this.data[hook].data) {
+      const { codeId, params = {} } = item;
       if (this.app.codeDsl[codeId] && typeof this.app?.codeDsl[codeId]?.content === 'function') {
-        await this.app.codeDsl[codeId].content(this);
+        await this.app.codeDsl[codeId].content(this, params);
       }
     }
   }

diff --git a/packages/editor/src/components/CodeDraftEditor.vue b/packages/editor/src/components/CodeDraftEditor.vue
@@ -22,6 +22,7 @@ import { computed, inject, ref, watchEffect } from 'vue';
 import type * as monaco from 'monaco-editor';
 
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
+import { Id } from '@tmagic/schema';
 import { datetimeFormatter } from '@tmagic/utils';
 
 import MagicCodeEditor from '../layouts/CodeEditor.vue';
@@ -30,7 +31,7 @@ import type { Services } from '../type';
 const props = withDefaults(
   defineProps<{
     /** 代码id */
-    id: string;
+    id: Id;
     /** 代码内容 */
     content: string;
     /** 是否可编辑 */

diff --git a/packages/editor/src/components/FunctionEditor.vue b/packages/editor/src/components/FunctionEditor.vue
@@ -23,14 +23,15 @@
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicCard, TMagicInput, tMagicMessage } from '@tmagic/design';
+import { Id } from '@tmagic/schema';
 
 import type { Services } from '../type';
 
 import CodeDraftEditor from './CodeDraftEditor.vue';
 
 const props = withDefaults(
   defineProps<{
-    id: string;
+    id: Id;
     name: string;
     content: string;
     editable?: boolean;

diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
@@ -1,96 +1,131 @@
 <template>
   <div class="m-fields-code-select" :key="fieldKey">
     <TMagicCard shadow="never">
-      <template #header>
-        <m-fields-select
-          :config="selectConfig"
-          :model="model"
-          :prop="prop"
-          :name="name"
-          :size="size"
-          @change="changeHandler"
-        ></m-fields-select>
-      </template>
-      <div class="tool-bar">
-        <TMagicTooltip class="tool-item" effect="dark" content="查看代码块" placement="top">
-          <svg
-            @click="viewHandler"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 24 24"
-            width="15px"
-            height="15px"
-            data-v-65a7fb6c=""
-          >
-            <path
-              fill="currentColor"
-              d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
-            ></path>
-          </svg>
-        </TMagicTooltip>
-      </div>
+      <m-form-table
+        :config="tableConfig"
+        :model="model[name]"
+        :name="tableConfig.name"
+        :prop="prop"
+        :size="size"
+        @change="changeHandler"
+      >
+      </m-form-table>
     </TMagicCard>
   </div>
 </template>
 
 <script lang="ts" setup name="MEditorCodeSelect">
-import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
+import { computed, defineEmits, defineProps, inject, ref } from 'vue';
 import { map, xor } from 'lodash-es';
 
-import { TMagicCard, tMagicMessage, TMagicTooltip } from '@tmagic/design';
-import { FormState, SelectConfig } from '@tmagic/form';
+import { TMagicCard } from '@tmagic/design';
+import { FormState, TableConfig } from '@tmagic/form';
 
 import type { Services } from '../type';
-import { CodeEditorMode, CodeSelectOp } from '../type';
+import { CodeSelectOp } from '../type';
 const services = inject<Services>('services');
 const form = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
 
 const props = defineProps<{
   config: {
-    selectConfig?: SelectConfig;
+    tableConfig?: TableConfig;
   };
   model: any;
   prop: string;
   name: string;
-  size: string;
+  size: 'mini' | 'small' | 'medium';
 }>();
 
-const selectConfig = computed(() => {
+const tableConfig = computed(() => {
   const defaultConfig = {
-    multiple: true,
-    options: async () => {
-      const codeDsl = await services?.codeBlockService.getCodeDsl();
-      if (codeDsl) {
-        return map(codeDsl, (value, key) => ({
-          text: `${value.name}（${key}）`,
-          label: `${value.name}（${key}）`,
-          value: key,
-        }));
-      }
-      return [];
-    },
+    dropSort: true,
+    items: [
+      {
+        type: 'select',
+        label: '代码块',
+        name: 'codeId',
+        options: async () => {
+          const codeDsl = await services?.codeBlockService.getCodeDsl();
+          if (codeDsl) {
+            return map(codeDsl, (value, key) => ({
+              text: `${value.name}（${key}）`,
+              label: `${value.name}（${key}）`,
+              value: key,
+            }));
+          }
+          return [];
+        },
+      },
+      // {
+      //   label: '参数',
+      //   name: 'params',
+      //   filter: v=>JSON.stringify(v)
+      // },
+    ],
   };
   return {
+    name: 'data',
     ...defaultConfig,
-    ...props.config.selectConfig,
+    ...props.config.tableConfig,
   };
 });
+
+// const selectModel = computed(() => {
+//   console.log("props.model[props.name].data",props.model[props.name].data)
+//   return {
+//     [props.name]: props.model[props.name]?.data?.map((item: { codeId: Id }) => item.codeId) || []
+//   }
+// });
+
+// watch(
+//   () => selectModel.value,
+//   () => {
+//     const selectData
+//     if (isEmpty(selectModel)) return;
+//     const hookData = selectModel.value.map((selectedCodeId: Id) => ({
+//       codeId: selectedCodeId,
+//     }));
+//     console.log('hookData', hookData);
+//     if (isEmpty(hookData)) return;
+//     if (!props.model[props.name]?.data || isEmpty(props.model[props.name]?.data)) {
+//       // 新增hook
+//       props.model[props.name] = {
+//         hookType: HookType.CODE,
+//         data: hookData,
+//       };
+//     } else {
+//       // 新增hook data
+//       props.model[props.name].data = {
+//         ...props.model[props.name].data,
+//         ...hookData,
+//       };
+//     }
+//     console.log('-0-props.model[props.name]--', props.model[props.name]);
+//   },
+//   {
+//     deep: true,
+//     immediate: true,
+//   },
+// );
+
 const fieldKey = ref('');
 const multiple = ref(true);
 const lastTagSnapshot = ref<string[]>([]);
 
-watchEffect(async () => {
-  if (!props.model[props.name]) return;
-  const combineNames = await Promise.all(
-    props.model[props.name].map(async (id: string) => {
-      const { name = '' } = (await services?.codeBlockService.getCodeContentById(id)) || {};
-      return name;
-    }),
-  );
-  fieldKey.value = combineNames.join('-');
-});
+// watchEffect(async () => {
+//   if (isEmpty(selectModel)) return;
+//   const combineNames = await Promise.all(
+//     selectModel.value[props.name].map(async (id: string) => {
+//       const { name = '' } = (await services?.codeBlockService.getCodeContentById(id)) || {};
+//       return name;
+//     }),
+//   );
+//   fieldKey.value = combineNames.join('-');
+// });
 
 const changeHandler = async (value: any) => {
+  console.log('---value--', value);
   let codeIds = value;
   if (typeof value === 'string') {
     multiple.value = false;
@@ -118,14 +153,14 @@ const setCombineRelation = async (codeIds: string[]) => {
   await services?.codeBlockService.setCombineRelation(id, diffValues, opFlag, props.prop);
 };
 
-const viewHandler = async () => {
-  if (props.model[props.name].length === 0) {
-    tMagicMessage.error('请先绑定代码块');
-    return;
-  }
-  // 记录当前已被绑定的代码块，为查看弹窗的展示内容
-  await services?.codeBlockService.setCombineIds(props.model[props.name]);
-  await services?.codeBlockService.setMode(CodeEditorMode.LIST);
-  services?.codeBlockService.setCodeEditorContent(true, props.model[props.name][0]);
-};
+// const viewHandler = async () => {
+//   if (props.model[props.name].length === 0) {
+//     tMagicMessage.error('请先绑定代码块');
+//     return;
+//   }
+//   // 记录当前已被绑定的代码块，为查看弹窗的展示内容
+//   await services?.codeBlockService.setCombineIds(props.model[props.name]);
+//   await services?.codeBlockService.setMode(CodeEditorMode.LIST);
+//   services?.codeBlockService.setCodeEditorContent(true, props.model[props.name][0]);
+// };
 </script>
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -52,7 +52,7 @@
           ></FunctionEditor>
         </div>
       </template>
-    </layout>
+    </Layout>
   </TMagicDialog>
 </template>
 
@@ -61,10 +61,11 @@ import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
 import { TMagicDialog, TMagicTree } from '@tmagic/design';
+import { CodeBlockContent } from '@tmagic/schema';
 
 import FunctionEditor from '../../../components/FunctionEditor.vue';
 import Layout from '../../../components/Layout.vue';
-import type { CodeBlockContent, CodeDslList, ListState, Services } from '../../../type';
+import type { CodeDslList, ListState, Services } from '../../../type';
 import { CodeEditorMode } from '../../../type';
 import { serializeConfig } from '../../../utils/editor';
 
@@ -86,6 +87,8 @@ const editable = computed(() => services?.codeBlockService.getEditStatus());
 // 当前选中组件绑定的代码块id数组
 const selectedIds = computed(() => services?.codeBlockService.getCombineIds() || []);
 
+services?.codeBlockService.getCombineInfo();
+
 watchEffect(async () => {
   codeConfig.value = cloneDeep(await services?.codeBlockService.getCodeContentById(id.value)) || null;
   if (!codeConfig.value) return;

diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -99,11 +99,11 @@ import { Close, Edit, Link, View } from '@element-plus/icons-vue';
 import { forIn, isEmpty } from 'lodash-es';
 
 import { TMagicButton, TMagicInput, tMagicMessage, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import { Id } from '@tmagic/schema';
+import { CodeBlockContent, Id } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 
 import Icon from '../../../components/Icon.vue';
-import type { CodeBlockContent, CodeRelation, Services } from '../../../type';
+import type { Services } from '../../../type';
 import { CodeDeleteErrorType, CodeDslList, CodeEditorMode, ListRelationState } from '../../../type';
 
 import codeBlockEditor from './CodeBlockEditor.vue';
@@ -126,15 +126,11 @@ const editable = computed(() => services?.codeBlockService.getEditStatus());
 const isShowCodeBlockEditor = computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
 
 // 根据代码块ID获取其绑定的组件信息
-const getBindCompsByCodeId = (codeId: string, codeBlockContent: CodeBlockContent) => {
-  if (isEmpty(codeBlockContent) || isEmpty(codeBlockContent.comps)) {
-    state.bindComps[codeId] = [];
-    return;
-  }
-  const compsField = codeBlockContent.comps as CodeRelation;
-  const bindCompIds = Object.keys(compsField);
-  const bindCompsFiltered = bindCompIds.filter((compId) => !isEmpty(compsField[compId]));
-  const compsInfo = bindCompsFiltered.map((compId) => ({
+const getBindCompsByCodeId = (codeId: string) => {
+  const codeCombineInfo = services?.codeBlockService.getCombineInfo();
+  if (!codeCombineInfo) return null;
+  const bindCompsId = Object.keys(codeCombineInfo[codeId]);
+  const compsInfo = bindCompsId.map((compId) => ({
     id: compId,
     name: getCompName(compId),
   }));
@@ -147,7 +143,7 @@ const initList = async () => {
   if (!codeDsl) return;
   state.codeList = [];
   forIn(codeDsl, (value: CodeBlockContent, codeId: string) => {
-    getBindCompsByCodeId(codeId, value);
+    getBindCompsByCodeId(codeId);
     state.codeList.push({
       id: codeId,
       name: value.name,