This commit is contained in:
以说 2022-06-15 11:21:15 +08:00
parent 22c7236673
commit 3d2ae04214
3 changed files with 610 additions and 58 deletions

View File

@ -1,16 +1,415 @@
<template>
<div class="content">
参赛报名
<div class="steps">
<!-- 步骤条 -->
<span class="steps-tip">&nbsp;&nbsp;报名</span>
<el-steps :active="1" simple class="steps-steps">
<el-step title="填写信息" icon="el-icon-edit"></el-step>
<el-step title="审核通过" icon="el-icon-upload"></el-step>
<el-step title="报名成功" icon="el-icon-picture"></el-step>
</el-steps>
</div>
<!-- 提示信息 -->
<div class="apply-tip">
<span class="el-icon-edit"
>&nbsp;&nbsp;请认真核对报名信息务必与线下报名表信息一致!</span
>
</div>
<div class="card">
<div class="chart-content">
<div class="apply-title">填写报名信息</div>
<!-- 报名表单 -->
<el-form
:model="applyForm"
:rules="rules"
ref="applyForm"
label-position="top"
label-width="100px"
class="apply-form"
>
<el-form-item label="参赛单位" prop="applyCompany" class="apply-form-item">
<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" @click="handleAddMember(memberList)">添加成员</el-button>
</el-form-item>
<!-- 成员表格 -->
<el-table v-loading="loading"
:element-loading-text="loading_text"
element-loading-spinner="el-icon-loading"
element-loading-custom-class="loading_style"
empty-text="没有记录哦~"
stripe
:data="memberList"
:rules="rules"
ref="applyTable"
class="apply-table"
>
<el-table-column prop="memberName" label="姓名" align="center" width="150">
<template slot-scope="scope">
<el-form-item prop="memberName" class="apply-table-item">
<el-input v-model="scope.row.memberName"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="memberCompany" label="单位" align="center" width="300">
<template slot-scope="scope">
<el-form-item prop="memberCompany" class="apply-table-item">
<el-input v-model="scope.row.memberCompany"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="memberDuty" label="职务" align="center" width="150">
<template slot-scope="scope">
<el-form-item prop="memberCompany" class="apply-table-item">
<el-input v-model="scope.row.memberDuty"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="memberArmyRank" label="军衔" align="center" width="150">
<template slot-scope="scope">
<el-form-item prop="memberCompany" class="apply-table-item">
<el-input v-model="scope.row.memberArmyRank"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index);" type="danger" size="small" class="apply-table-item">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-form>
</div>
</div>
<div class="apply-button">
<!-- 导入按钮 -->
<el-upload
name="importApplyFile"
:limit="1"
:on-exceed="handleExceed"
:action="uploadActionUrl"
accept=".zip,.rar"
:before-upload="onBeforeUpload"
:on-progress="onUpload"
:on-success="(res)=>{importSuccess(res)}"
:before-remove="beforeRemove"
:file-list="fileList"
class="import-apply-file"
>
<!-- 触发文件选择框的内容 -->
<el-button slot="trigger" type="primary" icon="">提交报名表</el-button>
<div slot="tip" class="import-apply-tip">请上传zip/rar格式压缩包</div>
<el-link :href="applyFilterUrl" :underline="false" target="_blank" icon="" class="download-apply-file">
<el-button>下载报名表</el-button>
</el-link>
</el-upload>
</div>
</div>
</template>
<script>
export default {
name: "Apply"
name: "Apply",
data() {
return {
/* 报名表单信息 */
applyForm: {
applyCompany: "",
applyChargeName: "",
applyChargeDuty: "",
applyChargeArmyRank: "",
applyRegion: "",
applySort: "",
applySource: "",
applyPhone: "",
},
radioValue: 1, /* 单选框默认 */
inputIf: false, /* 课题来源可输入 */
loading: "",
loading_text: "",
memberList: [], /* 成员列表 */
addForm: [], /* 逐个添加的表单 */
/* 表格成员信息 */
memberName: "",
memberCompany: "",
memberDuty: "",
memberArmyRank: "",
uploadActionUrl: "",
applyFilterUrl: "",
rules: {
applyCompany: [
{ required: true, message: "请输入参赛单位", trigger: "blur" },
{ pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9-]$/, message:"仅仅支持中英文、数字、横杠或下划线", trigger: "change"},
],
applyChargeName: [
{ required: true, message: "请输入负责人姓名", trigger: "blur" },
],
applyChargeDuty: [
{ required: true, message: "请输入职务", trigger: "blur" },
],
applyChargeArmyRank: [
{ required: true, message: "请输入军衔", trigger: "blur" },
],
applyRegion: [
{ required: true, message: "请选择参赛赛区", trigger: "change" },
],
applySort: [
{ required: true, message: "请选择活参赛赛项", trigger: "change" },
],
applySource: [
{ 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: [
{ required: true, message: "请输入成员姓名", trigger: "blur" },
],
memberCompany: [
{ required: true, message: "请输入成员单位", trigger: "blur" },
],
memberDuty: [
{ required: true, message: "请输入成员职务", trigger: "blur" },
],
memberArmyRank: [
{ required: true, message: "请输入成员军衔", trigger: "blur" },
],
},
};
},
methods: {
//
radioChange(value){
console.log(value);
if( value == 1 ){
this.inputIf = false;
this.applyForm.applySource = "";
}else{
this.inputIf = true;
this.applyForm.applySource = "自主提交";
}
},
//
handleAddMember(addForm) {
addForm.push({
memberName: "",
memberCompany: "",
memberDuty: "",
memberArmyRank: "",
});
},
//
deleteRow(index) {
this.memberList.splice(index, 1);
console.log(index);
},
//
handleExceed(){
this.$message.warning("限制上传一个文件");
},
//
onBeforeUpload(file){
const isIMAGE = file.type === "rar"||"zip";
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isIMAGE) {
this.$message.error("上传文件只能是rar/zip压缩包格式!");
}
if (!isLt1M) {
this.$message.error("上传文件大小不能超过 1MB!");
}
// false
return isIMAGE && isLt1M;
},
//
onUpload(){
this.loading_text = "拼命导入中...请稍等"
this.loading = true;
},
//
importSuccess(res){
if(res.code == "0"){
if(res.data == 0){
this.$message({
showClose: true,
message: '上传报名表成功',
type: 'success'
});
}
}else{
this.$message({
showClose: true,
message: '上传报名表失败' + res.message,
type: 'error'
});
}
},
},
mounted(){
}
};
</script>
<style scoped>
<style scoped>
.steps {
position: relative;
width: 64vw;
margin: 3vw 0vw;
}
.steps-tip {
position: absolute;
left: 1vw;
top: 50%; /* 以左上角为原点,不处于中心位置 */
transform: translate(-50%, -50%); /* 往x,y移动自身长宽的50%,居于中心位置 */
border-left: 4px solid blue;
}
.steps-steps {
width: 40vw;
margin: auto;
background: white;
}
.apply-tip {
width: 64vw;
background-color: #fff5eb;
border: 1px solid #ffa13a;
color: #ffa13a;
padding: 0.8vw 0vw 0.8vw 2vw;
margin-bottom: 1vw;
text-align: left;
}
.apply-title {
border-bottom: 1px solid #eee;
padding: 0.8vw 2vw;
text-align: left;
}
.apply-form {
padding: 8px 0 30px 30px;
text-align: left;
}
.el-form-item__label {
padding-bottom: 0px;
}
.apply-form-item {
position: relative;
float: left;
width: 38%;
margin-right: 7vw;
}
.apply-form-select {
position: relative;
float: left;
width: 100%;
}
.apply-form-radio {
position: absolute;
left: 11vw;
top: -2.5vw;
}
.apply-table {
width: 92%;
height: auto;
}
.apply-table-item {
margin-bottom: 16px;
}
.import-apply-tip {
text-align: left;
font-size: 11px;
}
.download-apply-file {
margin-left: 2vw;
}
</style>
<style src="@/assets/css/common.css" scoped/>

