服务对象列表

package-lock.json

@@ -244,7 +244,8 @@
         "node_modules/@amap/amap-jsapi-loader": {
             "version": "1.0.1",
             "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
-            "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+            "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==",
+            "license": "MIT"
         },
         "node_modules/@ant-design/colors": {
             "version": "7.0.0",

src/apis/modules/serverObj.js

@@ -13,5 +13,6 @@ export const updateItem = (id, params) => request.basic.put(`/api/v1/customers/$
 // 删除数据
 export const delItem = (id) => request.basic.delete(`/api/v1/customers/${id}`)
 
-
+//获取用户数量
+export const getCount=()=>request.basic.get('/api/v1/customers/count')
 

src/components/GxMap/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="map-container">
+    <!-- 地图容器 -->
+    <a-form-item :label="'输入地址'">
+      <a-input-search v-model:value="searchValue" placeholder="输入需要查找的地址" enter-button @search="searchLocation" />
+    </a-form-item>
+    <a-form-item :label="'搜索结果'">
+      <a-select ref="select" v-model:value="selectValue" style="width: 100%" @focus="focus" @change="handleChange" >
+        <a-select-option v-for="item in searchList" :value="item.id">{{ item.name }}</a-select-option>
+      </a-select>
+    </a-form-item>
+    <div id="map" ref="mapContainer" style="height: calc(100% - 100px);"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted,defineEmits } from 'vue'
+import AMapLoader from '@amap/amap-jsapi-loader'
+defineOptions({
+  name: 'GxMap',
+})
+// 地图实例引用
+const map = ref(null)
+const mapContainer = ref(null)
+const searchValue = ref('')
+const searchResult = ref(null);
+const markers = ref([]);
+const locationMode = ref()
+const locationData = ref({});
+const infoWindow = ref(null);
+const geocoder = ref(null);
+const selectValue = ref('')
+const searchList = ref([])
+
+const emit = defineEmits(['handleGetLng']) // 
+onMounted(() => {
+  initMap()
+})
+
+onUnmounted(() => {
+  if (map.value) {
+    map.value.destroy()
+  }
+})
+
+const initMap = async () => {
+  try {
+    // 安全密钥配置（必须放在插件初始化前！）
+    window._AMapSecurityConfig = {
+      securityJsCode: 'df197447a4adc77f0cb376a44462272c' // 替换为你的jscode
+    };
+    // 加载地图 SDK
+    const AMap = await AMapLoader.load({
+      key: "38b334d84b1f89aa39d4efae76f0b341",     // 替换你的高德Key
+      version: "2.0",           // SDK 版本
+      plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.Geocoder'] // 需要加载的插件
+    })
+
+    // 初始化地图
+    map.value = new AMap.Map(mapContainer.value, {
+      zoom: 13,                  // 缩放级别
+      center: [120.894522,31.981269], // 中心点坐标（北京）
+      viewMode: "3D"             // 使用3D视图
+    })
+
+    // 添加控件
+    map.value.addControl(new AMap.ToolBar())
+    map.value.addControl(new AMap.Scale())
+    // 初始化地理编码器
+    geocoder.value = new AMap.Geocoder({
+      city: "全国"
+    });
+    // 添加标记点
+    const marker = new AMap.Marker({
+      position: [120.894522,31.981269],
+      title: "南通市人民政府"
+    })
+
+    map.value.add(marker)
+    // 添加地图点击事件
+    map.value.on('click', handleMapClick);
+  } catch (error) {
+    console.error("地图加载失败:", error)
+  }
+}
+// 处理地图点击事件
+const handleMapClick = (e) => {
+  // 清除之前的标记
+  clearMarkers();
+
+  // 获取点击位置的经纬度
+  const lng = e.lnglat.getLng();
+  const lat = e.lnglat.getLat();
+
+  // 设置定位模式
+  locationMode.value = "点击定位";
+
+  // 存储坐标
+  locationData.value = {
+    lng: lng,
+    lat: lat,
+    name: "点击位置",
+    address: "正在获取地址..."
+  };
+
+  // 创建标记
+  const marker = new AMap.Marker({
+    position: [lng, lat],
+    title: "点击位置"
+  });
+
+  map.value.add(marker);
+  markers.value.push(marker);
+
+  // 设置地图中心
+  map.value.setCenter([lng, lat]);
+
+  // 使用逆地理编码获取地址信息
+  geocoder.value.getAddress([lng, lat], (status, result) => {
+    if (status === 'complete' && result.regeocode) {
+      const address = result.regeocode.formattedAddress;
+      locationData.value.address = address;
+
+      // 添加信息窗口
+      infoWindow.value = new AMap.InfoWindow({
+        content: `<div style="padding:10px;min-width:200px;">
+                            <div style="font-weight:bold;margin-bottom:5px;">点击位置</div>
+                            <div>${address}</div>
+                            <div style="margin-top:8px;color:#666;">
+                              <div>经度: ${lng.toFixed(6)}</div>
+                              <div>纬度: ${lat.toFixed(6)}</div>
+                            </div>
+                          </div>`,
+        offset: new AMap.Pixel(0, -35)
+      });
+      const obj={address:address,lng:lng,lat:lat}
+      
+      infoWindow.value.open(map.value, [lng, lat]);
+emit('handleGetLng', obj)
+    } else {
+      locationData.value.address = "无法获取地址信息";
+    }
+  });
+};
+// 搜索地点
+const searchLocation = () => {
+  if (!searchValue.value.trim()) {
+    alert('请输入搜索关键词');
+    return;
+  }
+
+  // 清除之前的标记
+  clearMarkers();
+
+  // 使用高德地图的搜索插件
+  AMap.plugin('AMap.PlaceSearch', () => {
+    const placeSearch = new AMap.PlaceSearch({
+      pageSize: 10,
+      pageIndex: 1,
+      city: '全国'
+    });
+
+    placeSearch.search(searchValue.value, (status, result) => {
+      if (status === 'complete' && result.poiList.pois.length) {
+        searchList.value = result.poiList.pois.map(item => {
+          return {
+            id: item.id,
+            name: item.name,
+            address: item.address,
+            location: {
+              lng: item.location.lng,
+              lat: item.location.lat
+
+            }
+          }
+        })
+        console.log(searchList.value)
+        const poi = result.poiList.pois[0];
+
+        // 存储搜索结果
+        searchResult.value = {
+          id: poi.id,
+          name: poi.name,
+          address: poi.address,
+          location: {
+            lng: poi.location.lng,
+            lat: poi.location.lat
+          }
+        };
+
+        // 创建标记
+        const marker = new AMap.Marker({
+          position: [poi.location.lng, poi.location.lat],
+          title: poi.name
+        });
+
+        map.value.add(marker);
+        markers.value.push(marker);
+
+        // 设置地图中心
+        map.value.setCenter([poi.location.lng, poi.location.lat]);
+
+        // 添加信息窗口
+        const infoWindow = new AMap.InfoWindow({
+          content: `<div style="padding:5px;min-width:150px;">
+                              <div style="font-weight:bold;">${poi.name}</div>
+                              <div>${poi.address}</div>
+                              <div>经度: ${poi.location.lng.toFixed(6)}</div>
+                              <div>纬度: ${poi.location.lat.toFixed(6)}</div>
+                            </div>`,
+          offset: new AMap.Pixel(0, -30)
+        });
+
+        infoWindow.open(map.value, marker.getPosition());
+
+        // 点击标记打开信息窗口
+        marker.on('click', () => {
+          infoWindow.open(map.value, marker.getPosition());
+        });
+
+      } else {
+        alert('未找到相关地点，请尝试其他关键词');
+        searchResult.value = null;
+      }
+    });
+  });
+};
+
+// 清除所有标记
+const clearMarkers = () => {
+  markers.value.forEach(marker => {
+    map.value.remove(marker);
+  });
+  markers.value = [];
+  searchResult.value = null;
+};
+const handleChange=(e)=>{
+  const item = searchList.value.find(item=>item.id===e)
+  const obj={
+    lng:item.location.lng,
+    lat:item.location.lat,
+    addres:item.address
+  }
+  emit('handleGetLng', obj)
+}
+</script>
+
+<style scoped>
+.map-container {
+  width: 100%;
+  height: 500px;
+  background-color: #eee;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #eee;
+}
+</style>

src/components/Map/index.vue

@@ -1,49 +1,20 @@
 <template>
-  <a-modal
+  <a-modal :open="visible" :title="title" :width="width" :maskClosable="false" @ok="handleOk" @cancel="handleCancel">
-    :open="visible"
-    :title="title"
-    :width="width"
-    :maskClosable="false"
-    @ok="handleOk"
-    @cancel="handleCancel"
-  >
     <!-- 错误提示区域 -->
-    <a-alert
+    <a-alert v-if="errorMessage" :message="errorMessage" :description="errorDetails" type="error" show-icon
-      v-if="errorMessage"
+      style="margin-bottom: 12px" closable @close="clearError" />
-      :message="errorMessage"
-      :description="errorDetails"
-      type="error"
-      show-icon
-      style="margin-bottom: 12px"
-      closable
-      @close="clearError"
-    />
 
     <!-- 搜索区域 -->
     <div class="search-section">
       <a-form layout="vertical" :model="searchForm">
         <a-form-item label="输入地址">
-          <a-input-search
+          <a-input-search v-model:value="searchForm.keyword" placeholder="输入需要查找的地址" enter-button @search="handleSearch"
-            v-model:value="searchForm.keyword"
+            :disabled="!mapLoaded || isSearching" allow-clear />
-            placeholder="输入需要查找的地址"
-            enter-button
-            @search="handleSearch"
-            :disabled="!mapLoaded || isSearching"
-            allow-clear
-          />
         </a-form-item>
         <a-form-item label="搜索结果" v-if="searchList.length > 0">
-          <a-select
+          <a-select v-model:value="selectedPlaceId" style="width: 100%" placeholder="请选择搜索结果"
-            v-model:value="selectedPlaceId"
+            @change="handlePlaceSelect">
-            style="width: 100%"
+            <a-select-option v-for="item in searchList" :key="item.id" :value="item.id">
-            placeholder="请选择搜索结果"
-            @change="handlePlaceSelect"
-          >
-            <a-select-option
-              v-for="item in searchList"
-              :key="item.id"
-              :value="item.id"
-            >
               {{ item.name }} - {{ item.address }}
             </a-select-option>
           </a-select>
@@ -69,22 +40,14 @@
 
     <a-form :model="formState" layout="vertical" style="margin-top: 16px">
       <a-form-item label="经纬度">
-        <a-input
+        <a-input v-model:value="formState.lnglat" readonly placeholder="点击地图或搜索地点选择位置">
-          v-model:value="formState.lnglat"
-          readonly
-          placeholder="点击地图或搜索地点选择位置"
-        >
           <template #suffix>
             <a-spin v-if="isGeocoding" size="small" />
           </template>
         </a-input>
       </a-form-item>
       <a-form-item label="详细地址">
-        <a-input
+        <a-input v-model:value="formState.address" readonly placeholder="地址信息将自动显示" />
-          v-model:value="formState.address"
-          readonly
-          placeholder="地址信息将自动显示"
-        />
       </a-form-item>
     </a-form>
   </a-modal>
@@ -481,7 +444,7 @@ const createPlaceSearch = () => {
       let userMsg = '搜索服务出错，请重试'
       let details = `错误代码: ${error.errorCode}, 信息: ${error.errorMsg}`
 
-      switch(error.errorCode) {
+      switch (error.errorCode) {
         case 10001:
           userMsg = 'API Key错误或已过期'
           details += '\n解决方案: 检查并更新高德地图API Key'

src/components/index.js

@@ -21,6 +21,7 @@ import Scrollbar from './Scrollbar/Scrollbar.vue'
 import Cascader from './Cascader/Cascader.vue'
 import { setupLoadingDirective } from './Loading/directive'
 import GxUpload from './GxUpload/index.vue'
+import GxMap from './GxMap/index.vue'
 
 const componentList = [
     ActionBar,
@@ -43,6 +44,7 @@ const componentList = [
     Scrollbar,
     Cascader,
     GxUpload,
+    GxMap
 ]
 
 export const loading = Loading

src/utils/util.js

@@ -334,3 +334,40 @@ export const spliceUrl=(fullUrl)=>{
     const pathOnly = fullUrl.replace(/^https?:\/\/[^\/]+/, '');
     return pathOnly
 }
+/**根据身份证识别出生日期 */
+export const getBirthDate=(value)=>{
+
+  let year, month, day;
+
+  // 15位身份证：YYMMDD
+  if (value.length === 15) {
+    year = '19' + value.substring(6, 8); // 默认1900年代
+    month = value.substring(8, 10);
+    day = value.substring(10, 12);
+  }
+  // 18位身份证：YYYYMMDD
+  else if (value.length === 18) {
+    year = value.substring(6, 10);
+    month = value.substring(10, 12);
+    day = value.substring(12, 14);
+  }
+  else {
+    
+    return '';
+  }
+
+  // 验证是否为合法日期
+  const date = new Date(year, month - 1, day); // 注意：月份从0开始
+  if (
+    date.getFullYear() !== parseInt(year, 10) ||
+    date.getMonth() + 1 !== parseInt(month, 10) ||
+    date.getDate() !== parseInt(day, 10)
+  ) {
+    
+    return '';
+  }
+
+  // 格式化为 YYYY-MM-DD
+  const formattedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+  return formattedDate;
+}

src/views/serverObj/serverList/components/EditDialog.vue

@@ -34,7 +34,8 @@
                                             {{ item.introduction }}
                                         </a-select-option>
                                     </a-select>
-                                    <a-input v-model:value="formData.idNumber" placeholder="请输入证件号码" style="flex: 1;" />
+                                    <a-input v-model:value="formData.idNumber" placeholder="请输入证件号码" style="flex: 1;"
+                                        @change="extractBirthDateFromIdCard" />
                                 </span>
                             </a-form-item>
                         </a-col>
@@ -181,7 +182,7 @@
                         <!-- 经度 -->
                         <a-col :span="12">
                             <a-form-item label="经度" name="log">
-                                <a-input v-model:value="formData.log" placeholder="请输入经度" />
+                                <a-input v-model:value="formData.lng" placeholder="请输入经度" />
                             </a-form-item>
                         </a-col>
 
@@ -191,6 +192,7 @@
                                 <a-input v-model:value="formData.lat" placeholder="请输入纬度" />
                             </a-form-item>
                         </a-col>
+                        <gx-map @handleGetLng="handleGetLng" />
                     </a-row>
 
                 </a-tab-pane>
@@ -458,6 +460,9 @@ import { useForm, useModal } from '@/hooks'
 import { useDicsStore } from '@/store'
 import AreaCascader from '@/components/AreaCascader/index.vue'
 import { validatePhone, validateEmail, validateIdCard } from '@/utils/validate'
+import { getBirthDate } from '@/utils/util'
+import dayjs from 'dayjs'
+import { message } from 'ant-design-vue'
 const emit = defineEmits(['ok'])
 const activeKey = ref('1')
 const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
@@ -474,12 +479,13 @@ formRules.value = {
     serviceStatus: [{ required: true, message: '请选择服务状态', trigger: 'change' }],
     homeDetailAddress: [{ required: true, message: '请输入详细地址', trigger: 'change' }],
 }
-formData.value.gender = '1'
+
 const dicsStore = useDicsStore()
 /**
  * 新建
  */
 function handleCreate() {
+    formData.value.gender = '1'
     showModal({
         type: 'create',
         title: '新建项',
@@ -489,13 +495,17 @@ function handleCreate() {
 /**
  * 编辑
  */
-function handleEdit(record = {}) {
+async function handleEdit(record = {}) {
     showModal({
         type: 'edit',
-        title: '编辑项',
+        title: '编辑对象'
     })
-    formRecord.value = record
+    const { data, success } = await apis.serverObj.getItem(record.id).catch()
-    formData.value = cloneDeep(record)
+    if (!success) {
+        hideModal()
+        return
+    }
+    formData.value = { ...data }
 }
 // utils/idCard.js
 function isValidIdCard(value) {
@@ -561,9 +571,9 @@ function handleOk() {
                     ...formData.value,
                 }
                 // 单独封装一个同步校验函数
-                console.log('params.identityType', isValidIdCard(params.idNumber));
                 if (params.identityType === '1' && !isValidIdCard(params.idNumber)) {
                     throw new Error('请输入正确的身份证号码');
+
                 }
                 let result = null
                 switch (modal.value.type) {
@@ -571,6 +581,7 @@ function handleOk() {
                         result = await apis.serverObj.createItem(params).catch(() => {
                             throw new Error()
                         })
+                        console.log('result', result.code)
                         break
                     case 'edit':
                         result = await apis.serverObj.updateItem(params).catch(() => {
@@ -585,12 +596,24 @@ function handleOk() {
                 }
             } catch (error) {
                 hideLoading()
+                message.error(error.message)
             }
         })
         .catch(() => {
             hideLoading()
         })
 }
+// 提取出生日期方法
+const extractBirthDateFromIdCard = () => {
+    console.log(111)
+    const { idNumber } = formData.value;
+    if (!idNumber) {
+        formData.value.birthDate = '';
+        return;
+    }
+    console.log(getBirthDate(idNumber))
+    formData.value.birthDate = dayjs(getBirthDate(idNumber));
+};
 function onAreaChange(value, labels) {
     console.log(formData.value.homeAreaCodes);
     formData.value.homeAreaLabels = [...labels]
@@ -599,6 +622,10 @@ function onAreaHoldChange(value, labels) {
     console.log(formData.value.houseAreaCodes);
     formData.value.houseAreaLabels = [...labels]
 }
+function handleGetLng(obj) {
+    formData.value.lat = obj.lat
+    formData.value.lng = obj.lng
+}
 /**
  * 取消
  */

src/views/serverObj/serverList/components/detail.vue

@@ -3,24 +3,29 @@
         :after-close="onAfterClose" :cancel-text="cancelText" @ok="handleOk" @cancel="handleCancel">
         <a-card>
             <div style="display: flex;justify-content: space-around;">
-            <div style="width:200px;margin-top: 20px;border-right: 1px solid #f0f0f0;display: flex;flex-direction: column;align-items: center;">
+                <div
+                    style="width:280px;margin-top: 20px;border-right: 1px solid #f0f0f0;display: flex;flex-direction: column;align-items: center;">
                     <gx-upload v-model="formData.imgList" accept-types=".jpg,.png,.webp" :fileNumber="1" />
+                    <div>
                         <p>{{ formData.name }}{{ formData.gender }}{{ formData.age }}</p>
                         <p>身份证号：{{ formData.idNumber }}</p>
                         <p>手机号：{{ formData.contact1 }}</p>
-                <p>联系人：{{ formData.contactman }}</p>
+                        <!-- <p>联系人：{{ formData.contactman }}</p>
-                <p>联系方式：{{ formData.contact1 }}</p>
+                        <p>联系方式：{{ formData.contact1 }}</p> -->
                         <p><a-tag color="#2db7f5">#2db7f5</a-tag></p>
                     </div>
-            <div style="width: calc(100% - 200px);padding: 20px;">
+
+                </div>
+                <div style="width: calc(100% - 280px);padding: 20px;">
                     <!-- Tab 页签 -->
-                <a-tabs v-model:activeKey="activeKey" @change="handleTabChange" >
+                    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
                         <a-tab-pane v-for="(tab, index) in tabsList" :key="index" :tab="tab" />
                     </a-tabs>
                     <!-- 动态组件区域 -->
                     <div style="flex: 1; padding: 16px; overflow-y: auto;">
                         <keep-alive>
-                        <component v-if="currentComponent" :is="currentComponent" :ref="activeKey" :key="activeKey" />
+                            <component v-if="currentComponent" :is="currentComponent" :ref="activeKey"
+                                :key="activeKey" />
                         </keep-alive>
                     </div>
                 </div>
@@ -32,7 +37,7 @@
 <script setup>
 import GxUpload from '@/components/GxUpload/index.vue'
 import { cloneDeep } from 'lodash-es'
-import { ref, computed, defineAsyncComponent,defineExpose,getCurrentInstance,nextTick } from 'vue'
+import { ref, computed, defineAsyncComponent, defineExpose, getCurrentInstance, nextTick } from 'vue'
 import { config } from '@/config'
 import apis from '@/apis'
 import { useForm, useModal } from '@/hooks'
@@ -89,11 +94,12 @@ const { proxy } = getCurrentInstance();
 /**
  * 新建
  */
-function handleCreate() {
+function handleCreate(record) {
     showModal({
         type: 'create',
         title: '新建项',
     })
+    formData.value = record
 }
 
 /**
@@ -110,7 +116,7 @@ function handleEdit(record = {}) {
 }
 const callback = (val) => {
     console.log(val);
-    };
+};
 /**
  * 确定
  */

src/views/serverObj/serverList/index.vue

@@ -290,7 +290,7 @@
                 </template>
                 <a-table :columns="columns" :data-source="listData" bordered="true" :loading="loading"
                     :pagination="paginationState" :scroll="{ x: 'max-content' }" @change="onTableChange">
-                    <template #bodyCell="{ index,column, record }">
+                    <template #bodyCell="{ index, column, record }">
                         <template v-if="column.key === 'serialNumber'">
                             <span>{{ index + 1 }}</span>
                         </template>
@@ -301,7 +301,7 @@
                             <x-action-button @click="checkHandler(record)">
                                 <span>线下工单</span>
                             </x-action-button>
-                            <x-action-button @click="$refs.detailRef.handleCreate(record)">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
                                 <span>编辑</span>
                             </x-action-button>
                             <x-action-button @click="checkHandler(record)">
@@ -660,6 +660,18 @@ const options = ref([
     },])
 
 getPageList()
+getCount()
+async function getCount(params) {
+    try {
+        const { success, data } = await apis.serverObj.getCount({serviceNodeCodes:searchFormData.value.serviceNodeCodes})
+        if (config('http.code.success') === success) {
+            totalCount.value = data
+        }
+    } catch (error) {
+
+    }
+
+}
 /**
  * 获取表格数据
  * @returns {Promise<void>}

yarn.lock

@@ -138,6 +138,11 @@
     "@algolia/logger-common" "4.19.1"
     "@algolia/requester-common" "4.19.1"
 
+"@amap/amap-jsapi-loader@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz"
+  integrity sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==
+
 "@ant-design/colors@^6.0.0":
   version "6.0.0"
   resolved "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz"