Verified Commit e6e3bb00 authored by jxtxzzw's avatar jxtxzzw
Browse files

新增:工作记录支持嵌套



Signed-off-by: jxtxzzw's avatarjxtxzzw <jxtxzzw@126.com>
parent 810a632e
Pipeline #748 passed with stages
in 13 minutes and 30 seconds
[
{
"id": 1,
"parent": null,
"company": "微软",
"position": "SWE INTERN",
"department": "C+AI",
"location": "上海紫竹",
"department": null,
"position": null,
"level": null,
"date": "2019-07-01",
"end": "2019-09-30",
"content": "暑假实习"
"content": "[微软] ms@microsoft.com",
"location": null,
"logo": "MS"
},
{
"id": 2,
"parent": 1,
"company": null,
"department": "Microsoft, AA, BB DevDiv, CCC, DDDD",
"position": "软件开发工程师暑期实习 (SWE INTERN)",
"level": "INTERN",
"date": "2019-07-01",
"end": "2019-09-30",
"content": "XXX",
"location": "上海",
"logo": "VSCODE"
},
{
"id": 3,
"parent": null,
"company": "Google",
"department": null,
"position": null,
"level": null,
"date": "2022-07-11",
"end": null,
"content": "[Google]",
"location": null,
"logo": "GG"
},
{
"id": 5,
"parent": 3,
"company": null,
"department": "Google, YouTube",
"position": "SWE/SRE/XXX/YYY",
"level": "L3",
"date": "2022-07-11",
"end": null,
"content": "SWE/SRE/XXX/YYY",
"location": "Google Bay Area",
"logo": "YTB"
},
{
"id": 6,
"parent": 3,
"company": null,
"department": "Google, YouTube",
"position": "SWE/SRE/XXX/YYY",
"level": "L10",
"date": "2023-07-11",
"end": null,
"content": "SWE/SRE/XXX/YYY",
"location": "Google Bay Area",
"logo": "YTB"
},
{
"id": 7,
"parent": 3,
"company": null,
"department": "Google, Core",
"position": "SWE/SRE/XXX/YYY",
"level": "L10",
"date": "2024-07-11",
"end": null,
"content": "SWE/SRE/XXX/YYY",
"location": "Google Bay Area",
"logo": null
}
]
<template>
<div>
<Timeline>
<TimelineItem v-for="item in work" :key="item.date" color="green">
<Icon slot="dot" type="ios-trophy"></Icon>
<TimelineItem v-for="item in items" :key="item.id" color="green">
<p>
<span class="company"> {{ item.company }} </span>
</p>
......@@ -11,18 +10,38 @@
<span>{{ $t('work.till') }}</span>
<span>{{ item.end == null ? $t('work.now') : item.end }}</span>
</p>
<p v-for="c in item.location.split('\n')" :key="c" class="date">
{{ c }}
</p>
<p>
<span class="position"> {{ item.position }} </span>
<span class="department"> {{ item.department }} </span>
</p>
<div v-if="item.content">
<p v-for="c in item.content.split('\n')" :key="c" class="content">
{{ c }}
</p>
</div>
<div v-if="item.children">
<Timeline>
<TimelineItem v-for="c in item.children" :key="c.id" color="green">
<p>
<span class="department"> {{ c.department }} </span>
</p>
<p>
<span class="position"> {{ c.position }} </span>
<span class="level"> {{ c.level }} </span>
</p>
<p class="date">
<span>{{ c.date }}</span>
<span>{{ $t('work.till') }}</span>
<span>{{ c.end == null ? $t('work.now') : c.end }}</span>
</p>
<div v-if="c.content">
<p
v-for="cc in c.content.split('\n')"
:key="cc"
class="content"
>
{{ cc }}
</p>
</div>
</TimelineItem>
</Timeline>
</div>
</TimelineItem>
</Timeline>
</div>
......@@ -35,40 +54,89 @@ export default {
data() {
return {
work,
items: [],
}
},
mounted() {
this.preProcess()
},
methods: {
preProcess() {
// 按父记录排序,父记录小的在前,确保按序遍历时元素都存在
work.sort((a, b) => {
const pa = a.parent ? a.parent : 0
const pb = b.parent ? b.parent : 0
return pa - pb
})
// 开始处理嵌套关系
// 数据保证只有至多两层嵌套,所以可以简单写成这样
for (const x of work) {
if (!x.parent) {
this.items.push(x)
} else {
for (const y of this.items) {
if (y.id === x.parent) {
if (!y.children) {
y.children = []
}
y.children.push(x)
}
}
}
}
// 根据入职日期排序,该字段要求 NOT_NULL 所以可以直接排序
// 入职早的在下面,所以是按日期逆序排序,日期大的在前面
this.items.sort((a, b) => {
return new Date(b) - new Date(a)
})
for (const x of this.items) {
if (x.children) {
x.children.sort((a, b) => {
return new Date(b) - new Date(a)
})
}
}
},
},
}
</script>
<style scoped>
.company {
color: #2d8cf0;
font-size: 16px;
font-weight: bold;
}
.position {
color: #ff8120;
font-size: 16px;
color: #4285f4;
font-size: 20px;
font-weight: bold;
}
.department {
color: #2a34f6;
font-size: 16px;
color: #34a853;
font-size: 18px;
font-weight: bold;
}
.date {
font-size: 14px;
font-weight: bold;
padding-left: 12px;
margin-top: 6px;
}
.position {
color: #fbbc05;
font-size: 16px;
font-weight: bold;
}
.level {
color: #ea4335;
font-size: 16px;
font-weight: bold;
}
.content {
color: #b6c3d7;
font-size: 12px;
padding-left: 12px;
margin-top: 6px;
font-size: 12px;
}
</style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment