combination-tall/src/pages/project/project.vue

<template>
  <view :style="{ height: height }" class="flex flex-col overflow-hidden">
    <!-- 标题栏 -->
    <Title />
    <view class="container flex flex-col flex-1 overflow-hidden bg-gray-100">
      <!-- 角色栏 -->
      <Roles @getTasksByRole="getTasksByRole" />
      <Globals :tasks="allPlugins.concat(timePlugins)" />
      <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="child" />
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
  data() {
    return { height: '', plugins: [], allPlugins: [], timePlugins: [] };
  },

  computed: {
    ...mapState('user', ['user', 'token']),
    ...mapState('home', ['visibleRoles', 'roleId', 'timeNode', 'timeUnit', 'tasks']),
  },

  onLoad(options) {
    this.init(options);
  },

  watch: {
    /**
     * 当时间基准点发生变化时
     * 重新根据时间和角色查询普通日常任务
     * 永久日常任务不发生改变
     */
    async timeNode(val) {
      if (val) {
        // 根据时间和角色查找日常任务
        await this.getGlobal();
      }
    },
    /**
     * 当角色发生变化时
     * 重新查询永久日常任务和普通日常任务
     */
    async roleId(val) {
      if (val) {
        this.setTimeNode(new Date().getTime());
        // 根据角色查找永久的日常任务
        await this.getPermanent();
        // 根据时间和角色查找日常任务
        await this.getGlobal();
      }
    },
  },

  mounted() {
    this.height = window.screen.height + 'px';
  },

  methods: {
    ...mapMutations('home', [
      'setProject',
      'setInvisibleRoles',
      'setVisibleRoles',
      'setRoleId',
      'setUpTasks',
      'setDownTasks',
      'setDailyTasks',
      'setProjectName',
      'setTimeNode',
    ]),
    ...mapActions('user', ['getUserId']),
    ...mapActions('home', ['getProjectById', 'getRoles', 'handleRegularTask']),
    ...mapMutations('user', ['setToken']),

    /**
     * 初始化
     * @param {object | null} options
     */
    async init(options) {
      try {
        if (!this.token) {
          // store里没有token 再从本地去取
          const TOKEN = this.$t.storage.getStorageSync(this.$t.app.tokenKey);
          if (TOKEN) {
            // 如果本地有token 就更新到store里边
            this.setToken(TOKEN);
          } else {
            // 没有token 根据userId获取到token
            if (!options || !options.u) {
              // 参数里没有u (userId)提示
              this.$t.ui.showToast('缺少用户信息参数');
            } else {
              await this.getUserId(options.u);
            }
          }
        }

        // 参数里有项目名称  就设置标题里的项目名称
        options && options.pname && this.setProjectName(options.pname);

        if (!options || !options.p) {
          // 没有项目id参数
          this.$t.ui.showToast('缺少项目信息参数');
        } else {
          // 根据项目id获取项目信息
          await this.getProjectById({ projectId: options.p });
          // 根据项目id获取角色列表
          await this.getRoles({ projectId: options.p });
          this.setInitialRoleId(this.visibleRoles);

          // 根据时间基准点和角色查找定期任务
          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 });
            await this.getTasks({ timeNode: +this.tasks[this.tasks.length - 1].planStart, queryType: 1, queryNum: 6 });
          }
        }
      } catch (error) {
        console.error('project init function:', error);
      }
    },

    // 设置 初始显示角色信息
    setInitialRoleId(visibleList) {
      const index = visibleList.findIndex(item => item.mine);
      const currentRole = index > 0 ? visibleList[index] : visibleList[0];
      const currentRoleId = currentRole ? currentRole.id : '';
      this.setRoleId(currentRoleId);
    },

    /**
     * 根据时间基准点和角色查找定期任务
     * @param {string} roleId 角色id
     * @param {string} timeNode 时间基准点 默认当前
     * @param {string} timeUnit 时间颗粒度 默认天
     * @param {string} queryNum 查找颗粒度数量 默认3个
     * @param {string} 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;
      } catch (error) {
        console.log('error: ', error);
      }
    },

    /**
     * 根据时间和角色查找日常任务
     * @param {string} roleId 角色id
     * @param {string} timeNode 时间基准点 默认当前
     * @param {string} timeUnit 时间颗粒度 默认天
     */
    async getGlobal() {
      try {
        this.timePlugins = [];
        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);
      }
    },

    // 切换角色获取任务
    async getTasksByRole() {
      try {
        await this.getTasks({ queryType: 0 });
        await this.getTasks({ queryType: 1 });
        // 查上页的任务
        const upQuery = {
          timeNode: +this.tasks[0].planStart,
          queryType: 0,
          queryNum: 6,
        };
        await this.getTasks(upQuery);

        // 查下页的任务
        // 时间基准点=最后一个任务的开始时间+当前时间颗粒度
        const cycle = this.$t.time.computeCycle('天');
        const timeNode = this.$t.time.add(+this.tasks[this.tasks.length - 1].planStart, 1, cycle).valueOf();
        const downQuery = {
          timeNode,
          queryType: 1,
          queryNum: 6,
        };
        await this.getTasks(downQuery);
      } catch (error) {
        console.log('error: ', error);
      }
    },
  },
};
</script>