authUser.vue 11 KB

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