feat: 报修处理、派单;权限功能;关联管理账号;skill生成;

property-only-app
wx-jincw 2 months ago
parent fe87d62a23
commit 607199557a

@ -0,0 +1,192 @@
---
name: 权限功能开发
description: This skill should be used when developing permission-related features in the UniApp property management mini-program. It provides guidance on admin info fetching, permission checking, role validation, and integrating permission controls into components.
---
# 权限功能开发
物业小程序已集成权限管理功能,参考 PC 端 `admin/src/directive/permission` 实现。提供便捷的权限校验方式,用于控制组件或功能入口的显示隐藏。
## 相关文件
```
app/
├── api/
│ └── property.js # 管理员信息接口
├── config/
│ └── cache.js # 缓存常量
├── store/
│ ├── modules/
│ │ └── app.js # 状态管理
│ └── getters.js # 数据获取
├── utils/
│ └── auth/
│ └── permission.js # 权限校验工具
└── pages/users/login/index.vue # 登录页(已集成)
```
## 核心概念
### 管理员信息结构
```javascript
{
id: 1, // 管理员ID
account: "admin", // 账号
realName: "超管", // 真实姓名
roles: "1", // 角色标识
permissionsList: ["*:*:*"], // 权限列表
phone: "11111111111", // 手机号
status: true // 状态
}
```
### 权限标识规则
- `*:*:*` - 超管权限,拥有所有权限
- `system:user:add` - 系统管理-用户-新增
- `system:user:edit` - 系统管理-用户-编辑
## Store 使用
### Getters
```javascript
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters([
'adminInfo', // 管理员完整信息
'permissions', // 权限列表
'roles', // 角色列表
'isSuperAdmin' // 是否超管
])
}
};
```
### Actions
```javascript
// 获取管理员信息
this.$store.dispatch('ADMIN_INFO').then(res => console.log(res));
// 登录后自动获取(已在登录流程中集成)
this.$store.dispatch('LOGIN_ADMIN_INFO');
```
## 权限校验工具
文件位置:`app/utils/auth/permission.js`
### 引入方式
```javascript
import { checkPermi, checkRole, isSuperAdmin, getPermissions, getRoles, getAdminInfo } from '@/utils/auth/permission.js';
```
### 方法说明
| 方法 | 说明 | 示例 |
|------|------|------|
| `checkPermi(value)` | 权限校验 | `checkPermi('system:user:add')` |
| `checkRole(value)` | 角色校验 | `checkRole('admin')` |
| `isSuperAdmin()` | 判断超管 | `isSuperAdmin()` |
| `getPermissions()` | 获取权限列表 | `getPermissions()` |
| `getAdminInfo()` | 获取管理员信息 | `getAdminInfo()` |
## 使用示例
### 示例1v-if 控制显示
```vue
<template>
<button v-if="checkPermi('system:user:add')">添加用户</button>
<view v-if="checkRole('admin')">管理员专属区域</view>
</template>
<script>
import { checkPermi, checkRole } from '@/utils/auth/permission.js';
export default {
methods: {
addUser() {
if (!checkPermi('system:user:add')) {
uni.showToast({ title: '无操作权限', icon: 'none' });
return;
}
}
}
};
</script>
```
### 示例2computed 便捷调用
```vue
<template>
<button v-if="canAdd">添加用户</button>
<button v-if="canEdit">编辑</button>
</template>
<script>
import { checkPermi } from '@/utils/auth/permission.js';
export default {
computed: {
canAdd() { return checkPermi('system:user:add'); },
canEdit() { return checkPermi('system:user:edit'); }
}
};
</script>
```
### 示例3多个权限任一匹配
```vue
<button v-if="checkPermi(['system:user:add', 'system:user:edit'])">
新增或编辑
</button>
```
### 示例4权限指令封装
```vue
<template>
<button v-permission="'system:user:add'">添加</button>
</template>
<script>
import { permissionDirective } from '@/utils/auth/permission.js';
export default {
directives: {
permission: permissionDirective
}
};
</script>
```
## 与登录流程集成
登录成功后自动获取管理员信息(已在 `app/pages/users/login/index.vue` 集成):
```javascript
this.$store.commit("SETUID", data.uid);
getUserInfo().then(res => {
this.$store.commit("UPDATE_USERINFO", res.data);
this.$store.dispatch('LOGIN_ADMIN_INFO'); // ✅ 自动获取管理员信息
});
```
## 退出登录清理
退出登录时自动清理管理员信息(已在 `app/store/modules/app.js` 的 LOGOUT mutation 中集成)。
## 注意事项
1. **权限标识大小写敏感** - 权限标识严格区分大小写
2. **超管权限** - 拥有 `*:*:*` 权限的用户拥有所有权限
3. **登录检查** - 使用权限前确保用户已登录
4. **缓存持久化** - 管理员信息会缓存到本地Storage

@ -0,0 +1,431 @@
---
id: property-dev
name: 物业功能开发 Skill
description: UniApp 物业功能开发规范,包含接口定义、页面开发、样式规范等
tags: [uniapp, property, vue2, miniprogram]
version: 1.0.0
author: CodeBuddy
---
# 物业功能开发 Skill
## 项目概述
这是一个基于 UniApp 开发的物业管理小程序项目,兼容 H5 和微信小程序。项目位于 `app/` 目录下,采用 Vue 2 语法风格。
## 项目结构
```
app/
├── api/ # API 接口文件
│ └── property.js # 物业相关接口
├── pages/
│ └── supply_chain/ # 物业管理功能页面
│ ├── day_menu/ # 每日菜单
│ ├── repair/ # 报修管理
│ ├── complaint/ # 投诉建议
│ ├── stock/ # 物资领用
│ ├── wish_menu/ # 祈愿菜单
│ └── ...
├── utils/
│ └── request.js # 请求封装
├── config/
│ └── app.js # 全局配置
└── components/ # 公共组件
```
## 技术规范
### 1. 接口定义规范
接口文件位于 `app/api/property.js`,统一使用 `request` 对象:
```javascript
import request from '@/utils/request.js';
// GET 请求示例
export function listSomething(params) {
return request.get(
'autogencode/xxx/list',
params,
{ useAdminUrl: true }
);
}
// POST 请求示例
export function createSomething(data) {
return request.post(
'autogencode/xxx/save',
data,
{ useAdminUrl: true }
);
}
```
**规范要点:**
- 所有物业接口使用 `useAdminUrl: true`,前缀为 `autogencode/`
- 列表查询用 `list` 后缀
- 新增用 `save` 后缀
- 删除用 `delete` 后缀
- 详情用 `info/{id}` 后缀
### 2. 页面开发规范
#### 2.1 页面基础结构
```vue
<template>
<z-paging ref="paging" v-model="records" @query="queryList">
<template #top>
<!-- 顶部区域 -->
</template>
<!-- 内容区域 -->
<template #bottom>
<!-- 底部区域 -->
</template>
</z-paging>
</template>
<script>
import { someApi } from '@/api/property.js';
export default {
dicts: ['dict_key'], // 使用的字典
data() {
return {
records: [],
// 其他数据
};
},
onLoad() {
// 页面加载
},
methods: {
async queryList(pageNo, pageSize) {
try {
const res = await someApi({ pageNo, pageSize });
this.$refs.paging.complete(res?.data?.list || []);
} catch (e) {
this.$refs.paging.complete(false);
}
}
}
};
</script>
<style lang="scss">
.page {
min-height: 100vh;
background: #f6f7fb;
}
</style>
```
#### 2.2 表单页面结构
```vue
<template>
<z-paging ref="paging" v-model="records" @query="queryList" :layout-only="activeTab === 'form'">
<template #top>
<!-- 标签切换 -->
<view class="tabs">
<view class="tab" :class="activeTab === 'form' ? 'active' : ''" @click="activeTab = 'form'">
表单标题
</view>
<view class="tab" :class="activeTab === 'list' ? 'active' : ''" @click="switchToList">
记录列表
</view>
</view>
</template>
<!-- 表单区域 -->
<view class="tab-content" v-show="activeTab === 'form'">
<view class="form-card">
<!-- 表单项 -->
</view>
</view>
</z-paging>
</template>
```
#### 2.3 字典使用
```javascript
export default {
dicts: ['fault_type', 'cs_type'], // 声明使用的字典
methods: {
// 获取字典数据
getDictLabel(dictKey, value) {
const dict = this.dict.get(dictKey) || [];
const item = dict.find(d => d.dictValue === value);
return item?.dictLabel || value;
}
}
};
```
### 3. 样式规范
#### 3.1 颜色变量
```scss
// 主色调
$primary: #3b82f6; // 蓝色主色
$success: #16a34a; // 绿色成功
$danger: #dc2626; // 红色危险/错误
$warning: #f97316; // 橙色警告
// 背景色
$bg-page: #f6f7fb; // 页面背景
$bg-card: #ffffff; // 卡片背景
$bg-gray: #f3f4f6; // 灰色背景
// 文字色
$text-primary: #1f2937; // 主要文字
$text-secondary: #6b7280; // 次要文字
$text-muted: #9ca3af; // 弱化文字
```
#### 3.2 常用样式类
```scss
// 页面容器
.page {
min-height: 100vh;
background: #f6f7fb;
padding: 24rpx;
}
// 卡片样式
.card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 20rpx;
}
// 标签切换
.tabs {
display: flex;
background: #fff;
border-radius: 16rpx;
padding: 8rpx;
margin-bottom: 20rpx;
.tab {
flex: 1;
text-align: center;
padding: 20rpx 0;
font-size: 28rpx;
color: #6b7280;
border-radius: 12rpx;
&.active {
background: #3b82f6;
color: #fff;
font-weight: 600;
}
}
}
// 表单项
.form-item {
margin-bottom: 24rpx;
.label {
font-size: 28rpx;
color: #374151;
margin-bottom: 12rpx;
display: block;
}
.input, .textarea {
background: #f9fafb;
border-radius: 12rpx;
padding: 20rpx;
font-size: 28rpx;
}
}
// 按钮样式
.btn-primary {
background: #3b82f6;
color: #fff;
border-radius: 12rpx;
padding: 24rpx 0;
text-align: center;
font-size: 30rpx;
font-weight: 600;
}
```
### 4. 图片上传规范
```javascript
methods: {
// 选择图片
chooseImage() {
uni.chooseImage({
count: 9 - this.images.length,
success: (res) => {
res.tempFilePaths.forEach(path => {
this.uploadImage(path);
});
}
});
},
// 上传图片
async uploadImage(filePath) {
try {
uni.showLoading({ title: '上传中...' });
const result = await request.uploadFile(filePath, 'file');
this.images.push({ url: result.url });
} catch (e) {
uni.showToast({ title: '上传失败', icon: 'none' });
} finally {
uni.hideLoading();
}
},
// 删除图片
deleteImage(index) {
this.images.splice(index, 1);
}
}
```
### 5. 常用组件
#### 5.1 z-paging 分页组件
```vue
<z-paging
ref="paging"
v-model="records"
@query="queryList"
:layout-only="false"
:auto="true"
>
<template #top>
<!-- 顶部固定区域 -->
</template>
<!-- 列表内容 -->
<view v-for="item in records" :key="item.id">
<!-- 列表项 -->
</view>
<template #bottom>
<!-- 底部固定区域 -->
</template>
</z-paging>
```
#### 5.2 uni-calendar 日历组件
```vue
<uni-calendar
ref="calendar"
:insert="false"
:range="false"
:start-date="'2026-01-01'"
:end-date="'2099-12-31'"
@confirm="onDateConfirm"
/>
```
#### 5.3 picker 选择器
```vue
<picker
@change="onPickerChange"
:value="index"
:range="options"
:range-key="'label'"
>
<view class="picker">
{{ selectedLabel || '请选择' }}
</view>
</picker>
```
## 现有功能模块
### 已开发模块
1. **每日菜单** (`day_menu/`)
- 按日期查看菜单
- 菜品点赞/点踩
- 菜品排行
- 食堂切换
2. **报修管理** (`repair/`)
- 提交报修单
- 报修记录列表
- 图片上传
- 房屋选择
3. **投诉建议** (`complaint/`)
- 提交投诉/建议
- 历史记录
- 图片上传
4. **物资领用** (`stock/`)
- 物资列表
- 领用申请
- 领用记录
5. **祈愿菜单** (`wish_menu/`)
- 提交祈愿
- 祈愿列表
6. **公告通知** (`notice/`)
- 公告列表
- 公告详情
## 开发建议
### 新增功能步骤
1. **创建 API 接口**
- 在 `app/api/property.js` 中添加接口函数
- 遵循命名规范:`listXxx`, `createXxx`, `updateXxx`, `deleteXxx`
2. **创建页面**
- 在 `app/pages/supply_chain/` 下新建文件夹
- 创建 `index.vue` 文件
- 复制基础模板进行修改
3. **配置路由**
- 在 `app/pages.json` 中添加页面配置
- 设置页面标题和样式
4. **添加字典(如需要)**
- 确认后端已配置字典
- 在页面 `dicts` 中声明使用
### 代码复用
- **列表分页**:使用 `z-paging` 组件
- **图片上传**:参考 `repair/index.vue` 中的实现
- **表单验证**:使用 uni-app 表单验证或自定义验证
- **日期处理**:使用 `uni-calendar` 组件
### 注意事项
1. 所有接口请求使用 `useAdminUrl: true`
2. 图片上传使用 `request.uploadFile` 方法
3. 字典数据通过 `this.dict.get(key)` 获取
4. 页面背景统一使用 `#f6f7fb`
5. 卡片圆角统一使用 `16rpx`
6. 支持 H5 和微信小程序,注意平台差异处理
## 参考示例
- 表单+列表页面:参考 `repair/index.vue`
- 纯列表页面:参考 `notice/index.vue`
- 复杂交互页面:参考 `day_menu/index.vue`

