feat: 系统管理 组织架构 选人选组织组件替换
This commit is contained in:
GAOANG
@ -23,19 +23,23 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
selectedNodes: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
parentNode: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isArray: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['change-value', 'query-completed']);
|
||||
const expandedKeys = ref<string[]>([]);
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
const checkedKeys = ref<string[]>([]);
|
||||
const emit = defineEmits(['change-value', 'query-completed', 'select']);
|
||||
const expandedKeys = ref([]);
|
||||
const selectedKeys = ref([]);
|
||||
const checkedKeys = ref([]);
|
||||
const checkable = ref(false)
|
||||
const treeData = ref([])
|
||||
const params = ref({
|
||||
@ -45,7 +49,6 @@ const params = ref({
|
||||
parentNode: false
|
||||
})
|
||||
onMounted(() => {
|
||||
selectedKeys.value = [props.value]
|
||||
getList()
|
||||
})
|
||||
const loadData = (node) => {
|
||||
@ -88,7 +91,7 @@ function resetTreeList(list) {
|
||||
return result
|
||||
}
|
||||
function selectData(selectedKeys, e) {
|
||||
emit('change-value', e.selectedNodes);
|
||||
emit('change-value', e.node, e.selected);
|
||||
}
|
||||
watch(expandedKeys, () => {
|
||||
console.log('expandedKeys', expandedKeys);
|
||||
@ -99,4 +102,14 @@ watch(selectedKeys, () => {
|
||||
watch(checkedKeys, () => {
|
||||
console.log('checkedKeys', checkedKeys);
|
||||
});
|
||||
watch(
|
||||
() => props.selectedNodes,
|
||||
() => {
|
||||
selectedKeys.value = props.selectedNodes.map(item => item.id)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -12,12 +12,12 @@
|
||||
<div class="choose-dep-box">
|
||||
<div class="choose-dep">
|
||||
<a-spin :spinning="loading" class="loading-box" />
|
||||
<SelectDepartmentTreeV2 v-if="visible" :parentNode="parentNode" :value="props.value" @changeValue="departChange" @queryCompleted="queryCompleted"></SelectDepartmentTreeV2>
|
||||
<SelectDepartmentTreeV2 v-if="visible" :multiple="multiple" :isArray="isArray" :parentNode="parentNode" :selectedNodes="selectedNodes" @changeValue="departChange" @queryCompleted="queryCompleted"></SelectDepartmentTreeV2>
|
||||
</div>
|
||||
<div class="choosen-dep">
|
||||
<div v-for="item in selectedNodes" class="choosen-item">
|
||||
<div class="choosen-label">{{ item.name }}</div>
|
||||
<close-outlined class="close" @click="deleteItem" />
|
||||
<close-outlined class="close" @click="deleteItem(item)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -41,7 +41,6 @@
|
||||
const valChanged = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
prefix: String,
|
||||
suffix: String,
|
||||
placeholder: String,
|
||||
@ -49,13 +48,20 @@
|
||||
disabled: Boolean,
|
||||
parentNode: String,
|
||||
size: String,
|
||||
value: {
|
||||
type: String || Array,
|
||||
},
|
||||
isArray: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: false
|
||||
},
|
||||
componentProps: {
|
||||
type: Object,
|
||||
@ -69,16 +75,18 @@
|
||||
|
||||
// Embedded in the form, just use the hook binding to perform form verification
|
||||
|
||||
onMounted(() => {});
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let ids = props.isArray ? val?.join(',') : val
|
||||
if (ids) {
|
||||
if (props.sepTextField && !valChanged.value) {
|
||||
departNames.value = props.row[camelCaseString(props.sepTextField)];
|
||||
} else {
|
||||
getDefaultList(val);
|
||||
getDefaultList(ids);
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -87,9 +95,9 @@
|
||||
}
|
||||
);
|
||||
|
||||
async function getDefaultList(id) {
|
||||
async function getDefaultList(ids) {
|
||||
let param = {
|
||||
id: id,
|
||||
ids: ids,
|
||||
code: '',
|
||||
name: '',
|
||||
parentNode: false
|
||||
@ -127,8 +135,21 @@
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
function departChange(nodes) {
|
||||
selectedNodes.value = nodes;
|
||||
function departChange(node, isSelect) {
|
||||
if (props.multiple) {
|
||||
if (isSelect) {
|
||||
selectedNodes.value.push(node.dataRef)
|
||||
} else {
|
||||
selectedNodes.value = selectedNodes.value.filter(item => item.id !== node.dataRef.id)
|
||||
}
|
||||
} else {
|
||||
if (isSelect) {
|
||||
selectedNodes.value = [node.dataRef]
|
||||
} else {
|
||||
selectedNodes.value = []
|
||||
}
|
||||
|
||||
}
|
||||
valChanged.value = true;
|
||||
}
|
||||
|
||||
@ -136,7 +157,11 @@
|
||||
visible.value = true;
|
||||
loading.value = true;
|
||||
if (props.value) {
|
||||
getDefaultList(props.value);
|
||||
if(props.isArray && !props.value.length) {
|
||||
return
|
||||
}
|
||||
let ids = props.isArray ? props.value.join(',') : props.value
|
||||
getDefaultList(ids);
|
||||
}
|
||||
}
|
||||
|
||||
@ -145,13 +170,15 @@
|
||||
let idList = selectedNodes.value.map((item) => item.id);
|
||||
const names = nameList.join(',');
|
||||
const ids = idList.join(',');
|
||||
emits('update:value', ids);
|
||||
emits('update:value', props.isArray ? idList : ids);
|
||||
departNames.value = names;
|
||||
updateSepTextField(names);
|
||||
emits('change', props.isArray ? idList : ids);
|
||||
|
||||
}
|
||||
|
||||
function deleteItem() {
|
||||
selectedNodes.value = [];
|
||||
function deleteItem(item) {
|
||||
selectedNodes.value = selectedNodes.value.filter(m => item.id !== m.id)
|
||||
}
|
||||
|
||||
function submit() {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div :class="{ disabled }" class="form-select-user" @click="show">
|
||||
<a-input v-model:value="userNames" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
|
||||
<a-button type="primary" v-if="buttonShow">{{ t('添加人员') }}</a-button>
|
||||
<a-input v-model:value="userNames" v-if="!buttonShow" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
|
||||
<template v-if="prefix" #prefix>
|
||||
<Icon :icon="prefix" />
|
||||
</template>
|
||||
@ -69,8 +70,8 @@
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { ModalPanel } from '/@/components/ModalPanel/index';
|
||||
import { getUserPageListNew, getUserMulti } from '/@/api/system/user';
|
||||
import SelectDepartmentTreeV2 from './SelectDepartmentTreeV2.vue';
|
||||
import SelectUserListV2 from './SelectUserListV2.vue';
|
||||
import SelectDepartmentTreeV2 from '/@/components/Form/src/components/SelectDepartmentTreeV2.vue';
|
||||
import SelectUserListV2 from '/@/components/Form/src/components/SelectUserListV2.vue';
|
||||
import { camelCaseString } from '/@/utils/stringUtil';
|
||||
|
||||
const emits = defineEmits(['update:value', 'selectedId', 'change']);
|
||||
@ -99,7 +100,11 @@
|
||||
default: true
|
||||
},
|
||||
row: Object, // 行数据，在表格里用的到
|
||||
sepTextField: String // 将文本表示存储在独立字段
|
||||
sepTextField: String, // 将文本表示存储在独立字段
|
||||
buttonShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
let timeoutId = null;
|
||||
let resetMemberList = [];
|
||||
|
||||
Reference in New Issue
Block a user