1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
| <template>
| <el-form
| :inline="false"
| :model="formObj"
| ref="formRef"
| :rules="rules"
| label-position="right"
| label-width="150px"
| >
| <slot name="form-item" :formObj="formObj"></slot>
| <el-form-item v-if="showButtons">
| <el-button :disabled="!edit" type="primary" @click="onSubmit" :loading="loading"
| >提交</el-button
| >
| <el-button :disabled="!edit" @click="onReset">重置</el-button>
| <el-button v-if="enableCancelBtn" @click="onCancel">取消</el-button>
| </el-form-item>
| </el-form>
| </template>
|
| <script setup>
| /**
| * 表单编辑基类
| * 使用说明：
| * 在插槽<slot name="form-item">中添加自定义<el-form-item>元素
| * 可传入初始表单数据formInfo，表单校验规则rules
| * 实现submit和cancel触发函数
| */
| import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
| import { useFormConfirm } from '@/composables/formConfirm';
|
| const props = defineProps({
| //表单基本信息
| formInfo: Object,
| //表单检验规则
| rules: Object,
| showButtons: {
| type: Boolean,
| default: true
| },
| //取消按钮是否可用
| enableCancelBtn: Boolean,
| //触发重置
| reset: Boolean,
| //通知编辑状态
| isEdit: Boolean
| });
|
| //触发函数，提交和取消
| const emit = defineEmits(['submit', 'cancel', 'update:isEdit']);
|
| //表单操作函数
| const { formObj, formRef, edit, onSubmit, onCancel, onReset } = useFormConfirm({
| submit: {
| do: submit
| },
| cancel: {
| do: cancel
| }
| });
|
| //加载状态
| const loading = ref(false);
|
| //提交按钮触发
| function submit() {
| loading.value = true;
| return new Promise((resolve, reject) => {
| emit('submit', formObj, () => {
| loading.value = false;
| resolve();
| });
| });
| }
|
| //取消按钮触发
| function cancel() {
| emit('cancel');
| }
|
| //监听表单初始数据传入
| watch(
| () => props.formInfo,
| (nValue) => {
| formObj.value = nValue;
| }
| );
|
| //监听表单重置功能触发
| watch(
| () => props.reset,
| (nValue) => {
| if (nValue) {
| onReset();
| }
| }
| );
|
| //监听表单编辑状态
| watch(edit, (nValue) => {
| emit('update:isEdit', nValue);
| });
| </script>
|
| <style scoped></style>
|
|
