af-mobile-client-vue3 1.6.29 → 1.6.31
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/MessageNotification/MessageNotification.vue +1 -1
- package/src/components/core/Signature/AdaptiveSignatureField.vue +168 -0
- package/src/components/data/XFormItem/index.vue +5 -5
- package/src/components/data/XOlMap/index.vue +13 -5
- package/src/components/data/step/person-select.vue +168 -168
- package/src/stores/index.ts +15 -15
- package/src/stores/modules/captcha.ts +108 -108
- package/src/stores/modules/step.ts +88 -88
- package/src/views/SafeInspection/SecurityCertificate/photoSignature/slots/QinHuaSignature.vue +5 -7
- package/src/views/component/FilePreviewView/index.vue +31 -31
- package/src/views/component/StepView/index.vue +1 -1
- package/src/views/user/login/LoginForm.vue +574 -574
- package/src/views/userRecords/PaymentRecords.vue +2 -2
package/package.json
CHANGED
|
@@ -36,7 +36,7 @@ async function fetchMessages() {
|
|
|
36
36
|
userId: `${userInfo.id}:phone`, // |phone
|
|
37
37
|
typeList: '\'phone\'', // phone
|
|
38
38
|
pageNo: 1,
|
|
39
|
-
pageSize:
|
|
39
|
+
pageSize: 10,
|
|
40
40
|
}
|
|
41
41
|
const res = await post('/af-system/logic/getNotificationListByType', param)
|
|
42
42
|
messages.value = (res || []).map((item: any) => {
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import type { SignatureComponentExpose, SignatureComponentProps } from './signature'
|
|
3
|
+
import XSignature from '@af-mobile-client-vue3/components/data/XSignature/index.vue'
|
|
4
|
+
import { upload } from '@af-mobile-client-vue3/services/api/common'
|
|
5
|
+
import { detectEnvironment } from '@af-mobile-client-vue3/utils/environment'
|
|
6
|
+
import { showFailToast, Field as VanField } from 'vant'
|
|
7
|
+
import { ref, watch } from 'vue'
|
|
8
|
+
import SignatureComponent from './SignatureComponent.vue'
|
|
9
|
+
|
|
10
|
+
const props = withDefaults(defineProps<SignatureComponentProps & {
|
|
11
|
+
serviceName?: string
|
|
12
|
+
}>(), {
|
|
13
|
+
label: '用户签字',
|
|
14
|
+
required: false,
|
|
15
|
+
disabled: false,
|
|
16
|
+
uploadMode: 'server',
|
|
17
|
+
imageList: null,
|
|
18
|
+
formReadonly: false,
|
|
19
|
+
isAsyncUpload: false,
|
|
20
|
+
serviceName: undefined,
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
const emit = defineEmits<{
|
|
24
|
+
signatureComplete: [data: any]
|
|
25
|
+
}>()
|
|
26
|
+
|
|
27
|
+
// 仅区分 App / 非 App:原生桥只在 App 可用,其余环境统一走 H5 签名
|
|
28
|
+
const isApp = detectEnvironment().isApp
|
|
29
|
+
|
|
30
|
+
const nativeSignatureRef = ref<InstanceType<typeof SignatureComponent>>()
|
|
31
|
+
const webSignatureImage = ref('')
|
|
32
|
+
const webSignatureData = ref<any>(null)
|
|
33
|
+
const webUploading = ref(false)
|
|
34
|
+
|
|
35
|
+
const serviceName = props.serviceName || import.meta.env.VITE_APP_SYSTEM_NAME
|
|
36
|
+
|
|
37
|
+
watch(
|
|
38
|
+
() => props.imageList,
|
|
39
|
+
(list) => {
|
|
40
|
+
if (isApp || !Array.isArray(list) || !list[0]?.url)
|
|
41
|
+
return
|
|
42
|
+
webSignatureImage.value = list[0].url
|
|
43
|
+
},
|
|
44
|
+
{ immediate: true, deep: true },
|
|
45
|
+
)
|
|
46
|
+
|
|
47
|
+
async function uploadWebSignature(base64Image: string) {
|
|
48
|
+
const blob = await (await fetch(base64Image)).blob()
|
|
49
|
+
const filename = `signature_${Date.now()}.png`
|
|
50
|
+
const file = new File([blob], filename, { type: blob.type || 'image/png' })
|
|
51
|
+
const formData = new FormData()
|
|
52
|
+
formData.append('avatar', file)
|
|
53
|
+
formData.append('resUploadMode', props.uploadMode)
|
|
54
|
+
formData.append('pathKey', 'Default')
|
|
55
|
+
formData.append('formType', 'image')
|
|
56
|
+
formData.append('useType', 'Default')
|
|
57
|
+
formData.append('resUploadStock', '1')
|
|
58
|
+
formData.append('filename', filename)
|
|
59
|
+
formData.append('filesize', (file.size / 1024 / 1024).toFixed(4))
|
|
60
|
+
formData.append('f_operator', 'server')
|
|
61
|
+
|
|
62
|
+
return upload(formData, serviceName, { 'Content-Type': 'multipart/form-data' })
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function resetWebSignature() {
|
|
66
|
+
webSignatureImage.value = ''
|
|
67
|
+
webSignatureData.value = null
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
async function handleWebSignatureSave(base64Image: string) {
|
|
71
|
+
if (props.disabled || props.formReadonly || webUploading.value)
|
|
72
|
+
return
|
|
73
|
+
|
|
74
|
+
webUploading.value = true
|
|
75
|
+
try {
|
|
76
|
+
const res: any = await uploadWebSignature(base64Image)
|
|
77
|
+
if (!res?.data?.id) {
|
|
78
|
+
showFailToast('签名上传失败')
|
|
79
|
+
resetWebSignature()
|
|
80
|
+
return
|
|
81
|
+
}
|
|
82
|
+
webSignatureData.value = res.data
|
|
83
|
+
emit('signatureComplete', { status: 'success', data: res.data })
|
|
84
|
+
}
|
|
85
|
+
catch (error) {
|
|
86
|
+
console.error('签名上传失败:', error)
|
|
87
|
+
showFailToast('签名上传失败')
|
|
88
|
+
resetWebSignature()
|
|
89
|
+
}
|
|
90
|
+
finally {
|
|
91
|
+
webUploading.value = false
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
function handleWebSignatureClear() {
|
|
96
|
+
resetWebSignature()
|
|
97
|
+
emit('signatureComplete', { base64: '', status: 'cleared' })
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
defineExpose<SignatureComponentExpose>({
|
|
101
|
+
clearSignature() {
|
|
102
|
+
if (isApp)
|
|
103
|
+
nativeSignatureRef.value?.clearSignature()
|
|
104
|
+
else
|
|
105
|
+
handleWebSignatureClear()
|
|
106
|
+
},
|
|
107
|
+
hasSignature() {
|
|
108
|
+
if (isApp)
|
|
109
|
+
return nativeSignatureRef.value?.hasSignature() ?? false
|
|
110
|
+
return !!webSignatureData.value?.id || !!webSignatureImage.value
|
|
111
|
+
},
|
|
112
|
+
getSignatureData() {
|
|
113
|
+
if (isApp)
|
|
114
|
+
return nativeSignatureRef.value?.getSignatureData() ?? ''
|
|
115
|
+
return webSignatureImage.value.replace(/^data:image\/\w+;base64,/, '')
|
|
116
|
+
},
|
|
117
|
+
previewSignature() {
|
|
118
|
+
nativeSignatureRef.value?.previewSignature()
|
|
119
|
+
},
|
|
120
|
+
getSignatureList() {
|
|
121
|
+
if (isApp)
|
|
122
|
+
return nativeSignatureRef.value?.getSignatureList() ?? []
|
|
123
|
+
if (!webSignatureData.value)
|
|
124
|
+
return []
|
|
125
|
+
return [{
|
|
126
|
+
photo_name: webSignatureData.value.f_filename,
|
|
127
|
+
id: webSignatureData.value.id,
|
|
128
|
+
f_downloadpath: webSignatureData.value.f_downloadpath,
|
|
129
|
+
}]
|
|
130
|
+
},
|
|
131
|
+
})
|
|
132
|
+
</script>
|
|
133
|
+
|
|
134
|
+
<template>
|
|
135
|
+
<!-- App:原生签字板 -->
|
|
136
|
+
<SignatureComponent
|
|
137
|
+
v-if="isApp"
|
|
138
|
+
ref="nativeSignatureRef"
|
|
139
|
+
:label="label"
|
|
140
|
+
:required="required"
|
|
141
|
+
:disabled="disabled"
|
|
142
|
+
:upload-mode="uploadMode"
|
|
143
|
+
:image-list="imageList"
|
|
144
|
+
:form-readonly="formReadonly"
|
|
145
|
+
:is-async-upload="isAsyncUpload"
|
|
146
|
+
@signature-complete="emit('signatureComplete', $event)"
|
|
147
|
+
/>
|
|
148
|
+
<!-- 非 App:H5 在线签名(浏览器、微信等) -->
|
|
149
|
+
<VanField
|
|
150
|
+
v-else
|
|
151
|
+
center
|
|
152
|
+
name="signature"
|
|
153
|
+
:label="label"
|
|
154
|
+
:required="required"
|
|
155
|
+
>
|
|
156
|
+
<template #input>
|
|
157
|
+
<XSignature
|
|
158
|
+
v-model="webSignatureImage"
|
|
159
|
+
button-text="点击签字"
|
|
160
|
+
:show-button-after-signed="true"
|
|
161
|
+
:show-sign-button="!formReadonly"
|
|
162
|
+
:show-preview="true"
|
|
163
|
+
@save="handleWebSignatureSave"
|
|
164
|
+
@clear="handleWebSignatureClear"
|
|
165
|
+
/>
|
|
166
|
+
</template>
|
|
167
|
+
</VanField>
|
|
168
|
+
</template>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import type { FieldType } from 'vant'
|
|
3
3
|
import type { Numeric } from 'vant/es/utils'
|
|
4
4
|
import ImageUploader from '@af-mobile-client-vue3/components/core/ImageUploader/index.vue'
|
|
5
|
-
import
|
|
5
|
+
import AdaptiveSignatureField from '@af-mobile-client-vue3/components/core/Signature/AdaptiveSignatureField.vue'
|
|
6
6
|
import XDatePicker from '@af-mobile-client-vue3/components/core/XDatePicker/index.vue'
|
|
7
7
|
import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
|
|
8
8
|
import XMultiSelect from '@af-mobile-client-vue3/components/core/XMultiSelect/index.vue'
|
|
@@ -1275,17 +1275,17 @@ function commChange() {
|
|
|
1275
1275
|
/>
|
|
1276
1276
|
</template>
|
|
1277
1277
|
</VanField>
|
|
1278
|
-
<!--
|
|
1279
|
-
<
|
|
1278
|
+
<!-- 签字:App 原生签字板,微信/浏览器 H5 在线签名 -->
|
|
1279
|
+
<AdaptiveSignatureField
|
|
1280
1280
|
v-if="attr.type === 'signature' && showItem"
|
|
1281
1281
|
:label="labelData"
|
|
1282
1282
|
upload-mode="server"
|
|
1283
1283
|
:image-list="(modelData as any[])"
|
|
1284
|
-
|
|
1285
|
-
:required="attr.rule?.required"
|
|
1284
|
+
:required="attr.rule?.required === 'true'"
|
|
1286
1285
|
:disabled="attr.disabled"
|
|
1287
1286
|
:form-readonly="readonly"
|
|
1288
1287
|
:is-async-upload="isAsyncUpload"
|
|
1288
|
+
:service-name="serviceName"
|
|
1289
1289
|
@signature-complete="signatureComplete"
|
|
1290
1290
|
/>
|
|
1291
1291
|
|
|
@@ -63,12 +63,12 @@ const preview = ref(false)
|
|
|
63
63
|
/** 地图实例 */
|
|
64
64
|
let map: Map | null = null
|
|
65
65
|
/** 当前底图类型 */
|
|
66
|
-
const currentMapType = ref<string>('
|
|
66
|
+
const currentMapType = ref<string>('gaode')
|
|
67
67
|
/** 控制图层面板显示状态 */
|
|
68
68
|
const showControls = ref<boolean>(false)
|
|
69
69
|
|
|
70
70
|
/** 图层选项配置 */
|
|
71
|
-
|
|
71
|
+
let layerOptions = [
|
|
72
72
|
{ text: '高德地图', value: 'gaode' },
|
|
73
73
|
{ text: '高德卫星', value: 'gaodeSatellite' },
|
|
74
74
|
{ text: '天地图', value: 'tianditu' },
|
|
@@ -199,7 +199,7 @@ function initializeLayers(tianDiTuKey = ''): void {
|
|
|
199
199
|
// 高德地图
|
|
200
200
|
baseMaps.gaode = new TileLayer({
|
|
201
201
|
source: new XYZ({
|
|
202
|
-
url: '
|
|
202
|
+
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
|
|
203
203
|
crossOrigin: 'anonymous',
|
|
204
204
|
projection: 'EPSG:3857',
|
|
205
205
|
maxZoom: 18,
|
|
@@ -364,7 +364,7 @@ function init(params: InitParams = {}): Promise<void> {
|
|
|
364
364
|
const {
|
|
365
365
|
center = [116.404, 39.915],
|
|
366
366
|
zoom = 10,
|
|
367
|
-
maxZoom =
|
|
367
|
+
maxZoom = 21,
|
|
368
368
|
minZoom = 4,
|
|
369
369
|
isPreview = false,
|
|
370
370
|
} = params
|
|
@@ -375,6 +375,14 @@ function init(params: InitParams = {}): Promise<void> {
|
|
|
375
375
|
const tianDiTuKey = res.tianDiTuKey || 'c16876b28898637c0a1a68b3fa410504'
|
|
376
376
|
const amapKey = res.amapKey || '5ebabc4536d4b42e0dd1e20175cca8ab'
|
|
377
377
|
|
|
378
|
+
const initMapOptionConfig = res.mapOptionConfig
|
|
379
|
+
if (initMapOptionConfig.mapType) {
|
|
380
|
+
currentMapType.value = initMapOptionConfig.mapType
|
|
381
|
+
}
|
|
382
|
+
if (initMapOptionConfig.mapOption) {
|
|
383
|
+
layerOptions = initMapOptionConfig.mapOption
|
|
384
|
+
}
|
|
385
|
+
|
|
378
386
|
tiandityKey.value = tianDiTuKey
|
|
379
387
|
gaodeKey.value = amapKey
|
|
380
388
|
// 初始化所有底图图层
|
|
@@ -412,7 +420,7 @@ function init(params: InitParams = {}): Promise<void> {
|
|
|
412
420
|
if (map) {
|
|
413
421
|
map.updateSize()
|
|
414
422
|
// 确保默认图层正确显示
|
|
415
|
-
handleMapChange(
|
|
423
|
+
handleMapChange(currentMapType.value)
|
|
416
424
|
// 地图初始化完成后解析 Promise
|
|
417
425
|
resolve()
|
|
418
426
|
}
|
|
@@ -1,168 +1,168 @@
|
|
|
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, inject, onMounted, ref } from 'vue'
|
|
9
|
-
|
|
10
|
-
const workflowHandleWrap: any = inject('workflowHandleWrap')
|
|
11
|
-
|
|
12
|
-
const showPicker = ref(false)
|
|
13
|
-
|
|
14
|
-
const showMultiplePicker = ref(false)
|
|
15
|
-
|
|
16
|
-
const branchChargePersons = ref({})
|
|
17
|
-
|
|
18
|
-
const isInit = ref(false)
|
|
19
|
-
|
|
20
|
-
// 用于 filterOption 的本地输入缓存(vant 不自带 filter)
|
|
21
|
-
const filterKeyword = ref('')
|
|
22
|
-
|
|
23
|
-
const customFieldName = {
|
|
24
|
-
text: 'label',
|
|
25
|
-
value: 'value',
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
const selectedNode = ref(undefined)
|
|
29
|
-
|
|
30
|
-
const selectedOptions = computed(() => {
|
|
31
|
-
if (!selectedNode.value) {
|
|
32
|
-
return []
|
|
33
|
-
}
|
|
34
|
-
return filterOptions(selectedNode.value.chargePersonOptions)
|
|
35
|
-
})
|
|
36
|
-
|
|
37
|
-
onMounted(() => {
|
|
38
|
-
isInit.value = false
|
|
39
|
-
if (workflowHandleWrap.branchNodes.value) {
|
|
40
|
-
// 初始化初始值
|
|
41
|
-
for (const node of workflowHandleWrap.branchNodes.value) {
|
|
42
|
-
branchChargePersons.value[node.stepId] = {
|
|
43
|
-
handler: '',
|
|
44
|
-
handlerId: '',
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
isInit.value = true
|
|
49
|
-
})
|
|
50
|
-
|
|
51
|
-
function setBranchPersonValue(stepId, value, options, selectedOptions) {
|
|
52
|
-
if (!stepId)
|
|
53
|
-
return
|
|
54
|
-
if (!workflowHandleWrap.branchChargePersons.value) {
|
|
55
|
-
workflowHandleWrap.branchChargePersons.value = {}
|
|
56
|
-
}
|
|
57
|
-
if (!workflowHandleWrap.branchChargePersons.value[stepId]) {
|
|
58
|
-
workflowHandleWrap.branchChargePersons.value[stepId] = {}
|
|
59
|
-
}
|
|
60
|
-
if (workflowHandleWrap.branchChargePersons.value[stepId]) {
|
|
61
|
-
branchChargePersons.value[stepId] = {
|
|
62
|
-
handler: options.find(item => item.value === value)?.label,
|
|
63
|
-
handlerId: value,
|
|
64
|
-
}
|
|
65
|
-
Object.assign(workflowHandleWrap.branchChargePersons.value[stepId], branchChargePersons.value[stepId])
|
|
66
|
-
}
|
|
67
|
-
workflowHandleWrap.checkedNextStepPerson.value = selectedOptions[0].value
|
|
68
|
-
workflowHandleWrap.checkedNextStepPersonName.value = selectedOptions[0].label
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
function getBranchSelectionLabel() {
|
|
72
|
-
if (workflowHandleWrap.needMultipleBranchSelection.value) {
|
|
73
|
-
return '分支处理人'
|
|
74
|
-
}
|
|
75
|
-
else if (workflowHandleWrap.calculatedTargetNode.value) {
|
|
76
|
-
return `${workflowHandleWrap.getStepNameByStepId(workflowHandleWrap.calculatedTargetNode.value)}处理人`
|
|
77
|
-
}
|
|
78
|
-
else {
|
|
79
|
-
return '处理人'
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
// vant 没有原生 filter-option,因此需要本地筛选
|
|
84
|
-
function filterOptions(options) {
|
|
85
|
-
if (!filterKeyword.value)
|
|
86
|
-
return options
|
|
87
|
-
return options.filter(option => option.label.toLowerCase().includes(filterKeyword.value.toLowerCase()))
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// 搜索回调函数
|
|
91
|
-
function search(val: string) {
|
|
92
|
-
filterKeyword.value = val || ''
|
|
93
|
-
}
|
|
94
|
-
</script>
|
|
95
|
-
|
|
96
|
-
<template>
|
|
97
|
-
<div v-if="workflowHandleWrap.isNeedSelectPerson.value && isInit">
|
|
98
|
-
<!-- 多分支选择 -->
|
|
99
|
-
<template v-if="workflowHandleWrap.needMultipleBranchSelection.value && workflowHandleWrap.branchNodes.value.length > 0">
|
|
100
|
-
<template v-for="node in workflowHandleWrap.branchNodes.value" :key="node.stepId">
|
|
101
|
-
<VanField
|
|
102
|
-
v-model="branchChargePersons[node.stepId].handler"
|
|
103
|
-
:label="`${node.stepName}处理人`"
|
|
104
|
-
is-link
|
|
105
|
-
clickable
|
|
106
|
-
required
|
|
107
|
-
placeholder="请选择处理人"
|
|
108
|
-
@click="selectedNode = node; showMultiplePicker = true;"
|
|
109
|
-
/>
|
|
110
|
-
</template>
|
|
111
|
-
<VanPopup v-model:show="showMultiplePicker" position="bottom">
|
|
112
|
-
<!-- 搜索框 -->
|
|
113
|
-
<VanSearch
|
|
114
|
-
v-model="filterKeyword"
|
|
115
|
-
placeholder="搜索"
|
|
116
|
-
@clear="() => search('')"
|
|
117
|
-
@update:model-value="search"
|
|
118
|
-
/>
|
|
119
|
-
<VanPicker
|
|
120
|
-
:columns="selectedOptions"
|
|
121
|
-
:columns-field-names="customFieldName"
|
|
122
|
-
value-key="label"
|
|
123
|
-
@confirm="(val) => {
|
|
124
|
-
setBranchPersonValue(selectedNode.stepId, val.selectedValues[0], selectedNode.chargePersonOptions, val.selectedOptions)
|
|
125
|
-
showMultiplePicker = false;
|
|
126
|
-
}"
|
|
127
|
-
@cancel="showMultiplePicker = false;"
|
|
128
|
-
/>
|
|
129
|
-
</VanPopup>
|
|
130
|
-
</template>
|
|
131
|
-
|
|
132
|
-
<!-- 单分支选择 -->
|
|
133
|
-
<template v-else>
|
|
134
|
-
<VanField
|
|
135
|
-
v-model="workflowHandleWrap.checkedNextStepPersonName.value"
|
|
136
|
-
:label="getBranchSelectionLabel()"
|
|
137
|
-
label-width="auto"
|
|
138
|
-
is-link
|
|
139
|
-
clickable
|
|
140
|
-
required
|
|
141
|
-
placeholder="请选择处理人"
|
|
142
|
-
@click="showPicker = true"
|
|
143
|
-
/>
|
|
144
|
-
<VanPopup v-model:show="showPicker" position="bottom">
|
|
145
|
-
<!-- 搜索框 -->
|
|
146
|
-
<VanSearch
|
|
147
|
-
v-model="filterKeyword"
|
|
148
|
-
placeholder="搜索"
|
|
149
|
-
@clear="() => search('')"
|
|
150
|
-
@update:model-value="search"
|
|
151
|
-
/>
|
|
152
|
-
<VanPicker
|
|
153
|
-
:columns="filterOptions(workflowHandleWrap.nextStepPersonOptions.value)"
|
|
154
|
-
:columns-field-names="customFieldName"
|
|
155
|
-
@confirm="(val) => {
|
|
156
|
-
setBranchPersonValue(workflowHandleWrap.calculatedTargetNode.value, val.selectedValues[0], workflowHandleWrap.nextStepPersonOptions.value, val.selectedOptions)
|
|
157
|
-
showPicker = false;
|
|
158
|
-
}"
|
|
159
|
-
@cancel="showPicker = false;"
|
|
160
|
-
/>
|
|
161
|
-
</VanPopup>
|
|
162
|
-
</template>
|
|
163
|
-
</div>
|
|
164
|
-
</template>
|
|
165
|
-
|
|
166
|
-
<style scoped>
|
|
167
|
-
/* 保持你的样式或根据 vant 移动端自行优化 */
|
|
168
|
-
</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, inject, onMounted, ref } from 'vue'
|
|
9
|
+
|
|
10
|
+
const workflowHandleWrap: any = inject('workflowHandleWrap')
|
|
11
|
+
|
|
12
|
+
const showPicker = ref(false)
|
|
13
|
+
|
|
14
|
+
const showMultiplePicker = ref(false)
|
|
15
|
+
|
|
16
|
+
const branchChargePersons = ref({})
|
|
17
|
+
|
|
18
|
+
const isInit = ref(false)
|
|
19
|
+
|
|
20
|
+
// 用于 filterOption 的本地输入缓存(vant 不自带 filter)
|
|
21
|
+
const filterKeyword = ref('')
|
|
22
|
+
|
|
23
|
+
const customFieldName = {
|
|
24
|
+
text: 'label',
|
|
25
|
+
value: 'value',
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const selectedNode = ref(undefined)
|
|
29
|
+
|
|
30
|
+
const selectedOptions = computed(() => {
|
|
31
|
+
if (!selectedNode.value) {
|
|
32
|
+
return []
|
|
33
|
+
}
|
|
34
|
+
return filterOptions(selectedNode.value.chargePersonOptions)
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
onMounted(() => {
|
|
38
|
+
isInit.value = false
|
|
39
|
+
if (workflowHandleWrap.branchNodes.value) {
|
|
40
|
+
// 初始化初始值
|
|
41
|
+
for (const node of workflowHandleWrap.branchNodes.value) {
|
|
42
|
+
branchChargePersons.value[node.stepId] = {
|
|
43
|
+
handler: '',
|
|
44
|
+
handlerId: '',
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
isInit.value = true
|
|
49
|
+
})
|
|
50
|
+
|
|
51
|
+
function setBranchPersonValue(stepId, value, options, selectedOptions) {
|
|
52
|
+
if (!stepId)
|
|
53
|
+
return
|
|
54
|
+
if (!workflowHandleWrap.branchChargePersons.value) {
|
|
55
|
+
workflowHandleWrap.branchChargePersons.value = {}
|
|
56
|
+
}
|
|
57
|
+
if (!workflowHandleWrap.branchChargePersons.value[stepId]) {
|
|
58
|
+
workflowHandleWrap.branchChargePersons.value[stepId] = {}
|
|
59
|
+
}
|
|
60
|
+
if (workflowHandleWrap.branchChargePersons.value[stepId]) {
|
|
61
|
+
branchChargePersons.value[stepId] = {
|
|
62
|
+
handler: options.find(item => item.value === value)?.label,
|
|
63
|
+
handlerId: value,
|
|
64
|
+
}
|
|
65
|
+
Object.assign(workflowHandleWrap.branchChargePersons.value[stepId], branchChargePersons.value[stepId])
|
|
66
|
+
}
|
|
67
|
+
workflowHandleWrap.checkedNextStepPerson.value = selectedOptions[0].value
|
|
68
|
+
workflowHandleWrap.checkedNextStepPersonName.value = selectedOptions[0].label
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
function getBranchSelectionLabel() {
|
|
72
|
+
if (workflowHandleWrap.needMultipleBranchSelection.value) {
|
|
73
|
+
return '分支处理人'
|
|
74
|
+
}
|
|
75
|
+
else if (workflowHandleWrap.calculatedTargetNode.value) {
|
|
76
|
+
return `${workflowHandleWrap.getStepNameByStepId(workflowHandleWrap.calculatedTargetNode.value)}处理人`
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
return '处理人'
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// vant 没有原生 filter-option,因此需要本地筛选
|
|
84
|
+
function filterOptions(options) {
|
|
85
|
+
if (!filterKeyword.value)
|
|
86
|
+
return options
|
|
87
|
+
return options.filter(option => option.label.toLowerCase().includes(filterKeyword.value.toLowerCase()))
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// 搜索回调函数
|
|
91
|
+
function search(val: string) {
|
|
92
|
+
filterKeyword.value = val || ''
|
|
93
|
+
}
|
|
94
|
+
</script>
|
|
95
|
+
|
|
96
|
+
<template>
|
|
97
|
+
<div v-if="workflowHandleWrap.isNeedSelectPerson.value && isInit">
|
|
98
|
+
<!-- 多分支选择 -->
|
|
99
|
+
<template v-if="workflowHandleWrap.needMultipleBranchSelection.value && workflowHandleWrap.branchNodes.value.length > 0">
|
|
100
|
+
<template v-for="node in workflowHandleWrap.branchNodes.value" :key="node.stepId">
|
|
101
|
+
<VanField
|
|
102
|
+
v-model="branchChargePersons[node.stepId].handler"
|
|
103
|
+
:label="`${node.stepName}处理人`"
|
|
104
|
+
is-link
|
|
105
|
+
clickable
|
|
106
|
+
required
|
|
107
|
+
placeholder="请选择处理人"
|
|
108
|
+
@click="selectedNode = node; showMultiplePicker = true;"
|
|
109
|
+
/>
|
|
110
|
+
</template>
|
|
111
|
+
<VanPopup v-model:show="showMultiplePicker" position="bottom">
|
|
112
|
+
<!-- 搜索框 -->
|
|
113
|
+
<VanSearch
|
|
114
|
+
v-model="filterKeyword"
|
|
115
|
+
placeholder="搜索"
|
|
116
|
+
@clear="() => search('')"
|
|
117
|
+
@update:model-value="search"
|
|
118
|
+
/>
|
|
119
|
+
<VanPicker
|
|
120
|
+
:columns="selectedOptions"
|
|
121
|
+
:columns-field-names="customFieldName"
|
|
122
|
+
value-key="label"
|
|
123
|
+
@confirm="(val) => {
|
|
124
|
+
setBranchPersonValue(selectedNode.stepId, val.selectedValues[0], selectedNode.chargePersonOptions, val.selectedOptions)
|
|
125
|
+
showMultiplePicker = false;
|
|
126
|
+
}"
|
|
127
|
+
@cancel="showMultiplePicker = false;"
|
|
128
|
+
/>
|
|
129
|
+
</VanPopup>
|
|
130
|
+
</template>
|
|
131
|
+
|
|
132
|
+
<!-- 单分支选择 -->
|
|
133
|
+
<template v-else>
|
|
134
|
+
<VanField
|
|
135
|
+
v-model="workflowHandleWrap.checkedNextStepPersonName.value"
|
|
136
|
+
:label="getBranchSelectionLabel()"
|
|
137
|
+
label-width="auto"
|
|
138
|
+
is-link
|
|
139
|
+
clickable
|
|
140
|
+
required
|
|
141
|
+
placeholder="请选择处理人"
|
|
142
|
+
@click="showPicker = true"
|
|
143
|
+
/>
|
|
144
|
+
<VanPopup v-model:show="showPicker" position="bottom">
|
|
145
|
+
<!-- 搜索框 -->
|
|
146
|
+
<VanSearch
|
|
147
|
+
v-model="filterKeyword"
|
|
148
|
+
placeholder="搜索"
|
|
149
|
+
@clear="() => search('')"
|
|
150
|
+
@update:model-value="search"
|
|
151
|
+
/>
|
|
152
|
+
<VanPicker
|
|
153
|
+
:columns="filterOptions(workflowHandleWrap.nextStepPersonOptions.value)"
|
|
154
|
+
:columns-field-names="customFieldName"
|
|
155
|
+
@confirm="(val) => {
|
|
156
|
+
setBranchPersonValue(workflowHandleWrap.calculatedTargetNode.value, val.selectedValues[0], workflowHandleWrap.nextStepPersonOptions.value, val.selectedOptions)
|
|
157
|
+
showPicker = false;
|
|
158
|
+
}"
|
|
159
|
+
@cancel="showPicker = false;"
|
|
160
|
+
/>
|
|
161
|
+
</VanPopup>
|
|
162
|
+
</template>
|
|
163
|
+
</div>
|
|
164
|
+
</template>
|
|
165
|
+
|
|
166
|
+
<style scoped>
|
|
167
|
+
/* 保持你的样式或根据 vant 移动端自行优化 */
|
|
168
|
+
</style>
|
package/src/stores/index.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { createPinia } from 'pinia'
|
|
2
|
-
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
|
3
|
-
|
|
4
|
-
import useCaptchaStore from './modules/captcha'
|
|
5
|
-
import useHomeAppStore from './modules/homeApp'
|
|
6
|
-
import useRouteCacheStore from './modules/routeCache'
|
|
7
|
-
import useSettingStore from './modules/setting'
|
|
8
|
-
import useStepStore from './modules/step'
|
|
9
|
-
import useUserStore from './modules/user'
|
|
10
|
-
|
|
11
|
-
const pinia = createPinia()
|
|
12
|
-
pinia.use(piniaPluginPersistedstate)
|
|
13
|
-
|
|
14
|
-
export { useCaptchaStore, useHomeAppStore, useRouteCacheStore, useSettingStore, useStepStore, useUserStore }
|
|
15
|
-
export default pinia
|
|
1
|
+
import { createPinia } from 'pinia'
|
|
2
|
+
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
|
3
|
+
|
|
4
|
+
import useCaptchaStore from './modules/captcha'
|
|
5
|
+
import useHomeAppStore from './modules/homeApp'
|
|
6
|
+
import useRouteCacheStore from './modules/routeCache'
|
|
7
|
+
import useSettingStore from './modules/setting'
|
|
8
|
+
import useStepStore from './modules/step'
|
|
9
|
+
import useUserStore from './modules/user'
|
|
10
|
+
|
|
11
|
+
const pinia = createPinia()
|
|
12
|
+
pinia.use(piniaPluginPersistedstate)
|
|
13
|
+
|
|
14
|
+
export { useCaptchaStore, useHomeAppStore, useRouteCacheStore, useSettingStore, useStepStore, useUserStore }
|
|
15
|
+
export default pinia
|