master #20
|
|
@ -7,11 +7,11 @@
|
||||||
<el-input v-model="filterText" style="width: 100%;" size="small"
|
<el-input v-model="filterText" style="width: 100%;" size="small"
|
||||||
clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
|
clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
|
||||||
</div>
|
</div>
|
||||||
<!-- 部门 -->
|
<!-- 部门 check-strictly-->
|
||||||
<el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
|
<el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
|
||||||
<el-scrollbar style="height:350px">
|
<el-scrollbar style="height:350px">
|
||||||
<el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="deptId" default-expand-all
|
<el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="value" default-expand-all
|
||||||
:show-checkbox="showCheckbox" check-strictly highlight-current
|
:show-checkbox="showCheckbox" highlight-current :check-strictly="multiple===false"
|
||||||
@check-change="handleCheckChange" @node-click="(node,check)=>handle(node,check)"
|
@check-change="handleCheckChange" @node-click="(node,check)=>handle(node,check)"
|
||||||
:filter-node-method="filterNode">
|
:filter-node-method="filterNode">
|
||||||
<div class="custom-tree-node" slot-scope="{ node }" style="width: 100%">
|
<div class="custom-tree-node" slot-scope="{ node }" style="width: 100%">
|
||||||
|
|
@ -20,7 +20,6 @@
|
||||||
</el-tree>
|
</el-tree>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="selected">
|
<div class="selected">
|
||||||
<div class="count">
|
<div class="count">
|
||||||
<span>已选 {{ selectList.length }} 项</span>
|
<span>已选 {{ selectList.length }} 项</span>
|
||||||
|
|
@ -102,7 +101,7 @@ export default {
|
||||||
// const jsonb = jsona.replace(/"value"/g, '"deptId"') // 修改成你要的字段
|
// const jsonb = jsona.replace(/"value"/g, '"deptId"') // 修改成你要的字段
|
||||||
// const jsonc = jsonb.replace(/"label"/g, '"deptName"')
|
// const jsonc = jsonb.replace(/"label"/g, '"deptName"')
|
||||||
this.deptList = res.data
|
this.deptList = res.data
|
||||||
console.log("获取部门信息===========", this.deptList);
|
// console.log("获取部门信息===========", this.deptList);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
//通过关键字过滤树节点
|
//通过关键字过滤树节点
|
||||||
|
|
@ -132,7 +131,9 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (checked) {
|
if (checked) {
|
||||||
|
if(data.children === undefined){
|
||||||
this.selectList.push(data);
|
this.selectList.push(data);
|
||||||
|
}
|
||||||
} else if (data === '1') {
|
} else if (data === '1') {
|
||||||
this.$refs.tree.setCheckedKeys([]);
|
this.$refs.tree.setCheckedKeys([]);
|
||||||
this.selectList = [];
|
this.selectList = [];
|
||||||
|
|
@ -147,10 +148,11 @@ export default {
|
||||||
}
|
}
|
||||||
if (checked) {
|
if (checked) {
|
||||||
this.$refs.tree.setCheckedNodes([data]);
|
this.$refs.tree.setCheckedNodes([data]);
|
||||||
|
// this.$refs.tree.setCheckedKeys([]);
|
||||||
this.selectList = [data];
|
this.selectList = [data];
|
||||||
} else if (data === '1') {
|
} else if (data === '1') {
|
||||||
this.$refs.tree.setCheckedKeys([]);
|
|
||||||
this.selectList = [];
|
this.selectList = [];
|
||||||
|
this.$refs.tree.setCheckedKeys([]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -164,6 +166,7 @@ export default {
|
||||||
* @param check checked(checkbox选择框)是否选中
|
* @param check checked(checkbox选择框)是否选中
|
||||||
*/
|
*/
|
||||||
handle(node, check) {
|
handle(node, check) {
|
||||||
|
if (check.isLeaf !== false) {
|
||||||
if (this.multiple) {
|
if (this.multiple) {
|
||||||
//不添加重复的数据到右边
|
//不添加重复的数据到右边
|
||||||
for (let i = 0; i < this.selectList.length; i++) {
|
for (let i = 0; i < this.selectList.length; i++) {
|
||||||
|
|
@ -178,6 +181,7 @@ export default {
|
||||||
check.checked = true
|
check.checked = true
|
||||||
this.selectList = [node];
|
this.selectList = [node];
|
||||||
}
|
}
|
||||||
|
}
|
||||||
this._value = this.selectList
|
this._value = this.selectList
|
||||||
},
|
},
|
||||||
//左侧无选择框时,右侧显示×
|
//左侧无选择框时,右侧显示×
|
||||||
|
|
@ -203,9 +207,10 @@ export default {
|
||||||
cancelButtonText: "取消",
|
cancelButtonText: "取消",
|
||||||
type: "warning"
|
type: "warning"
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
this.handleCheckChange("1");
|
|
||||||
if (!this.showCheckbox) {
|
if (!this.showCheckbox) {
|
||||||
this.selectList = []
|
this.selectList = []
|
||||||
|
}else {
|
||||||
|
this.handleCheckChange("1");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
@ -221,15 +226,15 @@ export default {
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@containWidth: 278px;
|
@containWidth: 278px;
|
||||||
|
|
||||||
/deep/ .el-tree-node {
|
///deep/ .el-tree-node {
|
||||||
.is-leaf + .el-checkbox .el-checkbox__inner {
|
// .is-leaf + .el-checkbox .el-checkbox__inner {
|
||||||
display: inline-block;
|
// display: inline-block;
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
.el-checkbox .el-checkbox__inner {
|
// .el-checkbox .el-checkbox__inner {
|
||||||
display: none;
|
// display: none;
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
|
||||||
/deep/ .el-dialog__body {
|
/deep/ .el-dialog__body {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
|
|
|
||||||
|
|
@ -10,12 +10,12 @@
|
||||||
<org-picker type="dept" :multiple="multiple" ref="deptPicker" :v-model="select" :selected="_value" @ok="selected"/>
|
<org-picker type="dept" :multiple="multiple" ref="deptPicker" :v-model="select" :selected="_value" @ok="selected"/>
|
||||||
<span class="placeholder"> {{placeholder}}</span>
|
<span class="placeholder"> {{placeholder}}</span>
|
||||||
<div style="margin-top: 5px">
|
<div style="margin-top: 5px">
|
||||||
<el-tag size="mini" style="margin: 5px" closable v-for="(dept, i) in _value" :key="i" @close="delDept(i)">{{dept.deptName}}</el-tag>
|
<el-tag size="mini" style="margin: 5px" closable v-for="(dept, i) in _value" :key="i" @close="delDept(i)">{{dept.label}}</el-tag>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="perm === 'R'">
|
<template v-else-if="perm === 'R'">
|
||||||
<div v-for="(dept, i) in _value" :key="i">
|
<div v-for="(dept, i) in _value" :key="i">
|
||||||
{{dept.deptName}}
|
{{dept.label}}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue