userList.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  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.name"
  11. placeholder="请输入用户名称"
  12. id="userList-name"
  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.phone"
  22. placeholder="请输入手机号码"
  23. :maxLength="11"
  24. id="userList-phone"
  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="ENABLE_FLAG" v-model="queryParam.loginFlag" allowClear placeholder="请选择状态" id="userList-check-enable-state"></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. <a-divider />
  41. <div class="table-operator">
  42. <a-button type="primary" icon="plus" @click="openModal" id="userList-openModal">新建</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. checkedChildren="启用"
  54. unCheckedChildren="禁用"
  55. v-model="record.loginFlag"
  56. @change="changeFlagHandle(text, record)"
  57. id="userList-changeFlagHandle" />
  58. </span>
  59. <div slot="roleNames" slot-scope="text, record" :title="record.roleNames">
  60. <span v-if="record.roleNames">{{ record.roleNames.substr(0,12) + '...' }}</span>
  61. <span v-else>无</span>
  62. </div>
  63. <span slot="action" slot-scope="text, record">
  64. <template>
  65. <div>
  66. <a class="action-button" @click="handleEdit(record)" id="userList-handleEdit">修改</a>
  67. <a v-if="record.loginFlag" class="action-button reset-text" @click="resetPassword(record)" id="userList-resetPassword">重置密码</a>
  68. <a v-if="!record.loginFlag" class="action-button red-text" @click="delect(record)" id="userList-delect">删除</a>
  69. </div>
  70. </template>
  71. </span>
  72. </s-table>
  73. <userModal :visible="showModal" @refresh="$refs.table.refresh(true)" :data="itemData" @close="showModal = false"></userModal>
  74. </a-card>
  75. </template>
  76. <script>
  77. import {
  78. STable,
  79. VSelect
  80. } from '@/components'
  81. import userModal from './userModal.vue'
  82. import {
  83. resetPSD,
  84. updateEnableStatus,
  85. getPowerUserList,
  86. delectUserPower
  87. } from '@/api/power-user.js'
  88. export default {
  89. name: 'UserList',
  90. components: {
  91. STable,
  92. VSelect,
  93. userModal
  94. },
  95. data () {
  96. return {
  97. // 查询参数
  98. queryParam: {
  99. name: '',
  100. phone: '',
  101. loginFlag: ''
  102. },
  103. showModal: false,
  104. itemData: {}, // 编辑行数据
  105. // 表头
  106. columns: [{
  107. title: '序号',
  108. dataIndex: 'no',
  109. width: 60,
  110. align: 'center'
  111. },
  112. {
  113. title: '创建时间',
  114. dataIndex: 'createDate',
  115. width: '120',
  116. align: 'center'
  117. },
  118. {
  119. title: '用户名称',
  120. dataIndex: 'name',
  121. width: '100',
  122. align: 'center'
  123. },
  124. {
  125. title: '手机号码',
  126. dataIndex: 'phone',
  127. width: '100',
  128. align: 'center'
  129. },
  130. {
  131. title: '角色',
  132. width: '100',
  133. align: 'center',
  134. scopedSlots: {
  135. customRender: 'roleNames'
  136. }
  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 getPowerUserList(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.name = ''
  188. this.queryParam.phone = '',
  189. this.queryParam.loginFlag = ''
  190. this.refreshTable()
  191. },
  192. // 重置密码
  193. resetPassword (row) {
  194. resetPSD({
  195. id: row.id
  196. }).then(res => {
  197. if (res.status == 200) {
  198. this.$message.success('密码重置成功')
  199. } else {
  200. this.$message.error(res.message)
  201. }
  202. }).catch(() => {
  203. this.$message.success('密码重置失败, 请稍后重试')
  204. })
  205. },
  206. // 删除
  207. delect (row) {
  208. const _this = this
  209. this.$confirm({
  210. title: '警告',
  211. content: '删除后无法恢复,确认删除?',
  212. okText: '确定',
  213. cancelText: '取消',
  214. onOk () {
  215. delectUserPower({
  216. id: row.id
  217. }).then(res => {
  218. if (res.status == 200) {
  219. _this.$message.success('删除成功')
  220. _this.$refs.table.refresh()
  221. } else {
  222. _this.$message.error(res.message)
  223. }
  224. }).catch(() => {
  225. _this.$message.success('删除失败, 请稍后重试')
  226. })
  227. }
  228. })
  229. },
  230. getBizStr (storeBizList) {
  231. const str = []
  232. storeBizList.forEach(item => {
  233. str.push(item.bizTypeName)
  234. })
  235. return str.join(',')
  236. },
  237. handleEdit (row) {
  238. console.log(row, 'row')
  239. this.showModal = true
  240. this.itemData = row
  241. },
  242. // 修改状态
  243. changeFlagHandle (text, record) {
  244. const _data = {
  245. id: record.id,
  246. flag: record.loginFlag ? '1' : '0'
  247. }
  248. updateEnableStatus(_data).then(res => {
  249. if (res.status + '' === '200') {
  250. this.$message.success('修改成功')
  251. } else {
  252. record.loginFlag = !record.loginFlag
  253. }
  254. })
  255. }
  256. }
  257. }
  258. </script>
  259. <style scoped>
  260. .table-page-search-wrapper .ant-form-inline .ant-form-item {
  261. margin-bottom: 0;
  262. }
  263. .action-button {
  264. line-height: 40px;
  265. white-space: nowrap;
  266. padding: 5px 10px;
  267. background-color: #1890ff;
  268. border-radius: 4px;
  269. color: #fff;
  270. margin-right: 5px;
  271. }
  272. .red-text {
  273. background-color: red;
  274. }
  275. .reset-text {
  276. background-color: #31b50b;
  277. }
  278. </style>