You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
356 lines
9.4 KiB
356 lines
9.4 KiB
7 months ago
|
<template>
|
||
|
|
<div v-if="visible" class="van-overlay"></div>
|
||
|
|
<div v-if="visible" class="popup">
|
||
|
|
<div class="popup-title">部门查询</div>
|
||
|
|
<!-- 返回按钮 -->
|
||
|
|
<label class="btn-goback"><van-icon name="arrow-left" @click="next"/></label>
|
||
|
|
<!-- 关闭按钮 -->
|
||
|
|
<label class="close-button" @click="closePopup"></label>
|
||
|
|
|
||
|
|
<!-- 弹窗的内容 -->
|
||
|
|
<div class="popup-content">
|
||
|
|
<div class="subsearch">
|
||
|
|
<input class="searchbox" v-model="searchParam.deptName" placeholder="请输入部门名称"/>
|
||
|
|
<van-icon class="ibtn-reset" name="clear" @click="cancel()" title="重置"/>
|
||
|
|
<!-- <button class='btn-search' @click="queryUserList()">搜索</button> -->
|
||
|
|
<button class='btn-search' @click="queryList()">搜索</button>
|
||
|
|
<button class='btn-search' @click="selectData()">确定</button>
|
||
|
|
</div>
|
||
|
|
<div class="search-result">
|
||
|
|
<van-checkbox-group v-model="checked">
|
||
|
|
<van-cell-group inset>
|
||
|
|
<van-cell v-for="(item, index) in data.deptInList" :key="index">
|
||
|
|
<div style="display: flex; justify-content: space-between;">
|
||
|
|
<div @click="toggle(item.deptId)">
|
||
|
|
<van-checkbox :name="item.deptId+';-;'+item.deptName" :ref="el => checkboxRefs[item.deptId] = el" @click.stop>
|
||
|
|
{{item.deptName}}
|
||
|
|
</van-checkbox>
|
||
|
|
</div>
|
||
|
|
<!-- <div>
|
||
|
|
<van-button
|
||
|
|
type="primary"
|
||
|
|
size="mini"
|
||
|
|
icon="add-o"
|
||
|
|
@click="toDrill(item.deptId, item.parentId)"
|
||
|
|
>展开</van-button>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</van-cell>
|
||
|
|
</van-cell-group>
|
||
|
|
</van-checkbox-group>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {queryDepts, nextDeptByparentId, queryUsersNoPermission} from '@/api/user'
|
||
|
|
import {Icon, showSuccessToast,showToast } from 'vant';
|
||
|
|
import {ref,defineEmits,getCurrentInstance,defineProps, reactive } from 'vue';
|
||
|
|
const {useCommon} = $globalStore
|
||
|
|
const emits = defineEmits(['reciveData','close']);
|
||
|
|
const router = useRouter();
|
||
|
|
const props = defineProps({
|
||
|
|
visible: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
deptList: {
|
||
|
|
type: Array,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const data = reactive({
|
||
|
|
deptInList: []
|
||
|
|
})
|
||
|
|
const searchParam = reactive( {
|
||
|
|
//搜索框
|
||
|
|
dataScopeId: useCommon.userId,
|
||
|
|
deptName: '',
|
||
|
|
parentId: '',
|
||
|
|
})
|
||
|
|
const searchKey = "";
|
||
|
|
const dataList = [];
|
||
|
|
const checked = ref([])
|
||
|
|
const checkboxRefs = ref([]);
|
||
|
|
const nextParentId = '0'
|
||
|
|
const userList = []
|
||
|
|
|
||
|
|
onMounted(() =>{
|
||
|
|
console.log(props?.deptList);
|
||
|
|
|
||
|
|
})
|
||
|
|
const toggle = (index) => {
|
||
|
|
checkboxRefs[index].toggle();
|
||
|
|
}
|
||
|
|
const toDrill = (deptId, parentId) => {
|
||
|
|
nextParentId = parentId;
|
||
|
|
searchParam.parentId = deptId;
|
||
|
|
queryList();
|
||
|
|
}
|
||
|
|
const next = () =>{
|
||
|
|
if (null != nextParentId) {
|
||
|
|
searchParam.parentId = nextParentId;
|
||
|
|
nextDeptByparentId(searchParam, success => {
|
||
|
|
nextParentId = success.data.parentId;
|
||
|
|
queryList();
|
||
|
|
}, error => {
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const closePopup = () =>{
|
||
|
|
emits('close');
|
||
|
|
}
|
||
|
|
const queryList = () =>{
|
||
|
|
if (null == searchParam.deptName || "" == searchParam.deptName) {
|
||
|
|
showSuccessToast('部门过多, 请输入关键字!');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
queryDepts(searchParam, success => {
|
||
|
|
if (null != success.data && success.data.length > 0) {
|
||
|
|
data.deptInList = [];
|
||
|
|
data.deptInList = success.data
|
||
|
|
} else {
|
||
|
|
showToast ("暂无数据！")
|
||
|
|
}
|
||
|
|
}, error => {
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const queryUserList = ()=> {
|
||
|
|
if (null == searchKey || "" == searchKey) {
|
||
|
|
showSuccessToast('人员过多, 请输入关键字!');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
queryUsersNoPermission({"userName": searchKey}, success => {
|
||
|
|
userList = [];
|
||
|
|
userList = success.data;
|
||
|
|
}, error => {
|
||
|
|
});
|
||
|
|
}
|
||
|
|
const cancel = () => {
|
||
|
|
searchParam.deptName = '';
|
||
|
|
queryList()
|
||
|
|
}
|
||
|
|
const selectData = () => {
|
||
|
|
const res = ref([]);
|
||
|
|
let checkeds = JSON.parse(JSON.stringify(checked.value));
|
||
|
|
for (var i=0; i<checkeds.length; i++) {
|
||
|
|
var item = checkeds[i].split(";-;");
|
||
|
|
res.value.push({"deptId":item[0], "deptName":item[1]});
|
||
|
|
}
|
||
|
|
emits("reciveData", res.value);
|
||
|
|
emits('close');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.popup {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 999;
|
||
|
|
top: 3rem;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 3rem);
|
||
|
|
background: #fff;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-title {
|
||
|
|
margin: 0.3rem 0 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 1rem;
|
||
|
|
border-bottom: 1px solid #f3f4f5;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 0.42rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-goback {
|
||
|
|
position: absolute;
|
||
|
|
top: 0.267rem;
|
||
|
|
left: 0.3rem;
|
||
|
|
width: 0.8rem;
|
||
|
|
height: 0.8rem;
|
||
|
|
font-size: 0.5rem;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.close-button {
|
||
|
|
position: absolute;
|
||
|
|
top: 0.15rem;
|
||
|
|
right: 0.1rem;
|
||
|
|
width: 0.8rem;
|
||
|
|
height: 0.8rem;
|
||
|
|
background-color: rgba(255, 255, 255, .5);
|
||
|
|
border: 0.05rem solid rgba(255, 255, 255, .7);
|
||
|
|
border-radius: 50%;
|
||
|
|
transform: rotate(45deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.close-button:before,
|
||
|
|
.close-button:after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
background: #333;
|
||
|
|
border-radius: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
height: 0.4rem;
|
||
|
|
width: 0.02rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.close-button:after {
|
||
|
|
height: 0.02rem;
|
||
|
|
width: 0.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-content {
|
||
|
|
margin: 0.25rem 0;
|
||
|
|
padding-bottom: 3rem;
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 1.6rem);
|
||
|
|
overflow-y: auto;
|
||
|
|
font-size: 0.37rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subsearch {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 1% 0.43rem 3%;
|
||
|
|
width: calc(100% - 0.86rem);
|
||
|
|
height: 1.25rem;
|
||
|
|
font-size: 0.37rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subsearch .ibtn-reset {
|
||
|
|
margin: 0 0.5rem 0 -1rem;
|
||
|
|
width: 1rem;
|
||
|
|
color: #cfcbcb;
|
||
|
|
font-size: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subsearch .btn-search {
|
||
|
|
margin: 0 0.8rem 0 -0.2rem;
|
||
|
|
width: 20%;
|
||
|
|
height: 1rem;
|
||
|
|
background: #eeeff1 url(/src/assets/images/icon_sou.png) no-repeat;
|
||
|
|
background-position: left 0.3rem center;
|
||
|
|
background-size: auto 50%;
|
||
|
|
border-radius: 0 0.15rem 0.15rem 0;
|
||
|
|
border: 1px solid rgba(0, 0, 0, .1);
|
||
|
|
border-left: 1px solid #eee;
|
||
|
|
line-height: 10rem;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subsearch .btn-search:last-child {
|
||
|
|
margin-right: 0;
|
||
|
|
border-radius: 0.15rem;
|
||
|
|
background: #1367fe;
|
||
|
|
border-color: #1367fe;
|
||
|
|
color: #fff;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.searchbox {
|
||
|
|
margin: 2% 0;
|
||
|
|
padding: 0.1rem 1.2rem 0.1rem 0.3rem;
|
||
|
|
width: 100%;
|
||
|
|
height: 1rem;
|
||
|
|
/*background: #f6f7fe url(../../assets/images/icon_sou.png) no-repeat;
|
||
|
|
background-position: left 0.25rem center;
|
||
|
|
background-size: auto 50%;*/
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: 1px solid rgba(0, 0, 0, .1);
|
||
|
|
border-radius: 0.15rem 0 0 0.15rem;
|
||
|
|
color: #999999;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle {
|
||
|
|
margin: 0.5rem 0 0.25rem;
|
||
|
|
font-size: 0.4rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.quick-item {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.quick-item span {
|
||
|
|
display: inline-block;
|
||
|
|
margin: 1% 0 2% 3.5%;
|
||
|
|
padding: 2% 3.75%;
|
||
|
|
background: #f2f3f4;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 8px;
|
||
|
|
color: #4c4c4c;
|
||
|
|
}
|
||
|
|
|
||
|
|
.quick-item span.seled {
|
||
|
|
background: #e9f2fb;
|
||
|
|
color: #1367fe;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btnbox {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
margin: 5% 2%;
|
||
|
|
width: 96%;
|
||
|
|
height: 1.0rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-reset,
|
||
|
|
.btn-search {
|
||
|
|
display: inline-block;
|
||
|
|
margin: 0 2%;
|
||
|
|
padding: 0;
|
||
|
|
width: 60%;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 0.37rem;
|
||
|
|
border-radius: 1rem;
|
||
|
|
background: #1367fe;
|
||
|
|
border: 1px solid #1367fe;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-reset {
|
||
|
|
width: 35%;
|
||
|
|
background-color: #fff;
|
||
|
|
border-color: rgba(19, 103, 254, .7);
|
||
|
|
color: #1367fe;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-result {
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 3rem);
|
||
|
|
padding-bottom: 1rem;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.case-item {
|
||
|
|
margin: 3% 2%;
|
||
|
|
padding: 2% 0;
|
||
|
|
width: 96%;
|
||
|
|
font-size: 0.35rem;
|
||
|
|
border-bottom: 1px solid #f4f4f4;
|
||
|
|
color: #999;
|
||
|
|
line-height: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.case-title {
|
||
|
|
margin: 2% 0;
|
||
|
|
font-size: 0.42rem;
|
||
|
|
color: #333;
|
||
|
|
line-height: 1.25;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|