haiwei-ui 1.3.3 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haiwei-ui",
-  "version": "1.3.3",
+  "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 copy.js

@@ -1,355 +0,0 @@
-import axios from 'axios'
-import qs from 'qs'
-import dayjs from 'dayjs'
-import token from './token'
-import { Message, MessageBox } from 'element-ui'
-import { store } from '../store'
-import { router } from '../router'
-
-axios.defaults.headers.post['Content-Type'] = 'application/json'
-axios.defaults.headers.put['Content-Type'] = 'application/json'
-
-function Http() {
-  this.axios = axios
-}
-
-// 序列化参数为Url形式
-Http.prototype.stringify = params => {
-  return qs.stringify(params, {
-    allowDots: true
-  })
-}
-
-Http.prototype.post = (url, params, config) => {
-  return axios.post(url, params, config)
-}
-
-Http.prototype.get = (url, params, config) => {
-  const config_ = Object.assign({}, config, {
-    // 参数
-    params,
-    // 修改参数序列化方法
-    paramsSerializer: p => {
-      // 使用逗号分隔参数
-      return qs.stringify(p, {
-        allowDots: true
-      })
-    }
-  })
-  return axios.get(url, config_)
-}
-
-Http.prototype.delete = (url, params, config) => {
-  const config_ = Object.assign({}, config, {
-    // 参数
-    params,
-    // 修改参数序列化方法
-    paramsSerializer: p => {
-      // 使用逗号分隔参数
-      return qs.stringify(p, {
-        allowDots: true
-      })
-    }
-  })
-  return axios.delete(url, config_)
-}
-
-Http.prototype.put = (url, params, config) => {
-  return axios.put(url, params, config)
-}
-
-Http.prototype.download = (url, params, config) => {
-  const config_ = Object.assign({ responseType: 'blob' }, config, {
-    // 参数
-    params,
-    // 修改参数序列化方法
-    paramsSerializer: p => {
-      // 使用逗号分隔参数
-      return qs.stringify(p, {
-        allowDots: true
-      })
-    }
-  })
-  return axios.get(url, 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
-      })
-    }
-  })
-  return axios.get(url, config_)
-}
-
-Http.prototype.export = (url, params, config) => {
-  return axios.post(url, params, Object.assign({ responseType: 'blob' }, config))
-}
-
-// 通用CRUD接口地址
-Http.prototype.crud = root => {
-  if (!root.endsWith('/')) {
-    root += '/'
-  }
-  return {
-    query(params) {
-      return $http.get(`${root}query`, params)
-    },
-    add(params) {
-      return $http.post(`${root}add`, params)
-    },
-    remove(id) {
-      return $http.delete(`${root}delete`, { id })
-    },
-    edit(id) {
-      return $http.get(`${root}edit`, { id })
-    },
-    update(params) {
-      return $http.post(`${root}update`, params)
-    }
-  }
-}
-
-// 设为全局属性$http
-if (!window.$http) window.$http = new Http()
-
-// 消息提醒显示时长(ms)
-const messageDuration = 1500
-//是否显示了账户在其他地方登录的提示框
-let showLoginOnOtherPlaces = false
-
-//处理文件下载请求
-const handleDownload = response => {
-  //如果返回的是application/json，则表示返回的是json，没有要下载的问题，可能是逻辑处理失败
-  if (response.data.type === 'application/json') {
-    var reader = new FileReader()
-    reader.onload = e => {
-      var data = JSON.parse(e.target.result)
-      if (data.code === 1) {
-        return data.data
-      } else {
-        Message.error({
-          message: data.msg,
-          showClose: true,
-          duration: messageDuration
-        })
-        return
-      }
-    }
-    reader.readAsText(response.data)
-    return
-  }
-
-  const url = window.URL.createObjectURL(response.data)
-
-  // 如果是预览直接返回
-  if (response.config.headers['preview']) return url
-
-  let fileName = ''
-  // 如果响应头包含'content-disposition'属性，则从该属性中获取文件名称
-  let cd = response.headers['content-disposition']
-  if (cd) {
-    fileName = decodeURI(cd.split("''")[1])
-  }
-
-  //如果文件名不存在，则使用时间戳
-  if (!fileName) {
-    fileName = dayjs().format('YYYYMMDDHHMMSSS')
-  }
-
-  //通过模拟a标签点击事件下载文件
-  const link = document.createElement('a')
-  link.href = url
-  link.setAttribute('download', fileName)
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-}
-
-//刷新令牌
-const refreshToken = () => {
-  let t = token.get()
-  if (t && t.refreshToken) {
-    return store.state.app.system.actions.refreshToken(t.refreshToken)
-  }
-
-  Promise.reject('refresh token error')
-}
-
-// 初始化
-export default config => {
-  // 接口根路径
-  axios.defaults.baseURL = config.baseUrl
-
-  // 拦截请求
-  axios.interceptors.request.use(
-    config => {
-      let t = token.get()
-      if (t && t.accessToken) {
-        config.headers.Authorization = 'Bearer ' + t.accessToken
-      }
-
-      // 开发环境下打印请求日志
-      if (process.env.NODE_ENV === 'development') {
-        console.group(`[API请求] ${config.method.toUpperCase()} ${config.url}`)
-        console.log('请求配置:', {
-          方法: config.method,
-          URL: config.url,
-          参数: config.params,
-          数据: config.data,
-          头信息: config.headers
-        })
-        console.groupEnd()
-      }
-
-      return config
-    },
-    function(error) {
-      // 开发环境下打印请求错误日志
-      if (process.env.NODE_ENV === 'development') {
-        console.error('[请求拦截器错误]:', error)
-      }
-      return Promise.reject(error)
-    }
-  )
-
-  // 响应前拦截器
-  axios.interceptors.response.use(
-    response => {
-      const { config } = response
-
-      // 开发环境下打印响应成功日志
-      if (process.env.NODE_ENV === 'development') {
-        console.group(`[API响应] ${config.method.toUpperCase()} ${config.url}`)
-        console.log('响应信息:', {
-          状态码: response.status,
-          状态文本: response.statusText,
-          数据: response.data,
-          头信息: response.headers
-        })
-        console.groupEnd()
-      }
-
-      // 文件下载/预览
-      if (config.responseType && config.responseType === 'blob') {
-        return handleDownload(response)
-      }
-
-      if (response.data.code === 1) {
-        return response.data.data
-      } else if (response.data.code === 0 && !config.noErrorMsg) {
-        Message.error({
-          message: response.data.msg,
-          showClose: true,
-          duration: messageDuration
-        })
-        return Promise.reject(response.data.msg)
-      } else {
-        return response.data
-      }
-    },
-    error => {
-      // 开发环境下打印响应错误日志
-      if (process.env.NODE_ENV === 'development') {
-        const method = error.config && error.config.method ? error.config.method.toUpperCase() : 'UNKNOWN'
-        const url = error.config && error.config.url ? error.config.url : 'unknown'
-        const status = error.response && error.response.status
-        const responseData = error.response && error.response.data
-
-        console.group(`[API错误] ${method} ${url}`)
-        console.log('错误信息:', {
-          状态码: status,
-          错误消息: error.message,
-          响应数据: responseData,
-          请求配置: error.config
-        })
-        console.groupEnd()
-      }
-
-      let currentRoute = router.currentRoute
-      let redirect = currentRoute.name !== 'login' ? currentRoute.fullPath : '/' // 跳转页面
-      if (error && error.response) {
-        switch (error.response.status) {
-          case 401:
-            return refreshToken()
-              .then(data => {
-                //重新初始化令牌
-                store.commit('app/token/init', data)
-                //重新发一起一次上次的的请求
-                error.config.headers.Authorization = 'Bearer ' + data.accessToken
-                return axios.request(error.config)
-              })
-              .catch(() => {
-                // 如果刷新失败，需要删除token并跳转到登录页面
-                token.remove()
-                router.push({
-                  name: 'login',
-                  query: {
-                    redirect
-                  }
-                })
-              })
-          case 403:
-            store.dispatch(
-              'app/page/close',
-              {
-                fullPath: currentRoute.path,
-                router: router,
-                to: {
-                  name: 'error403'
-                }
-              },
-              { root: true }
-            )
-            break
-          case 622:
-            //单账户登录功能
-            if (!showLoginOnOtherPlaces) {
-              showLoginOnOtherPlaces = true
-              MessageBox.confirm('账户已在别处登录, 请重新登录~', '提示', {
-                confirmButtonText: '确定',
-                type: 'warning',
-                showCancelButton: false,
-                callback() {
-                  // 删除token
-                  token.remove()
-                  router.push({
-                    name: 'login',
-                    query: {
-                      redirect
-                    }
-                  })
-                  showLoginOnOtherPlaces = false
-                }
-              })
-            }
-            break
-          default:
-            console.error(error.response.data.msg)
-            Message.error({
-              message: '系统异常，请联系管理员~',
-              duration: messageDuration
-            })
-            break
-        }
-      } else {
-        if (currentRoute.name === 'login') {
-          Message.error({
-            message: '无法连接网络~',
-            duration: messageDuration
-          })
-        } else {
-          token.remove()
-          router.push({ name: 'login', query: { redirect } })
-        }
-      }
-      return Promise.reject(error)
-    }
-  )
-}