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

<template>
  <view :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14">
    <!-- 全局提示框 -->
    <u-alert-tips
      class="top-0 -inset-x-0"
      style="position: fixed !important; z-index: 999"
      type="error"
      :close-able="true"
      :title="alert.title"
      :show="alert.show"
      :description="alert.description"
      @close="alert.show = false"
    ></u-alert-tips>

    <!-- 标题栏 -->
    <Title />

    <view class="container flex flex-col flex-1 overflow-hidden bg-gray-100" style="margin: auto">
      <!-- 角色栏 -->
      <Roles />

      <!-- 日常任务面板 -->
      <Globals />

      <!-- 定期任务面板 -->
      <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="child" />
    </view>
  </view>
</template>

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

export default {
  data() {
    return { height: '' };
  },

  computed: {
    ...mapState('user', ['user', 'token']),
    ...mapState('role', ['visibleRoles', 'roleId']),
    ...mapState('task', ['timeNode', 'timeUnit', 'tasks']),
    ...mapState('project', ['alert']),
    ...mapGetters('task', ['timeGranularity']),
  },

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

  watch: {
    /**
     * 当时间基准点发生变化时
     * 重新根据时间和角色查询普通日常任务
     * 永久日常任务不发生改变
     */
    timeNode(val) {
      if (val && this.roleId) {
        // 根据时间和角色查找日常任务
        this.getGlobalData();
        this.getInitTasks();
      }
    },

    /**
     * 当角色发生变化时
     * 重新查询永久日常任务和普通日常任务
     * 注意: 切换角色后 重新设置了时间基准点 时间基准点一定会变
     * 所以监听时间基准点获取 可变日常任务即可 这里不用获取 避免重复获取
     */
    roleId(val) {
      if (val) {
        this.setTimeNode(Date.now());
        // 根据角色查找永久的日常任务
        this.getPermanent(val);
      }
    },
  },

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

  methods: {
    ...mapActions('user', ['getToken']),
    ...mapActions('project', ['getProjectById']),
    ...mapActions('role', ['getRoles']),
    ...mapActions('task', ['getRegulars', 'getPermanent', 'getGlobal']),
    ...mapMutations('user', ['setToken']),
    ...mapMutations('project', ['setProject', 'setProjectName']),
    ...mapMutations('role', ['setInvisibleRoles', 'setVisibleRoles', 'setRoleId']),
    ...mapMutations('task', ['setUpTasks', 'setDownTasks', 'setDailyTasks', 'setTimeNode']),

    /**
     * 初始化
     * @param {object | null} options
     */
    async init(options) {
      try {
        if (!this.token) {
          // 不论有没有token都直接从userId获取token
          // token有过期时间 从本地获取可能是过期 干脆直接从userId获取
          if (!options || !options.u) {
            // 参数里没有u (userId)提示
            this.$t.ui.showToast('缺少用户信息参数');
          } else {
            await this.getToken(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);
        }
      } catch (error) {
        console.error('project init function:', error);
      }
    },

    // 切换了 颗粒度 || 角色时候 获取初始定期任务
    async getInitTasks() {
      // 根据时间基准点和角色查找定期任务
      await this.getTasks({ queryType: 0 });
      await this.getTasks({ queryType: 1 });

      // 预加载 上下的定期任务
      if (this.tasks && this.tasks.length) {
        this.$nextTick(() => {
          const { tasks, timeGranularity } = this;
          this.getTasks({ timeNode: +tasks[0].planStart, queryType: 0, queryNum: 6 });
          // 向下查的时候要再最后一个任务的开始时间的基础上 多加一个时间颗粒度
          const nextQueryTime = +this.$t.time.add(+tasks[tasks.length - 1].planStart, 1, timeGranularity);
          this.getTasks({ timeNode: nextQueryTime, queryType: 1, queryNum: 6 });
        });
      }
    },

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

    /**
     * 根据时间基准点和角色查找定期任务
     * @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,
          timeNode: query.timeNode || timeNode,
          timeUnit: query.timeUnit || timeUnit,
          queryNum: query.queryNum || 3,
          queryType: query.queryType,
        };

        await this.getRegulars(params);
      } catch (error) {
        console.error('error: ', error);
      }
    },

    // 获取可变全局任务
    getGlobalData() {
      const { roleId, timeNode, timeUnit } = this;
      const param = { roleId, timeNode, timeUnit };
      this.getGlobal(param);
    },
  },
};
</script>