Skip to content

N
nse-ui
Commit de8b37c0 by 周海峰
Options

no message

parent 15ab1ab3
正在显示 包含 302 行增加 和 165 行删除
src/api/safetyManagement/appUserConfig.js 0 → 100644
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 @@ ...@@ -9,7 +9,7 @@
:align-center="true" :align-center="true"
:fullscreen="false" :fullscreen="false"
@close="handleClose" @close="handleClose"
width="600px" width="500px"
> >
<el-form <el-form
ref="formRef" ref="formRef"
...@@ -25,17 +25,17 @@ ...@@ -25,17 +25,17 @@
<el-input v-model="form.username" placeholder="请输入用户名" /> <el-input v-model="form.username" placeholder="请输入用户名" />
</el-form-item> </el-form-item>
<!-- 备注 --> <!-- 备注 -->
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="note">
<el-input <el-input
v-model="form.remark" v-model="form.note"
placeholder="请输入备注" placeholder="请输入备注"
/> />
</el-form-item> </el-form-item>
<!-- 是否明文和是否脱敏 --> <!-- 是否明文和是否脱敏 -->
<el-form-item> <el-form-item>
<el-checkbox v-model="form.isoriginal">是否明文</el-checkbox> <el-checkbox v-model="form.isoriginal" :true-value="'1'" :false-value="'0'">是否明文</el-checkbox>
<el-checkbox v-model="form.ismask" style="margin-left: 20px">是否脱敏</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-item>
</el-form> </el-form>
<template #footer> <template #footer>
...@@ -49,10 +49,10 @@ ...@@ -49,10 +49,10 @@
</el-dialog> </el-dialog>
</template> </template>
<script> <script setup>
export default { import { ref, reactive, watch } from 'vue'
name: 'AppUserEdit', import { addAppUser } from '@/api/safetyManagement/appUserConfig.js'
props: { const props = defineProps({
visible: { visible: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -61,69 +61,65 @@ export default { ...@@ -61,69 +61,65 @@ export default {
type: Object, type: Object,
default: () => null default: () => null
} }
}, })
emits: ['update:visible', 'success'], const emit = defineEmits(['update:visible', 'success'])
watch: {
visible(val) { const formRef = ref(null)
if (val && this.formData) { const form = reactive({
this.form = {
...this.formData,
password: '',
confirmPassword: ''
}
}
}
},
data() {
return {
form: {
useridentifier: '', useridentifier: '',
username: '', username: '',
remark: '', note: '',
isoriginal: false, isoriginal: '0', // 默认字符串类型
ismask: false ismask: '0'
}, })
rules: { const rules = {
useridentifier: [ useridentifier: [
{ required: true, message: '请输入唯一标识', trigger: 'blur' } { required: true, message: '请输入唯一标识', trigger: 'blur' }
], ],
username: [ username: [
{ required: true, message: '请输入用户名', trigger: 'blur' } { 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')
})
} }
} console.log('表单数据', form)
}, })
methods: {
handleClose() { const handleClose = () => {
this.$emit('update:visible', false) emit('update:visible', false)
this.$refs.formRef?.resetFields() formRef.value?.resetFields()
this.form = { Object.assign(form, {
useridentifier: '', useridentifier: '',
username: '', username: '',
remark: '', note: '',
isoriginal: false, isoriginal: '0',
ismask: false ismask: '0'
} })
}, }
handleSubmit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
// 提交表单逻辑
const params = { ...this.form }
// 如果是编辑模式且没有修改密码，则不提交密码字段
if (this.formData && !params.password) {
delete params.password
delete params.confirmPassword
}
console.log('submit form', params) const handleSubmit = () => {
// 调用接口保存数据 formRef.value.validate(async (valid) => {
this.$emit('success') if (valid) {
this.handleClose() const params = { ...form }
try {
const res = await addAppUser(params)
if (res.code === 'POP_00014') {
emit('success')
handleClose()
} }
}) } catch (error) {
// 可根据需要添加错误提示
console.error('添加用户失败', error)
} }
} }
})
} }
</script> </script>
......
src/views/safetyManagement/appUserConfig/index.vue
...@@ -11,13 +11,13 @@ ...@@ -11,13 +11,13 @@
<el-form :inline="true" :model="searchForm" class="search-form"> <el-form :inline="true" :model="searchForm" class="search-form">
<div class="left-area"> <div class="left-area">
<el-form-item label="唯一标识:"> <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>
<el-form-item label="用户名:"> <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>
<el-form-item label="备注:"> <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-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button> <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
...@@ -33,24 +33,39 @@ ...@@ -33,24 +33,39 @@
<div class="user-list"> <div class="user-list">
<div class="user-grid"> <div class="user-grid">
<div v-for="(user, index) in userList" :key="index" class="user-card"> <div v-for="(user, index) in userList" :key="index" class="user-card">
<div class="card-left-bar"></div>
<div class="user-info"> <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"> <div class="avatar">
<el-avatar :size="50" icon="User"></el-avatar> <el-avatar :size="80" icon="UserFilled" style="background: #f6f8fa; color: #d3d8e0;" />
</div> </div>
<div class="info">
<div class="useridentifier">{{ user.username }}</div>
<div class="username">用户名: {{ user.username }}</div>
<div class="remark">备注: {{ user.remark }}</div>
</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="hover-mask">
<div class="operation-buttons"> <div class="operation-buttons">
<div class="operation-btn" @click="handleDelete(user)"> <div class="operation-btn" @click="handleDelete(user)">
<i class="el-icon-delete"></i> <el-icon><Delete /></el-icon>
<span>删除</span> <span>删除</span>
</div> </div>
<div class="operation-btn" @click="handleEdit(user)"> <div class="operation-btn" @click="handleEdit(user)">
<i class="el-icon-edit"></i> <el-icon><FolderOpened /></el-icon>
<span>编辑</span> <span>编辑</span>
</div> </div>
</div> </div>
...@@ -58,11 +73,12 @@ ...@@ -58,11 +73,12 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 分页 --> <!-- 分页 -->
<div class="pagination"> <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 <el-pagination
background background
layout="prev, pager, next, jumper" layout="prev, pager, next, jumper"
...@@ -82,72 +98,89 @@ ...@@ -82,72 +98,89 @@
</div> </div>
</template> </template>
<script> <script setup>
import { ref, reactive, onMounted } from 'vue'
import AppUserEdit from './edit.vue' import AppUserEdit from './edit.vue'
import { queryAppuser, delAppUser } from '@/api/safetyManagement/appUserConfig.js'
export default { import { ElMessageBox } from 'element-plus'
useridentifier: 'AppUserConfig', const searchForm = reactive({
components: {
AppUserEdit
},
data() {
return {
searchForm: {
useridentifier: '', useridentifier: '',
username: '', username: '',
remark: '' note: ''
}, })
userList: [ const userList = ref([])
{ const total = ref(1)
realname: 'admin', const currentPage = ref(1)
username: 'admin', const pageSize = ref(8)
remark: '' const editVisible = ref(false)
} const editData = ref(null)
],
total: 1, const getList = async () => {
currentPage: 1, try {
pageSize: 8, const res = await queryAppuser({
editVisible: false, useridentifier: searchForm.useridentifier,
editData: null username: searchForm.username,
} note: searchForm.note,
}, pageno: currentPage.value,
methods: { pagesize: pageSize.value
handleSearch() { })
// 实现搜索逻辑 if (res.code === 'POP_00014') {
}, userList.value = res.data.list || []
handleAdd() { total.value = res.data.total || 0
// 打开新增用户弹窗 }
this.editData = null } catch (error) {
this.editVisible = true console.error('获取用户列表失败', error)
}, }
handlePageChange(page) { }
// 实现分页逻辑
}, const handleSearch = () => {
handleDelete(row) { currentPage.value = 1
// 实现删除用户逻辑 getList()
this.$confirm('确认删除该用户吗？', '提示', { }
const handleAdd = () => {
editData.value = null
editVisible.value = true
}
const handlePageChange = (page) => {
currentPage.value = page
getList()
}
const handleDelete = async (row) => {
try {
ElMessageBox.confirm('确认删除该用户吗？', '提示', {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
// 调用删除接口 // 调用删除接口
console.log('删除用户', row) delAppUser({id: row.id})
}).catch(() => {}) .then(res => {
}, if (res.code === 'POP_00014') {
handleEdit(row) { getList();
// 打开编辑用户弹窗 } else {
this.editData = { ...row } const modal = instance?.appContext.config.globalProperties.$modal
this.editVisible = true modal && modal.msgError ? modal.msgError(res.msg || '删除失败') : alert(res.msg || '删除失败')
},
handleEditSuccess() {
// 编辑成功后的回调
this.editVisible = false
// 刷新列表数据
this.getList()
},
getList() {
// 获取用户列表数据
} }
})
}).catch(() => {})
} catch (e) {
// 用户取消或请求失败
// 可选：打印错误
// console.error('删除失败或已取消', e)
} }
} }
const handleEdit = (row) => {
editData.value = { ...row }
editVisible.value = true
}
const handleEditSuccess = () => {
editVisible.value = false
getList()
}
onMounted(() => {
getList()
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -206,37 +239,120 @@ export default { ...@@ -206,37 +239,120 @@ export default {
.user-card { .user-card {
background: #fff; background: #fff;
border-radius: 8px; border-radius: 12px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
overflow: hidden; 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 { .user-info {
display: flex; display: flex;
align-items: center; align-items: flex-start;
padding: 20px; padding: 24px 24px 0 24px;
position: relative; position: relative;
height: auto;
cursor: pointer; cursor: pointer;
height: 100%;
.avatar { .avatar {
margin-right: 15px; margin-left: auto;
margin-right: 0;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
} }
.info { .info {
flex: 1; flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
.useridentifier { .name {
font-size: 16px; font-size: 20px;
font-weight: bold; font-weight: 600;
color: #409EFF;
margin-bottom: 12px;
}
.username {
font-size: 15px;
color: #666;
margin-bottom: 8px; 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; color: #666;
font-size: 14px; margin-bottom: 8px;
margin-bottom: 5px; 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 { ...@@ -247,13 +363,26 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
display: none; display: flex;
justify-content: center; justify-content: center;
align-items: 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 { .operation-buttons {
display: flex; display: flex;
gap: 30px; gap: 80px;
justify-content: center;
align-items: center;
}
.operation-btn { .operation-btn {
display: flex; display: flex;
...@@ -261,14 +390,14 @@ export default { ...@@ -261,14 +390,14 @@ export default {
align-items: center; align-items: center;
color: white; color: white;
cursor: pointer; cursor: pointer;
background: none;
i { border-radius: 0;
font-size: 24px; padding: 0;
margin-bottom: 8px; box-shadow: none;
} transition: color 0.2s;
span { span {
font-size: 14px; font-weight: 500;
} }
&:hover { &:hover {
...@@ -276,22 +405,6 @@ export default { ...@@ -276,22 +405,6 @@ export default {
} }
} }
} }
}
&:hover {
.hover-mask {
display: flex;
}
}
}
.operation-time {
color: #666;
i {
margin-right: 5px;
}
}
}
.pagination { .pagination {
background: #fff; background: #fff;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论