1:新增dialog
父组件:
<template> <div class="main-wrap"> <el-button type="primary" @click="add('addOrder')">添加</el-button> <add-order ref="addOrder" :visible.sync=" addOrderVisible"></add-order> </div> </template> <script> import Add from './add.vue' export default { data(){ return { addOrderVisible: false } }, methods: { add(refForm){ if(this.$refs[refForm]){ this.$refs[refForm].initForm(); } this.addOrderVisible= !this.addOrderVisible; } }, components: { 'add-order': Add } } </script>
子组件:
<template> <el-dialog :data="visible" :visible.sync="visible" :show-close="false" width="600px" :modal="true" :close-on-click-modal="false" :close-on-press-escape="false"> <h2 slot="title">添加订单</h2> <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button> <el-form class="form-wrapper" ref="orderForm" :model="orderForm" :rules="addRules" label-width="110px"> <el-form-item label="联系人:" prop="fromContact"> <el-input v-model="orderForm.fromContact" type="text" placeholder="请输入联系人名称"></el-input> </el-form-item> <el-form-item label="联系电话:" prop="fromPhone"> <el-input v-model="orderForm.fromPhone" type="text" placeholder="请输入联系电话"></el-input> </el-form-item> <el-form-item label="用车时间:" prop="orderTime"> <el-date-picker v-model="orderForm.orderTime" :picker-options="minDateOpt" type="datetime" placeholder="请选择用车时间" format="yyyy-MM-dd HH:mm" style="width: 100%;"></el-date-picker> </el-form-item> <el-form-item label="上车地点:" prop="sname"> <el-input id="sname" v-model="orderForm.sname" type="text" placeholder="请输入上车地点"> <i class="el-icon-location-outline el-input__icon" slot="suffix"></i> </el-input> </el-form-item> <el-form-item label="下车地点:" prop="dname"> <el-input id="dname" v-model="orderForm.dname" type="text" placeholder="请输入下车地点"> <i class="el-icon-location-outline el-input__icon" slot="suffix"></i> </el-input> </el-form-item> <el-form-item label="车辆类型:" prop="carTypeOpt"> <el-select v-model="orderForm.carType" multiple placeholder="请选择车辆类型" style="width: 100%;"> <el-option v-for="option in carTypeOptions" :key="option.value" :label="option.label" :value="option.value"> </el-option> </el-select> </el-form-item> <el-form-item label="用车备注:"> <el-input v-model="orderForm.remark" type="text" placeholder="请输入用车说明,例:大件行李"></el-input> </el-form-item> </el-form> <div slot="footer" class="buttons-wrap"> <el-button type="primary">确定</el-button> </div> </el-dialog> </template> <script> export default { props: { visible: { type: Boolean, default: false } }, data(){ return { carTypeOptions: [ {value: 1, label: '经济型'}, {value: 2, label: '舒适型'}, {value: 3, label: '商务型'}, {value: 4, label: '豪华型'}, {value: 5, label: '巴士型'} ], minDateOpt: { disabledDate: function (date) { return date.getTime()<new Date().getTime() - 3600 * 1000 * 24; } }, orderForm: {}, addRules: { fromContact: [{ required: true, message: "请输入联系人姓名", trigger: 'blur'}], fromPhone: [{required: true, message: "请输入", trigger: 'blur'}], orderTime: [{required: true, message: "请输入", trigger: 'change'}], sname: [{required: true, message: "请输入", trigger: 'change'}], dname: [{required: true, message: "请输入", trigger: 'change'}], carTypeOpt: [{required: true, message: "请输入", trigger: 'blur'}] } } }, methods: { initForm(){ this.orderForm = { companyId: 0, fromContact: '', fromPhone: '', orderTime: '', sname: '', dname: '', carType: [], remark: '' }; if(this.$refs.orderForm){ this.$refs.orderForm.resetFields(); } }, cancelModal(){ this.$emit('update:visible', false); } } } </script> <style lang="scss" scoped> .buttons-wrap { .el-button { margin-right: 20px; min-width: 100px; } } .multiple-input-box .el-input:not(:last-child) { margin-bottom: 8px; } </style>
2:在只需要显示详情内容的情况下,也可以采取只把内容放到子组件中,头部和底部按钮都放在父组件中,把需要的参数传到子组件中即可。
父组件:
<template> <div class="main-wrap"> <el-button type="primary" @click="showDetail()">详情</el-button> <el-dialog :visible.sync="detailVisible" width="600px" :modal="true"> <h2 slot="title">详情</h2> <detail ref="newOrderDetail" :newOrderDetail="newOrderDetail"></detail> <div slot="footer" class="detail-wrap-bottom"> <el-button type="text">确认</el-button> <el-button type="text">退回</el-button> </div> </el-dialog> </div> </template> <script> import detail from './detail' export default { data(){ return { detailVisible: false, newOrderDetail: {} } }, methods: { showDetail(){ this.newOrderDetail = {id: 8, orderTime: '5月14日 16:00', carType: '豪华型', sname: '深圳福田', dname: '深圳宝安国际机场', fromContact: 'Thomas', fromPhone: '15812345678', remark: '大件行李', reason : '新项目洽谈。有客户同行', vehicleLicense: '粤BRP524', driverName: '林师傅'}; this.detailVisible= !this.detailVisible; } }, components: { detail: detail } } </script>
子组件:
<template> <div class="detail-wrap" :data="newOrderDetail"> <ul> <li><span>用车联系人:</span><div>{{newOrderDetail.fromContact}}</div></li> <li><span>联系人电话:</span><div>{{newOrderDetail.fromPhone}}</div></li> <li><span>用车时间:</span><div>{{newOrderDetail.orderTime}}</div></li> <li><span>上车地点:</span><div>{{newOrderDetail.sname}}</div></li> <li><span>下车地点:</span><div>{{newOrderDetail.dname}}</div></li> <li><span>车辆类型:</span><div>{{newOrderDetail.carType}}</div></li> <li v-show="newOrderDetail.remark!=''"><span>用车说明:</span><div>{{newOrderDetail.remark}}</div></li> </ul> </div> </template> <script> export default { props: { newOrderDetail: { type: Object, default: null } }, data() { return { loading: false } } } </script> <style lang="scss" scoped> .detail-wrap ul { max-height: 400px; overflow: auto; li { position: relative; padding: 8px; font-size: 1rem; span { position: absolute; width: 90px; } & > div { margin-left: 90px; } } } </style>