@ -64,6 +64,12 @@ const actions = {
// const { rules } = await roleApi.getRoleById(roleid)
let menusAll = await roleApi.menuListApi();
!Auth.isPhone() ? menusAll = menusAll.filter(item => item.component !== '/javaMobile') : menusAll = menusAll.filter(item => item.component === '/javaMobile')
menusAll = menusAll.filter(item => {
if (item.menuType === 'M' && (!item.childList || item.childList.length === 0)) {
return false;
}
return true;
});
// const routes = menusToRoutes(menusAll);
const routes = copyRoutes(tempRoutes);
const newRoutes = findRoutes(menusAll);

@ -172,3 +172,39 @@ export function cancelBill(id) {
);
}
// 部门树
export function getDeptTree() {
return request.get(
'autogencode/sysdept/tree',
{},
{ useAdminUrl: true }
);
}
// 用户列表
export function listAdmins(params) {
return request.get(
'admin/system/admin/list',
params,
{ useAdminUrl: true }
);
}
// 更新派单(处理)
export function updateMaintenanceDispatch(data) {
return request.post(
'autogencode/pmmaintenancedispatch/update',
data,
{ useAdminUrl: true }
);
}
// 获取管理员账号信息
export function getAdminInfoByUid() {
return request.get(
'admin/getAdminInfoByUid',
{},
{ useAdminUrl: true }
);
}

@ -30,5 +30,7 @@ module.exports = {
//缓存纬度
CACHE_LATITUDE: 'LATITUDE',
//app手机信息
PLATFORM: 'systemPlatform'
PLATFORM: 'systemPlatform',
//管理员账号信息
ADMIN_INFO: 'ADMIN_INFO'
}

