fix: 客户详情逻辑修改

src/api/customer-manage/index.js

@@ -20,3 +20,12 @@ export const fetchVisitCalendar = (params) => {
     params,
   });
 };
+
+
+export const fetchTotalHeader = (params) => {
+  return request({
+    url: `/portal/customer/statistics/info`,
+    method: 'get',
+    params,
+  });
+}

src/views/customer-manage/customer-management/index.vue

@@ -5,7 +5,7 @@
         <template #tab>
           <span @click="item.onClick(item.params)">
             <component :is="item.icon"></component>
-            {{ item.title }}
+            {{ item.title }}({{ item.count }})
           </span>
         </template>
       </a-tab-pane>
@@ -14,20 +14,23 @@
   </div>
 </template>
 <script setup lang="jsx">
-  import { ref, reactive, h } from 'vue';
+  import { ref, reactive, h, onMounted, watch } from 'vue';
   import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
   import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
   import { useRouter } from 'vue-router';
   import { message } from 'ant-design-vue';
   import { PlusOutlined } from '@ant-design/icons-vue';
+  import { fetchTotalHeader } from '/@/api/customer-manage/index.js';
 
   const router = useRouter();
 
   const activeKey = ref(0);
+
   const tabsOptions = [
     {
       title: '全部',
       icon: 'AppstoreOutlined',
+      count: 0,
       params: {
         a: 1,
       },
@@ -38,17 +41,20 @@
     {
       title: '客户列表',
       icon: 'TeamOutlined',
+      count: 0,
       params: {},
       onClick: (value) => {},
     },
     {
       title: '审核中',
+      count: 0,
       icon: 'FileSyncOutlined',
       params: {},
       onClick: (value) => {},
     },
     {
       title: '无效客户',
+      count: 0,
       icon: 'UserDeleteOutlined',
       params: {},
       onClick: (value) => {},
@@ -58,6 +64,7 @@
     tableOptions,
     setTablePropsValue: setValue,
     getTablePropsValue: getValue,
+    fetchTableData,
   } = useBsTable({
     tableOptions: {
       url: '/supports/customer/queryPage',
@@ -213,12 +220,6 @@
             },
           },
         ],
-        onSearch() {
-          fetchTableData();
-        },
-        onReset() {
-          fetchTableData();
-        },
       },
       pagerConfig: {
         enabled: true,
@@ -243,8 +244,27 @@
           },
         ],
       },
+      mounted() {
+        updateHeaderInfo();
+      },
     },
   });
