vue弹窗之表单提交（el-dialog+el-form）,将表单分页以幻灯片的形式播放+整体表单提交

<template>
  <el-dialog :title="title" :visible.sync="visible" @opened="openInit" class="meet-template" :modal-append-to-body="false" width="880px">
    <el-form id="acc-pre-meet" ref="form" :model="form" :disabled="disabled">
      <el-row>
        <el-col :span="3" class="generalTitle">
          <el-form-item>
            带班主任
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="headTeacher">
            <el-input v-model="form.headTeacher" maxlength="10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3" class="generalTitle">
          <el-form-item>
            记录人
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="a_1">
            <el-input v-model="form.a_1" maxlength="10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3" class="generalTitle">
          <el-form-item>
            时间
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="createTime">
            <el-date-picker v-model="form.createTime" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="textarea-row">
        <el-col :span="3" class="line-height-unset">
          <el-form-item>人员状况</el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item prop="d_1">
            <div v-if="isPdf" class="pdf-textarea-div">{{form.d_1}}</div>
            <el-input type="textarea" v-model="form.d_1" resize="none" maxlength="100" v-if="!isPdf"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="textarea-row">
        <el-col :span="3" class="line-height-unset">
          <el-form-item>重要计划</el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item prop="d_2">
            <div v-if="isPdf" class="pdf-textarea-div">{{form.d_2}}</div>
            <el-input type="textarea" v-model="form.d_2" resize="none" maxlength="100" v-if="!isPdf"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="textarea-row">
        <el-col :span="3" class="line-height-unset">
          <el-form-item>设备状况</el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item prop="d_3">
            <div v-if="isPdf" class="pdf-textarea-div">{{form.d_3}}</div>
            <el-input type="textarea" v-model="form.d_3" resize="none" maxlength="100" v-if="!isPdf"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="textarea-row">
        <el-col :span="3" class="line-height-unset">
          <el-form-item>天气状况</el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item prop="d_4">
            <div v-if="isPdf" class="pdf-textarea-div">{{form.d_4}}</div>
            <el-input type="textarea" v-model="form.d_4" resize="none" maxlength="100" v-if="!isPdf"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="textarea-row">
        <el-col :span="3" class="line-height-unset">
          <el-form-item>军航活动</el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item prop="d_7">
            <div v-if="isPdf" class="pdf-textarea-div">{{form.d_7}}</div>
            <el-input type="textarea" v-model="form.d_7" resize="none" maxlength="100" v-if="!isPdf"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="textarea-row">
        <el-col :span="3" class="line-height-unset">
          <el-form-item>通用航空</el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item prop="d_8">
            <div v-if="isPdf" class="pdf-textarea-div">{{form.d_8}}</div>
            <el-input type="textarea" v-model="form.d_8" resize="none" maxlength="100" v-if="!isPdf"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="textarea-row">
        <el-col :span="3" class="line-height-unset">
          <el-form-item>文件学习</el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item prop="d_9">
            <div v-if="isPdf" class="pdf-textarea-div">{{form.d_9}}</div>
            <el-input type="textarea" v-model="form.d_9" resize="none" maxlength="100" v-if="!isPdf"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="textarea-row">
        <el-col :span="3" class="line-height-unset">
          <el-form-item>其他事项</el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item prop="d_10">
            <div v-if="isPdf" class="pdf-textarea-div">{{form.d_10}}</div>
            <el-input type="textarea" v-model="form.d_10" resize="none" maxlength="100" v-if="!isPdf"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="textarea-row">
        <el-col :span="3" class="line-height-unset">
          <el-form-item>班组成员</el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item prop="d_11">
            <div v-if="isPdf" class="pdf-textarea-div">{{form.d_11}}</div>
            <el-input type="textarea" v-model="form.d_11" resize="none" maxlength="100" v-if="!isPdf"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button class="mBtn" type="primary" size="small" @click="onOK" v-if="this.flag !== 'look'">确 定</el-button>
      <!-- <el-button class="mBtn" @click="onResetForm" v-if="this.flag !== 'look'"
          >重 置</el-button
        > -->
      <el-button class="mBtn" type="primary" size="small" @click="onSaveTemplate" v-if="this.flag == 'look'">保存模板</el-button>
      <el-button size="small" type="primary" class="mBtn" @click="toPdf()">导出</el-button>
      <el-button size="small" class="mBtn" @click="onCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import htmlToPdf from '@/utils/htmlToPdf.js';
import { getTeamMeetingById } from "@/api/teamMeeting.js";
import { getTodayMilitary, getTodayGa } from "@/utils/comInfoService/comInfoService.js";
export default {
  data() {
    return {
      title: "新增班前讲评",
      disabled: false,
      form: {
        headTeacher: "",
        a_1: "",
        createTime: new Date(),

        d_1: "",
        d_2: "",
        d_3: "",
        d_4: "",
        d_5: "",
        d_6: "",
        d_7: "",
        d_8: "",
        d_9: "",
        d_10: "",
        d_11: "",
      },
      isPdf: false, //是否在打印中，true：将div替换textarea，false，隐藏div，显示textarea
    };
  },
  props: {
    meetVisible: {
      require: false,
      type: Boolean,
      default: true,
    },
    id: {
      type: String,
      default: null,
    },
    flag: {
      type: String,
      default: "add",
    },
  },
  computed: {
    visible: {
      get() {
        return this.meetVisible;
      },
      set(val) {
        this.$emit("update:meetVisible", val);
      },
    },
  },
  methods: {
    //打开窗口初始化
    openInit() {
      //重置表单
      this.onResetForm();
      if (this.id) {
        if (this.flag == "look") {
          this.title = "查看班前讲评";
          //表单设为不可编辑
          this.disabled = true;
        } else {
          this.title = "修改班前讲评";
          this.disabled = false;
        }
      } else {
        this.title = "新增班前讲评";
        this.disabled = false;

        //获取军航计划
        getTodayMilitary().then(res => {
          this.form.d_7 = res;
        });
        //获取通航活动
        getTodayGa().then(res => {
          this.form.d_8 = res;
        });
      }

      if (this.id) {
        getTeamMeetingById({ id: this.id }).then((res) => {
          var data = res.data.data;
          this.form = JSON.parse(data.meetingContent);
        });
      }
    },

    //重置表单
    onResetForm() {
      if (this.$refs.form) {
        this.$refs.form.resetFields();
        this.form.createTime = new Date();
      }
    },

    //确定
    onOK() {
      var data = { ...this.form };
      if (this.flag == "update") {
        data.id = this.id;
      }
      this.$emit("getFormData", data, "pre", this.flag);
    },

    //取消
    onCancel() {
      this.$emit("update:meetVisible", false);
    },

    //导出
    toPdf() {
      this.isPdf = true;
      this.$nextTick(() => {
        document.getElementById("acc-pre-meet").classList.add("export-pdf-style");
        htmlToPdf.getPdfFromHtml('#acc-pre-meet', this.$common.parseTime(new Date(this.form.createTime), '{y}-{m}-{d}') + '区域管制室班前准备记录表');
        document.getElementById("acc-pre-meet").classList.remove("export-pdf-style");

        this.isPdf = false;
      })
    },
  },
};
</script>
<style src="./meet-template.css" scoped></style>
<style scoped>
.generalTitle {
  background: #555555;
}

.line-height-unset {
  background: #555555;
}
</style>