菜单功能添加小程序属性以及优化

src/App.vue

@@ -1,3 +1,51 @@
 <template>
   <router-view />
 </template>
+
+<script lang="ts" setup>
+import router from '@/router'
+import { watch, onMounted, ref } from 'vue'
+import { useAppStore } from '@/stores/modules/app'
+import { RouteLocationNormalizedLoaded } from 'vue-router'
+
+const appStore = useAppStore()
+const breadcrumbs = ref<string[]>([])
+
+// 监听当前路由的变化
+watch(router.currentRoute, (newValue, oldValue) => {
+  // 激活菜单
+  if (newValue.meta.active_menu) {
+    appStore.setActiveMenu(newValue.meta.active_menu)
+  }
+  setActiveMenu(newValue)
+  getBreadcrumbs(newValue)
+})
+
+// get init breadcrumb
+onMounted(() => {
+  setActiveMenu(router.currentRoute.value)
+  getBreadcrumbs(router.currentRoute.value)
+})
+
+const setActiveMenu = route => {
+  if (route.path !== '/') {
+    // 如果是内页，并且设置激活菜单
+    if (route.meta.active_menu) {
+      appStore.setActiveMenu(route.meta.active_menu)
+    } else {
+      appStore.setActiveMenu(route.path)
+    }
+  }
+}
+
+// get breadcrums
+function getBreadcrumbs(newRoute: RouteLocationNormalizedLoaded) {
+  breadcrumbs.value = []
+  breadcrumbs.value.push('首页')
+  newRoute.matched.forEach(m => {
+    if (m.meta.title !== undefined) {
+      breadcrumbs.value.push(m.meta?.title as string)
+    }
+  })
+}
+</script>

src/api/auth/index.ts

