haocheng Liu
2021-02-03

表单组件

# 表单组件

# 基本表单

表单组件以模态框的形式展示表单内容。

代码块

ts版本

<template>
  <div>
    <el-button type="primary" size="medium" @click="showAdd">新增表单</el-button>
    <form-co
      ref="formCo"
      :form-title="dialogTitle"
      :form-visible="dialogCreateFormVisible"
      :form-sub-botton="'提交'"
      :form-key="tableHead"
      :form-data="formData"
      :form-rules="formRules"
      :form-type="formType"
      :disable-field="disableField"
      @form-submit="formSubmit"
      @cancel-form="cancelForm"
      @before-cancel-form="cancelForm"
    />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import formCo from "../Co/formCo";

@Component({
  name: "commonForm",
  components: {
    formCo
  }
})

export default class extends Vue {
    public dialogTitle = '新增记录';
    public formType = 1;
    public formData: any = {};
    public dialogCreateFormVisible = false;
    public tableHead: any = [
        {
          fieldId: 1,
          fieldName: "user_id",
          isChange: 0,
          isForm: 0,
          javaType: "Integer",
          nameCn: "用户ID",
          webType: "el-input",
        },
        {
          fieldId: 2,
          fieldName: "username",
          isChange: 1,
          isForm: 1,
          javaType: "String",
          nameCn: "用户名",
          webType: "el-input",
        },
        {
          fieldId: 3,
          fieldName: "password",
          isChange: 1,
          isForm: 1,
          javaType: "String",
          nameCn: "密码",
          webType: "password",
        },
        {
          fieldId: 4,
          fieldName: "enabled",
          isChange: 1,
          isForm: 1,
          javaType: "Integer",
          nameCn: "用户状态",
          selectList: [
            {
              fieldId: 4,
              selectId: 1,
              selectKey: "禁用",
              selectType: 1,
              selectValue: "1",
            },
            {
              fieldId: 4,
              selectId: 2,
              selectKey: "启用",
              selectType: 1,
              selectValue: "2",
            },
          ],
          webType: "el-select",
        },
        {
          fieldId: 5,
          fieldName: "user_type",
          isChange: 1,
          isForm: 1,
          javaType: "Integer",
          nameCn: "用户类型",
          selectList: [
            {
              fieldId: 5,
              selectId: 3,
              selectKey: "外部用户",
              selectType: 1,
              selectValue: "1",
            },
            {
              fieldId: 5,
              selectId: 4,
              selectKey: "内部用户",
              selectType: 1,
              selectValue: "2",
            },
          ],
          webType: "el-select",
        },
        {
          fieldId: 6,
          fieldName: "create_time",
          isChange: 1,
          isForm: 1,
          javaType: "datetime",
          nameCn: "创建时间",
          webType: "el-date-picker",
        },
        {
          fieldId: 7,
          fieldName: "update_time",
          isChange: 1,
          isForm: 1,
          javaType: "datetime",
          nameCn: "修改时间",
          webType: "el-date-picker",
        }
    ];
    public disableField: Array<any> = ["create_time", "update_time"];
    public formRules: any = {
        assword: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
    };

    //提交表单
    formSubmit(value) {
      this.dialogCreateFormVisible = false;
    },
    //关闭表单
    cancelForm() {
      this.dialogCreateFormVisible = false;
      this.formData = {};
      this.$nextTick(() => {
        const ref = this.$refs.formCo;
        ref.$refs.formCommon.resetFields();
      });
    },
    showAdd() {
      this.dialogTitle = "新增记录";
      this.formType = 1;
      this.formData = {};
      this.dialogCreateFormVisible = true;
    },
}
</script>
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

js版本

<template>
  <div>
    <el-button type="primary" size="medium" @click="showAdd">新增表单</el-button>
    <form-co
      ref="formCo"
      :form-title="dialogTitle"
      :form-visible="dialogCreateFormVisible"
      :form-sub-botton="'提交'"
      :form-key="tableHead"
      :form-data="formData"
      :form-rules="formRules"
      :form-type="formType"
      :disable-field="disableField"
      @form-submit="formSubmit"
      @cancel-form="cancelForm"
      @before-cancel-form="cancelForm"
    />
  </div>
