ls

src/main.ts

@@ -6,13 +6,13 @@ import store from './store'
 import "tailwindcss/tailwind.css"
 import './style.less'
 import utils from '@/util'
-
+import service  from './service'
 import { Dialog, Toast, Notify }from 'vant'
 Vue.config.productionTip = false
 
 Vue.use(Dialog).use(Toast).use(Notify)
 Vue.use(utils)
-
+Vue.use(service)
 new Vue({
   router,
   store,

src/router/okr.ts

@@ -66,15 +66,54 @@ export const okrRoutes: Array<RouteConfig> = [
           title: '所有进度'
         }
       },
-   
-      // {
-      //   path: 'key-result',
-      //   name: 'KeyResult',
-      //   component: () => import('@/views/okr/key-detail.vue'),
-      //   meta: {
-      //     title: '客户数据收集'
-      //   }
-      // }
+      {
+        path: 'o-avatorEdit',
+        name: 'OAvatorEdit',
+        component: () => import('@/views/okr/o-avatorEdit.vue'),
+        meta: {
+          title: '增强公司内部管理制度'
+        }
+      },
+      {
+        path: 'o-priority',
+        name: 'OPriority',
+        component: () => import('@/views/okr/o-priority.vue'),
+        meta: {
+          title: '优先级'
+        }
+      },
+      {
+        path: 'o-accessibility',
+        name: 'OAccessibility',
+        component: () => import('@/views/okr/o-accessibility.vue'),
+        meta: {
+          title: '可访问性'
+        }
+      },
+      {
+        path: 'o-extendedAttribute',
+        name: 'OExtendedAttribute',
+        component: () => import('@/views/okr/o-extendedAttribute.vue'),
+        meta: {
+          title: '拓展属性'
+        }
+      },
+      {
+        path: 'o-describe',
+        name: 'ODescribe',
+        component: () => import('@/views/okr/o-describe.vue'),
+        meta: {
+          title: '描述'
+        }
+      },
+      {
+        path: 'o-relation',
+        name: 'ORelation',
+        component: () => import('@/views/okr/o-relation.vue'),
+        meta: {
+          title: '关联'
+        }
+      },
     ]
   }
 ]
\ No newline at end of file

