123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 |
- <template>
- <div :class="`file-row is-${file.status}`" >
- <div class="file-row__item-name">
- <el-icon><Paperclip /></el-icon>
- <span class="file-row__item-file-name">{{file.name}}</span>
- </div>
- <!-- 进度条仅在当前页面上传的文件中显示-->
- <template v-if="file.status === 'ready'">
- <el-progress style="width: 100%" :percentage="file.percentage" :stroke-width="2"></el-progress>
- <div>
- ({{parseFileSize(file.loaded)}}/{{parseFileSize(file.total)}})
- <cip-button-text v-if="file.status === 'ready'" type="danger" @click="cancelUpload(file)">取消</cip-button-text>
- </div>
- </template>
- <template v-else>
- <div class="handle-button-wrapper">
- <!-- <cip-table-button size="large" :type="isPreview?'visited':undefined" :loading="previewLoading" v-if="previewAble" @click="previewFile">
- 预览
- </cip-button-text>
- <cip-button-text size="large" :type="isDownload?'visited':undefined" :loading="downloadLoading" v-if="downloadAble" @click="downloadFile">
- 下载
- </cip-table-button> -->
- <template v-if="file.status!=='error'">
- <i v-if="previewAble" class="el-icon-view" @click="previewFile"></i>
- <i v-if="downloadAble" class="el-icon-download" @click="downloadFile"></i>
- </template>
- <el-icon v-if="file.status==='success'" class="upload--success"><SuccessFilled /></el-icon>
- <i v-if="removable" class="el-icon-close upload--close" @click="remove"></i>
- </div>
- </template>
- </div>
- </template>
- <script>
- import { computed, ref } from 'vue'
- import { ElMessageBox, ElProgress, ElIcon } from 'element-plus'
- import { Dialog as VanDialog } from 'vant'
- import { download } from './upload'
- import { getEquipmentType, isEmpty } from '@cip/utils/util'
- import { SuccessFilled, Paperclip } from '@element-plus/icons-vue'
- import CipButtonText from '@cip/components/cip-button-text'
- export default {
- components: { ElProgress, CipButtonText, ElIcon, Paperclip, SuccessFilled },
- props: {
- file: {
- type: Object,
- default: () => { return {} }
- },
- config: Object,
- dependOnValues: Object,
- removable: Boolean
- },
- setup (props, { emit }) {
- const isMobile = getEquipmentType() === 'mobile'
- const previewLoading = ref(false)
- const downloadLoading = ref(false)
- const fileValue = computed(() => {
- return props.file
- })
- // 根据文件大小 显示 B kb mb
- const parseFileSize = (size) => {
- let unit = 'k'
- if (size > 1024) {
- size = size / 1024
- unit = 'kb'
- }
- if (size > 1024) {
- size = size / 1024
- unit = 'mb'
- }
- return `${Math.floor(size)}${unit}`
- }
- const cancelUpload = (file) => {
- file.abort()
- }
- const previewAble = computed(() => {
- if (typeof props.config.previewAble === 'boolean') return props.config.previewAble
- return props.config.previewAble?.(props.dependOnValues)
- })
- const isPreview = computed(() => {
- return !!props.file.read
- })
- const isDownload = computed(() => {
- return !!props.file.download
- })
- const previewFile = async () => {
- previewLoading.value = true
- try {
- await props.config.previewFile?.(fileValue.value)
- } finally {
- previewLoading.value = false
- }
- }
- const downloadAble = computed(() => {
- if (isEmpty(props.config.downloadAble)) return true
- if (typeof props.config.downloadAble === 'boolean') return props.config.downloadAble
- return props.config.downloadAble(props.dependOnValues)
- })
- const downloadFile = async () => {
- try {
- downloadLoading.value = true
- if (isEmpty(props.config.downloadFile)) {
- await download(fileValue.value)
- } else {
- await props.config.downloadFile(fileValue.value)
- }
- } finally {
- downloadLoading.value = false
- }
- }
- const remove = async () => {
- try {
- isMobile
- ? await VanDialog.confirm({
- title: '警告',
- message: `确认删除《${fileValue.value.name}》`
- })
- : await ElMessageBox.confirm(`确认删除《${fileValue.value.name}》`, '警告', { type: 'warning' })
- if (props.config.deleteFile) {
- await props.config.deleteFile?.(fileValue.value)
- }
- emit('after-remove', fileValue.value)
- } catch (e) {
- }
- }
- return {
- parseFileSize,
- cancelUpload,
- previewAble,
- previewLoading,
- previewFile,
- downloadAble,
- downloadLoading,
- downloadFile,
- remove,
- isPreview,
- isDownload
- }
- }
- }
- </script>
- <style lang="less">
- .file-row{
- transition: all .5s cubic-bezier(.55,0,.1,1);
- font-size: 14px;
- color: var(--el-text-color-regular);
- margin-bottom: 4px;
- position: relative;
- box-sizing: border-box;
- border-radius: 4px;
- width: 100%;
- padding: 4px;
- line-height: 16px;
- cursor: pointer;
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- &:hover{
- background: var(--el-fill-color-light);
- .upload--close{
- display: block;
- }
- .upload--success{
- display: none;
- }
- }
- &.is-ready{
- .upload--close{
- display: none;
- }
- .upload--success{
- display: none;
- }
- }
- &.is-error{
- .upload--close{
- display: block;
- margin-left: 5px;
- }
- .upload--success{
- display: none;
- }
- .file-row__item-name{
- color:var(--el-color-danger);
- }
- }
- .upload--close{
- display: none;
- }
- .upload--success{
- color: var(--el-color-success);
- }
- &__item-name{
- color: var(--el-text-color-regular);
- display: inline-flex;
- text-align: center;
- align-items: center;
- padding-right: 4px;
- transition: color var(--el-transition-duration);
- font-size: var(--el-font-size-base);
- overflow: hidden;
- i{
- margin-right: 6px;
- color: var(--el-text-color-secondary);
- }
- }
- &__item-file-name{
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- &__process{
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- }
- .handle-button-wrapper{
- display: flex;
- i + i {
- margin-left: 4px;
- }
- }
- &__button{
- cursor: pointer;
- flex-shrink: 0;
- &+.file-row__button{
- margin-left:4px;
- }
- }
- .el-progress__text{
- display: none;
- }
- }
- </style>
|