userList.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  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. <a-icon
  65. type="edit"
  66. title="编辑"
  67. :style="{fontSize: '20px',color:' #1890FF',padding:' 0 10px'}"
  68. @click="handleEdit(record)"
  69. />
  70. <a-icon
  71. type="unlock"
  72. title="重置密码"
  73. v-if="record.loginFlag==1"
  74. :style="{fontSize: '20px',color:' #08c0de',padding: '0 10px'}"
  75. @click="resetPassword(record)" />
  76. <a-icon
  77. type="delete"
  78. title="删除"
  79. :style="{fontSize: '20px',color: '#f00',padding: '0 10px'}"
  80. v-if="record.loginFlag==0"
  81. @click="delect(record)"/>
  82. </span>
  83. </s-table>
  84. <userModal :visible="showModal" @refresh="$refs.table.refresh(true)" :data="itemData" @close="showModal = false"></userModal>
  85. </a-card>
  86. </template>
  87. <script>
  88. import {
  89. STable,
  90. VSelect
  91. } from '@/components'
  92. import userModal from './userModal.vue'
  93. import {
  94. resetPSD,
  95. updateEnableStatus,
  96. getPowerUserList,
  97. delectUserPower
  98. } from '@/api/power-user.js'
  99. export default {
  100. name: 'UserList',
  101. components: {
  102. STable,
  103. VSelect,
  104. userModal
  105. },
  106. data () {
  107. return {
  108. // 查询参数
  109. queryParam: {
  110. name: '',
  111. phone: '',
  112. loginFlag: ''
  113. },
  114. showModal: false,
  115. itemData: {}, // 编辑行数据
  116. // 表头
  117. columns: [{
  118. title: '序号',
  119. dataIndex: 'no',
  120. width: 60,
  121. align: 'center'
  122. },
  123. {
  124. title: '创建时间',
  125. dataIndex: 'createDate',
  126. width: '120',
  127. align: 'center'
  128. },
  129. {
  130. title: '用户名称',
  131. dataIndex: 'name',
  132. width: '100',
  133. align: 'center'
  134. },
  135. {
  136. title: '手机号码',
  137. dataIndex: 'phone',
  138. width: '100',
  139. align: 'center'
  140. },
  141. {
  142. title: '角色',
  143. width: '100',
  144. align: 'center',
  145. dataIndex: 'roleNames'
  146. },
  147. {
  148. title: '状态',
  149. width: '100',
  150. align: 'center',
  151. scopedSlots: {
  152. customRender: 'status'
  153. }
  154. },
  155. {
  156. title: '操作',
  157. width: '100',
  158. align: 'center',
  159. scopedSlots: {
  160. customRender: 'action'
  161. }
  162. }
  163. ],
  164. // 加载数据方法 必须为 Promise 对象
  165. loadData: parameter => {
  166. return getPowerUserList(Object.assign(parameter, this.queryParam)).then(res => {
  167. const no = (res.data.pageNo - 1) * res.data.pageSize
  168. for (let i = 0; i < res.data.list.length; i++) {
  169. const _item = res.data.list[i]
  170. _item.no = no + i + 1
  171. _item.loginFlag = _item.loginFlag + '' === '1'
  172. }
  173. return res.data
  174. })
  175. },
  176. optionAlertShow: false
  177. }
  178. },
  179. beforeRouteEnter (to, from, next) {
  180. next(vm => {
  181. // vm.$refs.table.refresh()
  182. })
  183. },
  184. methods: {
  185. // 刷新列表
  186. refreshTable () {
  187. this.$refs.table.refresh(true)
  188. },
  189. // 新建
  190. openModal () {
  191. this.showModal = true
  192. this.itemData = {}
  193. },
  194. // 重置
  195. reset () {
  196. this.queryParam.name = ''
  197. this.queryParam.phone = '',
  198. this.queryParam.loginFlag = ''
  199. this.refreshTable()
  200. },
  201. // 重置密码
  202. resetPassword (row) {
  203. resetPSD({
  204. id: row.id
  205. }).then(res => {
  206. if (res.status == 200) {
  207. this.$message.success(res.message)
  208. }
  209. })
  210. },
  211. // 删除
  212. delect (row) {
  213. const _this = this
  214. this.$confirm({
  215. title: '警告',
  216. centered: true,
  217. content: '删除后无法恢复,确认删除?',
  218. okText: '确定',
  219. cancelText: '取消',
  220. onOk () {
  221. delectUserPower({
  222. id: row.id
  223. }).then(res => {
  224. if (res.status == 200) {
  225. _this.$message.success(res.message)
  226. _this.$refs.table.refresh()
  227. }
  228. })
  229. }
  230. })
  231. },
  232. getBizStr (storeBizList) {
  233. const str = []
  234. storeBizList.forEach(item => {
  235. str.push(item.bizTypeName)
  236. })
  237. return str.join(',')
  238. },
  239. handleEdit (row) {
  240. console.log(row, 'row')
  241. this.showModal = true
  242. this.itemData = row
  243. },
  244. // 修改状态
  245. changeFlagHandle (text, record) {
  246. const _data = {
  247. id: record.id,
  248. flag: record.loginFlag ? '1' : '0'
  249. }
  250. updateEnableStatus(_data).then(res => {
  251. if (res.status + '' === '200') {
  252. this.$message.success(res.message)
  253. } else {
  254. record.loginFlag = !record.loginFlag
  255. }
  256. })
  257. }
  258. }
  259. }
  260. </script>
  261. <style scoped>
  262. .table-page-search-wrapper .ant-form-inline .ant-form-item {
  263. margin-bottom: 0;
  264. }
  265. .action-button {
  266. line-height: 40px;
  267. white-space: nowrap;
  268. padding: 5px 10px;
  269. background-color: #1890ff;
  270. border-radius: 4px;
  271. color: #fff;
  272. margin-right: 5px;
  273. }
  274. .red-text {
  275. background-color: red;
  276. }
  277. .reset-text {
  278. background-color: #31b50b;
  279. }
  280. </style>