瀏覽代碼

对接操作日志

chenrui 3 年之前
父節點
當前提交
ca7d116326
共有 3 個文件被更改,包括 239 次插入136 次删除
  1. 115 61
      src/libs/getDate.js
  2. 61 0
      src/views/common/rangeDate.vue
  3. 63 75
      src/views/power/OperateJournal/OperateJournal.vue

+ 115 - 61
src/libs/getDate.js

@@ -1,65 +1,119 @@
 // 引入 moment 时间插件
-import moment from "moment";
-//获取今日/昨日/本周/上周/本月/上月 时间
+import moment from 'moment'
+moment.updateLocale('en', { week: {
+  dow: 1, // 星期的第一天是星期一
+  doy: 7 // 年份的第一周必须包含1月1日 (7 + 1 - 1)
+} })
+// 获取今日/昨日/本周/上周/本月/上月 时间
 export default {
-    // 获取今日的开始结束时间
-    getToday() {
-        let obj = {
-            starttime: '',
-            endtime: ''
-        }
-        obj.starttime = moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");
-        obj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");
-        return obj
-    },
-    // 获取昨日的开始结束时间
-    getYesterday() {
-        let obj = {
-            starttime: '',
-            endtime: ''
-        }
-        obj.starttime = moment(moment().add(-1, 'days').startOf("day").valueOf()).format("YYYY-MM-DD");
-        obj.endtime = moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD');
-        return obj
-    },
-    // 获取当前周的开始结束时间
-    getCurrWeekDays() {
-        let obj = {
-            starttime: '',
-            endtime: ''
-        }
-        obj.starttime = moment(moment().week(moment().week()).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD')
-        obj.endtime = moment(moment().week(moment().week()).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD');
-        return obj
-    },
-    // 获取上一周的开始结束时间
-    getLastWeekDays() {
-        let obj = {
-            starttime: '',
-            endtime: ''
-        }
-        obj.starttime = moment(moment().week(moment().week() - 1).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD')
-        obj.endtime = moment(moment().week(moment().week() - 1).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD');
-        return obj
-    },
-    // 获取当前月的开始结束时间
-    getCurrMonthDays() {
-        let obj = {
-            starttime: '',
-            endtime: ''
-        }
-        obj.starttime = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD');
-        obj.endtime = moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD');
-        return obj
-    },
-    // 获取上一个月的开始结束时间
-    getLastMonthDays() {
-        let obj = {
-            starttime: '',
-            endtime: ''
-        }
-        obj.starttime = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD');
-        obj.endtime = moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD');
-        return obj
+  // 获取今日的开始结束时间
+  getToday () {
+    const obj = {
+      starttime: '',
+      endtime: ''
     }
+    obj.starttime = moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  // 获取今日的开始结束时间  年月日时分秒
+  getTodayTime () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD HH:mm:ss')
+    obj.endtime = moment(moment().valueOf()).format('YYYY-MM-DD HH:mm:ss')
+    return obj
+  },
+  //  近7天
+  getRecentday () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment().subtract('days', 6).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  //  近7天  年月日时分秒
+  getRecentTime () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment().subtract('days', 6).format('YYYY-MM-DD HH:mm:ss')
+    obj.endtime = moment(moment().valueOf()).format('YYYY-MM-DD HH:mm:ss')
+    return obj
+  },
+  //  近3天
+  getThreeday () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment().subtract('days', 2).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  // 获取昨日的开始结束时间
+  getYesterday () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(moment().add(-1, 'days').startOf('day').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  // 获取当前周的开始到当天结束时间
+  getCurrWeekDays () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(moment().week(moment().week()).startOf('week').add('days').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  // 获取上一周的开始结束时间
+  getLastWeekDays () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(moment().week(moment().week() - 1).startOf('week').add('days').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().week(moment().week() - 1).endOf('week').add('days').valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  // 获取当前月的开始到当天结束时间
+  getCurrMonthDays () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  // 获取上一个月的开始结束时间
+  getLastMonthDays () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD')
+    return obj
+  },
+  // 获取近三个月的开始结束时间
+  getThreeMonthDays () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(moment().month(moment().month() - 2).startOf('month').valueOf()).format('YYYY-MM-DD')
+    obj.endtime = moment(moment().month(moment().month() - 2).endOf('month').valueOf()).format('YYYY-MM-DD')
+    return obj
+  }
 }

+ 61 - 0
src/views/common/rangeDate.vue

@@ -0,0 +1,61 @@
+<template>
+  <a-range-picker
+    style="width:100%"
+    :value="date"
+    :disabledDate="disabledDate"
+    :format="dateFormat"
+    @change="dateChange"
+    @calendarChange="dateCalendarChange"
+    :placeholder="['开始时间', '结束时间']" />
+</template>
+<script>
+import moment from 'moment'
+export default {
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      date: this.value,
+      dateFormat: 'YYYY-MM-DD',
+      selectPriceDate: ''
+    }
+  },
+  methods: {
+    // 不可选日期
+    disabledDate (current) {
+      //  最早可倒推选择两年数据,最晚为今天
+      const minYearVs = moment().subtract(2, 'years') //  两年前   负值
+      const maxYearVs = moment().endOf('day') //  今天,包含今天
+      //  限制最多只能查一年区间的数据
+      if (this.selectPriceDate) {
+        const oMinYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').subtract(1, 'years') //  当前选中开始日期前推一年
+        const oMaxYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').add(1, 'years') //  当前选中开始日期后推一年
+        // 判断两个时间段是否相差m天  第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
+        const beginDate = minYearVs.diff(oMinYearVs, 'days') > 0 ? minYearVs : oMinYearVs // 若当前选中开始日期前推一年超出最多倒推两年数据时,则以两年为标准
+        const endDate = maxYearVs.diff(oMaxYearVs, 'days') > 0 ? oMaxYearVs : maxYearVs // 若当前选中开始日期后推一年超出今天时,则以今天为标准
+        return current && current < beginDate || current && current > endDate
+      } else {
+        return current && current > maxYearVs || current && current < minYearVs
+      }
+    },
+    // 日期  change
+    dateChange (date, dateStrings) {
+      this.selectPriceDate = ''
+      this.date = date
+      this.$emit('change', dateStrings)
+    },
+    dateCalendarChange (date, dateStrings) {
+      this.selectPriceDate = date[0]
+    },
+    resetDate (val) {
+      this.date = val || []
+    }
+  }
+}
+</script>

+ 63 - 75
src/views/power/OperateJournal/OperateJournal.vue

@@ -3,25 +3,33 @@
     <div class="operateJournal">
       <!-- 搜索框 -->
       <div class="table-page-search-wrapper">
-        <a-form layout="inline">
-          <a-row :gutter="48">
-            <a-col :md="8" :sm="24">
+        <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+          <a-row :gutter="15">
+            <a-col :md="6" :sm="24">
               <a-form-item label="操作时间">
-                <a-range-picker :format="dateFormat" show-time :placeholder="['开始时间', '结束时间']" v-model="time" @change="onChange" />
+                <rangeDate ref="rangeDate" :value="time" @change="dateChange" />
               </a-form-item>
             </a-col>
             <a-col :md="6" :sm="24">
-              <a-form-item label="操作人"><a-input allowClear v-model.trim="searchData.queryWord" placeholder="请输入" /></a-form-item>
+              <a-form-item label="操作信息">
+                <a-input allowClear v-model.trim="queryParam.actDesc" placeholder="请输入操作信息" />
+              </a-form-item>
             </a-col>
             <a-col :md="6" :sm="24">
-              <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-              <a-button type="" @click="resetForm">重置</a-button>
+              <a-form-item label="操作人">
+                <a-input allowClear v-model.trim="queryParam.actorName" placeholder="请输入操作人" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="operateJournal-refresh">查询</a-button>
+              <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="operateJournal-reset">重置</a-button>
             </a-col>
           </a-row>
         </a-form>
       </div>
       <!-- 列表 -->
       <s-table
+        class="sTable"
         ref="table"
         size="default"
         rowKey="id"
@@ -36,95 +44,75 @@
 </template>
 
 <script>
+import moment from 'moment'
+import getDate from '@/libs/getDate'
 import { STable } from '@/components'
 import { journalList } from '@/api/OperateJournal.js'
-import getDate from '@/libs/getDate'
-import moment from 'moment'
+import rangeDate from '@/views/common/rangeDate.vue'
 export default {
   name: 'OperateJournal',
-  components: { STable },
+  components: { STable, rangeDate },
   data () {
     return {
-      // 列表
-      form: this.$form.createForm(this, {
-        name: 'OperateJournal'
-      }),
-      time: [moment(getDate.getToday().starttime, this.dateFormat), moment(getDate.getToday().endtime, this.dateFormat)],
-      searchData: {
-        beginDate: null, // 查询的开始时间
-        endDate: null, // 查询的结束时间
-        queryWord: '' // 操作人
+      advanced: false, // 高级搜索 展开/关闭
+      disabled: false, //  查询、重置按钮是否可操作
+      time: [
+        moment(getDate.getThreeday().starttime, this.dateFormat),
+        moment(getDate.getThreeday().endtime, this.dateFormat)
+      ],
+      queryParam: {
+        beginDate: getDate.getThreeday().starttime, // 查询的开始时间
+        endDate: getDate.getThreeday().endtime, // 查询的结束时间
+        actDesc: '',
+        actorName: ''
       },
-      dateFormat: 'YYYY-MM-DD HH:mm:ss',
+      dateFormat: 'YYYY-MM-DD',
       columns: [
-        {
-          title: '序号',
-          dataIndex: 'no',
-          minWidth: '40',
-          align: 'center'
-        },
-        {
-          title: '操作人',
-          dataIndex: 'actorName',
-          minWidth: '100',
-          align: 'center',
-          scopedSlots: { customRender: 'actorName' }
-        },
-        {
-          title: 'IP',
-          dataIndex: 'ip',
-          minWidth: '100',
-          align: 'center'
-        },
-        {
-          title: '日志明细',
-          dataIndex: 'actDesc',
-          minWidth: '100',
-          align: 'center',
-          scopedSlots: { customRender: 'actDesc' }
-        }
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center', fixed: 'left' },
+        { title: '操作时间', dataIndex: 'actDate', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: 'IP', dataIndex: 'ip', width: 200, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '操作人', dataIndex: 'actorName', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '操作信息', dataIndex: 'actDesc', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
-        this.searchData.beginDate == null ? (this.searchData.beginDate = getDate.getToday().starttime) : null
-        this.searchData.endDate == null ? (this.searchData.endDate = getDate.getToday().endtime) : null
-        return journalList(Object.assign(parameter, this.searchData)).then(res => {
-          const no = (res.data.data.pageNo - 1) * res.data.data.pageSize
-          for (let i = 0; i < res.data.data.list.length; i++) {
-            const _item = res.data.data.list[i]
-            _item.no = no + i + 1
+        this.disabled = true
+        this.queryParam.beginDate = this.queryParam.beginDate + ' 00:00:00'
+        this.queryParam.endDate = this.queryParam.endDate + ' 23:59:59'
+        return journalList(Object.assign(parameter, this.queryParam)).then(res => {
+          const data = res.data
+          const no = (data.pageNo - 1) * data.pageSize
+          for (var i = 0; i < data.list.length; i++) {
+            data.list[i].no = no + i + 1
           }
-          return res.data.data
+          this.disabled = false
+          return data
         })
       }
     }
   },
   methods: {
-    moment,
-    // 操作时间change
-    onChange (dates, dateStrings) {
-      this.searchData.beginDate = dateStrings[0]
-      this.searchData.endDate = dateStrings[1]
+    //  时间  change
+    dateChange (date) {
+      this.queryParam.beginDate = date[0]
+      this.queryParam.endDate = date[1]
     },
     // 重置
-    resetForm () {
-      this.searchData.beginDate = getDate.getToday().starttime
-      this.searchData.endDate = getDate.getToday().endtime
-      this.time = [moment(getDate.getToday().starttime, this.dateFormat), moment(getDate.getToday().endtime, this.dateFormat)]
-      this.searchData.queryWord = ''
+    resetSearchForm () {
+      this.$refs.rangeDate.resetDate(this.time)
+      this.queryParam.beginDate = getDate.getThreeday().starttime
+      this.queryParam.endDate = getDate.getThreeday().endtime
+      this.queryParam.actDesc = ''
+      this.queryParam.actorName = ''
       this.$refs.table.refresh(true)
     }
   }
-  // beforeRouteEnter (to, from, next) {
-  //   next(vm => {
-  //     // const todayDate= [getDate.getToday().starttime, getDate.getToday().endtime]
-  // 	// console.log(todayDate)
-  // 	// vm.searchData.beginDate = getDate.getToday().starttime
-  // 	// vm.searchData.endDate = getDate.getToday().endtime
-  // 	// console.log(vm.searchData.beginDate, '--------------',  vm.searchData.endDate )
-  //   })
-  // }
 }
 </script>
-
-<style></style>
+<style lang="less">
+  .operateJournal{
+    .sTable{
+      margin-top: 10px;
+    }
+  }
+</style>