test: 1
This commit is contained in:
409
src/components/MyComponents/ChooseDept/Depart.vue
Normal file
409
src/components/MyComponents/ChooseDept/Depart.vue
Normal file
@ -0,0 +1,409 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="组织机构选择" width="1200px" :close-on-click-modal="false" v-model="props.showDdld" @close="closeDialog"
|
||||
:show-close="false">
|
||||
<!-- <div class="search ww100">
|
||||
<div></div>
|
||||
<div class="flex ">
|
||||
<el-input placeholder="请输入关键词"></el-input>
|
||||
<el-button type="primary">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="box" style="height: 60vh;">
|
||||
<div class="treeBox">
|
||||
<el-tree ref="singleTableRef" class="filter-tree" :props="endProps" node-key="id" accordion
|
||||
:check-strictly="props.Isstrictly" :default-expanded-keys="treemrData" @node-click="nodeClick"
|
||||
:filter-node-method="filterNode" @check-change="checkChange" :data="treeData" show-checkbox
|
||||
@check="handleCheck" :default-checked-keys="ids" />
|
||||
</div>
|
||||
<div class="cskbox">
|
||||
<!-- 穿梭按钮 -->
|
||||
<el-icon @click="pushRight">
|
||||
<DArrowRight />
|
||||
</el-icon>
|
||||
<el-icon @click="pushLeft">
|
||||
<DArrowLeft />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div class="listbox">
|
||||
<!-- 选中的组员 -->
|
||||
<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">
|
||||
<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 } from "@/api/tobAcco_api.js";
|
||||
const treeData = ref([]); // 树的数据
|
||||
const node_had = ref([]);
|
||||
const treemrData = ref([]);
|
||||
const singleTableRef = ref();
|
||||
const rightList = ref([]); //右边列表数据
|
||||
const diIndex = ref(); //点击右边列表数据
|
||||
const leftList = ref([]); //存放右边被点击的数据
|
||||
const resolve_had = ref([]);
|
||||
const props = defineProps({
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zzlx: String,
|
||||
formInfo: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
deptcode: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//是否可选择本级true：可以 false:不可以
|
||||
Isstrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 查询层级 01.查询所有层级(默认) 02.查询所有省、市公司 03.查询所有省、市、县公司
|
||||
searchType: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const listQuery = ref({
|
||||
deptcode: "",
|
||||
parentid: "",
|
||||
type: props.searchType ? props.searchType : null
|
||||
});
|
||||
const ids = ref([])
|
||||
|
||||
|
||||
|
||||
//根据外部传入ID查询部门信息
|
||||
watch(
|
||||
() => props.deptcode,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
listQuery.value.deptcode = newVal;
|
||||
listQuery.value.type = props.searchType;
|
||||
getTreeData();
|
||||
} else {
|
||||
listQuery.value.type = props.searchType;
|
||||
getTreeData();
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const currentRow = ref([]); //选中的数据
|
||||
const emits = defineEmits(["closezzjg", "listdata"]);
|
||||
onMounted(() => {
|
||||
// getTreeData();
|
||||
});
|
||||
watchEffect(() => {
|
||||
if (props.searchType) {
|
||||
listQuery.value.type = props.searchType;
|
||||
}
|
||||
})
|
||||
const endProps = {
|
||||
children: "children",
|
||||
value: "id",
|
||||
label: "orgname",
|
||||
isLeaf: "leaf",
|
||||
disabled: function (data, node) {//带子级的节点不能选中
|
||||
if (!props.Isstrictly && data.children && data.children.length > 0) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
};
|
||||
// 获取部门树的数据
|
||||
function getTreeData() {
|
||||
getApi(listQuery.value, "/mosty-base/deptFeign/getDeptAndJgbm").then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach((element) => {
|
||||
treemrData.value = [element.id]
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = res[i].children.length > 0 ? false : true;
|
||||
}
|
||||
if (res.length > 0) {
|
||||
treeData.value = res;
|
||||
}
|
||||
if (props.formInfo && props.formInfo.length > 0) {
|
||||
ids.value = props.formInfo;
|
||||
treemrData.value = props.formInfo;
|
||||
ids.value.forEach(item => {
|
||||
singleTableRef.value.setChecked(item, true);
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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];
|
||||
}
|
||||
currentRow.value = arr;
|
||||
}
|
||||
function checkChange(val, checkedData) {
|
||||
if (checkedData == true) {
|
||||
if (props.Single) {
|
||||
currentRow.value = [val]
|
||||
} 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 clearlist() {
|
||||
ids.value = []
|
||||
leftList.value = [];
|
||||
treemrData.value = []
|
||||
rightList.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);
|
||||
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 {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.treeBox {
|
||||
width: 50%;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.cskbox {
|
||||
width: 40px;
|
||||
padding: 107px 0;
|
||||
margin-right: 15px;
|
||||
|
||||
.el-icon {
|
||||
width: 4em !important;
|
||||
height: 6em !important;
|
||||
}
|
||||
|
||||
.el-icon svg {
|
||||
width: 3em !important;
|
||||
height: 3em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.listbox {
|
||||
width: 45%;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
|
||||
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>
|
||||
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>
|
||||
485
src/components/MyComponents/ChooseDept/Departnobj.vue
Normal file
485
src/components/MyComponents/ChooseDept/Departnobj.vue
Normal file
@ -0,0 +1,485 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 不含本级 -->
|
||||
<el-dialog title="组织机构部门选择" width="50%" v-model="props.showDdld" @close="closeDialog" :close-on-click-modal="false"
|
||||
:show-close="false">
|
||||
<!-- <div class="search">
|
||||
<el-input style="width: 300px;" placeholder="输入关键字进行过滤"></el-input>
|
||||
<el-button type="primary" class="ml12">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div> -->
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="box">
|
||||
<div class="treeBox">
|
||||
<!-- 使用Element UI的el-tree组件展示树形结构数据，支持多选和操作子节点 -->
|
||||
<el-tree ref="singleTableRef" class="filter-tree" :props="endProps" lazy node-key="id" :load="loadNode"
|
||||
:default-expanded-keys="treemrData" :check-strictly="props.Isstrictly" :filter-node-method="filterNode"
|
||||
@check-change="checkChange" @node-click="nodeClick" :data="treeData" :default-checked-keys="ids">
|
||||
<!-- 自定义节点内容显示方式 -->
|
||||
<template #default="{ node }">
|
||||
<el-checkbox @click.stop :label="node.data.id" v-model="ids" @change="handleCheck(node)">
|
||||
<div @click.stop>
|
||||
{{ node.label
|
||||
}}
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</template>
|
||||
</el-tree>
|
||||
|
||||
</div>
|
||||
<div class="cskbox">
|
||||
<!-- 穿梭按钮 -->
|
||||
<el-icon @click="pushRight">
|
||||
<DArrowRight />
|
||||
</el-icon>
|
||||
<el-icon @click="pushLeft">
|
||||
<DArrowLeft />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div class="listbox">
|
||||
<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">
|
||||
<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, ref, defineEmits } from "vue";
|
||||
import { getDept } from "@/api/user-manage";
|
||||
const singleTableRef = ref();
|
||||
const endProps = {
|
||||
children: "childDeptList",
|
||||
value: "id",
|
||||
label: "orgName",
|
||||
isLeaf: "leaf",
|
||||
disabled: function (data, node) {//带子级的节点不能选中
|
||||
if (!props.Isstrictly && data.children) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
};
|
||||
const treemrData = ref([]);
|
||||
const node_had = ref([]);
|
||||
const resolve_had = ref([]);
|
||||
const treeData = ref([]); // 树的数据
|
||||
const rightList = ref([]); //右边列表数据
|
||||
const diIndex = ref(); //点击右边列表数据
|
||||
const leftList = ref([]); //存放右边被点击的数据
|
||||
const props = defineProps({
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否可选择本级true：可以 false:不可以
|
||||
Isstrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zzlx: String,
|
||||
data: {
|
||||
type: Object,
|
||||
default: []
|
||||
},
|
||||
// 查询层级 01.查询所有层级(默认) 02.查询所有省、市公司 03.查询所有省、市、县公司
|
||||
searchType: {
|
||||
type: String,
|
||||
default: "02"
|
||||
},
|
||||
deptcode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
deptId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
//查询单位下的安全部门
|
||||
isAqbm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const listQuery = ref({
|
||||
deptcode: "",
|
||||
parentid: "",
|
||||
searchType: props.searchType
|
||||
});
|
||||
const currentRow = ref([]); //选中的数据
|
||||
const emits = defineEmits(["closezzjg", "listdata"]);
|
||||
const ids = ref([])
|
||||
const changelist = ref([])
|
||||
//根据外部传入ID查询部门信息
|
||||
watch(
|
||||
() => props.showDdld,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
ids.value = []
|
||||
currentRow.value = []
|
||||
rightList.value = []
|
||||
listQuery.value.parentid = props.deptId
|
||||
listQuery.value.deptcode = props.deptcode;
|
||||
listQuery.value.searchType = props.searchType
|
||||
getTreeData();
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const getTreeData = () => {
|
||||
getDept(listQuery.value).then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach((element) => {
|
||||
treemrData.value.push(element.id);
|
||||
});
|
||||
}
|
||||
|
||||
if (res.length > 0) {
|
||||
treeData.value = res;
|
||||
}
|
||||
if (props.data && props.data.length > 0) {
|
||||
ids.value = props.data
|
||||
treemrData.value = props.data
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = !res[i].hasChildren;
|
||||
res[i].Checked = false;
|
||||
if (ids.value && ids.value.length > 0) {
|
||||
ids.value.forEach(item => {
|
||||
if (item == res[i].id) {
|
||||
res[i].Checked = true;
|
||||
currentRow.value.push(res[i])
|
||||
rightList.value.push(res[i])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data.orgName.includes(value);
|
||||
};
|
||||
//懒加载方法
|
||||
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;
|
||||
res[i].Checked = false;
|
||||
if (ids.value) {
|
||||
ids.value.forEach(item => {
|
||||
if (item == res[i].id) {
|
||||
res[i].Checked = true;
|
||||
currentRow.value.push(res[i])
|
||||
rightList.value.push(res[i])
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const checkChange = (data, isChecked) => {
|
||||
|
||||
};
|
||||
function nodeClick(data, checkedData) {
|
||||
|
||||
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 handleCheck(node, checkedData) {
|
||||
|
||||
node.data.Checked = !node.data.Checked;
|
||||
if (node.data.Checked) {
|
||||
currentRow.value.push(node.data)
|
||||
} else {
|
||||
for (let i = 0; i < currentRow.value.length; i++) {
|
||||
const element = currentRow.value[i];
|
||||
if (element.id == node.data.id) {
|
||||
currentRow.value.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
rightList.value = currentRow.value;
|
||||
}
|
||||
|
||||
//清空
|
||||
function clearlist() {
|
||||
ids.value = []
|
||||
leftList.value = [];
|
||||
// changelist.value = []
|
||||
rightList.value = [];
|
||||
currentRow.value = [];
|
||||
singleTableRef.value.getCheckedNodes().forEach((node) => {
|
||||
node.Checked = false
|
||||
})
|
||||
}
|
||||
|
||||
//点击右箭头
|
||||
function pushRight() {
|
||||
rightList.value = currentRow.value;
|
||||
|
||||
// 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.getCheckedNodes().forEach((node) => {
|
||||
if (e.id == node.id) {
|
||||
node.Checked = false
|
||||
}
|
||||
})
|
||||
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);
|
||||
}
|
||||
});
|
||||
ids.value.forEach((item, index) => {
|
||||
if (e.id == item) {
|
||||
ids.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleNodeClick = (value) => {
|
||||
listQuery.value.deptId = value[value.length - 1];
|
||||
};
|
||||
|
||||
|
||||
const closeDialog = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
const handleSave = () => {
|
||||
emits("closezzjg", false);
|
||||
emits("listdata", rightList.value);
|
||||
clearlist()
|
||||
};
|
||||
const handleClose = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
</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;
|
||||
// }
|
||||
// ::v-deep .is-leaf+.el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
// display: inline-block !important;
|
||||
// }
|
||||
// ::v-deep .el-tree-node__content .el-tree-node__expand-icon{
|
||||
// display: black ;
|
||||
// }
|
||||
|
||||
|
||||
// ::v-deep .el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// }
|
||||
|
||||
// :v-deep .el-tree-node {
|
||||
// .el-checkbox .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// background: red !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// :v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
::v-deep .el-tree-node__expand-icon {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.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;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.treeBox {
|
||||
width: 50%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.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);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
335
src/components/MyComponents/ChooseDept/dwhasbj.vue
Normal file
335
src/components/MyComponents/ChooseDept/dwhasbj.vue
Normal file
@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="组织机构部门选择" width="50%" v-model="props.showDdld" @close="closeDialog" :close-on-click-modal="false"
|
||||
:show-close="false">
|
||||
<div class="search">
|
||||
<el-input></el-input>
|
||||
<el-button type="primary">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="box">
|
||||
<div class="treeBox">
|
||||
<el-tree ref="singleTableRef" :data="treeData" :props="endProps" @node-click="handleNodeClicks" node-key="id"
|
||||
show-checkbox @check-change="checkChange" :check-strictly="props.Isstrictly" @check="handleCheck"
|
||||
:default-expanded-keys="treemrData" :default-checked-keys="[id]" />
|
||||
</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">
|
||||
<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,
|
||||
reactive,
|
||||
watch,
|
||||
onMounted,
|
||||
ref,
|
||||
defineEmits,
|
||||
onBeforeUnmount,
|
||||
watchEffect
|
||||
} from "vue";
|
||||
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
|
||||
import { getDept } from "@/api/user-manage";
|
||||
const singleTableRef = ref();
|
||||
const endProps = {
|
||||
children: "children",
|
||||
value: "id",
|
||||
label: "orgname",
|
||||
isLeaf: "leaf",
|
||||
disabled: function (data, node) {//带子级的节点不能选中
|
||||
if (!props.Isstrictly && data.children) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
const treemrData = ref([]);
|
||||
const node_had = ref([]);
|
||||
const resolve_had = ref([]);
|
||||
const treeData = ref([]); // 树的数据
|
||||
const props = defineProps({
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否可选择本级true：可以 false:不可以
|
||||
Isstrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zzlx: String,
|
||||
formInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
// 查询层级 01.查询所有层级(默认) 02.查询所有省、市公司 03.查询所有省、市、县公司
|
||||
searchType: {
|
||||
type: String,
|
||||
default: "02"
|
||||
},
|
||||
// 查询当前部门下的人员
|
||||
deptId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
//查询单位下的安全部门
|
||||
isAqbm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const listQuery = ref({
|
||||
|
||||
type: props.searchType
|
||||
});
|
||||
const treemrs = ref(null);
|
||||
const currentRow = ref(-1); //选中的数据
|
||||
const emits = defineEmits(["closezzjg", "listdata"]);
|
||||
onMounted(() => {
|
||||
// getTreeData()
|
||||
if (props.showDdld) {
|
||||
listQuery.value.type = props.searchType
|
||||
getTreeData()
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
// clearTimeout(treemrs.value)
|
||||
treemrs.value = null
|
||||
})
|
||||
// watch(
|
||||
// () => props.searchType,
|
||||
// (val) => {
|
||||
// listQuery.value.type = val
|
||||
// getTreeData()
|
||||
// }
|
||||
// )
|
||||
|
||||
watch(
|
||||
() => props.showDdld,
|
||||
(val) => {
|
||||
if (val == true) {
|
||||
listQuery.value.type = props.searchType
|
||||
getTreeData()
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 获取部门树的数据
|
||||
const getTreeData = () => {
|
||||
|
||||
treeData.value = []
|
||||
treemrData.value = []
|
||||
getApi(listQuery.value, "/mosty-base/deptFeign/getDeptAndJgbm").then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach((element) => {
|
||||
// treemrs.value = setTimeout(() => { singleTableRef.value.setCurrentKey(element.id) }, 200)
|
||||
// treemrData.value.push(element.id);
|
||||
treemrData.value = [element.id]
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = res[i].children.length > 0 ? false : true;
|
||||
}
|
||||
if (res.length > 0) treeData.value = res;
|
||||
});
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data.orgname.includes(value);
|
||||
};
|
||||
};
|
||||
|
||||
//懒加载方法
|
||||
async function loadNode(node, resolve) {
|
||||
// listQuery.value.parentid = node.data.id ? node.data.id : props.deptId;
|
||||
if (node.level === 0) {
|
||||
node_had.value = node;
|
||||
resolve_had.value = resolve;
|
||||
getTreeData();
|
||||
}
|
||||
if (node.level >= 1) {
|
||||
getApi(listQuery.value, "/mosty-base/deptFeign/getDeptAndJgbm").then((res) => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = res[i].children ? false : true;
|
||||
}
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const checkChange = (data, isChecked) => {
|
||||
if (isChecked) {
|
||||
const checked = [data.id]; // id为tree的node-key属性
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
}
|
||||
};
|
||||
function handleNodeClicks(node, checkedData) {
|
||||
if (!props.Isstrictly && node.hasChildren) {
|
||||
return
|
||||
} else {
|
||||
const checked = [node.id]; // id为tree的node-key属性
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
currentRow.value = node;
|
||||
}
|
||||
|
||||
}
|
||||
//获取复选框中被选中的值
|
||||
function handleCheck(data, checkedData) {
|
||||
// 这是选中的节点数组
|
||||
currentRow.value = checkedData.checkedNodes[0];
|
||||
// currentRow.value.zzlx = props.zzlx?props.zzlx:null;
|
||||
}
|
||||
|
||||
//清空
|
||||
function clearlist() {
|
||||
id.value = null
|
||||
currentRow.value = [];
|
||||
singleTableRef.value.setCheckedKeys([], false);
|
||||
}
|
||||
|
||||
const handleNodeClick = (value) => {
|
||||
listQuery.value.deptId = value[value.length - 1];
|
||||
};
|
||||
const id = ref("");
|
||||
watch(
|
||||
() => [props.formInfo, props.zzlx],
|
||||
(val) => {
|
||||
if (props.zzlx == "01") {
|
||||
id.value = props.formInfo.leaderid;
|
||||
} else {
|
||||
id.value = props.formInfo.zzid ? props.formInfo.zzid : null;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const closeDialog = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
const handleSave = () => {
|
||||
currentRow.value.orgName = currentRow.value.orgname
|
||||
emits("closezzjg", false);
|
||||
emits("listdata", currentRow.value);
|
||||
clearlist()
|
||||
};
|
||||
const handleClose = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
// // 表格多选
|
||||
// const handleSelectionChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// };
|
||||
// //选中
|
||||
// const handleCurrentChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// currentRow.value.zzlx = props.zzlx;
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .is-leaf+.el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content .el-tree-node__expand-icon {
|
||||
display: black;
|
||||
}
|
||||
|
||||
// ::v-deep .el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// }
|
||||
|
||||
// :v-deep .el-tree-node {
|
||||
// .el-checkbox .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// background: red !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// :v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// ::v-deep .el-tree-node__expand-icon {
|
||||
// display: block !important;
|
||||
// }
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.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: scroll;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
margin-left: 65%;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
404
src/components/MyComponents/ChooseDept/dwhasbjMult.vue
Normal file
404
src/components/MyComponents/ChooseDept/dwhasbjMult.vue
Normal file
@ -0,0 +1,404 @@
|
||||
<template>
|
||||
<!-- 查询单位包含本级（多选） -->
|
||||
<div>
|
||||
<el-dialog title="组织机构部门选择" width="50%" v-model="props.showDdld" @close="closeDialog" :close-on-click-modal="false"
|
||||
:show-close="false">
|
||||
<div class="search">
|
||||
<el-input style="max-width: 400px;"></el-input>
|
||||
<el-button type="primary" style="margin-left: 10px;">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="box">
|
||||
<div class="treeBox">
|
||||
<el-tree ref="singleTableRef" :data="treeData" :props="endProps" @node-click="handleNodeClicks" node-key="id"
|
||||
show-checkbox @check-change="checkChange" :check-strictly="props.Isstrictly" @check="handleCheck"
|
||||
:default-expanded-keys="treemrData" :default-checked-keys="checkedKeys" />
|
||||
</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(true)">
|
||||
<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,
|
||||
reactive,
|
||||
watch,
|
||||
onMounted,
|
||||
ref,
|
||||
defineEmits,
|
||||
onBeforeUnmount,
|
||||
watchEffect,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
|
||||
import { getDept } from "@/api/user-manage";
|
||||
const singleTableRef = ref();
|
||||
const endProps = {
|
||||
children: "children",
|
||||
value: "id",
|
||||
label: "orgname",
|
||||
isLeaf: "leaf",
|
||||
disabled: function(data, node) {//带子级的节点不能选中
|
||||
if (!props.Isstrictly && data.children) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
const treemrData = ref([]);
|
||||
/** 选择的ids */
|
||||
const checkedKeys = ref([])
|
||||
const node_had = ref([]);
|
||||
const resolve_had = ref([]);
|
||||
const treeData = ref([]); // 树的数据
|
||||
const props = defineProps({
|
||||
/** 选择的数据 */
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否可选择本级true：可以 false:不可以
|
||||
Isstrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zzlx: String,
|
||||
formInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
// 查询层级 01.查询所有层级(默认) 02.查询所有省、市公司 03.查询所有省、市、县公司
|
||||
searchType: {
|
||||
type: String,
|
||||
default: "02"
|
||||
},
|
||||
// 查询当前部门下的人员
|
||||
deptId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
//查询单位下的安全部门
|
||||
isAqbm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isMult: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/** 选择的数据 */
|
||||
// selectData: {
|
||||
// type: Array,
|
||||
// default: []
|
||||
// }
|
||||
});
|
||||
const listQuery = ref({
|
||||
|
||||
type: props.searchType
|
||||
});
|
||||
const treemrs = ref(null);
|
||||
const currentRow = ref(-1); //选中的数据
|
||||
const checkedData = ref([])
|
||||
/** 选中的多个id */
|
||||
const checkedIds = ref([])
|
||||
/** 曾选中的对象 方便找数据用 */
|
||||
const checkObj = ref({})
|
||||
const emits = defineEmits(["closezzjg", "listdata", "update:modelValue"]);
|
||||
onMounted(() => {
|
||||
// getTreeData()
|
||||
if (props.showDdld) {
|
||||
listQuery.value.type = props.searchType
|
||||
getTreeData()
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
// clearTimeout(treemrs.value)
|
||||
treemrs.value = null
|
||||
})
|
||||
// watch(
|
||||
// () => props.searchType,
|
||||
// (val) => {
|
||||
// listQuery.value.type = val
|
||||
// getTreeData()
|
||||
// }
|
||||
// )
|
||||
|
||||
watch(
|
||||
() => props.showDdld,
|
||||
(val) => {
|
||||
if (val == true) {
|
||||
listQuery.value.type = props.searchType
|
||||
getTreeData()
|
||||
// checkedData.value = props.selectData
|
||||
nextTick(() => {
|
||||
if (props.isMult) {
|
||||
singleTableRef.value.setCheckedKeys(props.modelValue)
|
||||
checkedIds.value = props.modelValue
|
||||
}
|
||||
// checkedKeys.value = props.modelValue
|
||||
})
|
||||
//
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 获取部门树的数据
|
||||
const getTreeData = () => {
|
||||
|
||||
treeData.value = []
|
||||
treemrData.value = []
|
||||
getApi(listQuery.value, "/mosty-base/deptFeign/getDeptAndJgbm").then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach((element) => {
|
||||
// treemrs.value = setTimeout(() => { singleTableRef.value.setCurrentKey(element.id) }, 200)
|
||||
// treemrData.value.push(element.id);
|
||||
treemrData.value = [element.id]
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = res[i].children.length > 0 ? false : true;
|
||||
}
|
||||
if (res.length > 0) treeData.value = res;
|
||||
});
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data.orgname.includes(value);
|
||||
};
|
||||
};
|
||||
|
||||
//懒加载方法
|
||||
async function loadNode(node, resolve) {
|
||||
// listQuery.value.parentid = node.data.id ? node.data.id : props.deptId;
|
||||
if (node.level === 0) {
|
||||
node_had.value = node;
|
||||
resolve_had.value = resolve;
|
||||
getTreeData();
|
||||
}
|
||||
if (node.level >= 1) {
|
||||
getApi(listQuery.value, "/mosty-base/deptFeign/getDeptAndJgbm").then((res) => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = res[i].children ? false : true;
|
||||
}
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const checkChange = (data, isChecked) => {
|
||||
checkObj.value[data.id] = {
|
||||
id: data.id,
|
||||
orgName: data.orgname, // 名称
|
||||
orgCode: data.orgcode, // 编码
|
||||
orgLevel: data.orglevel, // 级别
|
||||
parentid: data.parentid // 上级id
|
||||
};
|
||||
}
|
||||
//获取复选框中被选中的值
|
||||
function handleCheck(data, checkedData) {
|
||||
// 这是选中的节点数组
|
||||
currentRow.value = checkedData.checkedNodes[0];
|
||||
// currentRow.value.zzlx = props.zzlx?props.zzlx:null;
|
||||
if (props.isMult) {
|
||||
checkedIds.value = checkedData.checkedKeys; // checkedKeys
|
||||
|
||||
const arr = [...checkedData.checkedKeys]
|
||||
emits("update:modelValue", arr)
|
||||
}
|
||||
|
||||
}
|
||||
const handleNodeClicks = (node) => {
|
||||
if (!props.Isstrictly && node.hasChildren) {
|
||||
return
|
||||
} else {
|
||||
const checked = [node.id]; // id为tree的node-key属性
|
||||
if (props.isMult) {
|
||||
checkedIds.value = [node.id];
|
||||
emits("update:modelValue", checkedIds.value)
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
} else {
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
currentRow.value = node;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 清空
|
||||
* @param {Boolean} isBtn 是否是点击按钮清空
|
||||
*/
|
||||
function clearlist(isBtn) {
|
||||
id.value = null
|
||||
currentRow.value = [];
|
||||
singleTableRef.value.setCheckedKeys([], false);
|
||||
if (props.isMult) {
|
||||
checkedIds.value = [];
|
||||
if(isBtn) emits("update:modelValue", checkedIds.value)
|
||||
}
|
||||
}
|
||||
|
||||
const handleNodeClick = (value) => {
|
||||
listQuery.value.deptId = value[value.length - 1];
|
||||
};
|
||||
const id = ref("");
|
||||
watch(
|
||||
() => [props.formInfo, props.zzlx],
|
||||
(val) => {
|
||||
if (props.zzlx == "01") {
|
||||
id.value = props.formInfo.leaderid;
|
||||
} else {
|
||||
id.value = props.formInfo.zzid ? props.formInfo.zzid : null;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const closeDialog = () => {
|
||||
emits("closezzjg", false);
|
||||
// clearlist()
|
||||
};
|
||||
/** 根据ids找数据数组 */
|
||||
const findData = (ids) => {
|
||||
let arr = []
|
||||
ids.forEach(item => {
|
||||
arr.push(checkObj.value[item])
|
||||
})
|
||||
return arr
|
||||
}
|
||||
const handleSave = () => {
|
||||
// currentRow.value.orgName = currentRow.value.orgname
|
||||
emits("closezzjg", false);
|
||||
if (props.isMult) {
|
||||
let data = findData(checkedIds.value)
|
||||
emits("listdata", data);
|
||||
} else {
|
||||
emits("listdata", currentRow.value);
|
||||
}
|
||||
clearlist()
|
||||
};
|
||||
const handleClose = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
// // 表格多选
|
||||
// const handleSelectionChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// };
|
||||
// //选中
|
||||
// const handleCurrentChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// currentRow.value.zzlx = props.zzlx;
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .is-leaf+.el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content .el-tree-node__expand-icon {
|
||||
display: black;
|
||||
}
|
||||
|
||||
// ::v-deep .el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// }
|
||||
|
||||
// :v-deep .el-tree-node {
|
||||
// .el-checkbox .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// background: red !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// :v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// ::v-deep .el-tree-node__expand-icon {
|
||||
// display: block !important;
|
||||
// }
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.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: scroll;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search {
|
||||
//width: 300px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
// margin-left: 65%;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
311
src/components/MyComponents/ChooseDept/index.vue
Normal file
311
src/components/MyComponents/ChooseDept/index.vue
Normal file
@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="组织机构部门选择" width="50%" v-model="props.showDdld" @close="closeDialog" :close-on-click-modal="false"
|
||||
:show-close="false">
|
||||
<!-- <div class="search">
|
||||
<el-input></el-input>
|
||||
<el-button type="primary">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div> -->
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="box">
|
||||
<div class="treeBox">
|
||||
<el-tree ref="singleTableRef" :data="treeData" :props="endProps" @node-click="handleNodeClicks" node-key="id"
|
||||
show-checkbox @check-change="checkChange" :load="loadNode" :check-strictly="props.Isstrictly"
|
||||
@check="handleCheck" lazy :default-expanded-keys="treemrData" :default-checked-keys="[id]" />
|
||||
</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">
|
||||
<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";
|
||||
const singleTableRef = ref();
|
||||
const endProps = {
|
||||
children: "childDeptList",
|
||||
value: "id",
|
||||
label: "orgName",
|
||||
isLeaf: "leaf",
|
||||
disabled: function (data, node) {//带子级的节点不能选中
|
||||
if (!props.Isstrictly && data.hasChildren) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
const treemrData = ref([]);
|
||||
const node_had = ref([]);
|
||||
const resolve_had = ref([]);
|
||||
const treeData = ref([]); // 树的数据
|
||||
const props = defineProps({
|
||||
/** 是否显示弹框 el-dialog原生show */
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否可选择本级true：可以 false:不可以
|
||||
Isstrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zzlx: String,
|
||||
/** 单选回显数据 zzlx:01时 formInfo.leaderid, 否则 formInfo.zzid */
|
||||
formInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
/** @type { String } 01 部门（默认），02单位(省、市) 03 单位(省、市、县) */
|
||||
searchType: {
|
||||
type: String,
|
||||
default: "01"
|
||||
},
|
||||
// 查询当前部门下的人员
|
||||
deptId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
//查询单位下的安全部门
|
||||
isAqbm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const listQuery = ref({
|
||||
deptcode: "",
|
||||
parentid: "",
|
||||
searchType: props.searchType
|
||||
});
|
||||
const currentRow = ref(-1); //选中的数据
|
||||
const emits = defineEmits(["closezzjg", "listdata"]);
|
||||
const id = ref("");
|
||||
watch(
|
||||
() => [props.formInfo, props.zzlx],
|
||||
(val) => {
|
||||
if (props.zzlx == "01") {
|
||||
id.value = props.formInfo.leaderid;
|
||||
} else {
|
||||
id.value = props.formInfo.zzid ? props.formInfo.zzid : null;
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.searchType,
|
||||
(val) => {
|
||||
listQuery.value.searchType = val
|
||||
listQuery.value.parentid = props.deptId ? props.deptId.replace("XN", "") : '';
|
||||
getTreeData()
|
||||
}
|
||||
)
|
||||
//回调显示懒加载得部门
|
||||
watch(
|
||||
() => props.showDdld,
|
||||
(val) => {
|
||||
if (val) {
|
||||
listQuery.value.parentid = props.deptId ? props.deptId.replace("XN", "") : '';
|
||||
getTreeData()
|
||||
}
|
||||
}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
// 获取部门树的数据
|
||||
function getTreeData() {
|
||||
getDept(listQuery.value).then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach((element) => {
|
||||
treemrData.value.push(element.id);
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = !res[i].hasChildren;
|
||||
}
|
||||
if (res.length > 0) treeData.value = res;
|
||||
|
||||
});
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data.orgName.includes(value);
|
||||
};
|
||||
};
|
||||
//懒加载方法
|
||||
async function loadNode(node, resolve) {
|
||||
listQuery.value.parentid = node.data.id ? node.data.id : props.deptId;
|
||||
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 checkChange = (data, isChecked) => {
|
||||
if (isChecked) {
|
||||
const checked = [data.id]; // id为tree的node-key属性
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
}
|
||||
};
|
||||
function handleNodeClicks(node, checkedData) {
|
||||
if (!props.Isstrictly && node.hasChildren) {
|
||||
return
|
||||
} else {
|
||||
const checked = [node.id]; // id为tree的node-key属性
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
currentRow.value = node;
|
||||
}
|
||||
|
||||
}
|
||||
// //获取复选框中被选中的值
|
||||
function handleCheck(data, checkedData) {
|
||||
// 这是选中的节点数组
|
||||
currentRow.value = checkedData.checkedNodes[0];
|
||||
// currentRow.value.zzlx = props.zzlx?props.zzlx:null;
|
||||
}
|
||||
|
||||
//清空
|
||||
function clearlist() {
|
||||
currentRow.value = [];
|
||||
id.value = null
|
||||
singleTableRef.value.setCheckedKeys([], false);
|
||||
}
|
||||
|
||||
const handleNodeClick = (value) => {
|
||||
listQuery.value.deptId = value[value.length - 1];
|
||||
};
|
||||
|
||||
|
||||
const closeDialog = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
const handleSave = () => {
|
||||
emits("closezzjg", false);
|
||||
emits("listdata", currentRow.value);
|
||||
clearlist()
|
||||
};
|
||||
const handleClose = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
// // 表格多选
|
||||
// const handleSelectionChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// };
|
||||
// //选中
|
||||
// const handleCurrentChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// currentRow.value.zzlx = props.zzlx;
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .is-leaf+.el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
// ::v-deep .el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// }
|
||||
|
||||
:v-deep .el-tree-node {
|
||||
.el-checkbox .el-checkbox__inner {
|
||||
display: none !important;
|
||||
background: red !important;
|
||||
}
|
||||
}
|
||||
|
||||
// :v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// ::v-deep .el-tree-node__expand-icon {
|
||||
// display: block !important;
|
||||
// }
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.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: scroll;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
margin-left: 65%;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user