15 KiB
15 KiB
title, date, permalink
| title | date | permalink |
|---|---|---|
| 表单组件 | 2021-02-03 09:26:32 | /pages/65ed1c/ |
表单组件
基本表单
表单组件以模态框的形式展示表单内容。
::: details 代码块
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>
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>
:::
查询表单
表单组件查询功能。
::: details 代码块
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>
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>
:::
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 | 重置搜索表单触发的事件 | - |