465 lines
10 KiB
Vue
465 lines
10 KiB
Vue
<template>
|
||
<!-- 只查部门 -->
|
||
<div>
|
||
<el-dialog title="组织机构选择" width="50%" :close-on-click-modal="false" v-model="props.showDdld" @close="closeDialog"
|
||
:show-close="false">
|
||
<div class="search" v-if="!props.Single">
|
||
<el-input></el-input>
|
||
<el-button type="primary">
|
||
<el-icon>
|
||
<Search />
|
||
</el-icon>
|
||
<span>搜索</span>
|
||
</el-button>
|
||
</div>
|
||
<!-- <el-form :model="listQuery" :rules="rules" label-width="100px" class="demo-ruleForm" :size="formSize" status-icon>
|
||
</el-form> -->
|
||
<!-- 组织机构信息 -->
|
||
<div :class="props.Single ? 'box' : 'box border'">
|
||
<div :class="props.Single ? 'treeBox' : 'treeBox with'">
|
||
<el-tree ref="singleTableRef" class="filter-tree" :props="endProps" node-key="id" accordion
|
||
:default-expanded-keys="treemrData" check-strictly @node-click="nodeClick" :filter-node-method="filterNode"
|
||
@check-change="checkChange" :data="treeData" show-checkbox @check="handleCheck"
|
||
:default-checked-keys="ids" />
|
||
</div>
|
||
<div class="cskbox" v-if="!props.Single">
|
||
<!-- 穿梭按钮 -->
|
||
<el-icon @click="pushRight">
|
||
<DArrowRight />
|
||
</el-icon>
|
||
<el-icon @click="pushLeft">
|
||
<DArrowLeft />
|
||
</el-icon>
|
||
</div>
|
||
|
||
<div class="listbox" v-if="!props.Single">
|
||
<!-- 选中的组员 -->
|
||
<ul>
|
||
<li :class="item.active ? 'activ' : ''" v-for="(item, index) in rightList" :key="item"
|
||
@click="clicklist(item, index)">
|
||
{{ item.orgName }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button type="primary" @click="handleSave">
|
||
<el-icon>
|
||
<DocumentChecked />
|
||
</el-icon>
|
||
<span>确定</span>
|
||
</el-button>
|
||
<el-button type="primary" @click="clearlist" v-if="!props.Single">
|
||
<el-icon>
|
||
<DocumentRemove />
|
||
</el-icon>
|
||
<span>清空</span>
|
||
</el-button>
|
||
<el-button @click="handleClose" type="primary">
|
||
<el-icon>
|
||
<DocumentDelete />
|
||
</el-icon>
|
||
<span>关闭</span>
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 引入
|
||
import {
|
||
defineProps,
|
||
watch,
|
||
onMounted,
|
||
ref,
|
||
defineEmits,
|
||
watchEffect
|
||
} from "vue";
|
||
|
||
import {
|
||
getDept
|
||
} from "@/api/user-manage";
|
||
import { getApi, postApi } from "@/api/tobAcco_api.js";
|
||
import { getItem } from "@/utils/storage";
|
||
const treeData = ref([]); // 树的数据
|
||
const node_had = ref([]);
|
||
const treemrData = ref([]);
|
||
const singleTableRef = ref();
|
||
const rightList = ref([]); //右边列表数据
|
||
const diIndex = ref(); //点击右边列表数据
|
||
const leftList = ref([]); //存放右边被点击的数据
|
||
const currentRow = ref(-1); //选中的数据
|
||
const emits = defineEmits(["closezzjg", "listdata"]);
|
||
const resolve_had = ref([]);
|
||
const props = defineProps({
|
||
showDdld: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
zzlx: String,
|
||
// 单位回显
|
||
formInfo: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
//单选/多选
|
||
Single: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
parentId: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
// orgLevels省部门：11，市部门：21，县部门：31,s市部门-县部门：21，30
|
||
orgLevels: {
|
||
type: String,
|
||
default: ""
|
||
}
|
||
});
|
||
const listQuery = ref({
|
||
orgLevels: '',
|
||
parentId: getItem('deptId').ssdwid
|
||
});
|
||
const ids = ref([])
|
||
watch(
|
||
() => props.showDdld,
|
||
(newVal) => {
|
||
if (newVal) {
|
||
ids.value = []
|
||
currentRow.value = []
|
||
rightList.value = []
|
||
// listQuery.value.parentId = props.parentId;
|
||
listQuery.value.orgLevels = props.orgLevels;
|
||
getTreeData();
|
||
}
|
||
},
|
||
{ deep: true, immediate: true }
|
||
);
|
||
|
||
|
||
|
||
onMounted(() => {
|
||
// getTreeData();
|
||
|
||
});
|
||
watchEffect(() => {
|
||
if (props.orgLevels) {
|
||
listQuery.value.orgLevels = props.orgLevels;
|
||
}
|
||
|
||
})
|
||
const endProps = {
|
||
children: "children",
|
||
value: "id",
|
||
label: "orgName",
|
||
isLeaf: "leaf"
|
||
};
|
||
// 获取部门树的数据
|
||
function getTreeData() {
|
||
// orgLevels省部门：11，市部门：21，县部门：31
|
||
// orgLevels市部门-县部门：21，30
|
||
postApi(listQuery.value, "/mosty-base/deptFeign/getOrgList").then((res) => {
|
||
if (res.length == 1) {
|
||
res.forEach((element) => {
|
||
element.orgname = element.orgName
|
||
treemrData.value.push(element.id);
|
||
emits("getdeptData", element);
|
||
});
|
||
}
|
||
for (let i = 0; i < res.length; i++) {
|
||
res[i].leaf = !res[i].hasChildren;
|
||
}
|
||
if (res.length > 0) {
|
||
treeData.value = res;
|
||
}
|
||
if (props.formInfo && props.formInfo.length > 0) {
|
||
multipleUser(props.formInfo);
|
||
}
|
||
});
|
||
}
|
||
|
||
//懒加载方法
|
||
async function loadNode(node, resolve) {
|
||
listQuery.value.parentid = node.data.id;
|
||
if (node.level === 0) {
|
||
node_had.value = node;
|
||
resolve_had.value = resolve;
|
||
getTreeData();
|
||
}
|
||
if (node.level >= 1) {
|
||
getDept(listQuery.value).then((res) => {
|
||
for (let i = 0; i < res.length; i++) {
|
||
res[i].leaf = !res[i].hasChildren;
|
||
}
|
||
resolve(res);
|
||
});
|
||
}
|
||
}
|
||
const filterNode = (value, data) => {
|
||
if (!value) return true;
|
||
return data.orgName.includes(value);
|
||
};
|
||
//获取复选框中被选中的值
|
||
function handleCheck(data, checkedData) {
|
||
let arr = checkedData.checkedNodes;
|
||
for (let i = 0; i < arr.length; i++) {
|
||
const e = arr[i];
|
||
// if (e.hasChildren == true) {
|
||
// arr.splice(i, 1);
|
||
// }
|
||
}
|
||
currentRow.value = arr;
|
||
// currentRow.value.zzlx = props.zzlx?props.zzlx:null;
|
||
}
|
||
function checkChange(val, checkedData) {
|
||
if (checkedData == true) {
|
||
if (props.Single) {
|
||
currentRow.value = [val]
|
||
treeData.value.forEach((treeVal) => {
|
||
singleTableRef.value.setChecked(treeVal.id, treeVal.id == val.id);
|
||
});
|
||
} else {
|
||
currentRow.value.push(val)
|
||
}
|
||
} else {
|
||
if (currentRow.value && currentRow.value.length > 0) {
|
||
currentRow.value.forEach(el => {
|
||
if (el.id == val.id) {
|
||
currentRow.value.splice(val, 1);
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
function nodeClick(data, checkedData) {
|
||
if (props.Single) {
|
||
singleTableRef.value.setChecked(data, true);
|
||
} else {
|
||
if (currentRow.value && currentRow.value.length > 0) {
|
||
let rowid = []
|
||
rowid = currentRow.value.filter(it => { return it.id == data.id })
|
||
if (rowid.length > 0) {
|
||
singleTableRef.value.setChecked(data.id, false);
|
||
|
||
} else {
|
||
singleTableRef.value.setChecked(data, true);
|
||
}
|
||
|
||
} else {
|
||
singleTableRef.value.setChecked(data, true);
|
||
}
|
||
}
|
||
|
||
}
|
||
//点击右箭头
|
||
function pushRight() {
|
||
rightList.value = currentRow.value;
|
||
}
|
||
//点击左箭头
|
||
function pushLeft() {
|
||
//遍历右边选中的数据
|
||
for (let i = 0; i < leftList.value.length; i++) {
|
||
const e = leftList.value[i];
|
||
if (e.id) {
|
||
singleTableRef.value.setChecked(e.id, false);
|
||
}
|
||
|
||
rightList.value.forEach((item, index) => {
|
||
if (e.id == item.id) {
|
||
rightList.value.splice(index, 1);
|
||
}
|
||
});
|
||
currentRow.value.forEach((item, index) => {
|
||
if (e.id == item.id) {
|
||
currentRow.value.splice(index, 1);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
//点击右边列表的每一项
|
||
function clicklist(item, index) {
|
||
item.active = !item.active;
|
||
diIndex.value = index;
|
||
if (item.active) {
|
||
leftList.value.push(item);
|
||
} else {
|
||
for (let i = 0; i < leftList.value.length; i++) {
|
||
const element = leftList.value[i];
|
||
if (element.id == item.id) {
|
||
leftList.value.splice(i, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// //处理回显问题
|
||
function multipleUser(row) {
|
||
|
||
// 左右清除历史缓存
|
||
rightList.value = []
|
||
ids.value = []
|
||
treeData.value.forEach((val) => {
|
||
singleTableRef.value.setChecked(val.id, false);
|
||
});
|
||
if (row) {
|
||
ids.value = row
|
||
row.forEach((item) => {
|
||
treeData.value.forEach((val) => {
|
||
if (item == val.id) {
|
||
singleTableRef.value.setChecked(val.id, true);
|
||
}
|
||
});
|
||
//获取部门详情
|
||
getApi({}, `/mosty-base/deptFeign/getDeptById/${item}`).then(res => {
|
||
rightList.value.push(res)
|
||
})
|
||
})
|
||
}
|
||
}
|
||
//点击清空列表
|
||
function clearlist() {
|
||
leftList.value = [];
|
||
rightList.value = [];
|
||
ids.value = []
|
||
currentRow.value = [];
|
||
singleTableRef.value.setCheckedKeys([], false);
|
||
}
|
||
const closeDialog = () => {
|
||
emits("closezzjg", false);
|
||
};
|
||
const handleSave = () => {
|
||
// rightList.value.forEach(item=>{
|
||
// item.orgName=item.orgName
|
||
// })
|
||
emits("closezzjg", false);
|
||
if (props.Single) {
|
||
emits("listdata", ...currentRow.value);
|
||
} else {
|
||
emits("listdata", rightList.value);
|
||
}
|
||
|
||
|
||
};
|
||
const handleClose = () => {
|
||
emits("closezzjg", false);
|
||
};
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:v-deep .el-tree-node {
|
||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-overlay-dialog {
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
:v-deep .el-checkbox .el-checkbox__inner {
|
||
display: none;
|
||
}
|
||
|
||
:v-deep .wrap .el-checkbox__input.is-disabled {
|
||
display: none;
|
||
}
|
||
|
||
.el-form {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
// flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.search {
|
||
width: 300px;
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
justify-content: flex-end;
|
||
margin-left: 65%;
|
||
}
|
||
|
||
.el-form-item {
|
||
text-align: center;
|
||
width: 400px;
|
||
}
|
||
|
||
.flx {
|
||
display: flex;
|
||
width: 100%;
|
||
|
||
.el-button {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.box {
|
||
width: 100%;
|
||
height: 400px;
|
||
overflow-y: hidden;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.border {
|
||
border: 1px solid var(--el-color-primary);
|
||
}
|
||
|
||
.treeBox {
|
||
width: 100%;
|
||
overflow: auto;
|
||
}
|
||
|
||
.with {
|
||
width: 50%;
|
||
}
|
||
|
||
.cskbox {
|
||
width: 40px;
|
||
padding: 107px 0;
|
||
|
||
.el-icon {
|
||
width: 4em !important;
|
||
height: 6em !important;
|
||
}
|
||
|
||
.el-icon svg {
|
||
width: 3em !important;
|
||
height: 3em !important;
|
||
}
|
||
}
|
||
|
||
.listbox {
|
||
border: 1px solid var(--el-color-primary);
|
||
width: 300px;
|
||
height: 400px;
|
||
overflow-y: scroll;
|
||
|
||
ul>li {
|
||
padding: 4px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.activ {
|
||
background-color: var(--el-color-primary);
|
||
}
|
||
}
|
||
|
||
.bot_font {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
color: #ffff;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.fenye {
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|