jobsys-explore 4.6.0 → 4.6.2

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.
Files changed (187) hide show
  1. package/.changeset/{dry-feet-float.md → hip-hounds-drop.md} +1 -1
  2. package/.changeset/{blue-spiders-roll.md → hip-spoons-smell.md} +1 -1
  3. package/.changeset/{khaki-cobras-bathe.md → odd-ghosts-walk.md} +1 -1
  4. package/.changeset/{cyan-monkeys-draw.md → orange-trees-film.md} +1 -1
  5. package/.changeset/tall-trainers-sin.md +5 -0
  6. package/.eslintignore +3 -3
  7. package/CHANGELOG.md +22 -33
  8. package/README.md +41 -41
  9. package/TODOs.md +8 -8
  10. package/business-components/survey/ExSurvey.jsx +193 -193
  11. package/business-components/survey/index.js +5 -5
  12. package/business-components/survey/index.less +36 -36
  13. package/components/button/ExButton.jsx +120 -120
  14. package/components/button/index.js +4 -4
  15. package/components/button/index.less +7 -7
  16. package/components/decorator/ExDecorator.jsx +31 -31
  17. package/components/decorator/index.js +5 -5
  18. package/components/decorator/index.less +76 -76
  19. package/components/form/ExAddress.jsx +195 -195
  20. package/components/form/ExCascader.jsx +166 -166
  21. package/components/form/ExCheckbox.jsx +59 -59
  22. package/components/form/ExDate.jsx +143 -143
  23. package/components/form/ExDatetime.jsx +166 -166
  24. package/components/form/ExField.jsx +138 -138
  25. package/components/form/ExFieldUploader.jsx +50 -50
  26. package/components/form/ExForm.jsx +506 -506
  27. package/components/form/ExMatrixCheckbox.jsx +99 -99
  28. package/components/form/ExMatrixRadio.jsx +86 -86
  29. package/components/form/ExMatrixScale.jsx +97 -97
  30. package/components/form/ExNumber.jsx +51 -51
  31. package/components/form/ExRadio.jsx +58 -58
  32. package/components/form/ExRate.jsx +51 -51
  33. package/components/form/ExSelect.jsx +248 -248
  34. package/components/form/ExSlider.jsx +55 -55
  35. package/components/form/ExSwitch.jsx +51 -51
  36. package/components/form/ExTime.jsx +99 -99
  37. package/components/form/FormItem.jsx +307 -307
  38. package/components/form/PickerWrapper.jsx +120 -120
  39. package/components/form/index.js +46 -46
  40. package/components/form/index.less +178 -178
  41. package/components/form/utils.js +62 -62
  42. package/components/grid/ExGrid.jsx +53 -53
  43. package/components/grid/index.js +4 -4
  44. package/components/grid/index.less +2 -2
  45. package/components/index.js +12 -12
  46. package/components/pagination/ExPagination.jsx +300 -375
  47. package/components/pagination/index.js +5 -5
  48. package/components/pagination/index.less +3 -3
  49. package/components/provider/ExProvider.jsx +173 -173
  50. package/components/qrcode/ExQrcode.jsx +86 -86
  51. package/components/qrcode/index.js +5 -5
  52. package/components/qrcode/index.less +8 -8
  53. package/components/result/ExResult.jsx +122 -122
  54. package/components/result/index.js +5 -5
  55. package/components/result/index.less +59 -59
  56. package/components/search/ExSearch.jsx +290 -290
  57. package/components/search/components/Expand.jsx +77 -77
  58. package/components/search/components/Field.jsx +27 -27
  59. package/components/search/components/Quick.jsx +53 -53
  60. package/components/search/components/index.js +5 -5
  61. package/components/search/index.js +5 -5
  62. package/components/search/index.less +118 -118
  63. package/components/search/utils.js +30 -30
  64. package/components/sector/ExSector.jsx +52 -52
  65. package/components/sector/README.md +26 -26
  66. package/components/sector/index.js +5 -5
  67. package/components/sector/index.less +122 -122
  68. package/components/theme/ExTheme.jsx +10 -10
  69. package/components/theme/index.js +4 -4
  70. package/components/theme/index.less +98 -98
  71. package/components/uploader/ExUploader.jsx +269 -276
  72. package/components/uploader/index.js +5 -5
  73. package/components/utils.js +187 -187
  74. package/directives/auth.js +113 -113
  75. package/directives/index.js +4 -4
  76. package/dist/directives.cjs.map +1 -1
  77. package/dist/directives.js.map +1 -1
  78. package/dist/hooks.cjs +1 -1
  79. package/dist/hooks.cjs.map +1 -1
  80. package/dist/hooks.js +49 -36
  81. package/dist/hooks.js.map +1 -1
  82. package/dist/{cipher-df48bf6e.js → index-6bb3abf2.js} +274 -293
  83. package/dist/index-6bb3abf2.js.map +1 -0
  84. package/dist/index-ca50c51f.cjs +2 -0
  85. package/dist/index-ca50c51f.cjs.map +1 -0
  86. package/dist/jobsys-explore.cjs +6 -6
  87. package/dist/jobsys-explore.cjs.map +1 -1
  88. package/dist/jobsys-explore.js +1464 -1502
  89. package/dist/jobsys-explore.js.map +1 -1
  90. package/docgen.config.js +15 -15
  91. package/docs/.vuepress/.cache/deps/_metadata.json +52 -52
  92. package/docs/.vuepress/.cache/deps/lodash-es.js +8442 -8442
  93. package/docs/.vuepress/.cache/deps/lodash-es.js.map +7 -7
  94. package/docs/.vuepress/.temp/internal/clientConfigs.js +17 -17
  95. package/docs/.vuepress/.temp/internal/pagesComponents.js +24 -24
  96. package/docs/.vuepress/.temp/internal/pagesData.js +22 -22
  97. package/docs/.vuepress/.temp/internal/pagesRoutes.js +12 -12
  98. package/docs/.vuepress/.temp/internal/themeData.js +1 -1
  99. package/docs/.vuepress/.temp/pages/components/decorator/ExDecorator.html.js +1 -1
  100. package/docs/.vuepress/.temp/pages/components/decorator/ExDecorator.html.vue +37 -37
  101. package/docs/.vuepress/.temp/pages/components/sector/ExSector.html.js +1 -1
  102. package/docs/.vuepress/.temp/pages/components/sector/ExSector.html.vue +71 -71
  103. package/docs/.vuepress/.temp/styles/index.scss +1 -1
  104. package/docs/.vuepress/config.js +61 -61
  105. package/docs/.vuepress/dist/404.html +33 -33
  106. package/docs/.vuepress/dist/assets/404.html-a0ce2184.js +1 -1
  107. package/docs/.vuepress/dist/assets/ExButton.html-ad283101.js +1 -1
  108. package/docs/.vuepress/dist/assets/ExDecorator.html-42d09114.js +1 -1
  109. package/docs/.vuepress/dist/assets/ExDecorator.html-c82c5fe8.js +1 -1
  110. package/docs/.vuepress/dist/assets/ExForm.html-9e3f8000.js +1 -1
  111. package/docs/.vuepress/dist/assets/ExProvider.html-78fdc6cd.js +1 -1
  112. package/docs/.vuepress/dist/assets/ExSearch.html-103f6f34.js +1 -1
  113. package/docs/.vuepress/dist/assets/ExSector.html-a1e24c3a.js +7 -7
  114. package/docs/.vuepress/dist/assets/ExSector.html-cff3fefd.js +1 -1
  115. package/docs/.vuepress/dist/assets/ExUploader.html-8310e424.js +1 -1
  116. package/docs/.vuepress/dist/assets/app-29fe8d1e.js +10 -10
  117. package/docs/.vuepress/dist/assets/hooks.html-90ccbc1a.js +1 -1
  118. package/docs/.vuepress/dist/assets/index.html-85b79c97.js +43 -43
  119. package/docs/.vuepress/dist/assets/style-46d7e227.css +1 -1
  120. package/docs/.vuepress/dist/components/button/ExButton.html +33 -33
  121. package/docs/.vuepress/dist/components/decorator/ExDecorator.html +33 -33
  122. package/docs/.vuepress/dist/components/form/ExForm.html +33 -33
  123. package/docs/.vuepress/dist/components/provider/ExProvider.html +33 -33
  124. package/docs/.vuepress/dist/components/search/ExSearch.html +33 -33
  125. package/docs/.vuepress/dist/components/sector/ExSector.html +39 -39
  126. package/docs/.vuepress/dist/components/uploader/ExUploader.html +33 -33
  127. package/docs/.vuepress/dist/hooks.html +33 -33
  128. package/docs/.vuepress/dist/index.html +75 -75
  129. package/docs/.vuepress/styles/index.scss +7 -7
  130. package/docs/components/decorator/ExDecorator.md +14 -14
  131. package/docs/components/sector/ExSector.md +43 -43
  132. package/docs/index.md +82 -82
  133. package/hooks/cipher.js +44 -44
  134. package/hooks/datetime.js +69 -69
  135. package/hooks/form.js +188 -188
  136. package/hooks/utils.js +268 -274
  137. package/index.html +17 -17
  138. package/package.json +2 -2
  139. package/playground/App.vue +190 -190
  140. package/playground/TestButton.vue +61 -61
  141. package/playground/TestCascader.vue +2441 -2441
  142. package/playground/TestDecorator.vue +14 -14
  143. package/playground/TestForm.vue +441 -401
  144. package/playground/TestFormItem.vue +110 -110
  145. package/playground/TestGrid.vue +22 -22
  146. package/playground/TestPagination.vue +1240 -1243
  147. package/playground/TestQrcode.vue +7 -7
  148. package/playground/TestResult.vue +12 -12
  149. package/playground/TestSearch.vue +115 -115
  150. package/playground/TestSector.vue +15 -15
  151. package/playground/TestSurvey.vue +27 -27
  152. package/playground/TestUploader.vue +20 -14
  153. package/playground/main.js +22 -22
  154. package/utils/style.js +13 -13
  155. package/vite.config.js +54 -54
  156. package/.changeset/empty-mice-share.md +0 -5
  157. package/.changeset/famous-yaks-doubt.md +0 -5
  158. package/.changeset/five-fans-type.md +0 -5
  159. package/.changeset/funny-hats-drop.md +0 -5
  160. package/.changeset/khaki-forks-shave.md +0 -5
  161. package/.changeset/lazy-yaks-crash.md +0 -5
  162. package/.changeset/light-cycles-flow.md +0 -5
  163. package/.changeset/loud-mirrors-explain.md +0 -5
  164. package/.changeset/lovely-balloons-protect.md +0 -5
  165. package/.changeset/mean-pens-travel.md +0 -5
  166. package/.changeset/moody-doors-grow.md +0 -5
  167. package/.changeset/moody-laws-change.md +0 -5
  168. package/.changeset/nasty-goats-joke.md +0 -5
  169. package/.changeset/odd-forks-drop.md +0 -5
  170. package/.changeset/olive-windows-suffer.md +0 -5
  171. package/.changeset/popular-carpets-jog.md +0 -5
  172. package/.changeset/popular-planets-play.md +0 -5
  173. package/.changeset/rare-gorillas-boil.md +0 -5
  174. package/.changeset/rare-moose-teach.md +0 -5
  175. package/.changeset/sharp-tools-hope.md +0 -5
  176. package/.changeset/slimy-sloths-refuse.md +0 -5
  177. package/.changeset/slow-boats-search.md +0 -5
  178. package/.changeset/smooth-horses-tie.md +0 -5
  179. package/.changeset/tame-feet-reply.md +0 -5
  180. package/.changeset/tidy-items-reflect.md +0 -5
  181. package/.changeset/weak-chicken-admire.md +0 -5
  182. package/.changeset/weak-rockets-compare.md +0 -5
  183. package/.changeset/wild-glasses-bathe.md +0 -5
  184. package/.changeset/wise-ears-turn.md +0 -5
  185. package/dist/cipher-1066b9c6.cjs +0 -2
  186. package/dist/cipher-1066b9c6.cjs.map +0 -1
  187. package/dist/cipher-df48bf6e.js.map +0 -1
