UserList.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 查询区域 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline">
  6. <a-row :gutter="24">
  7. <a-col :md="6" :sm="12">
  8. <a-form-item label="账号">
  9. <a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="12">
  13. <a-form-item label="姓名">
  14. <a-input placeholder="请输入姓名查询" v-model="queryParam.realname"></a-input>
  15. </a-form-item>
  16. </a-col>
  17. <a-col :md="6" :sm="8">
  18. <a-form-item label="性别">
  19. <a-select v-model="queryParam.sex" placeholder="请选择性别查询">
  20. <a-select-option value="">请选择性别查询</a-select-option>
  21. <a-select-option value="1">男性</a-select-option>
  22. <a-select-option value="2">女性</a-select-option>
  23. </a-select>
  24. </a-form-item>
  25. </a-col>
  26. <a-col :md="6" :sm="8">
  27. <a-form-item label="邮箱">
  28. <a-input placeholder="请输入邮箱查询" v-model="queryParam.email"></a-input>
  29. </a-form-item>
  30. </a-col>
  31. <a-col :md="6" :sm="8">
  32. <a-form-item label="手机号码">
  33. <a-input placeholder="请输入手机号码查询" v-model="queryParam.phone"></a-input>
  34. </a-form-item>
  35. </a-col>
  36. <a-col :md="6" :sm="8">
  37. <a-form-item label="状态">
  38. <a-select v-model="queryParam.status" placeholder="请选择用户状态查询">
  39. <a-select-option value="">请选择用户状态</a-select-option>
  40. <a-select-option value="1">正常</a-select-option>
  41. <a-select-option value="2">解冻</a-select-option>
  42. </a-select>
  43. </a-form-item>
  44. </a-col>
  45. <a-col :md="6" :sm="8">
  46. <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
  47. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  48. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  49. </span>
  50. </a-col>
  51. </a-row>
  52. </a-form>
  53. </div>
  54. <!-- 操作按钮区域 -->
  55. <div class="table-operator" style="border-top: 5px">
  56. <a-button @click="handleAdd" v-has="'user:add'" type="primary" icon="plus">添加用户</a-button>
  57. </div>
  58. <!-- table区域-begin -->
  59. <div>
  60. <a-table
  61. ref="table"
  62. bordered
  63. size="middle"
  64. rowKey="id"
  65. :columns="columns"
  66. :dataSource="dataSource"
  67. :pagination="ipagination"
  68. :loading="loading"
  69. @change="handleTableChange"
  70. >
  71. <template slot="avatarslot" slot-scope="text, record">
  72. <div class="anty-img-wrap">
  73. <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
  74. </div>
  75. </template>
  76. <template slot="leaderName" slot-scope="text, record">
  77. <span>
  78. {{ text ? text : '-' }}
  79. </span>
  80. </template>
  81. <span slot="action" slot-scope="text, record">
  82. <a @click="handleEdit(record)">编辑</a>
  83. <a-divider type="vertical" />
  84. <a-dropdown>
  85. <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
  86. <a-menu slot="overlay">
  87. <a-menu-item>
  88. <a href="javascript:;" @click="handleDetail(record)">详情</a>
  89. </a-menu-item>
  90. <a-menu-item>
  91. <a href="javascript:;" @click="handleChangePassword(record.username)">密码</a>
  92. </a-menu-item>
  93. <a-menu-item>
  94. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  95. <a>删除</a>
  96. </a-popconfirm>
  97. </a-menu-item>
  98. <a-menu-item v-if="record.status == 1">
  99. <a-popconfirm title="确定冻结吗?" @confirm="() => handleFrozen(record.id, 2)">
  100. <a>冻结</a>
  101. </a-popconfirm>
  102. </a-menu-item>
  103. <a-menu-item v-if="record.status == 2">
  104. <a-popconfirm title="确定解冻吗?" @confirm="() => handleFrozen(record.id, 1)">
  105. <a>解冻</a>
  106. </a-popconfirm>
  107. </a-menu-item>
  108. <a-menu-item>
  109. <a href="javascript:;" @click="handleAgentSettings(record.username)">代理人</a>
  110. </a-menu-item>
  111. </a-menu>
  112. </a-dropdown>
  113. </span>
  114. </a-table>
  115. </div>
  116. <!-- table区域-end -->
  117. <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
  118. <password-modal ref="passwordmodal" @ok="passwordModalOk"></password-modal>
  119. <sys-user-agent-modal ref="sysUserAgentModal"></sys-user-agent-modal>
  120. </a-card>
  121. </template>
  122. <script>
  123. import UserModal from './modules/UserModal'
  124. import PasswordModal from './modules/PasswordModal'
  125. import { putAction } from '@/api/manage'
  126. import { frozenBatch } from '@/api/api'
  127. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  128. import SysUserAgentModal from './modules/SysUserAgentModal'
  129. export default {
  130. name: 'UserList',
  131. mixins: [JeecgListMixin],
  132. components: {
  133. SysUserAgentModal,
  134. UserModal,
  135. PasswordModal,
  136. },
  137. data() {
  138. return {
  139. description: '这是用户管理页面',
  140. queryParam: {},
  141. columns: [
  142. /*{
  143. title: '#',
  144. dataIndex: '',
  145. key:'rowIndex',
  146. width:60,
  147. align:"center",
  148. customRender:function (t,r,index) {
  149. return parseInt(index)+1;
  150. }
  151. },*/
  152. {
  153. title: '用户账号',
  154. align: 'center',
  155. dataIndex: 'username',
  156. width: 120,
  157. },
  158. {
  159. title: '真实姓名',
  160. align: 'center',
  161. width: 100,
  162. dataIndex: 'realname',
  163. },
  164. {
  165. title: '头像',
  166. align: 'center',
  167. width: 120,
  168. dataIndex: 'avatar',
  169. scopedSlots: { customRender: 'avatarslot' },
  170. },
  171. {
  172. title: '性别',
  173. align: 'center',
  174. width: 80,
  175. dataIndex: 'sex_dictText',
  176. sorter: true,
  177. },
  178. // {
  179. // title: '生日',
  180. // align: 'center',
  181. // width: 180,
  182. // dataIndex: 'birthday',
  183. // },
  184. {
  185. title: '手机号码',
  186. align: 'center',
  187. width: 100,
  188. dataIndex: 'phone',
  189. },
  190. {
  191. title: '邮箱',
  192. align: 'center',
  193. dataIndex: 'email',
  194. },
  195. {
  196. title: '汇报上级',
  197. align: 'center',
  198. dataIndex: 'leaderName',
  199. scopedSlots: { customRender: 'leaderName' },
  200. },
  201. {
  202. title: '所属部门',
  203. align: 'center',
  204. dataIndex: 'departName',
  205. scopedSlots: { customRender: 'departName' },
  206. },
  207. {
  208. title: '用户角色',
  209. align: 'center',
  210. dataIndex: 'roleName',
  211. scopedSlots: { customRender: 'roleName' },
  212. },
  213. {
  214. title: '状态',
  215. align: 'center',
  216. width: 80,
  217. dataIndex: 'status_dictText',
  218. },
  219. /* {
  220. title: '创建时间',
  221. align: "center",
  222. width: 150,
  223. dataIndex: 'createTime',
  224. sorter: true
  225. },*/
  226. {
  227. title: '操作',
  228. dataIndex: 'action',
  229. scopedSlots: { customRender: 'action' },
  230. align: 'center',
  231. width: 170,
  232. },
  233. ],
  234. url: {
  235. imgerver: window._CONFIG['domianURL'] + '/sys/common/view',
  236. syncUser: '/process/extActProcess/doSyncUser',
  237. list: '/sys/user/list',
  238. delete: '/sys/user/delete',
  239. deleteBatch: '/sys/user/deleteBatch',
  240. exportXlsUrl: '/sys/user/exportXls',
  241. importExcelUrl: 'sys/user/importExcel',
  242. },
  243. }
  244. },
  245. computed: {
  246. importExcelUrl: function () {
  247. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
  248. },
  249. },
  250. methods: {
  251. getAvatarView: function (avatar) {
  252. return this.url.imgerver + '/' + avatar
  253. },
  254. batchFrozen: function (status) {
  255. if (this.selectedRowKeys.length <= 0) {
  256. this.$message.warning('请选择一条记录!')
  257. return false
  258. } else {
  259. let ids = ''
  260. let that = this
  261. that.selectedRowKeys.forEach(function (val) {
  262. ids += val + ','
  263. })
  264. that.$confirm({
  265. title: '确认操作',
  266. content: '是否' + (status == 1 ? '解冻' : '冻结') + '选中账号?',
  267. onOk: function () {
  268. frozenBatch({ ids: ids, status: status }).then((res) => {
  269. if (res.success) {
  270. that.$message.success(res.message)
  271. that.loadData()
  272. that.onClearSelected()
  273. } else {
  274. that.$message.warning(res.message)
  275. }
  276. })
  277. },
  278. })
  279. }
  280. },
  281. handleMenuClick(e) {
  282. if (e.key == 1) {
  283. this.batchDel()
  284. } else if (e.key == 2) {
  285. this.batchFrozen(2)
  286. } else if (e.key == 3) {
  287. this.batchFrozen(1)
  288. }
  289. },
  290. handleFrozen: function (id, status) {
  291. let that = this
  292. frozenBatch({ ids: id, status: status }).then((res) => {
  293. if (res.success) {
  294. that.$message.success(res.message)
  295. that.loadData()
  296. } else {
  297. that.$message.warning(res.message)
  298. }
  299. })
  300. },
  301. handleChangePassword(username) {
  302. this.$refs.passwordmodal.show(username)
  303. },
  304. handleAgentSettings(username) {
  305. this.$refs.sysUserAgentModal.agentSettings(username)
  306. this.$refs.sysUserAgentModal.title = '用户代理人设置'
  307. },
  308. passwordModalOk() {
  309. //TODO 密码修改完成 不需要刷新页面,可以把datasource中的数据更新一下
  310. },
  311. },
  312. }
  313. </script>
  314. <style scoped>
  315. @import '~@assets/less/common.less';
  316. </style>