haiwei-ui 1.3.1 → 1.3.3

package/packages/components/update-password/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <nm-form-dialog ref="form" title="修改密码" class="nm-update-password" width="400px" icon="password" :model="model" :rules="rules" :action="updatePassword" :visible.sync="visible_" success-msg-text="修改成功" @success="logout">
+  <nm-form-dialog ref="form" title="修改密码" class="nm-update-password" width="400px" icon="password" :model="model"
+    :rules="rules" :action="updatePassword" :visible.sync="visible_" success-msg-text="修改成功" @success="logout">
     <el-alert title="提示" type="warning" description="密码修改成功后，需要重新登录" show-icon :closable="false"></el-alert>
     <el-row>
       <el-col :span="18" :offset="2">
@@ -17,56 +18,57 @@
   </nm-form-dialog>
 </template>
 <script>
-  import visible from '../../mixins/components/visible.js'
-  import { mapState, mapActions } from 'vuex'
+import visible from '../../mixins/components/visible.js'
+import { mapState, mapActions } from 'vuex'
 
-  export default {
-    name: 'UpdatePassword',
-    mixins: [visible],
-    data() {
-      // 密码验证
-      const validator = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('请输入确认密码'))
-        } else if (value !== this.model.newPassword) {
-          callback(new Error('两次输入密码不一致!'))
-        } else {
-          callback()
-        }
+export default {
+  name: 'UpdatePassword',
+  mixins: [visible],
+  data() {
+    // 密码验证
+    const validator = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入确认密码'))
+      } else if (value !== this.model.newPassword) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
       }
-      return {
-        model: {
-          oldPassword: '',
-          newPassword: '',
-          confirmPassword: ''
-        },
-        rules: {
-          oldPassword: [{ required: true, message: '请输入原密码' }],
-          newPassword: [
-            { required: true, message: '请输入新密码' },
-            { min: 6, message: '密码长度不能小于6' }
-          ],
-          confirmPassword: [{ validator }]
-        }
+    }
+    return {
+      model: {
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+      },
+      rules: {
+        oldPassword: [{ required: true, message: '请输入原密码' }],
+        newPassword: [
+          { required: true, message: '请输入新密码' },
+          { min: 6, message: '密码长度不能小于6' }
+        ],
+        confirmPassword: [{ validator }]
       }
-    },
-    computed: {
-      ...mapState('app/system', { updatePassword: s => s.actions.updatePassword })
-    },
-    methods: {
-      ...mapActions('app/system', ['logout'])
     }
+  },
+  computed: {
+    ...mapState('app/system', { updatePassword: s => s.actions.updatePassword })
+  },
+  methods: {
+    ...mapActions('app/system', ['logout'])
   }
+}
 </script>
 <style lang="scss" scoped>
-  .nm-update-password {
-    .el-alert {
-      margin-top: -5px;
-      margin-bottom: 10px;
-      line-height: 15px;
-    }
-    .el-visible__footer {
-      line-height: 15px;
-    }
+.nm-update-password {
+  .el-alert {
+    margin-top: -5px;
+    margin-bottom: 10px;
+    line-height: 15px;
+  }
+
+  .el-visible__footer {
+    line-height: 15px;
   }
+}
 </style>

package/packages/styles/components/box/_index.scss

@@ -8,7 +8,7 @@
   border-style: solid;
   border-top: 1px solid $border-color2;
 
-  > #{$prefix}box-header {
+  >#{$prefix}box-header {
     padding: 0 5px;
     display: flex;
     align-items: stretch;
@@ -62,10 +62,12 @@
 
         &.is-disabled {
           cursor: not-allowed;
+
           span {
             color: #c0c4cc;
           }
         }
+
         &:not(.is-disabled):hover {
           color: $text-color1;
           transform: scale(1.2);
@@ -74,21 +76,21 @@
     }
   }
 
-  > #{$prefix}box-dialog {
+  >#{$prefix}box-dialog {
     position: relative;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
     @include flex-column();
     flex-grow: 1;
 
-    > #{$prefix}box-content {
+    >#{$prefix}box-content {
       position: relative;
       padding: 10px;
       flex-grow: 1;
       box-sizing: border-box;
     }
 
-    > #{$prefix}box-footer {
+    >#{$prefix}box-footer {
       padding: 0 10px;
       flex-shrink: 0;
       flex-grow: 0;
@@ -113,8 +115,8 @@
   }
 
   &.has-height {
-    > #{$prefix}box-dialog {
-      > #{$prefix}box-content {
+    >#{$prefix}box-dialog {
+      >#{$prefix}box-content {
         position: absolute;
         padding-left: 0;
         padding-right: 0;
@@ -124,8 +126,8 @@
         #{$prefix}box-wrapper {
           height: 100%;
 
-          > &-scrollbar {
-            > .el-scrollbar__wrap {
+          >&-scrollbar {
+            >.el-scrollbar__wrap {
               padding-left: 10px;
               padding-right: 10px;
             }
@@ -147,13 +149,13 @@
   &.page {
     height: 100%;
 
-    > #{$prefix}box-dialog {
+    >#{$prefix}box-dialog {
       padding: 0;
 
-      > #{$prefix}box-content {
+      >#{$prefix}box-content {
         padding: 0;
 
-        > #{$prefix}box-wrapper {
+        >#{$prefix}box-wrapper {
           position: absolute;
           width: 100%;
           height: 100%;
@@ -167,11 +169,11 @@
   }
 
   &.no-padding {
-    > #{$prefix}box-dialog {
-      > #{$prefix}box-content {
+    >#{$prefix}box-dialog {
+      >#{$prefix}box-content {
         padding: 0 !important;
 
-        > #{$prefix}box-wrapper {
+        >#{$prefix}box-wrapper {
           .el-scrollbar__view {
             padding: 0 !important;
           }
@@ -209,4 +211,4 @@
       font-weight: 600;
     }
   }
-}
+}

package/packages/utils/http copy.js

@@ -0,0 +1,355 @@
+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)
+    }
+  )
+}