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>