vue2-client 1.2.0 → 1.2.1

package/src/layouts/header/HeaderNotice.vue

@@ -1,97 +1,97 @@
-<template>
-  <a-dropdown :trigger="['click']" v-model="show">
-    <div slot="overlay">
-      <a-spin :spinning="loading">
-        <a-tabs class="dropdown-tabs" :tabBarStyle="{textAlign: 'center'}" :style="{width: '297px'}">
-          <a-tab-pane tab="通知" key="1">
-            <a-list>
-              <a-list-item :key="item.id" class="tab-pane" v-for=" item in exception">
-                <a-list-item-meta :title="'设备号'+ item.e_f_device_id" :description="item.e_f_error_msg" @click="read(item)">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-            </a-list>
-          </a-tab-pane>
-          <a-tab-pane tab="消息" key="2">
-            <a-list class="tab-pane"></a-list>
-          </a-tab-pane>
-          <a-tab-pane tab="待办" key="3">
-            <a-list class="tab-pane"></a-list>
-          </a-tab-pane>
-        </a-tabs>
-      </a-spin>
-    </div>
-    <span @click="fetchNotice" class="header-notice">
-      <a-badge class="notice-badge" :count=" exception.length">
-        <a-icon :class="['header-notice-icon']" type="bell" />
-      </a-badge>
-    </span>
-  </a-dropdown>
-</template>
-
-<script>
-import { post } from '@vue2-client/services/api/restTools'
-export default {
-  name: 'HeaderNotice',
-  data () {
-    return {
-      loading: false,
-      show: false,
-      exception: []
-    }
-  },
-  computed: {
-  },
-  created () {
-    this.refresh()
-  },
-  methods: {
-    read (item) {
-      post('/webmeterapi/saveSingleTable', { data: { tablename: 't_iot_device_exception', param: { id: item.e_id, f_is_read: 1 } } }).then(res => {
-        this.refresh()
-      })
-    },
-    refresh () {
-      post('/webmeterapi/commonQuery', { queryParamsName: 'deviceExceptionQueryParams', conditionParams: { e_f_is_read: 0 }, pageNo: 1, pageSize: 999999 }).then(res => {
-        this.exception = res.data
-      })
-    },
-    fetchNotice () {
-      if (this.loading) {
-        this.loading = false
-        return
-      }
-      this.loadding = true
-      setTimeout(() => {
-        this.loadding = false
-      }, 1000)
-    }
-  }
-}
-</script>
-
-<style lang="less">
-  .header-notice{
-    display: inline-block;
-    transition: all 0.3s;
-    span {
-      vertical-align: initial;
-    }
-    .notice-badge{
-      color: inherit;
-      .header-notice-icon{
-        font-size: 16px;
-        padding: 4px;
-      }
-    }
-  }
-  .dropdown-tabs{
-    background-color: @base-bg-color;
-    box-shadow: 0 2px 8px @shadow-color;
-    border-radius: 4px;
-    .tab-pane{
-      padding: 0 24px 12px;
-      min-height: 250px;
-    }
-  }
-</style>
+<template>
+  <a-dropdown :trigger="['click']" v-model="show">
+    <div slot="overlay">
+      <a-spin :spinning="loading">
+        <a-tabs class="dropdown-tabs" :tabBarStyle="{textAlign: 'center'}" :style="{width: '297px'}">
+          <a-tab-pane tab="通知" key="1">
+            <a-list>
+              <a-list-item :key="item.id" class="tab-pane" v-for=" item in exception">
+                <a-list-item-meta :title="'设备号'+ item.e_f_device_id" :description="item.e_f_error_msg" @click="read(item)">
+                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </a-tab-pane>
+          <a-tab-pane tab="消息" key="2">
+            <a-list class="tab-pane"></a-list>
+          </a-tab-pane>
+          <a-tab-pane tab="待办" key="3">
+            <a-list class="tab-pane"></a-list>
+          </a-tab-pane>
+        </a-tabs>
+      </a-spin>
+    </div>
+    <span @click="fetchNotice" class="header-notice">
+      <a-badge class="notice-badge" :count=" exception.length">
+        <a-icon :class="['header-notice-icon']" type="bell" />
+      </a-badge>
+    </span>
+  </a-dropdown>
+</template>
+
+<script>
+import { post } from '@vue2-client/services/api/restTools'
+export default {
+  name: 'HeaderNotice',
+  data () {
+    return {
+      loading: false,
+      show: false,
+      exception: []
+    }
+  },
+  computed: {
+  },
+  created () {
+    this.refresh()
+  },
+  methods: {
+    read (item) {
+      post('/webmeterapi/saveSingleTable', { data: { tablename: 't_iot_device_exception', param: { id: item.e_id, f_is_read: 1 } } }).then(res => {
+        this.refresh()
+      })
+    },
+    refresh () {
+      post('/webmeterapi/commonQuery', { queryParamsName: 'deviceExceptionQueryParams', conditionParams: { e_f_is_read: 0 }, pageNo: 1, pageSize: 999999 }).then(res => {
+        this.exception = res.data
+      })
+    },
+    fetchNotice () {
+      if (this.loading) {
+        this.loading = false
+        return
+      }
+      this.loadding = true
+      setTimeout(() => {
+        this.loadding = false
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .header-notice{
+    display: inline-block;
+    transition: all 0.3s;
+    span {
+      vertical-align: initial;
+    }
+    .notice-badge{
+      color: inherit;
+      .header-notice-icon{
+        font-size: 16px;
+        padding: 4px;
+      }
+    }
+  }
+  .dropdown-tabs{
+    background-color: @base-bg-color;
+    box-shadow: 0 2px 8px @shadow-color;
+    border-radius: 4px;
+    .tab-pane{
+      padding: 0 24px 12px;
+      min-height: 250px;
+    }
+  }
+</style>

package/src/layouts/tabs/TabsHead.vue

@@ -1,190 +1,190 @@
-<template>
-  <div :class="['tabs-head', layout, pageWidth]">
-    <a-tabs
-      type="editable-card"
-      :class="['tabs-container', layout, pageWidth, {'affixed' : affixed, 'fixed-header' : fixedHeader, 'collapsed' : adminLayout.collapsed}]"
-      :active-key="active"
-      :hide-add="true"
-    >
-      <a-tooltip placement="left" :title="lockTitle" slot="tabBarExtraContent">
-        <a-icon
-          theme="filled"
-          @click="onLockClick"
-          class="header-lock"
-          :type="fixedTabs ? 'lock' : 'unlock'"
-        />
-      </a-tooltip>
-      <a-tab-pane v-for="page in pageList" :key="page.path">
-        <div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.path, e)">
-          <a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.path !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
-          <div class="title" @click="onTabClick(page.path)" >{{ pageName(page) }}</div>
-          <a-icon v-if="!page.unclose" @click="onClose(page.path)" class="icon-close" type="close"/>
-        </div>
-      </a-tab-pane>
-    </a-tabs>
-    <div v-if="affixed" class="virtual-tabs"></div>
-  </div>
-</template>
-
-<script>
-  import { mapState, mapMutations } from 'vuex'
-  import { getI18nKey } from '@vue2-client/utils/routerUtil'
-
-  export default {
-    name: 'TabsHead',
-    i18n: {
-      messages: {
-        CN: {
-          lock: '点击锁定页签头',
-          unlock: '点击解除锁定'
-        },
-        HK: {
-          lock: '點擊鎖定頁簽頭',
-          unlock: '點擊解除鎖定'
-        },
-        US: {
-          lock: 'click to lock the tabs head',
-          unlock: 'click to unlock'
-        }
-      }
-    },
-    props: {
-      // eslint-disable-next-line vue/require-default-prop
-      pageList: Array,
-      // eslint-disable-next-line vue/require-default-prop
-      active: String,
-      fixed: Boolean
-    },
-    data () {
-      return {
-        affixed: false
-      }
-    },
-    inject: ['adminLayout'],
-    created () {
-      this.affixed = this.fixedTabs
-    },
-    computed: {
-      ...mapState('setting', ['layout', 'pageWidth', 'fixedHeader', 'fixedTabs', 'customTitles']),
-      lockTitle () {
-        return this.$t(this.fixedTabs ? 'unlock' : 'lock')
-      }
-    },
-    methods: {
-      ...mapMutations('setting', ['setFixedTabs']),
-      onLockClick () {
-        this.setFixedTabs(!this.fixedTabs)
-        if (this.fixedTabs) {
-          setTimeout(() => {
-            this.affixed = true
-          }, 200)
-        } else {
-          this.affixed = false
-        }
-      },
-      onTabClick (key) {
-        if (this.active !== key) {
-          this.$emit('change', key)
-        }
-      },
-      onClose (key) {
-        this.$emit('close', key)
-      },
-      onRefresh (page) {
-        this.$emit('refresh', page.path, page)
-      },
-      onContextmenu (pageKey, e) {
-        this.$emit('contextmenu', pageKey, e)
-      },
-      pageName (page) {
-        const pagePath = page.fullPath.split('?')[0]
-        const custom = this.customTitles.find(item => item.path === pagePath)
-        return (custom && custom.title) || page.title || this.$t(getI18nKey(page.keyPath))
-      }
-    }
-  }
-</script>
-
-<style scoped lang="less">
-  .tab{
-    margin: 0 -16px;
-    padding: 0 16px;
-    font-size: 14px;
-    user-select: none;
-    transition: all 0.2s;
-    .title{
-      display: inline-block;
-      height: 100%;
-    }
-    .icon-close{
-      font-size: 12px;
-      margin-left: 6px;
-      margin-right: -4px !important;
-      color: @text-color-second;
-      &:hover{
-        color: @text-color;
-      }
-    }
-    .icon-sync{
-      margin-left: -4px;
-      color: @primary-4;
-      transition: all 0.3s ease-in-out;
-      &:hover{
-        color: @primary-color;
-      }
-      font-size: 14px;
-      &.hide{
-        font-size: 0;
-      }
-    }
-  }
-  .tabs-head{
-    margin: 0 auto;
-    &.head.fixed{
-      width: 1400px;
-    }
-  }
-  .tabs-container{
-    margin: -16px auto 8px;
-    transition: top,left 0.2s;
-    .header-lock{
-      font-size: 18px;
-      cursor: pointer;
-      color: @primary-3;
-      &:hover{
-        color: @primary-color;
-      }
-    }
-    &.affixed{
-      margin: 0 auto;
-      top: 0px;
-      padding: 8px 24px 0;
-      position: fixed;
-      height: 48px;
-      z-index: 1;
-      background-color: @layout-body-background;
-      &.side,&.mix{
-        right: 0;
-        left: 256px;
-        &.collapsed{
-          left: 80px;
-        }
-      }
-      &.head{
-        width: inherit;
-        padding: 8px 0 0;
-        &.fluid{
-          left: 0;
-          right: 0;
-          padding: 8px 24px 0;
-        }
-      }
-      &.fixed-header{
-        top: 64px;
-      }
-    }
-  }
-  .virtual-tabs{
-    height: 48px;
-  }
-</style>
+<template>
+  <div :class="['tabs-head', layout, pageWidth]">
+    <a-tabs
+      type="editable-card"
+      :class="['tabs-container', layout, pageWidth, {'affixed' : affixed, 'fixed-header' : fixedHeader, 'collapsed' : adminLayout.collapsed}]"
+      :active-key="active"
+      :hide-add="true"
+    >
+      <a-tooltip placement="left" :title="lockTitle" slot="tabBarExtraContent">
+        <a-icon
+          theme="filled"
+          @click="onLockClick"
+          class="header-lock"
+          :type="fixedTabs ? 'lock' : 'unlock'"
+        />
+      </a-tooltip>
+      <a-tab-pane v-for="page in pageList" :key="page.path">
+        <div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.path, e)">
+          <a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.path !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
+          <div class="title" @click="onTabClick(page.path)" >{{ pageName(page) }}</div>
+          <a-icon v-if="!page.unclose" @click="onClose(page.path)" class="icon-close" type="close"/>
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+    <div v-if="affixed" class="virtual-tabs"></div>
+  </div>
+</template>
+
+<script>
+  import { mapState, mapMutations } from 'vuex'
+  import { getI18nKey } from '@vue2-client/utils/routerUtil'
+
+  export default {
+    name: 'TabsHead',
+    i18n: {
+      messages: {
+        CN: {
+          lock: '点击锁定页签头',
+          unlock: '点击解除锁定'
+        },
+        HK: {
+          lock: '點擊鎖定頁簽頭',
+          unlock: '點擊解除鎖定'
+        },
+        US: {
+          lock: 'click to lock the tabs head',
+          unlock: 'click to unlock'
+        }
+      }
+    },
+    props: {
+      // eslint-disable-next-line vue/require-default-prop
+      pageList: Array,
+      // eslint-disable-next-line vue/require-default-prop
+      active: String,
+      fixed: Boolean
+    },
+    data () {
+      return {
+        affixed: false
+      }
+    },
+    inject: ['adminLayout'],
+    created () {
+      this.affixed = this.fixedTabs
+    },
+    computed: {
+      ...mapState('setting', ['layout', 'pageWidth', 'fixedHeader', 'fixedTabs', 'customTitles']),
+      lockTitle () {
+        return this.$t(this.fixedTabs ? 'unlock' : 'lock')
+      }
+    },
+    methods: {
+      ...mapMutations('setting', ['setFixedTabs']),
+      onLockClick () {
+        this.setFixedTabs(!this.fixedTabs)
+        if (this.fixedTabs) {
+          setTimeout(() => {
+            this.affixed = true
+          }, 200)
+        } else {
+          this.affixed = false
+        }
+      },
+      onTabClick (key) {
+        if (this.active !== key) {
+          this.$emit('change', key)
+        }
+      },
+      onClose (key) {
+        this.$emit('close', key)
+      },
+      onRefresh (page) {
+        this.$emit('refresh', page.path, page)
+      },
+      onContextmenu (pageKey, e) {
+        this.$emit('contextmenu', pageKey, e)
+      },
+      pageName (page) {
+        const pagePath = page.fullPath.split('?')[0]
+        const custom = this.customTitles.find(item => item.path === pagePath)
+        return (custom && custom.title) || page.title || this.$t(getI18nKey(page.keyPath))
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .tab{
+    margin: 0 -16px;
+    padding: 0 16px;
+    font-size: 14px;
+    user-select: none;
+    transition: all 0.2s;
+    .title{
+      display: inline-block;
+      height: 100%;
+    }
+    .icon-close{
+      font-size: 12px;
+      margin-left: 6px;
+      margin-right: -4px !important;
+      color: @text-color-second;
+      &:hover{
+        color: @text-color;
+      }
+    }
+    .icon-sync{
+      margin-left: -4px;
+      color: @primary-4;
+      transition: all 0.3s ease-in-out;
+      &:hover{
+        color: @primary-color;
+      }
+      font-size: 14px;
+      &.hide{
+        font-size: 0;
+      }
+    }
+  }
+  .tabs-head{
+    margin: 0 auto;
+    &.head.fixed{
+      width: 1400px;
+    }
+  }
+  .tabs-container{
+    margin: -16px auto 8px;
+    transition: top,left 0.2s;
+    .header-lock{
+      font-size: 18px;
+      cursor: pointer;
+      color: @primary-3;
+      &:hover{
+        color: @primary-color;
+      }
+    }
+    &.affixed{
+      margin: 0 auto;
+      top: 0px;
+      padding: 8px 24px 0;
+      position: fixed;
+      height: 48px;
+      z-index: 1;
+      background-color: @layout-body-background;
+      &.side,&.mix{
+        right: 0;
+        left: 256px;
+        &.collapsed{
+          left: 80px;
+        }
+      }
+      &.head{
+        width: inherit;
+        padding: 8px 0 0;
+        &.fluid{
+          left: 0;
+          right: 0;
+          padding: 8px 24px 0;
+        }
+      }
+      &.fixed-header{
+        top: 64px;
+      }
+    }
+  }
+  .virtual-tabs{
+    height: 48px;
+  }
+</style>