Browse Source

添加附件的组件

master
zhangli 1 year ago
parent
commit
36259eddcd
  1. 6
      src/components/Annex/src/Annex.vue
  2. 16
      src/components/UploadFile/src/UploadFile.vue

6
src/components/Annex/src/Annex.vue

@ -3,10 +3,7 @@
<div class="annex">
<div class="title flex items-center">
<div class="title-txt">附件</div>
<el-button type="primary" @click="handleImport">
<Icon icon="ep:upload" />
添加附件
</el-button>
<UploadFile :isShowFile="false" :isShowTip="false" title="添加附件"/>
</div>
<div class="list">
<div class="item flex items-start" v-for="(item, index) in data.annexList" :key="index">
@ -28,6 +25,7 @@
</template>
<script lang="ts" setup>
import UploadFile from '@/components/UploadFile/src/UploadFile.vue'
const message = useMessage() //
const { t } = useI18n() //
defineComponent({

16
src/components/UploadFile/src/UploadFile.vue

@ -20,15 +20,19 @@
:on-preview="handlePreview"
class="upload-file-uploader"
>
<el-button type="primary"><Icon icon="ep:upload-filled" />选取文件</el-button>
<el-button type="primary"><Icon icon="ep:upload-filled" />{{ title }}</el-button>
<template v-if="isShowTip" #tip>
<div style="font-size: 8px">
<div style="font-size: 8px;margin-top: 10px;">
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
</div>
<div style="font-size: 8px">
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
</div>
</template>
<template v-if="!isShowFile" #file >
<div>
</div>
</template>
</el-upload>
</div>
</template>
@ -56,13 +60,15 @@ const props = defineProps({
limit: propTypes.number.def(5), //
autoUpload: propTypes.bool.def(true), //
drag: propTypes.bool.def(false), //
isShowTip: propTypes.bool.def(true) //
isShowTip: propTypes.bool.def(true), //
isShowFile: propTypes.bool.def(true), //
})
// ========== ==========
const valueRef = ref(props.modelValue)
const uploadRef = ref<UploadInstance>()
const uploadList = ref<UploadUserFile[]>([])
const fileList = ref<UploadUserFile[]>(props.modelValue)
const fileList = props.modelValue && props.modelValue.length > 0 ? ref<UploadUserFile[]>(props.modelValue) : ref<UploadUserFile[]>([])
const uploadNumber = ref<number>(0)
const uploadHeaders = ref({
Authorization: 'Bearer ' + getAccessToken(),
@ -148,7 +154,7 @@ const listToString = (list: UploadUserFile[], separator?: string) => {
:deep(.upload-file-list .el-upload-list__item) {
position: relative;
margin-bottom: 10px;
// margin-bottom: 10px;
line-height: 2;
border: 1px solid #e4e7ed;
}

Loading…
Cancel
Save