feat: 流程新增/修改页面中-第二步骤中表单预览功能增加

Author: GoldenZqqq

src/views/bpm/model/form/BasicInfo.vue

@@ -144,7 +144,6 @@
 
 <script lang="ts" setup>
 import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
-import { BpmModelType } from '@/utils/constants'
 import { UserVO } from '@/api/system/user'
 
 const props = defineProps({

src/views/bpm/model/form/FormDesign.vue

@@ -1,11 +1,5 @@
 <template>
-  <el-form
-    ref="formRef"
-    :model="modelData"
-    :rules="rules"
-    label-width="120px"
-    class="mt-20px"
-  >
+  <el-form ref="formRef" :model="modelData" :rules="rules" label-width="120px" class="mt-20px">
     <el-form-item label="表单类型" prop="formType" class="mb-20px">
       <el-radio-group v-model="modelData.formType">
         <el-radio
@@ -19,19 +13,10 @@
     </el-form-item>
     <el-form-item v-if="modelData.formType === 10" label="流程表单" prop="formId">
       <el-select v-model="modelData.formId" clearable style="width: 100%">
-        <el-option
-          v-for="form in formList"
-          :key="form.id"
-          :label="form.name"
-          :value="form.id"
-        />
+        <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
       </el-select>
     </el-form-item>
-    <el-form-item
-      v-if="modelData.formType === 20"
-      label="表单提交路由"
-      prop="formCustomCreatePath"
-    >
+    <el-form-item v-if="modelData.formType === 20" label="表单提交路由" prop="formCustomCreatePath">
       <el-input
         v-model="modelData.formCustomCreatePath"
         placeholder="请输入表单提交路由"
@@ -46,11 +31,7 @@
         <Icon icon="ep:question" class="ml-5px" />
       </el-tooltip>
     </el-form-item>
-    <el-form-item
-      v-if="modelData.formType === 20"
-      label="表单查看地址"
-      prop="formCustomViewPath"
-    >
+    <el-form-item v-if="modelData.formType === 20" label="表单查看地址" prop="formCustomViewPath">
       <el-input
         v-model="modelData.formCustomViewPath"
         placeholder="请输入表单查看的组件地址"
@@ -65,12 +46,28 @@
         <Icon icon="ep:question" class="ml-5px" />
       </el-tooltip>
     </el-form-item>
+    <!-- 表单预览 -->
+    <div
+      v-if="modelData.formType === 10 && modelData.formId && formPreview.rule.length > 0"
+      class="mt-20px"
+    >
+      <div class="flex items-center mb-15px">
+        <div class="h-15px w-4px bg-[#1890ff] mr-10px"></div>
+        <span class="text-15px font-bold">表单预览</span>
+      </div>
+      <form-create
+        v-model="formPreview.formData"
+        :rule="formPreview.rule"
+        :option="formPreview.option"
+      />
+    </div>
   </el-form>
 </template>
 
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { BpmModelFormType } from '@/utils/constants'
+import * as FormApi from '@/api/bpm/form'
+import { setConfAndFields2 } from '@/utils/formCreate'
 
 const props = defineProps({
   modelValue: {
@@ -93,6 +90,35 @@ const modelData = computed({
   set: (val) => emit('update:modelValue', val)
 })
 
+// 表单预览数据
+const formPreview = ref({
+  formData: {},
+  rule: [],
+  option: {
+    submitBtn: false,
+    resetBtn: false,
+    formData: {}
+  }
+})
+
+// 监听表单ID变化，加载表单数据
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === 10) {
+      const data = await FormApi.getForm(newFormId)
+      setConfAndFields2(formPreview.value, data.conf, data.fields)
+      // 设置只读
+      formPreview.value.rule.forEach((item: any) => {
+        item.props = { ...item.props, disabled: true }
+      })
+    } else {
+      formPreview.value.rule = []
+    }
+  },
+  { immediate: true }
+)
+
 const rules = {
   formType: [{ required: true, message: '表单类型不能为空', trigger: 'blur' }],
   formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
@@ -108,4 +134,4 @@ const validate = async () => {
 defineExpose({
   validate
 })
-</script> 
+</script>

src/views/bpm/model/form/index.vue

@@ -1,8 +1,10 @@
 <template>
   <ContentWrap>
-    <div class="max-w-1024px mx-auto">
+    <div class="mx-auto">
       <!-- 头部导航栏 -->
-      <div class="absolute top-0 left-0 right-0 h-50px bg-white border-bottom z-10 flex items-center px-20px">
+      <div
+        class="absolute top-0 left-0 right-0 h-50px bg-white border-bottom z-10 flex items-center px-20px"
+      >
         <!-- 左侧标题 -->
         <div class="w-200px flex items-center overflow-hidden">
           <Icon icon="ep:arrow-left" class="cursor-pointer flex-shrink-0" @click="router.back()" />
@@ -14,12 +16,25 @@
         <!-- 步骤条 -->
         <div class="flex-1 flex items-center justify-center h-full">
           <div class="w-400px flex items-center justify-between h-full">
-            <div v-for="(step, index) in steps" :key="index"
+            <div
+              v-for="(step, index) in steps"
+              :key="index"
               class="flex items-center cursor-pointer mx-15px relative h-full"
-              :class="[currentStep === index ? 'text-[#3473ff] border-[#3473ff] border-b-2 border-b-solid' : 'text-gray-500']"
-              @click="handleStepClick(index)">
-              <div class="w-28px h-28px rounded-full flex items-center justify-center mr-8px border-2 border-solid text-15px"
-                :class="[currentStep === index ? 'bg-[#3473ff] text-white border-[#3473ff]' : 'border-gray-300 bg-white text-gray-500']">
+              :class="[
+                currentStep === index
+                  ? 'text-[#3473ff] border-[#3473ff] border-b-2 border-b-solid'
+                  : 'text-gray-500'
+              ]"
+              @click="handleStepClick(index)"
+            >
+              <div
+                class="w-28px h-28px rounded-full flex items-center justify-center mr-8px border-2 border-solid text-15px"
+                :class="[
+                  currentStep === index
+                    ? 'bg-[#3473ff] text-white border-[#3473ff]'
+                    : 'border-gray-300 bg-white text-gray-500'
+                ]"
+              >
                 {{ index + 1 }}
               </div>
               <span class="text-16px font-bold whitespace-nowrap">{{ step.title }}</span>
@@ -37,31 +52,38 @@
       <!-- 主体内容 -->
       <div class="mt-50px">
         <!-- 第一步：基本信息 -->
-        <BasicInfo v-if="currentStep === 0" 
-          v-model="formData"
-          :categoryList="categoryList"
-          :userList="userList"
-          ref="basicInfoRef" />
+        <div v-if="currentStep === 0" class="mx-auto" style="max-width: 1024px">
+          <BasicInfo
+            v-model="formData"
+            :categoryList="categoryList"
+            :userList="userList"
+            ref="basicInfoRef"
+          />
+        </div>
 
         <!-- 第二步：表单设计 -->
-        <FormDesign v-if="currentStep === 1"
-          v-model="formData"
-          :formList="formList"
-          ref="formDesignRef" />
+        <div v-if="currentStep === 1" class="mx-auto" style="max-width: 1024px">
+          <FormDesign
+            v-model="formData"
+            :formList="formList"
+            ref="formDesignRef"
+          />
+        </div>
 
         <!-- 第三步：流程设计 -->
-        <ProcessDesign v-if="currentStep === 2"
+        <ProcessDesign
+          v-if="currentStep === 2"
           v-model="formData"
           ref="processDesignRef"
-          @success="handleDesignSuccess" />
+          @success="handleDesignSuccess"
+        />
       </div>
     </div>
   </ContentWrap>
 </template>
 
 <script lang="ts" setup>
 import { useRouter, useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
@@ -75,7 +97,6 @@ import ProcessDesign from './ProcessDesign.vue'
 
 const router = useRouter()
 const route = useRoute()
-const { t } = useI18n()
 const message = useMessage()
 const userStore = useUserStoreWithOut()
 
@@ -106,7 +127,7 @@ const steps = [
 ]
 
 // 表单数据
-const formData = ref({
+const formData: any = ref({
   id: undefined,
   name: '',
   key: '',
@@ -128,11 +149,11 @@ const formData = ref({
 // 数据列表
 const formList = ref([])
 const categoryList = ref([])
-const userList = ref([])
+const userList = ref<UserApi.UserVO[]>([])
 
 /** 初始化数据 */
 const initData = async () => {
-  const modelId = route.params.id
+  const modelId = route.params.id as string
   if (modelId) {
     // 修改场景
     formData.value = await ModelApi.getModel(modelId)
@@ -209,7 +230,7 @@ const handleStepClick = async (index: number) => {
   }
   // 校验当前步骤
   try {
-    if (steps[currentStep.value].validator) {
+    if (typeof steps[currentStep.value].validator === 'function') {
       await steps[currentStep.value].validator()
     }
     currentStep.value = index