update 打包
This commit is contained in:
yoe
parent
a92c191eb1
commit
31cf5a4560
@ -26,8 +26,8 @@ const webpackConfig = merge(baseWebpackConfig, {
|
||||
devtool: config.build.productionSourceMap ? config.build.devtool : false,
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
filename: utils.assetsPath('js/[name].js'),
|
||||
chunkFilename: utils.assetsPath('js/[id].js')
|
||||
filename: utils.assetsPath('js/[name].[chunkhash].js'),
|
||||
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
|
||||
},
|
||||
plugins: [
|
||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
||||
|
||||
@ -56,12 +56,12 @@ module.exports = {
|
||||
|
||||
build: {
|
||||
// Template for index.html
|
||||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
index: path.resolve(__dirname, '../dist/management/index.html'),
|
||||
|
||||
// Paths
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsRoot: path.resolve(__dirname, '../dist/management/'),
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: './',
|
||||
assetsPublicPath: '/management/',
|
||||
|
||||
/**
|
||||
* Source Maps
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta base="/management/">
|
||||
<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="./src/assets/js/echarts/echarts.min.js"></script>
|
||||
<script src="/src/assets/js/echarts/echarts.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -51,6 +51,7 @@ const mainRoutes = {
|
||||
}
|
||||
|
||||
const router = new Router({
|
||||
base: '/management/',
|
||||
mode: 'history',
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
|
||||
|
||||
251
src/views/modules/staff/archives/index.vue
Normal file
251
src/views/modules/staff/archives/index.vue
Normal file
@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div class="staff">
|
||||
<el-card>
|
||||
<el-row>
|
||||
<el-col class="menu" :span="6">
|
||||
<el-menu @open="openMenu" :default-active="current" :collapse-transition="true" :unique-opened="true">
|
||||
<menu-tree v-for="(item) in menuList" :key="item.id" :menu="item"></menu-tree>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="block">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="员工姓名"><el-input v-model="searchParams.staffName"></el-input></el-form-item>
|
||||
<el-form-item label="人员状态">
|
||||
<el-select v-model="searchParams.staffState" placeholder="请选择">
|
||||
<el-option v-for="item in staffStateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getTable()">查询</el-button>
|
||||
<el-button @click="clear()">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:header-cell-style="{'color': '#909399', 'background-color': '#f5f7fa'}"
|
||||
style="width: 100%"
|
||||
height="100%">
|
||||
<el-table-column header-align="center" align="center" label="工号" prop="jobnumber"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="员工姓名" prop="name"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="职位" prop="position"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="状态" prop="deptName"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="bl-form3"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="pageTotal">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menuTree from '@/components/menu-tree'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
menuTree
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menuList: [], // 架构数据
|
||||
tableData: [], // 表格数据
|
||||
// 搜索数据
|
||||
searchParams: {
|
||||
staffName: '',
|
||||
staffState: ''
|
||||
},
|
||||
// 在职状态
|
||||
staffStateList: [
|
||||
{ value: '0', label: '在职' },
|
||||
{ value: '1', label: '离职' }
|
||||
],
|
||||
loading: false,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageTotal: 0,
|
||||
deptId: '',
|
||||
// 弹窗相关
|
||||
showAddDialogForm: false,
|
||||
activeName: 'first',
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: function (val) {
|
||||
if (val.name === 'staff') {
|
||||
this.clearData()
|
||||
this.handleGetTableList(val.query.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
current () {
|
||||
return this.$route.query.hasOwnProperty('id') ? this.$route.query.id ? this.$route.query.id.toString() : '' : ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.handleGetMenuList()
|
||||
this.handleGetTableList(this.current)
|
||||
},
|
||||
methods: {
|
||||
// 获取侧边架构列表
|
||||
handleGetMenuList () {
|
||||
let data = [{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 70990627,
|
||||
'name': '结算部',
|
||||
'parentId': 55969991,
|
||||
'number': '1'
|
||||
}
|
||||
],
|
||||
'id': 55969991,
|
||||
'name': '结算中心',
|
||||
'parentId': 1,
|
||||
'number': 2
|
||||
}, {
|
||||
'children': [
|
||||
{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 92131240,
|
||||
'name': '金融运营团队',
|
||||
'parentId': 87839336
|
||||
},
|
||||
{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 9213124111,
|
||||
'name': '2B业务组',
|
||||
'parentId': 92131239
|
||||
},
|
||||
{
|
||||
'children': [],
|
||||
'id': 9213124222,
|
||||
'name': '2C业务组',
|
||||
'parentId': 92131239
|
||||
}
|
||||
],
|
||||
'id': 92131239,
|
||||
'name': '电商运营团队',
|
||||
'parentId': 87839336
|
||||
}
|
||||
],
|
||||
'id': 87839336,
|
||||
'name': '运营中心',
|
||||
'parentId': 87839327
|
||||
}
|
||||
],
|
||||
'id': 87839327,
|
||||
'name': '业务前台',
|
||||
'parentId': 1
|
||||
}]
|
||||
this.menuList = data
|
||||
},
|
||||
// 获取数据列表
|
||||
handleGetTableList (id) {
|
||||
this.tableData = [{
|
||||
'deptName': '结算中心',
|
||||
'id': 665,
|
||||
'jobnumber': '4',
|
||||
'name': '刘更顺',
|
||||
'position': 'CPO'
|
||||
},
|
||||
{
|
||||
'deptName': '结算部',
|
||||
'id': 670,
|
||||
'jobnumber': '239',
|
||||
'name': '王文龙',
|
||||
'position': '数据运营'
|
||||
}]
|
||||
this.loading = false
|
||||
},
|
||||
openMenu (index, indexPath) {
|
||||
if (index === '51685041') {
|
||||
this.handleGetTableList(index)
|
||||
} else {
|
||||
this.clearData()
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
clear () {
|
||||
this.input = ''
|
||||
this.deptId = ''
|
||||
this.$router.push({name: 'staff', query: {id: ''}})
|
||||
},
|
||||
clearData () {
|
||||
this.tableData = []
|
||||
this.currentPage = 1
|
||||
this.pageTotal = 10
|
||||
this.loading = true
|
||||
},
|
||||
handleCurrentChange (val) {
|
||||
this.handleGetTableList()
|
||||
},
|
||||
handleSizeChange (val) {
|
||||
this.pageSize = val
|
||||
this.handleGetTableList()
|
||||
},
|
||||
// 弹窗相关
|
||||
handleClick (tab, event) {
|
||||
console.log(tab, event)
|
||||
},
|
||||
handleView () {
|
||||
this.showAddDialogForm = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.staff .block, .staff .table {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.el-form-item .el-form-item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.add-wrap {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.turn-work-list {
|
||||
background-color: pink;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.bl-form3{
|
||||
&.el-pagination{
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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,171 @@
|
||||
<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>
|
||||
37
src/views/modules/staff/manage/index copy.vue
Normal file
37
src/views/modules/staff/manage/index copy.vue
Normal file
@ -0,0 +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>
|
||||
265
src/views/modules/staff/manage/index.vue
Normal file
265
src/views/modules/staff/manage/index.vue
Normal file
@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div class="staff">
|
||||
<el-card>
|
||||
<el-row>
|
||||
<el-col class="menu" :span="6">
|
||||
<el-menu
|
||||
@open="openMenu"
|
||||
:default-active="current"
|
||||
:collapse-transition="true"
|
||||
:unique-opened="true"
|
||||
>
|
||||
<menu-tree v-for="(item) in menuList" :key="item.id" :menu="item"></menu-tree>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="block">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="员工姓名">
|
||||
<el-input v-model="searchParams.staffName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="人员状态">
|
||||
<el-select v-model="searchParams.staffState" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in staffStateList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getTable()">查询</el-button>
|
||||
<el-button @click="clear()">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:header-cell-style="{'color': '#909399', 'background-color': '#f5f7fa'}"
|
||||
style="width: 100%"
|
||||
height="100%"
|
||||
>
|
||||
<el-table-column header-align="center" align="center" label="工号" prop="jobnumber"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="员工姓名" prop="name"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="职位" prop="position"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="状态" prop="deptName"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="bl-form3"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="pageTotal"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menuTree from '@/components/menu-tree'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
menuTree
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menuList: [], // 架构数据
|
||||
tableData: [], // 表格数据
|
||||
// 搜索数据
|
||||
searchParams: {
|
||||
staffName: '',
|
||||
staffState: ''
|
||||
},
|
||||
// 在职状态
|
||||
staffStateList: [
|
||||
{ value: '0', label: '在职' },
|
||||
{ value: '1', label: '离职' }
|
||||
],
|
||||
loading: false,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageTotal: 0,
|
||||
deptId: '',
|
||||
// 弹窗相关
|
||||
showAddDialogForm: false,
|
||||
activeName: 'first',
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: function (val) {
|
||||
if (val.name === 'staff') {
|
||||
this.clearData()
|
||||
this.handleGetTableList(val.query.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
current () {
|
||||
return this.$route.query.hasOwnProperty('id') ? this.$route.query.id ? this.$route.query.id.toString() : '' : ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.handleGetMenuList()
|
||||
this.handleGetTableList(this.current)
|
||||
},
|
||||
methods: {
|
||||
// 获取侧边架构列表
|
||||
handleGetMenuList () {
|
||||
let data = [{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 70990627,
|
||||
'name': '结算部',
|
||||
'parentId': 55969991,
|
||||
'number': '1'
|
||||
}
|
||||
],
|
||||
'id': 55969991,
|
||||
'name': '结算中心',
|
||||
'parentId': 1,
|
||||
'number': 2
|
||||
}, {
|
||||
'children': [
|
||||
{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 92131240,
|
||||
'name': '金融运营团队',
|
||||
'parentId': 87839336
|
||||
},
|
||||
{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 9213124111,
|
||||
'name': '2B业务组',
|
||||
'parentId': 92131239
|
||||
},
|
||||
{
|
||||
'children': [],
|
||||
'id': 9213124222,
|
||||
'name': '2C业务组',
|
||||
'parentId': 92131239
|
||||
}
|
||||
],
|
||||
'id': 92131239,
|
||||
'name': '电商运营团队',
|
||||
'parentId': 87839336
|
||||
}
|
||||
],
|
||||
'id': 87839336,
|
||||
'name': '运营中心',
|
||||
'parentId': 87839327
|
||||
}
|
||||
],
|
||||
'id': 87839327,
|
||||
'name': '业务前台',
|
||||
'parentId': 1
|
||||
}]
|
||||
this.menuList = data
|
||||
},
|
||||
// 获取数据列表
|
||||
handleGetTableList (id) {
|
||||
this.tableData = [{
|
||||
'deptName': '结算中心',
|
||||
'id': 665,
|
||||
'jobnumber': '4',
|
||||
'name': '刘更顺',
|
||||
'position': 'CPO'
|
||||
},
|
||||
{
|
||||
'deptName': '结算部',
|
||||
'id': 670,
|
||||
'jobnumber': '239',
|
||||
'name': '王文龙',
|
||||
'position': '数据运营'
|
||||
}]
|
||||
this.loading = false
|
||||
},
|
||||
openMenu (index, indexPath) {
|
||||
if (index === '51685041') {
|
||||
this.handleGetTableList(index)
|
||||
} else {
|
||||
this.clearData()
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
clear () {
|
||||
this.input = ''
|
||||
this.deptId = ''
|
||||
this.$router.push({ name: 'staff', query: { id: '' } })
|
||||
},
|
||||
clearData () {
|
||||
this.tableData = []
|
||||
this.currentPage = 1
|
||||
this.pageTotal = 10
|
||||
this.loading = true
|
||||
},
|
||||
handleCurrentChange (val) {
|
||||
this.handleGetTableList()
|
||||
},
|
||||
handleSizeChange (val) {
|
||||
this.pageSize = val
|
||||
this.handleGetTableList()
|
||||
},
|
||||
// 弹窗相关
|
||||
handleClick (tab, event) {
|
||||
console.log(tab, event)
|
||||
},
|
||||
handleView () {
|
||||
this.showAddDialogForm = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.staff .block,
|
||||
.staff .table {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.el-form-item .el-form-item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.add-wrap {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.turn-work-list {
|
||||
background-color: pink;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.bl-form3 {
|
||||
&.el-pagination {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,71 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="staff-archives-charts">
|
||||
<div class="staff-archives-title">性别分布</div>
|
||||
<div>
|
||||
<ve-ring height="300px" :data="chartData" :extend="chartExtend" :settings="chartSettings"></ve-ring>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
this.chartExtend = {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'center',
|
||||
y: '80%',
|
||||
show: true
|
||||
},
|
||||
color: ['#09f', '#eeeeee', '#468251', '#666666'],
|
||||
series: {
|
||||
center: ['50%', '40%']
|
||||
}
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['分类', '数量'],
|
||||
rows: [
|
||||
{ '分类': '0-3年', '数量': '50' },
|
||||
{ '分类': '3-5年', '数量': '80' },
|
||||
{ '分类': '5-8年', '数量': '58' },
|
||||
{ '分类': '8-10年', '数量': '58' }
|
||||
]
|
||||
},
|
||||
chartSettings: {
|
||||
radius: ['60px', '80px'],
|
||||
itemStyle: {
|
||||
textAlign: 'center'
|
||||
},
|
||||
label: {
|
||||
formatter: params => {
|
||||
console.log(params)
|
||||
return `{a|${params.data.name}\n${params.data.value}人}`
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
color: '#ccc',
|
||||
textAlign: 'center'
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
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>
|
||||
363
src/views/modules/staff/profile/componments/query-form/index.vue
Normal file
363
src/views/modules/staff/profile/componments/query-form/index.vue
Normal file
@ -0,0 +1,363 @@
|
||||
<!-- -->
|
||||
<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-input placeholder="请选择部门" @focus="isChoose=true" readonly :value="formInline.input3">
|
||||
<!-- <i
|
||||
slot="suffix"
|
||||
class="el-input__icon el-icon-arrow-up"
|
||||
:style="{transform:isChoose?'rotate(0deg)':'rotate(-180deg)'}"
|
||||
@click="isChoose = !isChoose"
|
||||
></i>-->
|
||||
</el-input>
|
||||
<!-- <div :class="{'staff-archives-choose':true,'staff-archives-choose1' :isChoose}">
|
||||
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>{{ data.label }}</span>
|
||||
<span>({{ data.number }})人</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>-->
|
||||
<!-- <el-select v-model="value" placeholder="请选择">
|
||||
<el-option>
|
||||
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
||||
</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="`选择时间段\n(仅对员工数量生效)`">
|
||||
<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>
|
||||
|
||||
<el-dialog title="选择部门" :visible.sync="isChoose" width="30%">
|
||||
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>{{ data.label }}</span>
|
||||
<span>({{ data.number }})人</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isChoose = false">取 消</el-button>
|
||||
<el-button type="primary" size="mini" @click="onsumbit">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
isChooseText: '',
|
||||
isChoose: false,
|
||||
data: [{
|
||||
label: '业务前台',
|
||||
number: 24,
|
||||
children: [{
|
||||
label: '商务中心',
|
||||
number: 10
|
||||
}, {
|
||||
label: '运营中心',
|
||||
number: 12
|
||||
}]
|
||||
}, {
|
||||
label: '业务中台',
|
||||
number: 25,
|
||||
children: [{
|
||||
label: '产品中心',
|
||||
number: 12
|
||||
}, {
|
||||
label: '客服中心',
|
||||
number: 13
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
formInline: {
|
||||
input3: ''
|
||||
},
|
||||
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: {
|
||||
onsumbit () {
|
||||
this.formInline.input3 = this.isChooseText
|
||||
this.isChoose = false
|
||||
},
|
||||
handleNodeClick (a, b) {
|
||||
this.isChooseText = a.label
|
||||
|
||||
console.log(this.formInline.input3)
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.el-input__icon {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.staff-archives-choose {
|
||||
margin: 2px;
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
.staff-archives-choose1 {
|
||||
height: 0px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
67
src/views/modules/staff/profile/index.vue
Normal file
67
src/views/modules/staff/profile/index.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="staff-archives">
|
||||
<el-card>
|
||||
<query-form />
|
||||
</el-card>
|
||||
<el-card>
|
||||
<employees-number />
|
||||
</el-card>
|
||||
<div class="staff-archives-chart">
|
||||
<el-card v-for="i in 10" :key="i">
|
||||
<chart-form />
|
||||
</el-card>
|
||||
</div>
|
||||
</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;
|
||||
justify-content: space-between;
|
||||
> div {
|
||||
width: 49.6%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user