Merge branch 'dev' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev

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

@@ -10,12 +10,12 @@ import { OptionsTag } from '#/components/table';
 import { renderDict } from '#/utils/render';
 
 export const leaveTypeOptions = [
-  { label: '病假 😷', value: '1' },
+  { label: '病假', value: '1' },
-  { label: '事假 🖥', value: '2' },
+  { label: '事假', value: '2' },
-  { label: '年假 🏝', value: '3' },
+  { label: '年假', value: '3' },
-  { label: '婚假 💒', value: '4' },
+  { label: '婚假', value: '4' },
-  { label: '产假 🤰', value: '5' },
+  { label: '产假', value: '5' },
-  { label: '其他 🤔', value: '7' },
+  { label: '其他', value: '7' },
 ];
 
 export const leaveFlowOptions = [
@@ -96,7 +96,7 @@ export const columns: VxeGridProps['columns'] = [
   },
 ];
 
-export const formSchema: () => VbenFormSchema[] = () => [
+export const modalSchema: () => VbenFormSchema[] = () => [
   {
     label: '主键',
     fieldName: 'id',
@@ -129,17 +129,21 @@ export const formSchema: () => VbenFormSchema[] = () => [
     componentProps: {
       options: [
         {
-          label: '前端发起 (可选审批人, 选抄送人, 上传附件)',
+          label: '前端发起(可选审批人, 选抄送人, 上传附件)',
           value: 'frontend',
         },
-        {
+        { label: '后端发起(自行编写构造发起参数)', value: 'backend' },
-          label: '后端发起 (自行编写后端逻辑, 由后端发起流程)',
-          value: 'backend',
-        },
       ],
-      getPopupContainer,
     },
     defaultValue: 'frontend',
+    dependencies: {
+      componentProps: (model) => {
+        return {
+          disabled: model.id,
+        };
+      },
+      triggerFields: ['id'],
+    },
   },
   {
     label: '请假类型',
@@ -150,6 +154,7 @@ export const formSchema: () => VbenFormSchema[] = () => [
       getPopupContainer,
     },
     rules: 'selectRequired',
+    formItemClass: 'col-span-1',
   },
   {
     label: '开始时间',
@@ -171,6 +176,7 @@ export const formSchema: () => VbenFormSchema[] = () => [
       };
     },
     rules: 'required',
+    formItemClass: 'col-span-1',
   },
   {
     label: '请假天数',
@@ -179,11 +185,12 @@ export const formSchema: () => VbenFormSchema[] = () => [
     componentProps: {
       disabled: true,
     },
-    // rules: 'required',
+    rules: 'required',
   },
   {
     label: '请假原因',
     fieldName: 'remark',
     component: 'Textarea',
+    formItemClass: 'items-start',
   },
 ];

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

@@ -5,7 +5,9 @@ import type { LeaveForm } from './api/model';
 
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
@@ -14,10 +16,9 @@ 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 { flowInfoModal } from '../components';
 import { leaveExport, leaveList, leaveRemove } from './api';
 import { columns, querySchema } from './data';
-import leaveDrawer from './leave-drawer.vue';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -83,25 +84,13 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   },
 });
 
-const [ApplyModal, applyModalApi] = useVbenModal({
+const router = useRouter();
-  connectedComponent: applyModal,
-});
-const [LeaveDrawer, leaveDrawerApi] = useVbenDrawer({
-  connectedComponent: leaveDrawer,
-});
-
 function handleAdd() {
-  leaveDrawerApi.setData({ applyModalApi }).open();
+  router.push('/workflow/leaveEdit/index');
 }
 
 async function handleEdit(row: Required<LeaveForm>) {
-  leaveDrawerApi.setData({ id: row.id, applyModalApi }).open();
+  router.push({ path: '/workflow/leaveEdit/index', query: { id: row.id } });
-}
-
-async function handleCompleteOrCancel() {
-  leaveDrawerApi.close();
-  applyModalApi.close();
-  tableApi.query();
 }
 
 async function handleDelete(row: Required<LeaveForm>) {
@@ -144,7 +133,6 @@ function handleDownloadExcel() {
 const [FlowInfoModal, flowInfoModalApi] = useVbenModal({
   connectedComponent: flowInfoModal,
 });
-
 function handleInfo(row: Required<LeaveForm>) {
   flowInfoModalApi.setData({ businessId: row.id });
   flowInfoModalApi.open();
@@ -230,10 +218,5 @@ function handleInfo(row: Required<LeaveForm>) {
       </template>
     </BasicTable>
     <FlowInfoModal />
-    <ApplyModal
-      @complete="handleCompleteOrCancel"
-      @cancel="handleCompleteOrCancel"
-    />
-    <LeaveDrawer @reload="() => tableApi.query()" />
   </Page>
 </template>

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

@@ -1,190 +0,0 @@
-<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-antd/src/views/workflow/leave/leave-form.vue

@@ -1,7 +1,3 @@
-<!--
-这个文件用不上  已经更改交互为drawer
--->
-
 <script setup lang="ts">
 import type { StartWorkFlowReqData } from '#/api/workflow/task/model';
 
@@ -25,7 +21,7 @@ import {
   leaveUpdate,
   submitAndStartWorkflow,
 } from './api';
-import { formSchema } from './data';
+import { modalSchema } from './data';
 
 const route = useRoute();
 const id = route.query?.id as string;
@@ -41,7 +37,7 @@ const [BasicForm, formApi] = useVbenForm({
       class: 'w-full',
     },
   },
-  schema: formSchema(),
+  schema: modalSchema(),
   showDefaultActions: false,
   wrapperClass: 'grid-cols-2',
 });
@@ -188,7 +184,6 @@ async function handleCompleteOrCancel() {
         <a-button type="primary" @click="handleStartWorkFlow">提交</a-button>
       </div>
       <ApplyModal
-        :modal-api="applyModalApi"
         @complete="handleCompleteOrCancel"
         @cancel="handleCompleteOrCancel"
       />

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

@@ -2,8 +2,10 @@
 后端版本>=5.4.0  这个从本地路由变为从后台返回
 未修改文件名 而是新加了这个文件
 -->
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import LeaveFormPage from './leave-form.vue';
+</script>
 
 <template>
-  <div>交互更改为drawer打开 用不上这个文件</div>
+  <LeaveFormPage />
 </template>