feat-wip(projects): 新增我的待办列表

src/components/custom/workflow/flow-drawer.vue

@@ -11,18 +11,15 @@ interface Props {
   loading?: boolean;
   /** 抽屉宽度 */
   width?: number;
-  /** 是否为只读模式 */
-  readonly?: boolean;
-  /** 是否显示暂存按钮 */
-  showDraft?: boolean;
+  operateType: CommonType.WorkflowTableOperateType;
+  status?: string | null;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   visible: false,
   loading: false,
   width: 1200,
-  readonly: false,
-  showDraft: true
+  status: null
 });
 
 interface Emits {
@@ -30,6 +27,7 @@ interface Emits {
   (e: 'close'): void;
   (e: 'saveDraft'): void;
   (e: 'submit'): void;
+  (e: 'approval'): void;
 }
 
 const emit = defineEmits<Emits>();
@@ -41,6 +39,15 @@ const visibleValue = computed({
   }
 });
 
+const showSubmit = computed(
+  () =>
+    props.operateType === 'add' ||
+    (props.operateType === 'edit' &&
+      props.status &&
+      (props.status === 'draft' || props.status === 'cancel' || props.status === 'back'))
+);
+const showApproval = computed(() => props.operateType === 'approval' && props.status && props.status === 'waiting');
+
 function handleClose() {
   emit('close');
 }
