用户管理页面接口调用

src/api/modules/system/role.js

@@ -0,0 +1,88 @@
+import { HcApi } from '../../request/index'
+
+export const getList = (current, size, params) => {
+  return HcApi({
+    url: '/api/blade-system/role/list',
+    method: 'get',
+    params: {
+      ...params,
+      current,
+      size,
+    },
+  })
+}
+export const grantTree = () => {
+  return HcApi({
+    url: '/api/blade-system/menu/grant-tree',
+    method: 'get',
+  })
+}
+
+export const grant = (roleIds, menuIds, dataScopeIds, apiScopeIds) => {
+  return HcApi({
+    url: '/api/blade-system/role/grant',
+    method: 'post',
+    data: {
+      roleIds,
+      menuIds,
+      dataScopeIds,
+      apiScopeIds,
+    },
+  })
+}
+
+export const remove = ids => {
+  return HcApi({
+    url: '/api/blade-system/role/remove',
+    method: 'post',
+    params: {
+      ids,
+    },
+  })
+}
+
+export const add = row => {
+  return HcApi({
+    url: '/api/blade-system/role/submit',
+    method: 'post',
+    data: row,
+  })
+}
+
+export const update = row => {
+  return HcApi({
+    url: '/blade-system/role/submit',
+    method: 'post',
+    data: row,
+  })
+}
+
+export const getRole = roleIds => {
+  return HcApi({
+    url: '/api/blade-system/menu/role-tree-keys',
+    method: 'get',
+    params: {
+      roleIds,
+    },
+  })
+}
+
+export const getRoleTree = tenantId => {
+  return HcApi({
+    url: '/api/blade-system/role/tree',
+    method: 'get',
+    params: {
+      tenantId,
+    },
+  })
+}
+
+export const getRoleTreeById = roleId => {
+  return HcApi({
+    url: '/api/blade-system/role/tree-by-id',
+    method: 'get',
+    params: {
+      roleId,
+    },
+  })
+}

src/api/modules/system/user.js

@@ -0,0 +1,107 @@
+import { HcApi } from '../../request/index'
+
+export const getList = ( params) => {
+  return HcApi({
+    url: '/api/blade-system/user/page',
+    method: 'get',
+    params:params,
+     
+  })
+}
+
+export const remove = ids => {
+  return HcApi({
+    url: '/api/blade-system/user/remove',
+    method: 'post',
+    params: {
+      ids,
+    },
+  })
+}
+
+export const add = row => {
+  return HcApi({
+    url: '/api/blade-system/user/submit',
+    method: 'post',
+    data: row,
+  })
+}
+
+export const update = row => {
+  return HcApi({
+    url: '/api/blade-system/user/update',
+    method: 'post',
+    data: row,
+  })
+}
+
+
+export const getUser = id => {
+  return HcApi({
+    url: '/api/blade-system/user/detail',
+    method: 'get',
+    params: {
+      id,
+    },
+  })
+}
+
+
+
+export const getUserInfo = () => {
+  return HcApi({
+    url: '/apiblade-system/user/info',
+    method: 'get',
+  })
+}
+
+export const resetPassword = userIds => {
+  return HcApi({
+    url: '/api/blade-system/user/reset-password',
+    method: 'post',
+    params: {
+      userIds,
+    },
+  })
+}
+
+export const updatePassword = (oldPassword, newPassword, newPassword1) => {
+  return HcApi({
+    url: '/api/blade-system/user/update-password',
+    method: 'post',
+    params: {
+      oldPassword,
+      newPassword,
+      newPassword1,
+    },
+  })
+}
+
+export const updateInfo = row => {
+  return HcApi({
+    url: '/api/blade-system/user/update-info',
+    method: 'post',
+    data: row,
+  })
+}
+
+export const grant = (userIds, roleIds) => {
+  return HcApi({
+    url: '/api/blade-system/user/grant',
+    method: 'post',
+    params: {
+      userIds,
+      roleIds,
+    },
+  })
+}
+
+export const unlock = userIds => {
+  return HcApi({
+    url: '/api/blade-system/user/unlock',
+    method: 'post',
+    params: {
+      userIds,
+    },
+  })
+}

src/views/system/user.vue

@@ -10,11 +10,11 @@
                 <hc-icon class="text-white" name="add" />
                 <span class="text-white">新增</span>
             </el-button>
-            <el-button :disabled="tableCheckedKeys.length === 0" color="#FF6C6C" @click="rowDelClick">
+            <el-button :disabled="tableCheckedKeys.length === 0" color="#FF6C6C" :loading="batchDelLoad" @click="batchDelClick">
                 <hc-icon class="text-white" name="delete-bin-2" />
                 <span class="text-white">删除</span>
             </el-button>
