af-mobile-client-vue3 1.2.47 → 1.2.49
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/data/XFormGroup/index.vue +4 -0
- package/src/components/data/XFormItem/index.vue +2 -1
- package/src/components/data/XOlMap/utils/wgs84ToGcj02.js +154 -154
- package/src/router/routes.ts +6 -0
- package/src/utils/queryFormDefaultRangePicker.ts +57 -57
- package/src/views/component/XCellListView/index.vue +141 -14
- package/src/views/component/XFormGroupView/index.vue +11 -8
- package/src/views/component/XFormGroupView/xformgroup222.vue +94 -0
- package/src/views/component/XFormView/index.vue +2 -19
- package/src/views/component/XOlMapView/XLocationPicker/index.vue +118 -118
- package/src/views/component/XFormView/oldindex.vue +0 -70
package/package.json
CHANGED
|
@@ -47,6 +47,7 @@ const renderableGroupItems = computed(() => {
|
|
|
47
47
|
|
|
48
48
|
// 组件初始化函数
|
|
49
49
|
function init(params: Form) {
|
|
50
|
+
console.log('初始化数据------', { ...params })
|
|
50
51
|
initStatus.value = true
|
|
51
52
|
propsData.value = {
|
|
52
53
|
configName: props.configName,
|
|
@@ -55,6 +56,7 @@ function init(params: Form) {
|
|
|
55
56
|
mode: props.mode,
|
|
56
57
|
...params,
|
|
57
58
|
}
|
|
59
|
+
console.log('数据整合----', propsData.value)
|
|
58
60
|
formData.value = propsData.value.groupFormData
|
|
59
61
|
getConfigByName(propsData.value.configName, (result) => {
|
|
60
62
|
if (result?.groups) {
|
|
@@ -70,10 +72,12 @@ function init(params: Form) {
|
|
|
70
72
|
submitSimple.value = result?.showSubmitBtn
|
|
71
73
|
groupItems.value = [{ ...result }]
|
|
72
74
|
}
|
|
75
|
+
console.log('即将加载完成的数据--:', formData.value)
|
|
73
76
|
isInit.value = true
|
|
74
77
|
}, propsData.value.serviceName)
|
|
75
78
|
}
|
|
76
79
|
watch(() => props.groupFormData, (_val) => {
|
|
80
|
+
console.log('监听器-------', props.groupFormData)
|
|
77
81
|
formData.value = { ...formData.value, ...props.groupFormData }
|
|
78
82
|
})
|
|
79
83
|
onBeforeMount(() => {
|
|
@@ -339,8 +339,9 @@ watch(
|
|
|
339
339
|
watch(
|
|
340
340
|
() => modelData.value,
|
|
341
341
|
(newVal, oldVal) => {
|
|
342
|
+
console.log('变更函数新旧值-----', newVal, oldVal)
|
|
342
343
|
// 避免初始化时的调用
|
|
343
|
-
if (
|
|
344
|
+
if (newVal !== oldVal) {
|
|
344
345
|
dataChangeFunc()
|
|
345
346
|
}
|
|
346
347
|
},
|
|
@@ -1,154 +1,154 @@
|
|
|
1
|
-
// 导入proj控件
|
|
2
|
-
import * as proj from 'ol/proj'
|
|
3
|
-
|
|
4
|
-
function forEachPoint(func) {
|
|
5
|
-
return function (input, opt_output, opt_dimension) {
|
|
6
|
-
const len = input.length
|
|
7
|
-
|
|
8
|
-
const dimension = opt_dimension || 2
|
|
9
|
-
let output
|
|
10
|
-
|
|
11
|
-
if (opt_output) {
|
|
12
|
-
output = opt_output
|
|
13
|
-
}
|
|
14
|
-
else {
|
|
15
|
-
if (dimension !== 2) {
|
|
16
|
-
output = input.slice()
|
|
17
|
-
}
|
|
18
|
-
else {
|
|
19
|
-
output = [len]
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
for (let offset = 0; offset < len; offset += dimension) {
|
|
23
|
-
func(input, output, offset)
|
|
24
|
-
}
|
|
25
|
-
return output
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
const gcj02 = {}
|
|
30
|
-
const PI = Math.PI
|
|
31
|
-
const AXIS = 6378245.0
|
|
32
|
-
// eslint-disable-next-line no-loss-of-precision
|
|
33
|
-
const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2
|
|
34
|
-
|
|
35
|
-
function delta(wgLon, wgLat) {
|
|
36
|
-
let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
|
|
37
|
-
let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
|
|
38
|
-
const radLat = (wgLat / 180.0) * PI
|
|
39
|
-
let magic = Math.sin(radLat)
|
|
40
|
-
magic = 1 - OFFSET * magic * magic
|
|
41
|
-
const sqrtMagic = Math.sqrt(magic)
|
|
42
|
-
dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
|
|
43
|
-
dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
|
|
44
|
-
return [dLon, dLat]
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function outOfChina(lon, lat) {
|
|
48
|
-
if (lon < 72.004 || lon > 137.8347) {
|
|
49
|
-
return true
|
|
50
|
-
}
|
|
51
|
-
return lat < 0.8293 || lat > 55.8271
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function transformLat(x, y) {
|
|
55
|
-
let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
|
|
56
|
-
ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
|
|
57
|
-
ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
|
|
58
|
-
ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
|
|
59
|
-
return ret
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
function transformLon(x, y) {
|
|
63
|
-
let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
|
|
64
|
-
ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
|
|
65
|
-
ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
|
|
66
|
-
ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
|
|
67
|
-
return ret
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
gcj02.toWGS84 = forEachPoint((input, output, offset) => {
|
|
71
|
-
let lng = input[offset]
|
|
72
|
-
let lat = input[offset + 1]
|
|
73
|
-
if (!outOfChina(lng, lat)) {
|
|
74
|
-
const deltaD = delta(lng, lat)
|
|
75
|
-
lng = lng - deltaD[0] // 改回减法
|
|
76
|
-
lat = lat - deltaD[1] // 改回减法
|
|
77
|
-
}
|
|
78
|
-
output[offset] = lng
|
|
79
|
-
output[offset + 1] = lat
|
|
80
|
-
})
|
|
81
|
-
|
|
82
|
-
gcj02.fromWGS84 = forEachPoint((input, output, offset) => {
|
|
83
|
-
let lng = input[offset]
|
|
84
|
-
let lat = input[offset + 1]
|
|
85
|
-
if (!outOfChina(lng, lat)) {
|
|
86
|
-
const deltaD = delta(lng, lat)
|
|
87
|
-
lng = lng + deltaD[0] // 改回加法
|
|
88
|
-
lat = lat + deltaD[1] // 改回加法
|
|
89
|
-
}
|
|
90
|
-
output[offset] = lng
|
|
91
|
-
output[offset + 1] = lat
|
|
92
|
-
})
|
|
93
|
-
|
|
94
|
-
const sphericalMercator = {}
|
|
95
|
-
const RADIUS = 6378137
|
|
96
|
-
const MAX_LATITUDE = 85.0511287798
|
|
97
|
-
const RAD_PER_DEG = Math.PI / 180
|
|
98
|
-
|
|
99
|
-
sphericalMercator.forward = forEachPoint((input, output, offset) => {
|
|
100
|
-
const lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE)
|
|
101
|
-
const sin = Math.sin(lat * RAD_PER_DEG)
|
|
102
|
-
output[offset] = RADIUS * input[offset] * RAD_PER_DEG
|
|
103
|
-
output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2
|
|
104
|
-
})
|
|
105
|
-
|
|
106
|
-
sphericalMercator.inverse = forEachPoint((input, output, offset) => {
|
|
107
|
-
output[offset] = input[offset] / RADIUS / RAD_PER_DEG
|
|
108
|
-
output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG
|
|
109
|
-
})
|
|
110
|
-
|
|
111
|
-
const projzh = {}
|
|
112
|
-
|
|
113
|
-
projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
|
|
114
|
-
const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
|
|
115
|
-
return projzh.ll2smerc(output, output, opt_dimension)
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
|
|
119
|
-
const output = projzh.smerc2ll(input, input, opt_dimension)
|
|
120
|
-
return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// smerc2gmerc 需要修改
|
|
124
|
-
|
|
125
|
-
projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
|
|
126
|
-
let output = projzh.smerc2ll(input, input, opt_dimension)
|
|
127
|
-
output = gcj02.toWGS84(output, output, opt_dimension) // 这里应该用 toWGS84
|
|
128
|
-
return projzh.ll2smerc(output, output, opt_dimension)
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
// gmerc2smerc 需要修改
|
|
132
|
-
|
|
133
|
-
projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
|
|
134
|
-
let output = projzh.smerc2ll(input, input, opt_dimension)
|
|
135
|
-
output = gcj02.fromWGS84(output, output, opt_dimension) // 这里应该用 fromWGS84
|
|
136
|
-
return projzh.ll2smerc(output, output, opt_dimension)
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
projzh.ll2smerc = sphericalMercator.forward
|
|
140
|
-
projzh.smerc2ll = sphericalMercator.inverse
|
|
141
|
-
|
|
142
|
-
// 定义WGS84转GCJ02的投影
|
|
143
|
-
const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
|
|
144
|
-
export const wgs84ToGcj02Projection = new proj.Projection({
|
|
145
|
-
code: 'WGS84-TO-GCJ02',
|
|
146
|
-
extent,
|
|
147
|
-
units: 'm',
|
|
148
|
-
})
|
|
149
|
-
|
|
150
|
-
// 添加投影和转换方法
|
|
151
|
-
proj.addProjection(wgs84ToGcj02Projection)
|
|
152
|
-
// 注意这里转换方法的顺序与原来相反
|
|
153
|
-
proj.addCoordinateTransforms('EPSG:4326', wgs84ToGcj02Projection, projzh.ll2gmerc, projzh.gmerc2ll)
|
|
154
|
-
proj.addCoordinateTransforms('EPSG:3857', wgs84ToGcj02Projection, projzh.smerc2gmerc, projzh.gmerc2smerc)
|
|
1
|
+
// 导入proj控件
|
|
2
|
+
import * as proj from 'ol/proj'
|
|
3
|
+
|
|
4
|
+
function forEachPoint(func) {
|
|
5
|
+
return function (input, opt_output, opt_dimension) {
|
|
6
|
+
const len = input.length
|
|
7
|
+
|
|
8
|
+
const dimension = opt_dimension || 2
|
|
9
|
+
let output
|
|
10
|
+
|
|
11
|
+
if (opt_output) {
|
|
12
|
+
output = opt_output
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
if (dimension !== 2) {
|
|
16
|
+
output = input.slice()
|
|
17
|
+
}
|
|
18
|
+
else {
|
|
19
|
+
output = [len]
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
for (let offset = 0; offset < len; offset += dimension) {
|
|
23
|
+
func(input, output, offset)
|
|
24
|
+
}
|
|
25
|
+
return output
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const gcj02 = {}
|
|
30
|
+
const PI = Math.PI
|
|
31
|
+
const AXIS = 6378245.0
|
|
32
|
+
// eslint-disable-next-line no-loss-of-precision
|
|
33
|
+
const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2
|
|
34
|
+
|
|
35
|
+
function delta(wgLon, wgLat) {
|
|
36
|
+
let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
|
|
37
|
+
let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
|
|
38
|
+
const radLat = (wgLat / 180.0) * PI
|
|
39
|
+
let magic = Math.sin(radLat)
|
|
40
|
+
magic = 1 - OFFSET * magic * magic
|
|
41
|
+
const sqrtMagic = Math.sqrt(magic)
|
|
42
|
+
dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
|
|
43
|
+
dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
|
|
44
|
+
return [dLon, dLat]
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
function outOfChina(lon, lat) {
|
|
48
|
+
if (lon < 72.004 || lon > 137.8347) {
|
|
49
|
+
return true
|
|
50
|
+
}
|
|
51
|
+
return lat < 0.8293 || lat > 55.8271
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function transformLat(x, y) {
|
|
55
|
+
let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
|
|
56
|
+
ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
|
|
57
|
+
ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
|
|
58
|
+
ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
|
|
59
|
+
return ret
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
function transformLon(x, y) {
|
|
63
|
+
let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
|
|
64
|
+
ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
|
|
65
|
+
ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
|
|
66
|
+
ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
|
|
67
|
+
return ret
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
gcj02.toWGS84 = forEachPoint((input, output, offset) => {
|
|
71
|
+
let lng = input[offset]
|
|
72
|
+
let lat = input[offset + 1]
|
|
73
|
+
if (!outOfChina(lng, lat)) {
|
|
74
|
+
const deltaD = delta(lng, lat)
|
|
75
|
+
lng = lng - deltaD[0] // 改回减法
|
|
76
|
+
lat = lat - deltaD[1] // 改回减法
|
|
77
|
+
}
|
|
78
|
+
output[offset] = lng
|
|
79
|
+
output[offset + 1] = lat
|
|
80
|
+
})
|
|
81
|
+
|
|
82
|
+
gcj02.fromWGS84 = forEachPoint((input, output, offset) => {
|
|
83
|
+
let lng = input[offset]
|
|
84
|
+
let lat = input[offset + 1]
|
|
85
|
+
if (!outOfChina(lng, lat)) {
|
|
86
|
+
const deltaD = delta(lng, lat)
|
|
87
|
+
lng = lng + deltaD[0] // 改回加法
|
|
88
|
+
lat = lat + deltaD[1] // 改回加法
|
|
89
|
+
}
|
|
90
|
+
output[offset] = lng
|
|
91
|
+
output[offset + 1] = lat
|
|
92
|
+
})
|
|
93
|
+
|
|
94
|
+
const sphericalMercator = {}
|
|
95
|
+
const RADIUS = 6378137
|
|
96
|
+
const MAX_LATITUDE = 85.0511287798
|
|
97
|
+
const RAD_PER_DEG = Math.PI / 180
|
|
98
|
+
|
|
99
|
+
sphericalMercator.forward = forEachPoint((input, output, offset) => {
|
|
100
|
+
const lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE)
|
|
101
|
+
const sin = Math.sin(lat * RAD_PER_DEG)
|
|
102
|
+
output[offset] = RADIUS * input[offset] * RAD_PER_DEG
|
|
103
|
+
output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2
|
|
104
|
+
})
|
|
105
|
+
|
|
106
|
+
sphericalMercator.inverse = forEachPoint((input, output, offset) => {
|
|
107
|
+
output[offset] = input[offset] / RADIUS / RAD_PER_DEG
|
|
108
|
+
output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG
|
|
109
|
+
})
|
|
110
|
+
|
|
111
|
+
const projzh = {}
|
|
112
|
+
|
|
113
|
+
projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
|
|
114
|
+
const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
|
|
115
|
+
return projzh.ll2smerc(output, output, opt_dimension)
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
|
|
119
|
+
const output = projzh.smerc2ll(input, input, opt_dimension)
|
|
120
|
+
return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// smerc2gmerc 需要修改
|
|
124
|
+
|
|
125
|
+
projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
|
|
126
|
+
let output = projzh.smerc2ll(input, input, opt_dimension)
|
|
127
|
+
output = gcj02.toWGS84(output, output, opt_dimension) // 这里应该用 toWGS84
|
|
128
|
+
return projzh.ll2smerc(output, output, opt_dimension)
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// gmerc2smerc 需要修改
|
|
132
|
+
|
|
133
|
+
projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
|
|
134
|
+
let output = projzh.smerc2ll(input, input, opt_dimension)
|
|
135
|
+
output = gcj02.fromWGS84(output, output, opt_dimension) // 这里应该用 fromWGS84
|
|
136
|
+
return projzh.ll2smerc(output, output, opt_dimension)
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
projzh.ll2smerc = sphericalMercator.forward
|
|
140
|
+
projzh.smerc2ll = sphericalMercator.inverse
|
|
141
|
+
|
|
142
|
+
// 定义WGS84转GCJ02的投影
|
|
143
|
+
const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
|
|
144
|
+
export const wgs84ToGcj02Projection = new proj.Projection({
|
|
145
|
+
code: 'WGS84-TO-GCJ02',
|
|
146
|
+
extent,
|
|
147
|
+
units: 'm',
|
|
148
|
+
})
|
|
149
|
+
|
|
150
|
+
// 添加投影和转换方法
|
|
151
|
+
proj.addProjection(wgs84ToGcj02Projection)
|
|
152
|
+
// 注意这里转换方法的顺序与原来相反
|
|
153
|
+
proj.addCoordinateTransforms('EPSG:4326', wgs84ToGcj02Projection, projzh.ll2gmerc, projzh.gmerc2ll)
|
|
154
|
+
proj.addCoordinateTransforms('EPSG:3857', wgs84ToGcj02Projection, projzh.smerc2gmerc, projzh.gmerc2smerc)
|
package/src/router/routes.ts
CHANGED
|
@@ -10,6 +10,7 @@ import XCellDetailView from '@af-mobile-client-vue3/views/component/XCellDetailV
|
|
|
10
10
|
import XCellListView from '@af-mobile-client-vue3/views/component/XCellListView/index.vue'
|
|
11
11
|
import XFormAppraiseView from '@af-mobile-client-vue3/views/component/XFormAppraiseView/index.vue'
|
|
12
12
|
import XFormGroupView from '@af-mobile-client-vue3/views/component/XFormGroupView/index.vue'
|
|
13
|
+
import xformgroup222 from '@af-mobile-client-vue3/views/component/XFormGroupView/xformgroup222.vue'
|
|
13
14
|
import XFormView from '@af-mobile-client-vue3/views/component/XFormView/index.vue'
|
|
14
15
|
import XOlMapView from '@af-mobile-client-vue3/views/component/XOlMapView/index.vue'
|
|
15
16
|
import XLocationPicker from '@af-mobile-client-vue3/views/component/XOlMapView/XLocationPicker/index.vue'
|
|
@@ -66,6 +67,11 @@ const routes: Array<RouteRecordRaw> = [
|
|
|
66
67
|
name: 'XCellDetailView',
|
|
67
68
|
component: XCellDetailView,
|
|
68
69
|
},
|
|
70
|
+
{
|
|
71
|
+
path: '/xformgroup222',
|
|
72
|
+
name: 'xformgroup222',
|
|
73
|
+
component: xformgroup222,
|
|
74
|
+
},
|
|
69
75
|
{
|
|
70
76
|
path: '/Component/XFormGroupView',
|
|
71
77
|
name: 'XFormGroupView',
|
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 根据类型获取日期区间字符串
|
|
3
|
-
* @param type '当年' | 'curMonth' | '当日'
|
|
4
|
-
* @param show 区分实际值还是显示值, true为实际值, false为显示值
|
|
5
|
-
* @returns [start, end] 例:['2024-01-01 00:00:00', '2024-12-31 23:59:59']
|
|
6
|
-
*/
|
|
7
|
-
export function getRangeByType(type: string, show: boolean): [string, string] {
|
|
8
|
-
const now = new Date()
|
|
9
|
-
const year = now.getFullYear()
|
|
10
|
-
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
|
11
|
-
const day = now.getDate().toString().padStart(2, '0')
|
|
12
|
-
|
|
13
|
-
if (!show) {
|
|
14
|
-
if (type === 'curYear') {
|
|
15
|
-
return [
|
|
16
|
-
`${year}-01-01 00:00:00`,
|
|
17
|
-
`${year}-12-31 23:59:59`,
|
|
18
|
-
]
|
|
19
|
-
}
|
|
20
|
-
if (type === 'curMonth') {
|
|
21
|
-
const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
|
|
22
|
-
return [
|
|
23
|
-
`${year}-${month}-01 00:00:00`,
|
|
24
|
-
`${year}-${month}-${lastDay.toString().padStart(2, '0')} 23:59:59`,
|
|
25
|
-
]
|
|
26
|
-
}
|
|
27
|
-
if (type === 'curDay') {
|
|
28
|
-
return [
|
|
29
|
-
`${year}-${month}-${day} 00:00:00`,
|
|
30
|
-
`${year}-${month}-${day} 23:59:59`,
|
|
31
|
-
]
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
if (show) {
|
|
35
|
-
if (type === 'curYear') {
|
|
36
|
-
return [
|
|
37
|
-
`${year}-01-01`,
|
|
38
|
-
`${year}-12-31`,
|
|
39
|
-
]
|
|
40
|
-
}
|
|
41
|
-
if (type === 'curMonth') {
|
|
42
|
-
const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
|
|
43
|
-
return [
|
|
44
|
-
`${year}-${month}-01`,
|
|
45
|
-
`${year}-${month}-${lastDay.toString().padStart(2, '0')}`,
|
|
46
|
-
]
|
|
47
|
-
}
|
|
48
|
-
if (type === 'curDay') {
|
|
49
|
-
return [
|
|
50
|
-
`${year}-${month}-${day}`,
|
|
51
|
-
`${year}-${month}-${day}`,
|
|
52
|
-
]
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
// 兜底返回空字符串数组
|
|
56
|
-
return ['', '']
|
|
57
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* 根据类型获取日期区间字符串
|
|
3
|
+
* @param type '当年' | 'curMonth' | '当日'
|
|
4
|
+
* @param show 区分实际值还是显示值, true为实际值, false为显示值
|
|
5
|
+
* @returns [start, end] 例:['2024-01-01 00:00:00', '2024-12-31 23:59:59']
|
|
6
|
+
*/
|
|
7
|
+
export function getRangeByType(type: string, show: boolean): [string, string] {
|
|
8
|
+
const now = new Date()
|
|
9
|
+
const year = now.getFullYear()
|
|
10
|
+
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
|
11
|
+
const day = now.getDate().toString().padStart(2, '0')
|
|
12
|
+
|
|
13
|
+
if (!show) {
|
|
14
|
+
if (type === 'curYear') {
|
|
15
|
+
return [
|
|
16
|
+
`${year}-01-01 00:00:00`,
|
|
17
|
+
`${year}-12-31 23:59:59`,
|
|
18
|
+
]
|
|
19
|
+
}
|
|
20
|
+
if (type === 'curMonth') {
|
|
21
|
+
const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
|
|
22
|
+
return [
|
|
23
|
+
`${year}-${month}-01 00:00:00`,
|
|
24
|
+
`${year}-${month}-${lastDay.toString().padStart(2, '0')} 23:59:59`,
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
if (type === 'curDay') {
|
|
28
|
+
return [
|
|
29
|
+
`${year}-${month}-${day} 00:00:00`,
|
|
30
|
+
`${year}-${month}-${day} 23:59:59`,
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
if (show) {
|
|
35
|
+
if (type === 'curYear') {
|
|
36
|
+
return [
|
|
37
|
+
`${year}-01-01`,
|
|
38
|
+
`${year}-12-31`,
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
if (type === 'curMonth') {
|
|
42
|
+
const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
|
|
43
|
+
return [
|
|
44
|
+
`${year}-${month}-01`,
|
|
45
|
+
`${year}-${month}-${lastDay.toString().padStart(2, '0')}`,
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
if (type === 'curDay') {
|
|
49
|
+
return [
|
|
50
|
+
`${year}-${month}-${day}`,
|
|
51
|
+
`${year}-${month}-${day}`,
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
// 兜底返回空字符串数组
|
|
56
|
+
return ['', '']
|
|
57
|
+
}
|
|
@@ -1,28 +1,155 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
|
|
3
|
+
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
|
|
4
|
+
import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
|
|
3
5
|
import { defineEmits, ref } from 'vue'
|
|
4
6
|
import { useRouter } from 'vue-router'
|
|
5
7
|
|
|
6
|
-
|
|
8
|
+
// 定义事件
|
|
9
|
+
const emit = defineEmits(['deleteRow'])
|
|
10
|
+
const userInfo = useUserStore().getUserInfo()
|
|
11
|
+
// 访问路由
|
|
7
12
|
const router = useRouter()
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
// 获取默认值
|
|
14
|
+
const idKey = ref('o_id')
|
|
15
|
+
|
|
16
|
+
// 简易crud表单测试
|
|
17
|
+
// const configName = ref('orderCarInMobileCRUD')
|
|
18
|
+
// const serviceName = ref('af-gaslink')
|
|
19
|
+
// const configName = ref('lngPriceManageMobileCRUD')
|
|
20
|
+
const configName = ref('测试2')
|
|
21
|
+
const serviceName = ref('af-gaslink')
|
|
22
|
+
// const configName = ref('mobile_liushuiQueryCRUD')
|
|
23
|
+
// const serviceName = ref('af-revenue')
|
|
24
|
+
|
|
25
|
+
// 资源权限测试
|
|
26
|
+
// const configName = ref('crud_sources_test')
|
|
27
|
+
// const serviceName = ref('af-system')
|
|
28
|
+
|
|
29
|
+
// 实际业务测试
|
|
30
|
+
// const configName = ref('lngChargeAuditMobileCRUD')
|
|
31
|
+
// const serviceName = ref('af-gaslink')
|
|
32
|
+
|
|
33
|
+
// 跳转到详情页面
|
|
34
|
+
// function toDetail(item) {
|
|
35
|
+
// router.push({
|
|
36
|
+
// name: 'XCellDetailView',
|
|
37
|
+
// params: { id: item[idKey.value] }, // 如果使用命名路由,推荐使用路由参数而不是直接构建 URL
|
|
38
|
+
// query: {
|
|
39
|
+
// operName: item[operNameKey.value],
|
|
40
|
+
// method:item[methodKey.value],
|
|
41
|
+
// requestMethod:item[requestMethodKey.value],
|
|
42
|
+
// operatorType:item[operatorTypeKey.value],
|
|
43
|
+
// operUrl:item[operUrlKey.value],
|
|
44
|
+
// operIp:item[operIpKey.value],
|
|
45
|
+
// costTime:item[costTimeKey.value],
|
|
46
|
+
// operTime:item[operTimeKey.value],
|
|
47
|
+
//
|
|
48
|
+
// title: item[titleKey.value],
|
|
49
|
+
// businessType: item[businessTypeKey.value],
|
|
50
|
+
// status:item[statusKey.value]
|
|
51
|
+
// }
|
|
52
|
+
// })
|
|
53
|
+
// }
|
|
54
|
+
|
|
55
|
+
// 跳转到表单——以表单组来渲染纯表单
|
|
56
|
+
function toDetail(item) {
|
|
57
|
+
router.push({
|
|
58
|
+
name: 'xformgroup222',
|
|
59
|
+
// query: {
|
|
60
|
+
// id: item[idKey.value],
|
|
61
|
+
// id: item.rr_id,
|
|
62
|
+
// o_id: item.o_id,
|
|
63
|
+
// },
|
|
64
|
+
})
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// 新增功能
|
|
68
|
+
// function addOption(totalCount) {
|
|
69
|
+
// router.push({
|
|
70
|
+
// name: 'XFormView',
|
|
71
|
+
// params: { id: totalCount, openid: totalCount },
|
|
72
|
+
// query: {
|
|
73
|
+
// configName: configName.value,
|
|
74
|
+
// serviceName: serviceName.value,
|
|
75
|
+
// mode: '新增',
|
|
76
|
+
// },
|
|
77
|
+
// })
|
|
78
|
+
// }
|
|
79
|
+
function addOption() {
|
|
80
|
+
router.push({
|
|
81
|
+
name: 'XFormGroupView',
|
|
82
|
+
// params: { id: totalCount.value },
|
|
83
|
+
// query: {
|
|
84
|
+
// configName: configName.value,
|
|
85
|
+
// serviceName: serviceName.value,
|
|
86
|
+
// mode: '新增',
|
|
87
|
+
// },
|
|
15
88
|
})
|
|
89
|
+
// 如果存在回调函数,调用它并传递true表示已处理
|
|
90
|
+
// if (typeof callback === 'function') {
|
|
91
|
+
// callback(true)
|
|
92
|
+
// }
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// 修改功能
|
|
96
|
+
function updateRow(result) {
|
|
97
|
+
console.log('用户----', userInfo)
|
|
98
|
+
router.push({
|
|
99
|
+
name: 'XFormView',
|
|
100
|
+
params: { id: 1, openid: 2 },
|
|
101
|
+
query: {
|
|
102
|
+
configName: configName.value,
|
|
103
|
+
serviceName: serviceName.value,
|
|
104
|
+
mode: '修改',
|
|
105
|
+
},
|
|
106
|
+
})
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// 删除功能
|
|
110
|
+
function deleteRow(result) {
|
|
111
|
+
emit('deleteRow', result.o_id)
|
|
16
112
|
}
|
|
17
113
|
</script>
|
|
18
114
|
|
|
19
115
|
<template>
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
116
|
+
<NormalDataLayout id="XCellListView" title="工作计划">
|
|
117
|
+
<template #layout_content>
|
|
118
|
+
<!-- <XCellList -->
|
|
119
|
+
<!-- :config-name="configName" -->
|
|
120
|
+
<!-- :service-name="serviceName" -->
|
|
121
|
+
<!-- :custom-add="true" -->
|
|
122
|
+
<!-- :custom-edit="true" -->
|
|
123
|
+
<!-- :id-key="idKey" -->
|
|
124
|
+
<!-- @to-detail="toDetail" -->
|
|
125
|
+
<!-- @delete-row="deleteRow" -->
|
|
126
|
+
<!-- @update="updateRow" -->
|
|
127
|
+
<!-- @add="addOption" -->
|
|
128
|
+
<!-- /> -->
|
|
129
|
+
|
|
130
|
+
<!-- :fix-query-form="{ u_f_price_state: ['生效', '待生效'] }" -->
|
|
131
|
+
|
|
132
|
+
<!-- <XCellList -->
|
|
133
|
+
<!-- config-name="ApplyMobileSuperviseCRUD" -->
|
|
134
|
+
<!-- service-name="af-apply" -->
|
|
135
|
+
<!-- @to-detail="toDetail" -->
|
|
136
|
+
<!-- @delete-row="deleteRow" -->
|
|
137
|
+
<!-- /> -->
|
|
138
|
+
|
|
139
|
+
<!-- <XCellList -->
|
|
140
|
+
<!-- service-name="af-revenue" -->
|
|
141
|
+
<!-- config-name="userfiles_sel_address" -->
|
|
142
|
+
<!-- @to-detail="toDetail" -->
|
|
143
|
+
<!-- /> -->
|
|
144
|
+
<XCellList
|
|
145
|
+
service-name="af-apply"
|
|
146
|
+
config-name="ApplyContractPhoneCRUD"
|
|
147
|
+
:custom-add="true"
|
|
148
|
+
@to-detail="toDetail"
|
|
149
|
+
@add="addOption"
|
|
150
|
+
/>
|
|
151
|
+
</template>
|
|
152
|
+
</NormalDataLayout>
|
|
26
153
|
</template>
|
|
27
154
|
|
|
28
155
|
<style scoped lang="less">
|
|
@@ -5,16 +5,19 @@ 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
|
+
|
|
8
11
|
// 纯表单
|
|
9
|
-
const configName = ref('
|
|
10
|
-
const serviceName = ref('af-
|
|
12
|
+
// const configName = ref('form_check_test')
|
|
13
|
+
// const serviceName = ref('af-system')
|
|
11
14
|
|
|
12
15
|
// const configName = ref("计划下发Form")
|
|
13
16
|
// const serviceName = ref("af-linepatrol")
|
|
14
17
|
|
|
15
18
|
// 表单组
|
|
16
|
-
|
|
17
|
-
|
|
19
|
+
const configName = ref('lngChargeAuditMobileFormGroup')
|
|
20
|
+
const serviceName = ref('af-gaslink')
|
|
18
21
|
|
|
19
22
|
const formData = ref({})
|
|
20
23
|
const formGroup = ref(null)
|
|
@@ -22,7 +25,8 @@ const route = useRoute()
|
|
|
22
25
|
const isInit = ref(false)
|
|
23
26
|
function submit(_result) {
|
|
24
27
|
showDialog({ message: '提交成功' }).then(() => {
|
|
25
|
-
|
|
28
|
+
console.log('12121')
|
|
29
|
+
// history.back()
|
|
26
30
|
})
|
|
27
31
|
}
|
|
28
32
|
|
|
@@ -63,11 +67,10 @@ function submit(_result) {
|
|
|
63
67
|
<!-- v-if="isInit" -->
|
|
64
68
|
<XFormGroup
|
|
65
69
|
ref="formGroup"
|
|
66
|
-
|
|
67
|
-
|
|
70
|
+
config-name="ceshi11111FormGroup"
|
|
71
|
+
service-name="af-apply"
|
|
68
72
|
:group-form-data="formData"
|
|
69
73
|
mode="新增"
|
|
70
|
-
:is-scrollspy="true"
|
|
71
74
|
@submit="submit"
|
|
72
75
|
/>
|
|
73
76
|
</template>
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import XFormGroup from '@af-mobile-client-vue3/components/data/XFormGroup/index.vue'
|
|
3
|
+
import { runLogic } from '@af-mobile-client-vue3/services/api/common'
|
|
4
|
+
import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
|
|
5
|
+
import dayjs from 'dayjs/esm/index'
|
|
6
|
+
import { showToast } from 'vant'
|
|
7
|
+
import { onMounted, ref } from 'vue'
|
|
8
|
+
import { useRoute } from 'vue-router'
|
|
9
|
+
|
|
10
|
+
const configName = ref('appapplyuserinfoFormGroup')
|
|
11
|
+
const serviceName = ref('af-apply')
|
|
12
|
+
const route = useRoute()
|
|
13
|
+
const userInfo = useUserStore().getUserInfo()
|
|
14
|
+
const workflowId = ref('2909')
|
|
15
|
+
const userinfoid = ref('93015')
|
|
16
|
+
const model = ref('编辑')
|
|
17
|
+
const groupFormData = ref({})
|
|
18
|
+
|
|
19
|
+
function submit(res) {
|
|
20
|
+
if (model.value === '新增') {
|
|
21
|
+
res.t_userinfo.f_operate_date = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
|
22
|
+
res.t_userinfo.f_orgid = userInfo.f_orgid
|
|
23
|
+
res.t_userinfo.f_orgname = userInfo.f_orgname
|
|
24
|
+
res.t_userinfo.f_depid = userInfo.f_depid
|
|
25
|
+
res.t_userinfo.f_depname = userInfo.f_depname
|
|
26
|
+
res.t_userinfo.f_operatorid = userInfo.f_operatorid
|
|
27
|
+
res.t_userinfo.f_operator = userInfo.f_operator
|
|
28
|
+
res.t_userinfo.f_workflow_id = this.f_workflow_id
|
|
29
|
+
res.t_userinfo.f_user_state = '预备'
|
|
30
|
+
|
|
31
|
+
res.t_userfiles.f_operate_date = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
|
32
|
+
res.t_userfiles.f_orgid = userInfo.f_orgid
|
|
33
|
+
res.t_userfiles.f_orgname = userInfo.f_orgname
|
|
34
|
+
res.t_userfiles.f_depid = userInfo.f_depid
|
|
35
|
+
res.t_userfiles.f_depname = userInfo.f_depname
|
|
36
|
+
res.t_userfiles.f_operatorid = userInfo.f_operatorid
|
|
37
|
+
res.t_userfiles.f_operator = userInfo.f_operator
|
|
38
|
+
res.t_userfiles.f_workflow_id = this.f_workflow_id
|
|
39
|
+
res.t_userfiles.f_table_state = '待开通'
|
|
40
|
+
}
|
|
41
|
+
let saveData = res
|
|
42
|
+
if (saveData.t_userfiles.f_gasbrand_id.length > 0) {
|
|
43
|
+
saveData.t_userfiles.f_gasbrand_id = saveData.t_userfiles.f_gasbrand_id[0]
|
|
44
|
+
}
|
|
45
|
+
if (saveData.t_userfiles.f_price_id.length > 0) {
|
|
46
|
+
saveData.t_userfiles.f_price_id = saveData.t_userfiles.f_price_id[0]
|
|
47
|
+
}
|
|
48
|
+
if (model.value === '编辑') {
|
|
49
|
+
saveData = Object.assign(saveData, {
|
|
50
|
+
f_operator_record: userInfo.f_operator,
|
|
51
|
+
f_operatorid_record: userInfo.f_operatorid,
|
|
52
|
+
f_orgid_record: userInfo.f_orgid,
|
|
53
|
+
f_orgname_record: userInfo.f_orgname,
|
|
54
|
+
f_depid_record: userInfo.f_depid,
|
|
55
|
+
f_depname_record: userInfo.f_depname,
|
|
56
|
+
})
|
|
57
|
+
}
|
|
58
|
+
runLogic('userFIleSaveLogic', saveData, 'af-revenue').then((res) => {
|
|
59
|
+
showToast('操作成功!')
|
|
60
|
+
history.back()
|
|
61
|
+
})
|
|
62
|
+
}
|
|
63
|
+
function init() {
|
|
64
|
+
if (model.value === '编辑') {
|
|
65
|
+
runLogic('getFileDetailForEdit', { f_userinfo_id: userinfoid.value }, 'af-revenue').then((res) => {
|
|
66
|
+
if (res.t_userfiles.f_gasbrand_id) {
|
|
67
|
+
res.t_userfiles.f_gasbrand_id = [res.t_userfiles.f_gasbrand_id]
|
|
68
|
+
}
|
|
69
|
+
if (res.t_userfiles.f_price_id) {
|
|
70
|
+
res.t_userfiles.f_price_id = [res.t_userfiles.f_price_id]
|
|
71
|
+
}
|
|
72
|
+
console.log('1111111----,', res)
|
|
73
|
+
groupFormData.value = res
|
|
74
|
+
})
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
onMounted(() => {
|
|
78
|
+
init()
|
|
79
|
+
})
|
|
80
|
+
</script>
|
|
81
|
+
|
|
82
|
+
<template>
|
|
83
|
+
<XFormGroup
|
|
84
|
+
mode="修改"
|
|
85
|
+
:config-name="configName"
|
|
86
|
+
:service-name="serviceName"
|
|
87
|
+
:group-form-data="groupFormData"
|
|
88
|
+
@submit="submit"
|
|
89
|
+
/>
|
|
90
|
+
</template>
|
|
91
|
+
|
|
92
|
+
<style scoped lang="less">
|
|
93
|
+
|
|
94
|
+
</style>
|
|
@@ -3,25 +3,12 @@ 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
4
|
import { ref } from 'vue'
|
|
5
5
|
|
|
6
|
-
const configName = ref('
|
|
7
|
-
const serviceName = ref('af-
|
|
6
|
+
const configName = ref('addappapplychargeForm')
|
|
7
|
+
const serviceName = ref('af-apply')
|
|
8
8
|
|
|
9
9
|
const formGroupAddConstruction = ref(null)
|
|
10
|
-
function emitFunc(func, data) {
|
|
11
|
-
console.log('>>>> func: ', func)
|
|
12
|
-
console.log('>>>> data: ', data)
|
|
13
|
-
if (func === 'selectAddress') {
|
|
14
|
-
const add = 'ccss'
|
|
15
|
-
// 设置单个字段
|
|
16
|
-
formGroupAddConstruction.value?.setForm({ address: '你的字符串' })
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
function submit(data) {
|
|
20
|
-
console.log('>>>> data: ', JSON.stringify(data))
|
|
21
|
-
}
|
|
22
10
|
</script>
|
|
23
11
|
|
|
24
|
-
<!-- workflowId -->
|
|
25
12
|
<template>
|
|
26
13
|
<NormalDataLayout id="XFormGroupView" title="纯表单">
|
|
27
14
|
<template #layout_content>
|
|
@@ -30,10 +17,6 @@ function submit(data) {
|
|
|
30
17
|
mode="新增"
|
|
31
18
|
:config-name="configName"
|
|
32
19
|
:service-name="serviceName"
|
|
33
|
-
:param-logic-name-param="{ aa: 123 }"
|
|
34
|
-
:form-data="{ f_project_name: 333 }"
|
|
35
|
-
@x-form-item-emit-func="emitFunc"
|
|
36
|
-
@on-submit="submit"
|
|
37
20
|
/>
|
|
38
21
|
</template>
|
|
39
22
|
</NormalDataLayout>
|
|
@@ -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>
|
|
@@ -1,70 +0,0 @@
|
|
|
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>
|