af-mobile-client-vue3 1.2.39 → 1.2.40
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/XCellList/index.vue +4 -2
- package/src/components/data/XFormGroup/README.md +677 -0
- package/src/components/data/XFormGroup/index.vue +97 -20
- package/src/components/data/XReportGrid/XReportDemo.vue +33 -33
- package/src/components/data/XReportGrid/print.js +184 -184
- package/src/views/component/XCellListView/index.vue +127 -93
- package/src/views/component/XFormGroupView/index.vue +16 -7
- package/src/views/component/XFormView/index.vue +80 -15
- package/vite.config.ts +2 -2
|
@@ -1,108 +1,142 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
|
|
3
|
-
import
|
|
4
|
-
import { defineEmits, ref } from 'vue'
|
|
3
|
+
import { onMounted, ref } from 'vue'
|
|
5
4
|
import { useRouter } from 'vue-router'
|
|
6
5
|
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
// 访问路由
|
|
6
|
+
const configName = ref('ApplyMobileProcessCRUD')
|
|
7
|
+
const serviceName = ref('af-apply')
|
|
10
8
|
const router = useRouter()
|
|
11
|
-
// 获取默认值
|
|
12
|
-
const idKey = ref('o_id')
|
|
13
|
-
|
|
14
|
-
// 简易crud表单测试
|
|
15
|
-
const configName = ref('lngChargeAuditMobileCRUD')
|
|
16
|
-
const serviceName = ref('af-gaslink')
|
|
17
|
-
|
|
18
|
-
// 资源权限测试
|
|
19
|
-
// const configName = ref('crud_sources_test')
|
|
20
|
-
// const serviceName = ref('af-system')
|
|
21
|
-
|
|
22
|
-
// 实际业务测试
|
|
23
|
-
// const configName = ref('lngChargeAuditMobileCRUD')
|
|
24
|
-
// const serviceName = ref('af-gaslink')
|
|
25
|
-
|
|
26
|
-
// 跳转到详情页面
|
|
27
|
-
// function toDetail(item) {
|
|
28
|
-
// router.push({
|
|
29
|
-
// name: 'XCellDetailView',
|
|
30
|
-
// params: { id: item[idKey.value] }, // 如果使用命名路由,推荐使用路由参数而不是直接构建 URL
|
|
31
|
-
// query: {
|
|
32
|
-
// operName: item[operNameKey.value],
|
|
33
|
-
// method:item[methodKey.value],
|
|
34
|
-
// requestMethod:item[requestMethodKey.value],
|
|
35
|
-
// operatorType:item[operatorTypeKey.value],
|
|
36
|
-
// operUrl:item[operUrlKey.value],
|
|
37
|
-
// operIp:item[operIpKey.value],
|
|
38
|
-
// costTime:item[costTimeKey.value],
|
|
39
|
-
// operTime:item[operTimeKey.value],
|
|
40
|
-
//
|
|
41
|
-
// title: item[titleKey.value],
|
|
42
|
-
// businessType: item[businessTypeKey.value],
|
|
43
|
-
// status:item[statusKey.value]
|
|
44
|
-
// }
|
|
45
|
-
// })
|
|
46
|
-
// }
|
|
47
|
-
|
|
48
|
-
// 跳转到表单——以表单组来渲染纯表单
|
|
49
|
-
function toDetail(item) {
|
|
50
|
-
router.push({
|
|
51
|
-
name: 'XFormGroupView',
|
|
52
|
-
query: {
|
|
53
|
-
id: item[idKey.value],
|
|
54
|
-
// id: item.rr_id,
|
|
55
|
-
// o_id: item.o_id,
|
|
56
|
-
},
|
|
57
|
-
})
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
// 新增功能
|
|
61
|
-
// function addOption(totalCount) {
|
|
62
|
-
// router.push({
|
|
63
|
-
// name: 'XFormView',
|
|
64
|
-
// params: { id: totalCount, openid: totalCount },
|
|
65
|
-
// query: {
|
|
66
|
-
// configName: configName.value,
|
|
67
|
-
// serviceName: serviceName.value,
|
|
68
|
-
// mode: '新增',
|
|
69
|
-
// },
|
|
70
|
-
// })
|
|
71
|
-
// }
|
|
72
|
-
|
|
73
|
-
// 修改功能
|
|
74
|
-
// function updateRow(result) {
|
|
75
|
-
// router.push({
|
|
76
|
-
// name: 'XFormView',
|
|
77
|
-
// params: { id: result.o_id, openid: result.o_id },
|
|
78
|
-
// query: {
|
|
79
|
-
// configName: configName.value,
|
|
80
|
-
// serviceName: serviceName.value,
|
|
81
|
-
// mode: '修改',
|
|
82
|
-
// },
|
|
83
|
-
// })
|
|
84
|
-
// }
|
|
85
9
|
|
|
86
10
|
// 删除功能
|
|
87
|
-
function
|
|
88
|
-
|
|
11
|
+
function phone(result) {
|
|
12
|
+
// todo 调用真机进行通话
|
|
13
|
+
}
|
|
14
|
+
// 跳转流程处理
|
|
15
|
+
function action(row) {
|
|
16
|
+
router.push({ name: 'stepDetail', query: { workflowId: row.ab_f_workflow_id, stepId: row.ws_f_step_id } })
|
|
89
17
|
}
|
|
18
|
+
// 工作日志
|
|
19
|
+
function worklog(row) {
|
|
20
|
+
router.push({ name: 'worklog', query: { workflowid: row.ab_f_workflow_id, defname: row.ws_f_name } })
|
|
21
|
+
}
|
|
22
|
+
onMounted(() => {
|
|
23
|
+
})
|
|
90
24
|
</script>
|
|
91
25
|
|
|
92
26
|
<template>
|
|
93
|
-
<
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
@to-detail="toDetail"
|
|
101
|
-
@delete-row="deleteRow"
|
|
102
|
-
/>
|
|
103
|
-
</template>
|
|
104
|
-
</NormalDataLayout>
|
|
27
|
+
<XCellList
|
|
28
|
+
:config-name="configName"
|
|
29
|
+
:service-name="serviceName"
|
|
30
|
+
@phone="phone"
|
|
31
|
+
@action="action"
|
|
32
|
+
@worklog="worklog"
|
|
33
|
+
/>
|
|
105
34
|
</template>
|
|
106
35
|
|
|
107
36
|
<style scoped lang="less">
|
|
37
|
+
.cell-search-after {
|
|
38
|
+
padding: 0 12px 12px 12px;
|
|
39
|
+
background-color: #fff;
|
|
40
|
+
.van-row:first-child {
|
|
41
|
+
align-items: center;
|
|
42
|
+
margin-bottom: 8px;
|
|
43
|
+
padding: 0 2px;
|
|
44
|
+
h4 {
|
|
45
|
+
font-size: 1.08rem;
|
|
46
|
+
font-weight: 600;
|
|
47
|
+
margin: 0;
|
|
48
|
+
color: #222;
|
|
49
|
+
letter-spacing: 1px;
|
|
50
|
+
}
|
|
51
|
+
.stat-date-range {
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
justify-content: flex-end;
|
|
55
|
+
font-size: 0.92rem;
|
|
56
|
+
color: #b0b3b8;
|
|
57
|
+
font-weight: 400;
|
|
58
|
+
span {
|
|
59
|
+
margin-left: 4px;
|
|
60
|
+
font-size: 0.92rem;
|
|
61
|
+
color: #b0b3b8;
|
|
62
|
+
}
|
|
63
|
+
.van-icon {
|
|
64
|
+
font-size: 1rem;
|
|
65
|
+
color: #b0b3b8;
|
|
66
|
+
margin-right: 2px;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
.van-row:nth-child(2) {
|
|
71
|
+
margin-top: 8px;
|
|
72
|
+
// 统计卡片间距由gutter控制
|
|
73
|
+
.van-col {
|
|
74
|
+
// 让卡片宽度自适应
|
|
75
|
+
.stat-card {
|
|
76
|
+
width: 100%;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
.stat-card {
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
align-items: center;
|
|
84
|
+
justify-content: center;
|
|
85
|
+
border-radius: 12px;
|
|
86
|
+
padding: 6px 0 4px 0; // 压缩高度
|
|
87
|
+
min-height: 44px; // 压缩高度
|
|
88
|
+
position: relative;
|
|
89
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
|
90
|
+
background: #f7f8fa;
|
|
91
|
+
.stat-num {
|
|
92
|
+
font-size: 1.08rem; // 缩小字体
|
|
93
|
+
font-weight: 600;
|
|
94
|
+
margin-bottom: 2px;
|
|
95
|
+
}
|
|
96
|
+
.stat-label {
|
|
97
|
+
font-size: 0.82rem; // 缩小字体
|
|
98
|
+
margin-bottom: 2px;
|
|
99
|
+
}
|
|
100
|
+
.stat-icon {
|
|
101
|
+
position: absolute;
|
|
102
|
+
top: 6px;
|
|
103
|
+
right: 8px;
|
|
104
|
+
font-size: 1rem;
|
|
105
|
+
opacity: 0.4;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
.stat-total {
|
|
109
|
+
background: #f0f5ff;
|
|
110
|
+
color: #2f54eb;
|
|
111
|
+
.stat-num,
|
|
112
|
+
.stat-label {
|
|
113
|
+
color: #2f54eb;
|
|
114
|
+
}
|
|
115
|
+
.stat-icon {
|
|
116
|
+
color: #2f54eb;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
.stat-done {
|
|
120
|
+
background: #e6fffb;
|
|
121
|
+
color: #13c2c2;
|
|
122
|
+
.stat-num,
|
|
123
|
+
.stat-label {
|
|
124
|
+
color: #13c2c2;
|
|
125
|
+
}
|
|
126
|
+
.stat-icon {
|
|
127
|
+
color: #13c2c2;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
.stat-processing {
|
|
131
|
+
background: #f9f0ff;
|
|
132
|
+
color: #b37feb;
|
|
133
|
+
.stat-num,
|
|
134
|
+
.stat-label {
|
|
135
|
+
color: #b37feb;
|
|
136
|
+
}
|
|
137
|
+
.stat-icon {
|
|
138
|
+
color: #b37feb;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
108
142
|
</style>
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import XFormGroup from '@af-mobile-client-vue3/components/data/XFormGroup/index.vue'
|
|
3
|
+
import XFormView from '@af-mobile-client-vue3/views/component/XFormView/index.vue'
|
|
3
4
|
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
|
|
4
5
|
import { showDialog } from 'vant'
|
|
5
6
|
import { ref } from 'vue'
|
|
6
7
|
import { useRoute } from 'vue-router'
|
|
7
8
|
|
|
8
9
|
// 纯表单
|
|
9
|
-
const configName = ref('
|
|
10
|
-
const serviceName = ref('af-
|
|
10
|
+
const configName = ref('appapplyuserinfoFormGroup')
|
|
11
|
+
const serviceName = ref('af-apply')
|
|
11
12
|
|
|
12
13
|
// const configName = ref("计划下发Form")
|
|
13
14
|
// const serviceName = ref("af-linepatrol")
|
|
@@ -21,11 +22,15 @@ const formGroup = ref(null)
|
|
|
21
22
|
const route = useRoute()
|
|
22
23
|
const isInit = ref(false)
|
|
23
24
|
function submit(_result) {
|
|
24
|
-
showDialog({ message: '提交成功' })
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
showDialog({ message: '提交成功' })
|
|
26
|
+
history.back()
|
|
27
|
+
}
|
|
28
|
+
const myXForm = ref([])
|
|
29
|
+
function setRef(value: any) {
|
|
30
|
+
console.log('myXForm', myXForm)
|
|
31
|
+
formGroup.value.setRef(myXForm.value)
|
|
32
|
+
console.log(formGroup)
|
|
27
33
|
}
|
|
28
|
-
|
|
29
34
|
// 表单组——数据
|
|
30
35
|
// function initComponents () {
|
|
31
36
|
// runLogic('getlngChargeAuditMobileFormGroupData', {id: 29}, 'af-gaslink').then((res) => {
|
|
@@ -68,7 +73,11 @@ function submit(_result) {
|
|
|
68
73
|
:group-form-data="formData"
|
|
69
74
|
mode="新增"
|
|
70
75
|
@submit="submit"
|
|
71
|
-
|
|
76
|
+
>
|
|
77
|
+
<!-- <template #device="{ setRef, removeRef, item, formData }">
|
|
78
|
+
<XFormView :setRef="setRef" :formGroupName="'myXForm'"/>
|
|
79
|
+
</template>-->
|
|
80
|
+
</XFormGroup>
|
|
72
81
|
</template>
|
|
73
82
|
</NormalDataLayout>
|
|
74
83
|
</template>
|
|
@@ -1,25 +1,90 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
+
// 组件顶部功能说明:本组件为表单视图,支持通过 setRef 注册自身到父组件
|
|
2
3
|
import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
4
|
+
import { runLogic } from '@af-mobile-client-vue3/services/api/common'
|
|
5
|
+
import { post } from '@af-mobile-client-vue3/services/restTools'
|
|
6
|
+
import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
|
|
7
|
+
import dayjs from 'dayjs/esm/index'
|
|
8
|
+
import { showFailToast, showToast } from 'vant'
|
|
9
|
+
import { computed, defineExpose, defineProps, onMounted, onUnmounted, ref } from 'vue'
|
|
10
|
+
import { useRoute } from 'vue-router'
|
|
5
11
|
|
|
6
|
-
const
|
|
7
|
-
|
|
12
|
+
const props = withDefaults(defineProps<{
|
|
13
|
+
setRef?: (refValue: any) => void
|
|
14
|
+
removeRef?: (refValue: any) => void
|
|
15
|
+
formGroupName?: string
|
|
16
|
+
}>(), {
|
|
17
|
+
setRef: () => {},
|
|
18
|
+
removeRef: () => {},
|
|
19
|
+
formGroupName: '',
|
|
20
|
+
})
|
|
21
|
+
const configName = ref('mobile_OtherChargeCancelForm')
|
|
22
|
+
const serviceName = ref('af-apply')
|
|
23
|
+
const route = useRoute()
|
|
24
|
+
const userInfo = useUserStore().getUserInfo()
|
|
25
|
+
const workflowId = computed(() => route.query.workflowid)
|
|
26
|
+
const formData = ref({})
|
|
8
27
|
|
|
9
|
-
const
|
|
28
|
+
const xFormRef = ref()
|
|
29
|
+
|
|
30
|
+
function submit(res: any) {
|
|
31
|
+
if (Number(res.charge_money) > Number(res.surplus_money)) {
|
|
32
|
+
showFailToast('收费金额不能大于未结金额!!')
|
|
33
|
+
return
|
|
34
|
+
}
|
|
35
|
+
const saveData = {
|
|
36
|
+
f_payment_type: res.payment_type,
|
|
37
|
+
f_charge_money: res.charge_money,
|
|
38
|
+
f_amount_words: res.amount_words,
|
|
39
|
+
f_payment_method: res.payment_method,
|
|
40
|
+
f_actual_date: res.actual_date,
|
|
41
|
+
f_charge_status: '有效',
|
|
42
|
+
f_workflow_id: workflowId.value,
|
|
43
|
+
f_charge_collectors: userInfo.f_operator,
|
|
44
|
+
f_charge_collectors_id: userInfo.f_operatorid,
|
|
45
|
+
f_charge_date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
46
|
+
f_filialeid: userInfo.f_orgid,
|
|
47
|
+
f_filiale: userInfo.f_orgname,
|
|
48
|
+
}
|
|
49
|
+
post('api/af-apply/entity/save/t_charge_record', saveData).then((_res) => {
|
|
50
|
+
showToast('提交成功!')
|
|
51
|
+
history.back()
|
|
52
|
+
})
|
|
53
|
+
}
|
|
54
|
+
function init() {
|
|
55
|
+
runLogic('getApplyBusinessrecode', { f_workflow_id: 854 }, 'af-apply').then((res) => {
|
|
56
|
+
formData.value = res
|
|
57
|
+
console.log('res==', res)
|
|
58
|
+
})
|
|
59
|
+
}
|
|
60
|
+
function validate() {
|
|
61
|
+
// 调用 XForm 的 validate 方法
|
|
62
|
+
return xFormRef.value?.validate?.() ?? Promise.resolve()
|
|
63
|
+
}
|
|
64
|
+
function getFormData() {
|
|
65
|
+
console.log('自定义表单=====', xFormRef.value.getFormData())
|
|
66
|
+
// 获取 XForm 的表单数据
|
|
67
|
+
return xFormRef.value?.getFormData?.() ?? {}
|
|
68
|
+
}
|
|
69
|
+
const exposeObj = { validate, getFormData, init, formGroupName: props.formGroupName }
|
|
70
|
+
defineExpose(exposeObj)
|
|
71
|
+
onMounted(() => {
|
|
72
|
+
props.setRef && props.setRef(exposeObj)
|
|
73
|
+
})
|
|
74
|
+
onUnmounted(() => {
|
|
75
|
+
props.removeRef && props.removeRef(exposeObj)
|
|
76
|
+
})
|
|
10
77
|
</script>
|
|
11
78
|
|
|
12
79
|
<template>
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
</template>
|
|
22
|
-
</NormalDataLayout>
|
|
80
|
+
<XForm
|
|
81
|
+
ref="xFormRef"
|
|
82
|
+
mode="新增"
|
|
83
|
+
:config-name="configName"
|
|
84
|
+
:service-name="serviceName"
|
|
85
|
+
:form-data="formData"
|
|
86
|
+
@on-submit="submit"
|
|
87
|
+
/>
|
|
23
88
|
</template>
|
|
24
89
|
|
|
25
90
|
<style scoped lang="less">
|
package/vite.config.ts
CHANGED
|
@@ -11,8 +11,8 @@ export default ({ mode }: ConfigEnv): UserConfig => {
|
|
|
11
11
|
|
|
12
12
|
const appProxys = {}
|
|
13
13
|
|
|
14
|
-
const v4Server = 'http://
|
|
15
|
-
const v3Server = '
|
|
14
|
+
const v4Server = 'http://192.168.50.67:31577'
|
|
15
|
+
const v3Server = 'https://wkf.qhgas.com'
|
|
16
16
|
const OSSServerDev = 'http://192.168.50.67:30351'
|
|
17
17
|
const geoserver = 'http://39.104.49.8:30372'
|
|
18
18
|
// const OSSServerProd = 'http://192.168.50.67:31351'
|