-            <el-button v-yes-com:[refreshPassword] :disabled="tableCheckedKeys.length === 0" type="info" yes-com-text="是否重置密码为 123456">
+            <el-button v-yes-com:[refreshPassword1] :disabled="tableCheckedKeys.length === 0" type="info" yes-com-text="是否重置密码为 123456">
                 <hc-icon name="refresh" />
                 <span>重置密码</span>
             </el-button>
@@ -23,7 +23,7 @@
                 <span class="text-white">导出</span>
             </el-button>
         </template>
-        <hc-table :column="tableColumn" :datas="tableData" class="user-page-table" is-check @selection-change="tableSelectionChange">
+        <hc-table :column="tableColumn" :datas="tableData" class="user-page-table" is-check :loading="tableLoading" @selection-change="tableSelectionChange">
             <template #action="{ row }">
                 <el-link type="success" @click="rowEditClick(row)">
                     <hc-icon name="edit" />编辑
@@ -38,27 +38,33 @@
         </template>
 
         <!-- 新增编辑 -->
-        <hc-dialog v-model="addModal" title="新增" widths="50rem">
+        <hc-dialog v-model="addModal" :title="modalTitle" widths="50rem" :loading="addsaveLoading" @save="modalSave">
             <hc-icon class="font-bold" name="user" style="font-size: 18px;" />
             <span class="font-bold">基础信息</span>
             <el-divider style="margin-top: 10px;" />
-            <el-form :inline="true" :model="baseForm" :rules="baseFormRules" label-width="auto">
+            <el-form ref="formRef" :inline="true" :model="baseForm" :rules="baseFormRules" label-width="auto">
                 <div class="hc-form-item">
-                    <el-form-item label="登陆账户:" prop="user">
-                        <el-input v-model="baseForm.user" clearable placeholder="请输入" />
+                    <el-form-item label="登陆账户:" prop="account">
+                        <el-input v-model="baseForm.account" clearable placeholder="请输入" />
                     </el-form-item>
                     <el-form-item label="密码:" prop="password">
                         <el-input v-model="baseForm.password" clearable placeholder="请输入" show-password type="password" />
                     </el-form-item>
                 </div>
                 <div class="hc-form-item">
-                    <el-form-item label="用户名:" prop="username">
-                        <el-input v-model="baseForm.username" clearable placeholder="请输入" />
+                    <el-form-item label="用户名:" prop="realName">
+                        <el-input v-model="baseForm.realName" clearable placeholder="请输入" />
                     </el-form-item>
-                    <el-form-item label="角色:" prop="role">
-                        <el-select v-model="baseForm.role" placeholder="请选择">
-                            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
-                        </el-select>
+                    <el-form-item label="角色:" prop="roleId">
+                        <!-- <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" /> -->
+                        <el-tree-select
+                            v-model="roleIdArr"
+                            :props="defaultProps"
+                            :data="roleOptions"
+                            multiple
+                            :render-after-expand="false"
+                            style="width: 240px"
+                        />
                     </el-form-item>
                 </div>
             </el-form>
@@ -67,27 +73,33 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { HcDelMsg } from 'hc-vue3-ui'
+import { arrToId, formValidate, getArrValue, getObjValue } from 'js-fast-way'
+import { add, getList, getUser, remove, resetPassword, update } from '~api/system/user.js'
+import { getRoleTree } from '~api/system/role.js'
 
+onMounted(()=>{
+    getTableData()
+})
 const tableColumn = [
-    { key: 'key1', name: '登陆账户', align: 'center' },
-    { key: 'key2', name: '用户名', align: 'center' },
-    { key: 'key3', name: '角色', align: 'center' },
+    { key: 'account', name: '登陆账户', align: 'center' },
+    { key: 'realName', name: '用户名', align: 'center' },
+    { key: 'roleName', name: '角色', align: 'center' },
     { key: 'action', name: '操作', align: 'center', width: '140' },
 ]
-const tableData = ref([
-    { key1: 'admin', key2: 'xxx', key3: '超级管理员' },
-    { key1: '13028304756', key2: 'aaa', key3: '角色' },
-])
+const tableData = ref([])
+const tableLoading = ref(false)
 
 const addModal = ref(false)
 const addClick = () => {
+    modalTitle.value = '新增'
     addModal.value = true
+    getRoleOptions()
 }
