4 years ago · 1adaff0afa
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/README.md
+++ b/README.md
@@ -1,3 +1,24 @@
 
				 # working-hours-platform
			
 
				 
			
 
				-禅道工时统计工具
			
 
				+## Project setup
			
 
				+```
			
 
				+npm install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+npm run serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+### Lints and fixes files
			
 
				+```
			
 
				+npm run lint
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,45 @@
 
				+{
			
 
				+  "name": "working-hours-platform",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "axios": "^0.21.1",
			
 
				+    "bootstrap": "^4.6.0",
			
 
				+    "bootstrap-vue": "^2.21.2",
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "vue": "^2.6.12"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.5.0",
			
 
				+    "@vue/cli-plugin-eslint": "~4.5.0",
			
 
				+    "@vue/cli-service": "~4.5.0",
			
 
				+    "babel-eslint": "^10.1.0",
			
 
				+    "eslint": "^6.7.2",
			
 
				+    "eslint-plugin-vue": "^6.2.2",
			
 
				+    "vue-template-compiler": "^2.6.11"
			
 
				+  },
			
 
				+  "eslintConfig": {
			
 
				+    "root": true,
			
 
				+    "env": {
			
 
				+      "node": true
			
 
				+    },
			
 
				+    "extends": [
			
 
				+      "plugin:vue/essential",
			
 
				+      "eslint:recommended"
			
 
				+    ],
			
 
				+    "parserOptions": {
			
 
				+      "parser": "babel-eslint"
			
 
				+    },
			
 
				+    "rules": {}
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not dead"
			
 
				+  ]
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,26 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <WorkingHours/>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import WorkingHours from './components/WorkingHours.vue'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'App',
			
 
				+  components: {
			
 
				+    WorkingHours
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+#app {
			
 
				+  font-family: Avenir, Helvetica, Arial, sans-serif;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+  
			
 
				+  
			
 
				+}
			
 
				+</style>
			
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/DepartmentCollected.vue
+++ b/src/components/DepartmentCollected.vue
@@ -0,0 +1,25 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <b-navbar type="light" variant="faded">
			
 
				+      <b-nav-form>
			
 
				+        <b-form-input class="mr-sm-2" placeholder="Search"></b-form-input>
			
 
				+        <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
			
 
				+      </b-nav-form>
			
 
				+    </b-navbar>
			
 
				+    DepartmentCollected
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'DepartmentCollected',
			
 
				+  props: {
			
 
				+    
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+<style scoped>
			
 
				+  
			
 
				+</style>
			
--- a/src/components/DepartmentDetails.vue
+++ b/src/components/DepartmentDetails.vue
@@ -0,0 +1,24 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <b-navbar type="light" variant="faded">
			
 
				+      <b-nav-form>
			
 
				+        <b-form-input class="mr-sm-2" placeholder="Search"></b-form-input>
			
 
				+        <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
			
 
				+      </b-nav-form>
			
 
				+    </b-navbar>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'DepartmentDetails',
			
 
				+  props: {
			
 
				+    
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+<style scoped>
			
 
				+  
			
 
				+</style>
			
--- a/src/components/Finance.vue
+++ b/src/components/Finance.vue
@@ -0,0 +1,25 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <b-navbar type="light" variant="faded">
			
 
				+      <b-nav-form>
			
 
				+        <b-form-input class="mr-sm-2" placeholder="Search"></b-form-input>
			
 
				+        <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
			
 
				+      </b-nav-form>
			
 
				+    </b-navbar>
			
 
				+    Finance
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'Finance',
			
 
				+  props: {
			
 
				+    
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+<style scoped>
			
 
				+  
			
 
				+</style>
			
--- a/src/components/PersonalCollected.vue
+++ b/src/components/PersonalCollected.vue
@@ -0,0 +1,42 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <b-navbar type="light" variant="faded" class="my-1">
			
 
				+      <b-nav-form>
			
 
				+
			
 
				+        <!-- <label for="input-month">月份:</label> -->
			
 
				+        <b-input-group id="input-month" class="">
			
 
				+          <b-input-group-prepend is-text>
			
 
				+            <b-icon icon="calendar3"></b-icon>
			
 
				+          </b-input-group-prepend>
			
 
				+          <b-form-input class="mr-sm-2" placeholder="选择月份"></b-form-input>
			
 
				+        </b-input-group>
			
 
				+
			
 
				+        <!-- <label for="input-name">姓名:</label> -->
			
 
				+        <b-input-group id="input-name" class="">
			
 
				+          <b-input-group-prepend is-text>
			
 
				+            <b-icon icon="person-square"></b-icon>
			
 
				+          </b-input-group-prepend>
			
 
				+          <b-form-input class="mr-sm-2" placeholder="请输入姓名"></b-form-input>
			
 
				+        </b-input-group>
			
 
				+
			
 
				+        <b-button variant="primary" class="mx-1">查询</b-button>
			
 
				+        <b-button variant="primary" class="mx-1">导出</b-button>
			
 
				+      </b-nav-form>
			
 
				+    </b-navbar>
			
 
				+    PersonalCollected
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'PersonalCollected',
			
 
				+  props: {
			
 
				+    
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+<style scoped>
			
 
				+  
			
 
				+</style>
			
--- a/src/components/PersonalDetails.vue
+++ b/src/components/PersonalDetails.vue
@@ -0,0 +1,24 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <b-navbar type="light" variant="faded">
			
 
				+      <b-nav-form>
			
 
				+        <b-form-input class="mr-sm-2" placeholder="Search"></b-form-input>
			
 
				+        <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
			
 
				+      </b-nav-form>
			
 
				+    </b-navbar>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'PersonalDetails',
			
 
				+  props: {
			
 
				+    
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+<style scoped>
			
 
				+  
			
 
				+</style>
			
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,61 @@
 
				+<template>
			
 
				+  <div class="accordion" role="tablist">
			
 
				+    
			
 
				+      <b-card-header header-tag="header" class="p-1" role="tab">
			
 
				+        <button v-b-toggle.accordion-1>个人使用</button>
			
 
				+      </b-card-header>
			
 
				+      <b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
			
 
				+        <button class="button-sub" @click="setContent(1)">个人简要统计</button>
			
 
				+        <button class="button-sub" @click="setContent(2)">个人详情统计</button>
			
 
				+      </b-collapse>
			
 
				+    
			
 
				+      <b-card-header header-tag="header" class="p-1" role="tab">
			
 
				+        <button v-b-toggle.accordion-2>部门使用</button>
			
 
				+      </b-card-header>
			
 
				+      <b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
			
 
				+        <button class="button-sub" @click="setContent(3)">部门简要统计</button>
			
 
				+        <button class="button-sub" @click="setContent(4)">部门详情统计</button>
			
 
				+      </b-collapse>
			
 
				+    
			
 
				+      <b-card-header header-tag="header" class="p-1" role="tab">
			
 
				+        <button v-b-toggle.accordion-3 @click="setContent(5)">财务使用</button>
			
 
				+      </b-card-header>
			
 
				+      
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'Sidebar',
			
 
				+  props: {
			
 
				+    
			
 
				+  },
			
 
				+  methods: {
			
 
				+    setContent(content) {
			
 
				+      this.$emit('set-content', content);
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+<style scoped>
			
 
				+  * {
			
 
				+    color: white;
			
 
				+  }
			
 
				+  button {
			
 
				+    width:100%;
			
 
				+    height: 45px;
			
 
				+    background-color:#304156;
			
 
				+    border: none;
			
 
				+    text-align: left;
			
 
				+  }
			
 
				+  .button-sub {
			
 
				+    background-color: #1f2d3d;
			
 
				+  }
			
 
				+  
			
 
				+  .card-header {
			
 
				+    border: none;
			
 
				+    background-color:#304156;
			
 
				+  }
			
 
				+</style>
			
--- a/src/components/WorkingHours.vue
+++ b/src/components/WorkingHours.vue
@@ -0,0 +1,108 @@
 
				+<template>
			
 
				+  <div class="main">
			
 
				+    <div class="topbar">
			
 
				+      <div class="topbar-left"><b>工时统计</b></div>
			
 
				+      <div class="topbar-right"><b>个人简要统计</b></div>
			
 
				+    </div>
			
 
				+    <div class="sidebar">
			
 
				+      <Sidebar @set-content="setContent"></Sidebar>
			
 
				+    </div>
			
 
				+    <div class="content">
			
 
				+      <PersonalCollected v-if="content === 1"></PersonalCollected>
			
 
				+      <PersonalDetails v-if="content === 2"></PersonalDetails>
			
 
				+      <DepartmentCollected v-if="content === 3"></DepartmentCollected>
			
 
				+      <DepartmentDetails v-if="content === 4"></DepartmentDetails>
			
 
				+      <Finance v-if="content === 5"></Finance>
			
 
				+
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import Sidebar from './Sidebar.vue';
			
 
				+import PersonalCollected from './PersonalCollected.vue';
			
 
				+import PersonalDetails from './PersonalDetails.vue';
			
 
				+import DepartmentCollected from './DepartmentCollected.vue';
			
 
				+import DepartmentDetails from './DepartmentDetails.vue';
			
 
				+import Finance from './Finance.vue';
			
 
				+
			
 
				+export default {
			
 
				+  name: 'WorkingHours',
			
 
				+  components: {
			
 
				+    Sidebar,
			
 
				+    PersonalCollected,
			
 
				+    PersonalDetails,
			
 
				+    DepartmentCollected,
			
 
				+    DepartmentDetails,
			
 
				+    Finance
			
 
				+  },
			
 
				+  props: {
			
 
				+    
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      content: 3,
			
 
				+    };
			
 
				+  },
			
 
				+  methods: {
			
 
				+    setContent(c) {
			
 
				+      this.content = c;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+<style scoped>
			
 
				+  .main {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+  }
			
 
				+  .topbar {
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    width: 100%;
			
 
				+    height: 7%;
			
 
				+  }
			
 
				+  .topbar-left {
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    width: 12%;
			
 
				+    height: 100%;
			
 
				+    color: white;
			
 
				+    font-size: 1.2em;
			
 
				+    background-color:#304156;
			
 
				+    padding: 16px 16px;
			
 
				+    border-bottom: 2px solid white;
			
 
				+    
			
 
				+  }
			
 
				+  .topbar-right {
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 12%;
			
 
				+    width: 88%;
			
 
				+    height: 100%;
			
 
				+    font-size: 1.2em;
			
 
				+    padding: 16px 16px;
			
 
				+    border-bottom: 2px solid lightgrey;
			
 
				+  }
			
 
				+  .sidebar {
			
 
				+    position: absolute;
			
 
				+    top: 7%;
			
 
				+    left: 0;
			
 
				+    width: 12%;
			
 
				+    height: 93%;
			
 
				+
			
 
				+    background-color:#304156;
			
 
				+  }
			
 
				+  .content {
			
 
				+    position: absolute;
			
 
				+    top: 7%;
			
 
				+    left: 12%;
			
 
				+    width: 88%;
			
 
				+    height: 93%;
			
 
				+  }
			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,19 @@
 
				+import Vue from 'vue'
			
 
				+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
			
 
				+import App from './App.vue'
			
 
				+import Axios from 'axios';
			
 
				+
			
 
				+import 'bootstrap/dist/css/bootstrap.css'
			
 
				+import 'bootstrap-vue/dist/bootstrap-vue.css'
			
 
				+
			
 
				+Vue.use(BootstrapVue)
			
 
				+Vue.use(IconsPlugin)
			
 
				+
			
 
				+Vue.prototype.$bus = new Vue();
			
 
				+Vue.prototype.$axios = Axios;
			
 
				+
			
 
				+Vue.config.productionTip = false
			
 
				+
			
 
				+new Vue({
			
 
				+  render: h => h(App),
			
 
				+}).$mount('#app')