BasicLayout.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
  1. <template>
  2. <a-layout :class="['layout', device]">
  3. <!-- SideMenu -->
  4. <a-drawer
  5. v-if="isMobile()"
  6. placement="left"
  7. :wrapClassName="`drawer-sider ${navTheme}`"
  8. :closable="false"
  9. :visible="collapsed"
  10. @close="drawerClose"
  11. >
  12. <side-menu
  13. mode="inline"
  14. :menus="menus"
  15. :theme="navTheme"
  16. :collapsed="false"
  17. :collapsible="true"
  18. @menuSelect="menuSelect"
  19. ></side-menu>
  20. </a-drawer>
  21. <side-menu
  22. v-else-if="isSideMenu()"
  23. mode="inline"
  24. :menus="menus"
  25. :theme="navTheme"
  26. :collapsed="collapsed"
  27. :collapsible="true"
  28. ></side-menu>
  29. <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
  30. <!-- layout header -->
  31. <global-header
  32. :mode="layoutMode"
  33. :menus="menus"
  34. :theme="navTheme"
  35. :collapsed="collapsed"
  36. :device="device"
  37. @toggle="toggle"
  38. />
  39. <!-- layout content -->
  40. <a-layout-content :class="navTheme" :style="{ height: '100%', margin: '30px 20px 0', paddingTop: multiTab&&fixedHeader ? '66px' : (!multiTab&&fixedHeader?'45px':'0') }">
  41. <transition name="page-transition">
  42. <!-- <route-view v-if="isRouterAlive"/> -->
  43. <router-view ></router-view>
  44. </transition>
  45. </a-layout-content>
  46. <!-- 消息通知 -->
  47. <div class="notes-box" v-if="notesList.length && nowRoute.indexOf('notice')<0">
  48. <div v-for="item in notesList" :key="item.id">
  49. <a-alert v-if="item.notice.bizType=='TEMP_ORDER'" type="warning" showIcon closable @close="setRead(item)">
  50. <div slot="description">
  51. 【急送提醒】{{ item.notice.plainContent }} <a-button @click="toAction(item)" size="small" type="link" class="button-info">点击查看</a-button>
  52. </div>
  53. </a-alert>
  54. <a-alert v-if="item.notice.bizType=='SHELF_REPLENISH'" type="info" showIcon closable @close="setRead(item)">
  55. <div slot="description">
  56. 【补货提醒】{{ item.notice.plainContent }} <a-button @click="toAction(item)" size="small" type="link" class="button-info">立即处理</a-button>
  57. </div>
  58. </a-alert>
  59. <a-alert v-if="item.notice.bizType=='SHELF_ORDER'" type="info" showIcon closable @close="setRead(item)">
  60. <div slot="description">
  61. 【订单提醒】{{ item.notice.plainContent }} <a-button @click="toAction(item)" size="small" type="link" class="button-info">点击查看</a-button>
  62. </div>
  63. </a-alert>
  64. <a-alert v-if="item.notice.bizType=='SHELF_WARN'" type="warning" showIcon closable @close="setRead(item)">
  65. <div slot="description">
  66. 【货架异常提醒】{{ item.notice.plainContent }} <a-button @click="toAction(item)" size="small" type="link" class="button-info">点击查看</a-button>
  67. </div>
  68. </a-alert>
  69. </div>
  70. <div class="notes-footer">
  71. <div class="notes-more" @click="noDoNotes">暂不处理</div>
  72. <div class="notes-more" @click="toNotes">更多消息>></div>
  73. </div>
  74. </div>
  75. <audio controls="controls" hidden :src="mp3" ref="audio"></audio>
  76. <!-- 视频播放弹窗 -->
  77. <div v-if="isShowVideoVal">
  78. <a-modal
  79. v-model="isShowVideoVal"
  80. wrapClassName="vidio_cont"
  81. :footer="null"
  82. centered
  83. :maskClosable="false"
  84. :destroyOnClose="true"
  85. :width="1000"
  86. @cancel="closeVido">
  87. <video-player
  88. class="video-player vjs-custom-skin"
  89. ref="videoPlayer"
  90. :playsinline="true"
  91. :options="playerOptions"
  92. ></video-player>
  93. </a-modal>
  94. </div>
  95. <!-- pdf 预览 -->
  96. <pdfViewModal ref="pdfview" :openModal="showPdfView" @cancel="showPdfView=false"></pdfViewModal>
  97. <!-- 选择打印机 -->
  98. <selectPrint ref="selectPrint" :openModal="showSelectPrint" @cancel="showSelectPrint=false"></selectPrint>
  99. <!-- layout footer -->
  100. <a-layout-footer>
  101. <!-- <global-footer /> -->
  102. </a-layout-footer>
  103. <!-- Setting Drawer (show in development mode) -->
  104. <!-- <setting-drawer></setting-drawer> -->
  105. </a-layout>
  106. </a-layout>
  107. </template>
  108. <script>
  109. import moment from 'moment'
  110. import { triggerWindowResizeEvent } from '@/utils/util'
  111. import { mapState, mapActions, mapGetters } from 'vuex'
  112. import { mixin, mixinDevice, commonMixin } from '@/utils/mixin'
  113. import config from '@/config/defaultSettings'
  114. import pdfViewModal from '@/views/common/pdfViewModal.vue'
  115. import selectPrint from '@/views/common/selectPrint.vue'
  116. import RouteView from './RouteView'
  117. import SideMenu from '@/components/Menu/SideMenu'
  118. import GlobalHeader from '@/components/GlobalHeader'
  119. import GlobalFooter from '@/components/GlobalFooter'
  120. import SettingDrawer from '@/components/SettingDrawer'
  121. import { asyncRouterMap } from '@/config/router.config'
  122. import mp3 from '@/assets/notes.mp3'
  123. import store from '@/store'
  124. export default {
  125. name: 'BasicLayout',
  126. mixins: [mixin, mixinDevice, commonMixin],
  127. provide () {
  128. return {
  129. setIsHomeNav: this.setIsHomeNav,
  130. reloadView: this.reloadView
  131. }
  132. },
  133. components: {
  134. RouteView,
  135. SideMenu,
  136. GlobalHeader,
  137. GlobalFooter,
  138. SettingDrawer,
  139. pdfViewModal,
  140. selectPrint
  141. },
  142. data () {
  143. return {
  144. production: config.production,
  145. collapsed: false,
  146. menus: [],
  147. isRouterAlive: true,
  148. showPdfView: false,
  149. showSelectPrint: false,
  150. notesList: [],
  151. mp3: mp3
  152. }
  153. },
  154. computed: {
  155. ...mapState({
  156. // 动态主路由
  157. mainMenu: state => state.permission.routers,
  158. multiTab: state => state.app.multiTab,
  159. fixedHeader: state => state.app.fixedHeader
  160. }),
  161. ...mapGetters(['nowRoute', 'isShowVideo']),
  162. isShowVideoVal () {
  163. return this.$store.state.app.isShowVideo
  164. },
  165. // 接受到ws消息
  166. wsMessage () {
  167. return this.$store.getters.wsMessageData()
  168. },
  169. contentPaddingLeft () {
  170. if (!this.fixSidebar || this.isMobile()) {
  171. return '0'
  172. }
  173. if (this.sidebarOpened) {
  174. return '180px'
  175. }
  176. return '80px'
  177. },
  178. playerOptions () {
  179. const playerOptions = {
  180. playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  181. autoplay: true, // 如果true,浏览器准备好时开始回放。
  182. muted: false, // 默认情况下将会消除任何音频。
  183. loop: false, // 导致视频一结束就重新开始。
  184. preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
  185. language: 'zh-CN',
  186. aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
  187. fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
  188. sources: [{
  189. type: '', // 这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
  190. src: '' // url地址
  191. }],
  192. poster: '../assets/bg_movie@2x.png', // 你的封面地址
  193. // width: document.documentElement.clientWidth, //播放器宽度
  194. notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  195. controlBar: {
  196. timeDivider: true,
  197. durationDisplay: true,
  198. remainingTimeDisplay: false,
  199. fullscreenToggle: true // 全屏按钮
  200. }
  201. }
  202. // 当前展示是否为销售单模块
  203. if (this.nowRoute.indexOf('salesQuery') > -1) {
  204. playerOptions.sources[0].src = 'https://jianguan-images.oss-cn-beijing.aliyuncs.com/helpvideo/1xiaoshou.mp4'
  205. }
  206. // 当前展示是否为销售退货模块
  207. if (this.nowRoute.indexOf('salesReturn') > -1) {
  208. playerOptions.sources[0].src = 'https://jianguan-images.oss-cn-beijing.aliyuncs.com/helpvideo/2xiaoshoutuihuo.mp4'
  209. }
  210. // 当前展示是否为采购单管理模块
  211. if (this.nowRoute.indexOf('purchaseOrder') > -1) {
  212. playerOptions.sources[0].src = 'https://jianguan-images.oss-cn-beijing.aliyuncs.com/helpvideo/3caigou.mp4'
  213. }
  214. // 当前展示是否为采购退货模块
  215. if (this.nowRoute.indexOf('purchaseReturn') > -1) {
  216. playerOptions.sources[0].src = 'https://jianguan-images.oss-cn-beijing.aliyuncs.com/helpvideo/4caigoutuihuo.mp4'
  217. }
  218. return playerOptions
  219. }
  220. },
  221. watch: {
  222. sidebarOpened (val) {
  223. this.collapsed = !val
  224. },
  225. // 监听ws消息通知
  226. wsMessage (a, b) {
  227. if (a !== b && a) {
  228. // 新未读消息
  229. if (a.type == 'new_remind') {
  230. if (this.nowRoute.indexOf('notice') < 0) {
  231. this.getNotes()
  232. }
  233. // 播放音效
  234. this.playAudio()
  235. }
  236. }
  237. },
  238. // 打印预览
  239. '$store.state.app.showPdfPrintView' (newValue, oldValue) {
  240. if (newValue) {
  241. this.showPdfView = newValue
  242. this.$nextTick(() => {
  243. this.$refs.pdfview.setData(this.$store.state.app.pdfPrintList)
  244. })
  245. }
  246. },
  247. // 选择打印机
  248. '$store.state.app.showSelectPrint' (newValue, oldValue) {
  249. if (newValue) {
  250. this.showSelectPrint = newValue
  251. }
  252. }
  253. },
  254. created () {
  255. if (this.mainMenu) {
  256. this.menus = this.mainMenu.find((item) => item.path === '/').children
  257. } else {
  258. // 没有权限时只显示首页
  259. const noqx = asyncRouterMap.find((item) => item.path === '/').children
  260. this.menus = [noqx.find(item => item.path === '/home')]
  261. }
  262. // 重置主题,字体,布局
  263. this.collapsed = !this.sidebarOpened
  264. this.$store.dispatch('ToggleMultiTab', true)
  265. this.$store.dispatch('ToggleColor', '#2A86F4')
  266. this.$store.dispatch('ToggleTheme', localStorage.getItem('DEFAULT_THEME') || 'dark')
  267. this.$store.dispatch('ToggleFontSize', localStorage.getItem('DEFAULT_FONT_SIZE') || 'small')
  268. // 判断是否是当月25日后
  269. this.$store.state.app.isLastDayForMonth = moment().date() >= 25
  270. if (this.$store.state.app.isLastDayForMonth && this.$hasPermissions('M_mothEndTips')) {
  271. this.$notification.warning({
  272. message: '提示',
  273. description: `临到月底了,请尽快处理系统中没有完结的单据!`
  274. })
  275. }
  276. // 打印设置
  277. this.$store.commit('SET_pdfPrintList', [])
  278. this.$store.commit('SET_showPdfPrint', false)
  279. this.$store.commit('SET_showSelectPrint', false)
  280. this.$store.commit('SET_printLoading', false)
  281. this.$store.commit('SET_printDefNeedle', localStorage.getItem('DEFAULT_PRINT_NEEDLE') || undefined)
  282. this.$store.commit('SET_printDefInk', localStorage.getItem('DEFAULT_PRINT_INK') || undefined)
  283. // 消息通知
  284. this.getNotes()
  285. // 购物车
  286. this.getCartList()
  287. },
  288. mounted () {
  289. const userAgent = navigator.userAgent
  290. if (userAgent.indexOf('Edge') > -1) {
  291. this.$nextTick(() => {
  292. this.collapsed = !this.collapsed
  293. setTimeout(() => {
  294. this.collapsed = !this.collapsed
  295. }, 16)
  296. })
  297. }
  298. },
  299. methods: {
  300. ...mapActions([
  301. 'setSidebar',
  302. 'getMessageList', // 查询列表
  303. 'getCartList', // 购物车列表
  304. 'hasRead' // 设置已读
  305. ]),
  306. reloadView () {},
  307. // 关闭视频弹窗
  308. closeVido () {
  309. store.commit('IS_ShOW_VIDEO', false)
  310. },
  311. toggle () {
  312. this.collapsed = !this.collapsed
  313. this.setSidebar(!this.collapsed)
  314. triggerWindowResizeEvent()
  315. },
  316. paddingCalc () {
  317. let left = ''
  318. if (this.sidebarOpened) {
  319. left = this.isDesktop() ? '160px' : '80px'
  320. } else {
  321. left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
  322. }
  323. return left
  324. },
  325. menuSelect () {
  326. },
  327. drawerClose () {
  328. this.collapsed = false
  329. },
  330. playAudio () {
  331. this.$refs.audio.currentTime = 0// 从头开始播放
  332. this.$refs.audio.play() // 播放
  333. },
  334. // 获取最新消息
  335. getNotes () {
  336. this.getMessageList({
  337. pageNo: 1,
  338. pageSize: 5,
  339. notice: {
  340. type: 'tx'
  341. },
  342. readFlag: 0
  343. }).then((res) => {
  344. if (res.status == 200) {
  345. const data = res.data
  346. for (var i = 0; i < data.list.length; i++) {
  347. if (data.list[i].notice.extInfo) {
  348. data.list[i].notice.extInfo = JSON.parse(data.list[i].notice.extInfo)
  349. }
  350. }
  351. this.notesList = res.data.list
  352. } else {
  353. this.notesList = []
  354. }
  355. })
  356. },
  357. toAction (data) {
  358. console.log(this.nowRoute)
  359. // 急送订单
  360. if (data.notice.extInfo.bizType == 'TEMP_ORDER') {
  361. if (this.nowRoute.indexOf('salesManagement/salesQuery/detail') >= 0) {
  362. this.$router.go(-1)
  363. }
  364. setTimeout(() => {
  365. this.$router.push({ name: 'salesDetail', params: { sn: data.notice.extInfo.bizSn } })
  366. }, 500)
  367. }
  368. // 补货订单
  369. if (data.notice.extInfo.bizType == 'SHELF_REPLENISH') {
  370. this.$router.push({ name: 'replenishmentManagement', query: { bizType: 'ALL' } })
  371. }
  372. // 货架订单
  373. if (data.notice.extInfo.bizType == 'SHELF_ORDER') {
  374. if (this.nowRoute.indexOf('numsGoodsShelves/shelfOrder/shelfOrderDetail') >= 0) {
  375. this.$router.go(-1)
  376. }
  377. setTimeout(() => {
  378. this.$router.push({ name: 'shelfOrderDetail', params: { sn: data.notice.extInfo.bizSn } })
  379. }, 500)
  380. }
  381. // 货架异常
  382. if (data.notice.extInfo.bizType == 'SHELF_WARN') {
  383. if (this.nowRoute.indexOf('numsGoodsShelves/shelfOrder/list') >= 0) {
  384. this.$router.go(-1)
  385. }
  386. setTimeout(() => {
  387. this.$router.push({ name: 'shelfOrderList', query: { bizType: 'SHELF_WARN', shelfSn: data.notice.extInfo.bizSn } })
  388. }, 500)
  389. }
  390. // 设置已读
  391. this.setRead(data)
  392. },
  393. // 设置已读
  394. setRead (row) {
  395. this.hasRead({ msg_id: row.id }).then(res => {
  396. // 刷新列表
  397. if (res.status == 200) {
  398. this.getNotes()
  399. }
  400. })
  401. },
  402. toNotes () {
  403. this.$router.push({ path: '/notice' })
  404. },
  405. noDoNotes () {
  406. this.notesList = []
  407. }
  408. }
  409. }
  410. </script>
  411. <style lang="less">
  412. @import url('../components/global.less');
  413. .notes-box{
  414. position:fixed;
  415. right:0;
  416. bottom:0;
  417. min-width:400px;
  418. z-index: 10000;
  419. box-shadow: -8px 7px 11px 2px #d7d7d7;
  420. .ant-alert-with-description .ant-alert-close-icon{
  421. top: 13px;
  422. }
  423. .ant-alert, .ant-alert-info{
  424. padding: 10px 30px!important;
  425. }
  426. .ant-alert .ant-alert-icon, .ant-alert-info .ant-alert-icon{
  427. top: 16px !important;
  428. left: 10px !important;
  429. font-size: 18px;
  430. }
  431. .ant-alert-with-description .ant-alert-description{
  432. font-size: 14px;
  433. }
  434. .notes-footer{
  435. display:flex;
  436. background: #fff;
  437. border: 1px solid #eee;
  438. border-radius: 5px 5px 0 0;
  439. > div{
  440. width: 50%;
  441. &:first-child{
  442. border-right:1px solid #eee;
  443. }
  444. }
  445. .notes-more{
  446. padding: 10px;
  447. text-align:center;
  448. color:#00aaff;
  449. font-size: 14px;
  450. cursor:pointer;
  451. }
  452. }
  453. }
  454. </style>