Skip to content

P
pica-admin-consultation
提交 1718b6f3 编写于 作者: zhentian.jia's avatar zhentian.jia
浏览文件
操作

添加树型结构的细节问题

上级 620569ad
显示空白字符变更
内嵌 并排
正在显示 包含 654 行增加 和 297 行删除
src/views/education/add-manager.vue
浏览文件 @ 1718b6f3
<template>
<div class="main-container">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<el-main>
<el-row>
<el-row class="step-content">
<el-col :span="14">
<el-steps :active="active" simple style="margin-bottom: 30px; background: #fff;">
<span class="step-num">1</span>
<el-steps :active="active" simple style="background: #fff;">
<span class="step-num" v-bind:class="{ 'on-step': stepData[0] }">1</span>
<el-step title="基础信息"></el-step>
<span class="step-num">2</span>
<span class="step-num" v-bind:class="{ 'on-step': stepData[1] }">2</span>
<el-step title="选择范围">2</el-step>
<span class="step-num">3</span>
<span class="step-num" v-bind:class="{ 'on-step': stepData[2] }">3</span>
<el-step title="选择项目组件">3</el-step>
</el-steps>
</el-col>
......@@ -19,7 +18,7 @@
<el-button v-if="active>=2" size="small" type="primary" @click="nextStep">完成</el-button>
</el-col>
</el-row>
<div class="step1" v-if="active === 0">
<div class="first-step" v-if="active === 0">
<el-form ref="formData" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="项目名称：" prop="name">
<el-col :span="13">
......@@ -102,15 +101,24 @@
</el-form-item>
</el-form>
</div>
<div class="step2" v-else-if="active === 1">
<div class="second-step" v-else-if="active === 1">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="设定行政范围" name="first">
<el-row :gutter="20">
<el-col class="rim" :span="12">
<el-tree :props="treeProp" :load="loadNode" lazy show-checkbox></el-tree>
<el-tree
:data="treeData"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@check="onChecked"
></el-tree>
</el-col>
<el-col :span="11">
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">{{tag.name}}</el-tag>
<el-tag v-for="tag in tagsRegion" :key="tag.name" closable :type="tag.type">{{tag.name}}</el-tag>
</el-col>
</el-row>
</el-tab-pane>
......@@ -259,7 +267,6 @@
</el-form-item>
</el-form>
</div>
</el-main>
</div>
</template>
<script>
......@@ -291,9 +298,9 @@ export default {
curmbFirst: "教培项目",
curmbSecond: "新建项目",
//页面展示位置
active: 0,
activeName: "third",
currentPage: 2,
stepData: [true, false, false],
active: 1,
activeName: "first",
//基层信息 数据
imageUrl: "",
formData: {
......@@ -317,7 +324,67 @@ export default {
children: "zones",
isLeaf: "leaf"
},
tags: [{ name: "高新区", type: "" }],
defaultProps: {
children: "children",
label: "label"
},
treeData: [
{
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"
}
]
}
]
}
],
tagsRegion: [],
tableData: Array(10).fill(item),
multipleSelection: [],
//设定机构 数据
......@@ -384,7 +451,15 @@ export default {
]
},
rules: {
name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{
min: 2,
max: 20,
message: "输入长度为2-20的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
}
],
date1: [
{
type: "date",
......@@ -448,32 +523,53 @@ export default {
};
},
created() {
//this.checkAll();
this.changeOnStep(this.active);
},
methods: {
//表单校验
submitForm(formName) {
console.log('校验表单:'+formName);
console.log("校验表单:" + formName);
let flag = null;
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
console.log("success");
flag = true;
} else {
console.log("error submit!!");
return false;
flag = false;
}
});
return flag;
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
nextStep() {
if(this.active == 0) {
let formName = 'formData';
this.submitForm(formName);
//步骤style
changeOnStep(active) {
if (active == 0) {
this.stepData = [true, false, false];
} else if (active == 1) {
this.stepData = [false, true, false];
} else if (active == 2) {
this.stepData = [false, false, true];
}
},
onSubmit() {
console.log("submit!");
//点击下一步
nextStep() {
if (this.active == 0) {
let formName = "formData";
let checkTyep = this.submitForm(formName);
console.log("判断移动" + checkTyep);
if (checkTyep === true) {
this.active++;
this.stepData = [false, true, false];
}
}
if (this.active == 1) {
//this.stepData = [false, true, false];
}
},
//图片上传
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
......@@ -504,34 +600,95 @@ export default {
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
//切换tab
handleClick(tab, event) {
console.log(tab);
},
initCheckList(allSelectedKeys) {
this.tagsRegion = [];
console.log(allSelectedKeys);
console.log(this.$refs.tree.getCheckedNodes());
let nodeData = this.$refs.tree.getCheckedNodes();
for(let i=0;i<nodeData.length;i++){
for(let j=0;j<allSelectedKeys.length;j++) {
if(allSelectedKeys[j].type == 2 && nodeData[i].id==allSelectedKeys[j].key) {
let tagObj = {};
tagObj.name = nodeData[i].label;
this.tagsRegion.push(tagObj);
}
}
}
},
//树结构
loadNode(node, resolve) {
console.log(node);
if (node.level === 0) {
return resolve([{ name: "全国" }]);
return resolve([{ label: "全国" }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [
{
name: "北京市",
leaf: true
},
{
name: "上海市"
const data = [];
resolve(data);
}, 500);
},
{
name: "重庆市"
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys());
},
onChecked() {
let cData = [],
oldData = (this.treeData.length && this.treeData.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(allSelectedKeys);
this.initCheckList(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);
}
});
}
}
},
{
name: "天津市"
// 去除子节点
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);
}
];
resolve(data);
}, 500);
}
}
});
return checkedKeys;
},
//check table
handleSelectionChange(val) {
this.multipleSelection = val;
},
......@@ -564,7 +721,58 @@ export default {
}
};
</script>
<style>
<style lang="scss">
.main-container {
.step-content {
overflow: hidden;
height: 60px;
margin-top: 60px;
border-bottom: 1px solid #efefef;
}
.is-finish {
color: #c0c4cc;
}
.step-num {
display: block;
font-size: 12px;
border: 2px solid #b8babe;
border-radius: 50%;
width: 25px;
height: 20px;
line-height: 15px;
text-align: center;
color: #b8babe;
}
.on-step {
color: #747476;
border-color: #747476;
}
.first-step {
margin-top: 20px;
}
.second-step {
margin: 10px 0 0 20px;
.el-tabs__nav-wrap::after {
display: none;
}
.el-tabs__active-bar {
display: none;
}
#tab-first,
#tab-second,
#tab-third {
padding-right: 0px;
}
#tab-first::after,
#tab-second::after,
#tab-third::after {
color: #c7cbd2;
margin-left: 20px;
content: "•";
}
}
}
.avatar-uploader {
float: left;
}
......@@ -616,16 +824,7 @@ export default {
.is-text {
display: none;
}
.step-num {
display: block;
font-size: 12px;
border: 2px solid #5f5f60;
border-radius: 50%;
width: 25px;
height: 20px;
line-height: 15px;
text-align: center;
}
.choose-button {
background: #fff;
color: #409eff;
......
src/views/system/role.vue
浏览文件 @ 1718b6f3
<template>
<div class="create-item">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
角色管理
<div>
<el-tree
:data="data2"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@check="onChecked"
></el-tree>
<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 BreadCrumb from '../../components/breadcrumb.vue'
import { ELTree1 } from "element-ui/lib/checkbox";
// import Vue from 'vue'
// require("element-ui/lib/checkbox"
export default {
components: {
BreadCrumb
// components: {
// base1
// },
mounted() {
// const base1 = Vue.extend(ELTree)
// Vue.component('base1', base1)
},
data() {
return {
curmbFirst: '系统管理',
curmbSecond: '角色管理'
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"
}
]
}
}
</script>
<style>
]
},
{
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([]);
},
</style>
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(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
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或