165 lines
3.2 KiB
Vue
165 lines
3.2 KiB
Vue
<template>
|
|
<view class="">
|
|
<view class="inp_warp">
|
|
<view class="inp_title key"><text :class="flag ? 'b_color' : 'bo_color' ">*</text>{{title}}:</view>
|
|
<view class="form_right" @click="toUploadFile" v-if="isEdit">
|
|
<view>点击上传</view>
|
|
<view class="iconfont icon-you"></view>
|
|
</view>
|
|
</view>
|
|
<view class="doc_item" v-for="(item,index) in fileList" :key="index">
|
|
<image :src="BASE_IMG_URL+'/file-clip.png'" class="remarkimg" ></image>
|
|
<view class="doc_name" @click="toLookFile(item)">{{item.name}}</view>
|
|
<image :src="BASE_IMG_URL+'/file_del.png'" @click="delFile(index)" class="deleimg" v-if="isEdit"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { BASE_IMG_URL } from '@/util/api.js'
|
|
import { uploadUrl } from '@/api/index.js'
|
|
|
|
export default{
|
|
props:{
|
|
title:{
|
|
type:String,
|
|
default:'附件'
|
|
},
|
|
flag:{ //是否必填
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
fileList:{
|
|
type:Array,
|
|
default:[]
|
|
},
|
|
isEdit:{
|
|
type:Boolean,
|
|
default:true
|
|
}
|
|
},
|
|
data() {
|
|
return{
|
|
BASE_IMG_URL:BASE_IMG_URL
|
|
}
|
|
},
|
|
methods:{
|
|
//上传附件
|
|
toUploadFile() {
|
|
wx.chooseMessageFile({
|
|
count:1,
|
|
success:(res)=>{
|
|
let data = res.tempFiles[0]
|
|
this.Upload(data.path,data.name)
|
|
}
|
|
})
|
|
},
|
|
Upload(file,name) {
|
|
uni.uploadFile({
|
|
url: uploadUrl,
|
|
name: 'file',
|
|
header: {
|
|
'token': uni.getStorageSync('token'),
|
|
},
|
|
filePath: file,
|
|
formData:{name},
|
|
success: (res) => {
|
|
let data = JSON.parse(res.data)
|
|
if (data.code == 1) {
|
|
let res = data.data
|
|
res.name = name
|
|
res.file_path = res.url
|
|
console.log(res,'上传文件')
|
|
this.$emit('uploadFile',res)
|
|
} else {
|
|
uni.showToast({
|
|
title: '上传失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
//查看附件
|
|
toLookFile(item) {
|
|
this.openCommonFile(item)
|
|
},
|
|
//删除附件
|
|
delFile(id,index) {
|
|
console.log('删除文件')
|
|
this.$emit('delFile',index)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.doc_item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding:24rpx 35rpx;
|
|
background:#fff;
|
|
border-bottom:1rpx solid #EDEDED;
|
|
.remarkimg{
|
|
width:31rpx;
|
|
height:33rpx;
|
|
margin-right:15rpx;
|
|
}
|
|
.deleimg{
|
|
width:44rpx;
|
|
height:44rpx;
|
|
}
|
|
.doc_name{
|
|
width:575rpx;
|
|
font-size:24rpx;
|
|
color:#333;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.inp_warp {
|
|
padding:30rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #EDEDED;
|
|
.inp_title {
|
|
font-size: 32rpx;
|
|
color:#999;
|
|
}
|
|
.form_right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
color: #999;
|
|
min-width:450rpx;
|
|
text-align: right;
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-left:24rpx;
|
|
}
|
|
.rightinput{
|
|
width:100%;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.add_in{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
font-size:26rpx;
|
|
color:#FFA205;
|
|
.icon-jiahaocu{
|
|
font-size:28rpx;
|
|
color:#FFA205;
|
|
margin-right:5rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |