vue2 二次封装 element --- el-form 表单自定义组件
一、form组件
<template> <div ref="searchHeader" class="div_search search_title" style="padding-right: 10px"> <el-form ref="dataForm" :model="formObj" label-position="left" label-width="84px"> <el-row v-for="(rows,i) in conf.fromItems" :key="rows[i].key"> <el-col v-for="cols in rows" :key="cols.key" :span="cols.colspan"> <el-form-item :label="cols.label" :label-width="cols.labelWidth" class="div_item input_search"> <!-- TODO slot --> <slot :name="cols.type"></slot> <!-- TODO el-input --> <el-input v-if="cols.type==='input' || cols.type=== 'text'" style="width: 200px;" :type="cols.type" v-model="formObj[cols.key]" :placeholder="cols.placeholder" :maxlength="cols.maxlength" show-word-limit> </el-input> <!-- TODO el-select --> <el-select v-else-if="cols.type==='select'" style="width: 200px;" clearable v-model="formObj[cols.key]"> <el-option value label="全部"></el-option> <el-option v-for="[key, value] of cols.option" :value="key" :label="value" :key="key"></el-option> </el-select> <!-- TODO el-date-picker --> <el-date-picker v-if="cols.type==='year'|| cols.type==='date'|| cols.type==='datetime'|| cols.type === 'daterange'" class="input_search" v-model="formObj[cols.key]" :value-format="cols.valueFormat" :format="cols.format" :type="cols.type" placeholder="开始日期" ></el-date-picker> </el-form-item> </el-col> <el-col :span="2"> <div class="left"> <el-button @click="getList" class="button_search" size="medium" type="primary">查询</el-button> </div> </el-col> <slot></slot> </el-row> </el-form> </div> </template> <script> export default { name: 'meQueryForm', data(){ return { formObj:{}, rules:'' } }, props:{ conf:{ type:Object },
default: { // 默认值对象
type: Object
},
},
watch:{
conf: {
handler(newVal, oldVal) {
newVal.fromItems.forEach( rows =>{
rows.forEach( item => {
this.$set(this.formObj,item.key,item.default)
})
})
},
immediate: true,
} },
methods:{
getList(){
this.$emit('getList',this.formObj)
},
/*** 设置高度*/
setHeight() {
var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
let maxHeight = screenHeight - this.$refs.searchHeader.clientHeight - 156;
this.$emit("setHeight", maxHeight);
}
}
};
</script>
<style lang="scss" scoped>
</style>
二、form 自定义数据
import { WORKFLOW_DELAY_STATUS_TYPE_MAP } from "@/utils/dic.js"; import moment from "moment"; /** * @param {string} label 标题 * @param {number,string,Array,Object,Boolean} default 默认值 * @param {string} key v-model 绑定字段 字段不能重复 * @param {string} string * @param {string} type * @param {string} colspan * @param {Array} option select 下拉的数据 * @param {Boolean} * @param 插槽slot 必须需要加key */ let datalist = new Map([ ['0', '正常'], ['1', '停用'], ]) export default { title : '查询', fromItems: [ [ {colspan:4.5,label:'所属机构', labelWidth:'80px', default:'', key:'orgId', placeholder:'', type:'org'}, {colspan:4.5,label:'所属部门', labelWidth:'80px', default:'', key:'department', placeholder:'', type:'department'}, {colspan:4.5, label:'开始日期', labelWidth:'80px', default:moment(new Date()).format("YYYY-01-01 00:00:00"), key:'startTime', placeholder:'', type:'date',valueFormat:'yyyy-MM-dd 00:00:00',format:'yyyy-MM-dd'}, { colspan:4.5,label:'结束日期', labelWidth:'80px', default:moment(new Date()).format("YYYY-MM-DD 23:59:59"), key:'endTime', placeholder:'', type:'date', valueFormat:'yyyy-MM-dd 00:00:00',format:'yyyy-MM-dd'}, {colspan:4.5,label:'审批状态', labelWidth:'100px', default:'', key:'approvalStatus', placeholder:'', type:'select', maxlength:'14', option:WORKFLOW_DELAY_STATUS_TYPE_MAP }, {colspan:4.5,label:'状态', labelWidth:'100px', default:'0', key:'status', placeholder:'', type:'select', maxlength:'14', option:datalist }, ] ] }
三、引入form组件
<me-query-form ref="form" :conf="conform" :default="conform" @getList="getLists"> <template v-slot:org> <org-tree @get-orgid="changeOrg"></org-tree> </template> <template v-slot:department> <department-options-tree :appendToBody="true" :departmentId.sync="searchQuery.departmentIds" :multiple="true" :isAll="true" :flat="true" :treeDepartmentId="searchQuery.departmentid" :orgId="searchQuery.orgId" ></department-options-tree> </template> </me-query-form>
import MeQueryForm from '../../../../components/meForm/meQueryForm'; // form自定义组件 import conform from './formData'; // form自定义数据
export default { components: { MeQueryForm, OrgTree, DialogFlowDetail, DialogEdit }, data() { return { conform:{
} } }, methods: { getLists(form){ let {startTime,endTime,status,approvalStatus} = form this.searchQuery.startTime = startTime this.searchQuery.endTime = endTime this.searchQuery.status = status this.searchQuery.approvalStatus = approvalStatus this.getList(1) //列表 }, } }