305 lines
7.0 KiB
Vue
305 lines
7.0 KiB
Vue
<template>
|
||
<view class="list-body">
|
||
<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="400rpx" leftText="资质列表"
|
||
leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
|
||
<view class="content">
|
||
<view class="item-wrap" v-for="(val,index) in rpjFileList" :key="val.id">
|
||
<view class="duty-item">
|
||
<view class="top-info">
|
||
<view class="info-title" v-if="val.file_cate_">{{val.file_cate_.name}}</view>
|
||
</view>
|
||
<view class="center-info" v-if="val.files_.length>0">
|
||
<view class="info-details">上传文件：</view>
|
||
<view class="info-details" v-for="val in val.files_">
|
||
<a :href="val.file">{{val.name}} </a>
|
||
</view>
|
||
</view>
|
||
<view class="center-info" v-else>
|
||
<view class="info-details">暂无上传文件</view>
|
||
</view>
|
||
<!-- <view class="bottom-btns">
|
||
<view class="uploadFile" @click="rpjHandle(val,'show')">
|
||
<image src="../../../static/common/addIcon.png" mode=""></image>
|
||
上传
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn" v-if="showBtns">
|
||
<button type="primary" class="save-btn" @click="nextStep">下一步</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/* 这是条件编译,意思是：只在APP中出现如下的代码，小程序是不支持的 */
|
||
// #ifdef APP-PLUS
|
||
var file = uni.requireNativePlugin('TX-File');
|
||
const plug = uni.requireNativePlugin("Html5app-filePicker");
|
||
const plugin = uni.requireNativePlugin("K-ChooseFilesModule");
|
||
// #endif
|
||
|
||
export default {
|
||
name: "rpjFiles",
|
||
watch: {
|
||
/* 文件下载监听 */
|
||
lsDownLoadImg(newVal, oldVal) {
|
||
let val = newVal;
|
||
if (String(newVal).indexOf(",") > -1) {
|
||
val = String(newVal).split(",")[0] === "true";
|
||
}
|
||
this.$set(this.downFiles, 'downLoadImg' + this.lsFileId, val)
|
||
},
|
||
/* 文件下载监听 */
|
||
principal(newVal, oldVal) {
|
||
if (!this.itemId) {
|
||
if (oldVal.roleId === undefined && newVal.roleId !== undefined) {
|
||
this.formData.itemInfo.applicationDept = newVal.deptId
|
||
}
|
||
}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
formData: {
|
||
name: '',
|
||
},
|
||
head: {
|
||
Authorization: "Bearer " + this.vuex_token
|
||
},
|
||
showBtns: false,
|
||
rpjFileList: [],
|
||
result: [],
|
||
// 文件进度
|
||
imgFlag: false,
|
||
//文件下载
|
||
downFiles: {},
|
||
uploadImgsList: [],
|
||
fileList :[],
|
||
rpj:'',
|
||
rparty:'',
|
||
rpjName:''
|
||
|
||
}
|
||
},
|
||
|
||
onLoad(params) {
|
||
if (params.rpj) {
|
||
this.rpj = params.rpj;
|
||
this.rparty = params.rparty;
|
||
this.rpjName = params.rpjName;
|
||
}
|
||
this.showBtns = true;
|
||
},
|
||
onShow() {
|
||
this.getHeader();
|
||
this.getRpjLists();
|
||
},
|
||
methods: {
|
||
getHeader() {
|
||
this.header = {
|
||
Authorization: "Bearer " + this.vuex_token
|
||
}
|
||
},
|
||
//获取
|
||
getRpjLists() {
|
||
let that = this;
|
||
that.$u.api.rpjFileList({
|
||
rpj: that.rpj,
|
||
page: 0
|
||
}).then(res => {
|
||
that.rpjFileList = res;
|
||
debugger;
|
||
console.log(res)
|
||
|
||
})
|
||
},
|
||
/* 文件删除 */
|
||
delFile(index) {
|
||
this.formData.leaveApplicationFiles.splice(index, 1);
|
||
},
|
||
/* */
|
||
showValue(res, file) {
|
||
debugger;
|
||
console.log(res)
|
||
console.log(file)
|
||
console.log(this.uploadImgsList)
|
||
},
|
||
rpjHandle() {
|
||
let that = this;
|
||
debugger;
|
||
console.log(this.vuex_token)
|
||
uni.chooseImage({
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera '], //从相册选择
|
||
success: function(res) {
|
||
|
||
console.log(JSON.stringify(res.tempFilePaths));
|
||
let tempFilePaths = res.tempFilePaths;
|
||
tempFilePaths.forEach((item) => {
|
||
uni.uploadFile({
|
||
url: 'http://1.203.161.103:2800/api/file/', //服务器地址
|
||
fileType: "image", //ZFB必填,不然报错
|
||
filePath: item, //这个就是我们上面拍照返回或者先中照片返回的数组
|
||
name: 'file',
|
||
// 请求头一定要加，否则 iOS 图片上传会失败
|
||
header: {
|
||
'content-type': 'multipart/form-data; boundary=----WebKitFormBoundarymlJpQcllstnJXOES',
|
||
'Authorization': 'Bearer ' + that.vuex_token,
|
||
|
||
},
|
||
success: (uploadFileRes) => {
|
||
|
||
}
|
||
});
|
||
})
|
||
}
|
||
});
|
||
},
|
||
uploads() {
|
||
const _this = this;
|
||
return Promise.all(_this.uploadImgsList.map(item => _this.uploadImage(item.picturePath))).then(res => {
|
||
return res.map(item => ({
|
||
fileName: item.fileName,
|
||
filePath: item.url
|
||
}))
|
||
})
|
||
},
|
||
uploadImage(url) {
|
||
return new Promise(async (resolve, reject) => {
|
||
uni.uploadFile({
|
||
url: this.$u.api.uploadFile, //后台地址
|
||
filePath: url,
|
||
name: 'file',
|
||
success: (uploadFileRes) => {
|
||
resolve(JSON.parse(uploadFileRes.data));
|
||
}
|
||
})
|
||
})
|
||
},
|
||
//提交
|
||
async submitFlood() {
|
||
let photoList = await this.uploads();
|
||
},
|
||
|
||
nextStep() {
|
||
let that = this;
|
||
let params = `?rpj=${that.rpj}&rparty=${that.rparty}&rpjName=${that.rpjName}`;
|
||
uni.navigateTo({
|
||
url: '/pages/workSpace/rpj/rpjWorkers' + params
|
||
})
|
||
let files = this.$refs.uUpload.lists.filter(val => {
|
||
return val.progress == 100;
|
||
})
|
||
let sData = [];
|
||
// 如果您不需要进行太多的处理，直接如下即可
|
||
// files = this.$refs.uUpload.lists;
|
||
for (var i = 0; i < files.length; i++) {
|
||
if (files[i].response) {
|
||
sData.push(files[i].response.data.id)
|
||
} else {
|
||
for (var m = 0; m < this.fileList.length; m++) {
|
||
if (this.fileList[m].url == files[i].url) {
|
||
sData.push(this.fileList[m].id)
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
},
|
||
goBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
>>>.uni-navbar__header,
|
||
>>>.uni-status-bar {
|
||
background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#e60012, #e60012) !important;
|
||
}
|
||
|
||
.list-body {
|
||
background-color: #f3fbff;
|
||
padding-bottom: 113px;
|
||
}
|
||
|
||
.content {
|
||
padding: 14rpx;
|
||
}
|
||
|
||
.item-wrap {
|
||
margin-bottom: 14rpx;
|
||
}
|
||
|
||
.duty-item {
|
||
width: 720rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 10rpx;
|
||
margin: 0 auto;
|
||
padding: 24rpx 21rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.info-title {
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 30rpx;
|
||
line-height: 72rpx;
|
||
color: #3d3d3d;
|
||
flex: 1;
|
||
}
|
||
|
||
.right-time {
|
||
font-size: 24rpx;
|
||
line-height: 72rpx;
|
||
color: #ababab;
|
||
}
|
||
|
||
.center-info {
|
||
padding-bottom: 30rpx;
|
||
border-bottom: 1rpx solid #eeeeee;
|
||
}
|
||
|
||
.info-details {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #5b5b5b;
|
||
}
|
||
|
||
.bottom-btns {
|
||
text-align: center;
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 28rpx;
|
||
line-height: 83rpx;
|
||
}
|
||
|
||
.uploadFile {
|
||
color: #2c6fd9;
|
||
}
|
||
|
||
.uploadFile image {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-right: 10rpx;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.btn {
|
||
margin: auto;
|
||
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
|
||
width: 70%;
|
||
}
|
||
|
||
.save-btn {
|
||
height: 80rpx;
|
||
color: #fff;
|
||
font-size: 30upx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
</style>
|