UserList.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 查询区域 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="searchQuery">
  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. <j-input placeholder="输入账号模糊查询" v-model="queryParam.username"></j-input>
  11. </a-form-item>
  12. </a-col>
  13. <a-col :md="6" :sm="8">
  14. <a-form-item label="性别">
  15. <a-select v-model="queryParam.sex" placeholder="请选择性别">
  16. <a-select-option value="">请选择</a-select-option>
  17. <a-select-option value="1">男性</a-select-option>
  18. <a-select-option value="2">女性</a-select-option>
  19. </a-select>
  20. </a-form-item>
  21. </a-col>
  22. <template v-if="toggleSearchStatus">
  23. <a-col :md="6" :sm="8">
  24. <a-form-item label="真实名字">
  25. <j-input placeholder="请输入真实名字" v-model="queryParam.realname"></j-input>
  26. </a-form-item>
  27. </a-col>
  28. <a-col :md="6" :sm="8">
  29. <a-form-item label="手机号码">
  30. <j-input placeholder="请输入手机号码查询" v-model="queryParam.phone"></j-input>
  31. </a-form-item>
  32. </a-col>
  33. <a-col :md="6" :sm="8">
  34. <a-form-item label="用户状态">
  35. <a-select v-model="queryParam.status" placeholder="请选择">
  36. <a-select-option value="">请选择</a-select-option>
  37. <a-select-option value="1">正常</a-select-option>
  38. <a-select-option value="2">冻结</a-select-option>
  39. </a-select>
  40. </a-form-item>
  41. </a-col>
  42. </template>
  43. <a-col :md="6" :sm="8">
  44. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  45. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  46. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  47. <a @click="handleToggleSearch" style="margin-left: 8px">
  48. {{ toggleSearchStatus ? '收起' : '展开' }}
  49. <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
  50. </a>
  51. </span>
  52. </a-col>
  53. </a-row>
  54. </a-form>
  55. </div>
  56. <!-- 操作按钮区域 -->
  57. <div class="table-operator" style="border-top: 5px">
  58. <a-button @click="handleAdd" type="primary" icon="plus">添加用户</a-button>
  59. <a-button @click="handleSyncUser" v-has="'user:syncbpm'" type="primary" icon="plus">同步流程</a-button>
  60. <a-button type="primary" icon="download" @click="handleExportXls('用户信息')">导出</a-button>
  61. <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
  62. <a-button type="primary" icon="import">导入</a-button>
  63. </a-upload>
  64. <a-button type="primary" icon="hdd" @click="recycleBinVisible=true">回收站</a-button>
  65. <a-dropdown v-if="selectedRowKeys.length > 0">
  66. <a-menu slot="overlay" @click="handleMenuClick">
  67. <a-menu-item key="1">
  68. <a-icon type="delete" @click="batchDel"/>
  69. 删除
  70. </a-menu-item>
  71. <a-menu-item key="2">
  72. <a-icon type="lock" @click="batchFrozen('2')"/>
  73. 冻结
  74. </a-menu-item>
  75. <a-menu-item key="3">
  76. <a-icon type="unlock" @click="batchFrozen('1')"/>
  77. 解冻
  78. </a-menu-item>
  79. <a-menu-item key="4">
  80. <a-icon type="edit" @click="showModal()"/>
  81. 变更社保/公积金基数
  82. </a-menu-item>
  83. </a-menu>
  84. <a-button style="margin-left: 8px">
  85. 批量操作
  86. <a-icon type="down"/>
  87. </a-button>
  88. </a-dropdown>
  89. </div>
  90. <div>
  91. <a-modal v-model:visible="userVisible" title="变更社保/公积金基数" @ok="handleOk">
  92. <p>社保基数</p>
  93. <p><a-input-number style="width: 100%;" placeholder="请输入社保基数" v-model="sheBao" :min="1" ></a-input-number></p>
  94. <p>公积金基数</p>
  95. <p><a-input-number style="width: 100%;" placeholder="请输入公积金基数" v-model="gongJiJin" :min="1" ></a-input-number></p>
  96. </a-modal>
  97. </div>
  98. <!-- table区域-begin -->
  99. <div>
  100. <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
  101. <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
  102. <a style="margin-left: 24px" @click="onClearSelected">清空</a>
  103. </div>
  104. <a-table
  105. ref="table"
  106. bordered
  107. size="middle"
  108. rowKey="id"
  109. :columns="columns"
  110. :dataSource="dataSource"
  111. :pagination="ipagination"
  112. :loading="loading"
  113. :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  114. @change="handleTableChange">
  115. <template slot="avatarslot" slot-scope="text, record, index">
  116. <div class="anty-img-wrap">
  117. <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
  118. </div>
  119. </template>
  120. <span slot="action" slot-scope="text, record">
  121. <a @click="handleEdit(record)">编辑</a>
  122. <a-divider type="vertical"/>
  123. <a-dropdown>
  124. <a class="ant-dropdown-link">
  125. 更多 <a-icon type="down"/>
  126. </a>
  127. <a-menu slot="overlay">
  128. <a-menu-item>
  129. <a href="javascript:;" @click="handleDetail(record)">详情</a>
  130. </a-menu-item>
  131. <a-menu-item>
  132. <a href="javascript:;" @click="handleChangePassword(record.username)">密码</a>
  133. </a-menu-item>
  134. <a-menu-item>
  135. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  136. <a>删除</a>
  137. </a-popconfirm>
  138. </a-menu-item>
  139. <a-menu-item v-if="record.status==1">
  140. <a-popconfirm title="确定冻结吗?" @confirm="() => handleFrozen(record.id,2,record.username)">
  141. <a>冻结</a>
  142. </a-popconfirm>
  143. </a-menu-item>
  144. <a-menu-item v-if="record.status==2">
  145. <a-popconfirm title="确定解冻吗?" @confirm="() => handleFrozen(record.id,1,record.username)">
  146. <a>解冻</a>
  147. </a-popconfirm>
  148. </a-menu-item>
  149. <a-menu-item>
  150. <a href="javascript:;" @click="handleAgentSettings(record.username)">代理人</a>
  151. </a-menu-item>
  152. </a-menu>
  153. </a-dropdown>
  154. </span>
  155. </a-table>
  156. </div>
  157. <!-- table区域-end -->
  158. <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
  159. <password-modal ref="passwordmodal" @ok="passwordModalOk"></password-modal>
  160. <sys-user-agent-modal ref="sysUserAgentModal"></sys-user-agent-modal>
  161. <!-- 用户回收站 -->
  162. <user-recycle-bin-modal :visible.sync="recycleBinVisible" @ok="modalFormOk"/>
  163. </a-card>
  164. </template>
  165. <script>
  166. import UserModal from './modules/UserModal'
  167. import PasswordModal from './modules/PasswordModal'
  168. import {putAction,getFileAccessHttpUrl} from '@/api/manage';
  169. import {frozenBatch} from '@/api/api'
  170. import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  171. import SysUserAgentModal from "./modules/SysUserAgentModal";
  172. import JInput from '@/components/jeecg/JInput'
  173. import UserRecycleBinModal from './modules/UserRecycleBinModal'
  174. export default {
  175. name: "UserList",
  176. mixins: [JeecgListMixin],
  177. components: {
  178. SysUserAgentModal,
  179. UserModal,
  180. PasswordModal,
  181. JInput,
  182. UserRecycleBinModal
  183. },
  184. data() {
  185. return {
  186. description: '这是用户管理页面',
  187. queryParam: {},
  188. recycleBinVisible: false,
  189. userVisible: false,
  190. sheBao: '',
  191. gongJiJin: '',
  192. ipagination:{
  193. pageSizeOptions: ["10", "20", "30", "300"]
  194. },
  195. isorter:{
  196. column: 'workNo',
  197. order: 'asc',
  198. },
  199. columns: [
  200. /*{
  201. title: '#',
  202. dataIndex: '',
  203. key:'rowIndex',
  204. width:60,
  205. align:"center",
  206. customRender:function (t,r,index) {
  207. return parseInt(index)+1;
  208. }
  209. },*/
  210. {
  211. title: '部门',
  212. align: "center",
  213. width: 180,
  214. dataIndex: 'orgCode'
  215. },
  216. {
  217. title: '用户姓名',
  218. align: "center",
  219. width: 100,
  220. dataIndex: 'realname',
  221. },
  222. {
  223. title: '工号',
  224. align: "center",
  225. width: 120,
  226. dataIndex: 'workNo',
  227. },
  228. {
  229. title: '身份证号',
  230. align: "center",
  231. width: 120,
  232. dataIndex: 'nidNo',
  233. },
  234. {
  235. title: '手机号码',
  236. align: "center",
  237. width: 100,
  238. dataIndex: 'phone'
  239. },
  240. {
  241. title: '公司',
  242. align: "center",
  243. width: 180,
  244. dataIndex: 'pkOrgName'
  245. },
  246. {
  247. title: '生日',
  248. align: "center",
  249. width: 100,
  250. dataIndex: 'birthday'
  251. },
  252. {
  253. title: '状态',
  254. align: "center",
  255. width: 80,
  256. dataIndex: 'status_dictText'
  257. },
  258. {
  259. title: '用户账号',
  260. align: "center",
  261. dataIndex: 'username',
  262. width: 120
  263. },
  264. // {
  265. // title: '头像',
  266. // align: "center",
  267. // width: 120,
  268. // dataIndex: 'avatar',
  269. // scopedSlots: {customRender: "avatarslot"}
  270. // },
  271. // {
  272. // title: '性别',
  273. // align: "center",
  274. // width: 80,
  275. // dataIndex: 'sex_dictText',
  276. // sorter: true
  277. // },
  278. {
  279. title: '操作',
  280. dataIndex: 'action',
  281. scopedSlots: {customRender: 'action'},
  282. align: "center",
  283. width: 170
  284. }
  285. ],
  286. url: {
  287. imgerver: window._CONFIG['staticDomainURL'],
  288. syncUser: "/process/extActProcess/doSyncUser",
  289. list: "/sys/user/list",
  290. delete: "/sys/user/delete",
  291. deleteBatch: "/sys/user/deleteBatch",
  292. updateUserBatch: "/sys/user/updateUserBatch",
  293. exportXlsUrl: "/sys/user/exportXls",
  294. importExcelUrl: "sys/user/importExcel",
  295. },
  296. }
  297. },
  298. computed: {
  299. importExcelUrl: function(){
  300. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
  301. }
  302. },
  303. methods: {
  304. getAvatarView: function (avatar) {
  305. return getFileAccessHttpUrl(avatar,this.url.imgerver,"http")
  306. },
  307. showModal: function () {
  308. this.gongJiJin = '';
  309. this.sheBao = '';
  310. this.userVisible = true;
  311. },
  312. handleOk() {
  313. let ids = "";
  314. let that = this;
  315. if(this.gongJiJin == '' && this.sheBao == ''){
  316. this.$message.warning('请填写要修改的数据!');
  317. return false;
  318. }else{
  319. if (this.selectedRowKeys.length <= 0) {
  320. this.$message.warning('请选择一条记录!');
  321. return false;
  322. }else{
  323. that.selectedRowKeys.forEach(function (val) {
  324. ids += val + ",";
  325. });
  326. putAction(this.url.updateUserBatch, {ids:ids,gongJiJin:this.gongJiJin,sheBao:this.sheBao}).then((res) => {
  327. if (res.success) {
  328. that.$message.success("操作成功");
  329. that.loadData();
  330. } else {
  331. that.$message.warning(res.message);
  332. that.loadData();
  333. }
  334. }).finally(() => {
  335. that.gongJiJin = '';
  336. that.sheBao = '';
  337. that.selectedRowKeys = [];
  338. })
  339. }
  340. }
  341. console.log(this.gongJiJin);
  342. console.log(this.sheBao);
  343. this.userVisible = false;
  344. },
  345. batchFrozen: function (status) {
  346. if (this.selectedRowKeys.length <= 0) {
  347. this.$message.warning('请选择一条记录!');
  348. return false;
  349. } else {
  350. let ids = "";
  351. let that = this;
  352. let isAdmin = false;
  353. that.selectionRows.forEach(function (row) {
  354. if (row.username == 'admin') {
  355. isAdmin = true;
  356. }
  357. });
  358. if (isAdmin) {
  359. that.$message.warning('管理员账号不允许此操作,请重新选择!');
  360. return;
  361. }
  362. that.selectedRowKeys.forEach(function (val) {
  363. ids += val + ",";
  364. });
  365. that.$confirm({
  366. title: "确认操作",
  367. content: "是否" + (status == 1 ? "解冻" : "冻结") + "选中账号?",
  368. onOk: function () {
  369. frozenBatch({ids: ids, status: status}).then((res) => {
  370. if (res.success) {
  371. that.$message.success(res.message);
  372. that.loadData();
  373. that.onClearSelected();
  374. } else {
  375. that.$message.warning(res.message);
  376. }
  377. });
  378. }
  379. });
  380. }
  381. },
  382. handleMenuClick(e) {
  383. if (e.key == 1) {
  384. this.batchDel();
  385. } else if (e.key == 2) {
  386. this.batchFrozen(2);
  387. } else if (e.key == 3) {
  388. this.batchFrozen(1);
  389. }else if (e.key == 4) {
  390. this.showModal();
  391. }
  392. },
  393. handleFrozen: function (id, status, username) {
  394. let that = this;
  395. //TODO 后台校验管理员角色
  396. if ('admin' == username) {
  397. that.$message.warning('管理员账号不允许此操作!');
  398. return;
  399. }
  400. frozenBatch({ids: id, status: status}).then((res) => {
  401. if (res.success) {
  402. that.$message.success(res.message);
  403. that.loadData();
  404. } else {
  405. that.$message.warning(res.message);
  406. }
  407. });
  408. },
  409. handleChangePassword(username) {
  410. this.$refs.passwordmodal.show(username);
  411. },
  412. handleAgentSettings(username){
  413. this.$refs.sysUserAgentModal.agentSettings(username);
  414. this.$refs.sysUserAgentModal.title = "用户代理人设置";
  415. },
  416. handleSyncUser() {
  417. },
  418. passwordModalOk() {
  419. //TODO 密码修改完成 不需要刷新页面,可以把datasource中的数据更新一下
  420. }
  421. }
  422. }
  423. </script>
  424. <style scoped>
  425. @import '~@assets/less/common.less'
  426. </style>