407 lines
9.7 KiB
Vue
407 lines
9.7 KiB
Vue
<template>
|
|
<el-dialog custom-class="custom-dialog" class="border" :border="false" closeFree width="1000px" style="height: 676px"
|
|
:title="title" :visible.sync="visible" v-model="visible" append-to-body :close-on-click-modal="true"
|
|
:destroy-on-close="true">
|
|
<div class="picker">
|
|
<div class="candidate" v-loading="loading">
|
|
<el-input v-model="filterText" @change="getList()"
|
|
clearable placeholder="输入公司进行搜索">
|
|
<template #append>
|
|
<el-button @click="getList()">搜索</el-button>
|
|
</template>
|
|
</el-input>
|
|
<fvCheckbox style="margin-left: 10px" :options="checkOptions" v-model="checkList" @change="checkBoxChange"/>
|
|
<!-- 人员选择 -->
|
|
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
|
|
<el-scrollbar style="height:87%;">
|
|
<div class="tree">
|
|
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
|
|
:show-checkbox="showCheckbox" highlight-current default-expand-all
|
|
:default-checked-keys="defaultChecked" :disabled="disabled"
|
|
:check-strictly="!checkStrictly" @node-click="(node,check)=>handle(node,check)"
|
|
@check-change="handleChange" :filter-node-method="filterNode">
|
|
<template #default="{ node, data }">
|
|
<div class="tree-node">
|
|
<div style="display: flex;align-items: center;padding: 3px 0">
|
|
{{ node.label }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-tree>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
<div class="selected">
|
|
<div class="count">
|
|
<span>已选 {{ selectList.length }} 项</span>
|
|
<span @click="clearSelected">清空</span>
|
|
</div>
|
|
<div class="org-items">
|
|
<el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
|
|
<div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
|
|
{{ selectItem.label }}
|
|
<el-icon @click="noSelected(selectItem)" size="20" style="margin-left: 10px;cursor: pointer;">
|
|
<CircleClose/>
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<el-button size="mini" @click="visible = false">取 消</el-button>
|
|
<el-button size="mini" color="#DED0B2" @click="selectConfirm">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ElMessageBox} from "element-plus";
|
|
import {getSubCompOpt} from "@/api/user/user";
|
|
|
|
const checkList = ref(['1'])
|
|
const checkStrictly = ref(false)
|
|
const isExpand = ref('展开')
|
|
const expandedKeys = ref(['-1']);
|
|
const checkOptions = ref([
|
|
{
|
|
label: isExpand.value,
|
|
value: '1'
|
|
},
|
|
{
|
|
label: '父子联动',
|
|
value: '2'
|
|
},
|
|
])
|
|
const props = defineProps({
|
|
value: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
}
|
|
},
|
|
multiple: { //是否多选
|
|
default: true,
|
|
type: Boolean
|
|
},
|
|
showCheckbox: { //是否显示左侧选择框
|
|
default: true,
|
|
type: Boolean
|
|
}
|
|
});
|
|
const isChooseAll = ref(true);
|
|
let selectItem = reactive({
|
|
type: -1,
|
|
value: "0"
|
|
});
|
|
const visible = ref(false);
|
|
const loading = ref(false);
|
|
const title = ref("请选择");
|
|
const selectList = ref([]);
|
|
const filterText = ref("");
|
|
const dataList = ref([]);
|
|
const defaultChecked = ref([]);
|
|
const tree = ref([]);
|
|
const defaultProps = {
|
|
value: "value",
|
|
label: "label",
|
|
children: "children",
|
|
disabled: "disabled",
|
|
};
|
|
const emit = defineEmits();
|
|
const _value = computed({
|
|
get() {
|
|
return props.value;
|
|
},
|
|
set(val) {
|
|
emit("input", val);
|
|
}
|
|
});
|
|
|
|
watch(() => filterText.value, (newVal) => {
|
|
tree.value.filter(newVal);
|
|
});
|
|
const checkBoxChange = (val) => {
|
|
checkStrictly.value = val.includes('2')
|
|
let nodes = tree.value.store.nodesMap
|
|
if (val.includes('1')) {
|
|
for (const node in nodes) {
|
|
nodes[node].expanded = true;
|
|
}
|
|
isExpand.value = '折叠'
|
|
} else {
|
|
for (const node in nodes) {
|
|
nodes[node].expanded = false;
|
|
}
|
|
isExpand.value = '展开'
|
|
}
|
|
}
|
|
const matterTree = (list, flag) => {
|
|
list.forEach(item => {
|
|
if (!flag&&item.value!==-1) {
|
|
tree.value.setChecked(item, false)
|
|
}
|
|
if (item.children !== undefined) {
|
|
matterTree(item.children)
|
|
}
|
|
})
|
|
}
|
|
// const cancelAll = () => {
|
|
// isChooseAll.value = true
|
|
// tree.value.setCheckedNodes([])
|
|
// }
|
|
// const chooseAll = () => {
|
|
// isChooseAll.value = false
|
|
// matterTree(dataList.value)
|
|
// }
|
|
const getList = () => {
|
|
getSubCompOpt().then(res => {
|
|
dataList.value = [
|
|
{
|
|
label: "全选",
|
|
value: -1,
|
|
children: res.data
|
|
}
|
|
]
|
|
});
|
|
};
|
|
|
|
//通过关键字过滤树节点
|
|
const filterNode = (value, data) => {
|
|
//通过关键字过滤树节点
|
|
if (!value) return true;
|
|
return data.label.indexOf(value) !== -1;
|
|
};
|
|
//用于用户选择
|
|
const show = () => {
|
|
//用于弹开部门选择
|
|
visible.value = true;
|
|
selectList.value = _value.value
|
|
defaultChecked.value = _value.value.map(item => item.value)
|
|
getList()
|
|
};
|
|
const handleChange = (data, checked) => {
|
|
if (data.value == -1&&checked) {
|
|
// tree.value.setCheckedNodes(['-1'])
|
|
matterTree(dataList.value, false)
|
|
// return;
|
|
}
|
|
// 左侧有选择框 + 多选
|
|
if (props.multiple) {
|
|
//不添加重复的数据到右边
|
|
for (let i = 0; i < selectList.value.length; i++) {
|
|
if (selectList.value[i].value === data.value) {
|
|
selectList.value.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
if (checked) {
|
|
// if (data.children === undefined) {
|
|
selectList.value.push(data);
|
|
// }
|
|
} else if (data === "1") {
|
|
tree.value.setCheckedKeys([]);
|
|
selectList.value = [];
|
|
}
|
|
} else {// 左侧有选择框 + 单选
|
|
//不添加重复的数据到右边
|
|
for (let i = 0; i < selectList.value.length; i++) {
|
|
if (selectList.value[i].value === data.value) {
|
|
selectList.value.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
if (checked) {
|
|
tree.value.setCheckedNodes([data]);
|
|
selectList.value = [data];
|
|
} else if (data === "1") {
|
|
selectList.value = [];
|
|
tree.value.setCheckedKeys([]);
|
|
}
|
|
}
|
|
};
|
|
const handle = (node, check) => {
|
|
if (check.isLeaf !== false) {
|
|
if (props.multiple) {
|
|
//不添加重复的数据到右边
|
|
for (let i = 0; i < selectList.value.length; i++) {
|
|
if (selectList.value[i].value === node.value) {
|
|
selectList.value.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
check.checked = true;
|
|
selectList.value.push(node);
|
|
} else {
|
|
check.checked = true;
|
|
selectList.value = [node];
|
|
}
|
|
}
|
|
// _value.value = selectList.value
|
|
};
|
|
const noSelected = (selectItem) => {
|
|
//左侧无选择框时,右侧显示×
|
|
for (let i = 0; i < selectList.value.length; i++) {
|
|
if (selectList.value[i].value === selectItem.value) {
|
|
tree.value.setChecked(selectList.value[i].value, false);
|
|
selectList.value.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
if (props.showCheckbox) {
|
|
// 左侧有选择框 + 单选
|
|
if (props.multiple === false) {
|
|
tree.value.setCheckedKeys([]);
|
|
}
|
|
}
|
|
};
|
|
const clearSelected = () => {
|
|
//清空
|
|
ElMessageBox.confirm("您确定要清空已选中的项?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
}).then(() => {
|
|
if (!props.showCheckbox) {
|
|
selectList.value = [];
|
|
} else {
|
|
handleChange("1");
|
|
}
|
|
});
|
|
};
|
|
const selectConfirm = () => {
|
|
//确定按钮
|
|
emit("ok", selectList.value);
|
|
dataList.value = []
|
|
visible.value = false;
|
|
};
|
|
defineExpose({
|
|
show
|
|
});
|
|
getList()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$containWidth: 480px;
|
|
:deep(.tree) {
|
|
.el-tree-node__content {
|
|
height: 34px;
|
|
|
|
.tree-node {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
//.el-tree-node {
|
|
// .is-leaf + .el-checkbox .el-checkbox__inner {
|
|
// display: inline-block;
|
|
// }
|
|
//
|
|
// .el-checkbox .el-checkbox__inner {
|
|
// display: none;
|
|
// }
|
|
//}
|
|
}
|
|
|
|
.footer {
|
|
float: right;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.picker {
|
|
height: 560px;
|
|
position: relative;
|
|
text-align: left;
|
|
|
|
.candidate {
|
|
position: absolute;
|
|
display: block;
|
|
width: $containWidth;
|
|
height: 100%;
|
|
border: 1px solid #e8e8e8;
|
|
|
|
:deep(.el-input) {
|
|
height: 40px;
|
|
|
|
.el-input__inner, .el-input-group__append {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.selected {
|
|
right: 0;
|
|
top: 0;
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 450px;
|
|
height: 100%;
|
|
border: 1px solid #e8e8e8;
|
|
|
|
.count {
|
|
width: 100%;
|
|
padding: 10px;
|
|
display: inline-block;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
margin-bottom: 5px;
|
|
font-size: 16px;
|
|
|
|
> span:nth-child(2) {
|
|
float: right;
|
|
color: #c75450;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.org-items {
|
|
overflow-y: auto;
|
|
height: 90%;
|
|
|
|
.el-icon-close {
|
|
position: absolute;
|
|
right: 5px;
|
|
cursor: pointer;
|
|
font-size: larger;
|
|
}
|
|
|
|
.org-item {
|
|
margin: 0 5px;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
padding: 7px 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
|
|
&:hover {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
> span {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.el-scrollbar .el-scrollbar__wrap {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
float: right;
|
|
width: 4px;
|
|
height: 4px;
|
|
background-color: white;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 16px;
|
|
background-color: #efefef;
|
|
}
|
|
|
|
</style>
|