|
|
@@ -0,0 +1,525 @@
|
|
|
+<template>
|
|
|
+ <!-- 项目立项申请立项检查消息表达 -->
|
|
|
+ <div class="projectApplicationApply">
|
|
|
+ <!-- 左边导航区开始 -->
|
|
|
+ <div class="left">
|
|
|
+ <div class="sx">
|
|
|
+ <div class="qiu"></div>
|
|
|
+ </div>
|
|
|
+ <div class="leftTits">
|
|
|
+ <div @click="toPage(1)">基本信息填写</div>
|
|
|
+ <div @click="toPage(2)">项目成员</div>
|
|
|
+ <div @click="toPage(3)">简介</div>
|
|
|
+ <div @click="toPage(4)">下一步</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 左边导航区结束 -->
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 右边填写信息区域开始 -->
|
|
|
+ <div id="one" class="right">
|
|
|
+ <div class="vfpHeader">
|
|
|
+ <div class="titleOne">项目立项申请</div>
|
|
|
+ <div class="smallTitle">申请开放时间为2023年4月4日9:00 截止时间为2023年12月31日18:00</div>
|
|
|
+ <el-button @click="backBtn1" type="primary" size="mini">返回</el-button>
|
|
|
+ </div>
|
|
|
+ <hr>
|
|
|
+
|
|
|
+ <!-- 活动申请填写信息区域开始 -->
|
|
|
+ <div class="select">
|
|
|
+ <div class="selectTop">
|
|
|
+ <div class="label">项目名称</div>
|
|
|
+ <el-input v-model="data.select.projectName" placeholder="请输入内容"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="selectMid">
|
|
|
+ <div class="selectLeft">
|
|
|
+
|
|
|
+
|
|
|
+ <div class="inpBlock">
|
|
|
+ <div class="label">项目负责人</div>
|
|
|
+ <el-input v-model="data.select.person" placeholder="请输入内容"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="inpBlock">
|
|
|
+ <div class="label">所在部门</div>
|
|
|
+ <el-select v-model="data.select.value" style="width: 100%;" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in data.options"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="inpBlock">
|
|
|
+ <div class="label">联系电话</div>
|
|
|
+ <el-input type="number" v-model="data.select.tel" @blur="getText(data.select.tel)" placeholder="请输入联系方式"></el-input>
|
|
|
+ </div>
|
|
|
+ <!-- <div v-if="!isPhoneValid" class="error-message">电话号码格式不正确</div> -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="selectRight">
|
|
|
+ <div class="inpBlock">
|
|
|
+ <div class="label">项目开始时间</div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="data.select.value1"
|
|
|
+ type="datetime"
|
|
|
+ style="width: 100%;"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div class="inpBlock" style="position: relative;">
|
|
|
+ <div class="label">预算总经费</div>
|
|
|
+ <el-input type="number" v-model="data.select.fund" placeholder="请输入内容"></el-input>
|
|
|
+ <div style="position: absolute;right: -30px;top: 10px;">(万)</div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="inpBlock">
|
|
|
+ <div class="label">选择分类</div>
|
|
|
+ <el-cascader v-model="data.select.sort" :options="data.sortOptions" clearable></el-cascader>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- 活动申请填写信息区域结束 -->
|
|
|
+
|
|
|
+ <!-- 项目封面上传开始 -->
|
|
|
+ <div style="height: 260px;">
|
|
|
+ <div id="two" class="tabTit">
|
|
|
+ <div><p>封面上传</p></div>
|
|
|
+ </div>
|
|
|
+ <hr>
|
|
|
+ <div style="margin-bottom: 10px;">项目封面</div>
|
|
|
+ <el-progress v-show="progress.show" :percentage="progress.value" :format="ProgressFormat"></el-progress>
|
|
|
+
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="#"
|
|
|
+ disabled
|
|
|
+ style="position: relative;"
|
|
|
+ :show-file-list="false"
|
|
|
+ >
|
|
|
+ <img v-if="data.dialogImageUrl" :src="data.dialogImageUrl" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ <BeUpload :progress="progress" style="position: absolute;width: 301px;height: 180px; opacity: 0;z-index: 333;left: 0;top: 0;" @getFile="getFile" class="uploadPic" :navName="'上传封面'" :accept="accept"></BeUpload>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 项目封面上传开始结束 -->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <div> -->
|
|
|
+ <!-- 项目成员表格开始 -->
|
|
|
+ <div id="two" class="tabTit">
|
|
|
+ <div><p>项目成员</p></div>
|
|
|
+ <el-button type="primary" @click="addMember" size="mini">添加成员</el-button>
|
|
|
+ </div>
|
|
|
+ <hr>
|
|
|
+ <el-table
|
|
|
+ :data="data.tableData"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ stripe
|
|
|
+ :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
|
|
|
+ class="fontSize"
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="姓名"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="class"
|
|
|
+ label="班级"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="phone"
|
|
|
+ label="电话"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="operation"
|
|
|
+ label="操作"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="operations">
|
|
|
+ <!-- <el-button type="primary" > -->
|
|
|
+ <el-button type="primary" @click="amendDialogData(scope.$index)" size="mini">修改</el-button>
|
|
|
+ <el-button type="primary" @click="Del(scope.$index)" size="mini">删除</el-button>
|
|
|
+ <!-- </el-button> -->
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 项目成员表格结束 -->
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 项目简介开始 -->
|
|
|
+ <div id="three" class="tabTit">
|
|
|
+ <div><p>项目简介</p></div>
|
|
|
+ </div>
|
|
|
+ <hr>
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="6"
|
|
|
+ resize="none"
|
|
|
+ class="textArea"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ v-model="data.textarea">
|
|
|
+ </el-input>
|
|
|
+ <!-- 项目简介结束 -->
|
|
|
+ <!-- 结束按钮开始 -->
|
|
|
+ <div id="four" class="baseBtn">
|
|
|
+ <div class="blockWidth">
|
|
|
+ <el-button type="primary" @click="backBtn1" size:small>上一步</el-button>
|
|
|
+ <el-button type="primary" @click="backBtn" size:small>下一步</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 结束按钮结束 -->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- 右边填写信息区域结束 -->
|
|
|
+
|
|
|
+ <!--添加成员dialog对话框开始 -->
|
|
|
+ <el-dialog
|
|
|
+ :title= "isAddMember==1?'添加成员':'修改成员'"
|
|
|
+ :visible.sync="addMemberDialog"
|
|
|
+ :modal="true"
|
|
|
+ :close-on-click-modal="true"
|
|
|
+ class="AddMember"
|
|
|
+ :before-close="init">
|
|
|
+ <div class="littleBlock">
|
|
|
+ <div class="dialogLabel">姓名</div>
|
|
|
+ <div>
|
|
|
+ <el-input v-model="data.Member.name"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="littleBlock">
|
|
|
+ <div class="dialogLabel">班级</div>
|
|
|
+ <div>
|
|
|
+ <el-input v-model="data.Member.class"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="littleBlock">
|
|
|
+ <div class="dialogLabel">电话</div>
|
|
|
+ <div>
|
|
|
+ <el-input type="number" class="inputNumber" v-model="data.Member.phone" @blur="getText(data.Member.phone)" ></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="footer">
|
|
|
+ <el-button v-show="isAddMember==1" type="primary" @click="commit" class="AllDialogBtn" >确认提交</el-button>
|
|
|
+ <el-button v-show="isAddMember==2" type="primary" @click="commit2" class="AllDialogBtn" >确认修改</el-button>
|
|
|
+
|
|
|
+ <el-button @click="init" class="AllDialogBtn">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--添加成员dialog对话框结束 -->
|
|
|
+
|
|
|
+ <!-- 删除成员对话框开始 -->
|
|
|
+ <el-dialog
|
|
|
+ title="删除成员"
|
|
|
+ :visible.sync="delMember"
|
|
|
+ width="600px"
|
|
|
+ class="delMemberDialog">
|
|
|
+ <span class="deleteContent">确定删除成员?</span>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="commitDelMember" class="AllDialogBtn">确认删除</el-button>
|
|
|
+ <el-button @click="init" class="AllDialogBtn" >取消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 删除成员对话框结束 -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import BeUpload from "../../components/tool/beUpload.vue";
|
|
|
+ export default {
|
|
|
+ props:["data","next",'back','addPerson'],
|
|
|
+ components: {
|
|
|
+ BeUpload,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // dialogImageUrl: '',
|
|
|
+ accept:"image/*",
|
|
|
+ isAddMember:1,
|
|
|
+ progress:{ //进度条
|
|
|
+ value:0,
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ // fileList: [],
|
|
|
+ dialogVisible: false,
|
|
|
+ addMemberDialog:false,
|
|
|
+ // amendMemberDialog:false,
|
|
|
+ delMember:false,
|
|
|
+ index:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods:{
|
|
|
+ getFile(val) { //上传封面
|
|
|
+ // console.log(val);
|
|
|
+ this.progress.show = false;
|
|
|
+ this.data.dialogImageUrl=val.url
|
|
|
+ this.$message.success('封面上传成功')
|
|
|
+ },
|
|
|
+ ProgressFormat(value){ //进度条
|
|
|
+ return value ==100?'100%':`${value}%`
|
|
|
+ },
|
|
|
+ // submitUpload() {
|
|
|
+ // this.$refs.upload.submit();
|
|
|
+ // },
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ console.log(file, fileList);
|
|
|
+ },
|
|
|
+ handlePictureCardPreview(file) {
|
|
|
+ this.dialogImageUrl = file.url;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ getText(value) { //电话验证
|
|
|
+ let verify = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/; //获取正则表达式 存放到verify变量中
|
|
|
+ let result = verify.test(value.trim()); //判断输入框内容是否符合 正则表达式
|
|
|
+ // if(!result && value != "") {
|
|
|
+ // debugger
|
|
|
+ if(!result) {
|
|
|
+ if (value == this.data.select.tel) {
|
|
|
+ this.$message.error('请输入正确联系号码格式')
|
|
|
+ return this.data.telVerify=false;
|
|
|
+ }
|
|
|
+ if (value == this.data.Member.phone) {
|
|
|
+ return this.data.telVerify2=false;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if (value == this.data.select.tel) {
|
|
|
+ this.data.telVerify=true;
|
|
|
+ }
|
|
|
+ if (value == this.data.Member.phone) {
|
|
|
+ return this.data.telVerify2=true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ init(){
|
|
|
+ this.addMemberDialog=false;
|
|
|
+ // this.data.amendMemberDialog=false
|
|
|
+ this.delMember=false
|
|
|
+
|
|
|
+ },
|
|
|
+ addMember(){ //添加项目成员
|
|
|
+ this.addMemberDialog=true
|
|
|
+ for(let i in this.data.Member){
|
|
|
+ if(i=='score')this.data.Member[i] = "0"
|
|
|
+ else this.data.Member[i] = "";
|
|
|
+ }
|
|
|
+ this.isAddMember=1;
|
|
|
+ },
|
|
|
+ amendDialogData(val){ //修改项目成员信息对话框显示
|
|
|
+ Object.assign(this.data.Member,this.data.tableData[val])
|
|
|
+ this.isAddMember=2;
|
|
|
+ this.data.Member['index']=val
|
|
|
+ // console.log(this.data.Member['index']);
|
|
|
+ this.addMemberDialog=true
|
|
|
+ },
|
|
|
+ commit2(){ //确定修改成员
|
|
|
+ if (!this.data.telVerify2) return this.$message.error('请输入正确联系号码格式')
|
|
|
+ Object.assign(this.data.tableData[this.data.Member['index']],this.data.Member)
|
|
|
+ for(let k in this.data.Member) this.data.Member[k]=''
|
|
|
+ this.addMemberDialog=false;
|
|
|
+ this.$message.success('修改成功')
|
|
|
+
|
|
|
+ console.log(this.data.tableData);
|
|
|
+ },
|
|
|
+ Del(val){ //删除对话框显示
|
|
|
+ this.delMember=true;
|
|
|
+ this.index=val
|
|
|
+ },
|
|
|
+ commitDelMember(){ //对话框确定删除成员
|
|
|
+ let a=this.index;
|
|
|
+ this.data.tableData.splice(a,1);
|
|
|
+ this.$message.success('删除成功');
|
|
|
+ this.delMember=false;
|
|
|
+
|
|
|
+ },
|
|
|
+ backBtn1(){ // 上一步
|
|
|
+ this.$router.push('/projectApplication')
|
|
|
+ },
|
|
|
+
|
|
|
+ backBtn(){ // 下一步
|
|
|
+ this.next();
|
|
|
+ },
|
|
|
+ commit(){ //确定添加成员
|
|
|
+ if (this.data.Member.name =="" ||this.data.Member.name==undefined) return this.$message.error('请输入姓名')
|
|
|
+ if (this.data.Member.class=="" ||this.data.Member.class==undefined) return this.$message.error('请输入班级')
|
|
|
+ if (!this.data.telVerify2) return this.$message.error('请输入正确联系电话格式')
|
|
|
+ // this.addPerson();
|
|
|
+ let newData = {};
|
|
|
+ for(let j in this.data.Member)newData[j] = this.data.Member[j];
|
|
|
+ this.data.tableData.push(newData);
|
|
|
+ this.$message.success('添加成功')
|
|
|
+ for(let i in this.data.Member){
|
|
|
+ if(i=='score')this.data.Member[i] = "0"
|
|
|
+ else this.data.Member[i] = "";
|
|
|
+ }
|
|
|
+ console.log(this.data.tableData)
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+
|
|
|
+ toPage(val){
|
|
|
+ if (val==1) {
|
|
|
+ document.getElementById("one").scrollIntoView({ behavior: "smooth" });
|
|
|
+ }else if(val==2){
|
|
|
+ document.getElementById("two").scrollIntoView({ behavior: "smooth" });
|
|
|
+ }else if(val==3){
|
|
|
+ document.getElementById("three").scrollIntoView({ behavior: "smooth" });
|
|
|
+ }else if(val==4){
|
|
|
+ document.getElementById("four").scrollIntoView({ behavior: "smooth" });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+
|
|
|
+
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: -10;
|
|
|
+ // position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+ }
|
|
|
+ .avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 300px;
|
|
|
+ // height: 50%;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .avatar {
|
|
|
+ width: 300px;
|
|
|
+ height:180px !important;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+.projectApplicationApply{
|
|
|
+ margin-top: 30px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ .uploadPic{
|
|
|
+ position: absolute;
|
|
|
+ top: -8px;right: 0;
|
|
|
+ width: 100px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 9px 0;
|
|
|
+ font-size: 16px;
|
|
|
+ background-color: #0e72e6;
|
|
|
+ border-radius:5px
|
|
|
+ }
|
|
|
+ // 右边栏标题
|
|
|
+ .projectApplicationApplypAHeader{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content:flex-start;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ .pAHeader1{
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 22px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .pAHeader2{
|
|
|
+ position: absolute;
|
|
|
+ top:8px;
|
|
|
+ left: 160px;
|
|
|
+ font-size: 16px;
|
|
|
+ background: repeating-linear-gradient();
|
|
|
+ }
|
|
|
+ .pAHeader3{
|
|
|
+ background: #0e72e6 !important;
|
|
|
+ color: #fff !important;
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ width: 100px;
|
|
|
+ height: 30px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .delMemberDialog{
|
|
|
+ font-size: 18px;
|
|
|
+ .el-dialog{
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .deleteContent{
|
|
|
+ margin: 30px 0;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .el-dialog__header{
|
|
|
+ background: #32455b;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .el-dialog__title{
|
|
|
+ color:#fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 18px;
|
|
|
+ position: relative;
|
|
|
+ top: -2px;
|
|
|
+ }
|
|
|
+ .el-dialog__body{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ // .addDialogMid{
|
|
|
+ // box-sizing: border-box;
|
|
|
+ // padding:0 60px 0 10px;
|
|
|
+ // .addDialogTit{
|
|
|
+ // display: flex;
|
|
|
+ // span{
|
|
|
+ // width: 80px;
|
|
|
+ // font-size: 16px;
|
|
|
+ // line-height: 40px;
|
|
|
+ // text-align: left;
|
|
|
+
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // }
|
|
|
+ .dialog-footer{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Q-ABAB