Skip to content

O
OKR
Commit fba1b270 authored by lshan's avatar lshan
Browse files
Options

合并

parents e126995b a366a428
Hide whitespace changes
Inline Side-by-side
Showing with 482 additions and 21 deletions
package-lock.json
View file @ fba1b270
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ fba1b270
{ {
"name": "initial", "name": "okr",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
...@@ -9,9 +9,10 @@ ...@@ -9,9 +9,10 @@
}, },
"dependencies": { "dependencies": {
"ant-design-vue": "^1.7.5", "ant-design-vue": "^1.7.5",
"axios": "^0.21.1",
"clipboard": "^2.0.8", "clipboard": "^2.0.8",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"axios": "^0.21.1", "mockjs": "^1.1.0",
"register-service-worker": "^1.7.1", "register-service-worker": "^1.7.1",
"validator": "^13.6.0", "validator": "^13.6.0",
"vant": "^2.12.22", "vant": "^2.12.22",
...@@ -21,6 +22,7 @@ ...@@ -21,6 +22,7 @@
"vuex": "^3.4.0" "vuex": "^3.4.0"
}, },
"devDependencies": { "devDependencies": {
"@types/mockjs": "^1.0.4",
"@types/validator": "^13.6.3", "@types/validator": "^13.6.3",
"@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0", "@typescript-eslint/parser": "^4.18.0",
......
src/App.vue
View file @ fba1b270
<template> <template>
<div id="app"> <div id="app">
<div class=" text-red-900">dsflsdjf <router-view />
<app-icon type="png" class=" h-3"></app-icon>
<app-icon name="icon-dianying" color='#BF463D' size='28px'></app-icon>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue'
export default Vue.extend({ export default Vue.extend({
components:{ components:{
'app-icon':()=>import('./components/common/Icon.vue') // 'app-icon':()=>import('./components/common/Icon.vue'),
// 'main-page': () => import('@/layout/main-page.vue')
}, },
name: 'App', name: 'App'
})
});
</script> </script>
<style lang="less"> <style lang="less">
......
src/DTO/index.ts
View file @ fba1b270
// 这里是DTO数据定义集合 // 这里是DTO数据定义集合
\ No newline at end of file // 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 @ fba1b270
<template> <template>
<fragment> <fragment>
<div v-if="type==='png'" class=" w-12 "> <div v-if="type==='png'" :class="className">
<img src="@/assets/icons/shiba.png" class="object-cover object-center " > <img :src="path" class="object-cover object-center " >
</div> </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> <use :xlink:href="'#'+name" ></use>
</svg> </svg>
</fragment> </fragment>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue,{Component} from 'vue'; import Vue from 'vue'
import { Plugin } from 'vue-fragment' import { Plugin } from 'vue-fragment'
Vue.use(Plugin) Vue.use(Plugin)
export default Vue.extend({ export default Vue.extend({
...@@ -30,7 +30,9 @@ export default Vue.extend({ ...@@ -30,7 +30,9 @@ export default Vue.extend({
name:{ name:{
type:String, type:String,
default:'icon-anquanzhongxin89' default:'icon-anquanzhongxin89'
} },
path: String,
className: String,
} }
}); });
......
src/layout/main-page.vue 0 → 100644
View file @ fba1b270
<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 @ fba1b270
...@@ -8,9 +8,27 @@ const routes: Array<RouteConfig> = [ ...@@ -8,9 +8,27 @@ const routes: Array<RouteConfig> = [
{ {
path: '/', path: '/',
name: 'Home', name: 'Home',
component: App component: App,
meta: {
title: '首页'
}
},
{
path: '/team',
name: 'Team',
component: () => import('@/views/team-frame.vue'),
meta: {
title: '团队架构'
}
},
{
path: '/file',
name: 'File',
component: () => import('@/views/file.vue'),
meta: {
title: '添加成员'
}
}, },
] ]
const router = new VueRouter({ const router = new VueRouter({
......
src/views/components/team-contacts.vue 0 → 100644
View file @ fba1b270
<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 @ fba1b270
<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/file.vue 0 → 100644
View file @ fba1b270
<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">
<!-- 输入任意文本 -->
<van-cell-group>
<van-field label="*真实姓名" disabled />
<van-field v-model="name" />
</van-cell-group>
<br>
<van-cell-group>
<van-field label="职位" disabled />
<van-field v-model="job" />
</van-cell-group>
<br>
<van-cell-group>
<!-- 输入手机号，调起手机号键盘 -->
<van-field v-model="tel" type="tel" input-align="right" label="手机号" />
<!-- 允许输入整数，调起数字键盘 -->
<van-field v-model="digit" type="digit" input-align="right" label="员工编号" />
<van-field v-model="digit" :value="date" input-align="right" label="入职时间" @click="showw = true" right-icon="ellipsis"/>
<van-calendar v-model="showw" @confirm="onConfirm" />
</van-cell-group>
<br>
<van-cell-group>
<van-field label="所属部门" right-icon="ellipsis" disabled />
<van-field
readonly
clickable
:value="value"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-picker
show-toolbar
:columns="columns"
@cancel="showPicker = false"
@confirm="onConfir"
/>
</van-popup>
</van-cell-group>
<br><br><br><br>
<van-button round type="info" size="large">生成地址</van-button>
</div>
</main-page>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Field } from 'vant';
import { Button } from 'vant';
import { Calendar } from 'vant';
import { Picker } from 'vant';
import { Popup } from 'vant';
Vue.use(Popup);
Vue.use(Picker);
Vue.use(Calendar);
Vue.use(Button);
Vue.use(Field);
export default Vue.extend({
name: 'TeamFrame',
components: {
'main-page': () => import('@/layout/main-page.vue')
},
created() {
// console.log(Mock, 'mock')
},
data() {
return {
name: '',
job:'',
tel: '',
digit: '',
date: '',
showw:false,
value: '',
showPicker: false,
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
}
},
methods: {
handleClickLeft() {
console.log('click left')
},
onConfir(value) {
this.value = value;
this.showPicker = false;
},
formatDate(date) {
return `${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(date) {
this.showw = false;
this.date = this.formatDate(date);
},
}
})
</script>
<style lang="less">
</style>
src/views/team-frame.vue 0 → 100644
View file @ fba1b270
<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 @ fba1b270
...@@ -5,6 +5,17 @@ module.exports = { ...@@ -5,6 +5,17 @@ module.exports = {
presets: [], presets: [],
darkMode: false, // or 'media' or 'class' darkMode: false, // or 'media' or 'class'
theme: { theme: {
extend: {
colors:{
'common-bg': '#F6F7F8',
'color-primary': '#32B2F7',
'text-primary': '#24374E',
'border-lighter': '#E3EEF4'
},
spacing: {
6.5: '1.625rem',
}
},
screens: { screens: {
sm: '640px', sm: '640px',
md: '768px', md: '768px',
......
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