feat: 拜访日历

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

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div v-for="item in options">{{ item.label }}({{ item.count }})</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const emits = defineEmits(['change']);
+  const props = defineProps({
+    value: {
+      required: true,
+      default: undefined,
+    },
+    options: {
+      required: true,
+      default: [],
+    },
+  });
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,140 @@
+<template>
+  <div class="page">
+    <div class="page-left">
+      <a-calendar v-model:value="calendarValue">
+        <template #dateCellRender="{ current }">
+          <ul class="events">
+            <li v-for="item in getListData(current)" :key="item.content">
+              <a-badge :status="item.type" :text="item.content" />
+            </li>
+          </ul>
+        </template>
+        <template #monthCellRender="{ current }">
+          <div v-if="getMonthData(current)" class="notes-month">
+            <section>{{ getMonthData(current) }}</section>
+            <span>Backlog number</span>
+          </div>
+        </template>
+      </a-calendar>
+    </div>
+    <div class="page-right">
+      <div class="line-1">
+        <a-input-search v-model:value="searchValue" placeholder="请输入日程内容" enter-button="搜索" @search="onSearch" />
+        <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>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { Dayjs } from 'dayjs';
+  import StateTabs from './components/stateTabs/index.vue';
+  // left
+  const calendarValue = ref<Dayjs>('');
+
+  const getListData = (value: Dayjs) => {
+    let listData;
+    switch (value.date()) {
+      case 8:
+        listData = [
+          { type: 'warning', content: 'This is warning event.' },
+          { type: 'success', content: 'This is usual event.' },
+        ];
+        break;
+      case 10:
+        listData = [
+          { type: 'warning', content: 'This is warning event.' },
+          { type: 'success', content: 'This is usual event.' },
+          { type: 'error', content: 'This is error event.' },
+        ];
+        break;
+      case 15:
+        listData = [
+          { type: 'warning', content: 'This is warning event' },
+          { type: 'success', content: 'This is very long usual event。。....' },
+          { type: 'error', content: 'This is error event 1.' },
+          { type: 'error', content: 'This is error event 2.' },
+          { type: 'error', content: 'This is error event 3.' },
+          { type: 'error', content: 'This is error event 4.' },
+        ];
+        break;
+      default:
+    }
+    return listData || [];
+  };
+
+  const getMonthData = (value: Dayjs) => {
+    if (value.month() === 8) {
+      return 1394;
+    }
+  };
+  // right
+  // line-1
+  const searchValue = ref<string>('');
+
+  const onSearch = (searchValue: string) => {
+    console.log('use searchValue', searchValue);
+    console.log('or use this.searchValue', searchValue.value);
+  };
+  // line-2
+  const taskState = ref<number>(0);
+  const taskOptions = reactive<IKeyValue[]>([
+    { label: '待完成', count: 0 },
+    { label: '已完成', count: 0 },
+  ]);
+</script>
+<style lang="scss" scoped>
+  .events {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .events .ant-badge-status {
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+    text-overflow: ellipsis;
+    font-size: 12px;
+  }
+
+  .notes-month {
+    text-align: center;
+    font-size: 28px;
+  }
+
+  .notes-month section {
+    font-size: 28px;
+  }
+  .page {
+    display: flex;
+    background-color: #fff;
+    border-radius: 8px;
+    .page-left,
+    .page-right {
+      padding: 10px;
+    }
+    .page-left {
+      flex: 1;
+    }
+    .page-right {
+      width: 30%;
+      border-left: 1px solid #e6e6e6;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      .line-1 {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+    }
+  }
+</style>