公海客户添加接口定义和默认列表页的头部筛选和客户列表接口调用

src/api/highSeasCustomer.ts

@@ -0,0 +1,124 @@
+import request from '../utils/request.js'
+let adminPrefix = import.meta.env.VITE_API_ADMIN_PRE
+
+// 查询顶部筛选条件信息接口
+export const getHeaderSearchParamsApi = () => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/head/select/data`,
+        method: 'get',
+    })
+}
+
+// 分页查询公海客户信息列表数据接口
+export const getHighSeasCustomerListApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/customer/list`,
+        method: 'post',
+        data
+    })
+}
+
+// 新增公海客户数据接口
+export const addHighSeasCustomerApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/customer/add`,
+        method: 'post',
+        data
+    })
+}
+
+// 导入公海客户数据接口
+export const importHighSeasCustomerApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/importCustomerData`,
+        method: 'post',
+        data
+    })
+}
+
+
+
+// 修改公海客户数据接口
+export const updateHighSeasCustomerApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/customer/update`,
+        method: 'post',
+        data
+    })
+}
+
+// 删除公海客户信息接口
+export const deleteHighSeasCustomerApi = (customerId:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/customer/delete/${customerId}`,
+        method: 'post',
+    })
+}
+
+
+// 认领公海客户信息接口
+export const claimHighSeasCustomerApi = (customerId:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/customer/claim/${customerId}`,
+        method: 'post',
+    })
+}
+
+
+// 查询详情信息接口
+export const getHighSeasCustomerDetailApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/customer/data/detail`,
+        method: 'post',
+        data
+    })
+}
+
+
+// 公海客户查询联系人数据接口
+export const getContactPeopleListApi = (params:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/customer/person/query`,
+        method: 'get',
+        params
+    })
+}
+
+
+
+
+// 公海客户添加联系人数据接口
+export const addContactPeopleApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/customer/person/add`,
+        method: 'post',
+        data
+    })
+}
+
+// 公海客户修改联系人数据接口
+export const updateContactPeopleApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/customer/person/update`,
+        method: 'post',
+        data
+    })
+}
+
+// 公海客户删除联系人数据接口
+export const deleteContactPeopleApi = (personId:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/customer/person/delete/${personId}`,
+        method: 'get',
+    })
+}
+
+// 查询日志记录信息接口
+export const getOperationLogApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/public/customer/oper/log/`,
+        method: 'post',
+        data
+    })
+}
+

src/components/SchoolFormDialog/formDialog.ts

@@ -13,17 +13,7 @@ export const formItemList = ref([
     key: 'schoolStage',
     label: '学校学段',
     type: 'radio',
-    selectList: [
-      { label: '幼儿园', value: 'kindergarten' },
-      { label: '小学', value: 'primary' },
-      { label: '初中', value: 'middle' },
-      { label: '高中', value: 'senior' },
-      { label: '完中', value: 'secondary' },
-      { label: '九年一贯', value: 'nine_years' },
-      { label: '十二年一贯', value: 'twelve_years' },
-      { label: '职高', value: 'vocational' },
-      { label: '大学', value: 'university' },
-    ],
+    selectList: [],
     rules:[{required:true,trigger:'blur',message:'请填写信息'}],
     style: { }
   },
@@ -38,9 +28,7 @@ export const formItemList = ref([
         placeholder: '请选择省份',
         disabled: false,
         style: { },
-        selectList: [
-          { label: '北京', value: 'beijing' }
-        ]
+        selectList: []
       },
       {
         key: 'district',
@@ -48,9 +36,7 @@ export const formItemList = ref([
         placeholder: '请选择地区',
         disabled: false,
         style: { },
-        selectList: [
-          { label: '东城区', value: 'dongcheng' }
-        ]
+        selectList: []
       }
     ],
     rules:[{required:true,trigger:'blur',message:'请填写信息'}],
@@ -60,7 +46,7 @@ export const formItemList = ref([
     key: 'detailAddress',
     label: '详细地址',
     type: 'input',
-    placeholder: '通州北苑',
+    placeholder: '请输入详细地址',
     rules:[{required:true,trigger:'blur',message:'请填写信息'}],
     style: { }
   }

src/components/SchoolFormDialog/index.vue

@@ -3,8 +3,9 @@
         :title="props.schoolTitle" 
         :visible="editFormDialogVisible" 
         :submitLoading="editFormDialogSubmitLoading"
-        :defaultFormData="{...defaultFormData}"
-        :formItemList="formItemList"
+        :defaultFormData="schoolFormData"
+        :formItemList="filterFormItemList"
+        @formItemChange="HandleFormItemChange"
         @close="CloseFormDialog"
         @confirm="HandleConfirmFormDialog">
     </FormDialog>
@@ -13,11 +14,21 @@
 
 
 <script setup lang="ts">
-import {  ref } from 'vue';
+import {  ref,watch } from 'vue';
 
 import FormDialog from '@/baseComponents/FormDialog.vue';
 import {formItemList} from './formDialog'
 
+// 动态变更的表单下拉配置
+interface DynamicFormItmOpt {
+    key:string;
+    selectList?:Array<{
+        label:string,
+        value:string
+    }>,
+    unionSelectList?:Array<DynamicFormItmOpt>
+}
+
 const props = defineProps({
     defaultFormData:{
         type:Object,
@@ -26,17 +37,82 @@ const props = defineProps({
     schoolTitle:{
         type:String,
         default:'编辑学校'
+    },
+    dynamicFormItmOpt:{
+        type:Array<DynamicFormItmOpt>,
+        default:()=>[]
     }
 })
+
+const emit = defineEmits(['confirm'])
+
+const schoolFormData = ref({})
+
+
 const editFormDialogVisible = defineModel('visible')
-const editFormDialogSubmitLoading = ref(false)
+const editFormDialogSubmitLoading = defineModel('editFormDialogSubmitLoading')
 
+
+const filterFormItemList = ref(JSON.parse(JSON.stringify(formItemList.value)))
 const CloseFormDialog = ()=>{
     editFormDialogVisible.value = false
 }
-const HandleConfirmFormDialog = ()=>{
-    CloseFormDialog()
+const HandleConfirmFormDialog = (params)=>{
+    emit('confirm',params)
+}
+// 处理表单项变更
+const HandleFormItemChange = (params)=>{
+    const {key,val,formData,subKey} = params
+    if(key == 'provinceArea' && subKey == 'province'){
+        // 变更地区下拉
+        filterFormItemList.value = filterFormItemList.value.map(item=>{
+            if(item.key == 'provinceArea'){
+                let provinceSubSelectList = item.unionSelectList.find(unionItm=>unionItm.key == 'province')
+                                                ?.selectList.find(opt=>opt.value==val)?.subData || []
+                item.unionSelectList.map(unionItm=>{
+                    if(unionItm.key == 'district'){
+                        unionItm.selectList = provinceSubSelectList
+                    }
+                })
+            }
+            return item
+        })
+        // 同时要清空地区选择
+        schoolFormData.value.provinceArea.district = null
+    }
 }
+
+
+
+// 动态变更表单默认值
+watch(()=>props.defaultFormData,(newVal)=>{
+    schoolFormData.value = newVal
+},{deep:true})
+
+// 动态变更表单下拉
+watch(()=>props.dynamicFormItmOpt,(newVal)=>{
+    filterFormItemList.value = filterFormItemList.value.map(item=>{
+        let result = newVal.find(dynamicItm=>{
+            return item.key == dynamicItm.key
+        })
+        if(result){
+            if(result.unionSelectList){
+                let dynamicUnionSelectList = result.unionSelectList
+                let finalUnionSelectList = item.unionSelectList.map(unionItm=>{
+                    let matchDynamic = dynamicUnionSelectList.find(dynItm=>dynItm.key == unionItm.key)
+                    if(matchDynamic){
+                        unionItm.selectList = matchDynamic.selectList
+                    }
+                    return unionItm
+                })
+                item.unionSelectList = finalUnionSelectList
+            }else{
+                item.selectList = result.selectList
+            }
+        }
+        return item
+    })
+},{deep:true})
 </script>
 
 

src/utils/exportExcelData.ts

@@ -0,0 +1,90 @@
+import ExcelJS from 'exceljs';
+
+
+
+//前端 导出 Excel
+export const HandleExportExcel = async (tableColumn,tableData,sheetName) => {
+  // 1. 提取表头
+  const headers = tableColumn.map(column => column.label);
+
+  // 2. 创建工作簿和工作表
+  const workbook = new ExcelJS.Workbook();
+  const worksheet = workbook.addWorksheet(sheetName);
+
+  // 3. 添加表头行
+  const headerRow = worksheet.addRow(headers);
+  
+  // 4. 定义表头样式
+  headerRow.eachCell((cell) => {
+    cell.style = {
+      font: { name: 'Microsoft YaHei', size: 12, bold: true, color: { argb: 'FF333333' } },
+      fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFF4F6F8' } },
+      border: {
+        top: { style: 'thin', color: { argb: 'FFD9D9D9' } },
+        left: { style: 'thin', color: { argb: 'FFD9D9D9' } },
+        bottom: { style: 'thin', color: { argb: 'FFD9D9D9' } },
+        right: { style: 'thin', color: { argb: 'FFD9D9D9' } },
+      },
+      alignment: { vertical: 'middle', horizontal: 'left', wrapText: true },
+    };
+  });
+
+  // 5. 添加数据行
+  tableData.forEach(row => {
+    const rowData = tableColumn.map(column => {
+      const cellValue = row[column.name];
+      if (cellValue && Array.isArray(cellValue) && cellValue.length > 0) {
+        return cellValue.map((item: any) => item.label || '').join('\n');
+      }
+      return cellValue;
+    });
+    const excelRow = worksheet.addRow(rowData);
+
+    // 6. 定义数据行样式
+    excelRow.eachCell({ includeEmpty: true }, (cell) => {
+      cell.style = {
+        font: { name: 'Microsoft YaHei', size: 12, color: { argb: 'FF333333' } },
+        border: {
+          top: { style: 'thin', color: { argb: 'FFD9D9D9' } },
+          left: { style: 'thin', color: { argb: 'FFD9D9D9' } },
+          bottom: { style: 'thin', color: { argb: 'FFD9D9D9' } },
+          right: { style: 'thin', color: { argb: 'FFD9D9D9' } },
+        },
+        alignment: { vertical: 'top', horizontal: 'left', wrapText: true },
+      };
+    });
+
+    // 7. 处理分组表头样式（仅针对每行的第一个单元格）
+    if (row.isHeader) {
+        // 获取该行的第一个单元格（列索引从 1 开始）
+        const firstCell = excelRow.getCell(1); 
+        // 合并原有字体样式并加粗
+        firstCell.font = { ...firstCell.font, bold: true };
+        // 设置背景色
+        firstCell.fill = { 
+            type: 'pattern', 
+            pattern: 'solid', 
+            fgColor: { argb: 'FFF4F6F8' } 
+        };
+    }
+  });
+
+  // 8. 设置列宽
+  worksheet.columns = headers.map(() => ({ width: 25 }));
+
+  // 9. 导出文件
+  const buffer = await workbook.xlsx.writeBuffer();
+  const blob = new Blob([buffer], { 
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
+  });
+  
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `${sheetName}_${new Date().toISOString().slice(0, 10)}.xlsx`;
+  link.style.visibility = 'hidden';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+};

src/views/highSeasCustomer/formDialog.ts

@@ -6,6 +6,7 @@ export const batchImportFormItemList = ref([
         key: 'file',
         label: '上传文件',
         type:'noDragFile',
+        acceptType:['xlsx','xls']
     },
     {
         key: 'templateFile',

src/views/highSeasCustomer/index.vue

@@ -4,7 +4,7 @@
              <div class="page_search">
                 <div class="search_content">
                     <div class="content_left">
-                        <SearchBlock :searchList="blockSearchList"></SearchBlock>
+                        <SearchBlock :searchList="blockSearchList" @searchChange="HandleSearchChange"></SearchBlock>
                     </div>
                     <div class="content_right">
                         <el-button class="button_refresh" @click="OpenBatchImportDialog">批量导入</el-button>
@@ -12,8 +12,9 @@
                     </div>
                 </div>
             </div>
-            <FormSearchGroup :searchList="formSearchList"></FormSearchGroup>
-            <Table :tableColumns="publicSeasTableColumns" :tableData="tableData">
+            <FormSearchGroup :searchList="formSearchList" @searchChange="HandleSearchChange"></FormSearchGroup>
+            <Table :tableColumns="publicSeasTableColumns" :tableData="tableData" 
+                :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum">
                 <template #operation="{row}">
                     <div class="table_row_option">
                         <span class="button_editor">认领</span>
@@ -28,7 +29,10 @@
         <SchoolFormDialog 
             :schoolTitle="schoolTitle" 
             v-model:visible="schoolVisible" 
-            :defaultFormData="schoolDefaultFormData">
+            v-model:editFormDialogSubmitLoading="editFormDialogSubmitLoading"
+            :defaultFormData="schoolDefaultFormData"
+            :dynamicFormItmOpt="dynamicFormItmOpt"
+            @confirm="HandleSchoolDialogConfirm">
         </SchoolFormDialog>
 
 
@@ -39,7 +43,7 @@
             @close="CloseBatchImportDialog"
             @confirm="HandleBatchImportComfirm">
             <template #templateFile>
-                <el-button class="button_refresh">下载模板</el-button>
+                <el-button class="button_refresh" @click="HandleDownloadTemplate">下载模板</el-button>
             </template>
             <template #tableTemplate>
                 <Table :hidePagination="true" :tableColumns="templateTableColumns" :tableData="[{},{}]" />
@@ -53,14 +57,13 @@
 
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 
 import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
 import {formSearchList} from './formSearchGroup';
 import SearchBlock from '@/baseComponents/SearchBlock.vue';
-import { blockSearchList } from './searchBlock';
 import Table from '@/baseComponents/Table.vue';
 import {publicSeasTableColumns,templateTableColumns} from './table'
 
@@ -69,8 +72,148 @@ import FormDialog from '@/baseComponents/FormDialog.vue';
 
 import {batchImportFormItemList} from './formDialog'
 
+import {HandleExportExcel} from '@/utils/exportExcelData'
+
+import { getHeaderSearchParamsApi,
+        getHighSeasCustomerListApi, 
+        addHighSeasCustomerApi,
+        updateHighSeasCustomerApi,
+        deleteHighSeasCustomerApi,
+        claimHighSeasCustomerApi,
+        importHighSeasCustomerApi,
+
+    } from '@/api/highSeasCustomer'
+
+
+
+
+
+
+
+
 const router = useRouter()
 
+
+
+// 批量导入弹窗有关数据
+const batchImportVisible = ref(false)
+const batchImportSubmitLoading = ref(false)
+const OpenBatchImportDialog = ()=>{
+    batchImportVisible.value = true   
+}
+const CloseBatchImportDialog = ()=>{
+    batchImportVisible.value = false
+}
+const HandleBatchImportComfirm = ()=>{
+    CloseBatchImportDialog()
+}
+
+const HandleDownloadTemplate = async ()=>{
+   await HandleExportExcel(templateTableColumns.value,[],'新增学校_批量导入模板')
+
+}
+
+
+/** 跳转详情 */
+const GoToDetail = (row)=>{
+    router.push(`highSeasCustomerDetail?id=${row.id}`)
+}
+
+/** 1. 头部筛选 有关操作 */
+const searchParams = ref({
+    stage:'all',
+    province:'all',
+    area:'all',
+    queryStr:'',
+})
+// 获取头部筛选数据
+const stageOptions = ref([])
+const regionOptions = ref([])
+const blockSearchList = computed(()=>{
+    let areaOptions = []
+    if(searchParams.value.province !== 'all'){
+        areaOptions = regionOptions.value.find(item=>item.value === searchParams.value.province)?.subData || []
+    }else{
+        areaOptions = regionOptions.value.map(item=>{
+            return item.subData || []
+        }).flat()
+    }
+    return [
+        {
+            label: '学段',
+            key: 'stage',
+            type: 'single',
+            defaultValue: searchParams.value.stage,
+            options: [
+            { label: '全部', value: 'all' },
+            ...(stageOptions.value),
+            ],
+        },
+        {
+            label: '省份',
+            key: 'province',
+            type: 'single',
+            options: [
+                { label: '全部', value: 'all' },
+                ...(regionOptions.value),
+            ],
+            defaultValue: searchParams.value.province,
+        },
+        {
+            label: '地区',
+            key: 'area',
+            type: 'single',
+            options: [
+                { label: '全部', value: 'all' },
+                ...(areaOptions),
+            ],
+            defaultValue: searchParams.value.area,
+        }
+    ]
+});
+// 获取头部筛选数据
+const GetHeaderSearchParams = async ()=>{
+    let res = await getHeaderSearchParamsApi()
+    const {regionData,stageData} = res.data || {}
+    // 学段筛选选项
+    stageOptions.value = stageData?.map(item=>{
+        return{
+            label:item.name,
+            value:item.id || 'all',
+        }
+    })?.slice(1) || []
+
+    // 省份筛选项
+    regionOptions.value = regionData?.map(item=>{
+        return{
+            label:item.name,
+            value:item.id || 'all',
+            subData:item.subData?.map(sub=>{
+                return {
+                    label:sub.name,
+                    value:sub.id || 'all',
+                }
+            }).slice(1) || [],
+        }
+    })?.slice(1) || []
+}
+/** 头部筛选 变更 */
+const HandleSearchChange = async (params:any,key:string)=>{
+    searchParams.value = {
+        ...searchParams.value,
+        ...params
+    }
+    if(key === 'province'){
+        searchParams.value.area = 'all'
+    }
+    await GetTableData()
+}
+
+
+ /** 2. 表格数据 有关操作 */
+const pageSize = ref(20)
+const currentPage = ref(1)
+const totalNum = ref(0)
 // 表格数据
 const tableData = ref([
   {
@@ -84,37 +227,50 @@ const tableData = ref([
     idleDays: '3天',
     detailAddress:'通州北苑'
   },
-  {
-    index: '2',
-    schoolName: '北京师达',
-    schoolStage: 'middle',
-    schoolStageName: '初中',
-    province: '北京市',
-    district: '西城区',
-    poolTime: '2026-03-11',
-    idleDays: '3天',
-    detailAddress:'通州北苑'
-
-  },
-  {
-    index: '3',
-    schoolName: '北京五十七中学',
-    schoolStage: 'senior',
-    schoolStageName: '高中',
-    province: '北京市',
-    district: '西城区',
-    poolTime: '2025-11-01',
-    idleDays: '10天',
-    detailAddress:'通州北苑'
-
-  }
+  
 ])
 
+const GetTableData = async ()=>{
+    let params = {
+        queryStr: searchParams.value.queryStr,
+        stageId: searchParams.value.stage === 'all' ? '' : searchParams.value.stage,
+        provinceId: searchParams.value.province === 'all' ? '' : searchParams.value.province,
+        cityId: searchParams.value.area === 'all' ? '' : searchParams.value.area,
+        pageNum: currentPage.value,
+        pageSize: pageSize.value
+    }
+    let res = await getHighSeasCustomerListApi(params)
+    tableData.value = res?.data?.records || []
+    totalNum.value = res.data.total || 0
+}
+
 
-// 学校弹窗有关数据
+/**
+ * 学校弹窗有关数据
+ */
 const schoolVisible = ref(false)
 const schoolTitle = ref('')
 const schoolDefaultFormData = ref({})
+const editFormDialogSubmitLoading = ref(false)
+
+// 动态变更的表单下拉项
+const dynamicFormItmOpt = computed(()=>{
+    return [
+        {
+            key: 'schoolStage',
+            selectList:stageOptions.value,
+        },
+        {
+            key: 'provinceArea',
+            unionSelectList: [
+                {
+                    key: 'province',
+                    selectList:regionOptions.value,
+                },
+            ]
+        },
+    ]
+})
 const OpenSchoolFormDialog = (row?:any)=>{
     if(row){
         schoolTitle.value = '编辑学校'
@@ -131,25 +287,43 @@ const OpenSchoolFormDialog = (row?:any)=>{
     schoolVisible.value = true
 }
 
-// 批量导入弹窗有关数据
-const batchImportVisible = ref(false)
-const batchImportSubmitLoading = ref(false)
-const OpenBatchImportDialog = ()=>{
-    batchImportVisible.value = true   
-}
-const CloseBatchImportDialog = ()=>{
-    batchImportVisible.value = false
-}
-const HandleBatchImportComfirm = ()=>{
-    CloseBatchImportDialog()
+const CloseSchoolFormDialog = ()=>{
+    editFormDialogSubmitLoading.value = false
+    schoolVisible.value = false
 }
 
+const HandleSchoolDialogConfirm = async (params:any)=>{
+    editFormDialogSubmitLoading.value = true
+    const {formData,formRef} = params
+    console.log('表单的提交信息',formData)
 
-/** 跳转详情 */
-const GoToDetail = (row)=>{
-    router.push(`highSeasCustomerDetail?id=${row.id}`)
+    let transferParams = {
+        id: formData.id,
+        name: formData.schoolName,
+        stageId: formData.schoolStage,
+        "stageName": "",
+        provinceId: formData.provinceArea.province,
+        "provinceName": '',
+        cityId: formData.provinceArea.district,
+        "cityName": "",
+        address: formData.detailAddress,
+        "str": ""
+    }
+
+    let res = undefined
+    try{ res = await addHighSeasCustomerApi(transferParams) }catch{}
+    if(res?.code == 200){
+        CloseSchoolFormDialog()
+    }else{
+        editFormDialogSubmitLoading.value = false
+    }
 }
 
+onMounted( async()=>{
+    await GetHeaderSearchParams()
+    await GetTableData()
+})
+
 </script>
 
 

src/views/highSeasCustomer/searchBlock.ts

@@ -1,52 +0,0 @@
-import { ref } from "vue";
-
-
-export const blockSearchList = ref([
-  {
-    label: '学段',
-    key: 'stage',
-    type: 'single',
-    options: [
-      { label: '全部', value: 'all' },
-      { label: '幼儿园', value: 'kindergarten' },
-      { label: '小学', value: 'primary' },
-      { label: '初中', value: 'junior_high' },
-      { label: '高中', value: 'senior_high' },
-      { label: '完中', value: 'complete_high' },
-      { label: '九年一贯', value: 'nine_year' },
-      { label: '十二年一贯', value: 'twelve_year' },
-      { label: '职高', value: 'vocational_high' },
-      { label: '大学', value: 'university' }
-    ],
-    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: 'area',
-    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'
-  }
-]);