feat: tinyvue grid slot generate code to template (#756)

opentiny · Feb 18, 2025 · 11f9244 · 11f9244
1 parent b94f702
commit 11f9244
Show file tree

Hide file tree

Showing 10 changed files with 339 additions and 142 deletions.
diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json
@@ -10152,6 +10152,54 @@
             }
           }
         },
+        {
+          "icon": "grid",
+          "name": {
+            "zh_CN": "表格行"
+          },
+          "component": "TinyGridColumn",
+          "description": "提供了非常强大数据表格功能，可以展示数据列表，可以对数据列表进行选择、编辑等",
+          "docUrl": "",
+          "screenshot": "",
+          "tags": "",
+          "keywords": "",
+          "devMode": "proCode",
+          "npm": {
+            "package": "@opentiny/vue",
+            "exportName": "TinyGridColumn"
+          },
+          "group": "component",
+          "priority": 2,
+          "schema": {
+            "properties": [],
+            "events": {},
+            "shortcuts": {},
+            "contentMenu": {
+              "actions": ["create symbol"]
+            }
+          },
+          "configure": {
+            "loop": true,
+            "condition": true,
+            "styles": true,
+            "isContainer": false,
+            "isModal": false,
+            "nestingRule": {
+              "childWhitelist": "",
+              "parentWhitelist": "",
+              "descendantBlacklist": "",
+              "ancestorWhitelist": ""
+            },
+            "isNullNode": false,
+            "isLayout": false,
+            "rootSelector": "",
+            "shortcuts": {},
+            "contextMenu": {
+              "actions": ["create symbol"],
+              "disable": ["copy", "remove"]
+            }
+          }
+        },
         {
           "name": {
             "zh_CN": "分页"

diff --git a/mockServer/src/assets/json/appinfo.json b/mockServer/src/assets/json/appinfo.json
@@ -26956,6 +26956,54 @@
           }
         }
       },
+      {
+        "icon": "grid",
+        "name": {
+          "zh_CN": "表格行"
+        },
+        "component": "TinyGridColumn",
+        "description": "提供了非常强大数据表格功能，可以展示数据列表，可以对数据列表进行选择、编辑等",
+        "docUrl": "",
+        "screenshot": "",
+        "tags": "",
+        "keywords": "",
+        "devMode": "proCode",
+        "npm": {
+          "package": "@opentiny/vue",
+          "exportName": "TinyGridColumn"
+        },
+        "group": "component",
+        "priority": 2,
+        "schema": {
+          "properties": [],
+          "events": {},
+          "shortcuts": {},
+          "contentMenu": {
+            "actions": ["create symbol"]
+          }
+        },
+        "configure": {
+          "loop": true,
+          "condition": true,
+          "styles": true,
+          "isContainer": false,
+          "isModal": false,
+          "nestingRule": {
+            "childWhitelist": "",
+            "parentWhitelist": "",
+            "descendantBlacklist": "",
+            "ancestorWhitelist": ""
+          },
+          "isNullNode": false,
+          "isLayout": false,
+          "rootSelector": "",
+          "shortcuts": {},
+          "contextMenu": {
+            "actions": ["create symbol"],
+            "disable": ["copy", "remove"]
+          }
+        }
+      },
       {
         "name": {
           "zh_CN": "分页"

diff --git a/mockServer/src/mock/get/app-center/v1/apps/schema/918.json b/mockServer/src/mock/get/app-center/v1/apps/schema/918.json
@@ -1904,6 +1904,13 @@
         "destructuring": true,
         "version": "0.1.16"
       },
+      {
+        "componentName": "TinyGridColumn",
+        "package": "@opentiny/vue",
+        "exportName": "TinyGridColumn",
+        "destructuring": true,
+        "version": "0.1.16"
+      },
       {
         "componentName": "TinyNumeric",
         "package": "@opentiny/vue",

diff --git a/packages/engine-cli/template/designer/public/mock/bundle.json b/packages/engine-cli/template/designer/public/mock/bundle.json
@@ -10152,6 +10152,54 @@
             }
           }
         },
