cnlive_project / cnlive-community-web-vue · Commits

Commit c8126ee391f82cec1c0269e615e0c5ec53691606

Authored by 杨泽宇
1 parent a25f1314

用户管理

Inline Side-by-side
Showing 13 changed files with 628 additions and 27 deletions
src/api/user/login/index.ts 0 → 100644
  View file @c8126ee
  1 +import request from '../../request'
  2 +import { AxiosRequestConfig } from 'axios';
  3 +
  4 +export const login = async ( params: any, data: any ) => {
  5 + // let res: any = await request.post( '/login', data, {userName: '123', password: 'cmnt123'} )
  6 + let res: any = await request({
  7 + url: '/login',
  8 + method: 'post',
  9 + data: {
  10 + userName: '123',
  11 + password: 'cmnt123'
  12 + }
  13 + })
  14 + // let res: any = await request( {url: '/neighborhood/getList', params:{propertyId: 1, type: 1}, method: 'post' })
  15 + return res
  16 +}
0 17 \ No newline at end of file
... ...
src/api/user/role/index.ts 0 → 100644
  View file @c8126ee
  1 +import request from '../../request'
  2 +import {formDataWrapper} from '@/utils/tool'
  3 +
  4 +/**
  5 + * @description 角色列表
  6 + * @function roleList
  7 + */
  8 +export const roleList = async ( params: any ) => {
  9 + let res: any = await request({
  10 + url: '/role/list',
  11 + method: 'get',
  12 + params: params
  13 + })
  14 + return res
  15 +}
0 16 \ No newline at end of file
... ...
src/api/user/user/index.ts 0 → 100644
  View file @c8126ee
  1 +import request from '../../request'
  2 +import {formDataWrapper} from '@/utils/tool'
  3 +
  4 +/**
  5 + * @description 用户列表
  6 + * @function userList
  7 + */
  8 +export const userList = async ( params: any ) => {
  9 + let res: any = await request({
  10 + url: '/user/list',
  11 + method: 'get',
  12 + params: params
  13 + })
  14 + return res
  15 +}
  16 +
  17 +/**
  18 + * @description 添加用户
  19 + * @function userAdd
  20 + */
  21 +export const userAdd = async (data: any) => {
  22 + let res: any = await request({
  23 + url: '/user/add',
  24 + method: 'post',
  25 + data: data
  26 + })
  27 + return res
  28 +}
  29 +
  30 +/**
  31 + * @description 编辑用户
  32 + * @function userEdit
  33 + */
  34 + export const userEdit = async (data: any) => {
  35 + let res: any = await request({
  36 + url: '/user/edit',
  37 + method: 'post',
  38 + data: data
  39 + })
  40 + return res
  41 +}
  42 +
  43 +/**
  44 + * @description 初始密码
  45 + * @function userPwd
  46 + */
  47 + export const userPwd = async (params: any) => {
  48 + let res: any = await request.put( '/user/initialPassword', formDataWrapper(params) )
  49 + return res
  50 +}
  51 +
  52 +/**
  53 + * @description 修改密码
  54 + * @function userPwdChange
  55 + */
  56 + export const userPwdChange = async (params: any) => {
  57 + let res: any = await request({
  58 + url: '/user/modifierPassword',
  59 + method: 'put',
  60 + params: params
  61 + })
  62 + return res
  63 +}
  64 +
  65 +/**
  66 + * @description 用户角色
  67 + * @function userRoles
  68 + */
  69 + export const userRoles = async (params: any) => {
  70 + let res: any = await request({
  71 + url: '/user/role/list',
  72 + method: 'get',
  73 + params: params
  74 + })
  75 + return res
  76 +}
  77 +
  78 +/**
  79 + * @description 修改用户状态
  80 + * @function userStatus
  81 + */
  82 + export const userStatus = async (data: any) => {
  83 + let res: any = await request.put( '/user/status', formDataWrapper(data) )
  84 + return res
  85 +}
  86 +
  87 +/**
  88 + * @description 用户代理机构
  89 + * @function userProxy
  90 + */
  91 + export const userProxy = async (params: any) => {
  92 + let res: any = await request({
  93 + url: '/user/proxy',
  94 + method: 'get',
  95 + params: params
  96 + })
  97 + return res
  98 +}
