-
-
-
-
{{ org.label }}
+
+
+ 已选 {{ selectList.length }} 项
+ 清空
+
+
+
+
+
+ {{ selectItem.label }}
+
+
@@ -41,16 +44,66 @@ import {getDepartmentTree} from "@/api/org";
export default {
name: "departmentPicker",
+ props: {
+ value: {
+ type: Array,
+ default: () => {
+ return [];
+ }
+ },
+ multiple: { //是否多选
+ default: true,
+ type: Boolean
+ },
+ showCheckbox: { //是否显示左侧选择框
+ default: true,
+ type: Boolean
+ }
+ },
data() {
return {
visible: false,
loading: false,
title: "请选择",
- multiple: true,//是否多选
- showCheckbox: true,//是否显示左侧选择框
selectList: [],
filterText: "",
- deptList: []
+ deptList: [
+ {
+ value: 1,
+ label: '一级 1',
+ children: [{
+ value: 4,
+ label: '二级 1-1',
+ children: [{
+ value: 9,
+ label: '31'
+ }, {
+ value: 10,
+ label: '三级 1-1-2'
+ }]
+ }]
+ }, {
+ value: 2,
+ label: '一级 2',
+ children: [{
+ value: 5,
+ label: '二级 2-1'
+ }, {
+ value: 6,
+ label: '二级 2-2'
+ }]
+ }, {
+ value: 3,
+ label: '一级 3',
+ children: [{
+ value: 7,
+ label: '二级 3-1'
+ }, {
+ value: 8,
+ label: '二级 3-2'
+ }]
+ }
+ ]
};
},
watch: {
@@ -61,6 +114,16 @@ export default {
created() {
this.getDepartmentTree();
},
+ computed: {
+ _value: {
+ get() {
+ return this.value
+ },
+ set(val) {
+ this.$emit("input", val)
+ }
+ }
+ },
methods: {
//获取部门信息
getDepartmentTree() {
@@ -78,40 +141,84 @@ export default {
showDeptPicker() {
this.visible = true;
},
- //选中部门
+ /**
+ * 选中部门
+ * @param data 选择的每个节点item
+ * @param checked 是否选中
+ */
handleCheckChange(data, checked) {
// 左侧有选择框
if (this.showCheckbox) {
// 左侧有选择框 + 多选
if (this.multiple) {
+ //不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === data.value) {
this.selectList.splice(i, 1);
break;
}
}
- // checked= true;
- // this.selectList.push(data);
if (checked) {
this.selectList.push(data);
- } else {
- // this.$refs.tree.setCheckedKeys(data);
+ } else if(data==='1') {
+ this.$refs.tree.setCheckedKeys([]);
+ this.selectList = [];
}
} else {// 左侧有选择框 + 单选
+ //不添加重复的数据到右边
+ for (let i = 0; i < this.selectList.length; i++) {
+ if (this.selectList[i].value === data.value) {
+ this.selectList.splice(i, 1);
+ break;
+ }
+ }
if (checked) {
this.$refs.tree.setCheckedNodes([data]);
this.selectList = [data];
- } else {
+ } else if(data==='1') {
this.$refs.tree.setCheckedKeys([]);
this.selectList = [];
}
}
- }else {// 左侧没有选择框
- // 左侧没有选择框 + 多选
- if (this.multiple) {
-
- }else {// 左侧没有选择框 + 单选
+ }
+ // this._value = this.selectList
+ },
+ //左侧没有选择框时,点击tree-item
+ /**
+ * 可以点击树节点label,进行选择
+ * @param node 选择的每个节点item
+ * @param check checked(checkbox选择框)是否选中
+ */
+ handle(node,check) {
+ if(this.multiple){
+ //不添加重复的数据到右边
+ for (let i = 0; i < this.selectList.length; i++) {
+ if (this.selectList[i].value === node.value) {
+ this.selectList.splice(i, 1);
+ break;
+ }
+ }
+ check.checked=true
+ this.selectList.push(node);
+ }else {
+ check.checked=true
+ this.selectList=[node];
+ }
+ },
+ //左侧无选择框时,右侧显示×
+ noSelected(selectItem) {
+ for (let i = 0; i < this.selectList.length; i++) {
+ if (this.selectList[i].value === selectItem.value) {
+ this.selectList.splice(i, 1);
+ this.$refs.tree.setCheckedKeys(i);
+ break;
+ }
+ }
+ if (this.showCheckbox) {
+ // 左侧有选择框 + 单选
+ if (this.multiple===false) {
+ this.$refs.tree.setCheckedKeys([]);
}
}
},
@@ -122,20 +229,17 @@ export default {
cancelButtonText: "取消",
type: "warning"
}).then(() => {
-
- this.handleCheckChange("", false);
+ this.handleCheckChange("1");
+ if(!this.showCheckbox){
+ this.selectList=[]
+ }
});
},
//确定按钮
selectConfirm() {
- // this.$emit("ok", Object.assign([], this.select.map(v => {
- // v.avatar = undefined;
- // return v;
- // })));
- // this.visible = false;
- // this.recover();
+ // this.$emit("input", this.selectList)
+ // this.$emit("dengjie")
}
-
}
};
@@ -143,10 +247,11 @@ export default {