审批流程实现“转办”功能。

src/components/SecondDev/TransferDialog.vue

@@ -0,0 +1,133 @@
+<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>