feat(components): 新增通用表单和搜索组件
- 添加了 Forms 和 Search 组件 - Forms组件支持动态生成表单字段，包含输入框、下拉框等 - Search 组件支持动态生成搜索条件，包含输入框、下拉框、日期选择框等- 在 main.js 中全局注册了这两个组件 Signed-off-by: 1iyc <5212514+liycone@user.noreply.gitee.com>main
1iyc
2 days ago
parent
00ae5a8a61
commit
6cf1c43eb0
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="formModel" :rules="rules" ref="formRef" label-width="120px">
|
||||
<el-form-item
|
||||
v-for="(field, index) in formFields"
|
||||
:key="index"
|
||||
:label="field.label"
|
||||
:prop="field.prop"
|
||||
:required="field.required"
|
||||
>
|
||||
<component
|
||||
:is="getComponentType(field.type)"
|
||||
v-bind="field"
|
||||
v-model="formModel[field.prop]"
|
||||
:placeholder="field.placeholder"
|
||||
>
|
||||
<!-- 下拉框选项 -->
|
||||
<el-option
|
||||
v-if="field.type === 'select'"
|
||||
v-for="option in field.options"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
></el-option>
|
||||
</component>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
formFields: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formModel: {},
|
||||
rules: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initFormModel();
|
||||
this.initRules();
|
||||
},
|
||||
methods: {
|
||||
getComponentType(type) {
|
||||
switch (type) {
|
||||
case 'input':
|
||||
return 'el-input';
|
||||
case 'select':
|
||||
return 'el-select';
|
||||
case 'textarea':
|
||||
return 'el-input';
|
||||
case 'button':
|
||||
return 'el-button';
|
||||
default:
|
||||
return 'el-input';
|
||||
}
|
||||
},
|
||||
initFormModel() {
|
||||
this.formModel = this.formFields.reduce((acc, field) => {
|
||||
acc[field.prop] = '';
|
||||
return acc;
|
||||
}, {});
|
||||
},
|
||||
initRules() {
|
||||
this.rules = this.formFields.reduce((acc, field) => {
|
||||
if (field.rules) {
|
||||
acc[field.prop] = field.rules;
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs.formRef.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$emit('submit', this.formModel);
|
||||
} else {
|
||||
console.log('表单验证失败!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.formRef.resetFields();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-form {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item
|
||||
v-for="(field, index) in searchFields"
|
||||
:key="index"
|
||||
:label="field.label"
|
||||
:prop="field.prop"
|
||||
>
|
||||
<component
|
||||
:is="getComponentType(field.type)"
|
||||
v-model="queryParams[field.prop]"
|
||||
:placeholder="field.placeholder"
|
||||
:clearable="field.clearable"
|
||||
:style="field.style"
|
||||
@keyup.enter.native="handleQuery"
|
||||
>
|
||||
<!-- 下拉框选项 -->
|
||||
<el-option
|
||||
v-if="field.type === 'select'"
|
||||
v-for="option in field.options"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</component>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
searchFields: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
queryParams: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getComponentType(type) {
|
||||
switch (type) {
|
||||
case 'input':
|
||||
return 'el-input';
|
||||
case 'select':
|
||||
return 'el-select';
|
||||
case 'datePicker':
|
||||
return 'el-date-picker';
|
||||
default:
|
||||
return 'el-input';
|
||||
}
|
||||
},
|
||||
handleQuery() {
|
||||
this.$refs.queryForm.validate(valid => {
|
||||
if (valid) {
|
||||
// 处理查询逻辑
|
||||
console.log('查询参数:', this.queryParams);
|
||||
} else {
|
||||
console.log('验证失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
resetQuery() {
|
||||
this.$refs.queryForm.resetFields();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加一些样式 */
|
||||
</style>
|
||||
Loading…
Reference in New Issue