From 23f1bf22c42a904c05cee63e10c9fd8b60dfe8f5 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期二, 20 九月 2022 14:54:56 +0800
Subject: [PATCH] Default Changelist

---
 src/views/system/user/index.vue |  391 +++++++++++++++++++++++++++++--------------------------
 1 files changed, 206 insertions(+), 185 deletions(-)

diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index c4123dd..a892e9c 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,206 +1,227 @@
 <template>
-	<div class="system-user-container">
-		<el-card shadow="hover">
-			<div class="system-user-search mb15">
-				<el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
-				<el-button size="default" type="primary" class="ml10">
-					<el-icon>
-						<ele-Search />
-					</el-icon>
-					查询
-				</el-button>
-				<el-button size="default" type="success" class="ml10" @click="onOpenUserDialog('新增','')">
-					<el-icon>
-						<ele-FolderAdd />
-					</el-icon>
-					新增用户
-				</el-button>
-			</div>
-			<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="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>
-					<template #default="scope">
-						<el-tag type="success" v-if="scope.row.status">启用</el-tag>
-						<el-tag type="info" v-else>禁用</el-tag>
-					</template>
-				</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="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>
-			</el-table>
-			<el-pagination
-				@size-change="onHandleSizeChange"
-				@current-change="onHandleCurrentChange"
-				class="mt15"
-				:pager-count="5"
-				:page-sizes="[10, 20, 30]"
-				v-model:current-page="userTableData.listQuery.pageIndex"
-				background
-				v-model:page-size="userTableData.listQuery.pageSize"
-				layout="total, sizes, prev, pager, next, jumper"
-				:total="userTableData.total"
-			>
-			</el-pagination>
-		</el-card>
-		<userDialog ref="userRef" @getUserList = "initUserTableData"/>
-	</div>
+    <div class="system-user-container">
+        <el-card shadow="hover">
+            <div class="system-user-search mb15">
+                <el-input size="default" v-model.trim="userTableData.listQuery.searchParams.username" placeholder="请输入用户名" style="max-width: 180px"> </el-input>
+                <el-input size="default" v-model.trim="userTableData.listQuery.searchParams.realName" placeholder="请输入真实姓名" style="max-width: 180px; margin-left: 10px"> </el-input>
+                <el-button size="default" type="primary" class="ml10" @click="initUserTableData">
+                    <el-icon>
+                        <ele-Search />
+                    </el-icon>
+                    查询
+                </el-button>
+                <el-button size="default" type="success" class="ml10" @click="onOpenUserDialog('新增', '')">
+                    <el-icon>
+                        <ele-FolderAdd />
+                    </el-icon>
+                    新增用户
+                </el-button>
+            </div>
+            <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="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>
+                    <template #default="scope">
+                        <el-tag type="success" v-if="scope.row.status">启用</el-tag>
+                        <el-tag type="info" v-else>禁用</el-tag>
+                    </template>
+                </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="onOpenUserDialog('修改', scope.row)">修改</el-button>
+                        <el-button style="color: red" :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <br />
+            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="page-position" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="userTableData.listQuery.pageIndex" background v-model:page-size="userTableData.listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="userTableData.total"> </el-pagination>
+            <br />
+            <br />
+        </el-card>
+        <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 userDialog from '/@/views/system/user/component/userDialog.vue';
-import {userApi} from "/@/api/user";
-import {departmentApi} from "/@/api/department";
-import {useRoleApi} from "/@/api/role";
+import { userApi } from '/@/api/systemManage/user';
+import { departmentApi } from '/@/api/systemManage/department';
+import { useRoleApi } from '/@/api/systemManage/role';
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
-	userName: string;
-	userNickname: string;
-	roleSign: string;
-	department: string[];
-	phone: string;
-	email: string;
-	sex: string;
-	password: string;
-	overdueTime: Date;
-	status: boolean;
-	describe: string;
-	createTime: string;
+    userName: string;
+    userNickname: string;
+    roleSign: string;
+    department: string[];
+    phone: string;
+    email: string;
+    sex: string;
+    password: string;
+    overdueTime: Date;
+    status: boolean;
+    describe: string;
+    createTime: string;
 }
