feat: 添加初始化页面接口数据

components.d.ts

@@ -7,29 +7,41 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
+    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
+    AEmpty: typeof import('ant-design-vue/es')['Empty']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASpin: typeof import('ant-design-vue/es')['Spin']
+    ATable: typeof import('ant-design-vue/es')['Table']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     AUpload: typeof import('ant-design-vue/es')['Upload']
     BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
     CardBox: typeof import('./src/components/CardBox/index.vue')['default']
+    FormFormBuilder: typeof import('./src/components/Form/FormBuilder.vue')['default']
     GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
     MonacoEditor: typeof import('./src/components/MonacoEditor/index.vue')['default']
+    PermissionButton: typeof import('./src/components/PermissionButton/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Table: typeof import('./src/components/Table/index.vue')['default']
+    TitleComponent: typeof import('./src/components/TitleComponent/index.vue')['default']
     ValueItem: typeof import('./src/components/ValueItem/index.vue')['default']
   }
 }

src/api/initHome.ts

@@ -0,0 +1,25 @@
+import server from '@/utils/request';
+
+// 更新全部菜单
+export const updateMenus = (data: any) => server
+// 添加角色
+export const addRole = (data: any) => server.post(`/role`)
+
+//更新权限菜单
+export const getRoleMenu = (id: string) => server.get(`/menu/role/${id}/_grant/tree`)
+
+//更新权限菜单
+export const updateRoleMenu = (id: string, data: any) => server.put(`/menu/role/${id}/_grant`)
+
+// 记录初始化
+export const saveInit = () => server.post(`/user/settings/init`,{ init: true },)
+
+//获取初始化
+export const getInit = () => server.get(`/user/settings/init`)
+
+// 获取当前系统权限信息
+
+export const getSystemPermission = () =>server.get(`/system/resources/permission`)
+
+// 保存基础信息
+ export const save = (data?: any) => server.post('/system/config/scope/_save')

src/router/menu.ts

@@ -63,4 +63,9 @@ export default [
         path: '/link/accessConfig/detail/add',
         component: () => import('@/views/link/AccessConfig/Detail/index.vue')
     },
+    // 初始化
+    {
+      path: '/init-home',
+      component: () => import('@/views/init-home/index.vue')
+  },
 ]

src/views/init-home/data/interface.ts

