riderSet.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <template>
  2. <a-card :bordered="false">
  3. <div class="table-page-search-wrapper">
  4. <a-form layout="inline">
  5. <a-row :gutter="48">
  6. <a-col :md="6" :sm="24">
  7. <a-form-item label="骑手名称">
  8. <a-input
  9. allowClear
  10. v-model.trim="queryParam.userName"
  11. placeholder="请输入骑手名称"
  12. id="userList-userName"
  13. :maxLength="30"
  14. @pressEnter="$refs.table.refresh(true)" />
  15. </a-form-item>
  16. </a-col>
  17. <a-col :md="6" :sm="24">
  18. <a-form-item label="骑手电话">
  19. <a-input
  20. allowClear
  21. v-model.trim="queryParam.userMobile"
  22. placeholder="请输入骑手电话"
  23. :maxLength="11"
  24. id="userList-userMobile"
  25. @pressEnter="$refs.table.refresh(true)" />
  26. </a-form-item>
  27. </a-col>
  28. <a-col :md="6" :sm="24">
  29. <a-button type="primary" @click="$refs.table.refresh(true)" id="userList-handSubmit" style="margin-right: 10px;">查询</a-button>
  30. <a-button type="" @click="reset" id="userList-reset">重置</a-button>
  31. </a-col>
  32. </a-row>
  33. </a-form>
  34. </div>
  35. <div class="table-operator">
  36. <a-button
  37. type="primary"
  38. icon="plus"
  39. @click="openModal"
  40. id="userList-openModal"
  41. v-hasPermission="'B_riderSet_enable'"
  42. style="margin-top:18px ;">新增</a-button>
  43. </div>
  44. <s-table
  45. ref="table"
  46. size="default"
  47. rowKey="id"
  48. :columns="columns"
  49. :data="loadData"
  50. bordered>
  51. <span slot="status" slot-scope="text, record">
  52. <a-switch
  53. v-hasPermission="'B_riderSet_enable'"
  54. checkedChildren="启用"
  55. unCheckedChildren="禁用"
  56. v-model="record.loginFlag"
  57. @change="changeFlagHandle(text, record)"
  58. id="userList-changeFlagHandle" />
  59. <span v-if="!$hasPermissions('B_riderSet_enable')">{{record.loginFlag== true ? '启用' : '禁用'}}</span>
  60. </span>
  61. <span slot="action" slot-scope="text, record">
  62. <a-icon
  63. v-if="$hasPermissions('B_riderSet_edit')"
  64. type="edit"
  65. title="编辑"
  66. class="actionBtn icon-blues"
  67. @click="handleEdit(record)"
  68. />
  69. <span v-else>--</span>
  70. </span>
  71. </s-table>
  72. <riderModal :visible="showModal" @refresh="$refs.table.refresh(true)" :data="itemData" @close="showModal = false"></riderModal>
  73. </a-card>
  74. </template>
  75. <script>
  76. import {
  77. STable,
  78. VSelect
  79. } from '@/components'
  80. import riderModal from './riderModal.vue'
  81. import {
  82. getRiderList,
  83. updateEnableStatus
  84. } from '@/api/recoveryManage.js'
  85. export default {
  86. name: 'RiderSet',
  87. components: {
  88. STable,
  89. VSelect,
  90. riderModal
  91. },
  92. data () {
  93. return {
  94. // 查询参数
  95. queryParam: {
  96. userName: '',
  97. userMobile: ''
  98. },
  99. showModal: false,
  100. itemData: {}, // 编辑行数据
  101. // 表头
  102. columns: [{
  103. title: '序号',
  104. dataIndex: 'no',
  105. width: 60,
  106. align: 'center'
  107. },
  108. {
  109. title: '创建时间',
  110. dataIndex: 'createDate',
  111. width: 120,
  112. align: 'center'
  113. },
  114. {
  115. title: '骑手名称',
  116. dataIndex: 'userName',
  117. width: 100,
  118. align: 'center'
  119. },
  120. {
  121. title: '骑手电话',
  122. dataIndex: 'userMobile',
  123. width: 100,
  124. align: 'center'
  125. },
  126. {
  127. title: '状态',
  128. width: 100,
  129. align: 'center',
  130. scopedSlots: {
  131. customRender: 'status'
  132. }
  133. },
  134. {
  135. title: '操作',
  136. width: 100,
  137. align: 'center',
  138. scopedSlots: {
  139. customRender: 'action'
  140. }
  141. }
  142. ],
  143. // 加载数据方法 必须为 Promise 对象
  144. loadData: parameter => {
  145. return getRiderList(Object.assign(parameter, this.queryParam)).then(res => {
  146. const no = (res.data.pageNo - 1) * res.data.pageSize
  147. for (let i = 0; i < res.data.list.length; i++) {
  148. const _item = res.data.list[i]
  149. _item.no = no + i + 1
  150. _item.loginFlag = _item.loginFlag + '' === '1'
  151. }
  152. return res.data
  153. })
  154. },
  155. optionAlertShow: false
  156. }
  157. },
  158. beforeRouteEnter (to, from, next) {
  159. next(vm => {
  160. // vm.$refs.table.refresh()
  161. })
  162. },
  163. methods: {
  164. // 刷新列表
  165. refreshTable () {
  166. this.$refs.table.refresh(true)
  167. },
  168. // 新建
  169. openModal () {
  170. this.showModal = true
  171. this.itemData = {}
  172. },
  173. // 重置
  174. reset () {
  175. this.queryParam.userName = ''
  176. this.queryParam.userMobile = '',
  177. this.refreshTable()
  178. },
  179. handleEdit (row) {
  180. console.log(row, 'row')
  181. this.showModal = true
  182. this.itemData = row
  183. },
  184. // 修改状态
  185. changeFlagHandle (text, record) {
  186. const _data = {
  187. id: record.id,
  188. flag: record.loginFlag ? '1' : '0'
  189. }
  190. updateEnableStatus(_data).then(res => {
  191. if (res.status + '' === '200') {
  192. this.$message.success(res.message)
  193. } else {
  194. record.loginFlag = !record.loginFlag
  195. }
  196. })
  197. }
  198. }
  199. }
  200. </script>
  201. <style scoped>
  202. .table-page-search-wrapper .ant-form-inline .ant-form-item {
  203. margin-bottom: 0;
  204. }
  205. .action-button {
  206. line-height: 40px;
  207. white-space: nowrap;
  208. padding: 5px 10px;
  209. background-color: #1890ff;
  210. border-radius: 4px;
  211. color: #fff;
  212. margin-right: 5px;
  213. }
  214. .red-text {
  215. background-color: red;
  216. }
  217. .reset-text {
  218. background-color: #31b50b;
  219. }
  220. </style>