fix(log): three relevant components (#422)

Author: vanoneang

.env.development

@@ -1,3 +1,3 @@
 ENV = 'development'
 
-VUE_APP_BASE_URL = 'http://face.api.talelin.com/'
+VUE_APP_BASE_URL = 'http://119.45.196.33:5000/'

babel.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable comma-dangle */
 module.exports = {
   presets: [['@vue/cli-plugin-babel/preset']],
   plugins: [

package-lock.json

@@ -18,6 +18,7 @@
     "@tinymce/tinymce-vue": "^2.0.0",
     "axios": "~0.18.0",
     "core-js": "^3.6.5",
+    "dayjs": "^1.10.4",
     "element-plus": "^1.0.1-beta.19",
     "event-source-polyfill": "^1.0.7",
     "fastscan": "^1.0.4",

package.json

@@ -9,51 +9,55 @@
       align="right"
       size="medium"
       popper-class="date-box"
-      value-format="yyyy-MM-dd HH:mm:ss"
-      :default-time="['00:00:00', '23:59:59']"
-      :picker-options="pickerOptions"
+      :default-time="defaultTime"
+      :shortcuts="shortcuts"
     >
     </el-date-picker>
   </div>
 </template>
 
 <script type="text/ecmascript-6">
+import dayjs from 'dayjs'
+
 export default {
   data() {
     return {
       value: '',
-      pickerOptions: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - (3600 * 1000 * 24 * 7))
-            picker.$emit('pick', [start, end])
-          },
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - (3600 * 1000 * 24 * 30))
-            picker.$emit('pick', [start, end])
-          },
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - (3600 * 1000 * 24 * 90))
-            picker.$emit('pick', [start, end])
-          },
-        }],
-      },
+      defaultTime: [
+        new Date(2000, 1, 1, 0, 0, 0),
+        new Date(2000, 2, 1, 23, 59, 59)
+      ],
+      shortcuts: [{
+        text: '最近一周',
+        value: (() => {
+          const end = new Date()
+          const start = new Date()
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+          return [start, end]
+        })(),
+      }, {
+        text: '最近一个月',
+        value: (() => {
+          const end = new Date()
+          const start = new Date()
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+          return [start, end]
+        })(),
+      }, {
+        text: '最近三个月',
+        value: (() => {
+          const end = new Date()
+          const start = new Date()
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+          return [start, end]
+        })(),
+      }]
+
     }
   },
   watch: {
     value(date) {
-      this.$emit('dateChange', date)
+      this.$emit('dateChange', date ? date.map(item => dayjs(item).format('YYYY-MM-DD HH:mm:ss')) : '')
     },
   },
   methods: {

src/component/base/date-picker/lin-date-picker.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="lin-search">
     <el-input size="medium" :placeholder="placeholder" clearable v-model="keyword" class="input-with-select">
-      <el-button icon="el-icon-search"></el-button>
+      <template #suffix>
+        <i class="el-input__icon el-icon-search" @click="search"></i>
+      </template>
     </el-input>
   </div>
 </template>
@@ -34,30 +36,24 @@ export default {
     clear() {
       this.keyword = ''
     },
+    search() {
+      this.$emit('query', this.keyword)
+    },
   },
 }
 </script>
 <style lang="scss" scoped>
