src/views/RoleView.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.roleName"></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="modalRoleRef" 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.name" />
				</a-form-item>
				<a-form-item label="描述">
					<a-input v-model:value="addEditFormState.description" />
				</a-form-item>
			</a-form>
		</div>
	</a-modal>
	<a-modal ref="modalMenuRef" v-model:visible="visible1" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk1">
		<div class="rolemenu">
			<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="角色分配菜单" sub-title="菜单分配信息" />
			<br />
			<div>
				<div style="margin-bottom: 8px">
					<span style="margin-left: 8px">
						<template v-if="hasSelected">
							{{ `选择了 ${selectedRowKeys.length} 个菜单` }}
						</template>
					</span>
				</div>
				<a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columnMenus" :data-source="menuDataSource" :pagination="false" :row-key="record => record.id" />
			</div>
		</div>