odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : 修复人员选择框

Browse Source
This commit is contained in:
odjbin
2024-05-22 23:52:51 +08:00
parent 6ab0c206c4
commit 96d46e6480
2 changed files with 73 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/workflow/process-user.js
View File

@@ -22,3 +22,10 @@ export function getDepartmentTree() {
method: 'get'
})
}
export function getMosrDept(params) {
return request({
url: '/admin/mosr/user/choose',
method: 'get',
params:params
})
}

113
src/views/workflow/process/common/UserPicker.vue
View File

@@ -5,19 +5,15 @@
<div>
<div class="picker">
<div class="candidate" v-loading="loading">
<div style="padding: 5px 8px;">
<el-input v-model="filterText" style="width: 100%;" size="small"
clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
<div style="margin-top: 5px">
<el-radio-group v-model="radio" size="mini" @change="radioChange">
<el-radio-button :label="0">角色</el-radio-button>
<el-radio-button :label="1">部门</el-radio-button>
</el-radio-group>
</div>
</div>
<el-input v-model="filterText" @change="getList(1)"
clearable placeholder="输入部门/昵称进行搜索">
<template #append>
<el-button @click="getList(1)">搜索</el-button>
</template>
</el-input>
<!-- 人员选择 -->
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
<el-scrollbar style="height:317px">
<el-scrollbar style="height:340px">
<div class="tree">
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
:default-expanded-keys="expandedKeys" lazy accordion
@@ -26,7 +22,9 @@
<template #default="{ node, data }">
<div class="tree-node">
<div v-if="data.type === 0" style="display: flex;align-items: center;padding: 3px 0">
<!-- <el-avatar :src="data.avatar"></el-avatar>-->
<el-icon>
<UserFilled/>
</el-icon>
{{ node.label }}
</div>
<div v-else-if="data.type ===1">
@@ -55,8 +53,8 @@
<div class="org-items" style="height: 350px;">
<el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
<div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
<!-- <el-avatar :src="selectItem.avatar" style="margin-right: 5px;"></el-avatar>-->
{{ selectItem.name}}
<!-- <el-avatar :src="selectItem.avatar" style="margin-right: 5px;"></el-avatar>-->
{{ selectItem.name }}
<i class="el-icon-close" @click="noSelected(selectItem)"></i>
</div>
</div>
@@ -71,9 +69,9 @@
</template>
<script setup>
import {getUserTree} from "@/api/workflow/process-user";
import {computed, defineProps, defineExpose} from "vue";
import {ElMessageBox} from "element-plus";
import {getMosrDept} from "@/api/workflow/process-user";
const props = defineProps({
value: {
@@ -105,16 +103,19 @@ const selectList = ref([]);
const filterText = ref("");
const dataList = ref([]);
const tree = ref([]);
const isSearch = ref(false);
const expandedKeys = ref([]);
const defaultProps = {
value: "value",
label: "name",
children: "children",
isLeaf:(data, node) => {
if (node.level === 2) {
return true
}
}
// isLeaf:(data, node) =>
// {
// console.log('data, node',data, node)
// if (node.level === 2) {
// return true
// }
// }
};
const emit = defineEmits();
@@ -128,30 +129,41 @@ const _value = computed({
}
});
watch(() => filterText, (newVal, oldVal) => {
tree.value.filter(newVal);
watch(() => filterText.value, (newVal) => {
console.log('filterText.value', newVal)
filterText.value = newVal
});
const getList = (flag) => {
let params = {}
if (flag === 1) {
isSearch.value = true;
params = {
chooseId: 0,
chooseName: filterText.value
}
selectItem = {
type: -1,
value: "0"
};
} else {
const radioChange = (e) => {
selectItem.type = -2;
chooseId.value = 0;
radio.value = e;
expandedKeys.value = [];
getList();
};
const getList = () => {
getUserTree(radio.value, chooseId.value).then(res => {
params = {
chooseId: radio.value,
chooseName: filterText.value
}
}
getMosrDept(params).then(res => {
console.log('selectItem.type', selectItem.type)
// if (res.data) {
if (selectItem.type === -1 || selectItem.type === -2) {//角色/部门
if (selectItem.type === -1) {
dataList.value = res.data;
} else if (selectItem.type === 1) {
selectItem.children = res.data;
if(chooseId.value!==0&&res.data.length===0){
selectItem.children=[{
type:1,
name:'暂无数据'
if (res.data.length === 0) {
selectItem.children = [{
type: 1,
name: '暂无数据'
}]
}
} else if (selectItem.type === 2) {
@@ -187,16 +199,24 @@ const showUserPicker = () => {
expandedKeys.value = [];
getList();
};
const handleChange = (item, data, node) => {
//渲染子节点用户或部门及用户数据
const handleChange = (item, data) => {
console.log('item', item, data)
selectItem = item;
if (data.expanded) {
if(expandedKeys.value.indexOf(item.value)===-1){
expandedKeys.value.push(item.value);
if (item.type !== 0) {
chooseId.value = item.id;
getList();
return;
if (isSearch.value && item.type !== 0) {
filterText.value = ""
radio.value = item.id;
getList();
return;
} else if (!isSearch.value) {
//渲染子节点用户或部门及用户数据
if (data.expanded) {
if (expandedKeys.value.indexOf(item.value) === -1) {
expandedKeys.value.push(item.value);
if (item.type !== 0) {
radio.value = item.id;
getList();
return;
}
}
}
}
@@ -271,7 +291,6 @@ $containWidth: 264px;
.el-tree-node {
.el-tree-node__content {
//height: 45px !important;
.tree-node {
}
}