# 用户创建任务权限前端控制功能说明

## 功能概述

在用户登录后，系统会返回 `canCreateTask` 字段到 `getInfo` 接口响应中，并存储到 APP 的 Vuex store。当用户在任务创建页面点击任务类型时，会检查该权限字段，如果值为 `'0'`（无权限），则弹出提示"您没有权限创建任务"，阻止用户进入任务创建表单页面。

## 实现内容

### 1. 后端接口修改

#### 1.1 getInfo 接口返回 canCreateTask

**文件**：`ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysLoginController.java`

**修改位置**：第 236-245 行

**修改内容**：
```java
AjaxResult ajax = AjaxResult.success();
ajax.put("user", user);
ajax.put("roles", roles);
ajax.put("permissions", permissions);
ajax.put("branchCompanyId", branchCompanyId);
ajax.put("branchCompanyName", branchCompanyName);
ajax.put("branchCompanies", branchCompanies);
ajax.put("oaUserId", user.getOaUserId());
ajax.put("canCreateTask", user.getCanCreateTask());  // ✅ 新增
return ajax;
```

**说明**：在 getInfo 接口返回的 JSON 中添加 `canCreateTask` 字段，其值来自 `SysUser.canCreateTask`。

---

### 2. APP 端存储层修改

#### 2.1 添加 constant 常量

**文件**：`app/utils/constant.js`

**修改内容**：
```javascript
const constant = {
   userId: 'vuex_userId',
   avatar: 'vuex_avatar',
   name: 'vuex_name',
   nickName: 'vuex_nickName',
   roles: 'vuex_roles',
   permissions: 'vuex_permissions',
   deptId: 'vuex_deptId',
   branchCompanyId: 'vuex_branchCompanyId',
   branchCompanyName: 'vuex_branchCompanyName',
   oaUserId: 'vuex_oaUserId',
   canCreateTask: 'vuex_canCreateTask'  // ✅ 新增
}
```

**说明**：添加 `canCreateTask` 的存储键名常量，用于在本地存储中保存该字段。

---

#### 2.2 Vuex State 添加字段

**文件**：`app/store/modules/user.js`

**修改位置 1**：第 11-23 行

```javascript
state: {
  token: getToken(),
  userId: storage.get(constant.userId),
  name: storage.get(constant.name),
  nickName: storage.get(constant.nickName),
  avatar: storage.get(constant.avatar),
  roles: storage.get(constant.roles),
  permissions: storage.get(constant.permissions),
  deptId: storage.get(constant.deptId),
  branchCompanyId: storage.get(constant.branchCompanyId),
  branchCompanyName: storage.get(constant.branchCompanyName),
  oaUserId: storage.get(constant.oaUserId),
  canCreateTask: storage.get(constant.canCreateTask)  // ✅ 新增
},
```

**说明**：在 Vuex state 中添加 `canCreateTask` 字段，从本地存储中读取初始值。

---

**修改位置 2**：第 65-72 行（mutations）

```javascript
SET_OA_USER_ID: (state, oaUserId) => {
  state.oaUserId = oaUserId
  storage.set(constant.oaUserId, oaUserId)
},
SET_CAN_CREATE_TASK: (state, canCreateTask) => {  // ✅ 新增
  state.canCreateTask = canCreateTask
  storage.set(constant.canCreateTask, canCreateTask)
}
```

**说明**：添加 `SET_CAN_CREATE_TASK` mutation，用于更新 state 和本地存储。

---

**修改位置 3**：第 119-132 行（GetInfo Action）

```javascript
commit('SET_USER_ID', userId)
commit('SET_NAME', username)
commit('SET_NICK_NAME', nickname)
commit('SET_AVATAR', avatar)
commit('SET_DEPT_ID', deptId)
commit('SET_BRANCH_COMPANY_ID', res.branchCompanyId)
commit('SET_BRANCH_COMPANY_NAME', res.branchCompanyName)
commit('SET_OA_USER_ID', res.oaUserId)
commit('SET_CAN_CREATE_TASK', res.canCreateTask)  // ✅ 新增
resolve(res)
```

