增加任务管理模块

2025-11-12 17:32:03 +08:00
parent 12a0ff8afc
commit db16ee70de
54 changed files with 3638 additions and 672 deletions
@@ -56,11 +56,46 @@ dictStore.clearCache('user_status')

 ---

+### 2. **常量**: `src/constants/dictCodes.js`

+集中管理所有字典编码
+
+**使用示例**：
+```javascript
+import { DICT_CODES } from '@/constants/dictCodes'
+
+// 好处：避免硬编码，IDE 有自动完成
+const items = await dictStore.getDictItems(DICT_CODES.USER_STATUS)
+
+// 所有可用的编码：
+DICT_CODES.USER_STATUS      // 用户状态
+DICT_CODES.USER_GENDER      // 用户性别
+DICT_CODES.USER_ROLE        // 用户角色
+DICT_CODES.DEPT_STATUS      // 部门状态
+DICT_CODES.POSITION_STATUS  // 职位状态
+// ... 更多编码
+```

 ---

+### 3. **Composable**: `src/composables/useDict.js`

+简化在组件中使用字典的 Hook
+
+**基础用法**：
+```javascript
+import { useDictionary, useUserStatusDict } from '@/composables/useDict'
+import { DICT_CODES } from '@/constants/dictCodes'
+
+// 方式1：使用常量
+const { statusDict, loading } = useDictionary(DICT_CODES.USER_STATUS)
+
+// 方式2：使用字符串
+const { dicts, loading } = useDictionary('user_status')
+
+// 方式3：使用特化 Hook（推荐）
+const { user_statusDict, loading } = useUserStatusDict()
+```

 ---

@@ -126,9 +161,9 @@ const props = defineProps({

 ---

-### 场景3：直接使用字典Store
+### 场景3：快速使用 Composable Hook

-直接使用字典Store获取数据：
+最简单的方式，自动处理加载：

 ```vue
 <template>
@@ -136,7 +171,7 @@ const props = defineProps({
    <p v-if="loading">加载中...</p>
    <el-select v-else v-model="status">
      <el-option 
-        v-for="item in statusDict"
+        v-for="item in user_statusDict"
        :key="item.dict_value"
        :label="item.dict_label"
        :value="item.dict_value"
@@ -146,30 +181,11 @@ const props = defineProps({
 </template>

 <script setup>
-import { useDictStore } from '@/stores/dict'
-import { ref, onMounted } from 'vue'
+import { useUserStatusDict } from '@/composables/useDict'
+import { ref } from 'vue'

-const dictStore = useDictStore()
-const status = ref('1')
-const statusDict = ref([])
-const loading = ref(false)
-
-const fetchStatusDict = async () => {
-  loading.value = true
-  try {
-    const items = await dictStore.getDictItems('user_status')
-    statusDict.value = items
-  } catch (error) {
-    console.error('获取用户状态字典失败:', error)
-    statusDict.value = []
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(() => {
-  fetchStatusDict()
-})
+const status = ref('active')
+const { user_statusDict, loading } = useUserStatusDict()
 </script>
 ```

@@ -183,6 +199,7 @@ onMounted(() => {
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { useDictStore } from '@/stores/dict'
+import { DICT_CODES } from '@/constants/dictCodes'

 const app = createApp(App)
 const pinia = createPinia()
@@ -192,9 +209,9 @@ app.use(pinia)
 // 在应用启动后预加载常用字典
 const dictStore = useDictStore()
 await dictStore.preloadDicts([
-  'user_status',
-  'common_status',
-  'yes_no',
+  DICT_CODES.USER_STATUS,
+  DICT_CODES.COMMON_STATUS,
+  DICT_CODES.YES_NO,
 ])

 app.mount('#app')
@@ -238,29 +255,29 @@ app.mount('#app')

 ### ✅ DO

-1. **使用字符串而不是硬编码数字**
+1. **使用常量而不是硬编码字符串**
   ```javascript
   // ✅ 好
-   dictStore.getDictItems('user_status')
+   dictStore.getDictItems(DICT_CODES.USER_STATUS)
   
   // ❌ 差
-   // 避免直接使用数字，应该使用字符串
+   dictStore.getDictItems('user_status')
   ```

 2. **在父组件加载，通过 props 传给子组件**
   ```javascript
   // ✅ 父组件负责数据，子组件负责展示
   // index.vue
-   const statusDict = await dictStore.getDictItems('user_status')
+   const statusDict = await dictStore.getDictItems(DICT_CODES.USER_STATUS)
   
   // UserEdit.vue
   const props = defineProps({ statusDict: Array })
   ```

-3. **直接使用字典Store**
+3. **用 Composable 简化组件逻辑**
   ```javascript
-   // ✅ 直接使用Store获取数据
-   const statusDict = await dictStore.getDictItems('user_status')
+   // ✅ 一行代码搞定
+   const { user_statusDict, loading } = useUserStatusDict()
   ```

 4. **预加载常用字典**
@@ -354,12 +371,14 @@ const item = items.find(i =>

 ## 集成检清表

- [x] 创建 `src/stores/dict.js` - Store
- [x] 在 `index.vue` 中导入 `useDictStore`
- [x] 在 `UserEdit.vue` 中使用 `useDictStore` 获取字典数据
- [x] 测试字典加载和显示
- [x] 验证缓存功能（打开浏览器 DevTools 检查 Network）
- [x] 预加载常用字典（可选）
+- [ ] 创建 `src/stores/dict.js` - Store
+- [ ] 创建 `src/constants/dictCodes.js` - 常量
+- [ ] 创建 `src/composables/useDict.js` - Composable
+- [ ] 在 `index.vue` 中导入 `useDictStore`
+- [ ] 在 `UserEdit.vue` 中接收 `statusDict` props
+- [ ] 测试字典加载和显示
+- [ ] 验证缓存功能（打开浏览器 DevTools 检查 Network）
+- [ ] 预加载常用字典（可选）

 ---

@@ -367,8 +386,8 @@ const item = items.find(i =>

 已修改的文件：
 - ✅ `src/stores/dict.js` - 新建
+- ✅ `src/constants/dictCodes.js` - 新建
+- ✅ `src/composables/useDict.js` - 新建
 - ✅ `src/views/system/users/index.vue` - 使用 `useDictStore`
- ✅ `src/views/system/users/components/UserEdit.vue` - 使用字典功能
- ✅ `src/constants/dictCodes.js` - 删除（不再需要）
- ✅ `src/composables/useDict.js` - 删除（不再需要）
+- ✅ `src/views/system/users/components/UserEdit.vue` - 导入字典库