From 41b20b89eb03e1a7e52e7e31ce3fd3f240f67c46 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: Mon, 04 Jul 2022 11:17:21 +0800
Subject: [PATCH] '菜单'
---
src/views/system/user/index.vue | 153 ++++++++++++++++++++++++++++++--------------------
1 files changed, 91 insertions(+), 62 deletions(-)
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index a120c59..c4123dd 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -9,19 +9,20 @@
</el-icon>
查询
</el-button>
- <el-button size="default" type="success" class="ml10" @click="onOpenAddUser">
+ <el-button size="default" type="success" class="ml10" @click="onOpenUserDialog('新增','')">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增用户
</el-button>
</div>
- <el-table :data="tableData.data" style="width: 100%">
+ <el-table :data="userTableData.data" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
- <el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="roleSign" label="关联角色" show-overflow-tooltip></el-table-column>
- <el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="username" label="账户名称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="realName" label="用户昵称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="role.name" label="关联角色" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="department.name" label="部门" show-overflow-tooltip></el-table-column>
<el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="用户状态" show-overflow-tooltip>
@@ -30,11 +31,10 @@
<el-tag type="info" v-else>禁用</el-tag>
</template>
</el-table-column>
- <el-table-column prop="describe" label="用户描述" show-overflow-tooltip></el-table-column>
- <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="100">
<template #default="scope">
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser(scope.row)">修改</el-button>
+ <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenUserDialog('修改',scope.row)">修改</el-button>
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
@@ -45,24 +45,25 @@
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
- v-model:current-page="tableData.param.pageNum"
+ v-model:current-page="userTableData.listQuery.pageIndex"
background
- v-model:page-size="tableData.param.pageSize"
+ v-model:page-size="userTableData.listQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper"
- :total="tableData.total"
+ :total="userTableData.total"
>
</el-pagination>
</el-card>
- <AddUer ref="addUserRef" />
- <EditUser ref="editUserRef" />
+ <userDialog ref="userRef" @getUserList = "initUserTableData"/>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
-import AddUer from '/@/views/system/user/component/addUser.vue';
-import EditUser from '/@/views/system/user/component/editUser.vue';
+import userDialog from '/@/views/system/user/component/userDialog.vue';
+import {userApi} from "/@/api/user";
+import {departmentApi} from "/@/api/department";
+import {useRoleApi} from "/@/api/role";
// 定义接口来定义对象的类型
interface TableDataRow {
@@ -79,96 +80,124 @@
describe: string;
createTime: string;
}
+interface DepartmentDataRow{
+
+}
interface TableDataState {
- tableData: {
+ userTableData: {
data: Array<TableDataRow>;
total: number;
loading: boolean;
- param: {
- pageNum: number;
+ listQuery: {
+ searchParams:{
+ username:string,
+ realName:string,
+ },
+ pageIndex: number;
pageSize: number;
};
};
+ departmentList:[];
+ roleList:[];
}
export default defineComponent({
name: 'systemUser',
- components: { AddUer, EditUser },
+ components: { userDialog },
setup() {
- const addUserRef = ref();
- const editUserRef = ref();
+ const userRef = ref();
const state = reactive<TableDataState>({
- tableData: {
+ userTableData: {
data: [],
total: 0,
loading: false,
- param: {
- pageNum: 1,
+ listQuery: {
+ searchParams:{
+ username:'',
+ realName:'',
+ },
+ pageIndex: 1,
pageSize: 10,
},
},
+ departmentList:[],
+ roleList:[],
});
// 初始化表格数据
- const initTableData = () => {
- const data: Array<TableDataRow> = [];
- for (let i = 0; i < 2; i++) {
- data.push({
- userName: i === 0 ? 'admin' : 'test',
- userNickname: i === 0 ? '我是管理员' : '我是普通用户',
- roleSign: i === 0 ? 'admin' : 'common',
- department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
- phone: '12345678910',
- email: 'vueNextAdmin@123.com',
- sex: '女',
- password: '123456',
- overdueTime: new Date(),
- status: true,
- describe: i === 0 ? '不可删除' : '测试用户',
- createTime: new Date().toLocaleString(),
- });
+ const initUserTableData = async () => {
+ let res = await userApi().getUserList(state.userTableData.listQuery)
+ if(res.data.code === '200'){
+ state.userTableData.data = res.data.data;
+ state.userTableData.total = res.data.data.length;
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
}
- state.tableData.data = data;
- state.tableData.total = state.tableData.data.length;
};
- // 打开新增用户弹窗
- const onOpenAddUser = () => {
- addUserRef.value.openDialog();
+
+ const getDepartmentData = async () => {
+ let res = await departmentApi().getDepartmentList()
+ if(res.data.code === '200'){
+ state.departmentList = res.data.data
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }
+
+ const getRoleData = async () => {
+ let res = await useRoleApi().getRoleList()
+ if(res.data.code === '200'){
+ state.roleList = res.data.data
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }
+
+ // 打开新增修改用户弹窗
+ const onOpenUserDialog = (type: string,value: any) => {
+ userRef.value.openDialog(type, value, state.departmentList,state.roleList);
};
- // 打开修改用户弹窗
- const onOpenEditUser = (row: TableDataRow) => {
- editUserRef.value.openDialog(row);
- };
+
// 删除用户
const onRowDel = (row: TableDataRow) => {
ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
- })
- .then(() => {
+ }).then(() => {
ElMessage.success('删除成功');
- })
- .catch(() => {});
+ }).catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
- state.tableData.param.pageSize = val;
+ state.userTableData.listQuery.pageSize = val;
+ initUserTableData()
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
- state.tableData.param.pageNum = val;
+ state.userTableData.listQuery.pageSize = val;
+ initUserTableData()
};
// 页面加载时
onMounted(() => {
- initTableData();
+ initUserTableData();
+ getDepartmentData();
+ getRoleData();
});
return {
- addUserRef,
- editUserRef,
- onOpenAddUser,
- onOpenEditUser,
+ userRef,
+ onOpenUserDialog,
onRowDel,
onHandleSizeChange,
+ initUserTableData,
onHandleCurrentChange,
...toRefs(state),
};
--
Gitblit v1.9.2