feat: 抄送选择

apps/web-antd/src/api/workflow/task/model.d.ts

@@ -42,7 +42,7 @@ export interface StartWorkFlowReqData {
   /**
    * 业务ID
    */
-  businessKey: ID;
+  businessId: ID;
   /**
    * flowCode
    */

apps/web-antd/src/views/workflow/components/apply-modal.vue

@@ -8,6 +8,8 @@ import { cloneDeep } from 'lodash-es';
 import { useVbenForm } from '#/adapter/form';
 import { completeTask } from '#/api/workflow/task';
 
+import { CopyComponent } from '.';
+
 interface Emits {
   /**
    * 完成
@@ -71,9 +73,14 @@ async function handleSubmit() {
     const { messageType, flowCopyList } = cloneDeep(await formApi.getValues());
     const { taskId, taskVariables, variables } =
       modalApi.getData() as ModalProps;
+    // 需要转换数据 抄送人员
+    const flowCCList = (flowCopyList as Array<any>).map((item) => ({
+      userId: item.userId,
+      userName: item.nickName,
+    }));
     const data = {
       messageType,
-      flowCopyList,
+      flowCopyList: flowCCList,
       taskId,
       taskVariables,
       variables,
@@ -92,8 +99,8 @@ async function handleSubmit() {
 <template>
   <BasicModal>
     <BasicForm>
-      <template #flowCopyList>
-        <div>TODO: 等待组件开发</div>
+      <template #flowCopyList="slotProps">
+        <CopyComponent v-model:user-list="slotProps.modelValue" />
       </template>
     </BasicForm>
   </BasicModal>

apps/web-antd/src/views/workflow/components/copy-component.vue

@@ -1,4 +1,60 @@
 <!--抄送组件-->
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { User } from '#/api/core/user';
 
-<template>dsadsa</template>
+import type { PropType } from 'vue';
+
+import { useVbenModal, VbenAvatar } from '@vben/common-ui';
+
+import { AvatarGroup, Tooltip } from 'ant-design-vue';
+
+import { userSelectModal } from '.';
+
+defineOptions({
+  name: 'CopyComponent',
+  inheritAttrs: false,
+});
+
+const [UserSelectModal, modalApi] = useVbenModal({
+  connectedComponent: userSelectModal,
+});
+
+const userListModel = defineModel('userList', {
+  type: Array as PropType<User[]>,
+  default: () => [],
+});
+
+function handleOpen() {
+  modalApi.setData({ userList: userListModel.value });
+  modalApi.open();
+}
+
+function handleFinish(userList: User[]) {
+  // 清空 直接赋值[]会丢失响应性
+  userListModel.value.splice(0, userListModel.value.length);
+  userListModel.value.push(...userList);
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <AvatarGroup v-if="userListModel.length > 0">
+      <Tooltip
+        v-for="user in userListModel"
+        :key="user.userId"
+        :title="user.nickName"
+        placement="top"
+      >
+        <div>
+          <VbenAvatar
+            :alt="user.nickName"
+            class="bg-primary size-[36px] rounded-full border text-white"
+            src=""
+          />
+        </div>
+      </Tooltip>
+    </AvatarGroup>
+    <a-button size="small" @click="handleOpen">选择人员</a-button>
+    <UserSelectModal @finish="handleFinish" />
+  </div>
+</template>

apps/web-antd/src/views/workflow/components/index.ts

@@ -10,12 +10,16 @@ export { default as ApprovalPanel } from './approval-panel.vue';
  */
 export { default as approvalRejectionModal } from './approval-rejection-modal.vue';
 export { default as ApprovalTimeline } from './approval-timeline.vue';
+/**
+ * 选择抄送人
+ */
+export { default as CopyComponent } from './copy-component.vue';
+
 /**
  * 详情信息 modal
  */
 export { default as flowInfoModal } from './flow-info-modal.vue';
-
 /**
  * 选人 支持单选/多选
  */
-export { default as UserSelectModal } from './user-select-modal.vue';
+export { default as userSelectModal } from './user-select-modal.vue';

apps/web-antd/src/views/workflow/components/user-select-modal.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable no-use-before-define -->
 <script setup lang="ts">
 import type { User } from '#/api';
 
@@ -27,6 +28,16 @@ const [BasicModal, modalApi] = useVbenModal({
   class: 'w-[1000px]',
   fullscreenButton: false,
   onConfirm: handleSubmit,
+  async onOpened() {
+    const { userList } = modalApi.getData() as { userList: User[] };
+    // 暂时只处理多选 目前并没有单选的情况
+    if (props.mode === 'multiple') {
+      // 左边选中
+      await tableApi.grid.setCheckboxRow(userList, true);
+      // 右边赋值
+      await rightTableApi.grid.loadData(userList);
+    }
+  },
 });
 
 // 左边部门用
@@ -52,12 +63,10 @@ const formOptions: VbenFormProps = {
   wrapperClass: 'grid-cols-2',
   handleReset: async () => {
     selectDeptId.value = [];
-    // eslint-disable-next-line no-use-before-define
     const { formApi, reload } = tableApi;
     await formApi.resetForm();
     const formValues = formApi.form.values;
     formApi.setLatestSubmissionValues(formValues);
-    // eslint-disable-next-line no-use-before-define
     await rightTableApi.grid.loadData([]);
     await reload(formValues);
   },
@@ -144,8 +153,6 @@ function checkBoxEvent() {
   }
   // 给右边表格赋值
   const records = tableApi.grid.getCheckboxRecords();
-  console.log(records);
-  // eslint-disable-next-line no-use-before-define
   rightTableApi.grid.loadData(records);
 }
 
@@ -155,7 +162,6 @@ function radioEvent() {
   }
   // 给右边表格赋值
   const records = tableApi.grid.getRadioRecord();
-  // eslint-disable-next-line no-use-before-define
   rightTableApi.grid.loadData([records]);
 }
 
@@ -234,7 +240,6 @@ async function handleDeptQuery() {
 
 function handleSubmit() {
   const records = rightTableApi.grid.getData();
-  console.log(records);
   emit('finish', records);
   modalApi.close();
 }

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

@@ -16,7 +16,7 @@ import {
 import { cancelProcessApply } from '#/api/workflow/instance';
 import { commonDownloadExcel } from '#/utils/file/download';
 
-import { flowInfoModal } from '../components';
+import { applyModal, flowInfoModal } from '../components';
 import userSelectModal from '../components/user-select-modal.vue';
 import { leaveExport, leaveList, leaveRemove } from './api';
 import { columns, querySchema } from './data';
@@ -129,6 +129,9 @@ const [UserSelectModal, testApi] = useVbenModal({
 function handleTest() {
   testApi.open();
 }
+const [ApplyModal, applyModalApi] = useVbenModal({
+  connectedComponent: applyModal,
+});
 </script>
 
 <template>
@@ -137,6 +140,7 @@ function handleTest() {
       <template #toolbar-tools>
         <Space>
           <a-button @click="handleTest">test选人</a-button>
+          <a-button @click="() => applyModalApi.open()">test抄送</a-button>
           <a-button
             v-access:code="['workflow:leave:export']"
             @click="handleDownloadExcel"
@@ -205,5 +209,6 @@ function handleTest() {
     </BasicTable>
     <UserSelectModal mode="single" />
     <FlowInfoModal />
+    <ApplyModal />
   </Page>
 </template>

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

@@ -116,7 +116,7 @@ async function handleStartWorkFlow() {
     const formValues = await formApi.getValues();
     const flowCode = formValues?.flowType ?? 'leave1';
     const startWorkFlowData: StartWorkFlowReqData = {
-      businessKey: leaveResp!.id,
+      businessId: leaveResp!.id,
       flowCode,
       variables: taskVariables,
     };