组件文档
This commit is contained in:
commit
645f82b466
3
.browserslistrc
Normal file
3
.browserslistrc
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
18
.eslintrc.js
Normal file
18
.eslintrc.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'plugin:vue/essential',
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:prettier/recommended'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
parser: '@babel/eslint-parser'
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
5
.prettierrc.json
Normal file
5
.prettierrc.json
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "none"
|
||||||
|
}
|
||||||
24
README.md
Normal file
24
README.md
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# code-brick-wd
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
3
babel.config.js
Normal file
3
babel.config.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: ['@vue/cli-plugin-babel/preset']
|
||||||
|
}
|
||||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
19993
package-lock.json
generated
Normal file
19993
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
package.json
Normal file
35
package.json
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"name": "code-brick-wd",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"code-brick-zj": "^0.0.1",
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"element-ui": "^2.15.12",
|
||||||
|
"vue": "^2.6.14",
|
||||||
|
"vue-router": "^3.5.1",
|
||||||
|
"vuex": "^3.6.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-router": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-config-prettier": "^8.3.0",
|
||||||
|
"eslint-plugin-prettier": "^4.0.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"prettier": "^2.4.1",
|
||||||
|
"sass": "^1.32.7",
|
||||||
|
"sass-loader": "^12.0.0",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
src/App.vue
Normal file
15
src/App.vue
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#app {
|
||||||
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
130
src/components/HelloWorld.vue
Normal file
130
src/components/HelloWorld.vue
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<template>
|
||||||
|
<div class="hello">
|
||||||
|
<h1>{{ msg }}</h1>
|
||||||
|
<p>
|
||||||
|
For a guide and recipes on how to configure / customize this project,<br />
|
||||||
|
check out the
|
||||||
|
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
||||||
|
>vue-cli documentation</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
<h3>Installed CLI Plugins</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>babel</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>router</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>vuex</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>eslint</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Essential Links</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
|
||||||
|
>Forum</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
|
||||||
|
>Community Chat</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
|
||||||
|
>Twitter</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Ecosystem</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
|
||||||
|
>vue-router</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/vuejs/vue-devtools#vue-devtools"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>vue-devtools</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
|
||||||
|
>vue-loader</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/vuejs/awesome-vue"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>awesome-vue</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'HelloWorld',
|
||||||
|
props: {
|
||||||
|
msg: String
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped lang="scss">
|
||||||
|
h3 {
|
||||||
|
margin: 40px 0 0;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #42b983;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
12
src/layout/components/AppMain.vue
Normal file
12
src/layout/components/AppMain.vue
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<template>
|
||||||
|
<section>
|
||||||
|
<keep-alive>
|
||||||
|
<router-view />
|
||||||
|
</keep-alive>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'AppMain'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
66
src/layout/components/MenuList.vue
Normal file
66
src/layout/components/MenuList.vue
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<el-aside
|
||||||
|
v-if="leftMenuList.length > 0 ? true : false"
|
||||||
|
:width="variables.menuWidth"
|
||||||
|
class="menuBox"
|
||||||
|
>
|
||||||
|
<el-tabs
|
||||||
|
v-model="activeMenu"
|
||||||
|
tab-position="left"
|
||||||
|
class="menuContainer"
|
||||||
|
@tab-click="toggleMenu"
|
||||||
|
>
|
||||||
|
<el-tab-pane
|
||||||
|
v-for="(item, i) in leftMenuList"
|
||||||
|
:key="i"
|
||||||
|
:label="item.meta.title"
|
||||||
|
:name="item.name"
|
||||||
|
></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-aside>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import variables from '@/styles/variables.module.scss'
|
||||||
|
export default {
|
||||||
|
name: 'MenuList',
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
variables() {
|
||||||
|
return variables
|
||||||
|
},
|
||||||
|
leftMenuList() {
|
||||||
|
return this.$store.state.menu.leftMenuList
|
||||||
|
},
|
||||||
|
activeMenu: {
|
||||||
|
get: function () {
|
||||||
|
return this.$store.getters.activeMenu
|
||||||
|
},
|
||||||
|
set: function () {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
toggleMenu(e) {
|
||||||
|
this.$store.dispatch('menu/setActiveMenu', e.name)
|
||||||
|
// this.$router.push({ name: e.name })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
activeMenu: function (newVal) {
|
||||||
|
this.$router.push({ name: newVal })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/styles/variables.module.scss';
|
||||||
|
.menuBox {
|
||||||
|
background-color: $color-white;
|
||||||
|
.menuContainer {
|
||||||
|
height: calc(100vh - #{$navbarHeight});
|
||||||
|
width: $menuWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
90
src/layout/components/Navbar.vue
Normal file
90
src/layout/components/Navbar.vue
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
<template>
|
||||||
|
<div class="navbarContainer">
|
||||||
|
<div class="logoBox">
|
||||||
|
<img src="./../../assets/logo.png" alt="中建材" class="logoImg" />
|
||||||
|
<span class="title">组件使用</span>
|
||||||
|
</div>
|
||||||
|
<div class="fr">
|
||||||
|
<el-tabs
|
||||||
|
v-model="activeModule"
|
||||||
|
@tab-click="toggleModule"
|
||||||
|
class="topMenuBox fr"
|
||||||
|
>
|
||||||
|
<el-tab-pane
|
||||||
|
v-for="(item, i) in topModuleList"
|
||||||
|
:key="i"
|
||||||
|
:label="item.label"
|
||||||
|
:name="item.name"
|
||||||
|
></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
export default {
|
||||||
|
name: 'NavbarPage',
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['topModuleList']),
|
||||||
|
activeModule: {
|
||||||
|
get: function () {
|
||||||
|
return this.$store.getters.activeModule
|
||||||
|
},
|
||||||
|
set: function () {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$store.dispatch('menu/getTopModuleList')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleModule(e) {
|
||||||
|
if (e.name === 'home') {
|
||||||
|
this.$router.push({ path: '/home/index' })
|
||||||
|
}
|
||||||
|
// 加载左侧菜单并跳转第一个菜单的页面
|
||||||
|
const activeBox = { activeModule: e.name, activeMenu: '' }
|
||||||
|
this.$store.dispatch('menu/setActiveModule', activeBox)
|
||||||
|
},
|
||||||
|
logout() {
|
||||||
|
this.$router.push({ path: '/login' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
@import '@/styles/variables.module.scss';
|
||||||
|
.navbarContainer {
|
||||||
|
.logoBox {
|
||||||
|
float: left;
|
||||||
|
.logoImg {
|
||||||
|
height: 38px;
|
||||||
|
width: 38px;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-dropdown-link {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.topMenuBox {
|
||||||
|
margin-right: 20px;
|
||||||
|
.el-tabs__item {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-wrap::after {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.el-tabs__active-bar {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
3
src/layout/components/index.js
Normal file
3
src/layout/components/index.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export { default as AppMain } from './AppMain'
|
||||||
|
export { default as MenuList } from './MenuList'
|
||||||
|
export { default as Navbar } from './Navbar'
|
||||||
59
src/layout/index.vue
Normal file
59
src/layout/index.vue
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<template>
|
||||||
|
<el-container class="itemContainer">
|
||||||
|
<el-header>
|
||||||
|
<navbar />
|
||||||
|
</el-header>
|
||||||
|
<el-container class="sectionBox">
|
||||||
|
<menu-list />
|
||||||
|
<el-container>
|
||||||
|
<div class="app-container">
|
||||||
|
<app-main />
|
||||||
|
</div>
|
||||||
|
<el-footer height="38px">
|
||||||
|
<div class="footerFont">©中建材智能自动化研究院有限公司</div>
|
||||||
|
</el-footer>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { AppMain } from './components'
|
||||||
|
import MenuList from './components/MenuList'
|
||||||
|
import Navbar from './components/Navbar'
|
||||||
|
export default {
|
||||||
|
name: 'LayoutPage',
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
components: { AppMain, MenuList, Navbar }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/styles/variables.module.scss';
|
||||||
|
.itemContainer {
|
||||||
|
min-width: 1500px;
|
||||||
|
}
|
||||||
|
.el-header {
|
||||||
|
background-color: $color-primary-light-8;
|
||||||
|
line-height: $navbarHeight;
|
||||||
|
}
|
||||||
|
.el-footer {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.sectionBox {
|
||||||
|
height: calc(100vh - #{$navbarHeight});
|
||||||
|
background-color: $background-color-secondary;
|
||||||
|
.app-container {
|
||||||
|
height: calc(100vh - #{$navbarHeight} - #{$footerHeight} - 10px);
|
||||||
|
margin: 10px 10px 0;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: $color-white;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.footerFont {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: $footerHeight;
|
||||||
|
color: $color-text-secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
19
src/main.js
Normal file
19
src/main.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
import ElementUI from 'element-ui'
|
||||||
|
import 'element-ui/lib/theme-chalk/index.css'
|
||||||
|
import myComponents from 'code-brick-zj'
|
||||||
|
import '../theme/index.css' // 自定义主题包
|
||||||
|
import '@/styles/index.scss' // global css
|
||||||
|
Vue.use(ElementUI)
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
Vue.use(myComponents)
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: (h) => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
139
src/router/index.js
Normal file
139
src/router/index.js
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import store from '@/store'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const originalPush = VueRouter.prototype.push
|
||||||
|
VueRouter.prototype.push = function push(location) {
|
||||||
|
return originalPush.call(this, location).catch((err) => err)
|
||||||
|
}
|
||||||
|
|
||||||
|
import Layout from '@/layout'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* hidden: true if set true, item will not show in the top menuModule(default is false)
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const routes = [
|
||||||
|
{
|
||||||
|
path: '/home',
|
||||||
|
component: Layout,
|
||||||
|
name: 'home',
|
||||||
|
meta: {
|
||||||
|
title: '首页'
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'introduce',
|
||||||
|
name: 'introduce',
|
||||||
|
meta: {
|
||||||
|
title: '介绍'
|
||||||
|
},
|
||||||
|
component: () => import('../views/home/introduce')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/table',
|
||||||
|
component: Layout,
|
||||||
|
name: 'table',
|
||||||
|
meta: {
|
||||||
|
title: '表格'
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'singleHead',
|
||||||
|
name: 'singleHead',
|
||||||
|
meta: {
|
||||||
|
title: '单表头'
|
||||||
|
},
|
||||||
|
component: () => import('../views/table/singleHead')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'multiLevelHead',
|
||||||
|
name: 'multiLevelHead',
|
||||||
|
meta: {
|
||||||
|
title: '多级表头'
|
||||||
|
},
|
||||||
|
component: () => import('../views/table/multiLevelHead')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'canBeEntered',
|
||||||
|
name: 'canBeEntered',
|
||||||
|
meta: {
|
||||||
|
title: '可输入型'
|
||||||
|
},
|
||||||
|
component: () => import('../views/table/canBeEntered')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'paginationShow',
|
||||||
|
name: 'paginationShow',
|
||||||
|
meta: {
|
||||||
|
title: '分页'
|
||||||
|
},
|
||||||
|
component: () => import('../views/table/pagination')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/searchBar',
|
||||||
|
component: Layout,
|
||||||
|
name: 'searchBar',
|
||||||
|
meta: {
|
||||||
|
title: '搜索'
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'searchBar',
|
||||||
|
name: 'searchBar',
|
||||||
|
meta: {
|
||||||
|
title: '搜索'
|
||||||
|
},
|
||||||
|
component: () => import('../views/searchBar/searchBar')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/dialog',
|
||||||
|
component: Layout,
|
||||||
|
name: 'dialog',
|
||||||
|
meta: {
|
||||||
|
title: '对话框'
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'dialogPage',
|
||||||
|
name: 'dialogPage',
|
||||||
|
meta: {
|
||||||
|
title: '对话框'
|
||||||
|
},
|
||||||
|
component: () => import('../views/dialog/dialogPage')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ path: '*', redirect: '/home/introduce', hidden: true }
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'hash',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
if (to.path === '/login') {
|
||||||
|
next()
|
||||||
|
} else {
|
||||||
|
if (to.matched[0]) {
|
||||||
|
const activeBox = {
|
||||||
|
activeModule: to.matched[0].name,
|
||||||
|
activeMenu: to.matched[1].name
|
||||||
|
}
|
||||||
|
store.dispatch('menu/setActiveModule', activeBox)
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
7
src/store/getters.js
Normal file
7
src/store/getters.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
const getters = {
|
||||||
|
topModuleList: (state) => state.menu.topModuleList,
|
||||||
|
leftMenuList: (state) => state.menu.leftMenuList,
|
||||||
|
activeModule: (state) => state.menu.activeModule,
|
||||||
|
activeMenu: (state) => state.menu.activeMenu
|
||||||
|
}
|
||||||
|
export default getters
|
||||||
24
src/store/index.js
Normal file
24
src/store/index.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
import getters from './getters'
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
const modulesFiles = require.context('./modules', true, /\.js$/)
|
||||||
|
|
||||||
|
// you do not need `import app from './modules/app'`
|
||||||
|
// it will auto require all vuex module from modules file
|
||||||
|
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
|
||||||
|
// set './app.js' => 'app'
|
||||||
|
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
|
||||||
|
const value = modulesFiles(modulePath)
|
||||||
|
modules[moduleName] = value.default
|
||||||
|
return modules
|
||||||
|
}, {})
|
||||||
|
|
||||||
|
const store = new Vuex.Store({
|
||||||
|
modules,
|
||||||
|
getters
|
||||||
|
})
|
||||||
|
|
||||||
|
export default store
|
||||||
75
src/store/modules/menu.js
Normal file
75
src/store/modules/menu.js
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
import { routes } from '@/router'
|
||||||
|
const state = {
|
||||||
|
topModuleList: JSON.parse(sessionStorage.getItem('topModuleList')),
|
||||||
|
leftMenuList: JSON.parse(sessionStorage.getItem('leftMenuList')),
|
||||||
|
activeModule: sessionStorage.getItem('activeModule'), // 顶部菜单模块
|
||||||
|
activeMenu: sessionStorage.getItem('activeMenu') // 左侧菜单
|
||||||
|
}
|
||||||
|
|
||||||
|
const mutations = {
|
||||||
|
SET_TOPMODULE: (state, menuModule) => {
|
||||||
|
state.topModuleList = menuModule
|
||||||
|
sessionStorage.setItem('topModuleList', JSON.stringify(menuModule))
|
||||||
|
},
|
||||||
|
SET_LEFTMENU: (state, menu) => {
|
||||||
|
state.leftMenuList = menu
|
||||||
|
sessionStorage.setItem('leftMenuList', JSON.stringify(menu))
|
||||||
|
},
|
||||||
|
SET_ACTIVEMODULE: (state, activeModule) => {
|
||||||
|
state.activeModule = activeModule
|
||||||
|
sessionStorage.setItem('activeModule', activeModule)
|
||||||
|
},
|
||||||
|
SET_ACTIVEMENU: (state, activeMenu) => {
|
||||||
|
state.activeMenu = activeMenu || state.leftMenuList[0].name
|
||||||
|
sessionStorage.setItem('activeMenu', state.activeMenu)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const actions = {
|
||||||
|
// 获取顶部菜单模块
|
||||||
|
getTopModuleList({ commit }) {
|
||||||
|
let temp = []
|
||||||
|
routes &&
|
||||||
|
routes.map((item) => {
|
||||||
|
if (item.hidden) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
let obj = {}
|
||||||
|
obj.name = item.name
|
||||||
|
obj.label = item.meta.title
|
||||||
|
temp.push(obj)
|
||||||
|
})
|
||||||
|
commit('SET_TOPMODULE', temp)
|
||||||
|
},
|
||||||
|
// 设置菜单模块
|
||||||
|
setActiveModule({ commit, dispatch }, activeBox) {
|
||||||
|
const { activeModule, activeMenu } = activeBox
|
||||||
|
if (activeModule === 'home') {
|
||||||
|
commit('SET_LEFTMENU', [])
|
||||||
|
} else {
|
||||||
|
dispatch('getLeftMenuList', activeModule)
|
||||||
|
dispatch('setActiveMenu', activeMenu)
|
||||||
|
}
|
||||||
|
commit('SET_ACTIVEMODULE', activeModule)
|
||||||
|
},
|
||||||
|
// 获取左侧菜单
|
||||||
|
getLeftMenuList({ commit }, menuName) {
|
||||||
|
let temp = []
|
||||||
|
for (let i = 0; i < routes.length; i++) {
|
||||||
|
if (menuName === routes[i].name) {
|
||||||
|
temp = routes[i].children
|
||||||
|
}
|
||||||
|
}
|
||||||
|
commit('SET_LEFTMENU', temp)
|
||||||
|
},
|
||||||
|
setActiveMenu({ commit }, activeMenu) {
|
||||||
|
commit('SET_ACTIVEMENU', activeMenu)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state,
|
||||||
|
mutations,
|
||||||
|
actions
|
||||||
|
}
|
||||||
14
src/styles/element-ui.scss
Normal file
14
src/styles/element-ui.scss
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
@import './variables.module.scss';
|
||||||
|
.menuBox {
|
||||||
|
.el-tabs__header.is-left {
|
||||||
|
margin: 0;
|
||||||
|
width: $menuWidth;
|
||||||
|
}
|
||||||
|
.el-tabs--left .el-tabs__active-bar.is-left {
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
.el-tabs--left .el-tabs__item.is-left {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
99
src/styles/index.scss
Normal file
99
src/styles/index.scss
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
@import './variables.module.scss';
|
||||||
|
@import './element-ui.scss';
|
||||||
|
|
||||||
|
// css reset
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
height: 100%;
|
||||||
|
color: $color-text-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,li {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus,
|
||||||
|
a:active {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:focus,
|
||||||
|
a:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fr {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fl {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix {
|
||||||
|
&:after {
|
||||||
|
visibility: hidden;
|
||||||
|
display: block;
|
||||||
|
font-size: 0;
|
||||||
|
content: " ";
|
||||||
|
clear: both;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// global style
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track-piece {
|
||||||
|
background-color:rgba(144,147,153,0);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background-color:rgba(144,147,153,0);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
width: 6px;
|
||||||
|
background: rgba(144,147,153,0);
|
||||||
|
-webkit-border-radius: 2em;
|
||||||
|
-moz-border-radius: 2em;
|
||||||
|
border-radius: 2em;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: rgba(144,147,153,.5);
|
||||||
|
background-clip: padding-box;
|
||||||
|
min-height: 28px;
|
||||||
|
-webkit-border-radius: 2em;
|
||||||
|
-moz-border-radius: 2em;
|
||||||
|
border-radius: 2em;
|
||||||
|
transition: background-color .3s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: rgba(144,147,153,.3);
|
||||||
|
}
|
||||||
55
src/styles/variables.module.scss
Normal file
55
src/styles/variables.module.scss
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
// color
|
||||||
|
// Brand Color
|
||||||
|
$color-primary: #0B58FF;
|
||||||
|
// Functional Color
|
||||||
|
$color-success: #34E88E;
|
||||||
|
$color-warning: #FFBD02;
|
||||||
|
$color-danger: #FF5454;
|
||||||
|
$color-info: #909399;
|
||||||
|
// Font Color
|
||||||
|
$color-text-primary: #161616;
|
||||||
|
$color-text-regular: #606266;
|
||||||
|
$color-text-secondary: #909399;
|
||||||
|
$color-text-placeholder: #C0C4CC;
|
||||||
|
// Border Color
|
||||||
|
$border-color-base: #DCDFE6;
|
||||||
|
$border-color-light: #E4E7ED;
|
||||||
|
$border-color-lighter: #EBEEF5;
|
||||||
|
$border-color-extra-light: #F2F6FC;
|
||||||
|
// Background Color
|
||||||
|
$color-white: #FFFFFF;
|
||||||
|
$color-black: #000000;
|
||||||
|
$background-color-base: #F0F2F5;
|
||||||
|
$background-color-secondary: #F2F4F9;
|
||||||
|
|
||||||
|
// mix color-primary
|
||||||
|
$color-primary-light-1: mix($color-white, $color-primary, 10%) !default;
|
||||||
|
$color-primary-light-2: mix($color-white, $color-primary, 20%) !default;
|
||||||
|
$color-primary-light-3: mix($color-white, $color-primary, 30%) !default;
|
||||||
|
$color-primary-light-4: mix($color-white, $color-primary, 40%) !default;
|
||||||
|
$color-primary-light-5: mix($color-white, $color-primary, 50%) !default;
|
||||||
|
$color-primary-light-6: mix($color-white, $color-primary, 60%) !default;
|
||||||
|
$color-primary-light-7: mix($color-white, $color-primary, 70%) !default;
|
||||||
|
$color-primary-light-8: mix($color-white, $color-primary, 80%) !default;
|
||||||
|
$color-primary-light-9: mix($color-white, $color-primary, 90%) !default;
|
||||||
|
// mix color-success
|
||||||
|
$color-success-light-1: mix($color-white, $color-success, 10%) !default;
|
||||||
|
$color-success-light-2: mix($color-white, $color-success, 20%) !default;
|
||||||
|
$color-success-light-3: mix($color-white, $color-success, 30%) !default;
|
||||||
|
$color-success-light-4: mix($color-white, $color-success, 40%) !default;
|
||||||
|
$color-success-light-5: mix($color-white, $color-success, 50%) !default;
|
||||||
|
$color-success-light-6: mix($color-white, $color-success, 60%) !default;
|
||||||
|
$color-success-light-7: mix($color-white, $color-success, 70%) !default;
|
||||||
|
$color-success-light-8: mix($color-white, $color-success, 80%) !default;
|
||||||
|
$color-success-light-9: mix($color-white, $color-success, 90%) !default;
|
||||||
|
|
||||||
|
// size
|
||||||
|
$navbarHeight: 60px; // 导航栏高度
|
||||||
|
$menuWidth: 160px;
|
||||||
|
$footerHeight: 38px;
|
||||||
|
|
||||||
|
:export {
|
||||||
|
navbarHeight: $navbarHeight;
|
||||||
|
menuWidth: $menuWidth;
|
||||||
|
footerHeight: $footerHeight;
|
||||||
|
}
|
||||||
85
src/views/dialog/components/demoSlot.vue
Normal file
85
src/views/dialog/components/demoSlot.vue
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<el-form ref="form" label-width="80px" :model="form">
|
||||||
|
<el-form-item label="用户名" prop="userName">
|
||||||
|
<el-input v-model="form.userName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码" prop="passWord">
|
||||||
|
<el-input v-model="form.passWord"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="姓名" prop="name">
|
||||||
|
<el-input v-model="form.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="所属产线" prop="productLine">
|
||||||
|
<el-select
|
||||||
|
v-model="form.productLine"
|
||||||
|
placeholder="所属产线"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in lineList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="角色" prop="role">
|
||||||
|
<el-select v-model="form.role" placeholder="角色" style="width: 100%">
|
||||||
|
<el-option
|
||||||
|
v-for="item in roleList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DemoSlot',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
userName: '',
|
||||||
|
passWord: '123456',
|
||||||
|
name: '',
|
||||||
|
productLine: '',
|
||||||
|
role: ''
|
||||||
|
},
|
||||||
|
lineList: [],
|
||||||
|
roleList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
console.log('init')
|
||||||
|
let _this = this
|
||||||
|
setTimeout(function () {
|
||||||
|
_this.lineList = [
|
||||||
|
{ id: '1', name: '产线1' },
|
||||||
|
{ id: '2', name: '产线2' }
|
||||||
|
]
|
||||||
|
}, 1000)
|
||||||
|
setTimeout(function () {
|
||||||
|
_this.roleList = [
|
||||||
|
{ id: '1', name: '加工人员' },
|
||||||
|
{ id: '2', name: '管理人员' },
|
||||||
|
{ id: '3', name: '数据录入人员' }
|
||||||
|
]
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
formClear() {
|
||||||
|
this.$refs.form.resetFields()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.el-form-item:last-child {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
198
src/views/dialog/dialogPage.vue
Normal file
198
src/views/dialog/dialogPage.vue
Normal file
@ -0,0 +1,198 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dialog-page">
|
||||||
|
<h2>有时候弹框较大，底部显示超过页面了。所以这边的对话框都是可拖拽的</h2>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>基本用法-默认底部按钮是确定</h3>
|
||||||
|
<div>
|
||||||
|
<el-button @click="centervisible = true">点击打开dialog</el-button>
|
||||||
|
<BaseDialog
|
||||||
|
dialogTitle="新增"
|
||||||
|
:dialogVisible="centervisible"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
@confirm="handleConfirm"
|
||||||
|
:before-close="handleCancel"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
>基本用法-默认底部按钮是确定。不能通过点击 modal 关闭 Dialog</span
|
||||||
|
>
|
||||||
|
</BaseDialog>
|
||||||
|
</div>
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description">
|
||||||
|
修改弹框的标题为<code>dialogTitle</code>,为比必填。不传默认显示"请填入标题"
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<el-button @click="centervisible = true">点击打开dialog</el-button>
|
||||||
|
<BaseDialog
|
||||||
|
dialogTitle="新增"
|
||||||
|
:dialogVisible="centervisible"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
@confirm="handleConfirm"
|
||||||
|
:before-close="handleCancel"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
>基本用法-默认底部按钮是确定。不能通过点击 modal 关闭 Dialog</span
|
||||||
|
>
|
||||||
|
</BaseDialog>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>修改底部按钮为保存</h3>
|
||||||
|
<div>
|
||||||
|
<el-button @click="centervisible1 = true">点击打开dialog</el-button>
|
||||||
|
<BaseDialog
|
||||||
|
dialogTitle="编辑"
|
||||||
|
:dialogVisible="centervisible1"
|
||||||
|
:before-close="handleCancel"
|
||||||
|
>
|
||||||
|
<span>修改底部按钮为保存</span>
|
||||||
|
<el-row slot="footer" type="flex" justify="end">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-button
|
||||||
|
size="small"
|
||||||
|
class="btnTextStyle"
|
||||||
|
@click="handleCancel1"
|
||||||
|
>取消</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
class="btnTextStyle"
|
||||||
|
@click="handleConfirm1"
|
||||||
|
>
|
||||||
|
保存
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</BaseDialog>
|
||||||
|
</div>
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description">
|
||||||
|
ui设计的按钮文字间是有空格的，如果是自己写的footer，按钮文字可加样式<code>btnTextStyle</code>，用法见如下：
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<el-button @click="centervisible1 = true">点击打开dialog</el-button>
|
||||||
|
<BaseDialog
|
||||||
|
dialogTitle="编辑"
|
||||||
|
:dialogVisible="centervisible1"
|
||||||
|
:before-close="handleCancel"
|
||||||
|
>
|
||||||
|
<span>修改底部按钮为保存</span>
|
||||||
|
<el-row slot="footer" type="flex" justify="end">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-button size="small" class="btnTextStyle" @click="handleCancel1">取消</el-button>
|
||||||
|
<el-button type="primary" size="small" class="btnTextStyle" @click="handleConfirm1">
|
||||||
|
保存
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</BaseDialog>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>基本用法-示例</h3>
|
||||||
|
<div>
|
||||||
|
<el-button @click="centervisible2 = true">点击打开dialog</el-button>
|
||||||
|
<BaseDialog
|
||||||
|
dialogTitle="信息填写"
|
||||||
|
:dialogVisible="centervisible2"
|
||||||
|
@cancel="handleCancel2"
|
||||||
|
@confirm="handleConfirm2"
|
||||||
|
:before-close="handleCancel2"
|
||||||
|
>
|
||||||
|
<demoSlotVue ref="accountList" />
|
||||||
|
</BaseDialog>
|
||||||
|
</div>
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description">
|
||||||
|
<code>dialogbody</code
|
||||||
|
>的内容到<code>footer</code>的button的距离为40px
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<el-button @click="centervisible = true">点击打开dialog</el-button>
|
||||||
|
<BaseDialog
|
||||||
|
dialogTitle="信息填写"
|
||||||
|
:dialogVisible="centervisible2"
|
||||||
|
@cancel="handleCancel2"
|
||||||
|
@confirm="handleConfirm2"
|
||||||
|
:before-close="handleCancel2"
|
||||||
|
>
|
||||||
|
<demoSlotVue ref="accountList" /> // demoSlotVue是自己写的业务组件
|
||||||
|
</BaseDialog>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import demoSlotVue from './components/demoSlot.vue'
|
||||||
|
export default {
|
||||||
|
name: 'dialogPage',
|
||||||
|
components: { demoSlotVue },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
centervisible: false,
|
||||||
|
centervisible1: false,
|
||||||
|
centervisible2: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleCancel() {
|
||||||
|
this.centervisible = false
|
||||||
|
},
|
||||||
|
handleConfirm() {
|
||||||
|
alert('您点击了确定按钮')
|
||||||
|
this.centervisible = false
|
||||||
|
},
|
||||||
|
handleCancel1() {
|
||||||
|
this.centervisible1 = false
|
||||||
|
},
|
||||||
|
handleConfirm1() {
|
||||||
|
alert('您点击了保存按钮')
|
||||||
|
this.centervisible1 = false
|
||||||
|
},
|
||||||
|
handleCancel2() {
|
||||||
|
this.$refs.accountList.formClear()
|
||||||
|
this.centervisible2 = false
|
||||||
|
},
|
||||||
|
handleConfirm2() {
|
||||||
|
alert('您点击了确定按钮2')
|
||||||
|
this.centervisible2 = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog-page {
|
||||||
|
.demo-box {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
.description code {
|
||||||
|
color: #5e6d82;
|
||||||
|
background-color: #e6effb;
|
||||||
|
margin: 0 4px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
13
src/views/home/introduce.vue
Normal file
13
src/views/home/introduce.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
组件包目前封装常用的四个组件:表格，搜索区域，分页，对话框。包npm地址为：https://www.npmjs.com/package/code-brick-zj。
|
||||||
|
</p>
|
||||||
|
<p>文档当前使用的组件包的版本为：0.0.3</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'introducePage'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
1762
src/views/searchBar/searchBar.vue
Normal file
1762
src/views/searchBar/searchBar.vue
Normal file
File diff suppressed because it is too large
Load Diff
362
src/views/table/canBeEntered.vue
Normal file
362
src/views/table/canBeEntered.vue
Normal file
@ -0,0 +1,362 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h2>可输入型</h2>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>表格内嵌输入框</h3>
|
||||||
|
<base-table
|
||||||
|
border
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="tableData"
|
||||||
|
@emitFun="inputChange"
|
||||||
|
/>
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description">
|
||||||
|
在<code>tableProps</code>的<code>subcomponent</code>上渲染input组件.
|
||||||
|
@emitFun="inputChange"
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<<span>template</span>>
|
||||||
|
<base-table
|
||||||
|
border
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="tableData"
|
||||||
|
@emitFun="inputChange"
|
||||||
|
/>
|
||||||
|
<<span>/template</span>>
|
||||||
|
<script>
|
||||||
|
const tableProps = [
|
||||||
|
{
|
||||||
|
prop: 'testItems',
|
||||||
|
label: '检验项目'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'checkPoint',
|
||||||
|
label: '检测点'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'inspectionStandards',
|
||||||
|
label: '检验标准'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'measuredValue',
|
||||||
|
label: '实测值',
|
||||||
|
subcomponent: inputArea
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'samplingResults',
|
||||||
|
label: '抽检结果',
|
||||||
|
subcomponent: inputArea
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'remark',
|
||||||
|
label: '备注',
|
||||||
|
subcomponent: inputArea
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableProps,
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '左端点1',
|
||||||
|
inspectionStandards: '0.1-0.4',
|
||||||
|
measuredValue: '',
|
||||||
|
samplingResults: '',
|
||||||
|
remark: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '左端点2',
|
||||||
|
inspectionStandards: '0.1-0.4',
|
||||||
|
measuredValue: '',
|
||||||
|
samplingResults: '',
|
||||||
|
remark: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '右端点1',
|
||||||
|
inspectionStandards: '0.1-0.4',
|
||||||
|
measuredValue: '',
|
||||||
|
samplingResults: '',
|
||||||
|
remark: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '右端点2',
|
||||||
|
inspectionStandards: '0.1-0.4',
|
||||||
|
measuredValue: '',
|
||||||
|
samplingResults: '',
|
||||||
|
remark: ''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>表格底部新增按钮</h3>
|
||||||
|
<base-table
|
||||||
|
border
|
||||||
|
:table-props="tableProps2"
|
||||||
|
:table-data="tableData2"
|
||||||
|
:add-button-show="addButtonShow"
|
||||||
|
@emitFun="inputChange2"
|
||||||
|
@emitButtonClick="emitButtonClick"
|
||||||
|
/>
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description">
|
||||||
|
在<code>tableProps</code>的<code>subcomponent</code>上渲染input组件
|
||||||
|
:add-button-show="addButtonShow" @emitFun="inputChange"
|
||||||
|
@emitButtonClick="emitButtonClick"
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<<span>template</span>>
|
||||||
|
<base-table
|
||||||
|
border
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="tableData"
|
||||||
|
@emitFun="inputChange"
|
||||||
|
/>
|
||||||
|
<<span>/template</span>>
|
||||||
|
<script>
|
||||||
|
const tableProps = [
|
||||||
|
{
|
||||||
|
prop: 'testItems',
|
||||||
|
label: '检验项目',
|
||||||
|
subcomponent: inputArea
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'checkPoint',
|
||||||
|
label: '检测点',
|
||||||
|
subcomponent: inputArea
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'inspectionStandards',
|
||||||
|
label: '检验标准',
|
||||||
|
subcomponent: inputArea
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableProps,
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '左端点1',
|
||||||
|
inspectionStandards: '0.1-0.4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '左端点2',
|
||||||
|
inspectionStandards: '0.1-0.4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '右端点1',
|
||||||
|
inspectionStandards: '0.1-0.4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '右端点2',
|
||||||
|
inspectionStandards: '0.1-0.4'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
addButtonShow: '新增'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
inputChange(val) {
|
||||||
|
console.log('=======')
|
||||||
|
console.log(val)
|
||||||
|
this.tableData[val._pageIndex - 1][val.prop] = val[val.prop]
|
||||||
|
console.log(this.tableData)
|
||||||
|
},
|
||||||
|
inputChange2(val) {
|
||||||
|
console.log('=======')
|
||||||
|
console.log(val)
|
||||||
|
this.tableData2[val._pageIndex - 1][val.prop] = val[val.prop]
|
||||||
|
console.log(this.tableData2)
|
||||||
|
},
|
||||||
|
emitButtonClick() {
|
||||||
|
console.log('emitButtonClick')
|
||||||
|
let obj = {}
|
||||||
|
for (let i of this.tableProps2) {
|
||||||
|
obj[i.prop] = ''
|
||||||
|
}
|
||||||
|
this.tableData2.push(obj)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import inputArea from './components/InputArea.vue'
|
||||||
|
const tableProps = [
|
||||||
|
{
|
||||||
|
prop: 'testItems',
|
||||||
|
label: '检验项目'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'checkPoint',
|
||||||
|
label: '检测点'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'inspectionStandards',
|
||||||
|
label: '检验标准'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'measuredValue',
|
||||||
|
label: '实测值',
|
||||||
|
subcomponent: inputArea
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'samplingResults',
|
||||||
|
label: '抽检结果',
|
||||||
|
subcomponent: inputArea
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'remark',
|
||||||
|
label: '备注',
|
||||||
|
subcomponent: inputArea
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const tableProps2 = [
|
||||||
|
{
|
||||||
|
prop: 'testItems',
|
||||||
|
label: '检验项目',
|
||||||
|
subcomponent: inputArea
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'checkPoint',
|
||||||
|
label: '检测点',
|
||||||
|
subcomponent: inputArea
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'inspectionStandards',
|
||||||
|
label: '检验标准',
|
||||||
|
subcomponent: inputArea
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default {
|
||||||
|
name: 'CanBeEntered',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableProps,
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '左端点1',
|
||||||
|
inspectionStandards: '0.1-0.4',
|
||||||
|
measuredValue: '',
|
||||||
|
samplingResults: '',
|
||||||
|
remark: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '左端点2',
|
||||||
|
inspectionStandards: '0.1-0.4',
|
||||||
|
measuredValue: '',
|
||||||
|
samplingResults: '',
|
||||||
|
remark: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '右端点1',
|
||||||
|
inspectionStandards: '0.1-0.4',
|
||||||
|
measuredValue: '',
|
||||||
|
samplingResults: '',
|
||||||
|
remark: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '右端点2',
|
||||||
|
inspectionStandards: '0.1-0.4',
|
||||||
|
measuredValue: '',
|
||||||
|
samplingResults: '',
|
||||||
|
remark: ''
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tableProps2,
|
||||||
|
tableData2: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '左端点1',
|
||||||
|
inspectionStandards: '0.1-0.4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '左端点2',
|
||||||
|
inspectionStandards: '0.1-0.4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '右端点1',
|
||||||
|
inspectionStandards: '0.1-0.4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
testItems: '研磨幅',
|
||||||
|
checkPoint: '右端点2',
|
||||||
|
inspectionStandards: '0.1-0.4'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
addButtonShow: '新增'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
inputChange(val) {
|
||||||
|
console.log('=======')
|
||||||
|
console.log(val)
|
||||||
|
this.tableData[val._pageIndex - 1][val.prop] = val[val.prop]
|
||||||
|
console.log(this.tableData)
|
||||||
|
},
|
||||||
|
inputChange2(val) {
|
||||||
|
console.log('=======')
|
||||||
|
console.log(val)
|
||||||
|
this.tableData2[val._pageIndex - 1][val.prop] = val[val.prop]
|
||||||
|
console.log(this.tableData2)
|
||||||
|
},
|
||||||
|
emitButtonClick() {
|
||||||
|
console.log('emitButtonClick')
|
||||||
|
let obj = {}
|
||||||
|
for (let i of this.tableProps2) {
|
||||||
|
obj[i.prop] = ''
|
||||||
|
}
|
||||||
|
this.tableData2.push(obj)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
66
src/views/table/components/InnerTable.vue
Normal file
66
src/views/table/components/InnerTable.vue
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<el-popover placement="right" width="400" trigger="click">
|
||||||
|
<el-table :data="tableData">
|
||||||
|
<el-table-column prop="date" label="日期" width="120"> </el-table-column>
|
||||||
|
<el-table-column prop="name" label="姓名" width="90"> </el-table-column>
|
||||||
|
<el-table-column prop="sex" label="性别"> </el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-button
|
||||||
|
slot="reference"
|
||||||
|
type="text"
|
||||||
|
@click="showInnerTable(injectData.id)"
|
||||||
|
>记录</el-button
|
||||||
|
>
|
||||||
|
</el-popover>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'InnerTable',
|
||||||
|
props: {
|
||||||
|
injectData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
itemProp: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: this.injectData,
|
||||||
|
tableData: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showInnerTable(id) {
|
||||||
|
console.log(id)
|
||||||
|
this.tableData = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
date: '2016-05-02',
|
||||||
|
name: '王小虎',
|
||||||
|
sex: '男'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
date: '2016-05-04',
|
||||||
|
name: '王小虎',
|
||||||
|
sex: '男'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: '王小虎',
|
||||||
|
sex: '男'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
date: '2016-05-03',
|
||||||
|
name: '王小虎',
|
||||||
|
sex: '男'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
37
src/views/table/components/InputArea.vue
Normal file
37
src/views/table/components/InputArea.vue
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tableInner">
|
||||||
|
<el-input v-model="list[itemProp]" @blur="changeInput" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'InputArea',
|
||||||
|
props: {
|
||||||
|
injectData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
itemProp: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: this.injectData
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeInput() {
|
||||||
|
console.log(this.list)
|
||||||
|
this.$emit('emitData', this.list)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="css">
|
||||||
|
.tableInner .el-input__inner {
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
height: 33px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
16
src/views/table/components/demo1Sub.vue
Normal file
16
src/views/table/components/demo1Sub.vue
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-tag size="medium">{{ injectData.name }}</el-tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'demo1Sub',
|
||||||
|
props: {
|
||||||
|
injectData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
16
src/views/table/components/demo2Sub.vue
Normal file
16
src/views/table/components/demo2Sub.vue
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-tag size="medium">{{ injectData.workTime }}</el-tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'demo2Sub',
|
||||||
|
props: {
|
||||||
|
injectData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
19
src/views/table/components/demo3Sub.vue
Normal file
19
src/views/table/components/demo3Sub.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-tag size="medium">11111</el-tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'demo3Sub',
|
||||||
|
props: {
|
||||||
|
injectData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// console.log(this.injectData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
801
src/views/table/multiLevelHead.vue
Normal file
801
src/views/table/multiLevelHead.vue
Normal file
@ -0,0 +1,801 @@
|
|||||||
|
<template>
|
||||||
|
<div class="multi-level-head">
|
||||||
|
<h2>多级表头</h2>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>多表头一</h3>
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="tableData"
|
||||||
|
:page="1"
|
||||||
|
:limit="20"
|
||||||
|
/>
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description"></div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<<span>template</span>>
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="tableData"
|
||||||
|
:page="1"
|
||||||
|
:limit="20"
|
||||||
|
/>
|
||||||
|
<<span>/template</span>>
|
||||||
|
<script>
|
||||||
|
const tableProps = [
|
||||||
|
{
|
||||||
|
prop: 'equipmentName',
|
||||||
|
label: '设备名称'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineA',
|
||||||
|
label: '有效时间(h)',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'workTime',
|
||||||
|
label: '工作时长'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'workTimeRate',
|
||||||
|
label: '工作时长比率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineB',
|
||||||
|
label: '关机时间(h)',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'downTime',
|
||||||
|
label: '停机时长'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'downTimeRate',
|
||||||
|
label: '停机时长比率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineC',
|
||||||
|
label: '中断损失',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'faultTime',
|
||||||
|
label: '故障时长'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'faultTimeRate',
|
||||||
|
label: '故障时长比率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineD',
|
||||||
|
label: '速度损失',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'actualProcessingSpeed',
|
||||||
|
label: '实际加工速度'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'theoreticalProcessingSpeed',
|
||||||
|
label: '理论加工速度'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'speedActuationRate',
|
||||||
|
label: '速度开动率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default {
|
||||||
|
mounted() {
|
||||||
|
this.tableData = [
|
||||||
|
{
|
||||||
|
equipmentName: '设备1',
|
||||||
|
workTime: 100,
|
||||||
|
workTimeRate: 0.5,
|
||||||
|
downTime: 5,
|
||||||
|
downTimeRate: 0.02,
|
||||||
|
faultTime: 0,
|
||||||
|
faultTimeRate: 0,
|
||||||
|
actualProcessingSpeed: 10,
|
||||||
|
theoreticalProcessingSpeed: 10,
|
||||||
|
speedActuationRate: 0.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '设备2',
|
||||||
|
workTime: 100,
|
||||||
|
workTimeRate: 0.5,
|
||||||
|
downTime: 5,
|
||||||
|
downTimeRate: 0.02,
|
||||||
|
faultTime: 0,
|
||||||
|
faultTimeRate: 0,
|
||||||
|
actualProcessingSpeed: 10,
|
||||||
|
theoreticalProcessingSpeed: 10,
|
||||||
|
speedActuationRate: 0.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '设备3',
|
||||||
|
workTime: 100,
|
||||||
|
workTimeRate: 0.5,
|
||||||
|
downTime: 5,
|
||||||
|
downTimeRate: 0.02,
|
||||||
|
faultTime: 0,
|
||||||
|
faultTimeRate: 0,
|
||||||
|
actualProcessingSpeed: 10,
|
||||||
|
theoreticalProcessingSpeed: 10,
|
||||||
|
speedActuationRate: 0.3
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<script>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>多表头一(自定义列模板)</h3>
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps3"
|
||||||
|
:table-data="tableData"
|
||||||
|
:page="1"
|
||||||
|
:limit="20"
|
||||||
|
/>
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description"></div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<<span>template</span>>
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="tableData"
|
||||||
|
:page="1"
|
||||||
|
:limit="20"
|
||||||
|
/>
|
||||||
|
<<span>/template</span>>
|
||||||
|
<script>
|
||||||
|
const tableProps = [
|
||||||
|
{
|
||||||
|
prop: 'equipmentName',
|
||||||
|
label: '设备名称'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineA',
|
||||||
|
label: '有效时间(h)',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'workTime',
|
||||||
|
label: '工作时长',
|
||||||
|
subcomponent: demo2Sub
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'workTimeRate',
|
||||||
|
label: '工作时长比率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineB',
|
||||||
|
label: '关机时间(h)',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'downTime',
|
||||||
|
label: '停机时长'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'downTimeRate',
|
||||||
|
label: '停机时长比率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineC',
|
||||||
|
label: '中断损失',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'faultTime',
|
||||||
|
label: '故障时长'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'faultTimeRate',
|
||||||
|
label: '故障时长比率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineD',
|
||||||
|
label: '速度损失',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'actualProcessingSpeed',
|
||||||
|
label: '实际加工速度'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'theoreticalProcessingSpeed',
|
||||||
|
label: '理论加工速度'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'speedActuationRate',
|
||||||
|
label: '速度开动率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default {
|
||||||
|
mounted() {
|
||||||
|
this.tableData = [
|
||||||
|
{
|
||||||
|
equipmentName: '设备1',
|
||||||
|
workTime: 100,
|
||||||
|
workTimeRate: 0.5,
|
||||||
|
downTime: 5,
|
||||||
|
downTimeRate: 0.02,
|
||||||
|
faultTime: 0,
|
||||||
|
faultTimeRate: 0,
|
||||||
|
actualProcessingSpeed: 10,
|
||||||
|
theoreticalProcessingSpeed: 10,
|
||||||
|
speedActuationRate: 0.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '设备2',
|
||||||
|
workTime: 100,
|
||||||
|
workTimeRate: 0.5,
|
||||||
|
downTime: 5,
|
||||||
|
downTimeRate: 0.02,
|
||||||
|
faultTime: 0,
|
||||||
|
faultTimeRate: 0,
|
||||||
|
actualProcessingSpeed: 10,
|
||||||
|
theoreticalProcessingSpeed: 10,
|
||||||
|
speedActuationRate: 0.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '设备3',
|
||||||
|
workTime: 100,
|
||||||
|
workTimeRate: 0.5,
|
||||||
|
downTime: 5,
|
||||||
|
downTimeRate: 0.02,
|
||||||
|
faultTime: 0,
|
||||||
|
faultTimeRate: 0,
|
||||||
|
actualProcessingSpeed: 10,
|
||||||
|
theoreticalProcessingSpeed: 10,
|
||||||
|
speedActuationRate: 0.3
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<script>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>多表头二</h3>
|
||||||
|
<el-button @click="getData">click me 调接口拿数据,动态生成表格</el-button>
|
||||||
|
<base-table
|
||||||
|
v-if="trueTableProps.length > 0 ? true : false"
|
||||||
|
:table-props="trueTableProps"
|
||||||
|
:table-data="tableData3"
|
||||||
|
:span-method="spanMethod"
|
||||||
|
:page="1"
|
||||||
|
:limit="20"
|
||||||
|
/>
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description"></div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<<span>template</span>>
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="tableData"
|
||||||
|
:page="1"
|
||||||
|
:limit="20"
|
||||||
|
/>
|
||||||
|
<<span>/template</span>>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
let aa = []
|
||||||
|
let moreData = [
|
||||||
|
{
|
||||||
|
process: '综合',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
equipmentName: '上片投入数量',
|
||||||
|
data: aa
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '机器人投入数',
|
||||||
|
data: aa
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '良品总投入数',
|
||||||
|
data: aa
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '工序损耗',
|
||||||
|
data: aa
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
process: '上片',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
equipmentName: '上片损失',
|
||||||
|
data: aa
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
process: '精切',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
equipmentName: '精切损失',
|
||||||
|
data: aa
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '精切抽检',
|
||||||
|
data: aa
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
for (let i = 0; i < 30; i++) {
|
||||||
|
let a = {
|
||||||
|
time: '2022-11-' + i,
|
||||||
|
eqCT: 0.01,
|
||||||
|
eqTT: 0.62,
|
||||||
|
lineCT: 0.73,
|
||||||
|
lineTT: 0.45
|
||||||
|
}
|
||||||
|
aa.push(a)
|
||||||
|
}
|
||||||
|
this.numArr = []
|
||||||
|
let num = 0
|
||||||
|
const tableConfig = []
|
||||||
|
this.chartDataArr = []
|
||||||
|
const dataArr = moreData.map((item, index) => {
|
||||||
|
let dataArr = []
|
||||||
|
if (item.data) {
|
||||||
|
this.chartDataArr = this.chartDataArr.concat(item.data)
|
||||||
|
num += item.data.length
|
||||||
|
this.numArr.push(num)
|
||||||
|
dataArr = item.data.map((z, idx) => {
|
||||||
|
const dataArr = {}
|
||||||
|
z.data.forEach((i) => {
|
||||||
|
// 动态生成tableConfig
|
||||||
|
if (index === 0 && idx === 0) {
|
||||||
|
tableConfig.push({
|
||||||
|
label: i.time,
|
||||||
|
prop: i.time,
|
||||||
|
children: [
|
||||||
|
{ prop: i.time + 'eqCT', label: '设备CT' },
|
||||||
|
{ prop: i.time + 'eqTT', label: '设备TT' },
|
||||||
|
{ prop: i.time + 'lineCT', label: '产线CT' },
|
||||||
|
{
|
||||||
|
prop: i.time + 'lineTT',
|
||||||
|
label: '产线TT',
|
||||||
|
subcomponent: demo3Sub
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 合并数据集
|
||||||
|
dataArr[i.time + 'eqCT'] = i.eqCT
|
||||||
|
dataArr[i.time + 'eqTT'] = i.eqTT
|
||||||
|
dataArr[i.time + 'lineCT'] = i.lineCT
|
||||||
|
dataArr[i.time + 'lineTT'] = i.lineTT
|
||||||
|
dataArr.process = item.process
|
||||||
|
dataArr.equipmentName = z.equipmentName
|
||||||
|
})
|
||||||
|
console.log(dataArr)
|
||||||
|
return dataArr
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return dataArr
|
||||||
|
})
|
||||||
|
console.log(tableConfig)
|
||||||
|
this.trueTableProps = this.tableProp2.concat(tableConfig)
|
||||||
|
console.log(this.trueTableProps)
|
||||||
|
this.tableData = this.flatten(dataArr)
|
||||||
|
console.log(this.tableData)
|
||||||
|
},
|
||||||
|
// tree->[]
|
||||||
|
flatten(arr) {
|
||||||
|
var res = []
|
||||||
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
if (Array.isArray(arr[i])) {
|
||||||
|
res = res.concat(this.flatten(arr[i]))
|
||||||
|
} else {
|
||||||
|
res.push(arr[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
spanMethod({ rowIndex, columnIndex }) {
|
||||||
|
if (columnIndex === 1) {
|
||||||
|
if (rowIndex === 0) {
|
||||||
|
return [this.numArr[0], 1]
|
||||||
|
} else if (this.numArr.indexOf(rowIndex) >= 0) {
|
||||||
|
const rowNum =
|
||||||
|
this.numArr[this.numArr.indexOf(rowIndex) + 1] -
|
||||||
|
this.numArr[this.numArr.indexOf(rowIndex)]
|
||||||
|
return [rowNum, 1]
|
||||||
|
} else {
|
||||||
|
return [0, 0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<script>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import demo2Sub from './components/demo2Sub'
|
||||||
|
import demo3Sub from './components/demo3Sub'
|
||||||
|
const tableProps = [
|
||||||
|
{
|
||||||
|
prop: 'equipmentName',
|
||||||
|
label: '设备名称'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineA',
|
||||||
|
label: '有效时间(h)',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'workTime',
|
||||||
|
label: '工作时长'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'workTimeRate',
|
||||||
|
label: '工作时长比率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineB',
|
||||||
|
label: '关机时间(h)',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'downTime',
|
||||||
|
label: '停机时长'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'downTimeRate',
|
||||||
|
label: '停机时长比率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineC',
|
||||||
|
label: '中断损失',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'faultTime',
|
||||||
|
label: '故障时长'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'faultTimeRate',
|
||||||
|
label: '故障时长比率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineD',
|
||||||
|
label: '速度损失',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'actualProcessingSpeed',
|
||||||
|
label: '实际加工速度'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'theoreticalProcessingSpeed',
|
||||||
|
label: '理论加工速度'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'speedActuationRate',
|
||||||
|
label: '速度开动率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const tableProp2 = [
|
||||||
|
{
|
||||||
|
prop: 'process',
|
||||||
|
label: '工序'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'equipmentName',
|
||||||
|
label: '设备名称'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const tableProps3 = [
|
||||||
|
{
|
||||||
|
prop: 'equipmentName',
|
||||||
|
label: '设备名称'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineA',
|
||||||
|
label: '有效时间(h)',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'workTime',
|
||||||
|
label: '工作时长',
|
||||||
|
subcomponent: demo2Sub
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'workTimeRate',
|
||||||
|
label: '工作时长比率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineB',
|
||||||
|
label: '关机时间(h)',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'downTime',
|
||||||
|
label: '停机时长'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'downTimeRate',
|
||||||
|
label: '停机时长比率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineC',
|
||||||
|
label: '中断损失',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'faultTime',
|
||||||
|
label: '故障时长'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'faultTimeRate',
|
||||||
|
label: '故障时长比率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineD',
|
||||||
|
label: '速度损失',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'actualProcessingSpeed',
|
||||||
|
label: '实际加工速度'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'theoreticalProcessingSpeed',
|
||||||
|
label: '理论加工速度'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'speedActuationRate',
|
||||||
|
label: '速度开动率'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default {
|
||||||
|
name: 'MultiLevelHead',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableProps,
|
||||||
|
tableData: [],
|
||||||
|
tableProp2,
|
||||||
|
tableData3: [],
|
||||||
|
numArr: [],
|
||||||
|
chartDataArr: [],
|
||||||
|
trueTableProps: [],
|
||||||
|
tableProps3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.tableData = [
|
||||||
|
{
|
||||||
|
equipmentName: '设备1',
|
||||||
|
workTime: 100,
|
||||||
|
workTimeRate: 0.5,
|
||||||
|
downTime: 5,
|
||||||
|
downTimeRate: 0.02,
|
||||||
|
faultTime: 0,
|
||||||
|
faultTimeRate: 0,
|
||||||
|
actualProcessingSpeed: 10,
|
||||||
|
theoreticalProcessingSpeed: 10,
|
||||||
|
speedActuationRate: 0.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '设备2',
|
||||||
|
workTime: 100,
|
||||||
|
workTimeRate: 0.5,
|
||||||
|
downTime: 5,
|
||||||
|
downTimeRate: 0.02,
|
||||||
|
faultTime: 0,
|
||||||
|
faultTimeRate: 0,
|
||||||
|
actualProcessingSpeed: 10,
|
||||||
|
theoreticalProcessingSpeed: 10,
|
||||||
|
speedActuationRate: 0.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '设备3',
|
||||||
|
workTime: 100,
|
||||||
|
workTimeRate: 0.5,
|
||||||
|
downTime: 5,
|
||||||
|
downTimeRate: 0.02,
|
||||||
|
faultTime: 0,
|
||||||
|
faultTimeRate: 0,
|
||||||
|
actualProcessingSpeed: 10,
|
||||||
|
theoreticalProcessingSpeed: 10,
|
||||||
|
speedActuationRate: 0.3
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
let aa = []
|
||||||
|
let moreData = [
|
||||||
|
{
|
||||||
|
process: '综合',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
equipmentName: '上片投入数量',
|
||||||
|
data: aa
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '机器人投入数',
|
||||||
|
data: aa
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '良品总投入数',
|
||||||
|
data: aa
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '工序损耗',
|
||||||
|
data: aa
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
process: '上片',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
equipmentName: '上片损失',
|
||||||
|
data: aa
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
process: '精切',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
equipmentName: '精切损失',
|
||||||
|
data: aa
|
||||||
|
},
|
||||||
|
{
|
||||||
|
equipmentName: '精切抽检',
|
||||||
|
data: aa
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
for (let i = 0; i < 30; i++) {
|
||||||
|
let a = {
|
||||||
|
time: '2022-11-' + i,
|
||||||
|
eqCT: 0.01,
|
||||||
|
eqTT: 0.62,
|
||||||
|
lineCT: 0.73,
|
||||||
|
lineTT: 0.45
|
||||||
|
}
|
||||||
|
aa.push(a)
|
||||||
|
}
|
||||||
|
this.numArr = []
|
||||||
|
let num = 0
|
||||||
|
const tableConfig = []
|
||||||
|
this.chartDataArr = []
|
||||||
|
const dataArr = moreData.map((item, index) => {
|
||||||
|
let dataArr = []
|
||||||
|
if (item.data) {
|
||||||
|
this.chartDataArr = this.chartDataArr.concat(item.data)
|
||||||
|
num += item.data.length
|
||||||
|
this.numArr.push(num)
|
||||||
|
dataArr = item.data.map((z, idx) => {
|
||||||
|
const dataArr = {}
|
||||||
|
z.data.forEach((i) => {
|
||||||
|
// 动态生成tableConfig
|
||||||
|
if (index === 0 && idx === 0) {
|
||||||
|
tableConfig.push({
|
||||||
|
label: i.time,
|
||||||
|
prop: i.time,
|
||||||
|
children: [
|
||||||
|
{ prop: i.time + 'eqCT', label: '设备CT' },
|
||||||
|
{ prop: i.time + 'eqTT', label: '设备TT' },
|
||||||
|
{ prop: i.time + 'lineCT', label: '产线CT' },
|
||||||
|
{
|
||||||
|
prop: i.time + 'lineTT',
|
||||||
|
label: '产线TT',
|
||||||
|
subcomponent: demo3Sub
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 合并数据集
|
||||||
|
dataArr[i.time + 'eqCT'] = i.eqCT
|
||||||
|
dataArr[i.time + 'eqTT'] = i.eqTT
|
||||||
|
dataArr[i.time + 'lineCT'] = i.lineCT
|
||||||
|
dataArr[i.time + 'lineTT'] = i.lineTT
|
||||||
|
dataArr.process = item.process
|
||||||
|
dataArr.equipmentName = z.equipmentName
|
||||||
|
})
|
||||||
|
console.log(dataArr)
|
||||||
|
return dataArr
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return dataArr
|
||||||
|
})
|
||||||
|
console.log(tableConfig)
|
||||||
|
this.trueTableProps = this.tableProp2.concat(tableConfig)
|
||||||
|
console.log(this.trueTableProps)
|
||||||
|
this.tableData3 = this.flatten(dataArr)
|
||||||
|
console.log(this.tableData3)
|
||||||
|
},
|
||||||
|
// tree->[]
|
||||||
|
flatten(arr) {
|
||||||
|
var res = []
|
||||||
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
if (Array.isArray(arr[i])) {
|
||||||
|
res = res.concat(this.flatten(arr[i]))
|
||||||
|
} else {
|
||||||
|
res.push(arr[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
spanMethod({ rowIndex, columnIndex }) {
|
||||||
|
if (columnIndex === 1) {
|
||||||
|
if (rowIndex === 0) {
|
||||||
|
return [this.numArr[0], 1]
|
||||||
|
} else if (this.numArr.indexOf(rowIndex) >= 0) {
|
||||||
|
const rowNum =
|
||||||
|
this.numArr[this.numArr.indexOf(rowIndex) + 1] -
|
||||||
|
this.numArr[this.numArr.indexOf(rowIndex)]
|
||||||
|
return [rowNum, 1]
|
||||||
|
} else {
|
||||||
|
return [0, 0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.multi-level-head {
|
||||||
|
.demo-box {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
.description code {
|
||||||
|
color: #5e6d82;
|
||||||
|
background-color: #e6effb;
|
||||||
|
margin: 0 4px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
139
src/views/table/pagination.vue
Normal file
139
src/views/table/pagination.vue
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
<template>
|
||||||
|
<div class="pagination">
|
||||||
|
<h2>分页</h2>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>完整功能</h3>
|
||||||
|
<pagination :limit="20" :total="100" />
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description"></div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<<span>template</span>>
|
||||||
|
<pagination :limit="20" :total="100" />
|
||||||
|
<<span>/template</span>>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>简单版固定的pageSize</h3>
|
||||||
|
<pagination :limit="3" :total="10" layout="total, prev, pager, next" />
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description"></div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<<span>template</span>>
|
||||||
|
<pagination :limit="3" :total="10" layout="total, prev, pager, next" />
|
||||||
|
<<span>/template</span>>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>totla为0时分页消失</h3>
|
||||||
|
<el-button type="primary" @click="toggleTotal"
|
||||||
|
>点击改变total为0或者100</el-button
|
||||||
|
>
|
||||||
|
<pagination :limit="20" :total="total" />
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description"></div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<<span>template</span>>
|
||||||
|
<pagination :limit="20" :total="total" />
|
||||||
|
<<span>/template</span>>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>改变当前page或者pageSize</h3>
|
||||||
|
<pagination
|
||||||
|
:limit.sync="listQuery.size"
|
||||||
|
:page.sync="listQuery.current"
|
||||||
|
:total="200"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description"></div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<<span>template</span>>
|
||||||
|
<pagination
|
||||||
|
:limit.sync="listQuery.size"
|
||||||
|
:page.sync="listQuery.current"
|
||||||
|
:total="200"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
<<span>/template</span>>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
<div class="demo-box">
|
||||||
|
<h3>完整功能按钮带背景色的</h3>
|
||||||
|
<pagination :limit="20" :total="100" :background="true" />
|
||||||
|
<el-collapse>
|
||||||
|
<el-collapse-item title="显示代码">
|
||||||
|
<div class="description"></div>
|
||||||
|
<div>
|
||||||
|
<pre>
|
||||||
|
<<span>template</span>>
|
||||||
|
<pagination :limit="20" :total="100" :background="true" />
|
||||||
|
<<span>/template</span>>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'paginationShow',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
total: 100,
|
||||||
|
listQuery: {
|
||||||
|
current: 1,
|
||||||
|
size: 20
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleTotal() {
|
||||||
|
this.total = this.total === 0 ? 100 : 0
|
||||||
|
},
|
||||||
|
getList(val) {
|
||||||
|
console.log(val)
|
||||||
|
console.log(this.listQuery)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.pagination {
|
||||||
|
.demo-box {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
.description code {
|
||||||
|
color: #5e6d82;
|
||||||
|
background-color: #e6effb;
|
||||||
|
margin: 0 4px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1214
src/views/table/singleHead.vue
Normal file
1214
src/views/table/singleHead.vue
Normal file
File diff suppressed because it is too large
Load Diff
BIN
theme/fonts/element-icons.ttf
Normal file
BIN
theme/fonts/element-icons.ttf
Normal file
Binary file not shown.
BIN
theme/fonts/element-icons.woff
Normal file
BIN
theme/fonts/element-icons.woff
Normal file
Binary file not shown.
1
theme/index.css
Normal file
1
theme/index.css
Normal file
File diff suppressed because one or more lines are too long
4
vue.config.js
Normal file
4
vue.config.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
|
module.exports = defineConfig({
|
||||||
|
transpileDependencies: true
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user