- 匹配
- 重置
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ item.title }}
-
-
-
- ![logo]()
-
- 添加
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 重置
- 报名
- 暂存
-
- 您提交的表单信息为：
-称呼：{{ formModel.customName }}
-联系方式：{{ formModel.customNid }}
-
-
- - {{ `报名的门店${index + 1}为` }}： {{ item.storeName }} - {{ item.reservationTime }} -
-
- 匹配
- 重置
+
+
-
-
-
+ 匹配
+ 重置
-
@@ -117,23 +132,67 @@
left: 0;
top: 0;
background-color: #fff;
- width: 235px;
+ width: 175px;
overflow-y: auto;
"
- @scroll="scrollClick"
>
-
-
-
+
+
+
- {{ item.title }}
+
+
+
+
+
+
+
+
+
- ![logo]()
-
+
添加
@@ -156,8 +215,16 @@
- 重置
+ 确定
+ 确定
+
()
//省市区下拉框列表数据
@@ -289,24 +371,10 @@ const addressChange = (value: any) => {
formModel.economize = value[0]
formModel.market = value[1]
formModel.distinguish = value[2]
- console.log(value, 'value')
}
-//区域半径下拉框列表数据
-//不需要改变的数据不要绑定ref
+//区域半径下拉框列表数据(不需要改变的数据不要绑定ref)
const radiusOptions = ref([
- {
- id: '100',
- name: '100'
- },
- {
- id: '200',
- name: '200'
- },
- {
- id: '300',
- name: '300'
- },
{
id: '3000',
name: '3km'
@@ -320,11 +388,9 @@ const radiusOptions = ref([
name: '10km'
}
])
-
//区域半径change
const radiusChange = (value: SelectValue) => {
formModel.radius = value
- console.log(`selected ${value}`)
}
//根据地址搜索出来的门店数据
@@ -384,199 +450,123 @@ const time_array = [
]
//经纬度
-const lng = ref()
-const lat = ref()
-//每页显示的结果条数
-const pageSize = ref(10)
-//起始页码
-const pageIndex = ref(1)
-//总结果数量
-const totalResults = ref(0)
-//分页请求给个结束节点
-const isNext = ref(true)
+const lng = ref()
+const lat = ref()
//圆形覆盖物
const circle = ref()
+//标记物数组
const pois: any = reactive([])
-//标记点
-const markerss = ref()
-//分页查询
+//信息窗体
+const infoWindows = ref({})
+//上一次点击的标记物id
+let previousId: any = null
+//匹配查询
const pagingQuery = () => {
- isNext.value = true
- isLoading.value = true
- AMap.plugin('AMap.PlaceSearch', function () {
- // placeSearch.value.clear();
- placeSearch.value = new AMap.PlaceSearch({
- pageSize: pageSize.value, // 单页显示结果条数
- pageIndex: pageIndex.value, // 页码
- city: '杭州', // 兴趣点城市
- citylimit: true, //是否强制限制在设置的城市内搜索
- types: '生活服务',
- map: map.value, // 展现结果的地图实例
- // panel: 'aa', // 结果列表将在此容器中进行展示。
- autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
- autoRefresh: true,
- extensions: false,
- showCover: false //清除自带的圈 避免颜色台中
- // cpoint: [116.405467, 39.907761]
- })
- if (circle.value) {
- map.value.remove(circle.value)
- }
- const color = '#DFEBF3'
- // 创建圆形覆盖物
- circle.value = new AMap.Circle({
- center: [lng.value, lat.value], // 圆心坐标
- radius: formModel.radius, // 半径，单位为米
- fillColor: color, // 填充颜色
- strokeColor: '#a1ceeb', // 边框颜色
- strokeWeight: 1 // 边框宽度
- })
-
- // 将圆形覆盖物添加到地图
- map.value.add(circle.value)
- // debugger // 设置断点
- placeSearch.value.searchNearBy(
- // addressValue,
- // formModel.address?.toString().split(',').join('') + formModel.detailAddress,
- '',
- [lng.value, lat.value],
- formModel.radius ? formModel.radius : 5000,
- function (status: any, result: any) {
- console.log(result, 'result')
- isLoading.value = false
- result.poiList &&
- result.poiList.pois.forEach((item: any) => {
- listData.value.push({
- href:
- item['photos'] && item['photos'].length > 0
- ? item['photos'][0].url
- : 'http://a.amap.com/jsapi_demos/static/images/search-img-default.png',
- title: item.name,
- avatar:
- item['photos'] && item['photos'].length > 0
- ? item['photos'][0].url
- : 'http://a.amap.com/jsapi_demos/static/images/search-img-default.png',
- description: item.address,
- conntent: item.tel,
- disabled: false,
- lat: item.location.lat,
- lng: item.location.lng,
- id: item.id
- })
- })
- pois.push(...listData.value)
-
- if (result.poiList && result.poiList.pois.length === pageSize.value) {
- pageIndex.value++
- // pagingQuery()
- } else {
- isNext.value = false
- }
- // console.log('pois', pois)
-
- for (let i = 0; i < pois.length; i++) {
- placeSearch_CallBack(pois[i])
- }
-
- // 设置定位点和缩放级别
- const targetPosition = [lng.value, lat.value]
- const targetZoom = 18 //设置地图视图级别为
-
- //回调函数
- function placeSearch_CallBack(data: any) {
- const poiArr = data
- const infoWindow = new AMap.InfoWindow({
- autoMove: true,
- offset: { x: 0, y: -30 } // 信息窗体的偏移量
- })
- //添加marker
- const markers = new AMap.Marker({
- // map: map.value,
- position: [poiArr.lng, poiArr.lat],
- // offset: new AMap.Pixel(-90, -70), // 设置偏移量以调整卡片位置
- zIndex: 0 // 设置标记点的层级为 1000
- })
- markers.on('click', function (data: any) {
- // console.log(data);
- map.value.remove(marker.value)
- // lng.value = data.lnglat.lng;
- // lat.value = data.lnglat.lat;
- infoWindow.setContent(createContent(poiArr))
- function createContent(poi: any) {
- //信息窗体内容
- // console.log('poi', poi);
+ if (circle.value) {
+ map.value.remove(circle.value)
+ }
+ const color = '#DFEBF3'
+ // 创建圆形覆盖物
+ circle.value = new AMap.Circle({
+ center: [lng.value, lat.value], // 圆心坐标
+ radius: formModel.radius, // 半径，单位为米
+ fillColor: color, // 填充颜色
+ strokeColor: '#a1ceeb', // 边框颜色
+ strokeWeight: 1 // 边框宽度
+ })
+ // 将圆形覆盖物添加到地图
+ map.value.add(circle.value)
- const s = []
- s.push('名称：' + poi.title + '')
- s.push('地址：' + poi.description)
- return s.join('
') + doRequest( + getStoreData({ longitude: lng.value, latitude: lat.value, distance: formModel.radius }), + { + onSuccess: (result: any) => { + if (result.code === 200) { + if (result.data.length === 0) { + message.info('当前位置附近暂无相关门店') + } else { + const ids = formModel.customStoreEntities.map(item => item.storeId) + result.data && + result.data.forEach((item: any) => { + const disabled = ids.includes(Number(item.id)) + listData.value.push({ + title: item.storeName, + description: item.address, + content: item.nid ? item.nid : '', + disabled: disabled, + lat: item.latitude, + lng: item.longitude, + id: item.id, + index: item.index, + tel: item.nid ? item.nid : '' + }) + }) + pois.push(...listData.value) + // 设置缩放级别,设置地图视图级别为 + const targetZoom = 10 + + //回调函数 + const placeSearch_CallBack = (data: any) => { + const poiArr = data + infoWindows.value = new AMap.InfoWindow({ + autoMove: true, + isCustom: true, + offset: { x: 0, y: -30 } // 信息窗体的偏移量 + }) + //添加marker + const markers = new AMap.Marker({ + map: map.value, + position: [poiArr.lng, poiArr.lat], + // clickable: true,//表示某个元素可以接收用户点击事件,默认值为true + // offset: new AMap.Pixel(-90, -70), // 设置偏移量以调整卡片位置 + zIndex: 0, // 设置标记点的层级为 1000 + extData: { + id: `${poiArr.id}` + // 其他属性... + } + }) + markers.on('click', function (data: any) { + const currentId = data.target.getExtData().id + + if ( + infoWindows.value.getIsOpen() && + (currentId === previousId || currentId === currentStoreId.value) + ) { + // 信息窗体已打开,并且当前点击的标记物与上一次点击的标记物相同，或者与当前存储的门店标记物相同 + currentStoreId.value = currentId + previousId = currentId + return false + } + + infoWindows.value.open(map.value, markers.getPosition()) // 在地图上打开信息弹窗，并将信息弹窗显示在标记点的位置 + map.value.setZoomAndCenter(targetZoom, [data.lnglat.lng, data.lnglat.lat]) // 设置地图的缩放级别和中心点，使地图以指定的缩放级别和中心点进行显示 + map.value.setCenter(markers.getPosition()) // 将地图的中心点设置为标记点的位置 + infoWindows.value.setContent(createContent(poiArr)) // 将生成的内容设置到信息弹窗中 + + // 更新上一次点击的标记物ID + currentStoreId.value = currentId + previousId = currentId + }) } - infoWindow.open(map.value, [data.lnglat.lng, data.lnglat.lat]) - // markerss.value = markers - // console.log('[lng.value,lat.value]', [data.lnglat.lng, data.lnglat.lat]); - - map.value.setZoomAndCenter(targetZoom, [data.lnglat.lng, data.lnglat.lat]) - }) - // map.value.setCenter(markers.getPosition()) + for (let i = 0; i < pois.length; i++) { + placeSearch_CallBack(pois[i]) + } + } } - - // 定义定位函数 - // map.value.setZoomAndCenter(targetZoom, targetPosition) } - ) - }) -} - -const isLoading = ref(false) // 标记是否正在加载数据
-let threshold: any = undefined // 阈值
-//滚动事件
-const scrollClick = (event: any) => {
- const container = document.getElementById('aa')
- // 检查是否成功获取了滚动容器元素
- if (!container) return
- // 计算元素的 scrollHeight、scrollTop 和 offsetHeight
- const scrollHeight = container.scrollHeight
- const scrollTop = container.scrollTop
- const offsetHeight = container.offsetHeight
- // console.log(scrollHeight, scrollTop, offsetHeight, 'offsetHeight')
- // console.log(isLoading.value, 'isLoading.value')
-
- // 初始化阈值
- if (threshold === undefined) {
- threshold = offsetHeight * 0.2 // 设置阈值
- }
- console.log(threshold, 'threshold')
- console.log(scrollHeight - scrollTop - offsetHeight, 'scrollHeight - scrollTop - offsetHeight')
-
- // 判断是否滚动到距离底部比较近并且未在加载数据
- if (scrollHeight - scrollTop - offsetHeight <= threshold && !isLoading.value && isNext.value) {
- // 触发加载数据的方法
- pagingQuery()
- }
- // const { scrollTop, scrollHeight } = event.target
- // console.log('scrollTop', scrollTop, 'scrollHeight', scrollHeight);
- console.log('event.target', event)
- // console.log('isNext', isNext.value);
- // if (scrollHeight - scrollTop < 500 && isNext.value) {
- // console.log('1111')
- // pagingQuery()
- // }
+ }
+ )
}
-
//匹配
const match = () => {
const fields = ['address', 'detailAddress', 'radius'] // 指定要校验的字段名
formRef.value
?.validateFields(fields)
.then(() => {
- // 校验通过
- console.log('校验通过')
pois.length = 0
listData.value = []
- totalResults.value = 0
- pageIndex.value = 1
- lng.value = 0
- lat.value = 0
+ lng.value = undefined
+ lat.value = undefined
map.value.clearMap()
AMap.plugin('AMap.Geocoder', function () {
geocoder.value = new AMap.Geocoder({
@@ -593,15 +583,6 @@ const match = () => {
}
pagingQuery()
})
-
- // placeSearch.value.search(keyword.value, function (status: any, result: any) {
- // // 查询成功时，result即对应匹配的POI信息
- // console.log(result, 'result')
- // })
- // placeSearch.value.searchNearBy(keyword.value, function (status: any, result: any) {
- // // 查询成功时，result即对应匹配的POI信息
- // console.log(result, 'result')
- // })
})
.catch(() => {
// 校验失败
@@ -613,41 +594,46 @@ const resetForm = () => {
formModel.address = []
formModel.detailAddress = ''
formModel.radius = ''
+ // initMap()
+ listData.value.length = 0
+ map.value.clearMap()
+}
+//提示文字样式
+const tooltipStyle = {
+ fontSize: '12px',
+ borderRadius: '4px'
}
-
//添加
const addStore = (item: any) => {
item.disabled = true
- formRule.value[`customStoreEntities[${formModel.customStoreEntities.length}].storeName`] = [
- { required: true, message: '请输入预约门店名称customStoreEntities' }
- ]
- formRule.value[`customStoreEntities[${formModel.customStoreEntities.length}].reservationTime`] = [
- { required: true, message: '请选择预约时间ddddddddd' }
- ]
- formModel.customStoreEntities.push({ storeName: item.title, reservationTime: '' })
- // console.log(formRule.value, 'formRule.value')
+ formModel.customStoreEntities.push({
+ storeName: item.title,
+ reservationTime: '',
+ storeId: item.id
+ })
}
-
//门店重置
const storeResetForm = () => {
formModel.customName = ''
formModel.customNid = ''
- formModel.address = []
- formModel.detailAddress = ''
- formModel.radius = ''
- formModel.customStoreEntities.length = 0
+ if (title.value !== '编辑预约') {
+ formModel.address = []
+ formModel.detailAddress = ''
+ formModel.radius = ''
+ formModel.customStoreEntities.length = 0
+ }
+
listData.value.length = 0
+ // 清除地图上的所有标记物
+ map.value.clearMap()
}
-
//控制报名信息确认弹窗显隐
const registerVisible = ref(false)
-
//报名
const showModal = () => {
formRef.value
?.validate()
.then(() => {
- console.log('校验通过')
if (formModel.customStoreEntities.length === 0) {
message.info('请先添加预约门店')
} else {
@@ -658,37 +644,82 @@ const showModal = () => {
console.log('校验失败err', err)
})
}
-const submitOperate = () => {
+interface customStoreEntitiesItem {
+ //门店id
+ customStoreId?: number
+ //预约id
+ storeId: number
+ //门店名称
+ storeName?: string
+ //预约时间
+ reservationTime: string
+}
+//是否发送请求了,发送了就要就行表格刷新
+const isSubmit = ref(false)
+//提交请求操作
+const submitOperate = (type: string, status?: number) => {
//移除address属性
const filteredObj = Object.fromEntries(
- Object.entries(formModel).filter(([key, value]) => key !== 'address')
+ Object.entries(formModel).filter(([key]) => key !== 'address')
) as CustomerDTO
- doRequest(addCustomer(toRaw(filteredObj)), {
- onSuccess: (res: any) => {
- if (res.code === 200) {
- registerVisible.value = false
- message.success('操作成功')
+ //移除customStoreEntities中的storeName属性
+ filteredObj.customStoreEntities = filteredObj.customStoreEntities.map(
+ (item: customStoreEntitiesItem) => {
+ const obj: customStoreEntitiesItem = {
+ storeId: item.storeId,
+ reservationTime: item.reservationTime
+ }
+ if (title.value === '编辑预约') {
+ if (item.customStoreId) {
+ obj.customStoreId = item.customStoreId
+ }
}
+ return obj
}
- })
+ )
+ const handleSuccess = (res: any) => {
+ if (res.code === 200) {
+ isSubmit.value = true
+ registerVisible.value = false
+ message.success('操作成功')
+ if (type === 'zc' || title.value === '审核') {
+ handleSubmit()
+ }
+ }
+ }
+
+ if (title.value === '新建预约' || title.value === '编辑预约') {
+ const requestFn = title.value === '新建预约' ? addCustomer : updateCustomer
+ doRequest(requestFn(filteredObj), {
+ onSuccess: handleSuccess
+ })
+ } else if (title.value === '审核') {
+ doRequest(auditCustomer({ customId: formModel.customId, status: status }), {
+ onSuccess: handleSuccess
+ })
+ }
}
//报名信息确认弹窗确定点击事件
const handleOk = async () => {
- await submitOperate()
+ if (title.value === '审核') {
+ //重审
+ await submitOperate('cs', 1)
+ } else {
+ //报名
+ await submitOperate('bm')
+ }
}
//暂存
-const temporaryStorage = () => {
+const temporaryStorage = async () => {
formRef.value
?.validate()
.then(() => {
- console.log('校验通过')
if (formModel.customStoreEntities.length === 0) {
message.info('请先添加预约门店')
} else {
formModel.enrollStatus = 0
- submitOperate()
- handleSubmit()
- // message.success('暂存成功')
+ submitOperate('zc')
+ // handleSubmit()
}
})
.catch(err => {
@@ -696,6 +727,15 @@ const temporaryStorage = () => {
})
}
+//重审
+const retrial = () => {
+ submitOperate('cs', 0)
+}
+//分发
+const distribute = () => {
+ registerVisible.value = true
+}
+
const emits = defineEmits<{
(e: 'submit-success', resetPageIndex?: boolean): void
}>()
@@ -717,18 +757,6 @@ const formModel = reactive({
enrollStatus: 1,
customStoreEntities: []
})
-// watch(formModel,(newv,_)=>{
-// console.log('111111',newv);
-// formRef.value?.validate()
-// })
-
-// 表单的校验规则
-// interface formRuleItem {
-// customName: Array
+ 重置
报名
@@ -229,9 +289,17 @@
>暂存
-
+ 重审
+ 分发
+
-
+
您提交的表单信息为：
称呼：{{ formModel.customName }}
@@ -252,17 +320,18 @@ import { useAdminForm, useFormAction, FormAction } from '@/hooks/form' import type { FormRequestMapping } from '@/hooks/form' import { doRequest } from '@/utils/axios/request' import { message } from 'ant-design-vue' -// import type { FormInstance } from 'ant-design-vue' -// import { doRequest } from '@/utils/axios/request' -// import { overrideProperties } from '@/utils/bean-utils' -// import { message } from 'ant-design-vue' -// import type { GeopoliticalCustomersDTO } from '@/api/geopoliticalCustomers/types' +import type { FormInstance } from 'ant-design-vue' //预约时间 import type { SelectValue } from 'ant-design-vue/es/select' import type { SelectProps } from 'ant-design-vue' import 'dayjs/locale/zh-cn' -// import dayjs from 'dayjs' -import { addCustomer, updateCustomer, getDetail } from '@/api/geopoliticalCustomers' +import { + addCustomer, + updateCustomer, + auditCustomer, + getDetail, + getStoreData +} from '@/api/geopoliticalCustomers' import type { CustomerDTO, GeopoliticalCustomersRecord } from '@/api/geopoliticalCustomers/types' //dom中可以写成:rules = 'rulesData' @@ -280,6 +349,19 @@ onMounted(() => { provincesAndCitiesAndAutonomousOptions.value = provincesAndCitiesAndAutonomousRegions }) +//动态生成只读/禁用样式 +const isDisabled = ref(false) +const isReadOnly = ref(false) + +const dynamicClass = computed(() => ({ + 'custom-disabled-style': isDisabled.value, + 'custom-readonly-style': isReadOnly.value +})) +const reservationTimeisReadOnly = ref(false) +const reservationTimeClass = computed(() => ({ + 'custom-readonly-style': reservationTimeisReadOnly.value +})) + const formRef = ref') + doRequest( + getStoreData({ longitude: lng.value, latitude: lat.value, distance: formModel.radius }), + { + onSuccess: (result: any) => { + if (result.code === 200) { + if (result.data.length === 0) { + message.info('当前位置附近暂无相关门店') + } else { + const ids = formModel.customStoreEntities.map(item => item.storeId) + result.data && + result.data.forEach((item: any) => { + const disabled = ids.includes(Number(item.id)) + listData.value.push({ + title: item.storeName, + description: item.address, + content: item.nid ? item.nid : '', + disabled: disabled, + lat: item.latitude, + lng: item.longitude, + id: item.id, + index: item.index, + tel: item.nid ? item.nid : '' + }) + }) + pois.push(...listData.value) + // 设置缩放级别,设置地图视图级别为 + const targetZoom = 10 + + //回调函数 + const placeSearch_CallBack = (data: any) => { + const poiArr = data + infoWindows.value = new AMap.InfoWindow({ + autoMove: true, + isCustom: true, + offset: { x: 0, y: -30 } // 信息窗体的偏移量 + }) + //添加marker + const markers = new AMap.Marker({ + map: map.value, + position: [poiArr.lng, poiArr.lat], + // clickable: true,//表示某个元素可以接收用户点击事件,默认值为true + // offset: new AMap.Pixel(-90, -70), // 设置偏移量以调整卡片位置 + zIndex: 0, // 设置标记点的层级为 1000 + extData: { + id: `${poiArr.id}` + // 其他属性... + } + }) + markers.on('click', function (data: any) { + const currentId = data.target.getExtData().id + + if ( + infoWindows.value.getIsOpen() && + (currentId === previousId || currentId === currentStoreId.value) + ) { + // 信息窗体已打开,并且当前点击的标记物与上一次点击的标记物相同，或者与当前存储的门店标记物相同 + currentStoreId.value = currentId + previousId = currentId + return false + } + + infoWindows.value.open(map.value, markers.getPosition()) // 在地图上打开信息弹窗，并将信息弹窗显示在标记点的位置 + map.value.setZoomAndCenter(targetZoom, [data.lnglat.lng, data.lnglat.lat]) // 设置地图的缩放级别和中心点，使地图以指定的缩放级别和中心点进行显示 + map.value.setCenter(markers.getPosition()) // 将地图的中心点设置为标记点的位置 + infoWindows.value.setContent(createContent(poiArr)) // 将生成的内容设置到信息弹窗中 + + // 更新上一次点击的标记物ID + currentStoreId.value = currentId + previousId = currentId + }) } - infoWindow.open(map.value, [data.lnglat.lng, data.lnglat.lat]) - // markerss.value = markers - // console.log('[lng.value,lat.value]', [data.lnglat.lng, data.lnglat.lat]); - - map.value.setZoomAndCenter(targetZoom, [data.lnglat.lng, data.lnglat.lat]) - }) - // map.value.setCenter(markers.getPosition()) + for (let i = 0; i < pois.length; i++) { + placeSearch_CallBack(pois[i]) + } + } } - - // 定义定位函数 - // map.value.setZoomAndCenter(targetZoom, targetPosition) } - ) - }) -} - -const isLoading = ref