kun 19111 17:29

This commit is contained in:
沈学坤
2019-11-01 17:28:16 +08:00
parent 611df5b7e0
commit 149270088a
3 changed files with 306 additions and 100 deletions

View File

@@ -53,7 +53,12 @@
<aside>
<div>
<label>一级项目方向:</label>
<input type="text" name="first_level" v-model="first_level" value required />
<select name="rid" v-model="first_level">
<template v-for="(list,index) in first_levels">
<option :key="index" :value="index">{{list}}</option>
</template>
</select>
<!-- <input type="text" name="first_level" v-model="first_level" value required /> -->
</div>
<div>
<label>二级项目方向:</label>
@@ -108,7 +113,7 @@
<!-- start -->
<aside>
<div>
<label>电子:</label>
<label>电子:</label>
<input type="text" name="pmail" v-model="pmail" value required />
</div>
<div>
@@ -195,7 +200,7 @@
<!-- start -->
<aside>
<div>
<label>电子:</label>
<label>电子:</label>
<input type="text" name="respomail" v-model="respomail" value required />
</div>
<div>
@@ -341,24 +346,39 @@
<div class="xxx">
<h5>项目主责单位意见</h5>
<div class="xxxx">
<div class="btnn">
<!-- @change="getFile($event)" -->
<template>
<el-upload
class="upload-demo"
action="http://cyteam.org.cn/api/v1/file/files"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="successUpload"
:before-remove="beforeRemove"
multiple
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">上传文件</el-button>
<div slot="tip" class="el-upload__tip">可上传同意申报说明扫描版PDF文件或图片压缩包</div>
</el-upload>
</template>
<!-- <div class="btnn">
<label>
上传文件
<input type="file" @change="getFile($event)" v-show="false" name="file" />
</label>
</div>
<span for>只能上传一张不同的图片</span>
<span for>只能上传一张不同的图片</span>-->
</div>
</div>
</div>
<template v-if="file">
<img class="img-img" :src="file" alt />
<!-- <iframe class="img-img" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" :src="src"></iframe> -->
</template>
<!-- <template v-if="file">
<img class="img-img" :src="file" alt />-->
<!-- <iframe class="img-img" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" :src="src"></iframe> -->
<!-- </template> -->
<div class="ll">
<button type="button" @click="btn(0)">上一页</button>
<button v-if="0" type="button" @click="submit(0)">保存</button>
<button type="button" @click="submit(0)">保存</button>
<button type="submit" @click="submit(1)">提交</button>
</div>
</div>
@@ -404,8 +424,10 @@ export default {
bg1: require("../../../static/img/bg1.png"),
xa: require("../../../static/img/xa.png")
},
fileLists: [],
popupStatus: false,
thff: false,
first_levels: [],
types: [],
area: [],
name: '',
@@ -477,6 +499,27 @@ export default {
}
},
methods: {
successUpload(response, file, fileList) {
let arr = []
fileList.forEach((list, index) => {
arr.push(list.response.data.url);
});
let arrVal = this.fileLists
arrVal = arr
this.fileLists = arrVal
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`The limit is 5, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
},
beforeRemove(file, fileList) {
return this.$confirm(`Cancel the transfert of ${file.name} ?`);
},
/** 获取富文本内容 */
getContent(data) {
this.funds = data
@@ -508,6 +551,8 @@ export default {
// alert('yes')
// }
// console.log(this.first_level);
if (s == 1) {
if (this.name == '' || this.company == '' || this.tid == '' ||
@@ -534,58 +579,62 @@ export default {
this.sub = s
}
}
},
/** 上传文件 */
/*
getFile(event) {
let filetypes = [".jpg", ".png", ".jpeg"]
let filepath = event.target.value
if (filepath) {
var isnext = false;
var fileend = filepath.substring(filepath.lastIndexOf("."));
if (filetypes && filetypes.length > 0) {
for (var i = 0; i < filetypes.length; i++) {
if (filetypes[i] == fileend) {
isnext = true;
break;
}
}
}
if (!isnext) {
alert("不接受此文件类型!");
return false;
}
}
let filemaxsize = 1024;//1M
let fileSize = event.target.files[0].size / 1024;
if (fileSize > filemaxsize) {
alert("附件大小不能大于" + filemaxsize / 1024 + "M");
return false;
}
// let filetypes = [".jpg", ".png", ".jpeg"]
// let filepath = event.target.value
// if (filepath) {
// var isnext = false;
// var fileend = filepath.substring(filepath.lastIndexOf("."));
// if (filetypes && filetypes.length > 0) {
// for (var i = 0; i < filetypes.length; i++) {
// if (filetypes[i] == fileend) {
// isnext = true;
// break;
// }
// }
// }
// if (!isnext) {
// alert("不接受此文件类型!");
// return false;
// }
// }
// let filemaxsize = 1024;//1M
// let fileSize = event.target.files[0].size / 1024;
// if (fileSize > filemaxsize) {
// alert("附件大小不能大于" + filemaxsize / 1024 + "M");
// return false;
// }
let _this = this
let file = event.target.files[0];
/*
let reader = new FileReader()
reader.readAsDataURL(file) // 这里是最关键的一步,转换就在这里
reader.onloadend = function () {
_this.src = this.result
}
*/
let param = new FormData(); //创建form对象
param.append('file', file);//通过append向form对象添加数据
// console.log(param.get('file')); //FormData私有类对象访问不到可以通过get判断值是否传进去
let config = {
headers: { 'Content-Type': 'multipart/form-data' }
}; //添加请求头
this.$http.post('v1/file/files', param, config)
.then(response => {
let url = response.data.data.url
this.file = url
})
// let _this = this
// let file = event.target.files[0];
// console.log(file)
// let reader = new FileReader()
// reader.readAsDataURL(file) // 这里是最关键的一步,转换就在这里
// reader.onloadend = function () {
// _this.src = this.result
// }
// let param = new FormData(); //创建form对象
// param.append('file', file);//通过append向form对象添加数据
// // console.log(param.get('file')); //FormData私有类对象访问不到可以通过get判断值是否传进去
// let config = {
// headers: { 'Content-Type': 'multipart/form-data' }
// }; //添加请求头
// this.$http.post('v1/file/files', param, config)
// .then(response => {
// let url = response.data.data.url
// this.file = url
// })
},
*/
/** 保存和提交 */
submit(index) {
let regd = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
@@ -612,7 +661,7 @@ export default {
} else if (this.thff == false) {
alert('请同意:申报单位承诺')
return
} else if (this.file == '') {
} else if (this.fileLists.length == 0) {
alert('未上传文件!')
return
}
@@ -624,12 +673,15 @@ export default {
let s = this.subStatus;
s = index;
this.subStatus = s
this.proimages = this.file
if (this.proimages === '') {
let val = this.proimages
val = this.fileLists
this.proimages = val
if (this.proimages.length == 0) {
alert('文件还未上传!')
return
}
// console.log(this.proimages);
this.popupStatus = true
},
/** 申报项目 */
@@ -717,6 +769,7 @@ export default {
if (res.data.code === 200) {
_this.types = res.data.data.type
_this.area = res.data.data.area
_this.first_levels = res.data.data.first_level
} else {
_this.$message.error('请求数据有问题!')
}
@@ -885,7 +938,7 @@ export default {
.xxx {
margin-top: 60px;
width: 100%;
height: 72px;
// height: 72px;
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -931,6 +984,63 @@ export default {
letter-spacing: 0px;
color: #000;
}
/deep/ .upload-demo {
margin-bottom: 10%;
}
/deep/ .el-button--primary {
margin-top: 32px;
border: none;
cursor: pointer;
width: 96px;
height: 32px;
border-radius: 4px;
background-image: linear-gradient(
69deg,
#cc263f 0%,
#f42b47 100%,
#ed162d 100%,
#e60012 100%
),
linear-gradient(#e60012, #e60012);
font-family: 'MicrosoftYaHei';
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
}
/deep/ .el-upload-list.el-upload-list--text {
max-height: 100px;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 3px;
// height: 5px;
}
&::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
border-radius: 6px;
}
&::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
border-radius: 6px;
}
&::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
border-radius: 6px;
}
}
}
.btnn {
@@ -1114,7 +1224,7 @@ export default {
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
padding-left: 83px;
// padding-left: 83px;
box-sizing: border-box;
outline: none;
margin-left: 20px;

View File

@@ -198,8 +198,10 @@
</div>
<section id="preview" v-if="popupStatus">
<div class="tc" @click="preview()"></div>
<!-- <section class="tc-text">{{zData.proimages}}</section> -->
<img class="tc-text" :src="zData.proimages" />
<section class="tc-text">
<a :href="zData.proimages" target="_blank">{{zData.proimages}}</a>
</section>
<!-- <img class="tc-text" :src="zData.proimages" /> -->
</section>
</div>
<footer-nav class="footer" :class="popupStatus == true ? 'fliter' : ''"></footer-nav>
@@ -359,13 +361,20 @@ export default {
}
.tc-text {
width: 350px;
// width: 350px;
// width:100%;
padding: 32px;
box-sizing: border-box;
height: auto;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
a{
cursor: pointer;
}
}
}