@ -312,16 +312,40 @@
},
{
"path": "repair/index",
"style": {
"navigationBarTitleText": "报修服务",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black"
// #ifdef H5
,
"navigationStyle": "custom"
// #endif
}
},
"style": {
"navigationBarTitleText": "报修服务",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black"
// #ifdef H5
,
"navigationStyle": "custom"
// #endif
}
},
{
"path": "repair_handle/index",
"style": {
"navigationBarTitleText": "故障处理",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black"
// #ifdef H5
,
"navigationStyle": "custom"
// #endif
}
},
{
"path": "dispatch/index",
"style": {
"navigationBarTitleText": "派单管理",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black"
// #ifdef H5
,
"navigationStyle": "custom"
// #endif
}
},
{
"path": "notice/index",
"style": {

@ -6,7 +6,7 @@
<view class="serch-wrapper flex">
<view class="logo">
<image :src="logoUrl" mode=""></image>
</view>
</view>
<text class="title">八方物业</text>
<!-- <navigator url="/pages/goods_search/index" class="input" hover-class="none"><text
class="iconfont icon-xiazai5"></text>
@ -77,7 +77,7 @@
</view>
<view class="menu-txt">采购操作</view>
</navigator> -->
<navigator class='item' url='/pages/supply_chain/stock/index' hover-class='none'>
<navigator v-if="checkPermi('stock_inquiry')" class='item' url='/pages/supply_chain/stock/index' hover-class='none'>
<view class='pictrue picsmall'>
<image class="image" src="/static/images/wg/wg_stock.png"></image>
</view>
@ -89,37 +89,43 @@
</view>
<view class="menu-txt">审批处理</view>
</navigator> -->
<navigator class='item' url='/pages/supply_chain/material_receipt/index' hover-class='none'>
<navigator v-if="checkPermi('material_collection')" class='item' url='/pages/supply_chain/material_receipt/index' hover-class='none'>
<view class='pictrue picsmall'>
<image class="image" src="/static/images/wg/wg_get.png"></image>
</view>
<view class="menu-txt">物资领用</view>
</navigator>
<navigator class='item' url='/pages/supply_chain/day_menu/index' hover-class='none'>
<view class='pictrue picsmall'>
<image class="image" src="/static/images/wg/wg_day_menu.png"></image>
</view>
<view class="menu-txt">每日菜单</view>
</navigator>
<navigator class='item' url='/pages/supply_chain/wish_menu/index' hover-class='none'>
<navigator v-if="checkPermi('daily_menu')" class='item' url='/pages/supply_chain/day_menu/index' hover-class='none'>
<view class='pictrue picsmall'>
<image class="image" src="/static/images/wg/wg_day_menu.png"></image>
</view>
<view class="menu-txt">每日菜单</view>
</navigator>
<navigator v-if="checkPermi('wish_menu')" class='item' url='/pages/supply_chain/wish_menu/index' hover-class='none'>
<view class='pictrue picsmall'>
<image class="image" src="/static/images/wg/wg_wish.png"></image>
</view>
<view class="menu-txt">祈愿菜单</view>
</navigator>
<navigator class='item' url='/pages/supply_chain/complaint/index' hover-class='none'>
<navigator v-if="checkPermi('complaint_suggest')" class='item' url='/pages/supply_chain/complaint/index' hover-class='none'>
<view class='pictrue picsmall'>
<image class="image" src="/static/images/wg/wg_jy.png"></image>
</view>
<view class="menu-txt">投诉与建议</view>
</navigator>
<navigator class='item' url='/pages/supply_chain/repair/index' hover-class='none'>
<navigator v-if="checkPermi('repair')" class='item' url='/pages/supply_chain/repair/index' hover-class='none'>
<view class='pictrue picsmall'>
<image class="image" src="/static/images/wg/wg_wx.png"></image>
</view>
<view class="menu-txt">报修服务</view>
</navigator>
<navigator class='item' url='/pages/supply_chain/notice/index' hover-class='none'>
<navigator v-if="checkPermi('repair_processing')" class='item' url='/pages/supply_chain/repair_handle/index' hover-class='none'>
<view class='pictrue picsmall'>
<image class="image" src="/static/images/wg/wg_gzcl.png"></image>
</view>
<view class="menu-txt">报修处理</view>
</navigator>
<navigator v-if="checkPermi('notification')" class='item' url='/pages/supply_chain/notice/index' hover-class='none'>
<view class='pictrue picsmall'>
<image class="image" src="/static/images/wg/wg_notice.png"></image>
</view>
@ -231,6 +237,7 @@
<script>
import Auth from '@/libs/wechat';
import Cache from '../../utils/cache';
import { checkPermi } from '@/utils/auth/permission.js';
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
let app = getApp();
import {
@ -315,6 +322,7 @@
},
data() {
return {
checkPermi,
pageHeight: 0,
loaded: false,
loading: false,
@ -1052,15 +1060,15 @@
margin-top: var(--status-bar-height);
align-items: center;
/* #ifdef MP-WEIXIN */
/* #ifdef MP-WEIXIN */
margin-top: calc(var(--status-bar-height) + 30rpx);
width: 75%;
/* #endif */
.title {
margin-top: 4rpx;
font-weight: 500;
font-size: 32rpx;
.title {
margin-top: 4rpx;
font-weight: 500;
font-size: 32rpx;
}
.logo {

@ -0,0 +1,357 @@
<template>
<uni-popup ref="popup" type="bottom">
<view class="handle-popup">
<view class="popup-header">
<text class="popup-title">处理派单</text>
<text class="popup-close" @click="close">×</text>
</view>
<scroll-view scroll-y class="popup-body">
<!-- 处理内容 -->
<view class="form-item">
<text class="label">处理内容</text>
<textarea
class="textarea"
v-model="form.handleContent"
placeholder="请输入处理内容"
maxlength="500"
:auto-height="true"
/>
<text class="count">{{ (form.handleContent || '').length }}/500</text>
</view>
<!-- 耗材 -->
<view class="form-item">
<text class="label">耗材</text>
<input
class="input"
type="text"
v-model="form.consumables"
placeholder="请输入使用的耗材"
maxlength="100"
/>
</view>
<!-- 费用 -->
<view class="form-item">
<text class="label">费用</text>
<input
class="input"
type="digit"
v-model="form.costAmount"
placeholder="请输入费用金额"
maxlength="10"
/>
</view>
<!-- 处理图片 -->
<view class="form-item">
<text class="label">处理图片</text>
<view class="upload-section">
<view class="upload-list">
<view
class="upload-item"
v-for="(image, index) in images"
:key="index"
>
<image :src="HTTP_ADMIN_URL + '/' + image.url" mode="aspectFill"></image>
<text class="delete-btn" @click="deleteImage(index)">×</text>
</view>
<view class="upload-btn" @click="chooseImage" v-if="images.length < 9">
<text class="iconfont icon-tianjia"></text>
<text>添加图片</text>
</view>
</view>
<text class="hint">最多上传9张图片</text>
</view>
</view>
</scroll-view>
<view class="popup-footer">
<view class="submit-btn" @click="handleSubmit"></view>
</view>
</view>
</uni-popup>
</template>
<script>
import { HTTP_ADMIN_URL } from '@/config/app';
import request from '@/utils/request.js';
export default {
data() {
return {
HTTP_ADMIN_URL,
currentItem: null,
form: {
handleContent: '',
consumables: '',
costAmount: ''
},
images: []
};
},
methods: {
open(item) {
this.currentItem = item;
this.form = {
handleContent: item.handleContent || '',
consumables: item.consumables || '',
costAmount: item.costAmount || ''
};
this.images = item.files && item.files.length ? [...item.files] : [];
this.$refs.popup.open();
},
close() {
this.$refs.popup.close();
},
chooseImage() {
// #ifndef MP-WEIXIN
uni.chooseImage({
count: 9 - this.images.length,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
this.uploadImages(res.tempFilePaths);
}
});
// #endif
// #ifdef MP-WEIXIN
uni.chooseMedia({
count: 9 - this.images.length,
mediaType: ['image'],
sourceType: ['album', 'camera'],
sizeType: ['compressed'],
success: (res) => {
const tempFilePaths = res.tempFiles.map(file => file.tempFilePath);
this.uploadImages(tempFilePaths);
}
});
// #endif
},
async uploadImages(filePaths) {
for (let i = 0; i < filePaths.length; i++) {
try {
uni.showLoading({ title: '上传中...', mask: true });
const result = await request.uploadFile(filePaths[i], 'multipart', {}, {
params: { model: 'app-dispatch', pid: 10 }
});
this.images.push(result);
} catch (e) {
console.error('上传图片失败:', e);
uni.showToast({ title: '上传失败', icon: 'none' });
} finally {
uni.hideLoading();
}
}
},
deleteImage(index) {
this.images.splice(index, 1);
},
getCurrentTime() {
const now = new Date();
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
},
handleSubmit() {
if (!this.form.handleContent.trim()) {
uni.showToast({ title: '请输入处理内容', icon: 'none' });
return;
}
//
const files = this.images.map(file => {
let attDir = file.url;
return {
attId: file.id + '',
name: file.fileName,
attDir,
attSize: file.fileSize,
attType: file.type, //
fileName: file.fileName,
filePath: attDir,
url: attDir,
originalFileName: file.fileName,
};
});
const updateData = {
...this.currentItem,
status: '2',
completeTime: this.getCurrentTime(),
handleContent: this.form.handleContent,
consumables: this.form.consumables,
costAmount: this.form.costAmount,
files
};
this.$emit('submit', updateData);
this.close();
}
}
};
</script>
<style lang="scss">
.handle-popup {
width: 100%;
max-height: 80vh;
background: #fff;
border-radius: 20rpx 20rpx 0 0;
display: flex;
flex-direction: column;
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #f0f0f0;
flex-shrink: 0;
.popup-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.popup-close {
font-size: 50rpx;
color: #999;
line-height: 1;
}
}
.popup-body {
flex: 1;
padding: 30rpx;
max-height: 55vh;
.form-item {
margin-bottom: 30rpx;
.label {
display: block;
font-size: 28rpx;
color: #374151;
margin-bottom: 12rpx;
font-weight: 500;
}
.input {
width: 100%;
height: 80rpx;
background: #f9fafb;
border-radius: 12rpx;
padding: 0 20rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.textarea {
width: 100%;
min-height: 160rpx;
background: #f9fafb;
border-radius: 12rpx;
padding: 20rpx;
font-size: 28rpx;
box-sizing: border-box;
line-height: 1.6;
}
.count {
display: block;
margin-top: 10rpx;
text-align: right;
font-size: 22rpx;
color: #999;
}
.upload-section {
.upload-list {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
.upload-item {
width: 180rpx;
height: 180rpx;
position: relative;
border-radius: 12rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
.delete-btn {
position: absolute;
top: 10rpx;
right: 10rpx;
width: 40rpx;
height: 40rpx;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
}
}
.upload-btn {
width: 180rpx;
height: 180rpx;
border: 2rpx dashed #d9d9d9;
border-radius: 12rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fafafa;
.iconfont {
font-size: 48rpx;
color: #bfbfbf;
margin-bottom: 8rpx;
}
text {
font-size: 24rpx;
color: #999;
}
}
}
.hint {
display: block;
margin-top: 16rpx;
font-size: 22rpx;
color: #999;
}
}
}
}
.popup-footer {
padding: 20rpx 30rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
border-top: 1rpx solid #f0f0f0;
flex-shrink: 0;
.submit-btn {
height: 88rpx;
background: #3b82f6;
color: #fff;
border-radius: 44rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-weight: 600;
}
}
}
</style>

@ -0,0 +1,837 @@
<template>
<z-paging ref="paging" v-model="records" @query="queryList" :layout-only="activeTab === 'form'">
<template #top>
<!-- 顶部标签切换 -->
<view class="tabs" v-if="checkPermi('send_order') && parentStatus !== '99'">
<view
class="tab"
:class="activeTab === 'records' ? 'active' : ''"
@click="activeTab = 'records'"
>
派单记录
</view>
<view
class="tab"
:class="activeTab === 'form' ? 'active' : ''"
@click="switchToForm"
>
新增派单
</view>
</view>
</template>
<!-- 派单记录列表 -->
<view class="tab-content" v-show="activeTab === 'records'">
<view
class="dispatch-card"
v-for="(item, index) in records"
:key="index"
>
<view class="card-header">
<text class="dispatch-status" :class="dispatchStatusClassMap[item.status] || ''">
{{ getDispatchStatusText(item.status) }}
</text>
<text class="dispatch-time">{{ item.assignTime }}</text>
</view>
<view class="card-body">
<view class="row">
<text class="label">派单人</text>
<text class="value">{{ item.assignerName || '-' }}</text>
</view>
<view class="row">
<text class="label">执行人</text>
<text class="value">{{ item.executorName || '-' }}</text>
</view>
<view class="row">
<text class="label">执行人部门</text>
<text class="value">{{ item.executorDeptName || '-' }}</text>
</view>
<view class="row">
<text class="label">联系方式</text>
<text class="value">{{ item.phone || '-' }}</text>
</view>
<view class="row">
<text class="label">工作内容</text>
<text class="value">{{ item.assigneContext || '-' }}</text>
</view>
<view class="row">
<text class="label">备注</text>
<text class="value">{{ item.dispatchNote || '-' }}</text>
</view>
<view class="row">
<text class="label">预计完成时间</text>
<text class="value">{{ item.expectedCompleteTime || '-' }}</text>
</view>
<view class="row" v-if="item.completeTime">
<text class="label">实际完成时间</text>
<text class="value">{{ item.completeTime }}</text>
</view>
<view class="row" v-if="item.handleContent">
<text class="label">处理内容</text>
<text class="value">{{ item.handleContent }}</text>
</view>
<view class="row" v-if="item.consumables">
<text class="label">耗材</text>
<text class="value">{{ item.consumables }}</text>
</view>
<view class="row" v-if="item.costAmount">
<text class="label">费用</text>
<text class="value">¥{{ item.costAmount }}</text>
</view>
<!-- <view class="row">
<text class="label">业主确认</text>
<text class="value">{{ item.ownerConfirm || '否' }}</text>
</view> -->
<!-- 处理结果图片 -->
<view class="image-section" v-if="item.files && item.files.length">
<text class="image-title">处理图片</text>
<view class="image-grid">
<view
class="image-item"
v-for="(file, imgIndex) in item.files"
:key="imgIndex"
@click="previewImages(item.files, imgIndex)"
>
<image
:src="HTTP_ADMIN_URL + '/' + (file.url || file.attDir || file)"
mode="aspectFill"
></image>
</view>
</view>
</view>
</view>
<!-- 处理按钮 -->
<view class="card-footer" v-if="item.status !== '2' && parentStatus !== '99' && String(item.executorId) === String(currentAdminId)">
<text class="handle-btn" @click="openHandlePopup(item)"></text>
</view>
</view>
</view>
<!-- 处理弹窗 -->
<HandlePopup ref="handlePopup" @submit="handleDispatchSubmit" />
<!-- 新增派单表单 / 处理表单 -->
<view class="tab-content" v-show="activeTab === 'form'">
<view class="form-card">
<!-- 部门选择 -->
<view class="form-item">
<text class="label">执行部门</text>
<view class="picker-row" @click="openDeptPicker">
<text class="value" v-if="form.executorDeptName">
{{ form.executorDeptName }}
</text>
<text class="placeholder" v-else></text>
<text class="iconfont icon-xiangyou"></text>
</view>
</view>
<!-- 执行人选择 -->
<view class="form-item">
<text class="label">执行人</text>
<view class="picker-row" @click="openExecutorPicker">
<text class="value" v-if="form.executorName">
{{ form.executorName }}
</text>
<text class="placeholder" v-else></text>
<text class="iconfont icon-xiangyou"></text>
</view>
</view>
<!-- 联系电话 -->
<view class="form-item">
<text class="label">联系电话</text>
<input
class="input"
type="text"
v-model="form.phone"
placeholder="请输入联系电话"
maxlength="20"
/>
</view>
<!-- 工作内容 -->
<view class="form-item">
<text class="label">工作内容</text>
<textarea
class="textarea"
v-model="form.handleContent"
placeholder="请输入工作内容"
maxlength="500"
:auto-height="true"
/>
<text class="count">{{ (form.handleContent || '').length }}/500</text>
</view>
<!-- 备注 -->
<view class="form-item">
<text class="label">备注</text>
<textarea
class="textarea"
v-model="form.dispatchNote"
placeholder="请输入备注信息"
maxlength="200"
:auto-height="true"
/>
<text class="count">{{ (form.dispatchNote || '').length }}/200</text>
</view>
<!-- 预计完成时间 -->
<view class="form-item">
<text class="label">预计完成时间</text>
<view class="picker-row" @click="openDatePicker">
<text class="value" v-if="form.expectedCompleteTime">
{{ form.expectedCompleteTime }}
</text>
<text class="placeholder" v-else></text>
<text class="iconfont icon-xiangyou"></text>
</view>
</view>
</view>
<view class="submit-section">
<view class="submit-btn" @click="submitForm">
提交派单
</view>
</view>
</view>
<!-- 部门选择弹窗 -->
<uni-popup ref="deptPopup" type="bottom">
<view class="popup-content">
<view class="popup-header">
<text class="popup-title">选择部门</text>
<text class="popup-close" @click="$refs.deptPopup.close()">×</text>
</view>
<scroll-view scroll-y class="popup-list">
<view
class="popup-item"
v-for="item in flatDeptList"
:key="item.deptId"
@click="chooseDept(item)"
:style="{ paddingLeft: (item.level * 40 + 30) + 'rpx' }"
>
<text>{{ item.deptName }}</text>
</view>
</scroll-view>
</view>
</uni-popup>
<!-- 执行人选择弹窗 -->
<uni-popup ref="executorPopup" type="bottom">
<view class="popup-content">
<view class="popup-header">
<text class="popup-title">选择执行人</text>
<text class="popup-close" @click="$refs.executorPopup.close()">×</text>
</view>
<scroll-view scroll-y class="popup-list">
<view
class="popup-item"
v-for="item in filteredUsers"
:key="item.id"
@click="chooseExecutor(item)"
>
<text class="user-name">{{ item.realName }}</text>
<text class="user-dept">{{ item.deptNames ? item.deptNames.join(',') : '' }}</text>
</view>
<view class="empty" v-if="filteredUsers.length === 0">
请先选择部门
</view>
</scroll-view>
</view>
</uni-popup>
<!-- 日期选择弹窗 -->
<uni-calendar
ref="calendar"
:insert="false"
:range="false"
:start-date="today"
@confirm="onDateConfirm"
/>
</z-paging>
</template>
<script>
import { listMaintenanceDispatch, createMaintenanceDispatch, updateMaintenanceDispatch, getDeptTree, listAdmins } from '@/api/property.js';
import { HTTP_ADMIN_URL } from '@/config/app';
import HandlePopup from './components/HandlePopup.vue';
import { checkPermi } from '@/utils/auth/permission.js';
export default {
components: { HandlePopup },
computed: {
// ID
currentAdminId() {
return this.$store.getters.adminInfo?.id;
}
},
data() {
return {
checkPermi,
HTTP_ADMIN_URL,
orderId: '',
parentStatus: '', //
activeTab: 'records',
records: [],
loading: false,
dispatchStatusClassMap: {
0: 'pending',
1: 'doing',
2: 'done'
},
form: {
executorId: '',
executorName: '',
executorDept: '',
executorDeptName: '',
phone: '',
handleContent: '',
dispatchNote: '',
expectedCompleteTime: ''
},
deptList: [],
flatDeptList: [],
userList: [],
filteredUsers: [],
today: ''
};
},
onLoad(options) {
this.orderId = options.orderId || '';
this.parentStatus = options.status || '';
const now = new Date();
this.today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
},
onShow() {
// if (this.activeTab === 'records' && this.$refs.paging) {
// this.$refs.paging.reload();
// }
},
methods: {
queryList(pageNo, pageSize) {
listMaintenanceDispatch({
page: pageNo,
limit: pageSize,
orderId: this.orderId
}).then((res) => {
const list = res?.data?.list || [];
this.$refs.paging.complete(list);
}).catch((err) => {
console.error('获取派单记录失败:', err);
this.$refs.paging.complete(false);
});
},
getDispatchStatusText(status) {
const statusMap = {
0: '待处理',
1: '处理中',
2: '已完成'
};
return statusMap[status] || '未知状态';
},
switchToForm() {
this.activeTab = 'form';
},
previewImages(files, index) {
if (!files || !files.length) return;
const urls = files.map(file => {
const path = file.url || file.attDir || file;
return this.HTTP_ADMIN_URL + '/' + path;
});
uni.previewImage({ current: index, urls });
},
openHandlePopup(item) {
this.$refs.handlePopup.open(item);
},
async handleDispatchSubmit(updateData) {
try {
uni.showLoading({ title: '提交中...', mask: true });
await updateMaintenanceDispatch(updateData);
uni.showToast({ title: '处理完成', icon: 'success' });
this.$refs.paging.reload();
} catch (e) {
console.error('处理失败:', e);
uni.showToast({ title: typeof e === 'string' ? e : '处理失败', icon: 'none' });
} finally {
uni.hideLoading();
}
},
async openDeptPicker() {
if (this.deptList.length === 0) {
await this.fetchDeptTree();
}
this.$refs.deptPopup.open();
},
async fetchDeptTree() {
try {
const res = await getDeptTree();
this.deptList = res?.data || [];
this.flatDeptList = this.flattenDept(this.deptList);
} catch (e) {
console.error('获取部门树失败:', e);
}
},
flattenDept(depts, level = 0) {
let result = [];
depts.forEach(dept => {
result.push({ ...dept, level });
if (dept.children && dept.children.length > 0) {
result = result.concat(this.flattenDept(dept.children, level + 1));
}
});
return result;
},
chooseDept(item) {
this.form.executorDept = String(item.deptId);
this.form.executorDeptName = item.deptName;
this.form.executorId = '';
this.form.executorName = '';
this.filteredUsers = [];
this.$refs.deptPopup.close();
this.filterUsersByDept(item.deptId);
},
async filterUsersByDept(deptId) {
try {
if (this.userList.length === 0) {
const res = await listAdmins({ limit: 999 });
this.userList = res?.data?.list || [];
}
this.filteredUsers = this.userList.filter(user => {
return user.depts && user.depts.includes(String(deptId));
});
} catch (e) {
console.error('获取用户列表失败:', e);
}
},
openExecutorPicker() {
if (!this.form.executorDept) {
uni.showToast({ title: '请先选择部门', icon: 'none' });
return;
}
this.$refs.executorPopup.open();
},
chooseExecutor(item) {
this.form.executorId = String(item.id);
this.form.executorName = item.realName;
if (item.phone) {
this.form.phone = item.phone;
}
this.$refs.executorPopup.close();
},
openDatePicker() {
this.$refs.calendar.open();
},
onDateConfirm(e) {
this.form.expectedCompleteTime = e.fulldate + ' 00:00:00';
},
getCurrentTime() {
const now = new Date();
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
},
async submitForm() {
if (!this.form.executorId) {
uni.showToast({ title: '请选择执行人', icon: 'none' });
return;
}
if (!this.form.handleContent.trim()) {
uni.showToast({ title: '请输入工作内容', icon: 'none' });
return;
}
try {
uni.showLoading({ title: '提交中...', mask: true });
const payload = {
orderId: this.orderId,
assignerId: 1,
executorId: this.form.executorId,
executorDept: this.form.executorDept,
phone: this.form.phone,
assigneContext: this.form.handleContent,
dispatchNote: this.form.dispatchNote,
expectedCompleteTime: this.form.expectedCompleteTime,
status: '0',
assignTime: this.getCurrentTime(),
files: []
};
await createMaintenanceDispatch(payload);
uni.showToast({ title: '派单成功', icon: 'success' });
this.activeTab = 'records';
this.$refs.paging.reload();
this.resetForm();
} catch (e) {
console.error('提交失败:', e);
uni.showToast({ title: typeof e === 'string' ? e : '提交失败', icon: 'none' });
} finally {
uni.hideLoading();
}
},
resetForm() {
this.form = {
executorId: '',
executorName: '',
executorDept: '',
executorDeptName: '',
phone: '',
handleContent: '',
dispatchNote: '',
expectedCompleteTime: ''
};
this.images = [];
}
}
};
</script>
<style lang="scss">
.page {
min-height: 100vh;
background: #f6f7fb;
}
.tabs {
display: flex;
background: #fff;
border-radius: 16rpx;
padding: 8rpx;
margin: 24rpx;
.tab {
flex: 1;
text-align: center;
padding: 20rpx 0;
font-size: 28rpx;
color: #6b7280;
border-radius: 12rpx;
&.active {
background: #3b82f6;
color: #fff;
font-weight: 600;
}
}
}
.tab-content {
padding: 0 24rpx;
}
.dispatch-card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
.dispatch-status {
padding: 6rpx 18rpx;
border-radius: 20rpx;
font-size: 22rpx;
}
.dispatch-status.pending {
background: #E6F7FF;
color: #409EFF;
}
.dispatch-status.doing {
background: #FFF7E6;
color: #FA8C16;
}
.dispatch-status.done {
background: #F6FFED;
color: #52C41A;
}
.dispatch-time {
font-size: 22rpx;
color: #999;
}
}
.card-body {
.row {
display: flex;
margin-bottom: 10rpx;
.label {
width: 160rpx;
font-size: 24rpx;
color: #666;
}
.value {
flex: 1;
font-size: 24rpx;
color: #333;
}
}
.image-section {
margin-top: 16rpx;
.image-title {
display: block;
font-size: 22rpx;
color: #666;
margin-bottom: 10rpx;
}
.image-grid {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
.image-item {
width: 160rpx;
height: 160rpx;
border-radius: 8rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
}
}
.card-footer {
display: flex;
justify-content: flex-end;
margin-top: 20rpx;
padding-top: 20rpx;
border-top: 1rpx solid #f0f0f0;
.handle-btn {
padding: 12rpx 40rpx;
background: #52C41A;
color: #fff;
border-radius: 24rpx;
font-size: 26rpx;
}
}
}
.form-card {
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 30rpx;
.form-item {
margin-bottom: 30rpx;
.label {
display: block;
font-size: 28rpx;
color: #374151;
margin-bottom: 12rpx;
font-weight: 500;
}
.input {
width: 100%;
height: 80rpx;
background: #f9fafb;
border-radius: 12rpx;
padding: 0 20rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.textarea {
width: 100%;
min-height: 160rpx;
background: #f9fafb;
border-radius: 12rpx;
padding: 20rpx;
font-size: 28rpx;
box-sizing: border-box;
line-height: 1.6;
}
.count {
display: block;
margin-top: 10rpx;
text-align: right;
font-size: 22rpx;
color: #999;
}
.picker-row {
height: 80rpx;
background: #f9fafb;
border-radius: 12rpx;
padding: 0 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
.value {
font-size: 28rpx;
color: #333;
}
.placeholder {
font-size: 28rpx;
color: #999;
}
.iconfont {
font-size: 26rpx;
color: #ccc;
}
}
.upload-section {
.upload-list {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
.upload-item {
width: 180rpx;
height: 180rpx;
position: relative;
border-radius: 12rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
.delete-btn {
position: absolute;
top: 10rpx;
right: 10rpx;
width: 40rpx;
height: 40rpx;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
}
}
.upload-btn {
width: 180rpx;
height: 180rpx;
border: 2rpx dashed #d9d9d9;
border-radius: 12rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fafafa;
.iconfont {
font-size: 48rpx;
color: #bfbfbf;
margin-bottom: 8rpx;
}
text {
font-size: 24rpx;
color: #999;
}
}
}
.hint {
display: block;
margin-top: 16rpx;
font-size: 22rpx;
color: #999;
}
}
}
}
.submit-section {
.submit-btn {
height: 88rpx;
background: #3b82f6;
color: #fff;
border-radius: 44rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-weight: 600;
box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.35);
margin: 0 24rpx 30rpx;
}
}
.popup-content {
width: 100%;
max-height: 70vh;
background: #fff;
border-radius: 20rpx 20rpx 0 0;
padding: 24rpx 30rpx 40rpx;
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.popup-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
}
.popup-close {
font-size: 50rpx;
color: #999;
line-height: 1;
}
}
.popup-list {
max-height: 60vh;
.popup-item {
padding: 24rpx 30rpx;
border-bottom: 1rpx solid #f0f0f0;
font-size: 28rpx;
color: #333;
.user-name {
margin-right: 16rpx;
}
.user-dept {
font-size: 24rpx;
color: #999;
}
}
.empty {
text-align: center;
padding: 40rpx 0;
font-size: 26rpx;
color: #999;
}
}
}
</style>

@ -120,7 +120,7 @@
class="status"
:class="statusClassMap[item.status] || statusClassMap['__default__']"
>
{{ statusText(item.status) }}
{{ statusText(item.status, item.remark) }}
</text>
</view>
<view class="header-right">
@ -499,11 +499,11 @@ export default {
urls
});
},
statusText(status) {
statusText(status, remark) {
if (status === 0 || status === '0') return '待处理';
if (status === 1 || status === '1') return '处理中';
if (status === 2 || status === '2') return '已处理';
if (status === 99 || status === '99') return '已办结';
if (status === 99 || status === '99') return remark || '已办结';
return '待处理';
},
getFaultTypeLabel(value) {

@ -0,0 +1,367 @@
<template>
<z-paging ref="paging" v-model="records" @query="queryList">
<!-- 故障列表 -->
<view class="record-list">
<view
class="record-card"
v-for="item in records"
:key="item.id"
>
<view class="card-header">
<view class="left">
<text class="type">
{{ item.houseName || '报修单' }}
</text>
<text
class="status"
:class="statusClassMap[item.status] || statusClassMap['__default__']"
>
{{ statusText(item.status, item.remark) }}
</text>
</view>
<view class="header-right">
<text class="time">
{{ item.reportTime || item.createTime || '' }}
</text>
</view>
</view>
<view class="card-body">
<view class="row" v-if="item.faultType">
<text class="label">故障类型</text>
<text class="value">
{{ getFaultTypeLabel(item.faultType) }}
</text>
</view>
<view class="row" v-if="item.faultDesc">
<text class="label">报修内容</text>
<text class="value">
{{ item.faultDesc }}
</text>
</view>
<view class="image-section" v-if="item.files && item.files.length">
<text class="image-title">故障图片</text>
<view class="image-grid">
<view
class="image-item"
v-for="(file, imgIndex) in item.files"
:key="imgIndex"
@click="previewRecordImages(item.files, imgIndex)"
>
<image
:src="HTTP_ADMIN_URL + '/' + (file.url || file.attDir)"
mode="aspectFill"
></image>
</view>
</view>
</view>
<view
class="image-section"
v-if="item.afterProcessFiles && item.afterProcessFiles.length"
>
<text class="image-title">处理结果图片</text>
<view class="image-grid">
<view
class="image-item"
v-for="(file, imgIndex) in item.afterProcessFiles"
:key="imgIndex"
@click="previewRecordImages(item.afterProcessFiles, imgIndex)"
>
<image
:src="HTTP_ADMIN_URL + '/' + (file.url || file.attDir)"
mode="aspectFill"
></image>
</view>
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="card-footer">
<text class="action-btn dispatch-btn" @click="goDispatch(item.id)"></text>
<text class="action-btn handle-btn" v-if="checkPermi('send_order') && item.status !== '99'" @click="openFinishPopup(item)"></text>
</view>
</view>
</view>
</z-paging>
</template>
<script>
import { listMaintenanceOrder, updateMaintenanceOrderStatus } from '@/api/property.js';
import { HTTP_ADMIN_URL } from '@/config/app';
import { checkPermi } from '@/utils/auth/permission.js';
export default {
dicts: ['fault_type'],
data() {
return {
checkPermi,
HTTP_ADMIN_URL,
records: [],
statusClassMap: {
0: 'status-pending',
1: 'status-doing',
2: 'status-done',
99: 'status-done',
'__default__': 'status-pending'
}
};
},
onLoad() {
//
},
methods: {
//
queryList(pageNo, pageSize) {
listMaintenanceOrder({
page: pageNo,
limit: pageSize,
uid: null,
}).then((res) => {
const list = res?.data?.list || [];
this.$refs.paging.complete(list);
}).catch((err) => {
console.error('获取故障列表失败:', err);
this.$refs.paging.complete(false);
});
},
//
statusText(status, remark) {
if (status === 0 || status === '0') return '待处理';
if (status === 1 || status === '1') return '处理中';
if (status === 2 || status === '2') return '已处理';
if (status === 99 || status === '99') return remark || '已撤销';
return '待处理';
},
//
getFaultTypeLabel(value) {
const types = this.dict.get('fault_type');
if (types) {
const type = types.find(t => t.dictValue === value);
return type ? type.dictLabel : value;
}
return value;
},
//
previewRecordImages(files, index) {
if (!files || !files.length) return;
const urls = files.map(file => {
const path = file.url || file.attDir || file.filePath;
return this.HTTP_ADMIN_URL + '/' + path;
});
uni.previewImage({
current: index,
urls
});
},
//
goDispatch(item) {
uni.navigateTo({
url: `/pages/supply_chain/dispatch/index?orderId=${item.id}&status=${item.status}`
});
},
//
openFinishPopup(item) {
uni.showModal({
title: '办结',
editable: true,
placeholderText: '已办结',
content: '已办结',
success: async (res) => {
if (res.confirm) {
const remark = res.content || '已办结';
await this.handleFinish(item, remark);
}
}
});
},
//
async handleFinish(item, remark) {
try {
uni.showLoading({ title: '提交中...', mask: true });
await updateMaintenanceOrderStatus({
id: item.id,
status: '99',
remark: remark
});
uni.showToast({ title: '办结成功', icon: 'success' });
this.$refs.paging.reload();
} catch (e) {
console.error('办结失败:', e);
uni.showToast({ title: typeof e === 'string' ? e : '办结失败', icon: 'none' });
} finally {
uni.hideLoading();
}
}
}
};
</script>
<style lang="scss">
.page {
min-height: 100vh;
background: #f6f7fb;
padding: 24rpx;
}
.tabs {
display: flex;
background: #fff;
border-radius: 16rpx;
padding: 8rpx;
margin-bottom: 20rpx;
.tab {
flex: 1;
text-align: center;
padding: 20rpx 0;
font-size: 28rpx;
color: #6b7280;
border-radius: 12rpx;
&.active {
background: #3b82f6;
color: #fff;
font-weight: 600;
}
}
}
.record-list {
padding: 0 4rpx;
}
.record-card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
.left {
display: flex;
align-items: center;
.type {
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-right: 16rpx;
max-width: 280rpx;
}
.status {
padding: 6rpx 18rpx;
border-radius: 20rpx;
font-size: 22rpx;
}
.status-pending {
background-color: #E6F7FF;
color: #409EFF;
}
.status-doing {
background-color: #FFF7E6;
color: #FA8C16;
}
.status-done {
background-color: #F6FFED;
color: #52C41A;
}
}
.header-right {
.time {
font-size: 22rpx;
color: #999;
}
}
}
.card-body {
.row {
display: flex;
margin-bottom: 10rpx;
.label {
width: 160rpx;
font-size: 24rpx;
color: #666;
}
.value {
flex: 1;
font-size: 24rpx;
color: #333;
}
}
.image-section {
margin-top: 12rpx;
.image-title {
display: block;
font-size: 22rpx;
color: #666;
margin-bottom: 10rpx;
}
.image-grid {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
.image-item {
width: calc((100% - 24rpx) / 3);
aspect-ratio: 1 / 1;
border-radius: 8rpx;
overflow: hidden;
background-color: #f5f5f5;
image {
width: 100%;
height: 100%;
}
}
}
}
}
.card-footer {
display: flex;
justify-content: flex-end;
gap: 20rpx;
margin-top: 20rpx;
padding-top: 20rpx;
border-top: 1rpx solid #f0f0f0;
.action-btn {
padding: 12rpx 32rpx;
border-radius: 24rpx;
font-size: 26rpx;
font-weight: 500;
}
.dispatch-btn {
background: #E6F7FF;
color: #409EFF;
}
.handle-btn {
background: #F6FFED;
color: #52C41A;
}
}
}
</style>

@ -238,6 +238,8 @@
// this.setVisit();
this.getOrderData();
this.$store.dispatch('USERINFO');
//
this.$store.dispatch('LOGIN_ADMIN_INFO');
} else {
toLogin();
}

