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>
|