@@ -1,25 +1,13 @@
-import http from '@/support/http';
+import http from '@/api/http';
 /**
  * 忘记密码发送验证码
  */
 export function sendCode(params: object) {
-  return http.post('/send_code', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.post('/send_code', params);
 }
 /**
  * 忘记密码重置
  */
 export function resetPassword(params: object) {
-  return http.post('/reset_password', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.post('/reset_password', params);
 }

src/api/bookManage/index.ts

@@ -1,39 +1,21 @@
-import http from '@/support/http';
+import http from '@/api/http';
 /**
  * 籍列表接口
  */
 export function bookList(params: object) {
-  return http.post('/contentManage/book/list', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.post('/contentManage/book/list', params)
 }
 /**
  * 合作结算方式获取
  */
 export function bookSettlementypes() {
-  return http.get('/contentManage/book/settlementypes').then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.get('/contentManage/book/settlementypes')
 }
 /**
  * 获取书籍版权分库信息
  */
 export function bookDistribute(bid: number, params?: object) {
-  return http.get(`/contentManage/book/distribute/${bid}`, params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.get(`/contentManage/book/distribute/${bid}`, params)
 }
 /**
  * 提交书籍版权分库信息
@@ -41,60 +23,30 @@ export function bookDistribute(bid: number, params?: object) {
 export function bookDistributeSave(bid: number, params: object) {
   return http
     .post(`/contentManage/book/distribute/${bid}`, params)
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+    
 }
 /**
  * 提交书籍版权分库信息
  */
 export function bookEditAuthor(params: object) {
-  return http.post('contentManage/book/edit_author', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.post('contentManage/book/edit_author', params)
 }
 /**
  * 上传书籍
  */
 export function bookImport(params: object) {
-  return http.post('/contentManage/book/import', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.post('/contentManage/book/import', params)
 }
 /**
  * 创建书籍
  */
 export function bookCreateBook(params: object) {
-  return http.post('/contentManage/book/createBook', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.post('/contentManage/book/createBook', params)
 }
 
 /**
  * 书籍分类
  */
 export function bookCategorylist(params?: object) {
-  return http.get(`/contentManage/book/categorylist`, params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.get(`/contentManage/book/categorylist`, params)
 }

src/api/cp/index.ts

@@ -1,99 +1,51 @@
-import http from '@/support/http';
-import { Message } from '@element-plus/icons-vue/dist/types';
+import http from '@/api/http';
 /**
  * cp选择项
  */
 export function cpOptions(params: object) {
-  return http.get('/contentManage/cp/options', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.get('/contentManage/cp/options', params);
 }
 /**
  * 数据中心列表
  */
 export function subscribeStatisticDataList(params: object) {
-  return http
-    .get('/contentManage/cp/subscribeStatisticData/list', params)
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+  return http.get('/contentManage/cp/subscribeStatisticData/list', params);
 }
 /**
  * 数据中心列表
  */
 export function subscribeStatisticDataListStatistic(params: object) {
-  return http
-    .get('/contentManage/cp/subscribeStatisticData/listStatistic', params)
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+  return http.get(
+    '/contentManage/cp/subscribeStatisticData/listStatistic',
+    params
+  );
 }
 /**
  * cp结算列表
  */
 export function subscribeStatisticDataMonthList(params: object) {
-  return http
-    .get('/contentManage/cp/subscribeStatisticData/monthList', params)
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+  return http.get('/contentManage/cp/subscribeStatisticData/monthList', params);
 }
 /**
  * cp列表
  */
 export function cpManageCpList(params?: object) {
-  return http.get('/contentManage/cp/manage/cp_list', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.get('/contentManage/cp/manage/cp_list', params);
 }
 /**
  * cp结算列表-某个cp某月的全部书籍结算金额导出
  */
 export function exportListCpMonthFinalAmount(params: object) {
-  return http
-    .get(
-      '/contentManage/cp/subscribeStatisticData/listCpMonthFinalAmount',
-      params
-    )
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+  return http.get(
+    '/contentManage/cp/subscribeStatisticData/listCpMonthFinalAmount',
+    params
+  );
 }
 /**
  * 同步CP书籍
  */
 export function cpCpCollection(params: object) {
-  return http.get('/contentManage/cp/cpCollection', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.get('/contentManage/cp/cpCollection', params);
 }
 /**
  * 修改结算状态

src/api/http.ts

@@ -0,0 +1,215 @@
+import { Code } from '@/enum/app'
+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
+import { env, getAuthToken, removeAuthToken } from '@/support/helper'
+import Message from '@/support/message'
+import router from '@/router'
+import ResponseData from '@/types/responseData'
+
+/**
+ * http util
+ */
+class Http {
+  /**
+   * axios config
+   * @protected
+   */
+  protected config: AxiosRequestConfig = {}
+
+  /**
+   * base url
+   * @protected
+   */
+  protected baseURL: string = ''
+
+  /**
+   * http request timeout
+   *
+   * @protected
+   */
+  protected timeout: number = 0
+
+  /**
+   * http request headers
+   *
+   * @protected
+   */
+  protected headers: { [k: string]: string } = {}
+
+  /**
+   * axios instance
+   *
+   * @protected
+   */
+  protected request: AxiosInstance
+
+  /**
+   * instance
+   */
+  constructor() {
+    this.request = axios.create(this.getConfig())
+  }
+
+  /**
+   * get request
+   *
+   * @param path
+   * @param params
+   */
+  public get(path: string, params: object = {}) {
+    return this.request.get(this.baseURL + path, {
+      params,
+    })
+  }
+
+  /**
+   * post request
+   *
+   * @param path
+   * @param data
+   */
+  public post(path: string, data: object = {}) {
+    return this.request.post(this.baseURL + path, data)
+  }
+
+  /**
+   * put request
+   *
+   * @param path
+   * @param data
+   */
+  public put(path: string, data: object = {}) {
+    return this.request.put(this.baseURL + path, data)
+  }
+
+  /**
+   * delete request
+   *
+   * @param path
+   */
+  public delete(path: string) {
+    return this.request.delete(this.baseURL + path)
+  }
+
+  /**
+   * set timeout
+   *
+   * @param timeout
+   * @returns
+   */
+  public setTimeout(timeout: number): Http {
+    this.timeout = timeout
+
+    return this
+  }
+
+  /**
+   * set baseurl
+   *
+   * @param url
+   * @returns
+   */
+  public setBaseUrl(url: string): Http {
+    this.baseURL = url
+
+    return this
+  }
+
+  /**
+   * set headers
+   *
+   * @param key
+   * @param value
+   * @returns
+   */
+  public setHeader(key: string, value: string): Http {
+    this.headers.key = value
+
+    return this
+  }
+
+  /**
+   * get axios 配置
+   *
+   * @returns
+   */
+  protected getConfig(): AxiosRequestConfig {
+    // set base url
+    this.config.baseURL = this.baseURL ? this.baseURL : env('VITE_BASE_URL')
+
+    // set timeout
+    this.config.timeout = this.timeout ? this.timeout : 60000
+
+    // set ajax request
+    this.headers['X-Requested-With'] = 'XMLHttpRequest'
+    // set dashboard request
+    this.headers['Request-from'] = 'Dashboard'
+    this.config.headers = this.headers
+
+    return this.config
+  }
+
+  /**
+   * 添加请求拦截器
+   *
+   */
+  public interceptorsOfRequest(): void {
+    this.request.interceptors.request.use(function (config: AxiosRequestConfig) {
+      const token = getAuthToken()
+      if (token) {
+        if (!config.headers) {
+          config.headers = {}
+        }
+
+        config.headers.authorization = 'Bearer ' + token
+      }
+
+      return config
+    })
+  }
+
+  /**
+   * 添加响应拦截器
+   *
+   */
+  public interceptorsOfResponse(): void {
+    this.request.interceptors.response.use(
+      response => {
+        const r: ResponseData = response.data
+        const code = r.code
+        const message = r.message
+        if (code === 1e4) {
+          return r
+        }
+
+        if (code === 10004) {
+          Message.error(message || 'Error')
+        } else if (code === Code.LOST_LOGIN || code === Code.LOGIN_EXPIRED) {
+          // to re-login
+          Message.confirm(message + '，需要重新登陆', function () {
+            removeAuthToken()
+            router.push('/login')
+          })
+        } else if (code === Code.LOGIN_BLACKLIST || code === Code.USER_FORBIDDEN) {
+          Message.error(message || 'Error')
+          removeAuthToken()
+          // to login page
+          router.push('/login')
+        } else {
+          Message.error(message || 'Error')
+        }
+
+        return Promise.reject(new Error(message || 'Error'))
+      },
+      error => {
+        Message.error(error.message)
+        return Promise.reject(error)
+      },
+    )
+  }
+}
+
+const http = new Http()
+http.interceptorsOfRequest()
+
+http.interceptorsOfResponse()
+export default http

src/api/modules/index.ts

@@ -0,0 +1,7 @@
+import http from '@/api/http';
+/**
+ * 获取app
+ */
+export function modulesListApp(params?: object) {
+  return http.get('/modules/listApp', params);
+}

src/api/notice/index.ts

@@ -1,176 +1,81 @@
-import http from '@/support/http';
-import { Message } from '@element-plus/icons-vue/dist/types';
+import http from '@/api/http';
 /**
  * 通知分类列表
  */
 export function noticesTypesList(params: object) {
-  return http.get('/contentManage/notices/types/list', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.get('/system/notices/types/list', params);
 }
 /**
  * 通知管理的公告列表
  */
 export function noticesList(params: object) {
-  return http.get('/contentManage/notices/notice/list', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.get('/system/notices/notice/list', params);
 }
 /**
  * 添加公告分类
  */
 export function noticesTypesAdd(params: object) {
-  return http.post('/contentManage/notices/types/add', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.post('/system/notices/types/add', params);
 }
 /**
  * 删除公告分类
  */
 export function noticesTypesDel(id: number | string, params: object) {
-  return http
-    .post(`/contentManage/notices/types/del/${id}`, params)
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+  return http.post(`/system/notices/types/del/${id}`, params);
 }
 /**
  * 添加公告
  */
 export function noticesAdd(params: object) {
-  return http.post('/contentManage/notices/notice/add', params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.post('/system/notices/notice/add', params);
 }
 
 /**
  * 保存编辑公告
  */
 export function noticesEdit(id: number | string, params: object) {
-  return http
-    .post(`/contentManage/notices/notice/edit/${id}`, params)
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+  return http.post(`/system/notices/notice/edit/${id}`, params);
 }
 
 /**
  * 删除公告
  */
 export function noticesdel(id: number | string, params: object) {
-  return http
-    .post(`/contentManage/notices/notice/del/${id}`, params)
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+  return http.post(`/system/notices/notice/del/${id}`, params);
 }
 /**
  * 获取公告通知对象选择项
  */
 export function noticesObjOption(params: object) {
-  return http
-    .post(`/contentManage/notices/notice/obj_option`, params)
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+  return http.post(`/system/notices/notice/obj_option`, params);
 }
 /**
  * 我的公告列表
  */
 export function noticeListMine(params: object) {
-  return http.get(`/contentManage/notices/notice/mine`, params).then(res => {
-    const r = res.data;
-    const code = r.code;
-    if (code === 1e4) {
-      return r;
-    }
-  });
+  return http.get(`/system/notices/notice/mine`, params);
 }
 /**
  * 用户查看详情
  */
 export function noticeDetail(id: string | number, params?: object) {
-  return http
-    .get(`/contentManage/notices/notice/detail/${id}`, params)
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+  return http.get(`/system/notices/notice/detail/${id}`, params);
 }
 /**
  * 用户设置已读
  */
 export function noticeRead(id: string | number, params?: object) {
-  return http
-    .get(`/contentManage/notices/notice/read/${id}`, params)
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+  return http.get(`/system/notices/notice/read/${id}`, params);
 }
 /**
  * 用户删除
  */
 export function noticeUserDel(id: string | number, params?: object) {
-  return http
-    .get(`/contentManage/notices/notice/user_del/${id}`, params)
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+  return http.get(`/system/notices/notice/user_del/${id}`, params);
 }
 /**
  * 获取一条弹窗
  */
-export function noticePopup( params?: object) {
-  return http
-    .get(`/contentManage/notices/notice/popup`, params)
-    .then(res => {
-      const r = res.data;
-      const code = r.code;
-      if (code === 1e4) {
-        return r;
-      }
-    });
+export function noticePopup(params?: object) {
+  return http.get(`/system/notices/notice/popup`, params);
 }

src/layout/components/header/index.vue

@@ -7,12 +7,17 @@
           <Icon name="list-bullet" class="w-6 h-8" />
         </div>
         <div class="flex items-center pl-3 w-96 sm:pl-0">
-          <Breadcrumbs />
+          <!-- <Breadcrumbs /> -->
+          <el-select v-model="navData.app" class="m-2" @change="appChange" clearable filterable placeholder="Select"
+            size="large">
+            <el-option v-for="item in navDataArr" :key="item.name" :label="item.title" :value="item.name" />
+          </el-select>
         </div>
       </div>
 
       <div class="flex w-52 sm:min-w-[18rem] flex-row item-center pl-1 sm:pl-0 justify-end sm:justify-between mr-4">
         <div class="hidden w-3/5 sm:flex">
+
           <!-- 菜单切换 -->
           <MenuSelect />
           <!-- 搜索 -->
@@ -30,11 +35,33 @@
 </template>
 <script setup lang="ts">
 import { useAppStore } from '@/stores/modules/app'
+import { modulesListApp } from '@/api/modules/index'
 import Notification from './notification.vue'
 import MenuSearch from './menuSearch.vue'
 import MenuSelect from './menuSelect.vue'
-const test = ref('')
-const options = ref([{ label: "test", value: 'test' }])
-
+import { useUserStore } from '@/stores/modules/user/index'
+import Cache from '@/support/cache';
+import router from '@/router'
 const store = useAppStore()
+
+const navData = ref({})
+const navDataArr = ref([])
+const searchMenuVisiable = ref(false)
+const userStore = useUserStore()
+const appChange = (e) => {
+  console.log(e, 'userStore', userStore, navData.value, 'navData.value');
+  Cache.set('nav_data', JSON.stringify(navData.value));
+  router.push('/')
+  let timer = setTimeout(() => {
+    location.reload()
+    clearTimeout(timer)
+  }, 50)
+  searchMenuVisiable.value = false
+}
+onMounted(() => {
+  modulesListApp().then(res => {
+    navDataArr.value = res.data
+  })
+  navData.value = JSON.parse(Cache.get('nav_data')) || {}
+})
 </script>

src/layout/components/header/menuSelect.vue

@@ -5,7 +5,10 @@
 
       <Teleport to="body">
         <el-dialog v-model="searchMenuVisiable" width="30%" draggable>
-          <el-cascader @change="testChange" :props="props" :filterable="true" class="w-full" :show-all-levels="false" />
+          <el-select v-model="navData.app" class="m-2 rounded" clearable filterable @change="appChange"
+            placeholder="Select" size="large">
+            <el-option v-for="item in navDataArr" :key="item.name" :label="item.title" :value="item.name" />
+          </el-select>
         </el-dialog>
       </Teleport>
     </div>
@@ -14,35 +17,28 @@
 
 <script lang="ts" setup>
 import { useUserStore } from '@/stores/modules/user/index'
+import { modulesListApp } from '@/api/modules/index'
 import Cache from '@/support/cache';
 import router from '@/router'
-import http from '@/support/http'
-import type { CascaderProps } from 'element-plus'
+const navData = ref({})
+const navDataArr = ref([])
 const searchMenuVisiable = ref(false)
 const userStore = useUserStore()
-const testChange = async (e) => {
-  // console.log(e, 'userStore', userStore);
-  // userStore.setPermissions([])
-  // userStore.setUsername('5444')
-  Cache.set('nav_data', JSON.stringify({ app: 'wx', user: '555' }));
-  await userStore.getUserInfo();
+
+const appChange = (e) => {
+  console.log(e, 'userStore', userStore, navData.value, 'navData.value');
+  Cache.set('nav_data', JSON.stringify(navData.value));
   router.push('/')
+  let timer = setTimeout(() => {
+    location.reload()
+    clearTimeout(timer)
+  }, 50)
   searchMenuVisiable.value = false
 }
-let id = 0
-const props: CascaderProps = {
-  lazy: true,
-  lazyLoad(node, resolve) {
-    const { level } = node
-    setTimeout(() => {
-      const nodes = Array.from({ length: level + 1 }).map((item) => ({
-        value: ++id,
-        label: `Option - ${id}`,
-        leaf: level >= 2,
-      }))
-      // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
-      resolve(nodes)
-    }, 1000)
-  },
-}
+onMounted(() => {
+  modulesListApp().then(res => {
+    navDataArr.value = res.data
+  })
+  navData.value = JSON.parse(Cache.get('nav_data')) || {}
+})
 </script>

src/stores/modules/user/index.ts

@@ -131,6 +131,7 @@ export const useUserStore = defineStore('UserStore', {
      */
     getUserInfo() {
       return new Promise((resolve, reject) => {
+        
         console.log(Cache.get('nav_data'), 'localStorage.getItem(nav_data)');
         const params = JSON.parse(Cache.get('nav_data'));
         http

src/views/notice/mynotice/index.vue

@@ -29,7 +29,7 @@ import {
 import { ref } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import { noticesTypesList, noticeDetail, noticeRead, noticePopup } from '@/api/notice/index';
-const api = 'contentManage/notices/notice/mine';
+const api = 'system/notices/notice/mine';
 const { data, query, search, reset, loading } = useGetList(api, true);
 const currentTableData = computed(() => data.value?.data);
 const centerDialogVisible = ref(false)

src/views/system/notice/index.vue

@@ -48,10 +48,10 @@ import { useGetList } from '@/hook/curd/useGetList';
 import { useDestroy } from '@/hook/curd/useDestroy';
 import { noticesTypesList } from '@/api/notice/index';
 
-const api = 'contentManage/notices/notice/list';
-const delapi = 'contentManage/notices/notice/del';
+const api = 'system/notices/notice/list';
+const delapi = 'system/notices/notice/del';
 const noticesTypes = ref([]);
-let editapi = 'contentManage/notices/notice/edit';
+let editapi = 'system/notices/notice/edit';
 let showCreate = ref(false)
 
 const { data, query, search, reset, loading } = useGetList(api, true);

vite.config.js

@@ -143,7 +143,7 @@ export default defineConfig(({ command, mode }) => {
       proxy: {
         [env.VITE_BASE_URL]: {
           // 线上API地址
-          target: 'http://121.37.183.29:8094/api',
+          target: 'http://m.test.duanju.dududus.com/api',
           // 本地API地址
           // target: 'http://localhost:8989',
           changeOrigin: true,