PersonalCollected done

src/components/PersonalCollected.vue

@@ -1,29 +1,61 @@
 <template>
   <div>
-    <b-navbar type="light" variant="faded" class="my-1">
+    <b-navbar type="light" variant="faded" class="my-2">
       <b-nav-form>
 
         <!-- <label for="input-month">月份:</label> -->
-        <b-input-group id="input-month" class="">
+        <b-input-group 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-form-input id="input-month" class="mr-sm-2" placeholder="选择月份" v-model="date" @click="openCalendar"></b-form-input>
         </b-input-group>
 
+        <b-popover target="input-month" ref="calendar" placement="bottom">
+          <div class="year-select my-1">
+            <b-button variant="light" size="sm" class="year-minus" @click="yearDecrease"><b-icon icon="chevron-double-left"></b-icon></b-button>
+            <div class="year text-center">{{ year }} 年</div>
+            <b-button variant="light" size="sm" class="year-plus" @click="yearIncrease"><b-icon icon="chevron-double-right"></b-icon></b-button>
+          </div>
+          <div>
+            <table id="months" class="months">
+              <tr><td @click="setMonth(1)">一月</td><td @click="setMonth(2)">二月</td><td @click="setMonth(3)">三月</td><td @click="setMonth(4)">四月</td></tr>
+              <tr><td @click="setMonth(5)">五月</td><td @click="setMonth(6)">六月</td><td @click="setMonth(7)">七月</td><td @click="setMonth(8)">八月</td></tr>
+              <tr><td @click="setMonth(9)">九月</td><td @click="setMonth(10)">十月</td><td @click="setMonth(11)">十一月</td><td @click="setMonth(12)">十二月</td></tr>
+            </table>
+          </div>
+        </b-popover>
+
+
+
+
+
+
+
+
         <!-- <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-form-input @input="selectEmployee" list="name" class="mr-sm-2" placeholder="请输入姓名"></b-form-input>
+
+          <datalist id="name">
+            <option v-for="employee in employeeList" :key="employee.id" :value="employee.account+' - '+employee.realname"></option>
+          </datalist>
+
         </b-input-group>
 
-        <b-button variant="primary" class="mx-1">查询</b-button>
+        <b-button variant="primary" class="mx-1" @click="showData">查询</b-button>
         <b-button variant="primary" class="mx-1">导出</b-button>
       </b-nav-form>
     </b-navbar>
-    PersonalCollected
+    <b-card class="content-data mx-3 text-center">
+      <span class="no-content" v-if="!dataAvailable">请在上方输入搜索条件查询</span>
+      <b-table class="datatable" striped hover :items="dataTable" v-if="dataAvailable"></b-table>
+    </b-card>
+    
   </div>
 </template>
 
@@ -32,11 +64,125 @@ export default {
   name: 'PersonalCollected',
   props: {
     
+  },
+  data() {
+    return {
+      year: undefined,
+      month: undefined,
+      date: '',
+      userAccount:'',
+      employeeList: [],
+      dataAvailable: false,
+      dataTable: []
+    };
+  },
+  computed: {
+    
+  },
+  created() {
+    this.$http.get('/api/personal/getUserList')
+      .then((result) => {
+        this.employeeList = result.data.data;
+        console.log(this.employeeList)
+      });
+  },
+  mounted() {
+    this.year = new Date().getFullYear();
+    
+    
+  },
+  methods: {
+    reset() {
+      this.dataAvailable = false;
+      this.dataTable = [];
+    },
+    onItemClick(item){
+      console.log(item)
+    },
+    openCalendar() {
+      this.$refs.calendar.$emit('open');
+      this.reset();
+    },
+    clamp(value, min, max) {
+      if(value < min) { return min; }
+      else if(value > max) { return max; }
+      else { return value; }
+    },
+    yearDecrease() {
+      this.year = this.clamp(this.year - 1, 2000, 3000);
+    },
+    yearIncrease() {
+      this.year = this.clamp(this.year + 1, 2000, 3000);
+    },
+    setMonth(m) {
+      this.month = m;
+      this.date = m + '/' + this.year;
+      this.$refs.calendar.$emit('close');
+    },
+    selectEmployee(e) {
+      this.userAccount = e.split(' - ')[0];
+      this.reset();
+    },
+    showData() {
+      
+      this.$http.post('/api/personal/workByMonthDetail', {
+        "account": this.userAccount,
+        "date": (this.year + '-' + this.month + '-' + '01'),
+        "pageNum": 0,
+        "pageSize": 500,
+        "searchKey": ""
+      }).then((result) => {
+        console.log(result.data.data.list);
+        let data = result.data.data.list;
+        data.forEach(entry => {
+          this.dataTable.push({
+            '日期': entry.date,
+            '工时': entry.consumed,
+            '消耗时间（单位：小时）': entry.deptId,
+            '部门名称': entry.account,
+            '账号': entry.account
+          });
+        });
+        this.dataAvailable = true;
+      });
+
+    }
   }
 }
+
+
 </script>
 
 
 <style scoped>
+  .content-data {
+    position: absolute;
+    height: 90%;
+    width: 98%;
+    overflow-y: scroll;
+  }
+  .year-select {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .year, .year-minus, .year-plus {
+    display: inline-block;
+  }
+  .year {
+    font-size: 1.3em;
+  }
+  .months > tr > td {
+    width: 80px;
+    height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  .months > tr > td:focus {
+    color: blue;
+  }
+  .datatable {
+    overflow-y: scroll;
+  }
   
 </style>

src/components/WorkingHours.vue

@@ -42,7 +42,7 @@ export default {
   },
   data() {
     return {
-      content: 3,
+      content: 1,
     };
   },
   methods: {

src/main.js

@@ -1,7 +1,7 @@
 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'
@@ -10,7 +10,9 @@ Vue.use(BootstrapVue)
 Vue.use(IconsPlugin)
 
 Vue.prototype.$bus = new Vue();
-Vue.prototype.$axios = Axios;
+let {axios} = require('./utils/http.js')
+
+Vue.prototype.$http = axios
 
 Vue.config.productionTip = false
 

src/utils/http.js

@@ -0,0 +1,12 @@
+import axios from 'axios'
+
+
+
+
+
+axios.defaults.baseURL = 'http://192.168.0.135:8085'
+axios.defaults.headers['X-Requested-with'] = 'XMLHttpRequest'
+
+
+
+export { axios }