Merge branch 'master' of http://39.164.159.226:3000/hnsh-smart-steward/smart-steward-admin

apps/web-ele/src/api/system/infoEntry/stationInfo/stationInfo.ts

@@ -15,6 +15,7 @@ enum Api {
   root = '/sysStation/station',
   // 查询所有片区信息
   selectAllSysStationList = '/sysStationArea/area/selectAllSysStationAreaList',
+  selectAllSysStation = '/sysStation/station/selectAllSysStationList'
 }
 
 
@@ -26,6 +27,14 @@ enum Api {
 export function selectAllSysStationAreaList() {
   return requestClient.get<BaseResult<StationInfoModel[]>>(Api.selectAllSysStationList);
 }
+
+/**
+ * 查询所有油站信息
+ * @returns 油站列表
+ */
+export function selectAllSysStation() {
+  return requestClient.get<BaseResult<StationInfoModel[]>>(Api.selectAllSysStation);
+}
 /**
  * 查询油站信息列表
  * @param params 查询参数
@@ -86,4 +95,5 @@ export function deleteStationInfo(ids: number[]) {
  */
 export function exportStationInfo(data: Partial<StationInfoModel>) {
   return commonExport(Api.export, data);
-}
+}
+

apps/web-ele/src/api/workflow/instance/index.ts

