一、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> import OrgTree from "@/views/components/OrgTree/index.vue"; export default { name: 'meQueryForm', components: { OrgTree }, data(){ return { formObj:{}, rules:'' } }, props:{ conf:{ 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) } } }; </script> <style lang="scss" scoped> @import "~@/assets/fourth/common.css"; </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" @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) //列表 }, } }
原文地址:http://www.cnblogs.com/Jishuyang/p/16870592.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性