tall-mui-3-project/src/pages/project/project.vue

<template>
  <view :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14">
    <!-- 标题栏 -->
    <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';
import mixin from '@/mixins/timeline';

export default {
  mixins: [mixin],
  data() {
    return { height: '' };
  },

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

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

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

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

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

  onUnload() {
    this.clearEndFlag();
    this.clearTasks();
  },

  methods: {
    ...mapActions('user', ['getToken']),
    ...mapActions('task', ['getRegulars', 'getPermanent', 'getGlobal']),
    ...mapMutations('user', ['setToken']),
    ...mapMutations('project', ['setProject', 'setProjectName']),
    ...mapMutations('role', ['setInvisibleRoles', 'setVisibleRoles', 'setRoleId']),
    ...mapMutations('task', [
      'setPermanents',
      'setUpTasks',
      'setDownTasks',
      'setDailyTasks',
      'setTimeNode',
      'clearTasks',
      'clearEndFlag',
      'setShowSkeleton',
      'setTopEnd',
      'setBottomEnd',
    ]),

    /**
     * 初始化
     * @param {object | null} options
     */
    init(options) {
      if (!this.token) {
        // 不论有没有token都直接从userId获取token
        // token有过期时间 从本地获取可能是过期 干脆直接从userId获取
        if (!options || !options.u) {
          // 参数里没有u (userId)提示
          this.$t.ui.showToast('缺少用户信息参数');
        } else {
          this.getToken(options.u);
        }
      }

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

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

    /**
     * 通过项目id获取项目信息
     * @param {string} projectId
     * @param {object} params 提交的参数
     */
    async getProjectById(params) {
      try {
        const data = await uni.$u.api.findProjectById(params);
        this.setProject(data);
        // 根据项目id获取角色列表
        this.getRoles(params);
      } catch (error) {
        console.log('error: ', error || '获取项目信息失败');
      }
    },

    /**
     * 通过项目id获取角色信息
     * @param {string} projectId
     * @param {object} params 提交的参数
     */
    getRoles(params) {
      this.$t.$q.findShowRole(params, (err, data) => {
        if (err) {
          console.error('err: ', err || '获取角色信息失败');
        } else {
          this.setInvisibleRoles(data ? data.invisibleList : []);
          this.setVisibleRoles(data ? data.visibleList : []);
          this.setInitialRoleId(data ? data.visibleList : []);
        }
      });
    },

    // 初始化 时间轴
    async initTasks() {
      // 清空日常任务的数据
      this.setPermanents([]);
      this.setDailyTasks([]);
      // 清空定期任务数据
      this.clearTasks();
      // 到顶的标志复位
      // 到底的标志复位
      this.clearEndFlag();
      // 根据时间和角色查找日常任务
      this.getGlobalData();
      // 向上加载空数据
      this.setPrevTasks();
      // storage没有存储值就跳转到当前时间位置
      const storageTaskId = this.$t.storage.getStorageSync('taskId');
      this.$nextTick(() => {
        if (!storageTaskId) {
          this.$refs.child.setScrollPosition();
        }
      });
      // 向下加载空数据
      this.setNextTasks();

      await this.getInitTasks();
      // 根据项目id获取角色列表
      // 从详情页返回时跳转到之前的位置 storage有存储值
      this.$nextTick(() => {
        if (storageTaskId) {
          this.$refs.child.setScrollPosition();
        }
      });
    },

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

      // 预加载 上下的定期任务
      // const detailId = this.tasks.findIndex(task => task.detailId);
      // console.log('detailId: ', detailId);
      // if (detailId !== -1) {
      //   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 });
      //   });
      // } else {
      //   // 没有任务 上下显示时间刻度
      //   // 向上加载
      //   this.setPrevTasks();
      //   // 向下加载
      //   this.setNextTasks();
      // }
    },

    // 设置 初始显示角色信息
    setInitialRoleId(visibleList) {
      const index = visibleList.findIndex(item => +item.mine === 1);
      const currentRole = index > 0 ? visibleList[index] : visibleList[0];
      const storageRoleId = this.$t.storage.getStorageSync('roleId');
      const currentRoleId = storageRoleId ? storageRoleId : currentRole ? currentRole.id : '';
      this.setRoleId(currentRoleId);
      // 清空storage
      this.$t.storage.setStorageSync('roleId', '');
    },

    /**
     * 根据时间基准点和角色查找定期任务
     * @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向下查找(默认) 下查包含自己，上查不包含
     */
    getTasks(query) {
      this.setShowSkeleton(true);
      const { roleId, timeNode, timeUnit, projectId } = this;
      const params = {
        roleId,
        timeNode: query.timeNode || timeNode,
        timeUnit: query.timeUnit || timeUnit,
        queryNum: query.queryNum || 3,
        queryType: query.queryType,
        projectId,
      };
      this.$t.$q.getRegularTask(params, (err, data) => {
        if (err) {
          this.setShowSkeleton(false);
          console.error('err: ', err);
        } else {
          this.setShowSkeleton(false);
          // 0 -> 向上  1 -> 向下
          if (data && data.length) {
            console.log('data: ', data);
            this.replacePrevData(data, params.queryType);
          } else {
            params.queryType === 0 ? this.setPrevTasks() : this.setNextTasks();
          }
        }
      });
    },

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

    // 设置时间轴向上的空数据
    setPrevTasks() {
      this.setTopEnd(true);
      let sTime = '';
      if (!this.tasks || !this.tasks.length) {
        sTime = +new Date().getTime();
      } else {
        sTime = +this.tasks[0].planStart - 0;
      }
      const initData = this.setTime(sTime, true);
      this.setUpTasks(initData);
    },

    // 设置时间轴向下的空数据
    setNextTasks() {
      this.setBottomEnd(true);
      let sTime = '';
      if (!this.tasks || !this.tasks.length) {
        sTime = +new Date().getTime();
      } else {
        sTime = +this.tasks[this.tasks.length - 1].planStart - 0;
      }
      const initData = this.setTime(sTime, false);
      this.setDownTasks(initData);
    },

    // 筛选相同的时间替换数据
    replacePrevData(data, type) {
      let newTasks = [...this.tasks];
      for (let i = 0; i < newTasks.length; i++) {
        const task = newTasks[i];
        let arr = [];
        for (let j = 0; j < data.length; j++) {
          const item = data[j];
          // 查找有没有超出时间刻度的时间
          if (+newTasks[0].planStart > +data[0].planStart) {
            this.setPrevTasks();
            newTasks = [...this.tasks];
            i--;
            break;
          } else if (+data[data.length - 1].planStart > +newTasks[newTasks.length - 1].planStart) {
            this.setNextTasks();
            newTasks = [...this.tasks];
            i--;
            break;
          } else {
            // 筛选相同的时间替换数据
            const taskItem = this.$t.time.isSame(+task.planStart, +item.planStart, this.timeGranularity);
            if (taskItem) {
              arr.push(item);
              if (task.detailId) {
                newTasks.splice(i, 0, item);
              } else {
                if (arr.length === 1) {
                  newTasks.splice(i, 1, item);
                }
                if (arr.length > 1) {
                  newTasks.splice(i, 0, item);
                }
              }
              i++;
            }
          }
        }
      }
      this.clearTasks();
      type === 0 ? this.setUpTasks(newTasks) : this.setDownTasks(newTasks);
    },
  },
};
</script>