分页修改

library/build/unplugin/auto-imports.d.ts

@@ -17,6 +17,7 @@ declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const ElLoading: typeof import('element-plus/es')['ElLoading']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']

src/api/userManagement.ts

@@ -52,3 +52,33 @@ export function changeUserStatus(userId: any, status: any) {
     data,
   })
 }
+
+// 用户密码重置
+export function resetUserPwd(userId: any, password: any) {
+  const data = {
+    userId,
+    password,
+  }
+  return request({
+    url: '/system/user/resetPwd',
+    method: 'put',
+    data,
+  })
+}
+
+// 查询授权角色
+export function getAuthRole(userId: any) {
+  return request({
+    url: `/system/user/authRole/${userId}`,
+    method: 'get',
+  })
+}
+
+// 保存授权角色
+export function updateAuthRole(data: any) {
+  return request({
+    url: '/system/user/authRole',
+    method: 'put',
+    params: data,
+  })
+}

src/router/index.ts

@@ -247,11 +247,25 @@ export const customRoutes: VabRouteRecord[] = [
     },
     children: [
       {
+        path: 'userManagement/authRole/:userId',
+        component: '/@/views/system/userManagement/authRole.vue',
+        name: 'AuthRole',
+        meta: {
+          hidden: true,
+          icon: 'admin-line',
+          title: '分配角色',
+          noKeepAlive: true,
+          dynamicNewTab: true,
+          activeMenu: '/system/userManagement',
+        },
+      },
+      {
         path: 'roleManagement/authUser/:roleId',
         component: '/@/views/system/roleManagement/authUser.vue',
         name: 'AuthUser',
         meta: {
           hidden: true,
+          icon: 'user-3-line',
           title: '分配用户',
           noKeepAlive: true,
           dynamicNewTab: true,

src/views/system/userManagement/authRole.vue

+<template>
+  <div class="auto-height-container">
+    <h4 class="form-header h4">基本信息</h4>
+    <el-form label-width="80px" :model="form">
+      <el-row>
+        <el-col :offset="2" :span="8">
+          <el-form-item label="用户昵称" prop="nickName">
+            <el-input v-model="form.nickName" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :offset="2" :span="8">
+          <el-form-item label="登录账号" prop="userName">
+            <el-input v-model="form.userName" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <h4 class="form-header h4">角色信息</h4>
+    <el-table
+      ref="roleRef"
+      v-loading="loading"
+      :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
+      :row-key="getRowKey"
+      @row-click="clickRow"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column align="center" label="序号" type="index" width="55">
+        <template #default="scope">
+          <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :reserve-selection="true" type="selection" width="55" />
+      <el-table-column align="center" label="角色编号" prop="roleId" />
+      <el-table-column align="center" label="角色名称" prop="roleName" />
+      <el-table-column align="center" label="权限字符" prop="roleKey" />
+      <el-table-column align="center" label="创建时间" prop="createTime" width="180" />
+    </el-table>
+
+    <vab-pagination
+      :current-page="pageNum"
+      :page-size="pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+
+    <el-form label-width="100px">
+      <div style="margin-top: 30px; margin-left: -120px; text-align: center">
+        <el-button type="primary" @click="submitForm()">提交</el-button>
+        <el-button @click="close()">返回</el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getAuthRole, updateAuthRole } from '/@/api/userManagement'
+import { useTabsStore } from '/@/store/modules/tabs'
+
+defineOptions({
+  name: 'AuthRole',
+})
+
+const route = useRoute()
+const router = useRouter()
+const tabStore = useTabsStore()
+const { delVisitedRoute } = tabStore
+const { proxy } = getCurrentInstance() as any
+
+const loading = ref(true)
+const total = ref(0)
+const pageNum = ref(1)
+const pageSize = ref(10)
+const roleIds = ref([])
+const roles = ref([])
+const form = ref({
+  nickName: undefined,
+  userName: undefined,
+  userId: undefined,
+})
+
+const handleSizeChange = (value: number) => {
+  pageNum.value = 1
+  pageSize.value = value
+  // fetchData()
+}
+
+const handleCurrentChange = (value: number) => {
+  pageNum.value = value
+  // fetchData()
+}
+
+/** 单击选中行数据 */
+function clickRow(row: any) {
+  proxy.$refs['roleRef'].toggleRowSelection(row)
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection: any) {
+  roleIds.value = selection.map((item: any) => item.roleId)
+}
+
+/** 保存选中的数据编号 */
+function getRowKey(row: any) {
+  return row.roleId
+}
+
+/** 关闭按钮 */
+async function close() {
+  await delVisitedRoute(route.path)
+  router.push({ name: 'UserManagement' })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  const userId = form.value.userId
+  const rIds = roleIds.value.join(',')
+  updateAuthRole({ userId, roleIds: rIds }).then(() => {
+    $baseMessage('授权成功', 'success', 'hey')
+    close()
+  })
+}
+
+;(() => {
+  const userId = route.params && route.params.userId
+  if (userId) {
+    loading.value = true
+    getAuthRole(userId).then((response: any) => {
+      form.value = response.user
+      roles.value = response.roles
+      total.value = roles.value.length
+      nextTick(() => {
+        roles.value.forEach((row: any) => {
+          if (row.flag) {
+            proxy.$refs['roleRef'].toggleRowSelection(row)
+          }
+        })
+      })
+      loading.value = false
+    })
+  }
+})()
+</script>
+
+<style lang="scss" scoped>
+.form-header {
+  padding-bottom: 5px;
+  margin: 8px 10px 25px 10px;
+  font-size: 15px;
+  color: #6379bb;
+  border-bottom: 1px solid #ddd;
+}
+</style>

src/views/system/userManagement/index.vue

@@ -179,13 +179,15 @@
 
 <script lang="ts" setup>
 import type { TableInstance } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
 import { deptTreeSelect } from '/@/api/departmentManagement'
-import { changeUserStatus, doDelete, getList } from '/@/api/userManagement'
+import { changeUserStatus, doDelete, getList, resetUserPwd } from '/@/api/userManagement'
 
 defineOptions({
   name: 'UserManagement',
 })
 
+const router = useRouter()
 const { proxy } = getCurrentInstance() as any
 const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
 
@@ -356,31 +358,37 @@ function handleCommand(command: string, row: any) {
 
 /** 跳转角色分配 */
 function handleAuthRole(row: any) {
-  console.log(row)
-  //  const userId = row.userId;
-  //  router.push("/system/user-auth/role/" + userId);
+  const userId = row.userId
+  router.push({
+    name: 'AuthRole',
+    params: {
+      userId,
+    },
+  })
 }
 
 /** 重置密码按钮操作 */
-function handleResetPwd(row: any) {
-  console.log(row)
-  //  proxy.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
-  //     confirmButtonText: "确定",
-  //     cancelButtonText: "取消",
-  //     closeOnClickModal: false,
-  //     inputPattern: /^.{5,20}$/,
-  //     inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
-  //     inputValidator: (value) => {
-  //        if (/<|>|"|'|\||\\/.test(value)) {
-  //           return "不能包含非法字符：< > \" ' \\\ |"
-  //        }
-  //     },
-  //  }).then(({ value }) => {
-  //     const encryptPassword = hex_md5(value)
-  //     resetUserPwd(row.userId, encryptPassword).then(response => {
-  //        proxy.$modal.msgSuccess("修改成功，新密码是：" + value);
-  //     });
-  //  }).catch(() => { });
+const handleResetPwd = (row: any) => {
+  ElMessageBox.prompt('提示', `请输入"${row.userName}"的新密码`, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    closeOnClickModal: false,
+    inputPattern: /^.{5,20}$/,
+    inputErrorMessage: '用户密码长度必须介于 5 和 20 之间',
+    inputValidator: (value) => {
+      if (/<|>|"|'|\||\\/.test(value)) {
+        return String.raw`不能包含非法字符：< > " ' \ |`
+      }
+      return true
+    },
+  })
+    .then(({ value }) => {
+      resetUserPwd(row.userId, value).then(() => {
+        $baseMessage(`修改成功，新密码是：${value}`, 'success', 'hey')
+      })
+    })
+    .catch(() => {})
 }
 
 /** 新增按钮操作 */