退出登录权限管理基本信息物业代理登录

杨泽宇
1 parent 861809b7
Showing 24 changed files with 824 additions and 111 deletions
src/api/request.ts
src/api/user/permission/index.ts
src/layout/enter.vue
src/layout/header.vue
src/layout/menu.vue
src/pinia/modules/login.ts
src/router/index.ts
src/router/modules/permission.ts
src/router/modules/system.ts
src/style/element.scss
src/utils/tool.ts
src/views/permission/edit.vue
src/views/permission/index.vue
src/views/property/edit.vue
src/views/property/index.vue
src/views/role/edit.vue
src/views/role/index.vue
src/views/role/permission.vue
src/views/role/user.vue
src/views/system/info.vue
 import axios from 'axios'
 import * as store from "@/pinia/index";
 import router from '@/router'
+import { ElMessage } from "element-plus";
  
 // 不这样写报ts类型错误，import...有一个多余的boolean类型
 let url: any = import.meta.env 
@@ -27,16 +28,20 @@ instance.interceptors.response.use(
   response => {
     if(response) {
       console.log(response?.data?.errorCode)
+      switch (~~response?.data?.errorCode) {
+        case 0:
+          return response
+        break;
+        case 10002:
+          ElMessage.error("登录失效");
+          router.push({
+            path: 'login'
+          })
+        break;
+        default:
+          ElMessage.error(response?.data?.errorMessage || '操作失败');
+      }
     }
-    switch(~~response?.data?.errorCode) {
-      case 10002:
-        console.log('跳转')
-        router.push({
-          path: 'login'
-        })
-      break;
-    }
-    return response
   },
   error => {
     return Promise.reject(error)
+import request from '../../request'
+
+/**
+ * @description 权限列表
+ * @function permissionList
+ */
+export const permissionList = async () => {
+  let res: any = await request.get( '/permission/list'  )
+  return res
+}
+
+/**
+ * @description 权限编辑
+ * @function permissionSave
+ */
+ export const permissionSave = async (data: any) => {
+  let res: any = await request.post( '/permission/add', data  )
+  return res
+}
+
@@ -4,11 +4,18 @@
  * @module Enter
  * @author Tengxi
  */
-import { ref } from "vue";
+import { onMounted, reactive, computed } from "vue";
 import Header from "./header.vue";
 import Menu from "./menu.vue";
 import * as store from "@/pinia/index";
-let key = ref("/");
+let asyncData = reactive({
+  isCollapse: null
+})
+onMounted(() => {
+  asyncData.isCollapse = computed(() => {
+    return store.family.appStore().isCollapse
+  })
+});
 </script>
  
 <template>
@@ -24,11 +31,11 @@ let key = ref(&quot;/&quot;);
     <!-- TIP 右侧具体页面内容 -->
     <div
       class="view-container"
-      :class="store.family.appStore().isCollapse ? 'thinMenu' : 'fatMenu'"
+      :class="asyncData.isCollapse ? 'thinMenu' : 'fatMenu'"
     >
       <router-view v-slot="{ Component, route }">
-        <transition :name="route.meta.transitionName">
-          <keep-alive v-if="route.meta.keepAlive">
+        <transition :name="route.name">
+          <keep-alive v-if="route?.meta?.keepAlive">
             <component :is="Component" />
           </keep-alive>
           <component :is="Component" v-else />
@@ -4,26 +4,47 @@
  * @module Header
  * @author Tengxi
  */
-import { getCurrentInstance } from "vue";
+import { getCurrentInstance, onMounted, reactive, computed } from "vue";
 import * as store from "@/pinia/index";
 import { Fold, Expand } from "@element-plus/icons-vue";
-import styles from '@/style/global.module.scss';
+import styles from "@/style/global.module.scss";
 // TIP 获取全局变量，暂时只有坏图片占位图
 const {
   appContext: {
     config: { globalProperties },
   },
 } = getCurrentInstance();
-// TIP 侧边菜单collapse状态切换
+/**
+ * 侧边菜单collapse状态切换
+ */
 const toggleMenu = () => {
   store.family.appStore().toggleCollapse();
 };
+/**
+ * 退出登录
+ */
+const handleLogout = () => {
+  store.family.loginStore().removeToken();
+};
+let asyncData = reactive({
+  userInfo: "",
+  isCollapse: null,
+});
+onMounted(() => {
+  asyncData.userInfo = store.family.loginStore().userName;
+  asyncData.isCollapse = computed(() => {
+    return store.family.appStore().isCollapse
+  })
+});
 </script>
  
 <template>
   <div class="header-container clearfix">
     <!-- TIP logo -->
-    <div class="left-logo" :class="store.family.appStore().isCollapse? 'thinLogo': 'fatLogo'">
+    <div
+      class="left-logo"
+      :class="asyncData.isCollapse ? 'thinLogo' : 'fatLogo'"
+    >
       <router-link to="/">
         <el-image
           :src="globalProperties.$cnliveLogo"
@@ -35,8 +56,8 @@ const toggleMenu = () =&gt; {
     <!-- TIP logo结束 -->
     <!-- TIP 控制菜单collapse的按钮 -->
     <div class="menu-collapse-button" @click="toggleMenu">
-      <Expand class="font-style" v-if="store.family.appStore().isCollapse" />
-      <Fold class="font-style" v-if="!store.family.appStore().isCollapse" />
+      <Expand class="font-style" v-if="asyncData.isCollapse" />
+      <Fold class="font-style" v-if="!asyncData.isCollapse" />
     </div>
     <!-- TIP 控制菜单collapse的按钮结束 -->
     <!-- TIP 功能键 -->
@@ -44,8 +65,10 @@ const toggleMenu = () =&gt; {
       <el-button type="text">站内消息</el-button>
       <el-button type="text"><router-link to="/">首页</router-link></el-button>
       <el-button type="text">帮助</el-button>
-      <el-button type="text">用户：管理员</el-button>
-      <el-button type="text">退出</el-button>
+      <el-button type="text"
+        >当前用户：<b>{{ asyncData.userInfo }}</b></el-button
+      >
+      <el-button type="text" @click="handleLogout">退出</el-button>
     </div>
     <!-- TIP 功能键结束 -->
   </div>
@@ -61,7 +84,7 @@ const toggleMenu = () =&gt; {
   width: 100%;
   line-height: 60px;
   background-color: white;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   .left-logo {
     float: left;
     margin-top: 10px;
@@ -4,7 +4,7 @@
  * @module Menu
  * @author Tengxi
  */
-import { ref, computed } from "vue";
+import { ref, computed, onMounted, reactive } from "vue";
 import * as store from "@/pinia/index";
 import styles from "@/style/global.module.scss";
 // TIP 使用element plus ICON
@@ -18,15 +18,20 @@ import {
 let styleData = computed(() => {
   return styles;
 });
-let menuData = computed(() => {
-  let res = store.family.menuStore().menuList;
-  return res;
+let asyncData = reactive({
+  menuData: [],
+  isCollapse: null
+})
+onMounted(() => {
+  asyncData.menuData = store.family.menuStore().menuList
+  asyncData.isCollapse = computed(() => {
+    return store.family.appStore().isCollapse
+  })
 });
 </script>
  
 <template>
   <el-scrollbar wrap-class="scrollbar-wrapper">
-    <!-- {{menuData}} -->
     <el-menu
       default-active="2"
       :background-color="styleData.menuBg"
@@ -35,11 +40,11 @@ let menuData = computed(() =&gt; {
       class="el-menu-vertical-demo"
       :router="true"
       :collapse-transition="false"
-      :collapse="store.family.appStore().isCollapse"
+      :collapse="asyncData.isCollapse"
     >
       <el-sub-menu
         :index="index + ''"
-        v-for="(item, index) in menuData"
+        v-for="(item, index) in asyncData.menuData"
         :key="index"
       >
         <template #title>
@@ -91,6 +96,24 @@ let menuData = computed(() =&gt; {
           <el-menu-item index="/role">角色列表</el-menu-item>
         </el-menu-item-group>
       </el-sub-menu>
+      <el-sub-menu index="15">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>权限管理真菜单可点</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="/permission">权限列表</el-menu-item>
+        </el-menu-item-group>
+      </el-sub-menu>
+      <el-sub-menu index="16">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>系统管理真菜单可点</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="/system">基本信息</el-menu-item>
+        </el-menu-item-group>
+      </el-sub-menu>
     </el-menu>
   </el-scrollbar>
 </template>
+import router from '@/router'
+import { ElMessage } from "element-plus";
 interface LoginUser {
   token: string,
   organizationId: number,
@@ -31,6 +33,13 @@ const actions = {
     this.organizationId = obj.organizationId
     this.id = obj.id
     this.userName = obj.userName
+  },
+  removeToken(msg: string | null) {
+    this.token = ''
+    ElMessage.success(msg || '已退出登录');
+    setTimeout(() => {
+      router.replace('/login')
+    }, 500)
   }
 }
  
 import { createRouter, createWebHashHistory } from 'vue-router'
+import System from './modules/system'
+import Permission from './modules/permission'
 import Role from "./modules/role" 
 import User from "./modules/user"
 import Resident from "./modules/resident"
@@ -37,6 +39,8 @@ const routes: Array&lt;any&gt; = [
     }]
     // component: () => import(/* webpackChunkName: "About" */ '@/views/tengxi/about.vue')
   },
+  System,
+  Permission,
   Role,
   User,
   Resident,
+import Layout from '@/layout/enter.vue'
+const permission = {
+  path: '/',
+  component: Layout,
+  name: 'Permission',
+  children: [{
+    path: 'permission',
+    name: 'permission',
+    component: () => import('@/views/permission/index.vue'),
+    meta: { title: '权限管理' }
+  }, {
+    path: '/permission/edit',
+    name: 'permissionEdit',
+    component: () => import('@/views/permission/edit.vue'),
+    meta: { title: '权限编辑' }
+  }]
+}
+
+export default permission
+import Layout from '@/layout/enter.vue'
+const system = {
+  path: '/',
+  component: Layout,
+  name: 'System',
+  children: [{
+    path: 'system',
+    name: 'system',
+    component: () => import('@/views/system/info.vue'),
+    meta: { title: '基本信息' }
+  }]
+}
+
+export default system
@@ -9,6 +9,16 @@
 .el-scrollbar {
   width: 100%;
 }
-.el-form--inline .el-form-item {
-  margin-right: 0;
+// .el-form--inline .el-form-item {
+  // margin-right: 0;
+// }
+
+// 一行内多个表单项布局
+.card-form {
+  display: flex; 
+  flex-wrap: wrap; 
+  width: 100%;
+  .el-form-item {
+    margin-right: 0;
+  }
 }
 \ No newline at end of file
@@ -157,7 +157,7 @@ export function globalFilters (value: number, groupData: EnumData[]) {
  
 /**
  * 请求参数包formData
- * @param {object}} data
+ * @param {object} data
  * @returns {FormData} fd
  */
 export function formDataWrapper (data: any) {
@@ -170,7 +170,7 @@ export function formDataWrapper (data: any) {
  
 /**
  * 请求参数删除为null的
- * @param {object}} data
+ * @param {object} data
  * @returns {FormData} fd
  */
  export function deleteEmptyParam (params: any) {
+<script setup lang="ts">
+import { reactive, ref, getCurrentInstance, onMounted } from "vue";
+import { permissionSave } from "@/api/user/permission";
+import { useRoute } from "vue-router";
+import type { ElForm } from "element-plus";
+let instance: ComponentInternalInstance | null = getCurrentInstance();
+let tempPriority = ref(0);
+let form = reactive({
+  data: {
+    name: "",
+    keyword: "",
+    parentId: 0,
+    priority: 0,
+    type: null,
+    url: "",
+    id: null,
+  },
+  dataType: "",
+});
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+/**
+ * 表单验证规则
+ */
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: "请填写名称",
+      trigger: "change",
+    },
+  ],
+  keyword: [
+    {
+      required: true,
+      message: "请填写关键字",
+      trigger: "change",
+    },
+  ],
+});
+/**
+ * 数字输入框，值改变，排序值赋给表单数据中priority
+ * el-input-number v-model 绑 reactive({a: 0})报类型错误警告，绑b=ref(0)不报警告
+ * @param {number} data 输入的数字
+ */
+const handleChange = (data: number) => {
+  form.data.priority = data;
+};
+/**
+ * 表单重置
+ */
+const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return;
+  tempPriority = 0;
+  formEl.resetFields();
+};
+/**
+ * 表单提交
+ */
+const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      permissionSave(form.data)
+        .then((res) => {
+          if (res) {
+            instance?.proxy?.$message.success("操作成功");
+            history.go(-1);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } else {
+      instance?.proxy?.$message.error("请检查表单格式");
+      return false;
+    }
+  });
+};
+onMounted(() => {
+  form.dataType = useRoute().query.dataType;
+  if (form.dataType === "add") {
+    form.data.parentId = useRoute().query.id;
+  } else {
+    Object.keys(form.data).map((key) => {
+      form.data[key] = useRoute().query[key];
+    });
+    form.data.type = form.data.type? form.data.type.toString(): ''
+  }
+});
+</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"
+        class="card-form"
+      >
+        <el-form-item label="上级权限" prop="parentId" style="width: 100%">
+          <el-input
+            disabled
+            v-model="useRoute().query.name"
+            placeholder="请填写上级权限"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="权限名称" prop="name" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.name"
+            placeholder="请填写角色名称"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="关键字" prop="keyword" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.keyword"
+            placeholder="请填写关键字"
+            maxlength="20"
+          />
+        </el-form-item>
+        <el-form-item label="路径" prop="url" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.url"
+            placeholder="请填写路径"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="排序" prop="priority" style="width: 100%">
+          <el-input-number
+            v-model="tempPriority"
+            placeholder="请填写排序值"
+            :min="0"
+            :max="1000"
+            @change="handleChange"
+          />
+        </el-form-item>
+        <!-- 不支持创建一级菜单，编辑的时候不可以修改菜单类型 -->
+        <!-- 一级菜单下只能创建二级菜单 -->
+        <!-- 二级菜单可以创建三级菜单或者按钮 -->
+        <!-- 三级菜单只能创建按钮 -->
+        <el-form-item label="权限类型" prop="type" style="width: 100%">
+          <el-radio-group v-model="form.data.type" :disabled="form.dataType === 'edit'">
+            <el-radio label="1" disabled>一级菜单</el-radio>
+            <el-radio label="2" :disabled="useRoute().query.type !== '1'"
+              >二级菜单</el-radio
+            >
+            <el-radio label="3" :disabled="useRoute().query.type !== '2'"
+              >三级菜单</el-radio
+            >
+            <el-radio label="4" :disabled="useRoute().query.type === '1'"
+              >按钮</el-radio
+            >
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item style="width: 100%">
+          <el-button type="primary" @click="submitForm(ruleFormRef)"
+            >提交</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { permissionList } from "@/api/user/permission";
+interface Data {
+  loading: boolean;
+  list: any[] | null;
+}
+let data: Data = reactive({
+  list: [],
+  loading: false,
+});
+/**
+ * 列表
+ */
+const getList = async () => {
+  data.loading = true;
+  try {
+    const res = await permissionList();
+    data.list = res.data.data;
+  } catch (e) {
+    console.log(e);
+  } finally {
+    data.loading = false;
+  }
+};
+/**
+ * 权限枚举值
+ */
+enum typeEnum {
+  '一级菜单' = 1,
+  '二级菜单',
+  '三级菜单',
+  '按钮',
+  '默认权限'
+}
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <h1>权限列表</h1>
+    <el-table
+      :data="data.list"
+      style="width: 100%"
+      border fit
+      row-key="id"
+      :indent="30"
+      :tree-props="{ children: 'menuList' }"
+      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="name" label="权限名称" align="center"></el-table-column>
+      <el-table-column prop="priority" label="优先级" align="center"></el-table-column>
+      <el-table-column prop="url" label="路径" align="center"></el-table-column>
+      <el-table-column prop="type" label="类型" align="center">
+        <template #default="scope">
+          {{ typeEnum[scope.row.type] }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button type="text"
+            ><router-link :to="{ path: '/permission/edit', query: {...scope.row, ...{dataType: 'edit'}} }"
+              >编辑</router-link
+            ></el-button
+          >
+          <!-- type值为4，是按钮，按钮不可以再加按钮 -->
+          <el-button type="text" v-show="~~scope.row.type < 4"
+            ><router-link :to="{ path: '/permission/edit', query: {...scope.row, ...{dataType: 'add'}} }"
+              >添加</router-link
+            ></el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
@@ -15,7 +15,7 @@ let form = reactive({
     name: "",
     userName: "",
     userPhone: "",
-    location: "北京",
+    location: "",
     address: "",
     businessLicense: "",
     contractNumber: "",
@@ -27,7 +27,12 @@ let form = reactive({
   },
 });
 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
-// 校验手机号格式
+/**
+ * 手机号校验
+ * @param {object} rules 验证规则
+ * @param {string} value 用户输入的手机号
+ * @callback checkPhone~checkCallback
+ */
 const checkPhone = (rules, value, callback) => {
   if (validMobile(value)) {
     callback();
@@ -35,7 +40,9 @@ const checkPhone = (rules, value, callback) =&gt; {
     callback(new Error("请填写格式正确的手机号码"));
   }
 };
-// 表单验证规则
+/**
+ * 表单验证
+ */
 const rules = reactive({
   name: [
     {
@@ -142,7 +149,7 @@ onMounted(() =&gt; {
         :rules="rules"
         ref="ruleFormRef"
         label-width="120px"
-        style="display: flex; flex-wrap: wrap; width: 100%"
+        class="card-form"
       >
         <el-form-item label="物业名称" prop="name" style="width: 50%">
           <el-input
@@ -170,15 +177,21 @@ onMounted(() =&gt; {
             v-model.trim="form.data.userPhone"
             placeholder="请填写联系电话"
             maxlength="11"
+            :disabled="form.dataType === 'edit'"
           />
         </el-form-item>
         <el-form-item label="地区" prop="location" style="width: 50%">
-          <el-input
-            v-model.trim="form.data.location"
-            placeholder="请填写地区"
-            maxlength="11"
-            disabled
-          />
+          <el-select
+            v-model="form.data.location"
+            placeholder="请选择地区"
+            clearable
+          >
+            <el-option
+              label="北京"
+              value="北京"
+            >
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="详细地址" prop="address" style="width: 100%">
           <el-input
 <script setup lang="ts">
 import { reactive, ref, onMounted, getCurrentInstance } from "vue";
 import { propertyList, propertyStatus } from "@/api/property";
+import { userProxy } from '@/api/user/user';
 import { parseTime } from "@/utils/tool";
 import Pagination from "@/components/Pagination/index.vue";
 const {
@@ -34,7 +35,9 @@ let data = reactive({
     },
   },
 });
-// 列表
+/**
+ * 列表
+ */
 const getList = async () => {
   data.loading = true;
   try {
@@ -47,17 +50,24 @@ const getList = async () =&gt; {
     data.loading = false;
   }
 };
-// 分页
+/**
+ * 分页
+ */
 const handlePageChange = (page, size) => {
   data.params.query.page = page;
   data.params.query.pageSize = size;
   getList();
 };
-// 查询
+/**
+ * 查询
+ */
 const handleSearch = () => {
   getList();
 };
-// 切换状态
+/**
+ * 切换状态
+ * @param {object} 单条数据对象 
+ */
 const handleStatus = async (obj) => {
   try {
     const res = await propertyStatus({
@@ -74,7 +84,26 @@ const handleStatus = async (obj) =&gt; {
     console.log(e);
   }
 };
-// 状态值
+/**
+ * 代理登录
+ * @param {object} 单条数据对象
+ */
+const handleProxy = (obj) => {
+  userProxy({oId: obj.id}).then(res => {
+    if(res?.data) {
+      globalProperties.$message.success("代理成功");
+      setTimeout(() => {
+        location.href = '/'
+      }, 500)
+    } else {
+      globalProperties.$message.error("代理失败");
+    }
+  })
+}
+/**
+ * 状态值
+ * @enum {number} 
+ */
 enum statusEnum {
   "禁用" = 0,
   "启用",
@@ -157,11 +186,10 @@ onMounted(() =&gt; {
               >编辑</router-link
             ></el-button
           >
-          <el-button type="text" disabled>代理登录</el-button>
+          <el-button type="text" @click="handleProxy(scope.row)">代理登录</el-button>
           <el-button type="text" @click="handleStatus(scope.row)">{{
             scope.row.status ? "禁用" : "启用"
           }}</el-button>
-          <el-button type="text" disabled>删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -17,7 +17,9 @@ let form = reactive({
   dataType: "",
 });
 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
-// 表单验证规则
+/**
+ * 表单验证规则
+ */
 const rules = reactive({
   roleName: [
     {
@@ -34,12 +36,16 @@ const rules = reactive({
     },
   ],
 });
-// 表单重置
+/**
+ * 表单重置
+ */
 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) => {
@@ -81,7 +87,7 @@ onMounted(() =&gt; {
         :rules="rules"
         ref="ruleFormRef"
         label-width="120px"
-        style="display: flex; flex-wrap: wrap; width: 100%"
+        class="card-form"
       >
         <el-form-item label="角色名称" prop="roleName" style="width: 100%">
           <el-input
@@ -3,6 +3,7 @@ import { reactive, ref, onMounted, getCurrentInstance } from &quot;vue&quot;;
 import { roleList, roleStatus } from "@/api/user/role";
 import { parseTime } from "@/utils/tool";
 import Pagination from "@/components/Pagination/index.vue";
+import { ElMessageBox } from "element-plus";
 const {
   appContext: {
     config: { globalProperties },
@@ -48,7 +49,9 @@ let data: Data = reactive({
     },
   },
 });
-// 列表
+/**
+ * 列表
+ */
 const getList = async () => {
   data.loading = true;
   try {
@@ -61,17 +64,56 @@ const getList = async () =&gt; {
     data.loading = false;
   }
 };
-// 分页
+/**
+ * 分页回调
+ * @param {number} page 当前页码
+ * @param {number} size 每页内容条数
+ */
 const handlePageChange = (page, size) => {
   data.params.query.page = page;
   data.params.query.pageSize = size;
   getList();
 };
-// 查询
+/**
+ * 查询
+ */
 const handleSearch = () => {
   getList();
 };
-// 状态
+/**
+ * 删除
+ * @param {object} obj 要删除的数据对象
+ */
+const handleDelete = (obj: any) => {
+  ElMessageBox.confirm("确认删除吗?", "警告", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        let res = await roleStatus({
+          roleId: obj.id,
+          status: 2,
+        });
+        if (res?.data) {
+          globalProperties.$message.success("操作成功");
+          getList();
+        } else {
+          globalProperties.$message.error("操作失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    })
+    .catch(() => {
+      console.log("取消");
+    });
+};
+/**
+ * 状态
+ * @param {object} obj 要操作的数据对象
+ */
 const handleStatus = async (obj) => {
   try {
     const res = await roleStatus({
@@ -88,7 +130,10 @@ const handleStatus = async (obj) =&gt; {
     console.log(e);
   } 
 };
-// 状态值
+/**
+ * 状态值
+ * @enum {number} 
+ */
 enum statusEnum {
   "禁用" = 0,
   "启用",
@@ -160,6 +205,7 @@ onMounted(() =&gt; {
               >权限</router-link
             ></el-button
           >
+          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -21,14 +21,18 @@ let form = reactive({
 });
 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) => {
@@ -49,7 +53,10 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
     }
   });
 };
-// 获取角色权限
+/**
+ * 获取角色权限
+ * @param {number | string} roleId 角色id
+ */
 const getPermissions = async (roleId = useRoute().query.roleId) => {
   try {
     let res = await rolePermission({ roleId: roleId });
@@ -63,10 +70,18 @@ interface Tree {
   label: string
   children?: Tree[]
 }
+/**
+ * 树组件自定义属性
+ */
 const defaultProps: Tree = {
   children: "menuList",
   label: "name",
 };
+/**
+ * 选中树节点回显
+ * @param {array} menuArray 树数组
+ * @returns {array} 
+ */
 const getCheckedPermissions = (menuArray: Tree[]) => {
   if (menuArray) {
     menuArray.map((item: Tree) => {
@@ -80,6 +95,11 @@ const getCheckedPermissions = (menuArray: Tree[]) =&gt; {
   }
   return form.collections;
 };
+/**
+ * 获取选中的树节点
+ * @param {object} node 树节点对象
+ * @param {array} array 树数组
+ */
 const getCheckedRoles = (node: Node, data: Node[]) => {
   form.data.permissionIds = [...data.checkedKeys, ...data.halfCheckedKeys];
 };
@@ -97,7 +117,7 @@ onMounted(() =&gt; {
         :model="form.data"
         ref="ruleFormRef"
         label-width="120px"
-        style="display: flex; flex-wrap: wrap; width: 100%"
+        class="card-form"
       >
         <el-form-item label="角色名称" prop="roleName" style="width: 100%">
           <el-input
@@ -29,12 +29,16 @@ let data: Data = reactive({
     },
   },
 });
-// 状态值
+/**
+ * 状态值
+ */
 enum statusEnum {
   "禁用" = 0,
   "启用",
 }
-// 列表
+/**
+ * 列表
+ */
 const getList = async () => {
   data.loading = true;
   try {
@@ -47,7 +51,11 @@ const getList = async () =&gt; {
     data.loading = false;
   }
 };
-// 分页
+/**
+ * 分页
+ * @param {number} page 当前页数
+ * @param {number} size 每页内容条数
+ */
 const handlePageChange = (page, size) => {
   data.params.query.page = page;
   data.params.query.pageSize = size;
+<script setup lang="ts">
+import { reactive, ref, getCurrentInstance } from "vue";
+import * as store from "@/pinia/index";
+import { userPwdChange } from '@/api/user/user';
+import type { ElForm } from "element-plus";
+
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+let instance: ComponentInternalInstance | null = getCurrentInstance();
+let form = reactive({
+  data: {
+    userId: store?.family?.loginStore()?.id,
+    oldPassword: "",
+    newPassword: "",
+    surePwd: ""
+  }
+});
+/**
+ * 验证两次输入密码一致
+ * @param {object} rules 验证规则
+ * @param {string} value 确认密码文本
+ * @callback checkPwd~checkDoublePwdCallback
+ */
+const checkPwd = (rules, value, callback) => {
+  if(value === form.data.newPassword) {
+    callback()
+  } else {
+    callback(new Error('请确认密码和新密码一致'))
+  }
+}
+/**
+ * 表单验证规则
+ */
+const rules = reactive({
+  oldPassword: [
+    {
+      required: true,
+      message: "请填写旧密码",
+      trigger: "blur",
+    },
+  ],
+  newPassword: [
+    {
+      required: true,
+      message: "请填写新密码",
+      trigger: "blur",
+    },
+  ],
+  surePwd: [
+    {
+      required: true,
+      message: "请确认密码和新密码一致",
+      trigger: "blur",
+      validator: checkPwd
+    },
+  ],
+})
+/**
+ * 表单重置
+ */
+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) {
+      userPwdChange(form.data)
+        .then((res) => {
+          if (res) {
+            instance?.proxy?.$message.success("修改成功");
+            store.family.loginStore().removeToken('请重新登录');
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } else {
+      instance?.proxy?.$message.error("请检查表单内容");
+      return false;
+    }
+  });
+};
+</script>
+
+<template>
+  <div class="page-container">
+    <el-card class="form_card" style="max-width: 1303px">
+      <h1>基本信息</h1>
+      <el-form
+        :inline="true"
+        :model="form.data"
+        :rules="rules"
+        ref="ruleFormRef"
+        label-width="120px"
+        class="card-form"
+      >
+        <el-form-item label="旧密码" prop="oldPassword" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.oldPassword"
+            placeholder="请填写旧密码"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPassword" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.newPassword"
+            placeholder="请填写新密码"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="确认密码" prop="surePwd" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.surePwd"
+            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)"
+            >取消</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
@@ -23,7 +23,12 @@ let form = reactive({
   checkList: [],
 });
 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
-// 校验手机号格式
+/**
+ * 校验手机号格式
+ * @param {object} rules 验证规则
+ * @param {string} value 待验证手机号
+ * @callback checkPhone~checkCallback
+ */
 const checkPhone = (rules, value, callback) => {
   if (validMobile(value)) {
     callback();
@@ -32,6 +37,9 @@ const checkPhone = (rules, value, callback) =&gt; {
   }
 };
 // 表单验证规则
+/**
+ * 表单验证规则
+ */
 const rules = reactive({
   userName: [
     {
@@ -47,6 +55,13 @@ const rules = reactive({
       trigger: "blur",
     },
   ],
+  password: [
+    {
+      required: true,
+      message: "请填写密码",
+      trigger: "blur",
+    },
+  ],
   cellphone: [
     {
       required: true,
@@ -56,13 +71,17 @@ const rules = reactive({
     },
   ],
 });
-// 表单重置
+/**
+ * 表单重置
+ */
 const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
   if (!formEl) return;
   form.checkList = [];
   formEl.resetFields();
 };
-// 表单提交
+/**
+ * 表单提交
+ */
 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
   if (!formEl) return;
   formEl.validate((valid) => {
@@ -83,7 +102,10 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
     }
   });
 };
-// 角色列表
+/**
+ * 角色列表
+ * @param {number | null} pageSize 一次请求多少条数据
+ */
 const getRoleList = async (pageSize = 20) => {
   try {
     const res = await roleList({
@@ -121,7 +143,7 @@ onMounted(() =&gt; {
         :rules="rules"
         ref="ruleFormRef"
         label-width="120px"
-        style="display: flex; flex-wrap: wrap; width: 100%"
+        class="card-form"
       >
         <el-form-item label="用户名称" prop="userName" style="width: 100%">
           <el-input
 <script setup lang="ts">
-import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { userList, userPwd, userStatus } from "@/api/user/user";
 import { parseTime } from "@/utils/tool";
 import Pagination from "@/components/Pagination/index.vue";
-const {
-  appContext: {
-    config: { globalProperties },
-  },
-} = getCurrentInstance();
+import { ElMessageBox, ElMessage } from "element-plus";
 interface Form {
   page: number;
   pageSize: number;
@@ -36,7 +32,9 @@ let data = reactive({
     },
   },
 });
-// 列表
+/**
+ * 列表
+ */
 const getList = async () => {
   data.loading = true;
   try {
@@ -49,41 +47,96 @@ const getList = async () =&gt; {
     data.loading = false;
   }
 };
-// 分页
+/**
+ * 分页回调
+ * @param {number} page 当前页码
+ * @param {number} size 每页内容条数
+ */
 const handlePageChange = (page, size) => {
   data.params.query.page = page;
   data.params.query.pageSize = size;
   getList();
 };
-// 查询
+/**
+ * 查询
+ */
 const handleSearch = () => {
   getList();
 };
-// 初始化密码type=pwd、修改状态type=status
+/**
+ * 删除
+ * @param {object} obj 要删除的数据对象
+ */
+const handleDelete = (obj: any) => {
+  ElMessageBox.confirm("确认删除吗?", "警告", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        let res = await userStatus({
+          userId: obj.id,
+          status: 2,
+        });
+        if (res?.data) {
+          ElMessage({
+            type: "success",
+            message: "操作成功",
+          });
+          getList();
+        } else {
+          ElMessage({
+            type: "error",
+            message: "操作失败",
+          });
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    })
+    .catch(() => {
+      console.log("取消");
+    });
+};
+/**
+ * 修改
+ * @param {object} obj 一条数据对象
+ * @param {string} type 修改操作的类型，pwd修改密码，status修改状态
+ */
 const handleUpdate = async (obj: any, type: string) => {
   try {
     let res;
     if (type === "status") {
       res = await userStatus({
-        id: obj.id,
+        userId: obj.id,
         status: obj.status ? 0 : 1,
       });
     } else if (type === "pwd") {
       res = await userPwd({
-        id: obj.id,
+        userId: obj.id,
       });
-    }
+    } 
     if (res?.data) {
-      globalProperties.$message.success("操作成功");
+      ElMessage({
+        type: "success",
+        message: "操作成功",
+      });
       getList();
     } else {
-      globalProperties.$message.error("操作失败");
+      ElMessage({
+        type: "error",
+        message: "操作失败",
+      });
     }
   } catch (e) {
     console.log(e);
   }
 };
-// 状态值
+/**
+ * 状态值
+ * @enum {number}
+ */
 enum statusEnum {
   "禁用" = 0,
   "启用",
@@ -106,7 +159,7 @@ onMounted(() =&gt; {
             @change="handleSearch"
           />
         </el-form-item>
-        <el-form-item label="用户名">
+        <el-form-item label="手机号">
           <el-input
             v-model.trim="data.params.query.cellphone"
             placeholder="请填写用户手机号"
@@ -159,10 +212,14 @@ onMounted(() =&gt; {
             >初始密码</el-button
           >
           <el-button type="text"
-            ><router-link :to="{ path: '/user/role', query: {id: scope.row.id}}"
+            ><router-link
+              :to="{ path: '/user/role', query: { id: scope.row.id } }"
               >角色</router-link
             ></el-button
           >
+          <el-button type="text" @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -14,15 +14,21 @@ 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) => {
@@ -43,7 +49,9 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
     }
   });
 };
-// 获取权限菜单
+/**
+ * 获取权限菜单
+ */
 const getMenu = async () => {
   try {
     let res = await menuData();
@@ -2,13 +2,11 @@
 import { reactive, ref, onMounted } from "vue";
 import { userRoles } from "@/api/user/user";
 import { parseTime } from "@/utils/tool";
-import Pagination from "@/components/Pagination/index.vue";
 interface Form {
   page: number;
   pageSize: number;
 }
 interface Params {
-  total: number;
   query: Form;
 }
 interface Data {
@@ -20,32 +18,26 @@ let data = reactive({
   list: [],
   loading: false,
   params: {
-    total: 0,
     query: {
       page: 1,
       pageSize: 10
     },
   },
 });
-// 列表
+/**
+ * 列表
+ */
 const getList = async () => {
   data.loading = true;
   try {
     const res = await userRoles(data.params.query);
     data.list = res.data.data;
-    data.params.total = res.data.data.length;
   } 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(() => {
   getList();
 });
@@ -65,11 +57,5 @@ onMounted(() =&gt; {
       <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>
-    <Pagination
-      :total="data.params.total"
-      :currentPage="data.params.query.page"
-      :pageSize="data.params.query.pageSize"
-      @pageChange="handlePageChange"
-    ></Pagination>
   </div>
 </template>