123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <template>
- <div class="basic-file">
- <cip-upload action="uploadUrl"
- style="margin-bottom: 10px"
- :uploadFile="uploadFile"
- :show-file-list="false"
- :file-list="fileList"
- :before-upload="beforeUpload"
- :multiple="multiple"
- :accept="accept"
- :disabled="uploadDisabled">
- <cip-button buttonType="upload" :disabled="uploadDisabled"></cip-button>
- <cip-button v-if="formwork.length>0" @click="downloadFormwork">下载模板</cip-button>
- <template #tip>
- <div class="basic-file__tip">{{limitTip}}</div>
- </template>
- </cip-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 CipUpload from '@cip/components/cip-upload'
- import CipButton from '@cip/components/cip-button'
- 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, CipUpload, CipButton },
- 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>
|