Skip to content

P
pica.cloud.web-admin-discuss
提交 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
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 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 [{
path: '/',
......@@ -43,6 +44,9 @@ export default [{
},{
path: '/item-role',
component: itemRole
},{
path: '/tree',
component: tree
},
]
}]
\ No newline at end of file
src/views/education/add-manager.vue
浏览文件 @ 0dec357a
......@@ -129,9 +129,10 @@
<el-row :gutter="20">
<el-col class="rim" :span="12">
<el-tree
:load="loadNode"
lazy
:data="treeData"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
......@@ -176,12 +177,20 @@
</el-select>
</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 style="float:right;">
<el-button-group>
<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
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-form-item>
</el-form>
......@@ -256,8 +265,16 @@
</el-form-item>
<el-form-item style="float:right;">
<el-button-group>
<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
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-form-item>
</el-form>
......@@ -336,7 +353,7 @@
<el-radio :label="2">否</el-radio>
</el-radio-group>
</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-select
v-model="formComponent.certificate"
......@@ -392,7 +409,7 @@ export default {
curmbSecond: "新建项目",
//页面展示位置
stepData: [true, false, false],
active: 0,
active: 1,
activeName: "first",
//基层信息 数据
imageUrl: "",
......@@ -410,16 +427,13 @@ export default {
fileList: [],
//设定行政范围 数据
updatedTree: false,
treeProp: {
label: "name",
children: "zones",
isLeaf: "leaf"
},
defaultProps: {
children: "children",
label: "label"
label: "label",
isLeaf: "isLeaf"
},
treeData: returnData().treeData,
//treeData: [],
treeData: [],
tagsRegion: [],
//设定机构 数据
formOrganization: {
......@@ -428,22 +442,28 @@ export default {
grade: "",
chechAll: true,
pageNum: 1,
pageSize: 10,
pageSize: 10
},
organizationRegion: [
{
id: "100",
label: "上海"
},
{
id: "101",
label: "北京"
}
],
organizationRank: [
{
id: "1",
label: "一甲"
},
organizationRegion: [{
id:'100',
label: '上海',
},{
id:'101',
label: '北京',
}],
organizationRank: [{
id:'1',
label: '一甲',
},{
id:'2',
label: '二甲',
}],
{
id: "2",
label: "二甲"
}
],
hasOrganizationInit: false,
//tableOrganization: Array(10).fill(itemOrganization),
tableOrganization: new Array(),
......@@ -461,7 +481,7 @@ export default {
hospital: "",
department: "",
pageNum: 1,
pageSize: 10,
pageSize: 10
},
tablePerson: new Array(),
currentPerson: 1,
......@@ -602,11 +622,11 @@ export default {
//设置选择项目组件页
let componentEdit = [];
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);
}
this.formComponent.component = componentEdit;
if(editData.certificateData.length > 0) {
if (editData.certificateData.length > 0) {
this.formComponent.configure = 1;
this.formComponent.certificate = editData.componentData[0].id;
}
......@@ -720,7 +740,7 @@ export default {
};
vm.POST("portalInfo/componentDraft", param).then(res => {
console.log(res);
if(res.code == '000000') {
if (res.code == "000000") {
this.$notify({
title: "成功",
message: "项目创建成功"
......@@ -787,7 +807,6 @@ export default {
if (this.active == 0) {
let formName = "formData";
let removeState = this.submitForm(formName);
console.log("判断移动" + removeState);
if (removeState === true) {
//校验名字
......@@ -816,16 +835,32 @@ export default {
this.stepData = [false, true, false];
this.initRange();
}
}
} else if (this.active == 1) {
let removeState = true;
if (removeState === true) {
//移动到第三页 选择项目组件
let req = {
projectId: 54,
setKindOfAdministrative: 3,
scopeOfAdministrative: "000:2|000_110:1",
setKindOfOrganization: 3,
scopeOfOrganization: "2|3|4|5|6|7",
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
});
}
//this.stepData = [false, true, false];
});
}
},
//图片上传
......@@ -963,35 +998,48 @@ export default {
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() {
let req = {
projectId: 1
projectId: 54
};
vm.GET("scope/v1/administrative", req).then(res => {
if (res.code == "000000") {
//console.log(res.data);
let administrativeAll = res.data.administrativeAll;
console.log(administrativeAll);
this.treeData = []
this.treeData[0] = administrativeAll;
let administrative = res.data.administrative;
//this.treeData[0] = administrativeAll;
this.setTreeData(administrative);
}
});
},
//切换tab
handleClick(tab, event) {
let tabName = tab.name;
if(tabName == "second") {
if (tabName == "second") {
//设定机构
this.getOrganization();
} else if(tabName == "third") {
} else if (tabName == "third") {
//设定科室
} else if(tabName == "fourth") {
} else if (tabName == "fourth") {
//设定人员
this.getPeople();
}
},
//列举选中地区
initCheckList(allSelectedKeys) {
this.tagsRegion = [];
......@@ -1014,21 +1062,45 @@ export default {
},
//树结构
loadNode(node, resolve) {
console.log(node);
//console.log(node);
if (node.level === 0) {
return resolve([{ label: "全国" }]);
return resolve([{ label: "全国", id: "000", status: 0 }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [];
resolve(data);
}, 500);
if (node.level === 1) {
//let treeData = returnData().treeData;
let req = {
//projectId: vm.getUrlSearch(window.location.href, "projectId"),
projectId: 54
};
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() {
console.log(this.$refs.tree.getCheckedKeys());
},
onChecked() {
//console.log(this.treeData);
let cData = [],
oldData = (this.treeData.length && this.treeData.slice()) || [],
checkedKeys = this.$refs.tree.getCheckedKeys(),
......@@ -1042,8 +1114,12 @@ export default {
return { type: 1, key: key };
}),
allSelectedKeys = savedCheckedKeys.concat(savedHalfCheckedKeys);
//console.log(allSelectedKeys);
console.log('treeData',this.treeData);
console.log('oldData',oldData);
console.log('checkedKeys',checkedKeys);
console.log('halfCheckedKeys',halfCheckedKeys);
console.log('savedCheckedKeys',savedCheckedKeys);
console.log('allSelectedKeys',allSelectedKeys);
this.initCheckList(allSelectedKeys);
//改变行政范围后，更新设定机构和设定人员
this.updateOrganizationAndPerson(allSelectedKeys);
......@@ -1123,10 +1199,10 @@ export default {
getOrganization() {
let req = {
projectId: 1,
setKind:3,
scope: '000_110',
setKind: 3,
scope: "000_110",
pageNum: this.formOrganization.pageNum,
pageSize: this.formOrganization.pageSize,
pageSize: this.formOrganization.pageSize
};
vm.GET("scope/v1/organization", req).then(res => {
if (res.code == "000000") {
......@@ -1152,13 +1228,13 @@ export default {
let req = {
projectId: 1,
setKindOfAdministrative: 3,
scopeOfAdministrative: '000_110',
scopeOfAdministrative: "000_110",
setKindOfOrganization: 3,
scopeOfOrganization: '2|3|4|5|6|7',
scopeOfOrganization: "2|3|4|5|6|7",
setKindOfDepartment: 3,
scopeOfDepartment: 54,
pageNum: this.formPersonnel.pageNum,
pageSize: this.formPersonnel.pageSize,
pageSize: this.formPersonnel.pageSize
};
vm.GET("scope/v1/people", req).then(res => {
if (res.code == "000000") {
......@@ -1168,6 +1244,7 @@ export default {
}
});
},
//机构table修改
handleSizeOrganization(val) {
console.log(`每页 ${val} 条`);
......
src/views/education/item-manager.vue
浏览文件 @ 0dec357a
......@@ -306,7 +306,7 @@ export default {
message: "ID为：" + row.id + "的项目删除成功"
});
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 {
title: '项目管理',
icon: 'el-icon-setting',
index: 'item-manager'
},
{
title: '树',
icon: 'el-icon-setting',
index: 'tree'
}
]
},{
......
src/views/mock.js
浏览文件 @ 0dec357a
......@@ -48,10 +48,12 @@ let treeData = [
id: 11,
name: "一级 1",
label: "一级 1",
isLeaf: "true",
children: [
{
id: 1,
label: "一级 1",
isLeaf: "true",
children: [
{
id: 4,
......@@ -75,14 +77,21 @@ let treeData = [
children: [
{
id: 5,
label: "二级 2-1"
label: "二级 2-1",
children: [],
},
{
id: 6,
label: "二级 2-2"
label: "二级 2-2",
isLeaf: false,
}
]
},
{
id: 4,
label: "一级 4",
isLeaf: false,
},
{
id: 3,
label: "一级 3",
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或