Merge pull request !23 from Sky_ID/zql
This commit is contained in:
Sky_ID 2022-06-23 07:15:22 +00:00 committed by Gitee
commit 8b59e9541e
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
1 changed files with 186 additions and 149 deletions

View File

@ -6,8 +6,8 @@
<span class="steps-tip">&nbsp;&nbsp;报名</span> <span class="steps-tip">&nbsp;&nbsp;报名</span>
<el-steps :active="1" simple class="steps-steps"> <el-steps :active="1" simple class="steps-steps">
<el-step title="填写信息" icon="el-icon-edit"></el-step> <el-step title="填写信息" icon="el-icon-edit"></el-step>
<el-step title="审核通过" icon="el-icon-upload"></el-step> <el-step title="审核通过" icon="el-icon-s-check"></el-step>
<el-step title="报名成功" icon="el-icon-picture"></el-step> <el-step title="报名成功" icon="el-icon-success"></el-step>
</el-steps> </el-steps>
</div> </div>
<!-- 提示信息 --> <!-- 提示信息 -->
@ -20,74 +20,80 @@
<div class="card"> <div class="card">
<div class="chart-content"> <div class="chart-content">
<div class="apply-title">填写报名信息</div> <div class="apply-title">填写报名信息</div>
<!-- 报名表单 --> <!-- 报名表单 -->
<el-form <el-form
:model="applyForm" :model="applyForm"
:rules="rules" :rules="rules"
ref="applyForm" ref="applyForm"
label-position="top" label-position="top"
label-width="100px" label-width="100px"
class="apply-form" class="apply-form"
> >
<el-form-item label="参赛单位" prop="applyCompany" class="apply-form-item"> <el-form-item label="参赛单位" prop="applyCompany" class="apply-form-item">
<el-input v-model="applyForm.applyCompany" clearable placeholder="请输入参赛单位"></el-input> <el-input v-model="applyForm.applyCompany" clearable placeholder="请输入参赛单位"></el-input>
</el-form-item>
<el-form-item label="参赛团队负责人姓名" prop="applyChargeName" class="apply-form-item">
<el-input v-model="applyForm.applyChargeName" clearable placeholder="请输入负责人姓名"></el-input>
</el-form-item>
<el-form-item label="职务" prop="applyChargeDuty" class="apply-form-item">
<el-input v-model="applyForm.applyChargeDuty" clearable placeholder="请输入负责人职务"></el-input>
</el-form-item>
<el-form-item label="军衔" prop="applyChargeArmyRank" class="apply-form-item">
<el-input v-model="applyForm.applyChargeRank" clearable placeholder="请输入负责人军衔"></el-input>
</el-form-item>
<el-form-item label="赛区" prop="applyRegion" filterable class="apply-form-item">
<el-select
v-model="applyForm.applyRegion"
placeholder="请选择参赛赛区"
class="apply-form-select"
>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="shanghai"></el-option>
<el-option label="区域三" value="shanghai"></el-option>
</el-select>
</el-form-item>
<el-form-item label="赛项" prop="applySort" filterable class="apply-form-item">
<el-select
placeholder="请选择参赛赛项"
v-model="applyForm.applySort"
class="apply-form-select"
>
<el-option label="战略方向" value="shanghai"></el-option>
<el-option label="前沿技术" value="shanghai"></el-option>
</el-select>
</el-form-item>
<el-form-item label="课题来源" prop="applySource" class="apply-form-item">
<el-radio-group
v-model="radioValue"
@change="radioChange"
class="apply-form-radio"
>
<el-radio :label="1">计划支持</el-radio>
<el-radio :label="2">自主提报</el-radio>
</el-radio-group>
<el-input v-model="applyForm.applySource" :disabled="inputIf" clearable placeholder="填写课题来源"></el-input>
</el-form-item>
<el-form-item label="电话" prop="applyPhone" class="apply-form-item">
<el-input v-model="applyForm.applyPhone" clearable placeholder="请输入电话"></el-input>
</el-form-item>
<div>
<el-form-item label="成员">
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAddMember(memberList)">添加成员</el-button>
</el-form-item> </el-form-item>
<el-form-item label="参赛团队负责人姓名" prop="applyChargeName" class="apply-form-item">
<el-input v-model="applyForm.applyChargeName" clearable placeholder="请输入负责人姓名"></el-input>
</el-form-item>
<el-form-item label="电话" prop="applyPhone" class="apply-form-item">
<el-input v-model="applyForm.applyPhone" clearable placeholder="请输入电话"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="applyEmail" class="apply-form-item">
<el-input v-model="applyForm.applyEmail" clearable placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item label="职务" prop="applyChargeDuty" class="apply-form-item">
<el-input v-model="applyForm.applyChargeDuty" clearable placeholder="请输入负责人职务"></el-input>
</el-form-item>
<el-form-item label="军衔" prop="applyChargeArmyRank" class="apply-form-item">
<el-input v-model="applyForm.applyChargeRank" clearable placeholder="请输入负责人军衔"></el-input>
</el-form-item>
<el-form-item label="赛区" prop="applyRegion" filterable class="apply-form-item">
<el-select
v-model="applyForm.applyRegion"
placeholder="请选择参赛赛区"
class="apply-form-select"
>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="shanghai"></el-option>
<el-option label="区域三" value="shanghai"></el-option>
</el-select>
</el-form-item>
<el-form-item label="赛项" prop="applySort" filterable class="apply-form-item">
<el-select
placeholder="请选择参赛赛项"
v-model="applyForm.applySort"
class="apply-form-select"
>
<el-option label="战略方向" value="shanghai"></el-option>
<el-option label="前沿技术" value="shanghai"></el-option>
</el-select>
</el-form-item>
<el-form-item label="课题来源" prop="applySource" class="apply-form-item">
<el-radio-group
v-model="radioValue"
@change="radioChange"
class="apply-form-radio"
>
<el-radio :label="1">计划支持</el-radio>
<el-radio :label="2">自主提报</el-radio>
</el-radio-group>
<el-input v-model="applyForm.applySource" :disabled="inputIf" clearable placeholder="填写课题来源"></el-input>
</el-form-item>
<!-- 成员表单 -->
<div class="apply-menber">
<div class="apply-member-header">
<h4>成员</h4>
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAddMember(memberList)">添加成员</el-button>
</div>
<!-- 成员表格 --> <!-- 成员表格 -->
<el-table v-loading="loading" <el-table v-loading="loading"
:element-loading-text="loading_text" :element-loading-text="loading_text"
@ -100,68 +106,69 @@
ref="applyTable" ref="applyTable"
class="apply-table" class="apply-table"
> >
<el-table-column prop="memberName" label="姓名" align="center" width="150"> <el-table-column prop="memberName" label="姓名" align="center" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form-item prop="memberName" class="apply-table-item"> <el-form-item prop="memberName" class="apply-table-item">
<el-input v-model="scope.row.memberName"></el-input> <el-input v-model="scope.row.memberName"></el-input>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="memberCompany" label="单位" align="center" width="300"> <el-table-column prop="memberCompany" label="单位" align="center" width="300">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form-item prop="memberCompany" class="apply-table-item"> <el-form-item prop="memberCompany" class="apply-table-item">
<el-input v-model="scope.row.memberCompany"></el-input> <el-input v-model="scope.row.memberCompany"></el-input>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="memberDuty" label="职务" align="center" width="150"> <el-table-column prop="memberDuty" label="职务" align="center" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form-item prop="memberCompany" class="apply-table-item"> <el-form-item prop="memberCompany" class="apply-table-item">
<el-input v-model="scope.row.memberDuty"></el-input> <el-input v-model="scope.row.memberDuty"></el-input>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="memberArmyRank" label="军衔" align="center" width="150"> <el-table-column prop="memberArmyRank" label="军衔" align="center" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form-item prop="memberCompany" class="apply-table-item"> <el-form-item prop="memberCompany" class="apply-table-item">
<el-input v-model="scope.row.memberArmyRank"></el-input> <el-input v-model="scope.row.memberArmyRank"></el-input>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index);" type="danger" size="small" class="apply-table-item">删除</el-button> <el-button @click.native.prevent="deleteRow(scope.$index);" type="danger" size="small" class="apply-table-item">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</el-form>
</div>
</div>
<div class="apply-button"> </el-form>
<!-- 导入按钮 -->
<el-upload <div class="apply-button">
name="importApplyFile" <!-- 导入按钮 -->
:limit="1" <el-upload
:on-exceed="handleExceed" name="importApplyFile"
:action="uploadActionUrl" :limit="1"
accept=".zip,.rar" :on-exceed="handleExceed"
:before-upload="onBeforeUpload" :action="uploadActionUrl"
:on-progress="onUpload" accept=".zip,.rar"
:on-success="(res)=>{importSuccess(res)}" :before-upload="onBeforeUpload"
:before-remove="beforeRemove" :on-progress="onUpload"
:file-list="fileList" :on-success="(res)=>{importSuccess(res)}"
class="import-apply-file" :before-remove="beforeRemove"
> :file-list="fileList"
<!-- 触发文件选择框的内容 --> class="import-apply-file"
<el-button slot="trigger" type="primary" icon="el-icon-upload2">提交报名表</el-button> >
<div slot="tip" class="import-apply-tip">请上传zip/rar格式压缩包</div> <!-- 触发文件选择框的内容 -->
<el-link :href="applyFilterUrl" :underline="false" target="_blank" class="download-apply-file"> <el-button slot="trigger" type="primary" icon="el-icon-upload2">提交报名表</el-button>
<el-button icon="el-icon-download">下载报名表</el-button> <div slot="tip" class="import-apply-tip">请上传zip/rar格式压缩包</div>
</el-link> <el-link :href="applyFilterUrl" :underline="false" target="_blank" class="download-apply-file">
</el-upload> <el-button icon="el-icon-download">下载报名表</el-button>
</el-link>
</el-upload>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -174,14 +181,23 @@ export default {
return { return {
/* 报名表单信息 */ /* 报名表单信息 */
applyForm: { applyForm: {
applyCompany: "", applyCompId: "",
applyChargeName: "", applyTeamId: "",
applyChargeDuty: "",
applyChargeArmyRank: "", applyCompany: "", // unit
applyRegion: "", applyChargeName: "", // name
applySort: "", applyPhone: "", // tel
applySource: "", applyEmail: "", // email
applyPhone: "",
applyChargeDuty: "", // duty
applyChargeArmyRank: "", // army_rank
applyRegion: "", // division
applySort: "", // kind
applySource: "", // appky_source
applyFile: "", // file
}, },
radioValue: 1, /* 单选框默认 */ radioValue: 1, /* 单选框默认 */
@ -191,16 +207,19 @@ export default {
loading_text: "", loading_text: "",
memberList: [], /* 成员列表 */ memberList: [], /* 成员列表 */
addForm: [], /* 逐个添加的表单 */ addForm: [], /* 临时变量:逐个添加的表单 */
/* 表格成员信息 */ /* 表格成员信息 */
memberName: "", memberName: "",
memberCompany: "", memberPhone: "",
memberDuty: "", memberEmail: "",
memberArmyRank: "",
uploadActionUrl: "", memberCompany: "", // memberUnit
applyFilterUrl: "", memberDuty: "", // memberDuty
memberArmyRank: "", // memberArmyRank
uploadActionUrl: "", // url
applyFilterUrl: "", // url
rules: { rules: {
@ -211,6 +230,14 @@ export default {
applyChargeName: [ applyChargeName: [
{ required: true, message: "请输入负责人姓名", trigger: "blur" }, { required: true, message: "请输入负责人姓名", trigger: "blur" },
], ],
applyPhone: [
{ required: true, message: "请输入电话", trigger: "blur" },
{ pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message:"请输入正确的成员电话", trigger: "change"},
],
applyEmail: [
{ required: true, message: "请输入邮箱", trigger: "blur" },
{ pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message:"请输入正确的邮箱地址", trigger: "change"},
],
applyChargeDuty: [ applyChargeDuty: [
{ required: true, message: "请输入职务", trigger: "blur" }, { required: true, message: "请输入职务", trigger: "blur" },
], ],
@ -226,10 +253,6 @@ export default {
applySource: [ applySource: [
{ required: true, message: "请填写课题来源", trigger: "change" } { required: true, message: "请填写课题来源", trigger: "change" }
], ],
applyPhone: [
{ required: true, message: "请输入电话", trigger: "blur" },
{ pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message:"请输入正确的成员电话", trigger: "change"},
],
memberName: [ memberName: [
{ required: true, message: "请输入成员姓名", trigger: "blur" }, { required: true, message: "请输入成员姓名", trigger: "blur" },
@ -393,7 +416,16 @@ export default {
top: -1.75vw; top: -1.75vw;
} }
.apply-table { .apply-menber {
float: left;
text-align: left;
width: 100%;
margin-top: -1vw;
}
h4 {
margin-bottom: 1vw;
}
::v-deep .apply-table {
width: 95%; width: 95%;
height: auto; height: auto;
} }
@ -401,7 +433,12 @@ export default {
margin-bottom: 16px; margin-bottom: 16px;
} }
.apply-button {
float: left;
margin: 3vw 2vw;
}
.import-apply-tip { .import-apply-tip {
align-items: left;
text-align: left; text-align: left;
font-size: 11px; font-size: 11px;
} }