Skip to content

N
nse-ui
Commit 6d3bc4e2 by 周海峰
Options

no message

parent 4b137e14
正在显示 包含 161 行增加 和 71 行删除
src/api/safetyManagement/roleConfig.js
......@@ -13,4 +13,52 @@ export function queryAll(query) {
method: 'get',
params: query
})
}
/*
* 角色列表查询
* @param {*} query
* @returns
*/
export function query(data) {
return request({
url: '/console/role/query',
method: 'post',
data: data
})
}
export function initEdit(data) {
return request({
url: '/console/role/initEdit',
method: 'post',
data: data
})
}
export function add(data) {
return request({
url: '/console/role/add',
method: 'post',
data: data
})
}
export function modify(data) {
return request({
url: '/console/role/modify',
method: 'post',
data: data
})
}
export function del(data) {
return request({
url: '/console/role/del',
method: 'post',
data: data
})
}
\ No newline at end of file
src/views/safetyManagement/roleConfig/index.vue
......@@ -11,10 +11,10 @@
<el-form :inline="true" :model="searchForm" class="search-form">
<div class="left-area">
<el-form-item label="角色名:">
<el-input v-model="searchForm.roleName" placeholder="请输入角色名"></el-input>
<el-input v-model="searchForm.rolename" clearable placeholder="请输入角色名"></el-input>
</el-form-item>
<el-form-item label="备注:">
<el-input v-model="searchForm.remark" placeholder="请输入备注"></el-input>
<el-input v-model="searchForm.remark" clearable placeholder="请输入备注"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
......@@ -29,24 +29,24 @@
<!-- 列表 -->
<div class="user-list">
<div class="user-grid">
<div v-for="(user, index) in userList" :key="index" class="user-card">
<div v-for="(user, index) in roleList" :key="index" class="user-card">
<div class="user-info">
<div class="avatar">
<el-avatar :size="50" icon="User"></el-avatar>
</div>
<div class="info">
<div class="roleName">角色名: {{ user.roleName }}</div>
<div class="roleName">角色名: {{ user.rolename }}</div>
<div class="remark">备注: {{ user.remark }}</div>
</div>
<!-- 遮罩层和操作按钮 -->
<div class="hover-mask">
<div class="operation-buttons">
<div class="operation-btn" @click="handleDelete(user)">
<i class="el-icon-delete"></i>
<el-icon><Delete /></el-icon>
<span>删除</span>
</div>
<div class="operation-btn" @click="handleEdit(user)">
<i class="el-icon-edit"></i>
<el-icon><Edit /></el-icon>
<span>编辑</span>
</div>
</div>
......@@ -58,12 +58,14 @@
<!-- 分页 -->
<div class="pagination">
<div class="pagination-info">共有记录 1条，每页显示 8条，共 1页</div>
<div class="pagination-info">
共有记录 {{ total }} 条，每页显示 {{ pageSize }} 条，共 {{ Math.max(1, Math.ceil(total / pageSize)) }} 页
</div>
<el-pagination
background
layout="prev, pager, next, jumper"
:total="total"
:current-page.sync="currentPage"
:current-page="currentPage"
:page-size="pageSize"
@current-change="handlePageChange">
</el-pagination>
......@@ -78,72 +80,103 @@
</div>
</template>
<script>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { ElMessageBox } from 'element-plus'
import { User, Delete, Edit } from '@element-plus/icons-vue'
import RoleEdit from './edit.vue'
import { query as queryRole } from '@/api/safetyManagement/roleConfig.js'
export default {
name: 'RoleConfig',
components: {
RoleEdit
},
data() {
return {
searchForm: {
name: '',
roleName: '',
remark: ''
},
userList: [
{
realname: 'admin',
roleName: 'admin',
remark: ''
}
],
total: 1,
currentPage: 1,
pageSize: 8,
editVisible: false,
editData: null
}
},
methods: {
handleSearch() {
// 实现搜索逻辑
},
handleAdd() {
// 打开新增角色弹窗
this.editData = null
this.editVisible = true
},
handlePageChange(page) {
// 实现分页逻辑
},
handleDelete(row) {
// 实现删除角色逻辑
this.$confirm('确认删除该角色吗？', '提示', {
type: 'warning'
}).then(() => {
// 调用删除接口
console.log('删除角色', row)
}).catch(() => {})
},
handleEdit(row) {
// 打开编辑角色弹窗
this.editData = { ...row }
this.editVisible = true
},
handleEditSuccess() {
// 编辑成功后的回调
this.editVisible = false
// 刷新列表数据
this.getList()
},
getList() {
// 获取角色列表数据
}
// 定义组件名称
defineOptions({
name: 'RoleConfig'
})
// 响应式数据
const searchForm = reactive({
roleName: '',
remark: ''
})
const roleList = ref([
{
realname: 'admin',
roleName: 'admin',
remark: ''
}
])
const total = ref(1)
const currentPage = ref(1)
const pageSize = ref(8)
const editVisible = ref(false)
const editData = ref(null)
const instance = getCurrentInstance()
// 获取角色列表
const getList = async () => {
const params = {
...searchForm,
page: currentPage.value,
rows: pageSize.value
}
try {
// 实际项目中这里应该调用接口获取数据
const res = await queryRole(params)
console.log('角色列表接口返回数据:', res)
roleList.value = res.data.list || []
total.value = res.data.total
} catch (error) {
const modal = instance?.appContext.config.globalProperties.$modal
modal && modal.msgError ? modal.msgError('查询异常') : console.error('查询异常', error)
}
}
// 处理搜索
const handleSearch = () => {
currentPage.value = 1
getList()
}
// 添加角色
const handleAdd = () => {
editData.value = null
editVisible.value = true
}
// 分页变化
const handlePageChange = (page) => {
currentPage.value = page
getList()
}
// 删除角色
const handleDelete = (row) => {
ElMessageBox.confirm('确认删除该角色吗？', '提示', {
type: 'warning'
}).then(() => {
// 调用删除接口
console.log('删除角色', row)
}).catch(() => {})
}
// 编辑角色
const handleEdit = (row) => {
editData.value = { ...row }
editVisible.value = true
}
// 编辑成功回调
const handleEditSuccess = () => {
editVisible.value = false
// 刷新列表数据
getList()
}
// 页面挂载时获取数据
onMounted(() => {
getList()
})
</script>
<style lang="scss" scoped>
......@@ -205,6 +238,13 @@ export default {
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
border-left: 4px solid #3498db;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
}
.user-info {
......@@ -258,7 +298,7 @@ export default {
color: white;
cursor: pointer;
i {
.el-icon {
font-size: 24px;
margin-bottom: 8px;
}
......@@ -269,6 +309,7 @@ export default {
&:hover {
color: #409EFF;
transform: scale(1.1);
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论