Element弹窗封装 （带表单提交）

父组件

<template>
  <div class="ReportManagement">
     <!--此处省略表单-->
     <template slot-scope="scope">
        <div v-if="scope.row.recommendId" >
          <span @click="openDialog('edit', scope.row)" class="btn-color">[编辑]</span>
          <span @click="openDialog('add')" class="btn-color">[新增]</span>
        </div>
     </template>
     <!--此处省略表单 end-->
     <edit-dialog :visible="dialogVisible" 
                 :rule-form="ruleForm"                                                                                                       
                 @closeFindDialog="closeFindDialog"></edit-dialog>
  </div>
</template>
<script>
import editDialog from './components/editDialog';

const defaultQueryParams = {
  recommendEndDate:'', // 推荐结束时间
  recommendId:null, // 推荐id  新增传null  修改传推荐id
  recommendPlatform:['zx_wny'], // 推荐平台 zx_wny 维诺亚
  recommendStartDate:'', // 推荐开始
  reserveStartTime:'',
  reserveEndTime:'',
  reserveId:'', // 策略id
  reserveName:'', // 策略名称
};
export default {
  components: {
    editDialog,
  },
  data() {
    return{
      dialogVisible: false,     
      ruleForm:_.cloneDeep(defaultQueryParams), // 深拷贝
    }
  },
  methods: {
    openDialog(type, row) {
      if (type === 'add') { // 新增
        this.ruleForm = _.cloneDeep(defaultQueryParams);
      } else { // 编辑
        this.ruleForm = _.cloneDeep(row);
      }
      this.dialogVisible = true;
    },
    // 关闭弹窗
    closeFindDialog(val) {
      if (val) { // 子组件提交表单保存操作
        this.saveAdd(); 
      }
      this.dialogVisible = false;
    },
  }
}
</script>

子组件

<template>
  <div class="product_edit">
    <el-dialog
      title="产品推荐"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="800px"
      :show-close="false"
      center>

      <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="editForm">
        <el-container class="form-body">
          <el-form-item label="销售策略名称" prop="reserveName" class="pro-search"
                        :rules="{ required: true, message: '请输入销售策略名称', trigger: ['blur', 'change'] }">
            <el-autocomplete
              v-model="ruleForm.reserveName"
              value-key="name"
              :fetch-suggestions="querySearchAccount"
              placeholder="可查询销售策略名称"
              @select="handleSelectAccount"
              style="width: 400px"
            >
              <template slot-scope="{ item }">
                <div>{{ item.reserveName }}</div>
              </template>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-autocomplete>
          </el-form-item>
          <el-form-item label="产品预约档期" prop="reserveStartTime"
                        :rules="{ required: !(reserveTimeRange&&reserveTimeRange.length), message: '请填入预约时间', trigger: ['blur', 'change'] }">
            <el-date-picker v-model="reserveTimeRange"
                            :disabled="true"
                            @change="timeChange('reserve')"
                            type="datetimerange"
                            placeholder="请选择有效期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00','15:00:00']">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="推荐有效期" prop="recommendStartDate"
                        :rules="{ required: !(recommendTimeRange&&recommendTimeRange.length), message: '请选择有效期', trigger: ['blur', 'change'] }">
            <el-date-picker v-model="recommendTimeRange"
                            @change="timeChange('recommen')"
                            type="datetimerange"
                            placeholder="请选择有效期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00','15:00:00']">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="推荐平台" prop="recommendPlatform" class="displayKind"
                        :rules="{ required: true, message: '请勾选', trigger: 'change' }">
            <el-checkbox-group v-model="ruleForm.recommendPlatform" :disabled="true">
              <el-checkbox v-for="(item, index) in displayKindList" :key="index" :label="item.key" name="type">{{ item.value }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-container>
        <el-container class="btn-wrapper">
          <el-row>
            <el-button type="primary" size="medium" @click="submitForm">确定</el-button>
            <el-button size="medium" @click="closeFindDialog">取消</el-button>
          </el-row>
        </el-container>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue';
import { searchReserveDetail } from '@/admin/api/marketGround';
import { axiosCancel } from '@/config/fetch';

export default {
  props: {
    visible:{
      type:Boolean,
      default:false,
    },
    ruleForm:{
      type:Object,
      default:()=>{},
    },
  },
  data() {
    return {
      displayKindList: [{key: "zx_wny", value: '微诺亚'}],
      recommendTimeRange:[],
      reserveTimeRange:[],
      emptyAccountList: [{ accountName: '您当前尚无符合条件的客户哦', id: '', disabled: true }],
    };
  },
  watch: {
    'ruleForm' () {
      if (this.ruleForm.recommendId) {
        this.initData();
      }
    },
  },
  methods: {
    // 编辑详情
    initData() {
      this.reserveTimeRange = [this.ruleForm.reserveStartTime, this.ruleForm.reserveEndTime];
      this.recommendTimeRange = [this.ruleForm.recommendStartDate, this.ruleForm.recommendEndDate];
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.reserveTimeRange = [];
      this.recommendTimeRange = [];
    },
    submitForm () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.timeChange('reserve');
          this.timeChange('recommend');
          this.$emit("closeFindDialog", this.ruleForm);
        } else {
          return false;
        }
      });
    },
    timeChange(type) {
      let params = this.ruleForm;
      switch (type) {
        case 'reserve':
          params.reserveStartTime = this.reserveTimeRange ? this.reserveTimeRange[0] : '';
          params.reserveEndTime = this.reserveTimeRange ? this.reserveTimeRange[1] : '';
          break;
        default:
          params.recommendStartDate = this.recommendTimeRange ? this.recommendTimeRange[0] : '';
          params.recommendEndDate = this.recommendTimeRange ? this.recommendTimeRange[1] : '';
          break;
      }
    },
    // 查询策略
    async querySearchAccount(queryString, cb) {
      let serachResults;
      try {
        let params = {
          searchName: _.trim(queryString),
        };

        if (axiosCancel.searchReserveDetail) searchReserveDetail();
        let {data} = await searchReserveDetail(params);
        if (data.response) {
          serachResults = data.response;
        } else {
          serachResults = this.emptyAccountList;
        }
        cb(serachResults);
      } catch (e) {
        console.log(e);
      }
    },
    /**
     * 选中查询策略信息
     * */
    handleSelectAccount(item) {
      let today = Vue.moment(new Date()).format("YYYY-MM-DD 00:00:00");
      this.ruleForm.reserveId = item.id || null;
      this.reserveTimeRange = [item.reserveStartTime, item.reserveEndTime];
      this.recommendTimeRange = [today, item.reserveEndTime];
      this.ruleForm.reserveName = item.reserveName;
      console.log(this.ruleForm);
    },
    closeFindDialog() {
      this.$emit("closeFindDialog");
      this.resetForm();
    },
  },
};
</script>