View File

@ -1,36 +1,69 @@
<template>
<div>
<div class="content-button">
<el-button plain class="edit-button">新增</el-button>
</div>
<div class="content">
<ul>
<!-- <li v-for="item in noticeAll" :key="item.noticeId" class="card">
<div class="notice-content-top">{ noticeTop }</div>
<div class="notice-top">
<div class="notice-top-content">{ noticeTop }</div>
<el-dropdown class="notice-dropdown" trigger="hover">
<span class="el-dropdown-link">...</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="noticeEdit()">编辑</el-dropdown-item>
<el-dropdown-item divided @click.native="noticeDelete()">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<el-divider></el-divider>
<div class="notice-content-middle">{ noticeMiddle }</div>
<el-divider></el-divider>
<div class="notice-content-date">{ noticeDate }</div>
</li> -->
<li class="card">
<div class="notice-content-top">1111111</div>
<div class="notice-top">
<div class="notice-top-content">1111111</div>
<el-dropdown class="notice-dropdown" trigger="hover">
<span class="el-dropdown-link">...</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="noticeEdit()">编辑</el-dropdown-item>
<el-dropdown-item divided @click.native="noticeDelete()">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<el-divider></el-divider>
<div class="notice-content-middle">阿圣诞节快乐大萨达多上厕所带参数的爱吃啥</div>
<div class="notice-middle-content">
阿圣诞节快乐大萨达多上厕所带参数的爱吃啥
</div>
<el-divider></el-divider>
<div class="notice-content-bottom">2022.06.06</div>
<div class="notice-bottom-content">2022.06.06</div>
</li>
<li class="card">
<div class="notice-content-top">2222222222</div>
<div class="notice-top">
<div class="notice-top-content">2222222222222222</div>
<el-dropdown class="notice-dropdown" trigger="hover">
<span class="el-dropdown-link">...</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="noticeEdit()">编辑</el-dropdown-item>
<el-dropdown-item divided @click.native="noticeDelete()">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<el-divider></el-divider>
<div class="notice-content-middle">SV山东省任女士谁说的SV的SV的SV额</div>
<div class="notice-middle-content">
SV山东省任女士谁说的SV的SV的SV额
</div>
<el-divider></el-divider>
<div class="notice-content-bottom">2022.06.06</div>
<div class="notice-bottom-content">2022.06.06</div>
</li>
</ul>
</div>
</div>
</template>
@ -40,43 +73,57 @@ export default {
data() {
return {
noticeAll: [],
noticeId: "",
noticeTop: "",
noticeMiddle: "",
noticeDate: "",
}
};
},
methods: {
//
dateFormat: function (row, column) {
var date = row[column.property];
if (date === undefined || date == "" || date == null) {
return ''
return "";
}
return this.$moment(date).format("YYYY-MM-DD HH:mm:ss")
return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
},
//
noticeEdit() {
alert("编辑");
},
mounted() {
//
noticeDelete() {
alert("删除");
},
},
}
mounted() {},
};
</script>
<style scoped>
.notice-content-top {
.notice-top {
display: flex;
padding: 1vw 2vw 0vw;
justify-content: space-between;
}
.notice-top-content {
font-size: 20px;
color: #3e5bfe;
text-align: left;
}
.notice-dropdown {
cursor: pointer;
}
.el-dropdown-link {
font-size: 20px;
}
.el-divider {
width: 95%;
@ -84,11 +131,10 @@ export default {
margin: 1vw auto;
}
.notice-content-bottom {
.notice-bottom-content {
padding: 0vw 2vw 1vw;
text-align: right;
}
</style>
<style src="@/assets/css/common.css" scoped/>

View File

@ -1,14 +1,121 @@
<template>
<div class="content">作品提交</div>
<div>
<div class="content-button">
<el-button plain class="edit-button">新增</el-button>
</div>
<div class="content">
<div class="card">
<el-upload
drag
name="importSubmitFile"
:limit="1"
:on-exceed="handleExceed"
:action="uploadActionUrl"
accept=".zip,.rar"
:before-upload="onBeforeUpload"
:on-progress="onUpload"
:on-success="(res)=>{importSuccess(res)}"
:before-remove="beforeRemove"
:file-list="fileList"
class="import-submit-file"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">
只能上传zip/rar文件且不超过1M
</div>
</el-upload>
<div class="card-content">
<div>dadasdadsad</div>
<div>dsvdsvsdvsdvds</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Submit"
name: "Submit",
data(){
return {
downloadActionUrl: "",
};
},
methods:{
//
handleExceed(){
this.$message.warning("限制上传一个文件");
},
//
onBeforeUpload(file){
const isIMAGE = file.type === "rar"||"zip";
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isIMAGE) {
this.$message.error("上传文件只能是rar/zip压缩包格式!");
}
if (!isLt1M) {
this.$message.error("上传文件大小不能超过 1MB!");
}
// false
return isIMAGE && isLt1M;
},
//
onUpload(){
this.loading_text = "拼命导入中...请稍等"
this.loading = true;
},
//
importSuccess(res){
if(res.code == "0"){
if(res.data == 0){
this.$message({
showClose: true,
message: '上传报名表成功',
type: 'success'
});
}
}else{
this.$message({
showClose: true,
message: '上传报名表失败' + res.message,
type: 'error'
});
}
},
},
mounted(){
},
};
</script>
<style scoped>
.import-submit-file {
float: left;
padding: 3vw 6vw;
}
</style>
<style src="@/assets/css/common.css" scoped/>