haiwei-ui 1.3.5 → 1.3.7

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 (3) hide show
  1. package/package.json +1 -1
  2. package/packages/components/form/index.vue +130 -123
  3. package/packages/components/form-dialog/index.vue +3 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "haiwei-ui",
3
- "version": "1.3.5",
3
+ "version": "1.3.7",
4
4
  "description": "HaiWei前端组件库",
5
5
  "author": "Eric",
6
6
  "license": "ISC",
package/packages/components/form/index.vue CHANGED
@@ -1,138 +1,145 @@
1
1
  <template>
2
- <el-form class="nm-form" ref="form" :model="model" :rules="rules" :label-width="labelWidth" :label-position="labelPosition" :size="fontSize" :inline="inline" :disabled="disabled" v-loading="showLoading" :element-loading-text="loadingText" :element-loading-background="loadingBackground" :element-loading-spinner="loadingSpinner" @validate="onValidate">
2
+ <el-form class="nm-form" ref="form" :model="model" :rules="rules" :label-width="labelWidth"
3
+ :label-position="labelPosition" :size="fontSize" :inline="inline" :disabled="disabled" v-loading="showLoading"
4
+ :element-loading-text="loadingText" :element-loading-background="loadingBackground"
5
+ :element-loading-spinner="loadingSpinner" @validate="onValidate">
3
6
  <slot />
4
7
  </el-form>
5
8
  </template>
6
9
  <script>
