@idooel/components 0.0.1-beta.99 → 0.0.2

package/packages/upload/src/index.vue

@@ -1,445 +1,445 @@
-<template>
-  <div class="ele-upload__wrapper">
-    <FileUpload
-      class="ele-upload__inner"
-      v-show="isShowUploadContainer"
-      v-model="files"
-      :ref="uploadRef"
-      :drop="drop"
-      :chunk-enabled="chunkEnabled"
-      :chunk="chunkConfig"
-      :accept="accept"
-      :extensions="extensions"
-      :size="fileSizeLimit"
-      :post-action="postAction"
-      :multiple="multiple"
-      :headers="headers"
-      :maximum="getMaximum"
-      @input-file="onWatchInputFiles"
-      @input="onWatchFiles"
-      style="width: 100%;">
-      <section class="ele-upload__area">
-        <div class="ele-upload__area--icon">
-          <template v-if="iconIsZhWrod">
-            {{ icon }}
-          </template>
-          <template v-else>
-            <ele-icon :type="icon"></ele-icon>
-          </template>
-        </div>
-        <div class="ele-upload__area--text">
-          <div class="ele-upload__message" v-if="message" v-html="message"></div>
-          <div class="ele-upload__message" v-else>单击或拖动文件到该区域以上传</div>
-          <div class="ele-upload__ext" v-if="ext" v-html="ext"></div>
-          <div class="ele-upload__ext" v-else>文件小于{{ size }}M</div>
-        </div>
-      </section>
-    </FileUpload>
-    <section class="ele-files__wrapper">
-      <div class="ele-file__item" v-for="(file, idx) in buildedFiles" :key="idx">
-        <div class="ele-file__suffix--icon">
-          <ele-icon :type="fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'"></ele-icon>
-        </div>
-        <div class="ele-file__name">
-          <div class="ele-file__inner" @click="handleClickDownload(file)">{{ file.name }}</div>
-          <div v-if="(!file.success && file.progress)" class="ele-uplpad__progress">
-            <a-progress :strokeWidth="2" :percent="Number(file.progress)" size="small" />
-          </div>
-        </div>
-        <div class="ele-file__delete" v-if="file.success || file.error || !file.response">
-          <span class="ele-file__size">{{ (file.size / byteConversion).toFixed(2) }}M</span>
-          <span class="ele-file__delete--icon" @click="handleClickDelete(file)">
-            <ele-icon type="delete"></ele-icon>
-          </span>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import FileUpload from 'vue-upload-component'
-import { v4 as uuidv4 } from 'uuid'
-import { route, net, type } from '@idooel/shared'
-export default {
-  name: 'ele-upload',
-  components: {
-    FileUpload
-  },
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    url: {
-      type: String,
-      //TODO
-      default: `zuul/api-file/workbench/file`
-    },
-    icon: {
-      type: String,
-      default: '上传'
-    },
-    size: {
-      type: Number,
-      default: 100
-    },
-    message: {
-      type: String,
-      default: '单击或拖动文件到该区域以上传'
-    },
-    ext: {
-      type: String
-    },
-    extensions: {
-      type: String
-    },
-    accept: {
-      type: String
-    },
-    maximum: {
-      type: Number,
-      default: 10
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    drop: {
-      type: Boolean,
-      default: true
-    },
-    value: {
-      type: [String, Array]
-    },
-    querys: {
-      type: Object,
-      default: () => ({
-        _csrf: localStorage.getItem('token'),
-        _t: new Date().valueOf()
-      })
-    },
-    headers: {
-      type: Object,
-      default: () => ({
-        'X-XSRF-TOKEN': localStorage.getItem('token')
-      })
-    },
-    byteConversion: {
-      type: Number,
-      default: 1024 * 1024
-    },
-    chunkEnabled: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      files: [],
-      buildedFiles: [],
-      saveToServerAsyncPageTimer: null
-    }
-  },
-  watch: {
-    value: {
-      async handler (value) {
-        if (type.isArray(value)) {
-          // multiple
-        } else if (type.isEmpty(value)) {
-          this.files = []
-          this.buildedFiles = []
-        } else {
-          // single
-          this.fetchFileWithFileId()
-        }
-      },
-      immediate: true
-    }
-  },
-  computed: {
-    prefixPath () {
-      return window.prefixPath
-    },
-    iconIsZhWrod () {
-      return type.isZhWord(this.icon)
-    },
-    getPayloads () {
-      return {
-        override: false
-      }
-    },
-    chunkConfig () {
-      return {
-        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,
-        headers: {
-          ...this.headers
-        },
-        minSize: 3 * this.byteConversion,
-        maxActive: 3,
-        maxRetries: 5,
-        startBody: {
-          override: true,
-          path: '/cw'
-        },
-        uploadBody: {
-          override: true,
-          path: '/cw'
-        },
-        finishBody: {
-          override: true,
-          path: '/cw'
-        }
-      }
-    },
-    isFileUploadSuccessed () {
-      return this.files.every(file => file.success)
-    },
-    isShowUploadContainer () {
-      if (this.multiple) {
-        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {
-          return false
-        } else {
-          return true
-        }
-      } else {
-        const [file = {}] = this.buildedFiles
-        if (this.buildedFiles.length < 1) {
-          return true
-        }
-        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {
-          return false
-        } else {
-          return true
-        }
-      }
-    },
-    getMaximum () {
-      return this.multiple ? this.maximum : 1
-    },
-    fileSizeLimit () {
-      return this.size * this.byteConversion
-    },
-    postAction () {
-      const ret = route.toQueryString(this.querys)
-      return `${this.prefixPath}${this.url}?${ret}`
-    },
-    uploadRef () {
-      return uuidv4()
-    },
-    fileSuffixIcon () {
-      return {
-        'doc': { name: 'icon-doc' },
-        'html': { name: 'icon-html' },
-        'mp4': { name: 'icon-mp' },
-        'pdf': { name: 'icon-pdf' },
-        'ppt': { name: 'icon-ppt' },
-        'psd': { name: 'icon-psd' },
-        'rtf': { name: 'icon-rtf' },
-        'txt': { name: 'icon-txt' },
-        'vis': { name: 'icon-vis' },
-        'xls': { name: 'icon-xls' },
-        'xml': { name: 'icon-xml' },
-        'zip': { name: 'icon-zip' },
-        'jpg': { name: 'icon-img' },
-        'mp3': { name: 'icon-mp1' },
-      }
-    },
-    fileIds () {
-      const fileIds = this.buildedFiles.map(file => {
-        return file.fileID
-      })
-      return this.multiple ? fileIds : fileIds[0]
-    },
-    fileResponseData () {
-      return this.multiple ? this.buildedFiles : this.buildedFiles[0]
-    }
-  },
-  methods: {
-    async fetchFileWithFileId () {
-      if (!this.value) return
-      await net.get(
-        `/api-file/file/${this.value}`
-      ).then(resp => {
-        const { data } = resp
-        this.buildedFiles = [data]
-        this.files = [data]
-      })
-    },
-    handleClickDownload (file) {
-      const { fileID: fileId } = file
-      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)
-    },
-    handleClickDelete (file) {
-      this.$refs[this.uploadRef].remove(file)
-      const { fileID } = file
-      this.files = this.files.filter(file => file.fileID !== fileID)
-      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)
-      this.$emit('change', this.fileIds)
-    },
-    onWatchFiles (files) {
-      this.files = files
-      this.buildedFiles = this.files.map(file => {
-        return {
-          ...file.response.data,
-          ...file
-        }
-      })
-      if (this.isFileUploadSuccessed) {
-        this.$emit('change', this.fileIds)
-        this.$emit('on-success', this.fileResponseData)
-      }
-    },
-    async saveToServerAsyncPage (payloads = {}) {
-      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { 
-        headers: {
-          'Content-Type': 'multipart/form-data'
-        }
-      }).then(resp =>{
-        const { data } = resp
-        if (data !== 'saveToServerAsyncPage') {
-          clearInterval(this.saveToServerAsyncPageTimer)
-        }
-      })
-      // const ret = await net.post({
-      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',
-      //   method: 'POST',
-      //   data: { ...payloads }
-      // }).then(resp => {
-      //   const { data: { data, code, message } } = resp
-      //   if (code !== '2000') {
-      //     this.$Message.error(message)
-      //     return
-      //   }
-      //   if (data !== 'saveToServerAsyncPage') {
-      //     clearInterval(timer)
-      //     const { fileID, size } = data
-      //     this.$emit('on-success', { ...data, fileId: fileID })
-      //     this.$Message.success('同步成功')
-      //     return { fileId: fileID, size }
-      //   }
-      // })
-      // return ret
-    },
-    onWatchInputFiles (newFile, oldFile) {
-      if (newFile && !oldFile) {
-        // add file
-        console.log('add', newFile)
-      }
-      if (newFile && oldFile) {
-        // update file
-        console.log('update', newFile)
-        const { success, active, chunk, response } = newFile
-        if (chunk && success && !active) {
-          console.log('chunk end')
-          const { data: { file, type } } = response
-          const payloads = {
-            filePath: file.match(/\/cw(.*)/)[0],
-            asyncID: uuidv4(),
-            isDeleteOrigin: false,
-            toImage: type === 'pdf' ? true : false,
-            unzip: type === 'zip' ? true : false,
-            _csrf: localStorage.getItem('token')
-          }
-          this.saveToServerAsyncPageTimer = setInterval(() => {
-            this.saveToServerAsyncPage(payloads)
-          }, 2000)
-        }
-      }
-      if (!newFile && oldFile) {
-        // delete file
-        console.log('delete')
-      }
-      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
-        if (!this.$refs[this.uploadRef].active) {
-          this.$refs[this.uploadRef].active = true
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep .ele-upload__inner {
-  opacity: 1 !important;
-  cursor: pointer;
-  border: 1px dashed var(--idooel-form-title-border-color);
-  background: var(--idooel-form-upload-bg-color) !important;
-  &:hover {
-    border-color: var(--idooel-form-upload-border-hover-color);
-  }
-  border-radius: var(--idooel-form-border-radius);
-}
-.ele-upload__wrapper {
-  width: 100%;
-  .ele-upload__area {
-    padding: 16px;
-    width: 100%;
-    height: 80px;
-    display: flex;
-    flex-direction: row;
-    .ele-upload__area--icon {
-      color: var(--idooel-primary-color);
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      font-size: 16x;
-      .anticon-cloud-upload {
-        font-size: 48px;
-        color: var(--idooel-primary-color);
-      }
-      .anticon {
-        font-size: 48px;
-        color: var(--idooel-primary-color);
-      }
-    }
-    .ele-upload__area--text {
-      margin-left: 16px;
-      .ele-upload__message {
-        font-size: 16px;
-        color: var(--idoole-black-088);
-        text-align: left;
-      }
-      .ele-upload__ext {
-        text-align: left;
-        font-size: 14px;
-        color: var(--idoole-black-06);
-      }
-    }
-  }
-  .ele-files__wrapper {
-    .ele-file__item {
-      width: 100%;
-      margin-top: 8px;
-      padding: 8px 12px;
-      border-radius: var(--idooel-form-border-radius);
-      background: var(--idooel-form-upload-bg-color);
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      .ele-file__suffix--icon {}
-      .ele-file__name {
-        flex: 1;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-        font-size: 14px;
-        margin-left: 8px;
-        cursor: pointer;
-        .ele-file__inner {
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-      .ele-file__delete {
-        margin-left: 8px;
-        .ele-file__delete--icon {
-          margin-left: 8px;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
+<template>
+  <div class="ele-upload__wrapper">
+    <FileUpload
+      class="ele-upload__inner"
+      v-show="isShowUploadContainer"
+      v-model="files"
+      :ref="uploadRef"
+      :drop="drop"
+      :chunk-enabled="chunkEnabled"
+      :chunk="chunkConfig"
+      :accept="accept"
+      :extensions="extensions"
+      :size="fileSizeLimit"
+      :post-action="postAction"
+      :multiple="multiple"
+      :headers="headers"
+      :maximum="getMaximum"
+      @input-file="onWatchInputFiles"
+      @input="onWatchFiles"
+      style="width: 100%;">
+      <section class="ele-upload__area">
+        <div class="ele-upload__area--icon">
+          <template v-if="iconIsZhWrod">
+            {{ icon }}
+          </template>
+          <template v-else>
+            <ele-icon :type="icon"></ele-icon>
+          </template>
+        </div>
+        <div class="ele-upload__area--text">
+          <div class="ele-upload__message" v-if="message" v-html="message"></div>
+          <div class="ele-upload__message" v-else>单击或拖动文件到该区域以上传</div>
+          <div class="ele-upload__ext" v-if="ext" v-html="ext"></div>
+          <div class="ele-upload__ext" v-else>文件小于{{ size }}M</div>
+        </div>
+      </section>
+    </FileUpload>
+    <section class="ele-files__wrapper">
+      <div class="ele-file__item" v-for="(file, idx) in buildedFiles" :key="idx">
+        <div class="ele-file__suffix--icon">
+          <ele-icon :type="fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'"></ele-icon>
+        </div>
+        <div class="ele-file__name">
+          <div class="ele-file__inner" @click="handleClickDownload(file)">{{ file.name }}</div>
+          <div v-if="(!file.success && file.progress)" class="ele-uplpad__progress">
+            <a-progress :strokeWidth="2" :percent="Number(file.progress)" size="small" />
+          </div>
+        </div>
+        <div class="ele-file__delete" v-if="file.success || file.error || !file.response">
+          <span class="ele-file__size">{{ (file.size / byteConversion).toFixed(2) }}M</span>
+          <span class="ele-file__delete--icon" @click="handleClickDelete(file)">
+            <ele-icon type="delete"></ele-icon>
+          </span>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import FileUpload from 'vue-upload-component'
+import { v4 as uuidv4 } from 'uuid'
+import { route, net, type } from '@idooel/shared'
+export default {
+  name: 'ele-upload',
+  components: {
+    FileUpload
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    url: {
+      type: String,
+      //TODO
+      default: `zuul/api-file/workbench/file`
+    },
+    icon: {
+      type: String,
+      default: '上传'
+    },
+    size: {
+      type: Number,
+      default: 100
+    },
+    message: {
+      type: String,
+      default: '单击或拖动文件到该区域以上传'
+    },
+    ext: {
+      type: String
+    },
+    extensions: {
+      type: String
+    },
+    accept: {
+      type: String
+    },
+    maximum: {
+      type: Number,
+      default: 10
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    drop: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: [String, Array]
+    },
+    querys: {
+      type: Object,
+      default: () => ({
+        _csrf: localStorage.getItem('token'),
+        _t: new Date().valueOf()
+      })
+    },
+    headers: {
+      type: Object,
+      default: () => ({
+        'X-XSRF-TOKEN': localStorage.getItem('token')
+      })
+    },
+    byteConversion: {
+      type: Number,
+      default: 1024 * 1024
+    },
+    chunkEnabled: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      files: [],
+      buildedFiles: [],
+      saveToServerAsyncPageTimer: null
+    }
+  },
+  watch: {
+    value: {
+      async handler (value) {
+        if (type.isArray(value)) {
+          // multiple
+        } else if (type.isEmpty(value)) {
+          this.files = []
+          this.buildedFiles = []
+        } else {
+          // single
+          this.fetchFileWithFileId()
+        }
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    prefixPath () {
+      return window.prefixPath
+    },
+    iconIsZhWrod () {
+      return type.isZhWord(this.icon)
+    },
+    getPayloads () {
+      return {
+        override: false
+      }
+    },
+    chunkConfig () {
+      return {
+        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,
+        headers: {
+          ...this.headers
+        },
+        minSize: 3 * this.byteConversion,
+        maxActive: 3,
+        maxRetries: 5,
+        startBody: {
+          override: true,
+          path: '/cw'
+        },
+        uploadBody: {
+          override: true,
+          path: '/cw'
+        },
+        finishBody: {
+          override: true,
+          path: '/cw'
+        }
+      }
+    },
+    isFileUploadSuccessed () {
+      return this.files.every(file => file.success)
+    },
+    isShowUploadContainer () {
+      if (this.multiple) {
+        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {
+          return false
+        } else {
+          return true
+        }
+      } else {
+        const [file = {}] = this.buildedFiles
+        if (this.buildedFiles.length < 1) {
+          return true
+        }
+        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {
+          return false
+        } else {
+          return true
+        }
+      }
+    },
+    getMaximum () {
+      return this.multiple ? this.maximum : 1
+    },
+    fileSizeLimit () {
+      return this.size * this.byteConversion
+    },
+    postAction () {
+      const ret = route.toQueryString(this.querys)
+      return `${this.prefixPath}${this.url}?${ret}`
+    },
+    uploadRef () {
+      return uuidv4()
+    },
+    fileSuffixIcon () {
+      return {
+        'doc': { name: 'icon-doc' },
+        'html': { name: 'icon-html' },
+        'mp4': { name: 'icon-mp' },
+        'pdf': { name: 'icon-pdf' },
+        'ppt': { name: 'icon-ppt' },
+        'psd': { name: 'icon-psd' },
+        'rtf': { name: 'icon-rtf' },
+        'txt': { name: 'icon-txt' },
+        'vis': { name: 'icon-vis' },
+        'xls': { name: 'icon-xls' },
+        'xml': { name: 'icon-xml' },
+        'zip': { name: 'icon-zip' },
+        'jpg': { name: 'icon-img' },
+        'mp3': { name: 'icon-mp1' },
+      }
+    },
+    fileIds () {
+      const fileIds = this.buildedFiles.map(file => {
+        return file.fileID
+      })
+      return this.multiple ? fileIds : fileIds[0]
+    },
+    fileResponseData () {
+      return this.multiple ? this.buildedFiles : this.buildedFiles[0]
+    }
+  },
+  methods: {
+    async fetchFileWithFileId () {
+      if (!this.value) return
+      await net.get(
+        `/api-file/file/${this.value}`
+      ).then(resp => {
+        const { data } = resp
+        this.buildedFiles = [data]
+        this.files = [data]
+      })
+    },
+    handleClickDownload (file) {
+      const { fileID: fileId } = file
+      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)
+    },
+    handleClickDelete (file) {
+      this.$refs[this.uploadRef].remove(file)
+      const { fileID } = file
+      this.files = this.files.filter(file => file.fileID !== fileID)
+      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)
+      this.$emit('change', this.fileIds)
+    },
+    onWatchFiles (files) {
+      this.files = files
+      this.buildedFiles = this.files.map(file => {
+        return {
+          ...file.response.data,
+          ...file
+        }
+      })
+      if (this.isFileUploadSuccessed) {
+        this.$emit('change', this.fileIds)
+        this.$emit('on-success', this.fileResponseData)
+      }
+    },
+    async saveToServerAsyncPage (payloads = {}) {
+      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { 
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+        }
+      }).then(resp =>{
+        const { data } = resp
+        if (data !== 'saveToServerAsyncPage') {
+          clearInterval(this.saveToServerAsyncPageTimer)
+        }
+      })
+      // const ret = await net.post({
+      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',
+      //   method: 'POST',
+      //   data: { ...payloads }
+      // }).then(resp => {
+      //   const { data: { data, code, message } } = resp
+      //   if (code !== '2000') {
+      //     this.$Message.error(message)
+      //     return
+      //   }
+      //   if (data !== 'saveToServerAsyncPage') {
+      //     clearInterval(timer)
+      //     const { fileID, size } = data
+      //     this.$emit('on-success', { ...data, fileId: fileID })
+      //     this.$Message.success('同步成功')
+      //     return { fileId: fileID, size }
+      //   }
+      // })
+      // return ret
+    },
+    onWatchInputFiles (newFile, oldFile) {
+      if (newFile && !oldFile) {
+        // add file
+        console.log('add', newFile)
+      }
+      if (newFile && oldFile) {
+        // update file
+        console.log('update', newFile)
+        const { success, active, chunk, response } = newFile
+        if (chunk && success && !active) {
+          console.log('chunk end')
+          const { data: { file, type } } = response
+          const payloads = {
+            filePath: file.match(/\/cw(.*)/) ? file.match(/\/cw(.*)/)[0] : void 0,
+            asyncID: uuidv4(),
+            isDeleteOrigin: false,
+            toImage: type === 'pdf' ? true : false,
+            unzip: type === 'zip' ? true : false,
+            _csrf: localStorage.getItem('token')
+          }
+          this.saveToServerAsyncPageTimer = setInterval(() => {
+            this.saveToServerAsyncPage(payloads)
+          }, 2000)
+        }
+      }
+      if (!newFile && oldFile) {
+        // delete file
+        console.log('delete')
+      }
+      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
+        if (!this.$refs[this.uploadRef].active) {
+          this.$refs[this.uploadRef].active = true
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .ele-upload__inner {
+  opacity: 1 !important;
+  cursor: pointer;
+  border: 1px dashed var(--idooel-form-title-border-color);
+  background: var(--idooel-form-upload-bg-color) !important;
+  &:hover {
+    border-color: var(--idooel-form-upload-border-hover-color);
+  }
+  border-radius: var(--idooel-form-border-radius);
+}
+.ele-upload__wrapper {
+  width: 100%;
+  .ele-upload__area {
+    padding: 16px;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    flex-direction: row;
+    .ele-upload__area--icon {
+      color: var(--idooel-primary-color);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 16x;
+      .anticon-cloud-upload {
+        font-size: 48px;
+        color: var(--idooel-primary-color);
+      }
+      .anticon {
+        font-size: 48px;
+        color: var(--idooel-primary-color);
+      }
+    }
+    .ele-upload__area--text {
+      margin-left: 16px;
+      .ele-upload__message {
+        font-size: 16px;
+        color: var(--idoole-black-088);
+        text-align: left;
+      }
+      .ele-upload__ext {
+        text-align: left;
+        font-size: 14px;
+        color: var(--idoole-black-06);
+      }
+    }
+  }
+  .ele-files__wrapper {
+    .ele-file__item {
+      width: 100%;
+      margin-top: 8px;
+      padding: 8px 12px;
+      border-radius: var(--idooel-form-border-radius);
+      background: var(--idooel-form-upload-bg-color);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .ele-file__suffix--icon {}
+      .ele-file__name {
+        flex: 1;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 14px;
+        margin-left: 8px;
+        cursor: pointer;
+        .ele-file__inner {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+      .ele-file__delete {
+        margin-left: 8px;
+        .ele-file__delete--icon {
+          margin-left: 8px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
 </style>