Skip to content

O
OKR
Commit 1bc3f8b7 authored by Zhang Xiaojie's avatar Zhang Xiaojie
Browse files
Options

123

parents bf77a8de a366a428
Show whitespace changes
Inline Side-by-side
Showing with 358 additions and 19 deletions
package-lock.json
View file @ 1bc3f8b7
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 1bc3f8b7
{
"name": "initial",
"name": "okr",
"version": "0.1.0",
"private": true,
"scripts": {
......@@ -9,9 +9,10 @@
},
"dependencies": {
"ant-design-vue": "^1.7.5",
"axios": "^0.21.1",
"clipboard": "^2.0.8",
"core-js": "^3.6.5",
"axios": "^0.21.1",
"mockjs": "^1.1.0",
"register-service-worker": "^1.7.1",
"validator": "^13.6.0",
"vant": "^2.12.22",
......@@ -21,6 +22,7 @@
"vuex": "^3.4.0"
},
"devDependencies": {
"@types/mockjs": "^1.0.4",
"@types/validator": "^13.6.3",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
......
src/App.vue
View file @ 1bc3f8b7
<template>
<<<<<<< HEAD
<div id="app" class=" ">
<router-view/>
=======
<div id="app">
<router-view />
>>>>>>> origin/20210719_sxf
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Vue from 'vue'
export default Vue.extend({
components:{
<<<<<<< HEAD
=======
// 'app-icon':()=>import('./components/common/Icon.vue'),
// 'main-page': () => import('@/layout/main-page.vue')
>>>>>>> origin/20210719_sxf
},
name: 'App',
});
name: 'App'
})
</script>
<style lang="less">
......
src/DTO/index.ts
View file @ 1bc3f8b7
// 这里是DTO数据定义集合
// import Mock from 'mockjs'
// export const team = Mock.mock({
// 'data|1-1': [
// {
// id: 0,
// name: '杭州复杂美科技有限公司',
// 'children|1-3': [{
// parentId: 0,
// 'id|1-5': 1,
// name: Mock.mock('@ctitle')
// }]
// }
// ]
// })
export const team = [{
id: 0,
name: '杭州复杂美科技有限公司',
children: [{
parentId: 0,
id: 1,
name: '产品设计部',
children: [{
parentId: 1,
id: 11,
name: '产品部',
}, {
parentId: 1,
id: 12,
name: '设计部',
children: [{
parentId: 12,
id: 121,
name: '设计',
}]
}]
}, {
parentId: 0,
id: 2,
name: '移动部',
children: [{
parentId: 2,
id: 21,
name: 'IOS部门',
}]
}, {
parentId: 0,
id: 3,
name: '运营部'
}]
}]
\ No newline at end of file
src/components/common/Icon.vue
View file @ 1bc3f8b7
<template>
<fragment>
<div v-if="type==='png'" class=" w-12 ">
<img src="@/assets/icons/shiba.png" class="object-cover object-center " >
<div v-if="type==='png'" :class="className">
<img :src="path" class="object-cover object-center " >
</div>
<svg aria-hidden="true" :height="size" :width="size" :fill="color">
<svg v-else aria-hidden="true" :height="size" :width="size" :fill="color">
<use :xlink:href="'#'+name" ></use>
</svg>
</fragment>
</template>
<script lang="ts">
import Vue,{Component} from 'vue';
import Vue from 'vue'
import { Plugin } from 'vue-fragment'
Vue.use(Plugin)
export default Vue.extend({
......@@ -30,7 +30,9 @@ export default Vue.extend({
name:{
type:String,
default:'icon-anquanzhongxin89'
}
},
path: String,
className: String,
}
});
......
src/layout/main-page.vue 0 → 100644
View file @ 1bc3f8b7
<template>
<div class="main-page min-h-screen border border-transparent bg-common-bg">
<div class="header-wrapper fixed top-0 left-0 w-screen bg-common-bg z-50">
<div class="header relative flex justify-center items-center py-3">
<template v-if="leftArrow">
<div
class="h-action-wrapper absolute left-3 top-1/2 transform -translate-y-1/2 flex justify-center items-center"
@click="clickLeft"
>
<app-icon type="png" class-name="w-6.5 w-6.5" :path="require('@/assets/icons/left-arrow.png')"></app-icon>
</div>
</template>
<div class="title w-1/2 text-center font-bold text-text-primary truncate">{{ title }}</div>
<div class="h-action-wrapper absolute flex justify-center items-center right-3 top-1/2 transform -translate-y-1/2">
<slot name="right" />
</div>
</div>
</div>
<div class="mt-14">
<slot />
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'MainPage',
props: {
leftArrow: {
type: Boolean,
default: false
},
headerBg: {
type: String,
default: 'bg-white'
}
},
components: {
'app-icon': () => import('@/components/common/Icon.vue')
},
data() {
return {
title: '导航'
}
},
watch: {
$route: {
handler() {
this.title = this.$route.meta?.title
},
immediate: true
}
},
methods: {
clickLeft() {
this.$emit('click-left')
}
}
});
</script>
<style lang="less">
</style>
src/router/index.ts
View file @ 1bc3f8b7
......@@ -17,7 +17,15 @@ const routes: Array<RouteConfig> = [
component: createTeam
}
]
},
{
path: '/team',
name: 'Team',
component: () => import('@/views/team-frame.vue'),
meta: {
title: '团队架构'
}
},
]
const router = new VueRouter({
......
src/service/base.ts
View file @ 1bc3f8b7
......@@ -23,13 +23,13 @@ export class Service {
return ret
}else {
if(ret.code === 401){
await logoutUser().then(()=>{
router.push({name:'Login'})
})
}
Toast.fail(typeof ret.data === "string" ? ret.data : ret.message)
throw new Error(ret.message)
// if(ret.code === 401){
// await logoutUser().then(()=>{
// router.push({name:'Login'})
// })
// }
// Toast.fail(typeof ret.data === "string" ? ret.data : ret.message)
// throw new Error(ret.message)
}
}
this.service.get = (...res) => get(...res).then(ret => resolveData(ret.data)).catch(err => {
......
src/util/index.ts
View file @ 1bc3f8b7
import validator from 'validator'
import cliboard from "./cliboard"
// import cliboard from "./cliboard"
import cliboard from 'clipboard'
export default {
install(Vue: any) {
......
src/views/components/team-contacts.vue 0 → 100644
View file @ 1bc3f8b7
<template>
<div class="team-contacts">
TeamContacts
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
components:{
// 'app-icon':()=>import('./components/common/Icon.vue'),
// 'main-page': () => import('@/layout/main-page.vue')
},
name: 'TeamContacts'
})
</script>
<style lang="less">
</style>
src/views/components/team-tree.vue 0 → 100644
View file @ 1bc3f8b7
<template>
<!-- 团队架构树 -->
<div class="tree text-text-primary">
<div
v-for="(member, index) in treeData"
:key="index"
class=""
>
<!-- 显示标题 -->
<div
v-if="!isDetail"
class="title font-medium py-3"
>
{{ member.name }}
</div>
<!-- 显示面包屑 -->
<div
v-else
class="bread"
>
bread
</div>
<!-- 子部门 -->
<div v-if="member.children && member.children.length > 0" class="children">
<div
class="child-wrapper py-3 relative pl-10"
v-for="(child, childIndex) in member.children"
:key="child.id"
@click="clickChild(child, member.name)"
>
<!-- 左边框 -->
<div
class="left-border w-0.5 bg-border-lighter absolute left-3 top-0"
:class="childIndex < member.children.length - 1
? 'h-full'
: 'h-1/2'"
/>
<!-- 左icon -->
<div class="left absolute z-10 left-6 h-1.5 w-1.5 bg-color-primary rounded-sm top-1/2 transform -translate-y-1/2" />
<!-- 横线 -->
<div class="absolute w-3 h-0.5 left-3 bg-border-lighter top-1/2 transform -translate-y-1/2" />
<!-- 标题 -->
<div class="title">{{ child.name }} {{ child.children && child.children.length ? `(${child.children.length})` : "" }}</div>
<!-- 右icon -->
<div
class="dot absolute right-3 top-1/2 transform -translate-y-1/2">
<app-icon
type="png"
:path="require('@/assets/icons/dot.png')"
class-name="h-5 w-1"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export interface Member {
parentId?: number,
parentName?: string,
id: number,
name: string,
children?: Array<Member>
}
export default Vue.extend({
name: 'TeamTree',
components: {
'app-icon': () => import('@/components/common/Icon.vue')
},
props: {
treeData: {
type: Array,
default() {
return []
}
},
isDetail: {
type: Boolean,
default: false
}
},
methods: {
clickChild(team: Member, parentName: string) {
this.$emit('click-child', {
parentName,
...team
})
}
}
})
</script>
<style lang="less">
</style>
src/views/team-frame.vue 0 → 100644
View file @ 1bc3f8b7
<template>
<div class="team-frame">
<main-page
left-arrow
@click-left="handleClickLeft"
>
<template slot="right">
<app-icon
type="png"
class-name="w-6.5 h-6.5"
:path="require('@/assets/icons/search.png')"
/>
</template>
<div class="px-4">
<team-tree
:tree-data="team"
@click-child="clickItem"
/>
<div class="border">
<team-contacts />
</div>
</div>
</main-page>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { team } from '@/DTO'
import { Member } from './components/team-tree.vue'
export default Vue.extend({
name: 'TeamFrame',
components: {
'main-page': () => import('@/layout/main-page.vue'),
'app-icon': () => import('@/components/common/Icon.vue'),
'team-tree': () => import('@/views/components/team-tree.vue'),
'team-contacts': () => import('@/views/components/team-contacts.vue')
},
created() {
// console.log(Mock, 'mock')
},
data() {
return {
title: '导航',
team
}
},
methods: {
handleClickLeft() {
console.log('click left')
},
clickItem(val: Member) {
console.log(val)
}
}
})
</script>
<style lang="less">
</style>
tailwind.config.js
View file @ 1bc3f8b7
......@@ -5,6 +5,17 @@ module.exports = {
presets: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors:{
'common-bg': '#F6F7F8',
'color-primary': '#32B2F7',
'text-primary': '#24374E',
'border-lighter': '#E3EEF4'
},
spacing: {
6.5: '1.625rem',
}
},
screens: {
sm: '640px',
md: '768px',
......
vue.config.js
View file @ 1bc3f8b7
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const os=require('os');
module.exports = {
// ...other vue-cli plugin options...
......
Markdown is supported
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