Skip to content

肖文锋 / clm-admin

Go to a project
Commit 11c053cc by xiaowenfeng
Options

1、修改了大量

parent 9db13274
Inline Side-by-side
Showing with 1595 additions and 159 deletions
src/components/DepSelectModal.vue 0 → 100644
<template>
<a-modal
:get-container="'#rightBody'"
:visible="true"
:maskStyle="{position: 'absolute'}"
:closable="false"
:wrapClassName="'qd-input-modal'"
:okText="'确定'"
:cancelText="'取消'"
title="选择部门"
@ok="handleOk"
>
<div class="select-wrap">
<div class="content">
<p class="title">选择</p>
<div class="choose">
<a-input
:placeholder="'搜索部门名'"
allow-clear
/>
<div class="current">
<div>深圳企大云科技有限公司</div>
<div>></div>
<div>客服部</div>
</div>
</div>
</div>
<div class="content">
<p class="title">已选</p>
<div class="choose"></div>
</div>
</div>
</a-modal>
</template>
<style lang="less" scoped>
.select-wrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
.content {
width: 295px;
height: 100%;
.title {
width: 100%;
height: 50px;
padding: 16px 0 7px 0;
font-size: 18px;
}
.choose {
width: 100%;
height: 370px;
line-height: 20px;
border-radius: 5px;
background-color: rgba(249, 249, 249, 100);
text-align: center;
border: 1px solid rgba(227, 227, 227, 100);
padding: 7px 9px;
.ant-input-affix-wrapper {
height: 45px;
font-size: 14px;
::v-deep(.ant-input-clear-icon) {
font-size: 16px;
}
}
}
}
}
</style>
src/components/DepartmentDrawer.vue 0 → 100644
<template>
<a-drawer
title="编辑部门"
:placement="placement"
:closable="false"
:visible="visible"
:wrap-style="{ position: 'absolute' }"
:wrapClassName="'right-drawer'"
:get-container="'#rightBody'"
>
<p class="drawer-form-title">部门信息</p>
<div class="department-edit">
<a-form>
<a-form-item label="部门名称" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" allow-clear :placeholder="'最多允许输入30个汉子 (60字符)'"/>
</a-form-item>
<a-form-item label="上级部门">
<a-input v-model:value="modelRef.superiorDepartment" allow-clear/>
</a-form-item>
<a-form-item label="简介" class="drawer-text">
<a-textarea v-model:value="modelRef.describe" allow-clear/>
</a-form-item>
</a-form>
</div>
<p class="drawer-form-title">部门必修课</p>
<div class="bot-btn">
<a-space :size="35">
<a-button type="default" class="qd-right-drawer-btn" @click="onClose">
删除
</a-button>
<a-button type="default" class="qd-right-drawer-btn qd-right-drawer-btn-save " @click="onSubmit">
保存
</a-button>
<a-button type="default" class="qd-right-drawer-btn" @click="onClose">
取消
</a-button>
</a-space>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRaw } from 'vue'
import { useForm } from '@ant-design-vue/use'
export default {
props: ['visible'],
data () {
return {
placement: 'right'
}
},
methods: {
onClose () {
this.$emit('close')
}
},
setup () {
const modelRef = reactive({
name: '',
superiorDepartment: '',
describe: ''
})
const rulesRef = reactive({
name: [
{
required: true,
message: '请输入部门名称'
}
]
})
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)
const onSubmit = e => {
e.preventDefault()
validate()
.then(() => {
console.log(toRaw(modelRef))
})
.catch(err => {
console.log('error', err)
})
}
return {
validateInfos,
resetFields,
modelRef,
onSubmit
}
}
}
</script>
<style lang="less" scoped>
.department-edit{
height: 276px;
width: 100%;
padding-top: 20px;
.drawer-text{
height: 101px !important;
padding-top: 1px !important;
}
}
</style>
src/components/Header.vue
......@@ -46,6 +46,7 @@
box-sizing: border-box;
position: relative;
color: #101010;
z-index: 1001;
& > * {
position: absolute;
top: 50%;
......
src/components/TestDrawer.vue 0 → 100644
<template>
<a-drawer
title="编辑部门"
:placement="placement"
:closable="false"
:visible="visible"
:wrap-style="{ position: 'absolute' }"
:wrapClassName="'right-drawer'"
:get-container="'#rightBody'"
@close="onClose"
>
<p class="drawer-form-title">部门信息</p>
<div class="department-edit">
<a-form>
<a-form-item label="部门名称" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" allow-clear :placeholder="'最多允许输入30个汉子 (60字符)'"/>
</a-form-item>
<a-form-item label="上级部门">
<a-input v-model:value="modelRef.superiorDepartment" allow-clear/>
</a-form-item>
<a-form-item label="简介" class="drawer-text">
<a-textarea v-model:value="modelRef.describe" allow-clear/>
</a-form-item>
</a-form>
</div>
<p class="drawer-form-title">部门必修课</p>
<div class="bot-btn">
<a-space :size="35">
<a-button type="default" class="qd-right-drawer-btn" @click="onClose">
删除dddd
</a-button>
<a-button type="default" class="qd-right-drawer-btn qd-right-drawer-btn-save " @click="onSubmit">
保存
</a-button>
<a-button type="default" class="qd-right-drawer-btn" @click="onClose">
取消
</a-button>
</a-space>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRaw } from 'vue'
import { useForm } from '@ant-design-vue/use'
export default {
props: ['visible'],
data () {
return {
placement: 'right'
}
},
methods: {
onClose () {
this.$emit('close')
}
},
setup () {
const modelRef = reactive({
name: '',
superiorDepartment: '',
describe: ''
})
const rulesRef = reactive({
name: [
{
required: true,
message: '请输入部门名称'
}
]
})
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)
const onSubmit = e => {
e.preventDefault()
validate()
.then(() => {
console.log(toRaw(modelRef))
})
.catch(err => {
console.log('error', err)
})
}
return {
validateInfos,
resetFields,
modelRef,
onSubmit
}
}
}
</script>
<style lang="less" scoped>
.department-edit{
height: 276px;
width: 100%;
padding-top: 20px;
.drawer-text{
height: 101px !important;
padding-top: 1px !important;
}
}
</style>
src/components/Tree.vue 0 → 100644
<template>
<a-tree
class="qd-tree"
v-model:expandedKeys="expandedKeys"
:treeData="treeData"
:replaceFields="{
children:'children',
title:'name',
key:'id'
}"
showIcon
@select="selectOrganization"
>
<template #icon>
<span class="iconfont iconjiegou"></span>
</template>
<template v-slot:title="item">
<span class="qd-tree-title">{{item.name}}</span>
<a-space :size="2" class="oprate-icon" v-show="isEdit">
<a-button type="default" @click.stop="testAdd(item)"><PlusOutlined></PlusOutlined></a-button>
<a-button type="default" @click.stop="test(item)"><CloseOutlined></CloseOutlined></a-button>
</a-space>
<div v-if="addSub === item.id" class="add-sub">
<a-input @click.stop=""></a-input>
<CloseCircleFilled @click.stop=""/>
<CheckCircleFilled @click.stop=""/>
</div>
</template>
<!-- <template #custom=item>
<span>{{item.title}}</span>
<a-button type="default" @click.stop="test(item)">删除</a-button>
<a-button type="default" @click.stop="test(item)">添加</a-button>
</template> -->
</a-tree>
</template>
<script>
import { CloseOutlined, PlusOutlined, CloseCircleFilled, CheckCircleFilled } from '@ant-design/icons-vue'
export default {
props: {
treeData: {
required: true,
type: Array
},
defaultExpandedKeys: {
required: true,
type: Array
}
},
mounted () {
this.expandedKeys = this.defaultExpandedKeys
},
data () {
return {
expandedKeys: [],
addSub: '',
isEdit: false
}
},
components: {
CloseOutlined,
PlusOutlined,
CloseCircleFilled,
CheckCircleFilled
},
methods: {
testAdd (e) {
console.log(e.dataRef.id)
console.log('this.expandedKeys:', this.expandedKeys)
this.expandedKeys.push(e.dataRef.id)
this.addSub = e.dataRef.id
},
selectOrganization (key, e) {
console.log(key)
console.log(e)
// this.departmentList.push({
// id: e.node.dataRef.id + 11,
// parentId: e.node.dataRef.id,
// name: '销售3组一部',
// seq: 3,
// folderCount: 0,
// objectCount: 0,
// spread: '1',
// editable: '1'
// })
}
}
}
</script>
<style lang="less" scoped>
.qd-tree {
::v-deep(.ant-tree-node-content-wrapper) {
height: unset;
.ant-tree-title{
font-size: 16px;
.qd-tree-title {
padding-right: 16px;
}
.ant-btn {
transform: scale(0.8);
padding: 0;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: none;
border: none;
}
.add-sub {
margin-left: 19px;
position: relative;
.ant-input {
height: 30px;
width: 247px;
padding-right: 60px;
}
.anticon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
}
.anticon-close-circle{
right: 36px;
color: #D2D2D2;
:hover {
color: #bfbfbf;
}
}
.anticon-check-circle{
right: 11px;
color: #101010;
:hover {
color: #000;
}
}
}
}
}
::v-deep(.ant-tree-switcher) {
top: 2.5px;
}
::v-deep(.ant-tree-node-selected){
background: #CECECE 100% !important;
}
::v-deep(.iconjiegou) {
font-size: 24px;
}
::v-deep(.ant-tree-switcher-icon) {
font-size: 16px !important;
}
.anticon {
font-size: 16px;
}
}
</style>
src/css/common.less
......@@ -2,6 +2,9 @@
@right-operate: calc(100% - @tree-menu-width);
@e3-color: #E3E3E3 100%;
@f9-color: #F9F9F9 100%;
@right-drawer-header-height: 111px;
@right-drawer-btns-height: 81px;
@right-drawer-body-height: calc(100% - @right-drawer-header-height - @right-drawer-btns-height);
.has-top-nav-page-wrap {
width: 100%;
height: 100%;
......@@ -55,4 +58,77 @@
padding-bottom: 10px;
}
}
}
\ No newline at end of file
}
.right-body {
::v-deep(.right-drawer) {
.ant-drawer-content-wrapper{
width: 669px !important;
}
.ant-drawer-header {
padding: 54px 23px 21px 23px;
border: none;
height: @right-drawer-header-height;
.ant-drawer-title{
line-height: 36px;
font-size: 24px;
}
}
.ant-drawer-body{
padding: 0 23px;
height: @right-drawer-body-height;
.drawer-form-title {
height: 36px;
line-height: 36px;
font-size: 16px;
padding: 0 9px;
background-color: #f0f0f0;
font-family: SourceHanSansSC-regular;
margin: 0;
}
}
.ant-drawer-content-wrapper {
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(255, 255, 255, 100);
}
.bot-btn {
position: absolute;
bottom: 0;
width: 100%;
height: @right-drawer-btns-height;
border-top: 1px solid #e8e8e8;
padding: 23px 23px 22px 23px;
text-align: center;
left: 0;
background: #fff;
border-radius: 0 0 4px 4px;
.qd-right-drawer-btn{
width: 85px;
height: 36px;
border-radius: 4px;
padding: 0;
}
.qd-right-drawer-btn-save {
background: #000000 100%;
color: #fff;
}
}
.ant-form-item {
height: 64px;
padding: 14px 0;
margin: 0;
.ant-form-item-label {
width: 148px;
}
}
.ant-input-affix-wrapper-textarea-with-clear-btn{
height: 100px;
}
textarea {
resize: none;
}
.ant-form-item-control-wrapper {
width: 458px;
}
}
}
src/libs/testModal.js 0 → 100644
var department = {
values: [{
name: '深圳企大科技有限公司',
id: 0,
parentId: -1
}, {
id: 1042346,
parentId: 0,
name: '运营部',
seq: 2,
folderCount: 3,
objectCount: 6,
spread: '1',
editable: '1'
}, {
id: 1042349,
parentId: 0,
name: '产品中心',
seq: 3,
folderCount: 1,
objectCount: 28,
spread: '1',
editable: '1'
}, {
id: 1025805,
parentId: 0,
name: '企大云体验用户',
seq: 4,
folderCount: 28,
objectCount: 32,
spread: '1',
editable: '1'
}, {
id: 1043666,
parentId: 0,
name: '医药行业专区',
seq: 6,
folderCount: 0,
objectCount: 7,
spread: '1',
editable: '1'
}, {
id: 1047773,
parentId: 0,
name: '深圳企大商学院',
seq: 7,
folderCount: 1,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1052409,
parentId: 0,
name: '测试部',
seq: 8,
folderCount: 3,
objectCount: 3,
spread: '1',
editable: '1'
}, {
id: 200000460,
parentId: 0,
name: '管理部',
seq: 10,
folderCount: 0,
objectCount: 2,
spread: '1',
editable: '1'
}, {
id: 1042518,
parentId: 0,
name: '渠道管理部',
seq: 6534,
folderCount: 2,
objectCount: 2,
spread: '1',
editable: '1'
}, {
id: 1042350,
parentId: 0,
name: '客户服务中心',
seq: 6535,
folderCount: 2,
objectCount: 6,
spread: '1',
editable: '1'
}, {
id: 200000698,
parentId: 0,
name: '销售部',
seq: 6541,
folderCount: 2,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1030771,
parentId: 1025805,
name: '云课堂LaLa',
seq: 0,
folderCount: 0,
objectCount: 45,
spread: '1',
editable: '1'
}, {
id: 1030772,
parentId: 1025805,
name: '云课堂ZHANG',
seq: 1,
folderCount: 3,
objectCount: 56,
spread: '1',
editable: '1'
}, {
id: 1042204,
parentId: 1025805,
name: '云课堂QI',
seq: 2,
folderCount: 20,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1042365,
parentId: 1025805,
name: '云课堂WANGYANG',
seq: 3,
folderCount: 1,
objectCount: 70,
spread: '1',
editable: '1'
}, {
id: 1042427,
parentId: 1025805,
name: '云课堂LI',
seq: 4,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1041728,
parentId: 1025805,
name: '云课堂YAN',
seq: 5,
folderCount: 2,
objectCount: 67,
spread: '1',
editable: '1'
}, {
id: 1042451,
parentId: 1025805,
name: '云课堂XIANG',
seq: 6,
folderCount: 0,
objectCount: 22,
spread: '1',
editable: '1'
}, {
id: 1041989,
parentId: 1025805,
name: '云课堂YAO',
seq: 7,
folderCount: 1,
objectCount: 71,
spread: '1',
editable: '1'
}, {
id: 1042824,
parentId: 1025805,
name: '云课堂WUZHIGUANG',
seq: 8,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1042979,
parentId: 1025805,
name: '云课堂ZHUPENG',
seq: 9,
folderCount: 0,
objectCount: 27,
spread: '1',
editable: '1'
}, {
id: 1041991,
parentId: 1025805,
name: '云课堂CHENG',
seq: 10,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1042517,
parentId: 1025805,
name: '云课堂LYQ',
seq: 11,
folderCount: 0,
objectCount: 41,
spread: '1',
editable: '1'
}, {
id: 1043222,
parentId: 1025805,
name: '云课堂-LIUYANBIN',
seq: 12,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1041992,
parentId: 1025805,
name: '云课堂Linda',
seq: 13,
folderCount: 0,
objectCount: 57,
spread: '1',
editable: '1'
}, {
id: 1043286,
parentId: 1025805,
name: '云课程WANHENG',
seq: 14,
folderCount: 0,
objectCount: 11,
spread: '1',
editable: '1'
}, {
id: 1043306,
parentId: 1025805,
name: '云课堂-LIURY',
seq: 15,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1043311,
parentId: 1025805,
name: '云课堂-WANGTF',
seq: 17,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1043525,
parentId: 1025805,
name: '云课堂-ZJX',
seq: 18,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1046645,
parentId: 1025805,
name: '云课堂ZHAO',
seq: 20,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1048462,
parentId: 1025805,
name: '云课堂Annychen',
seq: 21,
folderCount: 3,
objectCount: 79,
spread: '1',
editable: '1'
}, {
id: 1049422,
parentId: 1025805,
name: '云课堂WANGHENG',
seq: 23,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1052180,
parentId: 1025805,
name: '云课堂Liruyi',
seq: 24,
folderCount: 0,
objectCount: 20,
spread: '1',
editable: '1'
}, {
id: 1052181,
parentId: 1025805,
name: '云课堂Pengxl',
seq: 25,
folderCount: 0,
objectCount: 29,
spread: '1',
editable: '1'
}, {
id: 1052182,
parentId: 1025805,
name: '云课堂Libing',
seq: 26,
folderCount: 0,
objectCount: 8,
spread: '1',
editable: '1'
}, {
id: 1052421,
parentId: 1025805,
name: '云课堂ChenDT',
seq: 27,
folderCount: 0,
objectCount: 3,
spread: '1',
editable: '1'
}, {
id: 200000575,
parentId: 1025805,
name: '云课堂WEN',
seq: 28,
folderCount: 0,
objectCount: 2,
spread: '1',
editable: '1'
}, {
id: 1043321,
parentId: 1025805,
name: '总部销售中心',
seq: 28,
folderCount: 1,
objectCount: 13,
spread: '1',
editable: '1'
}, {
id: 1053160,
parentId: 1025805,
name: '云课程HePeiRong',
seq: 29,
folderCount: 0,
objectCount: 6,
spread: '1',
editable: '1'
}, {
id: 1041609,
parentId: 1030772,
name: '体验用户',
seq: 2,
folderCount: 0,
objectCount: 4,
spread: '1',
editable: '1'
}, {
id: 1041611,
parentId: 1030772,
name: '体验用户2',
seq: 3,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1047273,
parentId: 1030772,
name: '祥鑫学院',
seq: 3,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1049628,
parentId: 1032002,
name: '山东厚丰汽车散热器有限公司',
seq: 1,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1053646,
parentId: 1032002,
name: '山东胜邦绿野化学有限公司',
seq: 2,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1053659,
parentId: 1032002,
name: '四川桔洲堂医药有限公司',
seq: 3,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1048208,
parentId: 1041728,
name: '企大微课堂',
seq: 1,
folderCount: 0,
objectCount: 8,
spread: '1',
editable: '1'
}, {
id: 1051858,
parentId: 1041728,
name: '企大课堂体验',
seq: 2,
folderCount: 0,
objectCount: 6,
spread: '1',
editable: '1'
}, {
id: 1052096,
parentId: 1041989,
name: '企大柳岸',
seq: 1,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1042205,
parentId: 1042204,
name: '广东鸿图科技股份有限公司',
seq: 1,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1042206,
parentId: 1042204,
name: '毅兴塑胶原料有限公司',
seq: 2,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1042207,
parentId: 1042204,
name: '热爱家具进出口贸易',
seq: 3,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1042296,
parentId: 1042204,
name: '惠州三吉精工惠州有限公司',
seq: 4,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1042351,
parentId: 1042204,
name: '东莞旭丽电子有限公司',
seq: 5,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1042355,
parentId: 1042204,
name: '东莞市宝源光电科技有限公司',
seq: 6,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1042446,
parentId: 1042204,
name: '东莞市亚美精密机械配件有限公司',
seq: 7,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1042678,
parentId: 1042204,
name: '骅国电子有限公司',
seq: 8,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1042691,
parentId: 1042204,
name: '禾创智能科技有限公司',
seq: 9,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1042832,
parentId: 1042204,
name: '东莞致通电脑有限公司',
seq: 10,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1042973,
parentId: 1042204,
name: '茵莉电子',
seq: 11,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1042978,
parentId: 1042204,
name: '鼎峰房地产',
seq: 12,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1042981,
parentId: 1042204,
name: '伟旺达',
seq: 13,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1042982,
parentId: 1042204,
name: '创慧电子',
seq: 14,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1042983,
parentId: 1042204,
name: '张力机电',
seq: 15,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1042984,
parentId: 1042204,
name: '海陆通',
seq: 16,
folderCount: 0,
objectCount: 2,
spread: '1',
editable: '1'
}, {
id: 1043022,
parentId: 1042204,
name: '东莞市吉宝包装有限公司',
seq: 17,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1043200,
parentId: 1042204,
name: '龙光电子集团',
seq: 18,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1043224,
parentId: 1042204,
name: '耀宇塑胶五金',
seq: 19,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1043285,
parentId: 1042204,
name: '广东维尔科技股份有限公司',
seq: 20,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1048486,
parentId: 1042328,
name: '招聘',
seq: 1,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1048487,
parentId: 1042328,
name: '培训',
seq: 2,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1042328,
parentId: 1042345,
name: '人力资源部',
seq: 1,
folderCount: 2,
objectCount: 2,
spread: '1',
editable: '1'
}, {
id: 1052905,
parentId: 1042346,
name: '测试',
seq: 2,
folderCount: 0,
objectCount: 2,
spread: '1',
editable: '1'
}, {
id: 1042345,
parentId: 1042346,
name: '课程开发组',
seq: 3,
folderCount: 1,
objectCount: 8,
spread: '1',
editable: '1'
}, {
id: 1042347,
parentId: 1042346,
name: 'UI',
seq: 3,
folderCount: 1,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1042348,
parentId: 1042347,
name: '新媒体运营',
seq: 1,
folderCount: 0,
objectCount: 2,
spread: '1',
editable: '1'
}, {
id: 200001066,
parentId: 1042349,
name: '测试跨公司删除',
seq: 1,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1048489,
parentId: 1042350,
name: '渠道中心客服',
seq: 2,
folderCount: 1,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1032002,
parentId: 1042350,
name: '企业账号正式用户',
seq: 3,
folderCount: 3,
objectCount: 2,
spread: '1',
editable: '1'
}, {
id: 1042681,
parentId: 1042365,
name: '广东樱花智能科技有限公司',
seq: 1,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 200000606,
parentId: 1042518,
name: '渠道一部',
seq: 1,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1052969,
parentId: 1042518,
name: '企大云体验用户',
seq: 2,
folderCount: 0,
objectCount: 6,
spread: '1',
editable: '1'
}, {
id: 1052169,
parentId: 1043321,
name: '体验账号集中营',
seq: 1,
folderCount: 0,
objectCount: 3,
spread: '1',
editable: '1'
}, {
id: 1052426,
parentId: 1047773,
name: '销售部',
seq: 1,
folderCount: 0,
objectCount: 7,
spread: '1',
editable: '1'
}, {
id: 1053385,
parentId: 1048462,
name: '丹尼斯学院',
seq: 1,
folderCount: 0,
objectCount: 1,
spread: '1',
editable: '1'
}, {
id: 1053494,
parentId: 1048462,
name: '医药领域',
seq: 2,
folderCount: 0,
objectCount: 10,
spread: '1',
editable: '1'
}, {
id: 200000970,
parentId: 1048462,
name: '零散付费客户',
seq: 3,
folderCount: 0,
objectCount: 2,
spread: '1',
editable: '1'
}, {
id: 1048488,
parentId: 1048489,
name: '直营中心',
seq: 1,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1052412,
parentId: 1052409,
name: '培训部',
seq: 1,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1052413,
parentId: 1052409,
name: '薪酬部',
seq: 2,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 1052414,
parentId: 1052409,
name: '员工部',
seq: 3,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 200000699,
parentId: 200000698,
name: '销售一部',
seq: 1,
folderCount: 3,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 200000703,
parentId: 200000698,
name: '销售二部',
seq: 2,
folderCount: 3,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 200000700,
parentId: 200000699,
name: '销售1组',
seq: 1,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 200000701,
parentId: 200000699,
name: '销售2组',
seq: 2,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 200000702,
parentId: 200000699,
name: '销售3组',
seq: 3,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 200000704,
parentId: 200000703,
name: '销售1组',
seq: 1,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 200000705,
parentId: 200000703,
name: '销售2组',
seq: 2,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}, {
id: 200000706,
parentId: 200000703,
name: '销售3组',
seq: 3,
folderCount: 0,
objectCount: 0,
spread: '1',
editable: '1'
}],
executeStatus: 0
}
const aTree = department.values
function listToTree (list) {
// 遍历整个列表
return list.filter(cur => {
// 获取当前节点的子节点
// cur.key = cur.id
// cur.title = cur.name
cur.slots = {
title: 'title'
}
if (cur.parentId === -1) {
cur.slots.icon = 'icon'
}
const children = list.filter(item => item.parentId === cur.id)
if (children.length > 0) {
cur.children = children
}
// 只返回顶级节点
return cur.parentId === -1
})
}
export { aTree, listToTree }
src/main.js
......@@ -3,8 +3,20 @@ import App from './App.vue'
import router from './router'
import store from './store'
import http from './service/http'
import { Button, Popover, Menu, Breadcrumb, Input, Tree, Table, Space } from 'ant-design-vue'
import './libs/flexible'
import {
Button,
Popover,
Menu,
Breadcrumb,
Input,
Tree,
Table,
Space,
Drawer,
Form,
Modal
} from 'ant-design-vue'
// console.log(process.env)
......@@ -28,4 +40,9 @@ app.use(Input)
app.use(Tree)
app.use(Table)
app.use(Space)
app.use(store).use(router).mount('#app')
app.use(Drawer)
app.use(Form)
app.use(Modal)
app.use(store)
app.use(router)
app.mount('#app')
src/views/Home.vue
<template>
<div class="right-body">
<div class="right-body" id="rightBody">
<div class="right-main">
<div class="breadcrumb">
<a-breadcrumb separator=">>">
......@@ -50,6 +50,7 @@ export default {
}
</script>
<style lang="less" scoped>
@import url('../css/common.less');
@footer-height: 43px;
@right-main-padding-top: 18px;
@right-main-padding-right: 40px;
......@@ -62,6 +63,65 @@ export default {
width: 100%;
height: 100%;
background: #F9F9F9 100%;
position: relative;
overflow: hidden;
::v-deep(.ant-modal-root) {
.qd-input-modal{
position: absolute;
.ant-modal {
width: 708px !important;
border-radius: 5px;
.ant-modal-content {
background: none;
.ant-modal-header {
height: 62px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background: #F4F4F4 10000%;
.ant-modal-title {
font-size: 18px;
height: 27px;
line-height: 27px;
}
}
.ant-modal-body {
background: #FFFFFF 100%;
height: 450px;
padding: 0 41px;
}
.ant-modal-footer {
border: none;
height: 67px;
text-align: center;
background: #FFFFFF 100%;
position: relative;
.ant-btn {
position: absolute;
padding: 0;
height: 30px;
line-height: 30px;
width: 80px;
border-radius: 4px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
}
div {
>:last-child {
left: 254px;
background: #000;
color: #fff;
border: none;
}
>:first-child {
left: 375px;
}
}
}
}
}
}
}
.right-main {
width: 100%;
height: calc(100% - @footer-height);
......@@ -78,9 +138,9 @@ export default {
width: 100%;
height: calc(100% - @right-main-body-height);
&>div{
height: 100%;
width: 100%;
}
height: 100%;
width: 100%;
}
}
}
::v-deep(.footer-wrap) {
......
src/views/origanizationManage/Member.vue
......@@ -25,29 +25,49 @@
<a-button type="default" class="add-role">新增角色</a-button>
</div>
<div class="tree-wrap">
<a-tree
<Tree
v-show="searchType.current === Object.keys(searchType.types)[0]"
:treeData="organizationTreeData"
:defaultExpandedKeys="expandedKeys"
></Tree>
<Tree
v-show="searchType.current === Object.keys(searchType.types)[1]"
:defaultExpandedKeys="['0-0']"
:treeData="roleTreeData"
></Tree>
<!-- <a-tree
v-show="searchType.current === Object.keys(searchType.types)[0]"
v-model:expandedKeys="expandedKeys"
:treeData="organizationTreeData"
:replaceFields="{
children:'children', title:'name', key:'id'
}"
showIcon
@select="selectOrganization"
>
<!--
<template #jiegou><span class="iconfont iconjiegou"></span></template>
-->
<template #icon>
<span class="iconfont iconjiegou"></span>
</template>
<template v-slot:title="item">
<span class="qd-tree-title">{{item.name}}</span>
<a-space :size="2" class="oprate-icon">
<a-button type="default" @click.stop="testAdd(item)"><PlusOutlined></PlusOutlined></a-button>
<a-button type="default" @click.stop="test(item)"><CloseOutlined></CloseOutlined></a-button>
</a-space>
<div v-if="addSub === item.id" class="add-sub">
<a-input @click.stop=""></a-input>
<CloseCircleFilled @click.stop=""/>
<CheckCircleFilled @click.stop=""/>
</div>
</template>
<template #custom=item>
<span>{{item.title}}</span>
<a-button type="default" @click.stop="test(item)">删除</a-button>
<a-button type="default" @click.stop="test(item)">添加</a-button>
</template>
</a-tree>
<a-tree
v-show="searchType.current === Object.keys(searchType.types)[1]"
:defaultExpandedKeys="['0-0']"
:treeData="roleTreeData"
showIcon
@select="selectRole"
></a-tree>
</a-tree> -->
</div>
</div>
<div class="right-operate operate-wrap">
......@@ -55,7 +75,7 @@
<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>
<a-button type='default' class="qd-btn" @click="edit">编辑</a-button>
</div>
<div class="current-breadcrumb flex-justify">
<span>深圳企大科技有限公司</span> <span class="ant-breadcrumb-separator">&gt;</span> <span>客服部</span>
......@@ -96,13 +116,32 @@
</div>
</section>
</div>
<DepSelectModal></DepSelectModal>
<!-- <DepartmentDrawer :visible="visible" @close="onClose"></DepartmentDrawer> -->
<component :is="'DepartmentDrawer'" :visible="visible" @close="onClose"></component>
</div>
</template>
<script>
import { RightOutlined } from '@ant-design/icons-vue'
import DepartmentDrawer from '../../components/DepartmentDrawer'
import TestDrawer from '../../components/TestDrawer'
import Tree from '../../components/Tree'
import DepSelectModal from '../../components/DepSelectModal'
import { aTree, listToTree } from '../../libs/testModal'
console.log(listToTree(aTree))
export default {
components: {
RightOutlined
RightOutlined,
Tree,
/* eslint-disable */
DepSelectModal,
DepartmentDrawer,
TestDrawer
/* eslint-enable */
},
mounted () {
this.expandedKeys.push(0)
this.departmentList = aTree
},
setup () {
const rewSelection = {
......@@ -116,106 +155,44 @@ export default {
console.log(selected, selectedRows, changeRows)
}
}
return ({
return {
rewSelection
})
}
},
data () {
return {
searchKey: '',
showLine: false,
showIcon: true,
organizationTreeData: [{
title: '深圳企大科技有限公司',
key: '0-0',
slots: {
icon: 'jiegou',
title: 'custom'
},
children: [
{
title: '客服部',
key: '0-0-0',
slots: {
title: 'custom'
},
children: [
{
title: '客服一部',
key: '0-0-0-0',
slots: {
title: 'custom'
}
}
]
},
{
title: 'IT技术部',
key: '0-0-1',
slots: {
title: 'custom'
},
children: [
{
title: 'IT一部',
key: '0-0-1-0',
slots: {
title: 'custom'
}
}
]
},
{
title: '运营部',
key: '0-0-2',
slots: {
title: 'custom'
},
children: [
{
title: '客服一部',
key: '0-0-2-0',
slots: {
title: 'custom'
}
}
]
},
{
title: '财务相关',
key: '0-0-3',
slots: {
title: 'custom'
}
}
]
}],
visible: false,
expandedKeys: [],
departmentList: [],
roleTreeData: [{
title: '所有',
key: '0-0',
name: '所有',
id: '0-0',
children: [
{
title: '管理',
key: '0-0-0',
name: '管理',
id: '0-0-0',
children: [
{ title: '负责人', key: '0-0-0-0' }
{ name: '负责人', id: '0-0-0-0' }
]
},
{
title: '职务',
key: '0-0-1',
name: '职务',
id: '0-0-1',
children: [
{ title: '财务', key: '0-0-1-0' }
{ name: '财务', id: '0-0-1-0' }
]
},
{
title: '岗位',
key: '0-0-2',
name: '岗位',
id: '0-0-2',
children: [
{ title: '普通员工', key: '0-0-2-0' }
{ name: '普通员工', id: '0-0-2-0' }
]
},
{ title: '总裁办', key: '0-0-3' }
{ name: '总裁办', id: '0-0-3' }
]
}],
columns: [
......@@ -377,6 +354,18 @@ export default {
}
},
methods: {
testAdd (e) {
console.log(e.dataRef.id)
console.log(this.expandedKeys)
this.expandedKeys.push(e.dataRef.id)
this.addSub = e.dataRef.id
},
edit () {
this.visible = true
},
onClose () {
this.visible = false
},
test (item) {
console.log(item)
},
......@@ -392,41 +381,6 @@ export default {
this.searchKey = ''
this.searchType.current = key
},
selectOrganization (key, e) {
console.log(this.organizationTreeData[0].key)
const treeNode = e.node
console.log('treeNode.dataRef.children:', treeNode.dataRef.children)
const promise = new Promise(
resolve => {
if (treeNode.dataRef.children) {
resolve()
return
}
setTimeout(() => {
treeNode.dataRef.children = [
{
title: 'Child Node',
key: `${treeNode.eventKey}-0`,
slots: {
title: 'custom'
}
},
{
title: 'Child Node',
key: `${treeNode.eventKey}-1`,
slots: {
title: 'custom'
}
}
]
this.organizationTreeData = [...this.organizationTreeData]
resolve()
}, 1000)
}
)
console.log(promise)
// promise.then()
},
selectRole () {
console.log('selectRole', arguments)
},
......@@ -443,6 +397,12 @@ export default {
} else {
return '搜素角色'
}
},
organizationTreeData () {
if (this.departmentList.length <= 1) {
return []
}
return listToTree(this.departmentList)
}
}
}
......@@ -498,32 +458,14 @@ export default {
border-left: 0;
}
}
.tree-wrap{
height: 100%;
width: 100%;
overflow: scroll;
::v-deep(.ant-tree-title) {
font-size: 16px;
}
::v-deep(.ant-tree-switcher) {
top: 2.5px;
}
::v-deep(.ant-tree-node-selected){
background: #CECECE 100%;
}
.iconjiegou {
font-size: 24px;
}
::v-deep(.ant-tree svg) {
font-size: 18px;
}
}
.create-role-wrap {
width: 100%;
height: 45px;
padding: 4px 0 12px 45px;
.ant-btn {
height: 25px;
line-height: 25px;
width: 97px;
border-radius: 90px;
padding: 0;
......@@ -534,6 +476,13 @@ export default {
}
}
}
.tree-wrap{
height: 100%;
width: 100%;
overflow: scroll;
}
.has-top-nav-page-wrap {
.operate-wrap {
padding: 18px 23px;
......@@ -551,15 +500,13 @@ export default {
.menber-count{
display: inline-block;
width: 68px;
// height: 22px; /*no*/
line-height: 22px; /*no*/
line-height: 20px;
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;
}
}
......
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