UserManage.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  1. <template>
  2. <div class="user-manage">
  3. <div class="part-box part-box-filter part-box-flex">
  4. <el-form ref="FilterForm" label-position="left" label-width="85px" inline>
  5. <template v-if="checkPrivilege('condition', 'condition')">
  6. <el-form-item label="用户名:" label-width="75px">
  7. <el-input
  8. style="width: 142px;"
  9. v-model.trim="filter.loginName"
  10. placeholder="请输入内容"
  11. clearable
  12. ></el-input>
  13. </el-form-item>
  14. <el-form-item label="姓名:" label-width="75px">
  15. <el-input
  16. style="width: 142px;"
  17. v-model.trim="filter.realName"
  18. placeholder="请输入内容"
  19. clearable
  20. ></el-input>
  21. </el-form-item>
  22. <el-form-item label="角色:" label-width="55px">
  23. <el-select
  24. v-model="filter.roleId"
  25. style="width: 142px;"
  26. placeholder="请选择"
  27. filterable
  28. clearable
  29. >
  30. <el-option
  31. v-for="item in roles"
  32. :key="item.id"
  33. :value="item.id"
  34. :label="item.name"
  35. ></el-option>
  36. </el-select>
  37. </el-form-item>
  38. <el-form-item label="启用/禁用:" label-width="90px">
  39. <el-select
  40. v-model="filter.enable"
  41. style="width: 142px;"
  42. placeholder="请选择"
  43. clearable
  44. >
  45. <el-option
  46. v-for="(val, key) in ABLE_TYPE"
  47. :key="key"
  48. :value="key * 1"
  49. :label="val"
  50. ></el-option>
  51. </el-select>
  52. </el-form-item>
  53. </template>
  54. <el-form-item label-width="0px">
  55. <el-button
  56. v-if="checkPrivilege('button', 'select')"
  57. type="primary"
  58. icon="el-icon-search"
  59. @click="toPage(1)"
  60. >查询</el-button
  61. >
  62. </el-form-item>
  63. </el-form>
  64. <div class="part-box-action">
  65. <el-button
  66. v-if="checkPrivilege('button', 'add')"
  67. type="primary"
  68. icon="el-icon-circle-plus-outline"
  69. @click="toAdd"
  70. >新增用户</el-button
  71. >
  72. <el-button v-if="checkPrivilege('button', 'export')"
  73. ><a :href="downloadUrl" :download="dfilename">模板下载</a></el-button
  74. >
  75. <upload-button
  76. v-if="checkPrivilege('button', 'export')"
  77. btn-icon="el-icon-upload"
  78. btn-content="批量导入"
  79. btn-type="primary"
  80. :upload-url="uploadUrl"
  81. :format="['xls', 'xlsx']"
  82. @upload-error="uplaodError"
  83. @upload-success="uploadSuccess"
  84. style="margin: 0;"
  85. >
  86. </upload-button>
  87. </div>
  88. </div>
  89. <div class="part-box">
  90. <el-table ref="TableList" :data="users" border stripe>
  91. <el-table-column
  92. type="index"
  93. label="序号"
  94. width="70"
  95. align="center"
  96. :index="indexMethod"
  97. ></el-table-column>
  98. <el-table-column prop="loginName" label="用户名"></el-table-column>
  99. <el-table-column
  100. prop="realName"
  101. label="姓名"
  102. width="120"
  103. ></el-table-column>
  104. <el-table-column prop="workNo" label="工号"></el-table-column>
  105. <el-table-column
  106. prop="mobileNumber"
  107. label="手机号"
  108. width="120"
  109. ></el-table-column>
  110. <el-table-column prop="orgName" label="所在机构"></el-table-column>
  111. <el-table-column prop="roles" label="角色">
  112. <template slot-scope="scope">
  113. {{ scope.row.roles | rolesFilter }}
  114. </template>
  115. </el-table-column>
  116. <el-table-column prop="enable" label="状态" width="100">
  117. <template slot-scope="scope">
  118. {{ scope.row.enable | enableFilter }}
  119. </template>
  120. </el-table-column>
  121. <el-table-column
  122. class-name="action-column"
  123. label="操作"
  124. align="center"
  125. width="120px"
  126. >
  127. <template slot-scope="scope">
  128. <el-button
  129. v-if="checkPrivilege('link', 'edit')"
  130. class="btn-table-icon"
  131. type="text"
  132. icon="icon icon-edit"
  133. @click="toEdit(scope.row)"
  134. title="编辑"
  135. ></el-button>
  136. <el-button
  137. v-if="checkPrivilege('link', 'enable')"
  138. class="btn-table-icon"
  139. type="text"
  140. :icon="
  141. scope.row.enable
  142. ? 'icon icon-circle-stop'
  143. : 'icon icon-circle-caret-right'
  144. "
  145. @click="toEnable(scope.row)"
  146. :title="scope.row.enable ? '禁用' : '启用'"
  147. ></el-button>
  148. <el-button
  149. v-if="checkPrivilege('link', 'reset')"
  150. class="btn-table-icon"
  151. type="text"
  152. icon="icon icon-circle-lock"
  153. @click="toResetPwd(scope.row)"
  154. title="重置密码"
  155. ></el-button>
  156. </template>
  157. </el-table-column>
  158. </el-table>
  159. <div class="part-page">
  160. <el-pagination
  161. background
  162. layout="total,prev, pager, next"
  163. :current-page="current"
  164. :total="total"
  165. :page-size="size"
  166. @current-change="toPage"
  167. >
  168. </el-pagination>
  169. </div>
  170. </div>
  171. <!-- ModifyUser -->
  172. <modify-user
  173. ref="ModifyUser"
  174. :instance="curUser"
  175. :roles="roles"
  176. @modified="getList"
  177. ></modify-user>
  178. </div>
  179. </template>
  180. <script>
  181. import ModifyUser from "../components/ModifyUser";
  182. import { ABLE_TYPE } from "@/constants/enumerate";
  183. import { userListPage, ableUser, resetPwd, userRoleListPage } from "../api";
  184. // import { logout } from "@/modules/login/api";
  185. import UploadButton from "../../../components/UploadButton";
  186. export default {
  187. name: "user-manage",
  188. components: { ModifyUser, UploadButton },
  189. data() {
  190. return {
  191. filter: {
  192. loginName: "",
  193. realName: "",
  194. roleId: "",
  195. enable: ""
  196. },
  197. current: 1,
  198. size: this.GLOBAL.pageSize,
  199. total: 0,
  200. visible: false,
  201. ABLE_TYPE,
  202. roles: [],
  203. users: [],
  204. curUser: {},
  205. // import
  206. uploadUrl: "/api/admin/sys/user/import",
  207. downloadUrl: "/temps/用户导入模板.xlsx",
  208. dfilename: "用户导入模板.xlsx"
  209. };
  210. },
  211. mounted() {
  212. this.getRoleList();
  213. this.getList();
  214. },
  215. methods: {
  216. async getRoleList() {
  217. if (
  218. !this.checkPrivilege("button", "add") &&
  219. !this.checkPrivilege("link", "edit")
  220. )
  221. return;
  222. const data = await userRoleListPage();
  223. this.roles = data || [];
  224. this.roles = this.roles.filter(item => item.type !== "ADMIN");
  225. },
  226. async getList() {
  227. if (!this.checkPrivilege("list", "list")) return;
  228. const datas = {
  229. ...this.filter,
  230. pageNumber: this.current,
  231. pageSize: this.size
  232. };
  233. if (datas.enable !== null && datas.enable !== "")
  234. datas.enable = !!datas.enable;
  235. const data = await userListPage(datas);
  236. this.users = data.records;
  237. this.total = data.total;
  238. },
  239. toPage(page) {
  240. this.current = page;
  241. this.getList();
  242. },
  243. toEnable(row) {
  244. // 自己不可以启用/禁用自己
  245. const userId = this.$ls.get("user", { id: "" }).id;
  246. if (row.id === userId) {
  247. this.$message.error("不可以启用/禁用自己!");
  248. return;
  249. }
  250. const action = row.enable ? "禁用" : "启用";
  251. this.$confirm(`确定要${action}用户【${row.realName}】吗?`, "提示", {
  252. cancelButtonClass: "el-button--danger is-plain",
  253. confirmButtonClass: "el-button--primary",
  254. type: "warning"
  255. })
  256. .then(async () => {
  257. const enable = !row.enable;
  258. await ableUser({
  259. id: row.id,
  260. enable
  261. });
  262. row.enable = enable;
  263. this.$message.success("操作成功!");
  264. })
  265. .catch(() => {});
  266. },
  267. toEdit(row) {
  268. this.curUser = row;
  269. this.$refs.ModifyUser.open();
  270. },
  271. toAdd() {
  272. this.curUser = {};
  273. this.$refs.ModifyUser.open();
  274. },
  275. async toResetPwd(row) {
  276. await resetPwd(row.id);
  277. this.$message.success("密码重置成功!");
  278. // 修改自己时,会强制重新登录
  279. // const userId = this.$ls.get("user", { id: "" }).id;
  280. // if (row.id !== userId) return;
  281. // this.toLogout();
  282. },
  283. // async toLogout() {
  284. // await logout();
  285. // this.$ls.clear();
  286. // this.$router.push({ name: "Login" });
  287. // this.$message.info("您的密码已经变更,请重新登录系统!");
  288. // },
  289. // import
  290. uplaodError(errorData) {
  291. this.$notify.error({ title: "错误提示", message: errorData.message });
  292. },
  293. uploadSuccess() {
  294. this.getList();
  295. }
  296. }
  297. };
  298. </script>