0 99 \ No newline at end of file
... ...
src/layout/menu.vue
  View file @c8126ee
... ... @@ -47,13 +47,22 @@ let styleData = computed(() => {
47 47 <span>小区管理</span>
48 48 </template>
49 49 <el-menu-item-group>
50   - <el-menu-item index="/community">小区管理</el-menu-item>
  50 + <el-menu-item index="/">小区管理</el-menu-item>
51 51 </el-menu-item-group>
52 52 </el-sub-menu>
53   - <el-menu-item index="3" disabled>
  53 + <el-sub-menu index="3">
  54 + <template #title>
  55 + <el-icon><location /></el-icon>
  56 + <span>用户管理</span>
  57 + </template>
  58 + <el-menu-item-group>
  59 + <el-menu-item index="/user">用户列表</el-menu-item>
  60 + </el-menu-item-group>
  61 + </el-sub-menu>
  62 + <!-- <el-menu-item index="3" disabled>
54 63 <el-icon><document /></el-icon>
55 64 <template #title>Navigator Three</template>
56   - </el-menu-item>
  65 + </el-menu-item> -->
57 66 <el-menu-item index="4">
58 67 <el-icon><setting /></el-icon>
59 68 <template #title>Navigator Four</template>
... ...
src/router/index.ts
  View file @c8126ee
1 1 import { createRouter, createWebHashHistory } from 'vue-router'
  2 +import User from "./modules/user"
2 3 import Resident from "./modules/resident"
3 4 import Property from "./modules/property"
4 5 import Community from "./modules/community"
... ... @@ -35,6 +36,7 @@ const routes: Array&lt;any&gt; = [
35 36 }]
36 37 // component: () => import(/* webpackChunkName: "About" */ '@/views/tengxi/about.vue')
37 38 },
  39 + User,
38 40 Resident,
39 41 Property,
40 42 Community,
... ... @@ -44,16 +46,16 @@ const routes: Array&lt;any&gt; = [
44 46 name: 'Login',
45 47 component: () => import(/* webpackChunkName: "About" */ '@/views/user/login.vue')
46 48 },
47   - {
48   - path: '/404',
49   - name: 'Error',
50   - component: () => import(/* webpackChunkName: "Error" */ '@/views/error/404.vue'),
51   - hidden: true
52   - },
53   - {
54   - path: '/:pathMatch(.*)*',
55   - redirect: '/404'
56   - },
  49 + // {
  50 + // path: '/404',
  51 + // name: 'Error',
  52 + // component: () => import(/* webpackChunkName: "Error" */ '@/views/error/404.vue'),
  53 + // hidden: true
  54 + // },
  55 + // {
  56 + // path: '/:pathMatch(.*)*',
  57 + // redirect: '/404'
  58 + // },
57 59  
58 60 ]
59 61  
... ...
src/router/modules/property.ts
  View file @c8126ee
1   -import { RouteRecordRaw } from 'vue-router'
2 1 import Layout from '@/layout/enter.vue'
3 2 const property= {
4 3 path: '/',
... ...
src/router/modules/user.ts 0 → 100644
  View file @c8126ee
  1 +import Layout from '@/layout/enter.vue'
  2 +const user = {
  3 + path: '/',
  4 + component: Layout,
  5 + name: 'User',
  6 + children: [{
  7 + path: 'user',
  8 + name: 'user',
  9 + component: () => import('@/views/user/index.vue'),
  10 + meta: { title: '用户管理' }
  11 + }, {
  12 + path: '/user/role',
  13 + name: 'role',
  14 + component: () => import('@/views/user/role.vue'),
  15 + meta: { title: '用户角色' }
  16 + }, {
  17 + path: '/user/edit',
  18 + name: 'edition',
  19 + component: () => import('@/views/user/edit.vue'),
  20 + meta: { title: '用户角色' }
  21 + }]
  22 +}
  23 +
  24 +export default user
... ...
src/views/property/edit.vue
  View file @c8126ee
... ... @@ -10,6 +10,7 @@ const {
10 10 },
11 11 } = getCurrentInstance();
12 12 let form = reactive({
  13 + dataType: "",
13 14 data: {
14 15 name: "",
15 16 userName: "",
... ... @@ -121,14 +122,20 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
121 122 });
122 123 };
123 124 onMounted(() => {
124   - form.data = useRoute().query
  125 + form.data = useRoute().query;
  126 + if (JSON.stringify(form.data) === "{}") {
  127 + form.dataType = "add";
  128 + } else {
  129 + form.dataType = "edit";
  130 + }
125 131 });
126 132 </script>
127 133  
128 134 <template>
129 135 <div class="page-container">
130 136 <el-card class="form_card" style="max-width: 1303px">
131   - <h1>新增物业</h1>
  137 + <h1 v-show="form.dataType === 'add'">新增物业</h1>
  138 + <h1 v-show="form.dataType === 'edit'">编辑物业</h1>
