swordpass-ui 1.1.1 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swordpass-ui",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "author": "sword",
   "private": false,
   "scripts": {

package/packages/File/src/main.vue

@@ -15,7 +15,6 @@
       :name="inputName"
     />
     <file-upload
-      v-if="inputWriteable"
       ref="fileUpload"
       v-model="inputVal"
       :list-type="pictureWall ? 'picture-card' : null"
@@ -342,42 +341,116 @@ export default {
         prop5: '',
         prop6: '',
       }
+      console.log('item', item)
       if (file.response) {
         item.response = { ...file.response }
         item.username = file.response.username || ''
       }
+
       return item
     },
     // 对附件对象的操作，包括：添加、更新、删除、清空、调整顺序
+    // valueOpration(item, opType = 'update', direct) {
+    //   if (opType == 'clear') {
+    //     this.$emit('input', '')
+    //     this.refreshFileUploadDebounce()
+    //     return
+    //   }
+    //   let ary = utils.isEmpty(this.value) ? [] : JSON.parse(this.value)
+    //   const index = ary.findIndex((m) => m.uid == item.uid)
+    //   switch (opType) {
+    //     case 'update': {
+    //       if (index > -1) {
+    //         ary[index] = item
+    //       } else {
+    //         ary.push(item)
+    //       }
+    //       break
+    //     }
+    //     case 'remove':
+    //       ary.splice(index, 1)
+    //       break
+    //     case 'move': {
+    //       const realItem = ary.find((m) => m.uid == item.uid)
+    //       ary = utils.arrayMove(ary, realItem, direct)
+    //       break
+    //     }
+    //   }
+    //   this.$emit('input', ary.length > 0 ? JSON.stringify(ary) : '')
+    //   this.refreshFileUploadDebounce()
+    // },
     valueOpration(item, opType = 'update', direct) {
-      if (opType == 'clear') {
+      // 清空操作
+      if (opType === 'clear') {
         this.$emit('input', '')
         this.refreshFileUploadDebounce()
         return
       }
-      let ary = utils.isEmpty(this.value) ? [] : JSON.parse(this.value)
-      const index = ary.findIndex((m) => m.uid == item.uid)
+
+      // 参数验证
+      if (!item || !item.uid) {
+        console.warn('item 或 item.uid 不能为空')
+        return
+      }
+
+      // 获取当前附件数组
+      let ary = this.value ? JSON.parse(this.value) : []
+
+      // 根据操作类型执行相应逻辑
       switch (opType) {
-        case 'update': {
-          if (index > -1) {
-            ary[index] = item
-          } else {
-            ary.push(item)
-          }
+        case 'update':
+          this.handleUpdate(ary, item)
           break
-        }
         case 'remove':
-          ary.splice(index, 1)
+          this.handleRemove(ary, item)
           break
-        case 'move': {
-          const realItem = ary.find((m) => m.uid == item.uid)
-          ary = utils.arrayMove(ary, realItem, direct)
+        case 'move':
+          this.handleMove(ary, item, direct)
           break
-        }
+        default:
+          console.warn(`不支持的操作类型: ${opType}`)
+          return
       }
+
+      // 更新组件值并刷新上传组件
       this.$emit('input', ary.length > 0 ? JSON.stringify(ary) : '')
       this.refreshFileUploadDebounce()
     },
+
+    /**
+     * 处理附件更新操作
+     */
+    handleUpdate(ary, item) {
+      const index = ary.findIndex((m) => m.uid === item.uid)
+      if (index > -1) {
+        // 存在则更新
+        ary[index] = { ...ary[index], ...item }
+      } else {
+        // 不存在则添加
+        ary.push(item)
+      }
+    },
+
+    /**
+     * 处理附件删除操作
+     */
+    handleRemove(ary, item) {
+      const index = ary.findIndex((m) => m.uid === item.uid)
+      if (index > -1) {
+        ary.splice(index, 1)
+      }
+    },
+
+    /**
+     * 处理附件移动操作
+     */
+    handleMove(ary, item, direct) {
+      const index = ary.findIndex((m) => m.uid === item.uid)
+      if (index > -1) {
+        const realItem = ary[index]
+        ary = utils.arrayMove(ary, realItem, direct)
+      }
+    },
     // 同步附件数据到上传组件
     refreshFileUpload() {
       this.$nextTick(() => {

package/packages/FileUpload/src/main.vue

@@ -30,8 +30,18 @@
         </el-button>
       </el-tooltip>
     </el-upload>
-
-    <el-button
+    <el-popconfirm title="确定要清空吗？" @confirm="handleClear">
+      <el-button
+        v-if="!readonly && files.length > 0"
+        slot="reference"
+        size="mini"
+        round
+        icon="el-icon-delete"
+      >
+        清空
+      </el-button>
+    </el-popconfirm>
+    <!-- <el-button
       v-if="!readonly && files.length > 0"
       v-popconfirm="{ content: '确定要清空吗？', confirm: handleClear }"
       size="mini"
@@ -39,184 +49,184 @@
       icon="el-icon-delete"
     >
       清空
-    </el-button>
+    </el-button> -->
 
     <slot name="append"></slot>
   </div>
 </template>
 <script>
-  export default {
-    name: 'ClFileUpload',
-    props: {
-      withCredentials: {
-        type: Boolean,
-        default: false,
-      },
-      value: {
-        type: Array,
-        required: true,
-      },
-      actionUrl: {
-        type: String,
-        required: true,
-      },
-      listType: {
-        type: String,
-      },
-      multiple: {
-        type: Boolean,
-      },
-      accept: {
-        type: String,
-      },
-      limit: {
-        type: Number,
-        default: 5,
-      },
-      header: {
-        type: Object,
-      },
-      size: {
-        type: Number,
-        default: 50,
-      },
-      readonly: {
-        type: Boolean,
-        default: false,
-      },
-      beforeUpload: {
-        type: Function,
-      },
-      onSuccess: {
-        type: Function,
-      },
-      onError: {
-        type: Function,
-      },
-    },
-    data() {
-      return {
-        files: [],
-      }
+export default {
+  name: 'ClFileUpload',
+  props: {
+    withCredentials: {
+      type: Boolean,
+      default: false,
     },
-    computed: {
-      acceptLabel: function() {
-        return this.accept ? this.accept : '所有格式'
-      },
-    },
-    created() {
-      this.files = this.value || []
-    },
-    methods: {
-      reload(files) {
-        this.files = files
-      },
-      // 附件是否超过最大尺寸
-      exceedFileSize(file) {
-        return file.size > this.size * 1024 * 1024
-      },
-      handleBeforeUpload(file) {
-        let resultVal = false
-        if (this.exceedFileSize(file)) {
-          let computerSize = this.$options.filters['computerSize'](file.size)
-          this.$message({
-            message: `附件的大小为${computerSize}，超过了允许的最大尺寸${this.size}MB.`,
-            type: 'warning',
-          })
-          resultVal = false
-        } else {
-          resultVal = true
-        }
-
-        if (
-          this.beforeUpload &&
-          this.beforeUpload.constructor == Function &&
-          resultVal
-        ) {
-          resultVal = this.beforeUpload(file)
-        }
-
-        if (resultVal) {
-          this.files.push(file)
-        }
-
-        return resultVal
-      },
-      handleProgress(event, file, fileList) {
-        const index = this.files.findIndex((m) => m === file)
-        index > -1 && this.$set(this.files, index, file)
-        this.$emit('on-progress', event, file, fileList)
-      },
-      handleExceed() {
+    value: {
+      type: Array,
+      required: true,
+    },
+    actionUrl: {
+      type: String,
+      required: true,
+    },
+    listType: {
+      type: String,
+    },
+    multiple: {
+      type: Boolean,
+    },
+    accept: {
+      type: String,
+    },
+    limit: {
+      type: Number,
+      default: 5,
+    },
+    header: {
+      type: Object,
+    },
+    size: {
+      type: Number,
+      default: 50,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    beforeUpload: {
+      type: Function,
+    },
+    onSuccess: {
+      type: Function,
+    },
+    onError: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      files: [],
+    }
+  },
+  computed: {
+    acceptLabel: function () {
+      return this.accept ? this.accept : '所有格式'
+    },
+  },
+  created() {
+    this.files = this.value || []
+  },
+  methods: {
+    reload(files) {
+      this.files = files
+    },
+    // 附件是否超过最大尺寸
+    exceedFileSize(file) {
+      return file.size > this.size * 1024 * 1024
+    },
+    handleBeforeUpload(file) {
+      let resultVal = false
+      if (this.exceedFileSize(file)) {
+        let computerSize = this.$options.filters['computerSize'](file.size)
         this.$message({
-          message: `最多允许上传${this.limit}个附件.`,
+          message: `附件的大小为${computerSize}，超过了允许的最大尺寸${this.size}MB.`,
           type: 'warning',
         })
-      },
-      handleSuccess(response, file, fileList) {
-        if (this.onSuccess && this.onSuccess.constructor == Function) {
-          this.onSuccess(response, file, fileList)
-        }
-        const index = this.files.findIndex((m) => m === file)
-        file.state = 'success'
-        index > -1 && this.$set(this.files, index, file)
-      },
-      handleError(err, file, fileList) {
-        if (this.onError && this.onError.constructor == Function) {
-          this.onError(err, file, fileList)
-        }
-        this.$emit('handle-error', err, file, fileList)
-        const index = this.files.findIndex((m) => m === file)
-        file.state = 'exception'
-        index > -1 && this.$set(this.files, index, file)
-        this.$message({
-          message: `附件${file.name}上传失败.`,
-          type: 'error',
-          onClose: () => {
-            this.files.remove(file)
-          },
-        })
-      },
-      handleClear() {
-        this.files.forEach((m) => {
-          this.abort(m)
-        })
-        this.$refs.elUploadEl.clearFiles()
-        this.files = []
-        this.$emit('clear')
-      },
-      abort(file) {
-        // 附件还在上传中，则中止上传。
-        if (file && file.status === 'uploading') {
-          this.$refs.elUploadEl.abort(file)
-        }
-      },
-      remove(file) {
-        this.abort(file)
-        this.files.remove(file)
-        for (var i = 0; i < this.files.length; i++) {
-          if (this.files[i].uid == file.uid) {
-            this.files.splice(i, 1) //删除数组某一项
-          }
+        resultVal = false
+      } else {
+        resultVal = true
+      }
+
+      if (
+        this.beforeUpload &&
+        this.beforeUpload.constructor == Function &&
+        resultVal
+      ) {
+        resultVal = this.beforeUpload(file)
+      }
+
+      if (resultVal) {
+        this.files.push(file)
+      }
+
+      return resultVal
+    },
+    handleProgress(event, file, fileList) {
+      const index = this.files.findIndex((m) => m === file)
+      index > -1 && this.$set(this.files, index, file)
+      this.$emit('on-progress', event, file, fileList)
+    },
+    handleExceed() {
+      this.$message({
+        message: `最多允许上传${this.limit}个附件.`,
+        type: 'warning',
+      })
+    },
+    handleSuccess(response, file, fileList) {
+      if (this.onSuccess && this.onSuccess.constructor == Function) {
+        this.onSuccess(response, file, fileList)
+      }
+      const index = this.files.findIndex((m) => m === file)
+      file.state = 'success'
+      index > -1 && this.$set(this.files, index, file)
+    },
+    handleError(err, file, fileList) {
+      if (this.onError && this.onError.constructor == Function) {
+        this.onError(err, file, fileList)
+      }
+      this.$emit('handle-error', err, file, fileList)
+      const index = this.files.findIndex((m) => m === file)
+      file.state = 'exception'
+      index > -1 && this.$set(this.files, index, file)
+      this.$message({
+        message: `附件${file.name}上传失败.`,
+        type: 'error',
+        onClose: () => {
+          this.files.remove(file)
+        },
+      })
+    },
+    handleClear() {
+      this.files.forEach((m) => {
+        this.abort(m)
+      })
+      this.$refs.elUploadEl.clearFiles()
+      this.files = []
+      this.$emit('clear')
+    },
+    abort(file) {
+      // 附件还在上传中，则中止上传。
+      if (file && file.status === 'uploading') {
+        this.$refs.elUploadEl.abort(file)
+      }
+    },
+    remove(file) {
+      this.abort(file)
+      this.files.remove(file)
+      for (var i = 0; i < this.files.length; i++) {
+        if (this.files[i].uid == file.uid) {
+          this.files.splice(i, 1) //删除数组某一项
         }
-      },
+      }
     },
-  }
+  },
+}
 </script>
 <style lang="scss" scoped>
-  .el-upload {
-    display: inline;
-    text-align: center;
-    cursor: pointer;
-    outline: none;
-  }
+.el-upload {
+  display: inline;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+}
 
-  .file-upload-container {
-    margin-bottom: 10px;
-  }
+.file-upload-container {
+  margin-bottom: 10px;
+}
 
-  div.file-upload-container > div {
-    display: inline-block;
-    margin-right: 10px;
-  }
+div.file-upload-container > div {
+  display: inline-block;
+  margin-right: 10px;
+}
 </style>