<template>
|
<div
|
:class="[disabled ? 'is_disabled' : 'is_valid']"
|
class="xh-files-cont">
|
<flexbox
|
:class="[disabled ? 'is_disabled' : 'is_valid']"
|
class="f-header"
|
@click.native="selectImage">
|
<img
|
v-if="!disabled"
|
class="f-logo"
|
src="@/assets/img/relevance_file.png" >
|
<div class="f-name">附件</div>
|
<input
|
:id="'xhImageInput' + index||'0'"
|
type="file"
|
class="bar-iput"
|
accept="*.*"
|
multiple
|
@change="xhUploadFile" >
|
</flexbox>
|
<div class="f-body">
|
<flexbox
|
v-for="(item, index) in dataValue"
|
:key="index"
|
class="f-item">
|
<img
|
class="f-img"
|
src="@/assets/img/relevance_file.png" >
|
<div class="f-name">{{ item.name.length > 25 ? (item.name.substring(0, 25) + '...'): item.name+'('+item.size+')' }}</div>
|
<div
|
class="close-button"
|
@click="deleteFile(item, index)">×</div>
|
</flexbox>
|
</div>
|
</div>
|
</template>
|
<script type="text/javascript">
|
import arrayMixin from './arrayMixin'
|
// import { crmFileSave, crmFileDelete } from '@/api/common'
|
// import { fileSize } from '@/utils/index'
|
|
export default {
|
name: 'XhFiles', // 新建 file 以数组的形式上传
|
components: {},
|
mixins: [arrayMixin],
|
props: {},
|
data () {
|
return {
|
batchId: '' // 批次ID
|
}
|
},
|
computed: {},
|
watch: {},
|
mounted () {},
|
methods: {
|
selectImage () {
|
if (!this.disabled) {
|
document.getElementById('xhImageInput' + this.index || '0').click()
|
}
|
},
|
/** 图片选择出发 */
|
xhUploadFile (event) {
|
var files = event.target.files
|
var firstFile = files[0]
|
this.sendFileRequest(firstFile, () => {
|
for (let index = 1; index < files.length; index++) {
|
const file = files[index]
|
this.sendFileRequest(file)
|
}
|
event.target.value = ''
|
})
|
},
|
// 发送请求
|
sendFileRequest (file, result) {
|
var params = { file: file }
|
if (this.batchId) {
|
params.batchId = this.batchId
|
}
|
// crmFileSave(params)
|
// .then(res => {
|
// if (this.batchId === '') {
|
// this.batchId = res.batchId
|
// }
|
// res.size = fileSize(res.size)
|
// this.dataValue.push(res)
|
// this.$emit('value-change', {
|
// index: this.index,
|
// value: this.dataValue
|
// })
|
// if (result) {
|
// result()
|
// }
|
// })
|
// .catch(() => {})
|
},
|
/** 删除图片 */
|
deleteFile (item, index) {
|
this.$confirm('您确定要删除该文件吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
// crmFileDelete({
|
// id: item.fileId
|
// })
|
// .then(res => {
|
// this.dataValue.splice(index, 1)
|
// this.$emit('value-change', {
|
// index: this.index,
|
// value: this.dataValue
|
// })
|
// this.$message.success('操作成功')
|
// })
|
// .catch(() => {})
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消操作'
|
})
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
/** 附件 */
|
.xh-files-cont {
|
position: relative;
|
display: inline-block;
|
border-radius: 3px;
|
width: 100%;
|
border: 1px solid #ddd;
|
padding: 3.5px 5px;
|
margin: 3px;
|
line-height: 15px;
|
}
|
|
.xh-files-cont.is_disabled {
|
background-color: #f5f7fa;
|
border-color: #e4e7ed;
|
cursor: not-allowed;
|
.f-name {
|
background-color: #f0f4f8ea;
|
color: #c0c4cc;
|
cursor: not-allowed;
|
}
|
}
|
|
.xh-files-cont.is_valid:hover {
|
border-color: #c0c4cc;
|
}
|
|
.f-header {
|
cursor: pointer;
|
padding: 5px 0 5px;
|
.f-logo {
|
position: block;
|
width: 15px;
|
height: 15px;
|
margin-right: 8px;
|
}
|
.f-name {
|
color: #4D88FF;
|
font-size: 12px;
|
}
|
}
|
.f-header.is_disabled {
|
cursor: not-allowed;
|
}
|
|
.f-body {
|
.f-item {
|
padding: 3px 0;
|
height: 25px;
|
.f-img {
|
position: block;
|
width: 15px;
|
height: 15px;
|
padding: 0 1px;
|
margin-right: 8px;
|
}
|
.f-name {
|
color: #666;
|
font-size: 12px;
|
}
|
.close-button {
|
cursor: pointer;
|
}
|
}
|
}
|
|
.bar-iput {
|
position: absolute;
|
top: 0;
|
left: 0;
|
height: 0;
|
width: 0;
|
opacity: 0;
|
}
|
</style>
|
