fix: 拜访日历

src/views/customer-manage/visit-calendar/components/stateTabs/index.vue

@@ -1,11 +1,18 @@
 <template>
-  <div>
-    <div v-for="item in options">{{ item.label }}({{ item.count }})</div>
+  <div class="tabs-container">
+    <div :class="{ 'tabs-item': true, 'tab-active': value === item.key }" v-for="item in options" :key="item.key" @click="handleChangeTab(item)">
+      {{ item.label }}({{ item.count }})
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  const emits = defineEmits(['change']);
+  import { theme, message } from 'ant-design-vue';
+
+  const { useToken } = theme;
+  const { token } = useToken();
+
+  const emits = defineEmits(['update:value', 'change']);
   const props = defineProps({
     value: {
       required: true,
@@ -16,6 +23,35 @@
       default: [],
     },
   });
+
+  function handleChangeTab(item) {
+    if (item.key === props.value) return;
+    emits('update:value', item.key);
+    emits('change', item);
+  }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .tabs-container {
+    display: flex;
+    align-items: center;
+    background-color: #f5f5f5;
+    padding: 4px;
+    border-radius: 6px;
+    gap: 8px;
+    .tabs-item {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 6px;
+      padding: 6px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .tab-active {
+      background-color: #fff;
+      color: v-bind('token.colorPrimary');
+    }
+  }
+</style>

src/views/customer-manage/visit-calendar/index.vue

@@ -23,12 +23,16 @@
         <a-button type="primary" ghost>添加日程</a-button>
       </div>
       <div class="line-2">
-        <!-- <a-radio-group v-model:value="taskState">
-          <a-radio-button :value="0">待完成({{ 0 }})</a-radio-button>
-          <a-radio-button :value="1">已完成({{ 0 }})</a-radio-button>
-        </a-radio-group> -->
         <StateTabs v-model:value="taskState" :options="taskOptions" />
       </div>
+      <div class="line-content">
+        <template v-if="taskState === 0">
+          <div>待完成</div>
+        </template>
+        <template v-if="taskState === 1">
+          <div>已完成</div>
+        </template>
+      </div>
     </div>
   </div>
 </template>
@@ -44,8 +48,8 @@
     switch (value.date()) {
       case 8:
         listData = [
-          { type: 'warning', content: 'This is warning event.' },
-          { type: 'success', content: 'This is usual event.' },
+          { type: 'processing', content: 'This is warning event.' },
+          { type: 'processing', content: 'This is usual event.' },
         ];
         break;
       case 10:
@@ -63,6 +67,7 @@
           { type: 'error', content: 'This is error event 2.' },
           { type: 'error', content: 'This is error event 3.' },
           { type: 'error', content: 'This is error event 4.' },
+          { type: 'success', content: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
         ];
         break;
       default:
@@ -86,8 +91,8 @@
   // line-2
   const taskState = ref<number>(0);
   const taskOptions = reactive<IKeyValue[]>([
-    { label: '待完成', count: 0 },
-    { label: '已完成', count: 0 },
+    { key: 0, label: '待完成', count: 0 },
+    { key: 1, label: '已完成', count: 0 },
   ]);
 </script>
 <style lang="scss" scoped>
@@ -129,12 +134,14 @@
       border-left: 1px solid #e6e6e6;
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      gap: 12px;
       .line-1 {
         display: flex;
         align-items: center;
         gap: 8px;
       }
+      .line-content {
+      }
     }
   }
 </style>