日程详情/日程管理

src/components/common/c-cell.vue

@@ -7,7 +7,7 @@
     <div class="flex py-3 items-center justify-between">
       <slot name="prefix" />
       <div class="flex justify-between flex-1" :class="contentAlign">
-        <div v-if="checkIfEmpty(title)" class="title flex-shrink-0 mr-4" :class="titleColor">{{ title }}</div>
+        <div v-if="checkIfEmpty(title)" class="title flex-shrink-0 mr-4" :class="getClass">{{ title }}</div>
         <!-- 输入框 -->
         <template v-if="type === 'input'">
           <input
@@ -63,6 +63,7 @@ export default Vue.extend({
       type: String,
       default: 'text-text-primary'
     },
+    titleClass: String,
     contentAlign: {
       type: String,
       default: 'items-center'
@@ -72,6 +73,11 @@ export default Vue.extend({
     content: String
   },
   name: 'CCell',
+  computed: {
+    getClass(): string {
+      return `${this.titleColor || ''} ${this.titleClass || '' }`
+    }
+  },
   methods: {
     clickItem() {
       this.$emit('click')

src/components/common/c-tag.vue

 <template>
-  <div class="text-xs px-1 py-0.5 rounded inline-block" :class="getTagClass">
+  <div class="text-xs px-1.5 py-0.5 inline-block" :class="getTagClass">
     {{ label }}
   </div>
 </template>
@@ -17,6 +17,11 @@ export default Vue.extend({
         return ['primary', 'red', 'green', 'purple', 'yellow', 'orange'].indexOf(val) > -1
       }
     },
+    tagClass: String,
+    round: {
+      type: Boolean,
+      default: false
+    },
     label: {
       type: String,
       default: '标签'
@@ -33,7 +38,10 @@ export default Vue.extend({
       //  'tag-yellow': '#F3B200',
       //  'tag-red': '#EB8282',
       //  'tag-purple': '#9F82E5',
-      return `bg-tag-${this.color}-lighter text-tag-${this.color}`
+      if (typeof this.tagClass !== 'undefined' && this.tagClass !== '') {
+        return `${this.tagClass} ${this.round ? 'rounded-full' : 'rounded'}`
+      }
+      return `bg-tag-${this.color}-lighter text-tag-${this.color} ${this.tagClass} ${this.round ? 'rounded-full' : 'rounded'}`
     }
   },
   methods: {

src/router/schedule.ts

@@ -12,18 +12,34 @@ export const scheduleRoutes: Array<RouteConfig> = [
     children: [
       {
         path: 'schedule-home',
-        name: 'schedule-home',
+        name: 'ScheduleHome',
         component: () => import('@/views/schedule/schedule.vue'),
         meta: {
           title: '协同日程'
         }
       },
       {
-        path: 'test',
-        name: 'Test',
-        component: () => import('@/views/schedule/test.vue'),
+        path: 'schedule-detail/:id',
+        name: 'ScheduleDetail',
+        component: () => import('@/views/schedule/schedule-detail.vue'),
         meta: {
-          title: 'Test'
+          title: '日程详情'
+        }
+      },
+      {
+        path: 'team',
+        name: 'ScheduleTeam',
+        component: () => import('@/views/schedule/team-frame.vue'),
+        meta: {
+          title: '所有成员'
+        }
+      },
+      {
+        path: 'team/:id',
+        name: 'ScheduleTeamDetail',
+        component: () => import('@/views/schedule/team-detail.vue'),
+        meta: {
+          title: '所有成员'
         }
       }
     ]

src/views/schedule/components/schedule-card.vue

@@ -2,19 +2,38 @@
   <div class="card flex items-center">
     <div class="action flex-shrink-0 mr-2.5 flex items-start">
       <div class="relative">
-        <app-icon
-          icon-name="radio-checked"
-          class-name="w-4 h-4 mr-1.5 relative z-50"
-        />
+        <div class="relative z-50 mr-1.5">
+          <!-- checkbox -->
+          <div
+            v-if="checkBox"
+            @click="handleCheck">
+            <div
+              v-show="!checked"
+              class="w-4 h-4 border border-schedule-timeline rounded-full"
+            />
+            <div v-show="checked" class="">
+              <app-icon
+                icon-name="radio-checked"
+                class-name="w-4 h-4"
+              />
+            </div>
+          </div>
+          <!-- 状态切换 -->
+          <div v-else>
+            <app-icon
+              icon-name="radio-checked"
+              class-name="w-4 h-4"
+            />
+          </div>
+        </div>
         <div class="absolute h-4 w-4 top-0 left-0 rounded-full bg-common-bg z-10" />
       </div>
-      
       <div class="text-text-secondary font-light">
         <div class="text-xs">{{ time }}</div>
         <div class="text-xxs">{{ space }}</div>
       </div>
     </div>
-    <div class="bg-white rounded-lg px-3 py-2 flex-1 overflow-hidden">
+    <div class="bg-white rounded-lg px-3 py-2 flex-1 overflow-hidden" @click="handleClick">
       <!-- 会议标题 -->
       <div class="content flex justify-between over">
         <div class="overflow-hidden">
@@ -71,6 +90,14 @@ export default Vue.extend({
       default() {
         return {}
       }
+    },
+    checkBox: {
+      type: Boolean,
+      default: true
+    },
+    checked: {
+      type: Boolean,
+      default: false
     }
   },
   components: {
@@ -79,7 +106,15 @@ export default Vue.extend({
   data() {
     return {
       time: '8:00am',
-      space: '45min',
+      space: '45min'
+    }
+  },
+  methods: {
+    handleCheck() {
+      this.$emit('check', this.schedule)
+    },
+    handleClick() {
+      this.$emit('click', this.schedule)
     }
   }
 })

src/views/schedule/components/schedule-line.vue

@@ -4,35 +4,45 @@
       v-for="(item, index) in meetings"
       :key="index"
       class="w-full relative pt-4">
-      <schedule-card :schedule="item" />
+      <schedule-card
+        :schedule="item"
+        :check-box="checkBox"
+        :checked="checkedList.indexOf(item.id) > -1"
+        @check="handleCheck"
+        @click="handleClick"
+      />
       <div class="absolute w-px left-2 bg-schedule-timeline" :class="getLineClass(index)" />
     </div>
   </div>
 </template>
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { PropType} from 'vue'
 
-interface Meeting {
+interface Schedule {
+  id: number,
   title: string,
   content: string,
   location: string,
   member: number
 }
 
-const meetings: Array<Meeting> = [
+const meetings: Array<Schedule> = [
   {
+    id: 11,
     title: '部门例会',
     content: '讨论“上链查”的实际应用模块',
     location: '峨眉山会议室',
     member: 3
   },
   {
+    id: 22,
     title: '部门例会',
     content: '讨论“上链查”的实际应用模块',
     location: '峨眉山会议室',
     member: 3
   },
   {
+    id: 33,
     title: '部门例会',
     content: '讨论“上链查”的实际应用模块',
     location: '峨眉山会议室',
@@ -43,10 +53,20 @@ const meetings: Array<Meeting> = [
 export default Vue.extend({
   name: 'ScheduleLine',
   props: {
-    meeting: {
-      type: Object,
+    scheduleList: {
+      type: Array as PropType<Array<Schedule>>,
       default() {
-        return {}
+        return []
+      }
+    },
+    checkBox: {
+      type: Boolean,
+      default: false
+    },
+    checkedList: {
+      type: Array,
+      default() {
+        return []
       }
     }
   },
@@ -55,8 +75,10 @@ export default Vue.extend({
     'schedule-card': () => import('./schedule-card.vue')
   },
   data() {
+    // const checkList: number[] = []
     return {
       meetings
+      // checkList
     }
   },
   methods: {
@@ -71,6 +93,19 @@ export default Vue.extend({
         return 'h-1/2 left-2 top-0'
       }
       return 'h-full left-2 top-0'
+    },
+    handleCheck(schedule: Schedule) {
+      const list: Array<number> = JSON.parse(JSON.stringify(this.checkedList))
+      const index = list.findIndex(id => id === schedule.id)
+      if (index < 0) {
+        list.push(schedule.id)
+      } else {
+        list.splice(index, 1)
+      }
+      this.$emit('update:checkedList', list)
+    },
+    handleClick(schedule: Schedule) {
+      this.$emit('click-schedule', schedule)
     }
   }
 })

src/views/schedule/schedule-detail.vue

+<template>
+  <!-- 协同日程 -->
+  <main-page
+    left-arrow
+    :title="title"
+    @click-left="$router.go(-1)"
+  >
+    <div
+      slot="right"
+      class="h-6 w-6 flex items-center justify-end"
+      @click="show = true"
+    >
+      <app-icon
+        icon-name="dot-h"
+        class-name="h-1 w-5"
+      />
+    </div>
+    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
+    <div class="py-16 px-4">
+      <group-cell title="基本信息">
+        <c-cell
+          title="开始时间"
+          content="4月3号 14:30"
+          title-class="text-text-secondary text-sm"
+        />
+        <c-cell
+          title="结束"
+          content="4月3号 15:30"
+          title-class="text-text-secondary text-sm"
+        />
+        <c-cell
+          title="地点"
+          content="第一会议室"
+          title-class="text-text-secondary text-sm"
+        />
+        <c-cell>
+          <div
+            slot="content"
+            class="w-full flex justify-between items-center"
+          >
+            <div class="text-text-secondary text-sm">负责人</div>
+            <app-icon
+              icon-name="avator"
+              class-name="h-6 w-6"
+            />
+          </div>
+        </c-cell>
+        <c-cell>
+          <div
+            slot="content"
+            class="w-full flex justify-between items-center"
+          >
+            <div class="text-text-secondary text-sm">参与人员</div>
+            <div class="flex items-center">
+              <div class="avators flex">
+                <div
+                  v-for="index of 3"
+                  :key="index"
+                  class="-ml-2 first:-ml-0"
+                >
+                  <app-icon
+                    icon-name="avator-small"
+                    class-name="h-6 w-6"
+                  />
+                </div>
+              </div>
+              <div class="text-xxs bg-text-extreme-light rounded-sm text-text-secondary ml-2 px-1">+12</div>
+              <app-icon
+                icon-name="right-arrow"
+                class-name="w-1.5 h-2 ml-2"
+              />
+            </div>
+          </div>
+        </c-cell>
+        <c-cell label="描述">
+          <div slot="content" class="text-sm text-text-secondary">非强制参加的公司公开日程</div>
+        </c-cell>
+      </group-cell>
+      <group-cell class="mt-4" title="更多信息">
+        <c-cell
+          title="属性"
+          title-class="text-text-secondary text-sm"
+          content="私有"
+        />
+        <c-cell>
+          <div slot="content" class="w-full flex justify-between items-center">
+            <div class="title text-sm text-text-secondary">标签</div>
+            <c-tag round tag-class="bg-gradient-to-r from-meeting-l to-meeting-r text-white text-sm" label="会议" />
+          </div>
+        </c-cell>
+        <c-cell>
+          <div
+            slot="content"
+            class="w-full flex justify-between items-center"
+          >
+            <div class="text-text-secondary text-sm">附件</div>
+            <div class="flex items-center">
+              <div class="text-sm text-text-secondary">2</div>
+              <app-icon
+                icon-name="right-arrow"
+                class-name="w-1.5 h-2 ml-2"
+              />
+            </div>
+          </div>
+        </c-cell>
+      </group-cell>
+      <!-- 评论 -->
+      <div class="fixed bottom-0 left-0 w-full bg-white px-4 py-2.5 flex items-center justify-between">
+        <div class="flex-1 bg-input-bg rounded-full px-4 py-2 text-xs text-text-secondary">添加评论</div>
+        <div class="text-sm ml-4">评论</div>
+      </div>
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from "vue"
+import { ActionSheet } from 'vant'
+
+Vue.use(ActionSheet)
+
+export default Vue.extend({
+  name: "ScheduleDetail",
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'group-cell': () => import('@/components/common/group-cell.vue'),
+    'c-cell': () => import('@/components/common/c-cell.vue'),
+    'c-tag': () => import('@/components/common/c-tag.vue')
+  },
+  data() {
+    return {
+      show: false,
+      actions: [
+        {
+          name: '分享我的日程',
+          action: 'share'
+        },
+        {
+          name: '管理我的日程',
+          action: 'manage'
+        },
+        {
+          name: '查看其他成员日程',
+          action: 'check'
+        }
+      ],
+      title: ''
+    }
+  },
+  methods: {
+    onSelect(action: {name: string, action: string}) {
+      this.show = false
+    },
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/views/schedule/schedule.vue

@@ -2,30 +2,74 @@
   <!-- 协同日程 -->
   <main-page
     left-arrow
+    :title="title"
     @click-left="$router.go(-1)"
   >
     <div
+      v-if="!isMember"
       slot="right"
       class="h-6 w-6 flex items-center justify-end"
+      @click="show = true"
     >
       <app-icon
         icon-name="dot-h"
         class-name="h-1 w-5"
       />
     </div>
+    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
     <div class="pt-14 pb-4">
       <calendar
         :selected-days="selectedDays"
         :range-days="rangeDays"
         :select.sync="select"
       />
-      <div class="px-4">
-        <schedule-line />
-        <div class="fixed bottom-0 left-0 w-full flex items-center justify-center">
-          <app-icon
-            icon-name="add-btn"
-            class-name="h-18 w-18"
-          />
+      <div class="px-4 mt-6 pb-16">
+        <div v-if="!isMember" class="tab flex relative">
+          <div
+            v-for="tab in tabs"
+            :key="tab.key"
+            class="transition-all duration-200 flex-1 py-1.5 text-center"
+            :class="currentKey === tab.key ? 'text-white rounded-full bg-color-primary' : ''"
+            @click="clickTab(tab)"
+          >
+            {{ tab.label }}
+          </div>
+        </div>
+        <schedule-line
+          class="mt-4"
+          :check-box="showCheckBox"
+          :checked-list.sync="checkedSchdules"
+          @click-schedule="clickSchedule"
+        />
+        <!-- 查看成员日程时不显示操作栏 -->
+        <div v-if="!isMember" class="fixed bottom-0 left-0 w-full flex items-center justify-center">
+          <!-- 默认展示，添加日程操作 -->
+          <div v-show="!showCheckBox">
+              <app-icon
+                icon-name="add-btn"
+                class-name="h-18 w-18"
+              />
+            </div>
+          <!-- 管理日程显示 -->
+          <div v-show="showCheckBox" class="w-full bg-common-bg">
+            <!-- 我的日程 -->
+            <div
+              v-show="currentKey === 'mine'"
+              class="flex w-full text-center"
+            >
+              <div class="flex-1 py-1.5">归档</div>
+              <div class="flex-1 py-1.5">删除</div>
+              <div class="flex-1 py-1.5" @click="complete">完成</div>
+            </div>
+            <!-- 企业日程 -->
+            <div
+              v-show="currentKey === 'company'"
+              class="flex w-full text-center"
+            >
+              <div class="flex-1 py-1.5">申请</div>
+              <div class="flex-1 py-1.5" @click="complete">完成</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -34,21 +78,18 @@
 
 <script lang="ts">
 import Vue from "vue"
+import { ActionSheet } from 'vant'
+
+Vue.use(ActionSheet)
 
-interface Meeting {
+interface Schedule {
+  id: number,
   title: string,
   content: string,
   location: string,
   member: number
 }
 
-const meeting: Meeting = {
-  title: '部门例会',
-  content: '讨论“上链查”的实际应用模块',
-  location: '峨眉山会议室',
-  member: 3
-}
-
 export default Vue.extend({
   name: "Schedule",
   components: {
@@ -59,14 +100,74 @@ export default Vue.extend({
     'calendar': () => import('./components/calendar.vue')
   },
   data() {
+    const checkedSchdules: number[] = []
     return {
-      meeting,
+      checkedSchdules,
       selectedDays: [new Date('2021-08-17'), new Date('2021-08-14'), new Date('2021-08-25')],
       rangeDays: [[new Date('2021-08-20'), new Date('2021-08-24')], [new Date('2021-08-31'), new Date('2021-09-01')]],
-      select: null
+      select: null,
+      tabs: [
+        {
+          label: '我的日程',
+          key: 'mine'
+        },
+        {
+          label: '企业日程',
+          key: 'company'
+        }
+      ],
+      currentKey: 'mine',
+      show: false,
+      actions: [
+        {
+          name: '分享我的日程',
+          action: 'share'
+        },
+        {
+          name: '管理我的日程',
+          action: 'manage'
+        },
+        {
+          name: '查看其他成员日程',
+          action: 'check'
+        }
+      ],
+      title: '',
+      isMember: false,
+      showCheckBox: false,
     }
   },
-  methods: {}
+  created() {
+    const query = this.$route.query.member
+    if (typeof query !== 'undefined') {
+      this.isMember = true
+      const member = JSON.parse(query as string)
+      this.title = member.name
+    }
+  },
+  methods: {
+    clickTab(tab: {label: string, key: string}) {
+      this.currentKey = tab.key
+      this.checkedSchdules = []
+    },
+    onSelect(action: {name: string, action: string}) {
+      this.show = false
+      switch(action.action) {
+        case 'check':
+          this.$router.push('/schedule/team')
+          break
+        case 'manage':
+          this.showCheckBox = true
+      }
+    },
+    complete() {
+      this.checkedSchdules = []
+      this.showCheckBox = false
+    },
+    clickSchedule(schedule: Schedule) {
+      this.$router.push(`/schedule/schedule-detail/${schedule.id}`)
+    }
+  }
 })
 </script>
 

src/views/schedule/team-detail.vue

+<template>
+  <!-- 团队详情 -->
+  <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
+        isDetail
+        :tree-data="[currentTeam]"
+        :pre-team="parentTeam.name"
+        @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.push('/team/team-management')">确定</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>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { team, contacts } from '@/DTO'
+import { Member } from '@/DTO'
+
+export default Vue.extend({
+  name: 'TeamDetail',
+  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() {
+    this.showRadio = this.$route.query.transfer === '1'
+  },
+  data() {
+    let flatTeams: Array<Member> = []
+    let currentTeam: Member = {
+      id: 0,
+      name: ''
+    }
+    return {
+      title: '导航',
+      team,
+      contacts,
+      parentTeam: {},
+      currentTeam,
+      flatTeams,
+      checkedMemberId: [],
+      showRadio: false
+      // newTeams: []
+    }
+  },
+  methods: {
+    getFlatTeams(arr: Array<Member>) {
+      let newArr: Array<Member> = []
+      for (let i=0; i<arr.length; i++) {
+        newArr.push(arr[i])
+        if (arr[i].children?.length) {
+          newArr = newArr.concat(this.getFlatTeams(arr[i].children as Array<Member>))
+        }
+      }
+      return newArr
+    },
+    clickItem(val: Member) {
+      this.$router.push(`/schedule/team/${val.id}`)
+    },
+    addDepartment() {
+      console.log('添加部门')
+    },
+    clickMember(member: Member) {
+      this.$router.push({
+        path: '/schedule/schedule-home',
+        query: {
+          member: JSON.stringify(member)
+        }
+      })
+    },
+  },
+  watch: {
+    $route: {
+      handler() {
+        const id = parseInt(this.$route.params.id)
+        this.flatTeams = this.getFlatTeams(this.team)
+        this.currentTeam = this.flatTeams.find(team => team.id === id) as Member
+        const parentId = this.currentTeam.parentId
+        this.parentTeam = this.flatTeams.find(team => team.id === parentId) as Member
+      },
+      immediate: true
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/schedule/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>

src/views/team/components/team-contacts.vue

@@ -174,7 +174,7 @@ export default Vue.extend({
         this.handleCheck(member)
         return
       }
-      this.$router.push(`/team/team-member/${member.id}`)
+      this.$emit('click-member', member)
     },
     handleCheck(member: Member) {
       let arr = Array.from(this.checked)

src/views/team/team-detail.vue

@@ -23,6 +23,7 @@
           :radio="showRadio"
           :checked.sync="checkedMemberId"
           :contacts="contacts"
+          @click-member="clickMember"
         />
       </div>
       <!-- 底部操作 -->
@@ -93,7 +94,10 @@ export default Vue.extend({
     },
     addDepartment() {
       console.log('添加部门')
-    }
+    },
+    clickMember(member: Member) {
+      this.$router.push(`/team/team-member/${member.id}`)
+    },
   },
   watch: {
     $route: {

src/views/team/team-frame.vue

@@ -22,6 +22,7 @@
             :radio="showRadio"
             :checked.sync="checkedMemberId"
             :contacts="contacts"
+            @click-member="clickMember"
           />
         </div>
         <!-- 底部操作 -->
@@ -74,6 +75,9 @@ export default Vue.extend({
     //   console.log('click left')
     //   this.$router.go(-1)
     // },
+    clickMember(member: Member) {
+      this.$router.push(`/team/team-member/${member.id}`)
+    },
     clickItem(val: Member) {
       // console.log(val)
       if (this.showRadio) {

tailwind.config.js

@@ -45,9 +45,18 @@ module.exports = {
         'tag-red-lighter': '#FAEEEE',
         'tag-purple': '#9F82E5',
         'tag-purple-lighter': '#F1ECFD',
+        // 日程
+        'input-bg': '#F8F8FA',
         // 日程下划线
         'schedule-line': '#EBAE44',
-        'schedule-timeline': '#D3DFE6'
+        'schedule-timeline': '#D3DFE6',
+        // 日程类型标签渐变
+        'meeting-l': '#5DC2BA',
+        'meeting-r': '#64AAE8',
+        'field-l': '#FABD60',
+        'field-r': '#9AD8E7',
+        'trip-l': '#F24E72',
+        'trip-r': '#C855B5'
       },
       spacing: {
         4.5: '1.08rem',
@@ -995,7 +1004,7 @@ module.exports = {
     lineHeight: ['responsive'],
     listStylePosition: ['responsive'],
     listStyleType: ['responsive'],
-    margin: ['responsive'],
+    margin: ['responsive', 'first'],
     maxHeight: ['responsive'],
     maxWidth: ['responsive'],
     minHeight: ['responsive'],