暂存一下
This commit is contained in:
xiongchengqiang
parent
cb42929de4
commit
0beb562a98
@ -0,0 +1,3 @@
|
||||
[.ShellClassInfo]
|
||||
CLSID={645FF040-5081-101B-9F08-00AA002F954E}
|
||||
LocalizedResourceName=@%SystemRoot%\system32\shell32.dll,-8964
|
||||
8
.babelrc
8
.babelrc
@ -5,11 +5,9 @@
|
||||
}],
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": ["transform-runtime", ["component", [
|
||||
{
|
||||
"libraryName": "element-ui"
|
||||
}
|
||||
]]],
|
||||
"plugins": ["transform-runtime", ["component", [{
|
||||
"libraryName": "element-ui"
|
||||
}]]],
|
||||
"env": {
|
||||
"test": {
|
||||
"presets": ["env", "stage-2"],
|
||||
|
||||
17
.gitignore
vendored
Normal file
17
.gitignore
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
/dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
/test/unit/coverage/
|
||||
/test/e2e/reports/
|
||||
selenium-debug.log
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
@ -1,13 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>数字化管理系统</title>
|
||||
<script src="./static/plugins/mock-1.0.0-beta3/mock-min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"axios": "^0.19.2",
|
||||
"babel-plugin-component": "0.10.1",
|
||||
"babel-polyfill": "6.26.0",
|
||||
"echarts": "^4.7.0",
|
||||
"element-ui": "^2.13.1",
|
||||
"gulp": "3.9.1",
|
||||
"gulp-concat": "2.6.1",
|
||||
@ -28,6 +29,7 @@
|
||||
"npm": "^6.14.4",
|
||||
"sass-loader": "6.0.6",
|
||||
"svg-sprite-loader": "3.7.3",
|
||||
"v-charts": "^1.19.0",
|
||||
"vue": "2.5.16",
|
||||
"vue-cookie": "1.1.4",
|
||||
"vue-router": "3.0.1",
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
// 站点主色
|
||||
// tips: 要达到整站主题修改效果, 请确保[$--color-primary]站点主色与[/src/element-ui-theme/index.js]文件中[import './element-[#17B3A3]/index.css']当前主题色一致
|
||||
/* 改变主题色变量 */
|
||||
$--color-primary: #3E8EF7;
|
||||
|
||||
/* 改变 icon 字体路径变量，必需 */
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-ui/packages/theme-chalk/src/index";
|
||||
$--color-primary: #3E8EF7;
|
||||
|
||||
// Navbar
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
@import "normalize"; // api: https://github.com/necolas/normalize.css/
|
||||
@import "variables"; // 站点变量
|
||||
@import "normalize"; // api: https://github.com/necolas/normalize.css/
|
||||
@import "_variables"; // 站点变量
|
||||
@import "base";
|
||||
|
||||
@ -5,12 +5,17 @@ import store from '@/store' // api: https://github.com/vuejs/v
|
||||
import VueCookie from 'vue-cookie' // api: https://github.com/alfhen/vue-cookie
|
||||
import '@/element-ui' // api: https://github.com/ElemeFE/element
|
||||
import '@/icons' // api: http://www.iconfont.cn/
|
||||
import '@/element-ui-theme'
|
||||
// import '@/element-ui-theme'
|
||||
import '@/assets/scss/index.scss'
|
||||
import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
|
||||
import { isAuth } from '@/utils'
|
||||
// import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
import VCharts from 'v-charts'
|
||||
Vue.use(VCharts)
|
||||
// import echarts from 'echarts/lib/echarts'
|
||||
// console.log(111)
|
||||
// console.log(echarts)
|
||||
// debugger
|
||||
Vue.use(VueCookie)
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
||||
@ -35,9 +35,9 @@ const mainRoutes = {
|
||||
// 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
|
||||
{ path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
|
||||
{ path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
|
||||
{ path: '/staff-manage', component: _import('business/staff/staff-manage/index'), name: 'staff-manage', meta: { title: '员工管理', isTab: true } },
|
||||
{ path: '/staff-profile', component: _import('business/staff/staff-profile/index'), name: 'staff-profile', meta: { title: '员工概述', isTab: true } },
|
||||
{ path: '/staff-archives', component: _import('business/staff/staff-archives/index'), name: 'staff-archives', meta: { title: '员工档案', isTab: true } }
|
||||
{ path: '/staff-manage', component: _import('business/staff/staff-manage/index'), name: 'staff-manage', meta: { title: '员工管理', isTab: true, isNoCard: true } },
|
||||
{ path: '/staff-profile', component: _import('business/staff/staff-profile/index'), name: 'staff-profile', meta: { title: '员工概述', isTab: true, isNoCard: true } },
|
||||
{ path: '/staff-archives', component: _import('business/staff/staff-archives/index'), name: 'staff-archives', meta: { title: '员工档案', isTab: true, isNoCard: true } }
|
||||
],
|
||||
beforeEnter (to, from, next) {
|
||||
let token = Vue.cookie.get('token')
|
||||
@ -127,7 +127,7 @@ function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
|
||||
} else {
|
||||
try {
|
||||
route['component'] = _import(`modules/${menuList[i].url}`) || null
|
||||
} catch (e) {}
|
||||
} catch (e) { }
|
||||
}
|
||||
routes.push(route)
|
||||
}
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>左边</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
</style>
|
||||
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="staff-manage-right">
|
||||
<div class="el-card__body">
|
||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="handleGetTableList()">
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleGetTableList()">查询</el-button>
|
||||
<el-button v-if="isAuth('sys:user:save')" type="primary" @click="handleAddOrUpdate()">新增</el-button>
|
||||
<el-button
|
||||
v-if="isAuth('sys:user:delete')"
|
||||
type="danger"
|
||||
@click="handleDelete()"
|
||||
:disabled="dataListSelections.length <= 0"
|
||||
>批量删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="el-card__body">
|
||||
<el-table
|
||||
:data="dataList"
|
||||
border
|
||||
v-loading="dataListLoading"
|
||||
@selection-change="handleChangeSelection"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
|
||||
<el-table-column prop="userId" header-align="center" align="center" width="80" label="ID"></el-table-column>
|
||||
<el-table-column prop="username" header-align="center" align="center" label="用户名"></el-table-column>
|
||||
<el-table-column prop="email" header-align="center" align="center" label="邮箱"></el-table-column>
|
||||
<el-table-column prop="mobile" header-align="center" align="center" label="手机号"></el-table-column>
|
||||
<el-table-column prop="status" header-align="center" align="center" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
|
||||
<el-tag v-else size="small">正常</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="180"
|
||||
label="创建时间"
|
||||
></el-table-column>
|
||||
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="isAuth('sys:user:update')"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="handleAddOrUpdate(scope.row.userId)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
v-if="isAuth('sys:user:delete')"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="handleDelete(scope.row.userId)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="handleChangeSize"
|
||||
@current-change="handleChangeCurrent"
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { apiSysUserList } from '@/api/api_sys'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dataForm: {
|
||||
userName: ''
|
||||
},
|
||||
dataList: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
dataListSelections: [],
|
||||
addOrUpdateVisible: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
},
|
||||
activated () {
|
||||
this.handleGetTableList()
|
||||
},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
handleGetTableList () {
|
||||
// apiSysUserList({
|
||||
// 'page': this.pageIndex,
|
||||
// 'limit': this.pageSize,
|
||||
// 'username': this.dataForm.userName
|
||||
// }).then(res => {
|
||||
// if (res && res.code === 0) {
|
||||
// this.dataList = res.page.list
|
||||
// this.totalPage = res.page.totalCount
|
||||
// } else {
|
||||
// this.dataList = []
|
||||
// this.totalPage = 0
|
||||
// }
|
||||
// this.dataListLoading = false
|
||||
// })
|
||||
},
|
||||
// 每页数
|
||||
handleChangeSize (val) {
|
||||
this.pageSize = val
|
||||
this.pageIndex = 1
|
||||
this.handleGetTableList()
|
||||
},
|
||||
// 当前页
|
||||
handleChangeCurrent (val) {
|
||||
this.pageIndex = val
|
||||
this.handleGetTableList()
|
||||
},
|
||||
// 多选
|
||||
handleChangeSelection (val) {
|
||||
this.dataListSelections = val
|
||||
},
|
||||
// 新增 / 修改
|
||||
handleAddOrUpdate (id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
handleDelete (id) {
|
||||
var userIds = id ? [id] : this.dataListSelections.map(item => {
|
||||
return item.userId
|
||||
})
|
||||
this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/sys/user/delete'),
|
||||
method: 'post',
|
||||
data: this.$http.adornData(userIds, false)
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.handleGetTableList()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
})
|
||||
}).catch(() => { })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,37 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="staff-manage">
|
||||
员工管理
|
||||
<staff-manage-left />
|
||||
<staff-manage-right />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import staffManageLeft from './compoments/staff-manage-left'
|
||||
import staffManageRight from './compoments/staff-manage-right'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
staffManageLeft,
|
||||
staffManageRight
|
||||
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.staff-manage {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,41 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="staff-archives-charts">
|
||||
<div class="staff-archives-title">性别分布</div>
|
||||
<div>
|
||||
<!-- <ve-ring :data="chartData"></ve-ring> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393 },
|
||||
{ '日期': '1/2', '访问用户': 3530 },
|
||||
{ '日期': '1/3', '访问用户': 2923 },
|
||||
{ '日期': '1/4', '访问用户': 1723 },
|
||||
{ '日期': '1/5', '访问用户': 3792 },
|
||||
{ '日期': '1/6', '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.staff-archives-charts {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,55 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="staff-archives-title">员工数量</div>
|
||||
<div class="staff-archives-content">
|
||||
截至
|
||||
<span class="staff-archives-yellow">2020</span>年
|
||||
<span class="staff-archives-yellow">2</span>月
|
||||
<span class="staff-archives-yellow">20</span>日，
|
||||
<span class="staff-archives-yellow">浙江霖梓控股有限公司</span>在职员工总数为
|
||||
<span class="staff-archives-bule">134</span>人，其中管理人员
|
||||
<span class="staff-archives-bule">134</span>人，占比
|
||||
<span class="staff-archives-bule">20.5%。</span>
|
||||
</div>
|
||||
<div class="staff-archives-content">
|
||||
<span class="staff-archives-yellow">近三个月</span>新入职员工
|
||||
<span class="staff-archives-bule">134</span>人，离职员工
|
||||
<span class="staff-archives-bule">134</span>人，离职率为
|
||||
<span class="staff-archives-bule">134%。</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.staff-archives {
|
||||
&-content {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
}
|
||||
&-yellow {
|
||||
color: #ed7d31;
|
||||
}
|
||||
&-bule {
|
||||
font-weight: 700;
|
||||
color: #1890ff;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,278 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="staff-archives-title">条件筛选</div>
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline staff-archives-form">
|
||||
<el-form-item label="选择部门">
|
||||
<!-- <el-select v-model="formInline.region" placeholder="请选择业务部门">
|
||||
<el-option label="全部" value="all"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>-->
|
||||
<el-cascader
|
||||
v-model="formInline.value"
|
||||
:options="options"
|
||||
:props="{ expandTrigger: 'hover' }"
|
||||
@change="handleChange"
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="选择时间段(仅对员工数量生效)">
|
||||
<el-date-picker
|
||||
v-model="formInline.value2"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:picker-options="pickerOptions"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary" @click="onSubmit">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formInline: {},
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick (picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick (picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick (picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}]
|
||||
},
|
||||
options: [{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '效率'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '可控'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '导航',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: '侧向导航'
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: '顶部导航'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [{
|
||||
value: 'basic',
|
||||
label: 'Basic',
|
||||
children: [{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
}, {
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
}, {
|
||||
value: 'typography',
|
||||
label: 'Typography 字体'
|
||||
}, {
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}, {
|
||||
value: 'button',
|
||||
label: 'Button 按钮'
|
||||
}]
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form',
|
||||
children: [{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
}, {
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
}, {
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
}, {
|
||||
value: 'input-number',
|
||||
label: 'InputNumber 计数器'
|
||||
}, {
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
}, {
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
}, {
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
}, {
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
}, {
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
}, {
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
}, {
|
||||
value: 'datetime-picker',
|
||||
label: 'DateTimePicker 日期时间选择器'
|
||||
}, {
|
||||
value: 'upload',
|
||||
label: 'Upload 上传'
|
||||
}, {
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}]
|
||||
}, {
|
||||
value: 'data',
|
||||
label: 'Data',
|
||||
children: [{
|
||||
value: 'table',
|
||||
label: 'Table 表格'
|
||||
}, {
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
}, {
|
||||
value: 'progress',
|
||||
label: 'Progress 进度条'
|
||||
}, {
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
}, {
|
||||
value: 'pagination',
|
||||
label: 'Pagination 分页'
|
||||
}, {
|
||||
value: 'badge',
|
||||
label: 'Badge 标记'
|
||||
}]
|
||||
}, {
|
||||
value: 'notice',
|
||||
label: 'Notice',
|
||||
children: [{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
}, {
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}, {
|
||||
value: 'message',
|
||||
label: 'Message 消息提示'
|
||||
}, {
|
||||
value: 'message-box',
|
||||
label: 'MessageBox 弹框'
|
||||
}, {
|
||||
value: 'notification',
|
||||
label: 'Notification 通知'
|
||||
}]
|
||||
}, {
|
||||
value: 'navigation',
|
||||
label: 'Navigation',
|
||||
children: [{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
}, {
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
}, {
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
}, {
|
||||
value: 'dropdown',
|
||||
label: 'Dropdown 下拉菜单'
|
||||
}, {
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}]
|
||||
}, {
|
||||
value: 'others',
|
||||
label: 'Others',
|
||||
children: [{
|
||||
value: 'dialog',
|
||||
label: 'Dialog 对话框'
|
||||
}, {
|
||||
value: 'tooltip',
|
||||
label: 'Tooltip 文字提示'
|
||||
}, {
|
||||
value: 'popover',
|
||||
label: 'Popover 弹出框'
|
||||
}, {
|
||||
value: 'card',
|
||||
label: 'Card 卡片'
|
||||
}, {
|
||||
value: 'carousel',
|
||||
label: 'Carousel 走马灯'
|
||||
}, {
|
||||
value: 'collapse',
|
||||
label: 'Collapse 折叠面板'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
value: 'ziyuan',
|
||||
label: '资源',
|
||||
children: [{
|
||||
value: 'axure',
|
||||
label: 'Axure Components'
|
||||
}, {
|
||||
value: 'sketch',
|
||||
label: 'Sketch Templates'
|
||||
}, {
|
||||
value: 'jiaohu',
|
||||
label: '组件交互文档'
|
||||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
</style>
|
||||
@ -1,5 +1,63 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="staff-archives">
|
||||
员工概况
|
||||
<el-card>
|
||||
<query-form />
|
||||
</el-card>
|
||||
<el-card>
|
||||
<employees-number />
|
||||
</el-card>
|
||||
<el-card>
|
||||
<div class="staff-archives-chart">
|
||||
<chart-form v-for="i in 10" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import chartForm from './componments/chart-form'
|
||||
import queryForm from './componments/query-form'
|
||||
import employeesNumber from './componments/employees-number'
|
||||
export default {
|
||||
components: {
|
||||
chartForm,
|
||||
queryForm,
|
||||
employeesNumber
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style >
|
||||
.el-card {
|
||||
margin: 0 0 7px 0 !important;
|
||||
}
|
||||
.staff-archives {
|
||||
overflow: hidden;
|
||||
}
|
||||
.staff-archives-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.staff-archives-form {
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.staff-archives-chart {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
@ -6,7 +6,8 @@
|
||||
v-model="mainTabsActiveName"
|
||||
:closable="true"
|
||||
@tab-click="selectedTabHandle"
|
||||
@tab-remove="removeTabHandle">
|
||||
@tab-remove="removeTabHandle"
|
||||
>
|
||||
<el-dropdown class="site-tabs__tools" :show-timeout="0">
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
@ -16,21 +17,33 @@
|
||||
<el-dropdown-item @click.native="refresh()">刷新当前标签页</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-tab-pane
|
||||
v-for="item in mainTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name">
|
||||
<el-card :body-style="siteContentViewHeight">
|
||||
<el-tab-pane v-for="item in mainTabs" :key="item.name" :label="item.title" :name="item.name">
|
||||
<component :is="$route.meta.isNoCard?'div':'el-card'" :body-style="siteContentViewHeight">
|
||||
<iframe
|
||||
v-if="item.type === 'iframe'"
|
||||
:src="item.iframeUrl"
|
||||
width="100%" height="100%" frameborder="0" scrolling="yes">
|
||||
</iframe>
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
scrolling="yes"
|
||||
></iframe>
|
||||
<keep-alive v-else>
|
||||
<router-view v-if="item.name === mainTabsActiveName" />
|
||||
</keep-alive>
|
||||
</el-card>
|
||||
</component>
|
||||
<!-- <el-card :body-style="siteContentViewHeight">
|
||||
<iframe
|
||||
v-if="item.type === 'iframe'"
|
||||
:src="item.iframeUrl"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
scrolling="yes"
|
||||
></iframe>
|
||||
<keep-alive v-else>
|
||||
<router-view v-if="item.name === mainTabsActiveName" />
|
||||
</keep-alive>
|
||||
</el-card>-->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- 主入口标签页 e -->
|
||||
@ -43,85 +56,85 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isURL } from '@/utils/validate'
|
||||
export default {
|
||||
inject: ['refresh'],
|
||||
data () {
|
||||
return {
|
||||
import { isURL } from '@/utils/validate'
|
||||
export default {
|
||||
inject: ['refresh'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
documentClientHeight: {
|
||||
get () { return this.$store.state.common.documentClientHeight }
|
||||
},
|
||||
menuActiveName: {
|
||||
get () { return this.$store.state.common.menuActiveName },
|
||||
set (val) { this.$store.commit('common/updateMenuActiveName', val) }
|
||||
},
|
||||
mainTabs: {
|
||||
get () { return this.$store.state.common.mainTabs },
|
||||
set (val) { this.$store.commit('common/updateMainTabs', val) }
|
||||
},
|
||||
mainTabsActiveName: {
|
||||
get () { return this.$store.state.common.mainTabsActiveName },
|
||||
set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
|
||||
},
|
||||
siteContentViewHeight () {
|
||||
var height = this.documentClientHeight - 50 - 30 - 2
|
||||
if (this.$route.meta.isTab) {
|
||||
height -= 40
|
||||
return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
|
||||
}
|
||||
return { minHeight: height + 'px' }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// tabs, 选中tab
|
||||
selectedTabHandle (tab) {
|
||||
tab = this.mainTabs.filter(item => item.name === tab.name)
|
||||
if (tab.length >= 1) {
|
||||
this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params })
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
documentClientHeight: {
|
||||
get () { return this.$store.state.common.documentClientHeight }
|
||||
},
|
||||
menuActiveName: {
|
||||
get () { return this.$store.state.common.menuActiveName },
|
||||
set (val) { this.$store.commit('common/updateMenuActiveName', val) }
|
||||
},
|
||||
mainTabs: {
|
||||
get () { return this.$store.state.common.mainTabs },
|
||||
set (val) { this.$store.commit('common/updateMainTabs', val) }
|
||||
},
|
||||
mainTabsActiveName: {
|
||||
get () { return this.$store.state.common.mainTabsActiveName },
|
||||
set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
|
||||
},
|
||||
siteContentViewHeight () {
|
||||
var height = this.documentClientHeight - 50 - 30 - 2
|
||||
if (this.$route.meta.isTab) {
|
||||
height -= 40
|
||||
return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
|
||||
// tabs, 删除tab
|
||||
removeTabHandle (tabName) {
|
||||
this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
|
||||
if (this.mainTabs.length >= 1) {
|
||||
// 当前选中tab被删除
|
||||
if (tabName === this.mainTabsActiveName) {
|
||||
var tab = this.mainTabs[this.mainTabs.length - 1]
|
||||
this.$router.push({ name: tab.name, query: tab.query, params: tab.params }, () => {
|
||||
this.mainTabsActiveName = this.$route.name
|
||||
})
|
||||
}
|
||||
return { minHeight: height + 'px' }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// tabs, 选中tab
|
||||
selectedTabHandle (tab) {
|
||||
tab = this.mainTabs.filter(item => item.name === tab.name)
|
||||
if (tab.length >= 1) {
|
||||
this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params })
|
||||
}
|
||||
},
|
||||
// tabs, 删除tab
|
||||
removeTabHandle (tabName) {
|
||||
this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
|
||||
if (this.mainTabs.length >= 1) {
|
||||
// 当前选中tab被删除
|
||||
if (tabName === this.mainTabsActiveName) {
|
||||
var tab = this.mainTabs[this.mainTabs.length - 1]
|
||||
this.$router.push({ name: tab.name, query: tab.query, params: tab.params }, () => {
|
||||
this.mainTabsActiveName = this.$route.name
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.menuActiveName = ''
|
||||
this.$router.push({ name: 'home' })
|
||||
}
|
||||
},
|
||||
// tabs, 关闭当前
|
||||
tabsCloseCurrentHandle () {
|
||||
this.removeTabHandle(this.mainTabsActiveName)
|
||||
},
|
||||
// tabs, 关闭其它
|
||||
tabsCloseOtherHandle () {
|
||||
this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
|
||||
},
|
||||
// tabs, 关闭全部
|
||||
tabsCloseAllHandle () {
|
||||
this.mainTabs = []
|
||||
} else {
|
||||
this.menuActiveName = ''
|
||||
this.$router.push({ name: 'home' })
|
||||
},
|
||||
// tabs, 刷新当前
|
||||
tabsRefreshCurrentHandle () {
|
||||
var tab = this.$route
|
||||
this.removeTabHandle(tab.name)
|
||||
this.$nextTick(() => {
|
||||
this.$router.push({ name: tab.name, query: tab.query, params: tab.params })
|
||||
})
|
||||
}
|
||||
},
|
||||
// tabs, 关闭当前
|
||||
tabsCloseCurrentHandle () {
|
||||
this.removeTabHandle(this.mainTabsActiveName)
|
||||
},
|
||||
// tabs, 关闭其它
|
||||
tabsCloseOtherHandle () {
|
||||
this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
|
||||
},
|
||||
// tabs, 关闭全部
|
||||
tabsCloseAllHandle () {
|
||||
this.mainTabs = []
|
||||
this.menuActiveName = ''
|
||||
this.$router.push({ name: 'home' })
|
||||
},
|
||||
// tabs, 刷新当前
|
||||
tabsRefreshCurrentHandle () {
|
||||
var tab = this.$route
|
||||
this.removeTabHandle(tab.name)
|
||||
this.$nextTick(() => {
|
||||
this.$router.push({ name: tab.name, query: tab.query, params: tab.params })
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user