Files
zhxg_pc/src/views/routine/dis/formData.vue
2025-11-20 17:31:50 +08:00

705 lines
22 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">
<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"></el-input>
</el-form-item>
</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">
<el-option label="男" value="0"></el-option>
<el-option label="女" value="1"></el-option>
</el-select>
</el-form-item>
</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"></el-input>
</el-form-item>
</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"></el-input>
</el-form-item>
</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" :rows="3"></el-input>
</el-form-item>
</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" :rows="3"></el-input>
</el-form-item>
</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" :rows="3"></el-input>
</el-form-item>
</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"
value-format="yyyy-MM-dd" class="date-picker"></el-date-picker>
</el-form-item>
应征入伍
<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"
value-format="yyyy-MM-dd" class="date-picker"></el-date-picker>
</el-form-item> 日退役退役后申请复学
</p>
<p class="reason-text" style="" v-if="form.conversion=='Y'">是否申请转专业
</p>
<p class="reason-text" style="" v-else>是否申请转专业 ×
</p>
<p 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> -->
申请转入年级和专业__
{{ form.maList.length > 0 ? form.maList[0].newgrade : '暂无数据' }}
__
{{ form.maList.length > 0 ? form.maList[0].newmajor : '暂无数据' }}__
</p>
<p class="attachment-tip">设上传入伍通知书等佐证材料区域</p>
<div class="applicant-info right-align">
<span>申请人</span>
<el-input v-model="form.stName" readonly class="applicant-input"></el-input>
<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"
value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker>
</el-form-item>
</div>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<!-- 招生意见行 -->
<tr>
<td class="label" rowspan="4">招生与<br />就业处<br />意见</td>
<td class="input-cell" colspan="8" rowspan="4">
<p class="reason-text" style="color: red;">符合转专业条件拟同意转入年级和专业
__{{ form.maList.length > 0 ? form.maList[0].newgrade : '暂无数据' }}
__
{{ form.maList.length > 0 ? form.maList[0].newmajor : '暂无数据' }}__
</p>
<div class="signature-area right-align">
<span>审批结果</span>
<el-select v-model="form.status" placeholder="请选择" class="short-select">
<el-option label="通过" value="1"></el-option>
<el-option label="驳回" value="2"></el-option>
</el-select>
<span class="date-label">签名</span>
<el-input v-model="form.idea" placeholder="请输入姓名" class="signature-input"></el-input>
<span class="date-label">日期</span>
<el-date-picker v-model="form.time" type="date" placeholder="选择日期"
format="yyyy-MM-dd" 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.fdIdea" type="textarea" :rows="3" placeholder="请填写辅导员意见..."
class="opinion-textarea"></el-input>
<div class="signature-area right-align">
<span>审批结果</span>
<el-select v-model="form.fdStatus" placeholder="请选择" class="short-select">
<el-option label="通过" value="1"></el-option>
<el-option label="驳回" value="2"></el-option>
</el-select>
<span class="date-label">签名</span>
<el-input v-model="form.fdQm" placeholder="请输入姓名" class="signature-input"></el-input>
<span class="date-label">日期</span>
<el-date-picker v-model="form.fdTime" type="date" placeholder="选择日期"
format="yyyy-MM-dd" 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">
<p>拟编入</p>
<div class="signature-area right-align">
<span>审批结果</span>
<el-select v-model="form.xwStatus" placeholder="请选择" class="short-select">
<el-option label="通过" value="1"></el-option>
<el-option label="驳回" value="2"></el-option>
</el-select>
<span class="date-label">签名</span>
<el-input v-model="form.xwQm" placeholder="请输入姓名" class="signature-input"></el-input>
<span class="date-label">日期</span>
<el-date-picker v-model="form.xwTime" type="date" placeholder="选择日期"
format="yyyy-MM-dd" 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.twoIdea" type="textarea" :rows="3" placeholder="请填写意见..."
class="opinion-textarea"></el-input>
<div class="signature-area right-align">
<span>审批结果</span>
<el-select v-model="form.twoStatus" placeholder="请选择" class="short-select">
<el-option label="通过" value="1"></el-option>
<el-option label="驳回" value="2"></el-option>
</el-select>
<span class="date-label">签名</span>
<el-input v-model="form.erQm" placeholder="请输入姓名" class="signature-input"></el-input>
<span class="date-label">日期</span>
<el-date-picker v-model="form.twoTime" type="date" placeholder="选择日期"
format="yyyy-MM-dd" 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="请填写意见..."
class="opinion-textarea"></el-input>
<div class="signature-area right-align">
<span>审批结果</span>
<el-select v-model="form.xjglStatus" placeholder="请选择" class="short-select">
<el-option label="通过" value="1"></el-option>
<el-option label="驳回" value="2"></el-option>
</el-select>
<span class="date-label">签名</span>
<el-input v-model="form.xjQm" placeholder="请输入姓名" class="signature-input"></el-input>
<span class="date-label">日期</span>
<el-date-picker v-model="form.xjTime" type="date" placeholder="选择日期"
format="yyyy-MM-dd" 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="请填写意见..."
class="opinion-textarea"></el-input>
<div class="signature-area right-align">
<span>审批结果</span>
<el-select v-model="form.jwStatus" placeholder="请选择" class="short-select">
<el-option label="通过" value="1"></el-option>
<el-option label="驳回" value="2"></el-option>
</el-select>
<span class="date-label">签名</span>
<el-input v-model="form.jwQm" placeholder="请输入姓名" class="signature-input"></el-input>
<span class="date-label">日期</span>
<el-date-picker v-model="form.jwTime" type="date" placeholder="选择日期"
format="yyyy-MM-dd" 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>
</template>
<script>
import { listBasic, getBasic, delBasic, addBasic, updateBasic } from "@/api/routine/basic";
export default {
name: "Basic",
dicts: ['sys_user_sex'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 退伍复学申请表格数据
basicList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
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
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
this.showData()
},
methods: {
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.active = response.data.status + 1;
})
}
},
/** 查询退伍复学申请列表 */
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;
}
}
</style>