@ -400,32 +400,34 @@
});
});
},
getUserInfo(data){
this.$store.commit("SETUID", data.uid);
getUserInfo().then(res => {
this.$store.commit("UPDATE_USERINFO", res.data);
let backUrl = this.$Cache.get(BACK_URL) || "/pages/index/index";
if (backUrl.indexOf('/pages/users/login/index') !== -1) {
backUrl = '/pages/index/index';
}
// #ifdef APP
uni.reLaunch({
url: "/pages/index/index"
});
return
// #endif
console.log(69999);
console.log(backUrl);
getUserInfo(data){
this.$store.commit("SETUID", data.uid);
getUserInfo().then(res => {
this.$store.commit("UPDATE_USERINFO", res.data);
//
this.$store.dispatch('LOGIN_ADMIN_INFO');
let backUrl = this.$Cache.get(BACK_URL) || "/pages/index/index";
if (backUrl.indexOf('/pages/users/login/index') !== -1) {
backUrl = '/pages/index/index';
}
// #ifdef APP
uni.reLaunch({
url: "/pages/index/index"
});
return
// #endif
console.log(69999);
console.log(backUrl);
if (!backUrl.startsWith('/')) {
backUrl = '/' + backUrl;
}
uni.reLaunch({
url: backUrl
});
})
}
uni.reLaunch({
url: backUrl
});
})
}
}
};
</script>

