feat(workbench): add workbench page

vbenjs · Oct 11, 2020 · 1cd75fc · 1cd75fc
1 parent 21d0ed9
commit 1cd75fc
Show file tree

Hide file tree

Showing 10 changed files with 609 additions and 3 deletions.
diff --git a/src/hooks/web/useApexCharts.ts b/src/hooks/web/useApexCharts.ts
@@ -30,6 +30,7 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
       return;
     }
     chartInstanceRef.value = null;
+    chartInstance.destroy();
   });
   return {
     setOptions,

diff --git a/src/router/menus/modules/demo/dashboard.ts b/src/router/menus/modules/demo/dashboard.ts
@@ -5,9 +5,13 @@ const menu: MenuModule = {
     name: 'Dashboard',
     path: '/dashboard',
     children: [
+      {
+        path: '/workbench',
+        name: '工作台',
+      },
       {
         path: '/welcome',
-        name: '欢迎页',
+        name: '首页',
       },
     ],
   },

diff --git a/src/router/routes/modules/demo/dashboard.ts b/src/router/routes/modules/demo/dashboard.ts
@@ -7,7 +7,7 @@ export default {
     path: '/dashboard',
     name: 'Dashboard',
     component: PAGE_LAYOUT_COMPONENT,
-    redirect: '/dashboard/welcome',
+    redirect: '/dashboard/workbench',
     meta: {
       icon: 'ant-design:home-outlined',
       title: 'Dashboard',
@@ -20,7 +20,15 @@ export default {
       name: 'Welcome',
       component: () => import('/@/views/dashboard/welcome/index.vue'),
       meta: {
-        title: '欢迎页',
+        title: '首页',
+      },
+    },
+    {
+      path: '/workbench',
+      name: 'Workbench',
+      component: () => import('/@/views/dashboard/workbench/index.vue'),
+      meta: {
+        title: '工作台',
         affix: true,
       },
     },

diff --git a/src/views/dashboard/workbench/components/NewsList.vue b/src/views/dashboard/workbench/components/NewsList.vue
@@ -0,0 +1,97 @@
+<template>
+  <CollapseContainer class="news-list" title="动态" :canExpan="false">
+    <ScrollContainer>
+      <List>
+        <template v-for="item in newList" :key="item.id">
+          <ListItem class="news-list__item">
+            <ListItemMeta>
+              <template #avatar>
+                <img src="/@/assets/images/header.jpg" class="news-list__item-avatar" />
+              </template>
+              <template #description>
+                <div class="news-list__item-desc">
+                  <div class="news-list__item-time mb-1"> {{ item.sendTime }}</div>
+                  <div class="news-list__item-title mb-1">
+                    <span class="news-list__item-light">{{ item.sender }}&nbsp;</span>申请迭代
+                    <span class="news-list__item-light">&nbsp;{{ item.title }}&nbsp;</span>发布
+                  </div>
+                  <div class="news-list__item-cnte p-2">
+                    <span class="news-list__item-cnte__title"> {{ item.cnteId }}</span>
+                    <br />
+                    Status: {{ item.cnteStas }}
+                    <br />
+                    Repository: {{ item.cnteRepo }}
+                    <br />
+                  </div>
+                </div>
+              </template>
+            </ListItemMeta>
+          </ListItem>
+        </template>
+      </List>
+    </ScrollContainer>
+  </CollapseContainer>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { List } from 'ant-design-vue';
+  import { CollapseContainer, ScrollContainer } from '/@/components/Container/index';
+
+  import { newList } from '../data';
+  export default defineComponent({
+    components: {
+      List,
+      ListItem: List.Item,
+      ListItemMeta: List.Item.Meta,
+      CollapseContainer,
+      ScrollContainer,
+    },
+    setup() {
+      return { newList };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .news-list {
+    &__item {
+      &-avatar {
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+      }
+
+      &-title {
+        font-size: 14px;
+        line-height: 22px;
+        color: #000;
+        opacity: 0.65;
+      }
+
+      &-time {
+        font-size: 14px;
+        line-height: 22px;
+        color: #000;
+        opacity: 0.45;
+      }
+
+      &-light {
+        font-size: 14px;
+        line-height: 22px;
+        color: #000;
+        opacity: 0.85;
+      }
+
+      &-cnte {
+        background: #eef3fb;
+        border-radius: 2px;
+        opacity: 0.6;
+
+        &__title {
+          font-size: 14px;
+          line-height: 22px;
+          color: #2c3a61;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/dashboard/workbench/components/ProdTotal.vue b/src/views/dashboard/workbench/components/ProdTotal.vue
@@ -0,0 +1,101 @@
+<template>
+  <Row class="prod-total">
+    <template v-for="(item, index) in wokbProd" :key="item.type">
+      <Col :xs="12" :sm="6" class="prod-total__item" :class="`prod-total__item-${index}`">
+        <div class="img" :class="`prod-total__item-${index}-img`" />
+        <div>{{ item.amount }}</div>
+        <span>{{ item.type }}</span>
+      </Col>
+    </template>
+  </Row>
+</template>
+<script lang="tsx">
+  import { defineComponent } from 'vue';
+  import { Row, Col } from 'ant-design-vue';
+
+  import { wokbProd } from '../data';
+  // import {ProdTypeEnum} from '@/api/dashboard/model/wokbModel'
+  export default defineComponent({
+    components: { Row, Col },
+    setup() {
+      return { wokbProd };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .prod-total {
+    padding: 12px 4px 12px 12px;
+    background: #fff;
+
+    &__item {
+      display: inline-block;
+      width: calc(25% - 8px);
+      padding: 20px 10px;
+      margin-right: 8px;
+      border-radius: 4px;
+
+      span {
+        font-size: 14px;
+        line-height: 28px;
+      }
+
+      div {
+        font-size: 26px;
+      }
+
+      .img {
+        float: left;
+        width: 62px;
+        height: 62px;
+      }
+
+      &-0 {
+        background: rgba(254, 97, 178, 0.1);
+
+        &-img {
+          background: url(../../../../assets/images/dashboard/wokb/datashow1.png) no-repeat;
+        }
+
+        div {
+          color: #fe61b2;
+        }
+      }
+
+      &-1 {
+        background: rgba(254, 163, 64, 0.1);
+
+        &-img {
+          background: url(../../../..//assets/images/dashboard/wokb/datashow2.png) no-repeat;
+        }
+
+        div {
+          color: #fea340;
+        }
+      }
+
+      &-2 {
+        background: rgba(172, 70, 255, 0.1);
+
+        &-img {
+          background: url(../../../..//assets/images/dashboard/wokb/datashow3.png) no-repeat;
+        }
+
+        div {
+          color: #9e55ff;
+        }
+      }
+
+      &-3 {
+        background: rgba(0, 196, 186, 0.1);
+
+        &-img {
+          background: url(../../../..//assets/images/dashboard/wokb/datashow4.png) no-repeat;
+        }
+
+        div {
+          color: #00c4ba;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/dashboard/workbench/components/ShortCuts.vue b/src/views/dashboard/workbench/components/ShortCuts.vue
@@ -0,0 +1,101 @@
+<template>
+  <CollapseContainer class="shortcuts" title="快捷入口" :canExpan="false">
+    <template #action>
+      <a-button size="small" type="link"> 新建 </a-button>
+    </template>
+    <Row>
+      <template v-for="item in shortCuts" :key="item.img">
+        <Col :span="8" class="shortcuts__item p-3">
+          <img :src="item.img" class="shortcuts__item-img mb-2" />
+          <br />
+          <span>{{ item.name }}</span>
+        </Col>
+      </template>
+
+      <Col :span="8" class="shortcuts__item p-3">
+        <span class="shortcuts__item-all mb-2">
+          <RightOutlined />
+        </span>
+        <br />
+        <span>查看全部</span>
+      </Col>
+    </Row>
+  </CollapseContainer>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Row, Col } from 'ant-design-vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+
+  import { RightOutlined } from '@ant-design/icons-vue';
+  import wokbImg1 from '/@/assets/images/dashboard/wokb/attendance.png';
+  import wokbImg2 from '/@/assets/images/dashboard/wokb/overtime.png';
+  import wokbImg3 from '/@/assets/images/dashboard/wokb/meal.png';
+  import wokbImg4 from '/@/assets/images/dashboard/wokb/leave.png';
+  import wokbImg5 from '/@/assets/images/dashboard/wokb/stamp.png';
+  import wokbImg6 from '/@/assets/images/dashboard/wokb/travel.png';
+  import wokbImg7 from '/@/assets/images/dashboard/wokb/performance.png';
+  import wokbImg8 from '/@/assets/images/dashboard/wokb/approve.png';
+  const shortCuts = [
+    {
+      img: wokbImg1,
+      name: '考勤记录',
+    },
+    {
+      img: wokbImg2,
+      name: '加班申请',
+    },
+    {
+      img: wokbImg3,
+      name: '餐补申请',
+    },
+    {
+      img: wokbImg4,
+      name: '请假',
+    },
+    {
+      img: wokbImg5,
+      name: '用章申请',
+    },
+    {
+      img: wokbImg6,
+      name: '差旅报销',
+    },
+    {
+      img: wokbImg7,
+      name: '绩效申请',
+    },
+    {
+      img: wokbImg8,
+      name: '审批',
+    },
+  ];
+  export default defineComponent({
+    components: { Row, Col, CollapseContainer, RightOutlined },
+    setup() {
+      return { shortCuts };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .shortcuts {
+    &__item {
+      text-align: center;
+
+      &-img {
+        width: 36px;
+      }
+
+      &-all {
+        display: inline-block;
+        width: 36px;
+        height: 36px;
+        line-height: 36px;
+        color: #000;
+        cursor: pointer;
+        background: lightgrey;
+        border-radius: 50%;
+      }
+    }
+  }
+</style>