userList.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. <template>
  2. <a-card size="small" :bordered="false">
  3. <div class="table-page-search-wrapper">
  4. <a-form layout="inline">
  5. <a-row :gutter="15">
  6. <a-col :md="6" :sm="24">
  7. <a-form-item label="用户名称">
  8. <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入用户名称"/>
  9. </a-form-item>
  10. </a-col>
  11. <a-col :md="6" :sm="24">
  12. <a-form-item label="手机号码">
  13. <a-input allowClear v-model.trim="queryParam.phone" placeholder="请输入手机号码"/>
  14. </a-form-item>
  15. </a-col>
  16. <a-col :md="6" :sm="24">
  17. <a-form-item label="状态">
  18. <v-select code="CHECK_ENABLE_STATE" v-model="queryParam.loginFlag" allowClear placeholder="请选择状态"></v-select>
  19. </a-form-item>
  20. </a-col>
  21. <a-col :md="4" :sm="24">
  22. <a-button type="primary" @click="$refs.table.refresh(true)" style="margin-right: 10px;">查询</a-button>
  23. <a-button type="" @click="reset" id="roleList-reset">重置</a-button>
  24. </a-col>
  25. </a-row>
  26. </a-form>
  27. </div>
  28. <div class="table-operator">
  29. <!-- <a-button v-if="$hasPermissions('B_powerMD_user_add')" type="primary" class="button-error" @click="openModal">新增</a-button> -->
  30. <a-button type="primary" class="button-error" @click="openModal">新增</a-button>
  31. </div>
  32. <s-table
  33. ref="table"
  34. size="default"
  35. rowKey="id"
  36. :columns="columns"
  37. :data="loadData"
  38. style="word-break: break-all;"
  39. bordered
  40. >
  41. <span slot="status" slot-scope="text, record">
  42. <!-- <a-switch v-if="$hasPermissions('B_powerMD_user_enable')" checkedChildren="启用" unCheckedChildren="禁用" v-model="record.loginFlag" @change="changeFlagHandle(text, record)"/>
  43. <span v-else>{{ record.loginFlag==1?'已启用':'已禁用' }}</span> -->
  44. <a-switch checkedChildren="启用" unCheckedChildren="禁用" v-model="record.loginFlag" @change="changeFlagHandle(text, record)"/>
  45. </span>
  46. <span slot="action" slot-scope="text, record">
  47. <!-- <a-icon
  48. type="edit"
  49. title="编辑"
  50. :style="{fontSize: '20px',color:' #1890FF',padding:' 0 10px'}"
  51. v-if="$hasPermissions('B_powerMD_user_edit')"
  52. @click="handleEdit(record)"
  53. />
  54. <a-icon
  55. type="unlock"
  56. title="重置密码"
  57. v-if="record.loginFlag==1 && $hasPermissions('B_powerMD_user_restPwd')"
  58. :style="{fontSize: '20px',color:' #ffaa00',padding: '0 10px'}"
  59. @click="resetPassword(record)" />
  60. <a-icon
  61. type="delete"
  62. title="删除"
  63. :style="{fontSize: '20px',color: '#f00',padding: '0 10px'}"
  64. v-if="record.loginFlag==0 && $hasPermissions('B_powerMD_user_del')"
  65. @click="delect(record)"/> -->
  66. <a-icon
  67. type="edit"
  68. title="编辑"
  69. :style="{fontSize: '20px',color:' #1890FF',padding:' 0 10px'}"
  70. @click="handleEdit(record)"
  71. />
  72. <a-icon
  73. type="unlock"
  74. title="重置密码"
  75. v-if="record.loginFlag==1"
  76. :style="{fontSize: '20px',color:' #ffaa00',padding: '0 10px'}"
  77. @click="resetPassword(record)" />
  78. <a-icon
  79. type="delete"
  80. title="删除"
  81. :style="{fontSize: '20px',color: '#f00',padding: '0 10px'}"
  82. v-if="record.loginFlag==0"
  83. @click="delect(record)"/>
  84. <a-icon
  85. type="setting"
  86. title="分区设置"
  87. :style="{fontSize: '20px',color:' #00aa00',padding: '0 10px'}"
  88. @click="handleSetting(record)" />
  89. </span>
  90. </s-table>
  91. <userModal :visible="showModal" @refresh="$refs.table.refresh(true)" :data="itemData" @close="showModal = false"></userModal>
  92. <!-- 分区设置 -->
  93. <UpdateArea ref="UpdateArea" :openUdModal="openUdModal" @ok="$refs.table.refresh(true)" @close="openUdModal=false"></UpdateArea>
  94. </a-card>
  95. </template>
  96. <script>
  97. import { STable, VSelect } from '@/components'
  98. import userModal from './userModal.vue'
  99. import { resetPSD, updateEnableStatus, getPowerUserList, delectUserPower } from '@/api/power-user.js'
  100. import UpdateArea from './updateAreal.vue'
  101. export default {
  102. name: 'UserList',
  103. components: {
  104. STable, VSelect, userModal, UpdateArea
  105. },
  106. data () {
  107. return {
  108. // 查询参数
  109. queryParam: {
  110. name: '',
  111. phone: '',
  112. loginFlag: ''
  113. },
  114. showModal: false,
  115. openUdModal: false,
  116. itemData: {}, // 编辑行数据
  117. // 表头
  118. columns: [
  119. {
  120. title: '序号',
  121. dataIndex: 'no',
  122. width: 80,
  123. align: 'center'
  124. },
  125. {
  126. title: '创建时间',
  127. dataIndex: 'createDate',
  128. width: 160,
  129. align: 'center'
  130. },
  131. {
  132. title: '用户账号',
  133. dataIndex: 'loginName',
  134. align: 'center'
  135. },
  136. {
  137. title: '用户名称',
  138. dataIndex: 'name',
  139. align: 'center'
  140. },
  141. {
  142. title: '手机号码',
  143. dataIndex: 'phone',
  144. width: 120,
  145. align: 'center'
  146. },
  147. {
  148. title: '所属分区',
  149. dataIndex: 'subareaName',
  150. align: 'center',
  151. customRender: function (text) { return text || '--' },
  152. ellipsis: true
  153. },
  154. {
  155. title: '角色',
  156. width: 200,
  157. align: 'center',
  158. dataIndex: 'roleNames'
  159. },
  160. {
  161. title: '状态',
  162. width: 120,
  163. align: 'center',
  164. scopedSlots: { customRender: 'status' }
  165. },
  166. {
  167. title: '操作',
  168. width: 160,
  169. align: 'center',
  170. scopedSlots: { customRender: 'action' }
  171. }
  172. ],
  173. // 加载数据方法 必须为 Promise 对象
  174. loadData: parameter => {
  175. return getPowerUserList(Object.assign(parameter, this.queryParam)).then(res => {
  176. const no = (res.data.pageNo - 1) * res.data.pageSize
  177. for (let i = 0; i < res.data.list.length; i++) {
  178. const _item = res.data.list[i]
  179. _item.no = no + i + 1
  180. _item.loginFlag = _item.loginFlag + '' === '1'
  181. }
  182. return res.data
  183. })
  184. },
  185. optionAlertShow: false
  186. }
  187. },
  188. methods: {
  189. // 刷新列表
  190. refreshTable () {
  191. this.$refs.table.refresh(true)
  192. },
  193. // 新增
  194. openModal () {
  195. this.showModal = true
  196. this.itemData = {}
  197. },
  198. // 重置
  199. reset () {
  200. this.queryParam.name = ''
  201. this.queryParam.phone = ''
  202. this.queryParam.loginFlag = ''
  203. this.refreshTable()
  204. },
  205. // 分区设置
  206. handleSetting (row) {
  207. this.openUdModal = true
  208. this.$refs.UpdateArea.setData(row)
  209. },
  210. // 重置密码
  211. resetPassword (row) {
  212. this.$confirm({
  213. title: '提示',
  214. content: '确认重置密码吗?',
  215. centered: true,
  216. onOk () {
  217. resetPSD({
  218. id: row.id
  219. }).then(res => {
  220. if (res.status == 200) {
  221. this.$message.success(res.message)
  222. } else {
  223. this.$message.error(res.message)
  224. }
  225. }).catch(() => {
  226. this.$message.success(res.message)
  227. })
  228. }
  229. })
  230. },
  231. // 删除
  232. delect (row) {
  233. const _this = this
  234. this.$confirm({
  235. title: '警告',
  236. content: '删除后无法恢复,确认删除?',
  237. centered: true,
  238. onOk () {
  239. delectUserPower({
  240. id: row.id
  241. }).then(res => {
  242. if (res.status == 200) {
  243. _this.$message.success(res.message)
  244. _this.$refs.table.refresh()
  245. } else {
  246. _this.$message.error(res.message)
  247. }
  248. }).catch(() => {
  249. _this.$message.success(res.message)
  250. })
  251. }
  252. })
  253. },
  254. getBizStr (storeBizList) {
  255. const str = []
  256. storeBizList.forEach(item => {
  257. str.push(item.bizTypeName)
  258. })
  259. return str.join(',')
  260. },
  261. handleEdit (row) {
  262. console.log(row, 'row')
  263. this.showModal = true
  264. this.itemData = row
  265. },
  266. // 修改状态
  267. changeFlagHandle (text, record) {
  268. const _data = {
  269. id: record.id,
  270. flag: record.loginFlag ? '1' : '0'
  271. }
  272. updateEnableStatus(_data).then(res => {
  273. if (res.status + '' === '200') {
  274. this.$message.success(res.message)
  275. } else {
  276. record.loginFlag = !record.loginFlag
  277. }
  278. })
  279. }
  280. }
  281. }
  282. </script>
  283. <style scoped>
  284. .action-button{
  285. line-height: 40px;
  286. white-space: nowrap;
  287. padding: 5px 10px;
  288. background-color: #1890ff;
  289. border-radius: 4px;
  290. color: #fff;
  291. margin-right: 5px;
  292. }
  293. .red-text{
  294. background-color: red;
  295. }
  296. .reset-text {
  297. background-color: #31b50b;
  298. }
  299. </style>