no message

src/api/safetyManagement/appUserConfig.js

+import request from '@/utils/request'
+
+
+
+export function queryAppuser(data) {
+  return request({
+    url: '/console/user/queryAppuser',
+    method: 'get',
+    params: data
+  })
+}
+
+export function addAppUser(data) {
+  return request({
+    url: '/console/user/addAppUser',
+    method: 'post',
+    data: data
+  })
+}
+
+export function delAppUser(data) {
+  return request({
+    url: '/console/user/delAppUser',
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file

src/views/safetyManagement/appUserConfig/edit.vue

@@ -9,7 +9,7 @@
     :align-center="true"
     :fullscreen="false"
     @close="handleClose"
-    width="600px"
+    width="500px"
   >
       <el-form
         ref="formRef"
@@ -25,17 +25,17 @@
         <el-input v-model="form.username" placeholder="请输入用户名" />
       </el-form-item>
       <!-- 备注 -->
-      <el-form-item label="备注" prop="remark">
+      <el-form-item label="备注" prop="note">
         <el-input
-          v-model="form.remark"
+          v-model="form.note"
           placeholder="请输入备注"
         />
       </el-form-item>
 
       <!-- 是否明文和是否脱敏 -->
       <el-form-item>
-        <el-checkbox v-model="form.isoriginal">是否明文</el-checkbox>
-        <el-checkbox v-model="form.ismask" style="margin-left: 20px">是否脱敏</el-checkbox>
+        <el-checkbox v-model="form.isoriginal" :true-value="'1'" :false-value="'0'">是否明文</el-checkbox>
+        <el-checkbox v-model="form.ismask" :true-value="'1'" :false-value="'0'" style="margin-left: 20px">是否脱敏</el-checkbox>
       </el-form-item>
       </el-form>
     <template #footer>
@@ -49,10 +49,10 @@
   </el-dialog>
 </template>
 
-<script>
-export default {
-  name: 'AppUserEdit',
-  props: {
+<script setup>
+import { ref, reactive, watch } from 'vue'
+import { addAppUser } from '@/api/safetyManagement/appUserConfig.js'
+const props = defineProps({
   visible: {
     type: Boolean,
     default: false
@@ -61,69 +61,65 @@ export default {
     type: Object,
     default: () => null
   }
-  },
-  emits: ['update:visible', 'success'],
-  watch: {
-    visible(val) {
-      if (val && this.formData) {
-        this.form = {
-          ...this.formData,
-          password: '',
-          confirmPassword: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      form: {
+})
+const emit = defineEmits(['update:visible', 'success'])
+
+const formRef = ref(null)
+const form = reactive({
   useridentifier: '',
   username: '',
-        remark: '',
-        isoriginal: false,
-        ismask: false
-      },
-      rules: {
+  note: '',
+  isoriginal: '0', // 默认字符串类型
+  ismask: '0'
+})
+const rules = {
   useridentifier: [
     { required: true, message: '请输入唯一标识', trigger: 'blur' }
   ],
   username: [
     { required: true, message: '请输入用户名', trigger: 'blur' }
   ]
+}
+
+watch(() => props.visible, (val) => {
+  if (val && props.formData) {
+    Object.assign(form, {
+      ...props.formData,
+      isoriginal: String(props.formData.isoriginal ?? '0'),
+      ismask: String(props.formData.ismask ?? '0')
+    })
   }
-    }
-  },
-  methods: {
-    handleClose() {
-      this.$emit('update:visible', false)
-      this.$refs.formRef?.resetFields()
-      this.form = {
+  console.log('表单数据', form)
+})
+
+const handleClose = () => {
+  emit('update:visible', false)
+  formRef.value?.resetFields()
+  Object.assign(form, {
     useridentifier: '',
     username: '',
-        remark: '',
-        isoriginal: false,
-        ismask: false
-      }
-    },
-    handleSubmit() {
-      this.$refs.formRef.validate((valid) => {
-        if (valid) {
-          // 提交表单逻辑
-          const params = { ...this.form }
-          // 如果是编辑模式且没有修改密码，则不提交密码字段
-          if (this.formData && !params.password) {
-            delete params.password
-            delete params.confirmPassword
-          }
+    note: '',
+    isoriginal: '0',
+    ismask: '0'
+  })
+}
 
-          console.log('submit form', params)
-          // 调用接口保存数据
-          this.$emit('success')
-          this.handleClose()
+const handleSubmit = () => {
+  formRef.value.validate(async (valid) => {
+    if (valid) {
+      const params = { ...form }
+      try {
+          const res = await addAppUser(params)
+          if (res.code === 'POP_00014') {
+            emit('success')
+            handleClose()
           }
-      })
+      } catch (error) {
+        // 可根据需要添加错误提示
+        console.error('添加用户失败', error)
       }
     }
+  })
 }
 </script>
 

src/views/safetyManagement/appUserConfig/index.vue

@@ -11,13 +11,13 @@
       <el-form :inline="true" :model="searchForm" class="search-form">
         <div class="left-area">
           <el-form-item label="唯一标识:">
-            <el-input v-model="searchForm.useridentifier" placeholder="请输入唯一标识"></el-input>
+            <el-input v-model="searchForm.useridentifier" clearable placeholder="请输入唯一标识"></el-input>
           </el-form-item>
           <el-form-item label="用户名:">
-            <el-input v-model="searchForm.username" placeholder="请输入用户名"></el-input>
+            <el-input v-model="searchForm.username" 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.note" clearable placeholder="请输入备注"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
@@ -33,24 +33,39 @@
     <div class="user-list">
       <div class="user-grid">
         <div v-for="(user, index) in userList" :key="index" class="user-card">
+          <div class="card-left-bar"></div>
           <div class="user-info">
+            <div class="info">
+              <div class="name">{{ user.username }}</div>
+              <div class="username">
+                <el-icon><User /></el-icon>
+                用户名 {{ user.username }}
+              </div>
+              <div class="note">
+                <el-icon><Edit /></el-icon>
+                备注 {{ user.note }}
+              </div>
+            </div>
             <div class="avatar">
-              <el-avatar :size="50" icon="User"></el-avatar>
+              <el-avatar :size="80" icon="UserFilled" style="background: #f6f8fa; color: #d3d8e0;" />
             </div>
-            <div class="info">
-              <div class="useridentifier">{{ user.username }}</div>
-              <div class="username">用户名: {{ user.username }}</div>
-              <div class="remark">备注: {{ user.remark }}</div>
           </div>
-            <!-- 遮罩层和操作按钮 -->
+          <div class="card-divider"></div>
+          <div class="card-bottom">
+            <div>
+              <el-icon><Clock /></el-icon>
+              {{ user.createtime || '' }}
+            </div>
+            <el-icon class="lock"><Lock /></el-icon>
+          </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><FolderOpened /></el-icon>
                 <span>编辑</span>
               </div>
             </div>
@@ -58,11 +73,12 @@
         </div>
       </div>
     </div>
-    </div>
 
     <!-- 分页 -->
     <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"
@@ -82,72 +98,89 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
 import AppUserEdit from './edit.vue'
-
-export default {
-  useridentifier: 'AppUserConfig',
-  components: {
-    AppUserEdit
-  },
-  data() {
-    return {
-      searchForm: {
+import { queryAppuser, delAppUser } from '@/api/safetyManagement/appUserConfig.js'
+import { ElMessageBox } from 'element-plus'
+const searchForm = reactive({
   useridentifier: '',
   username: '',
-        remark: ''
-      },
-      userList: [
-        {
-          realname: 'admin',
-          username: '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('确认删除该用户吗？', '提示', {
+  note: ''
+})
+const userList = ref([])
+const total = ref(1)
+const currentPage = ref(1)
+const pageSize = ref(8)
+const editVisible = ref(false)
+const editData = ref(null)
+
+const getList = async () => {
+  try {
+    const res = await queryAppuser({
+      useridentifier: searchForm.useridentifier,
+      username: searchForm.username,
+      note: searchForm.note,
+      pageno: currentPage.value,
+      pagesize: pageSize.value
+    })
+    if (res.code === 'POP_00014') {
+      userList.value = res.data.list || []
+      total.value = res.data.total || 0
+    }
+  } catch (error) {
+    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 = async (row) => {
+  try {
+     ElMessageBox.confirm('确认删除该用户吗？', '提示', {
     type: 'warning'
   }).then(() => {
     // 调用删除接口
-        console.log('删除用户', row)
-      }).catch(() => {})
-    },
-    handleEdit(row) {
-      // 打开编辑用户弹窗
-      this.editData = { ...row }
-      this.editVisible = true
-    },
-    handleEditSuccess() {
-      // 编辑成功后的回调
-      this.editVisible = false
-      // 刷新列表数据
-      this.getList()
-    },
-    getList() {
-      // 获取用户列表数据
+    delAppUser({id: row.id})
+    .then(res => {
+      if (res.code === 'POP_00014') {
+        getList();
+      } else {
+        const modal = instance?.appContext.config.globalProperties.$modal
+        modal && modal.msgError ? modal.msgError(res.msg || '删除失败') : alert(res.msg || '删除失败')
       }
+    })
+  }).catch(() => {})
+
+
+  } catch (e) {
+    // 用户取消或请求失败
+    // 可选：打印错误
+    // console.error('删除失败或已取消', e)
   }
 }
+const handleEdit = (row) => {
+  editData.value = { ...row }
+  editVisible.value = true
+}
+const handleEditSuccess = () => {
+  editVisible.value = false
+  getList()
+}
+onMounted(() => {
+  getList()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -206,37 +239,120 @@ export default {
 
     .user-card {
       background: #fff;
-      border-radius: 8px;
-      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-      overflow: hidden;
+      border-radius: 12px;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
+      overflow: visible; // 保证遮罩不被裁剪
+      position: relative;
+      padding: 0;
+      border: none;
+      transition: box-shadow 0.2s;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      &:hover {
+        box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
+      }
+    }
+
+    .card-left-bar {
+      position: absolute;
+      left: 0;
+      top: 24px;
+      bottom: 24px;
+      width: 8px;
+      background: #409EFF;
+      border-radius: 4px;
     }
 
     .user-info {
       display: flex;
-      align-items: center;
-      padding: 20px;
+      align-items: flex-start;
+      padding: 24px 24px 0 24px;
       position: relative;
+      height: auto;
       cursor: pointer;
-      height: 100%;
 
       .avatar {
-        margin-right: 15px;
+        margin-left: auto;
+        margin-right: 0;
+        width: 80px;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
       .info {
         flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
 
-        .useridentifier {
-          font-size: 16px;
-          font-weight: bold;
+        .name {
+          font-size: 20px;
+          font-weight: 600;
+          color: #409EFF;
+          margin-bottom: 12px;
+        }
+
+        .username {
+          font-size: 15px;
+          color: #666;
           margin-bottom: 8px;
-          color: #333;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+
+          .el-icon {
+            font-size: 16px;
+            color: #bdbdbd;
+          }
         }
 
-        .username, .remark {
+        .note {
+          font-size: 15px;
           color: #666;
-          font-size: 14px;
-          margin-bottom: 5px;
+          margin-bottom: 8px;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 320px;
+
+          .el-icon {
+            font-size: 16px;
+            color: #bdbdbd;
+          }
+        }
+      }
+    }
+
+    .card-divider {
+      height: 2px;
+      background: #f2f6fa;
+      margin: 12px 24px 0 24px;
+      border-radius: 1px;
+    }
+
+    .card-bottom {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 24px 12px 24px;
+      color: #909399;
+      font-size: 15px;
+
+      .el-icon {
+        margin-right: 6px;
+      }
+
+      .lock {
+        font-size: 18px;
+        color: #bdbdbd;
+        margin-left: 8px;
       }
     }
 
@@ -247,13 +363,26 @@ export default {
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.6);
-        display: none;
+      display: flex;
       justify-content: center;
       align-items: center;
+      z-index: 2;
+      opacity: 0;
+      pointer-events: none; // 默认不拦截，避免首次点击无效
+      transition: opacity 0.2s;
+    }
+
+    .user-card:hover .hover-mask {
+      opacity: 1;
+      pointer-events: auto; // 悬浮时可点击
+    }
 
     .operation-buttons {
       display: flex;
-          gap: 30px;
+      gap: 80px;
+      justify-content: center;
+      align-items: center;
+    }
 
     .operation-btn {
       display: flex;
@@ -261,14 +390,14 @@ export default {
       align-items: center;
       color: white;
       cursor: pointer;
-
-            i {
-              font-size: 24px;
-              margin-bottom: 8px;
-            }
+      background: none;
+      border-radius: 0;
+      padding: 0;
+      box-shadow: none;
+      transition: color 0.2s;
 
       span {
-              font-size: 14px;
+        font-weight: 500;
       }
 
       &:hover {
@@ -276,22 +405,6 @@ export default {
       }
     }
   }
-      }
-
-      &:hover {
-        .hover-mask {
-          display: flex;
-        }
-      }
-    }
-
-    .operation-time {
-      color: #666;
-      i {
-        margin-right: 5px;
-      }
-    }
-  }
 
   .pagination {
     background: #fff;