no message

src/api/safetyManagement/roleConfig.js

@@ -14,3 +14,51 @@ export function queryAll(query) {
     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'
+
+
+// 定义组件名称
+defineOptions({
+  name: 'RoleConfig'
+})
 
-export default {
-  name: 'RoleConfig',
-  components: {
-    RoleEdit
-  },
-  data() {
-    return {
-      searchForm: {
-        name: '',
+// 响应式数据
+const searchForm = reactive({
   roleName: '',
   remark: ''
-      },
-      userList: [
+})
+
+const roleList = ref([
   {
     realname: 'admin',
     roleName: 'admin',
     remark: ''
   }
-      ],
-      total: 1,
-      currentPage: 1,
-      pageSize: 8,
-      editVisible: false,
-      editData: null
+])
+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)
   }
-  },
-  methods: {
-    handleSearch() {
-      // 实现搜索逻辑
-    },
-    handleAdd() {
-      // 打开新增角色弹窗
-      this.editData = null
-      this.editVisible = true
-    },
-    handlePageChange(page) {
-      // 实现分页逻辑
-    },
-    handleDelete(row) {
-      // 实现删除角色逻辑
-      this.$confirm('确认删除该角色吗？', '提示', {
+}
+
+// 处理搜索
+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(() => {})
-    },
-    handleEdit(row) {
-      // 打开编辑角色弹窗
-      this.editData = { ...row }
-      this.editVisible = true
-    },
-    handleEditSuccess() {
-      // 编辑成功后的回调
-      this.editVisible = false
+}
+
+// 编辑角色
+const handleEdit = (row) => {
+  editData.value = { ...row }
+  editVisible.value = true
+}
+
+// 编辑成功回调
+const handleEditSuccess = () => {
+  editVisible.value = false
   // 刷新列表数据
-      this.getList()
-    },
-    getList() {
-      // 获取角色列表数据
-    }
-  }
+  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);
             }
           }
         }