af-mobile-client-vue3 1.2.42 → 1.2.44

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "af-mobile-client-vue3",
3
3
  "type": "module",
4
- "version": "1.2.42",
4
+ "version": "1.2.44",
5
5
  "packageManager": "pnpm@10.12.3",
6
6
  "description": "Vue + Vite component lib",
7
7
  "engines": {
@@ -2,7 +2,7 @@
2
2
  import { deleteFile } from '@af-mobile-client-vue3/services/api/common'
3
3
  import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
4
4
  import {
5
- Button as vanButton,
5
+ ActionSheet,
6
6
  Uploader as vanUploader,
7
7
  } from 'vant'
8
8
  import { ref, watch } from 'vue'
@@ -12,7 +12,7 @@ const props = defineProps({
12
12
  outerIndex: { default: undefined },
13
13
  authority: { default: 'user' },
14
14
  uploadMode: { default: 'server' },
15
- attr: { type: Object as () => { addOrEdit?: string }, default: () => ({}) },
15
+ attr: { type: Object as () => { addOrEdit?: string, acceptCount?: number, uploadImage?: boolean }, default: () => ({}) },
16
16
  })
17
17
  const emit = defineEmits(['updateFileList'])
18
18
 
@@ -126,20 +126,60 @@ function deleteFileFunction(file: any) {
126
126
  })
127
127
  }
128
128
  }
129
+
130
+ const showActionSheet = ref(false)
131
+ const uploaderRef = ref()
132
+
133
+ const actionOptions = [
134
+ { name: '拍照', key: 'camera' },
135
+ { name: '上传', key: 'file' },
136
+ ]
137
+
138
+ function handleUploadAreaClick() {
139
+ if (props.attr?.uploadImage) {
140
+ showActionSheet.value = true
141
+ }
142
+ else {
143
+ triggerCamera()
144
+ }
145
+ }
146
+
147
+ function handleActionSelect(option: any) {
148
+ showActionSheet.value = false
149
+ if (option.key === 'camera') {
150
+ triggerCamera()
151
+ }
152
+ else if (option.key === 'file') {
153
+ mobileUtil.execute({
154
+ funcName: 'photoAlbum',
155
+ param: {},
156
+ callbackFunc: (result: any) => {
157
+ if (result.status === 'success') {
158
+ handlePhotoUpload(result.data)
159
+ }
160
+ },
161
+ })
162
+ }
163
+ }
129
164
  </script>
130
165
 
131
166
  <template>
132
167
  <div class="uploader-container">
133
- <van-button
134
- v-if="props.attr?.addOrEdit !== 'readonly'"
135
- icon="photograph"
136
- type="primary"
137
- @click="triggerCamera"
168
+ <div
169
+ v-if="imageList.length < props.attr?.acceptCount && props.attr?.addOrEdit !== 'readonly'"
170
+ class="custom-upload-area"
171
+ @click="handleUploadAreaClick"
138
172
  >
139
- 拍照
140
- </van-button>
141
-
173
+ <img src="/src/assets/img/component/camera.png" alt="camera" class="upload-camera-img">
174
+ <div class="upload-title">
175
+ 上传附件
176
+ </div>
177
+ <div v-if="props.attr?.acceptCount" class="upload-desc">
178
+ 已上传 {{ imageList.length }} 个,最多可上传 {{ props.attr?.acceptCount }} 个
179
+ </div>
180
+ </div>
142
181
  <van-uploader
182
+ ref="uploaderRef"
143
183
  v-model="imageList"
144
184
  :show-upload="false"
145
185
  :deletable="props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin'"
