n20-common-lib 1.2.2 → 1.2.3

package/src/components/Layout/HeaderWrap/index.vue

@@ -1,336 +1,333 @@
-/* 页头内容 */
-<template>
-  <div class="flex-box flex-v p-l-s p-r-s" :class="show && 'header-wrap-show'">
-    <img
-      class="header-logo"
-      :src="headerLogoUrl"
-      alt="logo"
-      :style="{
-        width: headerLogoWidth,
-        height: headerLogoHeight
-      }"
-    />
-    <el-divider direction="vertical" />
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <h3 class="header-title" v-html="headerTitle"></h3>
-
-    <el-dropdown
-      class="set-user-drop"
-      trigger="click"
-      placement="bottom"
-      size="medium"
-      @command="setUserFn"
-    >
-      <span class="set-user-btn el-icon-setting"></span>
-
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item icon="el-icon-document" command="setLang"
-          >{{ '语言切换' | $l(i18n) }}
-        </el-dropdown-item>
-        <el-dropdown-item icon="el-icon-document" command="dowApp">{{
-          '客户端下载' | $l(i18n)
-        }}</el-dropdown-item>
-        <el-dropdown-item
-          v-if="false"
-          icon="el-icon-document"
-          command="setStyle"
-          >{{ '主题设置' | $l(i18n) }}</el-dropdown-item
-        >
-      </el-dropdown-menu>
-    </el-dropdown>
-
-    <el-badge :hidden="noticeNum === 0" :value="noticeNum">
-      <span v-popover:noticePop class="news-btn el-icon-bell"></span>
-    </el-badge>
-
-    <el-dropdown
-      class="user-info-drop"
-      trigger="click"
-      placement="bottom-end"
-      size="medium"
-      @command="setUserFn"
-      @visible-change="setUserVisible"
-    >
-      <img class="user-info-btn" :src="headerUserUrl" />
-
-      <el-dropdown-menu slot="dropdown">
-        <div
-          class="user-info-name flex-box p-l p-r p-t-s p-b-s"
-          style="max-width: 300px"
-        >
-          <span class="pointer" @click="goMdmUser">{{ userInfo.userName }}</span>
-          <div class="flex-column flex-l">
-            <span
-              v-title="userInfo.companyName"
-              class="
-                flex-item
-                text-ellipsis
-                m-l m-b-ss
-                font-size-small
-                color-primary
-              "
-              :show-overflow-tooltip="true"
-              >{{ userInfo.companyName }}</span
-            >
-          </div>
-        </div>
-        <div
-            v-for="(item, i) in rolesList"
-            :key="i"
-            class="text-ellipsis m-l color-ccc"
-        >{{ item.name }}</div>
-        <el-dropdown-item command="changePassword" divided>{{
-          '修改密码' | $l(i18n)
-        }}</el-dropdown-item>
-        <el-dropdown-item command="myDeal" divided>{{
-          '我的交易' | $l(i18n)
-        }}</el-dropdown-item>
-        <el-divider class="m-t-s m-b-s" />
-        <div class="user-log-time p-l p-r p-b-s">
-          <i
-            class="el-icon-s-help m-r-s"
-            style="color: var(--color-success)"
-          ></i>
-          <span style="color: var(--color-text-placeholder)"
-            >{{ '登录时长' | $l(i18n) }} {{ durationTime }}</span
-          >
-        </div>
-        <el-dropdown-item command="logOut">{{
-          '退出登录' | $l(i18n)
-        }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-
-    <dialogWrap
-      :title="'语言切换' | $l(i18n)"
-      :visible.sync="langV"
-      append-to-body
-      width="560px"
-    >
-      <div class="b-center">
-        <el-radio-group v-model="langVal" @change="setLang">
-          <el-radio label="zh-cn" border>{{ '中文简体' | $l(i18n) }}</el-radio>
-          <el-radio label="zh-hk" border>{{ '中文繁体' | $l(i18n) }}</el-radio>
-          <el-radio label="en" border>{{ '英文' | $l(i18n) }}</el-radio>
-        </el-radio-group>
-      </div>
-    </dialogWrap>
-    <dialogWrap
-      :title="'修改密码' | $l(i18n)"
-      :visible.sync="cpwdV"
-      append-to-body
-      width="400px"
-    >
-      <changePwd :visible.sync="cpwdV" />
-    </dialogWrap>
-    <!-- 消息/通知 -->
-    <el-popover
-      ref="noticePop"
-      trigger="click"
-      width="400"
-      @after-enter="$refs.noticeContent.show()"
-    >
-      <noticePop ref="noticeContent" :num.sync="noticeNum" />
-    </el-popover>
-  </div>
-</template>
-
-<script>
-import dialogWrap from '../../Dialog/index.vue'
-import changePwd from './changePwd.vue'
-import noticePop from './noticePop.vue'
-
-import getJsonc from '../../../assets/getJsonc'
-import realUrl from '../../../assets/realUrl'
-import auth from '../../../utils/auth'
-import { linkPush } from '../../../utils/urlToGo'
-import dayjs from 'dayjs'
-import duration from 'dayjs/plugin/duration'
-dayjs.extend(duration)
-
-const prefix =
-  window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || process.env.BASE_URL || '/'
-
-const i18n = {
-  语言切换: {
-    en: 'Language switching'
-  },
-  客户端下载: {
-    en: 'Client download'
-  },
-  主题设置: {
-    en: 'Theme setting'
-  },
-  修改密码: {
-    en: 'Change Password'
-  },
-  我的交易: {
-    en: 'My deal'
-  },
-  登录时长: {
-    en: 'Login duration'
-  },
-  退出登录: {
-    en: 'LogOut'
-  },
-  小时: {
-    en: ':'
-  },
-  分: {
-    en: ':'
-  },
-  秒: {
-    en: ':'
-  },
-  '确定退出,将清除未提交的临时操作，是否继续？': {
-    en: 'Are you sure to exit? Uncommitted temporary operations will be cleared. Do you want to continue?'
-  },
-  退出提示: {
-    en: 'Exit Tips'
-  },
-  中文简体: {
-    en: 'Chinese Simplified'
-  },
-  中文繁体: {
-    en: 'Chinese Traditional'
-  },
-  英文: {
-    en: 'English'
-  }
-}
-
-export default {
-  components: {
-    dialogWrap,
-    changePwd,
-    noticePop
-  },
-  data() {
-    return {
-      show: false,
-      headerLogoUrl: undefined,
-      headerLogoWidth: undefined,
-      headerLogoHeight: undefined,
-      headerTitle: undefined,
-      headerUserUrl: undefined,
-      userInfo: {},
-      durationTime: '00小时00分00秒',
-      cpwdV: false,
-      langV: false,
-      langVal: window.localStorage.getItem('pageLang') || 'zh-cn',
-      noticeNum: 0,
-      rolesList: [],
-      i18n
-    }
-  },
-  created() {
-    getJsonc('/server-config.jsonc').then(({ _layoutData = {} }) => {
-      this.show = true
-
-      this.headerLogoUrl = realUrl(_layoutData.headerLogoUrl)
-      this.headerUserUrl = realUrl(_layoutData.headerUserUrl)
-      this.headerLogoWidth = _layoutData.headerLogoWidth
-      this.headerLogoHeight = _layoutData.headerLogoHeight
-      this.headerTitle = _layoutData.headerTitle
-    })
-    this.getUserRolesList()
-  },
-  methods: {
-    // 跳转打主数据人员页面
-    goMdmUser() {
-      linkPush('/mdm/personnel')
-    },
-    setUserVisible(v) {
-      if (v) {
-        let loginTime = sessionStorage.getItem('loginTime')
-        if (loginTime) {
-          this.durationTime = dayjs.duration(Date.now() - loginTime).format(
-            `HH${this.$l('小时', this.i18n)}
-              mm${this.$l('分', this.i18n)}
-              ss${this.$l('秒', this.i18n)}`
-          )
-        }
-
-        let userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
-        this.userInfo = {
-          userName: userInfo.uname,
-          companyName: userInfo.cltName
-        }
-      }
-    },
-    async getUserRolesList() {
-      let userNo = sessionStorage.getItem('userNo')
-      const { data } = await this.$axios.get(
-        `/bems/prod_1.0/user/api/userController/userCltAdRole/${userNo}`
-      )
-      this.rolesList = data.roles
-    },
-    setUserFn(c) {
-      switch (c) {
-        case 'setLang':
-          // this.setLang()
-          this.langV = true
-          break
-        case 'dowApp':
-          this.dowApp()
-          break
-        case 'setStyle':
-          this.setStyle()
-          break
-        case 'changePassword':
-          this.changePassword()
-          break
-        case 'myDeal':
-          this.myDeal()
-          break
-        case 'logOut':
-          this.logOut()
-          break
-      }
-    },
-    setLang() {
-      this.langV = false
-      window.localStorage.setItem('pageLang', this.langVal)
-      window.location.reload()
-    },
-    dowApp() {
-      // alert('客户端下载')
-      let name = 'download.exe'
-      let aDom = document.createElement('a')
-      aDom.href = `${prefix}server-assets/${name}`
-      aDom.download = name
-      aDom.click()
-
-      this.$nextTick(() => {
-        aDom = undefined
-      })
-    },
-    setStyle() {
-      // alert('主题设置')
-      this.$emit('custom-event', { type: 'setStyle' })
-    },
-    changePassword() {
-      // alert('修改密码')
-      this.cpwdV = true
-    },
-    myDeal() {
-      // alert('我的交易')
-      this.$emit('custom-event', { type: 'myDeal' })
-    },
-    logOut() {
-      // alert('退出登录')
-      this.$confirm(
-        this.$l('退出将清除未保存的临时操作，请确认是否继续？', this.i18n),
-        this.$l('退出提示', this.i18n),
-        {
-          confirmButtonText: this.$l('确定'),
-          cancelButtonText: this.$l('取消'),
-          type: 'warning'
-        }
-      ).then(() => {
-        auth.removeToken()
-      })
-    }
-  }
-}
-</script>
+/* 页头内容 */
+<template>
+  <div class="flex-box flex-v p-l-s p-r-s" :class="show && 'header-wrap-show'">
+    <img
+      class="header-logo"
+      :src="headerLogoUrl"
+      alt="logo"
+      :style="{
+        width: headerLogoWidth,
+        height: headerLogoHeight
+      }"
+    />
+    <el-divider direction="vertical" />
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <h3 class="header-title" v-html="headerTitle"></h3>
+
+    <el-dropdown
+      class="set-user-drop"
+      trigger="click"
+      placement="bottom"
+      size="medium"
+      @command="setUserFn"
+    >
+      <span class="set-user-btn el-icon-setting"></span>
+
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item icon="el-icon-document" command="setLang"
+          >{{ '语言切换' | $l(i18n) }}
+        </el-dropdown-item>
+        <el-dropdown-item icon="el-icon-document" command="dowApp">{{
+          '客户端下载' | $l(i18n)
+        }}</el-dropdown-item>
+        <el-dropdown-item
+          v-if="false"
+          icon="el-icon-document"
+          command="setStyle"
+          >{{ '主题设置' | $l(i18n) }}</el-dropdown-item
+        >
+      </el-dropdown-menu>
+    </el-dropdown>
+
+    <el-badge :hidden="noticeNum === 0" :value="noticeNum">
+      <span v-popover:noticePop class="news-btn el-icon-bell"></span>
+    </el-badge>
+
+    <el-dropdown
+      class="user-info-drop"
+      trigger="click"
+      placement="bottom-end"
+      size="medium"
+      @command="setUserFn"
+      @visible-change="setUserVisible"
+    >
+      <img class="user-info-btn" :src="headerUserUrl" />
+
+      <el-dropdown-menu slot="dropdown">
+        <div
+          class="user-info-name flex-box p-l p-r p-t-s p-b-s"
+          style="max-width: 300px"
+        >
+          <span class="pointer" @click="goMdmUser">{{
+            userInfo.userName
+          }}</span>
+          <div class="flex-column flex-l">
+            <span
+              v-title="userInfo.companyName"
+              class="
+                flex-item
+                text-ellipsis
+                m-l m-b-ss
+                font-size-small
+                color-primary
+              "
+              :show-overflow-tooltip="true"
+              >{{ userInfo.companyName }}</span
+            >
+          </div>
+        </div>
+        <div
+          v-for="(item, i) in rolesList"
+          :key="i"
+          class="text-ellipsis m-l color-ccc"
+        >
+          {{ item.name }}
+        </div>
+        <el-dropdown-item command="changePassword" divided>{{
+          '修改密码' | $l(i18n)
+        }}</el-dropdown-item>
+        <el-dropdown-item command="myDeal" divided>{{
+          '我的交易' | $l(i18n)
+        }}</el-dropdown-item>
+        <el-divider class="m-t-s m-b-s" />
+        <div class="user-log-time p-l p-r p-b-s">
+          <i
+            class="el-icon-s-help m-r-s"
+            style="color: var(--color-success)"
+          ></i>
+          <span style="color: var(--color-text-placeholder)"
+            >{{ '登录时长' | $l(i18n) }} {{ durationTime }}</span
+          >
+        </div>
+        <el-dropdown-item command="logOut">{{
+          '退出登录' | $l(i18n)
+        }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+
+    <dialogWrap
+      :title="'语言切换' | $l(i18n)"
+      :visible.sync="langV"
+      append-to-body
+      width="560px"
+    >
+      <div class="b-center">
+        <el-radio-group v-model="langVal" @change="setLang">
+          <el-radio label="zh-cn" border>{{ '中文简体' | $l(i18n) }}</el-radio>
+          <el-radio label="zh-hk" border>{{ '中文繁体' | $l(i18n) }}</el-radio>
+          <el-radio label="en" border>{{ '英文' | $l(i18n) }}</el-radio>
+        </el-radio-group>
+      </div>
+    </dialogWrap>
+    <dialogWrap
+      :title="'修改密码' | $l(i18n)"
+      :visible.sync="cpwdV"
+      append-to-body
+      width="400px"
+    >
+      <changePwd :visible.sync="cpwdV" />
+    </dialogWrap>
+    <!-- 消息/通知 -->
+    <el-popover
+      ref="noticePop"
+      trigger="click"
+      width="400"
+      @after-enter="$refs.noticeContent.show()"
+    >
+      <noticePop ref="noticeContent" :num.sync="noticeNum" />
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import dialogWrap from '../../Dialog/index.vue'
+import changePwd from './changePwd.vue'
+import noticePop from './noticePop.vue'
+
+import getJsonc from '../../../assets/getJsonc'
+import realUrl from '../../../assets/realUrl'
+import auth from '../../../utils/auth'
+import { linkPush } from '../../../utils/urlToGo'
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+dayjs.extend(duration)
+
+const prefix =
+  window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || process.env.BASE_URL || '/'
+
+const i18n = {
+  语言切换: {
+    en: 'Language switching'
+  },
+  客户端下载: {
+    en: 'Client download'
+  },
+  主题设置: {
+    en: 'Theme setting'
+  },
+  修改密码: {
+    en: 'Change Password'
+  },
+  我的交易: {
+    en: 'My deal'
+  },
+  登录时长: {
+    en: 'Login duration'
+  },
+  退出登录: {
+    en: 'LogOut'
+  },
+  小时: {
+    en: ':'
+  },
+  分: {
+    en: ':'
+  },
+  秒: {
+    en: ':'
+  },
+  '确定退出,将清除未提交的临时操作，是否继续？': {
+    en: 'Are you sure to exit? Uncommitted temporary operations will be cleared. Do you want to continue?'
+  },
+  退出提示: {
+    en: 'Exit Tips'
+  },
+  中文简体: {
+    en: 'Chinese Simplified'
+  },
+  中文繁体: {
+    en: 'Chinese Traditional'
+  },
+  英文: {
+    en: 'English'
+  }
+}
+
+export default {
+  components: {
+    dialogWrap,
+    changePwd,
+    noticePop
+  },
+  data() {
+    return {
+      show: false,
+      headerLogoUrl: undefined,
+      headerLogoWidth: undefined,
+      headerLogoHeight: undefined,
+      headerTitle: undefined,
+      headerUserUrl: undefined,
+      userInfo: {},
+      durationTime: '00小时00分00秒',
+      cpwdV: false,
+      langV: false,
+      langVal: window.localStorage.getItem('pageLang') || 'zh-cn',
+      noticeNum: 0,
+      rolesList: [],
+      i18n
+    }
+  },
+  created() {
+    getJsonc('/server-config.jsonc').then(({ _layoutData = {} }) => {
+      this.show = true
+
+      this.headerLogoUrl = realUrl(_layoutData.headerLogoUrl)
+      this.headerUserUrl = realUrl(_layoutData.headerUserUrl)
+      this.headerLogoWidth = _layoutData.headerLogoWidth
+      this.headerLogoHeight = _layoutData.headerLogoHeight
+      this.headerTitle = _layoutData.headerTitle
+    })
+  },
+  methods: {
+    // 跳转打主数据人员页面
+    goMdmUser() {
+      linkPush('/mdm/personnel')
+    },
+    setUserVisible(v) {
+      if (v) {
+        let loginTime = sessionStorage.getItem('loginTime')
+        if (loginTime) {
+          this.durationTime = dayjs.duration(Date.now() - loginTime).format(
+            `HH${this.$l('小时', this.i18n)}
+              mm${this.$l('分', this.i18n)}
+              ss${this.$l('秒', this.i18n)}`
+          )
+        }
+
+        let userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
+        this.userInfo = {
+          userName: userInfo.uname,
+          companyName: userInfo.cltName
+        }
+        this.rolesList = userInfo.roles || []
+      }
+    },
+    setUserFn(c) {
+      switch (c) {
+        case 'setLang':
+          // this.setLang()
+          this.langV = true
+          break
+        case 'dowApp':
+          this.dowApp()
+          break
+        case 'setStyle':
+          this.setStyle()
+          break
+        case 'changePassword':
+          this.changePassword()
+          break
+        case 'myDeal':
+          this.myDeal()
+          break
+        case 'logOut':
+          this.logOut()
+          break
+      }
+    },
+    setLang() {
+      this.langV = false
+      window.localStorage.setItem('pageLang', this.langVal)
+      window.location.reload()
+    },
+    dowApp() {
+      // alert('客户端下载')
+      let name = 'download.exe'
+      let aDom = document.createElement('a')
+      aDom.href = `${prefix}server-assets/${name}`
+      aDom.download = name
+      aDom.click()
+
+      this.$nextTick(() => {
+        aDom = undefined
+      })
+    },
+    setStyle() {
+      // alert('主题设置')
+      this.$emit('custom-event', { type: 'setStyle' })
+    },
+    changePassword() {
+      // alert('修改密码')
+      this.cpwdV = true
+    },
+    myDeal() {
+      // alert('我的交易')
+      this.$emit('custom-event', { type: 'myDeal' })
+    },
+    logOut() {
+      // alert('退出登录')
+      this.$confirm(
+        this.$l('退出将清除未保存的临时操作，请确认是否继续？', this.i18n),
+        this.$l('退出提示', this.i18n),
+        {
+          confirmButtonText: this.$l('确定'),
+          cancelButtonText: this.$l('取消'),
+          type: 'warning'
+        }
+      ).then(() => {
+        auth.removeToken()
+      })
+    }
+  }
+}
+</script>