driverManage.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <template>
  2. <a-card :bordered="false" class="userManage-page-info">
  3. <!-- 搜索条件 -->
  4. <div class="userManage-search">
  5. <a-form-model layout="inline" :model="queryParam" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
  6. <a-row :gutter="24">
  7. <a-col :xs="24" :sm="12" :md="6" :lg="5"><a-form-model-item label="司机姓名" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol"><a-input allowClear placeholder="请输入司机姓名" v-model.trim="queryParam.name"/></a-form-model-item></a-col>
  8. <a-col :xs="24" :sm="12" :md="6" :lg="5"><a-form-model-item label="手机号码" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol"><a-input allowClear placeholder="请输入手机号码" :maxLength="11" v-model.trim="queryParam.phone"/></a-form-model-item></a-col>
  9. <a-col :xs="24" :sm="12" :md="6" :lg="5"><a-form-model-item label="状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol"><v-select code="ENABLE_FLAG" v-model="queryParam.loginFlag" allowClear placeholder="请选择状态" ></v-select></a-form-model-item></a-col>
  10. <a-col :xs="24" :sm="12" :md="6" :lg="5">
  11. <a-button type="primary" @click="$refs.table.refresh(true)" id="userList-handSubmit" style="margin: 4px 10px 0 20px">查询</a-button>
  12. <a-button type="" @click="reset" id="userList-reset" style="margin-top: 4px">重置</a-button>
  13. </a-col>
  14. </a-row>
  15. </a-form-model>
  16. </div>
  17. <!-- 新增 -->
  18. <div class="table-operator">
  19. <a-button
  20. type="primary"
  21. icon="plus"
  22. @click="openModal"
  23. id="userList-openModal"
  24. v-hasPermission="'B_userManage_add'"
  25. style="margin-top: 18px;">新增</a-button>
  26. </div>
  27. <!-- 列表 -->
  28. <s-table
  29. ref="table"
  30. size="default"
  31. rowKey="id"
  32. :columns="columns"
  33. :data="loadData"
  34. bordered>
  35. <template slot="loginFlag" slot-scope="text, record">
  36. <span :class="record.loginFlag == 0 ? 'red' : record.loginFlag == 1 ? 'green' :'' ">{{ record.loginFlag == 0 ? '禁用' :record.loginFlag == 1 ? '启用' : '--' }}</span>
  37. </template>
  38. <span slot="action" slot-scope="text, record">
  39. <a-icon
  40. type="unlock"
  41. title="重置密码"
  42. class="actionBtn icon-orange"
  43. @click="resetPassword(record)" />
  44. <a-icon
  45. type="edit"
  46. title="编辑"
  47. class="actionBtn icon-blues"
  48. @click="handleEdit(record)"
  49. />
  50. <a-icon
  51. v-if="record.loginFlag == 0"
  52. type="delete"
  53. title="删除"
  54. class="actionBtn icon-red"
  55. @click="delect(record)"/>
  56. <!-- <span v-if="!$hasPermissions('B_userManage_edit') && !($hasPermissions('B_userManage_resetPwd') && record.loginFlag==1) && !($hasPermissions('B_userManage_del') && record.loginFlag==0) ">--</span> -->
  57. </span>
  58. </s-table>
  59. <!-- 新增、编辑弹窗 -->
  60. <addDiverModal :visible="showModal" @refresh="$refs.table.refresh(true)" :itemId="itemId" @close="cancel"></addDiverModal>
  61. </a-card>
  62. </template>
  63. <script>
  64. import {
  65. STable,
  66. VSelect
  67. } from '@/components'
  68. import addDiverModal from './addDiverModal.vue'
  69. import { resetPSD, getPowerUserList, delectUserPower } from '@/api/userManage.js'
  70. export default {
  71. name: 'DriverManage',
  72. components: {
  73. STable,
  74. VSelect,
  75. addDiverModal
  76. },
  77. data () {
  78. return {
  79. formItemLayout: {
  80. labelCol: {
  81. span: 7
  82. },
  83. wrapperCol: {
  84. span: 17
  85. }
  86. },
  87. // 查询参数
  88. queryParam: {
  89. name: '',
  90. phone: '',
  91. loginFlag: ''
  92. },
  93. showModal: false,
  94. itemId: null, // 编辑行id
  95. // 表头
  96. columns: [{
  97. title: '序号',
  98. dataIndex: 'no',
  99. width: 60,
  100. align: 'center'
  101. },
  102. {
  103. title: '司机姓名',
  104. dataIndex: 'createDate',
  105. width: 150,
  106. align: 'center'
  107. },
  108. {
  109. title: '手机号码',
  110. dataIndex: 'name',
  111. width: 100,
  112. align: 'center'
  113. },
  114. {
  115. title: '状态',
  116. dataIndex: 'loginFlag',
  117. width: 100,
  118. align: 'center',
  119. scopedSlots: {
  120. customRender: 'loginFlag'
  121. }
  122. },
  123. {
  124. title: '操作',
  125. width: 100,
  126. align: 'center',
  127. scopedSlots: {
  128. customRender: 'action'
  129. }
  130. }
  131. ],
  132. // 加载数据方法 必须为 Promise 对象
  133. loadData: parameter => {
  134. return getPowerUserList(Object.assign(parameter, this.queryParam)).then(res => {
  135. const no = (res.data.pageNo - 1) * res.data.pageSize
  136. for (let i = 0; i < res.data.list.length; i++) {
  137. const _item = res.data.list[i]
  138. _item.no = no + i + 1
  139. _item.loginFlag = _item.loginFlag + '' === '1'
  140. }
  141. return res.data
  142. })
  143. }
  144. }
  145. },
  146. // beforeRouteEnter (to, from, next) {
  147. // next(vm => {
  148. // vm.getSellerList()
  149. // })
  150. // },
  151. methods: {
  152. cancel () {
  153. this.itemId = null
  154. this.showModal = false
  155. },
  156. // 刷新列表
  157. refreshTable () {
  158. this.$refs.table.refresh(true)
  159. },
  160. // 新建
  161. openModal () {
  162. this.showModal = true
  163. this.itemData = {}
  164. },
  165. // 重置
  166. reset () {
  167. this.queryParam.name = ''
  168. this.queryParam.phone = ''
  169. this.queryParam.loginFlag = ''
  170. this.refreshTable()
  171. },
  172. // 重置密码
  173. resetPassword (row) {
  174. resetPSD({
  175. id: row.id
  176. }).then(res => {
  177. if (res.status == 200) {
  178. this.$message.success(res.message)
  179. }
  180. })
  181. },
  182. // 删除
  183. delect (row) {
  184. const _this = this
  185. this.$confirm({
  186. title: '警告',
  187. centered: true,
  188. content: '删除后无法恢复,确认删除?',
  189. okText: '确定',
  190. cancelText: '取消',
  191. onOk () {
  192. delectUserPower({
  193. id: row.id
  194. }).then(res => {
  195. if (res.status == 200) {
  196. _this.$message.success(res.message)
  197. _this.$refs.table.refresh()
  198. }
  199. })
  200. }
  201. })
  202. },
  203. // getBizStr (storeBizList) {
  204. // const str = []
  205. // storeBizList.forEach(item => {
  206. // str.push(item.bizTypeName)
  207. // })
  208. // return str.join(',')
  209. // },
  210. handleEdit (row) {
  211. console.log(row, 'row')
  212. this.itemId = row.id
  213. this.showModal = true
  214. }
  215. // 修改状态
  216. // changeFlagHandle (text, record) {
  217. // const _data = {
  218. // id: record.id,
  219. // flag: record.loginFlag ? '1' : '0'
  220. // }
  221. // updateEnableStatus(_data).then(res => {
  222. // if (res.status + '' === '200') {
  223. // this.$message.success(res.message)
  224. // } else {
  225. // record.loginFlag = !record.loginFlag
  226. // }
  227. // })
  228. // }
  229. }
  230. }
  231. </script>
  232. <style lang="less">
  233. .userManage-page-info{
  234. .userManage-search{
  235. .ant-form-inline .ant-form-item {
  236. width: 100%;
  237. }
  238. }
  239. }
  240. </style>