src/service/index.ts

 
-import { UserService } from './moudles/userService'
+import { UserService } from './moudles/UserService'
 
 
 export default{

src/service/moudles/User.types.ts

+export interface DataType{
+  telephone:string
+  codeType:string
+}
\ No newline at end of file

src/service/moudles/UserService.ts

 
 import {Service} from '../base'
+import { DataType } from './User.types'
 
 
 export class UserService extends Service {
     router = {
-        // sendCode:{ path:'/verificationCode/send/sms', dataType:'application/x-www-form-urlencoded'},
+        sendCode:{ path:'/verificationCode/send/sms', dataType:'application/x-www-form-urlencoded'},
 
     }
     constructor(){
@@ -19,11 +20,11 @@ export class UserService extends Service {
      * @param phone 
      * @param codeType  短信模板, 1:登录短信 2:修改密码 3:修改手机号	
      */
-    async getVerificationCode(telephone:string,codetype:string){
-        // return await this.service.post(this.router.sendCode.path,{},{
-        //      headers:{"Content-Type": this.router.sendCode.dataType},
-        //      params:{"telephone":telephone, "codetype":codetype}
-        //  })
+    async getVerificationCode(data:DataType){
+        return await this.service.post(this.router.sendCode.path,{},{
+             headers:{"Content-Type": this.router.sendCode.dataType},
+             params:{"telephone":data.telephone, "codetype":data.telephone}
+         })
     }
 
 }

src/views/okr/kr-state.vue

@@ -6,7 +6,7 @@
   >  
   <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)">
+            <div  class="border-b pl-2.5 pr-1 w-full  flex items-center bg-white" :class="classBorder(index)" @click="clickIcon(index)">
               <app-icon
                 slot="icon"
                 :icon-name="checked === index+'' ? 'radio-checked': 'radio'"
@@ -63,7 +63,7 @@ export default Vue.extend({
     },
     classBorder(index:number){
       if(index===this.tags.length-1){
-        return 'border-none pb-0'
+        return 'border-none '
       }
       if(index===0){
         return 'mt-3'

src/views/okr/o-accessibility.vue

+<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 py-2.5 flex items-center bg-white rounded" :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="text-sm">
+            {{tag.condition}}
+          </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: "OAccessibility",
+  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:'private',condition:'私有（仅OKR负责人和所有参与人可见）'},
+       {key:'public',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 '
+      }
+      if(index===0){
+        return 'mt-3'
+      }
+    },
+    
+  }
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/views/okr/o-avatorEdit.vue

+<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=" py-3.5">归档</div>
+      </div>
+    </van-action-sheet>
+    <!-- 内容 -->
+    <div class="pt-14 px-4 pb-16">
+      <!-- 头部栏 -->
+      <div class="flex justify-around">
+        <div class="relative flex flex-col items-center border-r-2 w-1/3">
+          <div class=" text-xs text-text-secondary" @click="showDate = true">周期</div>
+          <van-calendar  v-model="showDate" title="选择日期" 
+              :round="false" type="range" @confirm="onConfirm"
+              :allow-same-day="true" :show-confirm="false"
+              color="#61C7FF" :style="{ height:'100%'}" />  
+          <div class="mt-4 inherit absolute bottom-0">
+            <div>{{date}}</div>
+            <div >{{dateStart}}</div>
+            <div>{{dateEnd}}</div>
+          </div>
+        </div>
+        <div class="flex flex-col items-center border-r-2 w-1/3">
+          <div class="text-xs text-text-secondary ">状态</div>
+          <div class="flex items-center mt-2">
+            <dashboard
+              :percentage="percentage"
+              :strokeWidth="5"
+              :width="58"
+            >
+              <div
+                slot="content"
+                class="flex flex-col items-center"
+              >
+                <div class="text-lg">{{ percentage + '%'}}</div>
+              </div>
+            </dashboard>
+          </div>
+        </div>
+        <div class="relative flex flex-col items-center w-1/3">
+          <div class="text-xs text-text-secondary mb-1" @click="$router.push('/team/team-frame')">负责人</div>
+          <div class="inherit absolute bottom-0">
+            <img src="@/assets/icons/avator.png" alt="" class="w-9 h-9">
+            <div>张三</div>
+          </div>
+          
+        </div>
+      </div>
+      <!-- 信息栏 -->
+      <div>
+        <group-cell class="mt-4" title="更多信息">
+          <c-cell title="优先级" titleClass="text-sm text-text-secondary">
+            <div slot="right" class="flex items-center">
+              <div class="text-sm rounded-full px-2 border border-red-500 text-red-500">紧急</div>
+              <app-icon
+                icon-name="right-arrow"
+                class-name="ml-5 w-1.5 h-3 flex items-center"
+                @click="$router.push('/okr/o-priority')"
+              />
+            </div>
+            
+          </c-cell>
+          <c-cell title="关联" titleClass="text-sm text-text-secondary" >
+            <app-icon
+              slot="right"
+              icon-name="right-arrow"
+              class-name="ml-5 w-1.5 h-3"
+               @click="$router.push('/okr/o-relation')"
+            />
+          </c-cell>
+          <c-cell title="可访问性" titleClass="text-sm text-text-secondary">
+            <div slot="content" class="">私有</div>
+            <app-icon
+              slot="right"
+              icon-name="right-arrow"
+              class-name="ml-5 w-1.5 h-3 flex items-center"
+              @click="$router.push('/okr/o-accessibility')"
+            />
+          </c-cell>
+          <c-cell title="参与人员" titleClass="text-sm text-text-secondary">
+            <div slot="right" class="flex items-center text-sm ">
+              <div class="">
+                10
+              </div>
+              <app-icon
+                icon-name="right-arrow"
+                class-name="ml-5 w-1.5 h-3"
+                @click="$router.push('/team/team-frame')"
+              />
+            </div>
+          </c-cell>
+          <c-cell title="所有附件" titleClass="text-sm text-text-secondary">
+            <div slot="right" class="flex items-center text-sm ">
+              <div class="">
+                （附件数量）2
+              </div>
+              <app-icon
+                icon-name="right-arrow"
+                class-name="ml-5 w-1.5 h-3"
+              />
+            </div>
+          </c-cell>
+          <c-cell label="描述">
+            <div slot="content" class="text-sm px-4 -mt-2">
+              负责人/执行人有权选择和更改所有内容的具体信息;参与人员仅可查看、
+              添加参与人员和上传附件;所有参与人将被动添加至上级O的参与人员中.....
+            </div>
+            <app-icon
+                slot="right"
+                icon-name="right-arrow"
+                class-name="w-1.5 h-3"
+                @click="$router.push('/okr/o-describe')"
+              />
+          </c-cell>
+        </group-cell>
+        <group-cell class="mt-4" title="拓展属性">
+          <app-icon
+              slot="suffix"
+                icon-name="right-arrow"
+                class-name="w-1.5 h-3"
+                @click="$router.push('/okr/o-extendedAttribute')"
+              />
+          <c-cell title="客户单位" titleClass="text-sm text-text-secondary">
+            <div slot="content" class="text-sm">XXX有限责任公司</div>
+          </c-cell>
+          <c-cell title="客户代表" titleClass="text-sm text-text-secondary">
+            <div slot="content" class="text-sm">张凯丽</div>
+          </c-cell>
+          <c-cell title="联系方式" titleClass="text-sm text-text-secondary">
+            <div slot="content" class="text-sm">173644832910</div>
+          </c-cell>
+        </group-cell>
+      </div>
+      <!-- 底部栏 -->
+      
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { ActionSheet } from 'vant';
+import { Icon } from 'vant';
+import { Calendar } from 'vant';
+
+Vue.use(Calendar);
+Vue.use(Icon);
+Vue.use(ActionSheet);
+export default Vue.extend({
+  name: "KRDetail",
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'dashboard': () => import('@/views/okr/components/dashboard.vue'),
+    'c-cell': () => import('@/components/common/c-cell.vue'),
+    'group-cell': () => import('@/components/common/group-cell.vue')
+  },
+  created() {
+    // console.log(Mock, 'mock')
+  },
+  data() {
+   return {
+     show:false,
+     showDate:false,
+     date:'',
+     dateStart:'4月4日',
+     dateEnd:'5月5日',
+     percentage: 40,
+     love:false,
+     loveColor:false,
+     like:30,
+     comment:12
+    }
+  },
+  computed: {
+    
+  },
+  methods:{
+    isShow(){
+      this.show=!this.show
+    },
+    isLove(){
+      this.love=!this.love
+      this.loveColor=!this.loveColor
+      if(this.love===true){
+        this.like++
+      }else{
+        this.like--
+      }
+    },
+    formatDate(date:Date) {
+      let month=date.getMonth() + 1
+      let day=date.getDate()
+      if(month<10){
+        if(day<10){
+          return `0${date.getMonth() + 1}月0${date.getDate()}日`;
+        }else{
+           return `0${date.getMonth() + 1}月${date.getDate()}日`;
+        }
+      }else{
+        if(day<10){
+          return `${date.getMonth() + 1}月0${date.getDate()}日`;
+        }else{
+           return `${date.getMonth() + 1}月${date.getDate()}日`;
+        }
+      }
+      
+    },
+    onConfirm(date: [any, any]) {
+      const [start, end] = date;
+      this.showDate = false;
+      this.dateStart = `${this.formatDate(start)}`;
+      this.dateEnd = ` ${this.formatDate(end)}`;
+      
+    },
+  }
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/views/okr/o-describe.vue

+<template>
+  <!-- 选择地点 -->
+  <main-page
+    left-arrow
+    @click-left="$router.go(-1)"
+    mainBg="bg-white"
+    headerBg="bg-white"
+  >  
+    <div class="pt-14 px-4 pb-16">
+     <textarea cols="30" rows="5" v-model="value" class="w-full bg-common-bg px-9 py-4"></textarea>
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Icon } from 'vant';
+
+Vue.use(Icon);
+export default Vue.extend({
+  name: "ODescribe",
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+  },
+  created() {
+    // console.log(Mock, 'mock')
+    
+  },
+  data() {
+   return {
+     value:'hello'
+   }
+  },
+  computed: {
+    
+  },
+  methods:{
+    
+  }
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/views/okr/o-extendedAttribute.vue

+<template>
+  <!-- 选择地点 -->
+  <main-page
+    left-arrow
+    @click-left="$router.go(-1)"
+  >  
+  
+    <div class="pt-14 mx-4  bg-white">
+        <div  class="flex border-b w-full py-2.5 px-2.5" @click=" clickIcon1()">
+          <app-icon
+            slot="icon"
+            :icon-name="checked1  ? 'radio-checked': 'radio'"
+            class-name="w-4 h-4 mr-2 flex items-center"
+            
+          />
+          <div class="text-sm">
+            内部
+          </div>
+        </div>
+        <div  class="relative flex items-center border-b py-2.5 px-2.5"  @click=" clickIcon2()">
+          <app-icon
+            slot="icon"
+            :icon-name="checked2  ? 'radio-checked': 'radio'"
+            class-name="w-4 h-4 mr-2 flex items-center"
+           
+          />
+          <div class="text-sm">
+            外部
+          </div>
+          <app-icon
+            slot="icon"
+            icon-name="right-arrow"
+            class-name="w-1.5 h-3 mr-2 flex items-center inherit absolute right-2.5"
+            @click="isShow()"
+          />
+          
+        </div>
+        <div class="pl-5" v-if="show">
+          <c-cell title="客户单位" titleClass="text-sm text-text-secondary" class="border-b">
+            <div slot="content" >XXX有限责任公司</div>
+          </c-cell>
+          <c-cell title="客户代表" titleClass="text-sm text-text-secondary" class="border-b">
+            <div slot="content" >张凯丽</div>
+          </c-cell>
+          <c-cell title="联系方式" titleClass="text-sm text-text-secondary">
+            <div slot="content" >173644832910</div>
+          </c-cell>
+        </div>
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Icon } from 'vant';
+
+Vue.use(Icon);
+export default Vue.extend({
+  name: "OExtendedAttribute",
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'c-cell': () => import('@/components/common/c-cell.vue'),
+  },
+  created() {
+    // console.log(Mock, 'mock')
+    
+  },
+  data() {
+   return {
+     checked1:false,
+     checked2:false,
+     tags:[
+       {key:'private',condition:'内部'},
+       {key:'public',condition:'外部'},
+      ],
+      show:false
+    }
+  },
+  computed: {
+    
+  },
+  methods:{
+    clickIcon1(){
+      this.checked1=!this.checked1
+      if(this.checked1===true){
+        this.checked2=false
+      }
+    },
+    clickIcon2(){
+      this.checked2=!this.checked2
+      if(this.checked2===true){
+        this.checked1=false
+      }
+    },
+    isShow(){
+      this.show=!this.show
+      this.checked2=!this.checked2
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/views/okr/o-priority.vue

+<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 py-2.5 flex items-center bg-white rounded" :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="text-sm rounded-full  px-2.5 mr-2.5" :class="tagColor(tag)">
+                {{tag.condition}}
+              </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: "OPriority",
+  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:'zero',condition:'(无)'},
+       {key:'urgent',condition:'紧急'},
+        {key:'important',condition:'重要'},
+        {key:'common',condition:'普通'},
+        {key:'low',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 '
+      }
+      if(index===0){
+        return 'mt-3'
+      }
+    },
+    tagColor(object: {key: string, condition: string}){
+      if(object.key==='zero'){
+        return ' '
+      }else if(object.key==='urgent'){
+        return 'text-tag-red border border-tag-red '
+      }else if(object.key==='important'){
+        return 'text-tag-yellow border border-tag-yellow'
+      }else if(object.key==='common'){
+        return 'text-tag-green border border-tag-green '
+      }else if(object.key==='low'){
+        return 'border border-current'
+      }else{
+        return '  '
+      }
+    },
+  }
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/views/okr/o-relation.vue

+<template>
+  <!-- 选择地点 -->
+  <main-page
+    left-arrow
+    @click-left="$router.go(-1)"
+  >  
+    <app-icon
+      slot="right"
+      icon-name="edit"
+      class-name="w-4 h-4 flex items-center "
+      @click="$router.push('/okr/o-objective')"
+    />
+    <!-- 内容 -->
+    <div class="pt-14 pb-16 px-4">
+      <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-100' : 'text-text-secondary'"
+          @click="clickTab(tab)"
+        >
+          {{ tab.label }}
+        </div>
+      </div>
+      <div v-show="showLeader">
+        <!-- 列表 -->
+        <div class="mt-9">
+          <div class="bg-white px-2.5 py-4 rounded relative">
+            <app-icon
+              icon-name="avator"
+              class-name="w-9 h-9 absolute top-2 right-2"
+            />
+            <!-- 标题 -->
+            <div class="flex items-center">
+              <div class="text-sm color-tag text-emergency border border-emergency rounded-full py-px px-2.5 mr-2.5">紧急</div>
+              <div class="flex-1 pr-9 truncate">{{ task.name }}</div>
+            </div>
+            <!-- 时间信息 -->
+            <div class="flex mt-1.5">
+              <div class="text-xs bg-text-extreme-light text-text-secondary rounded-sm py-0.5 px-1.5">开始时间：{{ task.startTime }}</div>
+              <div class="text-xs bg-text-extreme-light text-text-secondary rounded-sm py-0.5 px-1.5 ml-4">截至时间：{{ task.endTime }}</div>
+            </div>
+            <!-- 统计 -->
+            <c-progress :task-list="task.list" />
+          </div>
+        </div>
+        <!-- 列表 -->
+        <div class="mt-9">
+          <div class="bg-white px-2.5 py-4 rounded relative">
+            <app-icon
+              icon-name="avator"
+              class-name="w-9 h-9 absolute top-2 right-2"
+            />
+            <!-- 标题 -->
+            <div class="flex items-center">
+              <div class="text-sm text-tag-yellow border border-tag-yellow rounded-full py-px px-2.5 mr-2.5">重要</div>
+              <div class="flex-1 pr-9 truncate">{{ task.name }}</div>
+            </div>
+            <!-- 时间信息 -->
+            <div class="flex mt-1.5">
+              <div class="text-xs bg-text-extreme-light text-text-secondary rounded-sm py-0.5 px-1.5">开始时间：{{ task.startTime }}</div>
+              <div class="text-xs bg-text-extreme-light text-text-secondary rounded-sm py-0.5 px-1.5 ml-4">截至时间：{{ task.endTime }}</div>
+            </div>
+            <!-- 统计 -->
+            <c-progress :task-list="task.list" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+  name: "ORelation",
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'c-progress': () => import('@/views/okr/components/progress.vue')
+  },
+  created() {
+    // console.log(Mock, 'mock')
+  },
+  data() {
+
+    return {
+      tabs: [
+        {
+          label: '同级',
+          key: 'same'
+        },
+        {
+          label: '上级',
+          key: 'superior'
+        },
+        {
+          label: '下级',
+          key: 'subordinate'
+        }
+      ],
+      currentKey: 'same',
+      showLeader:true,
+      task: {
+        name: '增强公司内部管理制度',
+        tag: 'emergency',
+        startTime: '04月01日',
+        endTime: '04月14日',
+        list: [
+          {
+            type: 'completed',
+            typeName: '已完成',
+            num: 2
+          },
+          {
+            typeName: '进行中',
+            type: 'inProgress',
+            num: 2
+          },
+          {
+            type: 'notStart',
+            typeName: '未开始',
+            num: 1
+          },
+          {
+            type: 'shelved',
+            typeName: '搁置中',
+            num: 1
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    
+  },
+  methods:{
+    clickTab(tab: {label: string, key: string}) {
+      this.currentKey = tab.key
+      // if(tab.key==='superior'){
+      //   this.showLeader=true
+      //    this.showObject=false
+      // }else if(tab.key==='subordinate'){
+      //   this.showLeader=false
+      //   this.showObject=true
+      // }
+    },
+    
+  }
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/views/okr/team-frame.vue

+<template>
+  <!-- 所有成员 -->
+  <div class="team-frame">
+    <main-page left-arrow @click-left="$router.go(-1)">
+      <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 pt-14">
+        <!-- 团队架构详情 -->
+        <team-tree
+          :tree-data="team"
+          @click-child="clickItem"
+        />
+        <!-- 通讯录 -->
+        <div class="pb-16">
+          <div class="text-text-secondary py-1">成员</div>
+          <team-contacts
+            :radio="showRadio"
+            :checked.sync="checkedMemberId"
+            :contacts="contacts"
+            @click-member="clickMember"
+          />
+        </div>
+        <!-- 底部操作 -->
+        <!-- <div class="py-2 px-4 bg-common-bg w-screen fixed bottom-0 left-0 z-30">
+          <template v-if="showRadio">
+            <c-button round @click="$router.go(-1)">确定</c-button>
+          </template>
+          <template v-else>
+            <div class="grid grid-cols-3 gap-2.5">
+              <c-button round @click="$router.push('/team/add-member')">添加成员</c-button>
+              <c-button round @click="$router.push('/team/add-department')">添加部门</c-button>
+              <c-button round @click="$router.push('/team/department-management')">部门设置</c-button>
+            </div>
+          </template>
+        </div> -->
+      </div>
+    </main-page>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { team, contacts } from '@/DTO'
+import { Member } from '@/DTO'
+
+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/team/components/team-tree.vue'),
+    'team-contacts': () => import('@/views/team/components/team-contacts.vue'),
+    'c-button': () => import('@/components/common/c-button.vue')
+  },
+  created() {
+    // console.log(Mock, 'mock')
+    this.showRadio = this.$route.query.transfer === '1'
+  },
+  data() {
+    return {
+      title: '导航',
+      team,
+      contacts,
+      checkedMemberId: [],
+      showRadio: false
+    }
+  },
+  methods: {
+    clickMember(member: Member) {
+      this.$router.push({
+        path: '/schedule/schedule-home',
+        query: {
+          member: JSON.stringify(member)
+        }
+      })
+    },
+    clickItem(val: Member) {
+      // console.log(val)
+      if (this.showRadio) {
+        this.$router.push({
+          path: `/schedule/team/${val.id}`,
+          query: {
+            transfer: '1'
+          }
+        })
+        return
+      }
+      this.$router.push(`/schedule/team/${val.id}`)
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>