Files
zhxg_pc/src/views/routine/dis/formSt.vue

948 lines
31 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="application-form-container" style="display: flex; justify-content: center; align-items: center">
<div id="print" ref="print" style="width: auto;">
<h2 class="form-title">广西水利电力职业技术学院</h2>
<h3 class="form-subtitle">退役复学申请表</h3>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<table class="application-table">
<!-- 基本信息行1 -->
<tr>
<td class="label">姓名</td>
<td class="input-cell">
<!-- <el-form-item prop="stName" class="form-item-custom">
<el-input v-model="form.stName" placeholder="请输入姓名" class="basic-input" disabled></el-input>
</el-form-item> -->
{{ form.stName }}
</td>
<td class="label">性别</td>
<td class="input-cell">
<!-- <el-form-item prop="sex" class="form-item-custom">
<el-select v-model="form.sex" placeholder="请选择性别" class="basic-input" disabled>
<el-option label="男" value="0"></el-option>
<el-option label="女" value="1"></el-option>
</el-select>
</el-form-item> -->
{{ form.sex }}
</td>
<td class="label">民族</td>
<td class="input-cell">
<!-- <el-form-item prop="nations" class="form-item-custom">
<el-input v-model="form.nations" placeholder="请输入民族" class="basic-input" disabled></el-input>
</el-form-item> -->
<!-- 用dict-tag组件渲染字典标签 -->
<dict-tag :options="dict.type.rt_nation" :value="form.nations" />
</td>
<td class="label">班级</td>
<td class="input-cell" colspan="2">
<!-- <el-form-item prop="stClass" class="form-item-custom">
<el-input v-model="form.stClass" placeholder="请输入年级" class="basic-input" disabled></el-input>
</el-form-item> -->
{{ form.stClass }}
</td>
</tr>
<!-- 专业学号班级行 -->
<tr>
<td class="label">学号</td>
<td class="input-cell">
<!-- <el-form-item prop="stId" class="form-item-custom">
<el-input v-model="form.stId" placeholder="请输入学号" class="basic-input" type="textarea" disabled
:rows="3"></el-input>
</el-form-item> -->
{{ form.stId }}
</td>
<td class="label" rowspan="2">专业<br />名称</td>
<td class="input-cell" colspan="3" rowspan="2">
<!-- <el-form-item prop="majors" class="form-item-custom">
<el-input v-model="form.majors" placeholder="请输入专业名称" class="major-input" type="textarea" disabled
:rows="3"></el-input>
</el-form-item> -->
{{ form.majors }}
</td>
<td class="label">联系电话</td>
<td class="input-cell" colspan="2">
<!-- <el-form-item prop="datab" class="form-item-custom">
<el-input v-model="form.datab" placeholder="请输入电话" class="basic-input" type="textarea" disabled
:rows="3"></el-input>
</el-form-item> -->
{{ form.datab }}
</td>
</tr>
<tr></tr>
<tr>
<td class="label" rowspan="4">申请<br />理由</td>
<td class="input-cell" colspan="8" rowspan="4">
<p class="reason-text">本人于
<!-- <el-form-item prop="rwTime" class="form-item-custom inline-item">
<el-date-picker v-model="form.rwTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
value-format="yyyy-MM-dd" class="date-picker"></el-date-picker>
</el-form-item> -->
{{ form.rwTime | formatDate }}
应征入伍
<!-- <el-form-item prop="dataa" class="form-item-custom inline-item">
<el-date-picker v-model="form.dataa" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
value-format="yyyy-MM-dd" class="date-picker"></el-date-picker>
</el-form-item> -->
{{ form.dataa | formatDate }}
日退役退役后申请复学
</p>
<p class="reason-text" style="" v-if="form.conversion == 'Y'">是否申请转专业
</p>
<p class="reason-text" style="" v-else>是否申请转专业 ×
</p>
<p v-if="form.conversion === 'Y'" class="reason-text" style="color: red;">原年级和专业:__
{{ form.maList.length > 0 ? form.maList[0].oldgrade : '' }}
__{{ form.maList.length > 0 ? form.maList[0].oldmajor : '' }}__
<!-- <el-input v-model="form.maList.oldgrade" type="textarea" :rows="3"
class="opinion-textarea">{{oldgrade}}</el-input> -->
<!-- <el-input v-model="form.maList.oldgrade" type="textarea" :rows="3"
class="opinion-textarea"></el-input> -->
申请转入年级和专业__
{{ saveGradeName }}
__
{{ saveClassName }}__
</p>
<image-preview v-if="form.maList.length > 0 && form.maList[0].proof" :src="form.maList[0].proof"
:width="240" :height="160" />
<span v-else></span>
<image-preview v-if="form.maList.length > 0 && form.maList[0].idcard" :src="form.maList[0].idcard"
:width="240" :height="160" />
<span v-else></span>
<image-preview v-if="form.maList.length > 0 && form.maList[0].material" :src="form.maList[0].material"
:width="240" :height="160" />
<span v-else></span>
<p class="attachment-tip"></p>
<div class="applicant-info right-align">
<span>申请人</span>
<!-- <el-input v-model="form.stName" readonly class="applicant-input" disabled></el-input> -->
{{ form.stName }}
<span class="date-label">日期</span>
<!-- <el-form-item prop="times" class="form-item-custom inline-item">
<el-date-picker v-model="form.times" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker>
</el-form-item> -->
{{ form.times | formatDate }}
</div>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<!-- 招生意见行 -->
<tr v-if="form.conversion === 'Y'">
<td class="label" rowspan="4">招生与<br />就业处<br />意见</td>
<td class="input-cell" colspan="8" rowspan="4">
<p class="reason-text" style="color: red;">符合转专业条件拟同意转入年级和专业
__{{ saveGradeName }}
__
{{ saveClassName }}__
</p>
<div class="signature-area right-align">
<span>审批结果</span>
<el-select v-model="form.zsStatus" placeholder="" class="short-select" disabled>
<el-option label="重新审核" value="0"></el-option>
<el-option label="通过" value="1"></el-option>
<el-option label="退回" value="2"></el-option>
<el-option label="驳回" value="3"></el-option>
</el-select>
<span class="date-label">签名</span>
<!-- <el-input v-model="form.idea" placeholder="请输入姓名" class="signature-input" disabled></el-input> -->
{{ form.zsIdea }}
<span class="date-label">日期</span>
<!-- <el-date-picker v-model="form.time" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
{{ form.zsTime | formatDate }}
</div>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<!-- 辅导员意见行 -->
<tr>
<td class="label" rowspan="4">辅导员<br />意见</td>
<td class="input-cell" colspan="8" rowspan="4">
<!-- <el-input v-model="form.fdIdea" type="textarea" :rows="3" placeholder="请填写辅导员意见..." disabled
class="opinion-textarea"></el-input> -->
{{ form.fdIdea }}
<div class="signature-area right-align">
<span>审批结果</span>
<el-select v-model="form.fdStatus" placeholder="待审核" class="short-select" disabled>
<el-option label="重新审核" value="0"></el-option>
<el-option label="通过" value="1"></el-option>
<el-option label="退回" value="2"></el-option>
<el-option label="驳回" value="3"></el-option>
</el-select>
<span class="date-label">签名</span>
<!-- <el-input v-model="form.fdQm" placeholder="请输入姓名" class="signature-input" disabled></el-input> -->
{{ form.fdQm }}
<span class="date-label">日期</span>
<!-- <el-date-picker v-model="form.fdTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
{{ form.fdTime | formatDate }}
</div>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<!-- 学务意见行 -->
<tr>
<td class="label" rowspan="4">学务<br />意见</td>
<td class="input-cell" colspan="8" rowspan="4">
<!-- <el-input v-model="form.xwIdea" type="textarea" :rows="3" placeholder="请填写意见..."
class="opinion-textarea"></el-input> -->
<div v-if="form.xwStatus == '0' || form.xwStatus == null || form.xwStatus == '2'" >{{ form.xwIdea }}拟编入____</div>
<!-- 同意 -->
<div v-if="form.xwStatus == '1'">{{ form.xwIdea || '暂无意见' }},拟编入__{{finalGradeName}}_{{finalClassName}}__</div>
<div class="signature-area right-align">
<span>审批结果</span>
<el-select v-model="form.xwStatus" placeholder="待审核" class="short-select" disabled>
<el-option label="重新审核" value="0"></el-option>
<el-option label="通过" value="1"></el-option>
<el-option label="退回" value="2"></el-option>
<el-option label="驳回" value="3"></el-option>
</el-select>
<span class="date-label">签名</span>
<!-- <el-input v-model="form.xwQm" placeholder="请输入姓名" class="signature-input" disabled></el-input> -->
{{ form.xwQm }}
<span class="date-label">日期</span>
<!-- <el-date-picker v-model="form.xwTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
{{ form.xwTime | formatDate }}
</div>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<!-- 二级意见行 -->
<tr>
<td class="label" rowspan="4">二级学<br />院意见</td>
<td class="input-cell" colspan="8" rowspan="4">
<!-- <el-input v-model="form.twoIdea" type="textarea" :rows="3" placeholder="请填写意见..."
class="opinion-textarea"></el-input> -->
{{ form.twoIdea }}
<div class="signature-area right-align">
<span>审批结果</span>
<el-select v-model="form.twoStatus" placeholder="待审核" class="short-select" disabled>
<el-option label="重新审核" value="0"></el-option>
<el-option label="通过" value="1"></el-option>
<el-option label="退回" value="2"></el-option>
<el-option label="驳回" value="3"></el-option>
</el-select>
<span class="date-label">签名</span>
<!-- <el-input v-model="form.erQm" placeholder="请输入姓名" class="signature-input" disabled></el-input> -->
{{ form.erQm }}
<span class="date-label">日期</span>
{{ form.twoTime | formatDate }}
<!-- <el-date-picker v-model="form.twoTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
</div>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<!-- 学籍管理科意见行 -->
<tr>
<td class="label" rowspan="4">学籍管<br />理科意见</td>
<td class="input-cell" colspan="8" rowspan="4">
<!-- <el-input v-model="form.xjIdea" type="textarea" :rows="3" placeholder="请填写意见..." disabled
class="opinion-textarea"></el-input> -->
{{ form.xjIdea }}
<div class="signature-area right-align">
<span>审批结果</span>
<el-select v-model="form.xjglStatus" placeholder="待审核" class="short-select" disabled>
<el-option label="重新审核" value="0"></el-option>
<el-option label="通过" value="1"></el-option>
<el-option label="退回" value="2"></el-option>
<el-option label="驳回" value="3"></el-option>
</el-select>
<span class="date-label">签名</span>
<!-- <el-input v-model="form.xjQm" placeholder="请输入姓名" class="signature-input" disabled></el-input> -->
{{ form.xjQm }}
<span class="date-label">日期</span>
{{ form.xjTime | formatDate }}
<!-- <el-date-picker v-model="form.xjTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
</div>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<!-- 教务处主意见行 -->
<tr>
<td class="label" rowspan="4">教务处<br />主管领导意见</td>
<td class="input-cell" colspan="8" rowspan="4">
<!-- <el-input v-model="form.jwIdea" type="textarea" :rows="3" placeholder="请填写意见..." disabled
class="opinion-textarea"></el-input> -->
{{ form.jwIdea }}
<div class="signature-area right-align">
<span>审批结果</span>
<el-select v-model="form.jwStatus" placeholder="待审核" class="short-select" disabled>
<el-option label="重新审核" value="0"></el-option>
<el-option label="通过" value="1"></el-option>
<el-option label="退回" value="2"></el-option>
<el-option label="驳回" value="3"></el-option>
</el-select>
<span class="date-label">签名</span>
<!-- <el-input v-model="form.jwQm" placeholder="请输入姓名" class="signature-input" disabled></el-input> -->
{{ form.jwQm }}
<span class="date-label">日期</span>
{{ form.jwTime | formatDate }}
<!-- <el-date-picker v-model="form.jwTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
</div>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
<!-- 说明信息 -->
<div class="form-description">
<p>说明1.本表应附学生入伍证明材料复印件</p>
<p>2.本表一式两份二级学院和教务处各留存一份</p>
</div>
<!-- 操作按钮 -->
<!-- <div class="form-btn-group"> -->
<!-- <el-button type="primary" @click="submitForm">提交审核</el-button> -->
<!-- <el-button @click="resetForm">重置表单</el-button> -->
<!-- <el-button type="text" @click="printForm">打印表单</el-button> -->
<!-- </div> -->
</el-form>
</div>
<!-- 按钮 -->
<div class="form-btn-group">
<el-button type="primary" @click="doPrint">打印表单</el-button>
</div>
</div>
</template>
<script>
import { listBasic, getBasic, delBasic, addBasic, updateBasic } from "@/api/routine/basic";
import { listStudent, getClassName } from '@/api/stuCQS/basedata/student'
import { listGrade } from '@/api/stuCQS/basedata/grade'
import print from 'print-js'
export default {
name: "Basic",
dicts: ['sys_yes_no', 'sys_user_sex', 'rt_filling_college', 'sys_commit_status', 'sys_teacher_kpi_filling_year', 'rt_nation', 'rt_classes'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 退伍复学申请表格数据
basicList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 班级名称列表
ClassNameList: [],
// 最终班级名称
finalClassName: null,
// 最终年级名称
finalGradeName:null,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
fxId: null,
fxTime: null,
stId: null,
stName: null,
fdName: null,
sex: null,
nations: null,
fdQm: null,
xwQm: null,
erQm: null,
xjQm: null,
jwQm: null,
stClass: null,
majors: null,
grade: null,
college: null,
reasons: null,
fdIdea: null,
twoIdea: null,
xwIdea: null,
xjIdea: null,
jwIdea: null,
zsIdea: null,
zsStatus: null,
times: null,
fdStatus: null,
xwStatus: null,
twoStatus: null,
xjglStatus: null,
jwStatus: null,
rwTime: null,
zsTime: null,
fdTime: null,
xwTime: null,
twoTime: null,
xjTime: null,
jwTime: null,
datab: null,
dataa: null,
conversion: null,
processId: null,
deployId: null
},
// 班级名称
saveClassName:null,
// 年级名称
saveGradeName:null,
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
this.showData()
},
methods: {
// 获取学务班级名称列表
getXWClassNameList() {
getClassName().then(res => {
this.ClassNameList = res.data;
if (this.ClassNameList != null) {
this.ClassNameList.forEach(element => {
if (element.value == this.form.maList[0].finaldata1) {
element.children.forEach(elementTwo => {
if (elementTwo.value == this.form.maList[0].finaldata2) {
elementTwo.children.forEach(elementFree => {
if (elementFree.value == this.form.maList[0].newmajor) {
this.finalClassName = elementFree.label;
this.classVlue1 = [element.value, elementTwo.value, elementFree.value];
// 关键修复:从年级列表中查找年级名称,而不是直接使用 element.label
const gradeId = element.value;
const gradeItem = this.grade_list.find(item => item.gradeId === gradeId);
if (gradeItem) {
this.finalGradeName = gradeItem.gradeName; // 正确的年级名称
this.$set(this.form.maList[0], 'finallabel', gradeItem.gradeId); // 正确的年级ID
}
}
});
}
});
}
});
}
})
},
/** 获取班级名称列表 */
getClassNameList() {
getClassName().then(res => {
this.ClassNameList = res.data
console.log(this.ClassNameList)
if (this.ClassNameList != null) {
this.ClassNameList.forEach(element => {
if (element.value == this.form.maList[0].data1) {
// console.log(element.label)
element.children.forEach(elementTwo => {
if (elementTwo.value == this.form.maList[0].data2) {
// console.log(elementTwo.label)
this.saveClassName =elementTwo.label
// 班级
// elementTwo.children.forEach(elementFree => {
// this.saveClassName = elementFree.label
// // console.log(elementFree.label)
// });
}
});
}
});
}
})
},
// 打印方法
doPrint() {
printJS({
printable: 'print',
type: 'html',
targetStyles: ['*'],
style: '@page {margin:2.4cm 2cm ;resolution: 300dpi;}',
onPrintDialogClose: (this.erexcel = false),
targetStyles: ['*'],
font_size: '',
})
},
// 回显数据
showData() {
if (this.$route.query.id != undefined) {
console.log(this.$route.query.id)
getBasic(this.$route.query.id).then((response) => {
this.form = response.data
this.getClassNameList()
this.listGrade()
this.getXWClassNameList()
// this.active = response.data.status + 1;
})
}
},
/** 获取年级列表 */
async listGrade() {
try {
let res = await listGrade()
if (res.code == 200) {
this.grade_list = [...res.rows]
console.log(this.grade_list)
this.grade_list.forEach(element => {
if(element.gradeId == this.form.maList[0].newgrade){
this.saveGradeName = element.gradeName
}
if (element.gradeId == this.form.maList[0].finallabel) {
this.finalGradeName = element.gradeName
}
});
}
} catch (error) {
console.error('获取年级列表失败:', error)
}
},
/** 查询退伍复学申请列表 */
getList() {
this.loading = true;
listBasic(this.queryParams).then(response => {
this.basicList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
fxId: null,
fxTime: null,
stId: null,
stName: null,
fdName: null,
sex: null,
nations: null,
fdQm: null,
xwQm: null,
erQm: null,
xjQm: null,
jwQm: null,
stClass: null,
majors: null,
grade: null,
college: null,
reasons: null,
fdIdea: null,
twoIdea: null,
xwIdea: null,
xjIdea: null,
jwIdea: null,
zsIdea: null,
zsStatus: null,
times: null,
fdStatus: null,
xwStatus: null,
twoStatus: null,
xjglStatus: null,
jwStatus: null,
rwTime: null,
zsTime: null,
fdTime: null,
xwTime: null,
twoTime: null,
xjTime: null,
jwTime: null,
datab: null,
dataa: null,
conversion: null,
processId: null,
deployId: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加退伍复学申请";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getBasic(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改退伍复学申请";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateBasic(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addBasic(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除退伍复学申请编号为"' + ids + '"的数据项?').then(function () {
return delBasic(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},
/** 导出按钮操作 */
handleExport() {
this.download('routine/basic/export', {
...this.queryParams
}, `basic_${new Date().getTime()}.xlsx`)
}
}
};
</script>
<style scoped>
.application-form-container {
width: 100%;
padding: 30px;
box-sizing: border-box;
font-family: "Source Han Sans CN", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.form-title {
text-align: center;
font-size: 20px;
font-weight: 700;
color: #222;
margin: 0 0 12px 0;
}
.form-subtitle {
text-align: center;
font-size: 18px;
font-weight: 600;
color: #222;
margin: 0 0 25px 0;
}
.application-table {
width: 100%;
border-collapse: separate;
/* 关键使用separate替代collapse */
border-spacing: 0;
/* 消除单元格间距 */
border: 1.5px solid #000;
background-color: #fff;
position: relative;
z-index: 1;
}
.application-table td {
border: 1px solid #000;
padding: 8px;
vertical-align: top;
position: relative;
/* 关键:为子元素提供定位上下文 */
}
.label {
width: 80px;
text-align: center;
background-color: #f5f5f5;
font-weight: 600;
line-height: 1.6;
vertical-align: middle !important;
}
.input-cell {
min-height: 36px;
padding-top: 20px !important;
padding-bottom: 25px !important;
/* 关键:预留验证提示空间 */
}
/* 解决验证提示遮挡核心样式 */
.form-item-custom {
position: relative;
margin-bottom: 0 !important;
}
.el-form-item__error {
position: absolute !important;
left: 0 !important;
bottom: -22px !important;
/* 显示在单元格内预留空间 */
background: #f56c6c !important;
color: #fff !important;
padding: 2px 6px !important;
border-radius: 2px !important;
z-index: 10 !important;
white-space: nowrap !important;
font-size: 12px !important;
box-shadow: none !important;
}
.inline-item {
display: inline-block !important;
}
/* 输入控件样式 */
.basic-input {
width: 100%;
}
.major-input,
.address-input {
width: 100%;
min-height: 72px;
}
.opinion-textarea {
width: 100%;
min-height: 80px;
resize: none;
}
.date-picker {
width: 150px;
margin: 0 6px;
}
.date-picker.full-date {
width: 180px;
}
.applicant-input,
.signature-input {
width: 200px;
margin: 0 6px;
display: inline-block;
}
.short-select {
width: 120px;
margin: 0 10px;
display: inline-block;
}
/* 文本样式 */
.reason-text {
margin: 10px 0;
line-height: 2;
font-size: 14px;
}
.attachment-tip {
margin: 10px 0;
color: #666;
font-size: 13px;
}
.right-align {
text-align: right;
margin-top: 15px;
line-height: 2.2;
}
.date-label {
margin-left: 20px;
}
/* 按钮样式 */
.form-btn-group {
margin-top: 30px;
text-align: center;
}
.form-btn-group .el-button {
margin: 0 10px;
}
.form-description {
margin-top: 20px;
font-size: 13px;
line-height: 2;
padding-left: 10px;
}
/* 打印样式 */
@media print {
.form-btn-group {
display: none;
}
.el-input,
.el-select,
.el-textarea {
border: 1px solid #000 !important;
background: transparent !important;
}
.label {
background-color: #eee !important;
-webkit-print-color-adjust: exact;
}
.el-form-item__error {
display: none !important;
}
.input-cell {
padding-bottom: 8px !important;
}
}
/* 针对所有 .basic-input 去掉边框和背景 */
.basic-input {
border: none !important;
background: transparent !important;
box-shadow: none !important;
/* 去掉可能存在的阴影 */
}
.form-table {
font-family: "微软雅黑", sans-serif;
font-size: 14px;
border-collapse: collapse;
width: 100%;
}
.form-table th,
.form-table td {
border: 1px solid #000;
padding: 8px 12px;
text-align: left;
}
.form-table .label-cell {
background-color: #f5f5f5;
font-weight: bold;
}
/* 打印专用样式(继承系统样式,覆盖浏览器默认) */
@media print {
/* 强制打印时使用系统字体 */
body {
font-family: "微软雅黑", sans-serif !important;
font-size: 14px !important;
}
/* 确保表格边框、背景与系统一致(部分浏览器打印会忽略背景,需开启) */
.form-table {
border-collapse: collapse !important;
width: 100% !important;
-webkit-print-color-adjust: exact;
/* 强制打印背景色 */
print-color-adjust: exact;
}
.form-table th,
.form-table td {
border: 1px solid #000 !important;
padding: 8px 12px !important;
text-align: left !important;
}
.form-table .label-cell {
background-color: #f5f5f5 !important;
font-weight: bold !important;
}
/* 隐藏打印无关元素(如按钮) */
.no-print {
display: none !important;
}
}
</style>