添加客户跟进静态页面

src/baseComponents/SearchBlock.vue

@@ -18,6 +18,8 @@
                                 <!-- && categoryItem.value == buttonSearchData[item.key] -->
                                 <span v-if="categoryItem?.bubbleVal" class="bubble">{{ categoryItem?.bubbleVal }}</span>
                             </span>
+                            
+                            <slot :name="'rowItem-'+item.key"></slot>
                         </div>
                         <div>   
                             <slot :name="item.key"></slot>
@@ -148,6 +150,7 @@ watch(()=>props.searchList,(newVal)=>{
             display: flex;
             gap: 8px;
             flex-wrap: wrap;
+            align-items: center;
             flex:1 1;
             span{
                 position: relative;

src/components/settingCard/SettingCard.vue

@@ -31,7 +31,7 @@
         <template v-slot:[middleColumnItm?.name]="{row}">
             <!-- 地区管理的下拉为省份 -->
             <template v-if="middleColumnItm?.label == '省份'">
-                <el-select v-model="row[middleColumnItm.name]" v-if="row.tmpId">
+                <el-select filterable v-model="row[middleColumnItm.name]" v-if="row.tmpId">
                     <el-option
                         label="输入框"
                         :value="1"
@@ -106,7 +106,7 @@ const disabledEditRowScene = (row,currentIndex,newTableData)=>{
 }
 const disabledDeleteRowScene = (row,currentIndex,newTableData)=>{
     return props.middleColumnItm?.label == '跟进状态' && 
-            [1,newTableData.length, newTableData.length-1, newTableData.length-2].includes(currentIndex)
+            ([1,newTableData.length, newTableData.length-1, newTableData.length-2].includes(currentIndex) || row[props.middleColumnItm.name] == '方案演示') 
 }
 
 // 表格行 编辑确认

src/views/customerFollowUp/index.vue

@@ -1,15 +1,146 @@
 <template>
-    <div>
-        客户跟进
+    <div class="main_container">
+        <div class="page_item end_item">
+            <div class="page_search">
+                <div class="search_content">
+                    <div class="content_left">
+                        <SearchBlock :searchList="searchList" >
+                            <template #rowItem-time>
+                                <el-date-picker
+                                    style="height: 28px;flex-grow: 0;"
+                                    v-model="startAndEndTime"
+                                    type="daterange"
+                                    range-separator="至"
+                                    start-placeholder="开始日期"
+                                    end-placeholder="结束日期"
+                                    size="default"
+                                />
+                            </template>
+                        </SearchBlock>
+                    </div>
+                    <div class="content_right">
+                        <el-button class="delete_button_border_no_bg">赢单申请</el-button>
+                        <el-button class="button_border">操作日志</el-button>
+                    </div>
+                </div>
+            </div>
+            <FormSearchGroup :searchList="[
+                {
+                    key:'queryStr',
+                    type:'input',
+                    placeholder:'请输入关键字搜索',
+                    hidden:false,
+                    defaultValue:'',
+                    disabled:false
+                }
+            ]"/>
+            <Table :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum" 
+                :tableColumns="tableColumns" :tableData="tableData">
+                <template #num="{currentIndex}">
+                    {{ (currentPage - 1) * pageSize + currentIndex }}
+                </template>
+                
+                <template #followUpContent="{row}">
+                    <span class="two_line_ellipsis">{{ row.followUpContent }}</span>
+                </template>
+
+                <template #operation="{row}">
+                    <div class="table_row_option">
+                        <span class="option_button_editor">详情</span>
+                    </div>
+                </template>
+            </Table>
+
+        </div>
     </div>
 </template>
 
 
 <script setup lang="ts">
+import { ref } from 'vue';
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import {searchList} from './searchBlock'
+import Table from '@/baseComponents/Table.vue';
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+
+import {tableColumns} from './table'
+
+
+// 表格数据有关内容
+const tableData = ref([
+    {
+        id: 1,
+        customerType: '首单客户',
+        schoolName: '流星花园学校',
+        contactPerson: '张三',
+        jobTitle: '校长',
+        educationStage: '中学',
+        province: '北京市', // 新增列数据
+        region: '西城区',   // 新增列数据
+        groupName: '1小组', // 新增列数据
+        followUpUser: '张三',
+        followUpProduct: '大数据精准教学',
+        followUpStatus: '试用测试',
+        followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案跟进文案跟进文案跟进文案',
+        followUpTime: '2026-03-11 9:00',
+    },
+    {
+        id: 2,
+        customerType: '首单客户',
+        schoolName: '北京师达',
+        contactPerson: '张三',
+        jobTitle: '校长',
+        educationStage: '中学',
+        province: '北京市',
+        region: '西城区',
+        groupName: '1小组',
+        followUpUser: '张三',
+        followUpProduct: '大数据精准教学',
+        followUpStatus: '试用测试',
+        followUpContent: '跟进文案跟进文案跟进文案跟进文案...',
+        followUpTime: '2026-03-11 9:00',
+    },
+    {
+        id: 3,
+        customerType: '首单客户',
+        schoolName: '北京五十七中学',
+        contactPerson: '张三',
+        jobTitle: '校长',
+        educationStage: '中学',
+        province: '北京市',
+        region: '西城区',
+        groupName: '1小组',
+        followUpUser: '张三',
+        followUpProduct: '大数据精准教学',
+        followUpStatus: '试用测试',
+        followUpContent: '跟进文案跟进文案跟进文案',
+        followUpTime: '2026-03-11 9:00',
+    }
+]);
+
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalNum = ref(0)
+
+
+
+// 筛选项有关数据
+const startAndEndTime = ref()
+const searchParams = ref({})
+
 
 </script>
 
 
 <style lang="scss" scoped>
+.end_item{
+    gap:16px;
+}
+
+.content_right{
+    align-self: flex-start;
+    flex-wrap: wrap;
+
+}
 
 </style>

src/views/customerFollowUp/searchBlock.ts

@@ -0,0 +1,124 @@
+import { ref } from "vue";
+
+export const searchList = ref<SearchBlockItem[]>([
+    {
+        label: '时间',
+        key: 'time',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '今天', value: 'today' },
+            { label: '本周', value: 'thisWeek' },
+            { label: '最近1月', value: 'last1Month' },
+            { label: '最近3月', value: 'last3Month' },
+            { label: '半年内', value: 'halfYear' },
+            { label: '自定义', value: 'custom' },
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '分组',
+        key: 'group',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '分组1', value: 'group1' },
+            { label: '分组2', value: 'group2' },
+            { label: '分组3', value: 'group3' },
+            { label: '分组4', value: 'group4' },
+            { label: '分组5', value: 'group5' },
+            { label: '分组6', value: 'group6' },
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '人员',
+        key: 'personnel',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '马丁', value: 'martin' },
+            { label: '王诗雅', value: 'wangshiya' },
+            { label: '王梓木', value: 'wangzimu' },
+            { label: '殷思源', value: 'yinsiyuan' },
+            { label: '付文杰', value: 'fuwenjie' },
+            { label: '李润曦', value: 'lirunxi' },
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '产品',
+        key: 'product',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '大数据教学诊断', value: 'big_data_diagnosis' },
+            { label: '智能判分', value: 'smart_grading' },
+            { label: '材料采集', value: 'material_collection' },
+            { label: '校内通知', value: 'school_notification' },
+            { label: '校本研修', value: 'school_research' },
+            { label: '协同备课', value: 'collaborative_prep_1' },
+            { label: '协同备课', value: 'collaborative_prep_2' }, // 图片中此项有重复
+            { label: '协同备课', value: 'collaborative_prep_3' }, // 图片中此项有重复
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '省份',
+        key: 'province',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '北京', value: 'beijing' },
+            { label: '上海', value: 'shanghai' },
+            { label: '天津', value: 'tianjin' },
+            { label: '广东', value: 'guangdong' },
+            { label: '广西', value: 'guangxi' },
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '地区',
+        key: 'region',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '东城区', value: 'dongcheng' },
+            { label: '西城区', value: 'xicheng' },
+            { label: '海淀区', value: 'haidian' },
+            { label: '朝阳区', value: 'chaoyang' },
+            { label: '丰台区', value: 'fengtai' },
+            { label: '石景山区', value: 'shijingshan' },
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '学段',
+        key: 'education_stage',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '幼儿园', value: 'kindergarten' },
+            { label: '小学', value: 'primary_school' },
+            { label: '初中', value: 'junior_high' },
+            { label: '高中', value: 'senior_high' },
+            { label: '完全中学', value: 'complete_middle' },
+            { label: '九年一贯', value: 'nine_year' },
+            { label: '十二年一贯', value: 'twelve_year' },
+            { label: '职高', value: 'vocational_high' },
+            { label: '大学', value: 'university' },
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '类型',
+        key: 'type',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '首单客户', value: 'first_order' },
+            { label: '存量客户', value: 'existing_customer' },
+        ],
+        defaultValue: 'all'
+    }
+]);

