123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- <template>
- <div class="file-row" >
- <span class="file-row__file-name">{{file.name}}</span>
- <!-- 进度条仅在当前页面上传的文件中显示-->
- <template v-if="file.status !== 'success' && file.percentage <= 100">
- <el-progress style="flex-grow: 2" :percentage="file.percentage" :status="file.status"></el-progress>
- <div>
- ({{parseFileSize(file.loaded)}}/{{parseFileSize(file.total)}})
- <cip-table-button v-if="!file.status" type="danger" @click="cancelUpload(file)">取消</cip-table-button>
- </div>
- </template>
- <template v-else>
- <div class="handle-button-wrapper">
- <cip-table-button size="medium" :type="isPreview?'visited':undefined" :loading="previewLoading" v-if="previewAble" @click="previewFile">
- 预览
- </cip-table-button>
- <cip-table-button size="medium" :type="isDownload?'visited':undefined" :loading="downloadLoading" v-if="downloadAble" @click="downloadFile">
- 下载
- </cip-table-button>
- <template v-if="removable">
- <cip-table-button size="medium" @click="remove" :loading="removeLoading">
- 删除
- </cip-table-button>
- </template>
- </div>
- </template>
- </div>
- </template>
- <script>
- import { computed, ref } from 'vue'
- import { ElMessageBox, ElProgress } from 'element-plus'
- import { Dialog as VanDialog } from 'vant'
- import CipTableButton from '@cip/components/cip-table-button'
- import { download } from './upload'
- import { getEquipmentType, isEmpty } from '@cip/utils/util'
- export default {
- components: { CipTableButton, ElProgress },
- 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 removeLoading = 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 () => {
- removeLoading.value = true
- 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) {
- } finally {
- removeLoading.value = false
- }
- }
- return {
- parseFileSize,
- cancelUpload,
- previewAble,
- previewLoading,
- previewFile,
- downloadAble,
- downloadLoading,
- downloadFile,
- remove,
- removeLoading,
- isPreview,
- isDownload
- }
- }
- }
- </script>
- <style lang="less">
- .file-row{
- width: 100%;
- font-size: 14px;
- //line-height: 1.1em;
- line-height: @formItemLineHeight;
- padding: 4px 6px;
- /*display: flex;*/
- /*justify-content: space-between;*/
- /*align-items: center;*/
- flex-wrap: nowrap;
- position: relative;
- overflow: hidden;
- &:hover{
- background: #e6f7ff;
- .handle-button-wrapper{
- visibility: visible;
- top:0;
- left: 0;
- bottom: 0;
- }
- }
- &__file-name{
- display: inline-block;
- margin-left: 8px;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- &__process{
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .handle-button-wrapper{
- display: flex;
- align-items: center;
- position: absolute;
- left: -100%;
- background: rgba(255,255,255,0.8);
- visibility: hidden;
- opacity: 0.9;
- transition: all 0.3s;
- padding: 0 8px;
- .el-button{
- padding: 0 4px;
- + .el-button{
- margin-left: 4px;
- }
- }
- }
- &__button{
- cursor: pointer;
- flex-shrink: 0;
- &+.file-row__button{
- margin-left:4px;
- }
- }
- }
- </style>
|