af-mobile-client-vue3 1.3.73 → 1.3.74
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 +5 -3
- package/src/components/data/XFormGroup/doc/DeviceForm.vue +1 -1
- package/src/components/data/XFormGroup/doc/UserForm.vue +1 -1
- 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 +8 -10
- package/src/views/component/XFormGroupView/index.vue +8 -21
- package/src/views/component/XFormView/index.vue +17 -4
- package/vite.config.ts +1 -1
- package/src/stores/modules/homeApp/README.md +0 -124
- package/src/utils/timeUtil.ts +0 -29
package/package.json
CHANGED
|
@@ -838,7 +838,7 @@ function handleCheckboxChange(item: any, checked: boolean) {
|
|
|
838
838
|
<div v-for="(column) in mainColumns" :key="`main_${column.dataIndex}`" class="main-title">
|
|
839
839
|
<p
|
|
840
840
|
class="card_item_title"
|
|
841
|
-
:style="handleFunctionStyle(column.
|
|
841
|
+
:style="handleFunctionStyle(column.styleFunctionForTitle, item)"
|
|
842
842
|
:class="{ 'selectable-title': isMultiSelectMode }"
|
|
843
843
|
@click="handleTitleClick(item, $event)"
|
|
844
844
|
>
|
|
@@ -854,7 +854,7 @@ function handleCheckboxChange(item: any, checked: boolean) {
|
|
|
854
854
|
<div v-for="(column) in subTitleColumns" :key="`subtitle_${column.dataIndex}`" class="sub-title">
|
|
855
855
|
<p
|
|
856
856
|
class="card_item_subtitle"
|
|
857
|
-
:style="handleFunctionStyle(column.
|
|
857
|
+
:style="handleFunctionStyle(column.styleFunctionForTitle, item)"
|
|
858
858
|
>
|
|
859
859
|
<XBadge
|
|
860
860
|
:style="handleFunctionStyle(column.styleFunctionForValue, item)"
|
|
@@ -882,7 +882,9 @@ function handleCheckboxChange(item: any, checked: boolean) {
|
|
|
882
882
|
<VanRow gutter="20" class="card_item_details" @click="handleCardClick(item, $event)">
|
|
883
883
|
<VanCol v-for="column of detailColumns" :key="`details_${column.dataIndex}`" :span="column.span">
|
|
884
884
|
<p>
|
|
885
|
-
|
|
885
|
+
<span :style="handleFunctionStyle(column.styleFunctionForTitle, item)">
|
|
886
|
+
{{ (column.showLabel === undefined || column.showLabel) ? `${column.title}: ` : '' }}
|
|
887
|
+
</span>
|
|
886
888
|
<XBadge
|
|
887
889
|
:style="handleFunctionStyle(column.styleFunctionForValue, item)"
|
|
888
890
|
:dict-name="column.dictName"
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { onMounted, ref } from 'vue'
|
|
3
|
-
import XReport from './XReport.vue'
|
|
4
|
-
|
|
5
|
-
const mainRef = ref()
|
|
6
|
-
|
|
7
|
-
onMounted(() => {
|
|
8
|
-
// 初始化逻辑
|
|
9
|
-
})
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
<template>
|
|
13
|
-
<div id="test">
|
|
14
|
-
<van-card :bordered="false">
|
|
15
|
-
<XReport
|
|
16
|
-
ref="mainRef"
|
|
17
|
-
:use-oss-for-img="false"
|
|
18
|
-
config-name="nurseWorkstationCover"
|
|
19
|
-
server-name="af-his"
|
|
20
|
-
:show-img-in-cell="true"
|
|
21
|
-
:display-only="true"
|
|
22
|
-
:edit-mode="false"
|
|
23
|
-
:show-save-button="false"
|
|
24
|
-
:no-padding="true"
|
|
25
|
-
:dont-format="true"
|
|
26
|
-
/>
|
|
27
|
-
</van-card>
|
|
28
|
-
</div>
|
|
29
|
-
</template>
|
|
30
|
-
|
|
31
|
-
<style scoped>
|
|
32
|
-
|
|
33
|
-
</style>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { onMounted, ref } from 'vue'
|
|
3
|
+
import XReport from './XReport.vue'
|
|
4
|
+
|
|
5
|
+
const mainRef = ref()
|
|
6
|
+
|
|
7
|
+
onMounted(() => {
|
|
8
|
+
// 初始化逻辑
|
|
9
|
+
})
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<template>
|
|
13
|
+
<div id="test">
|
|
14
|
+
<van-card :bordered="false">
|
|
15
|
+
<XReport
|
|
16
|
+
ref="mainRef"
|
|
17
|
+
:use-oss-for-img="false"
|
|
18
|
+
config-name="nurseWorkstationCover"
|
|
19
|
+
server-name="af-his"
|
|
20
|
+
:show-img-in-cell="true"
|
|
21
|
+
:display-only="true"
|
|
22
|
+
:edit-mode="false"
|
|
23
|
+
:show-save-button="false"
|
|
24
|
+
:no-padding="true"
|
|
25
|
+
:dont-format="true"
|
|
26
|
+
/>
|
|
27
|
+
</van-card>
|
|
28
|
+
</div>
|
|
29
|
+
</template>
|
|
30
|
+
|
|
31
|
+
<style scoped>
|
|
32
|
+
|
|
33
|
+
</style>
|
|
@@ -1,184 +1,184 @@
|
|
|
1
|
-
// print.js
|
|
2
|
-
|
|
3
|
-
export function printElement(elementToPrint) {
|
|
4
|
-
// 创建一个新的浏览器窗口
|
|
5
|
-
const printWindow = window.open('', '_blank', 'height=1024,width=768')
|
|
6
|
-
// 设置新窗口的文档内容
|
|
7
|
-
printWindow.document.write(`
|
|
8
|
-
<html>
|
|
9
|
-
<head>
|
|
10
|
-
<title>Print</title>
|
|
11
|
-
<style>
|
|
12
|
-
@page {
|
|
13
|
-
size: auto;
|
|
14
|
-
margin: 0mm;
|
|
15
|
-
}
|
|
16
|
-
html, body {
|
|
17
|
-
margin: 0;
|
|
18
|
-
padding: 0;
|
|
19
|
-
width: 100%;
|
|
20
|
-
height: 100%;
|
|
21
|
-
}
|
|
22
|
-
#print-container {
|
|
23
|
-
display: none
|
|
24
|
-
}
|
|
25
|
-
.img{
|
|
26
|
-
width: 95%;
|
|
27
|
-
height: 180px;
|
|
28
|
-
object-fit: cover;
|
|
29
|
-
}
|
|
30
|
-
.reportMain {
|
|
31
|
-
text-align: center;
|
|
32
|
-
margin: 0 auto;
|
|
33
|
-
font-size: 16px;
|
|
34
|
-
color: #000;
|
|
35
|
-
background-color: #fff;
|
|
36
|
-
border-radius: 8px;
|
|
37
|
-
|
|
38
|
-
.reportTitle {
|
|
39
|
-
font-weight: bold;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.subTitle {
|
|
43
|
-
display: flex;
|
|
44
|
-
justify-content: space-between;
|
|
45
|
-
margin-bottom: 1%;
|
|
46
|
-
|
|
47
|
-
.subTitleItems {
|
|
48
|
-
max-width: 30%;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.inputsDiv {
|
|
53
|
-
display: flex;
|
|
54
|
-
justify-content: space-between;
|
|
55
|
-
.inputsDivItem {
|
|
56
|
-
display: flex;
|
|
57
|
-
align-items: center;
|
|
58
|
-
padding: 0 4px;
|
|
59
|
-
white-space: nowrap;
|
|
60
|
-
.inputsDivItemLabel {
|
|
61
|
-
padding: 0 4px;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.reportTable {
|
|
67
|
-
width: 100%;
|
|
68
|
-
border-collapse: collapse;
|
|
69
|
-
table-layout:fixed;
|
|
70
|
-
word-break:break-all;
|
|
71
|
-
text-align: center;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
.reportMainForDisplay {
|
|
75
|
-
text-align: center;
|
|
76
|
-
margin: 10% auto;
|
|
77
|
-
font-size: 16px;
|
|
78
|
-
color: #000;
|
|
79
|
-
background-color: #fff;
|
|
80
|
-
border-radius: 8px;
|
|
81
|
-
|
|
82
|
-
.reportTitle {
|
|
83
|
-
font-weight: bold;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.subTitle {
|
|
87
|
-
display: flex;
|
|
88
|
-
justify-content: space-between;
|
|
89
|
-
|
|
90
|
-
.subTitleItems {
|
|
91
|
-
max-width: 30%;
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.inputsDiv {
|
|
96
|
-
display: flex;
|
|
97
|
-
justify-content: space-around;
|
|
98
|
-
.inputsDivItem {
|
|
99
|
-
display: flex;
|
|
100
|
-
align-items: center;
|
|
101
|
-
padding: 0 4px;
|
|
102
|
-
white-space: nowrap;
|
|
103
|
-
.inputsDivItemLabel {
|
|
104
|
-
padding: 0 4px;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.reportTable {
|
|
110
|
-
width: 100%;
|
|
111
|
-
border-collapse: collapse;
|
|
112
|
-
table-layout:fixed;
|
|
113
|
-
word-break:break-all;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
.reportMainNoPadding {
|
|
117
|
-
text-align: center;
|
|
118
|
-
margin: 0 auto;
|
|
119
|
-
font-size: 16px;
|
|
120
|
-
color: #000;
|
|
121
|
-
background-color: #fff;
|
|
122
|
-
border-radius: 8px;
|
|
123
|
-
|
|
124
|
-
.reportTitle {
|
|
125
|
-
font-weight: bold;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.subTitle {
|
|
129
|
-
display: flex;
|
|
130
|
-
justify-content: space-between;
|
|
131
|
-
|
|
132
|
-
.subTitleItems {
|
|
133
|
-
max-width: 30%;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.inputsDiv {
|
|
138
|
-
display: flex;
|
|
139
|
-
justify-content: space-between;
|
|
140
|
-
.inputsDivItem {
|
|
141
|
-
display: flex;
|
|
142
|
-
align-items: center;
|
|
143
|
-
padding: 0 4px;
|
|
144
|
-
white-space: nowrap;
|
|
145
|
-
.inputsDivItemLabel {
|
|
146
|
-
padding: 0 4px;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.reportTable {
|
|
152
|
-
width: 100%;
|
|
153
|
-
border-collapse: collapse;
|
|
154
|
-
table-layout:fixed;
|
|
155
|
-
word-break:break-all;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
.tools{
|
|
159
|
-
position: fixed;
|
|
160
|
-
right: 2%;
|
|
161
|
-
text-align: right;
|
|
162
|
-
width: 60%;
|
|
163
|
-
cursor: pointer;
|
|
164
|
-
.toolsItem{
|
|
165
|
-
width: 15%;
|
|
166
|
-
margin-right: 3%;
|
|
167
|
-
display: inline-block;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
</style>
|
|
171
|
-
</head>
|
|
172
|
-
<body>
|
|
173
|
-
<!-- 将需要打印的元素内容复制到新窗口中 -->
|
|
174
|
-
${elementToPrint.innerHTML}
|
|
175
|
-
</body>
|
|
176
|
-
</html>
|
|
177
|
-
`)
|
|
178
|
-
// 延迟执行打印,以确保新窗口的内容已加载完成
|
|
179
|
-
printWindow.document.close() // 关闭文档流,确保内容完全加载
|
|
180
|
-
setTimeout(() => {
|
|
181
|
-
printWindow.print() // 调用打印方法
|
|
182
|
-
printWindow.close()
|
|
183
|
-
}, 500) // 延迟500毫秒后执行打印
|
|
184
|
-
}
|
|
1
|
+
// print.js
|
|
2
|
+
|
|
3
|
+
export function printElement(elementToPrint) {
|
|
4
|
+
// 创建一个新的浏览器窗口
|
|
5
|
+
const printWindow = window.open('', '_blank', 'height=1024,width=768')
|
|
6
|
+
// 设置新窗口的文档内容
|
|
7
|
+
printWindow.document.write(`
|
|
8
|
+
<html>
|
|
9
|
+
<head>
|
|
10
|
+
<title>Print</title>
|
|
11
|
+
<style>
|
|
12
|
+
@page {
|
|
13
|
+
size: auto;
|
|
14
|
+
margin: 0mm;
|
|
15
|
+
}
|
|
16
|
+
html, body {
|
|
17
|
+
margin: 0;
|
|
18
|
+
padding: 0;
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: 100%;
|
|
21
|
+
}
|
|
22
|
+
#print-container {
|
|
23
|
+
display: none
|
|
24
|
+
}
|
|
25
|
+
.img{
|
|
26
|
+
width: 95%;
|
|
27
|
+
height: 180px;
|
|
28
|
+
object-fit: cover;
|
|
29
|
+
}
|
|
30
|
+
.reportMain {
|
|
31
|
+
text-align: center;
|
|
32
|
+
margin: 0 auto;
|
|
33
|
+
font-size: 16px;
|
|
34
|
+
color: #000;
|
|
35
|
+
background-color: #fff;
|
|
36
|
+
border-radius: 8px;
|
|
37
|
+
|
|
38
|
+
.reportTitle {
|
|
39
|
+
font-weight: bold;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.subTitle {
|
|
43
|
+
display: flex;
|
|
44
|
+
justify-content: space-between;
|
|
45
|
+
margin-bottom: 1%;
|
|
46
|
+
|
|
47
|
+
.subTitleItems {
|
|
48
|
+
max-width: 30%;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.inputsDiv {
|
|
53
|
+
display: flex;
|
|
54
|
+
justify-content: space-between;
|
|
55
|
+
.inputsDivItem {
|
|
56
|
+
display: flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
padding: 0 4px;
|
|
59
|
+
white-space: nowrap;
|
|
60
|
+
.inputsDivItemLabel {
|
|
61
|
+
padding: 0 4px;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.reportTable {
|
|
67
|
+
width: 100%;
|
|
68
|
+
border-collapse: collapse;
|
|
69
|
+
table-layout:fixed;
|
|
70
|
+
word-break:break-all;
|
|
71
|
+
text-align: center;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
.reportMainForDisplay {
|
|
75
|
+
text-align: center;
|
|
76
|
+
margin: 10% auto;
|
|
77
|
+
font-size: 16px;
|
|
78
|
+
color: #000;
|
|
79
|
+
background-color: #fff;
|
|
80
|
+
border-radius: 8px;
|
|
81
|
+
|
|
82
|
+
.reportTitle {
|
|
83
|
+
font-weight: bold;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.subTitle {
|
|
87
|
+
display: flex;
|
|
88
|
+
justify-content: space-between;
|
|
89
|
+
|
|
90
|
+
.subTitleItems {
|
|
91
|
+
max-width: 30%;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.inputsDiv {
|
|
96
|
+
display: flex;
|
|
97
|
+
justify-content: space-around;
|
|
98
|
+
.inputsDivItem {
|
|
99
|
+
display: flex;
|
|
100
|
+
align-items: center;
|
|
101
|
+
padding: 0 4px;
|
|
102
|
+
white-space: nowrap;
|
|
103
|
+
.inputsDivItemLabel {
|
|
104
|
+
padding: 0 4px;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.reportTable {
|
|
110
|
+
width: 100%;
|
|
111
|
+
border-collapse: collapse;
|
|
112
|
+
table-layout:fixed;
|
|
113
|
+
word-break:break-all;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
.reportMainNoPadding {
|
|
117
|
+
text-align: center;
|
|
118
|
+
margin: 0 auto;
|
|
119
|
+
font-size: 16px;
|
|
120
|
+
color: #000;
|
|
121
|
+
background-color: #fff;
|
|
122
|
+
border-radius: 8px;
|
|
123
|
+
|
|
124
|
+
.reportTitle {
|
|
125
|
+
font-weight: bold;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.subTitle {
|
|
129
|
+
display: flex;
|
|
130
|
+
justify-content: space-between;
|
|
131
|
+
|
|
132
|
+
.subTitleItems {
|
|
133
|
+
max-width: 30%;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.inputsDiv {
|
|
138
|
+
display: flex;
|
|
139
|
+
justify-content: space-between;
|
|
140
|
+
.inputsDivItem {
|
|
141
|
+
display: flex;
|
|
142
|
+
align-items: center;
|
|
143
|
+
padding: 0 4px;
|
|
144
|
+
white-space: nowrap;
|
|
145
|
+
.inputsDivItemLabel {
|
|
146
|
+
padding: 0 4px;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.reportTable {
|
|
152
|
+
width: 100%;
|
|
153
|
+
border-collapse: collapse;
|
|
154
|
+
table-layout:fixed;
|
|
155
|
+
word-break:break-all;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
.tools{
|
|
159
|
+
position: fixed;
|
|
160
|
+
right: 2%;
|
|
161
|
+
text-align: right;
|
|
162
|
+
width: 60%;
|
|
163
|
+
cursor: pointer;
|
|
164
|
+
.toolsItem{
|
|
165
|
+
width: 15%;
|
|
166
|
+
margin-right: 3%;
|
|
167
|
+
display: inline-block;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
</style>
|
|
171
|
+
</head>
|
|
172
|
+
<body>
|
|
173
|
+
<!-- 将需要打印的元素内容复制到新窗口中 -->
|
|
174
|
+
${elementToPrint.innerHTML}
|
|
175
|
+
</body>
|
|
176
|
+
</html>
|
|
177
|
+
`)
|
|
178
|
+
// 延迟执行打印,以确保新窗口的内容已加载完成
|
|
179
|
+
printWindow.document.close() // 关闭文档流,确保内容完全加载
|
|
180
|
+
setTimeout(() => {
|
|
181
|
+
printWindow.print() // 调用打印方法
|
|
182
|
+
printWindow.close()
|
|
183
|
+
}, 500) // 延迟500毫秒后执行打印
|
|
184
|
+
}
|
|
@@ -9,10 +9,10 @@ const emit = defineEmits(['deleteRow'])
|
|
|
9
9
|
// 访问路由
|
|
10
10
|
const router = useRouter()
|
|
11
11
|
// 获取默认值
|
|
12
|
-
const idKey = ref('o_id')
|
|
12
|
+
// const idKey = ref('o_id')
|
|
13
13
|
|
|
14
14
|
// 简易crud表单测试
|
|
15
|
-
const configName = ref('
|
|
15
|
+
const configName = ref('ceshiCRUD')
|
|
16
16
|
const serviceName = ref('af-safecheck')
|
|
17
17
|
|
|
18
18
|
// 资源权限测试
|
|
@@ -84,12 +84,12 @@ const serviceName = ref('af-safecheck')
|
|
|
84
84
|
// }
|
|
85
85
|
|
|
86
86
|
// 删除功能
|
|
87
|
-
function deleteRow(result) {
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
const fixQueryForm = ref({
|
|
91
|
-
|
|
92
|
-
})
|
|
87
|
+
// function deleteRow(result) {
|
|
88
|
+
// emit('deleteRow', result.o_id)
|
|
89
|
+
// }
|
|
90
|
+
// const fixQueryForm = ref({
|
|
91
|
+
// f_operator_id: '487184754014158848',
|
|
92
|
+
// })
|
|
93
93
|
</script>
|
|
94
94
|
|
|
95
95
|
<template>
|
|
@@ -98,8 +98,6 @@ const fixQueryForm = ref({
|
|
|
98
98
|
<XCellList
|
|
99
99
|
:config-name="configName"
|
|
100
100
|
:service-name="serviceName"
|
|
101
|
-
:fix-query-form="fixQueryForm"
|
|
102
|
-
@delete-row="deleteRow"
|
|
103
101
|
/>
|
|
104
102
|
</template>
|
|
105
103
|
</NormalDataLayout>
|
|
@@ -6,8 +6,8 @@ import { ref } from 'vue'
|
|
|
6
6
|
import { useRoute } from 'vue-router'
|
|
7
7
|
|
|
8
8
|
// 纯表单
|
|
9
|
-
const configName = ref('
|
|
10
|
-
const serviceName = ref('af-
|
|
9
|
+
const configName = ref('form_check_test')
|
|
10
|
+
const serviceName = ref('af-system')
|
|
11
11
|
|
|
12
12
|
// const configName = ref("计划下发Form")
|
|
13
13
|
// const serviceName = ref("af-linepatrol")
|
|
@@ -16,20 +16,16 @@ const serviceName = ref('af-apply')
|
|
|
16
16
|
// const configName = ref('lngChargeAuditMobileFormGroup')
|
|
17
17
|
// const serviceName = ref('af-gaslink')
|
|
18
18
|
|
|
19
|
-
const formData = ref({
|
|
19
|
+
const formData = ref({})
|
|
20
20
|
const formGroup = ref(null)
|
|
21
21
|
const route = useRoute()
|
|
22
22
|
const isInit = ref(false)
|
|
23
23
|
function submit(_result) {
|
|
24
|
-
showDialog({ message: '提交成功' })
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
const myXForm = ref([])
|
|
28
|
-
function setRef(value: any) {
|
|
29
|
-
console.log('myXForm', myXForm)
|
|
30
|
-
formGroup.value.setRef(myXForm.value)
|
|
31
|
-
console.log(formGroup)
|
|
24
|
+
showDialog({ message: '提交成功' }).then(() => {
|
|
25
|
+
history.back()
|
|
26
|
+
})
|
|
32
27
|
}
|
|
28
|
+
|
|
33
29
|
// 表单组——数据
|
|
34
30
|
// function initComponents () {
|
|
35
31
|
// runLogic('getlngChargeAuditMobileFormGroupData', {id: 29}, 'af-gaslink').then((res) => {
|
|
@@ -59,16 +55,11 @@ function setRef(value: any) {
|
|
|
59
55
|
// onBeforeMount(() => {
|
|
60
56
|
// initComponents()
|
|
61
57
|
// })
|
|
62
|
-
function a() {
|
|
63
|
-
}
|
|
64
58
|
</script>
|
|
65
59
|
|
|
66
60
|
<template>
|
|
67
61
|
<NormalDataLayout id="XFormGroupView" title="纯表单">
|
|
68
62
|
<template #layout_content>
|
|
69
|
-
<button @click="a">
|
|
70
|
-
修改
|
|
71
|
-
</button>
|
|
72
63
|
<!-- v-if="isInit" -->
|
|
73
64
|
<XFormGroup
|
|
74
65
|
ref="formGroup"
|
|
@@ -77,11 +68,7 @@ function a() {
|
|
|
77
68
|
:group-form-data="formData"
|
|
78
69
|
mode="新增"
|
|
79
70
|
@submit="submit"
|
|
80
|
-
|
|
81
|
-
<!-- <template #device="{ setRef, removeRef, item, formData }">
|
|
82
|
-
<XFormView :setRef="setRef" :formGroupName="'myXForm'"/>
|
|
83
|
-
</template> -->
|
|
84
|
-
</XFormGroup>
|
|
71
|
+
/>
|
|
85
72
|
</template>
|
|
86
73
|
</NormalDataLayout>
|
|
87
74
|
</template>
|
|
@@ -3,10 +3,22 @@ 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('ceshiForm')
|
|
7
|
+
const serviceName = ref('af-system')
|
|
8
8
|
|
|
9
9
|
const formGroupAddConstruction = ref(null)
|
|
10
|
+
const formData = ref({
|
|
11
|
+
'YYYY': '2025-09-08 16:03:22',
|
|
12
|
+
'YYYY-MM': '2025-09-08 16:03:22',
|
|
13
|
+
'YYYY-MM-DD': '2025-09-08 16:03:22',
|
|
14
|
+
'YYYY-MM-DDHH': '2025-09-08 16:03:22',
|
|
15
|
+
'YYYY-MM-DDHHMM': '2025-09-08 16:03:22',
|
|
16
|
+
'YYYY-MM-DDHHMMSS': '2025-09-08 16:03:22',
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
function onSubmit(data: any) {
|
|
20
|
+
console.warn('提交表单', data)
|
|
21
|
+
}
|
|
10
22
|
</script>
|
|
11
23
|
|
|
12
24
|
<template>
|
|
@@ -14,10 +26,11 @@ const formGroupAddConstruction = ref(null)
|
|
|
14
26
|
<template #layout_content>
|
|
15
27
|
<XForm
|
|
16
28
|
ref="formGroupAddConstruction"
|
|
17
|
-
mode="
|
|
29
|
+
mode="修改"
|
|
18
30
|
:config-name="configName"
|
|
19
31
|
:service-name="serviceName"
|
|
20
|
-
:form-
|
|
32
|
+
:form-data="formData"
|
|
33
|
+
@on-submit="onSubmit"
|
|
21
34
|
/>
|
|
22
35
|
</template>
|
|
23
36
|
</NormalDataLayout>
|
package/vite.config.ts
CHANGED
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
# HomeApp Store 使用说明
|
|
2
|
-
|
|
3
|
-
## 概述
|
|
4
|
-
`useHomeAppStore` 是一个专门用于管理首页应用列表的 Pinia store,与 `useSettingStore` 配合使用。
|
|
5
|
-
|
|
6
|
-
## 特性
|
|
7
|
-
- 独立管理 `homeAppList` 数据
|
|
8
|
-
- 提供完整的 CRUD 操作
|
|
9
|
-
- 与 setting store 自动同步数据
|
|
10
|
-
- 支持类型安全的 TypeScript 接口
|
|
11
|
-
|
|
12
|
-
## 基本使用
|
|
13
|
-
|
|
14
|
-
### 1. 导入和使用
|
|
15
|
-
```typescript
|
|
16
|
-
import { useHomeAppStore } from '@/stores'
|
|
17
|
-
|
|
18
|
-
const homeAppStore = useHomeAppStore()
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
### 2. 获取应用列表
|
|
22
|
-
```typescript
|
|
23
|
-
// 获取所有应用
|
|
24
|
-
const apps = homeAppStore.getHomeAppList()
|
|
25
|
-
|
|
26
|
-
// 直接访问响应式数据
|
|
27
|
-
const apps = homeAppStore.homeAppList
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
### 3. 添加应用
|
|
31
|
-
```typescript
|
|
32
|
-
homeAppStore.addHomeApp({
|
|
33
|
-
id: 'new-app',
|
|
34
|
-
name: '新应用',
|
|
35
|
-
icon: '/icon.png',
|
|
36
|
-
url: 'https://example.com',
|
|
37
|
-
description: '应用描述'
|
|
38
|
-
})
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### 4. 更新应用
|
|
42
|
-
```typescript
|
|
43
|
-
homeAppStore.updateHomeApp('app-id', {
|
|
44
|
-
name: '更新后的名称',
|
|
45
|
-
description: '新的描述'
|
|
46
|
-
})
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### 5. 删除应用
|
|
50
|
-
```typescript
|
|
51
|
-
homeAppStore.removeHomeApp('app-id')
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
### 6. 清空列表
|
|
55
|
-
```typescript
|
|
56
|
-
homeAppStore.clearHomeAppList()
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
## 数据同步
|
|
60
|
-
|
|
61
|
-
### 自动同步
|
|
62
|
-
- 当 `useSettingStore.init()` 被调用时,`homeAppList` 会自动同步到 `useHomeAppStore`
|
|
63
|
-
- 无需手动同步,数据会自动保持一致
|
|
64
|
-
|
|
65
|
-
### 手动同步
|
|
66
|
-
```typescript
|
|
67
|
-
import { useSettingStore, useHomeAppStore } from '@/stores'
|
|
68
|
-
|
|
69
|
-
const settingStore = useSettingStore()
|
|
70
|
-
const homeAppStore = useHomeAppStore()
|
|
71
|
-
|
|
72
|
-
// 手动同步数据
|
|
73
|
-
homeAppStore.setHomeAppList(settingStore.getSetting()?.homeAppList || [])
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
## 在组件中使用
|
|
77
|
-
|
|
78
|
-
### Vue 组件示例
|
|
79
|
-
```vue
|
|
80
|
-
<template>
|
|
81
|
-
<div class="home-apps">
|
|
82
|
-
<div
|
|
83
|
-
v-for="app in homeAppStore.homeAppList"
|
|
84
|
-
:key="app.id"
|
|
85
|
-
class="app-item"
|
|
86
|
-
@click="openApp(app)"
|
|
87
|
-
>
|
|
88
|
-
<img :src="app.icon" :alt="app.name" />
|
|
89
|
-
<span>{{ app.name }}</span>
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
</template>
|
|
93
|
-
|
|
94
|
-
<script setup lang="ts">
|
|
95
|
-
import { useHomeAppStore } from '@/stores'
|
|
96
|
-
|
|
97
|
-
const homeAppStore = useHomeAppStore()
|
|
98
|
-
|
|
99
|
-
function openApp(app) {
|
|
100
|
-
// 处理应用点击
|
|
101
|
-
window.open(app.url, '_blank')
|
|
102
|
-
}
|
|
103
|
-
</script>
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
## 注意事项
|
|
107
|
-
|
|
108
|
-
1. **初始化顺序**:确保先调用 `useSettingStore.init()`,再使用 `useHomeAppStore`
|
|
109
|
-
2. **数据一致性**:两个 store 中的数据会自动保持同步
|
|
110
|
-
3. **类型安全**:使用 TypeScript 接口确保类型安全
|
|
111
|
-
4. **响应式**:所有数据都是响应式的,可以直接在模板中使用
|
|
112
|
-
|
|
113
|
-
## 接口定义
|
|
114
|
-
|
|
115
|
-
```typescript
|
|
116
|
-
export interface HomeApp {
|
|
117
|
-
id: string // 应用唯一标识
|
|
118
|
-
name: string // 应用名称
|
|
119
|
-
icon: string // 应用图标
|
|
120
|
-
url: string // 应用链接
|
|
121
|
-
description?: string // 应用描述(可选)
|
|
122
|
-
[key: string]: any // 其他属性
|
|
123
|
-
}
|
|
124
|
-
```
|
package/src/utils/timeUtil.ts
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
// 时间工具:提供简单的日期时间格式化
|
|
2
|
-
|
|
3
|
-
export function pad2(num: number): string {
|
|
4
|
-
return num < 10 ? `0${num}` : `${num}`
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* 按照简单占位符格式化当前时间
|
|
9
|
-
* 支持占位:YYYY MM DD HH mm ss
|
|
10
|
-
* @param format 默认 'YYYY-MM-DD HH:mm:ss'
|
|
11
|
-
*/
|
|
12
|
-
export function formatNow(format: string = 'YYYY-MM-DD HH:mm:ss'): string {
|
|
13
|
-
const d = new Date()
|
|
14
|
-
const map: Record<string, string> = {
|
|
15
|
-
YYYY: `${d.getFullYear()}`,
|
|
16
|
-
MM: pad2(d.getMonth() + 1),
|
|
17
|
-
DD: pad2(d.getDate()),
|
|
18
|
-
HH: pad2(d.getHours()),
|
|
19
|
-
mm: pad2(d.getMinutes()),
|
|
20
|
-
ss: pad2(d.getSeconds()),
|
|
21
|
-
}
|
|
22
|
-
let out = format
|
|
23
|
-
Object.keys(map).forEach((k) => {
|
|
24
|
-
out = out.replace(new RegExp(k, 'g'), map[k])
|
|
25
|
-
})
|
|
26
|
-
return out
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|