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> <template>
<div class="main-container"> <div class="main-container">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb> <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<el-main> <el-row class="step-content">
<el-row> <el-col :span="14">
<el-col :span="14"> <el-steps :active="active" simple style="background: #fff;">
<el-steps :active="active" simple style="margin-bottom: 30px; background: #fff;"> <span class="step-num" v-bind:class="{ 'on-step': stepData[0] }">1</span>
<span class="step-num">1</span> <el-step title="基础信息"></el-step>
<el-step title="基础信息"></el-step> <span class="step-num" v-bind:class="{ 'on-step': stepData[1] }">2</span>
<span class="step-num">2</span> <el-step title="选择范围">2</el-step>
<el-step title="选择范围">2</el-step> <span class="step-num" v-bind:class="{ 'on-step': stepData[2] }">3</span>
<span class="step-num">3</span> <el-step title="选择项目组件">3</el-step>
<el-step title="选择项目组件">3</el-step> </el-steps>
</el-steps> </el-col>
</el-col> <el-col :span="5" :offset="5">
<el-col :span="5" :offset="5"> <el-button size="small">暂存</el-button>
<el-button size="small">暂存</el-button> <el-button v-if="active<2" size="small" type="primary" @click="nextStep">下一步</el-button>
<el-button v-if="active<2" size="small" type="primary" @click="nextStep">下一步</el-button> <el-button v-if="active>=2" size="small" type="primary" @click="nextStep">完成</el-button>
<el-button v-if="active>=2" size="small" type="primary" @click="nextStep">完成</el-button> </el-col>
</el-col> </el-row>
</el-row> <div class="first-step" v-if="active === 0">
<div class="step1" v-if="active === 0"> <el-form ref="formData" :model="formData" :rules="rules" label-width="100px">
<el-form ref="formData" :model="formData" :rules="rules" label-width="100px"> <el-form-item label="项目名称：" prop="name">
<el-form-item label="项目名称：" prop="name"> <el-col :span="13">
<el-col :span="13"> <el-input v-model="formData.name" placeholder="请输入项目名称"></el-input>
<el-input v-model="formData.name" placeholder="请输入项目名称"></el-input> </el-col>
</el-col> </el-form-item>
</el-form-item> <el-form-item label="项目时间：" required>
<el-form-item label="项目时间：" required> <el-col :span="6">
<el-col :span="6"> <el-form-item prop="date1">
<el-form-item prop="date1"> <el-date-picker
<el-date-picker type="date"
type="date" placeholder="请选择项目时间"
placeholder="请选择项目时间" v-model="formData.date1"
v-model="formData.date1" style="width: 100%;"
style="width: 100%;" ></el-date-picker>
></el-date-picker> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="1">&nbsp;&nbsp;&nbsp; ~</el-col>
<el-col :span="1">&nbsp;&nbsp;&nbsp; ~</el-col> <el-col :span="6">
<el-col :span="6"> <el-form-item prop="date2">
<el-form-item prop="date2"> <el-date-picker
<el-date-picker type="date"
type="date" placeholder="请选择项目时间"
placeholder="请选择项目时间" v-model="formData.date2"
v-model="formData.date2" style="width: 100%;"
style="width: 100%;" ></el-date-picker>
></el-date-picker> </el-form-item>
</el-form-item> </el-col>
</el-col> </el-form-item>
</el-form-item> <el-form-item label="项目简介：" prop="desc">
<el-form-item label="项目简介：" prop="desc"> <el-col :span="13">
<el-col :span="13"> <el-input
<el-input type="textarea"
type="textarea" :autosize="{ minRows: 5}"
:autosize="{ minRows: 5}" placeholder="请输入项目简介"
placeholder="请输入项目简介" v-model="formData.desc"
v-model="formData.desc" ></el-input>
></el-input> </el-col>
</el-col> </el-form-item>
</el-form-item> <el-form-item label="封面类型：">
<el-form-item label="封面类型："> <el-radio-group v-model="formData.type">
<el-radio-group v-model="formData.type"> <el-radio :label="1">图片</el-radio>
<el-radio :label="1">图片</el-radio> <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 label="封面图片：">
<el-form-item label="封面图片："> <el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<div>点击上传文件</div>
</el-upload>
<div class="upload-text">
<div class="text">分辨率：750*420</div>
<div class="text">支持jpeg，png，tif等格式</div>
</div>
</el-form-item>
<el-form-item label="可下载附件：">
<el-col :span="10">
<el-upload <el-upload
class="avatar-uploader" class="upload-pdf"
action="https://jsonplaceholder.typicode.com/posts/" action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false" :on-preview="handlePreview"
:on-success="handleAvatarSuccess" :on-remove="handleRemove"
:before-upload="beforeAvatarUpload" :before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList"
> >
<img v-if="imageUrl" :src="imageUrl" class="avatar"> <el-button class="choose-button" plain icon="el-icon-document">选择文件</el-button>
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <div slot="tip" class="el-upload__tip">支持文件类型：pdf</div>
<div>点击上传文件</div>
</el-upload> </el-upload>
<div class="upload-text"> </el-col>
<div class="text">分辨率：750*420</div> </el-form-item>
<div class="text">支持jpeg，png，tif等格式</div> </el-form>
</div> </div>
</el-form-item> <div class="second-step" v-else-if="active === 1">
<el-form-item label="可下载附件："> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-col :span="10"> <el-tab-pane label="设定行政范围" name="first">
<el-upload <el-row :gutter="20">
class="upload-pdf" <el-col class="rim" :span="12">
action="https://jsonplaceholder.typicode.com/posts/" <el-tree
:on-preview="handlePreview" :data="treeData"
:on-remove="handleRemove" show-checkbox
:before-remove="beforeRemove" default-expand-all
multiple node-key="id"
:limit="3" ref="tree"
:on-exceed="handleExceed" highlight-current
:file-list="fileList" :props="defaultProps"
> @check="onChecked"
<el-button class="choose-button" plain icon="el-icon-document">选择文件</el-button> ></el-tree>
<div slot="tip" class="el-upload__tip">支持文件类型：pdf</div>
</el-upload>
</el-col> </el-col>
</el-form-item> <el-col :span="11">
</el-form> <el-tag v-for="tag in tagsRegion" :key="tag.name" closable :type="tag.type">{{tag.name}}</el-tag>
</div> </el-col>
<div class="step2" v-else-if="active === 1"> </el-row>
<el-tabs v-model="activeName" @tab-click="handleClick"> </el-tab-pane>
<el-tab-pane label="设定行政范围" name="first"> <el-tab-pane label="设定机构" name="second">
<el-row :gutter="20"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-col class="rim" :span="12"> <el-form-item label>
<el-tree :props="treeProp" :load="loadNode" lazy show-checkbox></el-tree> <el-input v-model="formInline.name" placeholder="请输入机构名称"></el-input>
</el-col> </el-form-item>
<el-col :span="11"> <el-form-item label>
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">{{tag.name}}</el-tag> <el-select v-model="formInline.region" placeholder="全部地区">
</el-col> <el-option label="全部地区" value></el-option>
</el-row> <el-option label="区域一" value="shanghai"></el-option>
</el-tab-pane> <el-option label="区域二" value="beijing"></el-option>
<el-tab-pane label="设定机构" name="second"> </el-select>
<el-form :inline="true" :model="formInline" class="demo-form-inline"> </el-form-item>
<el-form-item label> <el-form-item>
<el-input v-model="formInline.name" placeholder="请输入机构名称"></el-input> <el-select v-model="formInline.grade" placeholder="全部医院级别">
</el-form-item>
<el-form-item label>
<el-select v-model="formInline.region" placeholder="全部地区">
<el-option label="全部地区" value></el-option>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="formInline.grade" placeholder="全部医院级别">
<el-option label="全部医院级别" value></el-option>
<el-option label="三家" value="3"></el-option>
<el-option label="二甲" value="2"></el-option>
<el-option label="一甲" value="1"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-table
class="rim"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="医院名称"></el-table-column>
<el-table-column prop="grade" label="医院级别"></el-table-column>
<el-table-column prop="province" label="所属省份"></el-table-column>
<el-table-column prop="city" label="所属城市"></el-table-column>
<el-table-column prop="district" label="所属区县"></el-table-column>
<el-table-column prop="street" label="所属街道" show-overflow-tooltip></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="设定科室" name="third">
<el-col :span="8">
<el-select v-model="formDepartment.grade" placeholder="全部医院级别">
<el-option label="全部医院级别" value></el-option> <el-option label="全部医院级别" value></el-option>
<el-option label="三家" value="3"></el-option> <el-option label="三家" value="3"></el-option>
<el-option label="二甲" value="2"></el-option> <el-option label="二甲" value="2"></el-option>
<el-option label="一甲" value="1"></el-option> <el-option label="一甲" value="1"></el-option>
</el-select> </el-select>
<el-table </el-form-item>
class="department" </el-form>
ref="multipleTable" <el-table
:data="tableData2" class="rim"
tooltip-effect="dark" ref="multipleTable"
style="width: 100%" :data="tableData"
@selection-change="handleSelectionChange" tooltip-effect="dark"
> style="width: 100%"
<el-table-column type="selection" width="55"></el-table-column> @selection-change="handleSelectionChange"
<el-table-column prop="name" label="科室名称"></el-table-column> >
</el-table> <el-table-column type="selection" width="55"></el-table-column>
</el-col> <el-table-column prop="name" label="医院名称"></el-table-column>
</el-tab-pane> <el-table-column prop="grade" label="医院级别"></el-table-column>
<el-tab-pane label="设定人员" name="fourth"> <el-table-column prop="province" label="所属省份"></el-table-column>
<el-form :inline="true" :model="formPersonnel" class="demo-form-inline"> <el-table-column prop="city" label="所属城市"></el-table-column>
<el-form-item label> <el-table-column prop="district" label="所属区县"></el-table-column>
<el-select v-model="formPersonnel.hospital" placeholder="全部医院"> <el-table-column prop="street" label="所属街道" show-overflow-tooltip></el-table-column>
<el-option label="全部医院" value></el-option> </el-table>
<el-option label="上海第一人民医院" value="shanghai"></el-option> </el-tab-pane>
<el-option label="北京医院" value="beijing"></el-option> <el-tab-pane label="设定科室" name="third">
</el-select> <el-col :span="8">
</el-form-item> <el-select v-model="formDepartment.grade" placeholder="全部医院级别">
<el-form-item> <el-option label="全部医院级别" value></el-option>
<el-select v-model="formPersonnel.department" placeholder="全部部门"> <el-option label="三家" value="3"></el-option>
<el-option label="全部部门" value></el-option> <el-option label="二甲" value="2"></el-option>
<el-option label="内科" value="3"></el-option> <el-option label="一甲" value="1"></el-option>
<el-option label="外科" value="2"></el-option> </el-select>
<el-option label="心内科" value="1"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-table <el-table
class="rim" class="department"
ref="multipleTablePerson" ref="multipleTable"
:data="tablePerson" :data="tableData2"
tooltip-effect="dark" tooltip-effect="dark"
style="width: 100%" style="width: 100%"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="55"></el-table-column> <el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="人员名称"></el-table-column> <el-table-column prop="name" label="科室名称"></el-table-column>
<el-table-column prop="hospital" label="所属医院"></el-table-column>
<el-table-column prop="department" label="所属部门"></el-table-column>
<el-table-column prop="province" label="所属省份"></el-table-column>
<el-table-column prop="city" label="所属城市"></el-table-column>
<el-table-column prop="district" label="所属区县" show-overflow-tooltip></el-table-column>
</el-table> </el-table>
</el-tab-pane> </el-col>
</el-tabs> </el-tab-pane>
</div> <el-tab-pane label="设定人员" name="fourth">
<div class="step2" v-else-if="active === 2"> <el-form :inline="true" :model="formPersonnel" class="demo-form-inline">
<el-form ref="formData" :model="formComponent" :rules="rulesComponent"> <el-form-item label>
<el-form-item label="选择组件："> <el-select v-model="formPersonnel.hospital" placeholder="全部医院">
<el-col :span="20"> <el-option label="全部医院" value></el-option>
<el-select <el-option label="上海第一人民医院" value="shanghai"></el-option>
v-model="formComponent.component" <el-option label="北京医院" value="beijing"></el-option>
multiple
collapse-tags
style="margin-left: 20px;width: 300px"
placeholder="请选择组件"
@change="changeValue"
>
<el-option
v-for="item in optionsComponent"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-col> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item label="已选择："> <el-select v-model="formPersonnel.department" placeholder="全部部门">
<el-col :span="20"> <el-option label="全部部门" value></el-option>
<el-tag <el-option label="内科" value="3"></el-option>
v-for="tag in tagsComponent" <el-option label="外科" value="2"></el-option>
:key="tag.name" <el-option label="心内科" value="1"></el-option>
closable
:type="tag.type"
style="margin-left: 10px;"
>{{tag.name}}</el-tag>
</el-col>
</el-form-item>
<el-form-item label="配置证书：">
<el-radio-group v-model="formComponent.configure">
<el-radio :label="1">是</el-radio>
<el-radio :label="2">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选择证书：">
<el-col :span="20">
<el-select v-model="formComponent.certificate" placeholder="请选择证书">
<el-option label="证书1" value="1"></el-option>
<el-option label="证书2" value="2"></el-option>
<el-option label="证书3" value="3"></el-option>
</el-select> </el-select>
</el-col> </el-form-item>
</el-form-item> </el-form>
</el-form> <el-table
</div> class="rim"
</el-main> ref="multipleTablePerson"
:data="tablePerson"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="人员名称"></el-table-column>
<el-table-column prop="hospital" label="所属医院"></el-table-column>
<el-table-column prop="department" label="所属部门"></el-table-column>
<el-table-column prop="province" label="所属省份"></el-table-column>
<el-table-column prop="city" label="所属城市"></el-table-column>
<el-table-column prop="district" label="所属区县" show-overflow-tooltip></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
<div class="step2" v-else-if="active === 2">
<el-form ref="formData" :model="formComponent" :rules="rulesComponent">
<el-form-item label="选择组件：">
<el-col :span="20">
<el-select
v-model="formComponent.component"
multiple
collapse-tags
style="margin-left: 20px;width: 300px"
placeholder="请选择组件"
@change="changeValue"
>
<el-option
v-for="item in optionsComponent"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="已选择：">
<el-col :span="20">
<el-tag
v-for="tag in tagsComponent"
:key="tag.name"
closable
:type="tag.type"
style="margin-left: 10px;"
>{{tag.name}}</el-tag>
</el-col>
</el-form-item>
<el-form-item label="配置证书：">
<el-radio-group v-model="formComponent.configure">
<el-radio :label="1">是</el-radio>
<el-radio :label="2">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选择证书：">
<el-col :span="20">
<el-select v-model="formComponent.certificate" placeholder="请选择证书">
<el-option label="证书1" value="1"></el-option>
<el-option label="证书2" value="2"></el-option>
<el-option label="证书3" value="3"></el-option>
</el-select>
</el-col>
</el-form-item>
</el-form>
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -291,9 +298,9 @@ export default { ...@@ -291,9 +298,9 @@ export default {
curmbFirst: "教培项目", curmbFirst: "教培项目",
curmbSecond: "新建项目", curmbSecond: "新建项目",
//页面展示位置 //页面展示位置
active: 0, stepData: [true, false, false],
activeName: "third", active: 1,
currentPage: 2, activeName: "first",
//基层信息 数据 //基层信息 数据
imageUrl: "", imageUrl: "",
formData: { formData: {
...@@ -317,7 +324,67 @@ export default { ...@@ -317,7 +324,67 @@ export default {
children: "zones", children: "zones",
isLeaf: "leaf" 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), tableData: Array(10).fill(item),
multipleSelection: [], multipleSelection: [],
//设定机构 数据 //设定机构 数据
...@@ -384,7 +451,15 @@ export default { ...@@ -384,7 +451,15 @@ export default {
] ]
}, },
rules: { rules: {
name: [{ required: true, message: "请输入活动名称", trigger: "blur" }], name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{
min: 2,
max: 20,
message: "输入长度为2-20的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
}
],
date1: [ date1: [
{ {
type: "date", type: "date",
...@@ -448,32 +523,53 @@ export default { ...@@ -448,32 +523,53 @@ export default {
}; };
}, },
created() { created() {
//this.checkAll(); this.changeOnStep(this.active);
}, },
methods: { methods: {
//表单校验
submitForm(formName) { submitForm(formName) {
console.log('校验表单:'+formName); console.log("校验表单:" + formName);
let flag = null;
this.$refs[formName].validate(valid => { this.$refs[formName].validate(valid => {
if (valid) { if (valid) {
alert("submit!"); console.log("success");
flag = true;
} else { } else {
console.log("error submit!!"); console.log("error submit!!");
return false; flag = false;
} }
}); });
return flag;
}, },
resetForm(formName) { resetForm(formName) {
this.$refs[formName].resetFields(); this.$refs[formName].resetFields();
}, },
nextStep() { //步骤style
if(this.active == 0) { changeOnStep(active) {
let formName = 'formData'; if (active == 0) {
this.submitForm(formName); 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) { handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw); this.imageUrl = URL.createObjectURL(file.raw);
}, },
...@@ -504,34 +600,95 @@ export default { ...@@ -504,34 +600,95 @@ export default {
beforeRemove(file, fileList) { beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`); return this.$confirm(`确定移除 ${file.name}？`);
}, },
//切换tab
handleClick(tab, event) { handleClick(tab, event) {
console.log(tab); 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) { loadNode(node, resolve) {
console.log(node);
if (node.level === 0) { if (node.level === 0) {
return resolve([{ name: "全国" }]); return resolve([{ label: "全国" }]);
} }
if (node.level > 1) return resolve([]); if (node.level > 1) return resolve([]);
setTimeout(() => { setTimeout(() => {
const data = [ const data = [];
{
name: "北京市",
leaf: true
},
{
name: "上海市"
},
{
name: "重庆市"
},
{
name: "天津市"
}
];
resolve(data); resolve(data);
}, 500); }, 500);
}, },
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);
}
});
}
}
},
// 去除子节点
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;
},
//check table
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val;
}, },
...@@ -564,7 +721,58 @@ export default { ...@@ -564,7 +721,58 @@ export default {
} }
}; };
</script> </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 { .avatar-uploader {
float: left; float: left;
} }
...@@ -616,16 +824,7 @@ export default { ...@@ -616,16 +824,7 @@ export default {
.is-text { .is-text {
display: none; 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 { .choose-button {
background: #fff; background: #fff;
color: #409eff; color: #409eff;
......
src/views/system/role.vue
浏览文件 @ 1718b6f3
<template> <template>
<div class="create-item"> <div>
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb> <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>
</div>
</template> </template>
<script> <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 { export default {
components: { // components: {
BreadCrumb // 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());
}, },
data() { getCheckedKeys() {
return { console.log(this.$refs.tree.getCheckedKeys());
curmbFirst: '系统管理', },
curmbSecond: '角色管理' setCheckedNodes() {
this.$refs.tree.setCheckedNodes([
{
id: 5,
label: "二级 2-1"
},
{
id: 9,
label: "三级 1-1-1"
} }
} ]);
} },
</script> setCheckedKeys() {
<style> 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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或