haiwei-ui 1.3.6 → 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 (2) hide show
  1. package/package.json +1 -1
  2. package/packages/components/form/index.vue +130 -123
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "haiwei-ui",
3
- "version": "1.3.6",
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>