7
- import loading from '../../mixins/components/loading'
8
- export default {
9
- name: 'Form',
10
- mixins: [loading],
11
- data() {
12
- return {
13
- loading_: false
14
- }
10
+ import loading from '../../mixins/components/loading'
11
+ export default {
12
+ name: 'Form',
13
+ mixins: [loading],
14
+ data() {
15
+ return {
16
+ loading_: false
17
+ }
18
+ },
19
+ props: {
20
+ /** 表单对象 */
21
+ model: {
22
+ type: Object,
23
+ required: true
15
24
  },
16
- props: {
17
- /** 表单对象 */
18
- model: {
19
- type: Object,
20
- required: true
21
- },
22
- /** 验证规则 */
23
- rules: Object,
24
- /** 提交请求 */
25
- action: Function,
26
- /** 行内表单模式 */
27
- inline: Boolean,
28
- /** 是否显示成功提示消息 */
29
- successMsg: {
30
- type: Boolean,
31
- default: true
32
- },
33
- /** 成功提示消息文本 */
34
- successMsgText: {
35
- type: String,
36
- default: '保存成功'
37
- },
38
- /** 标签的宽度 */
39
- labelWidth: {
40
- type: String,
41
- default: '100px'
42
- },
43
- /** 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width */
44
- labelPosition: {
45
- type: String,
46
- default: 'right'
47
- },
48
- // 自定义验证
49
- customValidate: Function,
50
- /** 禁用表单 */
51
- disabled: Boolean,
52
- /** 显示加载动画 */
53
- loading: Boolean,
54
- /** 不显示加载动画 */
55
- noLoading: Boolean,
56
- /** 自定义重置操作 */
57
- customResetFunction: Function
25
+ /** 验证规则 */
26
+ rules: Object,
27
+ /** 提交请求 */
28
+ action: Function,
29
+ /** 行内表单模式 */
30
+ inline: Boolean,
31
+ /** 是否显示成功提示消息 */
32
+ successMsg: {
33
+ type: Boolean,
34
+ default: true
58
35
  },
59
- computed: {
60
- showLoading() {
61
- return !this.noLoading && (this.loading_ || this.loading)
62
- }
36
+ /** 成功提示消息文本 */
37
+ successMsgText: {
38
+ type: String,
39
+ default: '保存成功'
63
40
  },
64
- methods: {
65
- /** 提交 */
66
- submit() {
67
- this.validate(() => {
68
- this.openLoading()
69
- this.action(this.model)
70
- .then(data => {
71
- if (this.successMsg === true) {
72
- this._success(this.successMsgText)
73
- }
74
- this.$emit('success', data)
75
- })
76
- .catch(() => {
77
- this.$emit('error')
78
- })
79
- .finally(() => {
80
- this.closeLoading()
81
- })
82
- })
83
- },
84
- /** 表单验证 */
85
- validate(callback) {
86
- this.$refs.form.validate(async valid => {
87
- // 自定义验证
88
- if (valid && (!this.customValidate || this.customValidate() === true)) {
89
- callback()
90
- } else {
91
- // 验证失败
92
- this.$emit('validate-error')
93
- }
94
- })
95
- },
96
- /** 重置 */
97
- reset() {
98
- if (this.customResetFunction) {
99
- this.customResetFunction()
100
- } else {
101
- this.$refs.form.resetFields()
102
- this.resetChildren(this.$refs.form)
103
- }
104
- this.$emit('reset')
105
- },
106
- /** 重置子组件 */
107
- resetChildren(vnode) {
108
- if (vnode.$children && vnode.$children.length > 0) {
109
- vnode.$children.forEach(item => {
110
- if (item && item.reset && typeof item.reset === 'function') {
111
- item.reset()
41
+ /** 标签的宽度 */
42
+ labelWidth: {
43
+ type: String,
44
+ default: '100px'
45
+ },
46
+ /** 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width */
47
+ labelPosition: {
48
+ type: String,
49
+ default: 'right'
50
+ },
51
+ // 自定义验证
52
+ customValidate: Function,
53
+ /** 禁用表单 */
54
+ disabled: Boolean,
55
+ /** 显示加载动画 */
56
+ loading: Boolean,
57
+ /** 不显示加载动画 */
58
+ noLoading: Boolean,
59
+ /** 自定义重置操作 */
60
+ customResetFunction: Function
61
+ },
62
+ computed: {
63
+ showLoading() {
64
+ return !this.noLoading && (this.loading_ || this.loading)
65
+ }
66
+ },
67
+ methods: {
68
+ /** 提交 */
69
+ submit() {
70
+ this.validate(() => {
71
+ this.openLoading()
72
+ console.log('this.model======>', this.model);
73
+ // 使用深拷贝确保获取最新数据
74
+ const formData = JSON.parse(JSON.stringify(this.model))
75
+ console.log('this.model======>formData', formData);
76
+ this.action(this.model)
77
+ .then(data => {
78
+ if (this.successMsg === true) {
79
+ this._success(this.successMsgText)
112
80
  }
113
- this.resetChildren(item)
81
+ this.$emit('success', data)
114
82
  })
83
+ .catch(() => {
84
+ this.$emit('error')
85
+ })
86
+ .finally(() => {
87
+ this.closeLoading()
88
+ })
89
+ })
90
+ },
91
+ /** 表单验证 */
92
+ validate(callback) {
93
+ this.$refs.form.validate(async valid => {
94
+ // 自定义验证
95
+ if (valid && (!this.customValidate || this.customValidate() === true)) {
96
+ callback()
97
+ } else {
98
+ // 验证失败
99
+ this.$emit('validate-error')
115
100
  }
116
- },
117
- /** 清除验证结果 */
118
- clearValidate(props) {
119
- this.$refs.form.clearValidate(props)
120
- },
121
- /** 打开加载中 */
122
- openLoading() {
123
- if (!this.noLoading) {
124
- this.loading_ = true
125
- }
126
- },
127
- /** 关闭加载中 */
128
- closeLoading() {
129
- if (!this.noLoading) {
130
- this.loading_ = false
131
- }
132
- },
133
- onValidate(prop, valid, msg) {
134
- this.$emit('validate', prop, valid, msg)
101
+ })
102
+ },
103
+ /** 重置 */
104
+ reset() {
105
+ if (this.customResetFunction) {
106
+ this.customResetFunction()
107
+ } else {
108
+ this.$refs.form.resetFields()
109
+ this.resetChildren(this.$refs.form)
110
+ }
111
+ this.$emit('reset')
112
+ },
113
+ /** 重置子组件 */
114
+ resetChildren(vnode) {
115
+ if (vnode.$children && vnode.$children.length > 0) {
116
+ vnode.$children.forEach(item => {
117
+ if (item && item.reset && typeof item.reset === 'function') {
118
+ item.reset()
119
+ }
120
+ this.resetChildren(item)
121
+ })
122
+ }
123
+ },
124
+ /** 清除验证结果 */
125
+ clearValidate(props) {
126
+ this.$refs.form.clearValidate(props)
127
+ },
128
+ /** 打开加载中 */
129
+ openLoading() {
130
+ if (!this.noLoading) {
131
+ this.loading_ = true
135
132
  }
133
+ },
134
+ /** 关闭加载中 */
135
+ closeLoading() {
136
+ if (!this.noLoading) {
137
+ this.loading_ = false
138
+ }
139
+ },
140
+ onValidate(prop, valid, msg) {
141
+ this.$emit('validate', prop, valid, msg)
136
142
  }
137
143
  }
144
+ }
138
145
  </script>
package/packages/components/form-dialog/index.vue CHANGED
@@ -159,7 +159,8 @@ export default {
159
159
  if (this.$listeners['before-submit']) {
160
160
  try {
161
161
  // 执行 before-submit 钩子并等待结果
162
- const result = await this.$emit('before-submit', this.model)
162
+ // 注意：这里不传递model参数，父组件应该直接修改this.model
163
+ const result = await this.$emit('before-submit')
163
164
 
164
165
  // 如果返回false，停止提交
165
166
  if (result === false) {
@@ -174,6 +175,7 @@ export default {
174
175
  }
175
176
  }
176
177
 
178
+ console.log('test',this.model)
177
179
  // 继续原有提交逻辑
178
180
  this.$refs.form.submit()
179
181
  },