132 139 <el-form
133 140 :inline="true"
134 141 :model="form.data"
... ...
src/views/property/index.vue
  View file @c8126ee
... ... @@ -152,7 +152,11 @@ onMounted(() =&gt; {
152 152 </el-table-column>
153 153 <el-table-column label="操作" align="center">
154 154 <template #default="scope">
155   - <el-button type="text"><router-link :to="{path:'/property/edit',query:scope.row}">编辑</router-link></el-button>
  155 + <el-button type="text"
  156 + ><router-link :to="{ path: '/property/edit', query: scope.row }"
  157 + >编辑</router-link
  158 + ></el-button
  159 + >
156 160 <el-button type="text" disabled>代理登录</el-button>
157 161 <el-button type="text" @click="handleStatus(scope.row)">{{
158 162 scope.row.status ? "禁用" : "启用"
... ...
src/views/user/edit.vue 0 → 100644
  View file @c8126ee
  1 +<script setup lang="ts">
  2 +import { reactive, ref, getCurrentInstance, onMounted } from "vue";
  3 +import { userAdd } from "@/api/user/user";
  4 +import { roleList } from "@/api/user/role";
  5 +import { useRoute } from "vue-router";
  6 +import { validMobile } from "@/utils/validate";
  7 +import type { ElForm } from "element-plus";
  8 +const {
  9 + appContext: {
  10 + config: { globalProperties },
  11 + },
  12 +} = getCurrentInstance();
  13 +let form = reactive({
  14 + data: {
  15 + userName: "",
  16 + cellphone: "",
  17 + password: "",
  18 + roleIds: "",
  19 + userId: "",
  20 + },
  21 + dataType: "",
  22 + roles: [],
  23 + checkList: [],
  24 +});
  25 +const ruleFormRef = ref<InstanceType<typeof ElForm>>();
  26 +// 校验手机号格式
  27 +const checkPhone = (rules, value, callback) => {
  28 + if (validMobile(value)) {
  29 + callback();
  30 + } else {
  31 + callback(new Error("请填写格式正确的手机号码"));
  32 + }
  33 +};
  34 +// 表单验证规则
  35 +const rules = reactive({
  36 + userName: [
  37 + {
  38 + required: true,
  39 + message: "请填写用户名称",
  40 + trigger: "blur",
  41 + },
  42 + ],
  43 + roleIds: [
  44 + {
  45 + required: true,
  46 + message: "请选择角色",
  47 + trigger: "blur",
  48 + },
  49 + ],
  50 + cellphone: [
  51 + {
  52 + required: true,
  53 + message: "请填写格式正确的手机号码",
  54 + trigger: "blur",
  55 + validator: checkPhone,
  56 + },
  57 + ],
  58 +});
  59 +// 表单重置
  60 +const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  61 + if (!formEl) return;
  62 + form.checkList = [];
  63 + formEl.resetFields();
  64 +};
  65 +// 表单提交
  66 +const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  67 + if (!formEl) return;
  68 + formEl.validate((valid) => {
  69 + if (valid) {
  70 + userAdd(form.data)
  71 + .then((res) => {
  72 + if (res) {
  73 + globalProperties.$message.success("操作成功");
  74 + history.go(-1);
  75 + }
  76 + })
  77 + .catch((error) => {
  78 + console.log(error);
  79 + });
  80 + } else {
  81 + globalProperties.$message.error("请检查表单格式");
  82 + return false;
  83 + }
  84 + });
  85 +};
  86 +// 角色列表
  87 +const getRoleList = async (pageSize = 20) => {
  88 + try {
  89 + const res = await roleList({
  90 + page: 1,
  91 + pageSize: pageSize,
  92 + });
  93 + form.roles = res.data.data.list;
  94 + if (res.data.data.total > pageSize) {
  95 + getRoleList(res.data.data.total);
  96 + }
  97 + } catch (e) {
  98 + console.log(e);
  99 + }
  100 +};
  101 +onMounted(() => {
  102 + getRoleList();
  103 + form.data = useRoute().query;
  104 + if (JSON.stringify(form.data) === "{}") {
  105 + form.dataType = "add";
  106 + } else {
  107 + form.dataType = "edit";
  108 + form.checkList = form.data.roleIds.split(",").map((v) => v / 1);
  109 + }
  110 +});
  111 +</script>
  112 +
  113 +<template>
  114 + <div class="page-container">
  115 + <el-card class="form_card" style="max-width: 1303px">
  116 + <h1 v-show="form.dataType === 'add'">新增用户</h1>
  117 + <h1 v-show="form.dataType === 'edit'">编辑用户</h1>
  118 + <el-form
  119 + :inline="true"
  120 + :model="form.data"
  121 + :rules="rules"
  122 + ref="ruleFormRef"
  123 + label-width="120px"
  124 + style="display: flex; flex-wrap: wrap; width: 100%"
  125 + >
  126 + <el-form-item label="用户名称" prop="userName" style="width: 100%">
  127 + <el-input
  128 + v-model.trim="form.data.userName"
  129 + placeholder="请填写用户名称"
  130 + maxlength="15"
  131 + />
  132 + </el-form-item>
  133 + <el-form-item label="手机号码" prop="cellphone" style="width: 100%">
  134 + <el-input
  135 + v-model.trim="form.data.cellphone"
  136 + placeholder="请填写手机号码"
  137 + maxlength="15"
  138 + />
  139 + </el-form-item>
  140 + <el-form-item label="密码" prop="password" style="width: 100%">
  141 + <el-input
  142 + v-model.trim="form.data.password"
  143 + placeholder="请填写密码"
  144 + maxlength="15"
  145 + />
  146 + </el-form-item>
  147 + <el-form-item label="角色" prop="roleIds" style="width: 100%">
  148 + <el-checkbox-group
  149 + v-model="form.checkList"
  150 + @change="(data) => (form.data.roleIds = data.join(','))"
  151 + >
  152 + <el-checkbox
  153 + v-for="(item, index) in form.roles"
  154 + :key="index"
  155 + :label="item.id"
  156 + >{{ item.roleName }}</el-checkbox
  157 + >
  158 + </el-checkbox-group>
  159 + </el-form-item>
  160 + <el-form-item style="width: 100%">
  161 + <el-button type="primary" @click="submitForm(ruleFormRef)"
  162 + >提交</el-button
  163 + >
  164 + <el-button
  165 + type="info"
  166 + @click="resetForm(ruleFormRef)"
  167 + v-show="form.dataType === 'add'"
  168 + >取消</el-button
  169 + >
  170 + </el-form-item>
  171 + </el-form>
  172 + </el-card>
  173 + </div>
  174 +</template>
... ...
src/views/user/index.vue 0 → 100644
  View file @c8126ee
  1 +<script setup lang="ts">
  2 +import { reactive, ref, onMounted, getCurrentInstance } from "vue";
  3 +import { userList, userPwd, userStatus } from "@/api/user/user";
  4 +import { parseTime } from "@/utils/tool";
  5 +import Pagination from "@/components/Pagination/index.vue";
  6 +const {
  7 + appContext: {
  8 + config: { globalProperties },
  9 + },
  10 +} = getCurrentInstance();
  11 +interface Form {
  12 + page: number;
  13 + pageSize: number;
  14 + userName?: string;
  15 + cellPhone?: string;
  16 +}
  17 +interface Params {
  18 + total: number;
  19 + query: Form;
  20 +}
  21 +interface Data {
  22 + loading: boolean;
  23 + list: any[] | null;
  24 + params: Params;
  25 +}
  26 +let data = reactive({
  27 + list: [],
  28 + loading: false,
  29 + params: {
  30 + total: 0,
  31 + query: {
  32 + page: 1,
  33 + pageSize: 10,
  34 + userName: "",
  35 + cellPhone: "",
  36 + },
  37 + },
  38 +});
  39 +// 列表
  40 +const getList = async () => {
  41 + data.loading = true;
  42 + try {
  43 + const res = await userList(data.params.query);
  44 + data.list = res.data.data.list;
  45 + data.params.total = res.data.data.total;
  46 + } catch (e) {
  47 + console.log(e);
  48 + } finally {
  49 + data.loading = false;
  50 + }
  51 +};
  52 +// 分页
  53 +const handlePageChange = (page, size) => {
  54 + data.params.query.page = page;
  55 + data.params.query.pageSize = size;
  56 + getList();
  57 +};
  58 +// 查询
  59 +const handleSearch = () => {
  60 + getList();
  61 +};
  62 +// 初始化密码type=pwd、修改状态type=status
  63 +const handleUpdate = async (obj: any, type: string) => {
  64 + try {
  65 + let res;
  66 + if (type === "status") {
  67 + res = await userStatus({
  68 + id: obj.id,
  69 + status: obj.status ? 0 : 1,
  70 + });
  71 + } else if (type === "pwd") {
  72 + res = await userPwd({
  73 + id: obj.id,
  74 + });
  75 + }
  76 + if (res?.data) {
  77 + globalProperties.$message.success("操作成功");
  78 + getList();
  79 + } else {
  80 + globalProperties.$message.error("操作失败");
  81 + }
  82 + } catch (e) {
  83 + console.log(e);
  84 + }
  85 +};
  86 +// 状态值
  87 +enum statusEnum {
  88 + "禁用" = 0,
  89 + "启用",
  90 +}
  91 +onMounted(() => {
  92 + getList();
  93 +});
  94 +</script>
  95 +
  96 +<template>
  97 + <div class="page-container">
  98 + <h1>用户列表</h1>
  99 + <el-row style="padding-bottom: 20px">
  100 + <el-form :inline="true" label-width="70px">
  101 + <el-form-item label="用户名">
  102 + <el-input
  103 + v-model.trim="data.params.query.userName"
  104 + placeholder="请填写用户名"
  105 + maxlength="15"
  106 + @change="handleSearch"
  107 + />
  108 + </el-form-item>
  109 + <el-form-item label="用户名">
  110 + <el-input
  111 + v-model.trim="data.params.query.cellPhone"
  112 + placeholder="请填写用户手机号"
  113 + maxlength="15"
  114 + @change="handleSearch"
  115 + />
  116 + </el-form-item>
  117 + <el-form-item>
  118 + <el-button type="primary" @click="handleSearch">查询</el-button>
  119 + <el-button type="primary">
  120 + <router-link to="/user/edit">添加用户</router-link>
  121 + </el-button>
  122 + </el-form-item>
  123 + </el-form>
  124 + </el-row>
  125 + <el-table
  126 + :data="data.list"
  127 + style="width: 100%"
  128 + border
  129 + v-loading="data.loading"
  130 + align="center"
  131 + element-loading-text="拼命加载中"
  132 + >
  133 + <el-table-column prop="id" label="ID" align="center"> </el-table-column>
  134 + <el-table-column prop="userName" label="昵称" align="center">
  135 + </el-table-column>
  136 + <el-table-column prop="cellphone" label="手机号" align="center">
  137 + </el-table-column>
  138 + <el-table-column prop="createTime" label="注册时间" align="center">
  139 + <template #default="scope">
  140 + {{ parseTime(new Date(scope.row.createTime).getTime()) }}
  141 + </template>
  142 + </el-table-column>
  143 + <el-table-column prop="status" label="状态" align="center">
  144 + <template #default="scope">
  145 + {{ statusEnum[scope.row.status] }}
  146 + </template>
  147 + </el-table-column>
  148 + <el-table-column label="操作" align="center">
  149 + <template #default="scope">
  150 + <el-button type="text"
  151 + ><router-link :to="{ path: '/user/edit', query: scope.row }"
  152 + >编辑</router-link
  153 + ></el-button
  154 + >
  155 + <el-button type="text" @click="handleUpdate(scope.row, 'status')">{{
  156 + scope.row.status ? "禁用" : "启用"
  157 + }}</el-button>
  158 + <el-button type="text" @click="handleUpdate(scope.row, 'pwd')"
  159 + >初始密码</el-button
  160 + >
  161 + <el-button type="text"
  162 + ><router-link :to="{ path: '/user/role', query: scope.row }"
  163 + >角色</router-link
  164 + ></el-button
  165 + >
  166 + </template>
  167 + </el-table-column>
  168 + </el-table>
  169 + <Pagination
  170 + :total="data.params.total"
  171 + :currentPage="data.params.query.page"
  172 + :pageSize="data.params.query.pageSize"
  173 + @pageChange="handlePageChange"
  174 + ></Pagination>
  175 + </div>
  176 +</template>
... ...
src/views/user/login.vue
  View file @c8126ee
1 1 <script setup lang="ts">
2   -import { login } from '@/api/login'
  2 +import { login } from "@/api/user/login";
  3 +import * as all from "vue-router";
3 4 import * as store from "@/pinia/index";
4   -login().then(res => {
5   - console.log(res)
6   - console.log(store.family.loginStore().token)
7   - if(res) {
8   - store.family.loginStore().setToken(res.data.data.token)
  5 +login().then((res) => {
  6 + console.log(res);
  7 + console.log(store.family.loginStore().token);
  8 + if (res) {
  9 + store.family.loginStore().setToken(res.data.data.token);
9 10 }
10   -})
  11 +});
11 12 </script>
12 13  
13 14 <template>
14 15 <p>Login</p>
  16 + <router-link :to="{ path: '/' }"
  17 + >回首页</router-link
  18 + >
15 19 </template>
16 20  
17   -<style lang="scss" scoped>
18   -
19   -</style>
  21 +<style lang="scss" scoped></style>
... ...
src/views/user/role.vue 0 → 100644
  View file @c8126ee
  1 +<script setup lang="ts">
  2 +import { reactive, ref, onMounted } from "vue";
  3 +import { userRoles } from "@/api/user";
  4 +import { parseTime } from "@/utils/tool";
  5 +import Pagination from "@/components/Pagination/index.vue";
  6 +interface Form {
  7 + page: number;
  8 + pageSize: number;
  9 +}
  10 +interface Params {
  11 + total: number;
  12 + query: Form;
  13 +}
  14 +interface Data {
  15 + loading: boolean;
  16 + list: any[] | null;
  17 + params: Params;
  18 +}
  19 +let data = reactive({
  20 + list: [],
  21 + loading: false,
  22 + params: {
  23 + total: 0,
  24 + query: {
  25 + page: 1,
  26 + pageSize: 10
  27 + },
  28 + },
  29 +});
  30 +// 列表
  31 +const getList = async () => {
  32 + data.loading = true;
  33 + try {
  34 + const res = await userRoles(data.params.query);
  35 + data.list = res.data.data;
  36 + data.params.total = res.data.data.length;
  37 + } catch (e) {
  38 + console.log(e);
  39 + } finally {
  40 + data.loading = false;
  41 + }
  42 +};
  43 +// 分页
  44 +const handlePageChange = (page, size) => {
  45 + data.params.query.page = page;
  46 + data.params.query.pageSize = size;
  47 + getList();
  48 +};
  49 +onMounted(() => {
  50 + getList();
  51 +});
  52 +</script>
  53 +
  54 +<template>
  55 + <div class="page-container">
  56 + <h1>用户角色</h1>
  57 + <el-table
  58 + :data="data.list"
  59 + style="width: 100%"
  60 + border
  61 + v-loading="data.loading"
  62 + align="center"
  63 + element-loading-text="拼命加载中"
  64 + >
  65 + <el-table-column prop="id" label="ID" align="center"> </el-table-column>
  66 + <el-table-column prop="roleName" label="角色名" align="center"> </el-table-column>
  67 + </el-table>
  68 + <Pagination
  69 + :total="data.params.total"
  70 + :currentPage="data.params.query.page"
  71 + :pageSize="data.params.query.pageSize"
  72 + @pageChange="handlePageChange"
  73 + ></Pagination>
  74 + </div>
  75 +</template>
... ...