<template>
<XqFormItem :key="theRowKey" :wrapper="tableLabel?newItem['wrapper']:null">
<div style=" display: flex;
flex-wrap: wrap;">
<draggable
class="draggable"
v-model="fileList"
chosenClass="chosen"
filter=".forbid"
forceFallback="true"
group="people"
animation="1000"
@start="onStart"
@end="onEnd"
>
<div v-for="(item, index) in fileList" :key="index" class="Uploading_img_warps">
<div class="Uploading_img_warp">
<div class="Uploading_imgs">
<div v-if="item.url && limit !== 0" class="masking">
<div class="maskings">
<a-icon
type="eye"
class="icon forbid"
style="color: #fdfdfd"
@click="handlePreview(item)"
/>
<a-icon
style="color: #fdfdfd"
type="delete"
class="icon forbid"
@click="ondelete(index)"
/>
</div>
</div>
<img
:src="item.url"
alt=""
class="Uploading_img"
/>
</div>
</div>
<p style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
{{ item.name }}
</p>
</div>
<XqUpload
class="forbid"
:showUploadList="false"
v-decorator="[
theRowKey,
{
...newItem['decorator'],
valuePropName: 'fileList',
getValueFromEvent: getValue
}
]"
name="files"
:form="form"
:customize="newItem['customize']"
:defaultFileList="newValue"
:fileList="fileList"
:decorator="[
theRowKey,
{
...newItem['decorator'],
valuePropName: 'fileList',
getValueFromEvent: getValue
}
]"
@change="handleChange"
>
<template v-if="showUploadBtn">
<a-button v-if="listType === 'text' || listType === 'picture'">
<a-icon type="upload" />
选择文件
</a-button>
<a-icon v-else type="plus" style="font-size: 32px; color: #999" />
</template>
</XqUpload>
</draggable>
</div>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</XqFormItem>
</template>
<script>
//导入draggable组件
import draggable from "vuedraggable";
import XqFormItem from "./XqFormItem";
import XqUpload from "./XqUpload";
import { message } from "ant-design-vue";
export default {
name: "",
components: {
XqFormItem,
XqUpload,
draggable
},
props: {
form: {
type: Object,
default: () => {}
},
item: {
type: Object,
default: () => {}
},
dataSource: {
type: Object,
default: () => {}
},
editable: {
type: Boolean,
default: false
},
rowKey: {
type: String,
default: ""
},
tableLabel: {
type: Boolean,
default: () => {
return false
}
}
},
data() {
return {
previewVisible: false,
previewImage: "",
fileList: [],
defined: false
};
},
computed: {
newItem() {
const tempItem = JSON.parse(JSON.stringify(this.item));
return tempItem;
},
theRowKey() {
return `${this.newItem['model']}${!!this.rowKey ? '_' + this.rowKey : ''}`;
},
newValue() {
if (this.item && this.dataSource) {
const value = this.dataSource[this.item["model"]];
const list = this.initList(value);
return list;
}
return [];
},
extendConfig() {
return this.item["extend"];
},
size() {
if(this.extendConfig && this.extendConfig.size) {
return this.extendConfig.size;
}
return false;
},
limit() {
if(this.extendConfig && this.extendConfig.limit) {
return this.extendConfig.limit;
}
return false;
},
listType() {
if(this.item && this.item["customize"] && this.item["customize"]["listType"]) {
return this.item["customize"]["listType"];
}
return "text";
},
showUploadBtn() {
if (this.limit && this.fileList && this.fileList.length >= this.limit) {
return false;
}
return true;
}
},
watch: {
newValue: {
handler(newVal) {
if (newVal && !this.defined) {
this.fileList = newVal;
this.defined = true;
}
},
immediate: true
}
},
created() {},
mounted() {},
methods: {
handleCancel() {
this.previewVisible = false;
},
//开始拖拽事件
onStart() {
this.drag = true;
},
//拖拽结束事件
onEnd() {
this.drag = false;
this.dataSource[this.item["model"]]=this.fileList
this.$emit("change", this.fileList);
},
ondelete(index) {
this.fileList.splice(index, 1);
this.dataSource[this.item["model"]]=this.fileList
this.$emit("change", this.fileList);
},
async handlePreview(file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
this.previewImage = file.url || file.preview;
this.previewVisible = true;
},
getValue(e) {
if(Array.isArray(e)) {
return e;
}
return e && e.fileList;
},
handleChange({file, fileList, event}) {
if(this.size){
if(file.size / 1024 / 1024 > this.size){
message.warning("文件体积超出限制，无法上传！")
return false;
}
}
let tempList = [...fileList];
if(this.limit){
tempList = tempList.slice(-this.limit);
}
tempList = tempList.map(li => {
if(li.response && li.response.code === 200) {
li.url = li.response.data[0]
}
return li;
})
this.fileList = tempList;
this.$emit("change", this.fileList);
},
initList(values) {
if(values) {
const urls = Array.isArray(values) ? values : values.split(",");
if(urls.length > 0) {
const tempList = [];
for(let i = 0; i < urls.length; i++) {
const url = urls[i];
if (Object.prototype.toString.call(url) === '[object Object]') {
tempList.push(url)
} else {
const nameArr = url.split("/");
tempList.push({
uid: -1 - i,
name: nameArr[nameArr.length - 1],
status: "done",
url: url
});
}
}
return tempList;
}
return [];
}
return [];
}
}
}
</script>
<style lang="scss">
.uploading {
width: 104px;
display: inline-block;
}
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.clearfix {
display: flex;
flex-wrap: wrap;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
.Uploading_img_warp {
width: 104px;
height: 104px;
border: 1px solid #d9d9d9;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
}
.Uploading_imgs {
position: relative;
width: 90px;
height: 90px;
overflow: hidden;
}
.Uploading_img {
width: 100%;
height: 100%;
object-fit: cover;
}
.masking {
background-color: rgba(0, 0, 0, 0.5);
display: none;
width: 90px;
height: 90px;
position: absolute;
left: 0;
right: 0;
}
.maskings {
width: 100%;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.Uploading_imgs:hover .masking {
display: block;
}
.Uploading_file {
display: inline-block;
font-size: 90px;
line-height: 90px;
}
.icon {
cursor: pointer;
margin: 0 2px;
color: #fff;
}
.Uploading_img_warps {
width: 114px;
margin: 0 8px 8px 0;
}
.Uploading_loading {
width: 100%;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.forbid {
display: inline-block;width: 0%;
}
/*被拖拽对象的样式*/
.item {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
.draggable {
display: flex;
flex-wrap: wrap;
}
/*选中样式*/
.chosen {
border: solid 1px #3089dc !important;
}</style>
|
