epp/frontend/src/views/privilege-user-setting.vue

<template>
	<div>
		<div class="container">
			<!-- 筛选 -->
			<div class="handle-box">
				<!-- <el-select v-model="query.address" placeholder="角色类型" class="handle-select mr10">
					<el-option key="1" label="管理员" value="管理员"></el-option>
					<el-option key="2" label="普通用户" value="普通用户"></el-option>
				</el-select> -->
				<!-- <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button> -->
				<el-button type="primary" :icon="Plus" @click="handleNew">新增用户</el-button>
			</div>
			<!-- 表格 -->
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="username" label="用户名" align="center"></el-table-column>
				<el-table-column prop="roleName" label="角色" align="center"></el-table-column>
				<el-table-column prop="telephone" label="电话" align="center"></el-table-column>
				<el-table-column prop="roleId" label="" align="center" v-if="false"></el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)"
							v-permiss="'user-setting'">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)"
							v-permiss="'user-setting'">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editVisible" width="30%">
			<el-form label-width="70px">
				<el-form-item label="用户名">
					<el-input v-model="form.username"></el-input>
				</el-form-item>
				<el-form-item label="角色">
					<el-select v-model="form.roleName" placeholder="角色类型" class="handle-select mr10">
						<el-option key="1" label="管理员" value="管理员"></el-option>
						<el-option key="2" label="普通用户" value="普通用户"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="form.telephone"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ElLoading } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import send_request from '../utils/send_request';

const query = reactive({
	id: 0,
	address: '',
	name: '',
	roleId: 0,
	pageIndex: 1,
	pageSize: 5
});
const tableData: any = ref([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = async () => {

	const loading = ElLoading.service({
		lock: true,
		text: '请稍候',
		background: 'rgba(0, 0, 0, 0.7)',
	});

	await send_request('v1/user/list', "GET", {
		page: query.pageIndex,
		pageSize: query.pageSize
	}, (data: any) => {
		console.log(data)
		tableData.value = data.list;
		pageTotal.value = data.total;
	});
	loading.close();
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
	getData();
};

// 删除操作
const handleDelete = (index: number, row: any) => {
	idx = index;
	// 二次确认删除

	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
		.then(async () => {
			await send_request('v1/user/delete', "POST", {
				userId: row.id
			}, (data: any) => {
				// console.log("delete index", index);
				// console.log(data);
				if (data) {
					ElMessage.success('删除成功');
					tableData.value.splice(idx, 1);
				}
			});

		})
		.catch(() => { });
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
	id: 0,
	username: '',
	roleId: 0,
	roleName: '',
	telephone: ''
});
let idx: number = -1;
// 点击进入编辑框
const handleEdit = (index: number, row: any) => {
	idx = index;
	form.id = row.id;
	form.username = row.username;
	form.roleName = row.roleName;
	form.roleId = row.roleId;
	form.telephone = row.telephone;
	editVisible.value = true;
};
// 编辑保存到数据库
const saveEdit = async () => {
	editVisible.value = false;
	await send_request('v1/user/edit', "POST", {
		id: form.id,
		username: form.username,
		roleId: form.roleId,
		roleName: form.roleName,
		telephone: form.telephone
	}, (data: any) => {
		if (data) {
			ElMessage.success('修改成功');
			tableData.value[idx].username = form.username;
			tableData.value[idx].roleName = form.roleName;
			tableData.value[idx].telephone = form.telephone;
		}
	});

};

const handleNew = () => {
	editVisible.value = true;
	ElMessage.success(`修改第 ${idx + 1} 行成功`);
	tableData.value[idx].username = form.username;
	tableData.value[idx].roleName = form.roleName;
	tableData.value[idx].telephone = form.telephone;
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #F56C6C;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>