用户管理

杨泽宇
1 parent a25f1314
Showing 13 changed files with 628 additions and 27 deletions
src/api/user/login/index.ts
src/api/user/role/index.ts
src/api/user/user/index.ts
src/layout/menu.vue
src/router/index.ts
src/router/modules/property.ts
src/router/modules/user.ts
src/views/property/edit.vue
src/views/property/index.vue
src/views/user/edit.vue
src/views/user/index.vue
src/views/user/login.vue
src/views/user/role.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 {formDataWrapper} from '@/utils/tool'
+
+/**
+ * @description 角色列表
+ * @function roleList
+ */
+export const roleList = async ( params: any ) => {
+  let res: any = await request({
+    url: '/role/list',
+    method: 'get',
+    params: params
+  })
+  return res
+}
 \ No newline at end of file
+import request from '../../request'
+import {formDataWrapper} from '@/utils/tool'
+
+/**
+ * @description 用户列表
+ * @function userList
+ */
+export const userList = async ( params: any ) => {
+  let res: any = await request({
+    url: '/user/list',
+    method: 'get',
+    params: params
+  })
+  return res
+}
+
+/**
+ * @description 添加用户
+ * @function userAdd
+ */
+export const userAdd = async (data: any) => {
+  let res: any = await request({
+    url: '/user/add',
+    method: 'post',
+    data: data
+  })
+  return res
+}
+
+/**
+ * @description 编辑用户
+ * @function userEdit
+ */
+ export const userEdit = async (data: any) => {
+  let res: any = await request({
+    url: '/user/edit',
+    method: 'post',
+    data: data
+  })
+  return res
+}
+
+/**
+ * @description 初始密码
+ * @function userPwd
+ */
+ export const userPwd = async (params: any) => {
+  let res: any = await request.put( '/user/initialPassword', formDataWrapper(params)  )
+  return res
+}
+
+/**
+ * @description 修改密码
+ * @function userPwdChange
+ */
+ export const userPwdChange = async (params: any) => {
+  let res: any = await request({
+    url: '/user/modifierPassword',
+    method: 'put',
+    params: params
+  })
+  return res
+}
+
+/**
+ * @description 用户角色
+ * @function userRoles
+ */
+ export const userRoles = async (params: any) => {
+  let res: any = await request({
+    url: '/user/role/list',
+    method: 'get',
+    params: params
+  })
+  return res
+}
+
+/**
+ * @description 修改用户状态
+ * @function userStatus
+ */
+ export const userStatus = async (data: any) => {
+  let res: any = await request.put( '/user/status', formDataWrapper(data)  )
+  return res
+}
+
+/**
+ * @description 用户代理机构
+ * @function userProxy
+ */
+ export const userProxy = async (params: any) => {
+  let res: any = await request({
+    url: '/user/proxy',
+    method: 'get',
+    params: params
+  })
+  return res
+}
 \ No newline at end of file
@@ -47,13 +47,22 @@ let styleData = computed(() =&gt; {
           <span>小区管理</span>
         </template>
         <el-menu-item-group>
-          <el-menu-item index="/community">小区管理</el-menu-item>
+          <el-menu-item index="/">小区管理</el-menu-item>
         </el-menu-item-group>
       </el-sub-menu>
-      <el-menu-item index="3" disabled>
+      <el-sub-menu index="3">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <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> -->
       <el-menu-item index="4">
         <el-icon><setting /></el-icon>
         <template #title>Navigator Four</template>
 import { createRouter, createWebHashHistory } from 'vue-router'
+import User from "./modules/user"
 import Resident from "./modules/resident"
 import Property from "./modules/property"
 import Community from "./modules/community"
@@ -35,6 +36,7 @@ const routes: Array&lt;any&gt; = [
     }]
     // component: () => import(/* webpackChunkName: "About" */ '@/views/tengxi/about.vue')
   },
+  User,
   Resident,
   Property,
   Community,
