319 lines
9.3 KiB
Vue
319 lines
9.3 KiB
Vue
<template>
|
||
<view class="full-upload" v-if="isShowBtn">
|
||
<view class="upload-plugin" v-if="isShowBlueButton">
|
||
<lsj-upload ref="fullUpload" childId="upload1" :option="option" :instantly="true" height="30px"
|
||
@change="change" @uploadEnd="onuploadEnd" :multiple="false"> <!-- @progress="onprogre" -->
|
||
<view class="row">
|
||
<view class="btn" @click="handleTap">
|
||
<u-button :loading="isLoading" :disabled="isLoading" type="primary" size="small" text="附件">
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</lsj-upload>
|
||
</view>
|
||
<!-- 上传的另一种形式 isShowBlueButton为false-->
|
||
<view class="upload-plugin-info" v-else>
|
||
<lsj-upload ref="fullUpload" childId="upload1" :option="option" :instantly="true" height="82px"
|
||
@change="change" @uploadEnd="onuploadEnd" :multiple="false"> <!-- @progress="onprogre" -->
|
||
<view>
|
||
<view @click="handleTap">
|
||
<!-- <u-button :loading="isLoading" :disabled="isLoading" type="primary" size="small" text="附件">
|
||
</u-button> -->
|
||
<view class="plus-info">
|
||
<u-icon name="plus" color="#c8c7cc" size="20" v-if="!isLoading"></u-icon>
|
||
<u-loading-icon :show="isLoading" mode="circle" size="20"></u-loading-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</lsj-upload>
|
||
</view>
|
||
<view class="list">
|
||
<u-cell-group :border="false">
|
||
<u-cell title="" v-for="(value, key) in uFiles.filter(i => !i.IS_DELETED)" :key="key">
|
||
<view slot="icon" style="font-size: 16px;color: #2797ff;" @click="preview(value)"
|
||
v-if="value.name.indexOf('png') > -1 || value.name.indexOf('jpg') > -1 || value.name.indexOf('jpeg') > -1|| value.name.indexOf('gif') > -1">
|
||
{{value.name}}
|
||
</view>
|
||
<u-link slot="icon" :href="baseUrl + ':3199' + value.remotePath" :text="value.name" color="#2797ff"
|
||
v-else></u-link>
|
||
<u-icon slot="right-icon" size="16" name="trash" @click="delFile(value, key)"></u-icon>
|
||
</u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else>
|
||
<view class="list">
|
||
<u-cell-group :border="false">
|
||
<u-cell title="" v-for="(value, key) in uFiles" :key="key">
|
||
<view slot="icon" style="font-size: 16px;color: #2797ff;" @click="preview(value)"
|
||
v-if="value.name.indexOf('png') > -1 || value.name.indexOf('jpg') > -1 || value.name.indexOf('jpeg') > -1|| value.name.indexOf('gif') > -1">
|
||
{{value.name}}
|
||
</view>
|
||
<u-link slot="icon" :href="baseUrl + ':3199' + value.remotePath" :text="value.name" color="#2797ff"
|
||
v-else></u-link>
|
||
<!--wyw 兼顾图片和文件 -->
|
||
<!-- <u-link v-if="value.remotePath!=undefined&&value.remotePath.indexOf('.png')>-1" slot="icon"
|
||
:href="baseUrl + ':3199' + value.remotePath" :text="value.name"></u-link>
|
||
<image v-else slot="icon" style="width: 120px; height: 80px; background-color: #eeeeee;"
|
||
:src="'http://localhost:3199' + value.remotePath" ></image> -->
|
||
</u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import UButton from '../../uni_modules/uview-ui/components/u-button/u-button.vue'
|
||
import config from '../../config/common'
|
||
|
||
import {
|
||
guid
|
||
} from '../../utils/common'
|
||
|
||
export default {
|
||
components: {
|
||
UButton
|
||
},
|
||
model: {
|
||
event: 'upload',
|
||
prop: 'value'
|
||
},
|
||
props: {
|
||
upload: {
|
||
type: Function,
|
||
default () {
|
||
return undefined
|
||
}
|
||
},
|
||
value: {
|
||
type: Array,
|
||
default () {
|
||
return undefined
|
||
}
|
||
},
|
||
isShowBtn: { //是否显示 控件
|
||
type: Boolean,
|
||
default () {
|
||
return true
|
||
}
|
||
},
|
||
listProp: { //附件model 需要添加的属性
|
||
type: Array,
|
||
default () {
|
||
return undefined
|
||
}
|
||
},
|
||
listPropVal: { //附件model 需要添加的属性的定值
|
||
type: Array,
|
||
default () {
|
||
return undefined
|
||
}
|
||
},
|
||
isShowBlueButton: {
|
||
type: Boolean,
|
||
default () {
|
||
return true
|
||
}
|
||
}
|
||
// IMG_FILE_ID: {
|
||
// type: String,
|
||
// default () {
|
||
// return guid()
|
||
// }
|
||
// },
|
||
},
|
||
data() {
|
||
return {
|
||
baseUrl: config.uni_app_web_api_url,
|
||
// 上传接口参数
|
||
option: {
|
||
url: config.serviceHost('/PF/File/UploadFile'),
|
||
name: 'file',
|
||
header: {
|
||
Tenant: uni.getStorageSync('Tenant') || '',
|
||
userid: uni.getStorageSync('appInfo')?.User?.ID || ''
|
||
},
|
||
formData: {
|
||
OrgId: uni.getStorageSync('orgId'),
|
||
imgFileID: guid()
|
||
}
|
||
},
|
||
uFiles: [],
|
||
isLoading: false
|
||
}
|
||
},
|
||
beforeMount() {
|
||
//wyw 数据初始化加载
|
||
if (this.value && this.value.length > 0) {
|
||
this.uFiles = this.value
|
||
for (let i = 0; i < this.uFiles.length; i++) {
|
||
if (this.uFiles[i].Nav_ImgFile != undefined) {
|
||
this.uFiles[i].remotePath = this.uFiles[i].Nav_ImgFile.FILE_PATH
|
||
// this.uFiles[i].name = this.uFiles[i].Nav_ImgFile.Nav_File.FILE_NAME
|
||
this.uFiles[i].name = this.uFiles[i].Nav_ImgFile.FILE_NAME //显示名称修改 wyw 2024-04-17
|
||
}
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
value() {
|
||
if (this.value == null)
|
||
this.value = []
|
||
this.uFiles = this.value
|
||
if (this.uFiles && this.uFiles.length > 0) {
|
||
for (let i = 0; i < this.uFiles.length; i++) {
|
||
if (this.uFiles[i].Nav_ImgFile != undefined) {
|
||
this.uFiles[i].remotePath = this.uFiles[i].Nav_ImgFile.FILE_PATH
|
||
// this.uFiles[i].name = this.uFiles[i].Nav_ImgFile.Nav_File.FILE_NAME
|
||
this.uFiles[i].name = this.uFiles[i].Nav_ImgFile.FILE_NAME //显示名称修改 wyw 2024-04-17
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
preview(value) {
|
||
let urlshref = this.baseUrl + ':3199' + value.remotePath
|
||
uni.previewImage({
|
||
urls: [urlshref]
|
||
})
|
||
},
|
||
handleTap() {
|
||
this.$nextTick(() => {
|
||
this.$refs['fullUpload'].show()
|
||
})
|
||
},
|
||
onuploadEnd(item) {
|
||
// 更新当前窗口状态变化的文件
|
||
this.$forceUpdate()
|
||
this.isLoading = false
|
||
// this.dataUpdate() //数据处理
|
||
if (item.responseText) {
|
||
item.responseText = JSON.parse(item.responseText).Data
|
||
item.remotePath = item.responseText.imgFilePath
|
||
// item.remoteId = item.responseText.imgFileID
|
||
// item.IMG_FILE_ID = item.responseText.imgFileID
|
||
item.remoteId = this.option.formData.imgFileID
|
||
item.IMG_FILE_ID = this.option.formData.imgFileID
|
||
item.ORG_ID = uni.getStorageSync('orgId')
|
||
item.ID = guid()
|
||
if (this.listProp != undefined && this.listProp.length > 0) {
|
||
for (let i = 0; i < this.listProp.length; i++) {
|
||
item[this.listProp[i]] = this.listPropVal[i]
|
||
}
|
||
}
|
||
if (!this.uFiles) {
|
||
this.uFiles = []
|
||
}
|
||
this.uFiles.push(item)
|
||
}
|
||
// this.option.formData.imgFileID = guid() //ykx 重新赋值，否则guid只执行一次，解决上传imgfileid相同报错问题
|
||
this.$refs.fullUpload.setData('formData.imgFileID', guid())
|
||
},
|
||
change(files) {
|
||
// const allFiles = [...files.values()]
|
||
this.isLoading = true
|
||
// this.option.formData.imgFileID = guid()
|
||
// allFiles.forEach(e => {
|
||
// //如果 IMG_FILE_ID null 往里加
|
||
// // debugger
|
||
// if (!e.IMG_FILE_ID) {
|
||
// e.IMG_FILE_ID = this.option.formData.imgFileID
|
||
// e.ORG_ID = uni.getStorageSync('orgId')
|
||
// e.ID = guid()
|
||
// if (this.listProp != undefined && this.listProp.length > 0) {
|
||
// for (let i = 0; i < this.listProp.length; i++) {
|
||
// e[this.listProp[i]] = this.listPropVal[i]
|
||
// }
|
||
// }
|
||
// if (!this.uFiles)
|
||
// this.uFiles = []
|
||
// this.uFiles.push(e)
|
||
// }
|
||
// })
|
||
|
||
// this.dataUpdate() //数据处理
|
||
|
||
// this.$emit('upload', allFiles)
|
||
this.$emit('upload', this.uFiles) //wyw
|
||
|
||
// 强制更新视图
|
||
// this.$forceUpdate();
|
||
|
||
},
|
||
|
||
//数据赋值 方法可对外
|
||
dataUpdate() {
|
||
this.uFiles.forEach(e => {
|
||
if (e.responseText && (!e.IMG_FILE_ID || !e.ORG_ID)) {
|
||
e.responseText = JSON.parse(e.responseText).Data
|
||
e.remotePath = e.responseText.imgFilePath
|
||
e.remoteId = e.responseText.imgFileID
|
||
// e.IMG_FILE_ID = e.responseText.imgFileID
|
||
// debugger
|
||
// e.ORG_ID = uni.getStorageSync('orgId')
|
||
// e.ID = guid()
|
||
// if (this.listProp != undefined && this.listProp.length > 0) {
|
||
// for (let i = 0; i < this.listProp.length; i++) {
|
||
// e[this.listProp[i]] = this.listPropVal[i]
|
||
// }
|
||
// }
|
||
}
|
||
// else {
|
||
// if (isReturn && !e.IMG_FILE_ID) {
|
||
// return false
|
||
// }
|
||
// }
|
||
})
|
||
|
||
},
|
||
delFile(val, key) {
|
||
// //附件删除 （有bug）
|
||
// this.uFiles.splice(key, 1)
|
||
// this.$refs['fullUpload'].clear(val.name)
|
||
// this.isLoading = false
|
||
|
||
|
||
//wyw 2024-04-17
|
||
// 修改原因 ：之前直接把数据删除了，原始数据不能传到后台，这样【删除】无实际效果，只能是数据添加
|
||
//通过判断 CREATER_ID 或 CREATE_TIME 是否有值来判断是否数据库数据
|
||
//显示的时候 判断 IS_DELETED
|
||
if (val.CREATER_ID || val.CREATE_TIME) {
|
||
val.IS_DELETED = true
|
||
this.$refs['fullUpload'].clear(val.name)
|
||
this.isLoading = false
|
||
//下划线 怎么判断删除
|
||
|
||
} else {
|
||
this.uFiles.splice(key, 1)
|
||
this.$refs['fullUpload'].clear(val.name)
|
||
this.isLoading = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.upload-plugin {
|
||
width: 100px;
|
||
}
|
||
|
||
.upload-plugin-info {
|
||
width: 82px;
|
||
}
|
||
|
||
.plus-info {
|
||
border: 1px solid #c8c7cc;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 30px 0px;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
<style>
|
||
.list>>>.u-cell__left-icon-wrap {
|
||
width: 100%;
|
||
word-break: break-all;
|
||
}
|
||
</style> |