BasicLayout.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  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: '24px 20px 0', paddingTop: multiTab&&fixedHeader ? '66px' : (!multiTab&&fixedHeader?'45px':'0') }">
  41. <transition name="page-transition">
  42. <route-view/>
  43. </transition>
  44. </a-layout-content>
  45. <!-- 视频播放弹窗 -->
  46. <a-modal
  47. v-model="isShowVideo"
  48. wrapClassName="vidio_cont"
  49. :footer="null"
  50. centered
  51. destroyOnClose
  52. :width="1000"
  53. @cancel="closeVido">
  54. <video-player
  55. class="video-player vjs-custom-skin"
  56. ref="videoPlayer"
  57. :playsinline="true"
  58. :options="playerOptions"
  59. ></video-player>
  60. </a-modal>
  61. <!-- layout footer -->
  62. <a-layout-footer>
  63. <!-- <global-footer /> -->
  64. </a-layout-footer>
  65. <!-- Setting Drawer (show in development mode) -->
  66. <!-- <setting-drawer v-if="!production"></setting-drawer> -->
  67. </a-layout>
  68. </a-layout>
  69. </template>
  70. <script>
  71. import { triggerWindowResizeEvent } from '@/utils/util'
  72. import { mapState, mapActions, mapGetters } from 'vuex'
  73. import { mixin, mixinDevice } from '@/utils/mixin'
  74. import config from '@/config/defaultSettings'
  75. import RouteView from './RouteView'
  76. import SideMenu from '@/components/Menu/SideMenu'
  77. import GlobalHeader from '@/components/GlobalHeader'
  78. import GlobalFooter from '@/components/GlobalFooter'
  79. import SettingDrawer from '@/components/SettingDrawer'
  80. import { asyncRouterMap } from '@/config/router.config'
  81. import store from '@/store'
  82. export default {
  83. name: 'BasicLayout',
  84. mixins: [mixin, mixinDevice],
  85. components: {
  86. RouteView,
  87. SideMenu,
  88. GlobalHeader,
  89. GlobalFooter,
  90. SettingDrawer
  91. },
  92. data () {
  93. return {
  94. production: config.production,
  95. collapsed: false,
  96. menus: []
  97. }
  98. },
  99. computed: {
  100. ...mapState({
  101. // 动态主路由
  102. mainMenu: state => state.permission.routers,
  103. multiTab: state => state.app.multiTab,
  104. fixedHeader: state => state.app.fixedHeader
  105. }),
  106. ...mapGetters(['nowRoute', 'isShowVideo']),
  107. contentPaddingLeft () {
  108. if (!this.fixSidebar || this.isMobile()) {
  109. return '0'
  110. }
  111. if (this.sidebarOpened) {
  112. return '230px'
  113. }
  114. return '80px'
  115. },
  116. playerOptions () {
  117. const playerOptions = {
  118. playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  119. autoplay: true, // 如果true,浏览器准备好时开始回放。
  120. muted: false, // 默认情况下将会消除任何音频。
  121. loop: false, // 导致视频一结束就重新开始。
  122. preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
  123. language: 'zh-CN',
  124. aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
  125. fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
  126. sources: [{
  127. type: '', // 这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
  128. src: '' // url地址
  129. }],
  130. poster: '../assets/bg_movie@2x.png', // 你的封面地址
  131. // width: document.documentElement.clientWidth, //播放器宽度
  132. notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  133. controlBar: {
  134. timeDivider: true,
  135. durationDisplay: true,
  136. remainingTimeDisplay: false,
  137. fullscreenToggle: true // 全屏按钮
  138. }
  139. }
  140. const isSaleOrder = this.nowRoute.indexOf('salesQuery') > -1 // 当前展示是否为销售单模块
  141. const isSalesReturn = this.nowRoute.indexOf('salesReturn') > -1 // 当前展示是否为销售退货模块
  142. const isPurchaseOrder = this.nowRoute.indexOf('purchaseOrder') > -1 // 当前展示是否为采购单管理模块
  143. const isPurchaseReturn = this.nowRoute.indexOf('purchaseReturn') > -1 // 当前展示是否为采购退货模块
  144. if (isSaleOrder) {
  145. playerOptions.sources[0].src = 'https://jianguan-images.oss-cn-beijing.aliyuncs.com/helpvideo/1%E6%B1%BD%E9%85%8D%E9%94%80%E5%94%AE%E9%9F%B3%E9%A2%91%E6%96%87%E5%AD%97%E5%B7%B2%E5%8A%A0.mp4'
  146. }
  147. if (isSalesReturn) {
  148. playerOptions.sources[0].src = 'https://jianguan-images.oss-cn-beijing.aliyuncs.com/helpvideo/2%E6%B1%BD%E9%85%8D%E9%94%80%E5%94%AE%E9%80%80%E8%B4%A7%E9%9F%B3%E9%A2%91%E6%96%87%E5%AD%97.mp4'
  149. }
  150. if (isPurchaseOrder) {
  151. playerOptions.sources[0].src = 'https://jianguan-images.oss-cn-beijing.aliyuncs.com/helpvideo/3%E6%B1%BD%E9%85%8D%E9%87%87%E8%B4%AD%E9%9F%B3%E9%A2%91%E6%96%87%E5%AD%97.mp4'
  152. }
  153. if (isPurchaseReturn) {
  154. playerOptions.sources[0].src = 'https://jianguan-images.oss-cn-beijing.aliyuncs.com/helpvideo/4%E6%B1%BD%E9%85%8D%E9%87%87%E8%B4%AD%E9%80%80%E8%B4%A7%E6%96%87%E5%AD%97%E8%AF%AD%E9%9F%B3.mp4'
  155. }
  156. // console.log(playerOptions, 'playerOptions')
  157. return playerOptions
  158. }
  159. },
  160. watch: {
  161. sidebarOpened (val) {
  162. this.collapsed = !val
  163. }
  164. },
  165. created () {
  166. if (this.mainMenu) {
  167. this.menus = this.mainMenu.find((item) => item.path === '/').children
  168. } else {
  169. // 没有权限时只显示首页
  170. const noqx = asyncRouterMap.find((item) => item.path === '/').children
  171. this.menus = [noqx.find(item => item.path === '/home')]
  172. }
  173. this.collapsed = !this.sidebarOpened
  174. this.$store.dispatch('ToggleMultiTab', true)
  175. this.$store.dispatch('ToggleColor', '#1890FF')
  176. },
  177. mounted () {
  178. const userAgent = navigator.userAgent
  179. if (userAgent.indexOf('Edge') > -1) {
  180. this.$nextTick(() => {
  181. this.collapsed = !this.collapsed
  182. setTimeout(() => {
  183. this.collapsed = !this.collapsed
  184. }, 16)
  185. })
  186. }
  187. },
  188. methods: {
  189. ...mapActions(['setSidebar']),
  190. // 关闭视频弹窗
  191. closeVido () {
  192. store.commit('IS_ShOW_VIDEO', false)
  193. },
  194. toggle () {
  195. this.collapsed = !this.collapsed
  196. this.setSidebar(!this.collapsed)
  197. triggerWindowResizeEvent()
  198. },
  199. paddingCalc () {
  200. let left = ''
  201. if (this.sidebarOpened) {
  202. left = this.isDesktop() ? '230px' : '80px'
  203. } else {
  204. left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
  205. }
  206. return left
  207. },
  208. menuSelect () {
  209. },
  210. drawerClose () {
  211. this.collapsed = false
  212. }
  213. }
  214. }
  215. </script>
  216. <style lang="less">
  217. @import url('../components/global.less');
  218. @import url('../components/custom.less'); // 自定义样式文件
  219. /*
  220. * The following styles are auto-applied to elements with
  221. * transition="page-transition" when their visibility is toggled
  222. * by Vue.js.
  223. *
  224. * You can easily play with the page transition by editing
  225. * these styles.
  226. */
  227. .vidio_cont .ant-modal-body {
  228. padding: 0;
  229. }
  230. .vidio_cont .ant-modal-close-x {
  231. width: 36px;
  232. height: 36px;
  233. text-align: center;
  234. line-height: 36px;
  235. color: #fff;
  236. background-color: rgba(0, 0, 0, 0.6);
  237. border-radius: 50%;
  238. position: absolute;
  239. top: 10px;
  240. right: 10px;
  241. }
  242. .page-transition-enter {
  243. opacity: 0;
  244. }
  245. .page-transition-leave-active {
  246. opacity: 0;
  247. }
  248. .page-transition-enter .page-transition-container,
  249. .page-transition-leave-active .page-transition-container {
  250. -webkit-transform: scale(1.1);
  251. transform: scale(1.1);
  252. }
  253. .setting-drawer-content{
  254. .ant-drawer-content{
  255. overflow: visible
  256. }
  257. }
  258. </style>