src/views/UserView.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="用户管理" sub-title="用户信息基本操作" />
	<a-form :model="formState" name="horizontal_query" layout="inline" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
		<a-form-item label="用户名">
			<a-input v-model:value="formState.userName"></a-input>
		</a-form-item>
		<a-form-item>
			<a-button type="primary" html-type="submit">查询</a-button>
		</a-form-item>
		<a-form-item>
			<a-button type="primary" @click="add">新增</a-button>
		</a-form-item>
	</a-form>
	<a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" :row-key="record => record.id">
		<template #bodyCell="{ column, text, record }">
			<template v-if="[ 'name','teacher', 'createUser','lastEditUser'].includes(column.dataIndex)">
				<div>{{ text }}</div>
			</template>
			<template v-else-if="[ 'createTime','lastEditTime'].includes(column.dataIndex)">
				<div>{{formatDateString(text)}}</div>
			</template>
			<template v-else-if="column.dataIndex === 'operation'">
				<div class="editable-row-operations">
					<a @click="edit(record.id)">编辑</a>
					&nbsp;|&nbsp;
					<a @click="edit1(record.id)">授权</a>
				</div>
			</template>
		</template>
	</a-table>
	<a-pagination v-model:current="pagination.current" :total="pagination.total" @change="change" />
	<a-modal ref="modalUserRef" v-model:visible="visible" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk">
		<div>
			<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="用户管理" sub-title="新增或编辑用户信息" />
			<br />
			<a-form :model="addEditFormState">
				<a-form-item label="用户名">
					<a-input v-model:value="addEditFormState.userName" />
				</a-form-item>
				<a-form-item label="昵称">
					<a-input v-model:value="addEditFormState.nickName" />
				</a-form-item>
				<a-form-item label="密码">
					<a-input-password v-model:value="addEditFormState.password" />
				</a-form-item>
				<a-form-item label="确认密码">
					<a-input-password v-model:value="addEditFormState.confirmPassword" />
				</a-form-item>
			</a-form>
		</div>
	</a-modal>
	<a-modal ref="modalRoleRef" v-model:visible="visible1" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk1">
		<div class="userrole">
			<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="用户授权" sub-title="用户权限信息" />
			<br />
			<div>
				<div style="margin-bottom: 16px">
					<span style="margin-left: 8px">
						<template v-if="hasSelected">
							{{ `选择了 ${selectedRowKeys.length} 个角色` }}