开始尝试进行业务化模板

client/src/main.js

@@ -27,6 +27,11 @@ createApp(App)
             path: 'overview',
             component: () => import('@/views/management/Overview.vue'),
           },
+          {
+            name: 'organization',
+            path: 'organization',
+            component: () => import('@/views/management/Organization.vue'),
+          },
           {
             name: 'setting',
             path: 'setting',

client/src/utils.js

@@ -1,19 +1,21 @@
 const information = {
-    debug: true,
-    baseUrl: 'http://localhost'
+  debug: true,
+  baseUrl: 'http://localhost:8080',
 }
 
 export function amisRender(target, amisJson) {
-    let amisJsonObject = amisJson(information)
-    if (information.debug) {
-        console.log(amisJsonObject)
-    }
-    amisRequire('amis/embed').embed(
-        target,
-        amisJsonObject,
-        information,
-        {
-            theme: 'antd'
-        }
-    )
+  let amisJsonObject = amisJson(information)
+  if (information.debug) {
+    console.log(amisJsonObject)
+  }
+  amisRequire('amis/embed').embed(
+    target,
+    amisJsonObject,
+    information,
+    {
+      theme: 'antd',
+      enableAMISDebug:
+      information.debug,
+    },
+  )
 }

client/src/views/management/Index.vue

@@ -1,5 +1,8 @@
 <script setup>
-import {ref, watch} from 'vue'
+import {
+  ref,
+  watch,
+} from 'vue'
 import {useRoute} from 'vue-router'
 
 const route = useRoute();
@@ -13,13 +16,18 @@ const menus = [
     key: 'system',
     name: '系统管理',
     children: [
+      {
+        key: 'organization',
+        path: '/management/organization',
+        name: '组织架构',
+      },
       {
         key: 'setting',
         path: '/management/setting',
         name: '设置',
-      }
-    ]
-  }
+      },
+    ],
+  },
 ]
 const sideNavSelected = ref(['overview'])
 const openKeys = ref([]) // 控制展开的子菜单
@@ -65,19 +73,21 @@ watch(() => route.path, () => {
           v-model:openKeys="openKeys"
           mode="inline"
       >
-        <a-menu-item key="overview">
-          <router-link to="/management/overview">概览</router-link>
-        </a-menu-item>
-        <a-sub-menu key="system">
-          <template #title>
+        <div v-for="menu in menus" :key="menu.key">
+          <a-sub-menu v-if="menu.children" :key="menu.key">
+            <template #title>
               <span>
-                系统管理
+                {{ menu.name }}
               </span>
-          </template>
-          <a-menu-item key="setting">
-            <router-link to="/management/setting">设置</router-link>
+            </template>
+            <a-menu-item v-for="submenu in menu.children" :key="submenu.key">
+              <router-link :to="submenu.path">{{ submenu.name }}</router-link>
+            </a-menu-item>
+          </a-sub-menu>
+          <a-menu-item v-else :key="menu.key">
+            <router-link :to="menu.path">{{ menu.name }}</router-link>
           </a-menu-item>
-        </a-sub-menu>
+        </div>
       </a-menu>
     </a-layout-sider>
     <div class="p-3 h-full w-full">

client/src/views/management/Organization.vue

@@ -0,0 +1,78 @@
+<script setup>
+import {onMounted} from 'vue'
+import {amisRender} from '@/utils.js'
+
+onMounted(() => {
+  amisRender(
+      '#amis-organization',
+      information => {
+        return {
+          type: 'page',
+          body: [
+            {
+              type: 'tpl',
+              tpl: '${baseUrl}1',
+            },
+            {
+              type: 'crud',
+              syncLocation: false,
+              headerToolbar: [
+                {
+                  type: 'action',
+                  label: '新增组织',
+                  level: 'primary',
+                  actionType: 'dialog',
+                  dialog: {
+                    title: '新增组织',
+                    body: {
+                      type: 'form',
+                      api: {
+                        method: 'post',
+                        url: `${information.baseUrl}/jsonapi/organization`,
+                        dataType: 'application/vnd.api+json',
+                        headers: {
+                          'Content-Type': 'application/vnd.api+json',
+                        },
+                        data: {
+                          type: 'user',
+                          attributes: {
+                            organizationName: '${organizationName}',
+                          },
+                        },
+                      },
+                      body: [
+                        {
+                          type: 'input-text',
+                          name: 'organizationName',
+                          label: '组织名称',
+                          required: true,
+                        },
+                      ],
+                    },
+                  },
+                },
+              ],
+              columns: [
+                {
+                  name: 'organizationId',
+                  label: '组织编号',
+                },
+                {
+                  name: 'organizationName',
+                  label: '组织名称',
+                },
+              ],
+            },
+          ],
+        }
+      },
+  )
+})
+</script>
+
+<template>
+  <div id="amis-organization"></div>
+</template>
+
+<style scoped>
+</style>