+        {
+          "icon": "grid",
+          "name": {
+            "zh_CN": "表格行"
+          },
+          "component": "TinyGridColumn",
+          "description": "提供了非常强大数据表格功能，可以展示数据列表，可以对数据列表进行选择、编辑等",
+          "docUrl": "",
+          "screenshot": "",
+          "tags": "",
+          "keywords": "",
+          "devMode": "proCode",
+          "npm": {
+            "package": "@opentiny/vue",
+            "exportName": "TinyGridColumn"
+          },
+          "group": "component",
+          "priority": 2,
+          "schema": {
+            "properties": [],
+            "events": {},
+            "shortcuts": {},
+            "contentMenu": {
+              "actions": ["create symbol"]
+            }
+          },
+          "configure": {
+            "loop": true,
+            "condition": true,
+            "styles": true,
+            "isContainer": false,
+            "isModal": false,
+            "nestingRule": {
+              "childWhitelist": "",
+              "parentWhitelist": "",
+              "descendantBlacklist": "",
+              "ancestorWhitelist": ""
+            },
+            "isNullNode": false,
+            "isLayout": false,
+            "rootSelector": "",
+            "shortcuts": {},
+            "contextMenu": {
+              "actions": ["create symbol"],
+              "disable": ["copy", "remove"]
+            }
+          }
+        },
         {
           "name": {
             "zh_CN": "分页"

diff --git a/packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js b/packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js
@@ -216,11 +216,10 @@ const generateSFCFile = (schema, componentsMap, config = {}, nextPage) => {
 
 export const genSFCWithDefaultPlugin = (schema, componentsMap, config = {}, nextPage) => {
   const { templateItemValidate = [], genTemplate = [], parseScript = [], genScript = {} } = config.hooks || {}
-  const defaultComponentHooks = [handleComponentNameHook, handleTinyIcon]
+  const defaultComponentHooks = [handleComponentNameHook, handleTinyIcon, handleTinyGrid]
 
   const defaultAttributeHook = [
     handleSlotParams,
-    handleTinyGrid,
     handleJsxModelValueUpdate,
     handleConditionAttrHook,
     handleLoopAttrHook,

diff --git a/packages/vue-generator/src/generator/vue/sfc/generateTemplate.js b/packages/vue-generator/src/generator/vue/sfc/generateTemplate.js
@@ -10,6 +10,7 @@ import {
 import { generateTag, HTML_DEFAULT_VOID_ELEMENTS } from './generateTag'
 import { specialTypeHandler } from './generateAttribute'
 import { thisPropsBindRe, thisRegexp } from '@/utils'
+import { getImportMap } from './parseImport'
 
 export const handleComponentNameHook = (optionData) => {
   const { componentName, schema } = optionData
@@ -69,37 +70,60 @@ export const handleTinyIcon = (nameObj, globalHooks) => {
   delete nameObj.schema.props.name
 }
 
-const handleTinyGridSlots = (value, globalHooks, config) => {
-  if (!Array.isArray(value)) {
+const transformSlots = (slots) => {
+  if (!slots || typeof slots !== 'object') {
+    return []
+  }
+
+  const res = Object.entries(slots).map(([key, value]) => {
+    return {
+      componentName: 'template',
+      props: {
+        slot: {
+          name: key,
+          params: value?.params || ''
+        }
+      },
+      children: value?.value
+    }
+  })
+
+  return res
+}
+
+const transformColumnToChildren = (columns) => {
+  if (!Array.isArray(columns)) {
     return
   }
 
-  value.forEach((slotItem) => {
-    const name = slotItem.componentName
+  const res = columns.map((item) => {
+    const { slots, ...restItem } = item
+
+    let children = []
 
-    if (!name) {
-      return
+    if (slots) {
+      children = transformSlots(slots)
     }
 
-    if (slotItem.componentType === 'Block') {
-      const importPath = `${config.blockRelativePath}${name}${config.blockSuffix}`
+    return {
+      componentName: 'TinyGridColumn',
+      props: restItem,
+      children
+    }
+  })
 
-      globalHooks.addImport(importPath, {
-        exportName: name,
-        componentName: name,
-        package: importPath
-      })
-    } else if (name?.startsWith?.('Tiny')) {
-      globalHooks.addImport('@opentiny/vue', {
-        destructuring: true,
-        exportName: name.slice(4),
-        componentName: name,
-        package: '@opentiny/vue'
-      })
+  return res
+}
+
+// 检测 tinyGrid 表格列是否有插槽配置
+const columnHasSlots = (columns) => {
+  for (const columnItem of columns) {
+    if (columnItem.slots && typeof columnItem.slots === 'object' && Object.keys(columnItem.slots).length > 0) {
+      return true
     }
+  }
 
-    handleTinyGridSlots(slotItem.children, globalHooks, config)
-  })
+  return false
 }
 
 export const handleTinyGrid = (schemaData, globalHooks, config) => {
@@ -132,11 +156,26 @@ export const handleTinyGrid = (schemaData, globalHooks, config) => {
         value: name
       }
     }
-
-    if (typeof item.slots === 'object') {
-      Object.values(item.slots).forEach((slotItem) => handleTinyGridSlots(slotItem?.value, globalHooks, config))
-    }
   })
+
+  const hasSlots = columnHasSlots(props.columns)
+
+  // 存在 slots，将表格列转化成 children 的配置
+  if (hasSlots) {
+    schemaData.schema.children = schemaData.schema.children || []
+    schemaData.schema.children.push(...transformColumnToChildren(props.columns))
+
+    // 解析 slot 中的 依赖
+    const { pkgMap = {}, blockPkgMap = {} } = getImportMap(schemaData.schema, config.componentsMap, config)
+
+    Object.entries({ ...pkgMap, ...blockPkgMap }).forEach(([key, value]) => {
+      value.forEach((valueItem) => {
+        globalHooks.addImport(key, valueItem)
+      })
+    })
+
+    delete props.columns
+  }
 }
 
 /**

diff --git a/packages/vue-generator/test/testcases/sfc/case01/componentsMap.json b/packages/vue-generator/test/testcases/sfc/case01/componentsMap.json
@@ -27,6 +27,13 @@
     "version": "^3.10.0",
     "destructuring": true
   },
+  {
+    "componentName": "TinyGridColumn",
+    "exportName": "GridColumn",
+    "package": "@opentiny/vue",
+    "version": "^3.10.0",
+    "destructuring": true
+  },
   {
     "componentName": "TinyInput",
     "exportName": "Input",

diff --git a/packages/vue-generator/test/testcases/sfc/case01/expected/FormTable.vue b/packages/vue-generator/test/testcases/sfc/case01/expected/FormTable.vue
@@ -38,7 +38,26 @@
       <tiny-grid :columns="state.columns" :fetchData="{ api: getTableData }"></tiny-grid>
     </div>
     <div dataSource="a5f6ef4f">
-      <tiny-grid :fetchData="{ api: getTableData }" :columns="state.columns6cio"></tiny-grid>
+      <tiny-grid :fetchData="{ api: getTableData }">
+        <tiny-grid-column type="index" :width="60" title=""></tiny-grid-column>
+        <tiny-grid-column type="selection" :width="60"></tiny-grid-column>
+        <tiny-grid-column field="employees" title="员工数">
+          <template #default="{ row, rowIndex }"> <tiny-input></tiny-input></template
+        ></tiny-grid-column>
+        <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+        <tiny-grid-column title="产品">
+          <template #default="{ row }">
+            <div>
+              <tiny-switch modelValue=""></tiny-switch></div></template
+        ></tiny-grid-column>
+        <tiny-grid-column title="操作">
+          <template #default="">
+            <tiny-button
+              text="删除"
+              :icon="TinyIconDel"
+              @click="(...eventArgs) => emit(eventArgs, row)"
+            ></tiny-button></template></tiny-grid-column
+      ></tiny-grid>
     </div>
     <div :style="{ width: props.quotePopWidth }">循环渲染：</div>
     <tiny-icon-help-circle v-if="false"></tiny-icon-help-circle>
@@ -72,6 +91,7 @@ import {
   Grid as TinyGrid,
   Input as TinyInput,
   Select as TinySelect,
+  GridColumn as TinyGridColumn,
   Switch as TinySwitch
 } from '@opentiny/vue'
 import { IconSearch, IconDel, iconHelpCircle, IconEdit } from '@opentiny/vue-icon'
@@ -97,30 +117,6 @@ const { utils } = wrap(function () {
   return this
 })()
 const state = vue.reactive({
-  columns6cio: [
-    { type: 'index', width: 60, title: '' },
-    { type: 'selection', width: 60 },
-    { field: 'employees', title: '员工数', slots: { default: ({ row, rowIndex }, h) => <TinyInput></TinyInput> } },
-    { field: 'city', title: '城市' },
-    {
-      title: '产品',
-      slots: {
-        default: ({ row }, h) => (
-          <div>
-            <TinySwitch modelValue=""></TinySwitch>
-          </div>
-        )
-      }
-    },
-    {
-      title: '操作',
-      slots: {
-        default: ({ row }, h) => (
-          <TinyButton text="删除" icon={TinyIconDel} onClick={(...eventArgs) => emit(eventArgs, row)}></TinyButton>
-        )
-      }
-    }
-  ],
   IconPlusSquare: utils.IconPlusSquare(),
   theme: "{   'id': 22,   'name': '@cloud/tinybuilder-theme-dark',   'description': '黑暗主题' }",
   companyName: '',