SpecificationUpdateRecord.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <!-- 说明书更新记录 -->
  2. <template>
  3. <div class="specification-update-record">
  4. <div class="screening-condition">
  5. <Select
  6. style="margin-right: 12px;"
  7. width="200"
  8. :isReadOnly="true"
  9. tipPlace="top"
  10. caption="事件类型:"
  11. @change="changeTablePage(1)"
  12. v-model="incidentType"
  13. :selectdata="incidentList"
  14. :placeholder="'请选择'"
  15. />
  16. <el-date-picker
  17. v-model="timeVal"
  18. type="daterange"
  19. range-separator="至"
  20. start-placeholder="开始日期"
  21. end-placeholder="结束日期"
  22. @change="changeTime">
  23. </el-date-picker>
  24. </div>
  25. <el-table :data="tableData" style="margin-bottom: 19px">
  26. <el-table-column property="time" label="日期"></el-table-column>
  27. <el-table-column property="evenType" label="事项类型"></el-table-column>
  28. <el-table-column property="objid" label="编号"></el-table-column>
  29. <el-table-column property="content" label="更新内容"></el-table-column>
  30. </el-table>
  31. <div class="page">
  32. <el-pagination
  33. background
  34. layout="prev, pager, next"
  35. :current-page="curPage"
  36. :page-size="pageSize"
  37. :total="tatol"
  38. @current-change="changeTablePage">
  39. </el-pagination>
  40. </div>
  41. </div>
  42. </template>
  43. <script>
  44. import { getSpecificaltionData } from '../../api/specificationUpdateRecord';
  45. import moment from 'moment';
  46. import _ from 'lodash';
  47. export default {
  48. data () {
  49. return {
  50. incidentList: [
  51. {id: 0, name: '专维'},
  52. {id: 1, name: '维保'},
  53. {id: 2, name: '第三方检测'},
  54. {id: 3, name: '重点关注'},
  55. ], // 事件列表
  56. incidentType: '', // 事件类型
  57. timeVal: '', // 时间
  58. tableData: [], // 表数据
  59. curPage: 1, // 当前页码
  60. pageSize: 10, // 每页条数
  61. tatol: 0, // 数据总量
  62. startTime: 20171027000000, // 开始时间
  63. endTime: 20171028000000, // 结束事件
  64. }
  65. },
  66. components: {},
  67. computed: {},
  68. mounted() {
  69. this.getTableData();
  70. },
  71. methods: {
  72. /**
  73. * 获取表数据
  74. */
  75. getTableData() {
  76. let param = {
  77. page: this.curPage,
  78. size: this.pageSize,
  79. plazaId: 1000423,
  80. // changeDateStartDate: 20171027000000,
  81. // changeDateEndDate: 20171028000000,
  82. }
  83. if (this.startTime !== '') {
  84. param.changeDateStartDate = this.startTime;
  85. }
  86. if (this.endTime !== '') {
  87. param.changeDateEndDate = this.endTime;
  88. }
  89. if (this.incidentType !== '') {
  90. param.objtype = this.incidentType;
  91. }
  92. getSpecificaltionData('/data/rpt_change_record/query', param).then((res) => {
  93. const { result, data, count } = res;
  94. if (result === 'success') {
  95. this.tatol = count;
  96. _.map(data, (item) => {
  97. let text = _.find(this.incidentList, (o) => {return o.id === item.objtype}).name
  98. item.evenType = text;
  99. item.time = moment.unix(item.changedate / 1000).format('YYYY.MM.DD')
  100. return
  101. })
  102. this.tableData = data;
  103. }
  104. })
  105. },
  106. /**
  107. * 切换页码
  108. */
  109. changeTablePage(page) {
  110. this.curPage = page;
  111. this.getTableData();
  112. },
  113. /**
  114. * 切换时间
  115. */
  116. changeTime() {
  117. this.curPage = 1;
  118. if (this.timeVal) {
  119. this.startTime = moment.unix(new Date(this.timeVal[0]).getTime() / 1000).format('YYYYMMDDHHmmss');
  120. this.endTime = moment.unix(new Date(this.timeVal[1]).getTime() / 1000).format('YYYYMMDDHHmmss');
  121. } else {
  122. this.startTime = 20171027000000;
  123. this.endTime = 20171028000000;
  124. }
  125. this.getTableData();
  126. }
  127. }
  128. }
  129. </script>
  130. <style lang='less' scoped>
  131. .specification-update-record{
  132. padding-left: 16px;
  133. padding-right: 16px;
  134. padding-top: 12px;
  135. padding-bottom: 20px;
  136. background: #fff;
  137. height: 100%;
  138. width: 100%;
  139. .screening-condition{
  140. margin-bottom: 13px;
  141. display: flex;
  142. }
  143. .page{
  144. display: flex;
  145. justify-content: flex-end;
  146. }
  147. }
  148. </style>