list.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <template>
  2. <a-card size="small" :bordered="false" class="rebateSettingsList-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <!-- 搜索条件 -->
  5. <div ref="tableSearch" class="table-page-search-wrapper">
  6. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  7. <a-row :gutter="15">
  8. <a-col :md="6" :sm="24">
  9. <a-form-item label="同步时间">
  10. <rangeDate ref="rangeDate" @change="dateChange" />
  11. </a-form-item>
  12. </a-col>
  13. <a-col :md="6" :sm="24">
  14. <a-form-item label="同步状态">
  15. <a-select placeholder="请选择同步状态" v-model="queryParam.handleResult">
  16. <a-select-option value="finish">
  17. 同步成功
  18. </a-select-option>
  19. <a-select-option value="fail">
  20. 同步失败
  21. </a-select-option>
  22. </a-select>
  23. </a-form-item>
  24. </a-col>
  25. <a-col :md="6" :sm="24">
  26. <a-form-item label="业务编码">
  27. <a-input id="rebateSettingsList-no" v-model.trim="queryParam.bizId" allowClear placeholder="请输入完整的业务编码"/>
  28. </a-form-item>
  29. </a-col>
  30. <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
  31. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="rebateSettingsList-refresh">查询</a-button>
  32. <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="rebateSettingsList-reset">重置</a-button>
  33. </a-col>
  34. </a-row>
  35. </a-form>
  36. </div>
  37. <!-- 列表 -->
  38. <s-table
  39. class="sTable fixPagination"
  40. ref="table"
  41. :style="{ height: tableHeight+84.5+'px' }"
  42. size="small"
  43. :rowKey="(record) => record.id"
  44. :columns="columns"
  45. :data="loadData"
  46. :scroll="{ y: tableHeight }"
  47. :defaultLoadData="false"
  48. bordered>
  49. <!-- 业务模块 -->
  50. <template slot="workModule">
  51. 采购单管理
  52. </template>
  53. <!-- 同步状态 -->
  54. <template slot="syncStatus" slot-scope="text, record">
  55. <span v-if="record.handleResult&&record.handleResult!='fail'">同步成功</span>
  56. <span v-else style="color:#ed1c24;">同步失败</span>
  57. </template>
  58. <!-- 错误信息 -->
  59. <template slot="errInfo" slot-scope="text, record">
  60. <div v-if="record.errInfo">
  61. <a-popover slot="content" trigger="hover">
  62. <template slot="rightTop">
  63. {{ record.errInfo }}
  64. </template>
  65. <div>{{ record.errInfo }}</div>
  66. </a-popover>
  67. </div>
  68. <div v-else>--</div>
  69. </template>
  70. <!-- 操作 -->
  71. <template slot="action" slot-scope="text, record">
  72. <a-button
  73. size="small"
  74. type="link"
  75. class="button-info"
  76. v-if="record.handleResult&&record.handleResult=='fail'"
  77. @click="handleAgainSync(record)"
  78. id="rebateSettingsList-edit-btn">重新同步</a-button>
  79. <span v-else>--</span>
  80. </template>
  81. </s-table>
  82. </a-spin>
  83. </a-card>
  84. </template>
  85. <script>
  86. import { commonMixin } from '@/utils/mixin'
  87. import { STable, VSelect } from '@/components'
  88. import { queryReceivePage, handle } from '@/api/mqmsg'
  89. import rangeDate from '@/views/common/rangeDate.vue'
  90. export default {
  91. name: 'ErpMessageManagementList',
  92. mixins: [commonMixin],
  93. components: { STable, VSelect, rangeDate },
  94. data () {
  95. return {
  96. spinning: false,
  97. tableHeight: 0,
  98. queryParam: {
  99. createDateStart: '',
  100. createDateEnd: '',
  101. handleResult: undefined,
  102. bizType: 'KdMidSpareInputs',
  103. bizId: undefined
  104. },
  105. disabled: false, // 查询、重置按钮是否可操作
  106. columns: [
  107. { title: '序号', dataIndex: 'no', width: '3.5%', align: 'center' },
  108. { title: '创建时间', dataIndex: 'createDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  109. { title: '同步时间', dataIndex: 'lastHandleDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  110. { title: '业务模块', scopedSlots: { customRender: 'workModule' }, width: '10%', align: 'center' },
  111. { title: '业务编码', dataIndex: 'bizId', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  112. { title: '同步次数', dataIndex: 'handleNum', width: '7%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  113. { title: '同步状态', scopedSlots: { customRender: 'syncStatus' }, width: '10%', align: 'center' },
  114. { title: '错误信息', scopedSlots: { customRender: 'errInfo' }, width: '15%', align: 'center', ellipsis: true },
  115. { title: '操作', scopedSlots: { customRender: 'action' }, width: '7%', align: 'center' }
  116. ],
  117. // 加载数据方法 必须为 Promise 对象
  118. loadData: parameter => {
  119. this.disabled = true
  120. this.spinning = true
  121. return queryReceivePage(Object.assign(parameter, this.queryParam)).then(res => {
  122. let data
  123. if (res.status == 200) {
  124. data = res.data
  125. const no = (data.pageNo - 1) * data.pageSize
  126. for (var i = 0; i < data.list.length; i++) {
  127. data.list[i].no = no + i + 1
  128. }
  129. this.disabled = false
  130. }
  131. this.spinning = false
  132. return data
  133. })
  134. }
  135. }
  136. },
  137. methods: {
  138. // 时间 change
  139. dateChange (date) {
  140. this.queryParam.createDateStart = date[0] ? date[0] : ''
  141. this.queryParam.createDateEnd = date[1] ? date[1] : ''
  142. },
  143. // 重置
  144. resetSearchForm () {
  145. this.queryParam.handleResult = undefined
  146. this.queryParam.createDateStart = ''
  147. this.queryParam.createDateEnd = ''
  148. this.queryParam.bizId = undefined
  149. this.$refs.rangeDate.resetDate()
  150. this.$refs.table.refresh(true)
  151. },
  152. // 重新同步
  153. handleAgainSync (row) {
  154. const _this = this
  155. this.$confirm({
  156. title: '提示',
  157. content: '确定要重新同步信息吗?',
  158. centered: true,
  159. onOk () {
  160. _this.spinning = true
  161. handle({ id: row.id }).then(res => {
  162. if (res.status == 200) {
  163. _this.$message.success(res.message)
  164. _this.$refs.table.refresh()
  165. _this.spinning = false
  166. } else {
  167. _this.spinning = false
  168. }
  169. })
  170. }
  171. })
  172. },
  173. pageInit () {
  174. const _this = this
  175. this.$nextTick(() => { // 页面渲染完成后的回调
  176. _this.setTableH()
  177. })
  178. },
  179. setTableH () {
  180. const tableSearchH = this.$refs.tableSearch.offsetHeight
  181. this.tableHeight = window.innerHeight - tableSearchH - 205
  182. }
  183. },
  184. watch: {
  185. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  186. this.setTableH()
  187. }
  188. },
  189. mounted () {
  190. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  191. this.pageInit()
  192. this.resetSearchForm()
  193. }
  194. },
  195. activated () {
  196. // 如果是新页签打开,则重置当前页面
  197. if (this.$store.state.app.isNewTab) {
  198. this.pageInit()
  199. this.resetSearchForm()
  200. }
  201. // 仅刷新列表,不重置页面
  202. if (this.$store.state.app.updateList) {
  203. this.pageInit()
  204. this.$refs.table.refresh()
  205. }
  206. }
  207. }
  208. </script>
  209. <style lang="less" scope>
  210. .ant-table-tbody .ant-table-row{
  211. height:42px !important;
  212. }
  213. </style>