Skip to content

P
pica-admin-IM
提交 0dec357a 编写于 作者: zhentian.jia's avatar zhentian.jia
浏览文件
操作

添加树型结构细节

上级 1369d8d5
隐藏空白字符变更
内嵌 并排
正在显示 包含 359 行增加 和 71 行删除
src/router/router.js
浏览文件 @ 0dec357a
...@@ -8,6 +8,7 @@ const createComponent = r => require.ensure([], () => r(require('../views/educat ...@@ -8,6 +8,7 @@ const createComponent = r => require.ensure([], () => r(require('../views/educat
const roleManager = r => require.ensure([], () => r(require('../views/system/role.vue')),'role') const roleManager = r => require.ensure([], () => r(require('../views/system/role.vue')),'role')
const addManager = r => require.ensure([], () => r(require('../views/education/add-manager.vue')), 'add-manager') const addManager = r => require.ensure([], () => r(require('../views/education/add-manager.vue')), 'add-manager')
const itemRole = r => require.ensure([], () => r(require('../views/system/item-role.vue')), 'item-role') const itemRole = r => require.ensure([], () => r(require('../views/system/item-role.vue')), 'item-role')
const tree = r => require.ensure([], () => r(require('../views/education/tree.vue')), 'tree')
export default [{ export default [{
path: '/', path: '/',
...@@ -43,6 +44,9 @@ export default [{ ...@@ -43,6 +44,9 @@ export default [{
},{ },{
path: '/item-role', path: '/item-role',
component: itemRole component: itemRole
},{
path: '/tree',
component: tree
}, },
] ]
}] }]
\ No newline at end of file
src/views/education/add-manager.vue
浏览文件 @ 0dec357a
...@@ -129,9 +129,10 @@ ...@@ -129,9 +129,10 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col class="rim" :span="12"> <el-col class="rim" :span="12">
<el-tree <el-tree
:load="loadNode"
lazy
:data="treeData" :data="treeData"
show-checkbox show-checkbox
default-expand-all
node-key="id" node-key="id"
ref="tree" ref="tree"
highlight-current highlight-current
...@@ -176,12 +177,20 @@ ...@@ -176,12 +177,20 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button size="small" type="primary" @click="">搜索</el-button> <el-button size="small" type="primary" @click="getOrganization()">搜索</el-button>
</el-form-item> </el-form-item>
<el-form-item style="float:right;"> <el-form-item style="float:right;">
<el-button-group> <el-button-group>
<el-button size="small" type="default" @click="checkAll(true,'multipleOrganization')">选择全部</el-button> <el-button
<el-button size="small" type="default" @click="checkAll(false,'multipleOrganization')">全部不选</el-button> size="small"
type="default"
@click="checkAll(true,'multipleOrganization')"
>选择全部</el-button>
<el-button
size="small"
type="default"
@click="checkAll(false,'multipleOrganization')"
>全部不选</el-button>
</el-button-group> </el-button-group>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -256,8 +265,16 @@ ...@@ -256,8 +265,16 @@
</el-form-item> </el-form-item>
<el-form-item style="float:right;"> <el-form-item style="float:right;">
<el-button-group> <el-button-group>
<el-button size="small" type="default" @click="checkAll(true,'multiplePerson')">选择全部</el-button> <el-button
<el-button size="small" type="default" @click="checkAll(false,'multiplePerson')">全部不选</el-button> size="small"
type="default"
@click="checkAll(true,'multiplePerson')"
>选择全部</el-button>
<el-button
size="small"
type="default"
@click="checkAll(false,'multiplePerson')"
>全部不选</el-button>
</el-button-group> </el-button-group>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -336,7 +353,7 @@ ...@@ -336,7 +353,7 @@
<el-radio :label="2">否</el-radio> <el-radio :label="2">否</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item v-show="formComponent.configure == 1" label="选择证书：" > <el-form-item v-show="formComponent.configure == 1" label="选择证书：">
<el-col :span="20"> <el-col :span="20">
<el-select <el-select
v-model="formComponent.certificate" v-model="formComponent.certificate"
...@@ -392,7 +409,7 @@ export default { ...@@ -392,7 +409,7 @@ export default {
curmbSecond: "新建项目", curmbSecond: "新建项目",
//页面展示位置 //页面展示位置
stepData: [true, false, false], stepData: [true, false, false],
active: 0, active: 1,
activeName: "first", activeName: "first",
//基层信息 数据 //基层信息 数据
imageUrl: "", imageUrl: "",
...@@ -410,16 +427,13 @@ export default { ...@@ -410,16 +427,13 @@ export default {
fileList: [], fileList: [],
//设定行政范围 数据 //设定行政范围 数据
updatedTree: false, updatedTree: false,
treeProp: {
label: "name",
children: "zones",
isLeaf: "leaf"
},
defaultProps: { defaultProps: {
children: "children", children: "children",
label: "label" label: "label",
isLeaf: "isLeaf"
}, },
treeData: returnData().treeData, //treeData: [],
treeData: [],
tagsRegion: [], tagsRegion: [],
//设定机构 数据 //设定机构 数据
formOrganization: { formOrganization: {
...@@ -428,22 +442,28 @@ export default { ...@@ -428,22 +442,28 @@ export default {
grade: "", grade: "",
chechAll: true, chechAll: true,
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10
}, },
organizationRegion: [{ organizationRegion: [
id:'100', {
label: '上海', id: "100",
},{ label: "上海"
id:'101', },
label: '北京', {
}], id: "101",
organizationRank: [{ label: "北京"
id:'1', }
label: '一甲', ],
},{ organizationRank: [
id:'2', {
label: '二甲', id: "1",
}], label: "一甲"
},
{
id: "2",
label: "二甲"
}
],
hasOrganizationInit: false, hasOrganizationInit: false,
//tableOrganization: Array(10).fill(itemOrganization), //tableOrganization: Array(10).fill(itemOrganization),
tableOrganization: new Array(), tableOrganization: new Array(),
...@@ -461,7 +481,7 @@ export default { ...@@ -461,7 +481,7 @@ export default {
hospital: "", hospital: "",
department: "", department: "",
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10
}, },
tablePerson: new Array(), tablePerson: new Array(),
currentPerson: 1, currentPerson: 1,
...@@ -602,11 +622,11 @@ export default { ...@@ -602,11 +622,11 @@ export default {
//设置选择项目组件页 //设置选择项目组件页
let componentEdit = []; let componentEdit = [];
let certificateEdit = 0; let certificateEdit = 0;
for(let i = 0;i<editData.componentData.length;i++) { for (let i = 0; i < editData.componentData.length; i++) {
componentEdit.push(editData.componentData[i].id); componentEdit.push(editData.componentData[i].id);
} }
this.formComponent.component = componentEdit; this.formComponent.component = componentEdit;
if(editData.certificateData.length > 0) { if (editData.certificateData.length > 0) {
this.formComponent.configure = 1; this.formComponent.configure = 1;
this.formComponent.certificate = editData.componentData[0].id; this.formComponent.certificate = editData.componentData[0].id;
} }
...@@ -720,7 +740,7 @@ export default { ...@@ -720,7 +740,7 @@ export default {
}; };
vm.POST("portalInfo/componentDraft", param).then(res => { vm.POST("portalInfo/componentDraft", param).then(res => {
console.log(res); console.log(res);
if(res.code == '000000') { if (res.code == "000000") {
this.$notify({ this.$notify({
title: "成功", title: "成功",
message: "项目创建成功" message: "项目创建成功"
...@@ -787,7 +807,6 @@ export default { ...@@ -787,7 +807,6 @@ export default {
if (this.active == 0) { if (this.active == 0) {
let formName = "formData"; let formName = "formData";
let removeState = this.submitForm(formName); let removeState = this.submitForm(formName);
console.log("判断移动" + removeState); console.log("判断移动" + removeState);
if (removeState === true) { if (removeState === true) {
//校验名字 //校验名字
...@@ -816,16 +835,32 @@ export default { ...@@ -816,16 +835,32 @@ export default {
this.stepData = [false, true, false]; this.stepData = [false, true, false];
this.initRange(); this.initRange();
} }
} }
} else if (this.active == 1) { } else if (this.active == 1) {
let removeState = true; let req = {
if (removeState === true) { projectId: 54,
//移动到第三页 选择项目组件 setKindOfAdministrative: 3,
this.active++; scopeOfAdministrative: "000:2|000_110:1",
this.stepData = [false, false, true]; setKindOfOrganization: 3,
} scopeOfOrganization: "2|3|4|5|6|7",
//this.stepData = [false, true, false]; setKindOfDepartment: 3,
scopeOfDepartment: "54",
setKindOfPeople: 1,
scopeOfPeople: ""
};
vm.POST("scope", req).then(res => {
if (res.code == "000000") {
//移动到选择项目组件
console.log(res);
this.active++;
this.stepData = [false, false, true];
} else {
this.$notify({
title: "",
message: res.message
});
}
});
} }
}, },
//图片上传 //图片上传
...@@ -963,35 +998,48 @@ export default { ...@@ -963,35 +998,48 @@ export default {
this.getAdministrative(); this.getAdministrative();
} }
}, },
//初始化范围树
setTreeData(administrative) {
let treeIdList = [];
let checkList = [];
for (let i = 0; i < administrative.length; i++) {
treeIdList.push(administrative[i].id);
checkList[i] = {};
checkList[i].name = administrative[i].label;
checkList[i].key = administrative[i].id;
}
//console.log(treeIdList);
this.$refs.tree.setCheckedKeys(treeIdList);
this.tagsRegion = checkList;
},
//查询行政范围（树） //查询行政范围（树）
getAdministrative() { getAdministrative() {
let req = { let req = {
projectId: 1 projectId: 54
}; };
vm.GET("scope/v1/administrative", req).then(res => { vm.GET("scope/v1/administrative", req).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
//console.log(res.data); //console.log(res.data);
let administrativeAll = res.data.administrativeAll; let administrativeAll = res.data.administrativeAll;
console.log(administrativeAll); let administrative = res.data.administrative;
this.treeData = [] //this.treeData[0] = administrativeAll;
this.treeData[0] = administrativeAll; this.setTreeData(administrative);
} }
}); });
}, },
//切换tab //切换tab
handleClick(tab, event) { handleClick(tab, event) {
let tabName = tab.name; let tabName = tab.name;
if(tabName == "second") { if (tabName == "second") {
//设定机构 //设定机构
this.getOrganization(); this.getOrganization();
} else if(tabName == "third") { } else if (tabName == "third") {
//设定科室 //设定科室
} else if(tabName == "fourth") { } else if (tabName == "fourth") {
//设定人员 //设定人员
this.getPeople(); this.getPeople();
} }
}, },
//列举选中地区 //列举选中地区
initCheckList(allSelectedKeys) { initCheckList(allSelectedKeys) {
this.tagsRegion = []; this.tagsRegion = [];
...@@ -1014,21 +1062,45 @@ export default { ...@@ -1014,21 +1062,45 @@ export default {
}, },
//树结构 //树结构
loadNode(node, resolve) { loadNode(node, resolve) {
console.log(node); //console.log(node);
if (node.level === 0) { if (node.level === 0) {
return resolve([{ label: "全国" }]); return resolve([{ label: "全国", id: "000", status: 0 }]);
} }
if (node.level > 1) return resolve([]); if (node.level === 1) {
//let treeData = returnData().treeData;
setTimeout(() => { let req = {
const data = []; //projectId: vm.getUrlSearch(window.location.href, "projectId"),
resolve(data); projectId: 54
}, 500); };
vm.GET("scope/v1/administrative", req).then(res => {
if (res.code == "000000") {
let administrativeAll = res.data.administrativeAll;
let administrative = res.data.administrative;
let children = administrativeAll.children;
//this.treeData[0] = administrativeAll;
//console.log(administrativeAll);
return resolve(children);
}
});
}
if (node.level === 2 || node.level === 3 || node.level === 4) {
let req = {
id: node.data.id
};
vm.GET("scope/v1/administrative/children", req).then(res => {
if (res.code == "000000") {
let administrative = res.data.administrative;
return resolve(administrative);
}
});
}
if (node.level === 5) return resolve([]);
}, },
getCheckedKeys() { getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys()); console.log(this.$refs.tree.getCheckedKeys());
}, },
onChecked() { onChecked() {
//console.log(this.treeData);
let cData = [], let cData = [],
oldData = (this.treeData.length && this.treeData.slice()) || [], oldData = (this.treeData.length && this.treeData.slice()) || [],
checkedKeys = this.$refs.tree.getCheckedKeys(), checkedKeys = this.$refs.tree.getCheckedKeys(),
...@@ -1042,8 +1114,12 @@ export default { ...@@ -1042,8 +1114,12 @@ export default {
return { type: 1, key: key }; return { type: 1, key: key };
}), }),
allSelectedKeys = savedCheckedKeys.concat(savedHalfCheckedKeys); allSelectedKeys = savedCheckedKeys.concat(savedHalfCheckedKeys);
console.log('treeData',this.treeData);
//console.log(allSelectedKeys); console.log('oldData',oldData);
console.log('checkedKeys',checkedKeys);
console.log('halfCheckedKeys',halfCheckedKeys);
console.log('savedCheckedKeys',savedCheckedKeys);
console.log('allSelectedKeys',allSelectedKeys);
this.initCheckList(allSelectedKeys); this.initCheckList(allSelectedKeys);
//改变行政范围后，更新设定机构和设定人员 //改变行政范围后，更新设定机构和设定人员
this.updateOrganizationAndPerson(allSelectedKeys); this.updateOrganizationAndPerson(allSelectedKeys);
...@@ -1093,7 +1169,7 @@ export default { ...@@ -1093,7 +1169,7 @@ export default {
console.log(treeKeyList); console.log(treeKeyList);
this.$refs.tree.setCheckedKeys(treeKeyList); this.$refs.tree.setCheckedKeys(treeKeyList);
}, },
//删除label节点 同步树结构 //删除label节点 同步树结构
handleCloseTree(tag) { handleCloseTree(tag) {
this.tagsRegion.splice(this.tagsRegion.indexOf(tag), 1); this.tagsRegion.splice(this.tagsRegion.indexOf(tag), 1);
...@@ -1123,10 +1199,10 @@ export default { ...@@ -1123,10 +1199,10 @@ export default {
getOrganization() { getOrganization() {
let req = { let req = {
projectId: 1, projectId: 1,
setKind:3, setKind: 3,
scope: '000_110', scope: "000_110",
pageNum: this.formOrganization.pageNum, pageNum: this.formOrganization.pageNum,
pageSize: this.formOrganization.pageSize, pageSize: this.formOrganization.pageSize
}; };
vm.GET("scope/v1/organization", req).then(res => { vm.GET("scope/v1/organization", req).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
...@@ -1152,13 +1228,13 @@ export default { ...@@ -1152,13 +1228,13 @@ export default {
let req = { let req = {
projectId: 1, projectId: 1,
setKindOfAdministrative: 3, setKindOfAdministrative: 3,
scopeOfAdministrative: '000_110', scopeOfAdministrative: "000_110",
setKindOfOrganization: 3, setKindOfOrganization: 3,
scopeOfOrganization: '2|3|4|5|6|7', scopeOfOrganization: "2|3|4|5|6|7",
setKindOfDepartment: 3, setKindOfDepartment: 3,
scopeOfDepartment: 54, scopeOfDepartment: 54,
pageNum: this.formPersonnel.pageNum, pageNum: this.formPersonnel.pageNum,
pageSize: this.formPersonnel.pageSize, pageSize: this.formPersonnel.pageSize
}; };
vm.GET("scope/v1/people", req).then(res => { vm.GET("scope/v1/people", req).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
...@@ -1168,6 +1244,7 @@ export default { ...@@ -1168,6 +1244,7 @@ export default {
} }
}); });
}, },
//机构table修改 //机构table修改
handleSizeOrganization(val) { handleSizeOrganization(val) {
console.log(`每页 ${val} 条`); console.log(`每页 ${val} 条`);
......
src/views/education/item-manager.vue
浏览文件 @ 0dec357a
...@@ -306,7 +306,7 @@ export default { ...@@ -306,7 +306,7 @@ export default {
message: "ID为：" + row.id + "的项目删除成功" message: "ID为：" + row.id + "的项目删除成功"
}); });
this.loading = true; this.loading = true;
that.getProjectList(); vm.getProjectList();
} }
}); });
}, },
......
src/views/education/tree.vue 0 → 100644
浏览文件 @ 0dec357a
<template>
<div>
<el-tree
:data="data2"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@check="onChecked"
></el-tree>
<!-- <base1
:data="data2"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
></base1>-->
<span></span>
<div class="buttons">
<el-button @click="getCheckedNodes">通过 node 获取</el-button>
<el-button @click="getCheckedKeys">通过 key 获取</el-button>
<el-button @click="setCheckedNodes">通过 node 设置</el-button>
<el-button @click="setCheckedKeys">通过 key 设置</el-button>
<el-button @click="resetChecked">清空</el-button>
</div>
</div>
</template>
<script>
import { ELTree1 } from "element-ui/lib/checkbox";
// import Vue from 'vue'
// require("element-ui/lib/checkbox"
export default {
// components: {
// base1
// },
mounted() {
// const base1 = Vue.extend(ELTree)
// Vue.component('base1', base1)
},
data() {
return {
data2: [
{
id: 11,
label: "一级 1",
children: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1"
},
{
id: 10,
label: "三级 1-1-2"
}
]
}
]
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1"
},
{
id: 6,
label: "二级 2-2"
}
]
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1"
},
{
id: 8,
label: "二级 3-2"
}
]
}
]
}
],
defaultProps: {
children: "children",
label: "label"
}
};
},
methods: {
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys());
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([
{
id: 5,
label: "二级 2-1"
},
{
id: 9,
label: "三级 1-1-1"
}
]);
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
},
onChecked() {
let cData = [],
oldData = (this.data2.length && this.data2.slice()) || [],
checkedKeys = this.$refs.tree.getCheckedKeys(),
halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys(),
savedCheckedKeys = this.handlerCheckedData(oldData, checkedKeys).map(
key => {
return { type: 2, key: key };
}
),
savedHalfCheckedKeys = halfCheckedKeys.map(key => {
return { type: 1, key: key };
}),
allSelectedKeys = savedCheckedKeys.concat(savedHalfCheckedKeys);
console.log("treeData", this.data2);
console.log(allSelectedKeys);
},
// 递归删除列表中所有子节点
delSubKeysByNode(node, checkedKeys) {
let idIndex;
if (node.children && node.children.length) {
if (node.children && node.children.length) {
node.children.forEach(elm => {
idIndex = checkedKeys.findIndex(id => {
return id === elm.id;
});
if (idIndex > -1) {
checkedKeys.splice(idIndex, 1);
}
if (elm.children && elm.children.length) {
this.delSubKeysByNode(elm, checkedKeys);
}
});
}
}
},
// 去除子节点
handlerCheckedData(oldData, checkedKeys) {
oldData.forEach(element => {
for (let i = 0; i < checkedKeys.length; i++) {
// 如果此节点被选中，则删除所有子节点
if (element.id === checkedKeys[i]) {
this.delSubKeysByNode(element, checkedKeys);
} else {
if (element.children && element.children.length) {
this.handlerCheckedData(element.children, checkedKeys);
}
}
}
});
return checkedKeys;
}
}
};
</script>
\ No newline at end of file
src/views/layout/slidebar.vue
浏览文件 @ 0dec357a
...@@ -56,6 +56,11 @@ export default { ...@@ -56,6 +56,11 @@ export default {
title: '项目管理', title: '项目管理',
icon: 'el-icon-setting', icon: 'el-icon-setting',
index: 'item-manager' index: 'item-manager'
},
{
title: '树',
icon: 'el-icon-setting',
index: 'tree'
} }
] ]
},{ },{
......
src/views/mock.js
浏览文件 @ 0dec357a
...@@ -48,10 +48,12 @@ let treeData = [ ...@@ -48,10 +48,12 @@ let treeData = [
id: 11, id: 11,
name: "一级 1", name: "一级 1",
label: "一级 1", label: "一级 1",
isLeaf: "true",
children: [ children: [
{ {
id: 1, id: 1,
label: "一级 1", label: "一级 1",
isLeaf: "true",
children: [ children: [
{ {
id: 4, id: 4,
...@@ -75,14 +77,21 @@ let treeData = [ ...@@ -75,14 +77,21 @@ let treeData = [
children: [ children: [
{ {
id: 5, id: 5,
label: "二级 2-1" label: "二级 2-1",
children: [],
}, },
{ {
id: 6, id: 6,
label: "二级 2-2" label: "二级 2-2",
isLeaf: false,
} }
] ]
}, },
{
id: 4,
label: "一级 4",
isLeaf: false,
},
{ {
id: 3, id: 3,
label: "一级 3", label: "一级 3",
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或