欢迎页dashboard

杨泽宇
1 parent 7b23d907
Showing 10 changed files with 131 additions and 21 deletions
src/assets/logo.png
src/layout/enter.vue
src/layout/header.vue
src/main.ts
src/router/index.ts
src/style/menu.scss
src/style/reset.scss
src/utils/tool.ts
src/views/dashboard/index.vue
src/views/tengxi/about.vue
@@ -4,7 +4,7 @@
  * @module Enter
  * @author Tengxi
  */
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import Header from "./header.vue";
 import Menu from "./menu.vue";
 import * as store from "@/pinia/index";
@@ -22,7 +22,7 @@ let key = ref(&quot;/&quot;)
     </div>
     <!-- TIP 左侧菜单结束 -->
     <!-- TIP 右侧具体页面内容 -->
-    <div class="page-container" :class="store.family.appStore().isCollapse? 'thinMenu': 'fatMenu'">
+    <div :class="store.family.appStore().isCollapse? 'thinMenu': 'fatMenu'">
       <router-view v-slot="{ Component, route }">
         <transition :name="route.meta.transitionName">
           <keep-alive v-if="route.meta.keepAlive">
@@ -4,7 +4,7 @@
  * @module Header
  * @author Tengxi
  */
-import { getCurrentInstance, computed } from "vue";
+import { getCurrentInstance } from "vue";
 import * as store from "@/pinia/index";
 import { Fold, Expand } from "@element-plus/icons-vue";
 import styles from '@/style/global.module.scss';
