服务对象列表

This commit is contained in:
Leo_Ding 2025-10-13 15:41:04 +08:00
parent 11ed08bc39
commit cb4e899d82
10 changed files with 461 additions and 145 deletions

3
package-lock.json generated
View File

@ -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",

View File

@ -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')

View File

@ -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>

View File

@ -1,49 +1,20 @@
<template>
<a-modal
:open="visible"
:title="title"
:width="width"
:maskClosable="false"
@ok="handleOk"
@cancel="handleCancel"
>
<a-modal :open="visible" :title="title" :width="width" :maskClosable="false" @ok="handleOk" @cancel="handleCancel">
<!-- 错误提示区域 -->
<a-alert
v-if="errorMessage"
:message="errorMessage"
:description="errorDetails"
type="error"
show-icon
style="margin-bottom: 12px"
closable
@close="clearError"
/>
<a-alert v-if="errorMessage" :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
v-model:value="searchForm.keyword"
placeholder="输入需要查找的地址"
enter-button
@search="handleSearch"
:disabled="!mapLoaded || isSearching"
allow-clear
/>
<a-input-search v-model:value="searchForm.keyword" placeholder="输入需要查找的地址" enter-button @search="handleSearch"
:disabled="!mapLoaded || isSearching" allow-clear />
</a-form-item>
<a-form-item label="搜索结果" v-if="searchList.length > 0">
<a-select
v-model:value="selectedPlaceId"
style="width: 100%"
placeholder="请选择搜索结果"
@change="handlePlaceSelect"
>
<a-select-option
v-for="item in searchList"
:key="item.id"
:value="item.id"
>
<a-select v-model:value="selectedPlaceId" style="width: 100%" 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
v-model:value="formState.lnglat"
readonly
placeholder="点击地图或搜索地点选择位置"
>
<a-input 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
v-model:value="formState.address"
readonly
placeholder="地址信息将自动显示"
/>
<a-input v-model:value="formState.address" readonly placeholder="地址信息将自动显示" />
</a-form-item>
</a-form>
</a-modal>

View File

@ -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

View File

@ -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;
}

View File

@ -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
formData.value = cloneDeep(record)
const { data, success } = await apis.serverObj.getItem(record.id).catch()
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
}
/**
* 取消
*/

View File

@ -3,16 +3,20 @@
: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.contact1 }}</p>
<!-- <p>联系人{{ formData.contactman }}</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-tab-pane v-for="(tab, index) in tabsList" :key="index" :tab="tab" />
@ -20,7 +24,8 @@
<!-- 动态组件区域 -->
<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>
@ -89,11 +94,12 @@ const { proxy } = getCurrentInstance();
/**
* 新建
*/
function handleCreate() {
function handleCreate(record) {
showModal({
type: 'create',
title: '新建项',
})
formData.value = record
}
/**

View File

@ -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>}

View File

@ -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"