!60 czh-20260626-发起人筛选改成单选组件;修复选择用户后不回显的问题
Merge pull request !60 from 陈志浩/fix/userSelect-20260626
This commit is contained in:
@@ -83,6 +83,7 @@ import {DatePickerInFilter, CascaderPcaInFilter} from "@/components/InFilter";
|
|||||||
import SzSelectUser from '@/components/semri/userComponent/SzUserSelect.vue';
|
import SzSelectUser from '@/components/semri/userComponent/SzUserSelect.vue';
|
||||||
import SzSelectUserByDept from '@/components/semri/userComponent/SzSelectUserByDept.vue';
|
import SzSelectUserByDept from '@/components/semri/userComponent/SzSelectUserByDept.vue';
|
||||||
import SzDeptUserSelect from '@/components/semri/deptUserComponent/SzDeptUserModal.vue';
|
import SzDeptUserSelect from '@/components/semri/deptUserComponent/SzDeptUserModal.vue';
|
||||||
|
import SzSingleDeptUserSelect from '@/components/semri/deptUserComponent/SzSingleDeptUserModal.vue';
|
||||||
|
|
||||||
const componentMap = new Map<ComponentType, Component>();
|
const componentMap = new Map<ComponentType, Component>();
|
||||||
|
|
||||||
@@ -184,6 +185,7 @@ componentMap.set('JInputSelect', JInputSelect);
|
|||||||
componentMap.set('SzSelectUser', SzSelectUser);
|
componentMap.set('SzSelectUser', SzSelectUser);
|
||||||
componentMap.set('SzSelectUserByDept',SzSelectUserByDept)
|
componentMap.set('SzSelectUserByDept',SzSelectUserByDept)
|
||||||
componentMap.set('SzDeptUserSelect', SzDeptUserSelect)
|
componentMap.set('SzDeptUserSelect', SzDeptUserSelect)
|
||||||
|
componentMap.set('SzSingleDeptUserSelect', SzSingleDeptUserSelect)
|
||||||
|
|
||||||
export function add(compName: ComponentType, component: Component) {
|
export function add(compName: ComponentType, component: Component) {
|
||||||
componentMap.set(compName, component);
|
componentMap.set(compName, component);
|
||||||
|
|||||||
@@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<template v-if="!hideTrigger">
|
||||||
|
<a-input
|
||||||
|
v-if="triggerMode === 'input'"
|
||||||
|
:value="selectedUser ? selectedUser.realname : ''"
|
||||||
|
placeholder="请选择人员"
|
||||||
|
readonly
|
||||||
|
style="width: 100%; cursor: pointer"
|
||||||
|
@click="openModal()"
|
||||||
|
>
|
||||||
|
<template v-if="selectedUser" #suffix>
|
||||||
|
<CloseCircleOutlined @click.stop="handleClear" style="color: rgba(0,0,0,0.45)" />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-row v-else class="j-select-row" type="flex" :gutter="8">
|
||||||
|
<a-col class="left">
|
||||||
|
<a-input
|
||||||
|
:value="selectedUser ? selectedUser.realname : ''"
|
||||||
|
placeholder="请选择人员"
|
||||||
|
readonly
|
||||||
|
@click="openModal()"
|
||||||
|
>
|
||||||
|
<template v-if="selectedUser" #suffix>
|
||||||
|
<CloseCircleOutlined @click.stop="handleClear" style="color: rgba(0,0,0,0.45)" />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-col>
|
||||||
|
<a-col class="right">
|
||||||
|
<a-button type="primary" @click="openModal()" :disabled="disabled">选择</a-button>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<a-modal
|
||||||
|
:width="1000"
|
||||||
|
:title="title"
|
||||||
|
v-model:open="visible"
|
||||||
|
centered
|
||||||
|
:destroyOnClose="true"
|
||||||
|
:okButtonProps="{ disabled: !tempSelectedUser }"
|
||||||
|
@ok="handleOk"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
>
|
||||||
|
<SzSingleDeptUserSelect
|
||||||
|
ref="selectRef"
|
||||||
|
:departId="innerDepartId"
|
||||||
|
:secLevel="secLevel"
|
||||||
|
:role="role"
|
||||||
|
:isSpecial="isSpecial"
|
||||||
|
:checkedUser="tempSelectedUser"
|
||||||
|
@select="onUserSelect"
|
||||||
|
/>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, watch } from 'vue';
|
||||||
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
|
import { useUserStore } from '/@/store/modules/user';
|
||||||
|
import { CloseCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import SzSingleDeptUserSelect from '/@/components/semri/singleDeptUserComponent/SzSingleDeptUserSelect.vue';
|
||||||
|
import type { UserItem } from './types';
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
value?: string;
|
||||||
|
departId?: string;
|
||||||
|
secLevel?: any;
|
||||||
|
role?: string | number;
|
||||||
|
isSpecial?: number;
|
||||||
|
disabled?: boolean;
|
||||||
|
valueKey?: 'id' | 'username';
|
||||||
|
title?: string;
|
||||||
|
hideTrigger?: boolean;
|
||||||
|
triggerMode?: 'button' | 'input';
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
value: '',
|
||||||
|
departId: '',
|
||||||
|
secLevel: 0,
|
||||||
|
role: 1,
|
||||||
|
isSpecial: 0,
|
||||||
|
disabled: false,
|
||||||
|
valueKey: 'username',
|
||||||
|
title: '选择人员',
|
||||||
|
hideTrigger: false,
|
||||||
|
triggerMode: 'button',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:value', 'change', 'confirm']);
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const selectRef = ref();
|
||||||
|
const visible = ref(false);
|
||||||
|
const selectedUser = ref<UserItem | null>(null);
|
||||||
|
const tempSelectedUser = ref<UserItem | null>(null);
|
||||||
|
|
||||||
|
const innerDepartId = computed(() => {
|
||||||
|
return props.departId || userStore.getUserInfo?.orgCode || '';
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.value,
|
||||||
|
(newVal) => {
|
||||||
|
if (newVal) {
|
||||||
|
loadUserByKey(newVal);
|
||||||
|
} else {
|
||||||
|
selectedUser.value = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
async function loadUserByKey(valueStr: string) {
|
||||||
|
try {
|
||||||
|
const paramKey = props.valueKey === 'id' ? 'id' : 'username';
|
||||||
|
const res: any = await defHttp.get({
|
||||||
|
url: '/sys/user/queryUserComponentData',
|
||||||
|
params: { [paramKey]: valueStr, pageNo: 1, pageSize: 9999 },
|
||||||
|
});
|
||||||
|
const users = (res.records || res).filter((u: UserItem) => !u.username.toLowerCase().includes('admin'));
|
||||||
|
selectedUser.value = users.length > 0 ? users[0] : null;
|
||||||
|
} catch {
|
||||||
|
selectedUser.value = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClear() {
|
||||||
|
selectedUser.value = null;
|
||||||
|
emit('update:value', '');
|
||||||
|
emit('change', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function openModal() {
|
||||||
|
if (props.disabled) return;
|
||||||
|
tempSelectedUser.value = selectedUser.value ? { ...selectedUser.value } : null;
|
||||||
|
visible.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onUserSelect(user: UserItem | null) {
|
||||||
|
tempSelectedUser.value = user;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleOk() {
|
||||||
|
if (!tempSelectedUser.value) return;
|
||||||
|
selectedUser.value = tempSelectedUser.value;
|
||||||
|
const keyValue = selectedUser.value[props.valueKey];
|
||||||
|
const nameValue = selectedUser.value.realname;
|
||||||
|
emit('update:value', keyValue);
|
||||||
|
emit('change', keyValue);
|
||||||
|
emit('confirm', keyValue, nameValue);
|
||||||
|
visible.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCancel() {
|
||||||
|
visible.value = false;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.j-select-row {
|
||||||
|
@width: 82px;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: calc(100% - @width - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: @width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
:okButtonProps="{ disabled: !tempSelectedUser }"
|
:okButtonProps="{ disabled: !tempSelectedUser }"
|
||||||
@ok="onSelectConfirm"
|
@ok="onSelectConfirm"
|
||||||
>
|
>
|
||||||
<SzSingleDeptUserSelect ref="selectRef" :departId="innerDepartId" :secLevel="0" :role="1" @select="onUserSelect" />
|
<SzSingleDeptUserSelect ref="selectRef" :departId="innerDepartId" :secLevel="0" :role="1" :checkedUser="tempSelectedUser" @select="onUserSelect" />
|
||||||
</a-modal>
|
</a-modal>
|
||||||
</BasicModal>
|
</BasicModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -59,12 +59,14 @@ const props = withDefaults(
|
|||||||
departId?: string;
|
departId?: string;
|
||||||
role?: string | number;
|
role?: string | number;
|
||||||
isSpecial?: number;
|
isSpecial?: number;
|
||||||
|
checkedUser?: UserItem | null;
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
secLevel: 0,
|
secLevel: 0,
|
||||||
departId: '',
|
departId: '',
|
||||||
role: 1,
|
role: 1,
|
||||||
isSpecial: 0,
|
isSpecial: 0,
|
||||||
|
checkedUser: undefined,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -145,6 +147,14 @@ watch(
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.checkedUser,
|
||||||
|
(user) => {
|
||||||
|
selectedUser.value = user || null;
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
function initData() {
|
function initData() {
|
||||||
const depId = props.departId;
|
const depId = props.departId;
|
||||||
if (depId) {
|
if (depId) {
|
||||||
|
|||||||
@@ -18,10 +18,10 @@
|
|||||||
<task-handle-modal @register="registerHandleModal" @success="reload"></task-handle-modal>
|
<task-handle-modal @register="registerHandleModal" @success="reload"></task-handle-modal>
|
||||||
|
|
||||||
<!-- 委托 -->
|
<!-- 委托 -->
|
||||||
<select-entruster-modal @register="registerEntrusterModal" @selected="selectedEntruster"></select-entruster-modal>
|
<SingleDeptUserModal title="选择委托人" @register="registerEntrusterModal" @selected="selectedEntruster" />
|
||||||
|
|
||||||
<!-- 转办 -->
|
<!-- 转办 -->
|
||||||
<select-entruster-modal @register="registerComplaintModal" @selected="selectedComplaint"></select-entruster-modal>
|
<SingleDeptUserModal title="选择转办人" @register="registerComplaintModal" @selected="selectedComplaint" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
import TaskNotifyMeModal from './modal/TaskNotifyMeModal.vue';
|
import TaskNotifyMeModal from './modal/TaskNotifyMeModal.vue';
|
||||||
import TaskHandleModal from './modal/TaskHandleModal.vue';
|
import TaskHandleModal from './modal/TaskHandleModal.vue';
|
||||||
import { useModal } from '/@/components/Modal';
|
import { useModal } from '/@/components/Modal';
|
||||||
import SelectEntrusterModal from './modal/SelectEntrusterModal.vue';
|
import SingleDeptUserModal from '/@/components/semri/singleDeptUserComponent/SingleDeptUserModal.vue';
|
||||||
import { taskEntrust, taskClaim, taskComplaint } from './task.handle.api';
|
import { taskEntrust, taskClaim, taskComplaint } from './task.handle.api';
|
||||||
import { useUserStore } from '/@/store/modules/user';
|
import { useUserStore } from '/@/store/modules/user';
|
||||||
import { useMessage } from '/@/hooks/web/useMessage';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
||||||
@@ -46,7 +46,7 @@
|
|||||||
NotificationTwoTone,
|
NotificationTwoTone,
|
||||||
TaskNotifyMeModal,
|
TaskNotifyMeModal,
|
||||||
TaskHandleModal,
|
TaskHandleModal,
|
||||||
SelectEntrusterModal,
|
SingleDeptUserModal,
|
||||||
},
|
},
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
|
|||||||
@@ -233,10 +233,9 @@ export const searchFormSchema: FormSchema[] = [
|
|||||||
{
|
{
|
||||||
label: '发起人',
|
label: '发起人',
|
||||||
field: 'userName',
|
field: 'userName',
|
||||||
component: 'SzDeptUserSelect',
|
component: 'SzSingleDeptUserSelect',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
valueKey: 'username',
|
valueKey: 'username',
|
||||||
multi: true,
|
|
||||||
triggerMode: 'input',
|
triggerMode: 'input',
|
||||||
},
|
},
|
||||||
buss: 'run',
|
buss: 'run',
|
||||||
|
|||||||
Reference in New Issue
Block a user