BasicLayout.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  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 :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 v-if="isShowVideoVal">
  48. <a-modal
  49. v-model="isShowVideoVal"
  50. wrapClassName="vidio_cont"
  51. :footer="null"
  52. centered
  53. :maskClosable="false"
  54. :destroyOnClose="true"
  55. :width="1000"
  56. @cancel="closeVido">
  57. <video-player
  58. class="video-player vjs-custom-skin"
  59. ref="videoPlayer"
  60. :playsinline="true"
  61. :options="playerOptions"
  62. ></video-player>
  63. </a-modal>
  64. </div>
  65. <!-- pdf 预览 -->
  66. <pdfViewModal ref="pdfview" :openModal="showPdfView" @cancel="showPdfView=false"></pdfViewModal>
  67. <!-- 选择打印机 -->
  68. <selectPrint ref="selectPrint" :openModal="showSelectPrint" @cancel="showSelectPrint=false"></selectPrint>
  69. <!-- layout footer -->
  70. <a-layout-footer>
  71. <!-- <global-footer /> -->
  72. </a-layout-footer>
  73. <!-- Setting Drawer (show in development mode) -->
  74. <setting-drawer></setting-drawer>
  75. </a-layout>
  76. </a-layout>
  77. </template>
  78. <script>
  79. import moment from 'moment'
  80. import { triggerWindowResizeEvent } from '@/utils/util'
  81. import { mapState, mapActions, mapGetters } from 'vuex'
  82. import { mixin, mixinDevice, commonMixin } from '@/utils/mixin'
  83. import config from '@/config/defaultSettings'
  84. import pdfViewModal from '@/views/common/pdfViewModal.vue'
  85. import selectPrint from '@/views/common/selectPrint.vue'
  86. import RouteView from './RouteView'
  87. import SideMenu from '@/components/Menu/SideMenu'
  88. import GlobalHeader from '@/components/GlobalHeader'
  89. import GlobalFooter from '@/components/GlobalFooter'
  90. import SettingDrawer from '@/components/SettingDrawer'
  91. import { asyncRouterMap } from '@/config/router.config'
  92. import store from '@/store'
  93. export default {
  94. name: 'BasicLayout',
  95. mixins: [mixin, mixinDevice, commonMixin],
  96. provide () {
  97. return {
  98. reloadView: this.reloadView,
  99. setIsHomeNav: this.setIsHomeNav
  100. }
  101. },
  102. components: {
  103. RouteView,
  104. SideMenu,
  105. GlobalHeader,
  106. GlobalFooter,
  107. SettingDrawer,
  108. pdfViewModal,
  109. selectPrint
  110. },
  111. data () {
  112. return {
  113. production: config.production,
  114. collapsed: false,
  115. menus: [],
  116. isRouterAlive: true,
  117. showPdfView: false,
  118. showSelectPrint: false
  119. }
  120. },
  121. computed: {
  122. ...mapState({
  123. // 动态主路由
  124. mainMenu: state => state.permission.routers,
  125. multiTab: state => state.app.multiTab,
  126. fixedHeader: state => state.app.fixedHeader
  127. }),
  128. ...mapGetters(['nowRoute', 'isShowVideo']),
  129. isShowVideoVal: {
  130. get () {
  131. return this.$store.state.app.isShowVideo
  132. },
  133. set (newValue) {
  134. this.$store.state.app.isShowVideo = newValue
  135. }
  136. },
  137. contentPaddingLeft () {
  138. if (!this.fixSidebar || this.isMobile()) {
  139. return '0'
  140. }
  141. if (this.sidebarOpened) {
  142. return '180px'
  143. }
  144. return '80px'
  145. },
  146. playerOptions () {
  147. const playerOptions = {
  148. playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  149. autoplay: true, // 如果true,浏览器准备好时开始回放。
  150. muted: false, // 默认情况下将会消除任何音频。
  151. loop: false, // 导致视频一结束就重新开始。
  152. preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
  153. language: 'zh-CN',
  154. aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
  155. fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
  156. sources: [{
  157. type: '', // 这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
  158. src: '' // url地址
  159. }],
  160. poster: '../assets/bg_movie@2x.png', // 你的封面地址
  161. // width: document.documentElement.clientWidth, //播放器宽度
  162. notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  163. controlBar: {
  164. timeDivider: true,
  165. durationDisplay: true,
  166. remainingTimeDisplay: false,
  167. fullscreenToggle: true // 全屏按钮
  168. }
  169. }
  170. const isSaleOrder = this.nowRoute.indexOf('salesQuery') > -1 // 当前展示是否为销售单模块
  171. const isSalesReturn = this.nowRoute.indexOf('salesReturn') > -1 // 当前展示是否为销售退货模块
  172. const isPurchaseOrder = this.nowRoute.indexOf('purchaseOrder') > -1 // 当前展示是否为采购单管理模块
  173. const isPurchaseReturn = this.nowRoute.indexOf('purchaseReturn') > -1 // 当前展示是否为采购退货模块
  174. if (isSaleOrder) {
  175. playerOptions.sources[0].src = 'https://jianguan-images.oss-cn-beijing.aliyuncs.com/helpvideo/1xiaoshou.mp4'
  176. }
  177. if (isSalesReturn) {
  178. playerOptions.sources[0].src = 'https://jianguan-images.oss-cn-beijing.aliyuncs.com/helpvideo/2xiaoshoutuihuo.mp4'
  179. }
  180. if (isPurchaseOrder) {
  181. playerOptions.sources[0].src = 'https://jianguan-images.oss-cn-beijing.aliyuncs.com/helpvideo/3caigou.mp4'
  182. }
  183. if (isPurchaseReturn) {
  184. playerOptions.sources[0].src = 'https://jianguan-images.oss-cn-beijing.aliyuncs.com/helpvideo/4caigoutuihuo.mp4'
  185. }
  186. return playerOptions
  187. }
  188. },
  189. watch: {
  190. sidebarOpened (val) {
  191. this.collapsed = !val
  192. },
  193. '$store.state.app.showPdfPrintView' (newValue, oldValue) {
  194. console.log(newValue)
  195. if (newValue) {
  196. this.showPdfView = newValue
  197. this.$nextTick(() => {
  198. this.$refs.pdfview.setData(this.$store.state.app.pdfPrintList)
  199. })
  200. }
  201. },
  202. '$store.state.app.showSelectPrint' (newValue, oldValue) {
  203. console.log(newValue)
  204. if (newValue) {
  205. this.showSelectPrint = newValue
  206. }
  207. }
  208. },
  209. created () {
  210. if (this.mainMenu) {
  211. this.menus = this.mainMenu.find((item) => item.path === '/').children
  212. } else {
  213. // 没有权限时只显示首页
  214. const noqx = asyncRouterMap.find((item) => item.path === '/').children
  215. this.menus = [noqx.find(item => item.path === '/home')]
  216. }
  217. // 重置主题,字体,布局
  218. this.collapsed = !this.sidebarOpened
  219. this.$store.dispatch('ToggleMultiTab', true)
  220. this.$store.dispatch('ToggleColor', '#2A86F4')
  221. this.$store.dispatch('ToggleTheme', localStorage.getItem('DEFAULT_THEME') || 'dark')
  222. this.$store.dispatch('ToggleFontSize', localStorage.getItem('DEFAULT_FONT_SIZE') || 'small')
  223. // 判断是否是当月25日后
  224. this.$store.state.app.isLastDayForMonth = moment().date() >= 25
  225. if (this.$store.state.app.isLastDayForMonth && this.$hasPermissions('M_mothEndTips')) {
  226. this.$notification.warning({
  227. message: '提示',
  228. description: `临到月底了,请尽快处理系统中没有完结的单据!`
  229. })
  230. }
  231. // 打印设置
  232. this.$store.commit('SET_pdfPrintList', [])
  233. this.$store.commit('SET_showPdfPrint', false)
  234. this.$store.commit('SET_showSelectPrint', false)
  235. this.$store.commit('SET_printLoading', false)
  236. this.$store.commit('SET_printDefNeedle', localStorage.getItem('DEFAULT_PRINT_NEEDLE') || undefined)
  237. this.$store.commit('SET_printDefInk', localStorage.getItem('DEFAULT_PRINT_INK') || undefined)
  238. },
  239. mounted () {
  240. const userAgent = navigator.userAgent
  241. if (userAgent.indexOf('Edge') > -1) {
  242. this.$nextTick(() => {
  243. this.collapsed = !this.collapsed
  244. setTimeout(() => {
  245. this.collapsed = !this.collapsed
  246. }, 16)
  247. })
  248. }
  249. },
  250. methods: {
  251. ...mapActions(['setSidebar']),
  252. // 关闭视频弹窗
  253. closeVido () {
  254. store.commit('IS_ShOW_VIDEO', false)
  255. },
  256. toggle () {
  257. this.collapsed = !this.collapsed
  258. this.setSidebar(!this.collapsed)
  259. triggerWindowResizeEvent()
  260. },
  261. paddingCalc () {
  262. let left = ''
  263. if (this.sidebarOpened) {
  264. left = this.isDesktop() ? '160px' : '80px'
  265. } else {
  266. left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
  267. }
  268. return left
  269. },
  270. menuSelect () {
  271. },
  272. drawerClose () {
  273. this.collapsed = false
  274. },
  275. reloadView () {
  276. this.isRouterAlive = false
  277. this.$nextTick(() => {
  278. this.isRouterAlive = true
  279. })
  280. }
  281. }
  282. }
  283. </script>
  284. <style lang="less">
  285. @import url('../components/global.less');
  286. </style>