gamma File-Format-Ftransit 弹窗中Spectrum Transfer 功能前端代码实现

This commit is contained in:
任珮宇 2023-10-17 14:35:56 +08:00
parent 0f8d019a56
commit 83d3da81ad
2 changed files with 78 additions and 6 deletions

View File

@ -100,16 +100,24 @@
</a-form-model>
<title-over-border title="Spectrum Transfer" class="spectrum-transfer">
<div class="title-container">
<div class="title">Canberra IEC1455(.IEC)</div>
<div class="title">
<a-upload name="file" :multiple="true" :showUploadList="false" :beforeUpload="ortecBeforeUpload">
<div>Canberra IEC1455(.IEC)</div>
</a-upload>
</div>
<div class="data-type">
Data type
<div class="data-type-select">
<custom-select :option="[{ label: 'SAMPLEPHD', value: 1 }]" />
</div>
</div>
<div class="title">IMS .ims .rms</div>
<div class="title">
<a-upload name="file" :multiple="true" :showUploadList="false" :beforeUpload="imsBeforeUpload">
<div>IMS .ims .rms</div>
</a-upload>
</div>
</div>
<a-transfer></a-transfer>
<a-transfer :render="(item) => item.title" :data-source="dataSource" :target-keys="targetKeys" />
</title-over-border>
</div>
</template>
@ -137,8 +145,32 @@ export default {
backgroundMea: '0',
transmitTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
},
dataSource: [],
targetKeys: [],
}
},
methods: {
ortecBeforeUpload(file, fileList) {
console.log(file, fileList)
this.dataSource = fileList.map((item) => {
return {
key: item.uid,
title: item.name,
}
})
},
imsBeforeUpload(file, fileList) {
console.log(file, fileList)
let arr = fileList.map((item) => {
return {
key: item.uid,
title: item.name,
}
})
this.targetKeys = arr.map((item) => item.key)
this.dataSource.push(...arr)
},
},
}
</script>
@ -239,6 +271,10 @@ export default {
background-color: #225a6a;
height: 32px;
line-height: 32px;
/deep/.ant-upload {
width: 100%;
cursor: pointer;
}
}
}

View File

@ -100,16 +100,24 @@
</a-form-model>
<title-over-border title="Spectrum Transfer" class="spectrum-transfer">
<div class="title-container">
<div class="title">ORTEC int.spc</div>
<div class="title">
<a-upload name="file" :multiple="true" :showUploadList="false" :beforeUpload="ortecBeforeUpload">
<div>ORTEC int.spc</div>
</a-upload>
</div>
<div class="data-type">
Data type
<div class="data-type-select">
<custom-select :option="[{ label: 'SAMPLEPHD', value: 1 }]" />
</div>
</div>
<div class="title">IMS .ims .rms</div>
<div class="title">
<a-upload name="file" :multiple="true" :showUploadList="false" :beforeUpload="imsBeforeUpload">
<div>IMS .ims .rms</div>
</a-upload>
</div>
</div>
<a-transfer></a-transfer>
<a-transfer :render="(item) => item.title" :data-source="dataSource" :target-keys="targetKeys" />
</title-over-border>
</div>
</template>
@ -137,8 +145,32 @@ export default {
backgroundMea: '0',
transmitTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
},
dataSource: [],
targetKeys: [],
}
},
methods: {
ortecBeforeUpload(file, fileList) {
console.log(file, fileList)
this.dataSource = fileList.map((item) => {
return {
key: item.uid,
title: item.name,
}
})
},
imsBeforeUpload(file, fileList) {
console.log(file, fileList)
let arr = fileList.map((item) => {
return {
key: item.uid,
title: item.name,
}
})
this.targetKeys = arr.map((item) => item.key)
this.dataSource.push(...arr)
},
},
}
</script>
@ -239,6 +271,10 @@ export default {
background-color: #225a6a;
height: 32px;
line-height: 32px;
/deep/.ant-upload {
width: 100%;
cursor: pointer;
}
}
}