vue2-client 1.3.1 → 1.3.4

package/src/layouts/header/AdminHeader.vue

@@ -1,109 +1,104 @@
-<template>
-  <a-layout-header :class="[headerTheme, 'admin-header']">
-    <div :class="['admin-header-wide', layout, pageWidth]">
-      <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
-        <img width="32" src="@vue2-client/assets/img/logo.png" />
-        <h1 v-if="!isMobile">{{ systemName }}</h1>
-      </router-link>
-      <a-divider v-if="isMobile" type="vertical" />
-      <a-icon v-if="layout !== 'head'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
-      <div v-if="layout !== 'side' && !isMobile" class="admin-header-menu" :style="`width: ${menuWidth};`">
-        <i-menu class="head-menu" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
-      </div>
-      <div :class="['admin-header-right', headerTheme]">
-        <header-search class="header-item" @active="val => searchActive = val" />
-        <a-tooltip class="header-item" title="清理查询缓存" placement="bottom" >
-          <a @click="handleToClearCache">
-            <a-icon type="reload" />
-          </a>
-        </a-tooltip>
-        <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
-          <a href="https://iczer.gitee.io/vue-antd-admin-docs/" target="_blank">
-            <a-icon type="question-circle-o" />
-          </a>
-        </a-tooltip>
-        <header-notice class="header-item"/>
-        <header-avatar class="header-item"/>
-        <a-dropdown class="lang header-item">
-          <div>
-            <a-icon type="global"/> {{ langAlias }}
-          </div>
-          <a-menu @click="val => setLang(val.key)" :selected-keys="[lang]" slot="overlay">
-            <a-menu-item v-for=" lang in langList" :key="lang.key">{{ lang.key.toLowerCase() + ' ' + lang.name }}</a-menu-item>
-          </a-menu>
-        </a-dropdown>
-      </div>
-    </div>
-  </a-layout-header>
-</template>
-
-<script>
-import HeaderSearch from './HeaderSearch'
-import HeaderNotice from './HeaderNotice'
-import HeaderAvatar from './HeaderAvatar'
-import IMenu from '@vue2-client/components/menu/menu'
-import { mapState, mapMutations } from 'vuex'
-import { Modal } from 'ant-design-vue'
-import { indexedDB } from '@vue2-client/utils/indexedDB'
-
-export default {
-  name: 'AdminHeader',
-  components: { IMenu, HeaderAvatar, HeaderNotice, HeaderSearch },
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['collapsed', 'menuData'],
-  data () {
-    return {
-      langList: [
-        { key: 'CN', name: '简体中文', alias: '简体' },
-        { key: 'HK', name: '繁體中文', alias: '繁體' },
-        { key: 'US', name: 'English', alias: 'English' }
-      ],
-      searchActive: false
-    }
-  },
-  computed: {
-    ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang', 'pageWidth']),
-    headerTheme () {
-      if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
-        return 'light'
-      }
-      return this.theme.mode
-    },
-    langAlias () {
-      const lang = this.langList.find(item => item.key == this.lang)
-      return lang.alias
-    },
-    menuWidth () {
-      const { layout, searchActive } = this
-      const headWidth = layout === 'head' ? '100% - 188px' : '100%'
-      const extraWidth = searchActive ? '600px' : '400px'
-      return `calc(${headWidth} - ${extraWidth})`
-    }
-  },
-  methods: {
-    toggleCollapse () {
-      this.$emit('toggleCollapse')
-    },
-    onSelect (obj) {
-      this.$emit('menuSelect', obj)
-    },
-    handleToClearCache () {
-      Modal.confirm({
-        title: '信息',
-        content: '您确定要清除查询配置缓存吗？',
-        onOk: () => {
-          indexedDB.clear(() => {
-            location.reload()
-          })
-        },
-        onCancel () {}
-      })
-    },
-    ...mapMutations('setting', ['setLang'])
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import "index";
-</style>
+<template>
+  <a-layout-header :class="[headerTheme, 'admin-header']">
+    <div :class="['admin-header-wide', layout, pageWidth]">
+      <router-link v-if="isMobile || layout === 'head'" :class="['logo', isMobile ? null : 'pc', headerTheme]" to="/">
+        <img src="@vue2-client/assets/img/logo.png" width="32" />
+        <h1 v-if="!isMobile">{{ systemName }}</h1>
+      </router-link>
+      <a-divider v-if="isMobile" type="vertical" />
+      <a-icon v-if="layout !== 'head'" :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggleCollapse"/>
+      <div v-if="layout !== 'side' && !isMobile" :style="`width: ${menuWidth};`" class="admin-header-menu">
+        <i-menu :options="menuData" :theme="headerTheme" class="head-menu" mode="horizontal" @select="onSelect"/>
+      </div>
+      <div :class="['admin-header-right', headerTheme]">
+        <header-search class="header-item" @active="val => searchActive = val" />
+        <a-tooltip class="header-item" placement="bottom" title="清理查询缓存" >
+          <a @click="handleToClearCache">
+            <a-icon type="reload" />
+          </a>
+        </a-tooltip>
+        <header-notice class="header-item"/>
+        <header-avatar class="header-item"/>
+        <a-dropdown class="lang header-item">
+          <div>
+            <a-icon type="global"/> {{ langAlias }}
+          </div>
+          <a-menu slot="overlay" :selected-keys="[lang]" @click="val => setLang(val.key)">
+            <a-menu-item v-for=" lang in langList" :key="lang.key">{{ lang.key.toLowerCase() + ' ' + lang.name }}</a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </div>
+    </div>
+  </a-layout-header>
+</template>
+
+<script>
+import HeaderSearch from './HeaderSearch'
+import HeaderNotice from './HeaderNotice'
+import HeaderAvatar from './HeaderAvatar'
+import IMenu from '@vue2-client/components/menu/menu'
+import { mapState, mapMutations } from 'vuex'
+import { Modal } from 'ant-design-vue'
+import { indexedDB } from '@vue2-client/utils/indexedDB'
+
+export default {
+  name: 'AdminHeader',
+  components: { IMenu, HeaderAvatar, HeaderNotice, HeaderSearch },
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['collapsed', 'menuData'],
+  data () {
+    return {
+      langList: [
+        { key: 'CN', name: '简体中文', alias: '简体' },
+        { key: 'HK', name: '繁體中文', alias: '繁體' },
+        { key: 'US', name: 'English', alias: 'English' }
+      ],
+      searchActive: false
+    }
+  },
+  computed: {
+    ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang', 'pageWidth']),
+    headerTheme () {
+      if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
+        return 'light'
+      }
+      return this.theme.mode
+    },
+    langAlias () {
+      const lang = this.langList.find(item => item.key == this.lang)
+      return lang.alias
+    },
+    menuWidth () {
+      const { layout, searchActive } = this
+      const headWidth = layout === 'head' ? '100% - 188px' : '100%'
+      const extraWidth = searchActive ? '600px' : '400px'
+      return `calc(${headWidth} - ${extraWidth})`
+    }
+  },
+  methods: {
+    toggleCollapse () {
+      this.$emit('toggleCollapse')
+    },
+    onSelect (obj) {
+      this.$emit('menuSelect', obj)
+    },
+    handleToClearCache () {
+      Modal.confirm({
+        title: '信息',
+        content: '您确定要清除查询配置缓存吗？',
+        onOk: () => {
+          indexedDB.clear(() => {
+            location.reload()
+          })
+        },
+        onCancel () {}
+      })
+    },
+    ...mapMutations('setting', ['setLang'])
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "index";
+</style>

package/src/layouts/header/HeaderNotice.vue

@@ -1,199 +1,167 @@
-<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'}"
-          v-model="activeKey">
-          <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 item-layout="horizontal" :data-source="backlog" :bordered="true">
-              <a-list-item slot="renderItem" slot-scope="item, index">
-                <a slot="actions" v-if="item.type==='制度待确认'" @click="confirm_institution(item)">查看</a>
-                <a-list-item-meta :title="item.title" :description="item.description"/>
-              </a-list-item>
-            </a-list>
-          </a-tab-pane>
-          <a-drawer
-            placement="right"
-            :width="screenWidth * 0.5"
-            :visible="institutionDetailVisible"
-            :closable="false"
-            @close="onClose"
-          >
-            <institution-detail
-              :institutionId="institution"
-              :affirmInstitution="affirmInstitution"
-              @get_to_be_confirmed="getToBeConfirmed"/>
-          </a-drawer>
-        </a-tabs>
-      </a-spin>
-    </div>
-    <span @click="fetchNotice" class="header-notice">
-      <a-badge class="notice-badge" :count="exception.length + backlog.length">
-        <a-icon :class="['header-notice-icon']" type="bell"/>
-      </a-badge>
-    </span>
-  </a-dropdown>
-</template>
-
-<script>
-import { post } from '@vue2-client/services/api'
-import InstitutionDetail from './InstitutionDetail'
-
-export default {
-  name: 'HeaderNotice',
-  data () {
-    return {
-      loading: false,
-      screenWidth: document.documentElement.clientWidth,
-      show: false,
-      institutionDetailVisible: false,
-      institution: undefined,
-      affirmInstitution: undefined,
-      exception: [],
-      backlog: [],
-      activeKey: '1'
-    }
-  },
-  components: { InstitutionDetail },
-  computed: {},
-  created () {
-    this.getToBeConfirmed()
-  },
-  methods: {
-    onClose () {
-      this.institutionDetailVisible = false
-      this.getToBeConfirmed()
-    },
-    read (item) {
-      post('/webmeterapi/saveSingleTable', {
-        data: {
-          tablename: 't_iot_device_exception',
-          param: { id: item.e_id, f_is_read: 1 }
-        }
-      }).then(res => {
-        this.refresh()
-      })
-    },
-    getToBeConfirmed () {
-      this.institutionDetailVisible = false
-      try {
-        if (this.$login.f.name) {
-          post('/webmetersql/getToBeConfirmed', { data: { condition: `state = '待确认' and f_affirm_by  = '${this.$login.f.name}'` } }).then(res => {
-            this.backlog = [...res]
-            if (this.backlog.length > 0) {
-              const key = `open${Date.now()}`
-              this.$notification.open({
-                key,
-                message: `您有${this.backlog.length}条待办需要确认`,
-                top: '50px',
-                description: this.backlog.map((item, index) => index + 1 + '、' + item.title).join('；'),
-                icon: <a-icon type="container" style="color: #f5222d"/>,
-                btn: h => {
-                  return h(
-                    'a-button',
-                    {
-                      props: {
-                        type: 'primary',
-                        size: 'small',
-                      },
-                      on: {
-                        click: () => this.viewBacklog(key),
-                      },
-                    },
-                    '查看',
-                  )
-                }
-              })
-            }
-          })
-        }
-      } catch (e) {
-        console.log(e)
-      }
-    },
-    viewBacklog (key) {
-      this.$notification.close(key)
-      this.show = true
-      this.activeKey = '3'
-    },
-    confirm_institution (item) {
-      this.institutionDetailVisible = true
-      this.show = false
-      this.institution = item.institution
-      this.affirmInstitution = item.id
-    },
-    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 v-model="show" :trigger="['click']">
+    <div slot="overlay">
+      <a-spin :spinning="loading">
+        <a-tabs
+          v-model="activeKey"
+          :style="{width: '297px'}"
+          :tabBarStyle="{textAlign: 'center'}"
+          class="dropdown-tabs">
+          <a-tab-pane key="1" tab="通知">
+            <a-list class="tab-pane">
+            </a-list>
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="消息">
+            <a-list class="tab-pane"></a-list>
+          </a-tab-pane>
+          <a-tab-pane key="3" tab="待办">
+            <a-list :data-source="backlog" class="tab-pane" item-layout="horizontal">
+              <a-list-item slot="renderItem" slot-scope="item">
+                <a v-if="item.type==='制度待确认'" slot="actions" @click="confirm_institution(item)">查看</a>
+                <a-list-item-meta :description="item.description" :title="item.title"/>
+              </a-list-item>
+            </a-list>
+          </a-tab-pane>
+          <a-drawer
+            :closable="false"
+            :visible="institutionDetailVisible"
+            :width="screenWidth * 0.5"
+            placement="right"
+            @close="onClose"
+          >
+            <institution-detail
+              :affirmInstitution="affirmInstitution"
+              :institutionId="institution"
+              @get_to_be_confirmed="getToBeConfirmed"/>
+          </a-drawer>
+        </a-tabs>
+      </a-spin>
+    </div>
+    <span class="header-notice" @click="fetchNotice">
+      <a-badge :count="backlog.length" class="notice-badge">
+        <a-icon :class="['header-notice-icon']" type="bell"/>
+      </a-badge>
+    </span>
+  </a-dropdown>
+</template>
+
+<script>
+import { post } from '@vue2-client/services/api'
+import InstitutionDetail from './InstitutionDetail'
+
+export default {
+  name: 'HeaderNotice',
+  data () {
+    return {
+      loading: false,
+      screenWidth: document.documentElement.clientWidth,
+      show: false,
+      institutionDetailVisible: false,
+      institution: undefined,
+      affirmInstitution: undefined,
+      backlog: [],
+      activeKey: '1'
+    }
+  },
+  components: { InstitutionDetail },
+  computed: {},
+  created () {
+    this.getToBeConfirmed()
+  },
+  methods: {
+    onClose () {
+      this.institutionDetailVisible = false
+      this.getToBeConfirmed()
+    },
+    getToBeConfirmed () {
+      this.institutionDetailVisible = false
+      try {
+        if (this.$login.f.name) {
+          post('/af-system/getTodo', { name: this.$login.f.name }).then(res => {
+            this.backlog = [...res]
+            if (this.backlog.length > 0) {
+              const key = `open${Date.now()}`
+              this.$notification.open({
+                key,
+                message: `您有${this.backlog.length}条待办需要确认`,
+                top: '50px',
+                description: this.backlog.map((item, index) => index + 1 + '、' + item.title).join('；'),
+                icon: <a-icon type="container" style="color: #f5222d"/>,
+                btn: h => {
+                  return h(
+                    'a-button',
+                    {
+                      props: {
+                        type: 'primary',
+                        size: 'small',
+                      },
+                      on: {
+                        click: () => this.viewBacklog(key),
+                      },
+                    },
+                    '查看',
+                  )
+                }
+              })
+            }
+          })
+        }
+      } catch (e) {
+        console.log(e)
+      }
+    },
+    viewBacklog (key) {
+      this.$notification.close(key)
+      this.show = true
+      this.activeKey = '3'
+    },
+    confirm_institution (item) {
+      this.institutionDetailVisible = true
+      this.show = false
+      this.institution = item.institution
+      this.affirmInstitution = item.id
+    },
+    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>