riderSet.vue 6.1 KB

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