106 lines
3.1 KiB
Vue
106 lines
3.1 KiB
Vue
<template>
|
||
<BasicModal :title="title" @register="registerModal" :minHeight="40" :width="600" @ok="handleOk" :canFullscreen="false">
|
||
<table style="width: 100%; margin-top: 8px">
|
||
<tr>
|
||
<td style="width: 80px; vertical-align: middle">
|
||
<span>选择用户：</span>
|
||
</td>
|
||
<td style="vertical-align: middle">
|
||
<a-input
|
||
:value="selectedUser ? selectedUser.realname : ''"
|
||
:placeholder="'请选择人员'"
|
||
disabled
|
||
style="width: 100%"
|
||
>
|
||
<template v-if="selectedUser" #suffix>
|
||
<CloseCircleOutlined @click="selectedUser = null" style="cursor: pointer; color: rgba(0,0,0,0.45)" />
|
||
</template>
|
||
</a-input>
|
||
</td>
|
||
<td style="width: 80px; vertical-align: middle; padding-left: 8px">
|
||
<a-button type="primary" @click="openSelectModal">选择</a-button>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<a-modal
|
||
:title="'选择' + title"
|
||
:width="1000"
|
||
v-model:open="selectVisible"
|
||
centered
|
||
:destroyOnClose="true"
|
||
:okButtonProps="{ disabled: !tempSelectedUser }"
|
||
@ok="onSelectConfirm"
|
||
>
|
||
<SzSingleDeptUserSelect ref="selectRef" :departId="innerDepartId" :secLevel="0" :role="1" :checkedUser="tempSelectedUser" @select="onUserSelect" />
|
||
</a-modal>
|
||
</BasicModal>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, computed } from 'vue';
|
||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||
import { useUserStore } from '/@/store/modules/user';
|
||
import { CloseCircleOutlined } from '@ant-design/icons-vue';
|
||
import SzSingleDeptUserSelect from './SzSingleDeptUserSelect.vue';
|
||
import type { UserItem } from './types';
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
title?: string;
|
||
departId?: string;
|
||
}>(),
|
||
{
|
||
title: '选择人员',
|
||
departId: '',
|
||
}
|
||
);
|
||
|
||
const emit = defineEmits(['selected', 'register']);
|
||
|
||
const userStore = useUserStore();
|
||
const selectRef = ref<InstanceType<typeof SzSingleDeptUserSelect> | null>(null);
|
||
const taskId = ref('');
|
||
const selectedUser = ref<UserItem | null>(null);
|
||
const tempSelectedUser = ref<UserItem | null>(null);
|
||
const selectVisible = ref(false);
|
||
|
||
const innerDepartId = computed(() => {
|
||
return props.departId || userStore.getUserInfo?.orgCode || '';
|
||
});
|
||
|
||
const [registerModal, { closeModal }] = useModalInner((data) => {
|
||
selectedUser.value = null;
|
||
tempSelectedUser.value = null;
|
||
taskId.value = data.taskId || '';
|
||
});
|
||
|
||
function openSelectModal() {
|
||
tempSelectedUser.value = selectedUser.value ? { ...selectedUser.value } : null;
|
||
selectVisible.value = true;
|
||
}
|
||
|
||
function onUserSelect(user: UserItem | null) {
|
||
tempSelectedUser.value = user;
|
||
}
|
||
|
||
function onSelectConfirm() {
|
||
if (!tempSelectedUser.value) return;
|
||
selectedUser.value = tempSelectedUser.value;
|
||
selectVisible.value = false;
|
||
}
|
||
|
||
function handleOk() {
|
||
if (!selectedUser.value) return;
|
||
emit('selected', {
|
||
taskId: taskId.value,
|
||
taskAssignee: selectedUser.value.id,
|
||
taskAssigneeName: selectedUser.value.realname,
|
||
});
|
||
closeModal();
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
</style>
|