From a3f57a44242758e1517adf7b75fe227eeee118ff Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 19 Jan 2023 23:30:02 +0800
Subject: [PATCH] =?UTF-8?q?bpm=EF=BC=9A=E5=A2=9E=E5=8A=A0=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=A1=A8=E5=8D=95=E7=9A=84=E4=BF=9D=E5=AD=98=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/router/modules/remaining.ts           | 12 +++
 .../src/views/bpm/form/formEditor.vue         | 79 +++++++++++++++++++
 .../src/views/bpm/form/index.vue              |  7 +-
 3 files changed, 92 insertions(+), 6 deletions(-)
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue

diff --git a/yudao-ui-admin-vue3/src/router/modules/remaining.ts b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
index 1fb7c2ae8..43ad50aa6 100644
--- a/yudao-ui-admin-vue3/src/router/modules/remaining.ts
+++ b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
@@ -186,6 +186,18 @@ const remainingRouter: AppRouteRecordRaw[] = [
       hidden: true
     },
     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'),
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue b/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue
new file mode 100644
index 000000000..201b663f2
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue
@@ -0,0 +1,79 @@
+<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>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
index 068b60b1f..37733533a 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
@@ -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'
   })
 }