@@ -52,11 +59,15 @@ function handleSaveDraft() {
 function handleSubmit() {
   emit('submit');
 }
+function handleApproval() {
+  emit('approval');
+}
 
 defineExpose({
   handleClose,
   handleSaveDraft,
-  handleSubmit
+  handleSubmit,
+  handleApproval
 });
 </script>
 
@@ -68,11 +79,12 @@ defineExpose({
       </NSpin>
       <template #footer>
         <slot name="footer">
-          <div v-if="!readonly">
+          <div>
             <NSpace :size="16">
-              <NButton @click="handleClose">{{ $t('common.cancel') }}</NButton>
-              <NButton v-if="showDraft" type="warning" @click="handleSaveDraft">暂存</NButton>
-              <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+              <NButton v-if="showSubmit || showApproval" @click="handleClose">{{ $t('common.cancel') }}</NButton>
+              <NButton v-if="showSubmit" type="warning" @click="handleSaveDraft">暂存</NButton>
+              <NButton v-if="showSubmit" type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+              <NButton v-if="showApproval" type="warning" @click="handleApproval">办理</NButton>
             </NSpace>
           </div>
         </slot>

src/components/custom/workflow/leave-edit/index.vue

@@ -217,6 +217,10 @@ function handleTaskFinished() {
   emit('submitted');
 }
 
+function handleApproval() {
+  setTaskApplyVisible();
+}
+
 async function initializeData() {
   if (visible.value) {
     startLoading();
@@ -238,10 +242,12 @@ watch(visible, initializeData, { immediate: true });
     v-model:visible="visible"
     :title="title"
     :loading="loading"
-    :readonly="readonly"
+    :operate-type="operateType"
+    :status="modelDetail.status"
     @close="closeDrawer"
     @save-draft="handleSaveDraft"
     @submit="handleSubmit"
+    @approval="handleApproval"
   >
     <div :class="loading ? 'hidden' : ''">
       <div v-if="!readonly" class="h-full">

src/locales/langs/en-us.ts

@@ -242,7 +242,8 @@ const local: App.I18n.Schema = {
     workflow_task: 'Task',
     'workflow_task_all-task-waiting': 'All Task Waiting',
     workflow_leave: 'Leave Apply',
-    'workflow_task_my-document': 'My Document'
+    'workflow_task_my-document': 'My Document',
+    'workflow_task_task-waiting': 'My Task Waiting'
   },
   menu: {
     system_tenant: 'Tenant Management',

src/locales/langs/zh-cn.ts

@@ -242,7 +242,8 @@ const local: App.I18n.Schema = {
     workflow_task: '任务',
     'workflow_task_all-task-waiting': '待办任务',
     workflow_leave: '请假申请',
-    'workflow_task_my-document': '我发起的'
+    'workflow_task_my-document': '我发起的',
+    'workflow_task_task-waiting': '我的待办'
   },
   menu: {
     system_tenant: '租户管理',

src/router/elegant/imports.ts

@@ -50,4 +50,5 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   "workflow_process-instance": () => import("@/views/workflow/process-instance/index.vue"),
   "workflow_task_all-task-waiting": () => import("@/views/workflow/task/all-task-waiting/index.vue"),
   "workflow_task_my-document": () => import("@/views/workflow/task/my-document/index.vue"),
+  "workflow_task_task-waiting": () => import("@/views/workflow/task/task-waiting/index.vue"),
 };

src/router/elegant/routes.ts

@@ -411,6 +411,15 @@ export const generatedRoutes: GeneratedRoute[] = [
               title: 'workflow_task_my-document',
               i18nKey: 'route.workflow_task_my-document'
             }
+          },
+          {
+            name: 'workflow_task_task-waiting',
+            path: '/workflow/task/task-waiting',
+            component: 'view.workflow_task_task-waiting',
+            meta: {
+              title: 'workflow_task_task-waiting',
+              i18nKey: 'route.workflow_task_task-waiting'
+            }
           }
         ]
       }

src/router/elegant/transform.ts

@@ -207,7 +207,8 @@ const routeMap: RouteMap = {
   "workflow_process-instance": "/workflow/process-instance",
   "workflow_task": "/workflow/task",
   "workflow_task_all-task-waiting": "/workflow/task/all-task-waiting",
-  "workflow_task_my-document": "/workflow/task/my-document"
+  "workflow_task_my-document": "/workflow/task/my-document",
+  "workflow_task_task-waiting": "/workflow/task/task-waiting"
 };
 
 /**

src/service/api/workflow/instance.ts

@@ -50,3 +50,12 @@ export function fetchCancelProcessApply(data: Api.Workflow.CancelProcessApplyPar
     data
   });
 }
+
+/** 获取我的待办 */
+export function fetchGetMyDocument(data: Api.Workflow.InstanceSearchParams) {
+  return request<Api.Workflow.InstanceList>({
+    url: '/workflow/instance/pageByCurrent',
+    method: 'get',
+    params: data
+  });
+}

src/service/api/workflow/my-document.ts

@@ -1,11 +0,0 @@
-/** 我的待办 */
-
-import { request } from '@/service/request';
-
-export function fetchGetMyDocument(data: Api.Workflow.InstanceSearchParams) {
-  return request<Api.Workflow.InstanceList>({
-    url: '/workflow/instance/pageByCurrent',
-    method: 'get',
-    params: data
-  });
-}

src/service/api/workflow/task.ts

@@ -69,3 +69,12 @@ export function fetchGetCurrentTaskAllUser(taskId: CommonType.IdType) {
     method: 'get'
   });
 }
+
+/** 获取我的待办 */
+export function fetchGetTaskWaitList(data: Api.Workflow.TaskSearchParams) {
+  return request<Api.Workflow.TaskList>({
+    url: '/workflow/task/pageByTaskWait',
+    method: 'get',
+    params: data
+  });
+}

src/typings/elegant-router.d.ts

@@ -62,6 +62,7 @@ declare module "@elegant-router/types" {
     "workflow_task": "/workflow/task";
     "workflow_task_all-task-waiting": "/workflow/task/all-task-waiting";
     "workflow_task_my-document": "/workflow/task/my-document";
+    "workflow_task_task-waiting": "/workflow/task/task-waiting";
   };
 
   /**
@@ -162,6 +163,7 @@ declare module "@elegant-router/types" {
     | "workflow_process-instance"
     | "workflow_task_all-task-waiting"
     | "workflow_task_my-document"
+    | "workflow_task_task-waiting"
   >;
 
   /**

src/views/workflow/task/my-document/index.vue

@@ -3,9 +3,8 @@ import { computed, ref, shallowRef } from 'vue';
 import { NButton, NDivider, NEmpty, NInput, NTag } from 'naive-ui';
 import { useBoolean, useLoading } from '@sa/hooks';
 import { workflowActivityStatusRecord } from '@/constants/workflow';
-import { fetchBatchDeleteInstance, fetchCancelProcessApply } from '@/service/api/workflow/instance';
+import { fetchBatchDeleteInstance, fetchCancelProcessApply, fetchGetMyDocument } from '@/service/api/workflow/instance';
 import { fetchGetCategoryTree } from '@/service/api/workflow/category';
-import { fetchGetMyDocument } from '@/service/api/workflow/my-document';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDict } from '@/hooks/business/dict';

src/views/workflow/task/task-waiting/index.vue

@@ -0,0 +1,243 @@
+<script setup lang="tsx">
+import { computed, ref, shallowRef } from 'vue';
+import { NButton, NEmpty, NInput, NTag } from 'naive-ui';
+import { useBoolean, useLoading } from '@sa/hooks';
+import { fetchGetCategoryTree } from '@/service/api/workflow/category';
+import { fetchGetTaskWaitList } from '@/service/api/workflow/task';
+import { useAppStore } from '@/store/modules/app';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { useDict } from '@/hooks/business/dict';
+import { loadDynamicComponent } from '@/utils/common';
+import GroupTag from '@/components/custom/group-tag.vue';
+import DictTag from '@/components/custom/dict-tag.vue';
+import ButtonIcon from '@/components/custom/button-icon.vue';
+import { $t } from '@/locales';
+import TaskWaitingSearch from './modules/task-waiting-search.vue';
+
+defineOptions({
+  name: 'TaskWaitingList'
+});
+
+useDict('wf_business_status');
+const appStore = useAppStore();
+const { bool: viewVisible, setTrue: showViewDrawer } = useBoolean();
+const dynamicComponent = shallowRef();
+
+const {
+  columns,
+  columnChecks,
+  data,
+  getData,
+  getDataByPage,
+  loading,
+  mobilePagination,
+  searchParams,
+  resetSearchParams
+} = useTable({
+  apiFn: fetchGetTaskWaitList,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    category: null,
+    flowName: null,
+    flowCode: null,
+    nodeName: null,
+    createByIds: null
+  },
+  columns: () => [
+    {
+      key: 'index',
+      title: $t('common.index'),
+      align: 'center',
+      width: 64
+    },
+    {
+      title: '流程定义名称',
+      key: 'flowName',
+      align: 'center',
+      width: 120
+    },
+    {
+      title: '流程定义编码',
+      key: 'flowCode',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '流程分类',
+      key: 'categoryName',
+      align: 'center',
+      width: 80,
+      render: row => {
+        return <NTag>{row.categoryName}</NTag>;
+      }
+    },
+    {
+      title: '任务名称',
+      key: 'nodeName',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '申请人',
+      key: 'createByName',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '办理人',
+      key: 'assigneeNames',
+      align: 'center',
+      width: 100,
+      render: row => <GroupTag value={row.assigneeNames} />
+    },
+    {
+      title: '流程状态',
+      key: 'flowStatus',
+      align: 'center',
+      width: 80,
+      render(row) {
+        return <DictTag value={row.flowStatus} dict-code="wf_business_status" />;
+      }
+    },
+    {
+      title: '操作',
+      key: 'operate',
+      align: 'center',
+      fixed: 'right',
+      width: 50,
+      render(row) {
+        return (
+          <ButtonIcon
+            text
+            type="primary"
+            icon="ph:check-circle-bold"
+            tooltipContent="办理"
+            onClick={() => handleApproval(row)}
+          />
+        );
+      }
+    }
+  ]
+});
+
+const { checkedRowKeys, editingData: _editingData, handleEdit: _handleEdit } = useTableOperate(data, getData);
+
+const { loading: treeLoading, startLoading: startTreeLoading, endLoading: endTreeLoading } = useLoading();
+const categoryPattern = ref<string>();
+const categoryData = ref<Api.Common.CommonTreeRecord>([]);
+const selectedKeys = ref<string[]>([]);
+const expandedKeys = ref<CommonType.IdType[]>(['100']);
+
+const selectable = computed(() => !loading.value);
+
+async function getTreeData() {
+  startTreeLoading();
+  const { data: tree, error } = await fetchGetCategoryTree();
+  if (!error) {
+    categoryData.value = tree;
+  }
+  endTreeLoading();
+}
+
+getTreeData();
+
+function handleClickTree(keys: string[]) {
+  searchParams.category = keys.length ? keys[0] : null;
+  checkedRowKeys.value = [];
+  getDataByPage();
+}
+
+function handleResetTreeData() {
+  categoryPattern.value = undefined;
+  getTreeData();
+}
+
+function handleResetSearch() {
+  resetSearchParams();
+  selectedKeys.value = [];
+}
+const modules = import.meta.glob('@/components/custom/workflow/**/*.vue');
+const businessId = ref<CommonType.IdType>();
+
+async function handleApproval(row: Api.Workflow.Task) {
+  businessId.value = row.businessId;
+  const formPath = row.formPath;
+  if (formPath) {
+    dynamicComponent.value = await loadDynamicComponent(modules, formPath);
+    showViewDrawer();
+  }
+}
+</script>
+
+<template>
+  <TableSiderLayout sider-title="流程分类列表">
+    <template #header-extra>
+      <NButton size="small" text class="h-18px" @click.stop="() => handleResetTreeData()">
+        <template #icon>
+          <SvgIcon icon="ic:round-refresh" />
+        </template>
+      </NButton>
+    </template>
+    <template #sider>
+      <NInput v-model:value="categoryPattern" clearable :placeholder="$t('common.keywordSearch')" />
+      <NSpin class="category-tree" :show="treeLoading">
+        <NTree
+          v-model:selected-keys="selectedKeys"
+          v-model:expanded-keys="expandedKeys"
+          block-node
+          show-line
+          :data="categoryData as []"
+          :show-irrelevant-nodes="false"
+          :pattern="categoryPattern"
+          class="infinite-scroll h-full min-h-200px py-3"
+          key-field="id"
+          label-field="label"
+          virtual-scroll
+          :selectable="selectable"
+          @update:selected-keys="handleClickTree"
+        >
+          <template #empty>
+            <NEmpty description="暂无分类信息" class="h-full min-h-200px justify-center" />
+          </template>
+        </NTree>
+      </NSpin>
+    </template>
+    <div class="h-full flex-col-stretch gap-12px overflow-hidden lt-sm:overflow-auto">
+      <TaskWaitingSearch v-model:model="searchParams" @reset="handleResetSearch" @search="getDataByPage" />
+      <NCard title="我发起的" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
+        <template #header-extra>
+          <TableHeaderOperation
+            v-model:columns="columnChecks"
+            :disabled-delete="checkedRowKeys.length === 0"
+            :loading="loading"
+            :show-add="false"
+            :show-delete="false"
+            :show-export="false"
+            @refresh="getData"
+          ></TableHeaderOperation>
+        </template>
+        <NDataTable
+          v-model:checked-row-keys="checkedRowKeys"
+          :columns="columns"
+          :data="data"
+          size="small"
+          :flex-height="!appStore.isMobile"
+          :scroll-x="1405"
+          :loading="loading"
+          remote
+          :row-key="row => row.id"
+          :pagination="mobilePagination"
+          class="sm:h-full"
+        />
+        <component
+          :is="dynamicComponent"
+          :visible="viewVisible"
+          operate-type="approval"
+          :business-id="businessId"
+          @submitted="getData"
+        />
+      </NCard>
+    </div>
+  </TableSiderLayout>
+</template>

src/views/workflow/task/task-waiting/modules/task-waiting-search.vue

@@ -0,0 +1,57 @@
+<script setup lang="tsx">
+import { useNaiveForm } from '@/hooks/common/form';
+defineOptions({
+  name: 'TaskWaitingSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const model = defineModel<Api.Workflow.TaskSearchParams>('model', { required: true });
+
+async function reset() {
+  await restoreValidation();
+  emit('reset');
+}
+async function search() {
+  await validate();
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :bordered="false" size="small" class="card-wrapper">
+    <NCollapse>
+      <NCollapseItem :title="$t('common.search')">
+        <NForm ref="formRef" :model="model" label-placement="left" :label-width="100">
+          <NGrid responsive="screen" item-responsive>
+            <NFormItemGi span="6 s:12 m:6" label="流程定义编码" path="flowCode" class="pr-24px">
+              <NInput v-model:value="model.flowCode" placeholder="请输入流程定义编码" />
+            </NFormItemGi>
+            <NFormItemGi span="6" class="pr-24px">
+              <NSpace class="w-full" justify="end">
+                <NButton @click="reset">
+                  <template #icon>
+                    <icon-ic-round-refresh class="text-icon" />
+                  </template>
+                  {{ $t('common.reset') }}
+                </NButton>
+                <NButton type="primary" ghost @click="search">
+                  <template #icon>
+                    <icon-ic-round-search class="text-icon" />
+                  </template>
+                  {{ $t('common.search') }}
+                </NButton>
+              </NSpace>
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+      </NCollapseItem>
+    </NCollapse>
+  </NCard>
+</template>