src/views/customerFollowUp/table.ts

@@ -0,0 +1,141 @@
+import { ref } from "vue";
+
+
+export const tableColumns = ref([
+    {
+        name: 'num',
+        label: '序号',
+        width: '60',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: true,
+       
+    },
+    {
+        name: 'customerType',
+        label: '客户类型',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'schoolName',
+        label: '学校名称',
+        width: '150',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'contactPerson',
+        label: '联系人',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'jobTitle',
+        label: '职务',
+        width: '80',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'educationStage',
+        label: '学段',
+        width: '80',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'province',
+        label: '省份',
+        width: '100', 
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'region',
+        label: '地区',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'groupName',
+        label: '分组',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'followUpUser',
+        label: '跟进人员',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'followUpProduct',
+        label: '跟进产品',
+        width: '120',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'followUpStatus',
+        label: '跟进状态',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'followUpContent',
+        label: '跟进内容',
+        width: '200',
+        fixed: '',
+        align: 'left',
+        minWidth: '', 
+        custom: true,
+    },
+    {
+        name: 'followUpTime',
+        label: '跟进时间',
+        width: '160',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'operation',
+        label: '操作',
+        width: '80',
+        fixed: 'right', 
+        align: 'center',
+        minWidth: '',
+        custom: true,
+    }
+]);