n20-common-lib 1.1.98

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

@@ -0,0 +1,336 @@
+/* 页头内容 */
+<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>

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

@@ -0,0 +1,300 @@
+<template>
+  <el-tabs :key="showKey" v-model="tabAc" stretch class="header-notice-tabs">
+    <el-tab-pane name="notice">
+      <el-badge slot="label" :hidden="noticeNum === 0" :value="noticeNum">
+        消息中心
+      </el-badge>
+
+      <div v-loading="nLd" class="notice-list p-b-s">
+        <div
+          v-for="item in noticeList"
+          :key="item.id"
+          class="flex-box flex-v m-b-ss"
+          :class="{
+            'notice-item': item.processingLinkkUrl,
+            'unread-notice': item.readState === '0'
+          }"
+          @click="seeDetails(item)"
+        >
+          <span class="el-icon-bell"></span>
+          <span v-title="item.content" class="m-r-auto">{{
+            item | ctFilter
+          }}</span>
+          <span>{{ item.createTime }}</span>
+        </div>
+        <emptyC
+          v-if="!nLd && !noticeList.length"
+          type="empty"
+          :height="160"
+          :width="160"
+        >
+          <div slot="content">暂无消息</div>
+        </emptyC>
+      </div>
+      <div class="flex-box bd-t flex-v">
+        <el-button class="flex-item" type="text" @click="readAll"
+          >一键已读</el-button
+        >
+        <span class="bd-l p-t"></span>
+        <el-button class="flex-item" type="text" @click="queryMore"
+          >更多</el-button
+        >
+      </div>
+    </el-tab-pane>
+    <el-tab-pane name="affiche">
+      <el-badge slot="label" :hidden="afficheNum === 0" :value="afficheNum">
+        系统公告
+      </el-badge>
+
+      <div v-loading="aLd" class="notice-list p-b-s">
+        <div
+          v-for="item in afficheList"
+          :key="item.ntId"
+          :class="[
+            'flex-box flex-v m-b-ss notice-item',
+            item.readStatus == 0 ? 'noread' : 'read'
+          ]"
+          @click="seeDetailsAffiche(item)"
+        >
+          <span class="el-icon-chat-dot-square m-r-s"></span>
+          <span class="m-r-auto">{{ item.title }}</span>
+          <span>{{ item.createDate }}</span>
+        </div>
+        <emptyC
+          v-if="!aLd && !afficheList.length"
+          type="empty"
+          :height="160"
+          :width="160"
+        >
+          <div slot="content">暂无系统公告</div>
+        </emptyC>
+      </div>
+      <div class="flex-box bd-t flex-v">
+        <el-button class="flex-item" type="text" @click="readAllAffiche"
+          >一键已读</el-button
+        >
+        <span class="bd-l p-t"></span>
+        <el-button class="flex-item" type="text" @click="queryMoreAffiche"
+          >更多</el-button
+        >
+      </div>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import axios from '../../../utils/axios'
+import emptyC from '../../Empty/index.vue'
+export default {
+  components: {
+    emptyC
+  },
+  filters: {
+    ctFilter(item) {
+      let msgT = ''
+      switch (item.messageType) {
+        case '0':
+          msgT = '业务提醒'
+          break
+        case '1':
+          msgT = '异常提醒'
+          break
+
+        default:
+          msgT = '其他提醒'
+          break
+      }
+      return `【${msgT}】${item.title}`
+    }
+  },
+  props: {
+    num: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      showKey: 0,
+      tabAc: 'notice',
+      username: sessionStorage.getItem('userNo'),
+      nLd: false,
+      aLd: false,
+      noticeNum: 0,
+      afficheNum: 0,
+      noticeList: [],
+      noticeTotal: 0,
+      afficheList: [],
+      afficheTotal: 0
+    }
+  },
+  computed: {
+    numC: {
+      get() {
+        return this.num
+      },
+      set(n) {
+        this.$emit('update:num', n)
+      }
+    }
+  },
+  created() {
+    this.getNNum()
+  },
+  methods: {
+    show() {
+      this.showKey = this.showKey + 1
+
+      this.getMsgList()
+      this.getAfficheList()
+    },
+    getNNum() {
+      Promise.all([
+        axios.get(
+          '/bems/wkb/messageCenter/getUnReadTotal/' + this.username,
+          null,
+          { loading: false, noMsg: true }
+        ),
+        axios.get('/bems/1.0/notice/notReadCount', null, {
+          loading: false,
+          noMsg: true
+        })
+      ]).then(([res_1, res_2]) => {
+        this.noticeNum = res_1.data.data
+        this.afficheNum = res_2.data
+
+        this.numC = this.noticeNum + this.afficheNum
+      })
+    },
+    getMsgList() {
+      this.nLd = true
+      axios
+        .post(
+          '/bems/wkb/messageCenter/getListForPage',
+          {
+            data: {
+              userNo: this.username
+            },
+            descs: ['create_time'],
+            readState: '0', // 请求未读消息不生效
+            curentPage: 1,
+            pageSize: 10
+          },
+          {
+            loading: () => {
+              this.nLd = false
+            },
+            noMsg: true
+          }
+        )
+        .then((res) => {
+          this.noticeList = res.records || []
+          this.noticeTotal = res.total
+        })
+    },
+    getAfficheList() {
+      this.aLd = true
+      axios
+        .get(
+          '/bems/1.0/notice',
+          {
+            userId: this.username
+            // readStatus: '0'
+          },
+          {
+            loading: () => {
+              this.aLd = false
+            },
+            noMsg: true
+          }
+        )
+        .then((res) => {
+          this.afficheList = res.data || []
+          this.afficheTotal = res.total
+        })
+    },
+    seeDetails(item) {
+      if (item.processingLinkkUrl) {
+        let url = '/' + item.processingLinkkUrl
+        url = url.replace('//', '/')
+
+        let _fromNo = Date.now()
+        sessionStorage.setItem(_fromNo, location.href)
+
+        this.$router.push({
+          path: url,
+          query: {
+            _fromNo
+          }
+        })
+      }
+    },
+    seeDetailsAffiche(item) {
+      if (this.$route.path === '/notice/views') {
+        this.$router.push('/loading')
+        setTimeout(() => {
+          this.$router.push({
+            path: `/notice/views`,
+            query: { ntId: item.ntId, status: '1' }
+          })
+        }, 500)
+      } else {
+        this.$router.push({
+          path: `/notice/views`,
+          query: { ntId: item.ntId, status: '1' }
+        })
+      }
+    },
+    readAll() {
+      this.$msgboxPor({
+        title: '一键已读',
+        message: '确定要把所有未读消息标注为已读吗?',
+        type: 'warning'
+      }).then(() => {
+        axios
+          .put(
+            '/bems/wkb/messageCenter/updateReadStateByUserNo/' + this.username,
+            null,
+            null,
+            { noMsg: true }
+          )
+          .then(({ msg }) => {
+            this.readAllMsg(msg)
+          })
+      })
+    },
+    readAllMsg(msg = '') {
+      this.$message({
+        message: '消息一键已读成功 ' + msg,
+        type: 'success'
+      })
+    },
+    queryMore() {
+      this.$router.push({ path: '/notice/list' })
+    },
+    readAllAffiche() {
+      axios
+        .post('/bems/1.0/portalNoticeReadRecord', { data: [] })
+        .then((res) => {
+          this.$message({
+            message: '系统公告一键已读成功',
+            type: 'success'
+          })
+          this.getAfficheList()
+        })
+    },
+    queryMoreAffiche() {
+      this.$router.push({ path: '/notice/index' })
+    }
+  }
+}
+</script>
+
+<style>
+.read {
+  color: #bac4cf;
+}
+.noread {
+  color: black;
+}
+</style>