feat: 流程模型新增：基本信息, 部门选择组件

apps/web-antd/src/views/bpm/model/form/index.vue

@@ -12,7 +12,7 @@ import { useTabs } from '@vben/hooks';
 import { ArrowLeft } from '@vben/icons';
 import { useUserStore } from '@vben/stores';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, Card, message } from 'ant-design-vue';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
 import { getProcessDefinition } from '#/api/bpm/definition';
@@ -467,27 +467,28 @@ onBeforeUnmount(() => {
           </Button>
         </div>
       </div>
-
       <!-- 主体内容 -->
-      <div class="mt-[50px]">
-        <!-- 第一步：基本信息 -->
-        <div v-if="currentStep === 0" class="mx-auto w-[560px]">
-          <BasicInfo
-            v-model="formData"
-            :category-list="categoryList"
-            :user-list="userList"
-            :dept-list="deptList"
-            ref="basicInfoRef"
-          />
+      <Card :body-style="{ padding: '10px' }" class="mb-4">
+        <div class="mt-[50px]">
+          <!-- 第一步：基本信息 -->
+          <div v-if="currentStep === 0" class="mx-auto w-[560px]">
+            <BasicInfo
+              v-model="formData"
+              :category-list="categoryList"
+              :user-list="userList"
+              :dept-list="deptList"
+              ref="basicInfoRef"
+            />
+          </div>
+
+          <!-- 第二步：表单设计 TODO -->
+
+          <!-- 第三步：流程设计 TODO -->
+
+          <!-- 第四步：更多设置 TODO -->
+          <div v-show="currentStep === 3" class="mx-auto w-[700px]"></div>
         </div>
-
-        <!-- 第二步：表单设计 TODO -->
-
-        <!-- 第三步：流程设计 TODO -->
-
-        <!-- 第四步：更多设置 TODO -->
-        <div v-show="currentStep === 3" class="mx-auto w-[700px]"></div>
-      </div>
+      </Card>
     </div>
   </Page>
 </template>

apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue

@@ -2,6 +2,8 @@
 import type { Rule } from 'ant-design-vue/es/form';
 import type { SelectValue } from 'ant-design-vue/es/select';
 
+import type { PropType } from 'vue';
+
 import type { BpmCategoryApi } from '#/api/bpm/category';
 import type { SystemDeptApi } from '#/api/system/dept';
 import type { SystemUserApi } from '#/api/system/user';
@@ -20,18 +22,25 @@ import {
   Tooltip,
 } from 'ant-design-vue';
 
+import { DeptSelectModal } from '#/components/dept-select-modal';
 import { ImageUpload } from '#/components/upload';
 import { UserSelectModal } from '#/components/user-select-modal';
 import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '#/utils';
 
-const props = withDefaults(
-  defineProps<{
-    categoryList: BpmCategoryApi.CategoryVO[];
-    deptList: SystemDeptApi.Dept[];
-    userList: SystemUserApi.User[];
-  }>(),
-  {},
-);
+const props = defineProps({
+  categoryList: {
+    type: Array as PropType<BpmCategoryApi.CategoryVO[]>,
+    required: true,
+  },
+  userList: {
+    type: Array as PropType<SystemUserApi.User[]>,
+    required: true,
+  },
+  deptList: {
+    type: Array as PropType<SystemDeptApi.Dept[]>,
+    required: true,
+  },
+});
 
 // 表单引用
 const formRef = ref();
@@ -45,6 +54,7 @@ const selectedStartDepts = ref<SystemDeptApi.Dept[]>([]);
 // 选中的流程管理员
 const selectedManagerUsers = ref<SystemUserApi.User[]>([]);
 const userSelectFormRef = ref();
+const deptSelectFormRef = ref();
 const currentSelectType = ref<'manager' | 'start'>('start');
 // 选中的用户
 const selectedUsers = ref<number[]>();
@@ -99,8 +109,14 @@ const openStartUserSelect = () => {
 
 /** 打开部门选择 */
 const openStartDeptSelect = () => {
-  // TODO 部门选择组件暂时还没有
-  console.warn('部门选择功能暂未实现');
+  deptSelectFormRef.value.open(selectedStartDepts.value);
+};
+/** 处理部门选择确认 */
+const handleDeptSelectConfirm = (depts: SystemDeptApi.Dept[]) => {
+  modelData.value = {
+    ...modelData.value,
+    startDeptIds: depts.map((d) => d.id),
+  };
 };
 
 /** 打开管理员选择 */
@@ -343,7 +359,7 @@ defineExpose({
           :key="dept.id"
           class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2"
         >
-          <IconifyIcon icon="mdi:building-outline" class="size-5" />
+          <IconifyIcon icon="ep:office-building" class="size-6 px-1" />
           {{ dept.name }}
           <X
             class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
@@ -408,6 +424,13 @@ defineExpose({
     @closed="handleUserSelectClosed"
     @cancel="handleUserSelectCancel"
   />
+  <!-- 部门选择对话框 -->
+  <DeptSelectModal
+    ref="deptSelectFormRef"
+    title="发起人部门选择"
+    :check-strictly="true"
+    @confirm="handleDeptSelectConfirm"
+  />
 </template>
 
 <style lang="scss" scoped>