vue2-client 1.2.86 → 1.2.88

package/CHANGELOG.md

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

package/package.json

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

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

@@ -1,269 +1,269 @@
-<template>
-  <div>
-    <custom-columns-drawer
-      :columns-meta="jsonData"
-      :columns.sync="tableColumns"
-      :visible.sync="visible"/>
-    <a-row :gutter="48">
-      <a-col>
-        <span :style="{ float: 'left', overflow: 'hidden', marginBottom: '8px' }">
-          <slot name="expand"></slot>
-        </span>
-      </a-col>
-      <a-col>
-        <span :style="{ float: 'right', overflow: 'hidden', marginBottom: '8px' }">
-          <a-button-group>
-            <a-button @click="toggleIsFormShow">
-              <a-icon :style="iconStyle" type="vertical-align-top"/>
-            </a-button>
-            <a-button @click="refresh(true)">
-              <a-icon :style="iconStyle" type="reload" />
-            </a-button>
-            <a-button @click="showDrawer">
-              <a-icon :style="iconStyle" type="table" />
-            </a-button>
-            <a-button v-if="!buttonState || buttonState.export" @click="exports">
-              <a-icon :style="iconStyle" type="cloud-download"/>
-            </a-button>
-          </a-button-group>
-        </span>
-      </a-col>
-    </a-row>
-    <s-table
-      ref="table"
-      :alert="true"
-      :columns="tableColumns"
-      :data="loadData"
-      :rowKey="rowKey"
-      :rowSelection="rowSelection"
-      :scroll="{ x: scrollXWidth, y: scrollYWidth }"
-      showPagination="auto"
-      size="default"
-    >
-      <template
-        v-for="(item, index) in tableColumns"
-        :slot="item.dataIndex"
-        slot-scope="text, record">
-        <!-- 文本溢出省略(ellipsis) -->
-        <span v-if="item.slotType === 'ellipsis'" :key="index">
-          <ellipsis :length="item.slotValue" tooltip>{{ text === '' ? '--' : text }}</ellipsis>
-        </span>
-        <!-- 徽标(badge) -->
-        <span v-else-if="item.slotType === 'badge'" :key="index">
-          <x-badge :badge-key="item.slotKeyMap" :value="text" />
-        </span>
-        <!-- 日期(date) -->
-        <span v-else-if="item.slotType === 'date'" :key="index">
-          {{ format(text,'yyyy-MM-dd') }}
-        </span>
-        <!-- 日期时间(datetime) -->
-        <span v-else-if="item.slotType === 'dateTime'" :key="index">
-          {{ format(text,'yyyy-MM-dd hh:mm:ss') }}
-        </span>
-        <!-- 操作列(action) -->
-        <span v-else-if="item.slotType === 'action'" :key="index">
-          <a @click="action(record)">{{ item.slotValue }}</a>
-        </span>
-      </template>
-    </s-table>
-  </div>
-</template>
-<script>
-import { Ellipsis, STable } from '@vue2-client/components'
-import { formatDate } from '@vue2-client/utils/util'
-import { exportJson } from '@vue2-client/utils/excel/Export2Excel'
-
-export default {
-  name: 'XTable',
-  components: {
-    STable,
-    Ellipsis
-  },
-  data () {
-    return {
-      // 加载数据方法 必须为 Promise 对象
-      loadData: parameter => {
-        // 取到表格携带的表单参数
-        const requestParameters = Object.assign({}, parameter)
-        // 取到父组件传入的表单参数
-        const conditionParams = Object.assign(this.fixedQueryForm, this.form)
-        // 如果适用了综合筛选表单，则进行数据处理
-        if (conditionParams.rowIdName) {
-          const rowIdName = conditionParams.rowIdName
-          const rowIdValue = conditionParams.rowIdValue
-          delete conditionParams.rowIdName
-          delete conditionParams.rowIdValue
-          if (rowIdValue) {
-            conditionParams[rowIdName] = rowIdValue
-          }
-        }
-        // 如果传了燃气公司字段，则进行数据处理
-        if (conditionParams.orgName) {
-          requestParameters.orgName = conditionParams.orgName
-          delete conditionParams.orgName
-        }
-        requestParameters.conditionParams = conditionParams
-        requestParameters.queryParamsName = this.queryParamsName
-        requestParameters.queryParams = this.queryParams
-        // 加载数据
-        return this.loadTableData(requestParameters)
-      },
-      rowKey: undefined,
-      scrollXWidth: 1600,
-      scrollYWidth: 437,
-      selectedRowKeys: [],
-      selectedRows: [],
-      // 数据列
-      tableColumns: this.jsonData,
-      // 是否显示展示列抽屉
-      visible: false,
-      dataSource: [],
-      // 图标样式
-      iconStyle: {
-        position: 'relative',
-        top: '1px'
-      }
-    }
-  },
-  watch: {
-    form (rel) {
-      this.form = rel
-      this.refresh(true)
-    },
-    jsonData () {
-      this.initTableParams()
-    }
-  },
-  props: {
-    jsonData: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    queryParamsName: {
-      type: String,
-      default: () => {
-        return ''
-      }
-    },
-    // 查询参数对象, 用于没有对应查询配置文件名时
-    queryParams: {
-      type: Object,
-      default: null
-    },
-    form: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 固定查询表单
-    fixedQueryForm: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 按钮
-    buttonState: {
-      type: Object,
-      default: () => {
-        return undefined
-      }
-    }
-  },
-  computed: {
-    rowSelection () {
-      return {
-        selectedRowKeys: this.selectedRowKeys,
-        onChange: this.onSelectChange
-      }
-    }
-  },
-  mounted () {
-    this.initTableParams()
-  },
-  methods: {
-    exports () {
-      const tHeader = this.tableColumns.filter(res => res.slotType !== 'action').map(res => res.title)
-      const filterVal = this.tableColumns.map(res => res.dataIndex)
-      const list = this.dataSource
-      const data = this.formatJson(filterVal, list)
-      exportJson(tHeader, data, new Date())
-    },
-    formatJson (filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => v[j]))
-    },
-    badgeFilter (key, value) {
-      return this.$appdata.getParam(key, value)
-    },
-    initTableParams () {
-      let totalWidth = 0
-      this.rowKey = this.tableColumns[0].dataIndex
-      for (let i = 0; i < this.tableColumns.length; i++) {
-        const item = this.tableColumns[i]
-        if (item.dataIndex === 'action') {
-          item.fixed = 'right'
-          item.width = 70
-        }
-        if (item.width) {
-          totalWidth = totalWidth + item.width
-        } else {
-          totalWidth = totalWidth + 180
-        }
-      }
-      const width = document.documentElement.clientWidth
-      if (width >= 1600) {
-        this.scrollYWidth = 429
-      } else if (width >= 1200) {
-        this.scrollYWidth = 390
-      } else {
-        this.scrollYWidth = 343
-      }
-      // 横向滚动长度大于所有宽度，才能实现固定表头
-      this.scrollXWidth = totalWidth
-    },
-    loadTableData (requestParameters) {
-      let data = []
-      this.$emit('loadData', requestParameters, val => {
-        data = val
-      })
-      const _this = this
-       data.then(res => {
-         _this.dataSource = res.data
-      })
-      return data
-    },
-    action (record) {
-      this.$emit('action', record, record[this.jsonData[0].dataIndex])
-    },
-    onSelectChange (selectedRowKeys, selectedRows) {
-      this.selectedRowKeys = selectedRowKeys
-      this.selectedRows = selectedRows
-      this.$emit('selectRow', selectedRowKeys)
-    },
-    clearRowKeys () {
-      this.$refs.table.clearSelected()
-    },
-    /**
-     * 表格重新加载方法
-     * 如果参数为 true, 则强制刷新到第一页
-     */
-    refresh (bool) {
-      this.$refs.table.refresh(bool)
-    },
-    format (date, format) {
-      return formatDate(date, format)
-    },
-    showDrawer () {
-      this.visible = true
-    },
-    toggleIsFormShow () {
-      this.$emit('toggleIsFormShow')
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-</style>
+<template>
+  <div>
+    <custom-columns-drawer
+      :columns-meta="jsonData"
+      :columns.sync="tableColumns"
+      :visible.sync="visible"/>
+    <a-row :gutter="48">
+      <a-col>
+        <span :style="{ float: 'left', overflow: 'hidden', marginBottom: '8px' }">
+          <slot name="expand"></slot>
+        </span>
+      </a-col>
+      <a-col>
+        <span :style="{ float: 'right', overflow: 'hidden', marginBottom: '8px' }">
+          <a-button-group>
+            <a-button @click="toggleIsFormShow">
+              <a-icon :style="iconStyle" type="vertical-align-top"/>
+            </a-button>
+            <a-button @click="refresh(true)">
+              <a-icon :style="iconStyle" type="reload" />
+            </a-button>
+            <a-button @click="showDrawer">
+              <a-icon :style="iconStyle" type="table" />
+            </a-button>
+            <a-button v-if="!buttonState || buttonState.export" @click="exports">
+              <a-icon :style="iconStyle" type="cloud-download"/>
+            </a-button>
+          </a-button-group>
+        </span>
+      </a-col>
+    </a-row>
+    <s-table
+      ref="table"
+      :alert="true"
+      :columns="tableColumns"
+      :data="loadData"
+      :rowKey="rowKey"
+      :rowSelection="rowSelection"
+      :scroll="{ x: scrollXWidth, y: scrollYWidth }"
+      showPagination="auto"
+      size="default"
+    >
+      <template
+        v-for="(item, index) in tableColumns"
+        :slot="item.dataIndex"
+        slot-scope="text, record">
+        <!-- 文本溢出省略(ellipsis) -->
+        <span v-if="item.slotType === 'ellipsis'" :key="index">
+          <ellipsis :length="item.slotValue" tooltip>{{ text === '' ? '--' : text }}</ellipsis>
+        </span>
+        <!-- 徽标(badge) -->
+        <span v-else-if="item.slotType === 'badge'" :key="index">
+          <x-badge :badge-key="item.slotKeyMap" :value="text" />
+        </span>
+        <!-- 日期(date) -->
+        <span v-else-if="item.slotType === 'date'" :key="index">
+          {{ format(text,'yyyy-MM-dd') }}
+        </span>
+        <!-- 日期时间(datetime) -->
+        <span v-else-if="item.slotType === 'dateTime'" :key="index">
+          {{ format(text,'yyyy-MM-dd hh:mm:ss') }}
+        </span>
+        <!-- 操作列(action) -->
+        <span v-else-if="item.slotType === 'action'" :key="index">
+          <a @click="action(record)">{{ item.slotValue }}</a>
+        </span>
+      </template>
+    </s-table>
+  </div>
+</template>
+<script>
+import { Ellipsis, STable } from '@vue2-client/components'
+import { formatDate } from '@vue2-client/utils/util'
+import { exportJson } from '@vue2-client/utils/excel/Export2Excel'
+
+export default {
+  name: 'XTable',
+  components: {
+    STable,
+    Ellipsis
+  },
+  data () {
+    return {
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        // 取到表格携带的表单参数
+        const requestParameters = Object.assign({}, parameter)
+        // 取到父组件传入的表单参数
+        const conditionParams = Object.assign(this.fixedQueryForm, this.form)
+        // 如果适用了综合筛选表单，则进行数据处理
+        if (conditionParams.rowIdName) {
+          const rowIdName = conditionParams.rowIdName
+          const rowIdValue = conditionParams.rowIdValue
+          delete conditionParams.rowIdName
+          delete conditionParams.rowIdValue
+          if (rowIdValue) {
+            conditionParams[rowIdName] = rowIdValue
+          }
+        }
+        // 如果传了燃气公司字段，则进行数据处理
+        if (conditionParams.orgName) {
+          requestParameters.orgName = conditionParams.orgName
+          delete conditionParams.orgName
+        }
+        requestParameters.conditionParams = conditionParams
+        requestParameters.queryParamsName = this.queryParamsName
+        requestParameters.queryParams = this.queryParams
+        // 加载数据
+        return this.loadTableData(requestParameters)
+      },
+      rowKey: undefined,
+      scrollXWidth: 1600,
+      scrollYWidth: 437,
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 数据列
+      tableColumns: this.jsonData,
+      // 是否显示展示列抽屉
+      visible: false,
+      dataSource: [],
+      // 图标样式
+      iconStyle: {
+        position: 'relative',
+        top: '1px'
+      }
+    }
+  },
+  watch: {
+    form (rel) {
+      this.form = rel
+      this.refresh(true)
+    },
+    jsonData () {
+      this.initTableParams()
+    }
+  },
+  props: {
+    jsonData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    queryParamsName: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    },
+    // 查询参数对象, 用于没有对应查询配置文件名时
+    queryParams: {
+      type: Object,
+      default: null
+    },
+    form: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 固定查询表单
+    fixedQueryForm: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 按钮
+    buttonState: {
+      type: Object,
+      default: () => {
+        return undefined
+      }
+    }
+  },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectChange
+      }
+    }
+  },
+  mounted () {
+    this.initTableParams()
+  },
+  methods: {
+    exports () {
+      const tHeader = this.tableColumns.filter(res => res.slotType !== 'action').map(res => res.title)
+      const filterVal = this.tableColumns.map(res => res.dataIndex)
+      const list = this.dataSource
+      const data = this.formatJson(filterVal, list)
+      exportJson(tHeader, data, new Date())
+    },
+    formatJson (filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    badgeFilter (key, value) {
+      return this.$appdata.getParam(key, value)
+    },
+    initTableParams () {
+      let totalWidth = 0
+      this.rowKey = this.tableColumns[0].dataIndex
+      for (let i = 0; i < this.tableColumns.length; i++) {
+        const item = this.tableColumns[i]
+        if (item.dataIndex === 'action') {
+          item.fixed = 'right'
+          item.width = 70
+        }
+        if (item.width) {
+          totalWidth = totalWidth + item.width
+        } else {
+          totalWidth = totalWidth + 180
+        }
+      }
+      const width = document.documentElement.clientWidth
+      if (width >= 1600) {
+        this.scrollYWidth = 429
+      } else if (width >= 1200) {
+        this.scrollYWidth = 390
+      } else {
+        this.scrollYWidth = 343
+      }
+      // 横向滚动长度大于所有宽度，才能实现固定表头
+      this.scrollXWidth = totalWidth
+    },
+    loadTableData (requestParameters) {
+      let data = []
+      this.$emit('loadData', requestParameters, val => {
+        data = val
+      })
+      const _this = this
+      data.then(res => {
+        _this.dataSource = res.data
+      })
+      return data
+    },
+    action (record) {
+      this.$emit('action', record, record[this.jsonData[0].dataIndex])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.$emit('selectRow', selectedRowKeys)
+    },
+    clearRowKeys () {
+      this.$refs.table.clearSelected()
+    },
+    /**
+     * 表格重新加载方法
+     * 如果参数为 true, 则强制刷新到第一页
+     */
+    refresh (bool) {
+      this.$refs.table.refresh(bool)
+    },
+    format (date, format) {
+      return formatDate(date, format)
+    },
+    showDrawer () {
+      this.visible = true
+    },
+    toggleIsFormShow () {
+      this.$emit('toggleIsFormShow')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>

package/src/pages/login/Login.vue

@@ -93,7 +93,7 @@ export default {
             }
             case 'OA' : {
               loginStart(name, password).then(this.afterLoginOA).finally(() => { this.logging = false })
-             break
+              break
             }
             case 'V4' : {
               V4Login(name, password).then(this.afterLoginV4)
@@ -116,23 +116,27 @@ export default {
       const password = this.form.getFieldValue('password')
       this.logging = false
       const loginRes = res
-      const V4Token = { token: res.access_token, expire: res.expires_in }
-      this.setV4AccessToken(V4Token)
       // 如果这是用户首次打开本系统，localStorage无法初始化，改用code判断
       let pass = false
+      let V4Token = {}
+      // 判断是否是第一次使用本系统
       if (res.code) {
         if (res.code === 200) {
           pass = true
+          // 如果返回值有code，证明是第一次使用系统，localStorage判断compatible失效
+          // token需要从.data中获取
+          V4Token = { token: res.data.access_token, expire: res.data.expires_in }
         }
+      } else {
+        V4Token = { token: res.access_token, expire: res.expires_in }
       }
+      this.setV4AccessToken(V4Token)
       // 向本地缓存中临时存储compatible
-      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 }))
         // 获取路由配置
-        console.log('开始请求智慧燃气')
         getRoutesConfig(data).then(result => {
           this.$login.login(result).then(() => {
             this.afterGeneral(result)
@@ -212,59 +216,59 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .common-layout{
-    .top {
-      text-align: center;
-      .header {
+.common-layout{
+  .top {
+    text-align: center;
+    .header {
+      height: 44px;
+      line-height: 44px;
+      a {
+        text-decoration: none;
+      }
+      .logo {
         height: 44px;
-        line-height: 44px;
-        a {
-          text-decoration: none;
-        }
-        .logo {
-          height: 44px;
-          vertical-align: top;
-          margin-right: 16px;
-        }
-        .title {
-          font-size: 33px;
-          color: @title-color;
-          font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
-          font-weight: 600;
-          position: relative;
-          top: 2px;
-        }
+        vertical-align: top;
+        margin-right: 16px;
       }
-      .desc {
-        font-size: 14px;
-        color: @text-color-second;
-        margin-top: 12px;
-        margin-bottom: 40px;
+      .title {
+        font-size: 33px;
+        color: @title-color;
+        font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        font-weight: 600;
+        position: relative;
+        top: 2px;
       }
     }
-    .login{
-      width: 368px;
-      margin: 0 auto;
-      @media screen and (max-width: 576px) {
-        width: 95%;
-      }
-      @media screen and (max-width: 320px) {
-        .captcha-button{
-          font-size: 14px;
-        }
+    .desc {
+      font-size: 14px;
+      color: @text-color-second;
+      margin-top: 12px;
+      margin-bottom: 40px;
+    }
+  }
+  .login{
+    width: 368px;
+    margin: 0 auto;
+    @media screen and (max-width: 576px) {
+      width: 95%;
+    }
+    @media screen and (max-width: 320px) {
+      .captcha-button{
+        font-size: 14px;
       }
-      .icon {
-        font-size: 24px;
-        color: @text-color-second;
-        margin-left: 16px;
-        vertical-align: middle;
-        cursor: pointer;
-        transition: color 0.3s;
+    }
+    .icon {
+      font-size: 24px;
+      color: @text-color-second;
+      margin-left: 16px;
+      vertical-align: middle;
+      cursor: pointer;
+      transition: color 0.3s;
 
-        &:hover {
-          color: @primary-color;
-        }
+      &:hover {
+        color: @primary-color;
       }
     }
   }
+}
 </style>

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 compatible = localStorage.getItem('compatible')
+let compatible
 
 // 跨域认证信息 header 名
 const xsrfHeaderName = 'Authorization'
@@ -151,10 +151,14 @@ function checkAuthorization (authType = AUTH_TYPE.BEARER) {
 function loadInterceptors () {
   // 加载请求拦截器
   axios.interceptors.request.use(config => {
-    const token = localStorage.getItem(ACCESS_TOKEN)
+    const token = localStorage.getItem('ACCESS_TOKEN')
     // 如果 token 存在
     // 让每个请求携带自定义 token 请根据实际情况自行修改
     if (token) {
+      // 如果是首次使用系统LocalStorage需要初始化，在登陆之后重新获取一次compatible
+      if (compatible === null) {
+        compatible = localStorage.getItem('compatible')
+      }
       // 判断是否为V4环境
       if (compatible === 'V4') {
         // V4 环境则添加 V4请求头
@@ -171,7 +175,11 @@ function loadInterceptors () {
   }, errorHandler)
   // 加载响应拦截器
   axios.interceptors.response.use((response) => {
-    // 判断是否为V4环境
+    // 判断是否为V4环境，不为compatible赋初始值
+    // 其有可能是undefined未定义，或第一次使用本系统LocalStorage在初始化，获得的值为null
+    if (compatible === null || compatible === undefined) {
+      compatible = localStorage.getItem('compatible')
+    }
     if (compatible === 'V4') {
       if (response.data.data) {
         return response.data.data