@@ -2,4 +2,4 @@
2
2
  "jobsys-explore": patch
3
3
  ---
4
4
 
5
- Drop the unused property
5
+ Add useFindOptionByValue
@@ -2,4 +2,4 @@
2
2
  "jobsys-explore": patch
3
3
  ---
4
4
 
5
- Fix
5
+ Upgrade
@@ -2,4 +2,4 @@
2
2
  "jobsys-explore": patch
3
3
  ---
4
4
 
5
- Fix
5
+ Adjust vue version
@@ -2,4 +2,4 @@
2
2
  "jobsys-explore": patch
3
3
  ---
4
4
 
5
- Build
5
+ Downgrade vue
@@ -0,0 +1,5 @@
1
+ ---
2
+ "jobsys-explore": patch
3
+ ---
4
+
5
+ Add fieldNames support for options
package/.eslintignore CHANGED
@@ -1,4 +1,4 @@
1
- dist
2
- node_modules
3
- .prettierrc.cjs
1
+ dist
2
+ node_modules
3
+ .prettierrc.cjs
4
4
  vite.config.js
package/CHANGELOG.md CHANGED
@@ -1,43 +1,32 @@
1
1
  # jobsys-explore
2
2
 
3
- ## 4.6.0
3
+ ## 4.6.2
4
4
 