@@ -21,7 +21,7 @@ export function getTaskByBusinessId(businessId: string) {
  * @returns
  */
 export function pageByRunning(params?: PageQuery) {
-  return requestClient.get('/workflow/instance/pageByRunning', { params });
+  return requestClient.get('/workOrder/order/myList', { params });
 }
 
 /**
@@ -70,7 +70,7 @@ export function cancelProcessApply(data: { businessId: ID; message?: string }) {
  * @param active
  */
 export function workflowInstanceActive(instanceId: ID, active: boolean) {
-  return requestClient.putWithMsg<void>(
+  return requestClient.put<void>(
     `/workflow/instance/active/${instanceId}?active=${active}`,
   );
 }
@@ -81,13 +81,21 @@ export function workflowInstanceActive(instanceId: ID, active: boolean) {
  * @returns PageResult<Flow>
  */
 export function pageByCurrent(params?: PageQuery) {
-  return requestClient.get<PageResult<TaskInfo>>(
-    '/workflow/instance/pageByCurrent',
+  return requestClient.get<PageResult<TaskInfo>>('/workOrder/order/list',
     { params },
   );
 }
 
 /**
+ * 获取工单详情
+ * @param id 工单id
+ * @returns TaskInfo
+ */
+export function getWorkOrderDetail(id: string) {
+  return requestClient.get<TaskInfo>(`/workOrder/order/${id}`);
+}
+
+/**
  * 获取流程图，流程记录
  * @param businessId 业务标识
  * @returns 流程图，流程记录
@@ -136,4 +144,4 @@ export function updateFlowVariable(data: {
     '/workflow/instance/updateVariable',
     data,
   );
-}
+}

apps/web-ele/src/components/dict/src/index.vue

@@ -15,16 +15,9 @@ const props = withDefaults(defineProps<Props>(), {
   dicts: undefined,
 });
 
-const color = computed<string>(() => {
+const tagType = computed<string>(() => {
   const current = props.dicts.find((item) => item.dictValue == props.value);
-  // // 是否为默认的颜色
-  // const isDefault = Reflect.has(tagTypes, listClass);
-  // // 判断是默认还是自定义颜色
-  // if (isDefault) {
-  //   // 这里做了antd - element-plus的兼容
-  //   return tagTypes[listClass]!.color;
-  // }
-  return current?.listClass ?? 'primary';
+  return current?.listClass ?? 'default';
 });
 
 const cssClass = computed<string>(() => {
@@ -37,16 +30,21 @@ const label = computed<number | string>(() => {
   return current?.dictLabel ?? 'unknown';
 });
 
-const tagComponent = computed(() => (color.value ? ElTag : 'div'));
+// 只有当type是Element Plus支持的类型时才传递type属性
+const elTagType = computed<string | undefined>(() => {
+  const supportedTypes = ['primary', 'success', 'info', 'warning', 'danger'];
+  return supportedTypes.includes(tagType.value) ? tagType.value : undefined;
+});
+
+const tagComponent = computed(() => ElTag);
 </script>
 
 <template>
   <div>
     <component
       :is="tagComponent"
-      :type="color"
+      :type="elTagType"
       :class="cssClass"
-      :color="color"
     >
       {{ label }}
     </component>

apps/web-ele/src/router/routes/local.ts

@@ -144,7 +144,28 @@ const localRoutes: RouteRecordStringComponent[] = [
     name: 'ScheduleDetail',
     path: '/schedule/detail/:taskId',
   },
-  {    component: 'workflow/processDefinition/design',    meta: {      activePath: '/workflow/processDefinition',      icon: 'carbon:data-base',      title: '流程设计',      hideInMenu: true,    },    name: 'WorkflowDesign',    path: '/workflow/design/index',  },
+  {    
+    component: 'workflow/processDefinition/design',    
+    meta: {      
+      activePath: '/workflow/processDefinition',      
+      icon: 'carbon:data-base',      
+      title: '流程设计',      
+      hideInMenu: true,    
+    },    
+    name: 'WorkflowDesign',    
+    path: '/workflow/design/index',  
+  },
+  {    
+    component: '/workflow/order/creatOrder',    
+    meta: {      
+      activePath: '/workflow/order',      
+      icon: 'carbon:add',      
+      title: '创建工单',      
+      hideInMenu: false,    
+    },    
+    name: 'WorkflowCreatOrder',    
+    path: '/workflow/order/create',  
+  },
   // 新增路由开始
   {
     component: '/examManage/questScoring/cpn/examScoring/index',
@@ -298,3 +319,4 @@ export const localMenuList: RouteRecordStringComponent[] = [
 
 
 
+

apps/web-ele/src/utils/render.tsx

@@ -110,13 +110,16 @@ export function renderHttpMethodTag(type: string) {
     PUT: 'orange',
   };
 
-  const color = colors[method] ?? 'default';
+  const color = colors[method] ?? 'primary'; // 将default改为primary
   const title = `${method}请求`;
 
   return <ElTag color={color}>{title}</ElTag>;
 }
 
-export function renderDictTag(value: string, dicts: DictData[]) {
+export function renderDictTag(value: string | undefined, dicts: DictData[]) {
+  if (!value) {
+    return <div></div>;
+  }
   return <DictTag dicts={dicts} value={value}></DictTag>;
 }
 
@@ -155,7 +158,10 @@ export function renderDictTags(
  * @param dictName dictName
  * @returns tag
  */
-export function renderDict(value: string, dictName: string) {
+export function renderDict(value: string | undefined, dictName: string) {
+  if (!value) {
+    return <div></div>;
+  }
   const dictInfo = getDictOptions(dictName);
   return renderDictTag(value, dictInfo);
 }
@@ -228,3 +234,5 @@ export function renderBrowserIcon(browser: string, center = false) {
   const icon = current ? current.icon : DefaultBrowserIcon;
   return renderIconSpan(icon, browser, center, '5px');
 }
+
+

apps/web-ele/src/views/workflow/components/actions/flow-actions.vue

@@ -384,21 +384,21 @@ const showMultiActions = computed(() => {
                 key="2"
                 @click="() => transferDrawerApi.open()"
               >
-                <ElRollback class="mr-2" /> 转办
+               转办
               </ElMenuItem>
               <ElMenuItem
                 v-if="showMultiActions && buttonPermissions?.addSign"
                 key="3"
                 @click="() => addSignatureDrawerApi.open()"
               >
-                <ElUserPlus class="mr-2" /> 加签
+               加签
               </ElMenuItem>
               <ElMenuItem
                 v-if="showMultiActions && buttonPermissions?.subSign"
                 key="4"
                 @click="() => reductionSignatureDrawerApi.open()"
               >
-                <ElUserMinus class="mr-2" /> 减签
+                减签
               </ElMenuItem>
             </ElMenu>
           </template>

apps/web-ele/src/views/workflow/components/approval-card.vue

@@ -45,16 +45,14 @@ const diffUpdateTimeString = computed(() => {
   >
     <ElDescriptions
       :column="1"
-      :title="info.businessTitle ?? info.flowName"
+      :title="info.orderNo"
       size="large"
     >
       <template #extra>
-        <component
-          :is="renderDict(info.flowStatus, DictEnum.WF_BUSINESS_STATUS)"
-        />
+        <component :is="renderDict(info.status, DictEnum.TICKET_STATUS)" />
       </template>
-      <ElDescriptionsItem label="当前任务">
-        <div class="font-bold">{{ info.nodeName }}</div>
+      <ElDescriptionsItem>
+        <div class="font-bold">{{ info.content }}</div>
       </ElDescriptionsItem>
       <ElDescriptionsItem label="提交时间">
         {{ info.createTime }}
@@ -66,12 +64,12 @@ const diffUpdateTimeString = computed(() => {
     <div class="flex w-full items-center justify-between text-[14px]">
       <div class="flex items-center gap-1 overflow-hidden whitespace-nowrap">
         <VbenAvatar
-          :alt="info?.createByName"
+          :alt="info?.currentHandler"
           class="bg-primary size-[24px] rounded-full text-[10px] text-white"
           src=""
         />
         <span class="overflow-hidden text-ellipsis opacity-50">
-          {{ info.createByName }}
+          {{ info.currentHandler }}
         </span>
       </div>
       <div class="text-nowrap opacity-50">

apps/web-ele/src/views/workflow/components/approval-details.vue

@@ -3,13 +3,8 @@
 动态渲染要显示的内容 需要再flowDescripionsMap先定义好组件
 -->
 <script setup lang="ts">
-import type { FlowComponentsMapMapKey } from '../register';
-
-import type { FlowInfoResponse } from '#/api/workflow/instance/model';
 import type { TaskInfo } from '#/api/workflow/task/model';
 
-import { Divider } from 'element-plus';
-
 import { ApprovalTimeline } from '.';
 import { flowComponentsMap } from '../register';
 
@@ -19,7 +14,6 @@ defineOptions({
 });
 
 defineProps<{
-  currentFlowInfo: FlowInfoResponse;
   task: TaskInfo;
 }>();
 </script>
@@ -30,11 +24,11 @@ defineProps<{
      动态渲染要显示的内容 需要再flowDescripionsMap先定义好组件
      business-id为业务ID 必传
     -->
+    <!-- <component :is="flowComponentsMap[task.formPath as FlowComponentsMapMapKey]" :business-id="task.businessId" /> -->
     <component
-      :is="flowComponentsMap[task.formPath as FlowComponentsMapMapKey]"
-      :business-id="task.businessId"
+      :is="flowComponentsMap['/workflow/leaveEdit/index']"
+      :task="task"
     />
-    <el-divider />
-    <ApprovalTimeline :list="currentFlowInfo.list" />
+    <ApprovalTimeline :id="task.id" />
   </div>
 </template>

apps/web-ele/src/views/workflow/components/approval-panel.vue

@@ -15,16 +15,14 @@ import { DictEnum } from '@vben/constants';
 import { cn } from '@vben/utils';
 
 // import { Copy } from '@element-plus/icons-vue';
+import { CopyDocument } from '@element-plus/icons-vue';
 import { useClipboard } from '@vueuse/core';
-import { ElCard, ElDivider, ElMessage, ElTabPane, ElTabs } from 'element-plus';
+import { ElCard, ElMessage, ElTabPane, ElTabs } from 'element-plus';
 
-import { flowInfo } from '#/api/workflow/instance';
-import { getTaskByTaskId } from '#/api/workflow/task';
 import { renderDict } from '#/utils/render';
 
 import { FlowActions } from './actions';
 import ApprovalDetails from './approval-details.vue';
-import FlowPreview from './flow-preview.vue';
 
 defineOptions({
   name: 'ApprovalPanel',
@@ -97,23 +95,23 @@ async function handleLoadInfo(task: TaskInfo | undefined) {
     /**
      * 不为审批不需要调用`getTaskByTaskId`接口
      */
-    if (props.type !== 'approve') {
-      const flowResp = await flowInfo(task.businessId);
-      currentFlowInfo.value = flowResp;
-      return;
-    }
+    // if (props.type !== 'approve') {
+    //   const flowResp = await flowInfo(task.businessId);
+    //   currentFlowInfo.value = flowResp;
+    //   return;
+    // }
 
     /**
      * getTaskByTaskId主要为了获取按钮权限 目前没有其他功能
      * 行数据(即props.task)获取的是没有按钮权限的
      */
-    const [flowResp, taskResp] = await Promise.all([
-      flowInfo(task.businessId),
-      getTaskByTaskId(task.id),
-    ]);
+    // const [flowResp, taskResp] = await Promise.all([
+    //   flowInfo(task.businessId),
+    //   getTaskByTaskId(task.id),
+    // ]);
 
-    currentFlowInfo.value = flowResp;
-    onlyForBtnPermissionTask.value = taskResp;
+    // currentFlowInfo.value = flowResp;
+    // onlyForBtnPermissionTask.value = taskResp;
   } catch (error) {
     console.error(error);
   } finally {
@@ -143,13 +141,6 @@ async function handleCopy(text: string) {
       class="thin-scrollbar flex-1 overflow-y-hidden"
       size="small"
     >
-      <template #title>
-        <div class="flex items-center gap-2">
-          <div>编号: {{ task.id }}</div>
-          <!-- <Copy class="cursor-pointer" @click="handleCopy(task.id)" /> -->
-        </div>
-      </template>
-
       <template #extra>
         <el-button size="small" @click="() => handleLoadInfo(task)">
           <div class="flex items-center justify-center">
@@ -162,32 +153,33 @@ async function handleCopy(text: string) {
         <div class="flex flex-col gap-3">
           <div class="flex items-center gap-2">
             <div class="text-2xl font-bold">
-              {{ task.businessTitle ?? task.flowName }}
+              {{ task.orderNo }}
             </div>
+            <el-icon @click="() => handleCopy(task.orderNo)">
+              <CopyDocument />
+            </el-icon>
             <div>
               <component
-                :is="renderDict(task.flowStatus, DictEnum.WF_BUSINESS_STATUS)"
+                :is="renderDict(task.status, DictEnum.TICKET_STATUS)"
               />
             </div>
           </div>
 
           <div class="flex items-center gap-2">
             <VbenAvatar
-              :alt="task?.createByName ?? ''"
+              :alt="task?.createBy ?? ''"
               class="bg-primary size-[28px] rounded-full text-white"
               src=""
             />
 
-            <span>{{ task.createByName }}</span>
+            <span>{{ task.createBy }}</span>
 
             <div class="flex items-center opacity-50">
               <div class="flex items-center gap-1">
                 <span class="icon-[bxs--category-alt] size-[16px]"></span>
-                流程分类: {{ task.categoryName }}
+                流程分类: {{ task.ticketTypeName }}
               </div>
 
-              <ElDivider direction="vertical" />
-
               <div class="flex items-center gap-1">
                 <span class="icon-[mdi--clock-outline] size-[16px]"></span>
                 提交时间: {{ task.createTime }}
@@ -196,17 +188,17 @@ async function handleCopy(text: string) {
           </div>
         </div>
 
-        <ElTabs v-if="currentFlowInfo" class="flex-1">
-          <ElTabPane key="1" label="审批详情">
+        <ElTabs class="flex-1">
+          <ElTabPane key="1" label="工单详情">
             <ApprovalDetails
               :current-flow-info="currentFlowInfo"
               :task="task"
             />
           </ElTabPane>
 
-          <ElTabPane key="2" label="审批流程图">
+          <!-- <ElTabPane key="2" label="审批流程图">
             <FlowPreview :instance-id="currentFlowInfo.instanceId" />
-          </ElTabPane>
+          </ElTabPane> -->
         </ElTabs>
       </div>
 

apps/web-ele/src/views/workflow/components/approval-timeline.vue

@@ -1,19 +1,37 @@
 <script setup lang="ts">
-import type { Flow } from '#/api/workflow/instance/model';
+import { onMounted, shallowRef } from 'vue';
+
+import { ElEmpty, ElMessage, ElTimeline } from 'element-plus';
+
+import { requestClient } from '#/api/request';
 
-// import { Empty, Timeline } from 'ant-design-vue';
 import ApprovalTimelineItem from './approval-timeline-item.vue';
 
 interface Props {
-  list: Flow[];
+  id: string;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+const list = shallowRef([]);
+
+onMounted(async () => {
+  if (!props.id) return;
+
+  try {
+    const resp = await requestClient.get('/workOrderRecord/record/list', {
+      params: { orderId: props.id },
+    });
+    list.value = resp.data;
+    console.log(resp.data);
+  } catch {
+    ElMessage.error('获取工单记录失败');
+  }
+});
 </script>
 
 <template>
-  <Timeline v-if="list.length > 0">
+  <ElTimeline v-if="id">
     <ApprovalTimelineItem v-for="item in list" :key="item.id" :item="item" />
-  </Timeline>
-  <Empty v-else />
+  </ElTimeline>
+  <ElEmpty v-else />
 </template>

apps/web-ele/src/views/workflow/leave/api/index.ts

@@ -0,0 +1,74 @@
+import type { LeaveForm, LeaveQuery, LeaveVO } from './model';
+
+import type { ID, IDS, PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+/**
+ * 查询请假申请列表
+ * @param params
+ * @returns 请假申请列表
+ */
+export function leaveList(params?: LeaveQuery) {
+  return requestClient.get<PageResult<LeaveVO>>('/workflow/leave/list', {
+    params,
+  });
+}
+
+/**
+ * 导出请假申请列表
+ * @param params
+ * @returns 请假申请列表
+ */
+export function leaveExport(params?: LeaveQuery) {
+  return commonExport('/workflow/leave/export', params ?? {});
+}
+
+/**
+ * 查询请假申请详情
+ * @param id id
+ * @returns 请假申请详情
+ */
+export function leaveInfo(id: ID) {
+  return requestClient.get<LeaveVO>(`/workflow/leave/${id}`);
+}
+
+/**
+ * 新增请假申请
+ * @param data
+ * @returns void
+ */
+export function leaveAdd(data: LeaveForm) {
+  return requestClient.postWithMsg<LeaveVO>('/workflow/leave', data);
+}
+
+/**
+ * 更新请假申请
+ * @param data
+ * @returns void
+ */
+export function leaveUpdate(data: LeaveForm) {
+  return requestClient.putWithMsg<LeaveVO>('/workflow/leave', data);
+}
+
+/**
+ * 删除请假申请
+ * @param id id
+ * @returns void
+ */
+export function leaveRemove(id: ID | IDS) {
+  return requestClient.deleteWithMsg<void>(`/workflow/leave/${id}`);
+}
+
+/**
+ * 提交 & 发起流程(后端发起)
+ * @param data data
+ * @returns void
+ */
+export function submitAndStartWorkflow(data: LeaveForm) {
+  return requestClient.postWithMsg<void>(
+    '/workflow/leave/submitAndFlowStart',
+    data,
+  );
+}

apps/web-ele/src/views/workflow/leave/api/model.d.ts

@@ -0,0 +1,138 @@
+import type { BaseEntity, PageQuery } from '#/api/common';
+
+export interface LeaveVO {
+  /**
+   * 主键
+   */
+  id: number | string;
+
+  /**
+   * 工单类型
+   */
+  ticketTypeName: string;
+
+  /**
+   * 场站名称
+   */
+  stationName: string;
+
+  /**
+   * 填报内容
+   */
+  content: string;
+
+  /**
+   * 附件
+   */
+  attachment: string;
+
+  /**
+   * 请假类型
+   */
+  leaveType: string;
+
+  /**
+   * 联系人
+   */
+  contact: string;
+
+  /**
+   * 联系电话
+   */
+  phone: string;
+
+  /**
+   * 开始时间
+   */
+  startDate: string;
+
+  /**
+   * 结束时间
+   */
+  endDate: string;
+
+  /**
+   * 请假天数
+   */
+  leaveDays: number;
+
+  /**
+   * 请假原因
+   */
+  remark: string;
+
+  /**
+   * 状态 0：草稿 1：已提交 2：已同意 3：已拒绝
+   */
+  status: string;
+  applyCode?: string;
+}
+
+export interface LeaveForm extends BaseEntity {
+  /**
+   * 主键
+   */
+  id?: number | string;
+
+  /**
+   * 请假类型
+   */
+  leaveType?: string;
+
+  /**
+   * 开始时间
+   */
+  startDate?: string;
+
+  /**
+   * 结束时间
+   */
+  endDate?: string;
+
+  /**
+   * 请假天数
+   */
+  leaveDays?: number;
+
+  /**
+   * 请假原因
+   */
+  remark?: string;
+
+  /**
+   *
+   */
+  status?: string;
+}
+
+export interface LeaveQuery extends PageQuery {
+  /**
+   * 请假类型
+   */
+  leaveType?: string;
+
+  /**
+   * 开始时间
+   */
+  startDate?: string;
+
+  /**
+   * 结束时间
+   */
+  endDate?: string;
+
+  /**
+   * 请假天数
+   */
+  leaveDays?: number;
+
+  /**
+   *
+   */
+  status?: string;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}

apps/web-ele/src/views/workflow/leave/data.tsx

@@ -0,0 +1,189 @@
+import type { FormSchemaGetter, VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+import { OptionsTag } from '#/components/table';
+import { renderDict } from '#/utils/render';
+
+export const leaveTypeOptions = [
+  { label: '病假 😷', value: '1' },
+  { label: '事假 🖥', value: '2' },
+  { label: '年假 🏝', value: '3' },
+  { label: '婚假 💒', value: '4' },
+  { label: '产假 🤰', value: '5' },
+  { label: '其他 🤔', value: '7' },
+];
+
+export const leaveFlowOptions = [
+  { label: '请假流程-普通', value: 'leave1' },
+  { label: '请假流程-排他网关', value: 'leave2' },
+  { label: '请假流程-并行网关', value: 'leave3' },
+  { label: '请假流程-会签', value: 'leave4' },
+  { label: '请假申请-并行会签网关', value: 'leave5' },
+  { label: '请假申请-排他并行网关', value: 'leave6' },
+];
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'InputNumber',
+    componentProps: {
+      min: 1,
+    },
+    fieldName: 'startLeaveDays',
+    label: '请假天数',
+  },
+  {
+    component: 'InputNumber',
+    componentProps: {
+      min: 1,
+    },
+    fieldName: 'endLeaveDays',
+    label: '至',
+    labelClass: 'justify-center',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '请假类型',
+    field: 'leaveType',
+    slots: {
+      default: ({ row }) => {
+        return <OptionsTag options={leaveTypeOptions} value={row.leaveType} />;
+      },
+    },
+  },
+  {
+    title: '开始时间',
+    field: 'startDate',
+    formatter: ({ cellValue }) => dayjs(cellValue).format('YYYY-MM-DD'),
+  },
+  {
+    title: '结束时间',
+    field: 'endDate',
+    formatter: ({ cellValue }) => dayjs(cellValue).format('YYYY-MM-DD'),
+  },
+  {
+    title: '请假天数',
+    field: 'leaveDays',
+    formatter: ({ cellValue }) => `${cellValue}天`,
+  },
+  {
+    title: '请假原因',
+    field: 'remark',
+  },
+  {
+    title: '流程状态',
+    field: 'status',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.status, DictEnum.WF_BUSINESS_STATUS);
+      },
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const formSchema: () => VbenFormSchema[] = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '流程类型',
+    fieldName: 'flowType',
+    component: 'Select',
+    help: '这里仅仅为了发起流程方便, 实际不应该包含此字段',
+    componentProps: {
+      options: leaveFlowOptions,
+      getPopupContainer,
+    },
+    defaultValue: 'leave1',
+    rules: 'selectRequired',
+    dependencies: {
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '发起类型',
+    fieldName: 'type',
+    component: 'Select',
+    help: '这里仅仅为了测试, 实际不应该包含此字段',
+    componentProps: {
+      options: [
+        {
+          label: '前端发起 (可选审批人, 选抄送人, 上传附件)',
+          value: 'frontend',
+        },
+        {
+          label: '后端发起 (自行编写后端逻辑, 由后端发起流程)',
+          value: 'backend',
+        },
+      ],
+      getPopupContainer,
+    },
+    defaultValue: 'frontend',
+  },
+  {
+    label: '请假类型',
+    fieldName: 'leaveType',
+    component: 'Select',
+    componentProps: {
+      options: leaveTypeOptions,
+      getPopupContainer,
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '开始时间',
+    fieldName: 'dateRange',
+    component: 'RangePicker',
+    componentProps(model) {
+      return {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        onChange: (dates: [string, string]) => {
+          if (!dates) {
+            model.leaveDays = null;
+            return;
+          }
+          const [start, end] = dates;
+          const leaveDays = dayjs(end).diff(dayjs(start), 'day') + 1;
+          model.leaveDays = leaveDays;
+        },
+      };
+    },
+    rules: 'required',
+  },
+  {
+    label: '请假天数',
+    fieldName: 'leaveDays',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    // rules: 'required',
+  },
+  {
+    label: '请假原因',
+    fieldName: 'remark',
+    component: 'Textarea',
+  },
+];

apps/web-ele/src/views/workflow/leave/hook.ts

@@ -0,0 +1,33 @@
+import { onActivated, onMounted, ref } from 'vue';
+
+import { createGlobalState } from '@vueuse/core';
+
+export function useRouteIdEdit(callback: (id: string) => void, timeout = 500) {
+  const { businessId } = useQueryId();
+  function openEditFromRouteId() {
+    const id = businessId.value;
+    if (!id) {
+      return;
+    }
+    setTimeout(() => {
+      // 回调
+      callback?.(id);
+      // 执行完 清理id
+      businessId.value = '';
+    }, timeout);
+  }
+
+  onMounted(openEditFromRouteId);
+  onActivated(openEditFromRouteId);
+}
+
+/**
+ * 用来存储业务ID 传值
+ */
+export const useQueryId = createGlobalState(() => {
+  const businessId = ref('');
+
+  return {
+    businessId,
+  };
+});

apps/web-ele/src/views/workflow/leave/index.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { LeaveForm } from './api/model';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import { cancelProcessApply } from '#/api/workflow/instance';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { applyModal, flowInfoModal } from '../components';
+import { leaveExport, leaveList, leaveRemove } from './api';
+import { columns, querySchema } from './data';
+import { useRouteIdEdit } from './hook';
+import leaveDrawer from './leave-drawer.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 选中 需要根据状态判断
+    checkMethod: ({ row }) => ['back', 'cancel', 'draft'].includes(row.status),
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await leaveList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'workflow-leave-index',
+  cellClassName: ({ row }) => {
+    // 草稿状态 可点击
+    if (row.status !== 'draft') {
+      return 'cursor-pointer';
+    }
+  },
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    cellClick: ({ row, column }) => {
+      // 草稿状态 不做处理
+      // 操作列 不做处理
+      if (row.status === 'draft' || column.field === 'action') {
+        return;
+      }
+      // 查看详情
+      handleInfo(row);
+    },
+  },
+});
+
+const [ApplyModal, applyModalApi] = useVbenModal({
+  connectedComponent: applyModal,
+});
+const [LeaveDrawer, leaveDrawerApi] = useVbenDrawer({
+  connectedComponent: leaveDrawer,
+});
+
+function handleAdd() {
+  leaveDrawerApi.setData({ applyModalApi }).open();
+}
+
+async function handleEdit(row: Required<LeaveForm>) {
+  leaveDrawerApi.setData({ id: row.id, applyModalApi }).open();
+}
+
+useRouteIdEdit((id) => {
+  // 打开编辑
+  leaveDrawerApi.setData({ id, applyModalApi }).open();
+});
+
+async function handleCompleteOrCancel() {
+  leaveDrawerApi.close();
+  tableApi.query();
+}
+
+async function handleDelete(row: Required<LeaveForm>) {
+  await leaveRemove(row.id);
+  await tableApi.query();
+}
+
+async function handleRevoke(row: Required<LeaveForm>) {
+  await cancelProcessApply({
+    businessId: row.id,
+    message: '申请人撤销流程！',
+  });
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<LeaveForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await leaveRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(
+    leaveExport,
+    '请假申请数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
+const [FlowInfoModal, flowInfoModalApi] = useVbenModal({
+  connectedComponent: flowInfoModal,
+});
+
+function handleInfo(row: Required<LeaveForm>) {
+  flowInfoModalApi.setData({ businessId: row.id });
+  flowInfoModalApi.open();
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="请假申请列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['workflow:leave:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['workflow:leave:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['workflow:leave:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <a-button
+          size="small"
+          type="link"
+          :disabled="!['draft', 'cancel', 'back'].includes(row.status)"
+          v-access:code="['workflow:leave:edit']"
+          @click.stop="handleEdit(row)"
+        >
+          {{ $t('pages.common.edit') }}
+        </a-button>
+        <Popconfirm
+          :get-popup-container="getVxePopupContainer"
+          placement="left"
+          title="确认撤销？"
+          :disabled="!['waiting'].includes(row.status)"
+          @confirm.stop="handleRevoke(row)"
+          @cancel.stop=""
+        >
+          <a-button
+            size="small"
+            type="link"
+            :disabled="!['waiting'].includes(row.status)"
+            v-access:code="['workflow:leave:edit']"
+            @click.stop=""
+          >
+            撤销
+          </a-button>
+        </Popconfirm>
+        <Popconfirm
+          :get-popup-container="getVxePopupContainer"
+          placement="left"
+          title="确认删除？"
+          :disabled="!['draft', 'cancel', 'back'].includes(row.status)"
+          @confirm.stop="handleDelete(row)"
+          @cancel.stop=""
+        >
+          <a-button
+            size="small"
+            type="link"
+            :disabled="!['draft', 'cancel', 'back'].includes(row.status)"
+            danger
+            v-access:code="['workflow:leave:remove']"
+            @click.stop=""
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+        </Popconfirm>
+      </template>
+    </BasicTable>
+    <FlowInfoModal />
+    <ApplyModal
+      @complete="handleCompleteOrCancel"
+      @cancel="handleCompleteOrCancel"
+    />
+    <LeaveDrawer @reload="() => tableApi.query()" />
+  </Page>
+</template>

apps/web-ele/src/views/workflow/leave/leave-description.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { LeaveVO } from '../leave/api/model';
+
+import { onMounted, shallowRef } from 'vue';
+
+import dayjs from 'dayjs';
+
+defineOptions({
+  name: 'LeaveDescription',
+  inheritAttrs: false,
+});
+
+const props = defineProps<{ task: LeaveVO }>();
+
+const data = shallowRef<LeaveVO>();
+onMounted(async () => {
+  data.value = props.task;
+});
+
+function formatDate(date: string) {
+  return dayjs(date).format('YYYY-MM-DD');
+}
+</script>
+
+<template>
+  <div class="rounded-[6px] border p-2">
+    <ElDescriptions v-if="data" :column="1">
+      <ElDescriptionsItem label="工单类型：">
+        {{ data.ticketTypeName }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="场站：">
+        {{ data.stationName || '无' }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="联系人：">
+        {{ data.contact || '无' }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="联系电话：">
+        {{ data.phone || '无' }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="提报内容：">
+        {{ data.content || '无' }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="附件：">
+        {{ data.attachment || '无' }}
+      </ElDescriptionsItem>
+    </ElDescriptions>
+
+    <ElSkeleton active v-else :rows="4" />
+  </div>
+</template>

apps/web-ele/src/views/workflow/leave/leave-drawer.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import type { ExtendedModalApi } from '@vben/common-ui';
+
+import type { StartWorkFlowReqData } from '#/api/workflow/task/model';
+
+import { computed, ref, shallowRef } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import dayjs from 'dayjs';
+import { omit } from 'lodash-es';
+
+import { useVbenForm } from '#/adapter/form';
+import { startWorkFlow } from '#/api/workflow/task';
+
+import {
+  leaveAdd,
+  leaveInfo,
+  leaveUpdate,
+  submitAndStartWorkflow,
+} from './api';
+import { formSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  layout: 'vertical',
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  schema: formSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const modalApi = shallowRef<ExtendedModalApi | null>(null);
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  closeOnClickModal: false,
+  onClosed: handleClosed,
+  onConfirm: handleStartWorkFlow,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+
+    const { id, applyModalApi } = drawerApi.getData() as {
+      applyModalApi: ExtendedModalApi;
+      id?: number | string;
+    };
+    modalApi.value = applyModalApi;
+    isUpdate.value = !!id;
+    // 赋值
+    if (isUpdate.value && id) {
+      const resp = await leaveInfo(id);
+      await formApi.setValues(resp);
+      const dateRange = [dayjs(resp.startDate), dayjs(resp.endDate)];
+      await formApi.setFieldValue('dateRange', dateRange);
+    }
+
+    drawerApi.drawerLoading(false);
+  },
+});
+
+async function handleClosed() {
+  await formApi.resetForm();
+}
+
+/**
+ * 获取已经处理好的表单参数
+ */
+async function getFormData() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    throw new Error('表单验证失败');
+  }
+  let data = cloneDeep(await formApi.getValues()) as any;
+  data = omit(data, 'flowType', 'type');
+  // 处理日期
+  data.startDate = dayjs(data.dateRange[0]).format('YYYY-MM-DD HH:mm:ss');
+  data.endDate = dayjs(data.dateRange[1]).format('YYYY-MM-DD HH:mm:ss');
+  return data;
+}
+
+/**
+ * 暂存/提交 提取通用逻辑
+ */
+async function handleSaveOrUpdate() {
+  const data = await getFormData();
+  return await (isUpdate.value ? leaveUpdate(data) : leaveAdd(data));
+}
+
+/**
+ * 暂存 草稿状态
+ */
+async function handleTempSave() {
+  try {
+    await handleSaveOrUpdate();
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+/**
+ * 保存业务 & 发起流程
+ */
+async function handleStartWorkFlow() {
+  drawerApi.lock(true);
+  try {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 获取发起类型
+    const { type } = await formApi.getValues();
+    /**
+     * 这里只是demo 实际只会用到一种
+     */
+    switch (type) {
+      // 后端发起流程
+      case 'backend': {
+        const data = await getFormData();
+        await submitAndStartWorkflow(data);
+        emit('reload');
+        drawerApi.close();
+        break;
+      }
+      // 前端发起流程
+      case 'frontend': {
+        // 保存业务
+        const leaveResp = await handleSaveOrUpdate();
+        // 启动流程
+        const taskVariables = {
+          leaveDays: leaveResp!.leaveDays,
+          userList: ['1', '3', '4'],
+        };
+        const formValues = await formApi.getValues();
+        const flowCode = formValues?.flowType ?? 'leave1';
+        const startWorkFlowData: StartWorkFlowReqData = {
+          businessId: leaveResp!.id,
+          flowCode,
+          variables: taskVariables,
+          flowInstanceBizExtBo: {
+            businessTitle: '请假申请 - 自定义标题',
+            businessCode: leaveResp!.applyCode,
+          },
+        };
+        const { taskId } = await startWorkFlow(startWorkFlowData);
+        // 打开窗口
+        modalApi.value?.setData({
+          taskId,
+          taskVariables,
+          variables: {},
+        });
+        modalApi.value?.open();
+        break;
+      }
+    }
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.lock(false);
+  }
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[600px]">
+    <BasicForm />
+    <template #center-footer>
+      <a-button @click="handleTempSave">暂存</a-button>
+    </template>
+  </BasicDrawer>
+</template>

apps/web-ele/src/views/workflow/leave/leave-form.vue

@@ -0,0 +1,197 @@
+<!--
+这个文件用不上  已经更改交互为drawer
+-->
+
+<script setup lang="ts">
+import type { StartWorkFlowReqData } from '#/api/workflow/task/model';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { Card, Spin } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { cloneDeep, omit } from 'lodash-es';
+
+import { useVbenForm } from '#/adapter/form';
+import { startWorkFlow } from '#/api/workflow/task';
+
+import { applyModal } from '../components';
+import {
+  leaveAdd,
+  leaveInfo,
+  leaveUpdate,
+  submitAndStartWorkflow,
+} from './api';
+import { formSchema } from './data';
+
+const route = useRoute();
+const id = route.query?.id as string;
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 100,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: formSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const loading = ref(false);
+onMounted(async () => {
+  // 只读 获取信息赋值
+  if (id) {
+    loading.value = true;
+
+    const resp = await leaveInfo(id);
+    await formApi.setValues(resp);
+    const dateRange = [dayjs(resp.startDate), dayjs(resp.endDate)];
+    await formApi.setFieldValue('dateRange', dateRange);
+
+    loading.value = false;
+  }
+});
+
+const router = useRouter();
+
+/**
+ * 获取已经处理好的表单参数
+ */
+async function getFormData() {
+  let data = cloneDeep(await formApi.getValues()) as any;
+  data = omit(data, 'flowType', 'type');
+  // 处理日期
+  data.startDate = dayjs(data.dateRange[0]).format('YYYY-MM-DD HH:mm:ss');
+  data.endDate = dayjs(data.dateRange[1]).format('YYYY-MM-DD HH:mm:ss');
+  return data;
+}
+
+/**
+ * 暂存/提交 提取通用逻辑
+ */
+async function handleSaveOrUpdate() {
+  const data = await getFormData();
+  if (id) {
+    data.id = id;
+    return await leaveUpdate(data);
+  } else {
+    return await leaveAdd(data);
+  }
+}
+
+const [ApplyModal, applyModalApi] = useVbenModal({
+  connectedComponent: applyModal,
+});
+/**
+ * 暂存 草稿状态
+ */
+async function handleTempSave() {
+  try {
+    await handleSaveOrUpdate();
+    router.push('/demo/leave');
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+/**
+ * 保存业务 & 发起流程
+ */
+async function handleStartWorkFlow() {
+  loading.value = true;
+  try {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 获取发起类型
+    const { type } = await formApi.getValues();
+    /**
+     * 这里只是demo 实际只会用到一种
+     */
+    switch (type) {
+      // 后端发起流程
+      case 'backend': {
+        const data = await getFormData();
+        await submitAndStartWorkflow(data);
+        await handleCompleteOrCancel();
+        break;
+      }
+      // 前端发起流程
+      case 'frontend': {
+        // 保存业务
+        const leaveResp = await handleSaveOrUpdate();
+        // 启动流程
+        const taskVariables = {
+          leaveDays: leaveResp!.leaveDays,
+          userList: ['1', '3', '4'],
+        };
+        const formValues = await formApi.getValues();
+        const flowCode = formValues?.flowType ?? 'leave1';
+        const startWorkFlowData: StartWorkFlowReqData = {
+          businessId: leaveResp!.id,
+          flowCode,
+          variables: taskVariables,
+          flowInstanceBizExtBo: {
+            businessTitle: '请假申请 - 自定义标题',
+            businessCode: leaveResp!.applyCode,
+          },
+        };
+        const { taskId } = await startWorkFlow(startWorkFlowData);
+        // 打开窗口
+        applyModalApi.setData({
+          taskId,
+          taskVariables,
+          variables: {},
+        });
+        applyModalApi.open();
+        break;
+      }
+    }
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+const { closeCurrentTab } = useTabs();
+
+/**
+ * 通用提交/取消回调
+ *
+ * 提交后点击取消 这时候已经变成草稿状态了
+ * 每次点击都会生成新记录 直接跳转回列表
+ */
+async function handleCompleteOrCancel() {
+  formApi.resetForm();
+  await closeCurrentTab();
+  router.push('/demo/leave');
+}
+</script>
+
+<template>
+  <Spin :spinning="loading">
+    <Card>
+      <BasicForm />
+      <div class="flex justify-end gap-2">
+        <a-button @click="handleTempSave">暂存</a-button>
+        <a-button type="primary" @click="handleStartWorkFlow">提交</a-button>
+      </div>
+      <ApplyModal
+        :modal-api="applyModalApi"
+        @complete="handleCompleteOrCancel"
+        @cancel="handleCompleteOrCancel"
+      />
+    </Card>
+  </Spin>
+</template>

apps/web-ele/src/views/workflow/leave/leaveEdit.vue

@@ -0,0 +1,43 @@
+<!--
+后端版本>=5.4.0  这个从本地路由变为从后台返回
+未修改文件名 而是新加了这个文件
+-->
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useTabs } from '@vben/hooks';
+
+import { Spin } from 'ant-design-vue';
+
+import { useQueryId } from './hook';
+
+const router = useRouter();
+const route = useRoute();
+const id = route.query.id as string;
+
+/**
+ * 从我的任务 -> 点击重新编辑会跳转到这里
+ * 相当于一个中转 因为我的任务无法获取到列表页的路径(与ele交互不同)
+ *
+ * 为什么不使用路由的query来实现?
+ * 因为刷新后参数不会丢失 且tab存的也是全路径 切换也不会丢失 这不符合预期
+ * 可以通过window.history.replaceState来删除query参数 但是tab切换还是会保留
+ */
+const { closeCurrentTab } = useTabs();
+const { businessId } = useQueryId();
+onMounted(async () => {
+  await closeCurrentTab();
+  if (id) {
+    // 设置业务ID 存储在内存
+    businessId.value = id;
+    router.push({ path: '/demo/leave' });
+  }
+});
+</script>
+
+<template>
+  <div>
+    <Spin :spinning="true" />
+  </div>
+</template>

apps/web-ele/src/views/workflow/order/creatOrder.vue

@@ -0,0 +1,246 @@
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import { Page } from '@vben/common-ui';
+import { ElForm, ElFormItem, ElInput, ElSelect, ElUpload, ElSwitch, ElButton, ElMessage, ElTreeSelect } from 'element-plus';
+import { UploadFilled } from '@element-plus/icons-vue';
+import { categoryTree } from '#/api/workflow/category/index';
+import { selectAllSysStation } from '#/api/system/infoEntry/stationInfo/stationInfo';
+import { getSingleImageUploadConfig } from '#/components/upload/config';
+import { requestClient } from '#/api/request';
+
+// 表单数据
+const formData = reactive({
+  ticketType: '',
+  stationId: '',
+  contact: '',
+  phone: '',
+  content: '',
+  attachments: '',
+  isSubmit: false
+});
+
+// 表单规则
+const formRules = reactive({
+  ticketType: [{ required: true, message: '请选择工单类型', trigger: 'change' }],
+  stationId: [{ required: true, message: '请选择场站', trigger: 'change' }],
+  contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
+  phone: [
+    { required: true, message: '请输入联系电话', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+  ],
+  content: [{ required: true, message: '请输入提报内容', trigger: 'blur' }]
+});
+
+// 工单类型选项
+const ticketTypeOptions = ref<any[]>([]);
+// 场站选项
+const stationOptions = ref<any[]>([]);
+// 上传文件列表
+const fileList = ref([]);
+
+// 表单引用
+const formRef = ref();
+
+// 获取工单类型
+const getTicketTypes = async () => {
+  try {
+    const res = await categoryTree();
+    console.log(res);
+    ticketTypeOptions.value = res || [];
+  } catch (error) {
+    ElMessage.error('获取工单类型失败');
+    console.error('获取工单类型失败:', error);
+  }
+};
+
+// 获取场站列表
+const getStations = async () => {
+  try {
+    const res = await selectAllSysStation();
+    console.log(res);
+    stationOptions.value = res || [];
+  } catch (error) {
+    ElMessage.error('获取场站列表失败');
+    console.error('获取场站列表失败:', error);
+  }
+};
+
+// 上传成功回调
+const handleUploadSuccess = (response, file, fileList) => {
+  if (response.code === 200) {
+    // 将文件路径添加到attachments字段
+    console.log(response, file, fileList);
+    const paths = fileList.map(f => f.response.data.fileName).join(',');
+    formData.attachments = paths;
+  } else {
+    ElMessage.error('文件上传失败');
+  }
+};
+
+// 上传失败回调
+const handleUploadError = (error) => {
+  ElMessage.error('文件上传失败');
+  console.error('文件上传失败:', error);
+};
+
+// 移除文件回调
+const handleRemove = (file, fileList) => {
+  // 更新attachments字段
+  const paths = fileList.map(f => f.response.data.url).join(',');
+  formData.attachments = paths;
+};
+
+// 表单提交
+const handleSubmit = async () => {
+  if (!formRef.value) return;
+  
+  try {
+    await formRef.value.validate();
+    console.log(formData);
+    // 调用创建工单接口
+    await requestClient.post('/workOrder/order', formData);
+    
+    ElMessage.success('工单创建成功');
+    
+    // 重置表单
+    formRef.value.resetFields();
+    fileList.value = [];
+    formData.attachments = '';
+  } catch (error) {
+    if (error.name === 'ValidationError') {
+      // 表单验证失败，Element Plus会自动提示错误信息
+      return;
+    }
+    
+    ElMessage.error('工单创建失败');
+    console.error('工单创建失败:', error);
+  }
+};
+
+// 初始化数据
+const initData = () => {
+  getTicketTypes();
+  getStations();
+};
+
+// 页面加载时初始化数据
+initData();
+</script>
+
+<template>
+  <Page>
+    <div class="wrap">
+      <ElForm
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+        class="create-order-form"
+      >
+        <!-- 工单类型 -->
+        <ElFormItem label="工单类型" prop="ticketType">
+          <ElTreeSelect
+            v-model="formData.ticketType"
+            :data="ticketTypeOptions"
+            check-strictly
+            placeholder="请选择工单类型"
+            style="width: 100%"
+            :props="{ label: 'label', value: 'id', children: 'children' }"
+            filterable
+          ></ElTreeSelect>
+        </ElFormItem>
+
+        <!-- 场站 -->
+        <ElFormItem label="场站" prop="stationId">
+          <ElSelect
+            v-model="formData.stationId"
+            placeholder="请选择场站"
+            style="width: 100%"
+          >
+            <ElOption
+              v-for="option in stationOptions"
+              :key="option.id"
+              :label="option.stationName"
+              :value="option.id"
+            ></ElOption>
+          </ElSelect>
+        </ElFormItem>
+
+        <!-- 联系人 -->
+        <ElFormItem label="联系人" prop="contact">
+          <ElInput
+            v-model="formData.contact"
+            placeholder="请输入联系人"
+          ></ElInput>
+        </ElFormItem>
+
+        <!-- 联系电话 -->
+        <ElFormItem label="联系电话" prop="phone">
+          <ElInput
+            v-model="formData.phone"
+            placeholder="请输入联系电话"
+          ></ElInput>
+        </ElFormItem>
+
+        <!-- 提报内容 -->
+        <ElFormItem label="提报内容" prop="content">
+          <ElInput
+            v-model="formData.content"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入提报内容"
+          ></ElInput>
+        </ElFormItem>
+
+        <!-- 提报附件 -->
+        <ElFormItem label="提报附件">
+          <ElUpload
+            :file-list="fileList"
+            :action="getSingleImageUploadConfig().action"
+            :headers="getSingleImageUploadConfig().headers"
+            :on-success="handleUploadSuccess"
+            :on-error="handleUploadError"
+            :on-remove="handleRemove"
+            list-type="picture-card"
+            multiple
+            :limit="5"
+          >
+            <UploadFilled />
+            <template #tip>
+              <div class="el-upload__tip">
+                支持上传图片格式文件，最多5个，多个文件用逗号分隔
+              </div>
+            </template>
+          </ElUpload>
+        </ElFormItem>
+
+        <!-- 是否提交 -->
+        <ElFormItem label="是否提交">
+          <ElSwitch v-model="formData.isSubmit"></ElSwitch>
+        </ElFormItem>
+
+        <!-- 提交按钮 -->
+        <ElFormItem>
+          <ElButton type="primary" @click="handleSubmit">创建工单</ElButton>
+        </ElFormItem>
+      </ElForm>
+    </div>
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+.wrap {
+  padding: 16px;
+  background-color: #fff;
+  border-radius: 6px;
+}
+
+.create-order-form {
+  max-width: 600px;
+}
+</style>
+
+
+
+
+

apps/web-ele/src/views/workflow/register.ts

@@ -1,10 +1,12 @@
+import { defineAsyncComponent, markRaw } from 'vue';
+
 /**
  * 这里定义流程描述组件
  */
 
-// const LeaveDescription = defineAsyncComponent(
-//   () => import('#/views/workflow/leave/leave-description.vue'),
-// );
+const LeaveDescription = defineAsyncComponent(
+  () => import('#/views/workflow/leave/leave-description.vue'),
+);
 
 /**
  * key为流程的路径(task.formPath) value为要显示的组件
@@ -13,7 +15,7 @@ export const flowComponentsMap = {
   /**
    * 请假申请 详情
    */
-  '/workflow/leaveEdit/index': null,
+  '/workflow/leaveEdit/index': markRaw(LeaveDescription),
 };
 
 export type FlowComponentsMapMapKey = keyof typeof flowComponentsMap;

apps/web-ele/src/views/workflow/task/allTaskWaiting.vue

@@ -7,8 +7,19 @@ import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
-import { addFullName, getPopupContainer } from '@vben/utils';
 
+<<<<<<< HEAD
+import { Filter, Refresh } from '@element-plus/icons-vue';
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElPopover,
+  ElTooltip,
+} from 'element-plus';
+=======
 // import {
 //   Empty,
 //   Form,
@@ -21,6 +32,7 @@ import { addFullName, getPopupContainer } from '@vben/utils';
 //   Tooltip,
 //   TreeSelect,
 // } from 'ant-design-vue';
+>>>>>>> 0a5e399be8a3dc56c82fd915b6765781a5d30748
 import { cloneDeep, debounce, uniqueId } from 'lodash-es';
 
 import { categoryTree } from '#/api/workflow/category';
@@ -147,20 +159,25 @@ const handleScroll = debounce(async (e: Event) => {
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {
     loading.value = true;
-    page.value += 1;
-    const resp = await currentApi.value({
-      pageSize: 10,
-      pageNum: page.value,
-      ...formData.value,
-    });
-    taskList.value.push(
-      ...resp.rows.map((item) => ({
-        ...item,
-        active: false,
-        randomId: uniqueId(),
-      })),
-    );
-    loading.value = false;
+    try {
+      page.value += 1;
+      const resp = await currentApi.value({
+        pageSize: 10,
+        pageNum: page.value,
+        ...formData.value,
+      });
+      taskList.value.push(
+        ...resp.rows.map((item) => ({
+          ...item,
+          active: false,
+          randomId: uniqueId(),
+        })),
+      );
+    } catch {
+      ElMessage.error('加载更多任务失败');
+    } finally {
+      loading.value = false;
+    }
   }
 }, 200);
 
@@ -210,92 +227,79 @@ onMounted(async () => {
         <div
           class="bg-background z-100 sticky left-0 top-0 w-full rounded-t-lg border-b-[1px] border-solid p-2"
         >
-          <Segmented
-            v-model:value="currentType"
-            :options="typeOptions"
-            block
-            class="mb-2"
-            @change="handleTypeChange"
-          />
+          <div class="mb-2 flex items-center gap-1">
+            <ElButton
+              :type="currentType === 'todo' ? 'primary' : 'default'"
+              @click="
+                currentType = 'todo';
+                handleTypeChange();
+              "
+            >
+              待办任务
+            </ElButton>
+            <ElButton
+              :type="currentType === 'done' ? 'primary' : 'default'"
+              @click="
+                currentType = 'done';
+                handleTypeChange();
+              "
+            >
+              已办任务
+            </ElButton>
+          </div>
           <div class="flex items-center gap-1">
-            <InputSearch
-              v-model:value="formData.flowName"
+            <ElInput
+              v-model="formData.flowName"
               placeholder="流程名称搜索"
-              @search="reload(false)"
+              clearable
+              class="w-full"
+              @keyup.enter="reload(false)"
             />
-            <Tooltip placement="top" title="重置">
-              <a-button @click="reload(true)">
-                <RedoOutlined />
-              </a-button>
-            </Tooltip>
-            <Popover
-              v-model:open="popoverOpen"
-              :get-popup-container="getPopupContainer"
-              placement="rightTop"
-              trigger="click"
-            >
-              <template #title>
-                <div class="w-full border-b pb-[12px] text-[16px]">搜索</div>
+            <ElTooltip placement="top" content="重置">
+              <ElButton @click="reload(true)" circle>
+                <Refresh />
+              </ElButton>
+            </ElTooltip>
+            <ElPopover placement="top-end" trigger="click">
+              <template #reference>
+                <ElButton circle>
+                  <Filter />
+                </ElButton>
               </template>
-              <template #content>
-                <Form
-                  :colon="false"
-                  :label-col="{ span: 6 }"
+              <template #default>
+                <ElForm
                   :model="formData"
-                  autocomplete="off"
+                  label-width="80px"
                   class="w-[300px]"
-                  @finish="() => reload(false)"
+                  @submit.prevent="reload(false)"
                 >
-                  <FormItem label="申请人">
-                    <!-- 弹窗关闭后仍然显示表单浮层 -->
+                  <ElFormItem label="申请人">
                     <CopyComponent
                       v-model:user-list="selectedUserList"
                       @cancel="() => (popoverOpen = true)"
                       @finish="handleFinish"
                     />
-                  </FormItem>
-                  <FormItem label="流程分类">
-                    <TreeSelect
-                      v-model:value="formData.category"
-                      :allow-clear="true"
-                      :field-names="{ label: 'label', value: 'id' }"
-                      :get-popup-container="getPopupContainer"
-                      :tree-data="treeData"
-                      :tree-default-expand-all="true"
-                      :tree-line="{ showLeafIcon: false }"
-                      placeholder="请选择"
-                      tree-node-filter-prop="label"
-                      tree-node-label-prop="fullName"
-                    />
-                  </FormItem>
-                  <FormItem label="任务名称">
-                    <Input
-                      v-model:value="formData.nodeName"
-                      placeholder="请输入"
-                    />
-                  </FormItem>
-                  <FormItem label="流程编码">
-                    <Input
-                      v-model:value="formData.flowCode"
-                      placeholder="请输入"
-                    />
-                  </FormItem>
-                  <FormItem>
-                    <div class="flex">
-                      <a-button block html-type="submit" type="primary">
+                  </ElFormItem>
+                  <ElFormItem label="流程分类">
+                    <ElInput v-model="formData.category" placeholder="请选择" />
+                  </ElFormItem>
+                  <ElFormItem label="任务名称">
+                    <ElInput v-model="formData.nodeName" placeholder="请输入" />
+                  </ElFormItem>
+                  <ElFormItem label="流程编码">
+                    <ElInput v-model="formData.flowCode" placeholder="请输入" />
+                  </ElFormItem>
+                  <ElFormItem>
+                    <div class="flex justify-end gap-2">
+                      <ElButton type="primary" @click="reload(false)">
                         搜索
-                      </a-button>
-                      <a-button block class="ml-2" @click="reload(true)">
-                        重置
-                      </a-button>
+                      </ElButton>
+                      <ElButton @click="reload(true)"> 重置 </ElButton>
                     </div>
-                  </FormItem>
-                </Form>
+                  </ElFormItem>
+                </ElForm>
               </template>
-              <a-button>
-                <FilterOutlined />
-              </a-button>
-            </Popover>
+            </ElPopover>
           </div>
         </div>
         <div
@@ -353,7 +357,7 @@ onMounted(async () => {
   }
 }
 
-:deep(.ant-card-body) {
+:deep(.el-card__body) {
   @apply thin-scrollbar;
 }
 </style>

apps/web-ele/src/views/workflow/task/myDocument.vue

@@ -7,22 +7,15 @@ import { computed, onMounted, ref, useTemplateRef } from 'vue';
 import { Page } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
 
-// import {
-//   ElButton,
-//   ElEmpty,
-//   ElForm,
-//   ElFormItem,
-//   ElInput,
-//   ElMessage,
-//   ElPopover,
-//   ElSpin,
-//   ElTooltip,
-// } from 'element-plus';
+import { Filter, Refresh, Search } from '@element-plus/icons-vue';
+import { ElButton, ElEmpty, ElForm, ElFormItem, ElInput, ElMessage, ElPopover, ElTooltip } from 'element-plus';
+
 import { cloneDeep, debounce } from 'lodash-es';
 
-import { pageByCurrent } from '#/api/workflow/instance';
+import { pageByCurrent, getWorkOrderDetail } from '#/api/workflow/instance';
 
 import { bottomOffset } from './constant';
+import { ApprovalCard, ApprovalPanel } from '../components';
 
 const emptyImage = ElEmpty.PRESENTED_IMAGE_SIMPLE;
 
@@ -72,6 +65,7 @@ async function reload(resetFields: boolean = false) {
       pageNum: page.value,
       ...formData.value,
     });
+    console.log(resp);
     taskList.value = resp.rows.map((item) => ({ ...item, active: false }));
     taskTotal.value = resp.total;
   } catch {
@@ -111,6 +105,7 @@ const handleScroll = debounce(async (e: Event) => {
         pageNum: page.value,
         ...formData.value,
       });
+      console.log(resp);
       taskList.value.push(
         ...resp.rows.map((item) => ({ ...item, active: false })),
       );
@@ -136,6 +131,17 @@ async function handleCardClick(item: TaskInfo) {
     item.active = item.id === id;
   });
   lastSelectId.value = id;
+  console.log(lastSelectId.value);
+  
+  // 调用获取工单详情的接口
+  try {
+    const detail = await getWorkOrderDetail(id);
+    console.log('工单详情:', detail);
+    // 可以在这里使用获取到的工单详情数据
+  } catch (error) {
+    console.error('获取工单详情失败:', error);
+    ElMessage.error('获取工单详情失败');
+  }
 }
 
 const { refreshTab } = useTabs();
@@ -157,18 +163,15 @@ const { refreshTab } = useTabs();
               placeholder="流程名称搜索"
               clearable
               class="w-full"
+              :suffix-icon="Search"
               @keyup.enter="reload(false)"
             />
             <ElTooltip placement="top" content="重置">
-              <ElButton @click="reload(true)" circle>
-                <Refresh />
-              </ElButton>
+              <ElButton @click="reload(true)" :icon="Refresh" />
             </ElTooltip>
-            <ElPopover placement="right-top" trigger="click">
+            <ElPopover placement="top-end" trigger="click">
               <template #reference>
-                <ElButton circle>
-                  <Filter />
-                </ElButton>
+                <ElButton :icon="Filter"  style="margin-left: 0;" />
               </template>
               <template #default>
                 <ElForm
@@ -221,9 +224,7 @@ const { refreshTab } = useTabs();
           <div
             v-if="loading"
             class="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.1)]"
-          >
-            <ElSpin tip="加载中..." />
-          </div>
+          ></div>
         </div>
         <!-- total显示 -->
         <div
@@ -250,3 +251,4 @@ const { refreshTab } = useTabs();
   @apply thin-scrollbar;
 }
 </style>
+

apps/web-ele/src/views/workflow/task/taskCopyList.vue

@@ -1,33 +1,21 @@
 <!-- eslint-disable no-use-before-define -->
 <script setup lang="ts">
-import type { User } from '#/api/system/user/model';
 import type { TaskInfo } from '#/api/workflow/task/model';
 
 import { computed, onMounted, ref, useTemplateRef } from 'vue';
 
 import { Page } from '@vben/common-ui';
-import { addFullName, getPopupContainer } from '@vben/utils';
 
-// import {
-//   Empty,
-//   Form,
-//   FormItem,
-//   Input,
-//   InputSearch,
-//   Popover,
-//   Spin,
-//   Tooltip,
-//   TreeSelect,
-// } from 'ant-design-vue';
+import { ElEmpty, ElMessage } from 'element-plus';
+
 import { cloneDeep, debounce } from 'lodash-es';
 
-import { categoryTree } from '#/api/workflow/category';
 import { pageByTaskCopy } from '#/api/workflow/task';
 
-import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
+import { ApprovalCard, ApprovalPanel } from '../components';
 import { bottomOffset } from './constant';
 
-const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
+const emptyImage = ElEmpty.PRESENTED_IMAGE_SIMPLE;
 
 const taskList = ref<(TaskInfo & { active: boolean })[]>([]);
 const taskTotal = ref(0);
@@ -38,7 +26,6 @@ const defaultFormData = {
   flowName: '', // 流程定义名称
   nodeName: '', // 任务名称
   flowCode: '', // 流程定义编码
-  createByIds: [] as string[], // 创建人
   category: null as null | number, // 流程分类
 };
 const formData = ref(cloneDeep(defaultFormData));
@@ -67,19 +54,23 @@ async function reload(resetFields: boolean = false) {
 
   if (resetFields) {
     formData.value = cloneDeep(defaultFormData);
-    selectedUserList.value = [];
   }
 
   loading.value = true;
-  const resp = await pageByTaskCopy({
-    pageSize: 10,
-    pageNum: page.value,
-    ...formData.value,
-  });
-  taskList.value = resp.rows.map((item) => ({ ...item, active: false }));
-  taskTotal.value = resp.total;
+  try {
+    const resp = await pageByTaskCopy({
+      pageSize: 10,
+      pageNum: page.value,
+      ...formData.value,
+    });
+    taskList.value = resp.rows.map((item) => ({ ...item, active: false }));
+    taskTotal.value = resp.total;
+  } catch {
+    ElMessage.error('加载任务列表失败');
+  } finally {
+    loading.value = false;
+  }
 
-  loading.value = false;
   // 默认选中第一个
   if (taskList.value.length > 0) {
     const firstTask = taskList.value[0]!;
@@ -104,16 +95,21 @@ const handleScroll = debounce(async (e: Event) => {
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {
     loading.value = true;
-    page.value += 1;
-    const resp = await pageByTaskCopy({
-      pageSize: 10,
-      pageNum: page.value,
-      ...formData.value,
-    });
-    taskList.value.push(
-      ...resp.rows.map((item) => ({ ...item, active: false })),
-    );
-    loading.value = false;
+    try {
+      page.value += 1;
+      const resp = await pageByTaskCopy({
+        pageSize: 10,
+        pageNum: page.value,
+        ...formData.value,
+      });
+      taskList.value.push(
+        ...resp.rows.map((item) => ({ ...item, active: false })),
+      );
+    } catch {
+      ElMessage.error('加载更多任务失败');
+    } finally {
+      loading.value = false;
+    }
   }
 }, 200);
 
@@ -132,23 +128,6 @@ async function handleCardClick(item: TaskInfo) {
   });
   lastSelectId.value = id;
 }
-
-// 由于失去焦点浮层会消失 使用v-model选择人员完毕后强制显示
-const popoverOpen = ref(false);
-const selectedUserList = ref<User[]>([]);
-function handleFinish(userList: User[]) {
-  popoverOpen.value = true;
-  selectedUserList.value = userList;
-  formData.value.createByIds = userList.map((item) => item.userId);
-}
-
-const treeData = ref<any[]>([]);
-onMounted(async () => {
-  // menu
-  const tree = await categoryTree();
-  addFullName(tree, 'label', ' / ');
-  treeData.value = tree;
-});
 </script>
 
 <template>
@@ -162,84 +141,48 @@ onMounted(async () => {
           class="bg-background z-100 sticky left-0 top-0 w-full rounded-t-lg border-b-[1px] border-solid p-2"
         >
           <div class="flex items-center gap-1">
-            <InputSearch
-              v-model:value="formData.flowName"
+            <ElInput
+              v-model="formData.flowName"
               placeholder="流程名称搜索"
-              @search="reload(false)"
+              clearable
+              class="w-full"
+              @keyup.enter="reload(false)"
             />
-            <Tooltip placement="top" title="重置">
-              <a-button @click="reload(true)">
-                <RedoOutlined />
-              </a-button>
-            </Tooltip>
-            <Popover
-              v-model:open="popoverOpen"
-              :get-popup-container="getPopupContainer"
-              placement="rightTop"
-              trigger="click"
-            >
-              <template #title>
-                <div class="w-full border-b pb-[12px] text-[16px]">搜索</div>
+            <ElTooltip placement="top" content="重置">
+              <ElButton @click="reload(true)" circle>
+                <Refresh />
+              </ElButton>
+            </ElTooltip>
+            <ElPopover placement="top-end" trigger="click">
+              <template #reference>
+                <ElButton circle>
+                  <Filter />
+                </ElButton>
               </template>
-              <template #content>
-                <Form
-                  :colon="false"
-                  :label-col="{ span: 6 }"
+              <template #default>
+                <ElForm
                   :model="formData"
-                  autocomplete="off"
+                  label-width="80px"
                   class="w-[300px]"
-                  @finish="() => reload(false)"
+                  @submit.prevent="reload(false)"
                 >
-                  <FormItem label="申请人">
-                    <!-- 弹窗关闭后仍然显示表单浮层 -->
-                    <CopyComponent
-                      v-model:user-list="selectedUserList"
-                      @cancel="() => (popoverOpen = true)"
-                      @finish="handleFinish"
-                    />
-                  </FormItem>
-                  <FormItem label="流程分类">
-                    <TreeSelect
-                      v-model:value="formData.category"
-                      :allow-clear="true"
-                      :field-names="{ label: 'label', value: 'id' }"
-                      :get-popup-container="getPopupContainer"
-                      :tree-data="treeData"
-                      :tree-default-expand-all="true"
-                      :tree-line="{ showLeafIcon: false }"
-                      placeholder="请选择"
-                      tree-node-filter-prop="label"
-                      tree-node-label-prop="fullName"
-                    />
-                  </FormItem>
-                  <FormItem label="任务名称">
-                    <Input
-                      v-model:value="formData.nodeName"
-                      placeholder="请输入"
-                    />
-                  </FormItem>
-                  <FormItem label="流程编码">
-                    <Input
-                      v-model:value="formData.flowCode"
-                      placeholder="请输入"
-                    />
-                  </FormItem>
-                  <FormItem>
-                    <div class="flex">
-                      <a-button block html-type="submit" type="primary">
+                  <ElFormItem label="任务名称">
+                    <ElInput v-model="formData.nodeName" placeholder="请输入" />
+                  </ElFormItem>
+                  <ElFormItem label="流程编码">
+                    <ElInput v-model="formData.flowCode" placeholder="请输入" />
+                  </ElFormItem>
+                  <ElFormItem>
+                    <div class="flex justify-end gap-2">
+                      <ElButton type="primary" @click="reload(false)">
                         搜索
-                      </a-button>
-                      <a-button block class="ml-2" @click="reload(true)">
-                        重置
-                      </a-button>
+                      </ElButton>
+                      <ElButton @click="reload(true)"> 重置 </ElButton>
                     </div>
-                  </FormItem>
-                </Form>
+                  </ElFormItem>
+                </ElForm>
               </template>
-              <a-button>
-                <FilterOutlined />
-              </a-button>
-            </Popover>
+            </ElPopover>
           </div>
         </div>
         <div
@@ -256,7 +199,7 @@ onMounted(async () => {
               @click="handleCardClick(item)"
             />
           </template>
-          <Empty v-else :image="emptyImage" />
+          <ElEmpty v-else :image="emptyImage" description="暂无数据" />
           <div
             v-if="isLoadComplete && taskList.length > 0"
             class="flex items-center justify-center text-[14px] opacity-50"
@@ -292,7 +235,7 @@ onMounted(async () => {
   }
 }
 
-:deep(.ant-card-body) {
+:deep(.el-card__body) {
   @apply thin-scrollbar;
 }
 </style>

apps/web-ele/src/views/workflow/task/taskFinish.vue

@@ -1,33 +1,31 @@
 <!-- eslint-disable no-use-before-define -->
 <script setup lang="ts">
-import type { User } from '#/api/system/user/model';
 import type { TaskInfo } from '#/api/workflow/task/model';
 
 import { computed, onMounted, ref, useTemplateRef } from 'vue';
 
 import { Page } from '@vben/common-ui';
-import { addFullName, getPopupContainer } from '@vben/utils';
 
-// import {
-//   Empty,
-//   Form,
-//   FormItem,
-//   Input,
-//   InputSearch,
-//   Popover,
-//   Spin,
-//   Tooltip,
-//   TreeSelect,
-// } from 'ant-design-vue';
+import { Filter, Refresh } from '@element-plus/icons-vue';
+import {
+  ElButton,
+  ElEmpty,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElPopover,
+  ElTooltip,
+} from 'element-plus';
+
 import { cloneDeep, debounce } from 'lodash-es';
 
-import { categoryTree } from '#/api/workflow/category';
 import { pageByTaskFinish } from '#/api/workflow/task';
 
-import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
+import { ApprovalCard, ApprovalPanel } from '../components';
 import { bottomOffset } from './constant';
 
-const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
+const emptyImage = ElEmpty.PRESENTED_IMAGE_SIMPLE;
 
 const taskList = ref<(TaskInfo & { active: boolean })[]>([]);
 const taskTotal = ref(0);
@@ -38,8 +36,6 @@ const defaultFormData = {
   flowName: '', // 流程定义名称
   nodeName: '', // 任务名称
   flowCode: '', // 流程定义编码
-  createByIds: [] as string[], // 创建人
-  category: null as null | number, // 流程分类
 };
 const formData = ref(cloneDeep(defaultFormData));
 
@@ -67,19 +63,22 @@ async function reload(resetFields: boolean = false) {
 
   if (resetFields) {
     formData.value = cloneDeep(defaultFormData);
-    selectedUserList.value = [];
   }
 
   loading.value = true;
-  const resp = await pageByTaskFinish({
-    pageSize: 10,
-    pageNum: page.value,
-    ...formData.value,
-  });
-  taskList.value = resp.rows.map((item) => ({ ...item, active: false }));
-  taskTotal.value = resp.total;
-
-  loading.value = false;
+  try {
+    const resp = await pageByTaskFinish({
+      pageSize: 10,
+      pageNum: page.value,
+      ...formData.value,
+    });
+    taskList.value = resp.rows.map((item) => ({ ...item, active: false }));
+    taskTotal.value = resp.total;
+  } catch {
+    ElMessage.error('加载任务列表失败');
+  } finally {
+    loading.value = false;
+  }
   // 默认选中第一个
   if (taskList.value.length > 0) {
     const firstTask = taskList.value[0]!;
@@ -104,16 +103,21 @@ const handleScroll = debounce(async (e: Event) => {
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {
     loading.value = true;
-    page.value += 1;
-    const resp = await pageByTaskFinish({
-      pageSize: 10,
-      pageNum: page.value,
-      ...formData.value,
-    });
-    taskList.value.push(
-      ...resp.rows.map((item) => ({ ...item, active: false })),
-    );
-    loading.value = false;
+    try {
+      page.value += 1;
+      const resp = await pageByTaskFinish({
+        pageSize: 10,
+        pageNum: page.value,
+        ...formData.value,
+      });
+      taskList.value.push(
+        ...resp.rows.map((item) => ({ ...item, active: false })),
+      );
+    } catch {
+      ElMessage.error('加载更多任务失败');
+    } finally {
+      loading.value = false;
+    }
   }
 }, 200);
 
@@ -132,23 +136,6 @@ async function handleCardClick(item: TaskInfo) {
   });
   lastSelectId.value = id;
 }
-
-// 由于失去焦点浮层会消失 使用v-model选择人员完毕后强制显示
-const popoverOpen = ref(false);
-const selectedUserList = ref<User[]>([]);
-function handleFinish(userList: User[]) {
-  popoverOpen.value = true;
-  selectedUserList.value = userList;
-  formData.value.createByIds = userList.map((item) => item.userId);
-}
-
-const treeData = ref<any[]>([]);
-onMounted(async () => {
-  // menu
-  const tree = await categoryTree();
-  addFullName(tree, 'label', ' / ');
-  treeData.value = tree;
-});
 </script>
 
 <template>
@@ -162,84 +149,48 @@ onMounted(async () => {
           class="bg-background z-100 sticky left-0 top-0 w-full rounded-t-lg border-b-[1px] border-solid p-2"
         >
           <div class="flex items-center gap-1">
-            <InputSearch
-              v-model:value="formData.flowName"
+            <ElInput
+              v-model="formData.flowName"
               placeholder="流程名称搜索"
-              @search="reload(false)"
+              clearable
+              class="w-full"
+              @keyup.enter="reload(false)"
             />
-            <Tooltip placement="top" title="重置">
-              <a-button @click="reload(true)">
-                <RedoOutlined />
-              </a-button>
-            </Tooltip>
-            <Popover
-              v-model:open="popoverOpen"
-              :get-popup-container="getPopupContainer"
-              placement="rightTop"
-              trigger="click"
-            >
-              <template #title>
-                <div class="w-full border-b pb-[12px] text-[16px]">搜索</div>
+            <ElTooltip placement="top" content="重置">
+              <ElButton @click="reload(true)" circle>
+                <Refresh />
+              </ElButton>
+            </ElTooltip>
+            <ElPopover placement="top-end" trigger="click">
+              <template #reference>
+                <ElButton circle>
+                  <Filter />
+                </ElButton>
               </template>
-              <template #content>
-                <Form
-                  :colon="false"
-                  :label-col="{ span: 6 }"
+              <template #default>
+                <ElForm
                   :model="formData"
-                  autocomplete="off"
+                  label-width="80px"
                   class="w-[300px]"
-                  @finish="() => reload(false)"
+                  @submit.prevent="reload(false)"
                 >
-                  <FormItem label="申请人">
-                    <!-- 弹窗关闭后仍然显示表单浮层 -->
-                    <CopyComponent
-                      v-model:user-list="selectedUserList"
-                      @cancel="() => (popoverOpen = true)"
-                      @finish="handleFinish"
-                    />
-                  </FormItem>
-                  <FormItem label="流程分类">
-                    <TreeSelect
-                      v-model:value="formData.category"
-                      :allow-clear="true"
-                      :field-names="{ label: 'label', value: 'id' }"
-                      :get-popup-container="getPopupContainer"
-                      :tree-data="treeData"
-                      :tree-default-expand-all="true"
-                      :tree-line="{ showLeafIcon: false }"
-                      placeholder="请选择"
-                      tree-node-filter-prop="label"
-                      tree-node-label-prop="fullName"
-                    />
-                  </FormItem>
-                  <FormItem label="任务名称">
-                    <Input
-                      v-model:value="formData.nodeName"
-                      placeholder="请输入"
-                    />
-                  </FormItem>
-                  <FormItem label="流程编码">
-                    <Input
-                      v-model:value="formData.flowCode"
-                      placeholder="请输入"
-                    />
-                  </FormItem>
-                  <FormItem>
-                    <div class="flex">
-                      <a-button block html-type="submit" type="primary">
+                  <ElFormItem label="任务名称">
+                    <ElInput v-model="formData.nodeName" placeholder="请输入" />
+                  </ElFormItem>
+                  <ElFormItem label="流程编码">
+                    <ElInput v-model="formData.flowCode" placeholder="请输入" />
+                  </ElFormItem>
+                  <ElFormItem>
+                    <div class="flex justify-end gap-2">
+                      <ElButton type="primary" @click="reload(false)">
                         搜索
-                      </a-button>
-                      <a-button block class="ml-2" @click="reload(true)">
-                        重置
-                      </a-button>
+                      </ElButton>
+                      <ElButton @click="reload(true)"> 重置 </ElButton>
                     </div>
-                  </FormItem>
-                </Form>
+                  </ElFormItem>
+                </ElForm>
               </template>
-              <a-button>
-                <FilterOutlined />
-              </a-button>
-            </Popover>
+            </ElPopover>
           </div>
         </div>
         <div
@@ -256,7 +207,7 @@ onMounted(async () => {
               @click="handleCardClick(item)"
             />
           </template>
-          <Empty v-else :image="emptyImage" />
+          <ElEmpty v-else :image="emptyImage" description="暂无数据" />
           <div
             v-if="isLoadComplete && taskList.length > 0"
             class="flex items-center justify-center text-[14px] opacity-50"
@@ -267,9 +218,7 @@ onMounted(async () => {
           <div
             v-if="loading"
             class="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.1)]"
-          >
-            <Spin tip="加载中..." />
-          </div>
+          ></div>
         </div>
         <!-- total显示 -->
         <div
@@ -292,7 +241,7 @@ onMounted(async () => {
   }
 }
 
-:deep(.ant-card-body) {
+:deep(.el-card__body) {
   @apply thin-scrollbar;
 }
 </style>

apps/web-ele/src/views/workflow/task/taskWaiting.vue

@@ -1,34 +1,32 @@
 <!-- eslint-disable no-use-before-define -->
 <script setup lang="ts">
-import type { User } from '#/api/system/user/model';
 import type { TaskInfo } from '#/api/workflow/task/model';
 
 import { computed, onMounted, ref, useTemplateRef } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
-import { addFullName, getPopupContainer } from '@vben/utils';
 
-// import {
-//   Empty,
-//   Form,
-//   FormItem,
-//   Input,
-//   InputSearch,
-//   Popover,
-//   Spin,
-//   Tooltip,
-//   TreeSelect,
-// } from 'ant-design-vue';
+import { Filter, Refresh } from '@element-plus/icons-vue';
+import {
+  ElButton,
+  ElEmpty,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElPopover,
+  ElTooltip,
+} from 'element-plus';
+
 import { cloneDeep, debounce } from 'lodash-es';
 
-import { categoryTree } from '#/api/workflow/category';
 import { pageByTaskWait } from '#/api/workflow/task';
 
-import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
+import { ApprovalCard, ApprovalPanel } from '../components';
 import { bottomOffset } from './constant';
 
-const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
+const emptyImage = ElEmpty.PRESENTED_IMAGE_SIMPLE;
 
 const taskList = ref<(TaskInfo & { active: boolean })[]>([]);
 const taskTotal = ref(0);
@@ -39,8 +37,6 @@ const defaultFormData = {
   flowName: '', // 流程定义名称
   nodeName: '', // 任务名称
   flowCode: '', // 流程定义编码
-  createByIds: [] as string[], // 创建人
-  category: null as null | number, // 流程分类
 };
 const formData = ref(cloneDeep(defaultFormData));
 
@@ -68,19 +64,22 @@ async function reload(resetFields: boolean = false) {
 
   if (resetFields) {
     formData.value = cloneDeep(defaultFormData);
-    selectedUserList.value = [];
   }
 
   loading.value = true;
-  const resp = await pageByTaskWait({
-    pageSize: 10,
-    pageNum: page.value,
-    ...formData.value,
-  });
-  taskList.value = resp.rows.map((item) => ({ ...item, active: false }));
-  taskTotal.value = resp.total;
-
-  loading.value = false;
+  try {
+    const resp = await pageByTaskWait({
+      pageSize: 10,
+      pageNum: page.value,
+      ...formData.value,
+    });
+    taskList.value = resp.rows.map((item) => ({ ...item, active: false }));
+    taskTotal.value = resp.total;
+  } catch {
+    ElMessage.error('加载任务列表失败');
+  } finally {
+    loading.value = false;
+  }
   // 默认选中第一个
   if (taskList.value.length > 0) {
     const firstTask = taskList.value[0]!;
@@ -135,23 +134,6 @@ async function handleCardClick(item: TaskInfo) {
 }
 
 const { refreshTab } = useTabs();
-
-// 由于失去焦点浮层会消失 使用v-model选择人员完毕后强制显示
-const popoverOpen = ref(false);
-const selectedUserList = ref<User[]>([]);
-function handleFinish(userList: User[]) {
-  popoverOpen.value = true;
-  selectedUserList.value = userList;
-  formData.value.createByIds = userList.map((item) => item.userId);
-}
-
-const treeData = ref<any[]>([]);
-onMounted(async () => {
-  // menu
-  const tree = await categoryTree();
-  addFullName(tree, 'label', ' / ');
-  treeData.value = tree;
-});
 </script>
 
 <template>
@@ -165,84 +147,48 @@ onMounted(async () => {
           class="bg-background z-100 sticky left-0 top-0 w-full rounded-t-lg border-b-[1px] border-solid p-2"
         >
           <div class="flex items-center gap-1">
-            <InputSearch
-              v-model:value="formData.flowName"
+            <ElInput
+              v-model="formData.flowName"
               placeholder="流程名称搜索"
-              @search="reload(false)"
+              clearable
+              class="w-full"
+              @keyup.enter="reload(false)"
             />
-            <Tooltip placement="top" title="重置">
-              <a-button @click="reload(true)">
-                <RedoOutlined />
-              </a-button>
-            </Tooltip>
-            <Popover
-              v-model:open="popoverOpen"
-              :get-popup-container="getPopupContainer"
-              placement="rightTop"
-              trigger="click"
-            >
-              <template #title>
-                <div class="w-full border-b pb-[12px] text-[16px]">搜索</div>
+            <ElTooltip placement="top" content="重置">
+              <ElButton @click="reload(true)" circle>
+                <Refresh />
+              </ElButton>
+            </ElTooltip>
+            <ElPopover placement="top-end" trigger="click">
+              <template #reference>
+                <ElButton circle>
+                  <Filter />
+                </ElButton>
               </template>
-              <template #content>
-                <Form
-                  :colon="false"
-                  :label-col="{ span: 6 }"
+              <template #default>
+                <ElForm
                   :model="formData"
-                  autocomplete="off"
+                  label-width="80px"
                   class="w-[300px]"
-                  @finish="() => reload(false)"
+                  @submit.prevent="reload(false)"
                 >
-                  <FormItem label="申请人">
-                    <!-- 弹窗关闭后仍然显示表单浮层 -->
-                    <CopyComponent
-                      v-model:user-list="selectedUserList"
-                      @cancel="() => (popoverOpen = true)"
-                      @finish="handleFinish"
-                    />
-                  </FormItem>
-                  <FormItem label="流程分类">
-                    <TreeSelect
-                      v-model:value="formData.category"
-                      :allow-clear="true"
-                      :field-names="{ label: 'label', value: 'id' }"
-                      :get-popup-container="getPopupContainer"
-                      :tree-data="treeData"
-                      :tree-default-expand-all="true"
-                      :tree-line="{ showLeafIcon: false }"
-                      placeholder="请选择"
-                      tree-node-filter-prop="label"
-                      tree-node-label-prop="fullName"
-                    />
-                  </FormItem>
-                  <FormItem label="任务名称">
-                    <Input
-                      v-model:value="formData.nodeName"
-                      placeholder="请输入"
-                    />
-                  </FormItem>
-                  <FormItem label="流程编码">
-                    <Input
-                      v-model:value="formData.flowCode"
-                      placeholder="请输入"
-                    />
-                  </FormItem>
-                  <FormItem>
-                    <div class="flex">
-                      <a-button block html-type="submit" type="primary">
+                  <ElFormItem label="任务名称">
+                    <ElInput v-model="formData.nodeName" placeholder="请输入" />
+                  </ElFormItem>
+                  <ElFormItem label="流程编码">
+                    <ElInput v-model="formData.flowCode" placeholder="请输入" />
+                  </ElFormItem>
+                  <ElFormItem>
+                    <div class="flex justify-end gap-2">
+                      <ElButton type="primary" @click="reload(false)">
                         搜索
-                      </a-button>
-                      <a-button block class="ml-2" @click="reload(true)">
-                        重置
-                      </a-button>
+                      </ElButton>
+                      <ElButton @click="reload(true)"> 重置 </ElButton>
                     </div>
-                  </FormItem>
-                </Form>
+                  </ElFormItem>
+                </ElForm>
               </template>
-              <a-button>
-                <FilterOutlined />
-              </a-button>
-            </Popover>
+            </ElPopover>
           </div>
         </div>
         <div
@@ -259,7 +205,7 @@ onMounted(async () => {
               @click="handleCardClick(item)"
             />
           </template>
-          <Empty v-else :image="emptyImage" />
+          <ElEmpty v-else :image="emptyImage" description="暂无数据" />
           <div
             v-if="isLoadComplete && taskList.length > 0"
             class="flex items-center justify-center text-[14px] opacity-50"
@@ -270,9 +216,7 @@ onMounted(async () => {
           <div
             v-if="loading"
             class="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.1)]"
-          >
-            <Spin tip="加载中..." />
-          </div>
+          ></div>
         </div>
         <!-- total显示 -->
         <div
@@ -295,7 +239,7 @@ onMounted(async () => {
   }
 }
 
-:deep(.ant-card-body) {
+:deep(.el-card__body) {
   @apply thin-scrollbar;
 }
 </style>

packages/@core/base/shared/src/constants/dict-enum.ts

@@ -29,4 +29,5 @@ export enum DictEnum {
   WF_BUSINESS_STATUS = 'wf_business_status', // 业务状态
   WF_FORM_TYPE = 'wf_form_type', // 表单类型
   WF_TASK_STATUS = 'wf_task_status', // 任务状态
+  TICKET_STATUS = 'ticket_status', // 工单状态
 }