n20-common-lib 1.3.34 → 1.3.35

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

@@ -1,418 +1,418 @@
-/* 页头内容 */
-<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-tooltip content="帮助文档">
-      <span class="set-user-btn n20-icon-xinxitishi" @click="openHelp"></span>
-    </el-tooltip>
-
-    <el-dropdown
-      class="m-l-m"
-      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 icon="el-icon-document" command="setTheme">{{
-          '主题设置' | $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
-          v-if="customOpt.mydeal !== false"
-          command="myDeal"
-          divided
-          >{{ '我的交易' | $l(i18n) }}</el-dropdown-item
-        >
-        <el-dropdown-item
-          v-if="customOpt.agency && customOpt.agency.show"
-          command="myAgency"
-          divided
-        >
-          <div class="flex-box flex-v">
-            <span>{{ '工作代理' | $l(i18n) }}</span>
-            <el-badge
-              v-if="customOpt.agency.underway"
-              class="m-l-auto font-size-small color-primary"
-              is-dot
-              type="primary"
-              style="line-height: initial"
-              >进行中</el-badge
-            >
-          </div>
-        </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 style="min-height: 114px">
-        <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="themeV"
-      append-to-body
-      width="432px"
-    >
-      <div style="min-height: 114px">
-        <span
-          v-for="item in themeList"
-          :key="item.value"
-          class="header-theme-item m-r m-b"
-          :style="{
-            background: item.color
-          }"
-          @click="setTheme(item)"
-          ><i v-if="item.value === themeVal" class="el-icon-check"></i
-        ></span>
-      </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 Cookies from 'js-cookie'
-import { themeList } from '../../../utils/theme.config.js'
-
-import dialogWrap from '../../Dialog/index.vue'
-import changePwd from './changePwd.vue'
-import noticePop from './noticePop.vue'
-import axios from '../../../utils/axios'
-
-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: 'My agency'
-  },
-  登录时长: {
-    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
-  },
-  inject: {
-    customOpt: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  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',
-      themeV: false,
-      themeList,
-      themeVal: window.localStorage.getItem('pageTheme') || 'default',
-      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 userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
-        this.userInfo = {
-          userName: userInfo.uname,
-          companyName: userInfo.cltName
-        }
-        this.rolesList = userInfo.roles || []
-
-        let loginTime = sessionStorage.getItem('loginTime')
-        if (loginTime) {
-          this.setDurationTime(loginTime)
-          this.durationTime_timeout = setInterval(
-            () => this.setDurationTime(loginTime),
-            500
-          )
-        }
-      } else {
-        clearInterval(this.durationTime_timeout)
-      }
-    },
-    setDurationTime(loginTime) {
-      this.durationTime = dayjs
-        .duration(Date.now() - loginTime)
-        .format(
-          `HH${this.$l('小时', this.i18n)}mm${this.$l(
-            '分',
-            this.i18n
-          )}ss${this.$l('秒', this.i18n)}`
-        )
-    },
-    // 打开帮助文档
-    openHelp() {
-      axios
-        .get(`/bems/1.0/userManual`, {}, { responseType: 'blob' })
-        .then((res) => {
-          if (!res.size) {
-            this.$message.error('暂无帮助文档，请联系管理员！')
-            return
-          }
-          let url = window.URL.createObjectURL(res)
-          let win = window.open(url, '帮助文档')
-          setTimeout(function () {
-            win.document.title = '帮助文档'
-          }, 1000)
-        })
-    },
-    setUserFn(c) {
-      switch (c) {
-        case 'setLang':
-          this.langV = true
-          break
-        case 'setTheme':
-          this.themeV = true
-          break
-        case 'dowApp':
-          this.dowApp()
-          break
-        case 'changePassword':
-          this.changePassword()
-          break
-        case 'logOut':
-          this.logOut()
-          break
-        default:
-          this.$emit('custom-event', { type: c })
-          break
-      }
-    },
-    setLang() {
-      this.langV = false
-      window.localStorage.setItem('pageLang', this.langVal)
-      Cookies.set(
-        'language',
-        ['zh-cn', 'zh-hk'].includes(this.langVal) ? 'zh' : this.langVal
-      )
-      window.location.reload()
-    },
-    setTheme({ value }) {
-      this.themeVal = value
-      this.themeV = false
-
-      window.localStorage.setItem('pageTheme', this.themeVal)
-      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
-      })
-    },
-    changePassword() {
-      // alert('修改密码')
-      this.cpwdV = true
-    },
-    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-tooltip content="帮助文档">
+      <span class="set-user-btn n20-icon-xinxitishi" @click="openHelp"></span>
+    </el-tooltip>
+
+    <el-dropdown
+      class="m-l-m"
+      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 icon="el-icon-document" command="setTheme">{{
+          '主题设置' | $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
+          v-if="customOpt.mydeal !== false"
+          command="myDeal"
+          divided
+          >{{ '我的交易' | $l(i18n) }}</el-dropdown-item
+        >
+        <el-dropdown-item
+          v-if="customOpt.agency && customOpt.agency.show"
+          command="myAgency"
+          divided
+        >
+          <div class="flex-box flex-v">
+            <span>{{ '工作代理' | $l(i18n) }}</span>
+            <el-badge
+              v-if="customOpt.agency.underway"
+              class="m-l-auto font-size-small color-primary"
+              is-dot
+              type="primary"
+              style="line-height: initial"
+              >进行中</el-badge
+            >
+          </div>
+        </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 style="min-height: 114px">
+        <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="themeV"
+      append-to-body
+      width="432px"
+    >
+      <div style="min-height: 114px">
+        <span
+          v-for="item in themeList"
+          :key="item.value"
+          class="header-theme-item m-r m-b"
+          :style="{
+            background: item.color
+          }"
+          @click="setTheme(item)"
+          ><i v-if="item.value === themeVal" class="el-icon-check"></i
+        ></span>
+      </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 Cookies from 'js-cookie'
+import { themeList } from '../../../utils/theme.config.js'
+
+import dialogWrap from '../../Dialog/index.vue'
+import changePwd from './changePwd.vue'
+import noticePop from './noticePop.vue'
+import axios from '../../../utils/axios'
+
+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: 'My agency'
+  },
+  登录时长: {
+    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
+  },
+  inject: {
+    customOpt: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  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',
+      themeV: false,
+      themeList,
+      themeVal: window.localStorage.getItem('pageTheme') || 'default',
+      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 userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
+        this.userInfo = {
+          userName: userInfo.uname,
+          companyName: userInfo.cltName
+        }
+        this.rolesList = userInfo.roles || []
+
+        let loginTime = sessionStorage.getItem('loginTime')
+        if (loginTime) {
+          this.setDurationTime(loginTime)
+          this.durationTime_timeout = setInterval(
+            () => this.setDurationTime(loginTime),
+            500
+          )
+        }
+      } else {
+        clearInterval(this.durationTime_timeout)
+      }
+    },
+    setDurationTime(loginTime) {
+      this.durationTime = dayjs
+        .duration(Date.now() - loginTime)
+        .format(
+          `HH${this.$l('小时', this.i18n)}mm${this.$l(
+            '分',
+            this.i18n
+          )}ss${this.$l('秒', this.i18n)}`
+        )
+    },
+    // 打开帮助文档
+    openHelp() {
+      axios
+        .get(`/bems/1.0/userManual`, {}, { responseType: 'blob' })
+        .then((res) => {
+          if (!res.size) {
+            this.$message.error('暂无帮助文档，请联系管理员！')
+            return
+          }
+          let url = window.URL.createObjectURL(res)
+          let win = window.open(url, '帮助文档')
+          setTimeout(function () {
+            win.document.title = '帮助文档'
+          }, 1000)
+        })
+    },
+    setUserFn(c) {
+      switch (c) {
+        case 'setLang':
+          this.langV = true
+          break
+        case 'setTheme':
+          this.themeV = true
+          break
+        case 'dowApp':
+          this.dowApp()
+          break
+        case 'changePassword':
+          this.changePassword()
+          break
+        case 'logOut':
+          this.logOut()
+          break
+        default:
+          this.$emit('custom-event', { type: c })
+          break
+      }
+    },
+    setLang() {
+      this.langV = false
+      window.localStorage.setItem('pageLang', this.langVal)
+      Cookies.set(
+        'language',
+        ['zh-cn', 'zh-hk'].includes(this.langVal) ? 'zh' : this.langVal
+      )
+      window.location.reload()
+    },
+    setTheme({ value }) {
+      this.themeVal = value
+      this.themeV = false
+
+      window.localStorage.setItem('pageTheme', this.themeVal)
+      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
+      })
+    },
+    changePassword() {
+      // alert('修改密码')
+      this.cpwdV = true
+    },
+    logOut() {
+      // alert('退出登录')
+      this.$confirm(
+        this.$l('退出将清除未保存的临时操作，请确认是否继续？', this.i18n),
+        this.$l('退出提示', this.i18n),
+        {
+          confirmButtonText: this.$l('确定'),
+          cancelButtonText: this.$l('取消'),
+          type: 'warning'
+        }
+      ).then(() => {
+        auth.removeToken()
+      })
+    }
+  }
+}
+</script>