haiwei-ui 1.3.1 → 1.3.3

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)
     }
   )
-}
+}

package/packages/components/list/components/querybar/index copy.vue

@@ -1,227 +0,0 @@
-<template>
-  <!--工具栏-->
-  <section class="nm-list-querybar">
-    <nm-form ref="normalForm" class="nm-list-querybar-normal" :model="model_" :rules="rules" :size="fontSize" :inline="true">
-      <slot />
-      <el-form-item v-if="!noSearch">
-        <nm-button type="primary" @click="query" :icon="!noSearchButtonIcon ? 'search' : ''" text="查询" />
-      </el-form-item>
-      <el-form-item v-if="!noReset">
-        <nm-button type="info" @click="reset" :icon="!noSearchButtonIcon ? 'refresh' : ''" text="重置" />
-      </el-form-item>
-      <el-form-item v-if="exportEnabled" v-nm-has="exportBtnCode">
-        <nm-button type="primary" @click="onExport" icon="export" text="导出" />
-      </el-form-item>
-      <el-form-item v-if="advanced_.enabled">
-        <nm-button ref="showAdvnacedBtn" type="warning" @click="onAdvancedClick">
-          高级查询
-          <i class="el-icon--right" :class="[showAdvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
-        </nm-button>
-      </el-form-item>
-      <!--自定义按钮插槽-->
-      <el-form-item>
-        <slot name="buttons" />
-      </el-form-item>
-    </nm-form>
-
-    <!--高级查询框-->
-    <transition name="el-zoom-in-top">
-      <section ref="advancedBox" class="nm-list-querybar-advanced" v-if="advanced_.enabled" v-show="showAdvanced" :style="advancedStyle">
-        <nm-box page header footer title="高级查询" icon="search">
-          <template v-slot:toolbar>
-            <nm-button icon="close" @click="showAdvanced = false" />
-          </template>
-          <!--查询条件-->
-          <nm-form ref="advancedForm" :model="model_" :rules="rules" :label-width="advanced_.labelWidth" :inline="advanced_.inline">
-            <slot name="advanced" />
-          </nm-form>
-          <template v-slot:footer>
-            <!--查询按钮-->
-            <nm-button type="primary" @click="query" text="查询" :icon="!noSearchButtonIcon ? 'search' : ''" />
-            <!--重置按钮-->
-            <nm-button type="info" @click="reset" text="重置" :icon="!noSearchButtonIcon ? 'refresh' : ''" />
-          </template>
-        </nm-box>
-        <div ref="arrow" class="advanced-arrow" />
-      </section>
-    </transition>
-  </section>
-</template>
-<script>
-  const defaultAdvanced = {
-    // 是否开启
-    enabled: false,
-    // 宽度
-    width: '400px',
-    // 高度
-    height: '',
-    // 表单标签宽度
-    labelWidth: '100px',
-    // 内联表单
-    inline: false
-  }
-  export default {
-    data() {
-      return {
-        // 是否显示高级查询
-        showAdvanced: false,
-        // 动态计算的高度
-        dynamicHeight: ''
-      }
-    },
-    props: {
-      /** 输入框的宽度 */
-      inputWidth: {
-        type: String,
-        default: '160px'
-      },
-      /** 查询模型 */
-      model: Object,
-      /** 验证规则 */
-      rules: Object,
-      /** 高级查询属性 */
-      advanced: Object,
-      /** 不显示按钮图标 */
-      noSearchButtonIcon: Boolean,
-      /** 不需要查询 */
-      noSearch: Boolean,
-      /**不显示查询按钮 */
-      noReset: Boolean,
-      /**显示导出按钮 */
-      exportEnabled: Boolean,
-      /**导出按钮权限编码 */
-      exportBtnCode: String
-    },
-    computed: {
-      model_() {
-        return this.model || {}
-      },
-      /** 高级查询设置 */
-      advanced_() {
-        const ad = this.$_.merge({}, defaultAdvanced, this.advanced)
-        ad.enabled = ad.enabled && !this.noSearch
-        return ad
-      },
-      /** 高级查询框样式 */
-      advancedStyle() {
-        return {
-          width: this.advanced_.width,
-          height: this.advanced_.height || this.dynamicHeight
-        }
-      }
-    },
-    methods: {
-      query() {
-        this.$parent.page.index = 1
-        this.$parent.query()
-        // 如果高级查询框显示，重新计算高度
-        if (this.showAdvanced && !this.advanced_.height) {
-          this.$nextTick(() => {
-            this.calculateAdvancedHeight()
-          })
-        }
-      },
-      /** 表单重置 */
-      reset() {
-        if (this.$refs.normalForm) {
-          this.$refs.normalForm.reset()
-        }
-        if (this.$refs.advancedForm) {
-          this.$refs.advancedForm.reset()
-        }
-        this.$emit('reset')
-      },
-      validate(action) {
-        return this.$refs.normalForm.validate(action)
-      },
-      /** 计算高级查询框高度 */
-      calculateAdvancedHeight() {
-        if (!this.$refs.advancedBox) return
-
-        const $box = this.$refs.advancedBox
-        const boxHeader = $box.querySelector('.nm-box-header')?.offsetHeight || 0
-        const boxFooter = $box.querySelector('.nm-box-footer')?.offsetHeight || 0
-        const form = $box.querySelector('.nm-form')
-        if (!form) return
-
-        let boxHeight = form.offsetHeight + boxHeader + boxFooter + 20
-        if (!this.advanced_.inline) {
-          boxHeight += 20
-        }
-        $box.style.height = boxHeight + 'px'
-        // 保存动态计算的高度，避免后续样式被覆盖
-        this.dynamicHeight = boxHeight + 'px'
-      },
-
-      /** 高级查询按钮点击事件 */
-      onAdvancedClick() {
-        this.showAdvanced = !this.showAdvanced
-
-        if (this.showAdvanced) {
-          this.$nextTick(() => {
-            let $box = this.$refs.advancedBox
-            let $arrow = this.$refs.arrow
-            const boxWidth = $box.offsetWidth
-            const { x, y, width, height } = this.$refs.showAdvnacedBtn.$el.getBoundingClientRect()
-            let left = x + width / 2 - $box.offsetWidth / 2
-            // 判断右侧有没有超出页面
-            if (left + boxWidth > document.body.offsetWidth) {
-              left = document.body.offsetWidth - boxWidth - 20
-              // 计算箭头的位置
-              $arrow.style.left = x - left - 10 + width / 2 + 'px'
-            } else {
-              // 计算箭头的位置
-              $arrow.style.left = $box.offsetWidth / 2 + 'px'
-            }
-
-            $box.style.left = left + 'px'
-            $box.style.top = y + height + 14 + 'px'
-
-            // 设置高度
-            if (!this.advanced_.height) {
-              this.calculateAdvancedHeight()
-            }
-          })
-        }
-      },
-      onExport() {
-        this.$parent.triggerExport()
-      },
-      /** 设置输入框宽度 */
-      setInputWidths(formRef) {
-        if (!this.inputWidth || !formRef || !formRef.$el) return
-        
-        let inputs = formRef.$el.querySelectorAll('.el-input__inner')
-        if (inputs) {
-          for (let i = 0; i < inputs.length; i++) {
-            const input = inputs[i] 
-            // 检查是否有data-width属性，如果有则使用该值，否则使用inputWidth
-            const customWidth = input.getAttribute('data-width')             
-            input.style.width = customWidth || this.inputWidth           
-          }
-        }
-      }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        this.$refs.normalForm.$el.addEventListener('keydown', e => {
-          if (e.keyCode === 13) {
-            this.query()
-          }
-        })
-        // 设置普通查询栏输入框宽度
-        this.setInputWidths(this.$refs.normalForm)
-      })
-    },
-    watch: {
-      showAdvanced(newVal) {
-        if (newVal && this.$refs.advancedForm) {
-          // 高级查询框显示时，设置其中的输入框宽度
-          this.$nextTick(() => {
-            this.setInputWidths(this.$refs.advancedForm)
-          })
-        }
-      }
-    }
-  }
-</script>