@@ -44,16 +46,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 {  RouteRecordRaw } from 'vue-router'
 import Layout from '@/layout/enter.vue'
 const property= {
   path: '/',
+import Layout from '@/layout/enter.vue'
+const user = {
+  path: '/',
+  component: Layout,
+  name: 'User',
+  children: [{
+    path: 'user',
+    name: 'user',
+    component: () => import('@/views/user/index.vue'),
+    meta: { title: '用户管理' }
+  }, {
+    path: '/user/role',
+    name: 'role',
+    component: () => import('@/views/user/role.vue'),
+    meta: { title: '用户角色' }
+  }, {
+    path: '/user/edit',
+    name: 'edition',
+    component: () => import('@/views/user/edit.vue'),
+    meta: { title: '用户角色' }
+  }]
+}
+
+export default user
@@ -10,6 +10,7 @@ const {
   },
 } = getCurrentInstance();
 let form = reactive({
+  dataType: "",
   data: {
     name: "",
     userName: "",
@@ -121,14 +122,20 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
   });
 };
 onMounted(() => {
-  form.data = useRoute().query
+  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>新增物业</h1>
+      <h1 v-show="form.dataType === 'add'">新增物业</h1>
+      <h1 v-show="form.dataType === 'edit'">编辑物业</h1>
       <el-form
         :inline="true"
         :model="form.data"
@@ -152,7 +152,11 @@ onMounted(() =&gt; {
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button type="text"><router-link :to="{path:'/property/edit',query:scope.row}">编辑</router-link></el-button>
+          <el-button type="text"
+            ><router-link :to="{ path: '/property/edit', query: scope.row }"
+              >编辑</router-link
+            ></el-button
+          >
           <el-button type="text" disabled>代理登录</el-button>
           <el-button type="text" @click="handleStatus(scope.row)">{{
             scope.row.status ? "禁用" : "启用"
+<script setup lang="ts">
+import { reactive, ref, getCurrentInstance, onMounted } from "vue";
+import { userAdd } from "@/api/user/user";
+import { roleList } from "@/api/user/role";
+import { useRoute } from "vue-router";
+import { validMobile } from "@/utils/validate";
+import type { ElForm } from "element-plus";
+const {
+  appContext: {
+    config: { globalProperties },
+  },
+} = getCurrentInstance();
+let form = reactive({
+  data: {
+    userName: "",
+    cellphone: "",
+    password: "",
+    roleIds: "",
+    userId: "",
+  },
+  dataType: "",
+  roles: [],
+  checkList: [],
+});
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+// 校验手机号格式
+const checkPhone = (rules, value, callback) => {
+  if (validMobile(value)) {
+    callback();
+  } else {
+    callback(new Error("请填写格式正确的手机号码"));
+  }
+};
+// 表单验证规则
+const rules = reactive({
+  userName: [
+    {
+      required: true,
+      message: "请填写用户名称",
+      trigger: "blur",
+    },
+  ],
+  roleIds: [
+    {
+      required: true,
+      message: "请选择角色",
+      trigger: "blur",
+    },
+  ],
+  cellphone: [
+    {
+      required: true,
+      message: "请填写格式正确的手机号码",
+      trigger: "blur",
+      validator: checkPhone,
+    },
+  ],
+});
+// 表单重置
+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) => {
+    if (valid) {
+      userAdd(form.data)
+        .then((res) => {
+          if (res) {
+            globalProperties.$message.success("操作成功");
+            history.go(-1);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } else {
+      globalProperties.$message.error("请检查表单格式");
+      return false;
+    }
+  });
+};
+// 角色列表
+const getRoleList = async (pageSize = 20) => {
+  try {
+    const res = await roleList({
+      page: 1,
+      pageSize: pageSize,
+    });
+    form.roles = res.data.data.list;
+    if (res.data.data.total > pageSize) {
+      getRoleList(res.data.data.total);
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+onMounted(() => {
+  getRoleList();
+  form.data = useRoute().query;
+  if (JSON.stringify(form.data) === "{}") {
+    form.dataType = "add";
+  } else {
+    form.dataType = "edit";
+    form.checkList = form.data.roleIds.split(",").map((v) => v / 1);
+  }
+});
+</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="userName" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.userName"
+            placeholder="请填写用户名称"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="手机号码" prop="cellphone" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.cellphone"
+            placeholder="请填写手机号码"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="密码" prop="password" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.password"
+            placeholder="请填写密码"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="角色" prop="roleIds" style="width: 100%">
+          <el-checkbox-group
+            v-model="form.checkList"
+            @change="(data) => (form.data.roleIds = data.join(','))"
+          >
+            <el-checkbox
+              v-for="(item, index) in form.roles"
+              :key="index"
+              :label="item.id"
+              >{{ item.roleName }}</el-checkbox
+            >
+          </el-checkbox-group>
+        </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 { userList, userPwd, userStatus } from "@/api/user/user";
+import { parseTime } from "@/utils/tool";
+import Pagination from "@/components/Pagination/index.vue";
+const {
+  appContext: {
+    config: { globalProperties },
+  },
+} = getCurrentInstance();
+interface Form {
+  page: number;
+  pageSize: number;
+  userName?: string;
+  cellPhone?: string;
+}
+interface Params {
+  total: number;
+  query: Form;
+}
+interface Data {
+  loading: boolean;
+  list: any[] | null;
+  params: Params;
+}
+let data = reactive({
+  list: [],
+  loading: false,
+  params: {
+    total: 0,
+    query: {
+      page: 1,
+      pageSize: 10,
+      userName: "",
+      cellPhone: "",
+    },
+  },
+});
+// 列表
+const getList = async () => {
+  data.loading = true;
+  try {
+    const res = await userList(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();
+};
+// 初始化密码type=pwd、修改状态type=status
+const handleUpdate = async (obj: any, type: string) => {
+  try {
+    let res;
+    if (type === "status") {
+      res = await userStatus({
+        id: obj.id,
+        status: obj.status ? 0 : 1,
+      });
+    } else if (type === "pwd") {
+      res = await userPwd({
+        id: obj.id,
+      });
+    }
+    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.userName"
+            placeholder="请填写用户名"
+            maxlength="15"
+            @change="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="用户名">
+          <el-input
+            v-model.trim="data.params.query.cellPhone"
+            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="/user/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="userName" label="昵称" align="center">
+      </el-table-column>
+      <el-table-column prop="cellphone" 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: '/user/edit', query: scope.row }"
+              >编辑</router-link
+            ></el-button
+          >
+          <el-button type="text" @click="handleUpdate(scope.row, 'status')">{{
+            scope.row.status ? "禁用" : "启用"
+          }}</el-button>
+          <el-button type="text" @click="handleUpdate(scope.row, 'pwd')"
+            >初始密码</el-button
+          >
+          <el-button type="text"
+            ><router-link :to="{ path: '/user/role', query: scope.row }"
+              >角色</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 { login } from '@/api/login'
+import { login } from "@/api/user/login";
+import * as all from "vue-router";
 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)
+login().then((res) => {
+  console.log(res);
+  console.log(store.family.loginStore().token);
+  if (res) {
+    store.family.loginStore().setToken(res.data.data.token);
   }
-})
+});
 </script>
 <template>
   <p>Login</p>
+  <router-link :to="{ path: '/' }"
+              >回首页</router-link
+            >
 </template>
-<style lang="scss" scoped>
-  
-</style>
+<style lang="scss" scoped></style>
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { userRoles } from "@/api/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 {
+  loading: boolean;
+  list: any[] | null;
+  params: Params;
+}
+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();
+});
+</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="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>