af-mobile-client-vue3 1.1.40 → 1.1.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.html +1 -0
- package/package.json +5 -4
- package/src/components/core/ImageUploader/index.vue +160 -160
- package/src/components/data/XCellList/index.vue +8 -9
- package/src/components/data/XCellListFilter/index.vue +28 -10
- package/src/components/data/XForm/index.vue +114 -23
- package/src/components/data/XOlMap/utils/wgs84ToGcj02.js +154 -154
- package/src/components/data/XReportForm/index.vue +380 -45
- package/src/utils/queryFormDefaultRangePicker.ts +57 -57
- package/src/views/component/XCellListView/index.vue +19 -59
- package/src/views/component/XFormGroupView/index.vue +2 -42
- package/src/views/component/XFormView/index.vue +13 -119
- package/src/views/component/XFormView/oldindex.vue +70 -0
- package/src/views/component/XOlMapView/XLocationPicker/index.vue +118 -118
- package/src/views/component/XReportFormView/index.vue +1 -1
|
@@ -1,26 +1,19 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
|
|
3
3
|
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
|
|
4
|
-
import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
|
|
5
4
|
import { defineEmits, ref } from 'vue'
|
|
6
5
|
import { useRouter } from 'vue-router'
|
|
7
6
|
|
|
8
7
|
// 定义事件
|
|
9
8
|
const emit = defineEmits(['deleteRow'])
|
|
10
|
-
const userInfo = useUserStore().getUserInfo()
|
|
11
9
|
// 访问路由
|
|
12
10
|
const router = useRouter()
|
|
13
11
|
// 获取默认值
|
|
14
12
|
const idKey = ref('o_id')
|
|
15
13
|
|
|
16
14
|
// 简易crud表单测试
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
// const configName = ref('lngPriceManageMobileCRUD')
|
|
20
|
-
const configName = ref('测试')
|
|
21
|
-
const serviceName = ref('af-gaslink')
|
|
22
|
-
// const configName = ref('mobile_liushuiQueryCRUD')
|
|
23
|
-
// const serviceName = ref('af-revenue')
|
|
15
|
+
const configName = ref('crud_patroltask_managePhoneCRUD')
|
|
16
|
+
const serviceName = ref('af-linepatrol')
|
|
24
17
|
|
|
25
18
|
// 资源权限测试
|
|
26
19
|
// const configName = ref('crud_sources_test')
|
|
@@ -56,11 +49,11 @@ const serviceName = ref('af-gaslink')
|
|
|
56
49
|
function toDetail(item) {
|
|
57
50
|
router.push({
|
|
58
51
|
name: 'XFormGroupView',
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
52
|
+
query: {
|
|
53
|
+
id: item[idKey.value],
|
|
54
|
+
// id: item.rr_id,
|
|
55
|
+
// o_id: item.o_id,
|
|
56
|
+
},
|
|
64
57
|
})
|
|
65
58
|
}
|
|
66
59
|
|
|
@@ -76,40 +69,19 @@ function toDetail(item) {
|
|
|
76
69
|
// },
|
|
77
70
|
// })
|
|
78
71
|
// }
|
|
79
|
-
function addOption(callback) {
|
|
80
|
-
router.push({
|
|
81
|
-
name: 'XFormGroupView',
|
|
82
|
-
// params: { id: totalCount.value },
|
|
83
|
-
// query: {
|
|
84
|
-
// configName: configName.value,
|
|
85
|
-
// serviceName: serviceName.value,
|
|
86
|
-
// mode: '新增',
|
|
87
|
-
// },
|
|
88
|
-
})
|
|
89
|
-
// 如果存在回调函数,调用它并传递true表示已处理
|
|
90
|
-
if (typeof callback === 'function') {
|
|
91
|
-
callback(true)
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
72
|
|
|
95
73
|
// 修改功能
|
|
96
|
-
function updateRow(result
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
// 如果存在回调函数,调用它并传递true表示已处理
|
|
109
|
-
if (typeof callback === 'function') {
|
|
110
|
-
callback(true)
|
|
111
|
-
}
|
|
112
|
-
}
|
|
74
|
+
// function updateRow(result) {
|
|
75
|
+
// router.push({
|
|
76
|
+
// name: 'XFormView',
|
|
77
|
+
// params: { id: result.o_id, openid: result.o_id },
|
|
78
|
+
// query: {
|
|
79
|
+
// configName: configName.value,
|
|
80
|
+
// serviceName: serviceName.value,
|
|
81
|
+
// mode: '修改',
|
|
82
|
+
// },
|
|
83
|
+
// })
|
|
84
|
+
// }
|
|
113
85
|
|
|
114
86
|
// 删除功能
|
|
115
87
|
function deleteRow(result) {
|
|
@@ -123,23 +95,11 @@ function deleteRow(result) {
|
|
|
123
95
|
<XCellList
|
|
124
96
|
:config-name="configName"
|
|
125
97
|
:service-name="serviceName"
|
|
98
|
+
:fix-query-form="{ o_f_oper_name: 'edu_test' }"
|
|
126
99
|
:id-key="idKey"
|
|
127
100
|
@to-detail="toDetail"
|
|
128
101
|
@delete-row="deleteRow"
|
|
129
|
-
@update="updateRow"
|
|
130
|
-
@add="addOption"
|
|
131
102
|
/>
|
|
132
|
-
|
|
133
|
-
<!-- :fix-query-form="{ u_f_price_state: ['生效', '待生效'] }" -->
|
|
134
|
-
|
|
135
|
-
<!-- <XCellList -->
|
|
136
|
-
<!-- :config-name="configName" -->
|
|
137
|
-
<!-- :service-name="serviceName" -->
|
|
138
|
-
<!-- :fix-query-form="{ o_f_oper_name: 'edu_test' }" -->
|
|
139
|
-
<!-- :id-key="idKey" -->
|
|
140
|
-
<!-- @to-detail="toDetail" -->
|
|
141
|
-
<!-- @delete-row="deleteRow" -->
|
|
142
|
-
<!-- /> -->
|
|
143
103
|
</template>
|
|
144
104
|
</NormalDataLayout>
|
|
145
105
|
</template>
|
|
@@ -5,19 +5,9 @@ import { showDialog } from 'vant'
|
|
|
5
5
|
import { ref } from 'vue'
|
|
6
6
|
import { useRoute } from 'vue-router'
|
|
7
7
|
|
|
8
|
-
// const configName = ref('reviewFormGroup')
|
|
9
|
-
// const serviceName = ref('af-revenue')
|
|
10
|
-
|
|
11
8
|
// 纯表单
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
// const configName = ref("计划下发Form")
|
|
16
|
-
// const serviceName = ref("af-linepatrol")
|
|
17
|
-
|
|
18
|
-
// 表单组
|
|
19
|
-
const configName = ref('lngChargeAuditMobileFormGroup')
|
|
20
|
-
const serviceName = ref('af-gaslink')
|
|
9
|
+
const configName = ref('AddConstructionForm')
|
|
10
|
+
const serviceName = ref('af-linepatrol')
|
|
21
11
|
|
|
22
12
|
const formData = ref({})
|
|
23
13
|
const formGroup = ref(null)
|
|
@@ -28,36 +18,6 @@ function submit(_result) {
|
|
|
28
18
|
history.back()
|
|
29
19
|
})
|
|
30
20
|
}
|
|
31
|
-
|
|
32
|
-
// 表单组——数据
|
|
33
|
-
// function initComponents () {
|
|
34
|
-
// runLogic('getlngChargeAuditMobileFormGroupData', {id: 29}, 'af-gaslink').then((res) => {
|
|
35
|
-
// formData.value = {...res}
|
|
36
|
-
// })
|
|
37
|
-
// }
|
|
38
|
-
|
|
39
|
-
// 纯表单——数据
|
|
40
|
-
// function initComponents() {
|
|
41
|
-
// formData.value = { plan_name: 'af-llllll', plan_point: '1号点位', plan_single: '1号点位', plan_range: '2024-12-12' }
|
|
42
|
-
// }
|
|
43
|
-
|
|
44
|
-
// function initComponents() {
|
|
45
|
-
// runLogic('getlngChargeAuditMobileFormGroupData', { id: route.query?.id, o_id: route.query?.o_id }, 'af-gaslink').then((res) => {
|
|
46
|
-
// console.log('res------', res)
|
|
47
|
-
// formData.value = { ...res }
|
|
48
|
-
// formGroup.value.init({
|
|
49
|
-
// configName: configName.value,
|
|
50
|
-
// serviceName: serviceName.value,
|
|
51
|
-
// groupFormData: { ...res },
|
|
52
|
-
// mode: "新增"
|
|
53
|
-
// })
|
|
54
|
-
// isInit.value = true
|
|
55
|
-
// })
|
|
56
|
-
// }
|
|
57
|
-
|
|
58
|
-
// onBeforeMount(() => {
|
|
59
|
-
// initComponents()
|
|
60
|
-
// })
|
|
61
21
|
</script>
|
|
62
22
|
|
|
63
23
|
<template>
|
|
@@ -1,133 +1,27 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
|
|
3
3
|
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
|
|
4
|
-
import {
|
|
5
|
-
import { post } from '@af-mobile-client-vue3/services/restTools'
|
|
6
|
-
import {
|
|
7
|
-
showDialog,
|
|
8
|
-
NavBar as VanNavBar,
|
|
9
|
-
Space as VanSpace,
|
|
10
|
-
} from 'vant'
|
|
11
|
-
import { defineEmits, getCurrentInstance, onBeforeMount, ref } from 'vue'
|
|
12
|
-
import { useRoute } from 'vue-router'
|
|
4
|
+
import { ref } from 'vue'
|
|
13
5
|
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const id = ref(-1)
|
|
17
|
-
const openid = ref('')
|
|
18
|
-
const instance = getCurrentInstance()
|
|
19
|
-
const xFormInit = ref(false)
|
|
20
|
-
const route = useRoute()
|
|
21
|
-
const configName = route.query.configName as string
|
|
22
|
-
const serviceName = route.query.serviceName as string
|
|
23
|
-
const mode = route.query.mode as string
|
|
24
|
-
const updateData = ref({})
|
|
25
|
-
const title = ref('')
|
|
26
|
-
const groupFormItems = ref({})
|
|
27
|
-
const api = ref('/af-system/logic/commonQuery')
|
|
28
|
-
const updateId = {
|
|
29
|
-
queryParamsName: 'crud_oper_log_manage',
|
|
30
|
-
pageNo: 1,
|
|
31
|
-
pageSize: 20,
|
|
32
|
-
conditionParams: { o_id: route.params.id as string },
|
|
33
|
-
}
|
|
34
|
-
const loadUpdate = ref(false)
|
|
35
|
-
// const serviceName = ref('af-revenue')
|
|
36
|
-
const _currentEvaluate = {
|
|
37
|
-
id: null,
|
|
38
|
-
f_business_name: '',
|
|
39
|
-
f_evaluate_state: '',
|
|
40
|
-
}
|
|
6
|
+
const configName = ref('AddConstructionForm')
|
|
7
|
+
const serviceName = ref('af-linepatrol')
|
|
41
8
|
|
|
42
|
-
|
|
43
|
-
onBeforeMount(async () => {
|
|
44
|
-
if (instance) {
|
|
45
|
-
id.value = route.params.id as unknown as number
|
|
46
|
-
openid.value = route.params.openid as string
|
|
47
|
-
formInit()
|
|
48
|
-
}
|
|
49
|
-
})
|
|
50
|
-
|
|
51
|
-
// 组件初始化前的判断
|
|
52
|
-
async function formInit() {
|
|
53
|
-
getConfigByName(configName, (result) => {
|
|
54
|
-
groupFormItems.value = result
|
|
55
|
-
title.value = result.title
|
|
56
|
-
if (mode === '修改')
|
|
57
|
-
getUpdateData()
|
|
58
|
-
xFormInit.value = true
|
|
59
|
-
}, serviceName)
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
// 获取配置信息
|
|
63
|
-
function queryData() {
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// 提交操作
|
|
68
|
-
function onSubmit(params) {
|
|
69
|
-
// const data = {
|
|
70
|
-
// id: currentEvaluate.id,
|
|
71
|
-
// f_json: params,
|
|
72
|
-
// f_evaluate_date: formatDate(new Date()),
|
|
73
|
-
// f_evaluate_state: '已评价',
|
|
74
|
-
// f_evaluate_type: '用户评价',
|
|
75
|
-
// f_evaluate_userid: openid.value,
|
|
76
|
-
// }
|
|
77
|
-
// openApiLogic(data, 'saveEvaluate', formServiveName).then((_res: any) => {
|
|
78
|
-
// showDialog({ message: '评价成功了' }).then(() => {history.back()})
|
|
79
|
-
// }).catch(() => {
|
|
80
|
-
// showDialog({ message: '评价失败了' })
|
|
81
|
-
// })
|
|
82
|
-
if (params) {
|
|
83
|
-
emit('onSumbit', params)
|
|
84
|
-
showDialog({ message: '评价成功了' }).then(() => {
|
|
85
|
-
history.back()
|
|
86
|
-
})
|
|
87
|
-
}
|
|
88
|
-
else {
|
|
89
|
-
showDialog({ message: '评价失败了' }).then(() => {
|
|
90
|
-
history.back()
|
|
91
|
-
})
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
// 查询需要修改的数据
|
|
96
|
-
async function getUpdateData() {
|
|
97
|
-
if (api.value && updateId) {
|
|
98
|
-
const res = await post(api.value, updateId)
|
|
99
|
-
updateData.value = res.data[0]
|
|
100
|
-
}
|
|
101
|
-
}
|
|
9
|
+
const formGroupAddConstruction = ref(null)
|
|
102
10
|
</script>
|
|
103
11
|
|
|
104
12
|
<template>
|
|
105
|
-
<NormalDataLayout id="
|
|
13
|
+
<NormalDataLayout id="XFormGroupView" title="纯表单">
|
|
106
14
|
<template #layout_content>
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
:service-name="serviceName"
|
|
114
|
-
:form-data="updateData"
|
|
115
|
-
:mode="mode"
|
|
116
|
-
style="margin-bottom: 14px;"
|
|
117
|
-
@on-submit="onSubmit"
|
|
118
|
-
/>
|
|
119
|
-
</VanSpace>
|
|
15
|
+
<XForm
|
|
16
|
+
ref="formGroupAddConstruction"
|
|
17
|
+
mode="新增"
|
|
18
|
+
:config-name="configName"
|
|
19
|
+
:service-name="serviceName"
|
|
20
|
+
/>
|
|
120
21
|
</template>
|
|
121
22
|
</NormalDataLayout>
|
|
122
23
|
</template>
|
|
123
24
|
|
|
124
|
-
<style scoped>
|
|
125
|
-
|
|
126
|
-
margin: 0;
|
|
127
|
-
padding: 32px 16px 16px;
|
|
128
|
-
color: black;
|
|
129
|
-
font-weight: 400;
|
|
130
|
-
font-size: 14px;
|
|
131
|
-
line-height: 16px;
|
|
132
|
-
}
|
|
25
|
+
<style scoped lang="less">
|
|
26
|
+
|
|
133
27
|
</style>
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
|
|
3
|
+
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
|
|
4
|
+
import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
|
|
5
|
+
import { onBeforeMount, ref, toRaw } from 'vue'
|
|
6
|
+
|
|
7
|
+
const configName = ref('AddConstructionForm')
|
|
8
|
+
const serviceName = ref('af-linepatrol')
|
|
9
|
+
const formGroup = ref(null)
|
|
10
|
+
const formConfig = ref(null)
|
|
11
|
+
const submitSimple = ref(null)
|
|
12
|
+
const isLoading = ref(true)
|
|
13
|
+
|
|
14
|
+
function safeStringify(obj) {
|
|
15
|
+
const seen = new WeakSet()
|
|
16
|
+
return JSON.stringify(toRaw(obj), (key, val) => {
|
|
17
|
+
if (typeof val === 'object' && val !== null) {
|
|
18
|
+
if (seen.has(val))
|
|
19
|
+
return
|
|
20
|
+
seen.add(val)
|
|
21
|
+
}
|
|
22
|
+
return val
|
|
23
|
+
}, 2)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function submit(result) {
|
|
27
|
+
console.log('>>>> result: ', safeStringify(result))
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function loadConfig() {
|
|
31
|
+
return new Promise((resolve) => {
|
|
32
|
+
getConfigByName(configName.value, (result) => {
|
|
33
|
+
submitSimple.value = result.showSubmitBtn
|
|
34
|
+
formConfig.value = result
|
|
35
|
+
resolve(result)
|
|
36
|
+
}, serviceName.value)
|
|
37
|
+
})
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
onBeforeMount(async () => {
|
|
41
|
+
try {
|
|
42
|
+
await loadConfig()
|
|
43
|
+
}
|
|
44
|
+
finally {
|
|
45
|
+
isLoading.value = false
|
|
46
|
+
}
|
|
47
|
+
})
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<template>
|
|
51
|
+
<NormalDataLayout id="XFormGroupView" title="纯表单">
|
|
52
|
+
<template #layout_content>
|
|
53
|
+
<van-loading v-if="isLoading" />
|
|
54
|
+
<XForm
|
|
55
|
+
v-else
|
|
56
|
+
ref="formGroup"
|
|
57
|
+
mode="查询"
|
|
58
|
+
:service-name="serviceName"
|
|
59
|
+
:group-form-items="formConfig"
|
|
60
|
+
:form-data="{}"
|
|
61
|
+
:form-name="formConfig?.groupName || '11111'"
|
|
62
|
+
:submit-button="submitSimple"
|
|
63
|
+
@on-submit="submit"
|
|
64
|
+
/>
|
|
65
|
+
</template>
|
|
66
|
+
</NormalDataLayout>
|
|
67
|
+
</template>
|
|
68
|
+
|
|
69
|
+
<style scoped lang="less">
|
|
70
|
+
</style>
|
|
@@ -1,118 +1,118 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import type { LocationResult } from '@af-mobile-client-vue3/components/data/XOlMap/types'
|
|
3
|
-
import LocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
|
|
4
|
-
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
|
|
5
|
-
import { showNotify } from 'vant'
|
|
6
|
-
import { ref } from 'vue'
|
|
7
|
-
|
|
8
|
-
const selectedLocation = ref<LocationResult>()
|
|
9
|
-
|
|
10
|
-
// 处理位置选择
|
|
11
|
-
function handleLocationConfirm(location: LocationResult) {
|
|
12
|
-
// console.log('选择的位置:', location)
|
|
13
|
-
// selectedLocation.value = location
|
|
14
|
-
showNotify({ type: 'success', message: '位置已选择' })
|
|
15
|
-
}
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<template>
|
|
19
|
-
<NormalDataLayout id="XLocationPicker" title="XOlMap地址选择器">
|
|
20
|
-
<template #layout_content>
|
|
21
|
-
<div class="location-picker-demo">
|
|
22
|
-
<!-- 页面标题 -->
|
|
23
|
-
<div class="page-header">
|
|
24
|
-
<div class="title">
|
|
25
|
-
位置选择
|
|
26
|
-
</div>
|
|
27
|
-
</div>
|
|
28
|
-
|
|
29
|
-
<!-- 选择结果展示 -->
|
|
30
|
-
<div v-if="selectedLocation" class="location-result">
|
|
31
|
-
<div class="label">
|
|
32
|
-
已选位置:
|
|
33
|
-
</div>
|
|
34
|
-
<div class="value">
|
|
35
|
-
{{ selectedLocation.address }}
|
|
36
|
-
</div>
|
|
37
|
-
<div class="coordinates">
|
|
38
|
-
经度: {{ selectedLocation.longitude.toFixed(6) }},
|
|
39
|
-
纬度: {{ selectedLocation.latitude.toFixed(6) }}
|
|
40
|
-
</div>
|
|
41
|
-
</div>
|
|
42
|
-
|
|
43
|
-
<!-- 地图组件 -->
|
|
44
|
-
<div class="map-container">
|
|
45
|
-
<LocationPicker
|
|
46
|
-
v-model="selectedLocation"
|
|
47
|
-
:default-center="[108.948024, 34.263161]"
|
|
48
|
-
:default-zoom="12"
|
|
49
|
-
@confirm="handleLocationConfirm"
|
|
50
|
-
/>
|
|
51
|
-
</div>
|
|
52
|
-
</div>
|
|
53
|
-
</template>
|
|
54
|
-
</NormalDataLayout>
|
|
55
|
-
</template>
|
|
56
|
-
|
|
57
|
-
<style scoped lang="less">
|
|
58
|
-
.location-picker-demo {
|
|
59
|
-
width: 100%;
|
|
60
|
-
height: 100%;
|
|
61
|
-
position: relative;
|
|
62
|
-
display: flex;
|
|
63
|
-
flex-direction: column;
|
|
64
|
-
background-color: #f7f8fa;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.page-header {
|
|
68
|
-
height: 44px;
|
|
69
|
-
display: flex;
|
|
70
|
-
align-items: center;
|
|
71
|
-
justify-content: center;
|
|
72
|
-
background: white;
|
|
73
|
-
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
74
|
-
position: relative;
|
|
75
|
-
z-index: 1;
|
|
76
|
-
|
|
77
|
-
.title {
|
|
78
|
-
font-size: 16px;
|
|
79
|
-
color: #333;
|
|
80
|
-
font-weight: 500;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.location-result {
|
|
85
|
-
background: white;
|
|
86
|
-
padding: 12px 16px;
|
|
87
|
-
margin: 10px;
|
|
88
|
-
border-radius: 8px;
|
|
89
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
90
|
-
|
|
91
|
-
.label {
|
|
92
|
-
font-size: 14px;
|
|
93
|
-
color: #666;
|
|
94
|
-
margin-bottom: 4px;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.value {
|
|
98
|
-
font-size: 16px;
|
|
99
|
-
color: #333;
|
|
100
|
-
margin-bottom: 8px;
|
|
101
|
-
word-break: break-all;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.coordinates {
|
|
105
|
-
font-size: 12px;
|
|
106
|
-
color: #999;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.map-container {
|
|
111
|
-
flex: 1;
|
|
112
|
-
position: relative;
|
|
113
|
-
margin: 0 10px 10px 10px;
|
|
114
|
-
border-radius: 8px;
|
|
115
|
-
overflow: hidden;
|
|
116
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
117
|
-
}
|
|
118
|
-
</style>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import type { LocationResult } from '@af-mobile-client-vue3/components/data/XOlMap/types'
|
|
3
|
+
import LocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
|
|
4
|
+
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
|
|
5
|
+
import { showNotify } from 'vant'
|
|
6
|
+
import { ref } from 'vue'
|
|
7
|
+
|
|
8
|
+
const selectedLocation = ref<LocationResult>()
|
|
9
|
+
|
|
10
|
+
// 处理位置选择
|
|
11
|
+
function handleLocationConfirm(location: LocationResult) {
|
|
12
|
+
// console.log('选择的位置:', location)
|
|
13
|
+
// selectedLocation.value = location
|
|
14
|
+
showNotify({ type: 'success', message: '位置已选择' })
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<template>
|
|
19
|
+
<NormalDataLayout id="XLocationPicker" title="XOlMap地址选择器">
|
|
20
|
+
<template #layout_content>
|
|
21
|
+
<div class="location-picker-demo">
|
|
22
|
+
<!-- 页面标题 -->
|
|
23
|
+
<div class="page-header">
|
|
24
|
+
<div class="title">
|
|
25
|
+
位置选择
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<!-- 选择结果展示 -->
|
|
30
|
+
<div v-if="selectedLocation" class="location-result">
|
|
31
|
+
<div class="label">
|
|
32
|
+
已选位置:
|
|
33
|
+
</div>
|
|
34
|
+
<div class="value">
|
|
35
|
+
{{ selectedLocation.address }}
|
|
36
|
+
</div>
|
|
37
|
+
<div class="coordinates">
|
|
38
|
+
经度: {{ selectedLocation.longitude.toFixed(6) }},
|
|
39
|
+
纬度: {{ selectedLocation.latitude.toFixed(6) }}
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<!-- 地图组件 -->
|
|
44
|
+
<div class="map-container">
|
|
45
|
+
<LocationPicker
|
|
46
|
+
v-model="selectedLocation"
|
|
47
|
+
:default-center="[108.948024, 34.263161]"
|
|
48
|
+
:default-zoom="12"
|
|
49
|
+
@confirm="handleLocationConfirm"
|
|
50
|
+
/>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</template>
|
|
54
|
+
</NormalDataLayout>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<style scoped lang="less">
|
|
58
|
+
.location-picker-demo {
|
|
59
|
+
width: 100%;
|
|
60
|
+
height: 100%;
|
|
61
|
+
position: relative;
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
background-color: #f7f8fa;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.page-header {
|
|
68
|
+
height: 44px;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
background: white;
|
|
73
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
74
|
+
position: relative;
|
|
75
|
+
z-index: 1;
|
|
76
|
+
|
|
77
|
+
.title {
|
|
78
|
+
font-size: 16px;
|
|
79
|
+
color: #333;
|
|
80
|
+
font-weight: 500;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.location-result {
|
|
85
|
+
background: white;
|
|
86
|
+
padding: 12px 16px;
|
|
87
|
+
margin: 10px;
|
|
88
|
+
border-radius: 8px;
|
|
89
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
90
|
+
|
|
91
|
+
.label {
|
|
92
|
+
font-size: 14px;
|
|
93
|
+
color: #666;
|
|
94
|
+
margin-bottom: 4px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.value {
|
|
98
|
+
font-size: 16px;
|
|
99
|
+
color: #333;
|
|
100
|
+
margin-bottom: 8px;
|
|
101
|
+
word-break: break-all;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.coordinates {
|
|
105
|
+
font-size: 12px;
|
|
106
|
+
color: #999;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.map-container {
|
|
111
|
+
flex: 1;
|
|
112
|
+
position: relative;
|
|
113
|
+
margin: 0 10px 10px 10px;
|
|
114
|
+
border-radius: 8px;
|
|
115
|
+
overflow: hidden;
|
|
116
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
117
|
+
}
|
|
118
|
+
</style>
|