fix(task任务逻辑完善): 减少初始global及regular的不必要请求

1. globals通过getters整合; 2. globals 请求放到了store/task 3.初始没数据不继续请求

CHANGELOG.md

@@ -88,6 +88,7 @@
  store/home | 删除store/home | db8a3b4
  template | eslint prettier sass uview tailwindcss | 9c966a1
  - | 下滑时间轴添加备注 | 4fd20e3
+ - | 删除多余的技术验证界面 | 542ae5b
  - | 界面样式调整 | 4367249
  - | 重构store分层 | 5f6fff8
 

src/components/Globals/Globals.vue

@@ -1,11 +1,11 @@
 <template>
-  <view class="m-2">
+  <view class="m-2" v-if="globals && globals.length">
     <u-card :show-foot="false" :show-head="false" :style="{ height: isShrink ? '106rpx' : '340rpx' }" border-radius="25" margin="0">
       <view slot="body">
         <scroll-view :scrollY="true" :style="{ height: isShrink ? '50rpx' : '280rpx' }">
-          <skeleton :banner="false" :loading="!tasks.length" :row="4" animate class="u-line-2 skeleton"></skeleton>
+          <skeleton :banner="false" :loading="!globals.length" :row="4" animate class="u-line-2 skeleton"></skeleton>
           <view class="grid gap-2">
-            <template v-for="item in tasks">
+            <template v-for="item in globals">
               <template v-if="item.plugins">
                 <template v-for="pluginArr in item.plugins">
                   <template class="p-0 u-col-between" v-if="pluginArr.length">