-interface DepartmentDataRow{
-
-}
+interface DepartmentDataRow {}
 interface TableDataState {
-	userTableData: {
-		data: Array<TableDataRow>;
-		total: number;
-		loading: boolean;
-		listQuery: {
-			searchParams:{
-				username:string,
-				realName:string,
-			},
-			pageIndex: number;
-			pageSize: number;
-		};
-	};
-	departmentList:[];
-	roleList:[];
+    userTableData: {
+        data: Array<TableDataRow>;
+        total: number;
+        loading: boolean;
+        listQuery: {
+            searchParams: {
+                username: string | null;
+                realName: string | null;
+            };
+            pageIndex: number;
+            pageSize: number;
+        };
+    };
+    departmentList: [];
+    roleList: [];
 }
 
 export default defineComponent({
-	name: 'systemUser',
-	components: { userDialog },
-	setup() {
-		const userRef = ref();
-		const state = reactive<TableDataState>({
-			userTableData: {
-				data: [],
-				total: 0,
-				loading: false,
-				listQuery: {
-					searchParams:{
-						username:'',
-						realName:'',
-					},
-					pageIndex: 1,
-					pageSize: 10,
-				},
-			},
-			departmentList:[],
-			roleList:[],
-		});
-		// 初始化表格数据
-		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
-				})
-			}
-		};
+    name: 'systemUser',
+    components: { userDialog },
+    setup() {
+        const userRef = ref();
+        const state = reactive<TableDataState>({
+            userTableData: {
+                data: [],
+                total: 0,
+                loading: false,
+                listQuery: {
+                    searchParams: {
+                        username: null,
+                        realName: null
+                    },
+                    pageIndex: 1,
+                    pageSize: 10
+                }
+            },
+            departmentList: [],
+            roleList: []
+        });
+        // 初始化表格数据
+        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.total;
+            } else {
+                ElMessage({
+                    type: 'warning',
+                    message: res.data.msg
+                });
+            }
+        };
 
-		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 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 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 onOpenUserDialog = (type: string, value: any) => {
+            userRef.value.openDialog(type, value, state.departmentList, state.roleList);
+        };
 
-		// 删除用户
-		const onRowDel = (row: TableDataRow) => {
-			ElMessageBox.confirm(`此操作将永久删除账户名称:“${row.userName}”,是否继续?`, '提示', {
-				confirmButtonText: '确认',
-				cancelButtonText: '取消',
-				type: 'warning',
-			}).then(() => {
-					ElMessage.success('删除成功');
-			}).catch(() => {});
-		};
-		// 分页改变
-		const onHandleSizeChange = (val: number) => {
-			state.userTableData.listQuery.pageSize = val;
-			initUserTableData()
-		};
-		// 分页改变
-		const onHandleCurrentChange = (val: number) => {
-			state.userTableData.listQuery.pageSize = val;
-			initUserTableData()
-		};
-		// 页面加载时
-		onMounted(() => {
-			initUserTableData();
-			getDepartmentData();
-			getRoleData();
-		});
-		return {
-			userRef,
-			onOpenUserDialog,
-			onRowDel,
-			onHandleSizeChange,
-			initUserTableData,
-			onHandleCurrentChange,
-			...toRefs(state),
-		};
-	},
+        // 删除用户
+        const onRowDel = (row: TableDataRow) => {
+            ElMessageBox.confirm(`此操作将永久删除账户名称:“${row.realName}”,是否继续?`, '提示', {
+                confirmButtonText: '确认',
+                cancelButtonText: '取消',
+                type: 'warning'
+            })
+                .then(async () => {
+                    let res = await userApi().deleteUser({ uid: row.uid });
+                    if (res.data.code === '200') {
+                        ElMessage({
+                            type: 'success',
+                            duration: 2000,
+                            message: '删除成功'
+                        });
+                        await initUserTableData();
+                    } else {
+                        ElMessage({
+                            type: 'warning',
+                            message: res.data.msg
+                        });
+                    }
+                })
+                .catch(() => {});
+        };
+        // 分页改变
+        const onHandleSizeChange = (val: number) => {
+            state.userTableData.listQuery.pageSize = val;
+            initUserTableData();
+        };
+        // 分页改变
+        const onHandleCurrentChange = (val: number) => {
+            state.userTableData.listQuery.pageIndex = val;
+            initUserTableData();
+        };
+        // 页面加载时
+        onMounted(() => {
+            let a = { name: 1, c: { name: 1 } };
+            let b = Object.assign({}, a);
+            b.c.name = 2;
+            console.log(a.c.name);
+            initUserTableData();
+            getDepartmentData();
+            getRoleData();
+        });
+        return {
+            userRef,
+            onOpenUserDialog,
+            onRowDel,
+            onHandleSizeChange,
+            initUserTableData,
+            onHandleCurrentChange,
+            ...toRefs(state)
+        };
+    }
 });
 </script>
+<style  scoped>
+:deep(.el-textarea.is-disabled .el-textarea__inner) {
+    background-color: var(--el-card-bg-color);
+    color: var(--el-input-text-color, var(--el-text-color-regular));
+}
+:deep(.el-input.is-disabled .el-input__inner) {
+    color: var(--el-input-text-color, var(--el-text-color-regular));
+}
+:deep(.el-input.is-disabled .el-input__wrapper) {
+    background-color: var(--el-card-bg-color);
+}
+</style>

--
Gitblit v1.9.2