Merge branch 'gaoang-2024-11' into 'dev'
feat: 选人选组织组件 限制范围参数添加 See merge request itc-framework/ma/2024/front!23
This commit is contained in:
@ -14,6 +14,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, watch, onMounted } from 'vue';
|
import { ref, watch, onMounted } from 'vue';
|
||||||
import { getDepartmentTrees } from '/@/api/system/department';
|
import { getDepartmentTrees } from '/@/api/system/department';
|
||||||
|
import { useUserStore } from '/@/store/modules/user';
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
multiple: {
|
multiple: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@ -35,6 +36,10 @@ const props = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
defaultDepts: { // 仅在登录用户公司范围内筛选
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
});
|
});
|
||||||
const emit = defineEmits(['change-value', 'query-completed', 'select']);
|
const emit = defineEmits(['change-value', 'query-completed', 'select']);
|
||||||
const expandedKeys = ref([]);
|
const expandedKeys = ref([]);
|
||||||
@ -46,7 +51,9 @@ const params = ref({
|
|||||||
id: '',
|
id: '',
|
||||||
code: '',
|
code: '',
|
||||||
name: '',
|
name: '',
|
||||||
parentNode: false
|
parentNode: false,
|
||||||
|
excludeDeptTypes: props.justCompany ? '0' : '',
|
||||||
|
ids: props.defaultDepts
|
||||||
})
|
})
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getList()
|
getList()
|
||||||
@ -61,7 +68,9 @@ const loadData = (node) => {
|
|||||||
id: node.id,
|
id: node.id,
|
||||||
code: '',
|
code: '',
|
||||||
name: '',
|
name: '',
|
||||||
parentNode: false
|
parentNode: false,
|
||||||
|
excludeDeptTypes: props.justCompany ? '0' : '',
|
||||||
|
ids: props.defaultDepts
|
||||||
}
|
}
|
||||||
let list = resetTreeList(await getDepartmentTrees(param))
|
let list = resetTreeList(await getDepartmentTrees(param))
|
||||||
node.dataRef.children = list[0].children
|
node.dataRef.children = list[0].children
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
<div class="choose-dep-box">
|
<div class="choose-dep-box">
|
||||||
<div class="choose-dep">
|
<div class="choose-dep">
|
||||||
<a-spin :spinning="loading" class="loading-box" />
|
<a-spin :spinning="loading" class="loading-box" />
|
||||||
<SelectDepartmentTreeV2 v-if="visible" :multiple="multiple" :isArray="isArray" :parentNode="parentNode" :selectedNodes="selectedNodes" @changeValue="departChange" @queryCompleted="queryCompleted"></SelectDepartmentTreeV2>
|
<SelectDepartmentTreeV2 v-if="visible" :multiple="multiple" :isArray="isArray" :parentNode="parentNode" :selectedNodes="selectedNodes" @changeValue="departChange" @queryCompleted="queryCompleted" :defaultDepts="defaultDepts"></SelectDepartmentTreeV2>
|
||||||
</div>
|
</div>
|
||||||
<div class="choosen-dep">
|
<div class="choosen-dep">
|
||||||
<div v-for="item in selectedNodes" class="choosen-item">
|
<div v-for="item in selectedNodes" class="choosen-item">
|
||||||
@ -35,6 +35,7 @@
|
|||||||
import { getDepartmentTrees } from '/@/api/system/department';
|
import { getDepartmentTrees } from '/@/api/system/department';
|
||||||
import { CloseOutlined } from '@ant-design/icons-vue';
|
import { CloseOutlined } from '@ant-design/icons-vue';
|
||||||
import { camelCaseString } from '/@/utils/stringUtil';
|
import { camelCaseString } from '/@/utils/stringUtil';
|
||||||
|
import { useUserStore } from '/@/store/modules/user';
|
||||||
|
|
||||||
const visible = ref(false);
|
const visible = ref(false);
|
||||||
const departNames = ref();
|
const departNames = ref();
|
||||||
@ -68,13 +69,26 @@
|
|||||||
default: {}
|
default: {}
|
||||||
},
|
},
|
||||||
sepTextField: '', // 将文字描述存在独立字段,增加首次渲染速度
|
sepTextField: '', // 将文字描述存在独立字段,增加首次渲染速度
|
||||||
row: Object
|
row: Object,
|
||||||
|
onlyUserCompany: { // 仅在登录用户公司范围内筛选
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
defaultDeptField: { // 默认选择公司范围key值
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
});
|
});
|
||||||
const selectedNodes = ref([]);
|
const selectedNodes = ref([]);
|
||||||
const loading = ref(true);
|
const loading = ref(true);
|
||||||
|
|
||||||
// Embedded in the form, just use the hook binding to perform form verification
|
// Embedded in the form, just use the hook binding to perform form verification
|
||||||
|
const defaultDepts = ref('')
|
||||||
|
if(props.onlyUserCompany) {
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const userInfo = userStore.getUserInfo;
|
||||||
|
defaultDepts.value = userInfo.departmentId
|
||||||
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -88,6 +102,9 @@
|
|||||||
} else {
|
} else {
|
||||||
getDefaultList(ids);
|
getDefaultList(ids);
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
departNames.value = ''
|
||||||
|
selectedNodes.value = []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -156,6 +173,9 @@
|
|||||||
function show() {
|
function show() {
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
|
if(props.defaultDeptField) {
|
||||||
|
defaultDepts.value = props.row[props.defaultDeptField]
|
||||||
|
}
|
||||||
if (props.value) {
|
if (props.value) {
|
||||||
if(props.isArray && !props.value.length) {
|
if(props.isArray && !props.value.length) {
|
||||||
return
|
return
|
||||||
|
|||||||
@ -1,8 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="user-select-list">
|
<div class="user-select-list">
|
||||||
<div class="user-select-item" v-for="item in data" @click="selectItem(item)">
|
<div class="user-select-item" v-for="item in data" @click="selectItem(item)">
|
||||||
<div class="user-select-item-left">
|
<div class="user-select-item-left" v-if="showDep && item.departmentPathName">
|
||||||
{{ item.name }}
|
{{ `${item.name}(${item.departmentPathName})` }}
|
||||||
|
</div>
|
||||||
|
<div class="user-select-item-left" v-else>
|
||||||
|
{{ `${item.name}` }}
|
||||||
</div>
|
</div>
|
||||||
<div class="user-select-item-right">
|
<div class="user-select-item-right">
|
||||||
<div class="select-circle" :class="item.selected ? 'selected' : ''" v-if="!viewList">
|
<div class="select-circle" :class="item.selected ? 'selected' : ''" v-if="!viewList">
|
||||||
@ -51,6 +54,10 @@ const props = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
showDep: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
})
|
})
|
||||||
function selectItem(item) {
|
function selectItem(item) {
|
||||||
emits('selectId', item.id)
|
emits('selectId', item.id)
|
||||||
@ -92,6 +99,9 @@ function delItem(item) {
|
|||||||
.user-select-item-left {
|
.user-select-item-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
overflow: hidden; //超出隐藏
|
||||||
|
text-overflow: ellipsis; //文本超出时显示省略号
|
||||||
|
white-space: nowrap; //设置文本不换行
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-select-item-right {
|
.user-select-item-right {
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
<div class="department-tree">
|
<div class="department-tree">
|
||||||
<a-spin :spinning="treeLoading" class="loading-box" />
|
<a-spin :spinning="treeLoading" class="loading-box" />
|
||||||
<div class="department-tree-box">
|
<div class="department-tree-box">
|
||||||
<SelectDepartmentTreeV2 v-if="visible && activeKey === 'department'" class="tree-select" @changeValue="departChange" @queryCompleted="departCompleted"></SelectDepartmentTreeV2>
|
<SelectDepartmentTreeV2 v-if="visible && activeKey === 'department'" class="tree-select" @changeValue="departChange" @queryCompleted="departCompleted" :defaultDepts="defaultDepts"></SelectDepartmentTreeV2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="user-select-box">
|
<div class="user-select-box">
|
||||||
@ -36,7 +36,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="activeKey === 'allPerson'" class="all-user-select-box">
|
<div v-show="activeKey === 'allPerson'" class="all-user-select-box">
|
||||||
<SelectUserListV2 :multiple="multiple" :data="searchAllMemberList" @selectId="changeMemberSelect"></SelectUserListV2>
|
<SelectUserListV2 :multiple="multiple" :data="searchAllMemberList" @selectId="changeMemberSelect" show-dep></SelectUserListV2>
|
||||||
<div v-if="searchAllMemberTotal > 25" class="all-user-select-pagination">
|
<div v-if="searchAllMemberTotal > 25" class="all-user-select-pagination">
|
||||||
<a-form-item label="" name="pagination">
|
<a-form-item label="" name="pagination">
|
||||||
<a-pagination
|
<a-pagination
|
||||||
@ -73,6 +73,7 @@
|
|||||||
import SelectDepartmentTreeV2 from '/@/components/Form/src/components/SelectDepartmentTreeV2.vue';
|
import SelectDepartmentTreeV2 from '/@/components/Form/src/components/SelectDepartmentTreeV2.vue';
|
||||||
import SelectUserListV2 from '/@/components/Form/src/components/SelectUserListV2.vue';
|
import SelectUserListV2 from '/@/components/Form/src/components/SelectUserListV2.vue';
|
||||||
import { camelCaseString } from '/@/utils/stringUtil';
|
import { camelCaseString } from '/@/utils/stringUtil';
|
||||||
|
import { useUserStore } from '/@/store/modules/user';
|
||||||
|
|
||||||
const emits = defineEmits(['update:value', 'selectedId', 'change']);
|
const emits = defineEmits(['update:value', 'selectedId', 'change']);
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
@ -101,14 +102,28 @@
|
|||||||
},
|
},
|
||||||
row: Object, // 行数据,在表格里用的到
|
row: Object, // 行数据,在表格里用的到
|
||||||
sepTextField: String, // 将文本表示存储在独立字段
|
sepTextField: String, // 将文本表示存储在独立字段
|
||||||
|
onlyUserCompany: { // 仅在登录用户公司范围内筛选
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
buttonShow: {
|
buttonShow: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
}
|
},
|
||||||
|
defaultDeptField: { // 默认选择公司范围key值
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
});
|
});
|
||||||
let timeoutId = null;
|
let timeoutId = null;
|
||||||
let resetMemberList = [];
|
let resetMemberList = [];
|
||||||
const searchPlaceholder = '请输入姓名或工号搜索';
|
const searchPlaceholder = '请输入姓名或工号搜索';
|
||||||
|
const defaultDepts = ref('')
|
||||||
|
if(props.onlyUserCompany) {
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const userInfo = userStore.getUserInfo;
|
||||||
|
defaultDepts.value = userInfo.departmentId
|
||||||
|
}
|
||||||
|
|
||||||
function updateSepTextField(v) {
|
function updateSepTextField(v) {
|
||||||
if (!props.sepTextField || !props.row) {
|
if (!props.sepTextField || !props.row) {
|
||||||
@ -150,7 +165,8 @@
|
|||||||
async () => {
|
async () => {
|
||||||
if (props.value && !valChanged.value && props.sepTextField) {
|
if (props.value && !valChanged.value && props.sepTextField) {
|
||||||
const idArr = props.value.split(',');
|
const idArr = props.value.split(',');
|
||||||
const valStr = props.row[camelCaseString(props.sepTextField)];
|
let valStr = props.row[camelCaseString(props.sepTextField)];
|
||||||
|
valStr = valStr ? valStr : idArr ? idArr.reduce((a, b) => a + ',' + b) : '';
|
||||||
const valArr = valStr.split(',');
|
const valArr = valStr.split(',');
|
||||||
userNames.value = valStr;
|
userNames.value = valStr;
|
||||||
const initValue = idArr.map((id, index) => {
|
const initValue = idArr.map((id, index) => {
|
||||||
@ -172,6 +188,10 @@
|
|||||||
});
|
});
|
||||||
userNames.value = nameList.join(',');
|
userNames.value = nameList.join(',');
|
||||||
}
|
}
|
||||||
|
if(!props.value) {
|
||||||
|
userNames.value = ''
|
||||||
|
selectedMemberList.value = []
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true
|
immediate: true
|
||||||
@ -180,7 +200,8 @@
|
|||||||
const searchDepartMemberParams = ref({
|
const searchDepartMemberParams = ref({
|
||||||
limit: 1,
|
limit: 1,
|
||||||
size: 10000,
|
size: 10000,
|
||||||
departmentId: ''
|
departmentId: '',
|
||||||
|
departmentIds: defaultDepts.value
|
||||||
});
|
});
|
||||||
const searchDepartMemberTotal = ref(0);
|
const searchDepartMemberTotal = ref(0);
|
||||||
const searchDepartMemberList = ref([]);
|
const searchDepartMemberList = ref([]);
|
||||||
@ -188,7 +209,8 @@
|
|||||||
limit: 1,
|
limit: 1,
|
||||||
size: 25,
|
size: 25,
|
||||||
isSearchAll: true,
|
isSearchAll: true,
|
||||||
keyword: ''
|
keyword: '',
|
||||||
|
departmentIds: defaultDepts.value
|
||||||
});
|
});
|
||||||
const searchAllMemberTotal = ref(0);
|
const searchAllMemberTotal = ref(0);
|
||||||
const searchAllMemberList = ref([]);
|
const searchAllMemberList = ref([]);
|
||||||
@ -275,6 +297,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function show() {
|
function show() {
|
||||||
|
if(props.defaultDeptField) {
|
||||||
|
defaultDepts.value = props.row[props.defaultDeptField]
|
||||||
|
}
|
||||||
|
if (props.disabled) return
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
treeLoading.value = true;
|
treeLoading.value = true;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user