finish v2.0.5 demo migrate

Author: jzfai

eslintrc/.eslintrc-auto-import.json

@@ -29,6 +29,7 @@
     "elNotify": true,
     "filterAsyncRouter": true,
     "filterAsyncRouterByReq": true,
+    "filterNull": true,
     "freshRouter": true,
     "getCurrentInstance": true,
     "getCurrentScope": true,

mock/excel.ts

@@ -13,7 +13,6 @@ for (let i = 0; i < count; i++) {
 NameList.push({ name: 'mock-Pan' })
 
 export default [
-  // username search
   {
     url: '/vue3-admin-plus/search/user',
     method: 'get',
@@ -30,8 +29,6 @@ export default [
       }
     }
   },
-
-  // transaction list
   {
     url: '/vue3-admin-plus/transaction/list',
     method: 'get',

mock/table.ts

@@ -15,7 +15,7 @@ const data = Mock.mock({
 
 export default [
   {
-    url: '/vue3-admin-template/table/list',
+    url: '/vue3-admin-plus/table/list',
     method: 'get',
     response: () => {
       const items = data.items

src/api/remote-search.js

@@ -0,0 +1,17 @@
+import request from 'axios'
+
+export function searchUser(name) {
+  return request({
+    url: '/vue3-admin-plus/search/user',
+    method: 'get',
+    params: { name }
+  })
+}
+
+export function transactionList(query) {
+  return request({
+    url: '/vue3-admin-plus/transaction/list',
+    method: 'get',
+    params: query
+  })
+}

src/hooks/use-common.ts

@@ -17,6 +17,14 @@ export const sleepTimeout = (time) => {
   })
 }
 
+export const filterNull = (data) => {
+  Object.keys(data).forEach((key) => {
+    if (!data[key]) delete data[key]
+  })
+
+  return data
+}
+
 //深拷贝
 export function cloneDeep(value) {
   return JSON.parse(JSON.stringify(value))

src/hooks/use-permission.ts

@@ -18,20 +18,21 @@ import { useBasicStore } from '@/store/basic'
 export function filterAsyncRouter(data) {
   const basicStore = useBasicStore()
   const fileAfterRouter = filterAsyncRouterByReq(data)
-  console.log('fileAfterRouter', fileAfterRouter)
   fileAfterRouter.forEach((route) => router.addRoute(route))
   basicStore.setFilterAsyncRoutes(fileAfterRouter)
 }
 
 import ParentView from '@/components/ParentView/index.vue'
 import InnerLink from '@/components/InnerLink/index.vue'
+import { filterNull } from '@/hooks/use-common'
 // @ts-ignore
 const modules = import.meta.glob('../views/**/**.vue')
 export const filterAsyncRouterByReq = (asyncRouterMap) => {
   return asyncRouterMap.filter((route) => {
     // if (type && route.children) {
     //   route.children = filterChildren(route.children)
     // }
+    console.log(route)
     if (route.component) {
       // Layout ParentView 组件特殊处理
       if (route.component === 'Layout') {
@@ -50,12 +51,15 @@ export const filterAsyncRouterByReq = (asyncRouterMap) => {
       delete route['children']
       delete route['redirect']
     }
-    route.name = route.routeName
-    if (route.metaExtra) route.meta = Object.assign(route.meta, JSON.parse(JSON.parse(route.metaExtra)))
+    if (route.routeName) {
+      route.name = route.routeName
+    }
+    if (route.metaExtra && JSON.parse(route.metaExtra) !== '{}') {
+      route.meta = Object.assign(route.meta, JSON.parse(JSON.parse(route.metaExtra)))
+    }
     return true
   })
 }
-
 // const filterChildren = (childrenMap, lastRouter = false) => {
 //   let children: any = []
 //   childrenMap.forEach((el) => {

src/router/index.ts

@@ -1,6 +1,11 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import Layout from '@/layout/index.vue'
-
+/* Router Modules */
+import charts from './modules/charts'
+import guid from './modules/guid'
+import excel from './modules/excel'
+import directive from './modules/directive'
+import table from './modules/table'
 export const constantRoutes = [
   {
     path: '/redirect',
@@ -28,6 +33,7 @@ export const constantRoutes = [
     component: () => import('@/views/error-page/401.vue'),
     hidden: true
   }
+
   // {
   //   path: '/',
   //   component: Layout,
@@ -41,7 +47,13 @@ export const constantRoutes = [
   //       meta: { title: 'Dashboard', elSvgIcon: 'Fold', affix: true }
   //     }
   //   ]
-  // }
+  // },
+  //
+  // guid,
+  // charts,
+  // excel,
+  // directive,
+  // table
 
   // {
   //   path: '/system1',

src/views/charts/components/Keyboard.vue

@@ -0,0 +1,158 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: 'chart'
+  },
+  id: {
+    type: String,
+    default: 'chart'
+  },
+  width: {
+    type: String,
+    default: '200px'
+  },
+  height: {
+    type: String,
+    default: '200px'
+  }
+})
+const state = reactive({
+  chart: null
+})
+onMounted(() => {
+  initChart()
+})
+
+onBeforeUnmount(() => {
+  if (!state.chart) {
+    return
+  }
+  state.chart.dispose()
+  state.chart = null
+})
+
+const initChart = () => {
+  // eslint-disable-next-line unicorn/prefer-query-selector
+  state.chart = echarts.init(document.getElementById(props.id))
+  const xAxisData = []
+  const data = []
+  const data2 = []
+  for (let i = 0; i < 50; i++) {
+    xAxisData.push(i)
+    data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+    data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
+  }
+  state.chart.setOption({
+    backgroundColor: '#08263a',
+    grid: {
+      left: '5%',
+      right: '5%'
+    },
+    xAxis: [
+      {
+        show: false,
+        data: xAxisData
+      },
+      {
+        show: false,
+        data: xAxisData
+      }
+    ],
+    visualMap: {
+      show: false,
+      min: 0,
+      max: 50,
+      dimension: 0,
+      inRange: {
+        color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+      }
+    },
+    yAxis: {
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#4a657a'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#08263f'
+        }
+      },
+      axisTick: {
+        show: false
+      }
+    },
+    series: [
+      {
+        name: 'back',
+        type: 'bar',
+        data: data2,
+        z: 1,
+        itemStyle: {
+          normal: {
+            opacity: 0.4,
+            barBorderRadius: 5,
+            shadowBlur: 3,
+            shadowColor: '#111'
+          }
+        }
+      },
+      {
+        name: 'Simulate Shadow',
+        type: 'line',
+        data,
+        z: 2,
+        showSymbol: false,
+        animationDelay: 0,
+        animationEasing: 'linear',
+        animationDuration: 1200,
+        lineStyle: {
+          normal: {
+            color: 'transparent'
+          }
+        },
+        areaStyle: {
+          normal: {
+            color: '#08263a',
+            shadowBlur: 50,
+            shadowColor: '#000'
+          }
+        }
+      },
+      {
+        name: 'front',
+        type: 'bar',
+        data,
+        xAxisIndex: 1,
+        z: 3,
+        itemStyle: {
+          normal: {
+            barBorderRadius: 5
+          }
+        }
+      }
+    ],
+    animationEasing: 'elasticOut',
+    animationEasingUpdate: 'elasticOut',
+    animationDelay(idx) {
+      return idx * 20
+    },
+    animationDelayUpdate(idx) {
+      return idx * 20
+    }
+  })
+}
+</script>
+
+<style scoped lang="scss"></style>