- 说明

- 配置

- 代码示例

- 组件

  - 通用表格组件
  - 表单组件
    - 基本表单
    - 查询表单
    - Form Attributes
    - Form Events
  - 流程图组件
  - 流程图组件之编辑

- 前端
- 组件

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

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式