mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-18 23:36:46 +08:00
-- 附件
This commit is contained in:
yuping
85
src/components/common/BaseUpload.vue
Normal file
85
src/components/common/BaseUpload.vue
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<a-upload
|
||||||
|
:file-list="files"
|
||||||
|
action="/manageApi/file/upload"
|
||||||
|
:show-upload-list="showUploadList"
|
||||||
|
:multiple="multiple"
|
||||||
|
:before-upload="beforeUpload"
|
||||||
|
@change="handleChange"
|
||||||
|
ref="imageRef"
|
||||||
|
>
|
||||||
|
<template v-for="(_, key, index) in $slots" :key="index" v-slot:[key]>
|
||||||
|
<slot :name="key"></slot>
|
||||||
|
</template>
|
||||||
|
</a-upload>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import {defineProps, defineEmits, defineExpose, ref, watch} from "vue";
|
||||||
|
import {message} from "ant-design-vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
value: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
multiple: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showUploadList: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
fileType: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits({})
|
||||||
|
|
||||||
|
const files = ref([])
|
||||||
|
const imageRef = ref()
|
||||||
|
|
||||||
|
watch(props, () => {
|
||||||
|
props.value.length !== files.value.length && (files.value = props.value)
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleChange({file, fileList}) {
|
||||||
|
file.response && file.response.code === 200 && (file.url = file.response.data)
|
||||||
|
files.value = fileList
|
||||||
|
emit('update:value', fileList)
|
||||||
|
}
|
||||||
|
|
||||||
|
function beforeUpload(file) {
|
||||||
|
if (!props.fileType.includes(file.name.split(".").slice(-1).join(''))) {
|
||||||
|
message.error(
|
||||||
|
"不支持该格式"
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove(i) {
|
||||||
|
files.value.splice(i, 1)
|
||||||
|
emit('update:value', files.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
function reUpload(i) {
|
||||||
|
if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') {
|
||||||
|
imageRef.value.abort(files.value[i].raw)
|
||||||
|
files.value[i].status = 'abort';
|
||||||
|
} else if (files.value[i].status === 'fail' || files.value[i].status === 'abort') {
|
||||||
|
imageRef.value.handleStart(files.value[i].raw)
|
||||||
|
imageRef.value.submit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function abort(i) {
|
||||||
|
imageRef.value.abort(files.value[i].raw)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
defineExpose({reUpload, remove, abort})
|
||||||
|
|
||||||
|
</script>
|
||||||
202
src/components/common/FJUpload.vue
Normal file
202
src/components/common/FJUpload.vue
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<Upload v-model:value="files" ref="uploadRef" :file-type="fileType">
|
||||||
|
<div class="accessory" style="cursor: pointer">
|
||||||
|
<span class="accessory_icon">
|
||||||
|
<img
|
||||||
|
src="@/assets/images/coursewareManage/enclosure.png"
|
||||||
|
alt="enclosure"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span style="color: #4ea6ff;margin-left:10px">添加附件</span>
|
||||||
|
</div>
|
||||||
|
</Upload>
|
||||||
|
<div>支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</div>
|
||||||
|
</div>
|
||||||
|
<div class="mbl_items12" style="margin-left: 0">
|
||||||
|
<div
|
||||||
|
class="i12_box1"
|
||||||
|
v-for="(item, index) in files"
|
||||||
|
style="align-items: flex-end"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="file_img"></div>
|
||||||
|
<div class="file_detail">
|
||||||
|
<div class="file_name">
|
||||||
|
<span style="color: #6f6f6f">{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="file_size">-->
|
||||||
|
<!-- <span style="color: #999ba3">{{ item.size }}</span>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="file_updata">
|
||||||
|
<div class="updatabox">
|
||||||
|
<div
|
||||||
|
:class="`${{uploading: 'updatacolor3', done: 'updatacolor' ,error: 'updatacolor2'}[item.status] || 'updatacolor'}`"
|
||||||
|
:style="{width:`${item.status==='uploading'?parseInt(item.percent):100}%`}"></div>
|
||||||
|
<div v-if="item.status"
|
||||||
|
:class="`${{uploading: 'updataxq1', done: 'updataxq' ,error: 'updataxq2'}[item.status] || 'updataxq'}`">
|
||||||
|
{{ {uploading: '正在上传', done: '上传完成', error: '上传失败'}[item.status] || '' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="upjd" v-if="item.percent">
|
||||||
|
<span style="margin: auto 5px">{{ item.status === 'uploading' ? parseInt(item.percent) : 100 }}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="file_operation" @click="del(index)" style="color: #4ea6ff">
|
||||||
|
删除
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import {defineEmits, defineProps, ref, watch, onMounted} from "vue";
|
||||||
|
import Upload from "./BaseUpload.vue";
|
||||||
|
|
||||||
|
const emit = defineEmits({})
|
||||||
|
const props = defineProps({
|
||||||
|
value: String,
|
||||||
|
})
|
||||||
|
const files = ref([])
|
||||||
|
const uploadRef = ref()
|
||||||
|
|
||||||
|
const fileType = ref([
|
||||||
|
"jpg",
|
||||||
|
"jpeg",
|
||||||
|
"png",
|
||||||
|
"gif",
|
||||||
|
"pdf",
|
||||||
|
"ppt",
|
||||||
|
"pptx",
|
||||||
|
"doc",
|
||||||
|
"docx",
|
||||||
|
"xls",
|
||||||
|
"xlsx",
|
||||||
|
"zip",
|
||||||
|
])
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(files, () => {
|
||||||
|
files.value && files.value.length && emit('update:value', files.value.filter(e => e.url).map(e => e.url).join(','))
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(props, init)
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
if (props.value && props.value !== files.value.map(e => e.url).join(',')) {
|
||||||
|
files.value = props.value.split(',').map(e => ({name: e, url: e}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function del(i) {
|
||||||
|
uploadRef.value.remove(i)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.mbl_items12 {
|
||||||
|
width: 440px;
|
||||||
|
margin-left: 100px;
|
||||||
|
|
||||||
|
.i12_box1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 17px 0px 17px 21px;
|
||||||
|
border: 1px solid #eff4fc;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.file_img {
|
||||||
|
width: 27px;
|
||||||
|
height: 32px;
|
||||||
|
background-image: url(@/assets/images/coursewareManage/imgs.png);
|
||||||
|
margin-right: 22px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.file_detail {
|
||||||
|
width: 250px;
|
||||||
|
margin-right: 21px;
|
||||||
|
|
||||||
|
.file_updata {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.updatabox {
|
||||||
|
position: relative;
|
||||||
|
width: 230px;
|
||||||
|
height: 5px;
|
||||||
|
background-color: rgba(192, 192, 192, 0.25);
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
.updatacolor {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 5px;
|
||||||
|
background-color: #57c887;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.updatacolor2 {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 80%;
|
||||||
|
height: 5px;
|
||||||
|
background-color: #ff7474;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.updatacolor3 {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 60%;
|
||||||
|
height: 5px;
|
||||||
|
background-color: #388be1;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.updataxq {
|
||||||
|
position: absolute;
|
||||||
|
right: 2px;
|
||||||
|
top: -30px;
|
||||||
|
color: #57c887;
|
||||||
|
}
|
||||||
|
|
||||||
|
.updataxq1 {
|
||||||
|
position: absolute;
|
||||||
|
right: 2px;
|
||||||
|
top: -30px;
|
||||||
|
color: #388be1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.updataxq2 {
|
||||||
|
position: absolute;
|
||||||
|
right: 2px;
|
||||||
|
top: -30px;
|
||||||
|
color: #ff7474;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.file_operation {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.fobox {
|
||||||
|
margin-right: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>12312</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import {reactive} from "vue";
|
|
||||||
|
|
||||||
const options = reactive([]);
|
|
||||||
|
|
||||||
</script>
|
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user