ls

src/router/team.ts

@@ -226,7 +226,15 @@ export const teamRoutes: Array<RouteConfig> = [
         meta:{
           title:'加入或创建团队'
         }
-      }
+      },
+      {
+        path: 'import',
+        name: 'Import',
+        component: () => import('@/views/team/import.vue'),
+        meta:{
+          title:'批量导入'
+        }
+      },
     ]
   }
 ]
\ No newline at end of file

src/views/okr/components/object-card.vue

 <template>
   <!-- 内容 -->
   <div class="py-2 px-2">
-      <div v-for="(object,index) in objects" :key="index" class="rounded" >
+      <div v-for="(object,index) in taskList" :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 class=" px-2 mr-2 rounded-full" :class="isColor(object)">{{object.typeName}}</div>
           <div >{{object.thing}}</div>
         </div>
       </div>
@@ -15,27 +15,27 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue, { PropType } from 'vue'
+
+  interface Task {
+    id:number
+    type: 'urgent' | 'important' |'common' ,
+    typeName: string,
+    thing: string
+  }
 export default Vue.extend({
-  name: "OObjective",
+  name: "Card",
   components: {
     'app-icon': () => import('@/components/common/Icon.vue'),
   },
-  created() {
-    // console.log(Mock, 'mock')
-  },
+  props: {
+      taskList: Array as PropType<Array<Task>>,
+      
+    },
   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: '',
+      checked:'',
     }
   },
   computed: {
@@ -47,27 +47,17 @@ export default Vue.extend({
     clickIcon(index:number){
       this.checked=index+''
     },
-    isColor(object: {condition: string, thing: string}){
-      if(object.condition==='紧急'){
+    isColor(object: {type: string, typeName: string,thing: string}){
+      if(object.type==='urgent'){
         return 'border border-tag-red text-tag-red'
-      }else if(object.condition==='重要'){
+      }else if(object.type==='important'){
         return 'border border-tag-yellow  text-tag-yellow'
-      }else if(object.condition==='一般'){
+      }else if(object.type==='common'){
         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>
 

src/views/okr/o-objective.vue

@@ -30,7 +30,8 @@
         <leader-card></leader-card>
       </div>
       <div v-show="showObject">
-        <object-card></object-card>
+      <object-card :taskList="list"></object-card>
+       
       </div>
     </div>
   </main-page>
@@ -62,6 +63,14 @@ export default Vue.extend({
           key: 'objective'
         }
       ],
+      list:[
+        {id:1,type:'urgent',typeName:'紧急',thing:'按优先级排列，同级按首字母排列'},
+        {id:2,type:'important',typeName:'重要',thing:'b增强公司内部管理制度2'},
+        {id:1,type:'urgent',typeName:'紧急',thing:'a增强公司内部管理制度1'},
+        {id:3,type:'common',typeName:'一般',thing:'d增强公司内部管理制度3'},
+        {id:2,type:'important',typeName:'重要',thing:'g增强公司内部管理制度2'},
+        {id:3,type:'common',typeName:'一般',thing:'c增强公司内部管理制度3'}, 
+      ],
       currentKey: 'leader',
       showLeader:true,
       showObject:false,
@@ -81,7 +90,7 @@ export default Vue.extend({
         this.showObject=true
       }
     },
-    
+
   }
 })
 </script>

src/views/team/import.vue

+<template>
+  <!-- 加入/创建团队 -->
+  <div class="team-frame">
+    <main-page
+      left-arrow
+      @click-left="$router.go(-1)"
+    >
+      <div class="px-4 pt-14 pb-4">
+        <div class="rounded bg-blue-200 text-blue-400 px-2 py-2 text-sm">批量导入需要先下载下方的批量导入模版，将成员信息全部按要求完成填写后，可选择下方上传信息表，自动识别并添加所有成员。</div>
+        <div >
+          <div class="flex justify-between items-center bg-white rounded px-4 py-3 my-4" >
+            <div>下载模板</div>
+            <app-icon
+              slot="right"
+              icon-name="dot"
+              class-name="w-1 h-1 flex  items-center"
+            />
+          </div>
+          <div class="flex justify-between items-center bg-white rounded px-4 py-3 ">
+            <div>上传信息表</div>
+            <app-icon
+              slot="right"
+              icon-name="dot"
+              class-name="w-1 h-1 flex  items-center"
+            />
+          </div>
+        </div>
+        <div class="flex justify-center mt-10" v-if="show">
+          <div class="bg-gray-700 text-white px-4 py-4 rounded w-1/3 text-center">下载已完成</div>
+          <div class="bg-gray-700 text-white px-4 py-4 rounded w-1/3 ml-4 text-center">上传成功</div>
+        </div>
+        <van-action-sheet v-model="show" class="px-4 py-4">
+          <div v-show="show" class="w-full rounded-full py-2 px-2 text-center bg-gray-500 text-white">上传中...</div>
+          <div v-show="show" class="w-full rounded-full py-2 px-2 text-center bg-gray-500 mt-4 text-white">下载中...</div>
+        </van-action-sheet>
+        <van-overlay :show="show" />
+      </div>
+    </main-page>
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+import { Overlay } from 'vant';
+import { ActionSheet } from 'vant';
+
+Vue.use(ActionSheet);
+Vue.use(Overlay);
+export default Vue.extend({
+  name: 'Import',
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    "app-icon": () => import("@/components/common/Icon.vue"),
+  },
+  created() {
+    // console.log(Mock, 'mock')
+  },
+  data() {
+    return {
+      show:false,
+    }
+  },
+  methods: {
+    isShow(){
+      this.show=!this.show
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>
\ No newline at end of file