---
title: 表单组件
date: 2021-02-03 09:26:32
permalink: /pages/65ed1c/
---
# 表单组件

## 基本表单

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

***

<ClientOnly><Web-Form></Web-Form></ClientOnly>

::: details 代码块

***ts版本***

``` vue
<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>
```

***js版本***

``` vue
<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>
```

:::

## 查询表单

表单组件查询功能。

***

<ClientOnly><Web-SearchForm></Web-SearchForm></ClientOnly>

::: details 代码块

***ts版本***

``` vue
<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>
```

***js版本***

``` vue
<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>
```

:::

## Form Attributes

&nbsp; 
&nbsp; 

| 参数  | 说明 | 类型 | 可选值 | 默认值
| :---| :---- | :---- |:---- |:---- |
| 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

&nbsp; 
&nbsp; 

| 事件名  | 说明 | 参数 |
| :---| :---- | :---- |
| form-submit | 当用户手动点击提交按钮时触发的事件 | - |
| cancel-form | 当用户手动点击取消按钮时触发的事件 | - |
| search-submit | 表单提交触发的事件 | - |
| reset-search-form | 重置搜索表单触发的事件 | - |
