134 lines
4.0 KiB
Vue
134 lines
4.0 KiB
Vue
<template>
|
|
<a-modal :mask-closable="false" :title="dialogTitle" :visible="isOpen" :width="500" class="geg" centered>
|
|
<template #footer>
|
|
<a-button :disabled="loading" @click="onClickCancel">取消</a-button>
|
|
<a-button :loading="loading" type="primary" @click="onClickOK">确定</a-button>
|
|
</template>
|
|
<div class="dialog-wrap">
|
|
<a-form ref="formRef" :label-col="{ span: 6 }" :model="formState" :rules="rules" autocomplete="off">
|
|
<a-form-item label="部门" name="department">
|
|
<a-cascader v-model:value="formState.department" :field-names="{ label: 'name', value: 'id' }" :options="departmentList" :show-search="{ filter }" placeholder="请选择部门" @change="handleChangeDepartment"> </a-cascader>
|
|
</a-form-item>
|
|
<a-form-item label="转办人" name="userId" required>
|
|
<a-select
|
|
v-model:value="formState.userId"
|
|
show-search
|
|
placeholder="请选择转办人"
|
|
:default-active-first-option="false"
|
|
:show-arrow="false"
|
|
:filter-option="false"
|
|
:not-found-content="null"
|
|
:options="userList"
|
|
@search="handleSearchUser"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, onMounted } from 'vue';
|
|
import { getDepartmentTree } from '/@/api/system/department';
|
|
import { getUserPageList } from '/@/api/system/user';
|
|
|
|
import { debounce } from 'lodash-es';
|
|
|
|
const dialogTitle = ref('转办');
|
|
const isOpen = ref(false);
|
|
const loading = ref(false);
|
|
const userList = ref([]);
|
|
const departmentList = ref([]);
|
|
const formRef = ref();
|
|
const formState = reactive({
|
|
department: undefined, // 部门
|
|
userId: undefined
|
|
});
|
|
|
|
const rules = {
|
|
userId: [{ required: true, message: '请选择转办人', trigger: 'change' }]
|
|
};
|
|
let _taskId = '';
|
|
let _callback = null;
|
|
|
|
async function toggleDialog({ isClose, taskId, callback }) {
|
|
if (isClose) {
|
|
isOpen.value = false;
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
_taskId = taskId;
|
|
isOpen.value = true;
|
|
_callback = callback;
|
|
getUserList();
|
|
getDepartmentTree().then((res) => {
|
|
departmentList.value = res || [];
|
|
});
|
|
}
|
|
|
|
async function getUserList(params = {}) {
|
|
let userRes = await getUserPageList(params);
|
|
userList.value = (userRes.list || []).map((user) => {
|
|
return {
|
|
value: user.id,
|
|
label: user.name + (user.code ? ` - ${user.code}` : '')
|
|
};
|
|
});
|
|
}
|
|
|
|
function handleChangeDepartment(value) {
|
|
getUserList({
|
|
departmentId: value[value.length - 1]
|
|
});
|
|
}
|
|
|
|
const handleSearchUser = debounce((value) => {
|
|
const departmentId = formState.department?.length > 0 ? formState.department[formState.department.length - 1] : '';
|
|
getUserList({
|
|
departmentId,
|
|
keyword: value
|
|
});
|
|
}, 500);
|
|
|
|
function onClickCancel() {
|
|
isOpen.value = false;
|
|
}
|
|
|
|
function onClickOK() {
|
|
if (_callback && typeof _callback === 'function') {
|
|
_callback({
|
|
taskId: _taskId,
|
|
userId: formState.userId
|
|
});
|
|
} else {
|
|
isOpen.value = false;
|
|
}
|
|
}
|
|
|
|
function validate() {
|
|
return formRef.value.validate();
|
|
}
|
|
|
|
function startLoading() {
|
|
loading.value = true;
|
|
}
|
|
|
|
function stopLoading() {
|
|
loading.value = false;
|
|
}
|
|
|
|
defineExpose({
|
|
toggleDialog,
|
|
validate,
|
|
startLoading,
|
|
stopLoading
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.dialog-wrap {
|
|
padding: 10px 15px 0 0;
|
|
}
|
|
</style>
|