Skip to content

肖文锋 / clm-admin

Go to a project
Commit e5624eb4 by xiaowenfeng
Options

1、初步完成学员列表

parent da5a2b4e
Inline Side-by-side
Showing with 349 additions and 12 deletions
src/components/Header.vue
...@@ -155,6 +155,7 @@ ...@@ -155,6 +155,7 @@
cursor: pointer; cursor: pointer;
.ant-btn { .ant-btn {
border: none; border: none;
box-shadow: none;
& > * { & > * {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
......
src/components/LeftNav.vue
...@@ -87,6 +87,7 @@ export default { ...@@ -87,6 +87,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url('../css/common.less');
@import url('../css/iconfont/iconfont.css'); @import url('../css/iconfont/iconfont.css');
.left-nav-wrap { .left-nav-wrap {
width: 100%; width: 100%;
...@@ -131,7 +132,7 @@ export default { ...@@ -131,7 +132,7 @@ export default {
background: #D2D2D2 100%; background: #D2D2D2 100%;
} }
::v-deep .ant-menu-sub{ ::v-deep .ant-menu-sub{
background: #E3E3E3 100%;; background: @e3-color;
} }
::v-deep .ant-menu-submenu-selected { ::v-deep .ant-menu-submenu-selected {
.ant-menu-submenu-title { .ant-menu-submenu-title {
...@@ -143,7 +144,7 @@ export default { ...@@ -143,7 +144,7 @@ export default {
height: 54px; height: 54px;
line-height: 54px; line-height: 54px;
font-size: 16px; font-size: 16px;
background: #E3E3E3 100%; background: @e3-color;
&::after { &::after {
content: ""; content: "";
width: 100%; width: 100%;
......
src/css/common.less
@tree-menu-width: 297px; @tree-menu-width: 297px;
@right-operate: calc(100% - @tree-menu-width); @right-operate: calc(100% - @tree-menu-width);
@e3-color: #E3E3E3 100%;
@f9-color: #F9F9F9 100%;
.has-top-nav-page-wrap { .has-top-nav-page-wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -18,3 +20,34 @@ ...@@ -18,3 +20,34 @@
background: #FFFFFF 100%; background: #FFFFFF 100%;
} }
} }
.flex-justify {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: justify;
}
::v-deep .qd-btn {
width: 93px;
height: 30px;
border-radius: 90px;
font-size: 14px;
text-align: center;
font-family: PingFang SC;
padding: 0;
}
::v-deep .qd-btn-default-w {
min-width: 93px;/*no*/
}
::v-deep .qd-table {
.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
background: @f9-color !important;
}
.ant-table-row {
td {
padding-top: 10px;
padding-bottom: 10px;
}
}
}
\ No newline at end of file
src/main.js
...@@ -3,7 +3,7 @@ import App from './App.vue' ...@@ -3,7 +3,7 @@ import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import http from './service/http' import http from './service/http'
import { Button, Popover, Menu, Breadcrumb, Input, Tree } from 'ant-design-vue' import { Button, Popover, Menu, Breadcrumb, Input, Tree, Table, Space } from 'ant-design-vue'
import './libs/flexible' import './libs/flexible'
// console.log(process.env) // console.log(process.env)
...@@ -26,4 +26,6 @@ app.use(Menu) ...@@ -26,4 +26,6 @@ app.use(Menu)
app.use(Breadcrumb) app.use(Breadcrumb)
app.use(Input) app.use(Input)
app.use(Tree) app.use(Tree)
app.use(Table)
app.use(Space)
app.use(store).use(router).mount('#app') app.use(store).use(router).mount('#app')
src/views/origanizationManage/Member.vue
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
{{value}} {{value}}
</a-button> </a-button>
</div> </div>
<div class="create-role-wrap"> <div class="create-role-wrap" v-show="searchType.current === Object.keys(searchType.types)[1]">
<a-button type="default" class="add-role-group">新增角色组</a-button> <a-button type="default" class="add-role-group">新增角色组</a-button>
<a-button type="default" class="add-role">新增角色</a-button> <a-button type="default" class="add-role">新增角色</a-button>
</div> </div>
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
v-show="searchType.current === Object.keys(searchType.types)[0]" v-show="searchType.current === Object.keys(searchType.types)[0]"
:treeData="organizationTreeData" :treeData="organizationTreeData"
:defaultExpandedKeys="['0-0']" :defaultExpandedKeys="['0-0']"
:blockNode="true"
showIcon showIcon
@select="selectOrganization" @select="selectOrganization"
> >
...@@ -44,15 +45,77 @@ ...@@ -44,15 +45,77 @@
</div> </div>
</div> </div>
<div class="right-operate operate-wrap"> <div class="right-operate operate-wrap">
<div class="top-wrap"></div> <section>
<div class="top-wrap flex-justify">
<span class="top-title">客服部</span>
<span class="menber-count">共4人</span>
<a-button type='default' class="qd-btn">编辑</a-button>
</div>
<div class="current-breadcrumb flex-justify">
<span>深圳企大科技有限公司</span> <span class="ant-breadcrumb-separator">&gt;</span> <span>客服部</span>
</div>
</section>
<section>
<div class="flex-justify level">
<span class="iconfont iconjiegou"></span>
<span class="level-name">下级部门</span>
</div>
<div class="level-list-wrap">
<div class="level-optation flex-justify">
<a-button type="default" class="qd-btn qd-btn-default-w">添加子部门</a-button>
</div>
<a-table class="qd-table" :showHeader="false" :pagination="false" :data-source="tableData" :columns="columns" :scroll="{y: 84}">
<template #tags>
<a-button type="default"><RightOutlined /></a-button>
</template>
</a-table>
</div>
</section>
<section>
<div class="flex-justify level">
<span class="iconfont iconjiegou"></span>
<span class="level-name">部门学员</span>
</div>
<div class="level-list-wrap">
<div class="level-optation flex-justify">
<a-space :size="15">
<a-button type="default" class="qd-btn">添加学员</a-button>
<a-button type="default" class="qd-btn dif-btn">批量删除/导入/修改</a-button>
<a-button type="default" class="qd-btn">调整部门</a-button>
<a-button type="default" class="qd-btn">批量删除</a-button>
<a-button type="default" class="qd-btn qd-btn-default-w">年度达标学分</a-button>
</a-space>
</div>
<a-table class="qd-table" :data-source="menberData" :columns="menberColumns" :row-selection="rewSelection"></a-table>
</div>
</section>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { RightOutlined } from '@ant-design/icons-vue'
export default { export default {
components: {
RightOutlined
},
setup () {
const rewSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows)
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows)
}
}
return ({
rewSelection
})
},
data () { data () {
return { return {
// placeholder: '搜索学员',
searchKey: '', searchKey: '',
showLine: false, showLine: false,
showIcon: true, showIcon: true,
...@@ -115,6 +178,155 @@ export default { ...@@ -115,6 +178,155 @@ export default {
{ title: '总裁办', key: '0-0-3' } { title: '总裁办', key: '0-0-3' }
] ]
}], }],
columns: [
{
title: '部门',
dataIndex: 'department'
},
{
title: '操作',
dataIndex: 'oprate',
slots: { customRender: 'tags' },
width: '48px'
}
],
menberColumns: [
{
title: '姓名',
dataIndex: 'name'
},
{
title: '登陆账号',
dataIndex: 'account'
},
{
title: '性别',
dataIndex: 'sex'
},
{
title: '角色',
dataIndex: 'role'
},
{
title: '职位',
dataIndex: 'post'
},
{
title: '身份',
dataIndex: 'identity'
},
{
title: '手机号',
dataIndex: 'phoneNumber'
},
{
title: '邮箱',
dataIndex: 'email'
},
{
title: '学历',
dataIndex: 'education'
},
{
title: '年度达标分值',
dataIndex: 'complianceScore'
},
{
title: '到期时间',
dataIndex: 'dueDate'
},
{
title: '状态',
dataIndex: 'state'
},
{
title: '操作',
dataIndex: 'operation'
}
],
tableData: [
{
key: '1',
department: '客服一部',
oprate: ''
},
{
key: '2',
department: '客服二部',
oprate: ''
},
{
key: '3',
department: '客服三部',
oprate: ''
}
],
menberData: [
{
key: '1',
name: '王大宝',
account: '18855981125',
sex: '男',
role: '负责人',
post: 'java',
identity: '管理员',
phoneNumber: '18855981125',
email: '493514152@qq.com',
education: '硕士',
complianceScore: '582分',
dueDate: '2021-11-31',
state: '有效',
operation: '锁定'
},
{
key: '2',
name: '王大宝',
account: '18855981125',
sex: '男',
role: '负责人',
post: 'java',
identity: '管理员',
phoneNumber: '18855981125',
email: '493514152@qq.com',
education: '硕士',
complianceScore: '582分',
dueDate: '2021-11-31',
state: '有效',
operation: '锁定'
},
{
key: '3',
name: '王大宝',
account: '18855981125',
sex: '男',
role: '负责人',
post: 'java',
identity: '管理员',
phoneNumber: '18855981125',
email: '493514152@qq.com',
education: '硕士',
complianceScore: '582分',
dueDate: '2021-11-31',
state: '有效',
operation: '锁定'
},
{
key: '4',
name: '王大宝',
account: '18855981125',
sex: '男',
role: '负责人',
post: 'java',
identity: '管理员',
phoneNumber: '18855981125',
email: '493514152@qq.com',
education: '硕士',
complianceScore: '582分',
dueDate: '2021-11-31',
state: '有效',
operation: '锁定'
}
],
searchType: { searchType: {
types: { types: {
organization: '组织架构', organization: '组织架构',
...@@ -138,9 +350,9 @@ export default { ...@@ -138,9 +350,9 @@ export default {
this.searchType.current = key this.searchType.current = key
}, },
selectOrganization (key, e) { selectOrganization (key, e) {
console.log(e.node.dataRef) console.log(this.organizationTreeData[0].key)
const treeNode = e.node const treeNode = e.node
console.log(treeNode) console.log('treeNode.dataRef.children:', treeNode.dataRef.children)
const promise = new Promise( const promise = new Promise(
resolve => { resolve => {
if (treeNode.dataRef.children) { if (treeNode.dataRef.children) {
...@@ -157,10 +369,14 @@ export default { ...@@ -157,10 +369,14 @@ export default {
}, 1000) }, 1000)
} }
) )
promise.then() console.log(promise)
// promise.then()
}, },
selectRole () { selectRole () {
console.log('selectRole', arguments) console.log('selectRole', arguments)
},
rowSelection () {
} }
}, },
computed: { computed: {
...@@ -231,10 +447,11 @@ export default { ...@@ -231,10 +447,11 @@ export default {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: scroll; overflow: scroll;
::v-deep { ::v-deep .ant-tree-title {
.ant-tree-title {
font-size: 16px; font-size: 16px;
} }
::v-deep .ant-tree-node-selected{
background: #CECECE 100%;
} }
.iconjiegou { .iconjiegou {
font-size: 24px; font-size: 24px;
...@@ -249,6 +466,7 @@ export default { ...@@ -249,6 +466,7 @@ export default {
padding: 4px 0 12px 45px; padding: 4px 0 12px 45px;
.ant-btn { .ant-btn {
height: 25px; height: 25px;
line-height: 25px;
width: 97px; width: 97px;
border-radius: 90px; border-radius: 90px;
padding: 0; padding: 0;
...@@ -265,7 +483,88 @@ export default { ...@@ -265,7 +483,88 @@ export default {
.top-wrap { .top-wrap {
width: 100%; width: 100%;
height: 36px; height: 36px;
background: red; .top-title {
width: 72px;
height: 36px;
color: rgba(16, 16, 16, 100);
font-size: 24px;
text-align: left;
font-family: SourceHanSansSC-regular;
}
.menber-count{
display: inline-block;
width: 68px;
height: 22px;
line-height: 22px;
border-radius: 4px;
background-color: rgba(195, 195, 195, 100);
color: rgba(255, 255, 255, 100);
font-size: 14px;
text-align: center;
font-family: PingFang SC;
border: 1px solid rgba(255, 255, 255, 100);
margin: 0 7px 0 11px;
}
}
.current-breadcrumb {
display: flex;
height: 23px;
width: 100%;
padding: 4px 0 0 0;
}
.level{
width: 100%;
padding: 21px 0 9px 0;
color: rgba(16, 16, 16, 100);
.level-name {
display: inline-block;
vertical-align: middle;
width: 80px;
height: 29px;
line-height: 29px;
font-size: 20px;
text-align: left;
font-family: SourceHanSansSC-regular;
}
}
.iconjiegou {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 24px;
font-size: 24px;
line-height: 24px;
padding-right: 6px;
}
.level-list-wrap {
width: 100%;
.level-optation {
padding: 0 25px;
width: 100%;
height: 42px;
background: @e3-color;
::v-deep .dif-btn{
width: 159px;
}
}
::v-deep .qd-table {
.ant-btn {
border: none;
background: none;
padding: 0;
width: 24px;
height: 24px;
text-align: right;
}
.ant-table-row-cell-break-word {
padding-right: 10px;
}
.ant-table-thead > tr , .ant-table-tbody > tr {
> :first-child {
padding-left: 30px;
}
}
}
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment