科研探索

src/api/admin.js

@@ -131,9 +131,18 @@ export function userLogList(data) {
 }
 
 // 获取科室集合
-export function userGroupList(data) {
+export function getDeportmentList(data) {
   return request({
-    url: '/user/userGroupList',
+    url: '/user/getDeportmentList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取搜索日志数据
+export function userSearchLog(data) {
+  return request({
+    url: '/user/userSearchLog',
     method: 'post',
     data: data
   })

src/api/excel.js

@@ -0,0 +1,11 @@
+import request_blob from '@/utils/request_blob'
+
+// 搜索日志数据下载
+export function userSearchLogExport(data) {
+  return request_blob({
+    url: `/user/userSearchLogExport`,
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}

src/utils/request_blob.js

@@ -0,0 +1,78 @@
+import axios from 'axios'
+import { Message } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+// create an axios instance
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API,
+  transformRequest: [function(data) {
+    const form = new FormData()
+    if (!data) {
+      return form
+    }
+    Object.keys(data).forEach(k => {
+      const v = (data[k] !== 0 && !data[k] || data[k] === null ? '' : data[k])
+      if (Array.isArray(v) && v !== null) {
+        Object.keys(v).forEach(key => {
+          const vv = (!v[key] || v[key] === null ? '' : v[key])
+          form.append(`${k}[${key}]`, vv)
+        })
+      } else {
+        form.append(k, v)
+      }
+    })
+    return form
+  }],
+  headers: {
+    'Content-Type': 'application/x-www-form-urlencoded'
+  }
+})
+
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // do something before request is sent
+
+    if (getToken()) {
+      // console.log(config, getToken())
+      // let each request carry token
+      // ['X-Token'] is a custom headers key
+      // please modify it according to the actual situation
+      config.headers['token'] = getToken()
+    }
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+  */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  response => {
+    return response
+  },
+  error => {
+    console.log('err' + error) // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/views/user/kyts/components/SearchBox.vue

@@ -1,20 +1,27 @@
 <template>
   <div class="app-container">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+    <el-form :inline="true" :model="data" class="demo-form-inline">
       <el-form-item label="账号">
-        <el-input v-model="formInline.user" placeholder="请输入" />
+        <el-input v-model="data.name" placeholder="请输入" />
       </el-form-item>
       <el-form-item label="科室">
-        <el-select v-model="formInline.region" placeholder="请选择">
-          <el-option label="区域一" value="shanghai" />
-          <el-option label="区域二" value="beijing" />
+        <el-select v-model="data.dep_id" filterable clearable placeholder="请选择">
+          <el-option v-for="item of deportments" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
       <el-form-item label="搜索条件">
-        <el-input v-model="formInline.user" placeholder="请输入" />
+        <el-input v-model="data.user" placeholder="请输入" />
       </el-form-item>
       <el-form-item label="查询时间">
-        <el-input v-model="formInline.user" placeholder="请输入" />
+        <el-date-picker
+          v-model="data.time"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          value-format="yyyyMMdd"
+        />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
@@ -24,27 +31,51 @@
 </template>
 
 <script>
-import { userGroupList } from '@/api/admin'
+import { getDeportmentList } from '@/api/admin'
 export default {
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {
+          name: '',
+          dep_id: '',
+          time: []
+        }
+      }
+    }
+  },
   data() {
     return {
-      formInline: {
-        user: '',
-        region: ''
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now()
+        }
       },
-      groups: []
+      deportments: []
     }
   },
   created() {
-    this.getGroups()
+    this.getDeportmentList()
   },
   methods: {
     onSubmit() {
-      console.log('submit!')
+      console.log(this.data, 'this.data')
+      this.$emit('search')
     },
-    getGroups() {
-      userGroupList().then(res => {
+    getDeportmentList() {
+      getDeportmentList().then(res => {
         console.log(res)
+        const { p } = res
+        if (Object.keys(p.list).length) {
+          for (const key in p.list) {
+            this.deportments.push({
+              id: key,
+              name: p.list[key]
+            })
+          }
+          console.log(this.deportments, 'this.deportments')
+        }
       }).catch(error => {
         console.log(error)
       })

src/views/user/kyts/components/TableBox.vue

@@ -1,39 +1,65 @@
 <template>
   <div class="app-container">
+    <div class="btn-box">
+      <el-button type="primary" icon="el-icon-download" style="float: right; margin-bottom: 15px;" @click="onExcelDownload">导出</el-button>
+    </div>
     <el-table
-      :data="tableData"
+      v-loading="loading"
+      :data="data"
       style="width: 100%"
     >
       <el-table-column type="index" label="#" width="80" />
       <el-table-column
-        prop="date"
+        prop="username"
         label="账号"
         width="180"
       />
       <el-table-column
-        prop="name"
+        prop="dep_name"
         label="科室"
         width="180"
       />
       <el-table-column
-        prop="address"
+        prop="content"
         label="搜索条件"
       />
       <el-table-column
-        prop="name"
+        prop="created_at"
         label="查询时间"
         width="180"
+        align="right"
       />
     </el-table>
   </div>
 </template>
 
 <script>
-export default {
 
+export default {
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    loading: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    }
+  },
+  methods: {
+    onExcelDownload() {
+      this.$emit('download')
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.btn-box {
+  overflow: hidden;
+}
 </style>

src/views/user/kyts/index.vue

@@ -1,13 +1,23 @@
 <template>
   <div>
-    <SearchBoxVue />
-    <TableBoxVue style="margin-top: -40px;" />
+    <SearchBoxVue :data="searchData" @search="handleSearch" />
+    <TableBoxVue :loading="loading" :data="tableData" style="margin-top: -40px;" @download="handleDownLoad" />
+    <pagination
+      :auto-scroll="false"
+      :total="paginationData.total"
+      :page="paginationData.page"
+      :limit="paginationData.limit"
+      @pagination="handlePagination"
+    />
   </div>
 </template>
 
 <script>
 import SearchBoxVue from './components/SearchBox.vue'
 import TableBoxVue from './components/TableBox.vue'
+import { userSearchLogExport } from '@/api/excel'
+import { userSearchLog } from '@/api/admin'
+
 export default {
   components: {
     SearchBoxVue,
@@ -15,23 +25,86 @@ export default {
   },
   data() {
     return {
-      tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄'
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
-      }]
+      loading: false,
+      searchData: {
+        name: '',
+        dep_id: '',
+        time: []
+      },
+      tableData: [],
+      paginationData: {
+        total: 0,
+        page: 1,
+        limit: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      const { name, dep_id, time } = this.searchData
+      const { page, limit } = this.paginationData
+      const params = {
+        name,
+        dep_id,
+        page,
+        limit
+      }
+      if (time && time.length) {
+        params.start_time = time[0]
+        params.end_time = time[1]
+      }
+      this.loading = true
+      userSearchLog(params).then(res => {
+        const { p } = res
+        if (p.list.length) {
+          this.paginationData.total = p.count
+          this.tableData = p.list
+        }
+      }).catch(error => {
+        console.log(error)
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    handlePagination(param) {
+      this.paginationData.page = param.page
+      this.paginationData.limit = param.limit
+      this.getList()
+    },
+    handleSearch() {
+      this.paginationData.page = 1
+      this.getList()
+    },
+    handleDownLoad() {
+      const { name, dep_id, time } = this.searchData
+      const params = {
+        name,
+        dep_id
+      }
+      if (time && time.length) {
+        params.start_time = time[0]
+        params.end_time = time[1]
+      }
+      userSearchLogExport(params).then(res => {
+        const content = res.data // 后台返回二进制数据
+        const blob = new Blob([content])
+        const fileName = `${name}.csv`
+        if ('download' in document.createElement('a')) { // 非IE下载
+          const elink = document.createElement('a')
+          elink.download = fileName
+          elink.style.display = 'none'
+          elink.href = URL.createObjectURL(blob)
+          document.body.appendChild(elink)
+          elink.click()
+          URL.revokeObjectURL(elink.href) // 释放URL 对象
+          document.body.removeChild(elink)
+        } else { // IE10+下载
+          navigator.msSaveBlob(blob, fileName)
+        }
+      })
     }
   }
 }