[纯前端]打造自己的ORK管理软件

OKR(Objectives and Key Results)即目标与关键成果法,可以理解为对目标完成情况的一种管理方法。
一般需要列出当前周期的目标,然后列举一些关键结果来衡量目标的完成情况。

我个人的情况是,以每两个月为一个周期设定自己的目标。最初都是用markdown记录,每次列出表格,写下目标,结果,进度,最后给自己算分数。
[纯前端]打造自己的ORK管理软件_第1张图片
然而这个算分的过程每次都得重新计算,十分麻烦,而且表格也得手工维护,总之就是麻烦。于是就有了写个软件管理的想法。
正好自己主要是做后端,所以想学习下前端知识,于是把这款软件定位在web应用上。

1. 产品设计

先给自己写了个简单的PRD(产品需求文档),大概自己能看懂就ok,理了理思路。传送门

2. 环境配置

  1. 安装npm,获取npm
  2. 安装vue,官方安装方法
  3. 用IDEA作为IDE

3. 新建项目

使用命令vue ui开启图形界面,新建项目,有个默认初始化git选项,按照喜好可要可不要
[纯前端]打造自己的ORK管理软件_第2张图片

“预设”选项,选择“手动”,然后勾上这些包vuexrouter,不选包linter
[纯前端]打造自己的ORK管理软件_第3张图片

之后勾选使用html5历史模式
在这里插入图片描述

进入项目web管理页面后,添加element-ui模块
[纯前端]打造自己的ORK管理软件_第4张图片

项目建立后导入到IDEA,就可以开始编写代码了。

4. 难点记录

这一部分只挑一些重点来说,剩余的可以参考git仓库代码:ot

主要用了两个页面,App.vue作为整个门面,保持不变,主要用于展示OKR的可选月份,图中红色圈出的部分即是。Home.vue承接OKR的展示部分,为图中的非红色部分。
[纯前端]打造自己的ORK管理软件_第5张图片

月份展示

提前算好月份列表,默认显示当前双月的目标。这里用v-model指定默认打开的tab。详细参考:官方文档-tabs
注意别放在循环里面,这样会产生多个,实际上我们只需要一个。

<el-tabs tab-position="left" style="height: 100%;" v-model="activeTab" @tab-click="handleClick">
    <el-tab-pane v-for="(month, index) in monthList" :label="month" :name="index+''" :id="index=''">
    {{month}} ORK情况一览
    el-tab-pane>
    <router-view>router-view>
el-tabs>

数据传递

当点击月份标签的时候,使用$router.push把月份信息传递到Home.vue。这里有个点要注意,push方法在推送的URL和当前URL相同时,会在控制台报错。这里加了个catch忽略掉报错。

this.$router.push({path: '/okr/', query: {'month': tab.label}}).catch(() => {});

由于使用的是同一个Home.vue,所以靠query词来区分页面。改写router/index.js来映射到Home.vue

const routes = [
  {
    path: '/okr/*',
    name: 'home',
    component: Home
  }
];

Home.vue考虑

本来只用了,后来发现需要标题,所以在外面嵌套了,最终布局是:

<el-card>
    <el-table><el-table>
el-card>

固定最后一行百分比

为了保证最后百分比总和为100%,就打算固定最后一行为不可更改的形式。
这里用了一个字典存是否可以修改hitBox: {},key是目标+结果+列名,可以唯一确定一个单元格。

<el-table-column label="关键结果" min-width="35">
        <template v-slot="scope">
            <span v-if="hitBox[scope.row.object+scope.row.key+scope.column.label]">
              <el-input type="textarea" size="small" v-model="scope.row.key">el-input>
            span>
            <span v-else>{{scope.row.key}}span>
        template>
el-table-column>

v-slot用于获取父组件的数据,使其可以传递下来,具体参考:编译作用域

数据刷新

有两种情况页面需要刷新。一个是当双击单元格时,此时要显示单元格成编辑框,所以必须刷新页面。另一个是数据变动时,此时需要刷新页面。所以要特别注意hitBox,在第一种情况下,不需要刷新,否则单元格又变回原样。

// 同样的页面,不需要初始化的数据
if (!isOldPage) {
    this.hitBox = {};
    this.editData = false;
}

数据直接用localstorage存,使用方式就是k-v,将结构化数据序列化后使用即可。

let tableData = localStorage.getItem(this.month);
tableData = JSON.parse(tableData);

5. 部署到github pages

官方说的很明白:传送门

部署完之后就可以愉快地使用啦~

6. 效果

项目github地址:https://github.com/GooZy/ot

部署页面:https://goozy.github.io/ot/

参考资料

  1. 【2020版】4小时学会Spring Boot+Vue前后端分离开发
  2. VUE+Element UI实现简单的表格行内编辑效果
  3. Vue结合Element-UI实现单元格编辑、删除等操作

你可能感兴趣的:(小结,小应用)