LdDetails.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <a-card :bordered="false" class="shopOrder-table-page-search-wrapper">
  3. <div class="shopOrder-searchForm">
  4. <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
  5. <a-row :gutter="48">
  6. <a-col :span="6">
  7. <a-form-item label="创建时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  8. <a-range-picker
  9. id="LdDetails-queryOrderDate"
  10. :disabledDate="disabledDate"
  11. v-model="queryOrderDate"
  12. format="YYYY-MM-DD"
  13. :placeholder="['开始时间', '结束时间']" />
  14. </a-form-item>
  15. </a-col>
  16. <a-col :span="6">
  17. <a-form-item label="变动类型" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  18. <v-select
  19. v-model="queryParam.changeType"
  20. ref="changeType"
  21. id="LdDetails-status"
  22. code="GOLD_CHANGE_TYPE"
  23. placeholder="请选择"
  24. allowClear></v-select>
  25. </a-form-item>
  26. </a-col>
  27. <a-col :span="6">
  28. <a-form-item label="变动原因" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  29. <v-select
  30. v-model="queryParam.operateType"
  31. ref="operateType"
  32. id="LdDetails-status"
  33. code="GOLD_OPERATE_TYPE_ALL"
  34. placeholder="请选择"
  35. allowClear></v-select>
  36. </a-form-item>
  37. </a-col>
  38. <a-col :span="6">
  39. <a-button class="handle-btn serach-btn" id="LdDetails-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
  40. <a-button class="handle-btn" type="" id="LdDetails-btn-reset" @click="handleReset">重置</a-button>
  41. </a-col>
  42. </a-row>
  43. </a-form>
  44. </div>
  45. <s-table
  46. ref="table"
  47. size="default"
  48. :rowKey="(record) => record.id"
  49. :columns="columns"
  50. :data="loadData"
  51. bordered>
  52. </s-table>
  53. </a-card>
  54. </template>
  55. <script>
  56. import { STable, VSelect } from '@/components'
  57. import { customerGoldLogDetail } from '@/api/userInfo.js'
  58. import moment from 'moment'
  59. export default {
  60. name: 'ShopOrder',
  61. components: { STable, VSelect },
  62. data () {
  63. return {
  64. formItemLayout: {
  65. labelCol: { span: 7 },
  66. wrapperCol: { span: 17 }
  67. },
  68. queryOrderDate: undefined,
  69. // 查询参数
  70. queryParam: {
  71. beginDate: null, // 开始时间
  72. endDate: null, // 结束时间
  73. changeType: '', // 类型
  74. operateType: '' // 原因
  75. },
  76. loading: false, // 导出loading
  77. // 表头
  78. columns: [
  79. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  80. { title: '创建时间', dataIndex: 'createDate', width: 200, align: 'center' },
  81. { title: '变动类型', dataIndex: 'changeTypeDictValue', width: 200, align: 'center' },
  82. { title: '变动原因', dataIndex: 'operateTypeDictValue', width: 200, align: 'center' },
  83. { title: '乐豆变动量', dataIndex: 'changeNum', width: 200, align: 'center' },
  84. { title: '详情',
  85. dataIndex: 'remarks',
  86. width: 200,
  87. align: 'center',
  88. customRender: (text) => {
  89. return text || '--'
  90. } }
  91. ],
  92. // 加载数据方法 必须为 Promise 对象
  93. loadData: parameter => {
  94. console.log(this.customerNo)
  95. const searchData = Object.assign(parameter, this.queryParam)
  96. console.log(this.queryOrderDate, 'this.queryOrderDate')
  97. if (this.queryOrderDate && this.queryOrderDate.length) {
  98. searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
  99. searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
  100. } else {
  101. searchData.beginDate = ''
  102. searchData.endDate = ''
  103. }
  104. return customerGoldLogDetail(Object.assign(parameter, { customerNo: this.$route.params.id }, searchData)).then(res => {
  105. if (res.status == 200) {
  106. const no = (res.data.pageNo - 1) * res.data.pageSize
  107. for (let i = 0; i < res.data.list.length; i++) {
  108. const _item = res.data.list[i]
  109. _item.no = no + i + 1
  110. }
  111. return res.data
  112. }
  113. })
  114. }
  115. }
  116. },
  117. methods: {
  118. moment,
  119. // 不可选日期
  120. disabledDate (date, dateStrings) {
  121. return date && date.valueOf() > Date.now()
  122. },
  123. // 创建时间change
  124. onChange (dates, dateStrings) {
  125. if ((dates, dateStrings)) {
  126. this.queryParam.beginDate = dateStrings[0]
  127. this.queryParam.endDate = dateStrings[1]
  128. }
  129. },
  130. // 重置
  131. handleReset () {
  132. this.queryOrderDate = undefined
  133. this.queryParam.changeType = ''
  134. this.queryParam.operateType = ''
  135. this.$refs.table.refresh(true)
  136. }
  137. }
  138. }
  139. </script>
  140. <style lang="less" scoped>
  141. .shopOrder-table-page-search-wrapper{
  142. .shopOrder-searchForm{
  143. .ant-form-inline .ant-form-item{
  144. width: 100%;
  145. }
  146. // 搜索框的下间距
  147. .ant-form-item {
  148. margin-bottom: 10px;
  149. }
  150. .handle-btn{
  151. margin-top: 4px;
  152. }
  153. .serach-btn{
  154. margin-right: 10px;
  155. }
  156. }
  157. .export-btn{
  158. background-color: #ff9900;
  159. border-color: #ff9900;
  160. color: #fff;
  161. }
  162. .export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
  163. color: #fff;
  164. border-color: #ff9900;
  165. }
  166. .blue {
  167. color: #1890FF;
  168. }
  169. .green {
  170. color: #16b50e;
  171. }
  172. .red {
  173. color: red;
  174. }
  175. }
  176. </style>