JavaDemo
/
vue-java-tutorials
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
vue-java-tutorials/spring-security/step-2/src/main/resources/templates/rolePage.html

226 lines
9.3 KiB
HTML
Raw Normal View History

:sparkles: 角色增删改查
2025-07-13 22:07:41 +08:00
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Bootstrap CSS -->
<link rel="stylesheet" th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}">
<!-- Font Awesome -->
<link rel="stylesheet" th:href="@{/webjars/font-awesome/5.15.4/css/all.min.css}">
<link rel="stylesheet" th:href="@{/src/lib/css/style.css}">
<link rel="stylesheet" th:href="@{/src/lib/css/tablePage.css}">
<!-- Vue3 -->
<script th:src="@{/src/lib/js/vue/vue.global.js}"></script>
<!-- Bootstrap JS Bundle with Popper -->
<script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js}"></script>
<!-- 本地引入 popper JS -->
<script th:src="@{/src/lib/js/boostrap/popper.min.js}"></script>
<!-- 本地引入 axios JS -->
<script th:src="@{/src/lib/js/axios/axios.min.js}"></script>
<!-- 引入dayjs -->
<script th:src="@{/src/lib/js/dayjs/dayjs.min.js}"></script>
<script th:src="@{/src/lib/js/dayjs/customParseFormat.js}"></script>
<script th:src="@{/src/lib/js/dayjs/weekday.js}"></script>
<script th:src="@{/src/lib/js/dayjs/localeData.js}"></script>
<script th:src="@{/src/lib/js/dayjs/weekOfYear.js}"></script>
<script th:src="@{/src/lib/js/dayjs/weekYear.js}"></script>
<script th:src="@{/src/lib/js/dayjs/advancedFormat.js}"></script>
<script th:src="@{/src/lib/js/dayjs/quarterOfYear.js}"></script>
<!-- 引入 antd JS -->
<script th:src="@{/src/lib/js/dayjs/antd.min.js}"></script>
<title>角色管理系统</title>
</head>
<body>
<div class="container-fluid" id="app">
<dialog-role :is-add="dialogFormFlag" :on-search="onSearch" :role-info="roleInfo"></dialog-role>
<!-- 头部 -->
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span><i class="fas fa-search me-2"></i>角色查询</span>
</div>
<div class="card-body">
<form @reset="onRest" @submit.prevent="onSearch">
<div class="row g-3 align-items-center">
<div class="col-md-4">
:speech_balloon: 修改角色字段roleName为roleCode
2025-07-13 22:33:10 +08:00
<label class="form-label" for="roleCode"><i class="fas fa-user-alt me-1"></i>角色名</label>
<input autocomplete="false" class="form-control" id="roleCode" placeholder="请输入角色名"
type="text" v-model="searchForm.roleCode">
:sparkles: 角色增删改查
2025-07-13 22:07:41 +08:00
</div>
<div class="col-md-4">
<label class="form-label" for="description"><i class="fas fa-text-width me-1"></i>描述</label>
<input autocomplete="false" class="form-control" id="description" placeholder="请输入描述"
type="text" v-model="searchForm.description">
</div>
<div class="col-md-4">
<label class="form-label" for="remark"><i class="fas fa-info me-1"></i>简述</label>
<input autocomplete="false" class="form-control" id="remark" placeholder="请输入简述"
type="text" v-model="searchForm.remark">
</div>
<div class="col-md-4">
<div class="search-btn-group">
<button class="btn btn-primary" type="submit">
<i class="fas fa-search me-1"></i>查询
</button>
<button class="btn btn-outline-secondary" type="reset">
<i class="fas fa-redo me-1"></i>重置
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- 表格 -->
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span><i class="fas fa-users me-2"></i>角色列表</span>
<button @click="onAdd" class="btn btn-sm btn-success" data-bs-target="#roleBackdrop" data-bs-toggle="modal">
<i class="fas fa-plus me-1"></i>新增角色
</button>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead class="table-light">
<tr>
<th scope="col" width="5%">#</th>
<th scope="col" width="15%">角色名</th>
<th scope="col" width="15%">描述</th>
<th scope="col" width="15%">简述</th>
<th scope="col" width="15%">创建时间</th>
<th scope="col" width="15%">更新时间</th>
<th scope="col" width="20%">操作</th>
</tr>
</thead>
<tbody>
<tr :key="role.id" v-for="(role,index) in dataList">
<th scope="row">{{index + 1}}</th>
:speech_balloon: 修改角色字段roleName为roleCode
2025-07-13 22:33:10 +08:00
<td>{{role.roleCode}}</td>
:sparkles: 角色增删改查
2025-07-13 22:07:41 +08:00
<td>{{role.description}}</td>
<td>{{role.remark}}</td>
<td>{{formatDate(role.createTime)}}</td>
<td>{{formatDate(role.updateTime)}}</td>
<td>
<div class="btn-group btn-group-sm" role="group">
<button @click="onEdit(role)" class="btn btn-outline-primary btn-action"
data-bs-target="#roleBackdrop" data-bs-toggle="modal">
<i class="fas fa-edit"></i> 修改
</button>
<button @click="onDeleted(role)" class="btn btn-outline-danger btn-action">
<i class="fas fa-trash"></i> 删除
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 表格分页 -->
<pagination :on-search="onSearch" v-model:pagination="searchForm"></pagination>
</div>
</div>
</div>
</body>
<!-- 设置 popper 提示框 -->
<script th:src="@{/src/config/popper-config.js}"></script>
<!-- 加载全局axios配置 -->
<script th:src="@{/src/config/axios-config.js}"></script>
<!-- 分页 -->
<script th:src="@{/src/components/Pagination.js}"></script>
<!-- 角色表单 -->
<script th:src="@{/src/views/role/DialogRole.js}"></script>
<script>
const {createApp, ref, toRaw} = Vue;
const app = createApp({
data() {
return {
// 查询表单
searchForm: ref({
:speech_balloon: 修改角色字段roleName为roleCode
2025-07-13 22:33:10 +08:00
roleCode: undefined,
:sparkles: 角色增删改查
2025-07-13 22:07:41 +08:00
description: undefined,
remark: undefined,
pageNo: 1,
pageSize: 30,
pages: 0
}),
// 角色信息
roleInfo: ref({}),
// 弹窗标题
dialogFormFlag: ref(false),
// 查询角色列表
dataList: ref([])
};
},
computed: {},
methods: {
/* 格式化时间 */
formatDate(date) {
return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
},
/* 加载数据 */
async onSearch() {
const {pageNo, pageSize} = this.searchForm;
// 查询数据
const {data} = await axiosInstance.get(`/role/${pageNo}/${pageSize}`, {params: this.searchForm})
// 赋值数据
this.dataList = data.list;
// 设置分页内容
this.searchForm.pageNo = data.pageNo;
this.searchForm.pageSize = data.pageSize;
this.searchForm.pages = data.pages;
},
/* 重制表单 */
onRest() {
:speech_balloon: 修改角色字段roleName为roleCode
2025-07-13 22:33:10 +08:00
this.searchForm.roleCode = undefined;
:sparkles: 角色增删改查
2025-07-13 22:07:41 +08:00
this.searchForm.description = undefined;
:speech_balloon: 修改角色字段roleName为roleCode
2025-07-13 22:33:10 +08:00
this.searchForm.remark = undefined;
:sparkles: 角色增删改查
2025-07-13 22:07:41 +08:00
this.onSearch();
},
/* 添加 */
onAdd() {
this.dialogFormFlag = true;
this.roleInfo = {};
},
/* 修改 */
onEdit(roleInfo) {
this.dialogFormFlag = false;
this.roleInfo = roleInfo;
},
/* 删除 */
async onDeleted(roleInfo) {
const result = confirm("确认删除？");
if (!result) return false;
// 删除角色
const {code, message} = await axiosInstance.delete(`/role`, {data: [roleInfo.id]});
if (code === 200) {
await this.onSearch();
antd.message.success(message);
} else {
antd.message.error(message);
}
},
},
mounted() {
this.onSearch();
},
});
app.component('Pagination', Pagination)
app.component('DialogRole', DialogRole)
app.mount('#app');
</script>
</html>