cip-components/cip-form-input/basic/file/mobile.vue

<template>
  <div class="basic-file">
    <el-upload action="uploadUrl"
              :http-request="uploadFile"
              :show-file-list="false"
              :file-list="fileList"
              :before-upload="beforeUpload"
              :multiple="multiple"
              :accept="accept"
               :disabled="disabled">
      <el-button type="primary" :disabled="disabled">上传</el-button>
      <el-button v-if="formwork.length>0" @click="downloadFormwork">下载模板</el-button>
      <template #tip>
        <div class="basic-file__tip">{{limitTip}}</div>
      </template>
    </el-upload>
    <template v-for="(file,index) in fileList" :key="index">
      <file-row :file="file"
                :config="securityConfig"
                :depend-on-values="dependOnValues"
                :remove-code="securityConfig.removeCode"
                :removable="securityConfig.removable ?? true"
                @after-remove="removeFile"></file-row>
    </template>
  </div>
</template>

<script>
import { ElUpload, ElButton } from 'element-plus'
import FileRow from './file-row'
import { formInputProps, fromInputEmits } from '../../form-input-props'
import { useFormInput } from '@cip/components/hooks/form-input'
import { uploadProps, download, fileTypeList } from './upload'
import { computed } from 'vue'
import CipMessage from '@cip/components/cip-message'
export default {
  props: formInputProps,
  emits: [...fromInputEmits],
  components: { FileRow, ElUpload, ElButton },
  setup (props, context) {
    const { securityConfig } = useFormInput(props, context)
    const { fileList, mainMessage, countLimit, typeLimit, sizeLimit, ...uploadUtils } = uploadProps(props, context)
    const multiple = computed(() => {
      return securityConfig.value.multiple ?? true
    })
    // 限制提示语
    const limitTip = computed(() => {
      const { fileType, size } = securityConfig.value
      if (!!fileType && !!size) return `只能上传${fileType}文件，且不超过${size}MB`
      if (!!fileType && !size) return `只能上传${fileType}文件`
      if (!fileType && !!size) return `只能上传不超过${size}MB的文件`
      return ''
    })
    // 验证文件是否可以上传
    const beforeUpload = (file) => {
      const errorMessage = securityConfig.value.customLimit && securityConfig.value.customLimit(file)
      if (errorMessage) {
        CipMessage.error(errorMessage)
        return false
      }
      if (mainMessage(typeLimit(file), '文件上传类型超出限制') ||
        mainMessage(countLimit(file), '文件上传数量超出限制') ||
        mainMessage(sizeLimit(file), '文件上传大小超出限制')
      ) {
        return false
      }
    }
    // 根据数量控制新增按钮
    const isAppend = computed(() => {
      return (securityConfig.value.limit ?? Infinity) > fileList.value.length
    })
    const formwork = computed(() => {
      return securityConfig.value.formwork ?? []
    })
    const accept = computed(() => {
      if (securityConfig.value.ignoreFileType) {
        return '*/*'
      }
      const fileType = securityConfig.value.fileType || fileTypeList.join(',')
      return '.' + fileType.replace(/,\s?/g, ',.')
    })
    const downloadFormwork = (e) => {
      e.stopPropagation()
      download(formwork.value[0])
    }
    return { ...uploadUtils, accept, fileList, beforeUpload, multiple, isAppend, limitTip, formwork, downloadFormwork, securityConfig }
  }
}
</script>

<style lang="less">
// 不加width 100%会导致宽度坍塌
.basic-file{
  width: 100%;
  &__tip{
    word-break: break-all;
    line-height: 20px;
  }
}

</style>