<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>
vue弹窗之表单提交(el-dialog+el-form),将表单分页以幻灯片的形式播放+整体表单提交
于 2023-09-08 16:56:33 首次发布