OperateJournal.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <template>
  2. <a-card size="small" :bordered="false">
  3. <div class="operateJournal">
  4. <!-- 搜索框 -->
  5. <div class="table-page-search-wrapper">
  6. <a-form layout="inline">
  7. <a-row :gutter="48">
  8. <a-col :md="8" :sm="24">
  9. <a-form-item label="操作时间">
  10. <a-range-picker :format="dateFormat" show-time :placeholder="['开始时间', '结束时间']" v-model="time" @change="onChange" />
  11. </a-form-item>
  12. </a-col>
  13. <a-col :md="6" :sm="24">
  14. <a-form-item label="操作人"><a-input allowClear v-model.trim="searchData.queryWord" placeholder="请输入" /></a-form-item>
  15. </a-col>
  16. <a-col :md="6" :sm="24">
  17. <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
  18. <a-button type="" @click="resetForm">重置</a-button>
  19. </a-col>
  20. </a-row>
  21. </a-form>
  22. </div>
  23. <!-- 列表 -->
  24. <s-table
  25. ref="table"
  26. size="small"
  27. rowKey="id"
  28. :columns="columns"
  29. :data="loadData"
  30. bordered>
  31. <span slot="actDesc" slot-scope="text, record">{{ record.actDate }}-{{ record.actDesc }}</span>
  32. <span slot="actorName" slot-scope="text, record">{{ record.actorName }}-{{ record.actorPhone }}</span>
  33. </s-table>
  34. </div>
  35. </a-card>
  36. </template>
  37. <script>
  38. import { commonMixin } from '@/utils/mixin'
  39. import { STable } from '@/components'
  40. import { journalList } from '@/api/OperateJournal.js'
  41. import getDate from '@/libs/getDate'
  42. import moment from 'moment'
  43. export default {
  44. name: 'OperateJournal',
  45. components: { STable },
  46. mixins: [commonMixin],
  47. data () {
  48. return {
  49. // 列表
  50. form: this.$form.createForm(this, {
  51. name: 'OperateJournal'
  52. }),
  53. time: [moment(getDate.getToday().starttime, this.dateFormat), moment(getDate.getToday().endtime, this.dateFormat)],
  54. searchData: {
  55. beginDate: null, // 查询的开始时间
  56. endDate: null, // 查询的结束时间
  57. queryWord: '' // 操作人
  58. },
  59. dateFormat: 'YYYY-MM-DD HH:mm:ss',
  60. columns: [
  61. {
  62. title: '序号',
  63. dataIndex: 'no',
  64. minWidth: '40',
  65. align: 'center'
  66. },
  67. {
  68. title: '操作人',
  69. dataIndex: 'actorName',
  70. minWidth: '100',
  71. align: 'center',
  72. scopedSlots: { customRender: 'actorName' }
  73. },
  74. {
  75. title: 'IP',
  76. dataIndex: 'ip',
  77. minWidth: '100',
  78. align: 'center'
  79. },
  80. {
  81. title: '日志明细',
  82. dataIndex: 'actDesc',
  83. minWidth: '100',
  84. align: 'center',
  85. scopedSlots: { customRender: 'actDesc' }
  86. }
  87. ],
  88. // 加载数据方法 必须为 Promise 对象
  89. loadData: parameter => {
  90. this.searchData.beginDate == null ? (this.searchData.beginDate = getDate.getToday().starttime) : null
  91. this.searchData.endDate == null ? (this.searchData.endDate = getDate.getToday().endtime) : null
  92. return journalList(Object.assign(parameter, this.searchData)).then(res => {
  93. const no = (res.data.data.pageNo - 1) * res.data.data.pageSize
  94. for (let i = 0; i < res.data.data.list.length; i++) {
  95. const _item = res.data.data.list[i]
  96. _item.no = no + i + 1
  97. }
  98. return res.data.data
  99. })
  100. }
  101. }
  102. },
  103. methods: {
  104. moment,
  105. // 操作时间change
  106. onChange (dates, dateStrings) {
  107. this.searchData.beginDate = dateStrings[0]
  108. this.searchData.endDate = dateStrings[1]
  109. },
  110. // 重置
  111. resetForm () {
  112. this.searchData.beginDate = getDate.getToday().starttime
  113. this.searchData.endDate = getDate.getToday().endtime
  114. this.time = [moment(getDate.getToday().starttime, this.dateFormat), moment(getDate.getToday().endtime, this.dateFormat)]
  115. this.searchData.queryWord = ''
  116. this.$refs.table.refresh(true)
  117. }
  118. }
  119. // beforeRouteEnter (to, from, next) {
  120. // next(vm => {
  121. // // const todayDate= [getDate.getToday().starttime, getDate.getToday().endtime]
  122. // // console.log(todayDate)
  123. // // vm.searchData.beginDate = getDate.getToday().starttime
  124. // // vm.searchData.endDate = getDate.getToday().endtime
  125. // // console.log(vm.searchData.beginDate, '--------------', vm.searchData.endDate )
  126. // })
  127. // }
  128. }
  129. </script>
  130. <style></style>