bpm：增加流程表单的保存窗口

YunaiV
1 parent c9d1100e
Showing 3 changed files with 92 additions and 6 deletions
yudao-ui-admin-vue3/src/router/modules/remaining.ts
yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue
yudao-ui-admin-vue3/src/views/bpm/form/index.vue
@@ -187,6 +187,18 @@ const remainingRouter: AppRouteRecordRaw[] = [
     },
     children: [
       {
+        path: '/manager/form/edit',
+        component: () => import('@/views/bpm/form/formEditor.vue'),
+        name: 'bpmFormEditor',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '流程表单',
+          activeMenu: 'bpm/manager/form/formEditor'
+        }
+      },
+      {
         path: '/manager/definition',
         component: () => import('@/views/bpm/definition/index.vue'),
         name: 'BpmProcessDefinitionList',
+<template>
+  <ContentWrap>
+    <!-- 表单设计器 -->
+    <fc-designer ref="designer" height="780px">
+      <template #handle>
+        <XButton type="primary" :title="t('action.save')" @click="handleSave" />
+      </template>
+    </fc-designer>
+    <!-- 表单保存的弹窗 -->
+    <XModal v-model="dialogVisible" title="保存表单">
+      <el-form :model="formValues" :rules="formRules" label-width="80px">
+        <el-form-item label="表单名" prop="name">
+          <el-input v-model="formValues.name" placeholder="请输入表单名" />
+        </el-form-item>
+        <el-form-item label="开启状态" prop="status">
+          <el-radio-group v-model="formValues.status">
+            <el-radio
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.value"
+            >
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formValues.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <!-- 操作按钮 -->
+      <template #footer>
+        <!-- 按钮：保存 -->
+        <XButton
+          type="primary"
+          :title="t('action.save')"
+          :loading="dialogLoading"
+          @click="submitForm"
+        />
+        <!-- 按钮：关闭 -->
+        <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
+      </template>
+    </XModal>
+  </ContentWrap>
+</template>
+<script setup lang="ts" name="BpmFormEditor">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import { reactive } from 'vue'
+
+const { t } = useI18n() // 国际化
+// const message = useMessage() // 消息
+
+const designer = ref() // 表单设计器
+
+const dialogVisible = ref(false)
+const dialogLoading = ref(false)
+const formRules = reactive({
+  name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
+})
+const formValues = reactive({
+  name: '',
+  status: CommonStatusEnum.ENABLE,
+  remark: ''
+})
+
+// 处理保存按钮
+const handleSave = () => {
+  dialogVisible.value = true
+}
+
+// 提交保存表单
+const submitForm = async () => {
+  console.log('保存')
+}
+
+// formValue.value = designer.value.getOption()
+// formValue.value = designer.value.getRule()
+</script>
@@ -91,13 +91,8 @@ const [registerTable, { deleteData }] = useXTable({
  
 // 新增操作
 const handleCreate = () => {
-  console.log('新增')
-  if (true) {
-    message.success('动态表单开发中，预计 2 月底完成')
-    return
-  }
   router.push({
-    path: '/manager/form/edit'
+    name: 'bpmFormEditor'
   })
 }