vue2-client 1.2.83 → 1.2.86

package/CHANGELOG.md

@@ -1,7 +1,7 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
-**1.2.81 - 1.2.83 -2022-07-21 @朱子峰**
+**1.2.81 - 1.2.86 -2022-07-21 @朱子峰**
 - 功能新增：
 - 兼容V4登陆
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.2.83",
+  "version": "1.2.86",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -24,6 +24,7 @@ export default {
   },
   mounted () {
    this.setWeekModeTheme(this.weekMode)
+    localStorage.setItem('compatible', this.compatible)
   },
   watch: {
     weekMode (val) {
@@ -55,7 +56,7 @@ export default {
     }
   },
   computed: {
-    ...mapState('setting', ['layout', 'theme', 'weekMode', 'lang'])
+    ...mapState('setting', ['layout', 'theme', 'weekMode', 'lang', 'compatible'])
   },
   methods: {
     ...mapMutations('setting', ['setDevice']),

package/src/base-client/components/common/AddressSearchCombobox/AddressSearchCombobox.vue

@@ -1,225 +1,225 @@
-<template>
-  <div class="certain-category-search-wrapper">
-    <a-auto-complete
-      :disabled="!mapAutocomplete"
-      :dropdown-match-select-width="false"
-      :dropdown-style="{ width: '400px' }"
-      class="certain-category-search"
-      dropdown-class-name="certain-category-search-dropdown"
-      option-label-prop="value"
-      placeholder="输入地址关键字搜索"
-      @search="fetchFunction"
-      @select="onSelect"
-    >
-      <a-spin v-if="searching" slot="notFoundContent" size="small" />
-      <template slot="dataSource">
-        <a-select-opt-group v-for="group in option" :key="group.title">
-          <span
-            slot="label">
-            <a-icon type="bank" /> {{ group.title }}
-          </span>
-          <a-select-option v-for="address in group.children" :key="address.label + ' (' + address.value + ')'">
-            <p class="addressName"><a-icon type="environment" /> <span v-html="highLight(address.label, address.word)">{{ address.label }}</span></p>
-            <p v-if="address.address !== '[]'" class="addressRemark">
-              {{ address.address }}
-            </p>
-          </a-select-option>
-        </a-select-opt-group>
-      </template>
-      <a-input>
-        <a-icon slot="suffix" class="certain-category-icon" type="search"/>
-      </a-input>
-    </a-auto-complete>
-  </div>
-</template>
-<script>
-
-import { post } from '@vue2-client/services/api'
-import { GetGDMap } from '@vue2-client/utils/map-utils'
-import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
-
-export default {
-  name: 'AddressSearchCombobox',
-  data () {
-    // 检索去抖
-    this.fetchFunction = debounce(this.fetchFunction, 300)
-    return {
-      // 地址搜索联想
-      mapAutocomplete: undefined,
-      // 检索结果
-      option: [],
-      // 最后检索版本
-      lastFetchId: 0,
-      // 检索中
-      searching: false
-    }
-  },
-  model: {
-    prop: 'searchResult',
-    event: 'onSelect'
-  },
-  props: {
-    searchResult: {
-      type: String,
-      default: undefined
-    },
-    // 返回数据格式
-    searchResultType: {
-      type: String,
-      default: 'Default'
-      // default: 'Array'
-      // default: 'Object'
-    },
-    // Object 返回格式时 可以自定义key
-    resultKeys: {
-      type: Object,
-      default: () => { return { address: 'address', coords: 'coords' } }
-    }
-  },
-  created () {
-  },
-  mounted () {
-    GetGDMap().then(aMap => {
-      this.mapAutocomplete = new (aMap).Autocomplete({})
-    })
-  },
-  methods: {
-    onSelect (value) {
-      let result
-      if (this.searchResultType !== 'Default') {
-        const _arr = value.replace(')', '').split('(')
-        if (this.searchResultType === 'Array') {
-           result = _arr
-        } else {
-          result = {}
-          result[this.resultKeys.address] = _arr[0]
-          result[this.resultKeys.coords] = _arr[1]
-        }
-      }
-      this.$emit('onSelect', JSON.stringify(result) || value)
-      // this.$emit('onClick', result || value)
-    },
-    // 懒加载检索方法
-    fetchFunction (value) {
-      if (value && this.mapAutocomplete) {
-        this.searching = true
-        this.lastFetchId += 1
-        const fetchId = this.lastFetchId
-        this.mapAutocomplete.search(value, (status, result) => {
-          if (fetchId !== this.lastFetchId) {
-            return
-          }
-          if (status === 'complete') {
-            this.option = []
-            const addressMap = {}
-            result.tips.forEach((res) => {
-              if (res.location) {
-                if (!addressMap.hasOwnProperty(res.district)) {
-                  addressMap[res.district] = []
-                }
-                addressMap[res.district].push({
-                  label: res.name,
-                  value: res.location.lng + ',' + res.location.lat + ',',
-                  address: res.address + '',
-                  word: value
-                })
-              }
-            })
-            for (const key of Object.keys(addressMap)) {
-              this.option.push({
-                title: key,
-                children: addressMap[key]
-              })
-            }
-          }
-          this.searching = false
-        })
-      }
-    },
-    // 获取数据
-    getData (value, callback) {
-      if (value !== '') {
-        const logicName = this.attr.keyName
-        const logic = logicName.substring(6)
-        post('/webmeterapi/' + logic, value).then(res => {
-          callback(res)
-        })
-      }
-    },
-    // 关键字高亮
-    highLight (value, word) {
-      // 如果标题中包含，关键字就替换一下
-      if (value.includes(word)) {
-        value = value.replace(word,
-          // 这里是替换成html格式的数据，最好再加一个样式权重，保险一点
-          '<span style="color:red!important;">' + word + '</span>'
-        )
-        return value
-        // eslint-disable-next-line brace-style
-      }
-      // 不包含的话还用这个
-      else {
-        return value
-      }
-    }
-  }
-}
-</script>
-
-<style>
-.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
-  color: #666;
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
-  border-bottom: 1px solid #f6f6f6;
-}
-
-.certain-category-search-dropdown .ant-select-dropdown-menu-item {
-  padding-left: 16px;
-}
-
-.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
-  text-align: center;
-  cursor: default;
-}
-
-.certain-category-search-dropdown .ant-select-dropdown-menu {
-  max-height: 300px;
-}
-</style>
-<style scoped>
-.certain-category-search-wrapper
->>> .certain-category-search.ant-select-auto-complete
-.ant-input-affix-wrapper
-.ant-input-suffix {
-  right: 12px;
-}
-.certain-category-search-wrapper >>> .certain-search-item-count {
-  position: absolute;
-  color: #999;
-  right: 16px;
-}
-.certain-category-search-wrapper >>> .certain-category-search.ant-select-focused,
-.certain-category-icon {
-  color: #108ee9;
-}
-.certain-category-search-wrapper >>> .certain-category-icon {
-  color: #6e6e6e;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  font-size: 16px;
-}
-
-.addressName {
-  margin-bottom: 0;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.addressRemark {
-  margin-bottom: 0;
-  font-size: 12px;
-}
-</style>
+<template>
+  <div class="certain-category-search-wrapper">
+    <a-auto-complete
+      :disabled="!mapAutocomplete"
+      :dropdown-match-select-width="false"
+      :dropdown-style="{ width: '400px' }"
+      class="certain-category-search"
+      dropdown-class-name="certain-category-search-dropdown"
+      option-label-prop="value"
+      placeholder="输入地址关键字搜索"
+      @search="fetchFunction"
+      @select="onSelect"
+    >
+      <a-spin v-if="searching" slot="notFoundContent" size="small" />
+      <template slot="dataSource">
+        <a-select-opt-group v-for="group in option" :key="group.title">
+          <span
+            slot="label">
+            <a-icon type="bank" /> {{ group.title }}
+          </span>
+          <a-select-option v-for="address in group.children" :key="address.label + ' <' + address.value + '>'">
+            <p class="addressName"><a-icon type="environment" /> <span v-html="highLight(address.label, address.word)">{{ address.label }}</span></p>
+            <p v-if="address.address !== '[]'" class="addressRemark">
+              {{ address.address }}
+            </p>
+          </a-select-option>
+        </a-select-opt-group>
+      </template>
+      <a-input>
+        <a-icon slot="suffix" class="certain-category-icon" type="search"/>
+      </a-input>
+    </a-auto-complete>
+  </div>
+</template>
+<script>
+
+import { post } from '@vue2-client/services/api'
+import { GetGDMap } from '@vue2-client/utils/map-utils'
+import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
+
+export default {
+  name: 'AddressSearchCombobox',
+  data () {
+    // 检索去抖
+    this.fetchFunction = debounce(this.fetchFunction, 300)
+    return {
+      // 地址搜索联想
+      mapAutocomplete: undefined,
+      // 检索结果
+      option: [],
+      // 最后检索版本
+      lastFetchId: 0,
+      // 检索中
+      searching: false
+    }
+  },
+  model: {
+    prop: 'searchResult',
+    event: 'onSelect'
+  },
+  props: {
+    searchResult: {
+      type: String,
+      default: undefined
+    },
+    // 返回数据格式
+    searchResultType: {
+      type: String,
+      default: 'Default'
+      // default: 'Array'
+      // default: 'Object'
+    },
+    // Object 返回格式时 可以自定义key
+    resultKeys: {
+      type: Object,
+      default: () => { return { address: 'address', coords: 'coords' } }
+    }
+  },
+  created () {
+  },
+  mounted () {
+    GetGDMap().then(aMap => {
+      this.mapAutocomplete = new (aMap).Autocomplete({})
+    })
+  },
+  methods: {
+    onSelect (value) {
+      let result
+      if (this.searchResultType !== 'Default') {
+        const _arr = value.replace('>', '').split('<')
+        if (this.searchResultType === 'Array') {
+           result = _arr
+        } else {
+          result = {}
+          result[this.resultKeys.address] = _arr[0]
+          result[this.resultKeys.coords] = _arr[1]
+        }
+      }
+      this.$emit('onSelect', JSON.stringify(result) || value)
+      // this.$emit('onClick', result || value)
+    },
+    // 懒加载检索方法
+    fetchFunction (value) {
+      if (value && this.mapAutocomplete) {
+        this.searching = true
+        this.lastFetchId += 1
+        const fetchId = this.lastFetchId
+        this.mapAutocomplete.search(value, (status, result) => {
+          if (fetchId !== this.lastFetchId) {
+            return
+          }
+          if (status === 'complete') {
+            this.option = []
+            const addressMap = {}
+            result.tips.forEach((res) => {
+              if (res.location) {
+                if (!addressMap.hasOwnProperty(res.district)) {
+                  addressMap[res.district] = []
+                }
+                addressMap[res.district].push({
+                  label: res.name,
+                  value: res.location.lng + ',' + res.location.lat,
+                  address: res.address + '',
+                  word: value
+                })
+              }
+            })
+            for (const key of Object.keys(addressMap)) {
+              this.option.push({
+                title: key,
+                children: addressMap[key]
+              })
+            }
+          }
+          this.searching = false
+        })
+      }
+    },
+    // 获取数据
+    getData (value, callback) {
+      if (value !== '') {
+        const logicName = this.attr.keyName
+        const logic = logicName.substring(6)
+        post('/webmeterapi/' + logic, value).then(res => {
+          callback(res)
+        })
+      }
+    },
+    // 关键字高亮
+    highLight (value, word) {
+      // 如果标题中包含，关键字就替换一下
+      if (value.includes(word)) {
+        value = value.replace(word,
+          // 这里是替换成html格式的数据，最好再加一个样式权重，保险一点
+          '<span style="color:red!important;">' + word + '</span>'
+        )
+        return value
+        // eslint-disable-next-line brace-style
+      }
+      // 不包含的话还用这个
+      else {
+        return value
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
+  color: #666;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
+  border-bottom: 1px solid #f6f6f6;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item {
+  padding-left: 16px;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
+  text-align: center;
+  cursor: default;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu {
+  max-height: 300px;
+}
+</style>
+<style scoped>
+.certain-category-search-wrapper
+>>> .certain-category-search.ant-select-auto-complete
+.ant-input-affix-wrapper
+.ant-input-suffix {
+  right: 12px;
+}
+.certain-category-search-wrapper >>> .certain-search-item-count {
+  position: absolute;
+  color: #999;
+  right: 16px;
+}
+.certain-category-search-wrapper >>> .certain-category-search.ant-select-focused,
+.certain-category-icon {
+  color: #108ee9;
+}
+.certain-category-search-wrapper >>> .certain-category-icon {
+  color: #6e6e6e;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  font-size: 16px;
+}
+
+.addressName {
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.addressRemark {
+  margin-bottom: 0;
+  font-size: 12px;
+}
+</style>

package/src/base-client/plugins/AppData.js

@@ -33,8 +33,6 @@ const GetAppDataService = {
       // 追加参数
       localStorage.setItem(process.env.VUE_APP_DICTIONARY_KEY, JSON.stringify(params))
       localStorage.setItem(process.env.VUE_APP_BADGE_KEY, JSON.stringify(badgeItemArray))
-      // 清除compatible
-      localStorage.removeItem('compatible')
     })
     // 获取省市区数据
     await post(manageApi.getDivisionsOhChina, {}).then((res) => {

package/src/pages/login/Login.vue

@@ -116,11 +116,18 @@ export default {
       const password = this.form.getFieldValue('password')
       this.logging = false
       const loginRes = res
-      const V4Token = { token: res.data.access_token, expire: res.data.expires_in }
+      const V4Token = { token: res.access_token, expire: res.expires_in }
       this.setV4AccessToken(V4Token)
+      // 如果这是用户首次打开本系统，localStorage无法初始化，改用code判断
+      let pass = false
+      if (res.code) {
+        if (res.code === 200) {
+          pass = true
+        }
+      }
       // 向本地缓存中临时存储compatible
-      localStorage.setItem('compatible', this.compatible)
-      if (loginRes.code === 200) {
+      console.log(loginRes)
+      if (loginRes.access_token || pass) {
         const encrypt = new JSEncrypt()
         encrypt.setPublicKey('MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCqPvovSfXcwBbW8cKMCgwqNpsYuzF8RPAPFb7LGsnVo44JhM/xxzDyzoYtdfNmtbIuKVi9PzIsyp6rg+09gbuI6UGwBZ5DWBDBMqv5MPdOF5dCQkB2Bbr5yPfURPENypUz+pBFBg41d+BC+rwRiXELwKy7Y9caD/MtJyHydj8OUwIDAQAB')
         const data = encrypt.encrypt(JSON.stringify({ username: name, password: password }))

package/src/utils/map-utils.js

@@ -1,28 +1,31 @@
-import AMapLoader from '@amap/amap-jsapi-loader'
-let Amap
-async function GetGDMap () {
-  if (!Amap) {
-    Amap = await AMapLoader.load({
-      key: '4889f1e58df01cb40415536c8907bf64', // 申请好的Web端开发者Key，首次调用 load 时必填
-      version: '1.4.2', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-      plugins: ['AMap.ToolBar', 'AMap.Geolocation', 'AMap.Geocoder', 'AMap.MarkerClusterer', 'AMap.Autocomplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-    })
-  }
-  return Amap
-}
-async function GetLocation (address) {
-  return new Promise(async (resolve, reject) => {
-    new (await GetGDMap()).Geocoder({
-      radius: 500 // 范围，默认：500
-    }).getLocation(address, function (status, result) {
-      console.log(result)
-      if (status === 'complete' && result.geocodes.length) {
-        resolve({ lng: result.geocodes[0].location.lng, lat: result.geocodes[0].location.lat })
-      } else {
-        // eslint-disable-next-line prefer-promise-reject-errors
-        reject('根据经纬度查询地址失败')
-      }
-    })
-  })
-}
-export { GetGDMap, GetLocation }
+import AMapLoader from '@amap/amap-jsapi-loader'
+let Amap
+async function GetGDMap () {
+  if (!Amap) {
+    window._AMapSecurityConfig = {
+      securityJsCode: '275e59edb26ab1f917cfe7f05bea7979'
+    }
+    Amap = await AMapLoader.load({
+      key: '55a4807a6fc3adca5510f69578b1ae4a', // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: '1.4.2', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: ['AMap.ToolBar', 'AMap.Geolocation', 'AMap.Geocoder', 'AMap.MarkerClusterer', 'AMap.Autocomplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    })
+  }
+  return Amap
+}
+async function GetLocation (address) {
+  return new Promise(async (resolve, reject) => {
+    new (await GetGDMap()).Geocoder({
+      radius: 500 // 范围，默认：500
+    }).getLocation(address, function (status, result) {
+      console.log(result)
+      if (status === 'complete' && result.geocodes.length) {
+        resolve({ lng: result.geocodes[0].location.lng, lat: result.geocodes[0].location.lat })
+      } else {
+        // eslint-disable-next-line prefer-promise-reject-errors
+        reject('根据经纬度查询地址失败')
+      }
+    })
+  })
+}
+export { GetGDMap, GetLocation }

package/src/utils/request.js

@@ -4,7 +4,7 @@ import Vue from 'vue'
 import { ACCESS_TOKEN } from '@vue2-client/store/mutation-types'
 import notification from 'ant-design-vue/es/notification'
 
-const setting = require('../config/default/setting.config')
+const compatible = localStorage.getItem('compatible')
 
 // 跨域认证信息 header 名
 const xsrfHeaderName = 'Authorization'
@@ -156,7 +156,7 @@ function loadInterceptors () {
     // 让每个请求携带自定义 token 请根据实际情况自行修改
     if (token) {
       // 判断是否为V4环境
-      if (setting.compatible === 'V4') {
+      if (compatible === 'V4') {
         // V4 环境则添加 V4请求头
         config.headers['ACCESS_TOKEN'] = localStorage.getItem('ACCESS_TOKEN')
         config.headers['ACCESS_TOKEN_EXPIRES'] = localStorage.getItem('ACCESS_TOKEN_EXPIRES')
@@ -171,7 +171,16 @@ function loadInterceptors () {
   }, errorHandler)
   // 加载响应拦截器
   axios.interceptors.response.use((response) => {
-    return response.data
+    // 判断是否为V4环境
+    if (compatible === 'V4') {
+      if (response.data.data) {
+        return response.data.data
+      } else {
+        return response.data
+      }
+    } else {
+      return response.data
+    }
   }, errorHandler)
 }
 
@@ -181,12 +190,12 @@ const errorHandler = (error) => {
     const data = error.response.data
     // 从 localstorage 获取 token
     const token = localStorage.getItem(ACCESS_TOKEN)
-    if (error.response.status === 403) {
+    if (error.response.status === 403 || data.code === 403) {
       notification.error({
         message: '禁止访问',
         description: data
       })
-    } else if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
+    } else if ((error.response.status === 401 || data.code === 401) && !(data.result && data.result.isLogin)) {
       notification.error({
         message: '鉴权失败',
         description: data
@@ -198,7 +207,7 @@ const errorHandler = (error) => {
           }, 1500)
         })
       }
-    } else if (error.response.status === 500) {
+    } else if (error.response.status === 500 || data.code === 500) {
       notification.error({
         message: '系统异常',
         description: data