**说明**：在 GetInfo action 中提交 `SET_CAN_CREATE_TASK` mutation，将接口返回的 `canCreateTask` 存储到 Vuex。

---

### 3. APP 端权限控制

#### 3.1 任务创建页面权限检查

**文件**：`app/pages/task/create.vue`

**修改位置 1**：第 28-30 行（引入 mapState）

```javascript
<script>
import { mapState } from 'vuex'  // ✅ 新增

export default {
```

**修改位置 2**：第 72-78 行（添加 computed）

```javascript
computed: {
  ...mapState({
    canCreateTask: state => state.user.canCreateTask
  })
},
```

**说明**：使用 Vuex 的 mapState 辅助函数，将 `canCreateTask` 映射到组件的计算属性。

---

**修改位置 3**：第 81-90 行（权限检查逻辑）

```javascript
methods: {
  selectTaskCategory(category) {
    // 检查是否有创建任务的权限
    if (this.canCreateTask !== '1') {
      this.$modal.msgError('您没有权限创建任务')
      return
    }
    
    // 跳转到对应的任务创建页面
    uni.navigateTo({
      url: `${category.page}?categoryName=${category.name}&categoryType=${category.type}&taskType=${category.taskType}`
    })
  }
}
```

**核心逻辑**：
1. 在点击任务类型时，首先检查 `this.canCreateTask` 的值
2. 如果值不等于 `'1'`，则弹出错误提示"您没有权限创建任务"，并 return 阻止后续执行
3. 只有当 `canCreateTask === '1'` 时，才允许跳转到具体的任务创建页面

---

## 数据流向

```
SQL Server (OA_User.OA_Power)
      ↓
[用户同步] CASE WHEN OA_Power LIKE '%,020101,%' THEN '1' ELSE '0' END
      ↓
MySQL (sys_user.can_create_task)
      ↓
[登录后] getInfo 接口
      ↓
{
  "user": {...},
  "canCreateTask": "1" or "0"
}
      ↓
[APP] Vuex Store (state.user.canCreateTask)
      ↓
[本地存储] vuex_canCreateTask
      ↓
[页面权限控制] create.vue 检查权限
      ↓
允许创建 or 提示"您没有权限创建任务"
```

---

## 使用场景

### 场景 1：有权限的用户

1. 用户登录后，`canCreateTask` 为 `'1'`
2. 点击底部 TabBar "创建任务" 进入任务类型选择页面
3. 点击任何一种任务类型（转运任务、维修保养、加油等）
4. **✅ 正常跳转**到对应的任务创建表单页面

### 场景 2：无权限的用户

1. 用户登录后，`canCreateTask` 为 `'0'` 或 `null`
2. 点击底部 TabBar "创建任务" 进入任务类型选择页面
3. 点击任何一种任务类型
4. **❌ 弹出提示**："您没有权限创建任务"
5. **❌ 阻止跳转**，停留在任务类型选择页面

---

## 验证方法

### 1. 后端验证

**查询用户权限**：
```sql
SELECT user_name, nick_name, can_create_task, oa_user_id
FROM sys_user
WHERE del_flag = '0'
ORDER BY can_create_task DESC;
```

**测试 getInfo 接口**：
```bash
# 登录获取 token
POST http://localhost:8080/login
{
  "username": "test_user",
  "password": "password"
}

# 获取用户信息
GET http://localhost:8080/getInfo
Authorization: Bearer {token}

# 响应示例
{
  "code": 200,
  "msg": "操作成功",
  "user": {...},
  "canCreateTask": "1"  // ✅ 确认包含此字段
}
```

---

### 2. APP 端验证

**步骤 1**：登录 APP

