test: 1
This commit is contained in:
464
src/components/MyComponents/ChooseDept/Departbm.vue
Normal file
464
src/components/MyComponents/ChooseDept/Departbm.vue
Normal file
@ -0,0 +1,464 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user