index.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <div class="page-box">
  3. <moduleView :propConfig="config" ref="view" v-loading="load" @pagination="pagination" @onRefresh="statisticsHandle" @resert="queryList" @search="queryList" />
  4. </div>
  5. </template>
  6. <script setup>
  7. import { computed,getCurrentInstance,ref } from "vue";
  8. const { proxy } = getCurrentInstance();
  9. import {list,totalHandle} from '@/api/base/adPutIn'
  10. const config = ref({
  11. attr:{
  12. calculateH:true
  13. },
  14. search:{
  15. attr:{
  16. size:'mini',
  17. rules:{
  18. name:[{
  19. required: true, message: '请输入名称', trigger: 'blur'
  20. }]
  21. }
  22. },
  23. columns:[
  24. [{
  25. span:8,
  26. // label:'设备名称',
  27. labelWidth:1,
  28. prop:'text',
  29. component:'by-input',
  30. compConfig:{
  31. attr:{
  32. placeholder:'请输入设备名称',
  33. prefixIcon:'vxe-icon-search'
  34. }
  35. }
  36. },
  37. {
  38. span:8,
  39. labelWidth:120,
  40. label:'最后同步时间',
  41. prop:'time',
  42. component:'by-date',
  43. compConfig:{
  44. attr:{
  45. startPlaceholder:'开始时间',
  46. endPlaceholder:'结束时间',
  47. // format:'yyyy-MM-dd',
  48. type:'datetimerange'
  49. }
  50. }
  51. }]
  52. ]
  53. },
  54. tool:{
  55. tools:{
  56. export:true,
  57. search:true,
  58. refresh:true
  59. }
  60. },
  61. table:{
  62. attr:{
  63. size:'mini',
  64. seq:true,
  65. align:'center',
  66. // checkbox:true
  67. },
  68. columns:[
  69. // {
  70. // title:'设备ID',
  71. // field:'equipmentId',
  72. // },
  73. {
  74. title:'设备名称',
  75. field:'equipmentName',
  76. },
  77. {
  78. title:'轮播量',
  79. field:'carouselCount'
  80. },
  81. {
  82. title:'扫码量',
  83. field:'scanCodeCount'
  84. },
  85. {
  86. title:'转化率',
  87. field:'ratio'
  88. },
  89. {
  90. title:'累计用户',
  91. field:'totalUserCount'
  92. },
  93. {
  94. title:'累计收入',
  95. field:'totalPrice'
  96. },
  97. {
  98. title:'最后同步时间',
  99. field:'lasterTime'
  100. }]
  101. }
  102. })
  103. const load = ref(false)
  104. const isSearch = ref(false)
  105. const timeNum = ref(0);
  106. const pagination = () => {
  107. if(isSearch.value){
  108. queryList();
  109. }else{
  110. getList()
  111. }
  112. }
  113. //列表请求(包含分页和搜素条件)
  114. const queryList = () => {
  115. isSearch.value = true;
  116. let data = proxy.$refs.view.getQuery();
  117. requestList(data);
  118. }
  119. const getList = () => {
  120. if(!proxy.$refs.view){
  121. if(timeNum.value > 5){
  122. return
  123. }
  124. setTimeout(()=>{
  125. getList()
  126. },500)
  127. timeNum.value ++;
  128. return
  129. }
  130. timeNum.value = 0;
  131. isSearch.value = false;
  132. let data = proxy.$refs.view.getPage();
  133. requestList(data);
  134. }
  135. const requestList = data => {
  136. load.value = true;
  137. data.pageNum = data.pageNo;
  138. delete data.pageNo;
  139. if(data.time && data.time.length > 0) {
  140. data.startTime = data.time[0]
  141. data.endTime = data.time[1]
  142. }
  143. delete data.time;
  144. list(data).then(res => {
  145. load.value = false;
  146. proxy.$refs.view.setTableValue(res.data.records);
  147. let page = {
  148. pageNo: res.data.current, //当前页
  149. pageSize: data.pageSize, //每页条数
  150. total: res.data.total //总条数
  151. };
  152. proxy.$refs.view.setPage(page)
  153. }).catch(()=>{
  154. load.value = false;
  155. })
  156. }
  157. const statisticsHandle= () => {
  158. totalHandle().then(()=>{
  159. getList()
  160. }).catch(()=>{
  161. getList()
  162. })
  163. }
  164. nextTick(()=>{
  165. statisticsHandle()
  166. })
  167. </script>
  168. <style lang="scss" scoped>
  169. </style>