authUser.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. <!--分配用户-->
  2. <template>
  3. <div class="role-auth-user">
  4. <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" class="form-box">
  5. <el-form-item style="margin-right:20px;">
  6. <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
  7. </el-form-item>
  8. <el-col :span="1.5" style="margin-right:20px;">
  9. <p class="add-button-one-120"
  10. @click="openSelectUser"
  11. ><i class="el-icon-plus"></i>添加用户</p>
  12. </el-col>
  13. <el-form-item label="姓名" prop="nickName">
  14. <el-input
  15. v-model="queryParams.nickName"
  16. placeholder="请输入姓名"
  17. clearable
  18. maxlength="10"
  19. size="small"
  20. style="width: 240px"
  21. />
  22. </el-form-item>
  23. <!--<el-form-item label="身份" prop="dictType">-->
  24. <!--<el-select v-model="queryParams.userType" placeholder="请选择身份" clearable size="small">-->
  25. <!--<el-option-->
  26. <!--v-for="dict in userTypeList"-->
  27. <!--:key="dict.deptId"-->
  28. <!--:label="dict.deptName"-->
  29. <!--:value="dict.deptId"-->
  30. <!--&gt;</el-option>-->
  31. <!--</el-select>-->
  32. <!--</el-form-item>-->
  33. <el-form-item label="工号/学号" prop="userName">
  34. <el-input
  35. v-model="queryParams.userName"
  36. placeholder="请输入工号/学号"
  37. clearable
  38. maxlength="20"
  39. size="small"
  40. style="width: 240px"
  41. />
  42. </el-form-item>
  43. <el-form-item label="联系方式" prop="phonenumber">
  44. <el-input
  45. v-model="queryParams.phonenumber"
  46. placeholder="请输入联系方式"
  47. clearable
  48. maxlength="13"
  49. size="small"
  50. style="width: 240px"
  51. />
  52. </el-form-item>
  53. <el-form-item label="学院" prop="deptId">
  54. <el-select v-model="queryParams.deptId" placeholder="请选择学院" clearable size="small">
  55. <el-option
  56. v-for="dict in deptOptions"
  57. :key="dict.deptId"
  58. :label="dict.deptName"
  59. :value="dict.deptId"
  60. ></el-option>
  61. </el-select>
  62. </el-form-item>
  63. <el-form-item>
  64. <p class="inquire-button-one" @click="handleQuery">查询</p>
  65. <p class="reset-button-one" @click="resetQuery">重置</p>
  66. </el-form-item>
  67. </el-form>
  68. <div class="sheet-expand-box">
  69. <i class="el-icon-warning" style="color:#0045AF;"></i>
  70. <p class="color_99">已选择 {{selectedNum}} 项</p>
  71. <p class="color_one cursor_hover" @click="selectPage">全选本页</p>
  72. <p class="color_warn cursor_hover" @click="clearSelection">清除选项</p>
  73. <p class="color_FF6666 border-solid-color-FF6666 cursor_hover"
  74. @click="cancelAuthUserAll">批量取消授权</p>
  75. </div>
  76. <el-table v-loading="loading" border :data="userList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
  77. <el-table-column type="selection" width="55" align="center" />
  78. <!--<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />-->
  79. <el-table-column label="姓名" prop="nickName" align="left" :show-overflow-tooltip="true" />
  80. <!--<el-table-column label="身份" prop="userType" align="left" :show-overflow-tooltip="true">-->
  81. <!--<template slot-scope="scope">-->
  82. <!--<p>{{scope.row.userType==11?'教职工':(scope.row.userType==22?'学生':'')}}</p>-->
  83. <!--</template>-->
  84. <!--</el-table-column>-->
  85. <el-table-column label="工号/学号" prop="userName" align="left" :show-overflow-tooltip="true" />
  86. <!--<el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />-->
  87. <el-table-column label="联系方式" prop="phonenumber" align="left" :show-overflow-tooltip="true" />
  88. <el-table-column label="学院" prop="deptName" align="left" :show-overflow-tooltip="true" />
  89. <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="160">
  90. <template slot-scope="scope">
  91. <div class="table-button-box">
  92. <p class="table-button-null"></p>
  93. <p class="table-button-p"
  94. @click="cancelAuthUser(scope.row)"
  95. >取消授权</p>
  96. <p class="table-button-null"></p>
  97. </div>
  98. </template>
  99. </el-table-column>
  100. </el-table>
  101. <pagination
  102. v-show="total>0"
  103. :total="total"
  104. layout="total, prev, pager, next, sizes, jumper"
  105. :page.sync="queryParams.pageNum"
  106. :limit.sync="queryParams.pageSize"
  107. @pagination="getList"
  108. />
  109. <select-user ref="select" :postId="postId" @ok="handleQuery" />
  110. </div>
  111. </template>
  112. <script>
  113. // import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
  114. import { positionByList, relieveUserByPosition, authUserCancelAll } from "@/api/system/user";
  115. import { listDepartments } from "@/api/system/dept";
  116. import selectUser from "./selectUser";
  117. export default {
  118. props: {
  119. postId: {},
  120. },
  121. name: "AuthUser",
  122. components: { selectUser },
  123. data() {
  124. return {
  125. // 遮罩层
  126. loading: true,
  127. // 选中用户组
  128. userIds: [],
  129. // 非多个禁用
  130. multiple: true,
  131. // 显示搜索条件
  132. showSearch: true,
  133. // 总条数
  134. total: 0,
  135. // 用户表格数据
  136. userList: [],
  137. // 状态数据字典
  138. statusOptions: [],
  139. //学院
  140. deptOptions:[],
  141. // 角色身份
  142. userTypeList:[
  143. {
  144. deptId:"11",
  145. deptName:"教职工"
  146. },
  147. {
  148. deptId:"22",
  149. deptName:"学生"
  150. },
  151. ],
  152. // 查询参数
  153. queryParams: {
  154. pageNum: 1,
  155. pageSize:20,
  156. deptId: '',
  157. userName: '',
  158. nickName: '',
  159. phonenumber: ''
  160. },
  161. //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
  162. selectedNum:0,
  163. };
  164. },
  165. created() {
  166. const postId = this.postId;
  167. // const roleId = this.$route.params && this.$route.params.roleId;
  168. if (postId) {
  169. this.queryParams.position = postId;
  170. this.getList();
  171. this.getDicts("sys_normal_disable").then(response => {
  172. this.statusOptions = response.data;
  173. });
  174. }
  175. this.getDeptList();
  176. },
  177. methods: {
  178. /** 查询学院列表 */
  179. getDeptList()
  180. {
  181. listDepartments().then(response => {
  182. // this.deptOptions = response.data;
  183. this.$set(this, 'deptOptions', response.data)
  184. });
  185. },
  186. //=========表格扩展选择器方法---开始=========
  187. //选择本页
  188. selectPage(){
  189. console.log(this.$refs.multipleTable)
  190. this.$refs.multipleTable.toggleAllSelection()
  191. // console.log(this.$refs.multipleTable.selection)
  192. },
  193. //清除选择
  194. clearSelection(){
  195. this.$refs.multipleTable.clearSelection()
  196. },
  197. /*===记录勾选数据===
  198. 需要再el-table 添加 :row-key="getRowKeys"
  199. 需要在selection 添加 :reserve-selection="true"
  200. */
  201. getRowKeys(row) {
  202. return row.id
  203. },
  204. //=========表格扩展选择器方法---结束=========
  205. //返回按钮
  206. backPage(){
  207. this.$parent.clickPage(1);
  208. },
  209. /** 查询授权用户列表 */
  210. getList() {
  211. this.loading = true;
  212. positionByList(this.queryParams).then(response => {
  213. this.userList = response.rows;
  214. this.total = response.total;
  215. this.loading = false;
  216. }
  217. );
  218. },
  219. // 返回按钮
  220. handleClose() {
  221. this.$store.dispatch("tagsView/delView", this.$route);
  222. this.$router.push({ path: "/system/role" });
  223. },
  224. /** 搜索按钮操作 */
  225. handleQuery() {
  226. this.queryParams.pageNum = 1;
  227. this.getList();
  228. },
  229. /** 重置按钮操作 */
  230. resetQuery() {
  231. this.$set(this.queryParams,'pageNum',1);
  232. this.$set(this.queryParams,'pageSize',20);
  233. this.$set(this.queryParams,'nickName','');
  234. this.$set(this.queryParams,'userName','');
  235. this.$set(this.queryParams,'phonenumber','');
  236. this.$set(this.queryParams,'deptId','');
  237. this.handleQuery();
  238. },
  239. // 多选框选中数据
  240. handleSelectionChange(selection) {
  241. this.selectedNum = selection.length;
  242. this.userIds = selection.map(item => item.userId)
  243. this.multiple = !selection.length
  244. },
  245. /** 打开授权用户表弹窗 */
  246. openSelectUser() {
  247. this.$refs.select.show();
  248. },
  249. /** 取消授权按钮操作 */
  250. cancelAuthUser(row) {
  251. const postId = this.postId;
  252. this.$confirm('确认要取消该用户的授权吗?', "警告", {
  253. confirmButtonText: "确定",
  254. cancelButtonText: "取消",
  255. type: "warning"
  256. }).then(function() {
  257. return relieveUserByPosition({ userId: row.userId, position: postId });
  258. }).then(() => {
  259. this.getList();
  260. this.msgSuccess("取消授权成功");
  261. }).catch(() => {});
  262. },
  263. /** 批量取消授权按钮操作 */
  264. cancelAuthUserAll(row) {
  265. if(this.multiple){
  266. return
  267. }
  268. const postId = this.postId;
  269. const userIds = this.userIds.join(",");
  270. this.$confirm('是否取消选中用户授权数据项?', "警告", {
  271. confirmButtonText: "确定",
  272. cancelButtonText: "取消",
  273. type: "warning"
  274. }).then(() => {
  275. return relieveUserByPosition({ position: postId, userIds: userIds });
  276. }).then(() => {
  277. this.getList();
  278. this.msgSuccess("取消授权成功");
  279. }).catch(() => {});
  280. }
  281. }
  282. };
  283. </script>
  284. <style scoped lang="scss">
  285. .role-auth-user {
  286. flex:1;
  287. display: flex!important;
  288. flex-direction: column;
  289. margin-top:9px;
  290. padding-bottom:8px;
  291. overflow: hidden;
  292. .form-box{
  293. }
  294. .button-box{
  295. width:120px;
  296. display: flex;
  297. }
  298. .sheet-expand-box{
  299. height:40px;
  300. display:flex;
  301. background:rgba(1,131,250,0.1);
  302. border-radius: 5px;
  303. margin-bottom:18px;
  304. font-size:14px;
  305. i{
  306. margin:10px 16px 0 14px;
  307. height:20px;
  308. width:20px;
  309. font-size:20px;
  310. display: block;
  311. }
  312. p{
  313. margin:0;
  314. }
  315. p:nth-child(2){
  316. width:132px;
  317. font-size:14px;
  318. height:40px;
  319. line-height:40px;
  320. }
  321. p:nth-child(3){
  322. width:60px;
  323. font-size:14px;
  324. height:40px;
  325. line-height:40px;
  326. margin-right:20px;
  327. }
  328. p:nth-child(4){
  329. width:60px;
  330. font-size:14px;
  331. height:40px;
  332. line-height:40px;
  333. margin-right:20px;
  334. }
  335. p:nth-child(5){
  336. font-size:14px;
  337. line-height:30px;
  338. width: 100px;
  339. height: 30px;
  340. border-radius: 6px;
  341. text-align: center;
  342. margin-top:5px;
  343. margin-right:20px;
  344. }
  345. p:nth-child(6){
  346. font-size:14px;
  347. line-height:30px;
  348. width: 100px;
  349. height: 30px;
  350. border-radius: 6px;
  351. text-align: center;
  352. margin-top:5px;
  353. }
  354. }
  355. }
  356. </style>