角色管理登录菜单

杨泽宇
1 parent 6d135206
Showing 19 changed files with 930 additions and 110 deletions
src/api/login/index.ts
src/api/user/login/index.ts
src/api/user/role/index.ts
src/layout/menu.vue
src/pinia/modules/app.ts
src/pinia/modules/login.ts
src/pinia/modules/menu.ts
src/router/index.ts
src/router/modules/role.ts
src/router/modules/user.ts
src/utils/progress.ts
src/utils/tool.ts
src/views/dashboard/index.vue
src/views/role/edit.vue
src/views/role/index.vue
src/views/role/permission.vue
src/views/role/user.vue
src/views/user/index.vue
src/views/user/login.vue
-import request from '../request'
-import { AxiosRequestConfig } from 'axios';
-
-export const login = async ( params: any, data: any ) => {
-  // let res: any = await request.post( '/login', data, {userName: '123', password: 'cmnt123'} )
-  let res: any = await request({
-    url: '/login',
-    method: 'post',
-    data: {
-      userName: '123',
-      password: 'cmnt123'
-    }
-  })
-  // let res: any = await request( {url: '/neighborhood/getList', params:{propertyId: 1, type: 1}, method: 'post' })
-  return res
-}
 \ No newline at end of file
 import request from '../../request'
