Skip to content

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

ls

parent 83e3979f
Hide whitespace changes
Inline Side-by-side
Showing with 654 additions and 51 deletions
src/router/okr.ts
View file @ d4966318
...@@ -11,13 +11,45 @@ export const okrRoutes: Array<RouteConfig> = [ ...@@ -11,13 +11,45 @@ export const okrRoutes: Array<RouteConfig> = [
redirect: '/okr', redirect: '/okr',
children: [ children: [
{ {
path: 'key-result', path: 'kr-detail',
name: 'KeyResult', name: 'KRDetail',
component: () => import('@/views/okr/key-result.vue'), component: () => import('@/views/okr/kr-detail.vue'),
meta: { meta: {
title: '客户数据收集' title: '客户数据收集'
} }
}, },
{
path: 'kr-create',
name: 'KRCreate',
component: () => import('@/views/okr/kr-create.vue'),
meta: {
title: '新建Key Result'
}
},
{
path: 'o-objective',
name: 'OObjective',
component: () => import('@/views/okr/o-objective.vue'),
meta: {
title: '选择Objective'
}
},
{
path: 'o-search',
name: 'OSearch',
component: () => import('@/views/okr/o-search.vue'),
meta: {
title: ''
}
},
{
path: 'kr-state',
name: 'KRState',
component: () => import('@/views/okr/kr-state.vue'),
meta: {
title: '类型'
}
},
] ]
} }
......
src/views/okr/components/leader-card.vue 0 → 100644
View file @ d4966318
<template>
<!-- 选择地点 -->
<!-- 内容 -->
<div class="py-2 px-4 border-b ">
<div class="flex items-center text-sm" @click="clickShow()">
<app-icon
icon-name="avator"
class-name="w-8 h-8 flex items-center"
/>
<div class="px-4">{{people}}</div>
</div>
<div v-if="show" class="mx-10">
<div v-for="(object,index) in objects" :key="index" class=" rounded" >
<div class="border-b pl-2.5 pr-1 w-full flex items-center text-sm" :class="classBorder(index)" @click="clickIcon(index)">
<app-icon
slot="icon"
:icon-name="checked === index+'' ? 'radio-checked': 'radio'"
class-name="w-6 h-6 mr-2 flex items-center"
/>
<div class="w-screen text-text-secondary">{{object}}</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "OObjective",
components: {
'app-icon': () => import('@/components/common/Icon.vue'),
},
created() {
// console.log(Mock, 'mock')
},
data() {
return {
show:false,
currentKey: 'leader',
people:'点击展开 再次点击姓名 收起',
objects:[
'部门日常任务',
'美的金融',
'提高公司知名度',
],
checked: '',
radio:''
}
},
computed: {
},
methods:{
clickShow(){
this.show=!this.show
},
clickIcon(index:number){
this.checked=index+''
},
classBorder(index:number){
if(index===this.objects.length-1){
return 'border-none pb-0'
}
if(index===0){
return 'mt-3'
}
}
}
})
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
src/views/okr/components/object-card.vue 0 → 100644
View file @ d4966318
<template>
<!-- 内容 -->
<div class="py-2 px-2">
<div v-for="(object,index) in objects" :key="index" class="rounded" >
<div class="border-b pl-2.5 pr-1 py-2 w-full flex items-center text-sm" @click="clickIcon(index)">
<app-icon
:icon-name="checked === index+'' ? 'radio-checked': 'radio'"
class-name="w-4 h-4 mr-6 flex items-center"
/>
<div class=" px-2 mr-2 rounded-full" :class="isColor(object)">{{object.condition}}</div>
<div >{{object.thing}}</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "OObjective",
components: {
'app-icon': () => import('@/components/common/Icon.vue'),
},
created() {
// console.log(Mock, 'mock')
},
data() {
return {
objects:[
{condition:'紧急',thing:'按优先级排列，同级按首字母排列'},
{condition:'重要',thing:'b增强公司内部管理制度2'},
{condition:'紧急',thing:'a增强公司内部管理制度1'},
{condition:'一般',thing:'d增强公司内部管理制度3'},
{condition:'重要',thing:'g增强公司内部管理制度2'},
{condition:'一般',thing:'c增强公司内部管理制度3'},
],
checked: '',
}
},
computed: {
},
methods:{
clickIcon(index:number){
this.checked=index+''
},
isColor(object: {condition: string, thing: string}){
if(object.condition==='紧急'){
return 'border border-tag-red text-tag-red'
}else if(object.condition==='重要'){
return 'border border-tag-yellow text-tag-yellow'
}else if(object.condition==='一般'){
return 'border border-tag-primary text-tag-primary'
}
},
sortObjects(){
return this.objects.sort()
// var object1 = [{condition:'紧急',thing:'b增强公司内部管理制度1'};
// for(let i=0;i<this.objects.length;i++){
// if(object.condition==='紧急'){
// }
// }
}
}
})
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
src/views/okr/kr-create.vue 0 → 100644
View file @ d4966318
<template>
<!-- 选择地点 -->
<main-page
left-arrow
@click-left="$router.go(-1)"
>
<app-icon
slot="right"
icon-name="dot-h"
class-name="w-5 h-3 flex items-center "
@click="isShow()"
/>
<!-- 弹窗 -->
<van-action-sheet v-model="show" >
<div class="text-text-secondary px-6 ">
<div class="border-b py-3.5 ">分享到</div>
<div class="border-b py-3.5">移动关键节点</div>
<div class="border-b py-3.5">拷贝关键节点</div>
<div class="border-b py-3.5">删除</div>
<div class=" py-3.5">归档</div>
</div>
</van-action-sheet>
<!-- 内容 -->
<div class="pt-14 px-4 pb-16">
<c-cell label="关键节点名称">
<input slot="content" type="text" class="text-sm text-red-500 focus:text-text-primary" placeholder="请输入关键节点">
</c-cell>
<!-- 更多信息 -->
<group-cell class="mt-4" title="更多信息">
<c-cell title="所属目标" titleColor="text-sm text-text-secondary">
<div slot="right" class="flex items-center">
<div class="mr-2 text-sm text-red-500">{{object}}</div>
<app-icon
icon-name="right-arrow"
class-name="w-2 h-3 "
/>
</div>
</c-cell>
<c-cell title="执行人" titleColor="text-sm text-text-secondary">
<div slot="right" class="flex items-center">
<div class="mr-2 text-sm text-red-500">{{people}}</div>
<app-icon
icon-name="right-arrow"
class-name="w-2 h-3 "
/>
</div>
</c-cell>
<c-cell title="周期" titleColor="text-sm text-text-secondary">
<div slot="right" class="flex items-center">
<div class="mr-2 text-sm text-red-500">{{period}}</div>
<app-icon
icon-name="right-arrow"
class-name="w-2 h-3 "
/>
</div>
</c-cell>
<c-cell title="加权百分比" titleColor="text-sm text-text-secondary">
<div slot="right" class="mr-4 border rounded px-2 text-text-secondary flex justify-center">
<input type="number" class="text-sm w-6 text-center " min="0" max="100">%
</div>
</c-cell>
<c-cell title="优先级" titleColor="text-sm text-text-secondary">
<div slot="right">
<app-icon
icon-name="right-arrow"
class-name="w-2 h-3 "
/>
</div>
</c-cell>
<c-cell title="参与人员" titleColor="text-sm text-text-secondary">
<div slot="right">
<app-icon
icon-name="right-arrow"
class-name="w-2 h-3 "
/>
</div>
</c-cell>
<c-cell title="描述" titleColor="text-sm text-text-secondary">
<div slot="right">
<app-icon
icon-name="right-arrow"
class-name="w-2 h-3 "
/>
</div>
</c-cell>
</group-cell>
<!-- 拓展属性/其他信息 -->
<c-cell label="拓展属性" title="关键节点类型" titleColor="text-sm text-text-secondary" class="mt-4">
<div slot="right">
<app-icon
icon-name="right-arrow"
class-name="w-2 h-3 "
/>
</div>
</c-cell>
<c-cell label="其他信息" title="附件" titleColor="text-sm text-text-secondary" class="mt-4">
<div slot="right">
<app-icon
icon-name="right-arrow"
class-name="w-2 h-3 "
/>
</div>
</c-cell>
<!-- 按钮 -->
<div class="fixed bottom-0 left-0 w-full px-4 bg-common-bg py-1.5">
<c-button>
确认
</c-button>
</div>
</div>
</main-page>
</template>
<script lang="ts">
import Vue from "vue";
import { ActionSheet } from 'vant';
import { Icon } from 'vant';
Vue.use(Icon);
Vue.use(ActionSheet);
export default Vue.extend({
name: "KRCreate",
components: {
'main-page': () => import('@/layout/main-page.vue'),
'app-icon': () => import('@/components/common/Icon.vue'),
'c-cell': () => import('@/components/common/c-cell.vue'),
'group-cell': () => import('@/components/common/group-cell.vue'),
'c-button': () => import('@/components/common/c-button.vue'),
},
created() {
// console.log(Mock, 'mock')
},
data() {
return {
show:false,
object:'',
people:'',
period:'',
}
},
computed: {
},
methods:{
isShow(){
this.show=!this.show
},
}
})
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
src/views/okr/key-result.vue → src/views/okr/kr-detail.vue
View file @ d4966318
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
<div class=" py-3.5">归档</div> <div class=" py-3.5">归档</div>
</div> </div>
</van-action-sheet> </van-action-sheet>
<!-- 内容 -->
<div class="pt-14 px-4 pb-16"> <div class="pt-14 px-4 pb-16">
<!-- 头部栏 --> <!-- 头部栏 -->
<div class="flex justify-around "> <div class="flex justify-around ">
...@@ -76,10 +77,10 @@ ...@@ -76,10 +77,10 @@
</c-cell> </c-cell>
</group-cell> </group-cell>
<c-cell label="拓展属性" title="类型" titleClass="text-sm text-text-secondary" class="mt-4"> <c-cell label="拓展属性" title="类型" titleClass="text-sm text-text-secondary" class="mt-4">
<div slot="right" class="text-sm text-text-secondary pr-6"> <div slot="right" class="text-sm text-text-secondary pr-6">
内部 内部
</div> </div>
</c-cell> </c-cell>
</div> </div>
<!-- 底部栏 --> <!-- 底部栏 -->
<div class=" flex fixed bottom-0 left-0 w-full px-4 bg-white py-2 rounded"> <div class=" flex fixed bottom-0 left-0 w-full px-4 bg-white py-2 rounded">
...@@ -87,7 +88,9 @@ ...@@ -87,7 +88,9 @@
<input type="text" class="bg-common-bg" placeholder="添加评论"> <input type="text" class="bg-common-bg" placeholder="添加评论">
</div> </div>
<div class="flex mx-4 space-x-4 items-center"> <div class="flex mx-4 space-x-4 items-center">
<van-icon :name=" love ? 'like' : 'like-o' " :color="lovecolor" size="20" class="flex" @click="isLove()"> <van-icon :name=" love ? 'like' : 'like-o' "
:color="loveColor ? '#ee0a24' : ' ' "
size="20" class="flex" @click="isLove()">
<p class="text-xs text-black">{{like}}</p> <p class="text-xs text-black">{{like}}</p>
</van-icon> </van-icon>
<van-icon name="chat-o" size="20" class="flex"> <van-icon name="chat-o" size="20" class="flex">
...@@ -97,7 +100,6 @@ ...@@ -97,7 +100,6 @@
<p class="text-xs">10</p> <p class="text-xs">10</p>
</van-icon> </van-icon>
</div> </div>
</div> </div>
</div> </div>
</main-page> </main-page>
...@@ -111,7 +113,7 @@ import { Icon } from 'vant'; ...@@ -111,7 +113,7 @@ import { Icon } from 'vant';
Vue.use(Icon); Vue.use(Icon);
Vue.use(ActionSheet); Vue.use(ActionSheet);
export default Vue.extend({ export default Vue.extend({
name: "KeyResult", name: "KRDetail",
components: { components: {
'main-page': () => import('@/layout/main-page.vue'), 'main-page': () => import('@/layout/main-page.vue'),
'app-icon': () => import('@/components/common/Icon.vue'), 'app-icon': () => import('@/components/common/Icon.vue'),
...@@ -129,7 +131,7 @@ export default Vue.extend({ ...@@ -129,7 +131,7 @@ export default Vue.extend({
day1:'14', day1:'14',
day2:'30', day2:'30',
love:false, love:false,
lovecolor:'', loveColor:false,
like:30, like:30,
comment:12 comment:12
} }
...@@ -143,11 +145,10 @@ export default Vue.extend({ ...@@ -143,11 +145,10 @@ export default Vue.extend({
}, },
isLove(){ isLove(){
this.love=!this.love this.love=!this.love
this.loveColor=!this.loveColor
if(this.love===true){ if(this.love===true){
this.lovecolor="#ee0a24"
this.like++ this.like++
}else{ }else{
this.lovecolor=""
this.like-- this.like--
} }
} }
......
src/views/okr/kr-state.vue 0 → 100644
View file @ d4966318
<template>
<!-- 选择地点 -->
<main-page
left-arrow
@click-left="$router.go(-1)"
>
<div class="pt-14 px-4 pb-16">
<div v-for="(tag,index) in tags" :key="index" class="rounded" >
<div class="border-b pl-2.5 pr-1 w-full flex items-center " :class="classBorder(index)" @click="clickIcon(index)">
<app-icon
slot="icon"
:icon-name="checked === index+'' ? 'radio-checked': 'radio'"
class-name="w-4 h-4 mr-2 flex items-center"
/>
<div class="flex rounded px-1 flex items-center my-2" :class="tagColor(tag)">
<van-icon name="success" />
<div class="text-sm"> {{tag.condition}}</div>
</div>
</div>
</div>
</div>
</main-page>
</template>
<script lang="ts">
import Vue from "vue";
import { Icon } from 'vant';
Vue.use(Icon);
export default Vue.extend({
name: "KRState",
components: {
'main-page': () => import('@/layout/main-page.vue'),
'app-icon': () => import('@/components/common/Icon.vue'),
},
created() {
// console.log(Mock, 'mock')
},
data() {
return {
checked:'',
tags:[
{key:'start',condition:'未开始'},
{key:'doing',condition:'进行中'},
{key:'end',condition:'已完成'},
{key:'stop',condition:'已搁置'},
],
count:0,
}
},
computed: {
},
methods:{
clickIcon(index:number){
this.count=this.tags.length
if(this.checked===index+''){
this.checked=''
}else{
this.checked=index+''
}
},
classBorder(index:number){
if(index===this.tags.length-1){
return 'border-none pb-0'
}
if(index===0){
return 'mt-3'
}
},
tagColor(object: {key: string, condition: string}){
if(object.key==='start'){
return 'text-tag-red bg-tag-red-lighter'
}else if(object.key==='doing'){
return 'text-tag-yellow bg-tag-yellow-lighter'
}else if(object.key==='end'){
return 'text-tag-green bg-tag-green-lighter'
}else if(object.key==='stop'){
return 'text-tag-primary bg-tag-primary-lighter'
}else{
return ' '
}
},
}
})
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
src/views/okr/o-objective.vue 0 → 100644
View file @ d4966318
<template>
<!-- 选择地点 -->
<main-page
left-arrow
@click-left="$router.go(-1)"
mainBg="bg-white"
headerBg="bg-white"
>
<app-icon
slot="right"
icon-name="search-blue"
class-name="w-7 h-7 flex items-center "
@click="$router.push('/okr/o-search')"
/>
<!-- 内容 -->
<div class="pt-14 pb-16">
<div class="flex justify-center w-full mb-6">
<div
v-for="tab in tabs"
:key="tab.key"
class="w-32 h-9 flex items-center justify-center"
:class="currentKey === tab.key ? 'text-color-primary rounded-full bg-blue-50' : 'text-text-secondary'"
@click="clickTab(tab)"
>
{{ tab.label }}
</div>
</div>
<div v-show="showLeader">
<leader-card></leader-card>
<leader-card></leader-card>
</div>
<div v-show="showObject">
<object-card></object-card>
</div>
</div>
</main-page>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "OObjective",
components: {
'main-page': () => import('@/layout/main-page.vue'),
'app-icon': () => import('@/components/common/Icon.vue'),
'leader-card': () => import('@/views/okr/components/leader-card.vue'),
'object-card': () => import('@/views/okr/components/object-card.vue'),
},
created() {
// console.log(Mock, 'mock')
},
data() {
return {
tabs: [
{
label: '负责人',
key: 'leader'
},
{
label: '目标',
key: 'objective'
}
],
currentKey: 'leader',
showLeader:true,
showObject:false,
}
},
computed: {
},
methods:{
clickTab(tab: {label: string, key: string}) {
this.currentKey = tab.key
if(tab.key==='leader'){
this.showLeader=true
this.showObject=false
}else if(tab.key==='objective'){
this.showLeader=false
this.showObject=true
}
},
}
})
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
src/views/okr/o-search.vue 0 → 100644
View file @ d4966318
<template>
<div>
<div class="fixed top-0z left-0 w-screen z-50">
<div class="relative flex justify-center items-center py-3 h-12 ">
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 ">
<app-icon
icon-name="left-arrow"
class-name="w-6 h-6"
@click="$router.go(-1)"
/>
</div>
<div class="flex items-center justify-center w-2/3 rounded-full bg-common-bg">
<app-icon
icon-name="search-light"
class-name="w-7 h-7 mx-1"
/>
<input v-model="value" type="text" placeholder="请输入搜索关键词" class="bg-common-bg" >
</div>
<div class="absolute right-3 top-1/2 transform -translate-y-1/2">
<button class="text-color-primary" @click="clickCancel()">取消</button>
</div>
</div>
</div>
<!-- <div>
<ul v-for="(data,index) in Seach(value)" :key="index">{{data.thing}}</ul>
</div> -->
<div class="px-4 pt-8">
<div class="mt-6 ">负责人</div>
<div>
<div v-for="(object,index) in leaders" :key="index" class=" rounded" >
<div class="border-b pl-2.5 pr-1 w-full flex items-center text-sm">
<app-icon
slot="icon"
icon-name="radio"
class-name="w-6 h-6 mr-2 flex items-center"
/>
<app-icon
icon-name="avator"
class-name="w-8 h-8 flex items-center mx-4"
/>
<div class="w-screen ">{{object}}</div>
</div>
</div>
</div>
<div class="mt-2 ">目标</div>
<div>
<div v-for="(object,index) in objects" :key="index" class="rounded" >
<div class="border-b pl-2.5 pr-1 py-2 w-full flex items-center text-sm">
<app-icon
icon-name="radio"
class-name="w-4 h-4 mr-6 flex items-center"
/>
<div class=" px-2 mr-2 rounded-full border border-tag-red text-tag-red">{{object.condition}}</div>
<div >{{object.thing}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'OSearch',
components: {
'app-icon': () => import('@/components/common/Icon.vue'),
},
data(){
return{
value:'有',
checked:'',
// datas:[
// {condition:'紧急',thing:'b增强公司内部管理制度1'},
// {condition:'重要',thing:'b增强公司内部管理制度2'},
// {condition:'紧急',thing:'a增强公司内部管理制度1'},
// {condition:'一般',thing:'d增强公司内部管理制度3'},
// ],
objects:[
{condition:'紧急',thing:'有~增强公司内部管理制度'},
],
leaders:[
'有/点击展开 再次点击姓名 收起',
'有XX',
],
}
},
computed: {
},
methods: {
clickCancel(){
this.value=""
},
//根据字段筛选
// Seach(value:string){
// return this.datas.filter(item => {
// if(item.thing.includes(value)){
// return item;
// }
// })
// }
}
});
</script>
<style lang="less">
</style>
src/views/schedule/speech-recognition.vue
View file @ d4966318
...@@ -62,12 +62,7 @@ export default Vue.extend({ ...@@ -62,12 +62,7 @@ export default Vue.extend({
}, },
data() { data() {
return { return {
count:0,
larg:'',
long:'',
short:'',
mid:'',
} }
}, },
computed: { computed: {
...@@ -76,44 +71,13 @@ export default Vue.extend({ ...@@ -76,44 +71,13 @@ export default Vue.extend({
// }, // },
}, },
methods:{ methods:{
clickAnimation(){
this.count++
if(this.count%2===0){
this.count=0
this.larg=''
this.long=''
this.short=''
}else{
this.larg='larg'
this.long='long'
this.short='short'
}
},
} }
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.larg{
animation:larg 1s linear infinite alternate ;
}
.long{
animation:long 1s linear infinite alternate;
}
.short{
animation:short 1s linear 0.5s infinite alternate;
}
@keyframes larg{
0%{width:80px;height:80px;}
}
@keyframes long{
0%{height:30px;}
}
@keyframes short{
0%{height:30px;}
}
// .wrapper { // .wrapper {
// -webkit-backface-visibility: hidden; // -webkit-backface-visibility: hidden;
......
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