+
+  const updateTabsCount = (counts) => {
+    counts.forEach((val, idx) => {
+      tabsOptions.value[idx].count = val || 0;
+    });
+  };
+
+  const updateHeaderInfo = async () => {
+    const headerInfo = await fetchTotalHeader();
+    const { customerQuantity, customerAuditQuantity, customerInvalidQuantity, customerValidQuantity } = headerInfo.data;
+    updateTabsCount([customerQuantity, customerAuditQuantity, customerInvalidQuantity, customerValidQuantity]);
+  };
+
+  watch(activeKey, () => {
+    fetchTableData();
+  });
 </script>
 <style lang="scss" scoped>
   .customer-management {

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

@@ -4,7 +4,7 @@
       <a-empty :image="simpleImage" />
     </div>
     <a-timeline v-else>
-      <a-timeline-item>
+      <a-timeline-item v-for="i in 3">
         <div class="timeline-item-container">
           <div class="item-header">
             <span>2025-05-12 周三 10:30</span>
@@ -40,15 +40,13 @@
               </div>
             </div>
             <template #actions>
-              <div @click="">取消日程</div>
-              <div @click="" :style="{ color: token.colorPrimary }">日程完成</div>
+              <div @click="handleCancelPlan(i)">取消日程</div>
+              <div @click="handlePlanOver(i)" :style="{ color: token.colorPrimary }">日程完成</div>
             </template>
           </a-card>
         </div>
       </a-timeline-item>
-      <a-timeline-item color="gray">Solve initial network problems 2015-09-01</a-timeline-item>
     </a-timeline>
-    {{ type }}
   </div>
 </template>
 <script setup>
@@ -60,16 +58,27 @@
   const { useToken } = theme;
   const { token } = useToken();
 
+  const emits = defineEmits(['cancelPlan', 'planOver'])
+
   const props = defineProps({
     type: {
       required: true,
       default: 0,
     },
     calendarDetail: {
-      required: true,
+      required: false,
       default: [{}],
     },
   });
+
+  const handleCancelPlan  = (item) => {
+    emits('cancelPlan', item)
+  }
+
+  const handlePlanOver = (item) => {
+    emits('planOver', item)
+  }
+
 </script>
 <style lang="scss" scoped>
   .detail-container {

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

@@ -0,0 +1,123 @@
+<template>
+  <bs-modal
+    :visible="modalOptions.visible"
+    :width="modalOptions.width"
+    :title="modalOptions.title"
+    :modal-extra-props="modalOptions.modalExtraProps"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <div class="content">
+      <bs-form
+        :form-data="formOptions.formData"
+        :form-fields="formOptions.formFields"
+        :form-extra-props="formOptions.formExtraProps"
+        :footer-render="() => null"
+      />
+    </div>
+  </bs-modal>
+</template>
+<script setup lang="jsx">
+  import { BsModal, useBsModal, useBsForm, BsForm } from '/@/components/BsUi/index.js';
+  import { REQUIRED_STATE, SCENE_TYPE, SELECT_MULTIPLE } from '/@/components/BsUi/constant.js';
+  const {
+    modalOptions,
+    getModalPropsValue: getMVal,
+    setModalPropsValue: setMVal,
+  } = useBsModal({
+    modalOptions: {
+      title: '取消拜访',
+      visible: false,
+      size: 'small',
+      modalExtraProps: {
+        destroyOnClose: true,
+        okButtonProps: {
+          loading: false,
+        },
+      },
+    },
+  });
+
+  const { formOptions } = useBsForm({
+    formOptions: {
+      formId: 'formId',
+      formExtraProps: {},
+      formData: {},
+      formFields: [
+        {
+          id: '1',
+          label: '取消原因',
+          component: 'a-select',
+          componentProps: {
+            placeholder: '请选择',
+            options: [{}],
+          },
+          field: 'name',
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '2',
+          label: '预计时间',
+          component: 'a-textarea',
+          componentProps: {
+            placeholder: '请输入',
+            disabled: false,
+          },
+          field: 'name2',
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          span: 12,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  });
+
+  const showModal = () => {
+    setMVal('visible', true);
+  };
+
+  const handleCancel = () => {
+    setMVal('visible', false);
+  };
+
+  const handleOk = ({}) => {
+    setMVal('modalExtraProps.okButtonProps.loading', true);
+    setTimeout(() => {
+      setMVal('modalExtraProps.okButtonProps.loading', false);
+      setMVal('visible', false);
+    }, 1000);
+  };
+
+  defineExpose({
+    showModal,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .content {
+    width: 100%;
+  }
+</style>

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

@@ -0,0 +1,276 @@
+<template>
+  <bs-modal
+    :visible="modalOptions.visible"
+    :width="modalOptions.width"
+    :title="modalOptions.title"
+    :modal-extra-props="modalOptions.modalExtraProps"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <div class="content">
+      <bs-form
+        :form-data="formOptions.formData"
+        :form-fields="formOptions.formFields"
+        :form-extra-props="formOptions.formExtraProps"
+        :footer-render="() => null"
+      />
+    </div>
+  </bs-modal>
+</template>
+<script setup lang="jsx">
+  import { BsModal, useBsModal, useBsForm, BsForm } from '/@/components/BsUi/index.js';
+  import { REQUIRED_STATE, SCENE_TYPE, SELECT_MULTIPLE } from '/@/components/BsUi/constant.js';
+  const {
+    modalOptions,
+    getModalPropsValue: getMVal,
+    setModalPropsValue: setMVal,
+  } = useBsModal({
+    modalOptions: {
+      title: '创建拜访计划',
+      visible: false,
+      size: 'middle',
+      modalExtraProps: {
+        destroyOnClose: true,
+        okButtonProps: {
+          loading: false,
+        },
+      },
+    },
+  });
+
+  const { formOptions } = useBsForm({
+    formOptions: {
+      formId: 'formId',
+      formExtraProps: {},
+      formData: {},
+      formFields: [
+        {
+          id: '1',
+          label: '计划名称',
+          component: 'a-input',
+          componentProps: {
+            placeholder: '请输入',
+          },
+          field: 'name',
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '2',
+          label: '预计时间',
+          component: 'a-date-picker',
+          componentProps: {
+            placeholder: '请选择',
+            disabled: false,
+          },
+          field: 'name2',
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          span: 12,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '3',
+          label: '提前提醒时间',
+          component: 'a-input',
+          componentProps: {
+            placeholder: '请输入',
+            disabled: false,
+            slots: [
+              {
+                slotName: 'addonAfter',
+                customRender() {
+                  return <a-select options={[{ value: '20', label: '分钟' }]} value='20'></a-select>;
+                },
+              },
+            ],
+          },
+          field: 'name3',
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          span: 12,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '4',
+          label: '客户名称',
+          component: 'a-select',
+          componentProps: {
+            placeholder: '自动带出',
+            disabled: false,
+          },
+          field: 'name4',
+          span: 12,
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+
+        {
+          id: '100',
+          label: '拜访责任人',
+          component: 'bs-org-user-selector',
+          componentProps: {
+            placeholder: '请选择',
+            disabled: true,
+            sceneType: SCENE_TYPE.USER,
+            multiple: SELECT_MULTIPLE.ONE,
+          },
+          span: 12,
+          field: 'name100',
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '101',
+          label: '项目名称',
+          component: 'a-select',
+          componentProps: {
+            placeholder: '请选择',
+            disabled: false,
+          },
+          field: 'name101',
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '102',
+          label: '拜访地址(省市区)',
+          component: 'a-select',
+          componentProps: {
+            placeholder: '请选择',
+            disabled: false,
+          },
+          field: 'name102',
+          sort: '1',
+          visible: '1',
+          span: 12,
+          required: REQUIRED_STATE.NO_REQUIRED,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '103',
+          label: '详细地址',
+          component: 'a-input',
+          componentProps: {
+            placeholder: '请选择',
+            disabled: false,
+          },
+          field: 'name103',
+          sort: '1',
+          visible: '1',
+          span: 12,
+          required: REQUIRED_STATE.NO_REQUIRED,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  });
+
+  const showModal = () => {
+    setMVal('visible', true);
+  };
+
+  const handleCancel = () => {
+    setMVal('visible', false);
+  };
+
+  const handleOk = ({}) => {
+    setMVal('modalExtraProps.okButtonProps.loading', true);
+    setTimeout(() => {
+      setMVal('modalExtraProps.okButtonProps.loading', false);
+      setMVal('visible', false);
+    }, 1000);
+  };
+
+  defineExpose({
+    showModal,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .content {
+    width: 100%;
+  }
+</style>

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

@@ -0,0 +1,198 @@
+<template>
+  <bs-modal
+    :visible="modalOptions.visible"
+    :width="modalOptions.width"
+    :title="modalOptions.title"
+    :modal-extra-props="modalOptions.modalExtraProps"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <div class="content">
+      <bs-form
+        :form-data="formOptions.formData"
+        :form-fields="formOptions.formFields"
+        :form-extra-props="formOptions.formExtraProps"
+        :footer-render="() => null"
+      />
+    </div>
+  </bs-modal>
+</template>
+<script setup lang="jsx">
+  import { BsModal, useBsModal, useBsForm, BsForm } from '/@/components/BsUi/index.js';
+  import { REQUIRED_STATE, SCENE_TYPE, SELECT_MULTIPLE } from '/@/components/BsUi/constant.js';
+  const {
+    modalOptions,
+    getModalPropsValue: getMVal,
+    setModalPropsValue: setMVal,
+  } = useBsModal({
+    modalOptions: {
+      title: '拜访完成',
+      visible: false,
+      size: 'middle',
+      modalExtraProps: {
+        destroyOnClose: true,
+        okButtonProps: {
+          loading: false,
+        },
+      },
+    },
+  });
+
+  const { formOptions } = useBsForm({
+    formOptions: {
+      formId: 'formId',
+      formExtraProps: {},
+      formData: {},
+      formFields: [
+        {
+          id: '1',
+          label: '拜访地址(省市区)',
+          component: 'a-input',
+          componentProps: {
+            placeholder: '请输入',
+          },
+          field: 'name',
+          sort: '1',
+          visible: '1',
+          span: 12,
+          required: REQUIRED_STATE.REQUIRED,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '2',
+          label: '详细地址',
+          component: 'a-select',
+          componentProps: {
+            placeholder: '请选择',
+            disabled: false,
+          },
+          field: 'name2',
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          span: 12,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '3',
+          label: '客户名称',
+          component: 'a-input',
+          componentProps: {
+            placeholder: '请输入',
+            disabled: false,
+          },
+          field: 'name3',
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          span: 12,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '4',
+          label: '项目名称',
+          component: 'a-input',
+          componentProps: {
+            placeholder: '自动带出',
+            disabled: false,
+          },
+          field: 'name4',
+          span: 12,
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+
+        {
+          id: '100',
+          label: '拜访结果',
+          component: 'a-textarea',
+          componentProps: {
+            placeholder: '请选择',
+            disabled: true,
+            sceneType: SCENE_TYPE.USER,
+            multiple: SELECT_MULTIPLE.ONE,
+          },
+          span: 12,
+          field: 'name100',
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  });
+
+  const showModal = () => {
+    setMVal('visible', true);
+  };
+
+  const handleCancel = () => {
+    setMVal('visible', false);
+  };
+
+  const handleOk = ({}) => {
+    setMVal('modalExtraProps.okButtonProps.loading', true);
+    setTimeout(() => {
+      setMVal('modalExtraProps.okButtonProps.loading', false);
+      setMVal('visible', false);
+    }, 1000);
+  };
+
+  defineExpose({
+    showModal,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .content {
+    width: 100%;
+  }
+</style>

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

@@ -0,0 +1,142 @@
+<template>
+  <bs-modal
+    :visible="modalOptions.visible"
+    :width="modalOptions.width"
+    :title="modalOptions.title"
+    :modal-extra-props="modalOptions.modalExtraProps"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <div class="content">
+      <bs-contents-wrapper>
+        <bs-descriptions
+          v-for="(it, itx) in detailItems"
+          :key="itx"
+          :items="it.items"
+          :title="it.title"
+          :extra-props="{ column: 2 }"
+        ></bs-descriptions>
+      </bs-contents-wrapper>
+    </div>
+  </bs-modal>
+</template>
+<script setup lang="jsx">
+  import { useBsModal, useBsForm, BsModal, BsCatalog, BsContentsWrapper, BsLink, BsDescriptions } from '/@/components/BsUi/index.js';
+  import { ref } from 'vue';
+  const {
+    modalOptions,
+    getModalPropsValue: getMVal,
+    setModalPropsValue: setMVal,
+  } = useBsModal({
+    modalOptions: {
+      title: '查看详情',
+      visible: false,
+      size: 'middle',
+      modalExtraProps: {
+        footer: null,
+        destroyOnClose: true,
+        okButtonProps: {
+          loading: false,
+        },
+      },
+    },
+  });
+
+  const detailItems = ref([
+    {
+      title: '拜访计划',
+      items: [
+        {
+          label: '计划名称',
+          value: '计划名称详细信息展示位置在这里，预留了两列的宽度在这里',
+          extraProps: {
+            span: 2,
+          },
+        },
+        {
+          label: '预计时间',
+          value: '2025-06-25 10:30',
+        },
+        {
+          label: '提前提醒时间',
+          value: '2天',
+        },
+        {
+          label: '客户名称',
+          value: '中国大唐集团有限公司',
+        },
+        {
+          label: '拜访责任人',
+          value: '邱明阳',
+        },
+        {
+          label: '项目名称',
+          value: '具体项目名称',
+          extraProps: {
+            span: 2,
+          },
+        },
+        {
+          label: '拜访目的',
+          value: '拜访目的',
+          extraProps: {
+            span: 2,
+          },
+        },
+        {
+          label: '拜访地址',
+          value: '省市区详情地址',
+          extraProps: {
+            span: 2,
+          },
+        },
+      ],
+    },
+    {
+      title: '拜访完成',
+      items: [
+        {
+          label: '拜访地址',
+          value: '拜访地址',
+          extraProps: {
+            span: 2,
+          },
+        },
+        {
+          label: '拜访结果',
+          value: '拜访结果',
+          extraProps: {
+            span: 2,
+          },
+        },
+      ],
+    },
+  ]);
+
+  const showModal = () => {
+    setMVal('visible', true);
+  };
+
+  const handleCancel = () => {
+    setMVal('visible', false);
+  };
+
+  const handleOk = ({}) => {
+    setMVal('modalExtraProps.okButtonProps.loading', true);
+    setTimeout(() => {
+      setMVal('modalExtraProps.okButtonProps.loading', false);
+      setMVal('visible', false);
+    }, 1000);
+  };
+
+  defineExpose({
+    showModal,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .content {
+    width: 100%;
+    max-height: 500px;
+  }
+</style>

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

@@ -44,6 +44,7 @@
                 :class="{ 'events-item': true, 'events-active': item.type === 0 }"
                 v-for="item in getListData(current).details.slice(0, 9)"
                 :key="item.id"
+                @click="handleViewPersonDetail(item)"
               >
                 {{ item.content.slice(0, 1) }}
               </div>
@@ -56,15 +57,21 @@
     <div class="page-right">
       <div class="line-1">
         <a-input-search v-model:value="searchValue" placeholder="请输入日程内容" enter-button="搜索" @search="onSearch" />
-        <a-button :icon="h(PlusSquareOutlined)" type="primary">创建计划</a-button>
+        <a-button :icon="h(PlusSquareOutlined)" type="primary" @click="handleCreatePlan">创建计划</a-button>
       </div>
       <div class="line-2">
         <StateTabs v-model:value="taskState" :options="taskOptions" />
       </div>
       <div class="line-content">
-        <CalendarDetail :type="taskState" :data="calendarDetail" />
+        <CalendarDetail :type="taskState" :data="calendarDetail"  @cancel-plan="handleCancelPlan" @plan-over="handlePlanOver" />
       </div>
     </div>
+
+    <CreateVisitPlanModal ref="createVisitPlanModalRef" />
+    <VisitDetailModal ref="visitDetailModalRef" />
+    <OverVisitPlanModal ref="overVisitPlanModalRef"/>
+    <CancelVisitPlanModal ref="cancelVisitPlanModalRef" />
+
   </div>
 </template>
 <script setup>
@@ -76,16 +83,30 @@
   import { fetchVisitCalendar } from '/@/api/customer-manage/index.js';
   import StateTabs from './components/stateTabs/index.vue';
   import CalendarDetail from './components/calendarDetail/index.vue';
+  import CreateVisitPlanModal from './components/createVisitPlanModal/index.vue';
+  import VisitDetailModal from './components/visitDetailModal/index.vue';
+  import OverVisitPlanModal from "./components/overVisitModal/index.vue"
+  import CancelVisitPlanModal from "./components/cancelVisitModal/index.vue"
 
   const { useToken } = theme;
   const { token } = useToken();
 
+  const createVisitPlanModalRef = ref(null);
+  const visitDetailModalRef = ref(null);
+  const overVisitPlanModalRef = ref(null);
+  const cancelVisitPlanModalRef = ref(null);
+
   const queryForm = reactive({
     teamScope: undefined,
     manager: undefined,
     date: dayjs().format('YYYY-MM-DD'),
   });
 
+  const  handleViewPersonDetail = () => {
+    visitDetailModalRef.value.showModal();
+  }
+
+
   function fetchVisitCalendarData() {
     console.log('fetchVisitCalendarData', queryForm);
     // fetchVisitCalendar(queryForm).then((res) => {});
@@ -93,6 +114,14 @@
 
   onMounted(fetchVisitCalendarData);
 
+  const handleCancelPlan = (item) => {
+    cancelVisitPlanModalRef.value.showModal();
+  };
+
+  const handlePlanOver = (item) => {
+    overVisitPlanModalRef.value.showModal();
+  };
+
   watch(
     () => ({ date: queryForm.date }),
     () => {
@@ -197,6 +226,10 @@
   ]);
   // line-3
   const calendarDetail = reactive([]);
+
+  const handleCreatePlan = () => {
+    createVisitPlanModalRef.value.showModal();
+  };
 </script>
 <style lang="scss" scoped>
   .search-bar {
@@ -269,7 +302,7 @@
       flex: 1;
     }
     .page-right {
-      width: 30%;
+      max-width: 400px;
       border-left: 1px solid #e6e6e6;
       display: flex;
       flex-direction: column;

src/views/customer-manage/visit-recommendation/components/table-data/index.vue

@@ -24,7 +24,18 @@
                 {{ tab.title }}
               </div>
             </template>
-            <bs-table v-bind="tableOptions"></bs-table>
+            <bs-table v-bind="tableOptions">
+              <template #empty>
+                <bs-empty>
+                  <template #description>
+                    <div class="desc">
+                      <span>暂无行程，</span>
+                      <span :style="{color: token.colorPrimary, cursor: 'pointer'}">去创建</span>
+                    </div>
+                  </template>
+                </bs-empty>
+              </template>
+            </bs-table>
           </a-tab-pane>
         </a-tabs>
       </template>
@@ -34,8 +45,12 @@
 
 <script setup lang="jsx">
   import { h, ref } from 'vue';
-  import { BsTable, useBsTable, BsCatalog } from '/@/components/BsUi/index.js';
+  import { BsTable, useBsTable, BsCatalog, BsEmpty } from '/@/components/BsUi/index.js';
   import CityGroup from './modules/CityGroup.vue';
+  import {theme} from "ant-design-vue";
+
+  const { useToken } = theme;
+  const { token } = useToken();
 
   const activeKey = ref('customer');
 
@@ -91,7 +106,6 @@
           },
         ],
       },
-      url: '/supports/customer/queryPage',
       gridOptions: {
         loading: false,
         data: [],
@@ -153,5 +167,14 @@
     :deep(.anticon) {
       margin: 0;
     }
+
+    .desc {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 500;
+      color: #202224;
+    }
   }
 </style>