-import { AxiosRequestConfig } from 'axios';
-export const login = async ( params: any, data: any ) => {
-  // let res: any = await request.post( '/login', data, {userName: '123', password: 'cmnt123'} )
+/**
+ * @description 登录
+ * @function login
+ */
+export const login = async ( data: any ) => {
   let res: any = await request({
     url: '/login',
     method: 'post',
-    data: {
-      userName: '123',
-      password: 'cmnt123'
-    }
+    data: data
+  })
+  return res
+}
+
+/**
+ * @description 权限菜单
+ * @function menuData
+ */
+export const menuData = async () => {
+  let res: any = await request({
+    url: '/permission/list',
+    method: 'get',
   })
-  // let res: any = await request( {url: '/neighborhood/getList', params:{propertyId: 1, type: 1}, method: 'post' })
   return res
 }
 \ No newline at end of file
 import request from '../../request'
-import {formDataWrapper} from '@/utils/tool'
+import {formDataWrapper, deleteEmptyParam} from '@/utils/tool'
 /**
  * @description 角色列表
@@ -9,7 +9,64 @@ export const roleList = async ( params: any ) =&gt; {
   let res: any = await request({
     url: '/role/list',
     method: 'get',
+    params: deleteEmptyParam(params)
+  })
+  return res
+}
+
+/**
+ * @description 角色权限
+ * @function rolePermission
+ */
+ export const rolePermission = async ( params: any ) => {
+  let res: any = await request({
+    url: '/role/user/permission',
+    method: 'get',
+    params: params
+  })
+  return res
+}
+
+/**
+ * @description 角色用户列表
+ * @function roleUser
+ */
+ export const roleUser = async ( params: any ) => {
+  let res: any = await request({
+    url: '/role/user',
+    method: 'put',
     params: params
   })
   return res
+}
+
+/**
+ * @description 角色添加修改
+ * @function roleSave
+ */
+ export const roleSave = async ( params: any ) => {
+  let res: any = await request({
+    url: '/role/save',
+    method: 'put',
+    data: params
+  })
+  return res
+}
+
+/**
+ * @description 修改角色状态
+ * @function roleStatus
+ */
+ export const roleStatus = async (data: any) => {
+  let res: any = await request.put( '/role/status', formDataWrapper(data)  )
+  return res
+}
+
+/**
+ * @description 角色关联权限
+ * @function rolePermissionSave
+ */
+ export const rolePermissionSave = async (data: any) => {
+  let res: any = await request.post( '/role/permission', data  )
+  return res
 }
 \ No newline at end of file
@@ -18,10 +18,15 @@ import {
 let styleData = computed(() => {
   return styles;
 });
+let menuData = computed(() => {
+  let res = store.family.menuStore().menuList;
+  return res;
+});
 </script>
 <template>
   <el-scrollbar wrap-class="scrollbar-wrapper">
+    <!-- {{menuData}} -->
     <el-menu
       default-active="2"
       :background-color="styleData.menuBg"
@@ -32,41 +37,58 @@ let styleData = computed(() =&gt; {
       :collapse-transition="false"
       :collapse="store.family.appStore().isCollapse"
     >
-      <el-sub-menu index="1">
+      <el-sub-menu
+        :index="index + ''"
+        v-for="(item, index) in menuData"
+        :key="index"
+      >
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>{{ item.name }}假菜单</span>
+        </template>
+        <el-menu-item-group v-for="(ele, i) in item.menuList" :key="i">
+          <el-menu-item :index="ele.path ? ele.path : '/'">{{
+            ele.name
+          }}</el-menu-item>
+        </el-menu-item-group>
+      </el-sub-menu>
+
+      <el-sub-menu index="11">
         <template #title>
           <el-icon><location /></el-icon>
-          <span>物业管理</span>
+          <span>物业管理真菜单可点</span>
         </template>
         <el-menu-item-group>
           <el-menu-item index="/property">物业列表</el-menu-item>
         </el-menu-item-group>
       </el-sub-menu>
-      <el-sub-menu index="2">
+      <el-sub-menu index="12">
         <template #title>
           <el-icon><location /></el-icon>
-          <span>小区管理</span>
+          <span>小区管理真菜单可点</span>
         </template>
         <el-menu-item-group>
           <el-menu-item index="/">小区管理</el-menu-item>
         </el-menu-item-group>
       </el-sub-menu>
-      <el-sub-menu index="3">
+      <el-sub-menu index="13">
         <template #title>
           <el-icon><location /></el-icon>
-          <span>用户管理</span>
+          <span>用户管理真菜单可点</span>
         </template>
         <el-menu-item-group>
           <el-menu-item index="/user">用户列表</el-menu-item>
         </el-menu-item-group>
       </el-sub-menu>
-      <!-- <el-menu-item index="3" disabled>
-        <el-icon><document /></el-icon>
-        <template #title>Navigator Three</template>
-      </el-menu-item> -->
-      <el-menu-item index="4">
-        <el-icon><setting /></el-icon>
-        <template #title>Navigator Four</template>
-      </el-menu-item>
+      <el-sub-menu index="14">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>角色管理真菜单可点</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="/role">角色列表</el-menu-item>
+        </el-menu-item-group>
+      </el-sub-menu>
     </el-menu>
   </el-scrollbar>
 </template>
-const id = 'app'
+const id: string = 'app'
 const state = () => ({
-    isCollapse: false,
-  })
-  const getters = {
-    getCollapseStatus () {
-      return this.isCollapse
-    }
-  }
-  const actions = {
-    toggleCollapse() {
-      this.isCollapse = !this.isCollapse
-    },
+  isCollapse: false,
+})
+const getters = {
+  getCollapseStatus () {
+    return this.isCollapse
   }
+}
+const actions = {
+  toggleCollapse() {
+    this.isCollapse = !this.isCollapse
+  },
+}
 export default {
   namespace: true,
-const id = 'login'
-const state = () => ({
+interface LoginUser {
+  token: string,
+  organizationId: number,
+  id: number,
+  userName: string
+}
+const id: string = 'login'
+const state: Function = () => ({
   token: '',
+  organizationId: null,
+  id: null,
+  userName: ''
 })
 const getters = {
-  // getCollapseStatus () {
-  //   return this.isCollapse
-  // }
   getToken() {
     return this.token
+  },
+  getOid() {
+    return this.organizationId
+  },
+  getId() {
+    return this.id
+  },
+  getUserName() {
+    return this.userName
   }
 }
 const actions = {
-  setToken(tokenStr: string) {
-    this.token = tokenStr
+  setUserInfo(obj: LoginUser) {
+    this.token = obj.token
+    this.organizationId = obj.organizationId
+    this.id = obj.id
+    this.userName = obj.userName
   }
 }
-const id = 'menu'
-const state = () => ({
-    data1: '10086',
-    desc: 'test',
-  })
-  const getters = {
-    doubleCount() {
-      return this.desc
-    },
-    doubleCountPlusOne() {
-      return this.data1
-    }
+interface MenuItem {
+  menuList: MenuItem[],
+  id: number,
+  name: string,
+  priority: number,
+  url: string | null,
+  selected: boolean,
+  parentId: number | null,
+  keyword: string | null,
+  status: number
+}
+const id: string = 'menu'
+const state: Function = () => ({
+  menuList: []
+})
+const getters = {
+  getMenuList() {
+    return this.menuList
   }
-  const actions = {
-    reset() {
-      this.data1 = '10010'
-    },
-    grown() {
-      this.desc = 'test test'
-    }
+}
+const actions = {
+  setMenuList (data: MenuItem[]) {
+    this.menuList = data
   }
+}
 export default {
   namespace: true,
 import { createRouter, createWebHashHistory } from 'vue-router'
+import Role from "./modules/role" 
 import User from "./modules/user"
 import Resident from "./modules/resident"
 import Property from "./modules/property"
@@ -36,6 +37,7 @@ const routes: Array&lt;any&gt; = [
     }]
     // component: () => import(/* webpackChunkName: "About" */ '@/views/tengxi/about.vue')
   },
+  Role,
   User,
   Resident,
   Property,
@@ -46,16 +48,16 @@ const routes: Array&lt;any&gt; = [
     name: 'Login',
     component: () => import(/* webpackChunkName: "About" */ '@/views/user/login.vue')
   },
-  // {
-  //   path: '/404',
-  //   name: 'Error',
-  //   component: () => import(/* webpackChunkName: "Error" */ '@/views/error/404.vue'),
-  //   hidden: true
-  // },
-  // {
-  //   path: '/:pathMatch(.*)*',
-  //   redirect: '/404'
-  // },
+  {
+    path: '/404',
+    name: 'Error',
+    component: () => import(/* webpackChunkName: "Error" */ '@/views/error/404.vue'),
+    hidden: true
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/404'
+  },
 ]
+import Layout from '@/layout/enter.vue'
+const role = {
+  path: '/',
+  component: Layout,
+  name: 'Role',
+  children: [{
+    path: 'role',
+    name: 'roleList',
+    component: () => import('@/views/role/index.vue'),
+    meta: { title: '角色管理' }
+  }, {
+    path: '/role/user',
+    name: 'roleUser',
+    component: () => import('@/views/role/user.vue'),
+    meta: { title: '角色用户' }
+  }, {
+    path: '/role/edit',
+    name: 'roleEdit',
+    component: () => import('@/views/role/edit.vue'),
+    meta: { title: '角色编辑' }
+  }, {
+    path: '/role/permission',
+    name: 'rolePermission',
+    component: () => import('@/views/role/permission.vue'),
+    meta: { title: '角色权限' }
+  }]
+}
+
+export default role
@@ -5,19 +5,19 @@ const user = {
   name: 'User',
   children: [{
     path: 'user',
-    name: 'user',
+    name: 'userList',
     component: () => import('@/views/user/index.vue'),
     meta: { title: '用户管理' }
   }, {
     path: '/user/role',
-    name: 'role',
+    name: 'userRole',
     component: () => import('@/views/user/role.vue'),
     meta: { title: '用户角色' }
   }, {
     path: '/user/edit',
-    name: 'edition',
+    name: 'userEdit',
     component: () => import('@/views/user/edit.vue'),
-    meta: { title: '用户角色' }
+    meta: { title: '用户编辑' }
   }]
 }
@@ -5,6 +5,7 @@ import router from &#39;@/router/index&#39;
 NProgress.configure({ showSpinner: false })
 router.beforeEach((to: any, from: any, next: any) => {
+  // if (to.matched.length == 0) { router.push(to.path); }
   NProgress.start()
   const hasToken = true
   const whiteList = ['/login']
@@ -18,12 +19,12 @@ router.beforeEach((to: any, from: any, next: any) =&gt; {
       // next({ path: '/about' })
       next()
       NProgress.done()
-    } else {
+    } else {     
       next()
       NProgress.done()
     }
   } else {
-    console.log('hasno t')
+    console.log('hasnot')
     if (whiteList.indexOf(to.path) !== -1) {
       next()
     } else {
@@ -166,4 +166,18 @@ export function formDataWrapper (data: any) {
     fd.append(i, data[i])
   }
   return fd
+}
+
+/**
+ * 请求参数删除为null的
+ * @param {object}} data
+ * @returns {FormData} fd
+ */
+ export function deleteEmptyParam (params: any) {
+  for (const i in params) {
+    if (!(params[i] + '').trim()) {
+      delete params[i]
+    }
+  }
+  return params
 }
 \ No newline at end of file
 <script setup lang="ts">
 import {ref} from 'vue'
 import {propertyList } from '@/api/tengxi'
+import router from '@/router'
 const title = ref(import.meta.env.VITE_APP_TITLE).value
 propertyList().then(res => {
   console.log(res)
 }).catch(error => {
   console.log(error)
 })
+console.log(router.getRoutes())
 </script>
 <template>
+<script setup lang="ts">
+import { reactive, ref, getCurrentInstance, onMounted } from "vue";
+import { roleSave } from "@/api/user/role";
+import { useRoute } from "vue-router";
+import type { ElForm } from "element-plus";
+const {
+  appContext: {
+    config: { globalProperties },
+  },
+} = getCurrentInstance();
+let form = reactive({
+  data: {
+    roleName: "",
+    code: "",
+    roleDesc: "",
+  },
+  dataType: "",
+});
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+// 表单验证规则
+const rules = reactive({
+  roleName: [
+    {
+      required: true,
+      message: "请填写角色名称",
+      trigger: "blur",
+    },
+  ],
+  code: [
+    {
+      required: true,
+      message: "请填写角色代码",
+      trigger: "blur",
+    },
+  ],
+});
+// 表单重置
+const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+// 表单提交
+const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      roleSave(form.data)
+        .then((res) => {
+          if (res) {
+            globalProperties.$message.success("操作成功");
+            history.go(-1);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } else {
+      globalProperties.$message.error("请检查表单格式");
+      return false;
+    }
+  });
+};
+onMounted(() => {
+  form.data = useRoute().query;
+  if (JSON.stringify(form.data) === "{}") {
+    form.dataType = "add";
+  } else {
+    form.dataType = "edit";
+  }
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <el-card class="form_card" style="max-width: 1303px">
+      <h1 v-show="form.dataType === 'add'">新增角色</h1>
+      <h1 v-show="form.dataType === 'edit'">编辑角色</h1>
+      <el-form
+        :inline="true"
+        :model="form.data"
+        :rules="rules"
+        ref="ruleFormRef"
+        label-width="120px"
+        style="display: flex; flex-wrap: wrap; width: 100%"
+      >
+        <el-form-item label="角色名称" prop="roleName" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.roleName"
+            placeholder="请填写角色名称"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="角色描述" prop="roleDesc" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.roleDesc"
+            placeholder="请填写角色描述"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="角色代码" prop="code" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.code"
+            placeholder="请填写角色代码"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item style="width: 100%">
+          <el-button type="primary" @click="submitForm(ruleFormRef)"
+            >提交</el-button
+          >
+          <el-button
+            type="info"
+            @click="resetForm(ruleFormRef)"
+            v-show="form.dataType === 'add'"
+            >取消</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+import { roleList, roleStatus } from "@/api/user/role";
+import { parseTime } from "@/utils/tool";
+import Pagination from "@/components/Pagination/index.vue";
+const {
+  appContext: {
+    config: { globalProperties },
+  },
+} = getCurrentInstance();
+interface Form {
+  page: number;
+  pageSize: number;
+  roleName: string;
+}
+interface Params {
+  total: number;
+  query: Form;
+}
+interface Data {
+  loading: boolean;
+  list: List[] | null;
+  params: Params;
+}
+interface List {
+  roleName: string,
+  code: string,
+  roleDesc: string,
+  status: number,
+  createTime: string,
+  updateTime: string,
+  creator: string,
+  creatorId: number,
+  updator: string,
+  updatorId: number,
+  type: number,
+  oId: number
+}
+let data: Data = reactive({
+  list: [],
+  loading: false,
+  params: {
+    total: 0,
+    query: {
+      page: 1,
+      pageSize: 10,
+      roleName: "",
+    },
+  },
+});
+// 列表
+const getList = async () => {
+  data.loading = true;
+  try {
+    const res = await roleList(data.params.query);
+    data.list = res.data.data.list;
+    data.params.total = res.data.data.total;
+  } catch (e) {
+    console.log(e);
+  } finally {
+    data.loading = false;
+  }
+};
+// 分页
+const handlePageChange = (page, size) => {
+  data.params.query.page = page;
+  data.params.query.pageSize = size;
+  getList();
+};
+// 查询
+const handleSearch = () => {
+  getList();
+};
+// 状态
+const handleStatus = async (obj) => {
+  try {
+    const res = await roleStatus({
+      roleId: obj.id,
+      status: obj.status? 0: 1
+    });
+    if(res?.data) {
+      globalProperties.$message.success("操作成功");
+      getList()
+    } else {
+      globalProperties.$message.error("操作失败");
+    }
+  } catch (e) {
+    console.log(e);
+  } 
+};
+// 状态值
+enum statusEnum {
+  "禁用" = 0,
+  "启用",
+}
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <h1>角色列表</h1>
+    <el-row style="padding-bottom: 20px">
+      <el-form :inline="true" label-width="70px">
+        <el-form-item label="角色名">
+          <el-input
+            v-model.trim="data.params.query.roleName"
+            placeholder="请填写角色名"
+            maxlength="15"
+            @change="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+          <el-button type="primary">
+            <router-link to="/role/edit">添加角色</router-link>
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-table
+      :data="data.list"
+      style="width: 100%"
+      border
+      v-loading="data.loading"
+      align="center"
+      element-loading-text="拼命加载中"
+    >
+      <el-table-column prop="id" label="ID" align="center"> </el-table-column>
+      <el-table-column prop="roleName" label="角色名称" align="center">
+      </el-table-column>
+      <el-table-column prop="createTime" label="注册时间" align="center">
+        <template #default="scope">
+          {{ parseTime(new Date(scope.row.createTime).getTime()) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" align="center">
+        <template #default="scope">
+          {{ statusEnum[scope.row.status] }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button type="text"
+            ><router-link :to="{ path: '/role/edit', query: scope.row }"
+              >编辑</router-link
+            ></el-button
+          >
+          <el-button type="text" @click="handleStatus(scope.row)">{{
+            scope.row.status ? "禁用" : "启用"
+          }}</el-button>
+          <el-button type="text"
+            ><router-link :to="{ path: '/role/user', query: {id: scope.row.id} }"
+              >用户</router-link
+            ></el-button
+          >
+          <el-button type="text"
+            ><router-link :to="{ path: '/role/permission', query: {roleId: scope.row.id, roleName: scope.row.roleName} }"
+              >权限</router-link
+            ></el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="data.params.total"
+      :currentPage="data.params.query.page"
+      :pageSize="data.params.query.pageSize"
+      @pageChange="handlePageChange"
+    ></Pagination>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, getCurrentInstance, onMounted } from "vue";
+import { rolePermissionSave, rolePermission } from "@/api/user/role";
+import { useRoute } from "vue-router";
+import type Node from 'element-plus/es/components/tree/src/model/node'
+import type { ElForm } from "element-plus";
+import type { ElTree } from 'element-plus'
+const {
+  appContext: {
+    config: { globalProperties },
+  },
+} = getCurrentInstance();
+let form = reactive({
+  data: {
+    roleId: useRoute().query.roleId,
+    permissionIds: [],
+  },
+  permissions: [],
+  defaultPermissions: [],
+  collections: []
+});
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+const addTreeTest = ref<InstanceType<typeof ElTree>>()
+// 表单重置
+const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return;
+  form.defaultPermissions = []
+  addTreeTest.value!.setCheckedNodes([])
+  formEl.resetFields();
+};
+// 表单提交
+const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      rolePermissionSave(form.data)
+        .then((res) => {
+          if (res) {
+            globalProperties.$message.success("操作成功");
+            history.go(-1);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } else {
+      globalProperties.$message.error("请检查表单格式");
+      return false;
+    }
+  });
+};
+// 获取角色权限
+const getPermissions = async (roleId = useRoute().query.roleId) => {
+  try {
+    let res = await rolePermission({ roleId: roleId });
+    form.permissions = res.data.data;
+    form.defaultPermissions = getCheckedPermissions(res.data.data)
+  } catch (e) {
+    console.log(e);
+  }
+};
+interface Tree {
+  label: string
+  children?: Tree[]
+}
+const defaultProps: Tree = {
+  children: "menuList",
+  label: "name",
+};
+const getCheckedPermissions = (menuArray: Tree[]) => {
+  if (menuArray) {
+    menuArray.map((item: Tree) => {
+      if (item.menuList) {
+        getCheckedPermissions(item.menuList);
+      }
+      if (item.selected) {
+        form.collections.push(item.id);
+      }
+    });
+  }
+  return form.collections;
+};
+const getCheckedRoles = (node: Node, data: Node[]) => {
+  form.data.permissionIds = [...data.checkedKeys, ...data.halfCheckedKeys];
+};
+onMounted(() => {
+  getPermissions();
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <el-card class="form_card" style="max-width: 1303px">
+      <h1 v-show="form.dataType === 'edit'">角色权限</h1>
+      <el-form
+        :inline="true"
+        :model="form.data"
+        ref="ruleFormRef"
+        label-width="120px"
+        style="display: flex; flex-wrap: wrap; width: 100%"
+      >
+        <el-form-item label="角色名称" prop="roleName" style="width: 100%">
+          <el-input
+            v-model.trim="useRoute().query.roleName"
+            placeholder="请填写角色名称"
+            maxlength="15"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="角色ID" prop="roleDesc" style="width: 100%">
+          <el-input
+            v-model.trim="useRoute().query.roleId"
+            placeholder="请填写角色ID"
+            maxlength="15"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="角色权限" prop="permissionIds" style="width: 100%">
+          <el-tree
+            :data="form.permissions"
+            :props="defaultProps"
+            :default-checked-keys="form.defaultPermissions"
+            node-key="id"
+            ref="addTreeTest"
+            show-checkbox
+            @check="getCheckedRoles"
+          />
+        </el-form-item>
+        <el-form-item style="width: 100%">
+          <el-button type="primary" @click="submitForm(ruleFormRef)"
+            >提交</el-button
+          >
+          <el-button
+            type="info"
+            @click="resetForm(ruleFormRef)"
+            >置空</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, onMounted } from "vue";
+import { useRoute } from 'vue-router';
+import { roleUser } from "@/api/user/role";
+import Pagination from "@/components/Pagination/index.vue";
+interface Form {
+  page: number;
+  pageSize: number;
+  roleId: string | number;
+}
+interface Params {
+  total: number;
+  query: Form;
+}
+interface Data {
+  loading: boolean;
+  list: any[] | null;
+  params: Params;
+}
+let data: Data = reactive({
+  list: [],
+  loading: false,
+  params: {
+    total: 0,
+    query: {
+      page: 1,
+      pageSize: 10,
+      roleId: '',
+    },
+  },
+});
+// 状态值
+enum statusEnum {
+  "禁用" = 0,
+  "启用",
+}
+// 列表
+const getList = async () => {
+  data.loading = true;
+  try {
+    const res = await roleUser(data.params.query);
+    data.list = res.data.data.list;
+    data.params.total = res.data.data.total;
+  } catch (e) {
+    console.log(e);
+  } finally {
+    data.loading = false;
+  }
+};
+// 分页
+const handlePageChange = (page, size) => {
+  data.params.query.page = page;
+  data.params.query.pageSize = size;
+  getList();
+};
+onMounted(() => {
+  data.params.query.roleId = useRoute().query.id;
+  getList();
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <h1>角色用户</h1>
+    <el-table
+      :data="data.list"
+      style="width: 100%"
+      border
+      v-loading="data.loading"
+      align="center"
+      element-loading-text="拼命加载中"
+    >
+      <el-table-column prop="id" label="ID" align="center"> </el-table-column>
+      <el-table-column prop="userName" label="用户名称" align="center">
+      </el-table-column>
+      <el-table-column prop="cellphone" label="手机号码" align="center">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" align="center">
+        <template #default="scope">
+          {{ statusEnum[scope.row.status] }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="data.params.total"
+      :currentPage="data.params.query.page"
+      :pageSize="data.params.query.pageSize"
+      @pageChange="handlePageChange"
+    ></Pagination>
+  </div>
+</template>
@@ -12,7 +12,7 @@ interface Form {
   page: number;
   pageSize: number;
   userName?: string;
-  cellPhone?: string;
+  cellphone?: string;
 }
 interface Params {
   total: number;
@@ -32,7 +32,7 @@ let data = reactive({
       page: 1,
       pageSize: 10,
       userName: "",
-      cellPhone: "",
+      cellphone: "",
     },
   },
 });
@@ -108,7 +108,7 @@ onMounted(() =&gt; {
         </el-form-item>
         <el-form-item label="用户名">
           <el-input
-            v-model.trim="data.params.query.cellPhone"
+            v-model.trim="data.params.query.cellphone"
             placeholder="请填写用户手机号"
             maxlength="15"
             @change="handleSearch"
@@ -159,7 +159,7 @@ onMounted(() =&gt; {
             >初始密码</el-button
           >
           <el-button type="text"
-            ><router-link :to="{ path: '/user/role', query: scope.row }"
+            ><router-link :to="{ path: '/user/role', query: {id: scope.row.id}}"
               >角色</router-link
             ></el-button
           >
 <script setup lang="ts">
-import { login } from "@/api/user/login";
-import * as all from "vue-router";
+import { login, menuData } from "@/api/user/login";
 import * as store from "@/pinia/index";
-login().then((res) => {
-  console.log(res);
-  console.log(store.family.loginStore().token);
-  if (res) {
-    store.family.loginStore().setToken(res.data.data.token);
-  }
+import router from "@/router/index";
+import { reactive, ref, getCurrentInstance } from "vue";
+import type { ElForm } from "element-plus";
+import { UserFilled, Lock } from "@element-plus/icons-vue";
+const {
+  appContext: {
+    config: { globalProperties },
+  },
+} = getCurrentInstance();
+interface Login {
+  userName: string;
+  password: string;
+}
+// 登录表单数据
+const loginForm: Login = reactive({
+  userName: "123",
+  password: "cmnt123",
 });
+// 登录框上面标题
+const title = ref(import.meta.env.VITE_APP_TITLE).value;
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+// 表单提交
+const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      login(loginForm).then((res) => {
+        if (res?.data) {
+          globalProperties.$message.success("登录成功");
+          store.family.loginStore().setUserInfo(res.data.data);
+          getMenu().then((res) => {
+            setTimeout(() => {
+              router.push({ path: "/" });
+            }, 1000);
+          });
+        }
+      });
+    } else {
+      console.log("error");
+    }
+  });
+};
+// 获取权限菜单
+const getMenu = async () => {
+  try {
+    let res = await menuData();
+    store.family.menuStore().setMenuList(res.data.data);
+  } catch (e) {
+    console.log(e);
+  }
+};
 </script>
 <template>
-  <p>Login</p>
-  <router-link :to="{ path: '/' }"
-              >回首页</router-link
-            >
+  <div class="login-container">
+    <el-form
+      :inline="true"
+      :model="loginForm"
+      ref="ruleFormRef"
+      auto-complete="on"
+      label-position="left"
+      label-width="120px"
+      class="login-form"
+    >
+      <div class="title-container">
+        <h3 class="title">{{ title }}</h3>
+      </div>
+
+      <el-row>
+        <el-form-item prop="userName" style="width: 100%">
+          <el-input
+            v-model.trim="loginForm.userName"
+            placeholder="请填写用户名"
+            maxlength="15"
+            :validate-event="false"
+            tabindex="1"
+            type="text"
+            auto-complete="off"
+            clearable
+            :prefix-icon="UserFilled"
+          />
+        </el-form-item>
+      </el-row>
+      <el-form-item prop="password" style="width: 100%">
+        <el-input
+          v-model.trim="loginForm.password"
+          placeholder="请填写密码"
+          :validate-event="false"
+          maxlength="15"
+          tabindex="2"
+          :show-password="true"
+          clearable
+          type="password"
+          auto-complete="off"
+          :prefix-icon="Lock"
+          @keyup.enter.native="submitForm(ruleFormRef)"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item style="width: 100%">
+        <el-button
+          type="primary"
+          @click="submitForm(ruleFormRef)"
+          style="width: 100%"
+          >登录</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
-<style lang="scss" scoped></style>
+<style lang="scss">
+$bg: #283443;
+$dark_gray: #889aa4;
+$light_gray: #fff;
+$cursor: #fff;
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+.login {
+  &-container {
+    min-height: 100%;
+    text-align: center;
+    background-color: $bg;
+    .el-input {
+      input {
+        background: transparent;
+        border: 0px;
+        -webkit-appearance: none;
+        border-radius: 0px;
+        color: $light_gray;
+        height: 47px;
+        caret-color: $cursor;
+        &:-webkit-autofill {
+          box-shadow: 0 0 0px 1000px $bg inset !important;
+          -webkit-text-fill-color: $cursor !important;
+        }
+      }
+    }
+    .el-form-item {
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 5px;
+      color: #454545;
+    }
+  }
+  &-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 160px 35px 0;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+}
+.title-container {
+  position: relative;
+  .title {
+    font-size: 26px;
+    color: $light_gray;
+    margin: 0px auto 40px auto;
+    text-align: center;
+    font-weight: bold;
+  }
+}
+</style>