feat: 完成部门管理，岗位管理，用户管理部分，功能编码。
This commit is contained in:
tianyongbao
60
src/api/system/dept.js
Normal file
60
src/api/system/dept.js
Normal file
@@ -0,0 +1,60 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询部门列表
|
||||
export function listDept(query) {
|
||||
return request({
|
||||
url: '/system/dept/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询部门列表（排除节点）
|
||||
export function listDeptExcludeChild(deptId) {
|
||||
return request({
|
||||
url: '/system/dept/list/exclude/' + deptId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询部门下拉树列表
|
||||
export function treeselect() {
|
||||
return request({
|
||||
url: '/system/dept/treeselect',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询部门详细
|
||||
export function getDept(deptId) {
|
||||
return request({
|
||||
url: '/system/dept/' + deptId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增部门
|
||||
export function addDept(data) {
|
||||
return request({
|
||||
url: '/system/dept',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改部门
|
||||
export function updateDept(data) {
|
||||
return request({
|
||||
url: '/system/dept',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除部门
|
||||
export function delDept(deptId) {
|
||||
return request({
|
||||
url: '/system/dept/' + deptId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
34
src/api/system/logininfor.js
Normal file
34
src/api/system/logininfor.js
Normal file
@@ -0,0 +1,34 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询登录日志列表
|
||||
export function list(query) {
|
||||
return request({
|
||||
url: '/system/logininfor/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 删除登录日志
|
||||
export function delLogininfor(infoId) {
|
||||
return request({
|
||||
url: '/system/logininfor/' + infoId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 解锁用户登录状态
|
||||
export function unlockLogininfor(userName) {
|
||||
return request({
|
||||
url: '/system/logininfor/unlock/' + userName,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 清空登录日志
|
||||
export function cleanLogininfor() {
|
||||
return request({
|
||||
url: '/system/logininfor/clean',
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
44
src/api/system/post.js
Normal file
44
src/api/system/post.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询岗位列表
|
||||
export function listPost(query) {
|
||||
return request({
|
||||
url: '/system/post/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询岗位详细
|
||||
export function getPost(postId) {
|
||||
return request({
|
||||
url: '/system/post/' + postId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增岗位
|
||||
export function addPost(data) {
|
||||
return request({
|
||||
url: '/system/post',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改岗位
|
||||
export function updatePost(data) {
|
||||
return request({
|
||||
url: '/system/post',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除岗位
|
||||
export function delPost(postId) {
|
||||
return request({
|
||||
url: '/system/post/' + postId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@@ -1,41 +1,78 @@
|
||||
import upload from '@/utils/upload'
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 用户密码重置
|
||||
export function updateUserPwd(oldPassword, newPassword) {
|
||||
const data = {
|
||||
oldPassword,
|
||||
newPassword
|
||||
}
|
||||
// 查询用户列表
|
||||
export function listUser(query) {
|
||||
return request({
|
||||
url: '/system/user/profile/updatePwd',
|
||||
method: 'put',
|
||||
params: data
|
||||
url: '/system/user/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询用户个人信息
|
||||
export function getUserProfile() {
|
||||
// 查询用户详细
|
||||
export function getUser(userId) {
|
||||
return request({
|
||||
url: '/system/user/profile',
|
||||
url: '/system/user/' + userId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 修改用户个人信息
|
||||
export function updateUserProfile(data) {
|
||||
// 新增用户
|
||||
export function addUser(data) {
|
||||
return request({
|
||||
url: '/system/user/profile',
|
||||
url: '/system/user',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改用户
|
||||
export function updateUser(data) {
|
||||
return request({
|
||||
url: '/system/user',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 用户头像上传
|
||||
export function uploadAvatar(data) {
|
||||
return upload({
|
||||
url: '/system/user/profile/avatar',
|
||||
name: data.name,
|
||||
filePath: data.filePath
|
||||
// 删除用户
|
||||
export function delUser(userId) {
|
||||
return request({
|
||||
url: '/system/user/' + userId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 用户状态修改
|
||||
export function changeUserStatus(userId, status) {
|
||||
const data = {
|
||||
userId,
|
||||
status
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/changeStatus',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 用户密码重置
|
||||
export function resetUserPwd(userId, password) {
|
||||
const data = {
|
||||
userId,
|
||||
password
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/resetPwd',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 查询部门下拉树结构
|
||||
export function deptTreeSelect() {
|
||||
return request({
|
||||
url: '/system/user/deptTree',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -881,6 +881,68 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "数据详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "system/logininfor/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录日志"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "system/user/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "用户管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "system/user/addEdit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "用户管理",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "system/user/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "用户详情",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "system/post/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "岗位管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "system/post/addEdit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "岗位管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "system/post/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "岗位详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "system/dept/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "部门管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "system/dept/addEdit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "部门管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "system/dept/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "部门详情"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
311
src/pages_mine/pages/system/dept/addEdit.vue
Normal file
311
src/pages_mine/pages/system/dept/addEdit.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<view class="container" style="paddingBottom:1rpx;">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
:title="title"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
<u-form-item label="上级部门" prop="parentName" @click="showDeptPicker = true">
|
||||
<u--input v-model="parentName" disabled disabledColor="#ffffff" placeholder="请选择上级部门"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<template #right>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="部门名称" prop="deptName" required>
|
||||
<u--input v-model="form.deptName" placeholder="请输入部门名称" maxlength="30"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="显示排序">
|
||||
<u-number-box v-model="form.orderNum" :min="0" :max="999" inputAlign="right"></u-number-box>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="负责人" prop="leader">
|
||||
<u--input v-model="form.leader" placeholder="请输入负责人" maxlength="20"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="联系电话" prop="phone">
|
||||
<u--input v-model="form.phone" placeholder="请输入联系电话" maxlength="11"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="邮箱" prop="email">
|
||||
<u--input v-model="form.email" placeholder="请输入邮箱" maxlength="50"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
|
||||
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<template #right>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-picker itemHeight="88" :show="showStatusPicker" :columns="statusList" keyName="dictLabel" @cancel="showStatusPicker = false"
|
||||
@confirm="handleStatusConfirm"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showDeptPicker" :columns="deptList" keyName="deptName" @cancel="showDeptPicker = false"
|
||||
@confirm="handleDeptConfirm"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||
import { getDept, addDept, updateDept, listDept } from '@/api/system/dept'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const statusList = ref([])
|
||||
const deptList = ref([])
|
||||
const title = ref('添加部门')
|
||||
const showStatusPicker = ref(false)
|
||||
const showDeptPicker = ref(false)
|
||||
const statusName = ref('')
|
||||
const parentName = ref('')
|
||||
|
||||
const form = reactive({
|
||||
deptId: undefined,
|
||||
parentId: 0,
|
||||
deptName: undefined,
|
||||
orderNum: 0,
|
||||
leader: undefined,
|
||||
phone: undefined,
|
||||
email: undefined,
|
||||
status: '0'
|
||||
})
|
||||
|
||||
const rules = {
|
||||
deptName: [
|
||||
{ required: true, message: '部门名称不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
email: [
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
|
||||
],
|
||||
phone: [
|
||||
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: ['blur'] }
|
||||
]
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = [res.data]
|
||||
})
|
||||
|
||||
if (option.id) {
|
||||
title.value = '修改部门'
|
||||
getDetail(option.id)
|
||||
} else {
|
||||
// 新增时加载部门列表
|
||||
loadDeptList()
|
||||
parentName.value = '顶级部门'
|
||||
setTimeout(() => {
|
||||
updateStatusName()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
|
||||
// 加载部门列表
|
||||
function loadDeptList() {
|
||||
listDept().then(res => {
|
||||
const listData = res.data || []
|
||||
// 后端返回的是扁平数据，需要先构建树形结构
|
||||
const treeData = buildTree(listData)
|
||||
// 将树形结构扁平化为一维数组（带层级标记）
|
||||
const flatList = flattenDeptTree(treeData)
|
||||
deptList.value = [flatList]
|
||||
})
|
||||
}
|
||||
|
||||
// 将扁平数据构建为树形结构
|
||||
function buildTree(flatData) {
|
||||
const map = {}
|
||||
const tree = []
|
||||
|
||||
// 先创建映射
|
||||
flatData.forEach(item => {
|
||||
map[item.deptId] = { ...item, children: [] }
|
||||
})
|
||||
|
||||
// 构建树形结构
|
||||
flatData.forEach(item => {
|
||||
const node = map[item.deptId]
|
||||
if (item.parentId === '0' || !map[item.parentId]) {
|
||||
tree.push(node)
|
||||
} else {
|
||||
map[item.parentId].children.push(node)
|
||||
}
|
||||
})
|
||||
|
||||
return tree
|
||||
}
|
||||
|
||||
// 将部门树形结构扁平化
|
||||
function flattenDeptTree(tree, result = [], level = 0) {
|
||||
tree.forEach(item => {
|
||||
// 使用更明显的层级标记：每级增加2个空格 + 符号
|
||||
let prefix = ''
|
||||
if (level === 1) {
|
||||
prefix = ' └─ ' // 使用全角空格
|
||||
} else if (level > 1) {
|
||||
prefix = ' '.repeat(level) + '└─ '
|
||||
}
|
||||
result.push({
|
||||
deptId: item.deptId,
|
||||
deptName: prefix + item.deptName,
|
||||
originalName: item.deptName,
|
||||
level: level
|
||||
})
|
||||
if (item.children && item.children.length > 0) {
|
||||
flattenDeptTree(item.children, result, level + 1)
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
// 获取详情
|
||||
function getDetail(id) {
|
||||
getDept(id).then(res => {
|
||||
Object.assign(form, res.data)
|
||||
updateStatusName()
|
||||
updateParentName()
|
||||
// 修改时也加载部门列表
|
||||
loadDeptList()
|
||||
})
|
||||
}
|
||||
|
||||
// 更新状态名称显示
|
||||
function updateStatusName() {
|
||||
if (statusList.value.length > 0 && statusList.value[0].length > 0) {
|
||||
const item = statusList.value[0].find(v => v.dictValue === form.status)
|
||||
statusName.value = item ? item.dictLabel : ''
|
||||
}
|
||||
}
|
||||
|
||||
// 更新上级部门名称显示
|
||||
function updateParentName() {
|
||||
if (form.parentId && form.parentId !== 0) {
|
||||
getDept(form.parentId).then(res => {
|
||||
parentName.value = res.data.deptName
|
||||
})
|
||||
} else {
|
||||
parentName.value = '无'
|
||||
}
|
||||
}
|
||||
|
||||
// 状态选择确认
|
||||
function handleStatusConfirm(e) {
|
||||
form.status = e.value[0].dictValue
|
||||
statusName.value = e.value[0].dictLabel
|
||||
showStatusPicker.value = false
|
||||
}
|
||||
|
||||
// 部门选择确认
|
||||
function handleDeptConfirm(e) {
|
||||
form.parentId = e.value[0].deptId
|
||||
parentName.value = e.value[0].originalName
|
||||
showDeptPicker.value = false
|
||||
}
|
||||
|
||||
// 提交
|
||||
function submit() {
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
if (form.deptId) {
|
||||
updateDept(form).then(() => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '修改成功', complete() {
|
||||
uni.navigateTo({ url: `/pages_mine/pages/system/dept/list` })
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
addDept(form).then(() => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '新增成功', complete() {
|
||||
uni.navigateTo({ url: `/pages_mine/pages/system/dept/list` })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
proxy.$refs['uToast'].show({
|
||||
type: 'error',
|
||||
message: '请填写完整信息'
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 24rpx;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.form-btn {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 24rpx !important;
|
||||
height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
|
||||
.form-btn .u-button__text {
|
||||
font-size: 30rpx !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 2rpx !important;
|
||||
}
|
||||
</style>
|
||||
240
src/pages_mine/pages/system/dept/details.vue
Normal file
240
src/pages_mine/pages/system/dept/details.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
title="部门详情"
|
||||
>
|
||||
</u-navbar>
|
||||
|
||||
<view class="detail-card">
|
||||
<view class="card-header">
|
||||
<view class="header-icon">
|
||||
<uni-icons type="chat" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<text class="card-name">{{ detailInfo.deptName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-section">
|
||||
<view class="section-title">
|
||||
<view class="title-icon"></view>
|
||||
<text>基本信息</text>
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="list-item">
|
||||
<text class="item-label">部门编号</text>
|
||||
<text class="item-value">{{ detailInfo.deptId }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">部门名称</text>
|
||||
<text class="item-value">{{ detailInfo.deptName }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">显示排序</text>
|
||||
<text class="item-value">{{ detailInfo.orderNum }}</text>
|
||||
</view>
|
||||
<view class="list-item" v-if="detailInfo.leader">
|
||||
<text class="item-label">负责人</text>
|
||||
<text class="item-value">{{ detailInfo.leader }}</text>
|
||||
</view>
|
||||
<view class="list-item" v-if="detailInfo.phone">
|
||||
<text class="item-label">联系电话</text>
|
||||
<text class="item-value">{{ detailInfo.phone }}</text>
|
||||
</view>
|
||||
<view class="list-item" v-if="detailInfo.email">
|
||||
<text class="item-label">邮箱</text>
|
||||
<text class="item-value">{{ detailInfo.email }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">状态</text>
|
||||
<text class="item-value" :class="getStatusClass(detailInfo.status)">{{ statusText }}</text>
|
||||
</view>
|
||||
<view class="list-item" v-if="detailInfo.createTime">
|
||||
<text class="item-label">创建时间</text>
|
||||
<text class="item-value">{{ detailInfo.createTime }}</text>
|
||||
</view>
|
||||
<view class="list-item" v-if="detailInfo.updateTime">
|
||||
<text class="item-label">更新时间</text>
|
||||
<text class="item-value">{{ detailInfo.updateTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, toRefs, computed } from 'vue'
|
||||
import { getDept } from '@/api/system/dept'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const id = ref('')
|
||||
const statusList = ref([])
|
||||
const data = reactive({
|
||||
detailInfo: {}
|
||||
})
|
||||
const { detailInfo } = toRefs(data)
|
||||
|
||||
const statusText = computed(() => {
|
||||
if (statusList.value.length > 0) {
|
||||
const item = statusList.value.find(v => v.dictValue === detailInfo.value.status)
|
||||
return item ? item.dictLabel : ''
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
function getStatusClass(status) {
|
||||
const statusStr = String(status)
|
||||
if (statusStr === '0') {
|
||||
return 'status-normal'
|
||||
}
|
||||
if (statusStr === '1') {
|
||||
return 'status-disabled'
|
||||
}
|
||||
return 'status-default'
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
id.value = option.id
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = res.data
|
||||
})
|
||||
getInfo()
|
||||
})
|
||||
|
||||
function getInfo() {
|
||||
getDept(id.value).then(res => {
|
||||
detailInfo.value = res.data
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
margin: 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 20rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.header-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.card-name {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.title-icon {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #2c3e50;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
color: #7f8c8d;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
color: #2c3e50;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
|
||||
&.status-normal {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.status-default {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
573
src/pages_mine/pages/system/dept/list.vue
Normal file
573
src/pages_mine/pages/system/dept/list.vue
Normal file
@@ -0,0 +1,573 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.deptName" border="false" placeholder="请输入部门名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
</u--input>
|
||||
<view class="filter-btn" @click="filterPanel = !filterPanel">
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
<view class="add-btn" @click="handleAdd()">
|
||||
<uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
|
||||
<text>新增</text>
|
||||
</view>
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
<view class="filter-title">状态</view>
|
||||
<view class="state-list">
|
||||
<view v-for="item in statusList" :key="item.dictValue" class="state-item"
|
||||
:class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn-reset" @click="resetQuery()">
|
||||
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||
<text>重置</text>
|
||||
</view>
|
||||
<view class="btn-confirm" @click="searchSubmit()">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||
<text>确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="chat" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.deptName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="balance-section">
|
||||
<view class="status-tag" :class="item.status === '0' ? 'status-normal' : 'status-disabled'">
|
||||
{{ dictStr(item.status, statusList) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<view class="info-item" v-if="item.leader">
|
||||
<text class="info-label">负责人</text>
|
||||
<text class="info-value">{{ item.leader }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.phone">
|
||||
<text class="info-label">联系电话</text>
|
||||
<text class="info-value">{{ item.phone }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.email">
|
||||
<text class="info-label">邮箱</text>
|
||||
<text class="info-value">{{ item.email }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.orderNum !== undefined">
|
||||
<text class="info-label">排序</text>
|
||||
<text class="info-value">{{ item.orderNum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="operate" @click.stop>
|
||||
<view class="btn-edit" @click="handleUpdate(item)">
|
||||
<uni-icons type="compose" size="16" color="#667eea"></uni-icons>
|
||||
<text>修改</text>
|
||||
</view>
|
||||
<view class="btn-delete" @click="handleDelete(item)">
|
||||
<uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
|
||||
<text>删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<view></view>
|
||||
<u-loadmore :status="loadStatus" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
|
||||
</u-list>
|
||||
</view>
|
||||
<suspend></suspend>
|
||||
<refresh></refresh>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { listDept, delDept } from '@/api/system/dept'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import modal from '@/plugins/modal'
|
||||
|
||||
const listData = ref([])
|
||||
const isShow = ref(false)
|
||||
const loadStatus = ref('loadmore')
|
||||
const statusList = ref([])
|
||||
const filterPanel = ref(false)
|
||||
|
||||
const queryParams = reactive({
|
||||
deptName: undefined,
|
||||
status: undefined
|
||||
})
|
||||
|
||||
const windowHeight = computed(() => {
|
||||
uni.getSystemInfoSync().windowHeight - 50
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = res.data.map(item => ({
|
||||
...item,
|
||||
selected: false
|
||||
}))
|
||||
})
|
||||
getList()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isShow.value) {
|
||||
listData.value = []
|
||||
getList()
|
||||
isShow.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// 获取列表
|
||||
function getList() {
|
||||
loadStatus.value = 'loading'
|
||||
listDept(queryParams).then(res => {
|
||||
// 部门数据是树形结构，直接使用data字段
|
||||
const deptData = res.data || []
|
||||
// 将树形结构扁平化为列表
|
||||
listData.value = flattenTree(deptData)
|
||||
loadStatus.value = 'nomore'
|
||||
}).catch(() => {
|
||||
loadStatus.value = 'nomore'
|
||||
})
|
||||
}
|
||||
|
||||
// 将树形结构扁平化
|
||||
function flattenTree(tree, result = []) {
|
||||
tree.forEach(item => {
|
||||
result.push(item)
|
||||
if (item.children && item.children.length > 0) {
|
||||
flattenTree(item.children, result)
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
// 搜索框失焦
|
||||
function searchBlur() {
|
||||
listData.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
// 选择状态
|
||||
function selectStatus(item) {
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
item.selected = !item.selected
|
||||
queryParams.status = item.dictValue
|
||||
}
|
||||
|
||||
// 搜索提交
|
||||
function searchSubmit() {
|
||||
listData.value = []
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
function resetQuery() {
|
||||
queryParams.deptName = undefined
|
||||
queryParams.status = undefined
|
||||
listData.value = []
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
// 上拉加载（部门数据不分页，无需加载更多）
|
||||
function loadmore() {
|
||||
// 部门数据不支持分页
|
||||
}
|
||||
|
||||
// 新增
|
||||
function handleAdd() {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: '/pages_mine/pages/system/dept/addEdit'
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function handleUpdate(row) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/dept/addEdit?id=${row.deptId}`
|
||||
})
|
||||
}
|
||||
|
||||
// 删除
|
||||
function handleDelete(row) {
|
||||
modal.confirm('是否确认删除部门“' + row.deptName + '”？').then(() => {
|
||||
return delDept(row.deptId)
|
||||
}).then(() => {
|
||||
listData.value = []
|
||||
getList()
|
||||
modal.msgSuccess('删除成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 进入详情
|
||||
function enterDetails(row) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/dept/details?id=${row.deptId}`
|
||||
})
|
||||
}
|
||||
|
||||
// 字典翻译
|
||||
function dictStr(value, list) {
|
||||
const item = list.find(v => v.dictValue === value)
|
||||
return item ? item.dictLabel : value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
|
||||
.search-input {
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
height: 66rpx !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: 10rpx;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.filter-panel-content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.filter-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin: 32rpx 0 24rpx 0;
|
||||
color: #303133;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.state-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
|
||||
.state-item {
|
||||
padding: 16rpx 32rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
|
||||
&.active {
|
||||
background-color: #667eea;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
padding: 24rpx 32rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
.btn-reset,
|
||||
.btn-confirm {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
text {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
background-color: #f5f5f5;
|
||||
color: #909399;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 10rpx 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.card-name-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
|
||||
.card-name {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&.status-normal {
|
||||
background-color: rgba(82, 196, 26, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
background-color: rgba(255, 77, 79, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 0;
|
||||
|
||||
.info-item {
|
||||
flex: 0 0 calc(50% - 12rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
min-width: 0;
|
||||
margin-bottom: -5rpx;
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16rpx 24rpx 24rpx;
|
||||
gap: 8rpx;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4rpx;
|
||||
padding: 0 14rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
color: #667eea;
|
||||
border: 1rpx solid rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: rgba(245, 87, 108, 0.1);
|
||||
color: #f5576c;
|
||||
border: 1rpx solid rgba(245, 87, 108, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -247,6 +247,11 @@ function dictStr(value, list) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
@@ -25,22 +25,22 @@
|
||||
import { ref } from "vue";
|
||||
|
||||
const systemGridList = ref([
|
||||
{ path: '/pages/system/user/index', text: '用户管理', icon: 'person', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
||||
{ path: '/pages_mine/pages/system/user/list', text: '用户管理', icon: 'person', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
||||
{ path: '/pages/system/role/index', text: '角色管理', icon: 'staff', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
|
||||
{ path: '/pages/system/menu/index', text: '菜单管理', icon: 'list', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
|
||||
{ path: '/pages/system/dept/index', text: '部门管理', icon: 'chat', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
|
||||
{ path: '/pages/system/post/index', text: '岗位管理', icon: 'contact', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)' },
|
||||
{ path: '/pages_mine/pages/system/dept/list', text: '部门管理', icon: 'chat', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
|
||||
{ path: '/pages_mine/pages/system/post/list', text: '岗位管理', icon: 'contact', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)' },
|
||||
{ path: '/pages_mine/pages/system/dict/list', text: '字典管理', icon: 'bars', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)' },
|
||||
{ path: '/pages/system/config/index', text: '参数设置', icon: 'gear', color: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)' },
|
||||
{ path: '/pages/system/notice/index', text: '通知公告', icon: 'notification', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)' },
|
||||
{ path: '/pages/system/job/index', text: '定时任务', icon: 'calendar', color: 'linear-gradient(135deg, #6366f1 0%, #a855f7 100%)' },
|
||||
{ path: '/pages/system/log/operlog/index', text: '操作日志', icon: 'compose', color: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)' },
|
||||
{ path: '/pages/system/log/logininfor/index', text: '登录日志', icon: 'eye', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)' }
|
||||
{ path: '/pages_mine/pages/system/logininfor/list', text: '登录日志', icon: 'eye', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)' }
|
||||
])
|
||||
|
||||
function navigateTo(path) {
|
||||
// 字典管理已开发完成,可以跳转
|
||||
if (path === '/pages_mine/pages/system/dict/list') {
|
||||
// 字典管理、登录日志、用户管理、岗位管理、部门管理已开发完成,可以跳转
|
||||
if (path === '/pages_mine/pages/system/dict/list' || path === '/pages_mine/pages/system/logininfor/list' || path === '/pages_mine/pages/system/user/list' || path === '/pages_mine/pages/system/post/list' || path === '/pages_mine/pages/system/dept/list') {
|
||||
uni.navigateTo({
|
||||
url: path
|
||||
});
|
||||
|
||||
498
src/pages_mine/pages/system/logininfor/list.vue
Normal file
498
src/pages_mine/pages/system/logininfor/list.vue
Normal file
@@ -0,0 +1,498 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.userName" border="false" placeholder="请输入用户名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
</u--input>
|
||||
<view class="filter-btn" @click="filterPanel = !filterPanel">
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
<view class="filter-title">登录地址</view>
|
||||
<u--input v-model="queryParams.ipaddr" placeholder="请输入登录地址" border="surround"></u--input>
|
||||
|
||||
<view class="filter-title">状态</view>
|
||||
<view class="state-list">
|
||||
<view v-for="item in statusList" :key="item.dictValue" class="state-item"
|
||||
:class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-title">登录时间</view>
|
||||
<view class="date-range">
|
||||
<u--input v-model="dateRange[0]" placeholder="开始日期" border="surround" disabled
|
||||
disabledColor="#ffffff" @click="showStartDate = true"></u--input>
|
||||
<text style="margin: 0 16rpx;">至</text>
|
||||
<u--input v-model="dateRange[1]" placeholder="结束日期" border="surround" disabled
|
||||
disabledColor="#ffffff" @click="showEndDate = true"></u--input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn-reset" @click="resetQuery()">
|
||||
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||
<text>重置</text>
|
||||
</view>
|
||||
<view class="btn-confirm" @click="searchSubmit()">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||
<text>确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="person" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.userName }}</text><text class="card-msg" v-if="item.msg">{{ item.msg }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-section">
|
||||
<view class="status-tag" :class="item.status === '0' ? 'status-normal' : 'status-disabled'">
|
||||
{{ item.status === '0' ? '成功' : '失败' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<view class="info-item">
|
||||
<text class="info-label">登录地址</text>
|
||||
<text class="info-value">{{ item.ipaddr || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">登录时间</text>
|
||||
<text class="info-value">{{ item.accessTime || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<view></view>
|
||||
<u-loadmore :status="loadStatus" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
|
||||
</u-list>
|
||||
<u-datetime-picker :show="showStartDate" v-model="startDateTime" mode="datetime"
|
||||
@confirm="confirmStartDate" @cancel="showStartDate = false"></u-datetime-picker>
|
||||
<u-datetime-picker :show="showEndDate" v-model="endDateTime" mode="datetime"
|
||||
@confirm="confirmEndDate" @cancel="showEndDate = false"></u-datetime-picker>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||
import { list } from '@/api/system/logininfor'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const windowHeight = ref(uni.getSystemInfoSync().windowHeight)
|
||||
const filterPanel = ref(false)
|
||||
const listData = ref([])
|
||||
const statusList = ref([])
|
||||
const dateRange = ref(['', ''])
|
||||
const showStartDate = ref(false)
|
||||
const showEndDate = ref(false)
|
||||
const startDateTime = ref(Date.now())
|
||||
const endDateTime = ref(Date.now())
|
||||
const loadStatus = ref('loadmore')
|
||||
|
||||
const queryParams = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
userName: '',
|
||||
ipaddr: '',
|
||||
status: '',
|
||||
params: {
|
||||
beginTime: '',
|
||||
endTime: ''
|
||||
}
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
getDict()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
queryParams.pageNum = 1
|
||||
listData.value = []
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
})
|
||||
|
||||
function getDict() {
|
||||
getDicts('sys_common_status').then(res => {
|
||||
statusList.value = res.data.map(item => ({
|
||||
...item,
|
||||
selected: false
|
||||
}))
|
||||
})
|
||||
}
|
||||
|
||||
function getList() {
|
||||
loadStatus.value = 'loading'
|
||||
const params = {
|
||||
pageNum: queryParams.pageNum,
|
||||
pageSize: queryParams.pageSize,
|
||||
userName: queryParams.userName,
|
||||
ipaddr: queryParams.ipaddr,
|
||||
status: queryParams.status
|
||||
}
|
||||
|
||||
if (dateRange.value[0]) {
|
||||
params['params[beginTime]'] = dateRange.value[0]
|
||||
}
|
||||
if (dateRange.value[1]) {
|
||||
params['params[endTime]'] = dateRange.value[1]
|
||||
}
|
||||
|
||||
list(params).then(res => {
|
||||
listData.value = listData.value.concat(res.rows)
|
||||
if (listData.value.length < res.total) {
|
||||
loadStatus.value = 'loadmore'
|
||||
} else {
|
||||
loadStatus.value = 'nomore'
|
||||
}
|
||||
}).catch(() => {
|
||||
loadStatus.value = 'nomore'
|
||||
})
|
||||
}
|
||||
|
||||
function selectStatus(item) {
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
item.selected = !item.selected
|
||||
queryParams.status = item.dictValue
|
||||
}
|
||||
|
||||
function searchBlur() {
|
||||
queryParams.pageNum = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
function searchSubmit() {
|
||||
queryParams.pageNum = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
filterPanel.value = false
|
||||
}
|
||||
|
||||
function resetQuery() {
|
||||
queryParams.pageNum = 1
|
||||
queryParams.userName = ''
|
||||
queryParams.ipaddr = ''
|
||||
queryParams.status = ''
|
||||
dateRange.value = ['', '']
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
listData.value = []
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
function loadmore() {
|
||||
queryParams.pageNum += 1
|
||||
if (loadStatus.value == 'loadmore') {
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
function confirmStartDate(e) {
|
||||
dateRange.value[0] = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
|
||||
showStartDate.value = false
|
||||
}
|
||||
|
||||
function confirmEndDate(e) {
|
||||
dateRange.value[1] = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
|
||||
showEndDate.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
|
||||
.search-input {
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
height: 66rpx !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.filter-panel-content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.filter-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin: 32rpx 0 24rpx 0;
|
||||
color: #303133;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.state-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
|
||||
.state-item {
|
||||
padding: 16rpx 32rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
|
||||
&.active {
|
||||
background-color: #667eea;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
padding: 24rpx 32rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
.btn-reset,
|
||||
.btn-confirm {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
text {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
background-color: #f5f5f5;
|
||||
color: #909399;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 10rpx 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.card-name-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.card-name {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-msg {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.status-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&.status-normal {
|
||||
background-color: rgba(82, 196, 26, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
background-color: rgba(255, 77, 79, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 0;
|
||||
|
||||
.info-item {
|
||||
flex: 0 0 calc(50% - 12rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
min-width: 0;
|
||||
margin-bottom: -5rpx;
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
203
src/pages_mine/pages/system/post/addEdit.vue
Normal file
203
src/pages_mine/pages/system/post/addEdit.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="container" style="paddingBottom:1rpx;">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
:title="title"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
<u-form-item label="岗位名称" prop="postName" required>
|
||||
<u--input v-model="form.postName" placeholder="请输入岗位名称" maxlength="30"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="岗位编码" prop="postCode" required>
|
||||
<u--input v-model="form.postCode" placeholder="请输入岗位编码" maxlength="30"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="岗位排序">
|
||||
<u-number-box v-model="form.postSort" :min="0" :max="999" inputAlign="right"></u-number-box>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
|
||||
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<template #right>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" border="none" autoHeight inputAlign="right" count
|
||||
maxlength="500" style="padding:18rpx 0;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-picker itemHeight="88" :show="showStatusPicker" :columns="statusList" keyName="dictLabel" @cancel="showStatusPicker = false"
|
||||
@confirm="handleStatusConfirm"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||
import { getPost, addPost, updatePost } from '@/api/system/post'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const statusList = ref([])
|
||||
const title = ref('添加岗位')
|
||||
const showStatusPicker = ref(false)
|
||||
const statusName = ref('')
|
||||
|
||||
const form = reactive({
|
||||
postId: undefined,
|
||||
postName: undefined,
|
||||
postCode: undefined,
|
||||
postSort: 0,
|
||||
status: '0',
|
||||
remark: undefined
|
||||
})
|
||||
|
||||
const rules = {
|
||||
postName: [
|
||||
{ required: true, message: '岗位名称不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
postCode: [
|
||||
{ required: true, message: '岗位编码不能为空', trigger: ['blur', 'change'] }
|
||||
]
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = [res.data]
|
||||
})
|
||||
|
||||
if (option.id) {
|
||||
title.value = '修改岗位'
|
||||
getDetail(option.id)
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
updateStatusName()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
|
||||
// 获取详情
|
||||
function getDetail(id) {
|
||||
getPost(id).then(res => {
|
||||
Object.assign(form, res.data)
|
||||
updateStatusName()
|
||||
})
|
||||
}
|
||||
|
||||
// 更新状态显示名称
|
||||
function updateStatusName() {
|
||||
if (statusList.value[0]) {
|
||||
const item = statusList.value[0].find(v => v.dictValue === form.status)
|
||||
statusName.value = item ? item.dictLabel : ''
|
||||
}
|
||||
}
|
||||
|
||||
// 状态选择确认
|
||||
function handleStatusConfirm(e) {
|
||||
form.status = e.value[0].dictValue
|
||||
statusName.value = e.value[0].dictLabel
|
||||
showStatusPicker.value = false
|
||||
}
|
||||
|
||||
// 提交
|
||||
function submit() {
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
console.log('提交的表单数据:', form)
|
||||
if (form.postId) {
|
||||
updatePost(form).then(() => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '修改成功', complete() {
|
||||
uni.navigateTo({ url: `/pages_mine/pages/system/post/list` })
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
addPost(form).then(() => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '新增成功', complete() {
|
||||
uni.navigateTo({ url: `/pages_mine/pages/system/post/list` })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
proxy.$refs['uToast'].show({
|
||||
type: 'error',
|
||||
message: '请填写完整信息'
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
margin: 24rpx;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.form-btn {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 24rpx !important;
|
||||
height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
|
||||
.form-btn .u-button__text {
|
||||
font-size: 30rpx !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 2rpx !important;
|
||||
}
|
||||
</style>
|
||||
261
src/pages_mine/pages/system/post/details.vue
Normal file
261
src/pages_mine/pages/system/post/details.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
title="岗位详情"
|
||||
>
|
||||
</u-navbar>
|
||||
|
||||
<view class="detail-card">
|
||||
<view class="card-header">
|
||||
<view class="header-icon">
|
||||
<uni-icons type="contact" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<text class="card-name">{{ detailInfo.postName }}<text class="card-code" v-if="detailInfo.postCode">({{ detailInfo.postCode }})</text></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-section">
|
||||
<view class="section-title">
|
||||
<view class="title-icon"></view>
|
||||
<text>基本信息</text>
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="list-item">
|
||||
<text class="item-label">岗位编号</text>
|
||||
<text class="item-value">{{ detailInfo.postId }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">岗位名称</text>
|
||||
<text class="item-value">{{ detailInfo.postName }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">岗位编码</text>
|
||||
<text class="item-value">{{ detailInfo.postCode }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">岗位排序</text>
|
||||
<text class="item-value">{{ detailInfo.postSort }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">状态</text>
|
||||
<text class="item-value" :class="getStatusClass(detailInfo.status)">{{ statusText }}</text>
|
||||
</view>
|
||||
<view class="list-item" v-if="detailInfo.createTime">
|
||||
<text class="item-label">创建时间</text>
|
||||
<text class="item-value">{{ detailInfo.createTime }}</text>
|
||||
</view>
|
||||
<view class="list-item" v-if="detailInfo.updateTime">
|
||||
<text class="item-label">更新时间</text>
|
||||
<text class="item-value">{{ detailInfo.updateTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-section" v-if="detailInfo.remark">
|
||||
<view class="section-title">
|
||||
<view class="title-icon"></view>
|
||||
<text>备注</text>
|
||||
</view>
|
||||
<view class="remark-content">
|
||||
<text>{{ detailInfo.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, toRefs, computed } from 'vue'
|
||||
import { getPost } from '@/api/system/post'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const id = ref('')
|
||||
const statusList = ref([])
|
||||
const data = reactive({
|
||||
detailInfo: {}
|
||||
})
|
||||
const { detailInfo } = toRefs(data)
|
||||
|
||||
const statusText = computed(() => {
|
||||
if (statusList.value.length > 0) {
|
||||
const item = statusList.value.find(v => v.dictValue === detailInfo.value.status)
|
||||
return item ? item.dictLabel : ''
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
function getStatusClass(status) {
|
||||
const statusStr = String(status)
|
||||
if (statusStr === '0') {
|
||||
return 'status-normal'
|
||||
}
|
||||
if (statusStr === '1') {
|
||||
return 'status-disabled'
|
||||
}
|
||||
return 'status-default'
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
id.value = option.id
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = res.data
|
||||
})
|
||||
getInfo()
|
||||
})
|
||||
|
||||
function getInfo() {
|
||||
getPost(id.value).then(res => {
|
||||
detailInfo.value = res.data
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
margin: 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 20rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.header-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.card-name {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.card-code {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.title-icon {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #2c3e50;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
color: #7f8c8d;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
color: #2c3e50;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
|
||||
&.status-normal {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.status-default {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remark-content {
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
|
||||
text {
|
||||
color: #2c3e50;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
587
src/pages_mine/pages/system/post/list.vue
Normal file
587
src/pages_mine/pages/system/post/list.vue
Normal file
@@ -0,0 +1,587 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.postName" border="false" placeholder="请输入岗位名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
</u--input>
|
||||
<view class="filter-btn" @click="filterPanel = !filterPanel">
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
<view class="add-btn" @click="handleAdd()">
|
||||
<uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
|
||||
<text>新增</text>
|
||||
</view>
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
<view class="filter-title">岗位编码</view>
|
||||
<u--input v-model="queryParams.postCode" placeholder="请输入岗位编码" border="surround"></u--input>
|
||||
|
||||
<view class="filter-title">状态</view>
|
||||
<view class="state-list">
|
||||
<view v-for="item in statusList" :key="item.dictValue" class="state-item"
|
||||
:class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn-reset" @click="resetQuery()">
|
||||
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||
<text>重置</text>
|
||||
</view>
|
||||
<view class="btn-confirm" @click="searchSubmit()">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||
<text>确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="contact" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.postName }}</text><text class="card-code" v-if="item.postCode">({{ item.postCode }})</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="balance-section">
|
||||
<view class="status-tag" :class="item.status === '0' ? 'status-normal' : 'status-disabled'">
|
||||
{{ dictStr(item.status, statusList) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<view class="info-item" v-if="item.postSort !== undefined">
|
||||
<text class="info-label">岗位排序</text>
|
||||
<text class="info-value">{{ item.postSort }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.createTime">
|
||||
<text class="info-label">创建时间</text>
|
||||
<text class="info-value">{{ item.createTime }}</text>
|
||||
</view>
|
||||
<view class="info-item info-item-full" v-if="item.remark">
|
||||
<text class="info-label">备注</text>
|
||||
<text class="info-value">{{ item.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="operate" @click.stop>
|
||||
<view class="btn-edit" @click="handleUpdate(item)">
|
||||
<uni-icons type="compose" size="16" color="#667eea"></uni-icons>
|
||||
<text>修改</text>
|
||||
</view>
|
||||
<view class="btn-delete" @click="handleDelete(item)">
|
||||
<uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
|
||||
<text>删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<view></view>
|
||||
<u-loadmore :status="loadStatus" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
|
||||
</u-list>
|
||||
</view>
|
||||
<suspend></suspend>
|
||||
<refresh></refresh>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { listPost, delPost } from '@/api/system/post'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import modal from '@/plugins/modal'
|
||||
|
||||
const pageNum = ref(1)
|
||||
const listData = ref([])
|
||||
const isShow = ref(false)
|
||||
const loadStatus = ref('loadmore')
|
||||
const statusList = ref([])
|
||||
const filterPanel = ref(false)
|
||||
|
||||
const queryParams = reactive({
|
||||
postName: undefined,
|
||||
postCode: undefined,
|
||||
status: undefined
|
||||
})
|
||||
|
||||
const windowHeight = computed(() => {
|
||||
return uni.getSystemInfoSync().windowHeight - 50
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = res.data.map(item => ({
|
||||
...item,
|
||||
selected: false
|
||||
}))
|
||||
})
|
||||
getList()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isShow.value) {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
isShow.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// 获取列表
|
||||
function getList() {
|
||||
loadStatus.value = 'loading'
|
||||
listPost({ pageSize: 10, pageNum: pageNum.value, ...queryParams }).then(res => {
|
||||
listData.value = listData.value.concat(res.rows)
|
||||
if (listData.value.length < res.total) {
|
||||
loadStatus.value = 'loadmore'
|
||||
} else {
|
||||
loadStatus.value = 'nomore'
|
||||
}
|
||||
}).catch(() => {
|
||||
loadStatus.value = 'nomore'
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索框失焦
|
||||
function searchBlur() {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
// 选择状态
|
||||
function selectStatus(item) {
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
item.selected = !item.selected
|
||||
queryParams.status = item.dictValue
|
||||
}
|
||||
|
||||
// 搜索提交
|
||||
function searchSubmit() {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
function resetQuery() {
|
||||
queryParams.postName = undefined
|
||||
queryParams.postCode = undefined
|
||||
queryParams.status = undefined
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
// 上拉加载
|
||||
function loadmore() {
|
||||
pageNum.value += 1
|
||||
if (loadStatus.value == 'loadmore') {
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
// 新增
|
||||
function handleAdd() {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: '/pages_mine/pages/system/post/addEdit'
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function handleUpdate(row) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/post/addEdit?id=${row.postId}`
|
||||
})
|
||||
}
|
||||
|
||||
// 删除
|
||||
function handleDelete(row) {
|
||||
modal.confirm('是否确认删除岗位编号为"' + row.postId + '"的数据项？').then(() => {
|
||||
return delPost(row.postId)
|
||||
}).then(() => {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
modal.msgSuccess('删除成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 进入详情
|
||||
function enterDetails(row) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/post/details?id=${row.postId}`
|
||||
})
|
||||
}
|
||||
|
||||
// 字典翻译
|
||||
function dictStr(value, list) {
|
||||
const item = list.find(v => v.dictValue === value)
|
||||
return item ? item.dictLabel : value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
|
||||
.search-input {
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
height: 66rpx !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: 10rpx;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.filter-panel-content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.filter-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin: 32rpx 0 24rpx 0;
|
||||
color: #303133;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.state-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
|
||||
.state-item {
|
||||
padding: 16rpx 32rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
|
||||
&.active {
|
||||
background-color: #667eea;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
padding: 24rpx 32rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
.btn-reset,
|
||||
.btn-confirm {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
text {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
background-color: #f5f5f5;
|
||||
color: #909399;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 10rpx 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.card-name-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
|
||||
.card-name {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-code {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&.status-normal {
|
||||
background-color: rgba(82, 196, 26, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
background-color: rgba(255, 77, 79, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 0;
|
||||
|
||||
.info-item {
|
||||
flex: 0 0 calc(50% - 12rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
min-width: 0;
|
||||
margin-bottom: -5rpx;
|
||||
|
||||
&.info-item-full {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&:not(.info-item-full) .info-value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16rpx 24rpx 24rpx;
|
||||
gap: 8rpx;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4rpx;
|
||||
padding: 0 14rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
color: #667eea;
|
||||
border: 1rpx solid rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: rgba(245, 87, 108, 0.1);
|
||||
color: #f5576c;
|
||||
border: 1rpx solid rgba(245, 87, 108, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
267
src/pages_mine/pages/system/user/addEdit.vue
Normal file
267
src/pages_mine/pages/system/user/addEdit.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<view class="container" style="paddingBottom:1rpx;">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
:title="title"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
<u-form-item label="用户昵称" prop="nickName" required>
|
||||
<u--input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="用户名称" prop="userName" required v-if="!form.userId">
|
||||
<u--input v-model="form.userName" placeholder="请输入用户名称" maxlength="30"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="用户密码" prop="password" required v-if="!form.userId">
|
||||
<u--input v-model="form.password" type="password" placeholder="请输入用户密码" maxlength="20"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="手机号码" prop="phonenumber" required>
|
||||
<u--input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="邮箱" prop="email">
|
||||
<u--input v-model="form.email" placeholder="请输入邮箱" maxlength="50"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="用户性别" prop="sexName" @click="showSexPicker = true">
|
||||
<u--input v-model="sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<template #right>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
|
||||
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<template #right>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" border="none" autoHeight inputAlign="right" count
|
||||
maxlength="500" style="padding:18rpx 0;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-picker itemHeight="88" :show="showSexPicker" :columns="sexList" keyName="dictLabel" @cancel="showSexPicker = false"
|
||||
@confirm="handleSexConfirm"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showStatusPicker" :columns="statusList" keyName="dictLabel" @cancel="showStatusPicker = false"
|
||||
@confirm="handleStatusConfirm"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||
import { getUser, addUser, updateUser } from '@/api/system/user'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const statusList = ref([])
|
||||
const sexList = ref([])
|
||||
const title = ref('添加用户')
|
||||
const showStatusPicker = ref(false)
|
||||
const showSexPicker = ref(false)
|
||||
const statusName = ref('')
|
||||
const sexName = ref('')
|
||||
|
||||
const form = reactive({
|
||||
userId: undefined,
|
||||
nickName: undefined,
|
||||
userName: undefined,
|
||||
password: undefined,
|
||||
phonenumber: undefined,
|
||||
email: undefined,
|
||||
sex: '0',
|
||||
status: '0',
|
||||
remark: undefined
|
||||
})
|
||||
|
||||
const rules = {
|
||||
nickName: [
|
||||
{ required: true, message: '用户昵称不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
userName: [
|
||||
{ required: true, message: '用户名称不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '用户密码不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
phonenumber: [
|
||||
{ required: true, message: '手机号码不能为空', trigger: ['blur', 'change'] },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
|
||||
],
|
||||
email: [
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
|
||||
]
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = [res.data]
|
||||
})
|
||||
|
||||
getDicts('sys_user_sex').then(res => {
|
||||
sexList.value = [res.data]
|
||||
})
|
||||
|
||||
if (option.id) {
|
||||
title.value = '修改用户'
|
||||
getDetail(option.id)
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
updateStatusName()
|
||||
updateSexName()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
|
||||
// 获取详情
|
||||
function getDetail(id) {
|
||||
getUser(id).then(res => {
|
||||
Object.assign(form, res.data)
|
||||
updateStatusName()
|
||||
updateSexName()
|
||||
})
|
||||
}
|
||||
|
||||
// 更新状态显示名称
|
||||
function updateStatusName() {
|
||||
if (statusList.value[0]) {
|
||||
const item = statusList.value[0].find(v => v.dictValue === form.status)
|
||||
statusName.value = item ? item.dictLabel : ''
|
||||
}
|
||||
}
|
||||
|
||||
// 更新性别显示名称
|
||||
function updateSexName() {
|
||||
if (sexList.value[0]) {
|
||||
const item = sexList.value[0].find(v => v.dictValue === form.sex)
|
||||
sexName.value = item ? item.dictLabel : ''
|
||||
}
|
||||
}
|
||||
|
||||
// 状态选择确认
|
||||
function handleStatusConfirm(e) {
|
||||
form.status = e.value[0].dictValue
|
||||
statusName.value = e.value[0].dictLabel
|
||||
showStatusPicker.value = false
|
||||
}
|
||||
|
||||
// 性别选择确认
|
||||
function handleSexConfirm(e) {
|
||||
form.sex = e.value[0].dictValue
|
||||
sexName.value = e.value[0].dictLabel
|
||||
showSexPicker.value = false
|
||||
}
|
||||
|
||||
// 提交
|
||||
function submit() {
|
||||
console.log('submit 被调用')
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
console.log('验证通过', form.userId)
|
||||
if (form.userId) {
|
||||
updateUser(form).then(() => {
|
||||
console.log('修改成功,将跳转')
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '修改成功', complete() {
|
||||
console.log('complete 被调用,执行跳转')
|
||||
uni.navigateTo({ url: `/pages_mine/pages/system/user/list` })
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
addUser(form).then(() => {
|
||||
console.log('新增成功,将跳转')
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '新增成功', complete() {
|
||||
console.log('complete 被调用,执行跳转')
|
||||
uni.navigateTo({ url: `/pages_mine/pages/system/user/list` })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
console.log('验证失败')
|
||||
proxy.$refs['uToast'].show({
|
||||
type: 'error',
|
||||
message: '请填写完整信息'
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
margin: 24rpx;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.form-btn {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 24rpx !important;
|
||||
height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
|
||||
.form-btn .u-button__text {
|
||||
font-size: 30rpx !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 2rpx !important;
|
||||
}
|
||||
</style>
|
||||
162
src/pages_mine/pages/system/user/details.vue
Normal file
162
src/pages_mine/pages/system/user/details.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar leftIconSize="40rpx" leftIconColor="#333333" title="用户详情"></u-navbar>
|
||||
<view class="section">
|
||||
<view class="section-title">基本信息</view>
|
||||
<view class="detail-view">
|
||||
<view class="detail-item">
|
||||
<text class="label">用户昵称</text>
|
||||
<text class="value">{{ info.nickName || '-' }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">用户名称</text>
|
||||
<text class="value">{{ info.userName || '-' }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">手机号码</text>
|
||||
<text class="value">{{ info.phonenumber || '-' }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">邮箱</text>
|
||||
<text class="value">{{ info.email || '-' }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">用户性别</text>
|
||||
<text class="value">{{ sexStr || '-' }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">部门</text>
|
||||
<text class="value">{{ info.dept && info.dept.deptName || '-' }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">状态</text>
|
||||
<text class="value">
|
||||
<u-tag :text="statusStr" :type="info.status === '0' ? 'success' : 'error'" plain size="mini"></u-tag>
|
||||
</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">创建时间</text>
|
||||
<text class="value">{{ info.createTime || '-' }}</text>
|
||||
</view>
|
||||
<view class="detail-item detail-item-full" v-if="info.remark">
|
||||
<text class="label">备注</text>
|
||||
<text class="value">{{ info.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { getUser } from '@/api/system/user'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const info = ref({})
|
||||
const statusList = ref([])
|
||||
const sexList = ref([])
|
||||
|
||||
const statusStr = computed(() => {
|
||||
const item = statusList.value.find(v => v.dictValue === info.value.status)
|
||||
return item ? item.dictLabel : ''
|
||||
})
|
||||
|
||||
const sexStr = computed(() => {
|
||||
const item = sexList.value.find(v => v.dictValue === info.value.sex)
|
||||
return item ? item.dictLabel : ''
|
||||
})
|
||||
|
||||
onLoad((option) => {
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = res.data
|
||||
})
|
||||
|
||||
getDicts('sys_user_sex').then(res => {
|
||||
sexList.value = res.data
|
||||
})
|
||||
|
||||
if (option.id) {
|
||||
getDetail(option.id)
|
||||
}
|
||||
})
|
||||
|
||||
function getDetail(id) {
|
||||
getUser(id).then(res => {
|
||||
info.value = res.data
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 24rpx;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-view {
|
||||
padding: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.detail-item-full {
|
||||
flex-direction: column;
|
||||
|
||||
.value {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 160rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
598
src/pages_mine/pages/system/user/list.vue
Normal file
598
src/pages_mine/pages/system/user/list.vue
Normal file
@@ -0,0 +1,598 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.userName" border="false" placeholder="请输入用户名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
</u--input>
|
||||
<view class="filter-btn" @click="filterPanel = !filterPanel">
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
<view class="add-btn" @click="handleAdd()">
|
||||
<uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
|
||||
<text>新增</text>
|
||||
</view>
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
<view class="filter-title">手机号码</view>
|
||||
<u--input v-model="queryParams.phonenumber" placeholder="请输入手机号码" border="surround"></u--input>
|
||||
|
||||
<view class="filter-title">状态</view>
|
||||
<view class="state-list">
|
||||
<view v-for="item in statusList" :key="item.dictValue" class="state-item"
|
||||
:class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn-reset" @click="resetQuery()">
|
||||
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||
<text>重置</text>
|
||||
</view>
|
||||
<view class="btn-confirm" @click="searchSubmit()">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||
<text>确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="person" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.nickName }}</text><text class="card-username" v-if="item.userName">({{ item.userName }})</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="balance-section">
|
||||
<view class="status-tag" :class="item.status === '0' ? 'status-normal' : 'status-disabled'">
|
||||
{{ dictStr(item.status, statusList) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<view class="info-item" v-if="item.phonenumber">
|
||||
<text class="info-label">手机号码</text>
|
||||
<text class="info-value">{{ item.phonenumber }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.email">
|
||||
<text class="info-label">邮箱</text>
|
||||
<text class="info-value">{{ item.email }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.dept && item.dept.deptName">
|
||||
<text class="info-label">部门</text>
|
||||
<text class="info-value">{{ item.dept.deptName }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.createTime">
|
||||
<text class="info-label">创建时间</text>
|
||||
<text class="info-value">{{ item.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="operate" @click.stop>
|
||||
<view class="btn-edit" @click="handleUpdate(item)">
|
||||
<uni-icons type="compose" size="16" color="#667eea"></uni-icons>
|
||||
<text>修改</text>
|
||||
</view>
|
||||
<view class="btn-delete" @click="handleDelete(item)" v-if="item.userId !== 1">
|
||||
<uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
|
||||
<text>删除</text>
|
||||
</view>
|
||||
<view class="btn-reset" @click="handleResetPwd(item)" v-if="item.userId !== 1">
|
||||
<uni-icons type="locked" size="16" color="#e6a23c"></uni-icons>
|
||||
<text>重置密码</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<view></view>
|
||||
<u-loadmore :status="loadStatus" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
|
||||
</u-list>
|
||||
</view>
|
||||
<suspend></suspend>
|
||||
<refresh></refresh>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, getCurrentInstance } from 'vue'
|
||||
import { listUser, delUser, resetUserPwd, changeUserStatus } from '@/api/system/user'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import modal from '@/plugins/modal'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const pageNum = ref(1)
|
||||
const listData = ref([])
|
||||
const isShow = ref(false)
|
||||
const loadStatus = ref('loadmore')
|
||||
const statusList = ref([])
|
||||
const filterPanel = ref(false)
|
||||
|
||||
const queryParams = reactive({
|
||||
userName: undefined,
|
||||
phonenumber: undefined,
|
||||
status: undefined
|
||||
})
|
||||
|
||||
const windowHeight = computed(() => {
|
||||
return uni.getSystemInfoSync().windowHeight - 50
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = res.data.map(item => ({
|
||||
...item,
|
||||
selected: false
|
||||
}))
|
||||
})
|
||||
getList()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isShow.value) {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
isShow.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// 获取列表
|
||||
function getList() {
|
||||
loadStatus.value = 'loading'
|
||||
listUser({ pageSize: 10, pageNum: pageNum.value, ...queryParams }).then(res => {
|
||||
listData.value = listData.value.concat(res.rows)
|
||||
if (listData.value.length < res.total) {
|
||||
loadStatus.value = 'loadmore'
|
||||
} else {
|
||||
loadStatus.value = 'nomore'
|
||||
}
|
||||
}).catch(() => {
|
||||
loadStatus.value = 'nomore'
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索框失焦
|
||||
function searchBlur() {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
// 选择状态
|
||||
function selectStatus(item) {
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
item.selected = !item.selected
|
||||
queryParams.status = item.dictValue
|
||||
}
|
||||
|
||||
// 搜索提交
|
||||
function searchSubmit() {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
function resetQuery() {
|
||||
queryParams.userName = undefined
|
||||
queryParams.phonenumber = undefined
|
||||
queryParams.status = undefined
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
// 上拉加载
|
||||
function loadmore() {
|
||||
pageNum.value += 1
|
||||
if (loadStatus.value == 'loadmore') {
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
// 新增
|
||||
function handleAdd() {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: '/pages_mine/pages/system/user/addEdit'
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function handleUpdate(row) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/user/addEdit?id=${row.userId}`
|
||||
})
|
||||
}
|
||||
|
||||
// 删除
|
||||
function handleDelete(row) {
|
||||
modal.confirm('是否确认删除用户"' + row.userName + '"？').then(() => {
|
||||
return delUser(row.userId)
|
||||
}).then(() => {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
modal.msgSuccess('删除成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 重置密码
|
||||
function handleResetPwd(row) {
|
||||
modal.prompt('请输入"' + row.userName + '"的新密码').then(({ value }) => {
|
||||
resetUserPwd(row.userId, value).then(() => {
|
||||
modal.msgSuccess('修改成功，新密码是：' + value)
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 进入详情
|
||||
function enterDetails(row) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/user/details?id=${row.userId}`
|
||||
})
|
||||
}
|
||||
|
||||
// 字典翻译
|
||||
function dictStr(value, list) {
|
||||
const item = list.find(v => v.dictValue === value)
|
||||
return item ? item.dictLabel : value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
|
||||
.search-input {
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
height: 66rpx !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: 10rpx;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.filter-panel-content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.filter-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin: 32rpx 0 24rpx 0;
|
||||
color: #303133;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.state-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
|
||||
.state-item {
|
||||
padding: 16rpx 32rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
|
||||
&.active {
|
||||
background-color: #667eea;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
padding: 24rpx 32rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
.btn-reset,
|
||||
.btn-confirm {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
text {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
background-color: #f5f5f5;
|
||||
color: #909399;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 10rpx 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.card-name-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.card-name {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-username {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&.status-normal {
|
||||
background-color: rgba(82, 196, 26, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
background-color: rgba(255, 77, 79, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 0;
|
||||
|
||||
.info-item {
|
||||
flex: 0 0 calc(50% - 12rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
min-width: 0;
|
||||
margin-bottom: -5rpx;
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16rpx 24rpx 24rpx;
|
||||
gap: 8rpx;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.btn-edit,
|
||||
.btn-delete,
|
||||
.btn-reset {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4rpx;
|
||||
padding: 0 14rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
color: #667eea;
|
||||
border: 1rpx solid rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: rgba(245, 87, 108, 0.1);
|
||||
color: #f5576c;
|
||||
border: 1rpx solid rgba(245, 87, 108, 0.3);
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
background: rgba(230, 162, 60, 0.1);
|
||||
color: #e6a23c;
|
||||
border: 1rpx solid rgba(230, 162, 60, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user