Skip to content

N
nse-ui
Commit dd24bbbb by ningjihai
Options

应用用户

parent a32bc51d
正在显示 包含 634 行增加 和 463 行删除
src/views/safetyManagement/appUserConfig/QueryForm.vue 0 → 100644
<script setup lang="ts" name="QueryForm">
import { computed,ref,watch } from 'vue'
import type { FormInstance } from 'element-plus'
import PageWrapperSearch from '@/components/search/PageWrapperSearch.vue'
import {
Plus
} from '@element-plus/icons-vue'
import { color } from 'echarts'
// import { useDict } from '@/utils/dict'
// import { listDept } from '@/api/system/dept'// 部门
// const { approve_status, invoice_status} = useDict('approve_status', 'invoice_status')
const emit = defineEmits(['update:modelValue', 'query', 'reset','handleAdd'])
const invoice_status_filter = ref([])
const employeesList = ref([])
const props = defineProps<{
modelValue: any
}>()
const queryForm = computed({
get() {
return props.modelValue
},
set(val: any) {
console.log('query computed', val)
emit('update:modelValue', val)
}
})
// 搜索
function onSearch() {
emit('query')
}
// 重置
function onReset(formRef: FormInstance) {
queryForm.value.useridentifier = ''
queryForm.value.username = ''
queryForm.value.note = ''
emit('reset', formRef)
}
function handleAdd() {
emit('handleAdd')
}
</script>
<template>
<!-- el-form -->
<page-wrapper-search
:model="queryForm"
:extraButtons="[
{
text: '新增',
icon: Plus,
color: 'rgba(0, 189, 207, 1)',
type: 'success',
class: 'btn-fff',
onClick: handleAdd
}
]"
@search="onSearch"
@reset="onReset">
<el-form-item label="唯一标识:">
<el-input v-model="queryForm.useridentifier" clearable placeholder="请输入唯一标识"></el-input>
</el-form-item>
<el-form-item label="用户名:">
<el-input v-model="queryForm.username" clearable placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="备注:">
<el-input v-model="queryForm.note" clearable placeholder="请输入备注"></el-input>
</el-form-item>
</page-wrapper-search>
<!-- <page-wrapper-search
:model="queryForm"
:extraButtons="[
{
text: '导出',
icon: Edit,
type: 'success',
onClick: handleExport
},
{
text: '打印',
type: 'warning',
onClick: handlePrint
}
]"
@search="onSearch"
@reset="onReset">
<el-form-item label="项目名称" prop="proName">
<el-input
v-model="queryForm.proName"
placeholder="请输入项目名称"
clearable
/>
</el-form-item>
<el-form-item label="备注" prop="note">
<el-input
v-model="queryForm.note"
placeholder="请输入备注"
clearable
/>
</el-form-item>
</page-wrapper-search> -->
</template>
<style scoped lang="scss">
:deep(.btn-fff){
span{
color: #fff;
}
}
</style>
src/views/safetyManagement/appUserConfig/edit.vue
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
:align-center="true" :align-center="true"
:fullscreen="false" :fullscreen="false"
@close="handleClose" @close="handleClose"
width="500px" class="custom-dialog"
width="900px"
> >
<el-form <el-form
ref="formRef" ref="formRef"
...@@ -39,12 +40,8 @@ ...@@ -39,12 +40,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <el-button type="danger" @click="handleClose">取 消</el-button>
<div class="footer-buttons"> <el-button type="primary" color="rgba(33, 103, 217, 1)" @click="handleSubmit">确 定</el-button>
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</div>
</div>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
......
src/views/safetyManagement/appUserConfig/index.vue
<template> <script setup lang="ts" name="projectManageIndex">
<div class="user-config"> import { ref } from 'vue'
<!-- 标题 --> import list from './list.vue'
<div class="title">
<el-icon><User /></el-icon>
应用用户
</div>
<!-- 搜索和操作区域 -->
<div class="search-area">
<el-form :inline="true" :model="searchForm" class="search-form">
<div class="left-area">
<el-form-item label="唯一标识:">
<el-input v-model="searchForm.useridentifier" clearable placeholder="请输入唯一标识"></el-input>
</el-form-item>
<el-form-item label="用户名:">
<el-input v-model="searchForm.username" clearable placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="备注:">
<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>
</el-form-item>
</div>
<div class="right-area">
<el-button type="primary" icon="Plus" @click="handleAdd">新增用户</el-button>
</div>
</el-form>
</div>
<!-- 用户列表 -->
<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="80" icon="UserFilled" style="background: #f6f8fa; color: #d3d8e0;" />
</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)">
<el-icon><Delete /></el-icon>
<span>删除</span>
</div>
<div class="operation-btn" @click="handleEdit(user)">
<el-icon><FolderOpened /></el-icon>
<span>编辑</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<div class="pagination">
<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"
:page-size="pageSize"
@current-change="handlePageChange">
</el-pagination>
</div>
<!-- 编辑弹窗 -->
<app-user-edit
v-model:visible="editVisible"
:form-data="editData"
@success="handleEditSuccess"
/>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import AppUserEdit from './edit.vue'
import { queryAppuser, delAppUser } from '@/api/safetyManagement/appUserConfig.js'
import { ElMessageBox } from 'element-plus'
const searchForm = reactive({
useridentifier: '',
username: '',
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 () => { const widget = {
try { list: list
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 = () => { const page = ref('list')
currentPage.value = 1 const params = ref({})
getList()
}
const handleAdd = () => {
editData.value = null
editVisible.value = true
}
const handlePageChange = (page) => {
currentPage.value = page
getList()
}
const handleDelete = async (row) => { function onChangePage(val: string, param?: any) {
try { page.value = val
ElMessageBox.confirm('确认删除该用户吗？', '提示', { params.value = param ?? {}
type: 'warning'
}).then(() => {
// 调用删除接口
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> </script>
<style lang="scss" scoped> <template>
.user-config { <component :is="widget[page]" v-bind="params" @page="onChangePage" />
padding: 20px; </template>
.title {
font-size: 18px;
color: #333;
margin-bottom: 20px;
display: flex;
align-items: center;
i {
color: #409EFF;
margin-right: 8px;
font-size: 20px;
}
}
.search-area {
background: #fff;
padding: 20px;
border-radius: 4px;
margin-bottom: 20px;
.search-form {
display: flex;
justify-content: space-between;
align-items: center;
.left-area {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.right-area {
margin-left: 20px;
}
}
.el-form-item {
margin-bottom: 0;
}
}
.user-list {
margin-bottom: 20px;
.user-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.user-card {
background: #fff;
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: flex-start;
padding: 24px 24px 0 24px;
position: relative;
height: auto;
cursor: pointer;
.avatar {
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;
.name {
font-size: 20px;
font-weight: 600;
color: #409EFF;
margin-bottom: 12px;
}
.username {
font-size: 15px;
color: #666;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
.el-icon {
font-size: 16px;
color: #bdbdbd;
}
}
.note {
font-size: 15px;
color: #666;
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;
}
}
.hover-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
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: 80px;
justify-content: center;
align-items: center;
}
.operation-btn {
display: flex;
flex-direction: column;
align-items: center;
color: white;
cursor: pointer;
background: none;
border-radius: 0;
padding: 0;
box-shadow: none;
transition: color 0.2s;
span {
font-weight: 500;
}
&:hover {
color: #409EFF;
}
}
}
.pagination {
background: #fff;
padding: 15px 20px;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
.pagination-info {
color: #666;
font-size: 14px;
}
}
}
</style>
src/views/safetyManagement/appUserConfig/list.vue 0 → 100644
<template>
<div class="app-container scroller">
<PageTitle>
<template #title>
应用用户
</template>
</PageTitle>
<div class="app-container__body">
<query-form
ref="QueryFormRef"
v-model="queryParams"
@query="handleSearch"
@reset="onReset"
@handleAdd="handleAdd"
/>
<div style="flex: 1;">
<el-table
:data="userList"
stripe
height="100%"
style="width: 100%"
>
<el-table-column
type="index"
label="序号"
width="80"
align="center"
fixed
/>
<!-- 发现任务名称列（左侧浮动） -->
<el-table-column
prop="username"
label="用户名"
min-width="180"
>
</el-table-column>
<el-table-column
prop="note"
label="备注"
min-width="180"
>
</el-table-column>
<el-table-column
prop="createtime"
label="创建时间"
min-width="180"
>
</el-table-column>
<el-table-column
label="操作"
width="320"
fixed="right"
align="center"
>
<template #default="{ row }">
<div class="operation-buttons">
<!-- 编辑按钮 -->
<el-button
link
type="primary"
size="small"
icon="edit"
@click="handleEdit(row)"
class="op-btn"
>
编辑
</el-button>
<el-button
link
type="primary"
size="small"
icon="delete"
@click="handleDelete(row)"
class="op-btn"
>
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.page"
v-model:limit="queryParams.rows"
@pagination="getList"
/>
</div>
<!-- 用户列表 -->
<!-- <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="80" icon="UserFilled" style="background: #f6f8fa; color: #d3d8e0;" />
</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)">
<el-icon><Delete /></el-icon>
<span>删除</span>
</div>
<div class="operation-btn" @click="handleEdit(user)">
<el-icon><FolderOpened /></el-icon>
<span>编辑</span>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- 分页 -->
<!-- 编辑弹窗 -->
<app-user-edit
v-model:visible="editVisible"
:form-data="editData"
@success="handleEditSuccess"
/>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import QueryForm from './QueryForm.vue'
import AppUserEdit from './edit.vue'
import { queryAppuser, delAppUser } from '@/api/safetyManagement/appUserConfig.js'
import { ElMessageBox } from 'element-plus'
const data = reactive({
queryParams: {
pageno: 1,
pagesize: 10,
useridentifier: '',
username: '',
note: ''
}
})
const total = ref(0)
// 表格数据
const { queryParams } = toRefs(data)
const userList = ref([])
const editVisible = ref(false)
const editData = ref(null)
const getList = async () => {
try {
const res = await queryAppuser(queryParams.value)
if (res.code === 'POP_00014') {
userList.value = res.data.list || []
total.value = res.data.total || 0
}
} catch (error) {
console.error('获取用户列表失败', error)
}
}
function onReset(formQuery) {
console.log('onReset')
formQuery.resetFields()
handleSearch()
}
const handleSearch = () => {
queryParams.value.pageno = 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(() => {
// 调用删除接口
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>
.user-config {
padding: 20px;
.title {
font-size: 18px;
color: #333;
margin-bottom: 20px;
display: flex;
align-items: center;
i {
color: #409EFF;
margin-right: 8px;
font-size: 20px;
}
}
.search-area {
background: #fff;
padding: 20px;
border-radius: 4px;
margin-bottom: 20px;
.search-form {
display: flex;
justify-content: space-between;
align-items: center;
.left-area {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.right-area {
margin-left: 20px;
}
}
.el-form-item {
margin-bottom: 0;
}
}
.user-list {
margin-bottom: 20px;
.user-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.user-card {
background: #fff;
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: flex-start;
padding: 24px 24px 0 24px;
position: relative;
height: auto;
cursor: pointer;
.avatar {
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;
.name {
font-size: 20px;
font-weight: 600;
color: #409EFF;
margin-bottom: 12px;
}
.username {
font-size: 15px;
color: #666;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
.el-icon {
font-size: 16px;
color: #bdbdbd;
}
}
.note {
font-size: 15px;
color: #666;
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;
}
}
.hover-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
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: 80px;
justify-content: center;
align-items: center;
}
.operation-btn {
display: flex;
flex-direction: column;
align-items: center;
color: white;
cursor: pointer;
background: none;
border-radius: 0;
padding: 0;
box-shadow: none;
transition: color 0.2s;
span {
font-weight: 500;
}
&:hover {
color: #409EFF;
}
}
}
.pagination {
background: #fff;
padding: 15px 20px;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
.pagination-info {
color: #666;
font-size: 14px;
}
}
}
</style>
src/views/safetyManagement/groupConfig/list.vue
...@@ -104,47 +104,6 @@ ...@@ -104,47 +104,6 @@
/> />
</div> </div>
<!-- 用户列表 -->
<!-- <div class="user-list">
<div class="user-grid">
<div v-for="(user, index) in groupList" :key="index" class="user-card">
<div class="card-left-bar"></div>
<div class="user-info">
<div class="info">
<div class="name">{{ user.groupname }}</div>
<div class="remark">
<el-icon><Edit /></el-icon>
备注 {{ user.remark }}
</div>
</div>
<div class="avatar">
<el-avatar :size="80" icon="UserFilled" style="background: #f6f8fa; color: #d3d8e0;" />
</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)">
<el-icon><Delete /></el-icon>
<span>删除</span>
</div>
<div class="operation-btn" @click="handleEdit(user)">
<el-icon><FolderOpened /></el-icon>
<span>编辑</span>
</div>
</div>
</div>
</div>
</div> -->
</div> </div>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论