**步骤 2**：打开开发者工具，查看 Vuex State
```javascript
// 在控制台输入
console.log(this.$store.state.user.canCreateTask)
// 输出应为 "1" 或 "0"
```

**步骤 3**：点击底部 TabBar "创建任务"

**步骤 4**：在任务类型选择页面，点击任意任务类型

**预期结果**：
- 有权限用户（`canCreateTask === '1'`）：正常跳转到创建表单
- 无权限用户（`canCreateTask !== '1'`）：弹出提示"您没有权限创建任务"

---

## 常见问题

### Q1：新用户登录后 canCreateTask 为 null，如何处理？

**A**：需要先执行用户同步接口，从 OA 系统同步权限字段：
```bash
POST http://localhost:8080/system/dept/sync/user
```

同步后，`can_create_task` 字段会根据 OA_Power 自动填充。

---

### Q2：如何给用户开通创建任务权限？

**A**：有两种方式：

**方式 1（推荐）**：在 OA 系统中修改用户的 OA_Power 字段
- 确保 OA_Power 包含 `,020101,`（注意前后都有逗号）
- 执行用户同步接口

**方式 2**：直接修改数据库
```sql
UPDATE sys_user
SET can_create_task = '1'
WHERE user_name = '用户名';
```

**注意**：方式 2 的修改会在下次用户同步时被覆盖，建议使用方式 1。

---

### Q3：用户权限更新后，需要重新登录吗？

**A**：是的，有两种方式生效：

**方式 1**：用户退出登录，重新登录
- 登录时会调用 getInfo，获取最新的 `canCreateTask`

**方式 2**：前端主动刷新用户信息
```javascript
this.$store.dispatch('GetInfo')
```

---

### Q4：如何在前端其他页面判断用户是否有创建权限？

**A**：参考 `create.vue` 的实现方式：

```javascript
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      canCreateTask: state => state.user.canCreateTask
    })
  },
  methods: {
    checkPermission() {
      if (this.canCreateTask !== '1') {
        this.$modal.msgError('您没有权限创建任务')
        return false
      }
      return true
    }
  }
}
```

---

## 注意事项

1. **字段类型**：`canCreateTask` 是字符串类型 `CHAR(1)`，值为 `'0'` 或 `'1'`，比较时必须使用字符串
   - ✅ 正确：`canCreateTask !== '1'`
   - ❌ 错误：`canCreateTask !== 1` 或 `!canCreateTask`

2. **null 值处理**：未同步的用户 `canCreateTask` 可能为 `null`
   - 在权限判断时，`null !== '1'` 返回 `true`，会阻止操作，符合安全原则

3. **数据同步**：确保定期执行用户同步，保持权限字段与 OA 系统一致

4. **前端存储**：`canCreateTask` 会同时存储在：
   - Vuex State（内存）
   - LocalStorage（持久化）
   - 页面刷新或重启 APP 时会从 LocalStorage 恢复

5. **安全性**：
   - 前端权限检查只是用户体验优化，不影响后端安全
   - 后端仍需在创建任务的接口中进行权限验证

---

## 技术总结

本次修改实现了完整的**前端权限控制流程**：

1. ✅ **后端接口**：getInfo 返回 canCreateTask
2. ✅ **数据存储**：Vuex + LocalStorage 双重存储
3. ✅ **权限检查**：页面级权限拦截
4. ✅ **用户提示**：友好的错误提示信息
5. ✅ **数据同步**：与 OA 系统权限保持一致

**优点**：
- 统一的权限数据源（OA_Power）
- 自动同步机制
- 前端快速响应，避免无效请求
- 良好的用户体验

**局限性**：
- 前端权限可被绕过（开发者工具修改）
- 需要依赖后端接口的二次验证

---

## 相关文档

- [用户创建任务单权限功能说明](./用户创建任务单权限功能说明.md)
- [用户同步功能说明](./用户同步功能说明.md)
- [Vuex 用户状态完整性优化](./Vuex用户状态完整性优化.md)