af-mobile-client-vue3 1.3.98 → 1.3.99
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/package.json +1 -1
- package/src/components/core/XSelect/index.vue +238 -238
- package/src/components/data/XFormItem/index.vue +1 -1
- package/src/components/data/XOlMap/types.ts +1 -1
- package/src/views/component/XCellListView/index.vue +1 -77
- package/src/views/component/XOlMapView/XLocationPicker/index.vue +118 -118
package/package.json
CHANGED
|
@@ -1,238 +1,238 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import {
|
|
3
|
-
Field as VanField,
|
|
4
|
-
Picker as VanPicker,
|
|
5
|
-
Popup as VanPopup,
|
|
6
|
-
Search as VanSearch,
|
|
7
|
-
} from 'vant'
|
|
8
|
-
import { computed, defineEmits, defineModel, defineProps, onBeforeMount, ref, watch } from 'vue'
|
|
9
|
-
|
|
10
|
-
const props = defineProps({
|
|
11
|
-
columns: {
|
|
12
|
-
type: Array,
|
|
13
|
-
default() {
|
|
14
|
-
return []
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
option: {
|
|
18
|
-
type: Object,
|
|
19
|
-
default() {
|
|
20
|
-
return { text: 'label', value: 'value', children: 'children' }
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
offOption: { // 关闭option配置key-value;当数据是非集合的数组的时候,开启
|
|
24
|
-
type: Boolean,
|
|
25
|
-
default: false,
|
|
26
|
-
},
|
|
27
|
-
border: { // 是否展示边框
|
|
28
|
-
type: Boolean,
|
|
29
|
-
default: false,
|
|
30
|
-
},
|
|
31
|
-
lazyLoad: { // 是否启用懒加载
|
|
32
|
-
type: String,
|
|
33
|
-
default: 'false',
|
|
34
|
-
},
|
|
35
|
-
onSearch: { // 懒加载时的搜索函数
|
|
36
|
-
type: Function,
|
|
37
|
-
default: null,
|
|
38
|
-
},
|
|
39
|
-
})
|
|
40
|
-
const emits = defineEmits(['confirm', 'change', 'cancel', 'input'])
|
|
41
|
-
const show = ref(false)
|
|
42
|
-
const resultValue = defineModel()
|
|
43
|
-
const columnsData = ref([])
|
|
44
|
-
const selectedOption = ref([])
|
|
45
|
-
const searchValue = ref('')
|
|
46
|
-
const filteredColumns = ref([])
|
|
47
|
-
const isLoading = ref(false)
|
|
48
|
-
|
|
49
|
-
// 转换空children为空字符串
|
|
50
|
-
function transformColumns(data) {
|
|
51
|
-
return data.map((item) => {
|
|
52
|
-
if (item.children && item.children.length === 0) {
|
|
53
|
-
return {
|
|
54
|
-
...item,
|
|
55
|
-
children: '',
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
else if (item.children && item.children.length !== 0) {
|
|
59
|
-
return { ...item, children: transformColumns(item.children) }
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
return { ...item }
|
|
63
|
-
}
|
|
64
|
-
})
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// 搜索过滤函数
|
|
68
|
-
function handleSearch(value) {
|
|
69
|
-
// 确保 value 是字符串
|
|
70
|
-
const searchText = typeof value === 'string' ? value : value?.target?.value || ''
|
|
71
|
-
searchValue.value = searchText
|
|
72
|
-
|
|
73
|
-
// 如果是懒加载模式
|
|
74
|
-
if (props.lazyLoad && props.lazyLoad === 'true' && props.onSearch) {
|
|
75
|
-
if (!searchText) {
|
|
76
|
-
filteredColumns.value = []
|
|
77
|
-
return
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
isLoading.value = true
|
|
81
|
-
// 调用父组件传递的搜索函数
|
|
82
|
-
props.onSearch(searchText).then((results) => {
|
|
83
|
-
filteredColumns.value = transformColumns(results || [])
|
|
84
|
-
isLoading.value = false
|
|
85
|
-
}).catch((error) => {
|
|
86
|
-
console.error('懒加载搜索失败:', error)
|
|
87
|
-
filteredColumns.value = []
|
|
88
|
-
isLoading.value = false
|
|
89
|
-
})
|
|
90
|
-
return
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
// 普通搜索模式
|
|
94
|
-
if (!searchText) {
|
|
95
|
-
filteredColumns.value = columnsData.value
|
|
96
|
-
return
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
const searchTextLower = searchText.toLowerCase()
|
|
100
|
-
|
|
101
|
-
filteredColumns.value = columnsData.value.filter((item) => {
|
|
102
|
-
const text = props.offOption ? item : item[props.option.text]
|
|
103
|
-
return text?.toString().toLowerCase().includes(searchTextLower)
|
|
104
|
-
})
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
// 清空搜索
|
|
108
|
-
function handleSearchClear() {
|
|
109
|
-
searchValue.value = ''
|
|
110
|
-
if (props.lazyLoad) {
|
|
111
|
-
// 懒加载模式:清空搜索时重新获取初始数据
|
|
112
|
-
if (props.onSearch) {
|
|
113
|
-
props.onSearch('').then((results) => {
|
|
114
|
-
filteredColumns.value = transformColumns(results || [])
|
|
115
|
-
}).catch((error) => {
|
|
116
|
-
console.error('清空搜索后数据加载失败:', error)
|
|
117
|
-
filteredColumns.value = []
|
|
118
|
-
})
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
else {
|
|
122
|
-
filteredColumns.value = columnsData.value
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
onBeforeMount(() => {
|
|
127
|
-
columnsData.value = transformColumns(props.columns)
|
|
128
|
-
filteredColumns.value = columnsData.value
|
|
129
|
-
})
|
|
130
|
-
|
|
131
|
-
const resultLabel = computed({
|
|
132
|
-
get() {
|
|
133
|
-
if (!resultValue.value)
|
|
134
|
-
return ''
|
|
135
|
-
const res = props.columns.filter((item) => {
|
|
136
|
-
const data = props.offOption ? item : item[props.option.value]
|
|
137
|
-
return data === resultValue.value
|
|
138
|
-
})
|
|
139
|
-
return res.length ? (props.offOption ? res[0] : res[0][props.option.text]) : ''
|
|
140
|
-
},
|
|
141
|
-
set() {
|
|
142
|
-
|
|
143
|
-
},
|
|
144
|
-
})
|
|
145
|
-
|
|
146
|
-
function onConfirm(value, _index) {
|
|
147
|
-
resultValue.value = props.offOption ? value.selectedValues : value.selectedValues[0]
|
|
148
|
-
// resultValue.value = value.selectedValues
|
|
149
|
-
selectedOption.value = value.selectedOptions
|
|
150
|
-
show.value = !show.value
|
|
151
|
-
emits('confirm', value.selectedValues[0], value.selectedOptions)
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
function change(val, index) {
|
|
155
|
-
emits('change', val, index, resultValue.value)
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
function cancel(val, index) {
|
|
159
|
-
show.value = !show.value
|
|
160
|
-
emits('cancel', val, index, resultValue.value)
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
function showPopu(disabled) {
|
|
164
|
-
if (disabled !== undefined && disabled !== false)
|
|
165
|
-
return false
|
|
166
|
-
columnsData.value = transformColumns(props.columns)
|
|
167
|
-
filteredColumns.value = columnsData.value
|
|
168
|
-
searchValue.value = '' // 重置搜索
|
|
169
|
-
show.value = !show.value
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
watch(() => resultValue, (newVal, _oldVal) => {
|
|
173
|
-
columnsData.value = transformColumns(props.columns)
|
|
174
|
-
filteredColumns.value = columnsData.value
|
|
175
|
-
emits('input', newVal)
|
|
176
|
-
})
|
|
177
|
-
|
|
178
|
-
// 监听 columns 变化
|
|
179
|
-
watch(() => props.columns, () => {
|
|
180
|
-
columnsData.value = transformColumns(props.columns)
|
|
181
|
-
filteredColumns.value = columnsData.value
|
|
182
|
-
searchValue.value = ''
|
|
183
|
-
}, { deep: true })
|
|
184
|
-
</script>
|
|
185
|
-
|
|
186
|
-
<template>
|
|
187
|
-
<VanField
|
|
188
|
-
v-model="resultLabel"
|
|
189
|
-
v-bind="$attrs"
|
|
190
|
-
readonly
|
|
191
|
-
:is-link="true"
|
|
192
|
-
:border="props.border"
|
|
193
|
-
@click="showPopu($attrs.readonly)"
|
|
194
|
-
/>
|
|
195
|
-
<VanPopup v-model:show="show" position="bottom">
|
|
196
|
-
<div class="x-select-popup">
|
|
197
|
-
<!-- 搜索框 -->
|
|
198
|
-
<VanSearch
|
|
199
|
-
v-model="searchValue"
|
|
200
|
-
placeholder="搜索"
|
|
201
|
-
@clear="handleSearchClear"
|
|
202
|
-
@input="handleSearch"
|
|
203
|
-
/>
|
|
204
|
-
|
|
205
|
-
<!-- 选择器 -->
|
|
206
|
-
<div v-if="isLoading" class="loading-container">
|
|
207
|
-
<div class="loading-text">
|
|
208
|
-
搜索中...
|
|
209
|
-
</div>
|
|
210
|
-
</div>
|
|
211
|
-
<VanPicker
|
|
212
|
-
v-else
|
|
213
|
-
v-bind="$attrs"
|
|
214
|
-
:columns="filteredColumns"
|
|
215
|
-
:columns-field-names="props.option"
|
|
216
|
-
show-toolbar
|
|
217
|
-
:value-key="props.option.text"
|
|
218
|
-
@cancel="cancel"
|
|
219
|
-
@confirm="onConfirm"
|
|
220
|
-
@change="change"
|
|
221
|
-
/>
|
|
222
|
-
</div>
|
|
223
|
-
</VanPopup>
|
|
224
|
-
</template>
|
|
225
|
-
|
|
226
|
-
<style scoped>
|
|
227
|
-
.loading-container {
|
|
228
|
-
display: flex;
|
|
229
|
-
justify-content: center;
|
|
230
|
-
align-items: center;
|
|
231
|
-
height: 200px;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
.loading-text {
|
|
235
|
-
color: #969799;
|
|
236
|
-
font-size: 14px;
|
|
237
|
-
}
|
|
238
|
-
</style>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import {
|
|
3
|
+
Field as VanField,
|
|
4
|
+
Picker as VanPicker,
|
|
5
|
+
Popup as VanPopup,
|
|
6
|
+
Search as VanSearch,
|
|
7
|
+
} from 'vant'
|
|
8
|
+
import { computed, defineEmits, defineModel, defineProps, onBeforeMount, ref, watch } from 'vue'
|
|
9
|
+
|
|
10
|
+
const props = defineProps({
|
|
11
|
+
columns: {
|
|
12
|
+
type: Array,
|
|
13
|
+
default() {
|
|
14
|
+
return []
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
option: {
|
|
18
|
+
type: Object,
|
|
19
|
+
default() {
|
|
20
|
+
return { text: 'label', value: 'value', children: 'children' }
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
offOption: { // 关闭option配置key-value;当数据是非集合的数组的时候,开启
|
|
24
|
+
type: Boolean,
|
|
25
|
+
default: false,
|
|
26
|
+
},
|
|
27
|
+
border: { // 是否展示边框
|
|
28
|
+
type: Boolean,
|
|
29
|
+
default: false,
|
|
30
|
+
},
|
|
31
|
+
lazyLoad: { // 是否启用懒加载
|
|
32
|
+
type: String,
|
|
33
|
+
default: 'false',
|
|
34
|
+
},
|
|
35
|
+
onSearch: { // 懒加载时的搜索函数
|
|
36
|
+
type: Function,
|
|
37
|
+
default: null,
|
|
38
|
+
},
|
|
39
|
+
})
|
|
40
|
+
const emits = defineEmits(['confirm', 'change', 'cancel', 'input'])
|
|
41
|
+
const show = ref(false)
|
|
42
|
+
const resultValue = defineModel()
|
|
43
|
+
const columnsData = ref([])
|
|
44
|
+
const selectedOption = ref([])
|
|
45
|
+
const searchValue = ref('')
|
|
46
|
+
const filteredColumns = ref([])
|
|
47
|
+
const isLoading = ref(false)
|
|
48
|
+
|
|
49
|
+
// 转换空children为空字符串
|
|
50
|
+
function transformColumns(data) {
|
|
51
|
+
return data.map((item) => {
|
|
52
|
+
if (item.children && item.children.length === 0) {
|
|
53
|
+
return {
|
|
54
|
+
...item,
|
|
55
|
+
children: '',
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
else if (item.children && item.children.length !== 0) {
|
|
59
|
+
return { ...item, children: transformColumns(item.children) }
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
return { ...item }
|
|
63
|
+
}
|
|
64
|
+
})
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// 搜索过滤函数
|
|
68
|
+
function handleSearch(value) {
|
|
69
|
+
// 确保 value 是字符串
|
|
70
|
+
const searchText = typeof value === 'string' ? value : value?.target?.value || ''
|
|
71
|
+
searchValue.value = searchText
|
|
72
|
+
|
|
73
|
+
// 如果是懒加载模式
|
|
74
|
+
if (props.lazyLoad && props.lazyLoad === 'true' && props.onSearch) {
|
|
75
|
+
if (!searchText) {
|
|
76
|
+
filteredColumns.value = []
|
|
77
|
+
return
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
isLoading.value = true
|
|
81
|
+
// 调用父组件传递的搜索函数
|
|
82
|
+
props.onSearch(searchText).then((results) => {
|
|
83
|
+
filteredColumns.value = transformColumns(results || [])
|
|
84
|
+
isLoading.value = false
|
|
85
|
+
}).catch((error) => {
|
|
86
|
+
console.error('懒加载搜索失败:', error)
|
|
87
|
+
filteredColumns.value = []
|
|
88
|
+
isLoading.value = false
|
|
89
|
+
})
|
|
90
|
+
return
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// 普通搜索模式
|
|
94
|
+
if (!searchText) {
|
|
95
|
+
filteredColumns.value = columnsData.value
|
|
96
|
+
return
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
const searchTextLower = searchText.toLowerCase()
|
|
100
|
+
|
|
101
|
+
filteredColumns.value = columnsData.value.filter((item) => {
|
|
102
|
+
const text = props.offOption ? item : item[props.option.text]
|
|
103
|
+
return text?.toString().toLowerCase().includes(searchTextLower)
|
|
104
|
+
})
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// 清空搜索
|
|
108
|
+
function handleSearchClear() {
|
|
109
|
+
searchValue.value = ''
|
|
110
|
+
if (props.lazyLoad) {
|
|
111
|
+
// 懒加载模式:清空搜索时重新获取初始数据
|
|
112
|
+
if (props.onSearch) {
|
|
113
|
+
props.onSearch('').then((results) => {
|
|
114
|
+
filteredColumns.value = transformColumns(results || [])
|
|
115
|
+
}).catch((error) => {
|
|
116
|
+
console.error('清空搜索后数据加载失败:', error)
|
|
117
|
+
filteredColumns.value = []
|
|
118
|
+
})
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
filteredColumns.value = columnsData.value
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
onBeforeMount(() => {
|
|
127
|
+
columnsData.value = transformColumns(props.columns)
|
|
128
|
+
filteredColumns.value = columnsData.value
|
|
129
|
+
})
|
|
130
|
+
|
|
131
|
+
const resultLabel = computed({
|
|
132
|
+
get() {
|
|
133
|
+
if (!resultValue.value)
|
|
134
|
+
return ''
|
|
135
|
+
const res = props.columns.filter((item) => {
|
|
136
|
+
const data = props.offOption ? item : item[props.option.value]
|
|
137
|
+
return data === resultValue.value
|
|
138
|
+
})
|
|
139
|
+
return res.length ? (props.offOption ? res[0] : res[0][props.option.text]) : ''
|
|
140
|
+
},
|
|
141
|
+
set() {
|
|
142
|
+
|
|
143
|
+
},
|
|
144
|
+
})
|
|
145
|
+
|
|
146
|
+
function onConfirm(value, _index) {
|
|
147
|
+
resultValue.value = props.offOption ? value.selectedValues : value.selectedValues[0]
|
|
148
|
+
// resultValue.value = value.selectedValues
|
|
149
|
+
selectedOption.value = value.selectedOptions
|
|
150
|
+
show.value = !show.value
|
|
151
|
+
emits('confirm', value.selectedValues[0], value.selectedOptions)
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
function change(val, index) {
|
|
155
|
+
emits('change', val, index, resultValue.value)
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
function cancel(val, index) {
|
|
159
|
+
show.value = !show.value
|
|
160
|
+
emits('cancel', val, index, resultValue.value)
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
function showPopu(disabled) {
|
|
164
|
+
if (disabled !== undefined && disabled !== false)
|
|
165
|
+
return false
|
|
166
|
+
columnsData.value = transformColumns(props.columns)
|
|
167
|
+
filteredColumns.value = columnsData.value
|
|
168
|
+
searchValue.value = '' // 重置搜索
|
|
169
|
+
show.value = !show.value
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
watch(() => resultValue, (newVal, _oldVal) => {
|
|
173
|
+
columnsData.value = transformColumns(props.columns)
|
|
174
|
+
filteredColumns.value = columnsData.value
|
|
175
|
+
emits('input', newVal)
|
|
176
|
+
})
|
|
177
|
+
|
|
178
|
+
// 监听 columns 变化
|
|
179
|
+
watch(() => props.columns, () => {
|
|
180
|
+
columnsData.value = transformColumns(props.columns)
|
|
181
|
+
filteredColumns.value = columnsData.value
|
|
182
|
+
searchValue.value = ''
|
|
183
|
+
}, { deep: true })
|
|
184
|
+
</script>
|
|
185
|
+
|
|
186
|
+
<template>
|
|
187
|
+
<VanField
|
|
188
|
+
v-model="resultLabel"
|
|
189
|
+
v-bind="$attrs"
|
|
190
|
+
readonly
|
|
191
|
+
:is-link="true"
|
|
192
|
+
:border="props.border"
|
|
193
|
+
@click="showPopu($attrs.readonly)"
|
|
194
|
+
/>
|
|
195
|
+
<VanPopup v-model:show="show" position="bottom">
|
|
196
|
+
<div class="x-select-popup">
|
|
197
|
+
<!-- 搜索框 -->
|
|
198
|
+
<VanSearch
|
|
199
|
+
v-model="searchValue"
|
|
200
|
+
placeholder="搜索"
|
|
201
|
+
@clear="handleSearchClear"
|
|
202
|
+
@input="handleSearch"
|
|
203
|
+
/>
|
|
204
|
+
|
|
205
|
+
<!-- 选择器 -->
|
|
206
|
+
<div v-if="isLoading" class="loading-container">
|
|
207
|
+
<div class="loading-text">
|
|
208
|
+
搜索中...
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
<VanPicker
|
|
212
|
+
v-else
|
|
213
|
+
v-bind="$attrs"
|
|
214
|
+
:columns="filteredColumns"
|
|
215
|
+
:columns-field-names="props.option"
|
|
216
|
+
show-toolbar
|
|
217
|
+
:value-key="props.option.text"
|
|
218
|
+
@cancel="cancel"
|
|
219
|
+
@confirm="onConfirm"
|
|
220
|
+
@change="change"
|
|
221
|
+
/>
|
|
222
|
+
</div>
|
|
223
|
+
</VanPopup>
|
|
224
|
+
</template>
|
|
225
|
+
|
|
226
|
+
<style scoped>
|
|
227
|
+
.loading-container {
|
|
228
|
+
display: flex;
|
|
229
|
+
justify-content: center;
|
|
230
|
+
align-items: center;
|
|
231
|
+
height: 200px;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.loading-text {
|
|
235
|
+
color: #969799;
|
|
236
|
+
font-size: 14px;
|
|
237
|
+
}
|
|
238
|
+
</style>
|
|
@@ -980,7 +980,7 @@ async function handleLazySearch(searchText: string) {
|
|
|
980
980
|
}
|
|
981
981
|
|
|
982
982
|
lastFetchId.value++
|
|
983
|
-
const fetchId =
|
|
983
|
+
const fetchId = lastFetchId.value
|
|
984
984
|
// 根据搜索关键词过滤结果
|
|
985
985
|
const results = await runLogic(logicName, value, serviceName) as any
|
|
986
986
|
if (fetchId !== lastFetchId.value) {
|
|
@@ -13,83 +13,7 @@ const router = useRouter()
|
|
|
13
13
|
|
|
14
14
|
// 简易crud表单测试
|
|
15
15
|
const configName = ref('ceshiCRUD')
|
|
16
|
-
const serviceName = ref('af-
|
|
17
|
-
|
|
18
|
-
// 资源权限测试
|
|
19
|
-
// const configName = ref('crud_sources_test')
|
|
20
|
-
// const serviceName = ref('af-system')
|
|
21
|
-
|
|
22
|
-
// 实际业务测试
|
|
23
|
-
// const configName = ref('lngChargeAuditMobileCRUD')
|
|
24
|
-
// const serviceName = ref('af-gaslink')
|
|
25
|
-
|
|
26
|
-
// 跳转到详情页面
|
|
27
|
-
// function toDetail(item) {
|
|
28
|
-
// router.push({
|
|
29
|
-
// name: 'XCellDetailView',
|
|
30
|
-
// params: { id: item[idKey.value] }, // 如果使用命名路由,推荐使用路由参数而不是直接构建 URL
|
|
31
|
-
// query: {
|
|
32
|
-
// operName: item[operNameKey.value],
|
|
33
|
-
// method:item[methodKey.value],
|
|
34
|
-
// requestMethod:item[requestMethodKey.value],
|
|
35
|
-
// operatorType:item[operatorTypeKey.value],
|
|
36
|
-
// operUrl:item[operUrlKey.value],
|
|
37
|
-
// operIp:item[operIpKey.value],
|
|
38
|
-
// costTime:item[costTimeKey.value],
|
|
39
|
-
// operTime:item[operTimeKey.value],
|
|
40
|
-
//
|
|
41
|
-
// title: item[titleKey.value],
|
|
42
|
-
// businessType: item[businessTypeKey.value],
|
|
43
|
-
// status:item[statusKey.value]
|
|
44
|
-
// }
|
|
45
|
-
// })
|
|
46
|
-
// }
|
|
47
|
-
|
|
48
|
-
// 跳转到表单——以表单组来渲染纯表单
|
|
49
|
-
// function toDetail(item) {
|
|
50
|
-
// router.push({
|
|
51
|
-
// name: 'XFormGroupView',
|
|
52
|
-
// query: {
|
|
53
|
-
// id: item[idKey.value],
|
|
54
|
-
// // id: item.rr_id,
|
|
55
|
-
// // o_id: item.o_id,
|
|
56
|
-
// },
|
|
57
|
-
// })
|
|
58
|
-
// }
|
|
59
|
-
|
|
60
|
-
// 新增功能
|
|
61
|
-
// function addOption(totalCount) {
|
|
62
|
-
// router.push({
|
|
63
|
-
// name: 'XFormView',
|
|
64
|
-
// params: { id: totalCount, openid: totalCount },
|
|
65
|
-
// query: {
|
|
66
|
-
// configName: configName.value,
|
|
67
|
-
// serviceName: serviceName.value,
|
|
68
|
-
// mode: '新增',
|
|
69
|
-
// },
|
|
70
|
-
// })
|
|
71
|
-
// }
|
|
72
|
-
|
|
73
|
-
// 修改功能
|
|
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
|
-
// }
|
|
85
|
-
|
|
86
|
-
// 删除功能
|
|
87
|
-
// function deleteRow(result) {
|
|
88
|
-
// emit('deleteRow', result.o_id)
|
|
89
|
-
// }
|
|
90
|
-
// const fixQueryForm = ref({
|
|
91
|
-
// f_operator_id: '487184754014158848',
|
|
92
|
-
// })
|
|
16
|
+
const serviceName = ref('af-linepatrol')
|
|
93
17
|
</script>
|
|
94
18
|
|
|
95
19
|
<template>
|
|
@@ -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>
|