haiwei-ui 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haiwei-ui",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "HaiWei前端组件库",
   "author": "Eric",
   "license": "ISC",

package/packages/components/dialog/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <el-dialog ref="dialog" :id="id" :class="class_" :top="draggable_ ? '' : top" :modal="modal" :close-on-click-modal="closeOnClickModal_" :fullscreen="hasFullscreen" :visible.sync="visible_" :show-close="false" :append-to-body="true" :destroy-on-close="destroyOnClose" v-on="on">
+  <el-dialog ref="dialog" :id="id" :class="class_" :top="draggable_ ? '' : top" :modal="modal" 
+  :close-on-click-modal="closeOnClickModal_" :fullscreen="hasFullscreen" 
+  :visible.sync="visible_" :show-close="false" :append-to-body="true" :destroy-on-close="destroyOnClose" v-on="on">
     <!--头部-->
     <template v-slot:title>
       <section v-if="icon" class="nm-dialog-icon">
@@ -310,16 +312,13 @@
       onOpen() {
         this.$nextTick(() => {
           this.resize()
-
           on(window, 'resize', this.resize)
           if (!this.noScrollbar) {
             addResizeListener(this.elScrollbarViewEl, this.resize)
           }
-
           if (!this.draggable_) return
           on(this.titleEl, 'mousedown', this.handleDragDown)
         })
-
         this.$emit('open')
       },
       onOpened() {

package/packages/components/form-dialog/index.vue

@@ -1,6 +1,12 @@
 <template>
-  <nm-dialog ref="dialog" class="nm-form-dialog" :title="title" :icon="icon" :width="width" :height="height" :footer="footer" :fullscreen="fullscreen" :close-on-click-modal="closeOnClickModal" :loading="showLoading" :footer-close-button="footerCloseButton" :draggable="draggable" :drag-out-page="dragOutPage" :drag-min-width="dragMinWidth" :visible.sync="visible_" v-on="dialogOn">
-    <nm-form ref="form" no-loading :model="model" :rules="rules" :action="action" :label-width="labelWidth" :label-position="labelPosition" :customValidate="validate" :success-msg="successMsg" :success-msg-text="successMsgText" :disabled="disabled" :inline="inline" :customResetFunction="customResetFunction" v-on="formOn" @validate="onValidate">
+  <nm-dialog ref="dialog" class="nm-form-dialog" :title="title" :icon="icon" :width="width" :height="height"
+    :footer="footer" :fullscreen="fullscreen" :close-on-click-modal="closeOnClickModal" :loading="showLoading"
+    :footer-close-button="footerCloseButton" :draggable="draggable" :drag-out-page="dragOutPage"
+    :drag-min-width="dragMinWidth" :visible.sync="visible_" v-on="dialogOn">
+    <nm-form ref="form" no-loading :model="model" :rules="rules" :action="action" :label-width="labelWidth"
+      :label-position="labelPosition" :customValidate="validate" :success-msg="successMsg"
+      :success-msg-text="successMsgText" :disabled="disabled" :inline="inline"
+      :customResetFunction="customResetFunction" v-on="formOn" @validate="onValidate">
       <slot />
     </nm-form>
 
@@ -18,195 +24,213 @@
   </nm-dialog>
 </template>
 <script>
-  import visible from '../../mixins/components/visible'
-  export default {
-    name: 'FormDialog',
-    mixins: [visible],
-    data() {
-      return {
-        loading_: false,
-        formOn: {
-          success: this.onSuccess,
-          error: this.onError,
-          reset: this.onReset,
-          'validate-error': this.onValidateError
-        },
-        dialogOn: {
-          open: this.onOpen,
-          opened: this.onOpened,
-          close: this.onClose,
-          closed: this.onClosed
+import visible from '../../mixins/components/visible'
+export default {
+  name: 'FormDialog',
+  mixins: [visible],
+  data() {
+    return {
+      loading_: false,
+      formOn: {
+        success: this.onSuccess,
+        error: this.onError,
+        reset: this.onReset,
+        'validate-error': this.onValidateError
+      },
+      dialogOn: {
+        open: this.onOpen,
+        opened: this.onOpened,
+        close: this.onClose,
+        closed: this.onClosed
+      }
+    }
+  },
+  props: {
+    /** 标题 */
+    title: String,
+    /** 图标 */
+    icon: String,
+    /** 宽度 */
+    width: String,
+    /** Dialog 的高度 */
+    height: [Number, String],
+    /** 显示尾部 */
+    footer: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否可以通过点击 modal 关闭 Dialog */
+    closeOnClickModal: {
+      type: Boolean,
+      default: null
+    },
+    /** 是否显示全屏按钮 */
+    fullscreen: Boolean,
+    /** 表单模型 */
+    model: {
+      type: Object,
+      required: true
+    },
+    /** 验证规则 */
+    rules: Object,
+    /** 提交请求 */
+    action: Function,
+    /** 行内表单 */
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    /** 标签的宽度 */
+    labelWidth: String,
+    /** 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width */
+    labelPosition: String,
+    // 自定义验证
+    validate: Function,
+    /** 是否显示成功提示消息 */
+    successMsg: {
+      type: Boolean,
+      default: true
+    },
+    /** 成功提示消息文本 */
+    successMsgText: {
+      type: String,
+      default: '保存成功'
+    },
+    /** Ok按钮 */
+    btnOk: {
+      type: Boolean,
+      default: true
+    },
+    /** Ok按钮文本 */
+    btnOkText: {
+      type: String,
+      default: '保存'
+    },
+    /** reset按钮 */
+    btnReset: {
+      type: Boolean,
+      default: true
+    },
+    /** 自定义重置操作 */
+    customResetFunction: Function,
+    // 保存成功后是否关闭对话框
+    closeWhenSuccess: {
+      type: Boolean,
+      default: true
+    },
+    /** 禁用表单 */
+    disabled: Boolean,
+    /** 显示加载动画 */
+    loading: Boolean,
+    /** 不显示加载动画 */
+    noLoading: {
+      type: Boolean,
+      default: false
+    },
+    /** 打开时是否清楚验证信息 */
+    clearValidateOnOpen: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否显示底部关闭按钮 */
+    footerCloseButton: Boolean,
+    /** 可拖拽的 */
+    draggable: {
+      type: Boolean,
+      default: null
+    },
+    /** 是否可拖出页面 */
+    dragOutPage: Boolean,
+    /** 拖拽出页面后保留的最小宽度 */
+    dragMinWidth: Number
+  },
+  computed: {
+    showLoading() {
+      return !this.noLoading && (this.loading_ || this.loading)
+    }
+  },
+  methods: {
+    /** 提交 */
+    async submit() {
+      // 触发 before-submit 钩子
+      if (this.$listeners['before-submit']) {
+        this.loading_ = true
+
+        try {
+          // 直接传递 this.model，让父组件直接修改它
+          await new Promise((resolve, reject) => {
+            this.$emit('before-submit', this.model, resolve, reject)
+          })
+        } catch (error) {
+          // 如果 before-submit 中调用了 reject，会进入这里
+          this.loading_ = false
+          this.$emit('error', error)
+          return
         }
       }
+
+      // 继续原有提交逻辑（this.model 已经被父组件修改过了）
+      this.loading_ = true
+      this.$refs.form.submit()
     },
-    props: {
-      /** 标题 */
-      title: String,
-      /** 图标 */
-      icon: String,
-      /** 宽度 */
-      width: String,
-      /** Dialog 的高度 */
-      height: [Number, String],
-      /** 显示尾部 */
-      footer: {
-        type: Boolean,
-        default: true
-      },
-      /** 是否可以通过点击 modal 关闭 Dialog */
-      closeOnClickModal: {
-        type: Boolean,
-        default: null
-      },
-      /** 是否显示全屏按钮 */
-      fullscreen: Boolean,
-      /** 表单模型 */
-      model: {
-        type: Object,
-        required: true
-      },
-      /** 验证规则 */
-      rules: Object,
-      /** 提交请求 */
-      action: Function,
-      /** 行内表单 */
-      inline: {
-        type: Boolean,
-        default: false
-      },
-      /** 标签的宽度 */
-      labelWidth: String,
-      /** 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width */
-      labelPosition: String,
-      // 自定义验证
-      validate: Function,
-      /** 是否显示成功提示消息 */
-      successMsg: {
-        type: Boolean,
-        default: true
-      },
-      /** 成功提示消息文本 */
-      successMsgText: {
-        type: String,
-        default: '保存成功'
-      },
-      /** Ok按钮 */
-      btnOk: {
-        type: Boolean,
-        default: true
-      },
-      /** Ok按钮文本 */
-      btnOkText: {
-        type: String,
-        default: '保存'
-      },
-      /** reset按钮 */
-      btnReset: {
-        type: Boolean,
-        default: true
-      },
-      /** 自定义重置操作 */
-      customResetFunction: Function,
-      // 保存成功后是否关闭对话框
-      closeWhenSuccess: {
-        type: Boolean,
-        default: true
-      },
-      /** 禁用表单 */
-      disabled: Boolean,
-      /** 显示加载动画 */
-      loading: Boolean,
-      /** 不显示加载动画 */
-      noLoading: {
-        type: Boolean,
-        default: false
-      },
-      /** 打开时是否清楚验证信息 */
-      clearValidateOnOpen: {
-        type: Boolean,
-        default: true
-      },
-      /** 是否显示底部关闭按钮 */
-      footerCloseButton: Boolean,
-      /** 可拖拽的 */
-      draggable: {
-        type: Boolean,
-        default: null
-      },
-      /** 是否可拖出页面 */
-      dragOutPage: Boolean,
-      /** 拖拽出页面后保留的最小宽度 */
-      dragMinWidth: Number
-    },
-    computed: {
-      showLoading() {
-        return !this.noLoading && (this.loading_ || this.loading)
+    /** 重置 */
+    reset() {
+      this.$nextTick(() => {
+        this.$refs.form.reset()
+      })
+    },
+    /** 清除验证信息 */
+    clearValidate() {
+      this.$refs.form.clearValidate()
+    },
+    /** 打开loading */
+    openLoading() {
+      this.loading_ = true
+    },
+    /** 关闭loading */
+    closeLoading() {
+      this.loading = false
+    },
+    // 成功
+    onSuccess(data) {
+      // 关闭对话框
+      if (this.closeWhenSuccess) {
+        setTimeout(this.hide, 800)
       }
+      this.loading_ = false
+      this.$emit('success', data)
     },
-    methods: {
-      /** 提交 */
-      submit() {
-        this.loading_ = true
-        this.$refs.form.submit()
-      },
-      /** 重置 */
-      reset() {
+    onReset() {
+      this.$emit('reset')
+    },
+    onError() {
+      this.loading_ = false
+      this.$emit('error')
+    },
+    onValidateError() {
+      this.loading_ = false
+      this.$emit('validate-error')
+    },
+    onOpen() {
+      if (this.clearValidateOnOpen) {
         this.$nextTick(() => {
-          this.$refs.form.reset()
+          this.$refs.form.clearValidate()
         })
-      },
-      /** 清除验证信息 */
-      clearValidate() {
-        this.$refs.form.clearValidate()
-      },
-      /** 打开loading */
-      openLoading() {
-        this.loading_ = true
-      },
-      /** 关闭loading */
-      closeLoading() {
-        this.loading = false
-      },
-      // 成功
-      onSuccess(data) {
-        // 关闭对话框
-        if (this.closeWhenSuccess) {
-          setTimeout(this.hide, 800)
-        }
-        this.loading_ = false
-        this.$emit('success', data)
-      },
-      onReset() {
-        this.$emit('reset')
-      },
-      onError() {
-        this.loading_ = false
-        this.$emit('error')
-      },
-      onValidateError() {
-        this.loading_ = false
-        this.$emit('validate-error')
-      },
-      onOpen() {
-        if (this.clearValidateOnOpen) {
-          this.$nextTick(() => {
-            this.$refs.form.clearValidate()
-          })
-        }
-        this.$emit('open')
-      },
-      onOpened() {
-        this.$emit('opened')
-      },
-      onClose() {
-        this.$emit('close')
-      },
-      onClosed() {
-        this.$emit('closed')
-      },
-      onValidate(prop, valid, msg) {
-        this.$emit('validate', prop, valid, msg)
       }
+      this.$emit('open')
+    },
+    onOpened() {
+      this.$emit('opened')
+    },
+    onClose() {
+      this.$emit('close')
+    },
+    onClosed() {
+      this.$emit('closed')
+    },
+    onValidate(prop, valid, msg) {
+      this.$emit('validate', prop, valid, msg)
     }
   }
+}
 </script>

package/packages/utils/http.js

@@ -58,6 +58,52 @@ Http.prototype.put = (url, params, config) => {
   return axios.put(url, params, config)
 }
 
+/**
+ * 通用文件上传接口
+ * @param {string} url - 上传接口URL
+ * @param {File|Blob} file - 要上传的文件对象
+ * @param {string} [fieldName='file'] - 文件字段名称，默认为'file'
+ * @param {Object} [formData={}] - 额外的表单数据
+ * @param {Object} [config={}] - 额外的axios配置
+ * @returns {Promise} 返回Promise对象
+ * @example
+ * // 基本使用
+ * $http.upload('/api/upload', file)
+ *
+ * // 自定义字段名和额外参数
+ * $http.upload('/api/upload', file, 'avatar', { userId: 123 })
+ *
+ * // 完整配置
+ * $http.upload('/api/upload', file, 'document', { category: 'pdf' }, {
+ *   onUploadProgress: progressEvent => {
+ *     const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+ *     console.log(`上传进度: ${percentCompleted}%`)
+ *   }
+ * })
+ */
+Http.prototype.upload = (url, file, fieldName = 'file', formData = {}, config = {}) => {
+  // 创建FormData对象
+  const data = new FormData()
+
+  // 添加文件
+  data.append(fieldName, file)
+
+  // 添加额外的表单数据
+  Object.keys(formData).forEach(key => {
+    data.append(key, formData[key])
+  })
+
+  // 合并配置，设置Content-Type为multipart/form-data
+  const config_ = Object.assign({}, config, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+      ...config.headers
+    }
+  })
+
+  return axios.post(url, data, config_)
+}
+
 Http.prototype.download = (url, params, config) => {
   const config_ = Object.assign({ responseType: 'blob' }, config, {
     // 参数
@@ -74,17 +120,21 @@ Http.prototype.download = (url, params, config) => {
 }
 
 Http.prototype.preview = (url, params, config) => {
-  const config_ = Object.assign({ responseType: 'blob', headers: { preview: true } }, config, {
-    // 参数
-    params,
-    // 修改参数序列化方法
-    paramsSerializer: p => {
-      // 使用逗号分隔参数
-      return qs.stringify(p, {
-        allowDots: true
-      })
+  const config_ = Object.assign(
+    { responseType: 'blob', headers: { preview: true } },
+    config,
+    {
+      // 参数
+      params,
+      // 修改参数序列化方法
+      paramsSerializer: p => {
+        // 使用逗号分隔参数
+        return qs.stringify(p, {
+          allowDots: true
+        })
+      }
     }
-  })
+  )
   return axios.get(url, config_)
 }
 
@@ -121,12 +171,12 @@ if (!window.$http) window.$http = new Http()
 
 // 消息提醒显示时长(ms)
 const messageDuration = 1500
-//是否显示了账户在其他地方登录的提示框
+// 是否显示了账户在其他地方登录的提示框
 let showLoginOnOtherPlaces = false
 
-//处理文件下载请求
+// 处理文件下载请求
 const handleDownload = response => {
-  //如果返回的是application/json，则表示返回的是json，没有要下载的问题，可能是逻辑处理失败
+  // 如果返回的是application/json，则表示返回的是json，没有要下载的问题，可能是逻辑处理失败
   if (response.data.type === 'application/json') {
     var reader = new FileReader()
     reader.onload = e => {
@@ -158,12 +208,12 @@ const handleDownload = response => {
     fileName = decodeURI(cd.split("''")[1])
   }
 
-  //如果文件名不存在，则使用时间戳
+  // 如果文件名不存在，则使用时间戳
   if (!fileName) {
     fileName = dayjs().format('YYYYMMDDHHMMSSS')
   }
 
-  //通过模拟a标签点击事件下载文件
+  // 通过模拟a标签点击事件下载文件
   const link = document.createElement('a')
   link.href = url
   link.setAttribute('download', fileName)
@@ -172,7 +222,7 @@ const handleDownload = response => {
   document.body.removeChild(link)
 }
 
-//刷新令牌
+// 刷新令牌
 const refreshToken = () => {
   let t = token.get()
   if (t && t.refreshToken) {
@@ -279,9 +329,9 @@ export default config => {
           case 401:
             return refreshToken()
               .then(data => {
-                //重新初始化令牌
+                // 重新初始化令牌
                 store.commit('app/token/init', data)
-                //重新发一起一次上次的的请求
+                // 重新发一起一次上次的的请求
                 error.config.headers.Authorization = 'Bearer ' + data.accessToken
                 return axios.request(error.config)
               })
@@ -309,7 +359,7 @@ export default config => {
             )
             break
           case 622:
-            //单账户登录功能
+            // 单账户登录功能
             if (!showLoginOnOtherPlaces) {
               showLoginOnOtherPlaces = true
               MessageBox.confirm('账户已在别处登录, 请重新登录~', '提示', {
@@ -352,4 +402,4 @@ export default config => {
       return Promise.reject(error)
     }
   )
-}
+}