From 3d2ae0421477ff3ffbd64a32fc93063a0cf98667 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=A5=E8=AF=B4?= <zhangqilei0322@163.com>
Date: Wed, 15 Jun 2022 11:21:15 +0800
Subject: [PATCH] 12

---
 src/pages/Apply/Apply.vue   | 411 +++++++++++++++++++++++++++++++++++-
 src/pages/Notice/Notice.vue | 144 ++++++++-----
 src/pages/Submit/Submit.vue | 113 +++++++++-
 3 files changed, 610 insertions(+), 58 deletions(-)

diff --git a/src/pages/Apply/Apply.vue b/src/pages/Apply/Apply.vue
index f81895f..81c3ecf 100644
--- a/src/pages/Apply/Apply.vue
+++ b/src/pages/Apply/Apply.vue
@@ -1,16 +1,415 @@
 <template>
-<div class="content">
-  参赛报名
-</div>
+  <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/>
+
diff --git a/src/pages/Notice/Notice.vue b/src/pages/Notice/Notice.vue
index 0789108..a931710 100644
--- a/src/pages/Notice/Notice.vue
+++ b/src/pages/Notice/Notice.vue
@@ -1,36 +1,69 @@
 <template>
-<div> 
-
+  <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>
-          <el-divider></el-divider>
-          <div class="notice-content-middle">阿圣诞节快乐大萨达多上厕所带参数的爱吃啥</div>
-          <el-divider></el-divider>
-          <div class="notice-content-bottom">2022.06.06</div>
-        </li>
-        <li class="card">
-          <div class="notice-content-top">2222222222</div>
-          <el-divider></el-divider>
-          <div class="notice-content-middle">SV山东省任女士谁说的SV的SV的SV额</div>
-          <el-divider></el-divider>
-          <div class="notice-content-bottom">2022.06.06</div>
-        </li>
-      </ul>
-    </div>  
 
+        <li class="card">
+          <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-middle-content">
+            阿圣诞节快乐大萨达多上厕所带参数的爱吃啥
+          </div>
+          <el-divider></el-divider>
+          <div class="notice-bottom-content">2022.06.06</div>
+        </li>
+
+        <li class="card">
+          <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-middle-content">
+            SV山东省任女士谁说的SV的SV的SV额
+          </div>
+          <el-divider></el-divider>
+          <div class="notice-bottom-content">2022.06.06</div>
+        </li>
+
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -38,57 +71,70 @@
 export default {
   name: "Notice",
 
-  data(){
-    return{
-
+  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 this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
+    },
 
-    //时间渲染：表格内容显示 日期格式
-      dateFormat:function(row,column){
-         var date = row[column.property];
-         if(date === undefined || date == "" || date == null){
-            return ''
-         }
-         return this.$moment(date).format("YYYY-MM-DD HH:mm:ss")
-      },
+    // 通告编辑
+    noticeEdit() {
+      alert("编辑");
+    },
 
+    // 通告删除
+    noticeDelete() {
+      alert("删除");
+    },
   },
 
-  mounted() {
-    
-  },
-
-}
+  mounted() {},
+};
 </script>
 
 
 <style scoped>
-
-.notice-content-top {
-    padding: 1vw 2vw 0vw;
-    text-align: left;
+.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%;
-    height: 2px;
-    margin: 1vw auto;
-  }
-
-.notice-content-bottom {
-    padding: 0vw 2vw 1vw;
-    text-align: right;
+  width: 95%;
+  height: 2px;
+  margin: 1vw auto;
 }
 
+.notice-bottom-content {
+  padding: 0vw 2vw 1vw;
+  text-align: right;
+}
 </style>
 
 <style src="@/assets/css/common.css" scoped/>
diff --git a/src/pages/Submit/Submit.vue b/src/pages/Submit/Submit.vue
index 94d209a..1415aff 100644
--- a/src/pages/Submit/Submit.vue
+++ b/src/pages/Submit/Submit.vue
@@ -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/>