-.lin-search >>> .el-input-group__append {
-  border-top-right-radius: 20px;
-  border-bottom-right-radius: 20px;
-  padding: 0 8px;
-  color: #ffffff;
-  border: 1px solid $theme;
-  .el-icon-search {
-    font-size: 18px;
-  }
-}
-.lin-search >>> .el-input__inner {
-  border-top-left-radius: 20px;
-  border-bottom-left-radius: 20px;
-  border-right: none;
+.lin-search /deep/ .el-input__inner {
   width: 150px;
+  border-radius: 20px;
   transition: all 0.2s linear;
 
   &:focus {
     width: 250px;
     transition: all 0.3s linear;
   }
 }
+.lin-search /deep/ .el-input__suffix {
+  cursor: pointer;
+}
 </style>

src/component/base/search/lin-search.vue

@@ -1,4 +1,3 @@
-/* eslint-disable class-methods-use-this */
 import _axios, { get } from '@/lin/plugin/axios'
 
 class Log {

src/lin/model/log.js

@@ -1,5 +1,7 @@
+import 'dayjs/locale/zh-cn'
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
+import locale from 'element-plus/lib/locale/lang/zh-cn'
 
 import '@/config/global'
 import 'lin/plugin'
@@ -22,7 +24,7 @@ const app = createApp(App)
 
 app.use(store)
 app.use(router)
-app.use(ElementPlus)
+app.use(ElementPlus, { locale })
 
 // base 组件注册
 app.component('l-icon', LIcon)
@@ -35,7 +37,5 @@ app.directive('permission', permissionDirective)
 
 app.mount('#app')
 
-app.config.devtools = true
-
 // 设置 App 实例
 window.App = app

src/main.js

@@ -1,24 +1,21 @@
-<!--
-  TODO: Vue3 mapGetters 简化用法
--->
 <template>
   <div class="log">
     <sticky-top>
       <div class="log-header">
         <div class="header-left"><p class="title">日志信息</p></div>
         <div class="header-right" v-permission="'搜索日志'">
-          <lin-search @query="onQueryChange" ref="searchKeywordDOM" />
+          <lin-search @query="onQueryChange" ref="searchKeywordDom" />
           <el-dropdown
             size="medium"
             style="margin: 0 10px;"
             @command="handleCommand"
             v-permission="'查询日志记录的用户'"
           >
-            <el-button size="medium">
+            <el-button>
               {{ searchUser ? searchUser : '全部人员' }} <i class="el-icon-arrow-down el-icon--right"></i>
             </el-button>
-            <el-dropdown-menu>
-              <template v-slot:dropdown>
+            <template #dropdown>
+              <el-dropdown-menu>
                 <el-dropdown-item :command="['全部人员']">全部人员</el-dropdown-item>
                 <el-dropdown-item
                   icon="el-icon-user-solid"
@@ -27,10 +24,10 @@
                   :command="[user]"
                   >{{ user }}
                 </el-dropdown-item>
-              </template>
-            </el-dropdown-menu>
+              </el-dropdown-menu>
+            </template>
           </el-dropdown>
-          <lin-date-picker @dateChange="handleDateChange" ref="searchDateDOM" class="date"> </lin-date-picker>
+          <lin-date-picker @dateChange="handleDateChange" ref="searchDateDom" class="date"> </lin-date-picker>
         </div>
       </div>
       <el-divider v-if="!keyword"></el-divider>
@@ -57,19 +54,21 @@
         </section>
       </article>
 
-      <div v-if="logs?.length">
-        <el-divider></el-divider>
-        <div class="more" :class="{ nothing: finished }">
-          <i v-if="more" class="iconfont icon-loading"></i>
-          <div v-show="!more && !finished" @click="nextPage">
-            <span>查看更多</span> <i class="iconfont icon-gengduo" style="font-size:14px"></i>
-          </div>
-          <div v-if="finished">
-            <span>{{ totalCount === 0 ? '暂无数据' : '没有更多数据了' }}</span>
+      <div v-if="totalCount > count">
+        <div v-if="logs?.length">
+          <el-divider></el-divider>
+          <div class="more" :class="{ nothing: finished }">
+            <i v-if="more" class="iconfont icon-loading"></i>
+            <div v-show="!more && !finished" @click="nextPage">
+              <span>查看更多</span> <i class="iconfont icon-gengduo" style="font-size:14px"></i>
+            </div>
+            <div v-if="finished">
+              <span>{{ totalCount === 0 ? '暂无数据' : '没有更多数据了' }}</span>
+            </div>
           </div>
         </div>
+        <div class="nothing" v-else>暂无日志信息</div>
       </div>
-      <div class="nothing" v-else>暂无日志信息</div>
     </div>
   </div>
 </template>
@@ -88,17 +87,20 @@ export default {
     LinSearch,
     LinDatePicker,
   },
-  setup(props, ctx) {
+  setup() {
     // originally data properties
     const store = useStore()
-    const permissions = computed(() => store.getters.permissions)
     const user = computed(() => store.getters.user)
+    const permissions = computed(() => store.getters.permissions)
 
-    const loading = ref(false)
-    const users = ref([])
+    const count = 10
     const logs = ref([])
+    const users = ref([])
+    const loading = ref(false)
     const isSearch = ref(false)
     const finished = ref(false)
+    const searchDateDom = ref()
+    const searchKeywordDom = ref()
 
     /**
      * Part 1
@@ -110,7 +112,7 @@ export default {
         if (user.value.admin || permissions.value.includes('查询日志记录的用户')) {
           users.value = await logModel.getLoggedUsers({})
         }
-        const res = await logModel.getLogs({ page: 0 })
+        const res = await logModel.getLogs({ page: 0, count })
         logs.value = res.items
         loading.value = false
       } catch (err) {
@@ -145,14 +147,12 @@ export default {
     }
     // 条件检索
     const searchPage = async () => {
-      if (!search.searchUser && !search.searchKeyword && !search.searchDate.length) {
-        return
-      }
-      search.totalCount = 0
       logs.value = []
       loading.value = true
+      search.totalCount = 0
       finished.value = false
       const name = search.searchUser === '全部人员' ? '' : search.searchUser
+
       const res = await logModel.searchLogs({
         page: 0, // 初始化
         keyword: search.searchKeyword,
@@ -194,7 +194,7 @@ export default {
           if (search.searchDate.length) {
             search.keyword = `${search.searchUser} ${search.searchDate[0]}至${search.searchDate[1]}`
           }
-          ctx.refs.searchKeywordDOM.clear()
+          searchKeywordDom.value.clear()
         }
         searchPage()
       },
@@ -237,7 +237,7 @@ export default {
           if (search.searchKeyword) {
             search.keyword = `${search.searchUser} ${search.searchKeyword}`
           }
-          ctx.refs.searchDateDOM.clear()
+          searchDateDom.value.clear()
         }
         searchPage()
       },
@@ -295,22 +295,25 @@ export default {
       users,
       logs,
       more,
+      count,
       loading,
       finished,
       backInit,
       nextPage,
       isSearch,
       onQueryChange,
       handleCommand,
+      searchDateDom,
       handleDateChange,
+      searchKeywordDom,
       ...toRefs(search),
     }
   },
 }
 </script>
 
 <style lang="scss" scoped>
-.log >>> .el-button {
+.log /deep/ .el-button {
   padding-top: 10px;
   padding-bottom: 10px;
 }