@ -0,0 +1,431 @@
---
id: property-dev
name: 物业功能开发 Skill
description: UniApp 物业功能开发规范,包含接口定义、页面开发、样式规范等
tags: [uniapp, property, vue2, miniprogram]
version: 1.0.0
author: CodeBuddy
---
# 物业功能开发 Skill
## 项目概述
这是一个基于 UniApp 开发的物业管理小程序项目,兼容 H5 和微信小程序。项目位于 `app/` 目录下,采用 Vue 2 语法风格。
## 项目结构
```
app/
├── api/ # API 接口文件
│ └── property.js # 物业相关接口
├── pages/
│ └── supply_chain/ # 物业管理功能页面
│ ├── day_menu/ # 每日菜单
│ ├── repair/ # 报修管理
│ ├── complaint/ # 投诉建议
│ ├── stock/ # 物资领用
│ ├── wish_menu/ # 祈愿菜单
│ └── ...
├── utils/
│ └── request.js # 请求封装
├── config/
│ └── app.js # 全局配置
└── components/ # 公共组件
```
## 技术规范
### 1. 接口定义规范
接口文件位于 `app/api/property.js`,统一使用 `request` 对象:
```javascript
import request from '@/utils/request.js';
// GET 请求示例
export function listSomething(params) {
return request.get(
'autogencode/xxx/list',
params,
{ useAdminUrl: true }
);
}
// POST 请求示例
export function createSomething(data) {
return request.post(
'autogencode/xxx/save',
data,
{ useAdminUrl: true }
);
}
```
**规范要点:**
- 所有物业接口使用 `useAdminUrl: true`,前缀为 `autogencode/`
- 列表查询用 `list` 后缀
- 新增用 `save` 后缀
- 删除用 `delete` 后缀
- 详情用 `info/{id}` 后缀
### 2. 页面开发规范
#### 2.1 页面基础结构
```vue
<template>
<z-paging ref="paging" v-model="records" @query="queryList">
<template #top>
<!-- 顶部区域 -->
</template>
<!-- 内容区域 -->
<template #bottom>
<!-- 底部区域 -->
</template>
</z-paging>
</template>
<script>
import { someApi } from '@/api/property.js';
export default {
dicts: ['dict_key'], // 使用的字典
data() {
return {
records: [],
// 其他数据
};
},
onLoad() {
// 页面加载
},
methods: {
async queryList(pageNo, pageSize) {
try {
const res = await someApi({ pageNo, pageSize });
this.$refs.paging.complete(res?.data?.list || []);
} catch (e) {
this.$refs.paging.complete(false);
}
}
}
};
</script>
<style lang="scss">
.page {
min-height: 100vh;
background: #f6f7fb;
}
</style>
```
#### 2.2 表单页面结构
```vue
<template>
<z-paging ref="paging" v-model="records" @query="queryList" :layout-only="activeTab === 'form'">
<template #top>
<!-- 标签切换 -->
<view class="tabs">
<view class="tab" :class="activeTab === 'form' ? 'active' : ''" @click="activeTab = 'form'">
表单标题
</view>
<view class="tab" :class="activeTab === 'list' ? 'active' : ''" @click="switchToList">
记录列表
</view>
</view>
</template>
<!-- 表单区域 -->
<view class="tab-content" v-show="activeTab === 'form'">
<view class="form-card">
<!-- 表单项 -->
</view>
</view>
</z-paging>
</template>
```
#### 2.3 字典使用
```javascript
export default {
dicts: ['fault_type', 'cs_type'], // 声明使用的字典
methods: {
// 获取字典数据
getDictLabel(dictKey, value) {
const dict = this.dict.get(dictKey) || [];
const item = dict.find(d => d.dictValue === value);
return item?.dictLabel || value;
}
}
};
```
### 3. 样式规范
#### 3.1 颜色变量
```scss
// 主色调
$primary: #3b82f6; // 蓝色主色
$success: #16a34a; // 绿色成功
$danger: #dc2626; // 红色危险/错误
$warning: #f97316; // 橙色警告
// 背景色
$bg-page: #f6f7fb; // 页面背景
$bg-card: #ffffff; // 卡片背景
$bg-gray: #f3f4f6; // 灰色背景
// 文字色
$text-primary: #1f2937; // 主要文字
$text-secondary: #6b7280; // 次要文字
$text-muted: #9ca3af; // 弱化文字
```
#### 3.2 常用样式类
```scss
// 页面容器
.page {
min-height: 100vh;
background: #f6f7fb;
padding: 24rpx;
}
// 卡片样式
.card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 20rpx;
}
// 标签切换
.tabs {
display: flex;
background: #fff;
border-radius: 16rpx;
padding: 8rpx;
margin-bottom: 20rpx;
.tab {
flex: 1;
text-align: center;
padding: 20rpx 0;
font-size: 28rpx;
color: #6b7280;
border-radius: 12rpx;
&.active {
background: #3b82f6;
color: #fff;
font-weight: 600;
}
}
}
// 表单项
.form-item {
margin-bottom: 24rpx;
.label {
font-size: 28rpx;
color: #374151;
margin-bottom: 12rpx;
display: block;
}
.input, .textarea {
background: #f9fafb;
border-radius: 12rpx;
padding: 20rpx;
font-size: 28rpx;
}
}
// 按钮样式
.btn-primary {
background: #3b82f6;
color: #fff;
border-radius: 12rpx;
padding: 24rpx 0;
text-align: center;
font-size: 30rpx;
font-weight: 600;
}
```
### 4. 图片上传规范
```javascript
methods: {
// 选择图片
chooseImage() {
uni.chooseImage({
count: 9 - this.images.length,
success: (res) => {
res.tempFilePaths.forEach(path => {
this.uploadImage(path);
});
}
});
},
// 上传图片
async uploadImage(filePath) {
try {
uni.showLoading({ title: '上传中...' });
const result = await request.uploadFile(filePath, 'file');
this.images.push({ url: result.url });
} catch (e) {
uni.showToast({ title: '上传失败', icon: 'none' });
} finally {
uni.hideLoading();
}
},
// 删除图片
deleteImage(index) {
this.images.splice(index, 1);
}
}
```
### 5. 常用组件
#### 5.1 z-paging 分页组件
```vue
<z-paging
ref="paging"
v-model="records"
@query="queryList"
:layout-only="false"
:auto="true"
>
<template #top>
<!-- 顶部固定区域 -->
</template>
<!-- 列表内容 -->
<view v-for="item in records" :key="item.id">
<!-- 列表项 -->
</view>
<template #bottom>
<!-- 底部固定区域 -->
</template>
</z-paging>
```
#### 5.2 uni-calendar 日历组件
```vue
<uni-calendar
ref="calendar"
:insert="false"
:range="false"
:start-date="'2026-01-01'"
:end-date="'2099-12-31'"
@confirm="onDateConfirm"
/>
```
#### 5.3 picker 选择器
```vue
<picker
@change="onPickerChange"
:value="index"
:range="options"
:range-key="'label'"
>
<view class="picker">
{{ selectedLabel || '请选择' }}
</view>
</picker>
```
## 现有功能模块
### 已开发模块
1. **每日菜单** (`day_menu/`)
- 按日期查看菜单
- 菜品点赞/点踩
- 菜品排行
- 食堂切换
2. **报修管理** (`repair/`)
- 提交报修单
- 报修记录列表
- 图片上传
- 房屋选择
3. **投诉建议** (`complaint/`)
- 提交投诉/建议
- 历史记录
- 图片上传
4. **物资领用** (`stock/`)
- 物资列表
- 领用申请
- 领用记录
5. **祈愿菜单** (`wish_menu/`)
- 提交祈愿
- 祈愿列表
6. **公告通知** (`notice/`)
- 公告列表
- 公告详情
## 开发建议
### 新增功能步骤
1. **创建 API 接口**
- 在 `app/api/property.js` 中添加接口函数
- 遵循命名规范:`listXxx`, `createXxx`, `updateXxx`, `deleteXxx`
2. **创建页面**
- 在 `app/pages/supply_chain/` 下新建文件夹
- 创建 `index.vue` 文件
- 复制基础模板进行修改
3. **配置路由**
- 在 `app/pages.json` 中添加页面配置
- 设置页面标题和样式
4. **添加字典(如需要)**
- 确认后端已配置字典
- 在页面 `dicts` 中声明使用
### 代码复用
- **列表分页**:使用 `z-paging` 组件
- **图片上传**:参考 `repair/index.vue` 中的实现
- **表单验证**:使用 uni-app 表单验证或自定义验证
- **日期处理**:使用 `uni-calendar` 组件
### 注意事项
1. 所有接口请求使用 `useAdminUrl: true`
2. 图片上传使用 `request.uploadFile` 方法
3. 字典数据通过 `this.dict.get(key)` 获取
4. 页面背景统一使用 `#f6f7fb`
5. 卡片圆角统一使用 `16rpx`
6. 支持 H5 和微信小程序,注意平台差异处理
## 参考示例
- 表单+列表页面:参考 `repair/index.vue`
- 纯列表页面:参考 `notice/index.vue`
- 复杂交互页面:参考 `day_menu/index.vue`