@@ -29,13 +29,13 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import Skeleton from '@/components/Skeleton/Skeleton';
 
 export default {
   name: 'Global',
   components: { Skeleton },
-  props: { tasks: { type: Array, default: () => [] } },
+
   data() {
     return {
       // loading: true,
@@ -43,7 +43,10 @@ export default {
     };
   },
 
-  computed: mapState('task', ['isShrink']),
+  computed: {
+    ...mapState('task', ['isShrink']),
+    ...mapGetters('task', ['globals']),
+  },
 
   methods: {
     getClass(col, row) {

src/components/TimeLine/TimeLine.vue

@@ -57,9 +57,6 @@ export default {
     async handleScrollTop() {
       if (this.topEnd) return;
       const startTime = this.tasks[0].planStart - 0;
-      console.log('this.topEnd: ', this.topEnd);
-      console.log('this.tasks: ', this.tasks);
-      console.log('this.tasks[0].plugins: ', this.tasks[0].plugins);
       if (this.tasks[0].plugins && this.tasks[0].plugins.length === 0 && !this.topEnd) {
         // 没有数据时 自动加载数据
         console.log('没有数据时: ');
@@ -99,7 +96,6 @@ export default {
       const startTime = this.tasks[this.tasks.length - 1].planStart - 0;
       if (this.tasks[0].plugins && this.tasks[0].plugins.length === 0 && !this.topEnd) {
         // 没有数据时 自动加载数据
-        console.log('没有数据时: ');
         const addTasks = [
           {
             panel: {},

src/pages/project/project.vue

@@ -5,7 +5,9 @@
     <view class="container flex flex-col flex-1 overflow-hidden bg-gray-100" style="margin: auto">
       <!-- 角色栏 -->
       <Roles @getTasksByRole="getTasksByRole" />
-      <Globals :tasks="allPlugins.concat(timePlugins)" />
+      <!-- 日常任务面板 -->
+      <Globals />
+      <!-- 定期任务面板 -->
       <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="child" />
     </view>
   </view>
@@ -16,7 +18,7 @@ import { mapState, mapMutations, mapActions } from 'vuex';
 
 export default {
   data() {
-    return { height: '', plugins: [], allPlugins: [], timePlugins: [] };
+    return { height: '' };
   },
 
   computed: {
@@ -35,24 +37,24 @@ export default {
      * 重新根据时间和角色查询普通日常任务
      * 永久日常任务不发生改变
      */
-    async timeNode(val) {
-      if (val) {
+    timeNode(val) {
+      if (val && this.roleId) {
         // 根据时间和角色查找日常任务
-        await this.getGlobal();
+        this.getGlobalData();
       }
     },
 
     /**
      * 当角色发生变化时
      * 重新查询永久日常任务和普通日常任务
+     * 注意: 切换角色后 重新设置了时间基准点 时间基准点一定会变
+     * 所以监听时间基准点获取 可变日常任务即可 这里不用获取 避免重复获取
      */
-    async roleId(val) {
+    roleId(val) {
       if (val) {
-        this.setTimeNode(new Date().getTime());
+        this.setTimeNode(Date.now());
         // 根据角色查找永久的日常任务
-        await this.getPermanent();
-        // 根据时间和角色查找日常任务
-        await this.getGlobal();
+        this.getPermanent(val);
       }
     },
   },
@@ -65,7 +67,7 @@ export default {
     ...mapActions('user', ['getUserId']),
     ...mapActions('project', ['getProjectById']),
     ...mapActions('role', ['getRoles']),
-    ...mapActions('task', ['handleRegularTask']),
+    ...mapActions('task', ['getRegulars', 'getPermanent', 'getGlobal']),
     ...mapMutations('user', ['setToken']),
     ...mapMutations('project', ['setProject', 'setProjectName']),
     ...mapMutations('role', ['setInvisibleRoles', 'setVisibleRoles', 'setRoleId']),
@@ -105,10 +107,6 @@ export default {
           await this.getTasks({ queryType: 0 });
           await this.getTasks({ queryType: 1 });
 
-          // 根据角色查找 永久的日常任务
-          await this.getPermanent();
-          // 根据时间和角色查找 可变的日常任务
-          await this.getGlobal();
           // 预加载 上下的定期任务
           if (this.tasks && this.tasks.length) {
             await this.getTasks({ timeNode: +this.tasks[0].planStart, queryType: 0, queryNum: 6 });
@@ -130,68 +128,33 @@ export default {
 
     /**
      * 根据时间基准点和角色查找定期任务
-     * @param {string} roleId 角色id
-     * @param {string} timeNode 时间基准点 默认当前
-     * @param {string} timeUnit 时间颗粒度 默认天
-     * @param {string} queryNum 查找颗粒度数量 默认3个
-     * @param {string} queryType 0向上查找 1向下查找(默认) 下查包含自己，上查不包含
+     * @param {object} query
+     * @param {string} query.roleId 角色id
+     * @param {string} query.timeNode 时间基准点 默认当前
+     * @param {string} query.timeUnit 时间颗粒度 默认天
+     * @param {string} query.queryNum 查找颗粒度数量 默认3个
+     * @param {string} query.queryType 0向上查找 1向下查找(默认) 下查包含自己，上查不包含
      */
     async getTasks(query) {
       try {
         const { roleId, timeNode, timeUnit } = this;
-        const params = { roleId };
-        params.timeNode = query.timeNode || timeNode;
-        params.timeUnit = query.timeUnit || timeUnit;
-        params.queryNum = query.queryNum || 3;
-        params.queryType = query.queryType;
-        const res = await this.handleRegularTask(params);
-        query.queryType === 0 ? this.setUpTasks(res) : this.setDownTasks(res);
-      } catch (error) {
-        console.log('error: ', error);
-      }
-    },
-
-    /**
-     * 根据角色查找永久的日常任务
-     * @param {string} roleId 角色id
-     */
-    async getPermanent() {
-      try {
-        this.allPlugins = [];
-        const res = await this.$u.api.getPermanent({ roleId: this.roleId });
-        // for (let item of res) {
-        // if (item.plugins) {
-        // this.allPlugins = this.allPlugins.concat(item.plugins);
-        // }
-        // }
-        this.allPlugins = res;
+        const params = {
+          roleId,
+          timeNode: query.timeNode || timeNode,
+          timeUnit: query.timeUnit || timeUnit,
+          queryNum: query.queryNum || 3,
+          queryType: query.queryType,
+        };
+        await this.getRegulars(params);
       } catch (error) {
         console.log('error: ', error);
       }
     },
 
-    /**
-     * 根据时间和角色查找日常任务
-     * @param {string} roleId 角色id
-     * @param {string} timeNode 时间基准点 默认当前
-     * @param {string} timeUnit 时间颗粒度 默认天
-     */
-    async getGlobal() {
-      try {
-        this.timePlugins = [];
+    getGlobalData() {
       const { roleId, timeNode, timeUnit } = this;
-        const params = { roleId, timeNode, timeUnit };
-        const res = await this.$u.api.getGlobal(params);
-        // for (let task of res) {
-        //   for (let item of task.plugins) {
-        //     this.timePlugins.push(...item);
-        //   }
-        // }
-        this.timePlugins = res;
-        this.setDailyTasks(res);
-      } catch (error) {
-        console.log('error: ', error);
-      }
+      const param = { roleId, timeNode, timeUnit };
+      this.getGlobal(param);
     },
 
     // 切换角色获取任务

src/store/task/actions.js

@@ -1,14 +1,48 @@
 const actions = {
   /**
-   * 根据时间基准点和角色查找定期任务
+   * 根据角色查找永久的日常任务
+   * @param {*} commit
    * @param {string} roleId 角色id
-   * @param {string} timeNode 时间基准点 默认当前
-   * @param {string} timeUnit 时间颗粒度 默认天
+   */
+  async getPermanent({ commit }, roleId) {
+    try {
+      const data = await uni.$u.api.getPermanent({ roleId });
+      commit('setPermanents', data);
+    } catch (error) {
+      console.log('task actions getPermanent error: ', error);
+    }
+  },
+
+  /**
+   * 根据时间和角色查找日常任务
+   * @param {*} commit
+   * @param {object} param 请求参数
+   */
+  async getGlobal({ commit }, param) {
+    try {
+      const data = await uni.$u.api.getGlobal(param);
+      commit('setDailyTasks', data);
+    } catch (error) {
+      console.log('task actions getGlobal error: ', error);
+    }
+  },
+
+  /**
+   * 根据时间基准点和角色查找定期任务
+   * @param {object} param 查询参数
+   * @param {number} param.queryType 必填  0 -> 向上  1 -> 向下
    */
   // eslint-disable-next-line
-  async handleRegularTask({ commit }, param) {
+  async getRegulars({ commit, state }, param) {
     try {
-      return await uni.$u.api.getRegularTask(param);
+      // 向上查 且 上边没数据了 不查
+      if (param.queryType === 0 && state.topEnd) return;
+      // 向下查 且 下边美术家了 不查
+      if (param.queryType === 1 && state.bottomEnd) return;
+      const data = await uni.$u.api.getRegularTask(param);
+      // 0 -> 向上  1 -> 向下
+      // data 有无的判断在mutations里
+      param.queryType === 0 ? commit('setUpTasks', data) : commit('setDownTasks', data);
     } catch (error) {
       throw error || '获取定期任务失败';
     }

src/store/task/getters.js

@@ -1,3 +1,8 @@
-const getters = {};
+const getters = {
+  // 所有的日常任务 永久 + 可变 日常任务
+  globals({ dailyTasks, permanents }) {
+    return [...permanents, ...dailyTasks];
+  },
+};
 
 export default getters;

src/store/task/mutations.js

@@ -137,6 +137,15 @@ const mutations = {
   setDailyTasks(state, data) {
     state.dailyTasks = data || [];
   },
+
+  /**
+   * 设置永久固定任务
+   * @param {object} state
+   * @param {array} tasks 服务端查询到的永久日常任务书籍
+   */
+  setPermanents(state, tasks) {
+    state.permanents = tasks || [];
+  },
 };
 
 export default mutations;

src/store/task/state.js

@@ -9,7 +9,12 @@ const state = {
   status: 0, // 点击了时间轴上的哪种样式，默认点击了开始
   tipsContent: '', // 提示框内的内容，需要传入
   timeNode: new Date().getTime(), // 时间基准点
-  timeUnit: 4, // // 时间颗粒度
+  timeUnit: 4, // 时间颗粒度
+  topEnd: false, // 时间轴向上查任务到顶了
+  bottomEnd: false, // 时间轴向下查任务到底了
+  permanents: [], // 永久日常任务
+  dailyTasks: [], // 日常任务
+  // 定期任务
   tasks: [
     {
       panel: {},
@@ -26,10 +31,7 @@ const state = {
       plugins: [],
       planStart: uni.$t.time.add(+new Date().getTime(), 1, 'day').valueOf(),
     },
-  ], // 定期任务
-  topEnd: false, // 时间轴向上查任务到顶了
-  bottomEnd: false, // 时间轴向下查任务到底了
-  dailyTasks: [], // 日常任务
+  ],
 };
 
 export default state;