OperateJournal.vue 4.2 KB

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