From 72fd6cbea51457ebf411ef12b9de161019d1803b Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 27 十二月 2022 14:03:35 +0800
Subject: [PATCH] 1.点击按钮全屏切换2.新增采购订单菜单
---
src/views/cggl/cgdd.vue | 0
src/icons/svg/exit-fullscreen.svg | 1
vue.config.js | 56 ++++++++-----
src/layout/components/Navbar.vue | 35 ++++----
package.json | 5
src/components/Screenfull/index.vue | 96 ++++++++++++++++++++++++
src/icons/svg/fullscreen.svg | 1
src/components/HeaderSearch/index.vue | 16 +--
src/router/index.js | 18 ++++
9 files changed, 176 insertions(+), 52 deletions(-)
diff --git a/package.json b/package.json
index 686353e..4d32fa5 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,7 @@
"vue-easy-print": "0.0.8",
"vue-print-nb": "^1.7.5",
"vue-router": "3.0.6",
- "vuedraggable": "^2.24.3",
- "vuex": "3.1.0"
+ "vuedraggable": "^2.24.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.4",
@@ -60,12 +59,14 @@
"runjs": "4.3.2",
"sass": "1.26.8",
"sass-loader": "8.0.2",
+ "screenfull": "^6.0.2",
"script-ext-html-webpack-plugin": "2.1.3",
"serve-static": "1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.2",
"vue-marquee-tips": "^1.0.8",
"vue-template-compiler": "2.6.10",
+ "vuex": "^3.6.2",
"webpack-dev-server": "^3.0.0"
},
"browserslist": [
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index 20a42aa..b93df7e 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -1,6 +1,6 @@
<template>
<div :class="{'show':show}" class="header-search">
- <svg-icon class-name="search-icon" icon-class="search" style="color:#A7A7A7;" @click.stop="click" />
+ <svg-icon class-name="search-icon" icon-class="search" style="color:#A7A7A7;" @click.stop="click"/>
<el-select
ref="headerSearchSelect"
v-model="search"
@@ -13,7 +13,8 @@
@change="change"
>
- <el-option v-for="item in options" :key="item.path" :value="item" :label="item.item.title.join('>')" />
+ <el-option v-show="item.item.title.length>1" v-for="item in options" :key="item.path" :value="item"
+ :label="item.item.title.join('>')"/>
</el-select>
</div>
</template>
@@ -57,8 +58,6 @@
},
mounted() {
this.searchPool = this.generateRoutes(this.routes)
-
- console.log(this.searchPool)
},
methods: {
click() {
@@ -73,7 +72,6 @@
this.show = false
},
change(val) {
- console.log(val, 1)
this.$router.push(val.item.path)
this.search = ''
this.options = []
@@ -101,12 +99,13 @@
// Filter out the routes that can be displayed in the sidebar
// And generate the internationalized title
generateRoutes(routes, basePath = '/', prefixTitle = []) {
- // console.log(routes, 1)
let res = []
for (const router of routes) {
// skip hidden router
- if (router.hidden) { continue }
+ if (router.hidden) {
+ continue
+ }
const data = {
path: path.resolve(basePath, router.path),
@@ -131,7 +130,6 @@
}
}
}
- // console.log(res, 2)
return res
},
querySearch(query) {
@@ -155,7 +153,7 @@
vertical-align: middle;
}
- .svg-icon:hover{
+ .svg-icon:hover {
color: #42b983 !important;
}
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
new file mode 100644
index 0000000..f8d8b21
--- /dev/null
+++ b/src/components/Screenfull/index.vue
@@ -0,0 +1,96 @@
+<template>
+ <div>
+ <svg-icon class="iconFull" style="color: rgb(170,170,170)" :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
+ </div>
+</template>
+
+<script>
+import screenfull from 'screenfull'
+
+export default {
+ name: 'Screenfull',
+ data() {
+ return {
+ isFullscreen: false
+ }
+ },
+ mounted() {
+ this.init()
+ },
+ beforeDestroy() {
+ this.destroy()
+ },
+ methods: {
+ click() {
+ // console.log(screenfull,1);
+ // if (!screenfull.enabled) {
+ // this.$message({
+ // message: 'you browser can not work',
+ // type: 'warning'
+ // })
+ // return false
+ // }
+ this.isFullscreen= !this.isFullscreen;
+ screenfull.toggle()
+
+ // let element = document.documentElement;
+ // if (this.isFullscreen) {
+ // if (document.exitFullscreen) {
+ // document.exitFullscreen();
+ // } else if (document.webkitCancelFullScreen) {
+ // document.webkitCancelFullScreen();
+ // } else if (document.mozCancelFullScreen) {
+ // document.mozCancelFullScreen();
+ // } else if (document.msExitFullscreen) {
+ // document.msExitFullscreen();
+ // }
+ // } else {
+ // if (element.requestFullscreen) {
+ // element.requestFullscreen();
+ // } else if (element.webkitRequestFullScreen) {
+ // element.webkitRequestFullScreen();
+ // } else if (element.mozRequestFullScreen) {
+ // element.mozRequestFullScreen();
+ // } else if (element.msRequestFullscreen) {
+ // // IE11
+ // element.msRequestFullscreen();
+ // }
+ // }
+ // this.isFullscreen= !this.isFullscreen;
+
+
+
+
+ },
+ change() {
+ this.isFullscreen = screenfull.isFullscreen
+ // this.isFullscreen = !this.isFullscreen
+ },
+ init() {
+ if (screenfull.enabled) {
+ screenfull.on('change', this.change)
+ }
+ },
+ destroy() {
+ if (screenfull.enabled) {
+ screenfull.off('change', this.change)
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+.screenfull-svg {
+ display: inline-block;
+ cursor: pointer;
+ fill: #5a5e66;;
+ width: 20px;
+ height: 20px;
+ vertical-align: 10px;
+}
+
+::v-deep .iconFull:hover{
+ color: #42b983 !important;
+}
+</style>
diff --git a/src/icons/svg/exit-fullscreen.svg b/src/icons/svg/exit-fullscreen.svg
new file mode 100644
index 0000000..485c128
--- /dev/null
+++ b/src/icons/svg/exit-fullscreen.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/fullscreen.svg b/src/icons/svg/fullscreen.svg
new file mode 100644
index 0000000..0e86b6f
--- /dev/null
+++ b/src/icons/svg/fullscreen.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>
\ No newline at end of file
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index cafa44b..86e1c95 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,22 +1,19 @@
<template>
<div class="navbar">
- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+ <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar"/>
- <breadcrumb class="breadcrumb-container" />
+ <breadcrumb class="breadcrumb-container"/>
<div class="right-menu">
- <template v-if="device!=='mobile'">
- <search id="header-search" class="right-menu-item" />
-
+<!-- <template v-if="device!=='mobile'">-->
+ <template>
+ <search id="header-search" class="right-menu-item"/>
<!-- <error-log class="errLog-container right-menu-item hover-effect" />-->
-
- <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
-
+ <screenfull id="screenfull" class="right-menu-item hover-effect"/>
<!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
<!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
<!-- </el-tooltip>-->
-
</template>
<el-dropdown class="avatar-container" trigger="click">
@@ -24,7 +21,7 @@
<!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
<div style="display: flex;align-items: center;margin-top: -5px">
- <i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7" />
+ <i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7"/>
<div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA">{{ username }}</div>
</div>
@@ -67,10 +64,10 @@
<!-- <div> {{ username }}</div>-->
<!-- </el-form-item>-->
<el-form-item label="鍘熷瘑鐮侊細" prop="password">
- <el-input v-model="form.password" style="width: 220px;" />
+ <el-input v-model="form.password" style="width: 220px;"/>
</el-form-item>
<el-form-item label="鏂板瘑鐮侊細" prop="newpassword">
- <el-input v-model="form.newpassword" style="width: 220px;" />
+ <el-input v-model="form.newpassword" style="width: 220px;"/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
@@ -84,19 +81,21 @@
</template>
<script>
-import { mapGetters } from 'vuex'
+import {mapGetters} from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
-import { getCookie } from '@/utils/auth'
-import { UpdateUserPassword } from '@/api/user'
+import {getCookie} from '@/utils/auth'
+import {UpdateUserPassword} from '@/api/user'
import Search from '@/components/HeaderSearch'
+import Screenfull from '@/components/Screenfull'
const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
components: {
Breadcrumb,
Hamburger,
- Search
+ Search,
+ Screenfull
},
computed: {
...mapGetters([
@@ -142,10 +141,10 @@
dialogVisible: false,
formRules: {
password: [
- { required: true, validator: validatePassword1, trigger: ['blur', 'change'] }
+ {required: true, validator: validatePassword1, trigger: ['blur', 'change']}
],
newpassword: [
- { required: true, validator: validatePassword2, trigger: ['blur', 'change'] }
+ {required: true, validator: validatePassword2, trigger: ['blur', 'change']}
]
}
}
diff --git a/src/router/index.js b/src/router/index.js
index b1d19c1..51b5067 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -634,6 +634,24 @@
meta: { code: '1105', title: '杞﹂棿鍏憡', icon: '', keepAlive: true }
}
]
+ },
+ {
+ path: '/cggl',
+ component: Layout,
+ redirect: '/cggl/cgdd',
+ name: '閲囪喘绠＄悊',
+ code: '1000',
+ meta: { code: '1000', title: '閲囪喘绠＄悊', icon: 'xtsz' },
+ alwaysShow: true,
+ children: [
+ {
+ path: 'cgdd',
+ name: 'CGDDCancel',
+ code: '1201',
+ component: () => import('@/views/cggl/cgdd'),
+ meta: { code: '1201', title: '閲囪喘璁㈠崟', icon: '', keepAlive: true }
+ },
+ ]
}
]
diff --git a/src/views/cggl/cgdd.vue b/src/views/cggl/cgdd.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/views/cggl/cgdd.vue
diff --git a/vue.config.js b/vue.config.js
index 5ffb87c..b50c123 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,6 +2,7 @@
const path = require('path')
const defaultSettings = require('./src/settings.js')
const webpack = require('webpack')
+
function resolve(dir) {
return path.join(__dirname, dir)
}
@@ -40,6 +41,7 @@
// }
// }
// },
+ transpileDependencies: ['screenfull'],
productionSourceMap: false,
devServer: {
port: port,
@@ -76,7 +78,15 @@
jQuery: 'jquery',
$: 'jquery'
})
- ]
+ ],
+ // module: {
+ // rules: [
+ // {
+ // test: /.vue$/,
+ // loader: 'vue-loader'
+ // }
+ // ]
+ // }
},
chainWebpack(config) {
// it can improve the speed of the first screen, it is recommended to turn on preload
@@ -117,34 +127,34 @@
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
- // `runtime` must same as runtimeChunk name. default is `runtime`
+ // `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
- chunks: 'all',
- cacheGroups: {
- libs: {
- name: 'chunk-libs',
- test: /[\\/]node_modules[\\/]/,
- priority: 10,
- chunks: 'initial' // only package third parties that are initially dependent
- },
- elementUI: {
- name: 'chunk-elementUI', // split elementUI into a single package
- priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
- test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
- },
- commons: {
- name: 'chunk-commons',
- test: resolve('src/components'), // can customize your rules
- minChunks: 3, // minimum common number
- priority: 5,
- reuseExistingChunk: true
- }
+ chunks: 'all',
+ cacheGroups: {
+ libs: {
+ name: 'chunk-libs',
+ test: /[\\/]node_modules[\\/]/,
+ priority: 10,
+ chunks: 'initial' // only package third parties that are initially dependent
+ },
+ elementUI: {
+ name: 'chunk-elementUI', // split elementUI into a single package
+ priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+ test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+ },
+ commons: {
+ name: 'chunk-commons',
+ test: resolve('src/components'), // can customize your rules
+ minChunks: 3, // minimum common number
+ priority: 5,
+ reuseExistingChunk: true
}
- })
+ }
+ })
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single')
}
--
Gitblit v1.9.3