5
- ### Minor Changes
5
+ ### Patch Changes
6
6
 
7
- - Add survey component
7
+ - Add useFindOptionByValue
8
+ - Upgrade
9
+ - Adjust vue version
10
+ - Downgrade vue
11
+ - Add fieldNames support for options
12
+
13
+ ## 4.5.5
8
14
 
9
15
  ### Patch Changes
10
16
 
11
- - Fix
12
- - Build
13
- - Drop the unused property
14
- - Add matrix component and closable option
15
- - Fix clear error in ExSearch
16
- - Rewrite ExPagiantion
17
- - Add init and beforeSubmit
18
- - Fix
19
- - Add disabled and readonly for ex form
20
- - hide upload when readonly or disabled
21
- - Add form item pattern support
22
- - Add cascader search and filter search issue
23
- - Fix sector style
24
- - Fix exupload
25
- - Add ex-decorator
26
- - clone the options before traverse
27
- - Upgrade useFormFormat
28
- - Add \_type for uploader
29
- - upgrade
30
- - Fix
31
- - Add useFindParentValues
32
- - Fix form submit await
33
- - Add status adapter and useFetch loading
34
- - Adjust form item render order
35
- - Add pagination expose
36
- - Add pagination persistence
37
- - Fix upload file
38
- - Add useFindPropertyRecursive
39
- - upgrade
40
- - Fix beforeSubmit
17
+ - Add useFindOptionByValue
18
+ - Upgrade
19
+ - Downgrade vue
20
+ - Add fieldNames support for options
21
+
22
+ ## 4.5.4
23
+
24
+ ### Patch Changes
25
+
26
+ - Add useFindOptionByValue
27
+ - Upgrade
28
+ - Downgrade vue
29
+ - Add fieldNames support for options
41
30
 