@ -0,0 +1,192 @@
---
name: 权限功能开发
description: This skill should be used when developing permission-related features in the UniApp property management mini-program. It provides guidance on admin info fetching, permission checking, role validation, and integrating permission controls into components.
---
# 权限功能开发
物业小程序已集成权限管理功能,参考 PC 端 `admin/src/directive/permission` 实现。提供便捷的权限校验方式,用于控制组件或功能入口的显示隐藏。
## 相关文件
```
app/
├── api/
│ └── property.js # 管理员信息接口
├── config/
│ └── cache.js # 缓存常量
├── store/
│ ├── modules/
│ │ └── app.js # 状态管理
│ └── getters.js # 数据获取
├── utils/
│ └── auth/
│ └── permission.js # 权限校验工具
└── pages/users/login/index.vue # 登录页(已集成)
```
## 核心概念
### 管理员信息结构
```javascript
{
id: 1, // 管理员ID
account: "admin", // 账号
realName: "超管", // 真实姓名
roles: "1", // 角色标识
permissionsList: ["*:*:*"], // 权限列表
phone: "11111111111", // 手机号
status: true // 状态
}
```
### 权限标识规则
- `*:*:*` - 超管权限,拥有所有权限
- `system:user:add` - 系统管理-用户-新增
- `system:user:edit` - 系统管理-用户-编辑
## Store 使用
### Getters
```javascript
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters([
'adminInfo', // 管理员完整信息
'permissions', // 权限列表
'roles', // 角色列表
'isSuperAdmin' // 是否超管
])
}
};
```
### Actions
```javascript
// 获取管理员信息
this.$store.dispatch('ADMIN_INFO').then(res => console.log(res));
// 登录后自动获取(已在登录流程中集成)
this.$store.dispatch('LOGIN_ADMIN_INFO');
```
## 权限校验工具
文件位置:`app/utils/auth/permission.js`
### 引入方式
```javascript
import { checkPermi, checkRole, isSuperAdmin, getPermissions, getRoles, getAdminInfo } from '@/utils/auth/permission.js';
```
### 方法说明
| 方法 | 说明 | 示例 |
|------|------|------|
| `checkPermi(value)` | 权限校验 | `checkPermi('system:user:add')` |
| `checkRole(value)` | 角色校验 | `checkRole('admin')` |
| `isSuperAdmin()` | 判断超管 | `isSuperAdmin()` |
| `getPermissions()` | 获取权限列表 | `getPermissions()` |
| `getAdminInfo()` | 获取管理员信息 | `getAdminInfo()` |
## 使用示例
### 示例1v-if 控制显示
```vue
<template>
<button v-if="checkPermi('system:user:add')">添加用户</button>
<view v-if="checkRole('admin')">管理员专属区域</view>
</template>
<script>
import { checkPermi, checkRole } from '@/utils/auth/permission.js';
export default {
methods: {
addUser() {
if (!checkPermi('system:user:add')) {
uni.showToast({ title: '无操作权限', icon: 'none' });
return;
}
}
}
};
</script>
```
### 示例2computed 便捷调用
```vue
<template>
<button v-if="canAdd">添加用户</button>
<button v-if="canEdit">编辑</button>
</template>
<script>
import { checkPermi } from '@/utils/auth/permission.js';
export default {
computed: {
canAdd() { return checkPermi('system:user:add'); },
canEdit() { return checkPermi('system:user:edit'); }
}
};
</script>
```
### 示例3多个权限任一匹配
```vue
<button v-if="checkPermi(['system:user:add', 'system:user:edit'])">
新增或编辑
</button>
```
### 示例4权限指令封装
```vue
<template>
<button v-permission="'system:user:add'">添加</button>
</template>
<script>
import { permissionDirective } from '@/utils/auth/permission.js';
export default {
directives: {
permission: permissionDirective
}
};
</script>
```
## 与登录流程集成
登录成功后自动获取管理员信息(已在 `app/pages/users/login/index.vue` 集成):
```javascript
this.$store.commit("SETUID", data.uid);
getUserInfo().then(res => {
this.$store.commit("UPDATE_USERINFO", res.data);
this.$store.dispatch('LOGIN_ADMIN_INFO'); // ✅ 自动获取管理员信息
});
```
## 退出登录清理
退出登录时自动清理管理员信息(已在 `app/store/modules/app.js` 的 LOGOUT mutation 中集成)。
## 注意事项
1. **权限标识大小写敏感** - 权限标识严格区分大小写
2. **超管权限** - 拥有 `*:*:*` 权限的用户拥有所有权限
3. **登录检查** - 使用权限前确保用户已登录
4. **缓存持久化** - 管理员信息会缓存到本地Storage

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -9,6 +9,17 @@ export default {
chatUrl: state => state.app.chatUrl,
systemPlatform: state => state.app.systemPlatform,
productType: state => state.app.productType,
// 管理员账号信息
adminInfo: state => state.app.adminInfo || null,
// 管理员权限列表
permissions: state => state.app.adminInfo?.permissionsList || [],
// 管理员角色列表
roles: state => state.app.adminInfo?.roles ? [state.app.adminInfo.roles] : [],
// 是否超级管理员
isSuperAdmin: state => {
const permissions = state.app.adminInfo?.permissionsList || [];
return permissions.includes('*:*:*');
},
// 字典相关getter
dict: state => state.dict.dict,
dictData: state => state.dict.dictData,

@ -1,10 +1,14 @@
import {
getUserInfo
} from "../../api/user.js";
import {
getAdminInfoByUid
} from "../../api/property.js";
import {
LOGIN_STATUS,
UID,
PLATFORM
PLATFORM,
ADMIN_INFO
} from '../../config/cache';
import Cache from '../../utils/cache';
import {
@ -19,7 +23,9 @@ const state = {
homeActive: false,
chatUrl: Cache.get('chatUrl') || '',
systemPlatform: Cache.get(PLATFORM)?Cache.get(PLATFORM):'',
productType: Cache.get('productType') || ''
productType: Cache.get('productType') || '',
// 管理员账号信息
adminInfo: Cache.get(ADMIN_INFO) ? JSON.parse(Cache.get(ADMIN_INFO)) : null
};
const mutations = {
@ -36,10 +42,12 @@ const mutations = {
},
LOGOUT(state) {
state.token = undefined;
state.uid = undefined
state.uid = undefined;
state.adminInfo = null;
Cache.clear(LOGIN_STATUS);
Cache.clear(UID);
Cache.clear(USER_INFO);
Cache.clear(ADMIN_INFO);
},
BACKGROUND_COLOR(state, color) {
state.color = color;
@ -74,6 +82,16 @@ const mutations = {
PRODUCT_TYPE(state, productType) {
state.productType = productType;
Cache.set('productType', productType);
},
// 设置管理员账号信息
SET_ADMIN_INFO(state, adminInfo) {
state.adminInfo = adminInfo;
Cache.set(ADMIN_INFO, adminInfo);
},
// 清理管理员账号信息
CLEAR_ADMIN_INFO(state) {
state.adminInfo = null;
Cache.clear(ADMIN_INFO);
}
};
@ -88,7 +106,7 @@ const actions = {
reslove(res.data);
});
}).catch(() => {
});
// debugger
// if (state.userInfo !== null && !force)
@ -102,6 +120,28 @@ const actions = {
// }).catch(() => {
// });
},
// 获取管理员账号信息
ADMIN_INFO({ commit }) {
return new Promise((resolve, reject) => {
getAdminInfoByUid().then(res => {
commit("SET_ADMIN_INFO", res.data);
resolve(res.data);
}).catch(() => {
reject();
});
});
},
// 登录成功后获取管理员信息
LOGIN_ADMIN_INFO({ dispatch }) {
return new Promise((resolve, reject) => {
dispatch('ADMIN_INFO').then(res => {
resolve(res);
}).catch(() => {
// 管理员信息获取失败不影响主流程
resolve(null);
});
});
}
};