-const baseForm = ref({ user: '', username: '', password: '', role: '' })
+const baseForm = ref({ account: '', realName: '', password: '', roleId: '' })
 const baseFormRules = {
-    user: {
+    account: {
         required: true,
         trigger: 'blur',
         message: '请输入登陆账户',
@@ -97,12 +109,12 @@ const baseFormRules = {
         trigger: 'blur',
         message: '请输入密码',
     },
-    username: {
+    realName: {
         required: true,
         trigger: 'blur',
         message: '请输入用户名',
     },
-    role: {
+    roleId: {
         required: true,
         trigger: 'blur',
         message: '请选择角色',
@@ -120,8 +132,18 @@ const searchClick = () => {
 
 }
 
-const getTableData = () => {
-
+const getTableData = async () => {
+    tableLoading.value = true
+    const { error, code, data } = await getList({
+        ...searchForm.value,
+    })
+    tableLoading.value = false
+    if (!error && code === 200) {
+        tableData.value = getArrValue(data['records'])
+    } else {
+        tableData.value = []
+    }
+    
 }
 //分页被点击
 const pageChange = ({ current, size }) => {
@@ -129,29 +151,123 @@ const pageChange = ({ current, size }) => {
     searchForm.value.size = size
     getTableData()
 }
-const rowEditClick = (row) => {
+const modalTitle = ref('新增')
+const rowEditClick = async (row) => {
+    modalTitle.value = '编辑'
+    getRoleOptions().then()
     addModal.value = true
-    baseForm.value = row
+    roleIdArr.value = row.roleId.split(',')
+    const { error, code, data } = await getUser( row.id)
+    if (!error && code === 200) {
+        baseForm.value = getObjValue(data)
+    } else {
+        baseForm.value = {}
+    }
+}
+const batchDelClick = ()=>{
+    let ids = arrToId(tableCheckedKeys.value)
+    HcDelMsg(async (resolve) => {
+        await removeUser(ids)
+        resolve() //关闭弹窗的回调
+    })
+
 }
-const rowDelClick = () => {
+const batchDelLoad = ref(false)
+const rowDelClick = (row) => {
     HcDelMsg(async (resolve) => {
-        // await removeContractTreeNode()
+        await removeUser(row.id)
         resolve() //关闭弹窗的回调
     })
 }
-const refreshPassword = async (_, resolve) => {
+const removeUser = async (ids) => {
+    const { error, code, msg } = await remove(
+        ids,
+    )
+    if (!error && code === 200) {
+        window?.$message?.success('删除成功')
+       getTableData()
+    } else {
+        window.$message.error(msg ?? '操作失败')
+    }
+}
+const refreshPassword1 = async (_, resolve) => {
+    if (tableCheckedKeys.value.length !== 1) {
+        return
+    }
     //这里可以写一些操作
+    await resetPasswordClick(tableCheckedKeys.value[0].id)
     resolve() //这个一定要存在，否则不会关闭弹窗
 }
+const resetPasswordClick = async (id)=>{
+    const { error, code, msg } = await resetPassword(
+        id,
+    )
+    if (!error && code === 200) {
+        window?.$message?.success(msg)
+       getTableData()
+    } else {
+        window.$message.error(msg ?? '操作失败')
+    }
+}
 const exportClick = async (_, resolve) => {
     //这里可以写一些操作
     resolve() //这个一定要存在，否则不会关闭弹窗
 }
-const roleOptions = ref([
-    { value: 'Option1', label: 'Option1' },
-    { value: 'Option2', label: 'Option2' },
-    { value: 'Option3', label: 'Option3' },
-    { value: 'Option4', label: 'Option4' },
-    { value: 'Option5', label: 'Option5' },
-])
+const formRef = ref(null)
+const roleIdArr = ref([])
+const addsaveLoading = ref(false)
+const modalSave = async ()=>{
+    const isValidate = await formValidate(formRef.value)
+    if (!isValidate) return false
+
+    addsaveLoading.value = true
+    console.log(baseForm.value, 'baseForm.value')
+    
+        if (modalTitle.value === '编辑') {
+            const { error, code, msg } = await update({
+            ...baseForm.value,
+            roleId:roleIdArr.value.join(','),
+            })
+            //判断状态
+            addsaveLoading.value = false
+            if (!error && code === 200) {
+                window?.$message?.success(msg)
+                getTableData()
+            } else {
+                window.$message.error(msg ?? '操作失败')
+            }
+        } else {
+            const { error, code, msg } = await add({
+            ...baseForm.value,
+            roleId:roleIdArr.value.join(','),
+          
+            })
+            //判断状态
+            addsaveLoading.value = false
+            if (!error && code === 200) {
+                window?.$message?.success(msg)
+                getTableData()
+            } else {
+                window.$message.error(msg ?? '操作失败')
+            }
+        }
+
+  
+}
+const roleOptions = ref([])
+const defaultProps = {
+  children: 'children',
+  label: 'title',
+}
+const getRoleOptions = async () => {
+    const { error, code, data } = await getRoleTree('000000')
+    if (!error && code === 200) {
+        roleOptions.value = getArrValue(data)
+        console.log(roleOptions.value, 'roleOptions.value')
+    } else {
+        roleOptions.value = []
+    }
+    
+  
+}
 </script>