42
31
  ## 4.6.0
43
32
 
package/README.md CHANGED
@@ -1,41 +1,41 @@
1
- # TODOs
2
-
3
- ---
4
-
5
- ## 增强
6
-
7
- - [ ] ExploreForm
8
-
9
- - [x] Address
10
- - [x] Cascader
11
- - [x] Checkbox
12
- - [x] Date
13
- - [ ] Group
14
- - [ ] Html
15
- - [x] Input
16
- - [x] Number
17
- - [x] Radio
18
- - [ ] Remote
19
- - [x] Select
20
- - [x] Switch
21
- - [] Tag
22
- - [x] Text
23
- - [x] Time
24
- - [ ] TreeSelect
25
- - [x] Uploader
26
-
27
- - [x] ExploreSearch
28
-
29
- - [x] 同上
30
-
31
- - [x] Field
32
- - [x] Disabled
33
- - [x] Help
34
-
35
- ## 新增
36
-
37
- - [ ] 样式定制
38
- - [ ] 浮动按钮
39
- - [ ] 列表组件
40
- - [ ] 背景生成
41
- - [ ] 简易图表
1
+ # TODOs
2
+
3
+ ---
4
+
5
+ ## 增强
6
+
7
+ - [ ] ExploreForm
8
+
9
+ - [x] Address
10
+ - [x] Cascader
11
+ - [x] Checkbox
12
+ - [x] Date
13
+ - [ ] Group
14
+ - [ ] Html
15
+ - [x] Input
16
+ - [x] Number
17
+ - [x] Radio
18
+ - [ ] Remote
19
+ - [x] Select
20
+ - [x] Switch
21
+ - [] Tag
22
+ - [x] Text
23
+ - [x] Time
24
+ - [ ] TreeSelect
25
+ - [x] Uploader
26
+
27
+ - [x] ExploreSearch
28
+
29
+ - [x] 同上
30
+
31
+ - [x] Field
32
+ - [x] Disabled
33
+ - [x] Help
34
+
35
+ ## 新增
36
+
37
+ - [ ] 样式定制
38
+ - [ ] 浮动按钮
39
+ - [ ] 列表组件
40
+ - [ ] 背景生成
41
+ - [ ] 简易图表
package/TODOs.md CHANGED
@@ -1,8 +1,8 @@
1
- # Bugs
2
-
3
- - [ ] ExPagination 无限加载数据问题
4
-
5
- # Improvements
6
-
7
- # Features
8
-
1
+ # Bugs
2
+
3
+ - [ ] ExPagination 无限加载数据问题
4
+
5
+ # Improvements
6
+
7
+ # Features
8
+
@@ -1,193 +1,193 @@
1
- import { computed, defineComponent, nextTick, reactive, watch } from "vue"
2
- import { Progress } from "vant"
3
- import "./index.less"
4
- import { ExButton, ExForm } from "../../components"
5
- import { cloneDeep } from "lodash-es"
6
- import { useProcessStatusSuccess } from "../../hooks"
7
-
8
- /**
9
- * 调查问卷
10
- * @version 4.4.0
11
- */
12
- export default defineComponent({
13
- name: "ExSurvey",
14
- props: {
15
- /**
16
- * 标题
17
- */
18
- title: { type: String, default: "" },
19
-
20
- /**
21
- * 问卷 slug
22
- */
23
- slug: { type: [Number, String], default: "", required: true },
24
- /**
25
- * 开场语
26
- */
27
- intro: { type: String, default: "" },
28
-
29
- /**
30
- * 结束语
31
- */
32
- outro: { type: String, default: "" },
33
-
34
- /**
35
- * 从哪个章节开始做
36
- */
37
- startChapter: { type: Number, default: 0 },
38
-
39
- /**
40
- * 表单项
41
- */
42
- formItems: { type: Array, default: () => [], required: true },
43
-
44
- /**
45
- * 提交地址
46
- */
47
- submitUrl: { type: String, default: "" },
48
-
49
- /**
50
- *
51
- * @typedef {Object} ExposedFormData
52
- * @property {Object} formatForm Format后的表单数据
53
- *
54
- *
55
- * 提交数据处理函数
56
- * @param {ExposedFormData} data
57
- * @return {Boolean|Object} return false会阻止提交操作,return Object会替换提交的数据
58
- *
59
- */
60
- beforeSubmit: { type: Function, default: null },
61
- },
62
- emits: [
63
- /**
64
- * @event click
65
- * @param {Event} event 完结事件
66
- */
67
- "finish",
68
- ],
69
-
70
- setup(props, { emit }) {
71
- const state = reactive({
72
- currentStep: "intro",
73
- formChapters: [], //二维数组,按章节存储
74
- currentChapter: 0, //当前章节
75
- })
76
-
77
- const isLastChapter = computed(() => state.currentChapter === state.formChapters.length)
78
- const progress = computed(() => (!state.formChapters.length ? 0 : (state.currentChapter / state.formChapters.length) * 100))
79
-
80
- // 将 props.formItems 按 break 划分成章节
81
- const prepareFormItems = () => {
82
- let chapter = [] //存储章节的数组
83
- const formItems = cloneDeep(props.formItems)
84
- for (let i = 0; i < formItems.length; i += 1) {
85
- const item = formItems[i] // 这个是用于渲染的配置
86
- item.defaultSlots = {
87
- label: () => (
88
- <span style={{ marginBottom: "10px" }}>
89
- {i + 1}.{item.title}
90
- </span>
91
- ),
92
- }
93
- if (item.break) {
94
- if (chapter.length) {
95
- state.formChapters.push(chapter)
96
- }
97
- delete item.break
98
- chapter = [item]
99
- } else {
100
- chapter.push(item)
101
- }
102
-
103
- if (i === formItems.length - 1) {
104
- state.formChapters.push(chapter)
105
- }
106
- }
107
- }
108
-
109
- watch(
110
- () => props.formItems,
111
- () => {
112
- prepareFormItems()
113
- nextTick(() => {
114
- if (props.startChapter) {
115
- state.currentChapter = Math.min(props.startChapter - 1, state.formChapters.length - 1)
116
- }
117
- })
118
- },
119
- { immediate: true },
120
- )
121
-
122
- const onBeforeSubmit = ({ formatForm }) => {
123
- let data = { slug: props.slug, answers: formatForm }
124
- if (props.beforeSubmit) {
125
- return props.beforeSubmit(data)
126
- }
127
- return data
128
- }
129
-
130
- const onAfterSubmit = (res) => {
131
- useProcessStatusSuccess(res, () => {
132
- state.currentChapter += 1
133
- if (state.currentChapter === state.formChapters.length) {
134
- state.currentStep = "outro"
135
- }
136
- })
137
- }
138
-
139
- const onFinish = () => {
140
- emit("finish")
141
- }
142
-
143
- const progressElem = () => {
144
- return state.formChapters.length <= 1 || state.currentStep !== "form" ? null : (
145
- <div class={`ex-survey__progress`}>
146
- <Progress showPivot={false} percentage={progress.value}></Progress>
147
- </div>
148
- )
149
- }
150
-
151
- const introElem = () =>
152
- (props.title || props.intro) && state.currentStep === "intro" ? (
153
- <div class={`ex-survey__intro`}>
154
- {props.title ? <div class={`ex-survey__title`}>{props.title}</div> : null}
155
- {props.intro || null}
156
- <ExButton type={"primary"} class={"ex-survey__start-btn"} onClick={() => (state.currentStep = "form")}>
157
- {() => "开始"}
158
- </ExButton>
159
- </div>
160
- ) : null
161
-
162
- const outroElem = () =>
163
- props.intro && state.currentStep === "outro" ? (
164
- <div class={`ex-survey__outro`}>
165
- {props.outro || "谢谢您的参与,祝您有美好的一天!"}
166
- <ExButton type={"primary"} class={"ex-survey__finish-btn"} onClick={onFinish}>
167
- {() => "完成"}
168
- </ExButton>
169
- </div>
170
- ) : null
171
-
172
- const formElem = () => {
173
- return state.currentStep === "form" ? (
174
- <div class={`ex-survey__form`}>
175
- <ExForm
176
- form={state.formChapters[state.currentChapter]}
177
- labelWidth={"100%"}
178
- fixed={true}
179
- submitUrl={props.submitUrl}
180
- closable={!isLastChapter.value && state.currentChapter !== 0}
181
- close={() => (state.currentChapter -= 1)}
182
- cancelButtonText={"上一步"}
183
- submitButtonText={"确定"}
184
- beforeSubmit={onBeforeSubmit}
185
- afterSubmit={onAfterSubmit}
186
- ></ExForm>
187
- </div>
188
- ) : null
189
- }
190
-
191
- return () => <div class={`ex-survey`}>{[introElem(), progressElem(), formElem(), outroElem()]}</div>
192
- },
193
- })
1
+ import { computed, defineComponent, nextTick, reactive, watch } from "vue"
2
+ import { Progress } from "vant"
3
+ import "./index.less"
4
+ import { ExButton, ExForm } from "../../components"
5
+ import { cloneDeep } from "lodash-es"
6
+ import { useProcessStatusSuccess } from "../../hooks"
7
+
8
+ /**
9
+ * 调查问卷
10
+ * @version 4.4.0
11
+ */
12
+ export default defineComponent({
13
+ name: "ExSurvey",
14
+ props: {
15
+ /**
16
+ * 标题
17
+ */
18
+ title: { type: String, default: "" },
19
+
20
+ /**
21
+ * 问卷 slug
22
+ */
23
+ slug: { type: [Number, String], default: "", required: true },
24
+ /**
25
+ * 开场语
26
+ */
27
+ intro: { type: String, default: "" },
28
+
29
+ /**
30
+ * 结束语
31
+ */
32
+ outro: { type: String, default: "" },
33
+
34
+ /**
35
+ * 从哪个章节开始做
36
+ */
37
+ startChapter: { type: Number, default: 0 },
38
+
39
+ /**
40
+ * 表单项
41
+ */
42
+ formItems: { type: Array, default: () => [], required: true },
43
+
44
+ /**
45
+ * 提交地址
46
+ */
47
+ submitUrl: { type: String, default: "" },
48
+
49
+ /**
50
+ *
51
+ * @typedef {Object} ExposedFormData
52
+ * @property {Object} formatForm Format后的表单数据
53
+ *
54
+ *
55
+ * 提交数据处理函数
56
+ * @param {ExposedFormData} data
57
+ * @return {Boolean|Object} return false会阻止提交操作,return Object会替换提交的数据
58
+ *
59
+ */
60
+ beforeSubmit: { type: Function, default: null },
61
+ },
62
+ emits: [
63
+ /**
64
+ * @event click
65
+ * @param {Event} event 完结事件
66
+ */
67
+ "finish",
68
+ ],
69
+
70
+ setup(props, { emit }) {
71
+ const state = reactive({
72
+ currentStep: "intro",
73
+ formChapters: [], //二维数组,按章节存储
74
+ currentChapter: 0, //当前章节
75
+ })
76
+
77
+ const isLastChapter = computed(() => state.currentChapter === state.formChapters.length)
78
+ const progress = computed(() => (!state.formChapters.length ? 0 : (state.currentChapter / state.formChapters.length) * 100))
79
+
80
+ // 将 props.formItems 按 break 划分成章节
81
+ const prepareFormItems = () => {
82
+ let chapter = [] //存储章节的数组
83
+ const formItems = cloneDeep(props.formItems)
84
+ for (let i = 0; i < formItems.length; i += 1) {
85
+ const item = formItems[i] // 这个是用于渲染的配置
86
+ item.defaultSlots = {
87
+ label: () => (
88
+ <span style={{ marginBottom: "10px" }}>
89
+ {i + 1}.{item.title}
90
+ </span>
91
+ ),
92
+ }
93
+ if (item.break) {
94
+ if (chapter.length) {
95
+ state.formChapters.push(chapter)
96
+ }
97
+ delete item.break
98
+ chapter = [item]
99
+ } else {
100
+ chapter.push(item)
101
+ }
102
+
103
+ if (i === formItems.length - 1) {
104
+ state.formChapters.push(chapter)
105
+ }
106
+ }
107
+ }
108
+
109
+ watch(
110
+ () => props.formItems,
111
+ () => {
112
+ prepareFormItems()
113
+ nextTick(() => {
114
+ if (props.startChapter) {
115
+ state.currentChapter = Math.min(props.startChapter - 1, state.formChapters.length - 1)
116
+ }
117
+ })
118
+ },
119
+ { immediate: true },
120
+ )
121
+
122
+ const onBeforeSubmit = ({ formatForm }) => {
123
+ let data = { slug: props.slug, answers: formatForm }
124
+ if (props.beforeSubmit) {
125
+ return props.beforeSubmit(data)
126
+ }
127
+ return data
128
+ }
129
+
130
+ const onAfterSubmit = (res) => {
131
+ useProcessStatusSuccess(res, () => {
132
+ state.currentChapter += 1
133
+ if (state.currentChapter === state.formChapters.length) {
134
+ state.currentStep = "outro"
135
+ }
136
+ })
137
+ }
138
+
139
+ const onFinish = () => {
140
+ emit("finish")
141
+ }
142
+
143
+ const progressElem = () => {
144
+ return state.formChapters.length <= 1 || state.currentStep !== "form" ? null : (
145
+ <div class={`ex-survey__progress`}>
146
+ <Progress showPivot={false} percentage={progress.value}></Progress>
147
+ </div>
148
+ )
149
+ }
150
+
151
+ const introElem = () =>
152
+ (props.title || props.intro) && state.currentStep === "intro" ? (
153
+ <div class={`ex-survey__intro`}>
154
+ {props.title ? <div class={`ex-survey__title`}>{props.title}</div> : null}
155
+ {props.intro || null}
156
+ <ExButton type={"primary"} class={"ex-survey__start-btn"} onClick={() => (state.currentStep = "form")}>
157
+ {() => "开始"}
158
+ </ExButton>
159
+ </div>
160
+ ) : null
161
+
162
+ const outroElem = () =>
163
+ props.intro && state.currentStep === "outro" ? (
164
+ <div class={`ex-survey__outro`}>
165
+ {props.outro || "谢谢您的参与,祝您有美好的一天!"}
166
+ <ExButton type={"primary"} class={"ex-survey__finish-btn"} onClick={onFinish}>
167
+ {() => "完成"}
168
+ </ExButton>
169
+ </div>
170
+ ) : null
171
+
172
+ const formElem = () => {
173
+ return state.currentStep === "form" ? (
174
+ <div class={`ex-survey__form`}>
175
+ <ExForm
176
+ form={state.formChapters[state.currentChapter]}
177
+ labelWidth={"100%"}
178
+ fixed={true}
179
+ submitUrl={props.submitUrl}
180
+ closable={!isLastChapter.value && state.currentChapter !== 0}
181
+ close={() => (state.currentChapter -= 1)}
182
+ cancelButtonText={"上一步"}
183
+ submitButtonText={"确定"}
184
+ beforeSubmit={onBeforeSubmit}
185
+ afterSubmit={onAfterSubmit}
186
+ ></ExForm>
187
+ </div>
188
+ ) : null
189
+ }
190
+
191
+ return () => <div class={`ex-survey`}>{[introElem(), progressElem(), formElem(), outroElem()]}</div>
192
+ },
193
+ })
@@ -1,5 +1,5 @@
1
- import _ExSurvey from "./ExSurvey.jsx"
2
- import withInstall from "../../utils/withInstall"
3
-
4
- export const ExSurvey = withInstall(_ExSurvey)
5
- export default ExSurvey
1
+ import _ExSurvey from "./ExSurvey.jsx"
2
+ import withInstall from "../../utils/withInstall"
3
+
4
+ export const ExSurvey = withInstall(_ExSurvey)
5
+ export default ExSurvey
@@ -1,37 +1,37 @@
1
- .ex-survey {
2
- .ex-survey__progress {
3
- position: fixed;
4
- top: 0;
5
- left: 0;
6
- right: 0;
7
- }
8
-
9
- .ex-survey__order {
10
- font-weight: bold;
11
- }
12
-
13
-
14
- .ex-survey__intro, .ex-survey__outro {
15
- background: #FFF;
16
- font-size: var(--van-font-size-md);
17
- margin: var(--van-padding-md);
18
- padding: 48px var(--van-padding-md);
19
- border-radius: var(--van-radius-lg, 8px);
20
-
21
- .ex-survey__title {
22
- text-align: center;
23
- font-size: var(--van-font-size-lg);
24
- font-weight: bold;
25
- margin-bottom: 48px;
26
- }
27
-
28
- .ex-survey__start-btn, .ex-survey__finish-btn {
29
- margin-top: var(--van-padding-xl);
30
- }
31
- }
32
-
33
- .ex-survey__form {
34
- margin-top: 5px;
35
- margin-bottom: 100px;
36
- }
1
+ .ex-survey {
2
+ .ex-survey__progress {
3
+ position: fixed;
4
+ top: 0;
5
+ left: 0;
6
+ right: 0;
7
+ }
8
+
9
+ .ex-survey__order {
10
+ font-weight: bold;
11
+ }
12
+
13
+
14
+ .ex-survey__intro, .ex-survey__outro {
15
+ background: #FFF;
16
+ font-size: var(--van-font-size-md);
17
+ margin: var(--van-padding-md);
18
+ padding: 48px var(--van-padding-md);
19
+ border-radius: var(--van-radius-lg, 8px);
20
+
21
+ .ex-survey__title {
22
+ text-align: center;
23
+ font-size: var(--van-font-size-lg);
24
+ font-weight: bold;
25
+ margin-bottom: 48px;
26
+ }
27
+
28
+ .ex-survey__start-btn, .ex-survey__finish-btn {
29
+ margin-top: var(--van-padding-xl);
30
+ }
31
+ }
32
+
33
+ .ex-survey__form {
34
+ margin-top: 5px;
35
+ margin-bottom: 100px;
36
+ }
37
37
  }