@@ -53,7 +53,7 @@ const toggleMenu = () =&gt; {
   height: 60px;
   line-height: 60px;
   background-color: white;
-  box-shadow: 0 5px 10px -5px #888888;
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
   .left-logo {
     float: left;
     margin-top: 10px;
@@ -29,7 +29,7 @@ console.log(&#39;current api url: &#39;, import.meta.env.VITE_BASE_URL)
 const app = createApp(App)
-// TIP 全局静态变量挂载
+// TIP 全局静态变量、方法挂载
 for(const i in globalVariable) {
   app.config.globalProperties[i] = globalVariable[i]
 }
 import { createRouter, createWebHashHistory } from 'vue-router'
 import Layout from '@/layout/enter.vue'
 const routes: Array<any> = [
-  { path: '/', redirect: { name: 'Home' } },
+  { path: '/', redirect: { path: '/dashboard' } },
   {
     path: '/home',
     name: 'Home',
@@ -21,6 +21,18 @@ const routes: Array&lt;any&gt; = [
     // component: () => import(/* webpackChunkName: "About" */ '@/views/tengxi/about.vue')
   },
   {
+    path: '/',
+    component: Layout,
+    name: 'Dashboard',
+    children: [{
+      path: 'Dashboard',
+      name: 'Dashboard',
+      component: () => import(/* webpackChunkName: "About" */ '@/views/dashboard/index.vue'),
+      meta: { title: '欢迎访问' }
+    }]
+    // component: () => import(/* webpackChunkName: "About" */ '@/views/tengxi/about.vue')
+  },
+  {
     path: '/login',
     name: 'Login',
     component: () => import(/* webpackChunkName: "About" */ '@/views/user/login.vue')
@@ -7,10 +7,10 @@
     left: 0; 
     top: 0;
   }
-  .page-container {
-    padding: 20px;
-    margin-left: $sideBarWidthThin;
-  }
+}
+
+.el-menu-vertical-demo {
+  min-height: calc(100vh - 60px);
 }
 .fatMenu {
@@ -65,3 +65,7 @@ div:focus {
   max-width: 99% !important;
   margin-top: 20px;
 }
+
+.page-container {
+  padding: 30px;
+}
@@ -130,4 +130,27 @@ export function formatTime(time, option) {
       '分'
     )
   }
+}
+
+/**
+ * @typeof {object} EnumData
+ * @property {number} value
+ * @property {string} label
+ */
+/**
+ * 表格中枚举值filter
+ * @param {number} value
+ * @param {Array.EnumData} groupData
+ * @returns {string}
+ */
+interface EnumData {
+  value: number,
+  label: string
+}
+export function globalFilters (value: number, groupData: EnumData[]) {
+  if(groupData.length && (value === 0 || !!value)) {
+    return groupData.find(item => item.value === value)['label']
+  } else {
+    return value
+  }
 }
 \ No newline at end of file
+<script setup lang="ts">
+import {ref} from 'vue'
+const title = ref(import.meta.env.VITE_APP_TITLE).value
+</script>
+
+<template>
+  <div class="dashboard-container">
+    <div class="dashboard-logo"></div>
+    <h1>欢迎访问 -- {{title}}</h1>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.dashboard {
+  &-container {
+    padding-top: 200px;
+    min-height: calc(100vh - 60px);
+    background: #f0f2f5;
+  }
+  &-logo {
+    width: 200px; 
+    height: 200px; 
+    margin: 0 auto;
+    background-color: pink; 
+    background-image: url('@/assets/logo.png');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: 0;
+  }
+}
+</style>
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive,getCurrentInstance } from "vue";
+import {globalFilters} from '@/utils/tool'
 // import {tengxiTestStore} from '@/pinia/index'
 import * as all from '@/pinia/index'
 console.log(all)
@@ -10,23 +11,50 @@ const data = reactive([
     date: "2016-05-02",
     name: "王小虎1",
     address: "上海市普陀区金沙江路 1518 弄",
+    status: 1
   },
   {
     date: "2016-05-04",
     name: "王小虎",
     address: "上海市普陀区金沙江路 1517 弄",
+    status: 2
   },
   {
     date: "2016-05-01",
     name: "王小虎",
     address: "上海市普陀区金沙江路 1519 弄",
+    status: null
   },
   {
     date: "2016-05-03",
     name: "王小虎",
     address: "上海市普陀区金沙江路 1516 弄",
+    status: 0
   },
 ]);
+
+const statusArray = [{
+  label: '启用',
+  value: 1
+}, {
+  label: '禁用',
+  value: 2
+}, {
+  label: '舍弃',
+  value: 0
+}, {
+  label: '上线',
+  value: 3
+}]
+
+// const filterStatus = (status) => {
+//   return statusArray.find(item => ~~item.value == ~~status)['label']
+// }
+
+const thisLine = (obj) => {
+  console.log(obj.status)
+}
+
 // const addAge = () => {
 //   console.log('add one age')
 //   console.log(store.age)
@@ -39,15 +67,27 @@ const data = reactive([
 </script>
 <template>
-  <!-- <p class="tengxi">Tengxi About Page</p>
-  <el-button type="primary">成功</el-button>
-  <p>测试pinia数据：{{all.family.dataStore().data1}}</p> -->
-  <!-- <el-button @click="addAge">长一岁</el-button>
-  <el-button @click="initPinia">初始化pinia</el-button> -->
+  <div class="page-container">
+    <!-- <p class="tengxi">Tengxi About Page</p>
+    <el-button type="primary">成功</el-button>
+    <p>测试pinia数据：{{all.family.dataStore().data1}}</p> -->
+    <!-- <el-button @click="addAge">长一岁</el-button>
+    <el-button @click="initPinia">初始化pinia</el-button> -->
-  <el-table :data="data" style="width: 100%">
-    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
-    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
-    <el-table-column prop="address" label="地址"> </el-table-column>
-  </el-table>
+    <el-table :data="data" style="width: 100%" border>
+      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+      <el-table-column prop="address" label="地址"> </el-table-column>
+      <el-table-column prop="status" label="状态">
+        <template #default="scope">
+          {{globalFilters(scope.row.status, statusArray)}}
+        </template>
+      </el-table-column>
+      <el-table-column label="按钮">
+        <template #default="scope">
+        <el-button type="primary" @click="thisLine(scope.row)">哈哈</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>