@@ -147,6 +187,12 @@ function deleteFileFunction(file: any) {
147
187
  :preview-image="true"
148
188
  :before-delete="props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin' ? deleteFileFunction : undefined"
149
189
  />
190
+ <ActionSheet
191
+ v-model:show="showActionSheet"
192
+ :actions="actionOptions"
193
+ cancel-text="取消"
194
+ @select="handleActionSelect"
195
+ />
150
196
  </div>
151
197
  </template>
152
198
 
@@ -156,4 +202,38 @@ function deleteFileFunction(file: any) {
156
202
  flex-direction: column;
157
203
  gap: 16px;
158
204
  }
205
+ .custom-upload-area {
206
+ width: 100%;
207
+ min-width: 220px;
208
+ min-height: 100px;
209
+ margin: 0 auto 12px auto;
210
+ box-sizing: border-box;
211
+ border: 1px dashed #d9d9d9;
212
+ border-radius: 10px;
213
+ background: #fff;
214
+ display: flex;
215
+ flex-direction: column;
216
+ align-items: center;
217
+ justify-content: center;
218
+ cursor: pointer;
219
+ padding: 12px 0 10px 0;
220
+ .upload-camera-img {
221
+ width: 28px;
222
+ height: 28px;
223
+ margin-bottom: 6px;
224
+ object-fit: contain;
225
+ display: block;
226
+ }
227
+ .upload-title {
228
+ font-size: 14px;
229
+ color: #bfc1c6;
230
+ font-weight: 400;
231
+ margin-bottom: 2px;
232
+ }
233
+ .upload-desc {
234
+ font-size: 12px;
235
+ color: #bfc1c6;
236
+ margin-top: 0;
237
+ }
238
+ }
159
239
  </style>
@@ -529,6 +529,7 @@ function updateConditionAndRefresh(params: any) {
529
529
  // 暴露方法给父组件
530
530
  defineExpose({
531
531
  updateConditionAndRefresh,
532
+ onRefresh,
532
533
  })
533
534
  </script>
534
535
 
@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<{
17
17
  mode: '查询',
18
18
  isScrollspy: true,
19
19
  })
20
- const emit = defineEmits(['submit'])
20
+ const emit = defineEmits(['submit', 'xFormItemEmitFunc'])
21
21
 
22
22
  interface Form {
23
23
  configName?: string
@@ -116,7 +116,10 @@ async function submit() {
116
116
  }
117
117
  emit('submit', formData.value)
118
118
  }
119
-
119
+ function emitFunc(func: any, data: any, value: any) {
120
+ emit(func, data, value)
121
+ emit('xFormItemEmitFunc', func, data, value)
122
+ }
120
123
  // 动态计算 offsetTop = var(--van-nav-bar-height) + 10px
121
124
  const offsetTop = ref(0)
122
125
  onMounted(() => {
@@ -164,6 +167,7 @@ defineExpose({ init, removeRef, xFormListRef })
164
167
  :service-name="props.serviceName"
165
168
  :submit-button="submitSimple"
166
169
  @on-submit="submit"
170
+ @x-form-item-emit-func="emitFunc"
167
171
  />
168
172
  </template>
169
173
  </div>
@@ -201,7 +205,7 @@ defineExpose({ init, removeRef, xFormListRef })
201
205
  align-items: center;
202
206
  padding-top: 12px;
203
207
  background: none;
204
- margin: 0 0 4px 0;
208
+ margin: 0 0 4px 4px;
205
209
  }
206
210
  .form-group-bar {
207
211
  width: 4px;
@@ -364,7 +364,7 @@ function updateFile(files, _index) {
364
364
 
365
365
  // 表单校验的类型校验
366
366
  function formTypeCheck(attr, value) {
367
- if (this.mode === '查询')
367
+ if (mode === '查询')
368
368
  return
369
369
  if (!attr.rule || !attr.rule.required || attr.rule.required === 'false')
370
370
  return
@@ -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)
@@ -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,155 +1,28 @@
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'
5
3
  import { defineEmits, ref } from 'vue'
6
4
  import { useRouter } from 'vue-router'
7
5
 
8
- // 定义事件
9
- const emit = defineEmits(['deleteRow'])
10
- const userInfo = useUserStore().getUserInfo()
11
- // 访问路由
6
+ const emit = defineEmits(['addressSelected'])
12
7
  const router = useRouter()
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: 'XFormGroupView',
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
- // },
8
+ const configName = ref('userfiles_sel_address')
9
+ const xCellListRefPatrolPlan = ref()
10
+ // 详情
11
+ function toDetail(row) {
12
+ emit('addressSelected', {
13
+ f_address: row.tua_f_address,
14
+ f_address_id: row.tua_id,
88
15
  })
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)
112
16
  }
113
17
  </script>
114
18
 
115
19
  <template>
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="updateRow"
150
- />
151
- </template>
152
- </NormalDataLayout>
20
+ <XCellList
21
+ ref="xCellListRefPatrolPlan"
22
+ service-name="af-revenue"
23
+ :config-name="configName"
24
+ @to-detail="toDetail"
25
+ />
153
26
  </template>
154
27
 
155
28
  <style scoped lang="less">
@@ -5,19 +5,16 @@ 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
- // const configName = ref('form_check_test')
13
- // const serviceName = ref('af-system')
9
+ const configName = ref('testFormGroup')
10
+ const serviceName = ref('af-apply')
14
11
 
15
12
  // const configName = ref("计划下发Form")
16
13
  // const serviceName = ref("af-linepatrol")
17
14
 
18
15
  // 表单组
19
- const configName = ref('lngChargeAuditMobileFormGroup')
20
- const serviceName = ref('af-gaslink')
16
+ // const configName = ref('lngChargeAuditMobileFormGroup')
17
+ // const serviceName = ref('af-gaslink')
21
18
 
22
19
  const formData = ref({})
23
20
  const formGroup = ref(null)
@@ -25,8 +22,7 @@ const route = useRoute()
25
22
  const isInit = ref(false)
26
23
  function submit(_result) {
27
24
  showDialog({ message: '提交成功' }).then(() => {
28
- console.log('12121')
29
- // history.back()
25
+ history.back()
30
26
  })
31
27
  }
32
28
 
@@ -67,10 +63,11 @@ function submit(_result) {
67
63
  <!-- v-if="isInit" -->
68
64
  <XFormGroup
69
65
  ref="formGroup"
70
- config-name="appapplyuserinfoFormGroup"
71
- service-name="af-apply"
66
+ :config-name="configName"
67
+ :service-name="serviceName"
72
68
  :group-form-data="formData"
73
69
  mode="新增"
70
+ :is-scrollspy="true"
74
71
  @submit="submit"
75
72
  />
76
73
  </template>
@@ -3,12 +3,25 @@ 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('addappapplychargeForm')
7
- const serviceName = ref('af-apply')
6
+ const configName = ref('AddConstructionForm')
7
+ const serviceName = ref('af-linepatrol')
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
+ }
10
22
  </script>
11
23
 
24
+ <!-- workflowId -->
12
25
  <template>
13
26
  <NormalDataLayout id="XFormGroupView" title="纯表单">
14
27
  <template #layout_content>
@@ -17,6 +30,10 @@ const formGroupAddConstruction = ref(null)
17
30
  mode="新增"
18
31
  :config-name="configName"
19
32
  :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"
20
37
  />
21
38
  </template>
22
39
  </NormalDataLayout>
@@ -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>