</template>
<script>
import formCo from "../Co/formCo";
export default {
  components: {
    formCo,
  },
  data() {
    return {
      dialogTitle: "新增记录",
      formType: 1,
      formData: {},
      dialogCreateFormVisible: false,
      tableHead: [
        {
          fieldId: 1,
          fieldName: "user_id",
          isChange: 0,
          isForm: 0,
          javaType: "Integer",
          nameCn: "用户ID",
          webType: "el-input",
        },
        {
          fieldId: 2,
          fieldName: "username",
          isChange: 1,
          isForm: 1,
          javaType: "String",
          nameCn: "用户名",
          webType: "el-input",
        },
        {
          fieldId: 3,
          fieldName: "password",
          isChange: 1,
          isForm: 1,
          javaType: "String",
          nameCn: "密码",
          webType: "password",
        },
        {
          fieldId: 4,
          fieldName: "enabled",
          isChange: 1,
          isForm: 1,
          javaType: "Integer",
          nameCn: "用户状态",
          selectList: [
            {
              fieldId: 4,
              selectId: 1,
              selectKey: "禁用",
              selectType: 1,
              selectValue: "1",
            },
            {
              fieldId: 4,
              selectId: 2,
              selectKey: "启用",
              selectType: 1,
              selectValue: "2",
            },
          ],
          webType: "el-select",
        },
        {
          fieldId: 5,
          fieldName: "user_type",
          isChange: 1,
          isForm: 1,
          javaType: "Integer",
          nameCn: "用户类型",
          selectList: [
            {
              fieldId: 5,
              selectId: 3,
              selectKey: "外部用户",
              selectType: 1,
              selectValue: "1",
            },
            {
              fieldId: 5,
              selectId: 4,
              selectKey: "内部用户",
              selectType: 1,
              selectValue: "2",
            },
          ],
          webType: "el-select",
        },
        {
          fieldId: 6,
          fieldName: "create_time",
          isChange: 1,
          isForm: 1,
          javaType: "datetime",
          nameCn: "创建时间",
          webType: "el-date-picker",
        },
        {
          fieldId: 7,
          fieldName: "update_time",
          isChange: 1,
          isForm: 1,
          javaType: "datetime",
          nameCn: "修改时间",
          webType: "el-date-picker",
        },
      ],
      disableField: ["create_time", "update_time"],
      formRules: {
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //提交表单
    formSubmit(value) {
      this.dialogCreateFormVisible = false;
    },
    //关闭表单
    cancelForm() {
      this.dialogCreateFormVisible = false;
      this.formData = {};
      this.$nextTick(() => {
        const ref = this.$refs.formCo;
        ref.$refs.formCommon.resetFields();
      });
    },
    showAdd() {
      this.dialogTitle = "新增记录";
      this.formType = 1;
      this.formData = {};
      this.dialogCreateFormVisible = true;
    },
  },
};
</script>
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

# 查询表单

表单组件查询功能。

代码块

ts版本

<template>
  <el-row>
      <el-col :span="24">
        <el-card shadow="always" class="select-card">
          <search-co
            :form-key="tableHead"
            :search-data="searchForm"
            :time-format="'yyyy-MM-dd HH:mm:ss'"
            @search-submit="query"
            @reset-search-form="resetSearch"
          />
        </el-card>
      </el-col>
    </el-row>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import searchCo from "../Co/searchCo";

@Component({
  name: "commonForm",
  components: {
    searchCo
  }
})

export default class extends Vue {
    public searchForm: any = {};
    public tableHead: any = [
        {
          fieldId: 1,
          fieldName: "user_id",
          isChange: 0,
          isForm: 0,
          javaType: "Integer",
          nameCn: "用户ID",
          webType: "el-input",
        },
        {
          fieldId: 2,
          fieldName: "username",
          isChange: 1,
          isSearch: 1,
          javaType: "String",
          nameCn: "用户名",
          webType: "el-input",
        },
        {
          fieldId: 3,
          fieldName: "password",
          isChange: 1,
          isSearch: 0,
          javaType: "String",
          nameCn: "密码",
          webType: "password",
        },
        {
          fieldId: 4,
          fieldName: "enabled",
          isChange: 1,
          isSearch: 1,
          javaType: "Integer",
          nameCn: "用户状态",
          selectList: [
            {
              fieldId: 4,
              selectId: 1,
              selectKey: "禁用",
              selectType: 1,
              selectValue: "1",
            },
            {
              fieldId: 4,
              selectId: 2,
              selectKey: "启用",
              selectType: 1,
              selectValue: "2",
            },
          ],
          webType: "el-select",
        },
        {
          fieldId: 5,
          fieldName: "user_type",
          isChange: 1,
          isSearch: 1,
          javaType: "Integer",
          nameCn: "用户类型",
          selectList: [
            {
              fieldId: 5,
              selectId: 3,
              selectKey: "外部用户",
              selectType: 1,
              selectValue: "1",
            },
            {
              fieldId: 5,
              selectId: 4,
              selectKey: "内部用户",
              selectType: 1,
              selectValue: "2",
            },
          ],
          webType: "el-select",
        },
        {
          fieldId: 6,
          fieldName: "create_time",
          isChange: 1,
          isSearch: 1,
          javaType: "datetime",
          nameCn: "创建时间",
          webType: "el-date-picker",
        },
        {
          fieldId: 7,
          fieldName: "update_time",
          isChange: 1,
          isSearch: 1,
          javaType: "datetime",
          nameCn: "修改时间",
          webType: "el-date-picker",
        },
    ];

    // 查询表格
    query() {};
    // 重置search表单
    resetSearch() {
      this.searchForm = {};
    };
}
</script>
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

js版本

<template>
  <el-row>
      <el-col :span="24">
        <el-card shadow="always" class="select-card">
          <search-co
            :form-key="tableHead"
            :search-data="searchForm"
            :time-format="'yyyy-MM-dd HH:mm:ss'"
            @search-submit="query"
            @reset-search-form="resetSearch"
          />
        </el-card>
      </el-col>
    </el-row>
</template>

<script>
import searchCo from "../Co/searchCo";
export default {
  components: {
    searchCo,
  },
  data() {
    return {
      searchForm: {},
      tableHead: [
        {
          fieldId: 1,
          fieldName: "user_id",
          isChange: 0,
          isForm: 0,
          javaType: "Integer",
          nameCn: "用户ID",
          webType: "el-input",
        },
        {
          fieldId: 2,
          fieldName: "username",
          isChange: 1,
          isSearch: 1,
          javaType: "String",
          nameCn: "用户名",
          webType: "el-input",
        },
        {
          fieldId: 3,
          fieldName: "password",
          isChange: 1,
          isSearch: 0,
          javaType: "String",
          nameCn: "密码",
          webType: "password",
        },
        {
          fieldId: 4,
          fieldName: "enabled",
          isChange: 1,
          isSearch: 1,
          javaType: "Integer",
          nameCn: "用户状态",
          selectList: [
            {
              fieldId: 4,
              selectId: 1,
              selectKey: "禁用",
              selectType: 1,
              selectValue: "1",
            },
            {
              fieldId: 4,
              selectId: 2,
              selectKey: "启用",
              selectType: 1,
              selectValue: "2",
            },
          ],
          webType: "el-select",
        },
        {
          fieldId: 5,
          fieldName: "user_type",
          isChange: 1,
          isSearch: 1,
          javaType: "Integer",
          nameCn: "用户类型",
          selectList: [
            {
              fieldId: 5,
              selectId: 3,
              selectKey: "外部用户",
              selectType: 1,
              selectValue: "1",
            },
            {
              fieldId: 5,
              selectId: 4,
              selectKey: "内部用户",
              selectType: 1,
              selectValue: "2",
            },
          ],
          webType: "el-select",
        },
        {
          fieldId: 6,
          fieldName: "create_time",
          isChange: 1,
          isSearch: 1,
          javaType: "datetime",
          nameCn: "创建时间",
          webType: "el-date-picker",
        },
        {
          fieldId: 7,
          fieldName: "update_time",
          isChange: 1,
          isSearch: 1,
          javaType: "datetime",
          nameCn: "修改时间",
          webType: "el-date-picker",
        },
      ],
    };
  },
  methods: {
    // 查询表格
    query() {},
    // 重置search表单
    resetSearch() {
      this.searchForm = {};
    },
  },
};
</script>
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

# Form Attributes

参数 说明 类型 可选值 默认值
form-title 表单标题 String - -
form-visible 展示/关闭表单 Boolean - -
form-sub-botton 表单提交按钮显示文字 String - -
form-key 表单key值 Array - -
form-data 表单数据（可为空） Object - -
form-rules 表单校验规则 Object - -
form-type 表单提交类型 1为新增，2为编辑 Number - -
disable-field 表单不可编辑的部分 Array - -

# Form Events

事件名 说明 参数
form-submit 当用户手动点击提交按钮时触发的事件 -
cancel-form 当用户手动点击取消按钮时触发的事件 -
search-submit 表单提交触发的事件 -
reset-search-form 重置搜索表单触发的事件 -
上次更新: 2021/02/03, 17:01:33
通用表格组件
流程图组件

← 流程图组件→

最近更新
01
DataMap
 02-05
02
实体类
 02-05
03
update操作
 02-05
更多文章>
Theme by Vdoing | Copyright © 2021-2023 Haocheng Liu | MIT License