@ -0,0 +1,142 @@
/**
* 权限校验工具
* 用于便捷控制组件或者功能入口的显示隐藏或拦截
*/
import store from '@/store';
/**
* 字符权限校验
* @param {Array|string} value 校验值可以是数组或单个权限字符串
* @returns {Boolean}
*/
export function checkPermi(value) {
if (!value) {
console.error('[Permission] need permissions! Like checkPermi("system:user:add") or checkPermi(["system:user:add", "system:user:edit"])');
return false;
}
const permissions = store.getters?.permissions || [];
const all_permission = '*:*:*';
// 如果是单个字符串,转换为数组
const permissionList = Array.isArray(value) ? value : [value];
// 检查是否有超管权限或匹配的权限
const hasPermission = permissions.some(permission => {
return all_permission === permission || permissionList.includes(permission);
});
return hasPermission;
}
/**
* 角色权限校验
* @param {Array|string} value 校验值可以是数组或单个角色名
* @returns {Boolean}
*/
export function checkRole(value) {
if (!value) {
console.error('[Permission] need roles! Like checkRole("admin") or checkRole(["admin", "editor"])');
return false;
}
const roles = store.getters?.roles || [];
const super_admin = 'admin';
// 如果是单个字符串,转换为数组
const roleList = Array.isArray(value) ? value : [value];
// 检查是否有超管角色或匹配的角色
const hasRole = roleList.some(role => {
return super_admin === role || roles.includes(role);
});
return hasRole;
}
/**
* 判断是否是超级管理员
* @returns {Boolean}
*/
export function isSuperAdmin() {
const permissions = store.getters?.permissions || [];
return permissions.includes('*:*:*');
}
/**
* 获取权限列表
* @returns {Array}
*/
export function getPermissions() {
return store.getters?.permissions || [];
}
/**
* 获取角色列表
* @returns {Array}
*/
export function getRoles() {
return store.getters?.roles || [];
}
/**
* 获取管理员信息
* @returns {Object|null}
*/
export function getAdminInfo() {
return store.getters?.adminInfo || null;
}
/**
* 权限指令配置
* 用于 v-permission 指令
* 使用方式: v-permission="['system:user:add']" v-permission="'system:user:add'"
*/
export const permissionDirective = {
inserted(el, binding) {
const { value } = binding;
if (!value) {
console.warn('[Permission Directive] need permission value, like v-permission="\'system:user:add\'"');
return;
}
if (!checkPermi(value)) {
el.parentNode && el.parentNode.removeChild(el);
}
}
};
/**
* 角色指令配置
* 用于 v-role 指令
* 使用方式: v-role="['admin']" v-role="'admin'"
*/
export const roleDirective = {
inserted(el, binding) {
const { value } = binding;
if (!value) {
console.warn('[Role Directive] need role value, like v-role="\'admin\'"');
return;
}
if (!checkRole(value)) {
el.parentNode && el.parentNode.removeChild(el);
}
}
};
// 导出默认对象
export default {
checkPermi,
checkRole,
isSuperAdmin,
getPermissions,
getRoles,
getAdminInfo,
permissionDirective,
roleDirective
};

@ -19,7 +19,7 @@ const JSONbigString = JSONBig({ storeAsString: true });
function baseRequest(url, method, data, {
noAuth = false,
noVerify = false,
useAdminUrl = false
useAdminUrl = false,
}, params) {
let Url = useAdminUrl ? HTTP_ADMIN_URL : HTTP_REQUEST_URL, header = HEADER
if (params != undefined) {
@ -39,7 +39,7 @@ function baseRequest(url, method, data, {
const apiPrefix = useAdminUrl ? '/api/' : '/api/front/'
// 当使用admin URL时统一添加uid参数
let requestData = data || {};
if (useAdminUrl && store.state.app.uid) {
if (requestData.uid === undefined && useAdminUrl && store.state.app.uid) {
requestData.uid = store.state.app.uid;
}
uni.request({

Loading…
Cancel
Save