|
@@ -2,26 +2,37 @@
|
|
<div class="container">
|
|
<div class="container">
|
|
<div class="left-pane">
|
|
<div class="left-pane">
|
|
<el-input class="left-pane-input" placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
|
|
<el-input class="left-pane-input" placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
|
|
- <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" :highlight-current="true"
|
|
|
|
- :filter-node-method="filterNode" @node-click="handleNodeClick">
|
|
|
|
|
|
+ <el-tree v-if="type!='dept'" ref="tree" :data="data" :props="defaultProps" node-key="id" :highlight-current="true"
|
|
|
|
+ :filter-node-method="filterNode" @node-click="handleNodeClick" style="overflow-y: auto;overflow-x: hidden">
|
|
<span slot-scope="{node,data}">
|
|
<span slot-scope="{node,data}">
|
|
- <el-image :src="data.url"></el-image>
|
|
|
|
- <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
|
|
|
|
- <!--<span class="operate_btns">-->
|
|
|
|
- <!-- <dropdown :events="data.id == 1 ? menuEvents : subMenuEvents" :data="{ node, data }"-->
|
|
|
|
- <!-- @itemClick="dropDownClick"></dropdown>-->
|
|
|
|
- <!--</span>-->
|
|
|
|
|
|
+ <el-image :src="require('@/assets/tree/group/company@3x.png')"></el-image>
|
|
|
|
+ <span style="padding-left: 10px; vertical-align: text-bottom;">{{ data.company_name }}</span>
|
|
|
|
+ <span class="operate_btns">
|
|
|
|
+ <dropdown :events="menuEvents" :data="{ node, data }"
|
|
|
|
+ @itemClick="dropDownClick"></dropdown>
|
|
|
|
+ </span>
|
|
|
|
+ </span>
|
|
|
|
+ </el-tree>
|
|
|
|
+ <el-tree v-if="type=='dept'" ref="tree" :data="data" :props="deptProps" node-key="id" :highlight-current="true"
|
|
|
|
+ :filter-node-method="filterNode" @node-click="handleNodeClick" style="overflow-y: auto;overflow-x: hidden">
|
|
|
|
+ <span slot-scope="{node,data}">
|
|
|
|
+ <el-image :src="require('@/assets/tree/group/affiliate@3x.png')"></el-image>
|
|
|
|
+ <span style="padding-left: 10px; vertical-align: text-bottom;">{{ data.department_name }}</span>
|
|
|
|
+ <span class="operate_btns">
|
|
|
|
+ <dropdown :events="subMenuEvents" :data="{ node, data }"
|
|
|
|
+ @itemClick="dropDownClick"></dropdown>
|
|
|
|
+ </span>
|
|
</span>
|
|
</span>
|
|
</el-tree>
|
|
</el-tree>
|
|
<el-button class="addDepartment" @click="addDepartment" style="color: #fff; background: #3da0d6">
|
|
<el-button class="addDepartment" @click="addDepartment" style="color: #fff; background: #3da0d6">
|
|
<i class="el-icon-s-order" style="padding-right: 4px"></i>
|
|
<i class="el-icon-s-order" style="padding-right: 4px"></i>
|
|
- 新建企业
|
|
|
|
|
|
+ 新建企业/部门
|
|
</el-button>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="right-pane">
|
|
<div class="right-pane">
|
|
<overView v-if="viewShow" @nodeClick="handleNodeClick"></overView>
|
|
<overView v-if="viewShow" @nodeClick="handleNodeClick"></overView>
|
|
- <corporation :item="currentNode" v-if="corporShow" @close="handleNodeClick"></corporation>
|
|
|
|
- <department :item="currentNode" v-if="departShow" @close="handleNodeClick"></department>
|
|
|
|
|
|
+ <corporation :item="currentNode" :company-list="companyList" v-if="corporShow" @close="handleNodeClick"></corporation>
|
|
|
|
+ <department :item="currentNode" :company-list="companyList" v-if="departShow" @close="handleNodeClick"></department>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<CorporationAdd ref="corporationAdd" />
|
|
<CorporationAdd ref="corporationAdd" />
|
|
@@ -34,40 +45,31 @@ import corporation from './forms/corporationdetailEdit';
|
|
import department from './forms/departmentdetailEdit';
|
|
import department from './forms/departmentdetailEdit';
|
|
import CorporationAdd from "@/views/userManagement/groupManagement/messageDialog/corporationAdd.vue";
|
|
import CorporationAdd from "@/views/userManagement/groupManagement/messageDialog/corporationAdd.vue";
|
|
import dropdown from '@/components/Dropdown/index';
|
|
import dropdown from '@/components/Dropdown/index';
|
|
-import {getCompanyList} from '@/api/company/company'
|
|
|
|
|
|
+import {getAllCompanyList, getCompanyList, getDeptListByCompany} from '@/api/company/company'
|
|
export default {
|
|
export default {
|
|
components: { overView, dropdown, corporation, department, CorporationAdd },
|
|
components: { overView, dropdown, corporation, department, CorporationAdd },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ type: 'company',
|
|
filterText: '',
|
|
filterText: '',
|
|
viewShow: true,
|
|
viewShow: true,
|
|
corporShow: false,
|
|
corporShow: false,
|
|
departShow: false,
|
|
departShow: false,
|
|
- data: [{
|
|
|
|
- id:2,
|
|
|
|
- label: '北京电信规划设计院',
|
|
|
|
- url: require('@/assets/tree/group/company@3x.png'),
|
|
|
|
- type: 'company',
|
|
|
|
- children: [{
|
|
|
|
- id:3,
|
|
|
|
- url: require('@/assets/tree/group/affiliate@3x.png'),
|
|
|
|
- label: '天津办事处',
|
|
|
|
- type: 'dept',
|
|
|
|
- }]
|
|
|
|
- }],
|
|
|
|
|
|
+ data: [],
|
|
|
|
+ companyList: [],
|
|
menuEvents: [
|
|
menuEvents: [
|
|
- { label: '新建', funcName: 'addNode' }
|
|
|
|
|
|
+ { label: '查看部门', funcName: 'viewDepts' }
|
|
],
|
|
],
|
|
subMenuEvents: [
|
|
subMenuEvents: [
|
|
- { label: '新建', funcName: 'addNode' },
|
|
|
|
- { label: '上移', funcName: 'moveUp' },
|
|
|
|
- { label: '下移', funcName: 'moveDown' },
|
|
|
|
- { label: '编辑', funcName: 'editNode' },
|
|
|
|
- { label: '删除', funcName: 'removeNode' }
|
|
|
|
|
|
+ { label: '返回公司', funcName: 'viewCompany' }
|
|
],
|
|
],
|
|
defaultProps: {
|
|
defaultProps: {
|
|
|
|
+ children: 'parent_company',
|
|
|
|
+ label: 'company_name'
|
|
|
|
+ },
|
|
|
|
+ deptProps: {
|
|
children: 'children',
|
|
children: 'children',
|
|
- label: 'label'
|
|
|
|
|
|
+ label: 'department_name'
|
|
},
|
|
},
|
|
currentNode: {}
|
|
currentNode: {}
|
|
}
|
|
}
|
|
@@ -79,6 +81,7 @@ export default {
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
this.getCompanyData();
|
|
this.getCompanyData();
|
|
|
|
+ this.getAllCompanyData();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
getCompanyData() {
|
|
getCompanyData() {
|
|
@@ -86,23 +89,45 @@ export default {
|
|
let data = res.data;
|
|
let data = res.data;
|
|
if (data.code == 0) {
|
|
if (data.code == 0) {
|
|
this.data = data.data;
|
|
this.data = data.data;
|
|
- this.data.forEach(item => {
|
|
|
|
- item.url = require('@/assets/tree/group/company@3x.png');
|
|
|
|
- item.label = item.company_name;
|
|
|
|
- item.type = 'company'
|
|
|
|
- })
|
|
|
|
|
|
+ this.type='company'
|
|
|
|
+ //this.data.forEach(item => {
|
|
|
|
+ // item.type = 'company'
|
|
|
|
+ //})
|
|
} else {
|
|
} else {
|
|
this.$message.error(data.message)
|
|
this.$message.error(data.message)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
+ getAllCompanyData() {
|
|
|
|
+ getAllCompanyList('', 1, 999).then(res=>{
|
|
|
|
+ let data = res.data;
|
|
|
|
+ if (data.code==0) {
|
|
|
|
+ this.companyList = data.data;
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error(data.message)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getDeptData(companyId) {
|
|
|
|
+ this.corporShow = false;
|
|
|
|
+ this.departShow = false;
|
|
|
|
+ this.viewShow = true;
|
|
|
|
+ getDeptListByCompany(companyId).then(res=>{
|
|
|
|
+ let data = res.data;
|
|
|
|
+ if (data.code == 0) {
|
|
|
|
+ this.type = 'dept'
|
|
|
|
+ this.data = data.data
|
|
|
|
+ this.$forceUpdate()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
handleNodeClick(data) {
|
|
handleNodeClick(data) {
|
|
this.currentNode = data
|
|
this.currentNode = data
|
|
- if (data.type=='company') {
|
|
|
|
|
|
+ if (this.type=='company') {
|
|
this.viewShow = false;
|
|
this.viewShow = false;
|
|
this.corporShow = true;
|
|
this.corporShow = true;
|
|
this.departShow = false;
|
|
this.departShow = false;
|
|
- } else if (data.type=='dept') {
|
|
|
|
|
|
+ } else if (this.type=='dept') {
|
|
this.viewShow = false;
|
|
this.viewShow = false;
|
|
this.corporShow = false;
|
|
this.corporShow = false;
|
|
this.departShow = true;
|
|
this.departShow = true;
|
|
@@ -126,9 +151,11 @@ export default {
|
|
|
|
|
|
},
|
|
},
|
|
dropDownClick(funcName, data) {
|
|
dropDownClick(funcName, data) {
|
|
- this.currentNode = data;
|
|
|
|
- if (funcName === 'addNode') {
|
|
|
|
- //
|
|
|
|
|
|
+ this.currentNode = data.node;
|
|
|
|
+ if (funcName === 'viewDepts') {
|
|
|
|
+ this.getDeptData(data.data.id)
|
|
|
|
+ } else if (funcName == 'viewCompany'){
|
|
|
|
+ this.getCompanyData()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
}
|
|
}
|