@@ -1,3 +1,5 @@
+import type { Rule } from 'ant-design-vue/es/form';
+import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
 /** 初始化数据提交表单 */
 export interface modalState  {
   host: string; // 本地地址
@@ -19,7 +21,7 @@ export interface formState  {
 }
 
 /**
- * logo上传表当
+ * logo上传表单
  */
 export interface logoState  {
   logoValue: string;
@@ -29,5 +31,7 @@ export interface logoState  {
   inBackground: boolean;
   iconValue: string;
   backValue: string;
-  handleChangeLogo:(url: string) => void
+  handleChangeLogo:(info: UploadChangeParam ) => void
-}
+  beforeBackUpload:(file: UploadProps['beforeUpload']) => void
+  changeBackUpload:(info: UploadChangeParam ) => void
+}

src/views/init-home/index.vue

@@ -30,6 +30,8 @@
                                             >
                                                 <a-input
                                                     v-model:value="form.title"
+                                                    :maxlength="64"
+                                                    placeholder="请输入系统名称"
                                                 />
                                             </a-form-item>
                                             <a-form-item
@@ -69,6 +71,7 @@
                                                 </template>
                                                 <a-input
                                                     v-model:value="form.apikey"
+                                                    placeholder="请输入高德API Key"
                                                 />
                                             </a-form-item>
                                             <a-form-item>
@@ -91,6 +94,7 @@
                                                     v-model:value="
                                                         form.basePath
                                                     "
+                                                    placeholder="请输入高德API Key"
                                                 />
                                             </a-form-item>
                                             <a-row :gutter="24" :span="24">
@@ -224,7 +228,7 @@
                                                                         class="upload-image-content-logo"
                                                                     >
                                                                         <div
-                                                                            class="upload-image"
+                                                                            class="upload-image-icon"
                                                                             v-if="
                                                                                 iconValue
                                                                             "
@@ -293,7 +297,14 @@
                                                     <div
                                                         class="upload-image-border-back"
                                                     >
-                                                        <a-upload>
+                                                        <a-upload
+                                                            @beforeUpload="
+                                                                beforeBackUpload
+                                                            "
+                                                            @change="
+                                                                changeBackUpload
+                                                            "
+                                                        >
                                                             <div
                                                                 class="upload-image-content-back"
                                                             >
@@ -338,26 +349,6 @@
                                                                 </div>
                                                             </div>
                                                         </a-upload>
-
-                                                        <!-- <div
-                                                            v-if="
-                                                                logoValue &&
-                                                                logoLoading
-                                                            "
-                                                        >
-                                                            <div
-                                                                class="upload-loading-mask"
-                                                            >
-                                                                <LoadingOutlined
-                                                                    v-if="
-                                                                        loading
-                                                                    "
-                                                                    style="
-                                                                        font-size: 28px;
-                                                                    "
-                                                                />
-                                                            </div>
-                                                        </div> -->
                                                     </div>
                                                 </div>
                                                 <div class="upload-tips">
@@ -387,7 +378,7 @@
                                         />
                                     </div>
                                     <div class="menu-info">
-                                        <b>系统初始化xxx个菜单</b>
+                                        <b>系统初始化{{ count }}个菜单</b>
                                         <div>
                                             初始化后的菜单可在“菜单管理”页面进行维护管理
                                         </div>
@@ -645,7 +636,12 @@
                             </a-collapse-panel>
                         </a-collapse>
                     </a-spin>
-                    <a-button type="primary" class="btn-style">确定</a-button>
+                    <a-button
+                        type="primary"
+                        class="btn-style"
+                        @click="submitData"
+                        >确定</a-button
+                    >
                 </div>
             </div>
         </div>
@@ -659,12 +655,17 @@ import {
     LoadingOutlined,
 } from '@ant-design/icons-vue';
 import { ROLEKEYS, RoleData } from './data/RoleData';
-import type { FormInstance } from 'ant-design-vue';
 import type { Rule } from 'ant-design-vue/es/form';
-import { Form } from 'ant-design-vue';
+import type {
-import type { UploadChangeParam } from 'antd/lib/upload/interface';
+    FormInstance,
+    UploadChangeParam,
+    UploadProps,
+} from 'ant-design-vue';
 import { modalState, formState, logoState } from './data/interface';
-const formRef = ref<FormInstance>();
+import BaseMenu from './data/baseMenu';
+import { getSystemPermission, save } from '@/api/initHome';
+const formRef = ref();
+const menuRef = ref();
 const formBasicRef = ref<FormInstance>();
 /**
  * 表单数据
@@ -673,7 +674,7 @@ const form = reactive<formState>({
     title: '',
     headerTheme: 'light',
     apikey: '',
-    basePath: '',
+    basePath: `${window.location.origin}/api`,
     logo: '',
     icon: '',
     rulesFrom: {
@@ -688,14 +689,14 @@ const form = reactive<formState>({
             {
                 required: true,
                 message: '请选择主题色',
-                trigger: '[blur, change]',
+                trigger: 'blur',
             },
         ],
         basePath: [
             {
                 required: true,
                 message: '请输入base-path',
-                trigger: 'blur, change',
+                trigger: 'blur',
             },
         ],
     },
@@ -762,7 +763,6 @@ const ModalForm = reactive<modalState>({
             {
                 required: true,
                 validator: validateNumber,
-
                 trigger: 'change',
             },
         ],
@@ -815,17 +815,17 @@ const cancel = () => {
  * 提交图片
  */
 const logoData = reactive<logoState>({
-    logoValue: '',
+    logoValue: '/public/logo.png',
     logoLoading: false,
     inLogo: false,
     inIcon: false,
     inBackground: false,
-    iconValue: '',
+    iconValue: '/public/favicon.ico',
-    backValue: '',
+    backValue: '/public/images/login.png',
     /**
      * 图片上传改变事件
      */
-    handleChangeLogo: (info: UploadChangeParam) => {
+    handleChangeLogo: (info) => {
         if (info.file.status === 'uploading') {
             logoData.logoLoading = true;
         }
@@ -835,6 +835,14 @@ const logoData = reactive<logoState>({
             logoData.logoValue = info.file.response?.result;
         }
     },
+    /**
+     * 背景图片上传之前
+     */
+    beforeBackUpload: (file) => {},
+    /**
+     * 背景图片发生改变
+     */
+    changeBackUpload: (info) => {},
 });
 
 const {
@@ -847,6 +855,79 @@ const {
     backValue,
     handleChangeLogo,
 } = toRefs(logoData);
+/**
+ * 提交基础表单
+ */
+const basicData = reactive({
+    /**
+     * 提交基础表单数据
+     */
+    saveBasicInfo: async () => {},
+});
+
+/**
+ * 获取菜单数据
+ */
+const menuDatas = reactive({
+    count: 0,
+    /**
+     * 获取当前系统权限信息
+     */
+    getSystemPermissionData: async () => {
+        const resp = await getSystemPermission();
+        if (resp.status === 200) {
+            const newTree = menuDatas.filterMenu(
+                resp.result.map((item: any) => JSON.parse(item).id),
+                BaseMenu,
+            );
+            const _count = menuDatas.menuCount(newTree);
+            menuDatas.count = _count;
+            console.log(menuDatas.count, 'menuDatas.count');
+        }
+    },
+    /**
+     * 过滤菜单
+     */
+    filterMenu: (permissions: string[], menus: any[]) => {
+        return menus.filter((item) => {
+            let isShow = false;
+            if (item.showPage && item.showPage.length) {
+                isShow = item.showPage.every((pItem: any) => {
+                    return permissions.includes(pItem);
+                });
+            }
+            if (item.children) {
+                item.children = menuDatas.filterMenu(
+                    permissions,
+                    item.children,
+                );
+            }
+            return isShow || !!item.children?.length;
+        });
+    },
+    /**
+     * 计算菜单数量
+     */
+    menuCount: (menus: any[]) => {
+        return menus.reduce((pre, next) => {
+            let _count = 1;
+            if (next.children) {
+                _count = menuDatas.menuCount(next.children);
+            }
+            return pre + _count;
+        }, 0);
+    },
+});
+
+const { count } = toRefs(menuDatas);
+/**
+ * 初始化
+ */
+menuDatas.getSystemPermissionData();
+/**
+ * 提交所有数据
+ */
+const submit = () => {};
 </script>
 <style scoped lang="less">
 .page-container {
@@ -999,6 +1080,13 @@ const {
                                 background-position: 50%;
                                 background-size: cover;
                             }
+                            .upload-image-icon {
+                                width: 100%;
+                                height: 100%;
+                                background-repeat: no-repeat;
+                                background-position: 50%;
+                                background-size: inherit;
+                            }
                             .upload-image-mask {
                                 align-items: center;
                                 justify-content: center;